feat(widget): expand Storybook coverage, theme switcher, and Pages deploy#125
Merged
Conversation
…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>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
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 storybookruns locally with sensible defaultsWhat 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 switcher —
Theme(light/dark/auto) andDirection(LTR/RTL) toolbar globals, matching the existing customLocaletoolbar. A preview decorator drives the widget's owndata-claudius-darkmechanism (and resolvesautoviaprefers-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, andTypingIndicatorwere inline JSX insideChatWindow; extracted into their own presentational components so each can be storied in isolation. DOM output is byte-identical, so all existingChatWindowtests pass unchanged.Deploy — new
.github/workflows/storybook.ymlmirrorsdocs.yml: builds on push + PR (path-filtered towidget/**), deploysstorybook-staticto theclaudius-storybookPages project on push tomain/ manual dispatch. Removed the now-duplicateBuild Storybookstep fromci.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_IDsecrets (same as the Docs workflow), but the Pages project must be created once:After that, every push to
mainpublishes 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— cleanpnpm test— 257/257 pass (extraction is transparent)pnpm build— ESM/CJS/IIFE + types; confirmed 0 stories leak intodistpnpm build-storybook— builds successfully🤖 Generated with Claude Code