feat(storybook): compose React Native components into React Storybook by georgewrmarshall · Pull Request #1188 · MetaMask/metamask-design-system

georgewrmarshall · 2026-05-25T22:12:54Z

Description

Adds React Native component stories to the existing React Storybook by using Storybook composition.

The React Storybook now acts as the host Storybook and includes a composed React Native Components section. This makes the React Native web Storybook available from the same Storybook UI in local development, PR preview builds, and the deployed web Storybook.

Storybook composition lets one Storybook reference another Storybook by URL so stories from both appear together in the sidebar, even when they use different renderers or project setup: https://storybook.js.org/docs/sharing/storybook-composition

What changed

Adds a react-native Storybook refs entry in apps/storybook-react/.storybook/main.ts.
Points the composed React Native Storybook to http://localhost:6007 during local development.
Points the composed React Native Storybook to ./react-native for static hosted builds.
Updates the main Storybook workflow to build the React Storybook and React Native web Storybook, then nest the React Native static build under storybook-static/react-native/ before deploying to GitHub Pages.
Updates the PR Storybook workflow to do the same nesting before uploading PR preview builds, so React Native component stories are available in PR builds too.

Local dev workflow

# Terminal 1
yarn storybook:web

# Terminal 2
yarn storybook

Open http://localhost:6006 and expand React Native Components in the sidebar.

Related issues

Depends on: #1134

Manual testing steps

Start yarn storybook:web and wait for the React Native web Storybook to run on port 6007.
Start yarn storybook and open http://localhost:6006.
Confirm React Native Components appears in the sidebar.
Expand React Native Components and open a story.
Confirm the story renders in the main canvas.
Open the PR Storybook preview build.
Confirm React Native Components is available there as well.

Screenshots/Recordings

After

The hosted React Storybook includes a composed React Native Components section backed by the React Native web Storybook.

after720.mov

Pre-merge author checklist

I've followed MetaMask Contributor Docs
I've completed the PR template to the best of my ability
I've included tests if applicable
I've documented my code using JSDoc format if applicable
I've applied the right labels on the PR

Pre-merge reviewer checklist

I've manually tested the PR (e.g. pull and build branch, run the app, test code being changed).
I confirm that this PR addresses all acceptance criteria described in the ticket it closes and includes the necessary testing evidence such as recordings and or screenshots.

Note

Low Risk
Changes are limited to Storybook config and GitHub Actions; no runtime product or package publish paths are affected.

Overview
Wires Storybook composition so the React Storybook hosts React Native web stories in one sidebar (React Native Components).

apps/storybook-react/.storybook/main.ts adds a refs.react-native entry whose URL is http://localhost:6007 in dev (overridable via STORYBOOK_RN_URL) and ./react-native for static builds.

Main and PR Storybook workflows no longer use a single default working directory for all steps. They build React Storybook and React Native web Storybook separately, copy the RN static output into storybook-static/react-native/, then deploy or upload the combined apps/storybook-react/storybook-static artifact unchanged for consumers.

^{Reviewed by Cursor Bugbot for commit e52bd25. Bugbot is set up for automated code reviews on this repo. Configure here.}

github-actions · 2026-05-25T22:14:57Z

📖 Storybook Preview

View PR Storybook

cursor

Cursor Bugbot has reviewed your changes and found 1 potential issue.

Autofix Details

Bugbot Autofix prepared a fix for the issue found in the latest run.

✅ Fixed: Absolute refs URL breaks on sub-path deployments
- Updated the Storybook refs URL from '/react-native' to './react-native' so composition works under sub-path hosting (e.g., GitHub Pages and PR previews).

Or push these changes by commenting:

@cursor push d23ee11abb

Preview (d23ee11abb)

diff --git a/apps/storybook-react/.storybook/main.ts b/apps/storybook-react/.storybook/main.ts
--- a/apps/storybook-react/.storybook/main.ts
+++ b/apps/storybook-react/.storybook/main.ts
@@ -24,7 +24,7 @@
 // In production the RN static build is nested at /react-native on the same host.
 const rnStorybookUrl =
   process.env.STORYBOOK_RN_URL ??
-  (process.env.NODE_ENV === 'production' ? '/react-native' : 'http://localhost:6007');
+  (process.env.NODE_ENV === 'production' ? './react-native' : 'http://localhost:6007');
 
 const config: StorybookConfig = {
   refs: {

_{You can send follow-ups to the cloud agent here.}

github-actions · 2026-05-25T22:26:02Z

📖 Storybook Preview

View PR Storybook

github-actions · 2026-05-25T22:30:32Z

📖 Storybook Preview

View PR Storybook

cursor

Cursor Bugbot has reviewed your changes and found 1 potential issue.

Autofix Details

Bugbot Autofix prepared a fix for the issue found in the latest run.

✅ Fixed: CommonJS include option restricts processing to one package
- Added /node_modules/ to commonjsOptions.include so all CJS deps are processed while still explicitly handling react-native-jazzicon.

Or push these changes by commenting:

@cursor push a8c49d4954

Preview (a8c49d4954)

diff --git a/apps/storybook-react-native/.storybook/main.ts b/apps/storybook-react-native/.storybook/main.ts
--- a/apps/storybook-react-native/.storybook/main.ts
+++ b/apps/storybook-react-native/.storybook/main.ts
@@ -74,7 +74,7 @@
         commonjsOptions: {
           // Explicitly include CJS-only packages so Rollup's commonjs plugin
           // converts them to ESM in the production bundle.
-          include: [/react-native-jazzicon/],
+          include: [/react-native-jazzicon/, /node_modules/],
           transformMixedEsModules: true,
         },
       },

_{You can send follow-ups to the cloud agent here.}

github-actions · 2026-05-25T22:56:03Z

📖 Storybook Preview

View PR Storybook

georgewrmarshall · 2026-05-25T22:58:14Z

+        // in both dev and production builds.
+        include: [
+          ...(viteConfig.optimizeDeps?.include ?? []),
+          'react-native-jazzicon',


Fixed in 89c30ab. The build.commonjsOptions.include pattern was removed entirely — setting include on @rollup/plugin-commonjs restricts the plugin to only the matched packages, silently skipping CJS→ESM conversion for every other CJS dependency in the production bundle. The default (no include filter) processes all CJS files, which is correct. CJS conversion for react-native-jazzicon in the dev server is handled by optimizeDeps.include; Rollup's default commonjs pass covers production builds.

github-actions · 2026-05-25T22:59:33Z

📖 Storybook Preview

View PR Storybook

github-actions · 2026-06-07T01:45:04Z

📖 Storybook Preview

View PR Storybook

cursor

Cursor Bugbot has reviewed your changes and found 1 potential issue.

Bugbot Autofix prepared a fix for the issue found in the latest run.

✅ Fixed: Production ref URL mis-resolved
- Configured the host Storybook build steps to export STORYBOOK_RN_URL=./react-native so the composed ref resolves to the production path during static builds.

Or push these changes by commenting:

@cursor push 66cfe4ea3f

Preview (66cfe4ea3f)

diff --git a/.github/workflows/build-storybook-main.yml b/.github/workflows/build-storybook-main.yml
--- a/.github/workflows/build-storybook-main.yml
+++ b/.github/workflows/build-storybook-main.yml
@@ -21,6 +21,8 @@
 
       - name: Build React Storybook
         working-directory: apps/storybook-react
+        env:
+          STORYBOOK_RN_URL: ./react-native
         run: |
           yarn build-storybook
           touch storybook-static/.nojekyll

diff --git a/.github/workflows/build-storybook-pr.yml b/.github/workflows/build-storybook-pr.yml
--- a/.github/workflows/build-storybook-pr.yml
+++ b/.github/workflows/build-storybook-pr.yml
@@ -23,6 +23,8 @@
 
       - name: Build React Storybook
         working-directory: apps/storybook-react
+        env:
+          STORYBOOK_RN_URL: ./react-native
         run: yarn build-storybook
 
       - name: Build React Native web Storybook

_{You can send follow-ups to the cloud agent here.}

^{Reviewed by Cursor Bugbot for commit 5786484. Configure here.}

github-actions · 2026-06-09T22:37:07Z

📖 Storybook Preview

View PR Storybook

cursor Bot reviewed May 25, 2026

View reviewed changes

Comment thread apps/storybook-react/.storybook/main.ts Outdated

georgewrmarshall changed the title ~~feat(storybook): compose React Native Storybook into React Storybook for unified hosting~~ chore(storybook): compose React Native Storybook into React Storybook for unified hosting May 25, 2026

cursor Bot reviewed May 25, 2026

View reviewed changes

Comment thread apps/storybook-react-native/.storybook/main.ts

georgewrmarshall commented May 25, 2026

View reviewed changes

georgewrmarshall force-pushed the codex/storybook-react-native-backgrounds branch 2 times, most recently from 9e2aaaf to f4a33d5 Compare June 3, 2026 20:54

Base automatically changed from codex/storybook-react-native-backgrounds to main June 5, 2026 16:09

chore: adding storybook react native to storybook react

5786484

georgewrmarshall force-pushed the feat/storybook-composition branch from 89c30ab to 5786484 Compare June 7, 2026 01:43

cursor Bot reviewed Jun 7, 2026

View reviewed changes

Comment thread apps/storybook-react/.storybook/main.ts

georgewrmarshall changed the title ~~chore(storybook): compose React Native Storybook into React Storybook for unified hosting~~ feat(storybook): compose React Native components into React Storybook Jun 8, 2026

georgewrmarshall marked this pull request as ready for review June 8, 2026 16:43

georgewrmarshall requested a review from a team as a code owner June 8, 2026 16:43

georgewrmarshall enabled auto-merge (squash) June 8, 2026 18:04

georgewrmarshall self-assigned this Jun 8, 2026

brianacnguyen approved these changes Jun 9, 2026

View reviewed changes

Merge branch 'main' into feat/storybook-composition

e52bd25

georgewrmarshall merged commit dac09b5 into main Jun 9, 2026
36 checks passed

georgewrmarshall deleted the feat/storybook-composition branch June 9, 2026 22:39

Uh oh!

Conversation

georgewrmarshall commented May 25, 2026 • edited by cursor Bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

What changed

Local dev workflow

Related issues

Manual testing steps

Screenshots/Recordings

After

Pre-merge author checklist

Pre-merge reviewer checklist

Uh oh!

github-actions Bot commented May 25, 2026

📖 Storybook Preview

Uh oh!

cursor Bot left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

github-actions Bot commented May 25, 2026

📖 Storybook Preview

Uh oh!

github-actions Bot commented May 25, 2026

📖 Storybook Preview

Uh oh!

cursor Bot left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

github-actions Bot commented May 25, 2026

📖 Storybook Preview

Uh oh!

georgewrmarshall May 25, 2026

Choose a reason for hiding this comment

Uh oh!

github-actions Bot commented May 25, 2026

📖 Storybook Preview

Uh oh!

github-actions Bot commented Jun 7, 2026

📖 Storybook Preview

Uh oh!

cursor Bot left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

github-actions Bot commented Jun 9, 2026

📖 Storybook Preview

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

georgewrmarshall commented May 25, 2026 •

edited by cursor Bot

Loading

cursor Bot left a comment •

edited

Loading

cursor Bot left a comment •

edited

Loading

cursor Bot left a comment •

edited

Loading