vinzenz/hyperhive
vinzenz/hyperhive
Watch
0
0
Fork
You've already forked hyperhive
 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 1

swarm-ui: add a components-library page (hyperhive#3288)

Browse source 
New /components route showing every ui primitive (Panel, StatusChip,
Table) in each mode it supports: Panel with/without a title,
StatusChip's four tones, Table populated and empty. Sample data only,
no API calls, so it renders identically regardless of backend state.
Linked from the Shell nav next to "overview".

Verified with npm run build + npm run typecheck, and a headless
chromium screenshot of the built dist.
This commit is contained in:
iris 2026-08-15 12:57:33 +02:00
commit cfc8f2b22c
4 changed files with 137 additions and 1 deletions
Download patch file Download diff file Expand all files Collapse all files

44
frontend/packages/swarm-ui/src/pages/ComponentsPage.css Normal file
View file

@ -0,0 +1,44 @@
/* <ComponentsPage> layout — a plain vertical stack of sections, each a
labelled grid of samples. No new colour vars: reuses the same
base16 slots (../theme.css) every other component draws from, so
this page can't drift from the palette it's demonstrating. */
.components-intro {
margin: 0 0 1.5em;
color: var(--muted);
}
.components-intro code {
color: var(--fg);
}
.components-section {
margin-bottom: 2em;
}
.components-section:last-child {
margin-bottom: 0;
}
.components-section-title {
margin: 0 0 0.75em;
font-size: 0.9em;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.04em;
color: var(--muted);
}
.components-section-body {
display: flex;
flex-direction: column;
gap: 1em;
}
.components-chip-row {
display: flex;
flex-wrap: wrap;
gap: 1em;
}
.components-sample {
display: flex;
flex-direction: column;
gap: 0.4em;
}
.components-sample-label {
font-size: 0.8em;
color: var(--muted);
}