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

This commit is contained in:
Marshall Bowers 2023-10-10 15:30:16 -04:00
parent 5b7ca6435c
commit b1d88ced61
9 changed files with 95 additions and 83 deletions

View file

@ -24,7 +24,7 @@ simplelog = "0.9"
smallvec.workspace = true
strum = { version = "0.25.0", features = ["derive"] }
theme = { path = "../theme" }
ui = { package = "ui2", path = "../ui2" }
ui = { package = "ui2", path = "../ui2", features = ["stories"] }
util = { path = "../util" }
[dev-dependencies]

View file

@ -1,4 +1,3 @@
pub mod assistant_panel;
pub mod breadcrumb;
pub mod buffer;
pub mod chat_panel;

View file

@ -1,26 +0,0 @@
use std::marker::PhantomData;
use ui::prelude::*;
use ui::AssistantPanel;
use crate::story::Story;
#[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())
}
}

View file

@ -1,52 +1 @@
use gpui3::Div;
use ui::prelude::*;
use ui::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())
}
}
pub use ui::Story;

View file

@ -71,9 +71,7 @@ impl ComponentStory {
use crate::stories::components;
match self {
Self::AssistantPanel => {
components::assistant_panel::AssistantPanelStory::new().into_any()
}
Self::AssistantPanel => ui::AssistantPanelStory::new().into_any(),
Self::Buffer => components::buffer::BufferStory::new().into_any(),
Self::Breadcrumb => components::breadcrumb::BreadcrumbStory::new().into_any(),
Self::ChatPanel => components::chat_panel::ChatPanelStory::new().into_any(),

View file

@ -14,3 +14,7 @@ smallvec.workspace = true
strum = { version = "0.25.0", features = ["derive"] }
theme = { path = "../theme" }
rand = "0.8"
[features]
default = ["stories"]
stories = []

View file

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

View file

@ -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::*;

53
crates/ui2/src/story.rs Normal file
View file

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