Skip to content

chore: add Storybook 10 with browser-mode tests via Vitest - #3

Merged
zhawtof merged 3 commits into
mainfrom
claude/agitated-haslett-743327
May 15, 2026
Merged

chore: add Storybook 10 with browser-mode tests via Vitest#3
zhawtof merged 3 commits into
mainfrom
claude/agitated-haslett-743327

Conversation

@zhawtof

@zhawtof zhawtof commented May 15, 2026

Copy link
Copy Markdown
Contributor

Summary

  • Adds Storybook 10 (@storybook/react-vite) for visual development, with addons docs, a11y, and vitest.
  • Wires Storybook's play() interaction tests into pnpm test via @storybook/addon-vitest's storybookTest Vitest plugin. The existing jsdom unit project is preserved; stories run headlessly in Playwright Chromium as a second project.
  • Adds initial stories for BlockKitBuilder, Toolbar, Palette, and Button covering rendering smoke + interaction assertions.

Details

Config

  • .storybook/main.ts — react-vite framework, addons, Tailwind v4 plugin via viteFinal.
  • .storybook/preview.{ts,css} — globals + theme toolbar, plus shadcn token defaults (light/dark) so components render with real colors in the catalog.
  • vitest.config.ts split into two projects:
    • unit (jsdom) — existing test/**/*.test.ts
    • storybook (browser) — Playwright Chromium via @vitest/browser-playwright, picks up src/**/*.stories.tsx

Stories

  • BlockKitBuilder — Empty, WithStarterBlocks, MessageSurfaceLocked, DarkPreviewDefault, plus play() tests for Clear and AddSection-from-palette flows.
  • Toolbar — 6 variants with click assertions for Send, Issues, etc.
  • Palette — wrapped in DndContext, with an add-via-chevron interaction test.
  • Button — 8 variant + interaction stories including disabled-state assertion.

CI

  • ci.yml and publish.yml install Playwright Chromium before pnpm test. Test job timeout raised to 10 min.
  • storybook-static/ added to .gitignore.

Test plan

  • pnpm test — 34 passed (12 unit + 22 Storybook stories in Chromium).
  • pnpm run typecheck — clean.
  • pnpm run lint — clean.
  • pnpm run build — package bundle unchanged (stories not pulled in).
  • pnpm run build-storybook — produces storybook-static/.
  • Reviewer: try pnpm storybook locally to browse the catalog.

Notes for reviewers

  • Stories live alongside components (*.stories.tsx) rather than in a separate top-level directory; tsup only bundles what's reachable from src/index.ts, so they don't ship.
  • @storybook/addon-vitest 10.3+ auto-provisions preview annotations, so no vitest.setup.ts is needed.
  • The Storybook browser project requires Playwright Chromium; CI installs it just-in-time before pnpm test.

🤖 Generated with Claude Code

zhawtof and others added 3 commits May 15, 2026 19:07
Set up Storybook 10 (react-vite) for visual development and wire its
play() interaction tests into the existing pnpm test pipeline through
@storybook/addon-vitest's storybookTest plugin. Stories run headlessly
in Playwright Chromium alongside the existing jsdom unit tests as two
Vitest projects.

Includes initial stories for BlockKitBuilder, Toolbar, Palette, and
Button covering rendering smoke + interaction assertions (clear, add
from palette, send dialog, theme/surface controls, disabled state).
The .storybook preview wires Tailwind v4 + shadcn token defaults so
components render with real colors and dark mode in the catalog.

CI installs Playwright Chromium before pnpm test in both ci.yml and
publish.yml; storybook-static/ is gitignored.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
…tt-743327

# Conflicts:
#	package.json
#	pnpm-lock.yaml
@zhawtof
zhawtof merged commit 09e96ca into main May 15, 2026
6 checks passed
@zhawtof
zhawtof deleted the claude/agitated-haslett-743327 branch May 15, 2026 23:21
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant