Begin building out new ui crate in storybook2

crates/storybook2/src/storybook2.rs

@@ -7,6 +7,7 @@ use simplelog::SimpleLogger;
 mod collab_panel;
 mod theme;
 mod themes;
+mod ui;
 mod workspace;
 
 // gpui2::actions! {

crates/storybook2/src/ui.rs

@@ -0,0 +1,6 @@
+pub mod prelude;
+mod components;
+mod elements;
+
+pub use components::*;
+pub use elements::*;

crates/storybook2/src/ui/elements.rs

@@ -0,0 +1,3 @@
+mod stack;
+
+pub use stack::*;

crates/storybook2/src/ui/elements/stack.rs

@@ -0,0 +1,31 @@
+use gpui3::{div, Div};
+
+use crate::ui::prelude::*;
+
+pub trait Stack: StyleHelpers {
+    /// Horizontally stacks elements.
+    fn h_stack(self) -> Self {
+        self.flex().flex_row().items_center()
+    }
+
+    /// Vertically stacks elements.
+    fn v_stack(self) -> Self {
+        self.flex().flex_col()
+    }
+}
+
+impl<S> Stack for Div<S> {}
+
+/// Horizontally stacks elements.
+///
+/// Sets `flex()`, `flex_row()`, `items_center()`
+pub fn h_stack<S: 'static>() -> Div<S> {
+    div().h_stack()
+}
+
+/// Vertically stacks elements.
+///
+/// Sets `flex()`, `flex_col()`
+pub fn v_stack<S: 'static>() -> Div<S> {
+    div().v_stack()
+}

crates/storybook2/src/ui/prelude.rs

@@ -0,0 +1 @@
+pub use gpui3::StyleHelpers;

crates/storybook2/src/workspace.rs

@@ -1,3 +1,4 @@
+use crate::ui::Stack;
 use crate::{
     collab_panel::{collab_panel, CollabPanel},
     theme::theme,
@@ -27,12 +28,44 @@ impl Workspace {
 
     fn render(&mut self, cx: &mut ViewContext<Self>) -> impl Element<State = Self> {
         let theme = rose_pine_dawn();
+
         div()
-            .font("Helvetica")
-            .text_base()
             .size_full()
-            .fill(theme.middle.positive.default.background)
-            .child("Hello world")
+            .v_stack()
+            .fill(theme.lowest.base.default.background)
+            .child(
+                div()
+                    .size_full()
+                    .flex()
+                    .fill(theme.middle.positive.default.background),
+            )
+            .child(
+                div()
+                    .size_full()
+                    .h_stack()
+                    .gap_3()
+                    .children((0..4).map(|i| {
+                        div().size_full().flex().fill(gpui3::hsla(
+                            0. + (i as f32 / 7.),
+                            0. + (i as f32 / 5.),
+                            0.5,
+                            1.,
+                        ))
+                    })),
+            )
+            .child(
+                div()
+                    .size_full()
+                    .flex()
+                    .fill(theme.middle.negative.default.background),
+            )
+
+        // div()
+        //     .font("Helvetica")
+        //     .text_base()
+        //     .size_full()
+        //     .fill(theme.middle.positive.default.background)
+        //     .child("Hello world")
 
         // TODO: Implement style.
         //.size_full().fill(gpui3::hsla(0.83, 1., 0.5, 1.))