ZacharyZhang-NY
48c7b09d8d
The gallery's entry runs natively or, on wasm32, from a wasm_bindgen start through gpui_web, single-threaded with WebGL2 fallback. ?page, ?story and ?theme choose what shows; an unknown one fails in the page and the log. set_theme switches the mode later. Pictures load from ELY_GALLERY_ASSETS. scripts/stories.py writes examples/gallery/stories.json from the pages.
146 lines
6.2 KiB
Rust
146 lines
6.2 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};
|
|
|
|
mod catalogs;
|
|
mod inspection;
|
|
|
|
use super::Page;
|
|
use crate::probe::probe;
|
|
use crate::step::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, a playground that edits a component live, tools that inspect a running window, its boxes, frames, renders and input, and catalogs of its tokens, icons and contrast.",
|
|
render,
|
|
script: &[
|
|
Step::DownAt("button-playground", 472.0, 207.0),
|
|
Step::UpAt("button-playground", 472.0, 207.0),
|
|
Step::Shot("playground-loading"),
|
|
Step::DownAt("inspect-button", 12.0, 12.0),
|
|
Step::UpAt("inspect-button", 12.0, 12.0),
|
|
Step::HoverAt("inspect-sample", 60.0, 30.0),
|
|
Step::Shot("inspector-picking"),
|
|
Step::DownAt("inspect-sample", 60.0, 30.0),
|
|
Step::UpAt("inspect-sample", 60.0, 30.0),
|
|
Step::HoverAt("inspect-button", 12.0, 12.0),
|
|
Step::Shot("inspector-held"),
|
|
Step::DownAt("inspect-button", 12.0, 12.0),
|
|
Step::UpAt("inspect-button", 12.0, 12.0),
|
|
Step::DownAt("fps-switch", 14.0, 10.0),
|
|
Step::UpAt("fps-switch", 14.0, 10.0),
|
|
Step::Wait(1200),
|
|
Step::Shot("fps-measuring"),
|
|
Step::DownAt("fps-switch", 14.0, 10.0),
|
|
Step::UpAt("fps-switch", 14.0, 10.0),
|
|
Step::DownAt("renders-apart", 200.0, 18.0),
|
|
Step::UpAt("renders-apart", 200.0, 18.0),
|
|
Step::DownAt("renders-apart", 200.0, 18.0),
|
|
Step::UpAt("renders-apart", 200.0, 18.0),
|
|
Step::Shot("renders"),
|
|
Step::HoverAt("events", 40.0, 20.0),
|
|
Step::HoverAt("events", 120.0, 30.0),
|
|
Step::DownAt("events", 120.0, 30.0),
|
|
Step::UpAt("events", 120.0, 30.0),
|
|
Step::DownAt("events", 60.0, 60.0),
|
|
Step::UpAt("events", 60.0, 60.0),
|
|
Step::Type("Hi"),
|
|
Step::Key("backspace"),
|
|
Step::Shot("events"),
|
|
Step::DownAt("icon-browser", 100.0, 14.0),
|
|
Step::UpAt("icon-browser", 100.0, 14.0),
|
|
Step::Type("sun"),
|
|
Step::DownAt("icon-browser", 16.0, 52.0),
|
|
Step::UpAt("icon-browser", 16.0, 52.0),
|
|
Step::Shot("icon-browser"),
|
|
],
|
|
};
|
|
|
|
fn render(window: &mut Window, cx: &mut App) -> AnyElement {
|
|
let inspection = inspection::sections(window, cx);
|
|
let catalogs = catalogs::sections(window, cx);
|
|
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()
|
|
},
|
|
))),
|
|
),
|
|
)
|
|
.children(inspection)
|
|
.children(catalogs)
|
|
.into_any_element()
|
|
}
|