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

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())
+    }
+}