From 9f2a9d43b1c23365dd88e08ed5c717619843e631 Mon Sep 17 00:00:00 2001 From: Nate Butler Date: Fri, 15 Sep 2023 16:34:56 -0400 Subject: [PATCH] Organize design system under `ui` --- crates/storybook/src/components.rs | 16 - crates/storybook/src/modules.rs | 10 - crates/storybook/src/storybook.rs | 2 +- crates/storybook/src/ui.rs | 21 + crates/storybook/src/ui/component.rs | 1 + .../src/{components => ui/component}/tab.rs | 0 crates/storybook/src/ui/element.rs | 4 + .../src/{components => ui/element}/avatar.rs | 2 +- .../{components => ui/element}/icon_button.rs | 0 .../{components => ui/element}/text_button.rs | 0 .../element}/tool_divider.rs | 0 crates/storybook/src/ui/module.rs | 4 + .../src/{modules => ui/module}/chat_panel.rs | 2 +- .../src/{modules => ui/module}/status_bar.rs | 6 +- .../src/{modules => ui/module}/tab_bar.rs | 2 +- .../src/{modules => ui/module}/title_bar.rs | 4 +- crates/storybook/src/workspace.rs | 398 +----------------- 17 files changed, 43 insertions(+), 429 deletions(-) delete mode 100644 crates/storybook/src/modules.rs create mode 100644 crates/storybook/src/ui.rs create mode 100644 crates/storybook/src/ui/component.rs rename crates/storybook/src/{components => ui/component}/tab.rs (100%) create mode 100644 crates/storybook/src/ui/element.rs rename crates/storybook/src/{components => ui/element}/avatar.rs (92%) rename crates/storybook/src/{components => ui/element}/icon_button.rs (100%) rename crates/storybook/src/{components => ui/element}/text_button.rs (100%) rename crates/storybook/src/{components => ui/element}/tool_divider.rs (100%) create mode 100644 crates/storybook/src/ui/module.rs rename crates/storybook/src/{modules => ui/module}/chat_panel.rs (97%) rename crates/storybook/src/{modules => ui/module}/status_bar.rs (95%) rename crates/storybook/src/{modules => ui/module}/tab_bar.rs (98%) rename crates/storybook/src/{modules => ui/module}/title_bar.rs (95%) diff --git a/crates/storybook/src/components.rs b/crates/storybook/src/components.rs index e407bd43f8..1aafefc1a6 100644 --- a/crates/storybook/src/components.rs +++ b/crates/storybook/src/components.rs @@ -4,22 +4,6 @@ use gpui2::{ }; use std::{marker::PhantomData, rc::Rc}; -mod avatar; -mod icon_button; -mod tab; -mod text_button; -mod tool_divider; - -pub use avatar::avatar; -pub use avatar::Avatar; -pub use icon_button::icon_button; -pub use tab::tab; -pub use tab::Tab; -pub use text_button::text_button; -pub use text_button::TextButton; -pub use tool_divider::tool_divider; -pub use tool_divider::ToolDivider; - struct ButtonHandlers { click: Option)>>, } diff --git a/crates/storybook/src/modules.rs b/crates/storybook/src/modules.rs deleted file mode 100644 index a27ea1cc12..0000000000 --- a/crates/storybook/src/modules.rs +++ /dev/null @@ -1,10 +0,0 @@ -mod chat_panel; -mod status_bar; -mod tab_bar; -mod title_bar; - -pub(crate) use chat_panel::chat_panel; -pub use status_bar::status_bar; -pub use status_bar::StatusBar; -pub(crate) use tab_bar::tab_bar; -pub(crate) use title_bar::title_bar; diff --git a/crates/storybook/src/storybook.rs b/crates/storybook/src/storybook.rs index fc7f861e80..df1db7b8c2 100644 --- a/crates/storybook/src/storybook.rs +++ b/crates/storybook/src/storybook.rs @@ -12,9 +12,9 @@ use simplelog::SimpleLogger; mod collab_panel; mod components; mod element_ext; -mod modules; mod prelude; mod theme; +mod ui; mod workspace; gpui2::actions! { diff --git a/crates/storybook/src/ui.rs b/crates/storybook/src/ui.rs new file mode 100644 index 0000000000..fecb36412e --- /dev/null +++ b/crates/storybook/src/ui.rs @@ -0,0 +1,21 @@ +mod component; +mod element; +mod module; + +pub use component::tab::tab; +pub use component::tab::Tab; + +pub use module::chat_panel::chat_panel; +pub use module::status_bar::status_bar; +pub use module::status_bar::StatusBar; +pub use module::tab_bar::tab_bar; +pub use module::title_bar::title_bar; + +pub use element::avatar::avatar; +pub use element::avatar::Avatar; +pub use element::icon_button::icon_button; +pub use element::icon_button::IconButton; +pub use element::text_button::text_button; +pub use element::text_button::TextButton; +pub use element::tool_divider::tool_divider; +pub use element::tool_divider::ToolDivider; diff --git a/crates/storybook/src/ui/component.rs b/crates/storybook/src/ui/component.rs new file mode 100644 index 0000000000..c87bc82d9b --- /dev/null +++ b/crates/storybook/src/ui/component.rs @@ -0,0 +1 @@ +pub(crate) mod tab; diff --git a/crates/storybook/src/components/tab.rs b/crates/storybook/src/ui/component/tab.rs similarity index 100% rename from crates/storybook/src/components/tab.rs rename to crates/storybook/src/ui/component/tab.rs diff --git a/crates/storybook/src/ui/element.rs b/crates/storybook/src/ui/element.rs new file mode 100644 index 0000000000..382da0f731 --- /dev/null +++ b/crates/storybook/src/ui/element.rs @@ -0,0 +1,4 @@ +pub(crate) mod avatar; +pub(crate) mod icon_button; +pub(crate) mod text_button; +pub(crate) mod tool_divider; diff --git a/crates/storybook/src/components/avatar.rs b/crates/storybook/src/ui/element/avatar.rs similarity index 92% rename from crates/storybook/src/components/avatar.rs rename to crates/storybook/src/ui/element/avatar.rs index 6e136977c8..bfa4ed0175 100644 --- a/crates/storybook/src/components/avatar.rs +++ b/crates/storybook/src/ui/element/avatar.rs @@ -13,7 +13,7 @@ pub struct Avatar { shape: Shape, } -pub fn avatar(src: impl Into>) -> Avatar { +pub fn avatar(src: impl Into>) -> Avatar { Avatar { src: src.into(), shape: Shape::Circle, diff --git a/crates/storybook/src/components/icon_button.rs b/crates/storybook/src/ui/element/icon_button.rs similarity index 100% rename from crates/storybook/src/components/icon_button.rs rename to crates/storybook/src/ui/element/icon_button.rs diff --git a/crates/storybook/src/components/text_button.rs b/crates/storybook/src/ui/element/text_button.rs similarity index 100% rename from crates/storybook/src/components/text_button.rs rename to crates/storybook/src/ui/element/text_button.rs diff --git a/crates/storybook/src/components/tool_divider.rs b/crates/storybook/src/ui/element/tool_divider.rs similarity index 100% rename from crates/storybook/src/components/tool_divider.rs rename to crates/storybook/src/ui/element/tool_divider.rs diff --git a/crates/storybook/src/ui/module.rs b/crates/storybook/src/ui/module.rs new file mode 100644 index 0000000000..a84bd67165 --- /dev/null +++ b/crates/storybook/src/ui/module.rs @@ -0,0 +1,4 @@ +pub(crate) mod chat_panel; +pub(crate) mod status_bar; +pub(crate) mod tab_bar; +pub(crate) mod title_bar; diff --git a/crates/storybook/src/modules/chat_panel.rs b/crates/storybook/src/ui/module/chat_panel.rs similarity index 97% rename from crates/storybook/src/modules/chat_panel.rs rename to crates/storybook/src/ui/module/chat_panel.rs index 73131e5434..de4428826b 100644 --- a/crates/storybook/src/modules/chat_panel.rs +++ b/crates/storybook/src/ui/module/chat_panel.rs @@ -1,7 +1,7 @@ use std::marker::PhantomData; -use crate::components::icon_button; use crate::theme::theme; +use crate::ui::icon_button; use gpui2::elements::div::ScrollState; use gpui2::style::StyleHelpers; use gpui2::{elements::div, IntoElement}; diff --git a/crates/storybook/src/modules/status_bar.rs b/crates/storybook/src/ui/module/status_bar.rs similarity index 95% rename from crates/storybook/src/modules/status_bar.rs rename to crates/storybook/src/ui/module/status_bar.rs index feb883a33a..f34cfa88ef 100644 --- a/crates/storybook/src/modules/status_bar.rs +++ b/crates/storybook/src/ui/module/status_bar.rs @@ -1,7 +1,7 @@ use std::marker::PhantomData; -use crate::components::{icon_button, tool_divider}; use crate::theme::{theme, Theme}; +use crate::ui::{icon_button, text_button, tool_divider}; use gpui2::style::StyleHelpers; use gpui2::{elements::div, IntoElement}; use gpui2::{Element, ParentElement, ViewContext}; @@ -120,8 +120,8 @@ impl StatusBar { .flex() .items_center() .gap_1() - .child(div().px_1().text_xs().child("116:25")) - .child(div().px_1().text_xs().child("Rust")), + .child(text_button("116:25")) + .child(text_button("Rust")), ) .child(tool_divider()) .child( diff --git a/crates/storybook/src/modules/tab_bar.rs b/crates/storybook/src/ui/module/tab_bar.rs similarity index 98% rename from crates/storybook/src/modules/tab_bar.rs rename to crates/storybook/src/ui/module/tab_bar.rs index c2536ad06c..9b96171f2f 100644 --- a/crates/storybook/src/modules/tab_bar.rs +++ b/crates/storybook/src/ui/module/tab_bar.rs @@ -1,8 +1,8 @@ use std::marker::PhantomData; -use crate::components::{icon_button, tab}; use crate::prelude::InteractionState; use crate::theme::theme; +use crate::ui::{icon_button, tab}; use gpui2::elements::div::ScrollState; use gpui2::style::StyleHelpers; use gpui2::{elements::div, IntoElement}; diff --git a/crates/storybook/src/modules/title_bar.rs b/crates/storybook/src/ui/module/title_bar.rs similarity index 95% rename from crates/storybook/src/modules/title_bar.rs rename to crates/storybook/src/ui/module/title_bar.rs index 59ec1227f4..9aab5a2d5e 100644 --- a/crates/storybook/src/modules/title_bar.rs +++ b/crates/storybook/src/ui/module/title_bar.rs @@ -1,8 +1,8 @@ use std::marker::PhantomData; -use crate::components::{avatar, icon_button, text_button, tool_divider, Avatar, TextButton}; use crate::prelude::Shape; use crate::theme::theme; +use crate::ui::{avatar, icon_button, text_button, tool_divider}; use gpui2::style::StyleHelpers; use gpui2::{elements::div, IntoElement}; use gpui2::{Element, ParentElement, ViewContext}; @@ -100,7 +100,7 @@ impl TitleBar { ) .child( div().px_2().flex().items_center().child( - avatar::("https://avatars.githubusercontent.com/u/1714999?v=4") + avatar("https://avatars.githubusercontent.com/u/1714999?v=4") .shape(Shape::RoundedRectangle), ), ), diff --git a/crates/storybook/src/workspace.rs b/crates/storybook/src/workspace.rs index 1bcbc79b32..5aae506832 100644 --- a/crates/storybook/src/workspace.rs +++ b/crates/storybook/src/workspace.rs @@ -1,11 +1,11 @@ use crate::{ collab_panel::collab_panel, - modules::{chat_panel, status_bar, tab_bar, title_bar}, theme::theme, + ui::{chat_panel, status_bar, tab_bar, title_bar}, }; use gpui2::{ - elements::{div, div::ScrollState, img, svg}, - style::{StyleHelpers, Styleable}, + elements::{div, div::ScrollState}, + style::StyleHelpers, Element, IntoElement, ParentElement, ViewContext, }; @@ -33,7 +33,7 @@ impl WorkspaceElement { .justify_start() .items_start() .text_color(theme.lowest.base.default.foreground) - .fill(theme.middle.base.default.background) + .fill(theme.lowest.base.default.background) .child(title_bar()) .child( div() @@ -58,396 +58,6 @@ impl WorkspaceElement { ) .child(chat_panel(self.right_scroll_state.clone())), ) - .child(statusbar()) .child(status_bar()) } } - -#[derive(Element)] -struct TitleBar; - -pub fn titlebar() -> impl Element { - TitleBar -} - -impl TitleBar { - fn render(&mut self, _: &mut V, cx: &mut ViewContext) -> impl IntoElement { - let theme = theme(cx); - div() - .flex() - .items_center() - .justify_between() - .w_full() - .h_8() - .fill(theme.lowest.base.default.background) - .child(self.left_group(cx)) - .child(self.right_group(cx)) - } - - fn left_group(&mut self, cx: &mut ViewContext) -> impl IntoElement { - let theme = theme(cx); - div() - .flex() - .items_center() - .h_full() - .gap_4() - .px_2() - // === Traffic Lights === // - .child( - div() - .flex() - .items_center() - .gap_2() - .child( - div() - .w_3() - .h_3() - .rounded_full() - .fill(theme.lowest.positive.default.foreground), - ) - .child( - div() - .w_3() - .h_3() - .rounded_full() - .fill(theme.lowest.warning.default.foreground), - ) - .child( - div() - .w_3() - .h_3() - .rounded_full() - .fill(theme.lowest.negative.default.foreground), - ), - ) - // === Project Info === // - .child( - div() - .flex() - .items_center() - .gap_1() - .child( - div() - .h_full() - .flex() - .items_center() - .justify_center() - .px_2() - .rounded_md() - .hover() - .fill(theme.lowest.base.hovered.background) - .active() - .fill(theme.lowest.base.pressed.background) - .child(div().text_sm().child("project")), - ) - .child( - div() - .h_full() - .flex() - .items_center() - .justify_center() - .px_2() - .rounded_md() - .text_color(theme.lowest.variant.default.foreground) - .hover() - .fill(theme.lowest.base.hovered.background) - .active() - .fill(theme.lowest.base.pressed.background) - .child(div().text_sm().child("branch")), - ), - ) - } - - fn right_group(&mut self, cx: &mut ViewContext) -> impl IntoElement { - let theme = theme(cx); - div() - .flex() - .items_center() - .h_full() - .gap_3() - .px_2() - // === Actions === // - .child( - div().child( - div().flex().items_center().gap_1().child( - div().size_4().flex().items_center().justify_center().child( - svg() - .path("icons/exit.svg") - .size_4() - .fill(theme.lowest.base.default.foreground), - ), - ), - ), - ) - .child(div().w_px().h_3().fill(theme.lowest.base.default.border)) - // === Comms === // - .child( - div().child( - div() - .flex() - .items_center() - .gap_px() - .child( - div() - .px_2() - .py_1() - .rounded_md() - .h_full() - .flex() - .items_center() - .justify_center() - .hover() - .fill(theme.lowest.base.hovered.background) - .active() - .fill(theme.lowest.base.pressed.background) - .child( - svg() - .path("icons/microphone.svg") - .size_3p5() - .fill(theme.lowest.base.default.foreground), - ), - ) - .child( - div() - .px_2() - .py_1() - .rounded_md() - .h_full() - .flex() - .items_center() - .justify_center() - .hover() - .fill(theme.lowest.base.hovered.background) - .active() - .fill(theme.lowest.base.pressed.background) - .child( - svg() - .path("icons/speaker-loud.svg") - .size_3p5() - .fill(theme.lowest.base.default.foreground), - ), - ) - .child( - div() - .px_2() - .py_1() - .rounded_md() - .h_full() - .flex() - .items_center() - .justify_center() - .hover() - .fill(theme.lowest.base.hovered.background) - .active() - .fill(theme.lowest.base.pressed.background) - .child( - svg() - .path("icons/desktop.svg") - .size_3p5() - .fill(theme.lowest.base.default.foreground), - ), - ), - ), - ) - .child(div().w_px().h_3().fill(theme.lowest.base.default.border)) - // User Group - .child( - div().child( - div() - .px_1() - .py_1() - .flex() - .items_center() - .justify_center() - .rounded_md() - .gap_0p5() - .hover() - .fill(theme.lowest.base.hovered.background) - .active() - .fill(theme.lowest.base.pressed.background) - .child( - img() - .uri("https://avatars.githubusercontent.com/u/1714999?v=4") - .size_4() - .rounded_md() - .fill(theme.middle.on.default.foreground), - ) - .child( - svg() - .path("icons/caret_down.svg") - .w_2() - .h_2() - .fill(theme.lowest.variant.default.foreground), - ), - ), - ) - } -} - -// ================================================================================ // - -#[derive(Element)] -struct StatusBar; - -pub fn statusbar() -> impl Element { - StatusBar -} - -impl StatusBar { - fn render(&mut self, _: &mut V, cx: &mut ViewContext) -> impl IntoElement { - let theme = theme(cx); - div() - .flex() - .items_center() - .justify_between() - .w_full() - .h_8() - .fill(theme.lowest.base.default.background) - .child(self.left_group(cx)) - .child(self.right_group(cx)) - } - - fn left_group(&mut self, cx: &mut ViewContext) -> impl IntoElement { - let theme = theme(cx); - div() - .flex() - .items_center() - .h_full() - .gap_4() - .px_2() - // === Tools === // - .child( - div() - .flex() - .items_center() - .gap_1() - .child( - div() - .w_6() - .h_full() - .flex() - .items_center() - .justify_center() - .child( - svg() - .path("icons/project.svg") - .w_4() - .h_4() - .fill(theme.lowest.base.default.foreground), - ), - ) - .child( - div() - .w_6() - .h_full() - .flex() - .items_center() - .justify_center() - .child( - svg() - .path("icons/conversations.svg") - .w_4() - .h_4() - .fill(theme.lowest.base.default.foreground), - ), - ) - .child( - div() - .w_6() - .h_full() - .flex() - .items_center() - .justify_center() - .child( - svg() - .path("icons/file_icons/notebook.svg") - .w_4() - .h_4() - .fill(theme.lowest.accent.default.foreground), - ), - ), - ) - // === Diagnostics === // - .child( - div() - .flex() - .items_center() - .gap_2() - .child( - div() - .h_full() - .flex() - .items_center() - .justify_center() - .gap_0p5() - .px_1() - .text_color(theme.lowest.variant.default.foreground) - .hover() - .fill(theme.lowest.base.hovered.background) - .active() - .fill(theme.lowest.base.pressed.background) - .child( - svg() - .path("icons/error.svg") - .w_4() - .h_4() - .fill(theme.lowest.negative.default.foreground), - ) - .child(div().text_sm().child("2")), - ) - .child( - div() - .text_sm() - .text_color(theme.lowest.variant.default.foreground) - .child("Something is wrong"), - ), - ) - } - - fn right_group(&mut self, cx: &mut ViewContext) -> impl IntoElement { - let theme = theme(cx); - div() - .flex() - .items_center() - .h_full() - .gap_4() - .px_2() - // === Tools === // - .child( - div() - .flex() - .items_center() - .gap_1() - .child( - div() - .w_6() - .h_full() - .flex() - .items_center() - .justify_center() - .child( - svg() - .path("icons/check_circle.svg") - .w_4() - .h_4() - .fill(theme.lowest.base.default.foreground), - ), - ) - .child( - div() - .w_6() - .h_full() - .flex() - .items_center() - .justify_center() - .child( - svg() - .path("icons/copilot.svg") - .w_4() - .h_4() - .fill(theme.lowest.accent.default.foreground), - ), - ), - ) - } -}