From bd1015ba36e0e3fefa3a5c6f16cd6872ec30ab22 Mon Sep 17 00:00:00 2001 From: Kasper Peulen Date: Fri, 13 Jun 2025 10:07:21 +0200 Subject: [PATCH 1/3] Merge pull request #31764 from storybookjs/kasper/tsconfig-paths-vite-nextjs Nextjs-Vite: Use tsconfig paths plugin (cherry picked from commit d36aab550727614ef91f09db78b8b838fab60096) --- code/frameworks/nextjs-vite/package.json | 2 +- code/yarn.lock | 13 +++++++------ 2 files changed, 8 insertions(+), 7 deletions(-) diff --git a/code/frameworks/nextjs-vite/package.json b/code/frameworks/nextjs-vite/package.json index 2567c4d18f01..fbcd22bd71e0 100644 --- a/code/frameworks/nextjs-vite/package.json +++ b/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", diff --git a/code/yarn.lock b/code/yarn.lock index 3090bb2b81ee..1686bc4e510f 100644 --- a/code/yarn.lock +++ b/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 From c0a9a6a142272f53726f358d04476c0464cd336d Mon Sep 17 00:00:00 2001 From: Michael Shilman Date: Sun, 15 Jun 2025 16:39:21 +0800 Subject: [PATCH 2/3] Merge pull request #31778 from storybookjs/shilman/cli-rn-rnw-both-option CLI: Add RN/RNW "both" init option (cherry picked from commit ae63ac4360a05a4abc2154252ca5e6c4d4c82f3f) --- code/core/src/cli/project_types.ts | 1 + code/lib/create-storybook/src/initiate.ts | 29 +++++++++++++++---- .../frameworks/react-native-web-vite.mdx | 10 ++++++- 3 files changed, 34 insertions(+), 6 deletions(-) diff --git a/code/core/src/cli/project_types.ts b/code/core/src/cli/project_types.ts index 22879ee9813d..49c78486b4f9 100644 --- a/code/core/src/cli/project_types.ts +++ b/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', diff --git a/code/lib/create-storybook/src/initiate.ts b/code/lib/create-storybook/src/initiate.ts index 60b9f856e575..2a5d3a2f4394 100644 --- a/code/lib/create-storybook/src/initiate.ts +++ b/code/lib/create-storybook/src/initiate.ts @@ -111,6 +111,12 @@ const installStorybook = async ( ); } + 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 }; } diff --git a/docs/get-started/frameworks/react-native-web-vite.mdx b/docs/get-started/frameworks/react-native-web-vite.mdx index 73c19eba6050..70b79617d7fb 100644 --- a/docs/get-started/frameworks/react-native-web-vite.mdx +++ b/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 From 235aa882b8cc58fe22f966ba97daf2c7485fe2d6 Mon Sep 17 00:00:00 2001 From: storybook-bot <32066757+storybook-bot@users.noreply.github.com> Date: Sun, 15 Jun 2025 08:41:54 +0000 Subject: [PATCH 3/3] Write changelog for 9.0.10 [skip ci] --- CHANGELOG.md | 5 +++++ code/package.json | 3 ++- docs/versions/latest.json | 2 +- 3 files changed, 8 insertions(+), 2 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 7e1f385b5bb1..603802b533c3 100644 --- a/CHANGELOG.md +++ b/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! diff --git a/code/package.json b/code/package.json index 1c59c1b29f81..921cf1d93f43 100644 --- a/code/package.json +++ b/code/package.json @@ -283,5 +283,6 @@ "Dependency Upgrades" ] ] - } + }, + "deferredNextVersion": "9.0.10" } diff --git a/docs/versions/latest.json b/docs/versions/latest.json index c8d273b92020..7466cfad1dda 100644 --- a/docs/versions/latest.json +++ b/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!"}}