Release: Patch 9.0.10

CHANGELOG.md

@@ -1,3 +1,8 @@
+## 9.0.10
+
+- CLI: Add RN/RNW "both" init option - [#31778](https://github.com/storybookjs/storybook/pull/31778), thanks @shilman!
+- Nextjs-Vite: Use tsconfig paths plugin - [#31764](https://github.com/storybookjs/storybook/pull/31764), thanks @kasperpeulen!
+
 ## 9.0.9
 
 - Angular: Update MiniCssExtractPlugin configuration for cache busting - [#31752](https://github.com/storybookjs/storybook/pull/31752), thanks @valentinpalkovic!

code/core/src/cli/project_types.ts

@@ -48,6 +48,7 @@ export enum ProjectType {
   REACT_SCRIPTS = 'REACT_SCRIPTS',
   REACT_NATIVE = 'REACT_NATIVE',
   REACT_NATIVE_WEB = 'REACT_NATIVE_WEB',
+  REACT_NATIVE_AND_RNW = 'REACT_NATIVE_AND_RNW',
   REACT_PROJECT = 'REACT_PROJECT',
   WEBPACK_REACT = 'WEBPACK_REACT',
   NEXTJS = 'NEXTJS',

code/frameworks/nextjs-vite/package.json

@@ -108,7 +108,7 @@
     "@storybook/react": "workspace:*",
     "@storybook/react-vite": "workspace:*",
     "styled-jsx": "5.1.6",
-    "vite-plugin-storybook-nextjs": "2.0.0"
+    "vite-plugin-storybook-nextjs": "2.0.2"
   },
   "devDependencies": {
     "@types/node": "^22.0.0",

code/lib/create-storybook/src/initiate.ts

@@ -111,6 +111,12 @@ const installStorybook = async <Project extends ProjectType>(
         );
       }
 
+      case ProjectType.REACT_NATIVE_AND_RNW: {
+        commandLog('Adding Storybook support to your "React Native" app');
+        await reactNativeGenerator(packageManager, npmOptions, generatorOptions);
+        return reactNativeWebGenerator(packageManager, npmOptions, generatorOptions);
+      }
+
       case ProjectType.QWIK: {
         return qwikGenerator(packageManager, npmOptions, generatorOptions).then(
           commandLog('Adding Storybook support to your "Qwik" app')
@@ -511,6 +517,10 @@ export async function doInitiate(options: CommandOptions): Promise<
               title: `${picocolors.bold('React Native Web')}: Storybook on web for docs, test, and sharing`,
               value: ProjectType.REACT_NATIVE_WEB,
             },
+            {
+              title: `${picocolors.bold('Both')}: Add both native and web Storybooks`,
+              value: ProjectType.REACT_NATIVE_AND_RNW,
+            },
           ],
         });
         projectType = manualType;
@@ -616,11 +626,11 @@ export async function doInitiate(options: CommandOptions): Promise<
     await telemetry('init', { projectType, features: telemetryFeatures, newUser });
   }
 
-  if (projectType === ProjectType.REACT_NATIVE) {
+  if ([ProjectType.REACT_NATIVE, ProjectType.REACT_NATIVE_AND_RNW].includes(projectType)) {
     logger.log(dedent`
-      ${picocolors.yellow('NOTE: installation is not 100% automated.')}
+      ${picocolors.yellow('React Native (RN) Storybook installation is not 100% automated.')}
 
-      To run Storybook, you will need to:
+      To run RN Storybook, you will need to:
 
       1. Replace the contents of your app entry with the following
 
@@ -634,12 +644,21 @@ export async function doInitiate(options: CommandOptions): Promise<
       For more details go to:
       ${picocolors.cyan('https://github.com/storybookjs/react-native#getting-started')}
 
-      Then to run your Storybook, type:
+      Then to start RN Storybook, run:
 
       ${picocolors.inverse(' ' + packageManager.getRunCommand('start') + ' ')}
-
     `);
 
+    if (projectType === ProjectType.REACT_NATIVE_AND_RNW) {
+      logger.log(dedent`
+
+        ${picocolors.yellow('React Native Web (RNW) Storybook is fully installed.')}
+
+        To start RNW Storybook, run:
+
+        ${picocolors.inverse(' ' + packageManager.getRunCommand('storybook') + ' ')}
+      `);
+    }
     return { shouldRunDev: false };
   }
 

code/package.json

@@ -283,5 +283,6 @@
         "Dependency Upgrades"
       ]
     ]
-  }
+  },
+  "deferredNextVersion": "9.0.10"
 }

code/yarn.lock

@@ -6361,7 +6361,7 @@ __metadata:
     postcss-load-config: "npm:^6.0.1"
     styled-jsx: "npm:5.1.6"
     typescript: "npm:^5.8.3"
-    vite-plugin-storybook-nextjs: "npm:2.0.0"
+    vite-plugin-storybook-nextjs: "npm:2.0.2"
   peerDependencies:
     next: ^14.1.0 || ^15.0.0
     react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta
@@ -26483,20 +26483,21 @@ __metadata:
   languageName: node
   linkType: hard
 
-"vite-plugin-storybook-nextjs@npm:2.0.0":
-  version: 2.0.0
-  resolution: "vite-plugin-storybook-nextjs@npm:2.0.0"
+"vite-plugin-storybook-nextjs@npm:2.0.2":
+  version: 2.0.2
+  resolution: "vite-plugin-storybook-nextjs@npm:2.0.2"
   dependencies:
     "@next/env": "npm:^15.0.3"
     image-size: "npm:^2.0.0"
     magic-string: "npm:^0.30.11"
     module-alias: "npm:^2.2.3"
     ts-dedent: "npm:^2.2.0"
+    vite-tsconfig-paths: "npm:^5.1.4"
   peerDependencies:
     next: ^14.1.0 || ^15.0.0
-    storybook: ^9.0.0-0
+    storybook: ^0.0.0-0 || ^9.0.0 || ^9.1.0-0
     vite: ^5.0.0 || ^6.0.0
-  checksum: 10c0/fdb4d6977674c26d6105c9b5c4d90f3c0dba186b03482fd3ee6d9d797b2c0da99df9835ec184dcbca4c545ced45b7da238870708c3b4d622017edd6e9073a968
+  checksum: 10c0/52db273d836bc5f8d9e7bcd61ee7560acf6499bf041306e9574e009b0d3388fa690379d6c56299ad4870867318716832d2c4cd93a34bb87d565f36abee18d4bb
   languageName: node
   linkType: hard
 

docs/get-started/frameworks/react-native-web-vite.mdx

@@ -96,6 +96,8 @@ Both options provide a catalog of your stories that hot refreshes as you edit th
 
 {/* [Image: native + web] */}
 
+### Comparison
+
 So, which option is right for you?
 
 **Native.** You should choose this option if you want:
@@ -110,7 +112,13 @@ So, which option is right for you?
 - [**Testing**](../../writing-tests/index.mdx) - Component, visual, and a11y tests for your components.
 - [**Addons**](https://storybook.js.org/addons) - 500+ addons that improve development, documentation, testing, and integration with other tools.
 
-**Both.** It’s also possible to use both options together. However, this increases Storybook’s install footprint and requires more work to configure. Therefore, we recommend choosing one option to start and extending it once you have something working.
+**Both.** It’s also possible to use both options together. This increases Storybook’s install footprint but is a good option if you want native fidelity in addition to all of the web features. Learn more below.
+
+## Using both React Native and React Native Web
+
+The easiest way to use React Native and React Native Web is to select the "Both" option when installing Storybook. This will install and create configurations for both environments, allowing you to run Storybook for both in the same project.
+
+However, you can install them separately if one version is installed. You can add a React Native Web Storybook alongside an existing React Native Storybook by running the install command and selecting "React Native Web" in the setup wizard, and vice versa.
 
 ## API
 

docs/versions/latest.json

@@ -1 +1 @@
-{"version":"9.0.9","info":{"plain":"- Angular: Update MiniCssExtractPlugin configuration for cache busting - [#31752](https://github.com/storybookjs/storybook/pull/31752), thanks @valentinpalkovic!\n- CSF: Story ComponentAnnotations['subcomponents'] to correctly use its own type for subcomponents rather than attempt to inherit from the component - [#31723](https://github.com/storybookjs/storybook/pull/31723), thanks @mihkeleidast!\n- Core: Delete shim addon packages - [#31728](https://github.com/storybookjs/storybook/pull/31728), thanks @ndelangen!\n- Core: Disable interactions debugger on composed stories to avoid cross-origin error - [#31685](https://github.com/storybookjs/storybook/pull/31685), thanks @ghengeveld!\n- Core: Fix cyclical dependency in core addons - [#31750](https://github.com/storybookjs/storybook/pull/31750), thanks @JReinhold!\n- Core: Restore original clipboard after invoking `userEvent.setup()` - [#31730](https://github.com/storybookjs/storybook/pull/31730), thanks @ghengeveld!\n- Next.js: Add webpack alias to resolve Next.js package conflicts - [#31755](https://github.com/storybookjs/storybook/pull/31755), thanks @valentinpalkovic!\n- Next.js: Enhance Vite configuration with styled-jsx aliasing - [#31757](https://github.com/storybookjs/storybook/pull/31757), thanks @valentinpalkovic!"}}
+{"version":"9.0.10","info":{"plain":"- CLI: Add RN/RNW \\\"both\\\" init option - [#31778](https://github.com/storybookjs/storybook/pull/31778), thanks @shilman!\n- Nextjs-Vite: Use tsconfig paths plugin - [#31764](https://github.com/storybookjs/storybook/pull/31764), thanks @kasperpeulen!"}}