Skip to main content

tablo_ui/
lib.rs

1//! Renders the styled components `tablo-core` uses; apps depend on this crate
2//! instead of running `topcoat ui add`.
3
4pub mod components;
5pub mod icons;
6
7// The primitives under `components/primitives/` are copied verbatim from `topcoat-ui-registry`
8// (sync with `cargo xtask sync-topcoat-ui`); owned code lives in `components/composites/`.
9//
10// Only the primitives a custom page builds from are public API. The rest are `#[doc(hidden)]`:
11// `tablo-core` renders with them, but a registry change to them never moves Tablo's semver. The
12// sync's `PUBLIC_PRIMITIVES` list decides which is which.
13#[doc(hidden)]
14pub use components::primitives::{
15    alert_dialog::alert_dialog,
16    avatar::{AvatarSize, avatar, avatar_fallback, avatar_image},
17    breadcrumb::{
18        breadcrumb, breadcrumb_ellipsis, breadcrumb_item, breadcrumb_link, breadcrumb_list,
19        breadcrumb_page, breadcrumb_separator,
20    },
21    dialog::{
22        dialog, dialog_content, dialog_description, dialog_footer, dialog_header, dialog_title,
23    },
24    dropdown_menu::{
25        dropdown_menu, dropdown_menu_content, dropdown_menu_item, dropdown_menu_label,
26        dropdown_menu_separator, dropdown_menu_sub, dropdown_menu_sub_content,
27        dropdown_menu_sub_trigger, dropdown_menu_trigger,
28    },
29    floating::{FLOATING_SCOPE, FloatingAlign, FloatingAnchor, FloatingSide, floating_variants},
30    pagination::{
31        pagination, pagination_content, pagination_ellipsis, pagination_item, pagination_link,
32        pagination_next, pagination_previous,
33    },
34    sheet::{SheetSide, sheet, sheet_content},
35    sidebar::{
36        SidebarCollapsible, SidebarMenuButtonSize, SidebarMenuButtonVariant, SidebarSide,
37        SidebarVariant, sidebar, sidebar_content, sidebar_footer, sidebar_group,
38        sidebar_group_action, sidebar_group_content, sidebar_group_label, sidebar_header,
39        sidebar_input, sidebar_inset, sidebar_menu, sidebar_menu_action, sidebar_menu_badge,
40        sidebar_menu_button, sidebar_menu_button_variants, sidebar_menu_item,
41        sidebar_menu_skeleton, sidebar_menu_sub, sidebar_menu_sub_button, sidebar_menu_sub_item,
42        sidebar_provider, sidebar_rail, sidebar_separator, sidebar_trigger,
43    },
44};
45pub use components::{
46    composites::{
47        empty_state::empty_state,
48        error_state::error_state,
49        page::{page, page_actions, page_content, page_description, page_header, page_title},
50        stat::stat,
51        toast::{
52            toast, toast_close, toast_content, toast_description, toast_icon, toast_title, toaster,
53        },
54    },
55    primitives::{
56        alert::{AlertVariant, alert, alert_description, alert_title},
57        badge::{BadgeVariant, badge, badge_variants},
58        button::{ButtonSize, ButtonVariant, button, button_variants},
59        card::{card, card_content, card_description, card_footer, card_header, card_title},
60        checkbox::checkbox,
61        field::{
62            FieldLegendVariant, FieldOrientation, field, field_content, field_description,
63            field_error, field_group, field_label, field_legend, field_separator, field_set,
64            field_title,
65        },
66        input::input,
67        label::label,
68        radio_group::{radio_group, radio_group_item},
69        select::select,
70        separator::{SeparatorOrientation, separator},
71        skeleton::skeleton,
72        switch::switch,
73        table::{
74            table, table_body, table_caption, table_cell, table_footer, table_head, table_header,
75            table_row,
76        },
77        textarea::textarea,
78    },
79};
80
81/// Tablo's prebuilt stylesheet: Tailwind over Tablo's own sources on the default theme, for
82/// `Panel::shell_assets`. It styles every panel page and none of the app's own classes; an app
83/// that changes a token or writes Tailwind classes builds its own with `tablo_build::tailwind()`.
84pub const DEFAULT_STYLESHEET: topcoat::asset::Asset = topcoat::asset::asset!("../assets/tablo.css");
85pub const SIDEBAR_JS: topcoat::asset::Asset = topcoat::asset::asset!("../assets/sidebar.js");
86pub const THEME_JS: topcoat::asset::Asset = topcoat::asset::asset!("../assets/theme.js");
87pub const SELECTS_JS: topcoat::asset::Asset = topcoat::asset::asset!("../assets/selects.js");
88pub const REPEATERS_JS: topcoat::asset::Asset = topcoat::asset::asset!("../assets/repeaters.js");
89pub const FILE_LISTS_JS: topcoat::asset::Asset = topcoat::asset::asset!("../assets/file_lists.js");
90pub const PASSWORD_JS: topcoat::asset::Asset = topcoat::asset::asset!("../assets/password.js");
91pub const TABS_JS: topcoat::asset::Asset = topcoat::asset::asset!("../assets/tabs.js");
92pub const WIZARD_JS: topcoat::asset::Asset = topcoat::asset::asset!("../assets/wizard.js");
93pub const FORMS_JS: topcoat::asset::Asset = topcoat::asset::asset!("../assets/forms.js");
94pub const RICH_TEXT_JS: topcoat::asset::Asset = topcoat::asset::asset!("../assets/rich_text.js");
95pub const SEARCH_SHORTCUT_JS: topcoat::asset::Asset =
96    topcoat::asset::asset!("../assets/search_shortcut.js");
97pub const CHOICE_CREATE_JS: topcoat::asset::Asset =
98    topcoat::asset::asset!("../assets/choice_create.js");
99/// The TipTap bundle `rich_text.js` imports where a page holds a rich text control (ADR-0032):
100/// no page loads it otherwise.
101pub const TIPTAP_JS: topcoat::asset::Asset = topcoat::asset::asset!("../assets/tiptap/tiptap.js");
102
103/// The scripts every panel page loads, in order.
104pub const SHELL_SCRIPTS: [topcoat::asset::Asset; 12] = [
105    SIDEBAR_JS,
106    THEME_JS,
107    SELECTS_JS,
108    CHOICE_CREATE_JS,
109    REPEATERS_JS,
110    FILE_LISTS_JS,
111    PASSWORD_JS,
112    TABS_JS,
113    WIZARD_JS,
114    FORMS_JS,
115    RICH_TEXT_JS,
116    SEARCH_SHORTCUT_JS,
117];