Open
Conversation
Contributor
There was a problem hiding this comment.
Pull request overview
Adds Storybook to the ui/ package to make UI component development and verification easier outside of the running Next.js app.
Changes:
- Adds Storybook configuration (
ui/.storybook/*) and npm scripts to run/build Storybook. - Introduces initial Storybook stories for sidebar and chat/components.
- Adds Vitest + Storybook addon-vitest setup for running story-based tests in a browser (Playwright).
Reviewed changes
Copilot reviewed 26 out of 28 changed files in this pull request and generated 3 comments.
Show a summary per file
| File | Description |
|---|---|
| ui/vitest.shims.d.ts | Adds Vitest browser Playwright types reference. |
| ui/vitest.config.ts | Adds Vitest config for Storybook addon-vitest + Playwright browser runner. |
| ui/.storybook/main.ts | Storybook framework/addons/stories configuration. |
| ui/.storybook/preview.ts | Global preview parameters, global CSS import, decorator setup. |
| ui/.storybook/vitest.setup.ts | Applies Storybook project annotations for Vitest story tests (incl. a11y). |
| ui/src/components/sidebars/SessionGroup.stories.tsx | Adds Storybook stories for SessionGroup sidebar grouping UI. |
| ui/src/components/sidebars/GroupedChats.stories.tsx | Adds stories for grouped chats rendering across timeframes. |
| ui/src/components/sidebars/EmptyState.stories.tsx | Adds EmptyState sidebar story. |
| ui/src/components/sidebars/ChatItem.stories.tsx | Adds stories for chat item rendering/overflow cases. |
| ui/src/components/sidebars/AgentSwitcher.stories.tsx | Adds AgentSwitcher stories for single/multi agent lists. |
| ui/src/components/sidebars/AgentDetailsSidebar.stories.tsx | Adds AgentDetailsSidebar stories covering tools/no-tools/BYO. |
| ui/src/components/chat/TruncatableText.stories.tsx | Adds TruncatableText stories for various markdown/text cases. |
| ui/src/components/chat/TokenStats.stories.tsx | Adds TokenStats stories for multiple usage sizes. |
| ui/src/components/chat/StreamingMessage.stories.tsx | Adds StreamingMessage stories incl. empty-content behavior. |
| ui/src/components/chat/StatusDisplay.stories.tsx | Adds StatusDisplay stories for all statuses and messages. |
| ui/src/components/chat/CodeBlock.stories.tsx | Adds CodeBlock stories for multiple languages and lengths. |
| ui/src/components/chat/ChatMessage.stories.tsx | Adds ChatMessage stories for multiple message variants. |
| ui/src/components/chat/AgentCallDisplay.stories.tsx | Adds AgentCallDisplay stories for call lifecycle variants. |
| ui/src/components/ToolDisplay.stories.tsx | Adds ToolDisplay stories including “chat layout” decorator variants. |
| ui/src/components/LoadingState.stories.tsx | Adds LoadingState story. |
| ui/src/components/Header.stories.tsx | Adds Header stories incl. mobile viewport. |
| ui/src/components/Footer.stories.tsx | Adds Footer story. |
| ui/src/components/ErrorState.stories.tsx | Adds ErrorState stories for message-length and button variants. |
| ui/src/components/AgentCard.stories.tsx | Adds AgentCard stories for readiness/acceptance/BYO/long text cases. |
| ui/package.json | Adds Storybook scripts + Storybook/Vitest/Playwright dev dependencies. |
| ui/eslint.config.mjs | Enables eslint-plugin-storybook recommended flat config. |
| ui/.gitignore | Ignores Storybook static build output. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
Collaborator
|
@dobesv can you sign the DCO? |
peterj
previously approved these changes
Mar 3, 2026
dobesv
force-pushed
the
feat/storybook
branch
2 times, most recently
from
bfdfe2c to
01d36ab
Compare
Contributor
Author
|
@peterj I fixed some stories and pushed with signoff. Thanks for looking at this! |
Contributor
Author
|
I realized that some of the things I want to change make network requests, so I added msw support to this PR so that API calls can be mocked for storybook stories. This can also make it a foundation for future front-end testing using storybook interaction tests. |
dobesv
force-pushed
the
feat/storybook
branch
2 times, most recently
from
146d0ed to
d50fc32
Compare
Contributor
Author
|
I fixed the type errors caused by the other PR merging. Also fixed a lint warning for the msw file, by adding it to the eslint ignore list. |
When working on UI elements it is a lot easier to iterate and test in storybook where you can put up the interesting cases as stories and browse through them instead of having construct scenarios in a live running app. Signed-off-by: Dobes Vandermeer <dobes.vandermeer@newsela.com>
Contributor
Author
|
Fixed another couple typescript errors that popped up this evening. |
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.
When working on UI elements it is a lot easier to iterate and test in storybook where you can put up the interesting cases as stories and browse through them instead of having construct scenarios in a live running app.