ChicoryTV SPA: component library (primitives) #80

New Issue

2026-07-02T01:07:17+02:00

timothy commented

2026-07-02 01:07:17 +02:00

Recreate the ~18 design-system primitives in design-system/components/ as real TypeScript React components (the prototypes there are references; match visual output, use .d.ts + .prompt.md as the spec).

Components: forms (Button, IconButton, Input, Select, Switch, Checkbox); data-display (Badge, StatusDot, Tag, ChannelLogo, Card, Stat, ProgressBar); feedback (Toast, Tooltip, Spinner); navigation (NavItem/NavSection, Tabs).

Do

Lucide icon set (per design-system/readme.md iconography).
Each component typed, themeable via tokens, matching states (hover/active/focus/disabled/live).
A component gallery route to eyeball them against the *.card.html specimens.

Acceptance: all primitives implemented, typed, and visually matching the specimen cards across all 3 themes.

Recreate the ~18 design-system primitives in `design-system/components/` as real TypeScript React components (the prototypes there are references; match visual output, use `.d.ts` + `.prompt.md` as the spec). **Components:** forms (Button, IconButton, Input, Select, Switch, Checkbox); data-display (Badge, StatusDot, Tag, ChannelLogo, Card, Stat, ProgressBar); feedback (Toast, Tooltip, Spinner); navigation (NavItem/NavSection, Tabs). **Do** - Lucide icon set (per `design-system/readme.md` iconography). - Each component typed, themeable via tokens, matching states (hover/active/focus/disabled/live). - A component gallery route to eyeball them against the `*.card.html` specimens. **Acceptance:** all primitives implemented, typed, and visually matching the specimen cards across all 3 themes.

timothy added the frontend label 2026-07-02 01:07:17 +02:00

timothy added a new dependency 2026-07-02 01:08:41 +02:00

#78 ChicoryTV SPA: scaffold + build integration

timothy added a new dependency 2026-07-02 01:08:41 +02:00

#79 ChicoryTV SPA: design tokens + 3 themes

timothy added a new dependency 2026-07-02 01:08:41 +02:00

#82 ChicoryTV SPA: app shell (sidebar + top bar + routing)

timothy added this to the Design system (Claude Design ↔ prod) milestone 2026-07-02 01:08:43 +02:00

timothy referenced this issue

2026-07-02 01:09:05 +02:00

Backlog: full UI redesign and ChicoryTV rebrand #59

timothy referenced this issue from a commit

2026-07-02 08:09:14 +02:00

feat(web): add ChicoryTV component primitives

timothy commented

2026-07-02 08:10:11 +02:00

Done

What was done: Implemented the ChicoryTV SPA primitive component library for forms, data display, feedback, and navigation; added a token-driven shared component stylesheet; replaced shell nav/action samples with primitives; added a component gallery in the SPA that exercises the specimen-card content across the existing theme switcher; added tests for component exports/interactions and gallery rendering. Committed and pushed as e6df6ac1 (feat(web): add ChicoryTV component primitives, refs #80).

Root cause: n/a

Files changed: web/src/components/*, web/src/App.tsx, web/src/App.test.tsx, web/src/shell.css, docs/superpowers/plans/2026-07-02-chicorytv-spa-component-primitives.md.

Verification: npm test -- --run (7 tests passed); npm run typecheck (passed); npm run build (passed); npm run lint (passed); git diff --check (clean). Vite dev server started at http://127.0.0.1:5174/app/ after 5173 was occupied; lsof shows the listener, but sandboxed curl could not connect to local Vite ports, so the HTTP probe could not be completed from this environment.

Deferred: No code scope deferred. Browser eyeballing remains available via the running gallery URL.

Follow-up issues: n/a

Docs updated: Added the implementation plan under docs/superpowers/plans/.

## Done **What was done**: Implemented the ChicoryTV SPA primitive component library for forms, data display, feedback, and navigation; added a token-driven shared component stylesheet; replaced shell nav/action samples with primitives; added a component gallery in the SPA that exercises the specimen-card content across the existing theme switcher; added tests for component exports/interactions and gallery rendering. Committed and pushed as `e6df6ac1` (`feat(web): add ChicoryTV component primitives`, refs #80). **Root cause**: n/a **Files changed**: `web/src/components/*`, `web/src/App.tsx`, `web/src/App.test.tsx`, `web/src/shell.css`, `docs/superpowers/plans/2026-07-02-chicorytv-spa-component-primitives.md`. **Verification**: `npm test -- --run` (7 tests passed); `npm run typecheck` (passed); `npm run build` (passed); `npm run lint` (passed); `git diff --check` (clean). Vite dev server started at `http://127.0.0.1:5174/app/` after 5173 was occupied; `lsof` shows the listener, but sandboxed `curl` could not connect to local Vite ports, so the HTTP probe could not be completed from this environment. **Deferred**: No code scope deferred. Browser eyeballing remains available via the running gallery URL. **Follow-up issues**: n/a **Docs updated**: Added the implementation plan under `docs/superpowers/plans/`.

timothy closed this issue

2026-07-02 08:10:16 +02:00

timothy referenced this issue

2026-07-02 18:11:55 +02:00

ChicoryTV SPA: app shell (sidebar + top bar + routing) #82

timothy referenced this issue

2026-07-02 18:31:12 +02:00

Fix SPA foundation review findings (#78-#81 follow-up) #95

timothy referenced this issue

2026-07-04 08:03:12 +02:00

feat(web): ChicoryTV SPA foundation (#59 stack) #120

timothy referenced this issue