@storybook/react-native 10.0.0-beta.9 → 10.0.0-rc.2

package/dist/metro/withStorybook.d.ts

@@ -21,10 +21,6 @@ interface WithStorybookOptions {
      * The path to the Storybook config folder. Defaults to './.rnstorybook'.
      */
     configPath?: string;
-    /**
-     * Whether Storybook is enabled. Defaults to true.
-     */
-    enabled?: boolean;
     /**
      * WebSocket configuration for syncing storybook instances or sending events to storybook.
      */
@@ -34,9 +30,9 @@ interface WithStorybookOptions {
      */
     useJs?: boolean;
     /**
-     * If enabled is false and onDisabledRemoveStorybook is true, we will attempt to remove storybook from the js bundle.
+     * if false, we will attempt to remove storybook from the js bundle.
      */
-    onDisabledRemoveStorybook?: boolean;
+    enabled?: boolean;
     /**
      * Whether to include doc tools in the storybook.requires file. Defaults to true.
      */
@@ -50,12 +46,32 @@ interface WithStorybookOptions {
 /**
  * Configures Metro bundler to work with Storybook in React Native.
  * This function wraps a Metro configuration to enable Storybook usage.
+ * This is intended to replace the withStorybook function in the future.
  *
- * @param config - The Metro bundler configuration to be modified.
+ * @param config - The Metro bundler configuration to be modified. This should be a valid Metro config object
+ *                 that includes resolver, transformer, and other Metro-specific options.
  * @param options - Options to customize the Storybook configuration.
- * @returns The modified Metro configuration.
+ * @param options.configPath - The path to the Storybook config folder. Defaults to './.rnstorybook'.
+ *                            This is where your main.js/ts and preview.js/ts files are located.
+ * @param options.websockets - WebSocket configuration for syncing storybook instances or sending events.
+ *                            When provided, creates a WebSocket server for real-time communication.
+ * @param options.websockets.port - The port WebSocket server will listen on. Defaults to 7007.
+ * @param options.websockets.host - The host WebSocket server will bind to. Defaults to 'localhost'.
+ * @param options.useJs - Whether to use JavaScript files for Storybook configuration instead of TypeScript.
+ *                       When true, generates storybook.requires.js instead of storybook.requires.ts.
+ *                       Defaults to false.
+ * @param options.enabled - If false, attempts to remove storybook modules from the JavaScript
+ *                         bundle to reduce bundle size. Defaults to true.
+ * @param options.docTools - Whether to include doc tools in the storybook.requires file.
+ *                          Doc tools provide additional documentation features. Defaults to true.
+ * @param options.liteMode - Whether to use lite mode for the storybook. In lite mode, the default
+ *                          storybook UI is mocked out so you don't need to install all its dependencies
+ *                          like reanimated etc. This is useful for reducing bundle size and dependencies.
+ *                          Defaults to false.
+ * @returns The modified Metro configuration with Storybook support enabled.
  *
  * @example
+ * ```javascript
  * const { getDefaultConfig } = require('expo/metro-config');
  * const withStorybook = require('@storybook/react-native/metro/withStorybook');
  * const path = require('path');
@@ -64,14 +80,36 @@ interface WithStorybookOptions {
  * const config = getDefaultConfig(projectRoot);
  *
  * module.exports = withStorybook(config, {
- *   enabled: true,
  *   configPath: path.resolve(projectRoot, './.rnstorybook'),
  *   websockets: { port: 7007, host: 'localhost' },
  *   useJs: false,
  *   docTools: true,
- *   onDisabledRemoveStorybook: true,
+ *   liteMode: false,
+ * });
+ * ```
+ *
+ * @example
+ * ```javascript
+ * // Minimal configuration
+ * const { getDefaultConfig } = require('expo/metro-config');
+ * const withStorybook = require('@storybook/react-native/metro/withStorybook');
+ *
+ * const config = getDefaultConfig(__dirname);
+ * module.exports = withStorybook(config);
+ * ```
+ *
+ * @example
+ * ```javascript
+ * // Disable Storybook in production
+ * const { getDefaultConfig } = require('expo/metro-config');
+ * const withStorybook = require('@storybook/react-native/metro/withStorybook');
+ *
+ * const config = getDefaultConfig(__dirname);
+ * module.exports = withStorybook(config, {
+ *   enabled: process.env.EXPO_PUBLIC_STORYBOOK_ENABLED === "true",
  * });
+ * ```
  */
 declare function withStorybook(config: MetroConfig, options?: WithStorybookOptions): MetroConfig;
 
-export { withStorybook as default };
+export { withStorybook };

package/dist/metro/withStorybook.js

@@ -7,6 +7,10 @@ var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __commonJS = (cb, mod) => function __require() {
   return mod || (0, cb[__getOwnPropNames(cb)[0]])((mod = { exports: {} }).exports, mod), mod.exports;
 };
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
 var __copyProps = (to, from, except, desc) => {
   if (from && typeof from === "object" || typeof from === "function") {
     for (let key of __getOwnPropNames(from))
@@ -23,6 +27,7 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
   isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
   mod
 ));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
 // scripts/common.js
 var require_common = __commonJS({
@@ -240,24 +245,28 @@ export const view${useJs ? "" : ": View"} = global.view;
 });
 
 // src/metro/withStorybook.ts
+var withStorybook_exports = {};
+__export(withStorybook_exports, {
+  withStorybook: () => withStorybook
+});
+module.exports = __toCommonJS(withStorybook_exports);
 var path = __toESM(require("path"));
 var import_generate = __toESM(require_generate());
 var import_ws = require("ws");
 var import_common = require("storybook/internal/common");
 var import_telemetry = require("storybook/internal/telemetry");
 function withStorybook(config, options = {
-  enabled: true,
   useJs: false,
-  onDisabledRemoveStorybook: false,
+  enabled: true,
   docTools: true,
-  liteMode: false
+  liteMode: false,
+  configPath: path.resolve(process.cwd(), "./.rnstorybook")
 }) {
   const {
-    configPath,
-    enabled = true,
+    configPath = path.resolve(process.cwd(), "./.rnstorybook"),
     websockets,
     useJs = false,
-    onDisabledRemoveStorybook = false,
+    enabled = true,
     docTools = true,
     liteMode = false
   } = options;
@@ -268,24 +277,36 @@ function withStorybook(config, options = {
     });
   }
   if (!enabled) {
-    if (onDisabledRemoveStorybook) {
-      return {
-        ...config,
-        resolver: {
-          ...config.resolver,
-          resolveRequest: (context, moduleName, platform) => {
-            const resolveFunction = config?.resolver?.resolveRequest ? config.resolver.resolveRequest : context.resolveRequest;
-            if (moduleName.startsWith("storybook") || moduleName.startsWith("@storybook")) {
-              return {
-                type: "empty"
-              };
-            }
-            return resolveFunction(context, moduleName, platform);
+    return {
+      ...config,
+      resolver: {
+        ...config.resolver,
+        resolveRequest: (context, moduleName, platform) => {
+          const resolveFunction = config?.resolver?.resolveRequest ? config.resolver.resolveRequest : context.resolveRequest;
+          if (moduleName.startsWith("storybook") || moduleName.startsWith("@storybook")) {
+            return {
+              type: "empty"
+            };
+          }
+          if (moduleName === "tty" || moduleName === "os") {
+            return {
+              type: "empty"
+            };
           }
+          const resolved = resolveFunction(context, moduleName, platform);
+          if (resolved.filePath?.includes?.(`${configPath}/index.tsx`)) {
+            return {
+              filePath: path.resolve(__dirname, "../stub.js"),
+              type: "sourceFile"
+            };
+          }
+          if (resolved.filePath?.includes?.(configPath)) {
+            return { type: "empty" };
+          }
+          return resolved;
         }
-      };
-    }
-    return config;
+      }
+    };
   }
   if (websockets) {
     const port = websockets.port ?? 7007;
@@ -305,7 +326,7 @@ function withStorybook(config, options = {
     });
   }
   (0, import_generate.generate)({
-    configPath: configPath ?? path.resolve(process.cwd(), "./.rnstorybook"),
+    configPath,
     useJs,
     docTools
   });
@@ -346,4 +367,7 @@ function withStorybook(config, options = {
     }
   };
 }
-module.exports = withStorybook;
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  withStorybook
+});

package/dist/stub.js

@@ -0,0 +1,39 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/stub.tsx
+var stub_exports = {};
+__export(stub_exports, {
+  default: () => stub_default
+});
+module.exports = __toCommonJS(stub_exports);
+var import_react_native = require("react-native");
+var import_jsx_runtime = require("react/jsx-runtime");
+var Stub = () => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+  import_react_native.View,
+  {
+    style: {
+      flex: 1,
+      alignItems: "center",
+      justifyContent: "center",
+      padding: 16
+    },
+    children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_native.Text, { style: { fontSize: 20, textAlign: "center" }, children: "Storybook is disabled in the withStorybook metro wrapper." })
+  }
+);
+var stub_default = Stub;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/react-native",
-  "version": "10.0.0-beta.9",
+  "version": "10.0.0-rc.2",
   "description": "A better way to develop React Native Components for your app",
   "keywords": [
     "react",
@@ -24,10 +24,10 @@
   "exports": {
     ".": "./dist/index.js",
     "./metro/withStorybook": "./dist/metro/withStorybook.js",
-    "./metro/withStorybookConfig": "./dist/metro/withStorybookConfig.js",
     "./preview": "./dist/preview.js",
     "./scripts/generate": "./scripts/generate.js",
-    "./preset": "./preset.js"
+    "./preset": "./preset.js",
+    "./stub": "./dist/stub.js"
   },
   "files": [
     "bin/**/*",
@@ -49,10 +49,10 @@
   },
   "dependencies": {
     "@storybook/global": "^5.0.0",
-    "@storybook/react": "10.0.0-beta.9",
-    "@storybook/react-native-theming": "^10.0.0-beta.9",
-    "@storybook/react-native-ui": "^10.0.0-beta.9",
-    "@storybook/react-native-ui-common": "^10.0.0-beta.9",
+    "@storybook/react": "10.0.0",
+    "@storybook/react-native-theming": "^10.0.0-rc.2",
+    "@storybook/react-native-ui": "^10.0.0-rc.2",
+    "@storybook/react-native-ui-common": "^10.0.0-rc.2",
     "commander": "^8.2.0",
     "dedent": "^1.5.1",
     "deepmerge": "^4.3.0",
@@ -74,7 +74,7 @@
     "jotai": "^2.6.2",
     "react": "19.1.0",
     "react-native": "0.81.4",
-    "storybook": "10.0.0-beta.9",
+    "storybook": "10.0.0",
     "tsup": "^8.5.0",
     "typescript": "~5.9.2",
     "universal-test-renderer": "^0.6.0"
@@ -86,7 +86,7 @@
     "react-native-gesture-handler": ">=2",
     "react-native-reanimated": ">=2",
     "react-native-safe-area-context": "*",
-    "storybook": ">=10 || 10.0.0-beta.0 || ^10"
+    "storybook": ">=10 || 10.0.0-rc.1 || ^10"
   },
   "peerDependenciesMeta": {
     "@gorhom/bottom-sheet": {
@@ -108,5 +108,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "abd5ecb65efafee8881b1f8c6ab6254586db694d"
+  "gitHead": "5cf63a3b01979f229638feb68a6b4131b9e67cd3"
 }

package/readme.md

@@ -1,13 +1,17 @@
 # Storybook for React Native
 
-> This readme is for v9, for v8 docs see the [v8.6 docs](https://github.com/storybookjs/react-native/tree/v8.6.0-stable).
+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 v10, for v9 docs see the [v9.1 docs](https://github.com/storybookjs/react-native/tree/v9.1.4).
 
 With Storybook for React Native you can design and develop individual React Native components without running your app.
 
-If you are migrating from 8 to 9 you can find the migration guide [here](https://github.com/storybookjs/react-native/blob/next/MIGRATION.md#from-version-8-to-9)
+If you are migrating from 9 to 10 you can find the migration guide [here](https://github.com/storybookjs/react-native/blob/next/MIGRATION.md#from-version-9-to-10)
 
 For more information about storybook visit: [storybook.js.org](https://storybook.js.org)
 
+> [!NOTE]  
 > Make sure you align your storybook dependencies to the same major version or you will see broken behaviour.
 
 ![picture of storybook](https://github.com/user-attachments/assets/cf98766d-8b90-44ab-b718-94ab16e63205)
@@ -79,23 +83,23 @@ Then wrap your config in the withStorybook function as seen below.
 
 ```js
 // metro.config.js
-const path = require('path');
 const { getDefaultConfig } = require('expo/metro-config');
-const withStorybook = require('@storybook/react-native/metro/withStorybook');
+const { withStorybook } = require('@storybook/react-native/metro/withStorybook');
 
-/** @type {import('expo/metro-config').MetroConfig} */
 const config = getDefaultConfig(__dirname);
 
+// For basic usage with all defaults, this is all you need
+module.exports = withStorybook(config);
+
+// Or customize the options
 module.exports = withStorybook(config, {
-  // Set to false to remove storybook specific options
-  // you can also use a env variable to set this
-  enabled: true,
-  // Path to your storybook config
-  configPath: path.resolve(__dirname, './.rnstorybook'),
-  // note that this is the default so you can the config path blank if you use .rnstorybook
+  // When false, removes Storybook from bundle (useful for production)
+  enabled: process.env.EXPO_PUBLIC_STORYBOOK_ENABLED === 'true',
 
-  // Optional websockets configuration
-  // Starts a websocket server on the specified port and host on metro start
+  // Path to your storybook config (default: './.rnstorybook')
+  configPath: './.rnstorybook',
+
+  // Optional websockets configuration for syncing between devices
   // websockets: {
   //   port: 7007,
   //   host: 'localhost',
@@ -107,8 +111,8 @@ module.exports = withStorybook(config, {
 
 ```js
 const { getDefaultConfig, mergeConfig } = require('@react-native/metro-config');
-const path = require('path');
-const withStorybook = require('@storybook/react-native/metro/withStorybook');
+const { withStorybook } = require('@storybook/react-native/metro/withStorybook');
+
 const defaultConfig = getDefaultConfig(__dirname);
 
 /**
@@ -122,15 +126,19 @@ const config = {};
 
 const finalConfig = mergeConfig(defaultConfig, config);
 
+// For basic usage with all defaults
+module.exports = withStorybook(finalConfig);
+
+// Or customize the options
 module.exports = withStorybook(finalConfig, {
-  // Set to false to remove storybook specific options
-  // you can also use a env variable to set this
-  enabled: true,
-  // Path to your storybook config
+  // When false, removes Storybook from bundle (useful for production)
+  enabled: process.env.STORYBOOK_ENABLED === 'true',
+
+  // Path to your storybook config (default: './.rnstorybook')
   configPath: path.resolve(__dirname, './.rnstorybook'),
   // note that this is the default so you can the config path blank if you use .rnstorybook
 
-  // Optional websockets configuration
+  // Optional websockets configuration for syncing between devices
   // Starts a websocket server on the specified port and host on metro start
   // websockets: {
   //   port: 7007,
@@ -148,6 +156,39 @@ Make sure you have `react-native-reanimated` in your project and the plugin setu
 plugins: ['react-native-reanimated/plugin'],
 ```
 
+## Expo router specific setup
+
+```bash
+npm create storybook@latest
+```
+
+choose recommended and then native
+
+```bash
+npx expo@latest customize metro.config.js
+```
+
+copy the metro config
+
+```js
+const withStorybook = require('@storybook/react-native/metro/withStorybook');
+module.exports = withStorybook(config);
+```
+
+add storybook screen to app
+
+create `app/storybook.tsx`
+
+```tsx
+export { default } from '../.rnstorybook';
+```
+
+Then add a way to navigate to your storybook route and I recommend disabling the header for the storybook route.
+
+Heres a video showing the same setup:
+
+https://www.youtube.com/watch?v=egBqrYg0AIg
+
 ## Writing stories
 
 In storybook we use a syntax called CSF that looks like this:
@@ -291,13 +332,52 @@ For details of each ondevice addon you can see the readme:
 
 ## Hide/Show storybook
 
-Storybook on react native is a normal React Native component that can be used or hidden anywhere in your RN application based on your own logic.
+In v10, you have flexible options for integrating Storybook into your app:
 
-You can also create a separate app just for storybook that also works as a package for your visual components.
-Some have opted to toggle the storybook component by using a custom option in the react native developer menu.
+### Option 1: Direct export (simplest)
 
-- [Heres an approach for react native cli](https://dev.to/dannyhw/multiple-entry-points-for-react-native-storybook-4dkp)
-- [Heres an article about how you can do it in expo](https://dev.to/dannyhw/how-to-swap-between-react-native-storybook-and-your-app-p3o)
+Just export Storybook directly. Control inclusion via the metro config `enabled` flag:
+
+```tsx
+// App.tsx
+export { default } from './.rnstorybook';
+```
+
+```js
+// metro.config.js
+module.exports = withStorybook(config, {
+  enabled: process.env.EXPO_PUBLIC_STORYBOOK_ENABLED === 'true',
+});
+```
+
+When `enabled: false`, Metro automatically removes Storybook from your bundle.
+
+### Option 2: Conditional rendering
+
+If you want to switch between your app and Storybook at runtime:
+
+```tsx
+// App.tsx
+import StorybookUI from './.rnstorybook';
+import { MyApp } from './MyApp';
+
+const isStorybook = process.env.EXPO_PUBLIC_STORYBOOK_ENABLED === 'true';
+
+export default function App() {
+  return isStorybook ? <StorybookUI /> : <MyApp />;
+}
+```
+
+### Option 3: Expo Router (recommended for Expo)
+
+Create a dedicated route for Storybook:
+
+```tsx
+// app/storybook.tsx
+export { default } from '../.rnstorybook';
+```
+
+Then navigate to `/storybook` in your app to view stories.
 
 ## withStorybook wrapper
 
@@ -322,7 +402,9 @@ module.exports = withStorybook(defaultConfig, {
 
 Type: `boolean`, default: `true`
 
-Determines whether the options specified are applied to the Metro config. This can be useful for project setups that use Metro both with and without Storybook and need to conditionally apply the options. In this example, it is made conditional using an environment variable:
+Controls whether Storybook is included in your app bundle. When `true`, enables Storybook metro configuration and generates the `storybook.requires` file. When `false`, removes all Storybook code from the bundle by replacing imports with empty modules.
+
+This is useful for conditionally including Storybook in development but excluding it from production builds:
 
 ```js
 // metro.config.js
@@ -332,18 +414,11 @@ const withStorybook = require('@storybook/react-native/metro/withStorybook');
 const defaultConfig = getDefaultConfig(__dirname);
 
 module.exports = withStorybook(defaultConfig, {
-  enabled: process.env.WITH_STORYBOOK,
+  enabled: process.env.STORYBOOK_ENABLED === 'true',
   // ... other options
 });
 ```
 
-#### onDisabledRemoveStorybook
-
-Type: `boolean`, default: `false`
-
-If onDisabledRemoveStorybook `true` and `enabled` is `false`, the storybook package will be removed from the build.
-This is useful if you want to remove storybook from your production build.
-
 #### useJs
 
 Type: `boolean`, default: `false`
@@ -356,6 +431,18 @@ Type: `string`, default: `path.resolve(process.cwd(), './.rnstorybook')`
 
 The location of your Storybook configuration directory, which includes `main.ts` and other project-related files.
 
+#### docTools
+
+Type: `boolean`, default: `true`
+
+Whether to include doc tools in the storybook.requires file. Doc tools provide additional documentation features and work with `babel-plugin-react-docgen-typescript`.
+
+#### liteMode
+
+Type: `boolean`, default: `false`
+
+Whether to use lite mode for Storybook. In lite mode, the default Storybook UI is mocked out so you don't need to install all its dependencies like react-native-reanimated. This is useful for reducing bundle size and dependencies. Use this when using @storybook/react-native-ui-lite instead of @storybook/react-native-ui.
+
 ### websockets
 
 Type: `{ host: string?, port: number? }`, default: `undefined`

package/dist/metro/withStorybookConfig.d.ts

@@ -1,116 +0,0 @@
-import { MetroConfig } from 'metro-config';
-
-/**
- * Options for configuring WebSockets used for syncing storybook instances or sending events to storybook.
- */
-interface WebsocketsOptions {
-    /**
-     * The port WebSocket server will listen on. Defaults to 7007.
-     */
-    port?: number;
-    /**
-     * The host WebSocket server will bind to. Defaults to 'localhost'.
-     */
-    host?: string;
-}
-/**
- * Options for configuring Storybook with React Native.
- */
-interface WithStorybookOptions {
-    /**
-     * The path to the Storybook config folder. Defaults to './.rnstorybook'.
-     */
-    configPath?: string;
-    /**
-     * WebSocket configuration for syncing storybook instances or sending events to storybook.
-     */
-    websockets?: WebsocketsOptions;
-    /**
-     * Whether to use JavaScript files for Storybook configuration instead of TypeScript. Defaults to false.
-     */
-    useJs?: boolean;
-    /**
-     * if true, we will attempt to remove storybook from the js bundle.
-     */
-    removeStorybook?: boolean;
-    /**
-     * Whether to include doc tools in the storybook.requires file. Defaults to true.
-     */
-    docTools?: boolean;
-    /**
-     * Whether to use lite mode for the storybook. Defaults to false.
-     * This will mock out the default storybook ui so you don't need to install all its dependencies like reanimated etc.
-     */
-    liteMode?: boolean;
-}
-/**
- * Configures Metro bundler to work with Storybook in React Native.
- * This function wraps a Metro configuration to enable Storybook usage.
- * This is intended to replace the withStorybook function in the future.
- *
- * @param config - The Metro bundler configuration to be modified. This should be a valid Metro config object
- *                 that includes resolver, transformer, and other Metro-specific options.
- * @param options - Options to customize the Storybook configuration.
- * @param options.configPath - The path to the Storybook config folder. Defaults to './.rnstorybook'.
- *                            This is where your main.js/ts and preview.js/ts files are located.
- * @param options.websockets - WebSocket configuration for syncing storybook instances or sending events.
- *                            When provided, creates a WebSocket server for real-time communication.
- * @param options.websockets.port - The port WebSocket server will listen on. Defaults to 7007.
- * @param options.websockets.host - The host WebSocket server will bind to. Defaults to 'localhost'.
- * @param options.useJs - Whether to use JavaScript files for Storybook configuration instead of TypeScript.
- *                       When true, generates storybook.requires.js instead of storybook.requires.ts.
- *                       Defaults to false.
- * @param options.removeStorybook - If enabled is false and this is true, attempts to remove
- *                                          storybook modules from the JavaScript bundle to reduce bundle size.
- *                                          Defaults to false.
- * @param options.docTools - Whether to include doc tools in the storybook.requires file.
- *                          Doc tools provide additional documentation features. Defaults to true.
- * @param options.liteMode - Whether to use lite mode for the storybook. In lite mode, the default
- *                          storybook UI is mocked out so you don't need to install all its dependencies
- *                          like reanimated etc. This is useful for reducing bundle size and dependencies.
- *                          Defaults to false.
- * @returns The modified Metro configuration with Storybook support enabled.
- *
- * @example
- * ```javascript
- * const { getDefaultConfig } = require('expo/metro-config');
- * const withStorybook = require('@storybook/react-native/metro/withStorybook');
- * const path = require('path');
- *
- * const projectRoot = __dirname;
- * const config = getDefaultConfig(projectRoot);
- *
- * module.exports = withStorybook(config, {
- *   configPath: path.resolve(projectRoot, './.rnstorybook'),
- *   websockets: { port: 7007, host: 'localhost' },
- *   useJs: false,
- *   docTools: true,
- *   liteMode: false,
- * });
- * ```
- *
- * @example
- * ```javascript
- * // Minimal configuration
- * const { getDefaultConfig } = require('expo/metro-config');
- * const withStorybook = require('@storybook/react-native/metro/withStorybook');
- *
- * const config = getDefaultConfig(__dirname);
- * module.exports = withStorybook(config);
- * ```
- *
- * @example
- * ```javascript
- * // Disable Storybook in production
- * const { getDefaultConfig } = require('expo/metro-config');
- * const withStorybook = require('@storybook/react-native/metro/withStorybook');
- *
- * const config = getDefaultConfig(__dirname);
- * module.exports = withStorybook(config, {
- *   removeStorybook: process.env.EXPO_PUBLIC_STORYBOOK_ENABLED !== "true",
- * });
- * ```
- */
-declare function withStorybookConfig(config: MetroConfig, options?: WithStorybookOptions): MetroConfig;
-
-export { withStorybookConfig as default, withStorybookConfig };

package/dist/metro/withStorybookConfig.js

@@ -1,360 +0,0 @@
-var __create = Object.create;
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getProtoOf = Object.getPrototypeOf;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __commonJS = (cb, mod) => function __require() {
-  return mod || (0, cb[__getOwnPropNames(cb)[0]])((mod = { exports: {} }).exports, mod), mod.exports;
-};
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
-var __copyProps = (to, from, except, desc) => {
-  if (from && typeof from === "object" || typeof from === "function") {
-    for (let key of __getOwnPropNames(from))
-      if (!__hasOwnProp.call(to, key) && key !== except)
-        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
-  }
-  return to;
-};
-var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
-  // If the importer is in node compatibility mode or this is not an ESM
-  // file that has been converted to a CommonJS file using a Babel-
-  // compatible transform (i.e. "__esModule" has not been set), then set
-  // "default" to the CommonJS "module.exports" for node compatibility.
-  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
-  mod
-));
-var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-
-// scripts/common.js
-var require_common = __commonJS({
-  "scripts/common.js"(exports2, module2) {
-    var { globToRegexp } = require("storybook/internal/common");
-    var path2 = require("path");
-    var fs = require("fs");
-    var cwd = process.cwd();
-    var toRequireContext = (specifier) => {
-      const { directory, files } = specifier;
-      const match = globToRegexp(`./${files}`);
-      return {
-        path: directory,
-        recursive: files.includes("**") || files.split("/").length > 1,
-        match
-      };
-    };
-    var supportedExtensions = ["js", "jsx", "ts", "tsx", "cjs", "mjs"];
-    function getFilePathExtension({ configPath }, fileName) {
-      for (const ext of supportedExtensions) {
-        const filePath = path2.resolve(cwd, configPath, `${fileName}.${ext}`);
-        if (fs.existsSync(filePath)) {
-          return ext;
-        }
-      }
-      return null;
-    }
-    function ensureRelativePathHasDot(relativePath) {
-      return relativePath.startsWith(".") ? relativePath : `./${relativePath}`;
-    }
-    function getPreviewExists({ configPath }) {
-      return !!getFilePathExtension({ configPath }, "preview");
-    }
-    function resolveAddonFile(addon, file, extensions = ["js", "mjs", "ts"], configPath) {
-      if (!addon || typeof addon !== "string") return null;
-      try {
-        const basePath = `${addon}/${file}`;
-        require.resolve(basePath);
-        return basePath;
-      } catch (_error) {
-      }
-      for (const ext of extensions) {
-        try {
-          const filePath = `${addon}/${file}.${ext}`;
-          require.resolve(filePath);
-          return filePath;
-        } catch (_error) {
-        }
-      }
-      if (addon.startsWith("./") || addon.startsWith("../")) {
-        try {
-          const extension = getFilePathExtension({ configPath }, `${addon}/${file}`);
-          if (extension) {
-            return `${addon}/${file}`;
-          }
-        } catch (_error) {
-        }
-      }
-      return null;
-    }
-    function getAddonName(addon) {
-      if (typeof addon === "string") return addon;
-      if (typeof addon === "object" && addon.name && typeof addon.name === "string") return addon.name;
-      console.error("Invalid addon configuration", addon);
-      return null;
-    }
-    module2.exports = {
-      toRequireContext,
-      getFilePathExtension,
-      ensureRelativePathHasDot,
-      getPreviewExists,
-      resolveAddonFile,
-      getAddonName
-    };
-  }
-});
-
-// scripts/generate.js
-var require_generate = __commonJS({
-  "scripts/generate.js"(exports2, module2) {
-    var {
-      toRequireContext,
-      ensureRelativePathHasDot,
-      getPreviewExists,
-      resolveAddonFile,
-      getAddonName
-    } = require_common();
-    var { normalizeStories, globToRegexp, loadMainConfig } = require("storybook/internal/common");
-    var fs = require("fs");
-    var path2 = require("path");
-    var cwd = process.cwd();
-    async function generate2({
-      configPath,
-      /* absolute = false, */
-      useJs = false,
-      docTools = true
-    }) {
-      const storybookRequiresLocation = path2.resolve(
-        cwd,
-        configPath,
-        `storybook.requires.${useJs ? "js" : "ts"}`
-      );
-      const main = await loadMainConfig({ configDir: configPath, cwd });
-      const storiesSpecifiers = normalizeStories(main.stories, {
-        configDir: configPath,
-        workingDir: cwd
-      });
-      const normalizedStories = storiesSpecifiers.map((specifier) => {
-        const reg = globToRegexp(`./${specifier.files}`);
-        const { path: p, recursive: r, match: m } = toRequireContext(specifier);
-        const pathToStory = ensureRelativePathHasDot(path2.posix.relative(configPath, p));
-        return `{
-    titlePrefix: "${specifier.titlePrefix}",
-    directory: "${specifier.directory}",
-    files: "${specifier.files}",
-    importPathMatcher: /${reg.source}/,
-    ${useJs ? "" : "// @ts-ignore"}
-    req: require.context(
-      '${pathToStory}',
-      ${r},
-      ${m}
-    ),
-  }`;
-      });
-      const registeredAddons = [];
-      for (const addon of main.addons) {
-        const registerPath = resolveAddonFile(
-          getAddonName(addon),
-          "register",
-          ["js", "mjs", "jsx", "ts", "tsx"],
-          configPath
-        );
-        if (registerPath) {
-          registeredAddons.push(`import "${registerPath}";`);
-        }
-      }
-      const docToolsAnnotation = 'require("@storybook/react-native/preview")';
-      const enhancers = [];
-      if (docTools) {
-        enhancers.push(docToolsAnnotation);
-      }
-      for (const addon of main.addons) {
-        const previewPath = resolveAddonFile(
-          getAddonName(addon),
-          "preview",
-          ["js", "mjs", "jsx", "ts", "tsx"],
-          configPath
-        );
-        if (previewPath) {
-          enhancers.push(`require('${previewPath}')`);
-          continue;
-        }
-      }
-      let options = "";
-      let optionsVar = "";
-      const reactNativeOptions = main.reactNative;
-      if (reactNativeOptions && typeof reactNativeOptions === "object") {
-        optionsVar = `const options = ${JSON.stringify(reactNativeOptions, null, 2)}`;
-        options = "options";
-      }
-      const previewExists = getPreviewExists({ configPath });
-      if (previewExists) {
-        enhancers.unshift("require('./preview')");
-      }
-      const annotations = `[
-  ${enhancers.join(",\n  ")}
-]`;
-      const globalTypes = `
-declare global {
-  var view: View;
-  var STORIES: typeof normalizedStories;
-}
-`;
-      const fileContent = `/* do not change this file, it is auto generated by storybook. */
-import { start, updateView${useJs ? "" : ", View"} } from '@storybook/react-native';
-
-${registeredAddons.join("\n")}
-
-const normalizedStories = [
-  ${normalizedStories.join(",\n  ")}
-];
-
-${useJs ? "" : globalTypes}
-
-const annotations = ${annotations};
-
-global.STORIES = normalizedStories;
-
-${useJs ? "" : "// @ts-ignore"}
-module?.hot?.accept?.();
-
-${optionsVar}
-
-if (!global.view) {
-  global.view = start({
-    annotations,
-    storyEntries: normalizedStories,
-${options ? `    ${options},` : ""}
-  });
-} else {
-  updateView(global.view, annotations, normalizedStories${options ? `, ${options}` : ""});
-}
-
-export const view${useJs ? "" : ": View"} = global.view;
-`;
-      fs.writeFileSync(storybookRequiresLocation, fileContent, {
-        encoding: "utf8",
-        flag: "w"
-      });
-    }
-    module2.exports = {
-      generate: generate2
-    };
-  }
-});
-
-// src/metro/withStorybookConfig.ts
-var withStorybookConfig_exports = {};
-__export(withStorybookConfig_exports, {
-  default: () => withStorybookConfig_default,
-  withStorybookConfig: () => withStorybookConfig
-});
-module.exports = __toCommonJS(withStorybookConfig_exports);
-var path = __toESM(require("path"));
-var import_generate = __toESM(require_generate());
-var import_ws = require("ws");
-var import_common = require("storybook/internal/common");
-var import_telemetry = require("storybook/internal/telemetry");
-function withStorybookConfig(config, options = {
-  useJs: false,
-  removeStorybook: false,
-  docTools: true,
-  liteMode: false,
-  configPath: path.resolve(process.cwd(), "./.rnstorybook")
-}) {
-  const {
-    configPath = path.resolve(process.cwd(), "./.rnstorybook"),
-    websockets,
-    useJs = false,
-    removeStorybook = false,
-    docTools = true,
-    liteMode = false
-  } = options;
-  const disableTelemetry = (0, import_common.optionalEnvToBoolean)(process.env.STORYBOOK_DISABLE_TELEMETRY);
-  if (!disableTelemetry && !removeStorybook) {
-    const event = process.env.NODE_ENV === "production" ? "build" : "dev";
-    (0, import_telemetry.telemetry)(event, {}).catch((e) => {
-    });
-  }
-  if (removeStorybook) {
-    return {
-      ...config,
-      resolver: {
-        ...config.resolver,
-        resolveRequest: (context, moduleName, platform) => {
-          const resolveFunction = config?.resolver?.resolveRequest ? config.resolver.resolveRequest : context.resolveRequest;
-          if (moduleName.startsWith("storybook") || moduleName.startsWith("@storybook")) {
-            return {
-              type: "empty"
-            };
-          }
-          return resolveFunction(context, moduleName, platform);
-        }
-      }
-    };
-  }
-  if (websockets) {
-    const port = websockets.port ?? 7007;
-    const host = websockets.host ?? "localhost";
-    const wss = new import_ws.WebSocketServer({ port, host });
-    wss.on("connection", function connection(ws) {
-      console.log("WebSocket connection established");
-      ws.on("error", console.error);
-      ws.on("message", function message(data) {
-        try {
-          const json = JSON.parse(data.toString());
-          wss.clients.forEach((wsClient) => wsClient.send(JSON.stringify(json)));
-        } catch (error) {
-          console.error(error);
-        }
-      });
-    });
-  }
-  (0, import_generate.generate)({
-    configPath,
-    useJs,
-    docTools
-  });
-  return {
-    ...config,
-    transformer: {
-      ...config.transformer,
-      unstable_allowRequireContext: true
-    },
-    resolver: {
-      ...config.resolver,
-      resolveRequest: (context, moduleName, platform) => {
-        const resolveFunction = config?.resolver?.resolveRequest ? config.resolver.resolveRequest : context.resolveRequest;
-        const shouldUseCustomResolveConfig = moduleName.startsWith("storybook") || moduleName.startsWith("@storybook") || moduleName.startsWith("uuid");
-        const theContext = shouldUseCustomResolveConfig ? {
-          ...context,
-          unstable_enablePackageExports: true,
-          unstable_conditionNames: ["import"]
-        } : context;
-        const resolveResult = resolveFunction(theContext, moduleName, platform);
-        if (resolveResult?.filePath?.includes?.("@storybook/react/template/cli")) {
-          return {
-            type: "empty"
-          };
-        }
-        if (moduleName === "tty" || moduleName === "os") {
-          return {
-            type: "empty"
-          };
-        }
-        if (liteMode && resolveResult?.filePath?.includes?.("@storybook/react-native-ui") && !resolveResult?.filePath?.includes?.("@storybook/react-native-ui-lite") && !resolveResult?.filePath?.includes?.("@storybook/react-native-ui-common")) {
-          return {
-            type: "empty"
-          };
-        }
-        return resolveResult;
-      }
-    }
-  };
-}
-var withStorybookConfig_default = withStorybookConfig;
-// Annotate the CommonJS export names for ESM import in node:
-0 && (module.exports = {
-  withStorybookConfig
-});

package/metro/withStorybookConfig.js

@@ -1 +0,0 @@
-module.exports = require('../dist/metro/withStorybookConfig.js');