Yehowshua/ZIm
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

gpui: Add a standard text example (#30747)

Browse source 
This is a dumb first pass at a standard text example. We'll use this to
start digging in to some text/scale rendering issues.

There will be a ton of follow-up features to this, but starting simple.

Release Notes:

- N/A
This commit is contained in:
Nate Butler 2025-05-16 17:35:44 +02:00 • committed by GitHub
parent 9dabf491f0
commit e26620d1cf
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
30 changed files with 606 additions and 362 deletions
Download patch file Download diff file Expand all files Collapse all files

2
crates/storybook/src/stories.rs
View file

@ -1,6 +1,5 @@
mod auto_height_editor;
mod cursor;
mod default_colors;
mod focus;
mod kitchen_sink;
mod overflow_scroll;
@ -12,7 +11,6 @@ mod with_rem_size;
pub use auto_height_editor::*;
pub use cursor::*;
pub use default_colors::*;
pub use focus::*;
pub use kitchen_sink::*;
pub use overflow_scroll::*;

8
crates/storybook/src/stories/cursor.rs
View file

@ -5,7 +5,7 @@ use ui::prelude::*;
pub struct CursorStory;
impl Render for CursorStory {
fn render(&mut self, _window: &mut Window, _cx: &mut Context<Self>) -> impl IntoElement {
fn render(&mut self, _window: &mut Window, cx: &mut Context<Self>) -> impl IntoElement {
let all_cursors: [(&str, Box<dyn Fn(Stateful<Div>) -> Stateful<Div>>); 19] = [
(
"cursor_default",
@ -85,10 +85,10 @@ impl Render for CursorStory {
),
];
Story::container()
Story::container(cx)
.flex()
.gap_1()
.child(Story::title("cursor"))
.child(Story::title("cursor", cx))
.children(all_cursors.map(|(name, apply_cursor)| {
div().gap_1().flex().text_color(gpui::white()).child(
div()
@ -102,7 +102,7 @@ impl Render for CursorStory {
.bg(gpui::red())
.active(|style| style.bg(gpui::green()))
.text_sm()
.child(Story::label(name)),
.child(Story::label(name, cx)),
)
}))
}

89
crates/storybook/src/stories/default_colors.rs
View file

@ -1,89 +0,0 @@
use gpui::{
App, Context, DefaultColor, DefaultThemeAppearance, Entity, Hsla, Render, Window, colors, div,
prelude::*,
};
use story::Story;
use strum::IntoEnumIterator;
use ui::{ActiveTheme, h_flex};
pub struct DefaultColorsStory;
impl DefaultColorsStory {
pub fn model(cx: &mut App) -> Entity<Self> {
cx.new(|_| Self)
}
}
impl Render for DefaultColorsStory {
fn render(&mut self, _: &mut Window, cx: &mut Context<Self>) -> impl IntoElement {
let appearances = [DefaultThemeAppearance::Light, DefaultThemeAppearance::Dark];
Story::container()
.child(Story::title("Default Colors"))
.children(appearances.iter().map(|&appearance| {
let colors = colors(appearance);
let color_types = DefaultColor::iter()
.map(|color| {
let name = format!("{:?}", color);
let rgba = color.hsla(&colors);
(name, rgba)
})
.collect::<Vec<_>>();
div()
.flex()
.flex_col()
.gap_4()
.p_4()
.child(Story::label(format!("{:?} Appearance", appearance)))
.children(color_types.iter().map(|(name, color)| {
let color: Hsla = *color;
div()
.flex()
.items_center()
.gap_2()
.child(
div()
.w_12()
.h_12()
.bg(color)
.border_1()
.border_color(cx.theme().colors().border),
)
.child(Story::label(format!("{}: {:?}", name, color.clone())))
}))
.child(
h_flex()
.gap_1()
.child(
h_flex()
.bg(DefaultColor::Background.hsla(&colors))
.h_8()
.p_2()
.text_sm()
.text_color(DefaultColor::Text.hsla(&colors))
.child("Default Text"),
)
.child(
h_flex()
.bg(DefaultColor::Container.hsla(&colors))
.h_8()
.p_2()
.text_sm()
.text_color(DefaultColor::Text.hsla(&colors))
.child("Text on Container"),
)
.child(
h_flex()
.bg(DefaultColor::Selected.hsla(&colors))
.h_8()
.p_2()
.text_sm()
.text_color(DefaultColor::SelectedText.hsla(&colors))
.child("Selected Text"),
),
)
}))
}
}

6
crates/storybook/src/stories/indent_guides.rs
View file

@ -1,12 +1,12 @@
use std::fmt::format;
use gpui::{
colors, div, prelude::*, uniform_list, DefaultColor, DefaultThemeAppearance, Hsla, Render,
DefaultColor, DefaultThemeAppearance, Hsla, Render, colors, div, prelude::*, uniform_list,
};
use story::Story;
use strum::IntoEnumIterator;
use ui::{
h_flex, px, v_flex, AbsoluteLength, ActiveTheme, Color, DefiniteLength, Label, LabelCommon,
AbsoluteLength, ActiveTheme, Color, DefiniteLength, Label, LabelCommon, h_flex, px, v_flex,
};
const LENGTH: usize = 100;
@ -34,7 +34,7 @@ impl IndentGuidesStory {
impl Render for IndentGuidesStory {
fn render(&mut self, window: &mut Window, cx: &mut Context<Self>) -> impl IntoElement {
Story::container()
Story::container(cx)
.child(Story::title("Indent guides"))
.child(
v_flex().size_full().child(

6
crates/storybook/src/stories/kitchen_sink.rs
View file

@ -19,11 +19,11 @@ impl Render for KitchenSinkStory {
.map(|selector| selector.story(window, cx))
.collect::<Vec<_>>();
Story::container()
Story::container(cx)
.id("kitchen-sink")
.overflow_y_scroll()
.child(Story::title("Kitchen Sink"))
.child(Story::label("Components"))
.child(Story::title("Kitchen Sink", cx))
.child(Story::label("Components", cx))
.child(div().flex().flex_col().children(component_stories))
// Add a bit of space at the bottom of the kitchen sink so elements
// don't end up squished right up against the bottom of the screen.

10
crates/storybook/src/stories/overflow_scroll.rs
View file

@ -6,10 +6,10 @@ use ui::prelude::*;
pub struct OverflowScrollStory;
impl Render for OverflowScrollStory {
fn render(&mut self, _window: &mut Window, _cx: &mut Context<Self>) -> impl IntoElement {
Story::container()
.child(Story::title("Overflow Scroll"))
.child(Story::label("`overflow_x_scroll`"))
fn render(&mut self, _window: &mut Window, cx: &mut Context<Self>) -> impl IntoElement {
Story::container(cx)
.child(Story::title("Overflow Scroll", cx))
.child(Story::label("`overflow_x_scroll`", cx))
.child(
h_flex()
.id("overflow_x_scroll")
@ -22,7 +22,7 @@ impl Render for OverflowScrollStory {
.child(SharedString::from(format!("Child {}", i + 1)))
})),
)
.child(Story::label("`overflow_y_scroll`"))
.child(Story::label("`overflow_y_scroll`", cx))
.child(
v_flex()
.w_full()

6
crates/storybook/src/stories/text.rs
View file

@ -14,9 +14,9 @@ impl TextStory {
}
impl Render for TextStory {
fn render(&mut self, window: &mut Window, _: &mut Context<Self>) -> impl IntoElement {
Story::container()
.child(Story::title("Text"))
fn render(&mut self, window: &mut Window, cx: &mut Context<Self>) -> impl IntoElement {
Story::container(cx)
.child(Story::title("Text", cx))
.children(vec![
StorySection::new()
.child(

4
crates/storybook/src/stories/viewport_units.rs
View file

@ -6,8 +6,8 @@ use ui::prelude::*;
pub struct ViewportUnitsStory;
impl Render for ViewportUnitsStory {
fn render(&mut self, window: &mut Window, _: &mut Context<Self>) -> impl IntoElement {
Story::container().child(
fn render(&mut self, window: &mut Window, cx: &mut Context<Self>) -> impl IntoElement {
Story::container(cx).child(
div()
.flex()
.flex_row()

4
crates/storybook/src/stories/with_rem_size.rs
View file

@ -6,8 +6,8 @@ use ui::{prelude::*, utils::WithRemSize};
pub struct WithRemSizeStory;
impl Render for WithRemSizeStory {
fn render(&mut self, _window: &mut Window, _cx: &mut Context<Self>) -> impl IntoElement {
Story::container().child(
fn render(&mut self, _window: &mut Window, cx: &mut Context<Self>) -> impl IntoElement {
Story::container(cx).child(
Example::new(16., gpui::red())
.child(
Example::new(24., gpui::green())

2
crates/storybook/src/story_selector.rs
View file

@ -17,7 +17,6 @@ pub enum ComponentStory {
CollabNotification,
ContextMenu,
Cursor,
DefaultColors,
Focus,
IconButton,
Keybinding,
@ -47,7 +46,6 @@ impl ComponentStory {
.into(),
Self::ContextMenu => cx.new(|_| ui::ContextMenuStory).into(),
Self::Cursor => cx.new(|_| crate::stories::CursorStory).into(),
Self::DefaultColors => DefaultColorsStory::model(cx).into(),
Self::Focus => FocusStory::model(window, cx).into(),
Self::IconButton => cx.new(|_| ui::IconButtonStory).into(),
Self::Keybinding => cx.new(|_| ui::KeybindingStory).into(),