mirror of
https://github.com/zed-industries/zed.git
synced 2025-01-05 23:51:08 +00:00
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
|
||||
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]
|
||||
|
|
|
@ -1,4 +1,3 @@
|
|||
pub mod assistant_panel;
|
||||
pub mod breadcrumb;
|
||||
pub mod buffer;
|
||||
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;
|
||||
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;
|
||||
|
|
|
@ -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(),
|
||||
|
|
|
@ -14,3 +14,7 @@ smallvec.workspace = true
|
|||
strum = { version = "0.25.0", features = ["derive"] }
|
||||
theme = { path = "../theme" }
|
||||
rand = "0.8"
|
||||
|
||||
[features]
|
||||
default = ["stories"]
|
||||
stories = []
|
||||
|
|
|
@ -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())
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
@ -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
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…
Reference in a new issue