61f60d0039
mara (#4172): the components page was out of date against its own stated rule ("a new primitive gets a section here the same day it's added"). Dialog and ConfirmDialog are real standalone exported primitives (AgentsPage uses both directly) with no demo section. FormField deliberately stays excluded — its own comment already says it's not a reachable primitive, just TextField/SelectField's shared internal wrapper, so it was never meant to get one. Also gave the Table demo's "detail" column a multiselect filter, so the checkbox popover and reset-filters button — real, daily-used Table behavior — are actually shown rather than an unfiltered grid.
373 lines
11 KiB
TypeScript
373 lines
11 KiB
TypeScript
// <ComponentsPage> — living style guide for every ui primitive this
|
|
// package ships. One section per component, each mode it supports
|
|
// rendered side by side with a caption naming the mode — so a visual
|
|
// regression or a missing variant is obvious at a glance, and a new
|
|
// primitive gets a section here the same day it's added. Sample data
|
|
// only, no network calls — this page must render the same whether
|
|
// swarm-controller's API is up or not.
|
|
import { useRef, useState } from "preact/hooks";
|
|
import type { ComponentChildren } from "preact";
|
|
import { Panel } from "../ui/panel/Panel.js";
|
|
import { RelativeTime } from "../ui/relative-time/RelativeTime.js";
|
|
import {
|
|
RefreshIntervalPicker,
|
|
type RefreshIntervalMs,
|
|
} from "../ui/refresh-interval/RefreshInterval.js";
|
|
import { Table, type TableColumn } from "../ui/table/Table.js";
|
|
import { TextField } from "../ui/text-field/TextField.js";
|
|
import {
|
|
SelectField,
|
|
type SelectOption,
|
|
} from "../ui/select-field/SelectField.js";
|
|
import { Button, type ButtonVariant } from "../ui/button/Button.js";
|
|
import { Dialog } from "../ui/dialog/Dialog.js";
|
|
import { ConfirmDialog } from "../ui/confirm-dialog/ConfirmDialog.js";
|
|
import { Badge, type BadgeTone } from "@hive/shared/badge.js";
|
|
import { GearIcon } from "@hive/shared/icons.js";
|
|
import { Dropdown, type DropdownOption } from "@hive/shared/dropdown.js";
|
|
import "./ComponentsPage.css";
|
|
|
|
function Section({
|
|
title,
|
|
children,
|
|
}: {
|
|
title: string;
|
|
children: ComponentChildren;
|
|
}) {
|
|
return (
|
|
<section class="components-section">
|
|
<h2 class="components-section-title">{title}</h2>
|
|
<div class="components-section-body">{children}</div>
|
|
</section>
|
|
);
|
|
}
|
|
|
|
function Sample({
|
|
label,
|
|
children,
|
|
}: {
|
|
label: string;
|
|
children: ComponentChildren;
|
|
}) {
|
|
return (
|
|
<div class="components-sample">
|
|
<div class="components-sample-label">{label}</div>
|
|
<div class="components-sample-content">{children}</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
interface Row {
|
|
name: string;
|
|
detail: string;
|
|
}
|
|
|
|
const TABLE_COLUMNS: TableColumn<Row>[] = [
|
|
{ key: "name", header: "name", render: (r) => r.name },
|
|
{
|
|
key: "detail",
|
|
header: "detail",
|
|
render: (r) => r.detail,
|
|
// One filterable column, multiselect mode — the checkbox-list popover
|
|
// + reset-filters button are both real `Table` behavior an operator
|
|
// hits daily (`AgentsPage`/`HivesPage`), so the demo shows them rather
|
|
// than a plain unfilterable grid.
|
|
filterValues: (r) => [r.detail],
|
|
filterMode: "multiselect",
|
|
},
|
|
{
|
|
key: "status",
|
|
header: "status",
|
|
render: () => <Badge tone="positive" value="ok" />,
|
|
},
|
|
];
|
|
|
|
const TABLE_ROWS: Row[] = [
|
|
{ name: "alpha", detail: "sample row one" },
|
|
{ name: "beta", detail: "sample row two" },
|
|
];
|
|
|
|
const SELECT_OPTIONS: SelectOption[] = [
|
|
{ value: "alpha", label: "alpha" },
|
|
{ value: "beta", label: "beta" },
|
|
];
|
|
|
|
const BUTTON_VARIANTS: ButtonVariant[] = ["primary", "default"];
|
|
const BADGE_TONES: BadgeTone[] = [
|
|
"neutral",
|
|
"positive",
|
|
"warning",
|
|
"negative",
|
|
"accent",
|
|
];
|
|
|
|
const MODEL_OPTIONS: DropdownOption[] = [
|
|
{ value: "haiku", label: "haiku", description: "fast" },
|
|
{ value: "sonnet", label: "sonnet", description: "balanced" },
|
|
{ value: "opus", label: "opus", description: "powerful" },
|
|
];
|
|
|
|
// Controlled samples need their own state to actually type/select into —
|
|
// module-level consts can't do that, hence these two small wrappers
|
|
// rather than inline JSX in the page body below.
|
|
function TextFieldSample() {
|
|
const [value, setValue] = useState("");
|
|
return (
|
|
<TextField
|
|
id="sample-text-field"
|
|
label="agent name"
|
|
value={value}
|
|
onInput={setValue}
|
|
/>
|
|
);
|
|
}
|
|
|
|
function SelectFieldSample() {
|
|
const [value, setValue] = useState("alpha");
|
|
return (
|
|
<SelectField
|
|
id="sample-select-field"
|
|
label="hive"
|
|
value={value}
|
|
onChange={setValue}
|
|
options={SELECT_OPTIONS}
|
|
/>
|
|
);
|
|
}
|
|
|
|
function RefreshIntervalPickerSample() {
|
|
const [value, setValue] = useState<RefreshIntervalMs>(30_000);
|
|
return (
|
|
<RefreshIntervalPicker
|
|
id="sample-refresh-interval"
|
|
value={value}
|
|
onChange={setValue}
|
|
/>
|
|
);
|
|
}
|
|
|
|
// The badge-triggers-a-dropdown-right-underneath-itself pattern this is
|
|
// meant to land — the model/effort picker shape from the per-agent
|
|
// terminal, demoed here with sample data. The wrapper
|
|
// needs `position: relative` (`.components-badge-anchor`) so `Dropdown`
|
|
// anchors under this badge specifically, not the page.
|
|
function BadgePickerSample() {
|
|
const [value, setValue] = useState("sonnet");
|
|
const [open, setOpen] = useState(false);
|
|
const anchorRef = useRef<HTMLDivElement>(null);
|
|
return (
|
|
<div class="components-badge-anchor" ref={anchorRef}>
|
|
<Badge
|
|
label="model"
|
|
value={value}
|
|
onClick={() => setOpen((o) => !o)}
|
|
expanded={open}
|
|
/>
|
|
<Dropdown
|
|
open={open}
|
|
options={MODEL_OPTIONS}
|
|
activeValue={value}
|
|
label="select model"
|
|
onSelect={(v) => {
|
|
setValue(v);
|
|
setOpen(false);
|
|
}}
|
|
onClose={() => setOpen(false)}
|
|
anchorRef={anchorRef}
|
|
/>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
// The other interactive shape: a badge that's itself the control (no
|
|
// dropdown) — e.g. the agent page's pause/resume action folded into the
|
|
// status row instead of living in the `⋯` overflow menu.
|
|
function BadgeToggleSample() {
|
|
const [paused, setPaused] = useState(false);
|
|
return (
|
|
<Badge
|
|
value={paused ? "▶ resume" : "⏸ pause"}
|
|
tone={paused ? "warning" : "neutral"}
|
|
onClick={() => setPaused((p) => !p)}
|
|
/>
|
|
);
|
|
}
|
|
|
|
// `Dialog` and `ConfirmDialog` both need `open` state to actually toggle —
|
|
// same "controlled sample needs its own wrapper" reasoning as
|
|
// `TextFieldSample` above.
|
|
function DialogSample() {
|
|
const [open, setOpen] = useState(false);
|
|
return (
|
|
<>
|
|
<Button onClick={() => setOpen(true)}>open dialog</Button>
|
|
<Dialog open={open} onClose={() => setOpen(false)} label="sample dialog">
|
|
<p>
|
|
Plain content — <code>Dialog</code> supplies the modal wiring (focus
|
|
trap, Escape, backdrop-click) and the close button; the caller owns
|
|
everything else, including its own heading if it wants one.
|
|
</p>
|
|
</Dialog>
|
|
</>
|
|
);
|
|
}
|
|
|
|
function ConfirmDialogSample() {
|
|
const [open, setOpen] = useState(false);
|
|
return (
|
|
<>
|
|
<Button onClick={() => setOpen(true)}>open confirm dialog</Button>
|
|
<ConfirmDialog
|
|
open={open}
|
|
label="sample confirm dialog"
|
|
onCancel={() => setOpen(false)}
|
|
onConfirm={() => setOpen(false)}
|
|
confirmLabel="confirm"
|
|
>
|
|
<p>
|
|
The message is caller-owned <code>children</code>, same as{" "}
|
|
<code>Dialog</code> — only the button row and spacing are shared.
|
|
</p>
|
|
</ConfirmDialog>
|
|
</>
|
|
);
|
|
}
|
|
|
|
export function ComponentsPage() {
|
|
return (
|
|
<Panel title="components" icon="🧰">
|
|
<p class="components-intro">
|
|
Every primitive in <code>src/ui/</code>, shown in each mode it supports.
|
|
Sample data only — nothing here calls the API.
|
|
</p>
|
|
|
|
<Section title="Panel">
|
|
<Sample label="with title">
|
|
<Panel title="example title">panel body content</Panel>
|
|
</Sample>
|
|
<Sample label="without title">
|
|
<Panel>panel body content, no title</Panel>
|
|
</Sample>
|
|
<Sample label="with icon (per panel, no default — see the doc comment)">
|
|
<Panel title="example title" icon="✨">
|
|
panel body content
|
|
</Panel>
|
|
</Sample>
|
|
<Sample label="with actions (e.g. HivesPage's refresh picker)">
|
|
<Panel
|
|
title="example title"
|
|
actions={
|
|
<RefreshIntervalPicker
|
|
id="sample-panel-actions"
|
|
value={30_000}
|
|
onChange={() => {}}
|
|
/>
|
|
}
|
|
>
|
|
panel body content
|
|
</Panel>
|
|
</Sample>
|
|
</Section>
|
|
|
|
<Section title="Table">
|
|
<Sample label="populated">
|
|
<Table
|
|
columns={TABLE_COLUMNS}
|
|
rows={TABLE_ROWS}
|
|
rowKey={(r) => r.name}
|
|
storageKey="swarm-ui:components-demo:table-filters"
|
|
/>
|
|
</Sample>
|
|
<Sample label="empty">
|
|
<Table
|
|
columns={TABLE_COLUMNS}
|
|
rows={[]}
|
|
rowKey={(r) => r.name}
|
|
storageKey="swarm-ui:components-demo:table-filters-empty"
|
|
/>
|
|
</Sample>
|
|
</Section>
|
|
|
|
<Section title="RelativeTime">
|
|
<div class="components-chip-row">
|
|
<Sample label="5s ago, ticking">
|
|
<RelativeTime epochMs={Date.now() - 5_000} />
|
|
</Sample>
|
|
<Sample label="2h ago, ticking">
|
|
<RelativeTime epochMs={Date.now() - 2 * 3_600_000} />
|
|
</Sample>
|
|
</div>
|
|
</Section>
|
|
|
|
<Section title="RefreshIntervalPicker">
|
|
<Sample label="editable">
|
|
<RefreshIntervalPickerSample />
|
|
</Sample>
|
|
</Section>
|
|
|
|
<Section title="TextField">
|
|
<Sample label="editable">
|
|
<TextFieldSample />
|
|
</Sample>
|
|
</Section>
|
|
|
|
<Section title="SelectField">
|
|
<Sample label="editable">
|
|
<SelectFieldSample />
|
|
</Sample>
|
|
</Section>
|
|
|
|
<Section title="Button">
|
|
<div class="components-chip-row">
|
|
{BUTTON_VARIANTS.map((variant) => (
|
|
<Sample key={variant} label={variant}>
|
|
<Button variant={variant}>{variant}</Button>
|
|
</Sample>
|
|
))}
|
|
<Sample label="disabled">
|
|
<Button disabled>disabled</Button>
|
|
</Sample>
|
|
</div>
|
|
</Section>
|
|
|
|
<Section title="Dialog">
|
|
<Sample label="modal, caller-owned content">
|
|
<DialogSample />
|
|
</Sample>
|
|
</Section>
|
|
|
|
<Section title="ConfirmDialog">
|
|
<Sample label="modal, cancel/confirm button row">
|
|
<ConfirmDialogSample />
|
|
</Sample>
|
|
</Section>
|
|
|
|
<Section title="Badge (@hive/shared — used by swarm-ui and the per-agent page)">
|
|
<div class="components-chip-row">
|
|
{BADGE_TONES.map((tone) => (
|
|
<Sample key={tone} label={`display, ${tone}`}>
|
|
<Badge value={tone} tone={tone} />
|
|
</Sample>
|
|
))}
|
|
<Sample label="with a label prefix">
|
|
<Badge label="ctx" value="534k" />
|
|
</Sample>
|
|
<Sample label="interactive, opens a Dropdown (model/effort picker shape)">
|
|
<BadgePickerSample />
|
|
</Sample>
|
|
<Sample label="interactive, toggles itself (pause/resume shape)">
|
|
<BadgeToggleSample />
|
|
</Sample>
|
|
<Sample label="interactive, quiet variant (icon-only header trigger, e.g. settings)">
|
|
<Badge
|
|
value={<GearIcon />}
|
|
title="settings"
|
|
variant="quiet"
|
|
onClick={() => {}}
|
|
/>
|
|
</Sample>
|
|
</div>
|
|
</Section>
|
|
</Panel>
|
|
);
|
|
}
|