From f79e8b2c985ed4afd60903568f87f0a8a9146d4b Mon Sep 17 00:00:00 2001 From: Valentin Palkovic Date: Fri, 28 Mar 2025 09:28:48 +0100 Subject: [PATCH 1/4] Next.js-Vite: Stabilizing `@storybook/experimental-nextjs-vite` --- MIGRATION.md | 25 +++++++++ code/addons/test/src/constants.ts | 2 +- code/addons/test/src/postinstall.ts | 24 ++++----- code/addons/test/src/preset.ts | 2 +- .../builders/builder-vite/src/optimizeDeps.ts | 2 +- code/core/src/cli/helpers.ts | 2 +- .../src/common/utils/framework-to-renderer.ts | 2 +- .../src/common/utils/get-storybook-info.ts | 2 +- code/core/src/common/versions.ts | 2 +- code/core/src/types/modules/frameworks.ts | 2 +- .../.eslintrc.json | 0 .../README.md | 0 .../package.json | 4 +- .../preset.js | 0 .../project.json | 2 +- .../src/config/preview.ts | 0 .../src/export-mocks/cache/index.ts | 0 .../compatibility/draft-mode.compat.ts | 0 .../src/export-mocks/headers/cookies.ts | 2 +- .../src/export-mocks/headers/headers.ts | 0 .../src/export-mocks/headers/index.ts | 0 .../src/export-mocks/navigation/index.ts | 0 .../src/export-mocks/router/index.ts | 0 .../src/head-manager/decorator.tsx | 0 .../head-manager/head-manager-provider.tsx | 0 .../src/images/decorator.tsx | 0 .../src/index.ts | 2 +- .../src/node/index.ts | 0 .../src/portable-stories.ts | 6 +-- .../src/preset.ts | 2 +- .../src/preview.tsx | 4 +- .../src/routing/app-router-provider.tsx | 2 +- .../src/routing/decorator.tsx | 0 .../src/routing/page-router-provider.tsx | 2 +- .../src/routing/types.tsx | 0 .../src/styledJsx/decorator.tsx | 0 .../src/types.ts | 2 +- .../src/typings.d.ts | 0 .../src/vite-plugin/index.ts | 0 .../template/cli/.eslintrc.json | 0 .../template/cli/js/Button.jsx | 0 .../template/cli/js/Button.stories.js | 0 .../template/cli/js/Configure.mdx | 0 .../template/cli/js/Header.jsx | 0 .../template/cli/js/Header.stories.js | 0 .../template/cli/js/Page.jsx | 0 .../template/cli/js/Page.stories.js | 0 .../template/cli/ts-4-9/Button.stories.ts | 2 +- .../template/cli/ts-4-9/Button.tsx | 0 .../template/cli/ts-4-9/Configure.mdx | 0 .../template/cli/ts-4-9/Header.stories.ts | 2 +- .../template/cli/ts-4-9/Header.tsx | 0 .../template/cli/ts-4-9/Page.stories.ts | 2 +- .../template/cli/ts-4-9/Page.tsx | 0 .../template/next-env.d.ts | 0 .../stories/DynamicImport.stories.tsx | 2 +- .../template/stories/DynamicImport.tsx | 0 .../template/stories/Font.stories.tsx | 2 +- .../template/stories/Font.tsx | 0 .../stories/GetImageProps.stories.tsx | 2 +- .../template/stories/Head.stories.tsx | 4 +- .../template/stories/Image.stories.tsx | 2 +- .../template/stories/ImageLegacy.stories.tsx | 2 +- .../template/stories/Link.stories.module.css | 0 .../template/stories/Link.stories.tsx | 2 +- .../template/stories/Navigation.stories.tsx | 4 +- .../template/stories/NextHeader.stories.tsx | 6 +-- .../template/stories/NextHeader.tsx | 0 .../template/stories/RSC.stories.tsx | 2 +- .../template/stories/RSC.tsx | 0 .../template/stories/Redirect.stories.tsx | 2 +- .../template/stories/Router.stories.tsx | 4 +- .../stories/ServerActions.stories.tsx | 8 +-- .../template/stories/ServerActions.tsx | 0 .../template/stories/StyledJsx.stories.tsx | 2 +- .../template/stories/fonts/OFL.txt | 0 .../stories/fonts/RubikStorm-Regular.ttf | Bin .../template/typings.d.ts | 0 .../tsconfig.json | 0 .../vitest.config.ts | 0 .../cli-storybook/src/sandbox-templates.ts | 22 +++----- .../create-storybook/src/bin/modernInputs.ts | 6 +-- .../src/ink/steps/checks/frameworkTest.tsx | 6 +-- .../project.json | 4 +- code/yarn.lock | 48 +++++++++--------- docs/api/csf/csf-factories.mdx | 8 +-- .../portable-stories-vitest.mdx | 2 +- docs/get-started/frameworks/nextjs.mdx | 8 +-- docs/writing-tests/test-addon.mdx | 2 +- scripts/tasks/sandbox-parts.ts | 2 +- scripts/tasks/sandbox.ts | 2 +- 91 files changed, 133 insertions(+), 120 deletions(-) rename code/frameworks/{experimental-nextjs-vite => nextjs-vite}/.eslintrc.json (100%) rename code/frameworks/{experimental-nextjs-vite => nextjs-vite}/README.md (100%) rename code/frameworks/{experimental-nextjs-vite => nextjs-vite}/package.json (97%) rename code/frameworks/{experimental-nextjs-vite => nextjs-vite}/preset.js (100%) rename code/frameworks/{experimental-nextjs-vite => nextjs-vite}/project.json (77%) rename code/frameworks/{experimental-nextjs-vite => nextjs-vite}/src/config/preview.ts (100%) rename code/frameworks/{experimental-nextjs-vite => nextjs-vite}/src/export-mocks/cache/index.ts (100%) rename code/frameworks/{experimental-nextjs-vite => nextjs-vite}/src/export-mocks/compatibility/draft-mode.compat.ts (100%) rename code/frameworks/{experimental-nextjs-vite => nextjs-vite}/src/export-mocks/headers/cookies.ts (94%) rename code/frameworks/{experimental-nextjs-vite => nextjs-vite}/src/export-mocks/headers/headers.ts (100%) rename code/frameworks/{experimental-nextjs-vite => nextjs-vite}/src/export-mocks/headers/index.ts (100%) rename code/frameworks/{experimental-nextjs-vite => nextjs-vite}/src/export-mocks/navigation/index.ts (100%) rename code/frameworks/{experimental-nextjs-vite => nextjs-vite}/src/export-mocks/router/index.ts (100%) rename code/frameworks/{experimental-nextjs-vite => nextjs-vite}/src/head-manager/decorator.tsx (100%) rename code/frameworks/{experimental-nextjs-vite => nextjs-vite}/src/head-manager/head-manager-provider.tsx (100%) rename code/frameworks/{experimental-nextjs-vite => nextjs-vite}/src/images/decorator.tsx (100%) rename code/frameworks/{experimental-nextjs-vite => nextjs-vite}/src/index.ts (93%) rename code/frameworks/{experimental-nextjs-vite => nextjs-vite}/src/node/index.ts (100%) rename code/frameworks/{experimental-nextjs-vite => nextjs-vite}/src/portable-stories.ts (95%) rename code/frameworks/{experimental-nextjs-vite => nextjs-vite}/src/preset.ts (94%) rename code/frameworks/{experimental-nextjs-vite => nextjs-vite}/src/preview.tsx (94%) rename code/frameworks/{experimental-nextjs-vite => nextjs-vite}/src/routing/app-router-provider.tsx (98%) rename code/frameworks/{experimental-nextjs-vite => nextjs-vite}/src/routing/decorator.tsx (100%) rename code/frameworks/{experimental-nextjs-vite => nextjs-vite}/src/routing/page-router-provider.tsx (90%) rename code/frameworks/{experimental-nextjs-vite => nextjs-vite}/src/routing/types.tsx (100%) rename code/frameworks/{experimental-nextjs-vite => nextjs-vite}/src/styledJsx/decorator.tsx (100%) rename code/frameworks/{experimental-nextjs-vite => nextjs-vite}/src/types.ts (95%) rename code/frameworks/{experimental-nextjs-vite => nextjs-vite}/src/typings.d.ts (100%) rename code/frameworks/{experimental-nextjs-vite => nextjs-vite}/src/vite-plugin/index.ts (100%) rename code/frameworks/{experimental-nextjs-vite => nextjs-vite}/template/cli/.eslintrc.json (100%) rename code/frameworks/{experimental-nextjs-vite => nextjs-vite}/template/cli/js/Button.jsx (100%) rename code/frameworks/{experimental-nextjs-vite => nextjs-vite}/template/cli/js/Button.stories.js (100%) rename code/frameworks/{experimental-nextjs-vite => nextjs-vite}/template/cli/js/Configure.mdx (100%) rename code/frameworks/{experimental-nextjs-vite => nextjs-vite}/template/cli/js/Header.jsx (100%) rename code/frameworks/{experimental-nextjs-vite => nextjs-vite}/template/cli/js/Header.stories.js (100%) rename code/frameworks/{experimental-nextjs-vite => nextjs-vite}/template/cli/js/Page.jsx (100%) rename code/frameworks/{experimental-nextjs-vite => nextjs-vite}/template/cli/js/Page.stories.js (100%) rename code/frameworks/{experimental-nextjs-vite => nextjs-vite}/template/cli/ts-4-9/Button.stories.ts (94%) rename code/frameworks/{experimental-nextjs-vite => nextjs-vite}/template/cli/ts-4-9/Button.tsx (100%) rename code/frameworks/{experimental-nextjs-vite => nextjs-vite}/template/cli/ts-4-9/Configure.mdx (100%) rename code/frameworks/{experimental-nextjs-vite => nextjs-vite}/template/cli/ts-4-9/Header.stories.ts (90%) rename code/frameworks/{experimental-nextjs-vite => nextjs-vite}/template/cli/ts-4-9/Header.tsx (100%) rename code/frameworks/{experimental-nextjs-vite => nextjs-vite}/template/cli/ts-4-9/Page.stories.ts (92%) rename code/frameworks/{experimental-nextjs-vite => nextjs-vite}/template/cli/ts-4-9/Page.tsx (100%) rename code/frameworks/{experimental-nextjs-vite => nextjs-vite}/template/next-env.d.ts (100%) rename code/frameworks/{experimental-nextjs-vite => nextjs-vite}/template/stories/DynamicImport.stories.tsx (86%) rename code/frameworks/{experimental-nextjs-vite => nextjs-vite}/template/stories/DynamicImport.tsx (100%) rename code/frameworks/{experimental-nextjs-vite => nextjs-vite}/template/stories/Font.stories.tsx (83%) rename code/frameworks/{experimental-nextjs-vite => nextjs-vite}/template/stories/Font.tsx (100%) rename code/frameworks/{experimental-nextjs-vite => nextjs-vite}/template/stories/GetImageProps.stories.tsx (93%) rename code/frameworks/{experimental-nextjs-vite => nextjs-vite}/template/stories/Head.stories.tsx (87%) rename code/frameworks/{experimental-nextjs-vite => nextjs-vite}/template/stories/Image.stories.tsx (98%) rename code/frameworks/{experimental-nextjs-vite => nextjs-vite}/template/stories/ImageLegacy.stories.tsx (97%) rename code/frameworks/{experimental-nextjs-vite => nextjs-vite}/template/stories/Link.stories.module.css (100%) rename code/frameworks/{experimental-nextjs-vite => nextjs-vite}/template/stories/Link.stories.tsx (96%) rename code/frameworks/{experimental-nextjs-vite => nextjs-vite}/template/stories/Navigation.stories.tsx (95%) rename code/frameworks/{experimental-nextjs-vite => nextjs-vite}/template/stories/NextHeader.stories.tsx (87%) rename code/frameworks/{experimental-nextjs-vite => nextjs-vite}/template/stories/NextHeader.tsx (100%) rename code/frameworks/{experimental-nextjs-vite => nextjs-vite}/template/stories/RSC.stories.tsx (91%) rename code/frameworks/{experimental-nextjs-vite => nextjs-vite}/template/stories/RSC.tsx (100%) rename code/frameworks/{experimental-nextjs-vite => nextjs-vite}/template/stories/Redirect.stories.tsx (95%) rename code/frameworks/{experimental-nextjs-vite => nextjs-vite}/template/stories/Router.stories.tsx (94%) rename code/frameworks/{experimental-nextjs-vite => nextjs-vite}/template/stories/ServerActions.stories.tsx (91%) rename code/frameworks/{experimental-nextjs-vite => nextjs-vite}/template/stories/ServerActions.tsx (100%) rename code/frameworks/{experimental-nextjs-vite => nextjs-vite}/template/stories/StyledJsx.stories.tsx (83%) rename code/frameworks/{experimental-nextjs-vite => nextjs-vite}/template/stories/fonts/OFL.txt (100%) rename code/frameworks/{experimental-nextjs-vite => nextjs-vite}/template/stories/fonts/RubikStorm-Regular.ttf (100%) rename code/frameworks/{experimental-nextjs-vite => nextjs-vite}/template/typings.d.ts (100%) rename code/frameworks/{experimental-nextjs-vite => nextjs-vite}/tsconfig.json (100%) rename code/frameworks/{experimental-nextjs-vite => nextjs-vite}/vitest.config.ts (100%) diff --git a/MIGRATION.md b/MIGRATION.md index 337e0ca2822..5059c4781b4 100644 --- a/MIGRATION.md +++ b/MIGRATION.md @@ -29,6 +29,7 @@ - [Framework-specific changes](#framework-specific-changes) - [Angular = Require v18 and up](#angular--require-v18-and-up) - [Next.js = Require v14 and up](#nextjs--require-v14-and-up) + - [Next.js = Vite builder stabilized](#nextjs--vite-builder-stabilized) - [From version 8.5.x to 8.6.x](#from-version-85x-to-86x) - [Angular: Support experimental zoneless support](#angular-support-experimental-zoneless-support) - [Framework-specific Vite plugins have to be explicitly added](#framework-specific-vite-plugins-have-to-be-explicitly-added) @@ -822,6 +823,30 @@ If you're using an older version of Next.js, you'll need to upgrade to Next.js 1 For help upgrading your Next.js application, see the [Next.js upgrade guide](https://nextjs.org/docs/app/building-your-application/upgrading). +#### Next.js = Vite builder stabilized + +The experimental Next.js Vite builder (`@storybook/experimental-nextjs-vite`) has been stabilized and renamed to `@storybook/nextjs-vite`. If you were using the experimental package, you should update your dependencies to use the new stable package name. + +```diff +{ + "dependencies": { +- "@storybook/experimental-nextjs-vite": "^x.x.x" ++ "@storybook/nextjs-vite": "^9.0.0" + } +} +``` + +Also update your `.storybook/main.` file accordingly: + +```diff +export default { + addons: [ +- "@storybook/experimental-nextjs-vite", ++ "@storybook/nextjs-vite" + ] +} +``` + ## From version 8.5.x to 8.6.x ### Angular: Support experimental zoneless support diff --git a/code/addons/test/src/constants.ts b/code/addons/test/src/constants.ts index d1296c1b1bf..7e756b86f5a 100644 --- a/code/addons/test/src/constants.ts +++ b/code/addons/test/src/constants.ts @@ -14,7 +14,7 @@ export const COVERAGE_DIRECTORY = 'coverage'; export const SUPPORTED_FRAMEWORKS = [ '@storybook/nextjs', - '@storybook/experimental-nextjs-vite', + '@storybook/nextjs-vite', '@storybook/sveltekit', ]; diff --git a/code/addons/test/src/postinstall.ts b/code/addons/test/src/postinstall.ts index 4cb0b9b354a..d40dddd64ea 100644 --- a/code/addons/test/src/postinstall.ts +++ b/code/addons/test/src/postinstall.ts @@ -72,12 +72,12 @@ export default async function postInstall(options: PostinstallOptions) { if (info.frameworkPackageName === '@storybook/nextjs' && !hasCustomWebpackConfig) { const out = options.yes || !isInteractive - ? { migrateToExperimentalNextjsVite: !!options.yes } + ? { migrateToNextjsVite: !!options.yes } : await prompts({ type: 'confirm', - name: 'migrateToExperimentalNextjsVite', + name: 'migrateToNextjsVite', message: dedent` - The addon requires the use of @storybook/experimental-nextjs-vite to work with Next.js. + The addon requires the use of @storybook/nextjs-vite to work with Next.js. https://storybook.js.org/docs/writing-tests/test-addon#install-and-set-up Do you want to migrate? @@ -85,9 +85,9 @@ export default async function postInstall(options: PostinstallOptions) { initial: true, }); - if (out.migrateToExperimentalNextjsVite) { + if (out.migrateToNextjsVite) { await packageManager.addDependencies({ installAsDevDependencies: true }, [ - `@storybook/experimental-nextjs-vite@${versions['@storybook/experimental-nextjs-vite']}`, + `@storybook/nextjs-vite@${versions['@storybook/nextjs-vite']}`, ]); await packageManager.removeDependencies({}, ['@storybook/nextjs']); @@ -96,21 +96,21 @@ export default async function postInstall(options: PostinstallOptions) { traverse(config._ast, { StringLiteral(path) { if (path.node.value === '@storybook/nextjs') { - path.node.value = '@storybook/experimental-nextjs-vite'; + path.node.value = '@storybook/nextjs-vite'; } }, }); await writeConfig(config, mainJsPath); - info.frameworkPackageName = '@storybook/experimental-nextjs-vite'; + info.frameworkPackageName = '@storybook/nextjs-vite'; info.builderPackageName = '@storybook/builder-vite'; } } const annotationsImport = SUPPORTED_FRAMEWORKS.includes(info.frameworkPackageName) ? info.frameworkPackageName === '@storybook/nextjs' - ? '@storybook/experimental-nextjs-vite' + ? '@storybook/nextjs-vite' : info.frameworkPackageName : info.rendererPackageName && SUPPORTED_RENDERERS.includes(info.rendererPackageName) ? info.rendererPackageName @@ -215,18 +215,16 @@ export default async function postInstall(options: PostinstallOptions) { dedent` It looks like you're using Next.js. - Adding ${picocolors.bold(colors.pink(`@storybook/experimental-nextjs-vite/vite-plugin`))} so you can use it with Vitest. + Adding ${picocolors.bold(colors.pink(`@storybook/nextjs-vite/vite-plugin`))} so you can use it with Vitest. More info about the plugin at ${picocolors.cyan(`https://github.com/storybookjs/vite-plugin-storybook-nextjs`)} ` ); try { const storybookVersion = await packageManager.getInstalledVersion('storybook'); - dependencies.push(`@storybook/experimental-nextjs-vite@^${storybookVersion}`); + dependencies.push(`@storybook/nextjs-vite@^${storybookVersion}`); } catch (e) { - console.error( - 'Failed to install @storybook/experimental-nextjs-vite. Please install it manually' - ); + console.error('Failed to install @storybook/nextjs-vite. Please install it manually'); } } diff --git a/code/addons/test/src/preset.ts b/code/addons/test/src/preset.ts index 17fc46dbffc..033e080024f 100644 --- a/code/addons/test/src/preset.ts +++ b/code/addons/test/src/preset.ts @@ -52,7 +52,7 @@ export const experimental_serverChannel = async (channel: Channel, options: Opti if (!builderName?.includes('vite')) { if (framework.includes('nextjs')) { log(dedent` - You're using ${framework}, which is a Webpack-based builder. In order to use Storybook Test, with your project, you need to use '@storybook/experimental-nextjs-vite', a high performance Vite-based equivalent. + You're using ${framework}, which is a Webpack-based builder. In order to use Storybook Test, with your project, you need to use '@storybook/nextjs-vite', a high performance Vite-based equivalent. Information on how to upgrade here: ${picocolors.yellow('https://storybook.js.org/docs/get-started/frameworks/nextjs#with-vite')}\n `); diff --git a/code/builders/builder-vite/src/optimizeDeps.ts b/code/builders/builder-vite/src/optimizeDeps.ts index eeab29b9106..20bb5dda0ca 100644 --- a/code/builders/builder-vite/src/optimizeDeps.ts +++ b/code/builders/builder-vite/src/optimizeDeps.ts @@ -30,7 +30,7 @@ const INCLUDE_CANDIDATES = [ '@storybook/addon-themes', '@storybook/addon-themes/preview', '@storybook/blocks', - '@storybook/experimental-nextjs-vite/dist/preview.mjs', + '@storybook/nextjs-vite/dist/preview.mjs', '@storybook/html', '@storybook/html/dist/entry-preview-docs.mjs', '@storybook/html/dist/entry-preview.mjs', diff --git a/code/core/src/cli/helpers.ts b/code/core/src/cli/helpers.ts index a6dcefb89ce..0e5bd328bbe 100644 --- a/code/core/src/cli/helpers.ts +++ b/code/core/src/cli/helpers.ts @@ -152,7 +152,7 @@ export const frameworkToDefaultBuilder: Record< 'html-webpack5': CoreBuilder.Webpack5, nextjs: CoreBuilder.Webpack5, nuxt: CoreBuilder.Vite, - 'experimental-nextjs-vite': CoreBuilder.Vite, + 'nextjs-vite': CoreBuilder.Vite, 'preact-vite': CoreBuilder.Vite, 'preact-webpack5': CoreBuilder.Webpack5, qwik: CoreBuilder.Vite, diff --git a/code/core/src/common/utils/framework-to-renderer.ts b/code/core/src/common/utils/framework-to-renderer.ts index e77434a7389..a961662afe8 100644 --- a/code/core/src/common/utils/framework-to-renderer.ts +++ b/code/core/src/common/utils/framework-to-renderer.ts @@ -11,7 +11,7 @@ export const frameworkToRenderer: Record< 'html-vite': 'html', 'html-webpack5': 'html', nextjs: 'react', - 'experimental-nextjs-vite': 'react', + 'nextjs-vite': 'react', 'preact-vite': 'preact', 'preact-webpack5': 'preact', qwik: 'qwik', diff --git a/code/core/src/common/utils/get-storybook-info.ts b/code/core/src/common/utils/get-storybook-info.ts index e9160cef489..6f51120ea7e 100644 --- a/code/core/src/common/utils/get-storybook-info.ts +++ b/code/core/src/common/utils/get-storybook-info.ts @@ -41,7 +41,7 @@ export const frameworkPackages: Record = { '@storybook/svelte-webpack5': 'svelte-webpack5', '@storybook/sveltekit': 'sveltekit', '@storybook/vue3-vite': 'vue3-vite', - '@storybook/experimental-nextjs-vite': 'experimental-nextjs-vite', + '@storybook/nextjs-vite': 'nextjs-vite', '@storybook/react-native-web-vite': 'react-native-web-vite', '@storybook/vue3-webpack5': 'vue3-webpack5', '@storybook/web-components-vite': 'web-components-vite', diff --git a/code/core/src/common/versions.ts b/code/core/src/common/versions.ts index f00d7b7323f..f525de2d638 100644 --- a/code/core/src/common/versions.ts +++ b/code/core/src/common/versions.ts @@ -19,10 +19,10 @@ export default { storybook: '9.0.0-alpha.11', '@storybook/angular': '9.0.0-alpha.11', '@storybook/ember': '9.0.0-alpha.11', - '@storybook/experimental-nextjs-vite': '9.0.0-alpha.11', '@storybook/html-vite': '9.0.0-alpha.11', '@storybook/html-webpack5': '9.0.0-alpha.11', '@storybook/nextjs': '9.0.0-alpha.11', + '@storybook/nextjs-vite': '9.0.0-alpha.11', '@storybook/preact-vite': '9.0.0-alpha.11', '@storybook/preact-webpack5': '9.0.0-alpha.11', '@storybook/react-native-web-vite': '9.0.0-alpha.11', diff --git a/code/core/src/types/modules/frameworks.ts b/code/core/src/types/modules/frameworks.ts index 8e0ec1a7eea..afc50564603 100644 --- a/code/core/src/types/modules/frameworks.ts +++ b/code/core/src/types/modules/frameworks.ts @@ -2,10 +2,10 @@ export type SupportedFrameworks = | 'angular' | 'ember' - | 'experimental-nextjs-vite' | 'html-vite' | 'html-webpack5' | 'nextjs' + | 'nextjs-vite' | 'preact-vite' | 'preact-webpack5' | 'react-native-web-vite' diff --git a/code/frameworks/experimental-nextjs-vite/.eslintrc.json b/code/frameworks/nextjs-vite/.eslintrc.json similarity index 100% rename from code/frameworks/experimental-nextjs-vite/.eslintrc.json rename to code/frameworks/nextjs-vite/.eslintrc.json diff --git a/code/frameworks/experimental-nextjs-vite/README.md b/code/frameworks/nextjs-vite/README.md similarity index 100% rename from code/frameworks/experimental-nextjs-vite/README.md rename to code/frameworks/nextjs-vite/README.md diff --git a/code/frameworks/experimental-nextjs-vite/package.json b/code/frameworks/nextjs-vite/package.json similarity index 97% rename from code/frameworks/experimental-nextjs-vite/package.json rename to code/frameworks/nextjs-vite/package.json index 0e15db5adaa..fb23f08f6c8 100644 --- a/code/frameworks/experimental-nextjs-vite/package.json +++ b/code/frameworks/nextjs-vite/package.json @@ -1,5 +1,5 @@ { - "name": "@storybook/experimental-nextjs-vite", + "name": "@storybook/nextjs-vite", "version": "9.0.0-alpha.11", "description": "Storybook for Next.js and Vite", "keywords": [ @@ -7,7 +7,7 @@ "nextjs", "vite" ], - "homepage": "https://github.com/storybookjs/storybook/tree/next/code/frameworks/experimental-nextjs-vite", + "homepage": "https://github.com/storybookjs/storybook/tree/next/code/frameworks/nextjs-vite", "bugs": { "url": "https://github.com/storybookjs/storybook/issues" }, diff --git a/code/frameworks/experimental-nextjs-vite/preset.js b/code/frameworks/nextjs-vite/preset.js similarity index 100% rename from code/frameworks/experimental-nextjs-vite/preset.js rename to code/frameworks/nextjs-vite/preset.js diff --git a/code/frameworks/experimental-nextjs-vite/project.json b/code/frameworks/nextjs-vite/project.json similarity index 77% rename from code/frameworks/experimental-nextjs-vite/project.json rename to code/frameworks/nextjs-vite/project.json index f10ef7bdacf..049a16e3417 100644 --- a/code/frameworks/experimental-nextjs-vite/project.json +++ b/code/frameworks/nextjs-vite/project.json @@ -1,5 +1,5 @@ { - "name": "experimental-nextjs-vite", + "name": "nextjs-vite", "$schema": "../../node_modules/nx/schemas/project-schema.json", "projectType": "library", "targets": { diff --git a/code/frameworks/experimental-nextjs-vite/src/config/preview.ts b/code/frameworks/nextjs-vite/src/config/preview.ts similarity index 100% rename from code/frameworks/experimental-nextjs-vite/src/config/preview.ts rename to code/frameworks/nextjs-vite/src/config/preview.ts diff --git a/code/frameworks/experimental-nextjs-vite/src/export-mocks/cache/index.ts b/code/frameworks/nextjs-vite/src/export-mocks/cache/index.ts similarity index 100% rename from code/frameworks/experimental-nextjs-vite/src/export-mocks/cache/index.ts rename to code/frameworks/nextjs-vite/src/export-mocks/cache/index.ts diff --git a/code/frameworks/experimental-nextjs-vite/src/export-mocks/compatibility/draft-mode.compat.ts b/code/frameworks/nextjs-vite/src/export-mocks/compatibility/draft-mode.compat.ts similarity index 100% rename from code/frameworks/experimental-nextjs-vite/src/export-mocks/compatibility/draft-mode.compat.ts rename to code/frameworks/nextjs-vite/src/export-mocks/compatibility/draft-mode.compat.ts diff --git a/code/frameworks/experimental-nextjs-vite/src/export-mocks/headers/cookies.ts b/code/frameworks/nextjs-vite/src/export-mocks/headers/cookies.ts similarity index 94% rename from code/frameworks/experimental-nextjs-vite/src/export-mocks/headers/cookies.ts rename to code/frameworks/nextjs-vite/src/export-mocks/headers/cookies.ts index 4697a1afb97..9264a7e191c 100644 --- a/code/frameworks/experimental-nextjs-vite/src/export-mocks/headers/cookies.ts +++ b/code/frameworks/nextjs-vite/src/export-mocks/headers/cookies.ts @@ -3,7 +3,7 @@ // is the only way to achieve it actually being a singleton // eslint-disable-next-line @typescript-eslint/ban-ts-comment // @ts-ignore we must ignore types here as during compilation they are not generated yet -import { headers } from '@storybook/experimental-nextjs-vite/headers.mock'; +import { headers } from '@storybook/nextjs-vite/headers.mock'; import { RequestCookies } from 'next/dist/compiled/@edge-runtime/cookies'; import { fn } from 'storybook/test'; diff --git a/code/frameworks/experimental-nextjs-vite/src/export-mocks/headers/headers.ts b/code/frameworks/nextjs-vite/src/export-mocks/headers/headers.ts similarity index 100% rename from code/frameworks/experimental-nextjs-vite/src/export-mocks/headers/headers.ts rename to code/frameworks/nextjs-vite/src/export-mocks/headers/headers.ts diff --git a/code/frameworks/experimental-nextjs-vite/src/export-mocks/headers/index.ts b/code/frameworks/nextjs-vite/src/export-mocks/headers/index.ts similarity index 100% rename from code/frameworks/experimental-nextjs-vite/src/export-mocks/headers/index.ts rename to code/frameworks/nextjs-vite/src/export-mocks/headers/index.ts diff --git a/code/frameworks/experimental-nextjs-vite/src/export-mocks/navigation/index.ts b/code/frameworks/nextjs-vite/src/export-mocks/navigation/index.ts similarity index 100% rename from code/frameworks/experimental-nextjs-vite/src/export-mocks/navigation/index.ts rename to code/frameworks/nextjs-vite/src/export-mocks/navigation/index.ts diff --git a/code/frameworks/experimental-nextjs-vite/src/export-mocks/router/index.ts b/code/frameworks/nextjs-vite/src/export-mocks/router/index.ts similarity index 100% rename from code/frameworks/experimental-nextjs-vite/src/export-mocks/router/index.ts rename to code/frameworks/nextjs-vite/src/export-mocks/router/index.ts diff --git a/code/frameworks/experimental-nextjs-vite/src/head-manager/decorator.tsx b/code/frameworks/nextjs-vite/src/head-manager/decorator.tsx similarity index 100% rename from code/frameworks/experimental-nextjs-vite/src/head-manager/decorator.tsx rename to code/frameworks/nextjs-vite/src/head-manager/decorator.tsx diff --git a/code/frameworks/experimental-nextjs-vite/src/head-manager/head-manager-provider.tsx b/code/frameworks/nextjs-vite/src/head-manager/head-manager-provider.tsx similarity index 100% rename from code/frameworks/experimental-nextjs-vite/src/head-manager/head-manager-provider.tsx rename to code/frameworks/nextjs-vite/src/head-manager/head-manager-provider.tsx diff --git a/code/frameworks/experimental-nextjs-vite/src/images/decorator.tsx b/code/frameworks/nextjs-vite/src/images/decorator.tsx similarity index 100% rename from code/frameworks/experimental-nextjs-vite/src/images/decorator.tsx rename to code/frameworks/nextjs-vite/src/images/decorator.tsx diff --git a/code/frameworks/experimental-nextjs-vite/src/index.ts b/code/frameworks/nextjs-vite/src/index.ts similarity index 93% rename from code/frameworks/experimental-nextjs-vite/src/index.ts rename to code/frameworks/nextjs-vite/src/index.ts index ed2829032a7..09da2fa5df6 100644 --- a/code/frameworks/experimental-nextjs-vite/src/index.ts +++ b/code/frameworks/nextjs-vite/src/index.ts @@ -15,7 +15,7 @@ export * from './types'; // eslint-disable-next-line @typescript-eslint/ban-ts-comment // @ts-ignore -declare module '@storybook/experimental-nextjs-vite/vite-plugin' { +declare module '@storybook/nextjs-vite/vite-plugin' { export const storybookNextJsPlugin: typeof vitePluginStorybookNextJs; } diff --git a/code/frameworks/experimental-nextjs-vite/src/node/index.ts b/code/frameworks/nextjs-vite/src/node/index.ts similarity index 100% rename from code/frameworks/experimental-nextjs-vite/src/node/index.ts rename to code/frameworks/nextjs-vite/src/node/index.ts diff --git a/code/frameworks/experimental-nextjs-vite/src/portable-stories.ts b/code/frameworks/nextjs-vite/src/portable-stories.ts similarity index 95% rename from code/frameworks/experimental-nextjs-vite/src/portable-stories.ts rename to code/frameworks/nextjs-vite/src/portable-stories.ts index e5a47d55ba1..ae21afa38b5 100644 --- a/code/frameworks/experimental-nextjs-vite/src/portable-stories.ts +++ b/code/frameworks/nextjs-vite/src/portable-stories.ts @@ -34,7 +34,7 @@ import * as nextJsAnnotations from './preview'; * * ```jsx * // setup-file.js - * import { setProjectAnnotations } from '@storybook/experimental-nextjs-vite'; + * import { setProjectAnnotations } from '@storybook/nextjs-vite'; * import projectAnnotations from './.storybook/preview'; * * setProjectAnnotations(projectAnnotations); @@ -70,7 +70,7 @@ const INTERNAL_DEFAULT_PROJECT_ANNOTATIONS: ProjectAnnotations = * * ```jsx * import { render } from '@testing-library/react'; - * import { composeStory } from '@storybook/experimental-nextjs-vite'; + * import { composeStory } from '@storybook/nextjs-vite'; * import Meta, { Primary as PrimaryStory } from './Button.stories'; * * const Primary = composeStory(PrimaryStory, Meta); @@ -114,7 +114,7 @@ export function composeStory( * * ```jsx * import { render } from '@testing-library/react'; - * import { composeStories } from '@storybook/experimental-nextjs-vite'; + * import { composeStories } from '@storybook/nextjs-vite'; * import * as stories from './Button.stories'; * * const { Primary, Secondary } = composeStories(stories); diff --git a/code/frameworks/experimental-nextjs-vite/src/preset.ts b/code/frameworks/nextjs-vite/src/preset.ts similarity index 94% rename from code/frameworks/experimental-nextjs-vite/src/preset.ts rename to code/frameworks/nextjs-vite/src/preset.ts index 2cbddf07f26..7583d00c8a8 100644 --- a/code/frameworks/experimental-nextjs-vite/src/preset.ts +++ b/code/frameworks/nextjs-vite/src/preset.ts @@ -29,7 +29,7 @@ export const core: PresetProperty<'core'> = async (config, options) => { }; export const previewAnnotations: PresetProperty<'previewAnnotations'> = (entry = []) => { - const nextDir = dirname(require.resolve('@storybook/experimental-nextjs-vite/package.json')); + const nextDir = dirname(require.resolve('@storybook/nextjs-vite/package.json')); const result = [...entry, join(nextDir, 'dist/preview.mjs')]; return result; }; diff --git a/code/frameworks/experimental-nextjs-vite/src/preview.tsx b/code/frameworks/nextjs-vite/src/preview.tsx similarity index 94% rename from code/frameworks/experimental-nextjs-vite/src/preview.tsx rename to code/frameworks/nextjs-vite/src/preview.tsx index 86d6629f385..e5eeaeb5367 100644 --- a/code/frameworks/experimental-nextjs-vite/src/preview.tsx +++ b/code/frameworks/nextjs-vite/src/preview.tsx @@ -6,10 +6,10 @@ import type { ReactRenderer, StoryFn } from '@storybook/react'; // eslint-disable-next-line @typescript-eslint/ban-ts-comment // @ts-ignore we must ignore types here as during compilation they are not generated yet -import { createNavigation } from '@storybook/experimental-nextjs-vite/navigation.mock'; +import { createNavigation } from '@storybook/nextjs-vite/navigation.mock'; // eslint-disable-next-line @typescript-eslint/ban-ts-comment // @ts-ignore we must ignore types here as during compilation they are not generated yet -import { createRouter } from '@storybook/experimental-nextjs-vite/router.mock'; +import { createRouter } from '@storybook/nextjs-vite/router.mock'; import { isNextRouterError } from 'next/dist/client/components/is-next-router-error'; diff --git a/code/frameworks/experimental-nextjs-vite/src/routing/app-router-provider.tsx b/code/frameworks/nextjs-vite/src/routing/app-router-provider.tsx similarity index 98% rename from code/frameworks/experimental-nextjs-vite/src/routing/app-router-provider.tsx rename to code/frameworks/nextjs-vite/src/routing/app-router-provider.tsx index eec03995d26..990a36ca97b 100644 --- a/code/frameworks/experimental-nextjs-vite/src/routing/app-router-provider.tsx +++ b/code/frameworks/nextjs-vite/src/routing/app-router-provider.tsx @@ -5,7 +5,7 @@ import React, { useMemo } from 'react'; // is the only way to achieve it actually being a singleton // eslint-disable-next-line @typescript-eslint/ban-ts-comment // @ts-ignore we must ignore types here as during compilation they are not generated yet -import { getRouter } from '@storybook/experimental-nextjs-vite/navigation.mock'; +import { getRouter } from '@storybook/nextjs-vite/navigation.mock'; import type { FlightRouterState } from 'next/dist/server/app-render/types'; import { diff --git a/code/frameworks/experimental-nextjs-vite/src/routing/decorator.tsx b/code/frameworks/nextjs-vite/src/routing/decorator.tsx similarity index 100% rename from code/frameworks/experimental-nextjs-vite/src/routing/decorator.tsx rename to code/frameworks/nextjs-vite/src/routing/decorator.tsx diff --git a/code/frameworks/experimental-nextjs-vite/src/routing/page-router-provider.tsx b/code/frameworks/nextjs-vite/src/routing/page-router-provider.tsx similarity index 90% rename from code/frameworks/experimental-nextjs-vite/src/routing/page-router-provider.tsx rename to code/frameworks/nextjs-vite/src/routing/page-router-provider.tsx index 92fb7fe5482..972ea1c2c14 100644 --- a/code/frameworks/experimental-nextjs-vite/src/routing/page-router-provider.tsx +++ b/code/frameworks/nextjs-vite/src/routing/page-router-provider.tsx @@ -6,7 +6,7 @@ import React from 'react'; // is the only way to achieve it actually being a singleton // eslint-disable-next-line @typescript-eslint/ban-ts-comment // @ts-ignore we must ignore types here as during compilation they are not generated yet -import { getRouter } from '@storybook/experimental-nextjs-vite/router.mock'; +import { getRouter } from '@storybook/nextjs-vite/router.mock'; import { RouterContext } from 'next/dist/shared/lib/router-context.shared-runtime'; diff --git a/code/frameworks/experimental-nextjs-vite/src/routing/types.tsx b/code/frameworks/nextjs-vite/src/routing/types.tsx similarity index 100% rename from code/frameworks/experimental-nextjs-vite/src/routing/types.tsx rename to code/frameworks/nextjs-vite/src/routing/types.tsx diff --git a/code/frameworks/experimental-nextjs-vite/src/styledJsx/decorator.tsx b/code/frameworks/nextjs-vite/src/styledJsx/decorator.tsx similarity index 100% rename from code/frameworks/experimental-nextjs-vite/src/styledJsx/decorator.tsx rename to code/frameworks/nextjs-vite/src/styledJsx/decorator.tsx diff --git a/code/frameworks/experimental-nextjs-vite/src/types.ts b/code/frameworks/nextjs-vite/src/types.ts similarity index 95% rename from code/frameworks/experimental-nextjs-vite/src/types.ts rename to code/frameworks/nextjs-vite/src/types.ts index f9e5659d423..29e290ff71f 100644 --- a/code/frameworks/experimental-nextjs-vite/src/types.ts +++ b/code/frameworks/nextjs-vite/src/types.ts @@ -5,7 +5,7 @@ import type { StorybookConfig as StorybookConfigReactVite } from '@storybook/rea import type { NextRouter } from 'next/router'; -type FrameworkName = CompatibleString<'@storybook/experimental-nextjs-vite'>; +type FrameworkName = CompatibleString<'@storybook/nextjs-vite'>; type BuilderName = CompatibleString<'@storybook/builder-vite'>; export type FrameworkOptions = { diff --git a/code/frameworks/experimental-nextjs-vite/src/typings.d.ts b/code/frameworks/nextjs-vite/src/typings.d.ts similarity index 100% rename from code/frameworks/experimental-nextjs-vite/src/typings.d.ts rename to code/frameworks/nextjs-vite/src/typings.d.ts diff --git a/code/frameworks/experimental-nextjs-vite/src/vite-plugin/index.ts b/code/frameworks/nextjs-vite/src/vite-plugin/index.ts similarity index 100% rename from code/frameworks/experimental-nextjs-vite/src/vite-plugin/index.ts rename to code/frameworks/nextjs-vite/src/vite-plugin/index.ts diff --git a/code/frameworks/experimental-nextjs-vite/template/cli/.eslintrc.json b/code/frameworks/nextjs-vite/template/cli/.eslintrc.json similarity index 100% rename from code/frameworks/experimental-nextjs-vite/template/cli/.eslintrc.json rename to code/frameworks/nextjs-vite/template/cli/.eslintrc.json diff --git a/code/frameworks/experimental-nextjs-vite/template/cli/js/Button.jsx b/code/frameworks/nextjs-vite/template/cli/js/Button.jsx similarity index 100% rename from code/frameworks/experimental-nextjs-vite/template/cli/js/Button.jsx rename to code/frameworks/nextjs-vite/template/cli/js/Button.jsx diff --git a/code/frameworks/experimental-nextjs-vite/template/cli/js/Button.stories.js b/code/frameworks/nextjs-vite/template/cli/js/Button.stories.js similarity index 100% rename from code/frameworks/experimental-nextjs-vite/template/cli/js/Button.stories.js rename to code/frameworks/nextjs-vite/template/cli/js/Button.stories.js diff --git a/code/frameworks/experimental-nextjs-vite/template/cli/js/Configure.mdx b/code/frameworks/nextjs-vite/template/cli/js/Configure.mdx similarity index 100% rename from code/frameworks/experimental-nextjs-vite/template/cli/js/Configure.mdx rename to code/frameworks/nextjs-vite/template/cli/js/Configure.mdx diff --git a/code/frameworks/experimental-nextjs-vite/template/cli/js/Header.jsx b/code/frameworks/nextjs-vite/template/cli/js/Header.jsx similarity index 100% rename from code/frameworks/experimental-nextjs-vite/template/cli/js/Header.jsx rename to code/frameworks/nextjs-vite/template/cli/js/Header.jsx diff --git a/code/frameworks/experimental-nextjs-vite/template/cli/js/Header.stories.js b/code/frameworks/nextjs-vite/template/cli/js/Header.stories.js similarity index 100% rename from code/frameworks/experimental-nextjs-vite/template/cli/js/Header.stories.js rename to code/frameworks/nextjs-vite/template/cli/js/Header.stories.js diff --git a/code/frameworks/experimental-nextjs-vite/template/cli/js/Page.jsx b/code/frameworks/nextjs-vite/template/cli/js/Page.jsx similarity index 100% rename from code/frameworks/experimental-nextjs-vite/template/cli/js/Page.jsx rename to code/frameworks/nextjs-vite/template/cli/js/Page.jsx diff --git a/code/frameworks/experimental-nextjs-vite/template/cli/js/Page.stories.js b/code/frameworks/nextjs-vite/template/cli/js/Page.stories.js similarity index 100% rename from code/frameworks/experimental-nextjs-vite/template/cli/js/Page.stories.js rename to code/frameworks/nextjs-vite/template/cli/js/Page.stories.js diff --git a/code/frameworks/experimental-nextjs-vite/template/cli/ts-4-9/Button.stories.ts b/code/frameworks/nextjs-vite/template/cli/ts-4-9/Button.stories.ts similarity index 94% rename from code/frameworks/experimental-nextjs-vite/template/cli/ts-4-9/Button.stories.ts rename to code/frameworks/nextjs-vite/template/cli/ts-4-9/Button.stories.ts index 6a6779580f9..577870f8e58 100644 --- a/code/frameworks/experimental-nextjs-vite/template/cli/ts-4-9/Button.stories.ts +++ b/code/frameworks/nextjs-vite/template/cli/ts-4-9/Button.stories.ts @@ -1,4 +1,4 @@ -import type { Meta, StoryObj } from '@storybook/experimental-nextjs-vite'; +import type { Meta, StoryObj } from '@storybook/nextjs-vite'; import { fn } from 'storybook/test'; diff --git a/code/frameworks/experimental-nextjs-vite/template/cli/ts-4-9/Button.tsx b/code/frameworks/nextjs-vite/template/cli/ts-4-9/Button.tsx similarity index 100% rename from code/frameworks/experimental-nextjs-vite/template/cli/ts-4-9/Button.tsx rename to code/frameworks/nextjs-vite/template/cli/ts-4-9/Button.tsx diff --git a/code/frameworks/experimental-nextjs-vite/template/cli/ts-4-9/Configure.mdx b/code/frameworks/nextjs-vite/template/cli/ts-4-9/Configure.mdx similarity index 100% rename from code/frameworks/experimental-nextjs-vite/template/cli/ts-4-9/Configure.mdx rename to code/frameworks/nextjs-vite/template/cli/ts-4-9/Configure.mdx diff --git a/code/frameworks/experimental-nextjs-vite/template/cli/ts-4-9/Header.stories.ts b/code/frameworks/nextjs-vite/template/cli/ts-4-9/Header.stories.ts similarity index 90% rename from code/frameworks/experimental-nextjs-vite/template/cli/ts-4-9/Header.stories.ts rename to code/frameworks/nextjs-vite/template/cli/ts-4-9/Header.stories.ts index 3e99df69003..29fff1ec51d 100644 --- a/code/frameworks/experimental-nextjs-vite/template/cli/ts-4-9/Header.stories.ts +++ b/code/frameworks/nextjs-vite/template/cli/ts-4-9/Header.stories.ts @@ -1,4 +1,4 @@ -import type { Meta, StoryObj } from '@storybook/experimental-nextjs-vite'; +import type { Meta, StoryObj } from '@storybook/nextjs-vite'; import { fn } from 'storybook/test'; diff --git a/code/frameworks/experimental-nextjs-vite/template/cli/ts-4-9/Header.tsx b/code/frameworks/nextjs-vite/template/cli/ts-4-9/Header.tsx similarity index 100% rename from code/frameworks/experimental-nextjs-vite/template/cli/ts-4-9/Header.tsx rename to code/frameworks/nextjs-vite/template/cli/ts-4-9/Header.tsx diff --git a/code/frameworks/experimental-nextjs-vite/template/cli/ts-4-9/Page.stories.ts b/code/frameworks/nextjs-vite/template/cli/ts-4-9/Page.stories.ts similarity index 92% rename from code/frameworks/experimental-nextjs-vite/template/cli/ts-4-9/Page.stories.ts rename to code/frameworks/nextjs-vite/template/cli/ts-4-9/Page.stories.ts index fcdcca74580..cef1f925b7c 100644 --- a/code/frameworks/experimental-nextjs-vite/template/cli/ts-4-9/Page.stories.ts +++ b/code/frameworks/nextjs-vite/template/cli/ts-4-9/Page.stories.ts @@ -1,4 +1,4 @@ -import type { Meta, StoryObj } from '@storybook/experimental-nextjs-vite'; +import type { Meta, StoryObj } from '@storybook/nextjs-vite'; import { expect, userEvent, within } from 'storybook/test'; diff --git a/code/frameworks/experimental-nextjs-vite/template/cli/ts-4-9/Page.tsx b/code/frameworks/nextjs-vite/template/cli/ts-4-9/Page.tsx similarity index 100% rename from code/frameworks/experimental-nextjs-vite/template/cli/ts-4-9/Page.tsx rename to code/frameworks/nextjs-vite/template/cli/ts-4-9/Page.tsx diff --git a/code/frameworks/experimental-nextjs-vite/template/next-env.d.ts b/code/frameworks/nextjs-vite/template/next-env.d.ts similarity index 100% rename from code/frameworks/experimental-nextjs-vite/template/next-env.d.ts rename to code/frameworks/nextjs-vite/template/next-env.d.ts diff --git a/code/frameworks/experimental-nextjs-vite/template/stories/DynamicImport.stories.tsx b/code/frameworks/nextjs-vite/template/stories/DynamicImport.stories.tsx similarity index 86% rename from code/frameworks/experimental-nextjs-vite/template/stories/DynamicImport.stories.tsx rename to code/frameworks/nextjs-vite/template/stories/DynamicImport.stories.tsx index ecc6eddfbba..7b44d1f9adc 100644 --- a/code/frameworks/experimental-nextjs-vite/template/stories/DynamicImport.stories.tsx +++ b/code/frameworks/nextjs-vite/template/stories/DynamicImport.stories.tsx @@ -1,6 +1,6 @@ import React, { Suspense } from 'react'; -import type { Meta, StoryObj } from '@storybook/experimental-nextjs-vite'; +import type { Meta, StoryObj } from '@storybook/nextjs-vite'; import dynamic from 'next/dynamic'; diff --git a/code/frameworks/experimental-nextjs-vite/template/stories/DynamicImport.tsx b/code/frameworks/nextjs-vite/template/stories/DynamicImport.tsx similarity index 100% rename from code/frameworks/experimental-nextjs-vite/template/stories/DynamicImport.tsx rename to code/frameworks/nextjs-vite/template/stories/DynamicImport.tsx diff --git a/code/frameworks/experimental-nextjs-vite/template/stories/Font.stories.tsx b/code/frameworks/nextjs-vite/template/stories/Font.stories.tsx similarity index 83% rename from code/frameworks/experimental-nextjs-vite/template/stories/Font.stories.tsx rename to code/frameworks/nextjs-vite/template/stories/Font.stories.tsx index 2287970d604..5dc6759f6bd 100644 --- a/code/frameworks/experimental-nextjs-vite/template/stories/Font.stories.tsx +++ b/code/frameworks/nextjs-vite/template/stories/Font.stories.tsx @@ -1,4 +1,4 @@ -import type { Meta, StoryObj } from '@storybook/experimental-nextjs-vite'; +import type { Meta, StoryObj } from '@storybook/nextjs-vite'; import Font from './Font'; diff --git a/code/frameworks/experimental-nextjs-vite/template/stories/Font.tsx b/code/frameworks/nextjs-vite/template/stories/Font.tsx similarity index 100% rename from code/frameworks/experimental-nextjs-vite/template/stories/Font.tsx rename to code/frameworks/nextjs-vite/template/stories/Font.tsx diff --git a/code/frameworks/experimental-nextjs-vite/template/stories/GetImageProps.stories.tsx b/code/frameworks/nextjs-vite/template/stories/GetImageProps.stories.tsx similarity index 93% rename from code/frameworks/experimental-nextjs-vite/template/stories/GetImageProps.stories.tsx rename to code/frameworks/nextjs-vite/template/stories/GetImageProps.stories.tsx index f23e61872c4..109044f37ee 100644 --- a/code/frameworks/experimental-nextjs-vite/template/stories/GetImageProps.stories.tsx +++ b/code/frameworks/nextjs-vite/template/stories/GetImageProps.stories.tsx @@ -1,6 +1,6 @@ import React from 'react'; -import type { Meta, StoryObj } from '@storybook/experimental-nextjs-vite'; +import type { Meta, StoryObj } from '@storybook/nextjs-vite'; import { type ImageProps, getImageProps } from 'next/image'; diff --git a/code/frameworks/experimental-nextjs-vite/template/stories/Head.stories.tsx b/code/frameworks/nextjs-vite/template/stories/Head.stories.tsx similarity index 87% rename from code/frameworks/experimental-nextjs-vite/template/stories/Head.stories.tsx rename to code/frameworks/nextjs-vite/template/stories/Head.stories.tsx index 3ba0228887f..0bcd1a71ef8 100644 --- a/code/frameworks/experimental-nextjs-vite/template/stories/Head.stories.tsx +++ b/code/frameworks/nextjs-vite/template/stories/Head.stories.tsx @@ -1,7 +1,7 @@ import React from 'react'; -import type { Meta } from '@storybook/experimental-nextjs-vite'; -import type { StoryObj } from '@storybook/experimental-nextjs-vite'; +import type { Meta } from '@storybook/nextjs-vite'; +import type { StoryObj } from '@storybook/nextjs-vite'; import Head from 'next/head'; import { expect, waitFor } from 'storybook/test'; diff --git a/code/frameworks/experimental-nextjs-vite/template/stories/Image.stories.tsx b/code/frameworks/nextjs-vite/template/stories/Image.stories.tsx similarity index 98% rename from code/frameworks/experimental-nextjs-vite/template/stories/Image.stories.tsx rename to code/frameworks/nextjs-vite/template/stories/Image.stories.tsx index 1c9e1235c14..d02114095a7 100644 --- a/code/frameworks/experimental-nextjs-vite/template/stories/Image.stories.tsx +++ b/code/frameworks/nextjs-vite/template/stories/Image.stories.tsx @@ -1,6 +1,6 @@ import React, { useRef, useState } from 'react'; -import type { Meta, StoryObj } from '@storybook/experimental-nextjs-vite'; +import type { Meta, StoryObj } from '@storybook/nextjs-vite'; import Image from 'next/image'; diff --git a/code/frameworks/experimental-nextjs-vite/template/stories/ImageLegacy.stories.tsx b/code/frameworks/nextjs-vite/template/stories/ImageLegacy.stories.tsx similarity index 97% rename from code/frameworks/experimental-nextjs-vite/template/stories/ImageLegacy.stories.tsx rename to code/frameworks/nextjs-vite/template/stories/ImageLegacy.stories.tsx index 00752e97ced..6d1b55094f7 100644 --- a/code/frameworks/experimental-nextjs-vite/template/stories/ImageLegacy.stories.tsx +++ b/code/frameworks/nextjs-vite/template/stories/ImageLegacy.stories.tsx @@ -1,6 +1,6 @@ import React from 'react'; -import type { Meta, StoryObj } from '@storybook/experimental-nextjs-vite'; +import type { Meta, StoryObj } from '@storybook/nextjs-vite'; import Image from 'next/legacy/image'; diff --git a/code/frameworks/experimental-nextjs-vite/template/stories/Link.stories.module.css b/code/frameworks/nextjs-vite/template/stories/Link.stories.module.css similarity index 100% rename from code/frameworks/experimental-nextjs-vite/template/stories/Link.stories.module.css rename to code/frameworks/nextjs-vite/template/stories/Link.stories.module.css diff --git a/code/frameworks/experimental-nextjs-vite/template/stories/Link.stories.tsx b/code/frameworks/nextjs-vite/template/stories/Link.stories.tsx similarity index 96% rename from code/frameworks/experimental-nextjs-vite/template/stories/Link.stories.tsx rename to code/frameworks/nextjs-vite/template/stories/Link.stories.tsx index ae599692733..7695461d7c5 100644 --- a/code/frameworks/experimental-nextjs-vite/template/stories/Link.stories.tsx +++ b/code/frameworks/nextjs-vite/template/stories/Link.stories.tsx @@ -1,6 +1,6 @@ import React from 'react'; -import type { Meta, StoryObj } from '@storybook/experimental-nextjs-vite'; +import type { Meta, StoryObj } from '@storybook/nextjs-vite'; import Link from 'next/link'; diff --git a/code/frameworks/experimental-nextjs-vite/template/stories/Navigation.stories.tsx b/code/frameworks/nextjs-vite/template/stories/Navigation.stories.tsx similarity index 95% rename from code/frameworks/experimental-nextjs-vite/template/stories/Navigation.stories.tsx rename to code/frameworks/nextjs-vite/template/stories/Navigation.stories.tsx index 92f07126ee0..58fd1853eba 100644 --- a/code/frameworks/experimental-nextjs-vite/template/stories/Navigation.stories.tsx +++ b/code/frameworks/nextjs-vite/template/stories/Navigation.stories.tsx @@ -1,7 +1,7 @@ import React from 'react'; -import type { Meta, StoryObj } from '@storybook/experimental-nextjs-vite'; -import { getRouter } from '@storybook/experimental-nextjs-vite/navigation.mock'; +import type { Meta, StoryObj } from '@storybook/nextjs-vite'; +import { getRouter } from '@storybook/nextjs-vite/navigation.mock'; import { useParams, diff --git a/code/frameworks/experimental-nextjs-vite/template/stories/NextHeader.stories.tsx b/code/frameworks/nextjs-vite/template/stories/NextHeader.stories.tsx similarity index 87% rename from code/frameworks/experimental-nextjs-vite/template/stories/NextHeader.stories.tsx rename to code/frameworks/nextjs-vite/template/stories/NextHeader.stories.tsx index d6b464df5c1..40cb3dd52b1 100644 --- a/code/frameworks/experimental-nextjs-vite/template/stories/NextHeader.stories.tsx +++ b/code/frameworks/nextjs-vite/template/stories/NextHeader.stories.tsx @@ -1,6 +1,6 @@ -import type { Meta } from '@storybook/experimental-nextjs-vite'; -import type { StoryObj } from '@storybook/experimental-nextjs-vite'; -import { cookies, headers } from '@storybook/experimental-nextjs-vite/headers.mock'; +import type { Meta } from '@storybook/nextjs-vite'; +import type { StoryObj } from '@storybook/nextjs-vite'; +import { cookies, headers } from '@storybook/nextjs-vite/headers.mock'; import { expect, userEvent, within } from 'storybook/test'; diff --git a/code/frameworks/experimental-nextjs-vite/template/stories/NextHeader.tsx b/code/frameworks/nextjs-vite/template/stories/NextHeader.tsx similarity index 100% rename from code/frameworks/experimental-nextjs-vite/template/stories/NextHeader.tsx rename to code/frameworks/nextjs-vite/template/stories/NextHeader.tsx diff --git a/code/frameworks/experimental-nextjs-vite/template/stories/RSC.stories.tsx b/code/frameworks/nextjs-vite/template/stories/RSC.stories.tsx similarity index 91% rename from code/frameworks/experimental-nextjs-vite/template/stories/RSC.stories.tsx rename to code/frameworks/nextjs-vite/template/stories/RSC.stories.tsx index 1045bc8c604..74b5580e963 100644 --- a/code/frameworks/experimental-nextjs-vite/template/stories/RSC.stories.tsx +++ b/code/frameworks/nextjs-vite/template/stories/RSC.stories.tsx @@ -1,7 +1,7 @@ /* eslint-disable local-rules/no-uncategorized-errors */ import React from 'react'; -import type { Meta, StoryObj } from '@storybook/experimental-nextjs-vite'; +import type { Meta, StoryObj } from '@storybook/nextjs-vite'; import { Nested, RSC } from './RSC'; diff --git a/code/frameworks/experimental-nextjs-vite/template/stories/RSC.tsx b/code/frameworks/nextjs-vite/template/stories/RSC.tsx similarity index 100% rename from code/frameworks/experimental-nextjs-vite/template/stories/RSC.tsx rename to code/frameworks/nextjs-vite/template/stories/RSC.tsx diff --git a/code/frameworks/experimental-nextjs-vite/template/stories/Redirect.stories.tsx b/code/frameworks/nextjs-vite/template/stories/Redirect.stories.tsx similarity index 95% rename from code/frameworks/experimental-nextjs-vite/template/stories/Redirect.stories.tsx rename to code/frameworks/nextjs-vite/template/stories/Redirect.stories.tsx index 0bf00616405..6d8db6afa4c 100644 --- a/code/frameworks/experimental-nextjs-vite/template/stories/Redirect.stories.tsx +++ b/code/frameworks/nextjs-vite/template/stories/Redirect.stories.tsx @@ -1,6 +1,6 @@ import React from 'react'; -import type { Meta, StoryObj } from '@storybook/experimental-nextjs-vite'; +import type { Meta, StoryObj } from '@storybook/nextjs-vite'; import { redirect } from 'next/navigation'; import { userEvent, within } from 'storybook/test'; diff --git a/code/frameworks/experimental-nextjs-vite/template/stories/Router.stories.tsx b/code/frameworks/nextjs-vite/template/stories/Router.stories.tsx similarity index 94% rename from code/frameworks/experimental-nextjs-vite/template/stories/Router.stories.tsx rename to code/frameworks/nextjs-vite/template/stories/Router.stories.tsx index 402c3c945de..b12b14f3c67 100644 --- a/code/frameworks/experimental-nextjs-vite/template/stories/Router.stories.tsx +++ b/code/frameworks/nextjs-vite/template/stories/Router.stories.tsx @@ -1,7 +1,7 @@ import React from 'react'; -import type { Meta, StoryObj } from '@storybook/experimental-nextjs-vite'; -import { getRouter } from '@storybook/experimental-nextjs-vite/router.mock'; +import type { Meta, StoryObj } from '@storybook/nextjs-vite'; +import { getRouter } from '@storybook/nextjs-vite/router.mock'; import Router, { useRouter } from 'next/router'; import { expect, userEvent, within } from 'storybook/test'; diff --git a/code/frameworks/experimental-nextjs-vite/template/stories/ServerActions.stories.tsx b/code/frameworks/nextjs-vite/template/stories/ServerActions.stories.tsx similarity index 91% rename from code/frameworks/experimental-nextjs-vite/template/stories/ServerActions.stories.tsx rename to code/frameworks/nextjs-vite/template/stories/ServerActions.stories.tsx index c813aaa9f28..eba78cff8b4 100644 --- a/code/frameworks/experimental-nextjs-vite/template/stories/ServerActions.stories.tsx +++ b/code/frameworks/nextjs-vite/template/stories/ServerActions.stories.tsx @@ -1,9 +1,9 @@ import React from 'react'; -import type { Meta, StoryObj } from '@storybook/experimental-nextjs-vite'; -import { revalidatePath } from '@storybook/experimental-nextjs-vite/cache.mock'; -import { cookies } from '@storybook/experimental-nextjs-vite/headers.mock'; -import { getRouter, redirect } from '@storybook/experimental-nextjs-vite/navigation.mock'; +import type { Meta, StoryObj } from '@storybook/nextjs-vite'; +import { revalidatePath } from '@storybook/nextjs-vite/cache.mock'; +import { cookies } from '@storybook/nextjs-vite/headers.mock'; +import { getRouter, redirect } from '@storybook/nextjs-vite/navigation.mock'; import { expect, userEvent, waitFor, within } from 'storybook/test'; diff --git a/code/frameworks/experimental-nextjs-vite/template/stories/ServerActions.tsx b/code/frameworks/nextjs-vite/template/stories/ServerActions.tsx similarity index 100% rename from code/frameworks/experimental-nextjs-vite/template/stories/ServerActions.tsx rename to code/frameworks/nextjs-vite/template/stories/ServerActions.tsx diff --git a/code/frameworks/experimental-nextjs-vite/template/stories/StyledJsx.stories.tsx b/code/frameworks/nextjs-vite/template/stories/StyledJsx.stories.tsx similarity index 83% rename from code/frameworks/experimental-nextjs-vite/template/stories/StyledJsx.stories.tsx rename to code/frameworks/nextjs-vite/template/stories/StyledJsx.stories.tsx index 64c9f9b5b4f..9ce9e7f9ad6 100644 --- a/code/frameworks/experimental-nextjs-vite/template/stories/StyledJsx.stories.tsx +++ b/code/frameworks/nextjs-vite/template/stories/StyledJsx.stories.tsx @@ -1,6 +1,6 @@ import React from 'react'; -import type { Meta, StoryObj } from '@storybook/experimental-nextjs-vite'; +import type { Meta, StoryObj } from '@storybook/nextjs-vite'; const Component = () => (
diff --git a/code/frameworks/experimental-nextjs-vite/template/stories/fonts/OFL.txt b/code/frameworks/nextjs-vite/template/stories/fonts/OFL.txt similarity index 100% rename from code/frameworks/experimental-nextjs-vite/template/stories/fonts/OFL.txt rename to code/frameworks/nextjs-vite/template/stories/fonts/OFL.txt diff --git a/code/frameworks/experimental-nextjs-vite/template/stories/fonts/RubikStorm-Regular.ttf b/code/frameworks/nextjs-vite/template/stories/fonts/RubikStorm-Regular.ttf similarity index 100% rename from code/frameworks/experimental-nextjs-vite/template/stories/fonts/RubikStorm-Regular.ttf rename to code/frameworks/nextjs-vite/template/stories/fonts/RubikStorm-Regular.ttf diff --git a/code/frameworks/experimental-nextjs-vite/template/typings.d.ts b/code/frameworks/nextjs-vite/template/typings.d.ts similarity index 100% rename from code/frameworks/experimental-nextjs-vite/template/typings.d.ts rename to code/frameworks/nextjs-vite/template/typings.d.ts diff --git a/code/frameworks/experimental-nextjs-vite/tsconfig.json b/code/frameworks/nextjs-vite/tsconfig.json similarity index 100% rename from code/frameworks/experimental-nextjs-vite/tsconfig.json rename to code/frameworks/nextjs-vite/tsconfig.json diff --git a/code/frameworks/experimental-nextjs-vite/vitest.config.ts b/code/frameworks/nextjs-vite/vitest.config.ts similarity index 100% rename from code/frameworks/experimental-nextjs-vite/vitest.config.ts rename to code/frameworks/nextjs-vite/vitest.config.ts diff --git a/code/lib/cli-storybook/src/sandbox-templates.ts b/code/lib/cli-storybook/src/sandbox-templates.ts index 810729551fe..e9e3f3fb728 100644 --- a/code/lib/cli-storybook/src/sandbox-templates.ts +++ b/code/lib/cli-storybook/src/sandbox-templates.ts @@ -210,25 +210,20 @@ export const baseTemplates = { script: 'npx create-next-app@^14 {{beforeDir}} --eslint --tailwind --app --import-alias="@/*" --src-dir', expected: { - framework: '@storybook/experimental-nextjs-vite', + framework: '@storybook/nextjs-vite', renderer: '@storybook/react', builder: '@storybook/builder-vite', }, modifications: { useCsfFactory: true, mainConfig: { - framework: '@storybook/experimental-nextjs-vite', + framework: '@storybook/nextjs-vite', features: { experimentalRSC: true, developmentModeForBuild: true, }, }, - extraDependencies: [ - 'server-only', - '@storybook/experimental-nextjs-vite', - 'vite', - 'prop-types', - ], + extraDependencies: ['server-only', '@storybook/nextjs-vite', 'vite', 'prop-types'], }, skipTasks: ['e2e-tests-dev', 'bench'], }, @@ -237,25 +232,20 @@ export const baseTemplates = { script: 'npx create-next-app {{beforeDir}} --eslint --no-tailwind --app --import-alias="@/*" --src-dir', expected: { - framework: '@storybook/experimental-nextjs-vite', + framework: '@storybook/nextjs-vite', renderer: '@storybook/react', builder: '@storybook/builder-vite', }, modifications: { useCsfFactory: true, mainConfig: { - framework: '@storybook/experimental-nextjs-vite', + framework: '@storybook/nextjs-vite', features: { experimentalRSC: true, developmentModeForBuild: true, }, }, - extraDependencies: [ - 'server-only', - '@storybook/experimental-nextjs-vite', - 'vite', - 'prop-types', - ], + extraDependencies: ['server-only', '@storybook/nextjs-vite', 'vite', 'prop-types'], }, skipTasks: ['e2e-tests-dev', 'bench'], }, diff --git a/code/lib/create-storybook/src/bin/modernInputs.ts b/code/lib/create-storybook/src/bin/modernInputs.ts index 7a564bcf78c..b74ee28e527 100644 --- a/code/lib/create-storybook/src/bin/modernInputs.ts +++ b/code/lib/create-storybook/src/bin/modernInputs.ts @@ -7,7 +7,7 @@ export const supportedFrameworks = [ 'html-vite', 'html-webpack5', 'nextjs', - 'experimental-nextjs-vite', + 'nextjs-vite', 'nuxt', 'preact-vite', 'preact-webpack5', @@ -50,7 +50,7 @@ export const supportedFrameworksPackages = { angular: '@storybook/angular', ember: '@storybook/ember', nextjs: '@storybook/nextjs', - 'experimental-nextjs-vite': '@storybook/experimental-nextjs-vite', + 'nextjs-vite': '@storybook/nextjs-vite', nuxt: '@storybook/vue3-vite', qwik: 'storybook-framework-qwik', @@ -79,7 +79,7 @@ export const supportedFrameworksNames = { angular: 'Angular', ember: 'Ember', nextjs: 'NextJS', - 'experimental-nextjs-vite': 'NextJS with Vite', + 'nextjs-vite': 'NextJS with Vite', nuxt: 'Nuxt', qwik: 'Qwik', solid: 'Solid', diff --git a/code/lib/create-storybook/src/ink/steps/checks/frameworkTest.tsx b/code/lib/create-storybook/src/ink/steps/checks/frameworkTest.tsx index 159474ac155..f52ed8e9df2 100644 --- a/code/lib/create-storybook/src/ink/steps/checks/frameworkTest.tsx +++ b/code/lib/create-storybook/src/ink/steps/checks/frameworkTest.tsx @@ -12,13 +12,13 @@ export const SUPPORTED_FRAMEWORKS: Framework[] = [ 'svelte-vite', 'web-components-vite', 'nextjs', - 'experimental-nextjs-vite', + 'nextjs-vite', 'sveltekit', ]; /** - * When selecting framework nextjs & intent includes test, prompt for experimental-nextjs-vite. When - * selecting another framework that doesn't support test addon, prompt for ignoring test intent. + * When selecting framework nextjs & intent includes test, prompt for nextjs-vite. When selecting + * another framework that doesn't support test addon, prompt for ignoring test intent. */ const name = 'Framework test compatibility'; export const frameworkTest: Check = { diff --git a/code/sandbox/experimental-nextjs-vite-default-ts/project.json b/code/sandbox/experimental-nextjs-vite-default-ts/project.json index c9609e4ffa3..a3c86fd2de5 100644 --- a/code/sandbox/experimental-nextjs-vite-default-ts/project.json +++ b/code/sandbox/experimental-nextjs-vite-default-ts/project.json @@ -1,5 +1,5 @@ { - "name": "experimental-nextjs-vite/default-ts", + "name": "nextjs-vite/default-ts", "$schema": "../../node_modules/nx/schemas/project-schema.json", "projectType": "application", "implicitDependencies": [ @@ -8,7 +8,7 @@ "addon-links", "addon-onboarding", "blocks", - "experimental-nextjs-vite" + "nextjs-vite" ], "targets": { "sandbox": {}, diff --git a/code/yarn.lock b/code/yarn.lock index 91681d64bc4..e8bceebc33f 100644 --- a/code/yarn.lock +++ b/code/yarn.lock @@ -7067,30 +7067,6 @@ __metadata: languageName: node linkType: hard -"@storybook/experimental-nextjs-vite@workspace:frameworks/experimental-nextjs-vite": - version: 0.0.0-use.local - resolution: "@storybook/experimental-nextjs-vite@workspace:frameworks/experimental-nextjs-vite" - dependencies: - "@storybook/builder-vite": "workspace:*" - "@storybook/react": "workspace:*" - "@storybook/react-vite": "workspace:*" - "@types/node": "npm:^22.0.0" - next: "npm:^15.0.3" - styled-jsx: "npm:5.1.6" - typescript: "npm:^5.7.3" - vite-plugin-storybook-nextjs: "npm:2.0.0--canary.33.7c1f48f.0" - peerDependencies: - next: ^14.1.0 || ^15.0.0 - react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta - react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta - storybook: "workspace:^" - vite: ^5.0.0 || ^6.0.0 - peerDependenciesMeta: - typescript: - optional: true - languageName: unknown - linkType: soft - "@storybook/global@npm:^5.0.0": version: 5.0.0 resolution: "@storybook/global@npm:5.0.0" @@ -7176,6 +7152,30 @@ __metadata: languageName: node linkType: hard +"@storybook/nextjs-vite@workspace:frameworks/nextjs-vite": + version: 0.0.0-use.local + resolution: "@storybook/nextjs-vite@workspace:frameworks/nextjs-vite" + dependencies: + "@storybook/builder-vite": "workspace:*" + "@storybook/react": "workspace:*" + "@storybook/react-vite": "workspace:*" + "@types/node": "npm:^22.0.0" + next: "npm:^15.0.3" + styled-jsx: "npm:5.1.6" + typescript: "npm:^5.7.3" + vite-plugin-storybook-nextjs: "npm:2.0.0--canary.33.7c1f48f.0" + peerDependencies: + next: ^14.1.0 || ^15.0.0 + react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta + react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta + storybook: "workspace:^" + vite: ^5.0.0 || ^6.0.0 + peerDependenciesMeta: + typescript: + optional: true + languageName: unknown + linkType: soft + "@storybook/nextjs@workspace:*, @storybook/nextjs@workspace:frameworks/nextjs": version: 0.0.0-use.local resolution: "@storybook/nextjs@workspace:frameworks/nextjs" diff --git a/docs/api/csf/csf-factories.mdx b/docs/api/csf/csf-factories.mdx index 6c55b361e03..c5e5828a8e0 100644 --- a/docs/api/csf/csf-factories.mdx +++ b/docs/api/csf/csf-factories.mdx @@ -33,7 +33,7 @@ The CSF Factories API is composed of four main functions to help you write stori With CSF Factories, your [main Storybook config](../main-config/main-config.mdx) is specified by the `defineMain` function. This function is type-safe and will automatically infer types for your project. ```ts title=".storybook/main.js|ts" -// Replace your-framework with the framework you are using (e.g., react-vite, nextjs, experimental-nextjs-vite) +// Replace your-framework with the framework you are using (e.g., react-vite, nextjs, nextjs-vite) import { defineMain } from '@storybook/your-framework/node'; export default defineMain({ @@ -52,7 +52,7 @@ Importantly, by specifying addons here, their types will be available throughout You will import the result of this function, `preview`, in your story files to define the component meta. ```ts title=".storybook/preview.js|ts" -// Replace your-framework with the framework you are using (e.g., react-vite, nextjs, experimental-nextjs-vite) +// Replace your-framework with the framework you are using (e.g., react-vite, nextjs, nextjs-vite) import { definePreview } from '@storybook/your-framework'; import addonA11y from '@storybook/addon-a11y'; @@ -145,7 +145,7 @@ To be able to consistently import the preview file from any location in your pro Update your `.storybook/main.js|ts` file to use the new [`defineMain`](#definemain) function. ```diff title=".storybook/main.js|ts" -// Replace your-framework with the framework you are using (e.g., react-vite, nextjs, experimental-nextjs-vite) +// Replace your-framework with the framework you are using (e.g., react-vite, nextjs, nextjs-vite) + import { defineMain } from '@storybook/your-framework/node'; - import { StorybookConfig } from '@storybook/your-framework'; @@ -177,7 +177,7 @@ If an addon provides annotations (i.e. it distributes a `./preview` export), it ```diff title=".storybook/preview.js|ts" -// Replace your-framework with the framework you are using (e.g., react-vite, nextjs, experimental-nextjs-vite) +// Replace your-framework with the framework you are using (e.g., react-vite, nextjs, nextjs-vite) + import { definePreview } from '@storybook/your-framework'; - import { Preview } from '@storybook/your-renderer'; // 👇 Import the addons you are using diff --git a/docs/api/portable-stories/portable-stories-vitest.mdx b/docs/api/portable-stories/portable-stories-vitest.mdx index d99d9c93cc7..68f3d2185d9 100644 --- a/docs/api/portable-stories/portable-stories-vitest.mdx +++ b/docs/api/portable-stories/portable-stories-vitest.mdx @@ -34,7 +34,7 @@ sidebar: - **Using `Next.js`?** You can test your Next.js stories with Vitest by installing and setting up the `@storybook/experimental-nextjs-vite` which re-exports [vite-plugin-storybook-nextjs](https://github.com/storybookjs/vite-plugin-storybook-nextjs) package. + **Using `Next.js`?** You can test your Next.js stories with Vitest by installing and setting up the `@storybook/nextjs-vite` which re-exports [vite-plugin-storybook-nextjs](https://github.com/storybookjs/vite-plugin-storybook-nextjs) package. diff --git a/docs/get-started/frameworks/nextjs.mdx b/docs/get-started/frameworks/nextjs.mdx index 5891b51f07a..11bb087187b 100644 --- a/docs/get-started/frameworks/nextjs.mdx +++ b/docs/get-started/frameworks/nextjs.mdx @@ -78,7 +78,7 @@ Finally, if you were using Storybook plugins to integrate with Next.js, those ar (⚠ī¸ **Experimental**) -You can use our freshly baked, experimental `@storybook/experimental-nextjs-vite` framework, which is based on Vite and removes the need for Webpack and Babel. It supports all of the features documented here. +You can use our freshly baked, experimental `@storybook/nextjs-vite` framework, which is based on Vite and removes the need for Webpack and Babel. It supports all of the features documented here. Using the Next.js framework with Vite requires Next.js 14.1.0 or later. @@ -195,7 +195,7 @@ const localRubikStorm = localFont({ src: './fonts/RubikStorm-Regular.ttf' }); #### `staticDir` mapping - You can safely skip this section if you are using [`@storybook/experimental-nextjs-vite`](#with-vite) instead of `@storybook/nextjs`. The Vite-based framework takes care of the mapping automatically. + You can safely skip this section if you are using [`@storybook/nextjs-vite`](#with-vite) instead of `@storybook/nextjs`. The Vite-based framework takes care of the mapping automatically. You have to tell Storybook where the `fonts` directory is located, via the [`staticDirs` configuration](../../api/main-config/main-config-static-dirs.mdx#with-configuration-objects). The `from` value is relative to the `.storybook` directory. The `to` value is relative to the execution context of Storybook. Very likely it is the root of your project. @@ -751,7 +751,7 @@ Calls to `getConfig` would return the following object when called within Storyb ## Custom Webpack config - You can safely skip this section if you are using `@storybook/experimental-nextjs-vite` instead of `@storybook/nextjs`. + You can safely skip this section if you are using `@storybook/nextjs-vite` instead of `@storybook/nextjs`. The Vite-based Next.js framework does not support Webpack settings. @@ -901,7 +901,7 @@ You might get this if you're using Yarn v2 or v3. See [Notes for Yarn v2 and v3 ### What if I'm using the Vite builder? -We have introduced experimental Vite builder support. Just install the experimental framework package `@storybook/experimental-nextjs-vite` and replace all instances of `@storybook/nextjs` with `@storybook/experimental-nextjs-vite`. +We have introduced experimental Vite builder support. Just install the experimental framework package `@storybook/nextjs-vite` and replace all instances of `@storybook/nextjs` with `@storybook/nextjs-vite`. ### Error: You are importing avif images, but you don't have sharp installed. You have to install sharp in order to use image optimization features in Next.js. diff --git a/docs/writing-tests/test-addon.mdx b/docs/writing-tests/test-addon.mdx index 111b4db3e53..bb4d1e04382 100644 --- a/docs/writing-tests/test-addon.mdx +++ b/docs/writing-tests/test-addon.mdx @@ -40,7 +40,7 @@ Before installing, make sure your project meets the following requirements: - **Using with Next.js** — The Test addon is supported in Next.js â‰Ĩ 14.1 projects, but you must be using the [`@storybook/experimental-nextjs-vite` framework](../get-started/frameworks/nextjs.mdx#with-vite). When you run the setup command below, you will be prompted to install and use the framework if you haven't already. + **Using with Next.js** — The Test addon is supported in Next.js â‰Ĩ 14.1 projects, but you must be using the [`@storybook/nextjs-vite` framework](../get-started/frameworks/nextjs.mdx#with-vite). When you run the setup command below, you will be prompted to install and use the framework if you haven't already. diff --git a/scripts/tasks/sandbox-parts.ts b/scripts/tasks/sandbox-parts.ts index 455f791f63e..8432178fb9a 100644 --- a/scripts/tasks/sandbox-parts.ts +++ b/scripts/tasks/sandbox-parts.ts @@ -409,7 +409,7 @@ export async function setupVitest(details: TemplateDetails, options: PassedOptio const portableStoriesFrameworks = [ '@storybook/nextjs', - '@storybook/experimental-nextjs-vite', + '@storybook/nextjs-vite', '@storybook/sveltekit', // TODO: add angular once we enable their sandboxes ]; diff --git a/scripts/tasks/sandbox.ts b/scripts/tasks/sandbox.ts index 12026d345fa..57ee174c4c9 100644 --- a/scripts/tasks/sandbox.ts +++ b/scripts/tasks/sandbox.ts @@ -85,7 +85,7 @@ export const sandbox: Task = { extraDeps.push('happy-dom', 'vitest', 'playwright', '@vitest/browser'); if (details.template.expected.framework.includes('nextjs')) { - extraDeps.push('@storybook/experimental-nextjs-vite', 'jsdom'); + extraDeps.push('@storybook/nextjs-vite', 'jsdom'); } // if (details.template.expected.renderer === '@storybook/svelte') { From bafb4abb5fb6e1435daf2052a4975baf86af1c58 Mon Sep 17 00:00:00 2001 From: Valentin Palkovic Date: Fri, 28 Mar 2025 09:45:41 +0100 Subject: [PATCH 2/4] Add prompt for consolidated package updates and enhance package.json transformation logic --- .../fixes/consolidated-imports.test.ts | 27 ++++++ .../automigrate/fixes/consolidated-imports.ts | 83 ++++++++++++------- .../helpers/consolidated-packages.ts | 1 + 3 files changed, 80 insertions(+), 31 deletions(-) diff --git a/code/lib/cli-storybook/src/automigrate/fixes/consolidated-imports.test.ts b/code/lib/cli-storybook/src/automigrate/fixes/consolidated-imports.test.ts index 5904c5a2ff9..43dfd844415 100644 --- a/code/lib/cli-storybook/src/automigrate/fixes/consolidated-imports.test.ts +++ b/code/lib/cli-storybook/src/automigrate/fixes/consolidated-imports.test.ts @@ -104,6 +104,33 @@ describe('check', () => { }); }); +describe('prompt', () => { + it('should return a prompt', () => { + const result = consolidatedImports.prompt({ + packageJsonFiles: ['test/package.json'], + consolidatedDeps: new Set(['@storybook/core-common', '@storybook/experimental-nextjs-vite']), + }); + + expect(result).toMatchInlineSnapshot(` + "Found package.json files that contain consolidated or renamed Storybook packages that need to be updated: + - test/package.json + + We will automatically rename the following packages: + - @storybook/core-common -> storybook/internal/common + - @storybook/experimental-nextjs-vite -> storybook/nextjs-vite + + These packages have been renamed or consolidated into the main storybook package and should be removed. + The main storybook package will be added to devDependencies if not already present. + + Would you like to: + 1. Update these package.json files + 2. Scan your codebase and update any imports from these updated packages + + This will ensure your project is properly updated to use the new updated package structure and to use the latest package names." +`); + }); +}); + describe('transformPackageJsonFiles', () => { it('should transform package.json files', async () => { const contents = JSON.stringify(mockPackageJson); diff --git a/code/lib/cli-storybook/src/automigrate/fixes/consolidated-imports.ts b/code/lib/cli-storybook/src/automigrate/fixes/consolidated-imports.ts index 103911b3996..dbe7afeec68 100644 --- a/code/lib/cli-storybook/src/automigrate/fixes/consolidated-imports.ts +++ b/code/lib/cli-storybook/src/automigrate/fixes/consolidated-imports.ts @@ -2,6 +2,7 @@ import { readFile, writeFile } from 'node:fs/promises'; import { commonGlobOptions, getProjectRoot } from 'storybook/internal/common'; +import picocolors from 'picocolors'; import prompts from 'prompts'; import { dedent } from 'ts-dedent'; @@ -10,28 +11,23 @@ import type { Fix, RunOptions } from '../types'; export interface ConsolidatedOptions { packageJsonFiles: string[]; + consolidatedDeps: Set; } function transformPackageJson(content: string): string | null { const packageJson = JSON.parse(content); let hasChanges = false; - // Check dependencies - if (packageJson.dependencies) { - for (const [dep, version] of Object.entries(packageJson.dependencies)) { - if (dep in consolidatedPackages) { - delete packageJson.dependencies[dep]; - hasChanges = true; - } - } - } + // Check both dependencies and devDependencies + const depTypes = ['dependencies', 'devDependencies'] as const; - // Check devDependencies - if (packageJson.devDependencies) { - for (const [dep, version] of Object.entries(packageJson.devDependencies)) { - if (dep in consolidatedPackages) { - delete packageJson.devDependencies[dep]; - hasChanges = true; + for (const depType of depTypes) { + if (packageJson[depType]) { + for (const [dep] of Object.entries(packageJson[depType])) { + if (dep in consolidatedPackages) { + delete packageJson[depType][dep]; + hasChanges = true; + } } } } @@ -120,38 +116,63 @@ export const consolidatedImports: Fix = { gitignore: true, }); - // check if any of the package.json files have consolidated packages - const hasConsolidatedDependencies = await Promise.all( + const consolidatedDeps = new Set(); + const affectedPackageJSONFiles = new Set(); + + // Check all package.json files for consolidated packages + await Promise.all( packageJsonFiles.map(async (file) => { const contents = await readFile(file, 'utf-8'); const packageJson = JSON.parse(contents); - return ( - Object.keys(packageJson.dependencies || {}).some((dep) => dep in consolidatedPackages) || - Object.keys(packageJson.devDependencies || {}).some((dep) => dep in consolidatedPackages) - ); - }) - ).then((results) => results.some(Boolean)); - if (!hasConsolidatedDependencies) { + // Check both dependencies and devDependencies + const allDeps = { + ...(packageJson.dependencies || {}), + ...(packageJson.devDependencies || {}), + }; + + // Add any consolidated packages to the set + let hasConsolidatedDeps = false; + Object.keys(allDeps).forEach((dep) => { + if (dep in consolidatedPackages) { + consolidatedDeps.add(dep as keyof typeof consolidatedPackages); + hasConsolidatedDeps = true; + } + }); + + if (hasConsolidatedDeps) { + affectedPackageJSONFiles.add(file); + } + }) + ); + + if (consolidatedDeps.size === 0) { return null; } + return { - packageJsonFiles, + consolidatedDeps, + packageJsonFiles: Array.from(affectedPackageJSONFiles), }; }, prompt: (result: ConsolidatedOptions) => { return dedent` - Found package.json files that contain consolidated Storybook packages that need to be updated: + Found package.json files that contain consolidated or renamed Storybook packages that need to be updated: ${result.packageJsonFiles.map((file) => `- ${file}`).join('\n')} - These packages have been consolidated into the main storybook package and should be removed. - The main storybook package will be added to devDependencies if not already present. + We will automatically rename the following packages: + ${Array.from(result.consolidatedDeps) + .map((dep) => `- ${picocolors.red(dep)} -> ${picocolors.cyan(consolidatedPackages[dep])}`) + .join('\n')} + + These packages have been renamed or consolidated into the main ${picocolors.cyan('storybook')} package and should be removed. + The main ${picocolors.cyan('storybook')} package will be added to devDependencies if not already present. Would you like to: 1. Update these package.json files - 2. Scan your codebase and update any imports from these consolidated packages + 2. Scan your codebase and update any imports from these updated packages - This will ensure your project is properly updated to use the new consolidated package structure. + This will ensure your project is properly updated to use the new updated package structure and to use the latest package names. `; }, run: async (options: RunOptions) => { @@ -165,7 +186,7 @@ export const consolidatedImports: Fix = { const projectRoot = getProjectRoot(); - const defaultGlob = '**/*.{mjs,cjs,js,jsx,ts,tsx}'; + const defaultGlob = '**/*.{mjs,cjs,js,jsx,ts,tsx,mdx}'; // Find all files matching the glob pattern const { glob } = await prompts({ type: 'text', diff --git a/code/lib/cli-storybook/src/automigrate/helpers/consolidated-packages.ts b/code/lib/cli-storybook/src/automigrate/helpers/consolidated-packages.ts index c0ca0edb95b..e0d2d6266af 100644 --- a/code/lib/cli-storybook/src/automigrate/helpers/consolidated-packages.ts +++ b/code/lib/cli-storybook/src/automigrate/helpers/consolidated-packages.ts @@ -26,6 +26,7 @@ export const consolidatedPackages = { '@storybook/addon-controls': 'storybook/internal/controls', '@storybook/addon-toolbars': 'storybook/internal/toolbars', '@storybook/addon-viewport': 'storybook/viewport', + '@storybook/experimental-nextjs-vite': 'storybook/nextjs-vite', } as const; export type ConsolidatedPackage = keyof typeof consolidatedPackages; From 34d9daeaa1b6e451b6ccb47625a46a9f67bf549e Mon Sep 17 00:00:00 2001 From: Valentin Palkovic Date: Fri, 28 Mar 2025 12:36:00 +0100 Subject: [PATCH 3/4] Fix tests --- .../src/automigrate/fixes/consolidated-imports.test.ts | 10 ++++++++++ 1 file changed, 10 insertions(+) diff --git a/code/lib/cli-storybook/src/automigrate/fixes/consolidated-imports.test.ts b/code/lib/cli-storybook/src/automigrate/fixes/consolidated-imports.test.ts index 43dfd844415..b27885e0c58 100644 --- a/code/lib/cli-storybook/src/automigrate/fixes/consolidated-imports.test.ts +++ b/code/lib/cli-storybook/src/automigrate/fixes/consolidated-imports.test.ts @@ -11,6 +11,16 @@ import { transformPackageJsonFiles, } from './consolidated-imports'; +// mock picocolors yellow and cyan +vi.mock('picocolors', () => { + return { + default: { + cyan: (str: string) => str, + red: (str: string) => str, + }, + }; +}); + vi.mock('node:fs/promises'); vi.mock('globby', () => ({ globby: vi.fn(), From f06c64795e82c459aa843b1434d16043d99bbd53 Mon Sep 17 00:00:00 2001 From: Jeppe Reinhold Date: Fri, 28 Mar 2025 13:43:07 +0100 Subject: [PATCH 4/4] fix missing global in globals-runtime --- code/core/src/manager/globals-runtime.ts | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/code/core/src/manager/globals-runtime.ts b/code/core/src/manager/globals-runtime.ts index 2b715cd47d8..efec08c4b07 100644 --- a/code/core/src/manager/globals-runtime.ts +++ b/code/core/src/manager/globals-runtime.ts @@ -12,7 +12,7 @@ globalPackages.forEach((key) => { globalThis.sendTelemetryError = (error) => { if (!shouldSkipError(error)) { - const channel = global.__STORYBOOK_ADDONS_CHANNEL__; + const channel = globalThis.__STORYBOOK_ADDONS_CHANNEL__; channel.emit(TELEMETRY_ERROR, prepareForTelemetry(error)); } }; @@ -20,9 +20,9 @@ globalThis.sendTelemetryError = (error) => { // handle all uncaught errors at the root of the application and log to telemetry globalThis.addEventListener('error', (args) => { const error = args.error || args; - global.sendTelemetryError(error); + globalThis.sendTelemetryError(error); }); globalThis.addEventListener('unhandledrejection', ({ reason }) => { - global.sendTelemetryError(reason); + globalThis.sendTelemetryError(reason); });