treefmt: apply prettier
Pure `nix fmt` output from the commit before this one — no hand edits. 203 files: 52 md, 42 tsx, 32 js, 32 css, 21 ts, 13 html, 8 json, 3 mjs. Reproduce with `nix develop -c nix fmt` on the parent commit; the result should be byte-identical to this tree. None of the 13 `.prettierignore` entries appears here — verified by intersecting the changed-file list against the ignore file, with a control proving the intersection finds a match when one exists.
This commit is contained in:
atlas
parent
5d24bedd60
commit
39b95c2ede
203 changed files with 10090 additions and 6085 deletions
|
|
@ -5,21 +5,33 @@
|
|||
// 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 { 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';
|
||||
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 { 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 }) {
|
||||
function Section({
|
||||
title,
|
||||
children,
|
||||
}: {
|
||||
title: string;
|
||||
children: ComponentChildren;
|
||||
}) {
|
||||
return (
|
||||
<section class="components-section">
|
||||
<h2 class="components-section-title">{title}</h2>
|
||||
|
|
@ -28,7 +40,13 @@ function Section({ title, children }: { title: string; children: ComponentChildr
|
|||
);
|
||||
}
|
||||
|
||||
function Sample({ label, children }: { label: string; children: ComponentChildren }) {
|
||||
function Sample({
|
||||
label,
|
||||
children,
|
||||
}: {
|
||||
label: string;
|
||||
children: ComponentChildren;
|
||||
}) {
|
||||
return (
|
||||
<div class="components-sample">
|
||||
<div class="components-sample-label">{label}</div>
|
||||
|
|
@ -43,40 +61,57 @@ interface Row {
|
|||
}
|
||||
|
||||
const TABLE_COLUMNS: TableColumn<Row>[] = [
|
||||
{ key: 'name', header: 'name', render: (r) => r.name },
|
||||
{ key: 'detail', header: 'detail', render: (r) => r.detail },
|
||||
{ key: 'status', header: 'status', render: () => <Badge tone="positive" value="ok" /> },
|
||||
{ key: "name", header: "name", render: (r) => r.name },
|
||||
{ key: "detail", header: "detail", render: (r) => r.detail },
|
||||
{
|
||||
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' },
|
||||
{ name: "alpha", detail: "sample row one" },
|
||||
{ name: "beta", detail: "sample row two" },
|
||||
];
|
||||
|
||||
const SELECT_OPTIONS: SelectOption[] = [
|
||||
{ value: 'alpha', label: 'alpha' },
|
||||
{ value: 'beta', label: 'beta' },
|
||||
{ value: "alpha", label: "alpha" },
|
||||
{ value: "beta", label: "beta" },
|
||||
];
|
||||
|
||||
const BUTTON_VARIANTS: ButtonVariant[] = ['primary', 'default'];
|
||||
const BADGE_TONES: BadgeTone[] = ['neutral', 'positive', 'warning', 'negative', 'accent'];
|
||||
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' },
|
||||
{ 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} />;
|
||||
const [value, setValue] = useState("");
|
||||
return (
|
||||
<TextField
|
||||
id="sample-text-field"
|
||||
label="agent name"
|
||||
value={value}
|
||||
onInput={setValue}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
function SelectFieldSample() {
|
||||
const [value, setValue] = useState('alpha');
|
||||
const [value, setValue] = useState("alpha");
|
||||
return (
|
||||
<SelectField
|
||||
id="sample-select-field"
|
||||
|
|
@ -90,7 +125,13 @@ function SelectFieldSample() {
|
|||
|
||||
function RefreshIntervalPickerSample() {
|
||||
const [value, setValue] = useState<RefreshIntervalMs>(30_000);
|
||||
return <RefreshIntervalPicker id="sample-refresh-interval" value={value} onChange={setValue} />;
|
||||
return (
|
||||
<RefreshIntervalPicker
|
||||
id="sample-refresh-interval"
|
||||
value={value}
|
||||
onChange={setValue}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
// The badge-triggers-a-dropdown-right-underneath-itself pattern this is
|
||||
|
|
@ -99,7 +140,7 @@ function RefreshIntervalPickerSample() {
|
|||
// needs `position: relative` (`.components-badge-anchor`) so `Dropdown`
|
||||
// anchors under this badge specifically, not the page.
|
||||
function BadgePickerSample() {
|
||||
const [value, setValue] = useState('sonnet');
|
||||
const [value, setValue] = useState("sonnet");
|
||||
const [open, setOpen] = useState(false);
|
||||
const anchorRef = useRef<HTMLDivElement>(null);
|
||||
return (
|
||||
|
|
@ -133,8 +174,8 @@ function BadgeToggleSample() {
|
|||
const [paused, setPaused] = useState(false);
|
||||
return (
|
||||
<Badge
|
||||
value={paused ? '▶ resume' : '⏸ pause'}
|
||||
tone={paused ? 'warning' : 'neutral'}
|
||||
value={paused ? "▶ resume" : "⏸ pause"}
|
||||
tone={paused ? "warning" : "neutral"}
|
||||
onClick={() => setPaused((p) => !p)}
|
||||
/>
|
||||
);
|
||||
|
|
@ -144,8 +185,8 @@ 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.
|
||||
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">
|
||||
|
|
@ -163,7 +204,13 @@ export function ComponentsPage() {
|
|||
<Sample label="with actions (e.g. HivesPage's refresh picker)">
|
||||
<Panel
|
||||
title="example title"
|
||||
actions={<RefreshIntervalPicker id="sample-panel-actions" value={30_000} onChange={() => {}} />}
|
||||
actions={
|
||||
<RefreshIntervalPicker
|
||||
id="sample-panel-actions"
|
||||
value={30_000}
|
||||
onChange={() => {}}
|
||||
/>
|
||||
}
|
||||
>
|
||||
panel body content
|
||||
</Panel>
|
||||
|
|
@ -172,7 +219,11 @@ export function ComponentsPage() {
|
|||
|
||||
<Section title="Table">
|
||||
<Sample label="populated">
|
||||
<Table columns={TABLE_COLUMNS} rows={TABLE_ROWS} rowKey={(r) => r.name} />
|
||||
<Table
|
||||
columns={TABLE_COLUMNS}
|
||||
rows={TABLE_ROWS}
|
||||
rowKey={(r) => r.name}
|
||||
/>
|
||||
</Sample>
|
||||
<Sample label="empty">
|
||||
<Table columns={TABLE_COLUMNS} rows={[]} rowKey={(r) => r.name} />
|
||||
|
|
@ -238,7 +289,12 @@ export function ComponentsPage() {
|
|||
<BadgeToggleSample />
|
||||
</Sample>
|
||||
<Sample label="interactive, quiet variant (icon-only header trigger, e.g. settings)">
|
||||
<Badge value={<GearIcon />} title="settings" variant="quiet" onClick={() => {}} />
|
||||
<Badge
|
||||
value={<GearIcon />}
|
||||
title="settings"
|
||||
variant="quiet"
|
||||
onClick={() => {}}
|
||||
/>
|
||||
</Sample>
|
||||
</div>
|
||||
</Section>
|
||||
|
|
|
|||
Loading…
Reference in a new issue