[pull] next from storybookjs:next

.github/ISSUE_TEMPLATE/bug_report.md

@@ -24,7 +24,7 @@ If applicable, add screenshots to help explain your problem.
 If applicable, add code samples to help explain your problem.
 
 **System:**
-Please paste the results of `npx -p @storybook/cli@next sb info` here.
+Please paste the results of `npx storybook@latest info` here.
 
 **Additional context**
 Add any other context about the problem here.

.github/PULL_REQUEST_TEMPLATE.md

@@ -13,7 +13,7 @@ If your answer is yes to any of these, please make sure to include it in your PR
 
 <!--
 
-Everybody: Please submit all PRs to the `next-6.0` branch unless they are specific to 5.3. Storybook maintainers cherry-pick bug and documentation fixes into the `master` branch as part of the release process, so you shouldn't need to worry about this.
+Everybody: Please submit all PRs to the `next` branch unless this is a backport for an older version. Storybook maintainers cherry-pick bug and documentation fixes into the `master` branch as part of the release process, so you shouldn't need to worry about this.
 
 Maintainers: Please tag your pull request with at least one of the following:
 `["cleanup", "BREAKING CHANGE", "feature request", "bug", "documentation", "maintenance", "dependencies", "other"]`

.github/workflows/docs.yml

@@ -0,0 +1,50 @@
+name: Deploy to GitHub Pages
+
+on:
+  push:
+    branches: [next]
+  # Allows you to run this workflow manually from the Actions tab on GitHub.
+  workflow_dispatch:
+
+# Allow this job to clone the repo and create a page deployment
+permissions:
+  contents: read
+  pages: write
+  id-token: write
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout your repository using git
+        uses: actions/checkout@v4
+
+      - name: Set node version
+        uses: actions/setup-node@v4
+        with:
+          node-version: 20
+
+      - name: Install
+        shell: 'bash'
+        run: yarn install
+
+      - name: Build
+        shell: 'bash'
+        working-directory: docs
+        run: yarn build
+
+      - name: Upload Pages Artifact
+        uses: actions/upload-pages-artifact@v3
+        with:
+          path: 'docs/build/'
+
+  deploy:
+    needs: build
+    runs-on: ubuntu-latest
+    environment:
+      name: github-pages
+      url: ${{ steps.deployment.outputs.page_url }}
+    steps:
+      - name: Deploy to GitHub Pages
+        id: deployment
+        uses: actions/deploy-pages@v4

.github/workflows/test.yml

@@ -25,5 +25,7 @@ jobs:
         run: yarn lint
       - name: format check
         run: yarn format:check
+      - name: type check example
+        run: yarn workspace expo-example check
       - name: test
         run: yarn test

.gitignore

@@ -35,4 +35,6 @@ built-storybooks
 !.yarn/releases
 !.yarn/sdks
 !.yarn/versions
-.eslintcache
+.eslintcache
+examples/expo-example/.maestro/diffs
+examples/expo-example/.maestro/screenshots

.prettierignore

@@ -1,4 +1,7 @@
 .yarn
 dist/
 examples/expo-example/.expo
-examples/expo-example/.rnstorybook/storybook.requires.ts
+examples/expo-example/.rnstorybook/storybook.requires.ts
+docs/.docusaurus
+docs/build
+.claude/

CLAUDE.md

@@ -0,0 +1,74 @@
+# CLAUDE.md
+
+This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.
+
+## Development Commands
+
+```bash
+# Initial Setup
+yarn install
+yarn build
+
+# Development
+yarn dev        # Watch all packages for changes
+yarn example    # Run the expo example app with Storybook
+
+# Testing
+yarn test       # Run unit tests across all packages
+
+# Code Quality
+yarn lint       # Run ESLint across the codebase
+
+# Documentation (from docs/ directory)
+cd docs
+yarn start      # Start development server
+yarn build      # Build documentation
+yarn serve      # Serve built documentation
+```
+
+## Architecture Overview
+
+**Yarn workspaces monorepo** managed by Lerna containing React Native Storybook packages.
+
+### Packages
+
+**Apps**
+
+- examples/expo-example - Expo example app showcasing Storybook
+- docs - Documentation site for Storybook React Native
+
+**Core:**
+
+- `@storybook/react-native` - Main package providing Storybook functionality
+- `@storybook/react-native-ui` - Full UI components for on-device Storybook
+- `@storybook/react-native-ui-lite` - Lightweight UI components
+- `@storybook/react-native-ui-common` - Shared UI components
+- `@storybook/react-native-theming` - Theming utilities
+
+**On-Device Addons:**
+
+- `@storybook/addon-ondevice-actions` - Log component interactions
+- `@storybook/addon-ondevice-backgrounds` - Change story backgrounds
+- `@storybook/addon-ondevice-controls` - Dynamically edit component props
+- `@storybook/addon-ondevice-notes` - Add markdown documentation to stories
+
+### Build System & Metro Configuration
+
+- Uses **tsup** for TypeScript compilation (ES2022, CommonJS output)
+- Each package has its own `tsup.config.ts`
+- `yarn prepare` in a package builds it
+
+The `withStorybook` Metro wrapper:
+
+- Enables `unstable_allowRequireContext` for dynamic story imports
+- Automatically generates `storybook.requires.ts` file
+- Optional WebSocket server for remote control
+- Can be conditionally enabled/disabled via options
+
+### Key Concepts
+
+1. **CSF (Component Story Format)** - Standard story syntax
+2. **On-device UI** - Native UI that runs directly on mobile devices
+3. **Story requires generation** - Automatic generation of story imports via Metro
+4. **Portable stories** - Reuse stories in unit tests
+5. **WebSocket support** - Remote control stories from external devices

MIGRATION.md

@@ -2,6 +2,9 @@
 
 - [Migration](#migration)
   - [From version 8 to 9](#from-version-8-to-9)
+    - [Update Storybook dependencies to 9.x](#update-storybook-dependencies-to-9x)
+    - [Update your `.storybook` folder](#update-your-storybook-folder)
+    - [Regenerate your requires file](#regenerate-your-requires-file)
   - [From version 7.6.x to 8.3.x](#from-version-76x-to-83x)
     - [Dependencies](#dependencies)
     - [Regenerate your requires file](#regenerate-your-requires-file)
@@ -42,13 +45,23 @@
 
 ## From version 8 to 9
 
-Update storybook dependencies to 9.x
+### Update Storybook dependencies to 9.x
 
-Rename .storybook to .rnstorybook
+You need to update all Storybook dependencies to version 9.x. This includes:
 
-install the 'storybook' package if not already installed
+- `storybook` package
 
-Regenerate your `.storybook/storybook.requires.ts` file by running `yarn storybook-generate`.
+> Note: You can check the correct version by looking at the `peerDependencies`. Please refer to the [core Storybook migration guide](https://github.com/storybookjs/storybook/blob/next/MIGRATION.md?#from-version-8x-to-900) for more details on the breaking changes of this package.
+
+- `@storybook/addon-ondevice-*` packages
+
+### Update your `.storybook` folder
+
+For better compatibility with projects that includes both Storybook and Storybook React Native, the default configuration folder for Storybook React Native has been renamed from `.storybook/` to `.rnstorybook/`.
+
+### Regenerate your requires file
+
+Regenerate your `.rnstorybook/storybook.requires.ts` file by running `yarn storybook-generate`.
 
 ## From version 7.6.x to 8.3.x
 

README.md

@@ -1,5 +1,7 @@
 # Storybook for React Native
 
+A new docs site is being built for Storybook for React Native, you can find it at https://storybookjs.github.io/react-native/docs/intro/.
+
 > [!IMPORTANT]  
 > This readme is for v9, for v8 docs see the [v8.6 docs](https://github.com/storybookjs/react-native/tree/v8.6.0-stable).
 

docs/.gitignore

@@ -0,0 +1,20 @@
+# Dependencies
+/node_modules
+
+# Production
+/build
+
+# Generated files
+.docusaurus
+.cache-loader
+
+# Misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*

docs/README.md

@@ -0,0 +1,41 @@
+# Website
+
+This website is built using [Docusaurus](https://docusaurus.io/), a modern static website generator.
+
+### Installation
+
+```
+$ yarn
+```
+
+### Local Development
+
+```
+$ yarn start
+```
+
+This command starts a local development server and opens up a browser window. Most changes are reflected live without having to restart the server.
+
+### Build
+
+```
+$ yarn build
+```
+
+This command generates static content into the `build` directory and can be served using any static contents hosting service.
+
+### Deployment
+
+Using SSH:
+
+```
+$ USE_SSH=true yarn deploy
+```
+
+Not using SSH:
+
+```
+$ GIT_USER=<Your GitHub username> yarn deploy
+```
+
+If you are using GitHub pages for hosting, this command is a convenient way to build the website and push to the `gh-pages` branch.

docs/blog/2025-03-23-first-blog-post.md

@@ -0,0 +1,14 @@
+---
+slug: hello-world
+title: Hello World
+authors: [dannyhw]
+tags: []
+---
+
+React Native Storybook docs are here. Over the next few weeks and months we'll be building out the documentation.
+
+<!-- truncate -->
+
+As part of an effort to make React Native Storybook easier to use we've started working on dedicated documentation that will explain the nuances of running Storybook on React Native.
+
+If you have something you want to be documented help us build out the docs by submitting a pull request.

docs/blog/authors.yml

@@ -0,0 +1,9 @@
+dannyhw:
+  name: Danny Williams
+  title: Senior Software Engineer
+  url: https://github.com/dannyhw
+  image_url: https://github.com/dannyhw.png
+  page: true
+  socials:
+    x: Danny_H_W
+    github: dannyhw

docs/blog/tags.yml

@@ -0,0 +1,9 @@
+releases:
+  label: Releases
+  permalink: /releases
+  description: Release posts
+
+guides:
+  label: Guides
+  permalink: /guides
+  description: Guide posts