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/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/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/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/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/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 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 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!"}}