ZacharyZhang-NYandClaude Opus 5.5
6c21711328
tooling::Playground lays a preview beside its knobs, each a switch, a choice or a number that edits one property; the preview redraws from the settings, which fail on a name or kind the knobs lack. The gallery app is the ComponentGallery; its page 43 shows both. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
103 lines
4.4 KiB
Rust
103 lines
4.4 KiB
Rust
use ely_gpui_component::{
|
|
buttons::{Button, ButtonVariant},
|
|
motion::ProgressRing,
|
|
theme::ControlSize,
|
|
tooling::{Knob, Playground},
|
|
};
|
|
use gpui::{AnyElement, App, IntoElement, ParentElement, Styled, Window, div, px};
|
|
|
|
use super::Page;
|
|
use crate::probe::probe;
|
|
use crate::script::Step;
|
|
use crate::ui::section;
|
|
|
|
pub const PAGE: Page = Page {
|
|
number: 43,
|
|
slug: "tooling",
|
|
title: "Library Tooling",
|
|
summary: "Tools for building with the library: this gallery, and a playground that edits a component live.",
|
|
render,
|
|
script: &[
|
|
Step::DownAt("button-playground", 472.0, 207.0),
|
|
Step::UpAt("button-playground", 472.0, 207.0),
|
|
Step::Shot("playground-loading"),
|
|
],
|
|
};
|
|
|
|
fn render(_: &mut Window, cx: &mut App) -> AnyElement {
|
|
div()
|
|
.child(section(
|
|
"ComponentGallery / Storybook",
|
|
"This app is the gallery: a page per chapter of the library, light and dark, each with scripted states. The --page flag opens one page, and --capture photographs every page and state.",
|
|
cx,
|
|
))
|
|
.child(
|
|
section(
|
|
"PlaygroundPanel",
|
|
"A component beside the knobs that shape it: a switch, a choice or a number edits one property, and the preview redraws.",
|
|
cx,
|
|
)
|
|
.child(
|
|
div()
|
|
.flex()
|
|
.flex_col()
|
|
.gap_6()
|
|
.child(probe(
|
|
"button-playground",
|
|
div().w(px(720.0)).child(Playground::new(
|
|
"button-playground",
|
|
[
|
|
Knob::Choice(
|
|
"variant".into(),
|
|
["Primary", "Secondary", "Outline", "Ghost", "Danger"]
|
|
.map(Into::into)
|
|
.into(),
|
|
0,
|
|
),
|
|
Knob::Choice("size".into(), ["Sm", "Md", "Lg"].map(Into::into).into(), 1),
|
|
Knob::Toggle("disabled".into(), false),
|
|
Knob::Toggle("loading".into(), false),
|
|
],
|
|
|settings, _, _| {
|
|
let variant = match settings.picked("variant").as_ref() {
|
|
"Primary" => ButtonVariant::Primary,
|
|
"Secondary" => ButtonVariant::Secondary,
|
|
"Outline" => ButtonVariant::Outline,
|
|
"Ghost" => ButtonVariant::Ghost,
|
|
"Danger" => ButtonVariant::Danger,
|
|
other => panic!("gallery playground: no variant {other}"),
|
|
};
|
|
let size = match settings.picked("size").as_ref() {
|
|
"Sm" => ControlSize::Sm,
|
|
"Md" => ControlSize::Md,
|
|
"Lg" => ControlSize::Lg,
|
|
other => panic!("gallery playground: no size {other}"),
|
|
};
|
|
Button::new("played", "Save changes")
|
|
.variant(variant)
|
|
.size(size)
|
|
.disabled(settings.on("disabled"))
|
|
.loading(settings.on("loading"))
|
|
.into_any_element()
|
|
},
|
|
))))
|
|
.child(div().w(px(720.0)).child(Playground::new(
|
|
"ring-playground",
|
|
[
|
|
Knob::Number("value".into(), 0.62, (0.0, 1.0), 0.01),
|
|
Knob::Toggle("percent".into(), true),
|
|
],
|
|
|settings, _, _| {
|
|
let ring = ProgressRing::new("played-ring", settings.number("value") as f32);
|
|
match settings.on("percent") {
|
|
true => ring.percent(),
|
|
false => ring,
|
|
}
|
|
.into_any_element()
|
|
},
|
|
))),
|
|
),
|
|
)
|
|
.into_any_element()
|
|
}
|