Add an example of colocating a story for a UI component with its definition
This commit is contained in:
parent
5b7ca6435c
commit
b1d88ced61
9 changed files with 95 additions and 83 deletions
|
@ -24,7 +24,7 @@ simplelog = "0.9"
|
||||||
smallvec.workspace = true
|
smallvec.workspace = true
|
||||||
strum = { version = "0.25.0", features = ["derive"] }
|
strum = { version = "0.25.0", features = ["derive"] }
|
||||||
theme = { path = "../theme" }
|
theme = { path = "../theme" }
|
||||||
ui = { package = "ui2", path = "../ui2" }
|
ui = { package = "ui2", path = "../ui2", features = ["stories"] }
|
||||||
util = { path = "../util" }
|
util = { path = "../util" }
|
||||||
|
|
||||||
[dev-dependencies]
|
[dev-dependencies]
|
||||||
|
|
|
@ -1,4 +1,3 @@
|
||||||
pub mod assistant_panel;
|
|
||||||
pub mod breadcrumb;
|
pub mod breadcrumb;
|
||||||
pub mod buffer;
|
pub mod buffer;
|
||||||
pub mod chat_panel;
|
pub mod chat_panel;
|
||||||
|
|
|
@ -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())
|
|
||||||
}
|
|
||||||
}
|
|
|
@ -1,52 +1 @@
|
||||||
use gpui3::Div;
|
pub use ui::Story;
|
||||||
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())
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
|
@ -71,9 +71,7 @@ impl ComponentStory {
|
||||||
use crate::stories::components;
|
use crate::stories::components;
|
||||||
|
|
||||||
match self {
|
match self {
|
||||||
Self::AssistantPanel => {
|
Self::AssistantPanel => ui::AssistantPanelStory::new().into_any(),
|
||||||
components::assistant_panel::AssistantPanelStory::new().into_any()
|
|
||||||
}
|
|
||||||
Self::Buffer => components::buffer::BufferStory::new().into_any(),
|
Self::Buffer => components::buffer::BufferStory::new().into_any(),
|
||||||
Self::Breadcrumb => components::breadcrumb::BreadcrumbStory::new().into_any(),
|
Self::Breadcrumb => components::breadcrumb::BreadcrumbStory::new().into_any(),
|
||||||
Self::ChatPanel => components::chat_panel::ChatPanelStory::new().into_any(),
|
Self::ChatPanel => components::chat_panel::ChatPanelStory::new().into_any(),
|
||||||
|
|
|
@ -14,3 +14,7 @@ smallvec.workspace = true
|
||||||
strum = { version = "0.25.0", features = ["derive"] }
|
strum = { version = "0.25.0", features = ["derive"] }
|
||||||
theme = { path = "../theme" }
|
theme = { path = "../theme" }
|
||||||
rand = "0.8"
|
rand = "0.8"
|
||||||
|
|
||||||
|
[features]
|
||||||
|
default = ["stories"]
|
||||||
|
stories = []
|
||||||
|
|
|
@ -88,3 +88,33 @@ impl<S: 'static + Send + Sync + Clone> AssistantPanel<S> {
|
||||||
.width(AbsoluteLength::Rems(rems(32.)))
|
.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())
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
|
@ -18,3 +18,8 @@ pub use static_data::*;
|
||||||
pub use tokens::*;
|
pub use tokens::*;
|
||||||
|
|
||||||
pub use crate::theme::*;
|
pub use crate::theme::*;
|
||||||
|
|
||||||
|
#[cfg(feature = "stories")]
|
||||||
|
mod story;
|
||||||
|
#[cfg(feature = "stories")]
|
||||||
|
pub use story::*;
|
||||||
|
|
53
crates/ui2/src/story.rs
Normal file
53
crates/ui2/src/story.rs
Normal 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())
|
||||||
|
}
|
||||||
|
}
|
Loading…
Add table
Add a link
Reference in a new issue