Feat/914 add storybook for component documentation#1138
Merged
jeromehardaway merged 18 commits intoJun 9, 2026
Conversation
10 tasks
Contributor
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
…ook-for-component-documentation
next build type-checks every file matched by the tsconfig include glob (src/**/*.tsx), which swept in the new .stories.tsx files. They import @storybook/react, whose types are only reachable via its package.json exports map, unresolvable under the repo's moduleResolution: node. The build failed on the first such file. Exclude src/**/*.stories.* so the production build only type-checks shipped code. Story type-safety will be restored separately via a dedicated .storybook/tsconfig.json. Refs: #914
jeromehardaway
approved these changes
Jun 4, 2026
Contributor
There was a problem hiding this comment.
Pull request overview
Adds Storybook-based component documentation/testing to the Next.js app, enabling isolated UI development and interactive “play” tests for selected components.
Changes:
- Introduces Storybook configuration (
.storybook/main.ts,.storybook/preview.ts) with global CSS/Tailwind and selected addons. - Adds Storybook stories for multiple UI components (buttons, form elements, cards, modals, navigation, feedback).
- Updates project config/scripts to support Storybook and (optionally) reduce TS friction around stories.
Reviewed changes
Copilot reviewed 16 out of 19 changed files in this pull request and generated 5 comments.
Show a summary per file
| File | Description |
|---|---|
package.json |
Adds Storybook scripts and dependencies/addons needed for Storybook + interaction testing. |
tsconfig.json |
Excludes Storybook story files from TypeScript project typechecking. |
.storybook/main.ts |
Storybook config (stories glob, addons, Next.js framework, static dirs, telemetry off). |
.storybook/preview.ts |
Loads global CSS/Tailwind into Storybook preview. |
.gitignore |
Ignores Storybook build output and logs. |
src/components/ui/button/button.stories.tsx |
Button variants stories. |
src/components/ui/form-elements/input.stories.tsx |
Input stories + interaction test. |
src/components/ui/form-elements/textarea.stories.tsx |
Textarea state/variant stories. |
src/components/ui/form-elements/checkbox.stories.tsx |
Checkbox stories + interaction test. |
src/components/ui/form-elements/feedback.stories.tsx |
Feedback state stories. |
src/components/vwc-card/vwc-card.stories.tsx |
VWCGridCard stories. |
src/components/program-card/program-card.stories.tsx |
ProgramCard stories. |
src/components/ui/modal/modal.stories.tsx |
Modal stories + open/assert interaction test. |
src/components/ui/engagement-modal/engagement-modal.stories.tsx |
EngagementModal story. |
src/components/ui/video-modal/video-modal.stories.tsx |
VideoModal story with local state. |
src/components/ui/spinner/spinner.stories.tsx |
Spinner story. |
src/components/menu/main-menu/main-menu.stories.tsx |
MainMenu stories (variants + decorator). |
src/components/breadcrumb/breadcrumb.stories.tsx |
Breadcrumb stories (title/no-title/deep nesting). |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
@storybook/test (8.6.15) and @storybook/addon-interactions (8.6.14) were pinned to v8 while the rest of the Storybook stack is on 10.3.6. Mixing majors risks resolution and type incompatibilities. In Storybook 10 the test utilities ship from the core storybook/test entrypoint and interaction instrumentation is built into core, so both v8 packages are redundant. Migrate expect/userEvent/within imports from @storybook/test to storybook/test (input, checkbox, modal stories), drop the @storybook/addon-interactions addon from .storybook/main.ts, and remove both v8 packages. build-storybook and play functions verified passing. Addresses a Copilot review comment on PR #1138.
The two // @ts-ignore comments on the CSS side-effect imports in .storybook/preview.ts suppressed nothing useful: the *.css module is already declared in src/@types/assets/index.d.ts. The real unresolved import was @storybook/nextjs, failing only because .storybook/ sat outside any tsconfig and fell back to node module resolution. Add .storybook/tsconfig.json (extends root, moduleResolution: bundler, with the ambient declarations in scope) so every .storybook/ import resolves, and remove both @ts-ignore lines. tsc on the new config and build-storybook both pass. Addresses a Copilot review comment on PR #1138.
Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com>
jeromehardaway
deleted the
feat/914-add-storybook-for-component-documentation
branch
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
What's done
src/stories/)Not applicable
Feedbackcomponent (covered above). The 404 page exists but is a full page, not a reusable component.How to test
Then browse components at
http://localhost:6006Notes
@emotion/is-prop-validas a dependency (required by Framer Motion in Storybook's Webpack build)@storybook/testand@storybook/addon-interactionsfor interaction testing@storybook/reactimports due tomoduleResolution: "node"in tsconfig — this is cosmetic only, Storybook compiles and runs correctly@storybook/addon-essentialsand@storybook/addon-links— these are outdated for Storybook v10, which replacedaddon-essentialswith individual addons (addon-docs,addon-a11y, etc.).addon-links(for linking between stories) was not added as it's not needed for any current stories.Closes #914