1use gpui::{
2 div, green, red, HighlightStyle, InteractiveText, IntoElement, ParentElement, Render, Styled,
3 StyledText, View, VisualContext, WindowContext,
4};
5use indoc::indoc;
6use story::*;
7
8pub struct TextStory;
9
10impl TextStory {
11 pub fn view(cx: &mut WindowContext) -> View<Self> {
12 cx.new_view(|_cx| Self)
13 }
14}
15
16impl Render for TextStory {
17 fn render(&mut self, cx: &mut gpui::ViewContext<Self>) -> impl IntoElement {
18 StoryContainer::new("Text Story", "crates/storybook/src/stories/text.rs")
19 .children(
20 vec![
21
22 StorySection::new()
23 .child(
24 StoryItem::new("Default", div().bg(gpui::blue()).child("Hello World!"))
25 .usage(indoc! {r##"
26 div()
27 .child("Hello World!")
28 "##
29 }),
30 )
31 .child(
32 StoryItem::new("Wrapping Text",
33 div().max_w_96()
34 .child(
35 concat!(
36 "The quick brown fox jumps over the lazy dog. ",
37 "Meanwhile, the lazy dog decided it was time for a change. ",
38 "He started daily workout routines, ate healthier and became the fastest dog in town.",
39 )
40 )
41 )
42 .description("Set a width or max-width to enable text wrapping.")
43 .usage(indoc! {r##"
44 div()
45 .max_w_96()
46 .child("Some text that you want to wrap.")
47 "##
48 })
49 )
50 .child(
51 StoryItem::new("tbd",
52 div().flex().w_96().child(div().overflow_hidden().child(concat!(
53 "flex-row. width 96. overflow-hidden. The quick brown fox jumps over the lazy dog. ",
54 "Meanwhile, the lazy dog decided it was time for a change. ",
55 "He started daily workout routines, ate healthier and became the fastest dog in town.",
56 )))
57 )
58 )
59 .child(
60 StoryItem::new("Text in Horizontal Flex",
61 div().flex().w_96().bg(red()).child(concat!(
62 "flex-row. width 96. The quick brown fox jumps over the lazy dog. ",
63 "Meanwhile, the lazy dog decided it was time for a change. ",
64 "He started daily workout routines, ate healthier and became the fastest dog in town.",
65 ))
66 )
67 .usage(indoc! {r##"
68 // NOTE: When rendering text in a horizontal flex container,
69 // Taffy will not pass width constraints down from the parent.
70 // To fix this, render text in a parent with overflow: hidden
71
72 div()
73 .max_w_96()
74 .child("Some text that you want to wrap.")
75 "##
76 })
77 )
78 .child(
79 StoryItem::new("Interactive Text",
80 InteractiveText::new(
81 "interactive",
82 StyledText::new("Hello world, how is it going?").with_highlights(&cx.text_style(), [
83 (6..11, HighlightStyle {
84 background_color: Some(green()),
85 ..Default::default()
86 }),
87 ]),
88 )
89 .on_click(vec![2..4, 1..3, 7..9], |range_ix, _cx| {
90 println!("Clicked range {range_ix}");
91 })
92 )
93 .usage(indoc! {r##"
94 InteractiveText::new(
95 "interactive",
96 StyledText::new("Hello world, how is it going?").with_highlights(&cx.text_style(), [
97 (6..11, HighlightStyle {
98 background_color: Some(green()),
99 ..Default::default()
100 }),
101 ]),
102 )
103 .on_click(vec![2..4, 1..3, 7..9], |range_ix, _cx| {
104 println!("Clicked range {range_ix}");
105 })
106 "##
107 })
108 )
109 ]
110 ).into_element()
111 }
112}