docs: Storybook interactive component playground

[tomny-dev]

Goal

Set up Storybook with interactive component playgrounds for all 25+ exported components. This is Phase 2 — Phase 1 (markdown docs) should be merged first but this can proceed independently.

Scope

Files to create

Storybook config (deterministic setup, no interactive wizard)

1. .storybook/main.ts — Vite bundler, CSS modules support, @tomny-dev/uzi alias, essential addons
2. .storybook/preview.tsx — ThemeProvider decorator (light/blue default), ToastProvider decorator for feedback stories, CSS import
3. tsconfig.storybook.json — TypeScript config for Storybook

Story files (14 files, one per component/group)

4. src/components/button/Button.stories.tsx — All 7 variants × 5 sizes, asChild, anchor variant
5. src/components/avatar/Avatar.stories.tsx — 4 sizes, image+fallback composition, fallback states
6. src/components/card/Card.stories.tsx — 3 tones × 4 padding presets, interactive, semantic elements
7. src/components/pill/Pill.stories.tsx — 5 tones × 2 sizes, icon variant, element types
8. src/components/modal/Modal.stories.tsx — 4 sizes, controlled open/close pattern, ModalOverlay
9. src/components/alert/Alert.stories.tsx — 4 tones with sample content
10. src/components/toast/Toast.stories.tsx — useToast hook with trigger buttons, action/toast types
11. src/components/skeleton/Skeleton.stories.tsx — width/height combos, radius presets, loading card layout
12. src/components/progress/Progress.stories.tsx — 4 tones, value range (0-100), aria-label examples
13. src/components/input/Input.stories.tsx — Input types, Label pairing, disabled/required states, Checkbox+Label form group
14. src/components/select/Select.stories.tsx — Options array, controlled state, placeholder, disabled
15. src/components/multi-select/MultiSelect.stories.tsx — Checkbox menu, chip display, overflow behavior
16. src/components/segmented-toggle/SegmentedToggle.stories.tsx — View toggle, disabled options, custom labels
17. src/components/top-bar/TopBar.stories.tsx — Layout variants (brand left/center, sticky/static, with theme toggle)
18. src/components/theme-toggle-button/ThemeToggleButton.stories.tsx — Icon/text variants, inside TopBar
19. src/components/sidebar-nav/SidebarNav.stories.tsx — Flat/sectioned nav, active detection, collapsed state, icons/badges
20. src/components/app-shell/AppShell.stories.tsx — Full dashboard layout, responsive sidebar, custom width
21. src/components/dropdown-menu/DropdownMenu.stories.tsx — 13-component ecosystem: basic menu, checkbox items, radio group, separator, nested sub-menus, destructive variant
22. src/components/theme/Theme.stories.tsx — Theme rendering (light/dark), 6 accent palettes, controlled vs uncontrolled, full theme switcher UI

Files to update

23. package.json — Add pnpm storybook and pnpm build-storybook scripts

Storybook configuration

• Renderer: Vite (via @storybook/addon-vite)
• Essential addons: @storybook/addon-essentials, @storybook/addon-links, @storybook/addon-storysource
• Decorator: ThemeProvider wrapping all stories (default: light theme, blue accent)
• Decorator: ToastProvider wrapping feedback component stories
• CSS: import "@tomny-dev/uzi/styles.css" in preview.tsx
• Theme toggle: Via data-uzi-theme attribute on documentElement

Acceptance criteria

• Storybook launches successfully (pnpm storybook) with no errors
• All 14 story files created under src/components/<name>/
• ThemeProvider decorator wraps all stories (light theme, blue accent by default)
• ToastProvider decorator wraps feedback component stories
• Every component's enum values covered:
  • Button: 7 variants × 5 sizes
  • Card: 3 tones × 4 padding presets
  • Alert: 4 tones
  • Progress: 4 tones + value range
  • Pill: 5 tones × 2 sizes
  • Avatar: 4 sizes
  • Modal: 4 sizes
  • Theme: 6 accent palettes
• Stories using useToast render within ToastProvider decorator
• Stories using useTheme render within ThemeProvider decorator
• No third-party dependencies in examples (inline SVGs only)
• pnpm build-storybook succeeds
• @storybook/addon-storysource shows source code inline for each story

Notes

• Phase 1 (markdown docs) is tracked separately. This can proceed independently.
• @storybook/addon-storysource eliminates the need for manual "code preview" sections — source is shown automatically in the UI.
• Radix-wrapped components (Avatar, DropdownMenu, Select, etc.) expose all underlying Radix props via React.ComponentProps in argTypes so users can see the full API surface.
• SidebarNav.matchStrategy defaults to "prefix"; "most-specific" is an opt-in for parent+child routes (related to issue SidebarNav: opt-in for most-specific active matching (parent + child both highlight) #8).
• CI preview builds should deploy Storybook static output (matching existing PR preview workflow from DEVELOPMENT.md).

[tomny-dev]

@tomny-roomote Implement only issue #14 — Storybook interactive component playground from current main. Inspect current main and the repository docs/config before editing; do not base this work on unmerged PR #37 or add stories for components that exist only on that branch.

Set up Storybook deterministically using the repo's current Vite/React/CSS-module/token architecture, add stories for the current exported component inventory required by #14, wire the required ThemeProvider/ToastProvider decorators, add storybook and build-storybook scripts, and keep examples dependency-free apart from existing project dependencies. Preserve the existing package entrypoints and do not redesign Uzi's client/server boundary in this issue.

Treat #14's acceptance criteria as the scope boundary: Storybook must launch/build cleanly, enum/variant coverage must be represented, hooks must render under the correct providers, and source examples should be visible through the configured Storybook tooling. Reconcile any stale package/addon names in the issue against the currently supported Storybook/Vite setup rather than forcing obsolete configuration, but do not expand into consumer migrations, application scaffolding (#36/#37), page templates (#21), or unrelated component changes.

Run pnpm lint, pnpm test, pnpm build, and pnpm build-storybook, add focused config/story validation where appropriate, open one focused PR closing #14, report exact validation results, and stop. Do not begin another Uzi issue.

[tomny-roomote]

I'm on it. I started a task for this issue, and I'll keep updates here.

See task