Release: Prerelease 8.2.0-beta.3

CHANGELOG.prerelease.md

@@ -1,3 +1,8 @@
+## 8.2.0-beta.3
+
+- Addon Controls: Fix saving on Windows - [#28485](https://github.com/storybookjs/storybook/pull/28485), thanks @ghengeveld!
+- React: Export ButtonProps and HeaderProps in CLI templates - [#28487](https://github.com/storybookjs/storybook/pull/28487), thanks @valentinpalkovic!
+
 ## 8.2.0-beta.2
 
 - Addon Onboarding: Trigger onboarding during init for Vue and Angular projects - [#28482](https://github.com/storybookjs/storybook/pull/28482), thanks @ghengeveld!

code/core/scripts/helpers/sourcefiles.ts

@@ -54,7 +54,7 @@ async function generateVersionsFile(prettierConfig: prettier.Options | null): Pr
 }
 
 async function generateFrameworksFile(prettierConfig: prettier.Options | null): Promise<void> {
-  const thirdPartyFrameworks = ['qwik', 'solid', 'nuxt'];
+  const thirdPartyFrameworks = ['qwik', 'solid'];
   const location = join(
     import.meta.dirname,
     '..',

code/core/src/common/utils/framework-to-renderer.ts

@@ -23,7 +23,6 @@ export const frameworkToRenderer: Record<
   sveltekit: 'svelte',
   'vue3-vite': 'vue3',
   'vue3-webpack5': 'vue3',
-  nuxt: 'vue3',
   'web-components-vite': 'web-components',
   'web-components-webpack5': 'web-components',
   // renderers

code/core/src/core-server/utils/save-story/save-story.ts

@@ -35,8 +35,8 @@ const parseArgs = (args: string): Record<string, any> =>
 // Removes extra newlines between story properties. See https://github.com/benjamn/recast/issues/242
 // Only updates the part of the code for the story with the given name.
 const removeExtraNewlines = (code: string, name: string) => {
-  const anything = '(.|\r\n|\r|\n)'; // Multiline match for any character.
-  const newline = '(\r\n|\r|\n)'; // Either newlines or carriage returns may be used in the file.
+  const anything = '([\\s\\S])'; // Multiline match for any character.
+  const newline = '(\\r\\n|\\r|\\n)'; // Either newlines or carriage returns may be used in the file.
   const closing = newline + '};' + newline; // Marks the end of the story definition.
   const regex = new RegExp(
     // Looks for an export by the given name, considers the first closing brace on its own line

code/core/src/types/modules/frameworks.ts

@@ -18,5 +18,4 @@ export type SupportedFrameworks =
   | 'web-components-vite'
   | 'web-components-webpack5'
   | 'qwik'
-  | 'solid'
-  | 'nuxt';
+  | 'solid';

code/core/src/types/modules/renderers.ts

@@ -11,5 +11,4 @@ export type SupportedRenderers =
   | 'html'
   | 'web-components'
   | 'server'
-  | 'solid'
-  | 'nuxt';
+  | 'solid';

code/frameworks/angular/README.md

@@ -1,3 +1,3 @@
 # Storybook for Angular
 
-See [documentation](https://storybook.js.org/docs/8.0/get-started/angular?renderer=angular) for installation instructions, usage examples, APIs, and more.
+See [documentation](https://storybook.js.org/docs/get-started/frameworks/angular?renderer=angular) for installation instructions, usage examples, APIs, and more.

code/frameworks/ember/README.md

@@ -20,13 +20,13 @@ For more information visit: [storybook.js.org](https://storybook.js.org)
 ---
 
 Storybook also comes with a lot of [addons](https://storybook.js.org/addons) and a great API to customize as you wish.
-You can also build a [static version](https://storybook.js.org/docs/ember/sharing/publish-storybook) of your Storybook and deploy it anywhere you want.
+You can also build a [static version](https://storybook.js.org/docs/sharing/publish-storybook?renderer=ember) of your Storybook and deploy it anywhere you want.
 
 ## Docs
 
-- [Basics](https://storybook.js.org/docs/ember/get-started)
-- [Configurations](https://storybook.js.org/docs/ember/configure)
-- [Addons](https://storybook.js.org/docs/ember/configure/storybook-addons)
+- [Basics](https://storybook.js.org/docs/get-started/install?renderer=ember)
+- [Configurations](https://storybook.js.org/docs/configure?renderer=ember)
+- [Addons](https://storybook.js.org/docs/configure/user-interface/storybook-addons?renderer=ember)
 
 ## Working with polyfills
 

code/frameworks/html-vite/README.md

@@ -1 +1,3 @@
 # Storybook for HTML
+
+See [documentation](https://storybook.js.org/docs) for installation instructions, usage examples, APIs, and more.

code/frameworks/html-webpack5/README.md

@@ -27,4 +27,4 @@ run `npm init` and `npm install typescript --save-dev` before initializing story
 ---
 
 Storybook also comes with a lot of [addons](https://storybook.js.org/addons) and a great API to customize as you wish.
-You can also build a [static version](https://storybook.js.org/docs/html/sharing/publish-storybook) of your Storybook and deploy it anywhere you want.
+You can also build a [static version](https://storybook.js.org/docs/sharing/publish-storybook?renderer=html) of your Storybook and deploy it anywhere you want.

code/frameworks/nextjs/README.md

@@ -1,6 +1,6 @@
 # Storybook for Next.js
 
-See [documentation](https://storybook.js.org/docs/8.0/get-started/nextjs) for installation instructions, usage examples, APIs, and more.
+See [documentation](https://storybook.js.org/docs/get-started/frameworks/nextjs?renderer=react) for installation instructions, usage examples, APIs, and more.
 
 ## Acknowledgements
 

code/frameworks/nextjs/template/cli/ts-3-8/Button.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import './button.css';
 
-interface ButtonProps {
+export interface ButtonProps {
   /**
    * Is this the principal call to action on the page?
    */

code/frameworks/nextjs/template/cli/ts-3-8/Header.tsx

@@ -7,7 +7,7 @@ type User = {
   name: string;
 };
 
-interface HeaderProps {
+export interface HeaderProps {
   user?: User;
   onLogin?: () => void;
   onLogout?: () => void;

code/frameworks/nextjs/template/cli/ts-4-9/Button.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import './button.css';
 
-interface ButtonProps {
+export interface ButtonProps {
   /**
    * Is this the principal call to action on the page?
    */

code/frameworks/nextjs/template/cli/ts-4-9/Header.tsx

@@ -7,7 +7,7 @@ type User = {
   name: string;
 };
 
-interface HeaderProps {
+export interface HeaderProps {
   user?: User;
   onLogin?: () => void;
   onLogout?: () => void;

code/frameworks/preact-vite/README.md

@@ -15,7 +15,7 @@ Follow the prompts after running this command in your Preact project's root dire
 npx storybook@latest init
 ```
 
-[More on getting started with Storybook](https://storybook.js.org/docs/preact/get-started/install)
+[More on getting started with Storybook](https://storybook.js.org/docs/get-started/install?renderer=preact)
 
 ### In a project with Storybook
 

code/frameworks/preact-webpack5/README.md

@@ -20,10 +20,10 @@ For more information visit: [storybook.js.org](https://storybook.js.org)
 ---
 
 Storybook also comes with a lot of [addons](https://storybook.js.org/addons) and a great API to customize as you wish.
-You can also build a [static version](https://storybook.js.org/docs/preact/sharing/publish-storybook) of your Storybook and deploy it anywhere you want.
+You can also build a [static version](https://storybook.js.org/docs/sharing/publish-storybook?renderer=preact) of your Storybook and deploy it anywhere you want.
 
 ## Docs
 
-- [Basics](https://storybook.js.org/docs/preact/get-started)
-- [Configurations](https://storybook.js.org/docs/preact/configure)
-- [Addons](https://storybook.js.org/docs/preact/configure/storybook-addons)
+- [Basics](https://storybook.js.org/docs/get-started/install?renderer=preact)
+- [Configurations](https://storybook.js.org/docs/configure?renderer=preact)
+- [Addons](https://storybook.js.org/docs/configure/user-interface/storybook-addons?renderer=preact)

code/frameworks/react-vite/README.md

@@ -1,3 +1,3 @@
 # Storybook for React & Vite
 
-See [documentation](https://storybook.js.org/docs/8.0/get-started/react-vite?renderer=react) for installation instructions, usage examples, APIs, and more.
+See [documentation](https://storybook.js.org/docs/get-started/frameworks/react-vite?renderer=react) for installation instructions, usage examples, APIs, and more.

code/frameworks/react-webpack5/README.md

@@ -1,3 +1,3 @@
 # Storybook for React & Webpack
 
-See [documentation](https://storybook.js.org/docs/8.0/get-started/react-webpack5?renderer=react) for installation instructions, usage examples, APIs, and more.
+See [documentation](https://storybook.js.org/docs/get-started/frameworks/react-webpack5?renderer=react) for installation instructions, usage examples, APIs, and more.

code/frameworks/svelte-vite/README.md

@@ -1,3 +1,3 @@
 # Storybook for Svelte & Vite
 
-See [documentation](https://storybook.js.org/docs/8.0/get-started/svelte-vite?renderer=svelte) for installation instructions, usage examples, APIs, and more.
+See [documentation](https://storybook.js.org/docs/get-started/frameworks/svelte-vite?renderer=svelte) for installation instructions, usage examples, APIs, and more.

code/frameworks/svelte-webpack5/README.md

@@ -1,3 +1,3 @@
 # Storybook for Svelte & Webpack
 
-See [documentation](https://storybook.js.org/docs/8.0/get-started/svelte-webpack5?renderer=svelte) for installation instructions, usage examples, APIs, and more.
+See [documentation](https://storybook.js.org/docs/get-started/frameworks/svelte-webpack5?renderer=svelte) for installation instructions, usage examples, APIs, and more.

code/frameworks/sveltekit/README.md

@@ -1,6 +1,6 @@
 # Storybook for SvelteKit
 
-See [documentation](https://storybook.js.org/docs/8.0/get-started/sveltekit?renderer=svelte) for installation instructions, usage examples, APIs, and more.
+See [documentation](https://storybook.js.org/docs/get-started/frameworks/sveltekit?renderer=svelte) for installation instructions, usage examples, APIs, and more.
 
 ## Acknowledgements
 

code/frameworks/vue3-vite/README.md

@@ -1,3 +1,3 @@
 # Storybook for Vue and Vite
 
-See [documentation](https://storybook.js.org/docs/8.0/get-started/vue3-vite?renderer=vue) for installation instructions, usage examples, APIs, and more.
+See [documentation](https://storybook.js.org/docs/get-started/frameworks/vue3-vite?renderer=vue) for installation instructions, usage examples, APIs, and more.

code/frameworks/vue3-webpack5/README.md

@@ -1,3 +1,3 @@
 # Storybook for Vue 3 and Webpack
 
-See [documentation](https://storybook.js.org/docs/8.0/get-started/vue3-webpack5?renderer=vue) for installation instructions, usage examples, APIs, and more.
+See [documentation](https://storybook.js.org/docs/get-started/frameworks/vue3-webpack5?renderer=vue) for installation instructions, usage examples, APIs, and more.

code/frameworks/web-components-vite/README.md

@@ -1,3 +1,3 @@
 # Storybook for Web components & Vite
 
-See [documentation](https://storybook.js.org/docs/8.0/get-started/web-components-vite?renderer=web-components) for installation instructions, usage examples, APIs, and more.
+See [documentation](https://storybook.js.org/docs/get-started/frameworks/web-components-vite?renderer=web-components) for installation instructions, usage examples, APIs, and more.

code/frameworks/web-components-webpack5/README.md

@@ -1,3 +1,3 @@
 # Storybook for Web components & Webpack
 
-See [documentation](https://storybook.js.org/docs/8.0/get-started/web-components-webpack5?renderer=web-components) for installation instructions, usage examples, APIs, and more.
+See [documentation](https://storybook.js.org/docs/get-started/frameworks/web-components-webpack5?renderer=web-components) for installation instructions, usage examples, APIs, and more.

code/lib/cli/package.json

@@ -282,8 +282,7 @@
   ],
   "scripts": {
     "check": "node --loader ../../../scripts/node_modules/esbuild-register/loader.js -r ../../../scripts/node_modules/esbuild-register/register.js ../../../scripts/prepare/check.ts",
-    "prep": "node --loader ../../../scripts/node_modules/esbuild-register/loader.js -r ../../../scripts/node_modules/esbuild-register/register.js ../../../scripts/prepare/bundle.ts",
-    "sb": "node ./bin/index.js"
+    "prep": "node --loader ../../../scripts/node_modules/esbuild-register/loader.js -r ../../../scripts/node_modules/esbuild-register/register.js ../../../scripts/prepare/bundle.ts"
   },
   "dependencies": {
     "@babel/core": "^7.24.4",

code/lib/cli/src/detect.test.ts

@@ -42,28 +42,6 @@ const MOCK_FRAMEWORK_FILES: {
       },
     },
   },
-  {
-    name: ProjectType.NUXT,
-    files: {
-      'package.json': {
-        dependencies: {
-          nuxt: '^3.11.2',
-        },
-      },
-    },
-  },
-  {
-    name: ProjectType.NUXT,
-    files: {
-      'package.json': {
-        dependencies: {
-          // Nuxt projects may have Vue 3 as an explicit dependency
-          nuxt: '^3.11.2',
-          vue: '^3.0.0',
-        },
-      },
-    },
-  },
   {
     name: ProjectType.VUE3,
     files: {
@@ -456,6 +434,16 @@ describe('Detect', () => {
       expect(result).toBe(ProjectType.UNDETECTED);
     });
 
+    // TODO(blaine): Remove once Nuxt3 is supported
+    it(`UNSUPPORTED for Nuxt framework above version 3.0.0`, () => {
+      const result = detectFrameworkPreset({
+        dependencies: {
+          nuxt: '3.0.0',
+        },
+      });
+      expect(result).toBe(ProjectType.UNSUPPORTED);
+    });
+
     // TODO: The mocking in this test causes tests after it to fail
     it('REACT_SCRIPTS for custom react scripts config', () => {
       const forkedReactScriptsConfig = {

code/lib/cli/src/detect.ts

@@ -120,11 +120,7 @@ export async function detectBuilder(packageManager: JsPackageManager, projectTyp
   }
 
   // REWORK
-  if (
-    webpackConfig ||
-    ((dependencies.webpack || dependencies['@nuxt/webpack-builder']) &&
-      dependencies.vite !== undefined)
-  ) {
+  if (webpackConfig || (dependencies.webpack && dependencies.vite !== undefined)) {
     commandLog('Detected webpack project. Setting builder to webpack')();
     return CoreBuilder.Webpack5;
   }
@@ -137,8 +133,6 @@ export async function detectBuilder(packageManager: JsPackageManager, projectTyp
     case ProjectType.NEXTJS:
     case ProjectType.EMBER:
       return CoreBuilder.Webpack5;
-    case ProjectType.NUXT:
-      return CoreBuilder.Vite;
     default:
       const { builder } = await prompts(
         {
@@ -208,13 +202,6 @@ export async function detectLanguage(packageManager: JsPackageManager) {
     } else if (semver.lt(typescriptVersion, '3.8.0')) {
       logger.warn('Detected TypeScript < 3.8, populating with JavaScript examples');
     }
-  } else {
-    // No direct dependency on TypeScript, but could be a transitive dependency
-    // This is eg the case for Nuxt projects, which support a recent version of TypeScript
-    // Check for tsconfig.json (https://www.typescriptlang.org/docs/handbook/tsconfig-json.html)
-    if (fs.existsSync('tsconfig.json')) {
-      language = SupportedLanguage.TYPESCRIPT_4_9;
-    }
   }
 
   return language;

code/lib/cli/src/generators/baseGenerator.ts

@@ -23,15 +23,13 @@ const defaultOptions: FrameworkOptions = {
   staticDir: undefined,
   addScripts: true,
   addMainFile: true,
-  addPreviewFile: true,
   addComponents: true,
   webpackCompiler: () => undefined,
   extraMain: undefined,
   framework: undefined,
   extensions: undefined,
   componentsDestinationPath: undefined,
   storybookConfigFolder: '.storybook',
-  installFrameworkPackages: true,
 };
 
 const getBuilderDetails = (builder: string) => {
@@ -204,14 +202,12 @@ export async function baseGenerator(
     staticDir,
     addScripts,
     addMainFile,
-    addPreviewFile,
     addComponents,
     extraMain,
     extensions,
     storybookConfigFolder,
     componentsDestinationPath,
     webpackCompiler,
-    installFrameworkPackages,
   } = {
     ...defaultOptions,
     ...options,
@@ -285,7 +281,7 @@ export async function baseGenerator(
   const allPackages = [
     'storybook',
     getExternalFramework(rendererId) ? undefined : `@storybook/${rendererId}`,
-    ...(installFrameworkPackages ? frameworkPackages : []),
+    ...frameworkPackages,
     ...addonPackages,
     ...(extraPackagesToInstall || []),
   ].filter(Boolean);
@@ -327,9 +323,7 @@ export async function baseGenerator(
     addDependenciesSpinner.succeed();
   }
 
-  if (addMainFile || addPreviewFile) {
-    await fse.ensureDir(`./${storybookConfigFolder}`);
-  }
+  await fse.ensureDir(`./${storybookConfigFolder}`);
 
   if (addMainFile) {
     const prefixes = shouldApplyRequireWrapperOnPackageNames
@@ -377,14 +371,12 @@ export async function baseGenerator(
     });
   }
 
-  if (addPreviewFile) {
-    await configurePreview({
-      frameworkPreviewParts,
-      storybookConfigFolder: storybookConfigFolder as string,
-      language,
-      rendererId,
-    });
-  }
+  await configurePreview({
+    frameworkPreviewParts,
+    storybookConfigFolder: storybookConfigFolder as string,
+    language,
+    rendererId,
+  });
 
   if (addScripts) {
     await packageManager.addStorybookCommandInScripts({