@storybook/react-native 9.0.14 → 9.0.18-alpha.0

package/dist/metro/withStorybook.d.ts

@@ -41,6 +41,11 @@ interface WithStorybookOptions {
      * 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.

package/dist/metro/withStorybook.js

@@ -199,7 +199,7 @@ var require_generate = __commonJS({
       let optionsVar = "";
       const reactNativeOptions = main.reactNative;
       if (reactNativeOptions && typeof reactNativeOptions === "object") {
-        optionsVar = `const options = ${JSON.stringify(reactNativeOptions, null, 4)}`;
+        optionsVar = `const options = ${JSON.stringify(reactNativeOptions, null, 2)}`;
         options = "options";
       }
       const previewExists = getPreviewExists({ configPath });
@@ -221,7 +221,7 @@ import { start, updateView${useJs ? "" : ", View"} } from '@storybook/react-nati
 ${registeredAddons.join("\n")}
 
 const normalizedStories = [
-  ${normalizedStories.join(",\n")}
+  ${normalizedStories.join(",\n  ")}
 ];
 
 ${useJs ? "" : globalTypes}
@@ -266,7 +266,8 @@ function withStorybook(config, options = {
   enabled: true,
   useJs: false,
   onDisabledRemoveStorybook: false,
-  docTools: true
+  docTools: true,
+  liteMode: false
 }) {
   const {
     configPath,
@@ -274,7 +275,8 @@ function withStorybook(config, options = {
     websockets,
     useJs = false,
     onDisabledRemoveStorybook = false,
-    docTools = true
+    docTools = true,
+    liteMode = false
   } = options;
   if (!enabled) {
     if (onDisabledRemoveStorybook) {
@@ -340,6 +342,13 @@ function withStorybook(config, options = {
             type: "empty"
           };
         }
+        if (liteMode) {
+          if (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;
       }
     }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/react-native",
-  "version": "9.0.14",
+  "version": "9.0.18-alpha.0",
   "description": "A better way to develop React Native Components for your app",
   "keywords": [
     "react",
@@ -47,10 +47,10 @@
   },
   "dependencies": {
     "@storybook/global": "^5.0.0",
-    "@storybook/react": "9.0.14",
-    "@storybook/react-native-theming": "^9.0.14",
-    "@storybook/react-native-ui": "^9.0.14",
-    "@storybook/react-native-ui-common": "^9.0.14",
+    "@storybook/react": "^9.0.17",
+    "@storybook/react-native-theming": "^9.0.18-alpha.0",
+    "@storybook/react-native-ui": "^9.0.18-alpha.0",
+    "@storybook/react-native-ui-common": "^9.0.18-alpha.0",
     "commander": "^8.2.0",
     "dedent": "^1.5.1",
     "deepmerge": "^4.3.0",
@@ -71,7 +71,7 @@
     "react": "19.0.0",
     "react-native": "0.79.2",
     "react-test-renderer": "^19.1.0",
-    "storybook": "9.0.14",
+    "storybook": "^9.0.17",
     "tsup": "^7.2.0",
     "typescript": "~5.8.3"
   },
@@ -82,7 +82,7 @@
     "react-native-gesture-handler": ">=2",
     "react-native-reanimated": ">=2",
     "react-native-safe-area-context": "*",
-    "storybook": "9.0.14"
+    "storybook": "^9.0.17"
   },
   "peerDependenciesMeta": {
     "@gorhom/bottom-sheet": {
@@ -104,5 +104,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "19bb44781daef1f4bd1c5782c0a00d5b7fa5b943"
+  "gitHead": "4db4eab32c4494fe22d21519d3db5308c9a23660"
 }

package/readme.md

@@ -40,7 +40,7 @@ npx create-expo-app --template expo-template-storybook AwesomeStorybook
 For react native cli you can use this [template](https://github.com/dannyhw/react-native-template-storybook)
 
 ```sh
-npx react-native init MyApp --template react-native-template-storybook
+npx @react-native-community/cli init MyApp --template react-native-template-storybook
 ```
 
 ### Existing project
@@ -176,7 +176,7 @@ You should configure the path to your story files in the `main.ts` config file f
 
 ```ts
 // .rnstorybook/main.ts
-import { StorybookConfig } from '@storybook/react-native';
+import type { StorybookConfig } from '@storybook/react-native';
 
 const main: StorybookConfig = {
   stories: ['../components/**/*.stories.?(ts|tsx|js|jsx)'],
@@ -265,7 +265,7 @@ Install each one you want to use and add them to the `main.ts` addons list as fo
 
 ```ts
 // .rnstorybook/main.ts
-import { StorybookConfig } from '@storybook/react-native';
+import type { StorybookConfig } from '@storybook/react-native';
 
 const main: StorybookConfig = {
   // ... rest of config

package/scripts/generate.js

@@ -94,7 +94,7 @@ function generate({ configPath, /* absolute = false, */ useJs = false, docTools
   const reactNativeOptions = main.reactNative;
 
   if (reactNativeOptions && typeof reactNativeOptions === 'object') {
-    optionsVar = `const options = ${JSON.stringify(reactNativeOptions, null, 4)}`;
+    optionsVar = `const options = ${JSON.stringify(reactNativeOptions, null, 2)}`;
     options = 'options';
   }
 
@@ -121,7 +121,7 @@ import { start, updateView${useJs ? '' : ', View'} } from '@storybook/react-nati
 ${registeredAddons.join('\n')}
 
 const normalizedStories = [
-  ${normalizedStories.join(',\n')}
+  ${normalizedStories.join(',\n  ')}
 ];
 
 ${useJs ? '' : globalTypes}

package/template/cli/main.ts

@@ -1,4 +1,4 @@
-import { StorybookConfig } from '@storybook/react-native';
+import type { StorybookConfig } from '@storybook/react-native';
 
 const main: StorybookConfig = {
   stories: ['./stories/**/*.stories.?(ts|tsx|js|jsx)'],