feat: add Storybook component explorer #18

Merged

vince merged 2 commits from codex/issue-13-storybook into main

2026-06-18 19:04:18 +02:00

vince commented

2026-06-18 18:54:11 +02:00

Owner

Summary

Adds Storybook as the reusable UI component explorer for the dashboard design system and covers every current src/lib/ui/components/*.svelte component with generic, content-free stories.

Closes #13.

Why

The MVP needs a reviewable component surface before Dimension Lab seed data and model-driven rendering land. This keeps the presentation tier inspectable without importing environment-specific content.

Changes

Added Storybook 10 SvelteKit configuration with a11y and Vitest addons.
Added storybook and build-storybook scripts plus README documentation.
Added small reusable UI wrappers/primitives needed by the requested story inventory.
Added stories for base controls, dashboard primitives, status variants, density states, empty/loading/error/unavailable states, and the full one-page dashboard composition.
Added generic Storybook fixture data and a Vitest inventory/content-boundary test.
Ignored generated storybook-static/ output.

Testing

bun run check -> 0 Svelte diagnostics.
bun run test -> 8 files, 37 tests passed.
bun run build -> production app build passed.
bun run build-storybook -> static Storybook build passed.
bun run storybook -- --ci -> dev server started at http://localhost:6006/; HTTP smoke returned 200 OK.
git diff --check -> clean.
rg -n -i "dimension lab|dimensionlab|homepage|vince" src/lib/ui/stories src/lib/ui/components .storybook || true -> no matches.

Notes

npm is not installed in this Codex shell, so npm run build-storybook could not be executed here. The same script was verified through Bun, and package.json exposes the expected build-storybook command.
Storybook emits warnings for the unused MDX pattern and bundle-size advisory; neither blocks the build.

## Summary Adds Storybook as the reusable UI component explorer for the dashboard design system and covers every current `src/lib/ui/components/*.svelte` component with generic, content-free stories. Closes #13. ## Why The MVP needs a reviewable component surface before Dimension Lab seed data and model-driven rendering land. This keeps the presentation tier inspectable without importing environment-specific content. ## Changes - Added Storybook 10 SvelteKit configuration with a11y and Vitest addons. - Added `storybook` and `build-storybook` scripts plus README documentation. - Added small reusable UI wrappers/primitives needed by the requested story inventory. - Added stories for base controls, dashboard primitives, status variants, density states, empty/loading/error/unavailable states, and the full one-page dashboard composition. - Added generic Storybook fixture data and a Vitest inventory/content-boundary test. - Ignored generated `storybook-static/` output. ## Testing - `bun run check` -> 0 Svelte diagnostics. - `bun run test` -> 8 files, 37 tests passed. - `bun run build` -> production app build passed. - `bun run build-storybook` -> static Storybook build passed. - `bun run storybook -- --ci` -> dev server started at `http://localhost:6006/`; HTTP smoke returned `200 OK`. - `git diff --check` -> clean. - `rg -n -i "dimension lab|dimensionlab|homepage|vince" src/lib/ui/stories src/lib/ui/components .storybook || true` -> no matches. ## Notes - `npm` is not installed in this Codex shell, so `npm run build-storybook` could not be executed here. The same script was verified through Bun, and `package.json` exposes the expected `build-storybook` command. - Storybook emits warnings for the unused MDX pattern and bundle-size advisory; neither blocks the build.

vince added 1 commit 2026-06-18 18:54:11 +02:00