feat: Setup Storybook in monorepo for web and mobile - #686
Merged
Merged
Conversation
Asherlc
commented
Apr 1, 2026
Asherlc
commented
Owner
- Sets up Storybook for both the web and mobile packages.
Codecov Report✅ All modified and coverable lines are covered by tests. Additional details and impacted files@@ Coverage Diff @@
## main #686 +/- ##
==========================================
+ Coverage 97.35% 97.47% +0.12%
==========================================
Files 317 317
Lines 44649 44649
Branches 9018 9027 +9
==========================================
+ Hits 43466 43522 +56
+ Misses 1183 1127 -56
Flags with carried forward coverage won't be shown. Click here to find out more. ☔ View full report in Codecov by Sentry. 🚀 New features to boost your workflow:
|
Contributor
There was a problem hiding this comment.
Pull request overview
Adds Storybook to the monorepo so UI components can be developed and reviewed in isolation for both the Vite-based web app and the Expo-based mobile app.
Changes:
- Web: adds Storybook dependencies/scripts plus
.storybookconfiguration and a starter story forPageSection. - Mobile: adds React Native Storybook dependencies/scripts, conditional entrypoint (
index.js), Metro integration, and a starter story forCard. - Root/docs: adds root-level
pnpm storybook:*scripts and updates README with Storybook commands.
Reviewed changes
Copilot reviewed 15 out of 16 changed files in this pull request and generated 1 comment.
Show a summary per file
| File | Description |
|---|---|
| README.md | Documents the new Storybook commands. |
| package.json | Adds root scripts to run/build Storybook for web and run Storybook for mobile. |
| pnpm-lock.yaml | Locks new Storybook (web + RN) dependency graph. |
| packages/web/package.json | Adds Storybook scripts and devDependencies for web Storybook. |
| packages/web/.storybook/main.ts | Storybook config for web (stories/addons/framework/staticDirs/autodocs). |
| packages/web/.storybook/preview.ts | Loads global CSS and sets Storybook parameters for web. |
| packages/web/.storybook/vite.config.ts | Adds Tailwind Vite plugin for web Storybook bundling. |
| packages/web/src/components/PageSection.stories.tsx | Adds an initial web story demonstrating PageSection variants. |
| packages/mobile/package.json | Adds Storybook scripts and devDependencies; changes entrypoint to index.js. |
| packages/mobile/index.js | Conditionally loads RN Storybook vs Expo Router based on env flag. |
| packages/mobile/metro.config.js | Wraps Metro config with Storybook support when enabled. |
| packages/mobile/.rnstorybook/main.ts | Storybook config for mobile stories/addons. |
| packages/mobile/.rnstorybook/preview.tsx | Adds a decorator/background and control settings for mobile Storybook. |
| packages/mobile/.rnstorybook/index.tsx | Storybook UI root that consumes generated storybook.requires. |
| packages/mobile/components/Card.stories.tsx | Adds an initial mobile story demonstrating Card variants. |
| packages/mobile/.gitignore | Ignores the generated Storybook requires file. |
Files not reviewed (1)
- pnpm-lock.yaml: Language not supported
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| "scripts": { | ||
| "start": "expo start", | ||
| "storybook": "EXPO_PUBLIC_STORYBOOK_ENABLED=true sb-rn-get-stories && EXPO_PUBLIC_STORYBOOK_ENABLED=true expo start --clear", | ||
| "storybook:ios": "EXPO_PUBLIC_STORYBOOK_ENABLED=true expo run:ios", |
There was a problem hiding this comment.
The storybook:ios script enables Storybook but does not run sb-rn-get-stories first. On a fresh checkout, .rnstorybook/storybook.requires.ts is gitignored and won't exist, so packages/mobile/.rnstorybook/index.tsx will fail to import ./storybook.requires. Consider adding sb-rn-get-stories to storybook:ios (or committing a non-generated stub) so the command works reliably.
Suggested change
| "storybook:ios": "EXPO_PUBLIC_STORYBOOK_ENABLED=true expo run:ios", | |
| "storybook:ios": "EXPO_PUBLIC_STORYBOOK_ENABLED=true sb-rn-get-stories && EXPO_PUBLIC_STORYBOOK_ENABLED=true expo run:ios", |
This was referenced Jul 30, 2026
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.