Organize design system under `ui`

Nate Butler created 2 years ago

Change summary

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 
crates/storybook/src/ui/component/tab.rs        |   0 
crates/storybook/src/ui/element.rs              |   4 
crates/storybook/src/ui/element/avatar.rs       |   2 
crates/storybook/src/ui/element/icon_button.rs  |   0 
crates/storybook/src/ui/element/text_button.rs  |   0 
crates/storybook/src/ui/element/tool_divider.rs |   0 
crates/storybook/src/ui/module.rs               |   4 
crates/storybook/src/ui/module/chat_panel.rs    |   2 
crates/storybook/src/ui/module/status_bar.rs    |   6 
crates/storybook/src/ui/module/tab_bar.rs       |   2 
crates/storybook/src/ui/module/title_bar.rs     |   4 
crates/storybook/src/workspace.rs               | 398 ------------------
17 files changed, 43 insertions(+), 429 deletions(-)

Detailed changes

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<V, D> {
     click: Option<Rc<dyn Fn(&mut V, &D, &mut EventContext<V>)>>,
 }

crates/storybook/src/modules.rs

@@ -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;

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! {

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;

crates/storybook/src/ui/component.rs

@@ -0,0 +1 @@
+pub(crate) mod tab;

crates/storybook/src/components/tab.rs → crates/storybook/src/ui/component/tab.rs

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;

crates/storybook/src/components/avatar.rs → crates/storybook/src/ui/element/avatar.rs

@@ -13,7 +13,7 @@ pub struct Avatar {
     shape: Shape,
 }
 
-pub fn avatar<V: 'static>(src: impl Into<ArcCow<'static, str>>) -> Avatar {
+pub fn avatar(src: impl Into<ArcCow<'static, str>>) -> Avatar {
     Avatar {
         src: src.into(),
         shape: Shape::Circle,

crates/storybook/src/components/icon_button.rs → crates/storybook/src/ui/element/icon_button.rs

crates/storybook/src/components/text_button.rs → crates/storybook/src/ui/element/text_button.rs

crates/storybook/src/components/tool_divider.rs → crates/storybook/src/ui/element/tool_divider.rs

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;

crates/storybook/src/modules/chat_panel.rs → 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};

crates/storybook/src/modules/status_bar.rs → 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<V: 'static> StatusBar<V> {
                     .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(

crates/storybook/src/modules/tab_bar.rs → 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};

crates/storybook/src/modules/title_bar.rs → 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<V: 'static> TitleBar<V> {
                     )
                     .child(
                         div().px_2().flex().items_center().child(
-                            avatar::<Avatar>("https://avatars.githubusercontent.com/u/1714999?v=4")
+                            avatar("https://avatars.githubusercontent.com/u/1714999?v=4")
                                 .shape(Shape::RoundedRectangle),
                         ),
                     ),

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<V: 'static>() -> impl Element<V> {
-    TitleBar
-}
-
-impl TitleBar {
-    fn render<V: 'static>(&mut self, _: &mut V, cx: &mut ViewContext<V>) -> impl IntoElement<V> {
-        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<V: 'static>(&mut self, cx: &mut ViewContext<V>) -> impl IntoElement<V> {
-        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<V: 'static>(&mut self, cx: &mut ViewContext<V>) -> impl IntoElement<V> {
-        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<V: 'static>() -> impl Element<V> {
-    StatusBar
-}
-
-impl StatusBar {
-    fn render<V: 'static>(&mut self, _: &mut V, cx: &mut ViewContext<V>) -> impl IntoElement<V> {
-        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<V: 'static>(&mut self, cx: &mut ViewContext<V>) -> impl IntoElement<V> {
-        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<V: 'static>(&mut self, cx: &mut ViewContext<V>) -> impl IntoElement<V> {
-        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),
-                            ),
-                    ),
-            )
-    }
-}