Add Storybook Components (#2956)
[[PR Description]] Started building out some early components in the storybook using a modified version of the classic Atomic Design model @mikayla-maki and I are exploring. <img width="1134" alt="atomic_design" src="https://github.com/zed-industries/zed/assets/1714999/9093a8b5-a71d-41d4-bae2-f7562494c5f3"> This PR adds a few things: - `tab`, `tab_bar` and `icon_button` components - Dynamic documentation for the proc macro generated methods like `w_8`, `px_2`, etc. - Continues to build out the Zed workspace demo Release Notes: - N/A
This commit is contained in:
Nate Butler
GitHub
commit
c545788168
8 changed files with 295 additions and 86 deletions
|
|
@ -28,24 +28,24 @@ fn generate_methods() -> Vec<TokenStream2> {
|
|||
let mut methods = Vec::new();
|
||||
|
||||
for (prefix, auto_allowed, fields) in box_prefixes() {
|
||||
for (suffix, length_tokens) in box_suffixes() {
|
||||
for (suffix, length_tokens, doc_string) in box_suffixes() {
|
||||
if auto_allowed || suffix != "auto" {
|
||||
let method = generate_method(prefix, suffix, &fields, length_tokens);
|
||||
let method = generate_method(prefix, suffix, &fields, length_tokens, doc_string);
|
||||
methods.push(method);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
for (prefix, fields) in corner_prefixes() {
|
||||
for (suffix, radius_tokens) in corner_suffixes() {
|
||||
let method = generate_method(prefix, suffix, &fields, radius_tokens);
|
||||
for (suffix, radius_tokens, doc_string) in corner_suffixes() {
|
||||
let method = generate_method(prefix, suffix, &fields, radius_tokens, doc_string);
|
||||
methods.push(method);
|
||||
}
|
||||
}
|
||||
|
||||
for (prefix, fields) in border_prefixes() {
|
||||
for (suffix, width_tokens) in border_suffixes() {
|
||||
let method = generate_method(prefix, suffix, &fields, width_tokens);
|
||||
for (suffix, width_tokens, doc_string) in border_suffixes() {
|
||||
let method = generate_method(prefix, suffix, &fields, width_tokens, doc_string);
|
||||
methods.push(method);
|
||||
}
|
||||
}
|
||||
|
|
@ -58,6 +58,7 @@ fn generate_method(
|
|||
suffix: &'static str,
|
||||
fields: &Vec<TokenStream2>,
|
||||
length_tokens: TokenStream2,
|
||||
doc_string: &'static str,
|
||||
) -> TokenStream2 {
|
||||
let method_name = if suffix.is_empty() {
|
||||
format_ident!("{}", prefix)
|
||||
|
|
@ -75,6 +76,7 @@ fn generate_method(
|
|||
.collect::<Vec<_>>();
|
||||
|
||||
let method = quote! {
|
||||
#[doc = #doc_string]
|
||||
fn #method_name(mut self) -> Self where Self: std::marker::Sized {
|
||||
let mut style = self.declared_style();
|
||||
#(#field_assignments)*
|
||||
|
|
@ -160,55 +162,52 @@ fn box_prefixes() -> Vec<(&'static str, bool, Vec<TokenStream2>)> {
|
|||
]
|
||||
}
|
||||
|
||||
fn box_suffixes() -> Vec<(&'static str, TokenStream2)> {
|
||||
fn box_suffixes() -> Vec<(&'static str, TokenStream2, &'static str)> {
|
||||
vec![
|
||||
("0", quote! { pixels(0.) }),
|
||||
("0p5", quote! { rems(0.125) }),
|
||||
("1", quote! { rems(0.25) }),
|
||||
("1p5", quote! { rems(0.375) }),
|
||||
("2", quote! { rems(0.5) }),
|
||||
("2p5", quote! { rems(0.625) }),
|
||||
("3", quote! { rems(0.75) }),
|
||||
("3p5", quote! { rems(0.875) }),
|
||||
("4", quote! { rems(1.) }),
|
||||
("5", quote! { rems(1.25) }),
|
||||
("6", quote! { rems(1.5) }),
|
||||
("7", quote! { rems(1.75) }),
|
||||
("8", quote! { rems(2.0) }),
|
||||
("9", quote! { rems(2.25) }),
|
||||
("10", quote! { rems(2.5) }),
|
||||
("11", quote! { rems(2.75) }),
|
||||
("12", quote! { rems(3.) }),
|
||||
("16", quote! { rems(4.) }),
|
||||
("20", quote! { rems(5.) }),
|
||||
("24", quote! { rems(6.) }),
|
||||
("32", quote! { rems(8.) }),
|
||||
("40", quote! { rems(10.) }),
|
||||
("48", quote! { rems(12.) }),
|
||||
("56", quote! { rems(14.) }),
|
||||
("64", quote! { rems(16.) }),
|
||||
("72", quote! { rems(18.) }),
|
||||
("80", quote! { rems(20.) }),
|
||||
("96", quote! { rems(24.) }),
|
||||
("auto", quote! { auto() }),
|
||||
("px", quote! { pixels(1.) }),
|
||||
("full", quote! { relative(1.) }),
|
||||
("1_2", quote! { relative(0.5) }),
|
||||
("1_3", quote! { relative(1./3.) }),
|
||||
("2_3", quote! { relative(2./3.) }),
|
||||
("1_4", quote! { relative(0.25) }),
|
||||
("2_4", quote! { relative(0.5) }),
|
||||
("3_4", quote! { relative(0.75) }),
|
||||
("1_5", quote! { relative(0.2) }),
|
||||
("2_5", quote! { relative(0.4) }),
|
||||
("3_5", quote! { relative(0.6) }),
|
||||
("4_5", quote! { relative(0.8) }),
|
||||
("1_6", quote! { relative(1./6.) }),
|
||||
("5_6", quote! { relative(5./6.) }),
|
||||
("1_12", quote! { relative(1./12.) }),
|
||||
// ("screen_50", quote! { DefiniteLength::Vh(50.0) }),
|
||||
// ("screen_75", quote! { DefiniteLength::Vh(75.0) }),
|
||||
// ("screen", quote! { DefiniteLength::Vh(100.0) }),
|
||||
("0", quote! { pixels(0.) }, "0px"),
|
||||
("0p5", quote! { rems(0.125) }, "2px (0.125rem)"),
|
||||
("1", quote! { rems(0.25) }, "4px (0.25rem)"),
|
||||
("1p5", quote! { rems(0.375) }, "6px (0.375rem)"),
|
||||
("2", quote! { rems(0.5) }, "8px (0.5rem)"),
|
||||
("2p5", quote! { rems(0.625) }, "10px (0.625rem)"),
|
||||
("3", quote! { rems(0.75) }, "12px (0.75rem)"),
|
||||
("3p5", quote! { rems(0.875) }, "14px (0.875rem)"),
|
||||
("4", quote! { rems(1.) }, "16px (1rem)"),
|
||||
("5", quote! { rems(1.25) }, "20px (1.25rem)"),
|
||||
("6", quote! { rems(1.5) }, "24px (1.5rem)"),
|
||||
("7", quote! { rems(1.75) }, "28px (1.75rem)"),
|
||||
("8", quote! { rems(2.0) }, "32px (2rem)"),
|
||||
("9", quote! { rems(2.25) }, "36px (2.25rem)"),
|
||||
("10", quote! { rems(2.5) }, "40px (2.5rem)"),
|
||||
("11", quote! { rems(2.75) }, "44px (2.75rem)"),
|
||||
("12", quote! { rems(3.) }, "48px (3rem)"),
|
||||
("16", quote! { rems(4.) }, "64px (4rem)"),
|
||||
("20", quote! { rems(5.) }, "80px (5rem)"),
|
||||
("24", quote! { rems(6.) }, "96px (6rem)"),
|
||||
("32", quote! { rems(8.) }, "128px (8rem)"),
|
||||
("40", quote! { rems(10.) }, "160px (10rem)"),
|
||||
("48", quote! { rems(12.) }, "192px (12rem)"),
|
||||
("56", quote! { rems(14.) }, "224px (14rem)"),
|
||||
("64", quote! { rems(16.) }, "256px (16rem)"),
|
||||
("72", quote! { rems(18.) }, "288px (18rem)"),
|
||||
("80", quote! { rems(20.) }, "320px (20rem)"),
|
||||
("96", quote! { rems(24.) }, "384px (24rem)"),
|
||||
("auto", quote! { auto() }, "Auto"),
|
||||
("px", quote! { pixels(1.) }, "1px"),
|
||||
("full", quote! { relative(1.) }, "100%"),
|
||||
("1_2", quote! { relative(0.5) }, "50% (1/2)"),
|
||||
("1_3", quote! { relative(1./3.) }, "33% (1/3)"),
|
||||
("2_3", quote! { relative(2./3.) }, "66% (2/3)"),
|
||||
("1_4", quote! { relative(0.25) }, "25% (1/4)"),
|
||||
("2_4", quote! { relative(0.5) }, "50% (2/4)"),
|
||||
("3_4", quote! { relative(0.75) }, "75% (3/4)"),
|
||||
("1_5", quote! { relative(0.2) }, "20% (1/5)"),
|
||||
("2_5", quote! { relative(0.4) }, "40% (2/5)"),
|
||||
("3_5", quote! { relative(0.6) }, "60% (3/5)"),
|
||||
("4_5", quote! { relative(0.8) }, "80% (4/5)"),
|
||||
("1_6", quote! { relative(1./6.) }, "16% (1/6)"),
|
||||
("5_6", quote! { relative(5./6.) }, "80% (5/6)"),
|
||||
("1_12", quote! { relative(1./12.) }, "8% (1/12)"),
|
||||
]
|
||||
}
|
||||
|
||||
|
|
@ -258,16 +257,16 @@ fn corner_prefixes() -> Vec<(&'static str, Vec<TokenStream2>)> {
|
|||
]
|
||||
}
|
||||
|
||||
fn corner_suffixes() -> Vec<(&'static str, TokenStream2)> {
|
||||
fn corner_suffixes() -> Vec<(&'static str, TokenStream2, &'static str)> {
|
||||
vec![
|
||||
("none", quote! { pixels(0.) }),
|
||||
("sm", quote! { rems(0.125) }),
|
||||
("md", quote! { rems(0.25) }),
|
||||
("lg", quote! { rems(0.5) }),
|
||||
("xl", quote! { rems(0.75) }),
|
||||
("2xl", quote! { rems(1.) }),
|
||||
("3xl", quote! { rems(1.5) }),
|
||||
("full", quote! { pixels(9999.) }),
|
||||
("none", quote! { pixels(0.) }, "0px"),
|
||||
("sm", quote! { rems(0.125) }, "2px (0.125rem)"),
|
||||
("md", quote! { rems(0.25) }, "4px (0.25rem)"),
|
||||
("lg", quote! { rems(0.5) }, "8px (0.5rem)"),
|
||||
("xl", quote! { rems(0.75) }, "12px (0.75rem)"),
|
||||
("2xl", quote! { rems(1.) }, "16px (1rem)"),
|
||||
("3xl", quote! { rems(1.5) }, "24px (1.5rem)"),
|
||||
("full", quote! { pixels(9999.) }, "9999px"),
|
||||
]
|
||||
}
|
||||
|
||||
|
|
@ -303,25 +302,25 @@ fn border_prefixes() -> Vec<(&'static str, Vec<TokenStream2>)> {
|
|||
]
|
||||
}
|
||||
|
||||
fn border_suffixes() -> Vec<(&'static str, TokenStream2)> {
|
||||
fn border_suffixes() -> Vec<(&'static str, TokenStream2, &'static str)> {
|
||||
vec![
|
||||
("", quote! { pixels(1.) }),
|
||||
("0", quote! { pixels(0.) }),
|
||||
("1", quote! { pixels(1.) }),
|
||||
("2", quote! { pixels(2.) }),
|
||||
("3", quote! { pixels(3.) }),
|
||||
("4", quote! { pixels(4.) }),
|
||||
("5", quote! { pixels(5.) }),
|
||||
("6", quote! { pixels(6.) }),
|
||||
("7", quote! { pixels(7.) }),
|
||||
("8", quote! { pixels(8.) }),
|
||||
("9", quote! { pixels(9.) }),
|
||||
("10", quote! { pixels(10.) }),
|
||||
("11", quote! { pixels(11.) }),
|
||||
("12", quote! { pixels(12.) }),
|
||||
("16", quote! { pixels(16.) }),
|
||||
("20", quote! { pixels(20.) }),
|
||||
("24", quote! { pixels(24.) }),
|
||||
("32", quote! { pixels(32.) }),
|
||||
("", quote! { pixels(1.)}, "1px"),
|
||||
("0", quote! { pixels(0.)}, "0px"),
|
||||
("1", quote! { pixels(1.) }, "1px"),
|
||||
("2", quote! { pixels(2.) }, "2px"),
|
||||
("3", quote! { pixels(3.) }, "3px"),
|
||||
("4", quote! { pixels(4.) }, "4px"),
|
||||
("5", quote! { pixels(5.) }, "5px"),
|
||||
("6", quote! { pixels(6.) }, "6px"),
|
||||
("7", quote! { pixels(7.) }, "7px"),
|
||||
("8", quote! { pixels(8.) }, "8px"),
|
||||
("9", quote! { pixels(9.) }, "9px"),
|
||||
("10", quote! { pixels(10.) }, "10px"),
|
||||
("11", quote! { pixels(11.) }, "11px"),
|
||||
("12", quote! { pixels(12.) }, "12px"),
|
||||
("16", quote! { pixels(16.) }, "16px"),
|
||||
("20", quote! { pixels(20.) }, "20px"),
|
||||
("24", quote! { pixels(24.) }, "24px"),
|
||||
("32", quote! { pixels(32.) }, "32px"),
|
||||
]
|
||||
}
|
||||
|
|
|
|||
|
|
@ -4,6 +4,12 @@ use gpui2::{
|
|||
};
|
||||
use std::{marker::PhantomData, rc::Rc};
|
||||
|
||||
mod icon_button;
|
||||
mod tab;
|
||||
|
||||
pub(crate) use icon_button::{icon_button, ButtonVariant};
|
||||
pub(crate) use tab::tab;
|
||||
|
||||
struct ButtonHandlers<V, D> {
|
||||
click: Option<Rc<dyn Fn(&mut V, &D, &mut EventContext<V>)>>,
|
||||
}
|
||||
|
|
|
|||
50
crates/storybook/src/components/icon_button.rs
Normal file
50
crates/storybook/src/components/icon_button.rs
Normal file
|
|
@ -0,0 +1,50 @@
|
|||
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,
|
||||
}
|
||||
|
||||
#[derive(PartialEq)]
|
||||
pub enum ButtonVariant {
|
||||
Ghost,
|
||||
Filled,
|
||||
}
|
||||
|
||||
pub fn icon_button<V: 'static>(path: &'static str, variant: ButtonVariant) -> impl Element<V> {
|
||||
IconButton { path, variant }
|
||||
}
|
||||
|
||||
impl IconButton {
|
||||
fn render<V: 'static>(&mut self, _: &mut V, cx: &mut ViewContext<V>) -> impl IntoElement<V> {
|
||||
let theme = theme(cx);
|
||||
|
||||
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(theme.highest.variant.default.foreground),
|
||||
)
|
||||
}
|
||||
}
|
||||
55
crates/storybook/src/components/tab.rs
Normal file
55
crates/storybook/src/components/tab.rs
Normal file
|
|
@ -0,0 +1,55 @@
|
|||
use crate::theme::theme;
|
||||
use gpui2::style::{StyleHelpers, Styleable};
|
||||
use gpui2::{elements::div, IntoElement};
|
||||
use gpui2::{Element, ParentElement, ViewContext};
|
||||
|
||||
#[derive(Element)]
|
||||
pub(crate) struct Tab {
|
||||
title: &'static str,
|
||||
enabled: bool,
|
||||
}
|
||||
|
||||
pub fn tab<V: 'static>(title: &'static str, enabled: bool) -> impl Element<V> {
|
||||
Tab { title, enabled }
|
||||
}
|
||||
|
||||
impl Tab {
|
||||
fn render<V: 'static>(&mut self, _: &mut V, cx: &mut ViewContext<V>) -> impl IntoElement<V> {
|
||||
let theme = theme(cx);
|
||||
|
||||
div()
|
||||
.px_2()
|
||||
.py_0p5()
|
||||
.flex()
|
||||
.items_center()
|
||||
.justify_center()
|
||||
.rounded_lg()
|
||||
.fill(if self.enabled {
|
||||
theme.highest.on.default.background
|
||||
} else {
|
||||
theme.highest.base.default.background
|
||||
})
|
||||
.hover()
|
||||
.fill(if self.enabled {
|
||||
theme.highest.on.hovered.background
|
||||
} else {
|
||||
theme.highest.base.hovered.background
|
||||
})
|
||||
.active()
|
||||
.fill(if self.enabled {
|
||||
theme.highest.on.pressed.background
|
||||
} else {
|
||||
theme.highest.base.pressed.background
|
||||
})
|
||||
.child(
|
||||
div()
|
||||
.text_sm()
|
||||
.text_color(if self.enabled {
|
||||
theme.highest.base.default.foreground
|
||||
} else {
|
||||
theme.highest.variant.default.foreground
|
||||
})
|
||||
.child(self.title),
|
||||
)
|
||||
}
|
||||
}
|
||||
3
crates/storybook/src/modules.rs
Normal file
3
crates/storybook/src/modules.rs
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
mod tab_bar;
|
||||
|
||||
pub(crate) use tab_bar::tab_bar;
|
||||
82
crates/storybook/src/modules/tab_bar.rs
Normal file
82
crates/storybook/src/modules/tab_bar.rs
Normal file
|
|
@ -0,0 +1,82 @@
|
|||
use std::marker::PhantomData;
|
||||
|
||||
use crate::components::{icon_button, tab, ButtonVariant};
|
||||
use crate::theme::theme;
|
||||
use gpui2::elements::div::ScrollState;
|
||||
use gpui2::style::StyleHelpers;
|
||||
use gpui2::{elements::div, IntoElement};
|
||||
use gpui2::{Element, ParentElement, ViewContext};
|
||||
|
||||
#[derive(Element)]
|
||||
pub struct TabBar<V: 'static> {
|
||||
view_type: PhantomData<V>,
|
||||
scroll_state: ScrollState,
|
||||
}
|
||||
|
||||
pub fn tab_bar<V: 'static>(scroll_state: ScrollState) -> TabBar<V> {
|
||||
TabBar {
|
||||
view_type: PhantomData,
|
||||
scroll_state,
|
||||
}
|
||||
}
|
||||
|
||||
impl<V: 'static> TabBar<V> {
|
||||
fn render(&mut self, _: &mut V, cx: &mut ViewContext<V>) -> impl IntoElement<V> {
|
||||
let theme = theme(cx);
|
||||
|
||||
div()
|
||||
.w_full()
|
||||
.flex()
|
||||
// Left Side
|
||||
.child(
|
||||
div()
|
||||
.px_1()
|
||||
.flex()
|
||||
.flex_none()
|
||||
.gap_2()
|
||||
// Nav Buttons
|
||||
.child(
|
||||
div()
|
||||
.flex()
|
||||
.items_center()
|
||||
.gap_px()
|
||||
.child(icon_button("icons/arrow_left.svg", ButtonVariant::Filled))
|
||||
.child(icon_button("icons/arrow_right.svg", ButtonVariant::Ghost)),
|
||||
),
|
||||
)
|
||||
.child(
|
||||
div().w_0().flex_1().h_full().child(
|
||||
div()
|
||||
.flex()
|
||||
.gap_px()
|
||||
.overflow_x_scroll(self.scroll_state.clone())
|
||||
.child(tab("Cargo.toml", false))
|
||||
.child(tab("Channels Panel", true))
|
||||
.child(tab("channels_panel.rs", false))
|
||||
.child(tab("workspace.rs", false))
|
||||
.child(tab("icon_button.rs", false))
|
||||
.child(tab("storybook.rs", false))
|
||||
.child(tab("theme.rs", false))
|
||||
.child(tab("theme_registry.rs", false))
|
||||
.child(tab("styleable_helpers.rs", false)),
|
||||
),
|
||||
)
|
||||
// Right Side
|
||||
.child(
|
||||
div()
|
||||
.px_1()
|
||||
.flex()
|
||||
.flex_none()
|
||||
.gap_2()
|
||||
// Nav Buttons
|
||||
.child(
|
||||
div()
|
||||
.flex()
|
||||
.items_center()
|
||||
.gap_px()
|
||||
.child(icon_button("icons/plus.svg", ButtonVariant::Ghost))
|
||||
.child(icon_button("icons/split.svg", ButtonVariant::Ghost)),
|
||||
),
|
||||
)
|
||||
}
|
||||
}
|
||||
|
|
@ -12,6 +12,7 @@ use simplelog::SimpleLogger;
|
|||
mod collab_panel;
|
||||
mod components;
|
||||
mod element_ext;
|
||||
mod modules;
|
||||
mod theme;
|
||||
mod workspace;
|
||||
|
||||
|
|
@ -34,13 +35,13 @@ fn main() {
|
|||
|
||||
cx.add_window(
|
||||
gpui2::WindowOptions {
|
||||
bounds: WindowBounds::Fixed(RectF::new(vec2f(0., 0.), vec2f(1400., 900.))),
|
||||
bounds: WindowBounds::Fixed(RectF::new(vec2f(0., 0.), vec2f(1600., 900.))),
|
||||
center: true,
|
||||
..Default::default()
|
||||
},
|
||||
|cx| {
|
||||
view(|cx| {
|
||||
cx.enable_inspector();
|
||||
// cx.enable_inspector();
|
||||
storybook(&mut ViewContext::new(cx))
|
||||
})
|
||||
},
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
use crate::{collab_panel::collab_panel, theme::theme};
|
||||
use crate::{collab_panel::collab_panel, modules::tab_bar, theme::theme};
|
||||
use gpui2::{
|
||||
elements::{div, div::ScrollState, img, svg},
|
||||
style::{StyleHelpers, Styleable},
|
||||
|
|
@ -9,6 +9,7 @@ use gpui2::{
|
|||
struct WorkspaceElement {
|
||||
left_scroll_state: ScrollState,
|
||||
right_scroll_state: ScrollState,
|
||||
tab_bar_scroll_state: ScrollState,
|
||||
}
|
||||
|
||||
pub fn workspace<V: 'static>() -> impl Element<V> {
|
||||
|
|
@ -38,7 +39,19 @@ impl WorkspaceElement {
|
|||
.flex_row()
|
||||
.overflow_hidden()
|
||||
.child(collab_panel(self.left_scroll_state.clone()))
|
||||
.child(div().h_full().flex_1())
|
||||
.child(
|
||||
div()
|
||||
.h_full()
|
||||
.flex_1()
|
||||
.fill(theme.highest.base.default.background)
|
||||
.child(
|
||||
div()
|
||||
.flex()
|
||||
.flex_col()
|
||||
.flex_1()
|
||||
.child(tab_bar(self.tab_bar_scroll_state.clone())),
|
||||
),
|
||||
)
|
||||
.child(collab_panel(self.right_scroll_state.clone())),
|
||||
)
|
||||
.child(statusbar())
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue