Merge pull request #28488 from storybookjs/version-non-patch-from-8.2…

….0-beta.2

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({