From b1d88ced61718fbec2a89d4a9682340b0b9ceed9 Mon Sep 17 00:00:00 2001 From: Marshall Bowers Date: Tue, 10 Oct 2023 15:30:16 -0400 Subject: [PATCH] Add an example of colocating a story for a UI component with its definition --- crates/storybook2/Cargo.toml | 2 +- crates/storybook2/src/stories/components.rs | 1 - .../src/stories/components/assistant_panel.rs | 26 --------- crates/storybook2/src/story.rs | 53 +------------------ crates/storybook2/src/story_selector.rs | 4 +- crates/ui2/Cargo.toml | 4 ++ crates/ui2/src/components/assistant_panel.rs | 30 +++++++++++ crates/ui2/src/lib.rs | 5 ++ crates/ui2/src/story.rs | 53 +++++++++++++++++++ 9 files changed, 95 insertions(+), 83 deletions(-) delete mode 100644 crates/storybook2/src/stories/components/assistant_panel.rs create mode 100644 crates/ui2/src/story.rs diff --git a/crates/storybook2/Cargo.toml b/crates/storybook2/Cargo.toml index 7c5bfaaaa5..f51095e354 100644 --- a/crates/storybook2/Cargo.toml +++ b/crates/storybook2/Cargo.toml @@ -24,7 +24,7 @@ simplelog = "0.9" smallvec.workspace = true strum = { version = "0.25.0", features = ["derive"] } theme = { path = "../theme" } -ui = { package = "ui2", path = "../ui2" } +ui = { package = "ui2", path = "../ui2", features = ["stories"] } util = { path = "../util" } [dev-dependencies] diff --git a/crates/storybook2/src/stories/components.rs b/crates/storybook2/src/stories/components.rs index 0da4010aed..4c7db1bcdf 100644 --- a/crates/storybook2/src/stories/components.rs +++ b/crates/storybook2/src/stories/components.rs @@ -1,4 +1,3 @@ -pub mod assistant_panel; pub mod breadcrumb; pub mod buffer; pub mod chat_panel; diff --git a/crates/storybook2/src/stories/components/assistant_panel.rs b/crates/storybook2/src/stories/components/assistant_panel.rs deleted file mode 100644 index 2c1eac71d3..0000000000 --- a/crates/storybook2/src/stories/components/assistant_panel.rs +++ /dev/null @@ -1,26 +0,0 @@ -use std::marker::PhantomData; - -use ui::prelude::*; -use ui::AssistantPanel; - -use crate::story::Story; - -#[derive(Element)] -pub struct AssistantPanelStory { - state_type: PhantomData, -} - -impl AssistantPanelStory { - pub fn new() -> Self { - Self { - state_type: PhantomData, - } - } - - fn render(&mut self, cx: &mut ViewContext) -> impl Element { - Story::container(cx) - .child(Story::title_for::<_, AssistantPanel>(cx)) - .child(Story::label(cx, "Default")) - .child(AssistantPanel::new()) - } -} diff --git a/crates/storybook2/src/story.rs b/crates/storybook2/src/story.rs index 3c358f23ba..5c144fdbc1 100644 --- a/crates/storybook2/src/story.rs +++ b/crates/storybook2/src/story.rs @@ -1,52 +1 @@ -use gpui3::Div; -use ui::prelude::*; -use ui::theme; - -pub struct Story {} - -impl Story { - pub fn container(cx: &mut ViewContext) -> Div { - let theme = theme(cx); - - div() - .size_full() - .flex() - .flex_col() - .pt_2() - .px_4() - .font("Zed Mono Extended") - .fill(theme.lowest.base.default.background) - } - - pub fn title( - cx: &mut ViewContext, - title: &str, - ) -> impl Element { - let theme = theme(cx); - - div() - .text_xl() - .text_color(theme.lowest.base.default.foreground) - .child(title.to_owned()) - } - - pub fn title_for( - cx: &mut ViewContext, - ) -> impl Element { - Self::title(cx, std::any::type_name::()) - } - - pub fn label( - cx: &mut ViewContext, - label: &str, - ) -> impl Element { - let theme = theme(cx); - - div() - .mt_4() - .mb_2() - .text_xs() - .text_color(theme.lowest.base.default.foreground) - .child(label.to_owned()) - } -} +pub use ui::Story; diff --git a/crates/storybook2/src/story_selector.rs b/crates/storybook2/src/story_selector.rs index 07e29e5bef..9ee9272eda 100644 --- a/crates/storybook2/src/story_selector.rs +++ b/crates/storybook2/src/story_selector.rs @@ -71,9 +71,7 @@ impl ComponentStory { use crate::stories::components; match self { - Self::AssistantPanel => { - components::assistant_panel::AssistantPanelStory::new().into_any() - } + Self::AssistantPanel => ui::AssistantPanelStory::new().into_any(), Self::Buffer => components::buffer::BufferStory::new().into_any(), Self::Breadcrumb => components::breadcrumb::BreadcrumbStory::new().into_any(), Self::ChatPanel => components::chat_panel::ChatPanelStory::new().into_any(), diff --git a/crates/ui2/Cargo.toml b/crates/ui2/Cargo.toml index eaccb96e65..248abcd387 100644 --- a/crates/ui2/Cargo.toml +++ b/crates/ui2/Cargo.toml @@ -14,3 +14,7 @@ smallvec.workspace = true strum = { version = "0.25.0", features = ["derive"] } theme = { path = "../theme" } rand = "0.8" + +[features] +default = ["stories"] +stories = [] diff --git a/crates/ui2/src/components/assistant_panel.rs b/crates/ui2/src/components/assistant_panel.rs index 81a5cd2693..8fa9922cc0 100644 --- a/crates/ui2/src/components/assistant_panel.rs +++ b/crates/ui2/src/components/assistant_panel.rs @@ -88,3 +88,33 @@ impl AssistantPanel { .width(AbsoluteLength::Rems(rems(32.))) } } + +#[cfg(feature = "stories")] +pub use stories::*; + +#[cfg(feature = "stories")] +mod stories { + use crate::story::Story; + + use super::*; + + #[derive(Element)] + pub struct AssistantPanelStory { + state_type: PhantomData, + } + + impl AssistantPanelStory { + pub fn new() -> Self { + Self { + state_type: PhantomData, + } + } + + fn render(&mut self, cx: &mut ViewContext) -> impl Element { + Story::container(cx) + .child(Story::title_for::<_, AssistantPanel>(cx)) + .child(Story::label(cx, "Default")) + .child(AssistantPanel::new()) + } + } +} diff --git a/crates/ui2/src/lib.rs b/crates/ui2/src/lib.rs index 39156d3ab4..a3ca374683 100644 --- a/crates/ui2/src/lib.rs +++ b/crates/ui2/src/lib.rs @@ -18,3 +18,8 @@ pub use static_data::*; pub use tokens::*; pub use crate::theme::*; + +#[cfg(feature = "stories")] +mod story; +#[cfg(feature = "stories")] +pub use story::*; diff --git a/crates/ui2/src/story.rs b/crates/ui2/src/story.rs new file mode 100644 index 0000000000..f1a3b1ab70 --- /dev/null +++ b/crates/ui2/src/story.rs @@ -0,0 +1,53 @@ +use gpui3::Div; + +use crate::prelude::*; +use crate::theme; + +pub struct Story {} + +impl Story { + pub fn container(cx: &mut ViewContext) -> Div { + let theme = theme(cx); + + div() + .size_full() + .flex() + .flex_col() + .pt_2() + .px_4() + .font("Zed Mono Extended") + .fill(theme.lowest.base.default.background) + } + + pub fn title( + cx: &mut ViewContext, + title: &str, + ) -> impl Element { + let theme = theme(cx); + + div() + .text_xl() + .text_color(theme.lowest.base.default.foreground) + .child(title.to_owned()) + } + + pub fn title_for( + cx: &mut ViewContext, + ) -> impl Element { + Self::title(cx, std::any::type_name::()) + } + + pub fn label( + cx: &mut ViewContext, + label: &str, + ) -> impl Element { + let theme = theme(cx); + + div() + .mt_4() + .mb_2() + .text_xs() + .text_color(theme.lowest.base.default.foreground) + .child(label.to_owned()) + } +}