Skip to content

feat(widget): expand Storybook coverage, theme switcher, and Pages deploy#125

Merged
PAMulligan merged 1 commit into
mainfrom
feat/widget-storybook
Jun 16, 2026
Merged

feat(widget): expand Storybook coverage, theme switcher, and Pages deploy#125
PAMulligan merged 1 commit into
mainfrom
feat/widget-storybook

Conversation

@PAMulligan

Copy link
Copy Markdown
Contributor

Summary

Closes #43. Builds on the base Storybook setup from #82 to cover every
meaningful component state, add a theme/direction switcher, and publish
Storybook to Cloudflare Pages.

Acceptance criteria

  • pnpm storybook runs locally with sensible defaults
  • Stories for ChatWidget, ChatMessage (user/bot/markdown/sources), ChatInput, Header, ErrorBanner, TypingIndicator, GreetingBubble — plus ChatWindow
  • Theme switcher (light/dark/auto) configured
  • Storybook built and deployed to Cloudflare Pages on every push to main
  • Hosted Storybook linked from README and docs site

What changed

Stories — every widget state from the issue: closed bubble & open panel (ChatWidget); empty / conversation / long-list / loading / error / mobile bottom-sheet (ChatWindow); user / bot / markdown / with-sources (ChatMessage); default / loading / near-limit / at-limit (ChatInput); Header; ErrorBanner (retryable + non-retryable); TypingIndicator; and GreetingBubble in all four corners + a long message.

Theme & direction switcherTheme (light/dark/auto) and Direction (LTR/RTL) toolbar globals, matching the existing custom Locale toolbar. A preview decorator drives the widget's own data-claudius-dark mechanism (and resolves auto via prefers-color-scheme), so every story renders across color schemes and writing direction with no per-story wiring — ideal for Chromatic.

Refactor (no behavior change)Header, ErrorBanner, and TypingIndicator were inline JSX inside ChatWindow; extracted into their own presentational components so each can be storied in isolation. DOM output is byte-identical, so all existing ChatWindow tests pass unchanged.

Deploy — new .github/workflows/storybook.yml mirrors docs.yml: builds on push + PR (path-filtered to widget/**), deploys storybook-static to the claudius-storybook Pages project on push to main / manual dispatch. Removed the now-duplicate Build Storybook step from ci.yml (the dedicated workflow covers it, same pattern as docs).

Docs — README badge + Development link; docs sidebar entry (Plugins & Tools) and a Storybook section in the local-development page.

One-time setup before the deploy goes green

The deploy reuses the existing CLOUDFLARE_API_TOKEN / CLOUDFLARE_ACCOUNT_ID secrets (same as the Docs workflow), but the Pages project must be created once:

wrangler pages project create claudius-storybook

After that, every push to main publishes to https://claudius-storybook.pages.dev (already wired into the README/docs). It can also be run on demand via Actions -> Storybook -> Run workflow.

Note on Storybook version

The issue suggested Storybook 8, but the repo already runs Storybook 10 with the Vite builder (@storybook/react-vite, from #82). I built on the installed version rather than downgrading; the "Vite builder" intent is preserved.

Verification

  • pnpm typecheck, pnpm lint, pnpm format:check — clean
  • pnpm test — 257/257 pass (extraction is transparent)
  • pnpm build — ESM/CJS/IIFE + types; confirmed 0 stories leak into dist
  • pnpm build-storybook — builds successfully

🤖 Generated with Claude Code

…ploy

Build on the base Storybook setup (#82) to cover every meaningful component
state, add a theme/direction switcher, and publish Storybook to Cloudflare
Pages.

- Extract Header, ErrorBanner, and TypingIndicator from ChatWindow into their
  own presentational components so each can be rendered in isolation. DOM
  output is unchanged, so all existing ChatWindow tests pass as-is.
- Add stories: ChatMessage (user/bot/markdown/sources), ChatInput
  (default/loading/near+at limit), Header, ErrorBanner, TypingIndicator, and
  GreetingBubble (one per corner). Extend ChatWindow with long-list and mobile
  bottom-sheet stories.
- Add Theme (light/dark/auto) and Direction (LTR/RTL) toolbar globals via a
  preview decorator that drives the widget data-claudius-dark mechanism; auto
  follows prefers-color-scheme. An optional widget frame wraps in-panel parts.
- Deploy Storybook to Cloudflare Pages (claudius-storybook) on push to main via
  a dedicated workflow mirroring docs.yml; drop the duplicate build from ci.yml.
- Link the hosted Storybook from the README and docs site.

Closes #43

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
@PAMulligan
PAMulligan merged commit 943e580 into main Jun 16, 2026
9 checks passed
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.

Set up Storybook with stories for every widget state

1 participant