Add an example of colocating a story for a UI component with its definition

Marshall Bowers created

Change summary

crates/storybook2/Cargo.toml                                |  2 
crates/storybook2/src/stories/components.rs                 |  1 
crates/storybook2/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(-)

Detailed changes

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]

crates/storybook2/src/stories/components/assistant_panel.rs 🔗 

@@ -1,26 +0,0 @@
-use std::marker::PhantomData;
-
-use ui::prelude::*;
-use ui::AssistantPanel;
-
-use crate::story::Story;
-
-#[derive(Element)]
-pub struct AssistantPanelStory<S: 'static + Send + Sync + Clone> {
-    state_type: PhantomData<S>,
-}
-
-impl<S: 'static + Send + Sync + Clone> AssistantPanelStory<S> {
-    pub fn new() -> Self {
-        Self {
-            state_type: PhantomData,
-        }
-    }
-
-    fn render(&mut self, cx: &mut ViewContext<S>) -> impl Element<State = S> {
-        Story::container(cx)
-            .child(Story::title_for::<_, AssistantPanel<S>>(cx))
-            .child(Story::label(cx, "Default"))
-            .child(AssistantPanel::new())
-    }
-}

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<S: 'static + Send + Sync>(cx: &mut ViewContext<S>) -> Div<S> {
-        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<S: 'static + Send + Sync>(
-        cx: &mut ViewContext<S>,
-        title: &str,
-    ) -> impl Element<State = S> {
-        let theme = theme(cx);
-
-        div()
-            .text_xl()
-            .text_color(theme.lowest.base.default.foreground)
-            .child(title.to_owned())
-    }
-
-    pub fn title_for<S: 'static + Send + Sync, T>(
-        cx: &mut ViewContext<S>,
-    ) -> impl Element<State = S> {
-        Self::title(cx, std::any::type_name::<T>())
-    }
-
-    pub fn label<S: 'static + Send + Sync>(
-        cx: &mut ViewContext<S>,
-        label: &str,
-    ) -> impl Element<State = S> {
-        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;

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(),

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 = []

crates/ui2/src/components/assistant_panel.rs 🔗 

@@ -88,3 +88,33 @@ impl<S: 'static + Send + Sync + Clone> AssistantPanel<S> {
         .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<S: 'static + Send + Sync + Clone> {
+        state_type: PhantomData<S>,
+    }
+
+    impl<S: 'static + Send + Sync + Clone> AssistantPanelStory<S> {
+        pub fn new() -> Self {
+            Self {
+                state_type: PhantomData,
+            }
+        }
+
+        fn render(&mut self, cx: &mut ViewContext<S>) -> impl Element<State = S> {
+            Story::container(cx)
+                .child(Story::title_for::<_, AssistantPanel<S>>(cx))
+                .child(Story::label(cx, "Default"))
+                .child(AssistantPanel::new())
+        }
+    }
+}

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::*;

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<S: 'static + Send + Sync>(cx: &mut ViewContext<S>) -> Div<S> {
+        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<S: 'static + Send + Sync>(
+        cx: &mut ViewContext<S>,
+        title: &str,
+    ) -> impl Element<State = S> {
+        let theme = theme(cx);
+
+        div()
+            .text_xl()
+            .text_color(theme.lowest.base.default.foreground)
+            .child(title.to_owned())
+    }
+
+    pub fn title_for<S: 'static + Send + Sync, T>(
+        cx: &mut ViewContext<S>,
+    ) -> impl Element<State = S> {
+        Self::title(cx, std::any::type_name::<T>())
+    }
+
+    pub fn label<S: 'static + Send + Sync>(
+        cx: &mut ViewContext<S>,
+        label: &str,
+    ) -> impl Element<State = S> {
+        let theme = theme(cx);
+
+        div()
+            .mt_4()
+            .mb_2()
+            .text_xs()
+            .text_color(theme.lowest.base.default.foreground)
+            .child(label.to_owned())
+    }
+}