Begin building out new `ui` crate in `storybook2`

Marshall Bowers created 2 years ago

Change summary

Cargo.lock                                 |  3 +
crates/storybook2/Cargo.toml               |  3 +
crates/storybook2/src/storybook2.rs        |  1 
crates/storybook2/src/ui.rs                |  6 +++
crates/storybook2/src/ui/components.rs     |  0 
crates/storybook2/src/ui/elements.rs       |  3 +
crates/storybook2/src/ui/elements/stack.rs | 31 ++++++++++++++++++
crates/storybook2/src/ui/prelude.rs        |  1 
crates/storybook2/src/workspace.rs         | 41 +++++++++++++++++++++--
9 files changed, 85 insertions(+), 4 deletions(-)

Detailed changes

Cargo.lock

@@ -7613,12 +7613,15 @@ version = "0.1.0"
 dependencies = [
  "anyhow",
  "backtrace-on-stack-overflow",
+ "clap 4.4.6",
  "gpui3",
+ "itertools 0.11.0",
  "log",
  "rust-embed",
  "serde",
  "settings",
  "simplelog",
+ "strum",
  "theme",
  "util",
 ]

crates/storybook2/Cargo.toml

@@ -12,12 +12,15 @@ path = "src/storybook2.rs"
 anyhow.workspace = true
 # TODO: Remove after diagnosing stack overflow.
 backtrace-on-stack-overflow = "0.3.0"
+clap = { version = "4.4", features = ["derive", "string"] }
 gpui3 = { path = "../gpui3" }
+itertools = "0.11.0"
 log.workspace = true
 rust-embed.workspace = true
 serde.workspace = true
 settings = { path = "../settings" }
 simplelog = "0.9"
+strum = { version = "0.25.0", features = ["derive"] }
 theme = { path = "../theme" }
 util = { path = "../util" }
 

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/components.rs

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.))