Checkpoint

crates/storybook/src/components.rs

@@ -9,10 +9,14 @@ mod icon_button;
 mod tab;
 mod tool_divider;
 
-pub(crate) use avatar::avatar;
+pub use avatar::avatar;
-pub(crate) use icon_button::icon_button;
+pub use avatar::Avatar;
-pub(crate) use tab::tab;
+pub use icon_button::icon_button;
-pub(crate) use tool_divider::tool_divider;
+pub use icon_button::IconButton;
+pub use tab::tab;
+pub use tab::Tab;
+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/components/avatar.rs

@@ -8,19 +8,24 @@ use gpui2::{Element, ViewContext};
 pub type UnknownString = ArcCow<'static, str>;
 
 #[derive(Element)]
-pub(crate) struct Avatar {
+pub struct Avatar {
     src: ArcCow<'static, str>,
     shape: Shape,
 }
 
-pub fn avatar<V: 'static>(src: impl Into<ArcCow<'static, str>>, shape: Shape) -> impl Element<V> {
+pub fn avatar<V: 'static>(src: impl Into<ArcCow<'static, str>>) -> Avatar {
     Avatar {
         src: src.into(),
-        shape,
+        shape: Shape::Circle,
     }
 }
 
 impl Avatar {
+    pub fn shape(mut self, shape: Shape) -> Self {
+        self.shape = shape;
+        self
+    }
+
     fn render<V: 'static>(&mut self, _: &mut V, cx: &mut ViewContext<V>) -> impl IntoElement<V> {
         let theme = theme(cx);
 

crates/storybook/src/components/icon_button2

@@ -0,0 +1,123 @@
+// use crate::prelude::{ButtonVariant, UIState};
+// use crate::theme::theme;
+// use gpui2::elements::svg;
+// use gpui2::style::{StyleHelpers, Styleable};
+// use gpui2::{elements::div, IntoElement};
+// use gpui2::{Element, ParentElement, ViewContext};
+
+// #[derive(Element)]
+// pub(crate) struct IconButton {
+//     path: &'static str,
+//     variant: ButtonVariant,
+//     state: UIState,
+// }
+
+// pub fn icon_button<V: 'static>(path: &'static str) -> IconButton {
+//     IconButton {
+//         path,
+//         variant: ButtonVariant::Filled,
+//         state: UIState::Default,
+//     }
+// }
+
+// impl IconButton {
+//     fn variant(mut self, variant: ButtonVariant) -> Self {
+//         self.variant = variant;
+
+//         // Example of more interesting setter behavior
+//         // FilledButtons must be disabled
+//         if self.variant == ButtonVariant::Filled {
+//             self.state = UIState::Disabled;
+//         }
+
+//         self
+//     }
+
+//     fn state(mut self, state: UIState) -> Self {
+//         // Example of more interesting setter behavior:
+//         // GhostButtons Cannot be disabled
+//         // Debug asserts are compiled out when we make a new release.
+//         // Useful for making sure developers develop correctly without breaking
+//         // everything
+//         debug_assert!(self.variant != ButtonVariant::Ghost && state != UIState::Disabled);
+
+//         self.state = state;
+//         self
+//     }
+
+//     // const state = {
+//     // foo: "foo",
+//     // bar: "bar"
+//     // } as const
+//     //
+//     // type State = typeof state[keyof typeof something]
+//     //
+//     // type Button {
+//     //      style: State
+//     // }
+//     //
+//     // <Button style="foo" /> State['foo']
+
+//     fn render_warning<V: 'static>(&mut self) -> impl IntoElement<V> {
+//         div()
+//     }
+
+//     fn render<V: 'static>(&mut self, _: &mut V, cx: &mut ViewContext<V>) -> impl IntoElement<V> {
+//         let theme = theme(cx);
+
+//         let icon_color;
+
+//         enum Severity {
+//             Low,
+//             Medium,
+//             High,
+//         }
+
+//         // Enum declaration and match statement example
+//         enum Style {
+//             Error,
+//             Warning(Severity),
+//             Foo,
+//             Bar,
+//             Baz,
+//         }
+
+//         let style = Style::Warning(Severity::High);
+
+//         match style {
+//             Error => return self.render_warning(),
+//             Warning(severity) => match severity {
+//                 Low => {}
+//                 Medium => {}
+//                 High => {}
+//             },
+//             Foo => {}
+//             Bar => {}
+//             Baz => {}
+//         }
+
+//         if self.state == UIState::Disabled {
+//             icon_color = theme.highest.base.disabled.foreground;
+//         } else {
+//             icon_color = theme.highest.base.default.foreground;
+//         }
+
+//         let mut div = div();
+
+//         if self.variant == ButtonVariant::Filled {
+//             div = div.fill(theme.highest.on.default.background);
+//         }
+
+//         div.w_7()
+//             .h_6()
+//             .flex()
+//             .items_center()
+//             .justify_center()
+//             .rounded_md()
+//             .hover()
+//             .fill(theme.highest.base.hovered.background)
+//             .active()
+//             .fill(theme.highest.base.pressed.background)
+//             .child(svg().path(self.path).w_4().h_4().fill(icon_color))
+//     }
+// }

crates/storybook/src/components/tab.rs

@@ -4,7 +4,7 @@ use gpui2::{elements::div, IntoElement};
 use gpui2::{Element, ParentElement, ViewContext};
 
 #[derive(Element)]
-pub(crate) struct Tab {
+pub struct Tab {
     title: &'static str,
     enabled: bool,
 }

crates/storybook/src/components/tool_divider.rs

@@ -4,7 +4,7 @@ use gpui2::{elements::div, IntoElement};
 use gpui2::{Element, ViewContext};
 
 #[derive(Element)]
-pub(crate) struct ToolDivider {}
+pub struct ToolDivider {}
 
 pub fn tool_divider<V: 'static>() -> impl Element<V> {
     ToolDivider {}

crates/storybook/src/modules/chat_panel.rs

@@ -1,12 +1,11 @@
 use std::marker::PhantomData;
 
-use crate::components::icon_button;
+use crate::components::{icon_button, IconButton};
 use crate::theme::theme;
 use gpui2::elements::div::ScrollState;
 use gpui2::style::StyleHelpers;
 use gpui2::{elements::div, IntoElement};
 use gpui2::{Element, ParentElement, ViewContext};
-use theme::IconButton;
 
 #[derive(Element)]
 pub struct ChatPanel<V: 'static> {

crates/storybook/src/modules/tab_bar.rs

@@ -1,13 +1,12 @@
 use std::marker::PhantomData;
 
-use crate::components::{icon_button, tab};
+use crate::components::{icon_button, tab, IconButton};
 use crate::prelude::InteractionState;
 use crate::theme::theme;
 use gpui2::elements::div::ScrollState;
 use gpui2::style::StyleHelpers;
 use gpui2::{elements::div, IntoElement};
 use gpui2::{Element, ParentElement, ViewContext};
-use theme::IconButton;
 
 #[derive(Element)]
 pub struct TabBar<V: 'static> {

crates/storybook/src/modules/title_bar.rs

@@ -1,12 +1,11 @@
 use std::marker::PhantomData;
 
-use crate::components::{avatar, icon_button, tool_divider};
+use crate::components::{avatar, icon_button, tool_divider, Avatar, IconButton};
 use crate::prelude::Shape;
 use crate::theme::theme;
 use gpui2::style::{StyleHelpers, Styleable};
 use gpui2::{elements::div, IntoElement};
 use gpui2::{Element, ParentElement, ViewContext};
-use theme::IconButton;
 
 #[derive(Element)]
 pub struct TitleBar<V: 'static> {
@@ -126,10 +125,12 @@ impl<V: 'static> TitleBar<V> {
                             .child(icon_button::<IconButton>("icons/radix/speaker-loud.svg"))
                             .child(icon_button::<IconButton>("icons/radix/desktop.svg")),
                     )
-                    .child(div().px_2().flex().items_center().child(avatar(
+                    .child(
-                        "https://avatars.githubusercontent.com/u/1714999?v=4",
+                        div().px_2().flex().items_center().child(
-                        Shape::RoundedRectangle,
+                            avatar::<Avatar>("https://avatars.githubusercontent.com/u/1714999?v=4")
-                    ))),
+                                .shape(Shape::RoundedRectangle),
+                        ),
+                    ),
             )
     }
 }