1use gpui::{
2 div, green, red, Component, HighlightStyle, InteractiveText, IntoElement, ParentElement,
3 Render, Styled, 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.build_view(|_cx| Self)
13 }
14}
15
16impl Render for TextStory {
17 type Element = Component<StoryContainer>;
18
19 fn render(&mut self, cx: &mut gpui::ViewContext<Self>) -> Self::Element {
20 StoryContainer::new("Text Story", "crates/storybook2/src/stories/text.rs")
21 .children(
22 vec![
23
24 StorySection::new()
25 .child(
26 StoryItem::new("Default", div().bg(gpui::blue()).child("Hello World!"))
27 .usage(indoc! {r##"
28 div()
29 .child("Hello World!")
30 "##
31 }),
32 )
33 .child(
34 StoryItem::new("Wrapping Text",
35 div().max_w_96()
36 .child(
37 concat!(
38 "The quick brown fox jumps over the lazy dog. ",
39 "Meanwhile, the lazy dog decided it was time for a change. ",
40 "He started daily workout routines, ate healthier and became the fastest dog in town.",
41 )
42 )
43 )
44 .description("Set a width or max-width to enable text wrapping.")
45 .usage(indoc! {r##"
46 div()
47 .max_w_96()
48 .child("Some text that you want to wrap.")
49 "##
50 })
51 )
52 .child(
53 StoryItem::new("tbd",
54 div().flex().w_96().child(div().overflow_hidden().child(concat!(
55 "flex-row. width 96. overflow-hidden. The quick brown fox jumps over the lazy dog. ",
56 "Meanwhile, the lazy dog decided it was time for a change. ",
57 "He started daily workout routines, ate healthier and became the fastest dog in town.",
58 )))
59 )
60 )
61 .child(
62 StoryItem::new("Text in Horizontal Flex",
63 div().flex().w_96().bg(red()).child(concat!(
64 "flex-row. width 96. The quick brown fox jumps over the lazy dog. ",
65 "Meanwhile, the lazy dog decided it was time for a change. ",
66 "He started daily workout routines, ate healthier and became the fastest dog in town.",
67 ))
68 )
69 .usage(indoc! {r##"
70 // NOTE: When rendering text in a horizonal flex container,
71 // Taffy will not pass width constraints down from the parent.
72 // To fix this, render text in a parent with overflow: hidden
73
74 div()
75 .max_w_96()
76 .child("Some text that you want to wrap.")
77 "##
78 })
79 )
80 .child(
81 StoryItem::new("Interactive Text",
82 InteractiveText::new(
83 "interactive",
84 StyledText::new("Hello world, how is it going?").with_highlights(&cx.text_style(), [
85 (6..11, HighlightStyle {
86 background_color: Some(green()),
87 ..Default::default()
88 }),
89 ]),
90 )
91 .on_click(vec![2..4, 1..3, 7..9], |range_ix, _cx| {
92 println!("Clicked range {range_ix}");
93 })
94 )
95 .usage(indoc! {r##"
96 InteractiveText::new(
97 "interactive",
98 StyledText::new("Hello world, how is it going?").with_highlights(&cx.text_style(), [
99 (6..11, HighlightStyle {
100 background_color: Some(green()),
101 ..Default::default()
102 }),
103 ]),
104 )
105 .on_click(vec![2..4, 1..3, 7..9], |range_ix, _cx| {
106 println!("Clicked range {range_ix}");
107 })
108 "##
109 })
110 )
111 ]
112 ).into_element()
113 }
114}
115
116// TODO: Check all were updated to new style and remove
117
118// impl Render for TextStory {
119// type Element = Div;
120
121// fn render(&mut self, cx: &mut gpui::ViewContext<Self>) -> Self::Element {
122// v_stack()
123// .bg(blue())
124// .child(
125// div()
126// .flex()
127// .child(div().max_w_96().bg(white()).child(concat!(
128// "max-width: 96. The quick brown fox jumps over the lazy dog. ",
129// "Meanwhile, the lazy dog decided it was time for a change. ",
130// "He started daily workout routines, ate healthier and became the fastest dog in town.",
131// ))),
132// )
133// .child(div().h_5())
134// .child(div().flex().flex_col().w_96().bg(white()).child(concat!(
135// "flex-col. width: 96; The quick brown fox jumps over the lazy dog. ",
136// "Meanwhile, the lazy dog decided it was time for a change. ",
137// "He started daily workout routines, ate healthier and became the fastest dog in town.",
138// )))
139// .child(div().h_5())
140// .child(
141// div()
142// .flex()
143// .child(div().min_w_96().bg(white()).child(concat!(
144// "min-width: 96. The quick brown fox jumps over the lazy dog. ",
145// "Meanwhile, the lazy dog decided it was time for a change. ",
146// "He started daily workout routines, ate healthier and became the fastest dog in town.",
147// ))))
148// .child(div().h_5())
149// .child(div().flex().w_96().bg(white()).child(div().overflow_hidden().child(concat!(
150// "flex-row. width 96. overflow-hidden. The quick brown fox jumps over the lazy dog. ",
151// "Meanwhile, the lazy dog decided it was time for a change. ",
152// "He started daily workout routines, ate healthier and became the fastest dog in town.",
153// ))))
154// // NOTE: When rendering text in a horizonal flex container,
155// // Taffy will not pass width constraints down from the parent.
156// // To fix this, render text in a parent with overflow: hidden
157// .child(div().h_5())
158// .child(div().flex().w_96().bg(red()).child(concat!(
159// "flex-row. width 96. The quick brown fox jumps over the lazy dog. ",
160// "Meanwhile, the lazy dog decided it was time for a change. ",
161// "He started daily workout routines, ate healthier and became the fastest dog in town.",
162// ))).child(
163// InteractiveText::new(
164// "interactive",
165// StyledText::new("Hello world, how is it going?").with_highlights(&cx.text_style(), [
166// (6..11, HighlightStyle {
167// background_color: Some(green()),
168// ..Default::default()
169// }),
170// ]),
171// )
172// .on_click(vec![2..4, 1..3, 7..9], |range_ix, _cx| {
173// println!("Clicked range {range_ix}");
174// })
175// )
176// }
177// }