diff --git a/CHANGELOG.md b/CHANGELOG.md index 2629a26636c8..35e67a120c42 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,3 +1,15 @@ +## 9.0.8 + +- Addon Docs: Fix SyntaxHighlighter "Copy" button by avoiding potentially mocked clipboard - [#31682](https://github.com/storybookjs/storybook/pull/31682), thanks @ghengeveld! +- Addon Themes: Define missing React dependencies - [#31688](https://github.com/storybookjs/storybook/pull/31688), thanks @ghengeveld! +- Addon-vitest: Fix adding with `--skip-install` failing missing packageJson invariant - [#31720](https://github.com/storybookjs/storybook/pull/31720), thanks @JReinhold! +- AddonDocs: Remove export of blocks - [#31724](https://github.com/storybookjs/storybook/pull/31724), thanks @ndelangen! +- Automigration: Enhance removeEssentials to convert options - [#31658](https://github.com/storybookjs/storybook/pull/31658), thanks @ndelangen! +- CLI: Don't install addon-onboarding during minimal installs - [#31616](https://github.com/storybookjs/storybook/pull/31616), thanks @ghengeveld! + +> [!NOTE] +> Version 9.0.7 was skipped because of a bad release of `eslint-plugin-storybook`. + ## 9.0.6 - Addon Docs: Fix reference to global JSX namespace - [#31671](https://github.com/storybookjs/storybook/pull/31671), thanks @mrginglymus! diff --git a/MIGRATION.md b/MIGRATION.md index 0c7802b97322..d644da51c0bc 100644 --- a/MIGRATION.md +++ b/MIGRATION.md @@ -760,7 +760,6 @@ export const MyStory = { }; ``` - ### API and Component Changes #### Button Component API Changes @@ -908,6 +907,15 @@ The package `@storybook/blocks` is no longer published as of Storybook 9. All exports can now be found in the export `@storybook/addon-docs/blocks`. +Previously, you were able to import all blocks from `@storybook/addon-docs`, this is no longer the case. + +This is the only correct import path: + +```diff +- import { Meta } from "@storybook/addon-docs"; ++ import { Meta } from "@storybook/addon-docs/blocks"; +``` + ### Configuration and Type Changes #### Manager builder removed alias for `util`, `assert` and `process` @@ -920,7 +928,6 @@ Adding these aliases meant storybook core, had to depend on these packages, whic If you addon fails to load after this change, we recommend looking at implementing the alias at compile time of your addon, or alternatively look at other bundling config to ensure the correct entries/packages/dependencies are used. - #### Type System Updates The following types have been removed: @@ -943,7 +950,6 @@ Deprecated getters have been removed from the CsfFile class: - `_fileName` - `_makeTitle` - #### React-Native config dir renamed In Storybook 9, React Native (RN) projects use the `.rnstorybook` config directory instead of `.storybook`. @@ -1105,7 +1111,7 @@ To enable it, just set the feature flag in your `.storybook/main. file. ```tsx export default { features: { - angularFilterNonInputControls: true + angularFilterNonInputControls: true, }, // ... other configurations }; diff --git a/code/addons/a11y/package.json b/code/addons/a11y/package.json index b33c5eb1326a..02c20f348ea5 100644 --- a/code/addons/a11y/package.json +++ b/code/addons/a11y/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-a11y", - "version": "9.0.6", + "version": "9.0.7", "description": "Test component compliance with web accessibility standards", "keywords": [ "a11y", diff --git a/code/addons/actions/package.json b/code/addons/actions/package.json index c5a67f74d91b..6004fb14182f 100644 --- a/code/addons/actions/package.json +++ b/code/addons/actions/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-actions", - "version": "9.0.6", + "version": "9.0.7", "description": "Empty package - please don't use it anymore", "keywords": [], "homepage": "https://github.com/storybookjs/storybook", diff --git a/code/addons/backgrounds/package.json b/code/addons/backgrounds/package.json index 1bd01726b46c..f026122d336c 100644 --- a/code/addons/backgrounds/package.json +++ b/code/addons/backgrounds/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-backgrounds", - "version": "9.0.6", + "version": "9.0.7", "description": "Empty package - please don't use it anymore", "keywords": [], "homepage": "https://github.com/storybookjs/storybook", diff --git a/code/addons/controls/package.json b/code/addons/controls/package.json index c5811ef9b40f..69ff0fcc2a1d 100644 --- a/code/addons/controls/package.json +++ b/code/addons/controls/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-controls", - "version": "9.0.6", + "version": "9.0.7", "description": "Empty package - please don't use it anymore", "keywords": [], "homepage": "https://github.com/storybookjs/storybook", diff --git a/code/addons/docs/package.json b/code/addons/docs/package.json index f23e908e5179..e612edc28b68 100644 --- a/code/addons/docs/package.json +++ b/code/addons/docs/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-docs", - "version": "9.0.6", + "version": "9.0.7", "description": "Document component usage and properties in Markdown", "keywords": [ "addon", diff --git a/code/addons/docs/src/compiler/index.test.ts b/code/addons/docs/src/compiler/index.test.ts index d5c9a45afa41..e1be960c61b7 100644 --- a/code/addons/docs/src/compiler/index.test.ts +++ b/code/addons/docs/src/compiler/index.test.ts @@ -270,7 +270,7 @@ describe('full snapshots', () => { }); it('canvas without story children', () => { const input = dedent` - import { Canvas } from '@storybook/addon-docs'; + import { Canvas } from '@storybook/addon-docs/blocks';

Some here

@@ -279,7 +279,7 @@ describe('full snapshots', () => { expect(compileSync(input)).toMatchInlineSnapshot(` import {jsx as _jsx} from "react/jsx-runtime"; import {useMDXComponents as _provideComponents} from "@mdx-js/react"; - import {Canvas} from '@storybook/addon-docs'; + import {Canvas} from '@storybook/addon-docs/blocks'; function _createMdxContent(props) { return _jsx(Canvas, { children: _jsx("h2", { @@ -308,7 +308,7 @@ describe('docs-mdx-compiler-plugin', () => { expect( clean( compileSync(dedent` - import { Story, Meta, Canvas } from '@storybook/addon-docs'; + import { Story, Meta, Canvas } from '@storybook/addon-docs/blocks'; import { Welcome, Button } from '@storybook/angular/demo'; import * as MyStories from './My.stories'; import { Other } from './Other.stories'; @@ -327,7 +327,7 @@ describe('docs-mdx-compiler-plugin', () => { ).toMatchInlineSnapshot(` import {Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs} from "react/jsx-runtime"; import {useMDXComponents as _provideComponents} from "@mdx-js/react"; - import {Story, Meta, Canvas} from '@storybook/addon-docs'; + import {Story, Meta, Canvas} from '@storybook/addon-docs/blocks'; import {Welcome, Button} from '@storybook/angular/demo'; import * as MyStories from './My.stories'; import {Other} from './Other.stories'; @@ -358,7 +358,7 @@ describe('docs-mdx-compiler-plugin', () => { expect( clean( compileSync(dedent` - import { Meta } from '@storybook/addon-docs'; + import { Meta } from '@storybook/addon-docs/blocks'; @@ -370,7 +370,7 @@ describe('docs-mdx-compiler-plugin', () => { ).toMatchInlineSnapshot(` import {Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs} from "react/jsx-runtime"; import {useMDXComponents as _provideComponents} from "@mdx-js/react"; - import {Meta} from '@storybook/addon-docs'; + import {Meta} from '@storybook/addon-docs/blocks'; function _createMdxContent(props) { const _components = { h1: "h1", @@ -395,7 +395,7 @@ describe('docs-mdx-compiler-plugin', () => { expect( clean( compileSync(dedent` - import { Meta } from '@storybook/addon-docs'; + import { Meta } from '@storybook/addon-docs/blocks'; `) @@ -403,7 +403,7 @@ describe('docs-mdx-compiler-plugin', () => { ).toMatchInlineSnapshot(` import {jsx as _jsx} from "react/jsx-runtime"; import {useMDXComponents as _provideComponents} from "@mdx-js/react"; - import {Meta} from '@storybook/addon-docs'; + import {Meta} from '@storybook/addon-docs/blocks'; function _createMdxContent(props) { return _jsx(Meta, { title: "Addons/Docs/what's in a title?" @@ -417,7 +417,7 @@ describe('docs-mdx-compiler-plugin', () => { clean( compileSync(dedent` import { Button } from '@storybook/react/demo'; - import { Story, Meta } from '@storybook/addon-docs'; + import { Story, Meta } from '@storybook/addon-docs/blocks'; @@ -432,7 +432,7 @@ describe('docs-mdx-compiler-plugin', () => { import {Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs} from "react/jsx-runtime"; import {useMDXComponents as _provideComponents} from "@mdx-js/react"; import {Button} from '@storybook/react/demo'; - import {Story, Meta} from '@storybook/addon-docs'; + import {Story, Meta} from '@storybook/addon-docs/blocks'; export const two = 2; function _createMdxContent(props) { const _components = { @@ -457,7 +457,7 @@ describe('docs-mdx-compiler-plugin', () => { expect( clean( compileSync(dedent` - import { Story } from '@storybook/addon-docs'; + import { Story } from '@storybook/addon-docs/blocks'; # Current story @@ -467,7 +467,7 @@ describe('docs-mdx-compiler-plugin', () => { ).toMatchInlineSnapshot(` import {Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs} from "react/jsx-runtime"; import {useMDXComponents as _provideComponents} from "@mdx-js/react"; - import {Story} from '@storybook/addon-docs'; + import {Story} from '@storybook/addon-docs/blocks'; function _createMdxContent(props) { const _components = { h1: "h1", @@ -489,7 +489,7 @@ describe('docs-mdx-compiler-plugin', () => { expect( clean( compileSync(dedent` - import { Story } from '@storybook/addon-docs'; + import { Story } from '@storybook/addon-docs/blocks'; # Story reference @@ -499,7 +499,7 @@ describe('docs-mdx-compiler-plugin', () => { ).toMatchInlineSnapshot(` import {Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs} from "react/jsx-runtime"; import {useMDXComponents as _provideComponents} from "@mdx-js/react"; - import {Story} from '@storybook/addon-docs'; + import {Story} from '@storybook/addon-docs/blocks'; function _createMdxContent(props) { const _components = { h1: "h1", @@ -522,7 +522,7 @@ describe('docs-mdx-compiler-plugin', () => { clean( compileSync( [ - "import { Meta, Story } from '@storybook/addon-docs';", + "import { Meta, Story } from '@storybook/addon-docs/blocks';", "import { titleFunction } from '../title-generators';", '', @@ -533,7 +533,7 @@ describe('docs-mdx-compiler-plugin', () => { ).toMatchInlineSnapshot(` import {jsx as _jsx} from "react/jsx-runtime"; import {useMDXComponents as _provideComponents} from "@mdx-js/react"; - import {Meta, Story} from '@storybook/addon-docs'; + import {Meta, Story} from '@storybook/addon-docs/blocks'; import {titleFunction} from '../title-generators'; function _createMdxContent(props) { return _jsx(Meta, { @@ -548,7 +548,7 @@ describe('docs-mdx-compiler-plugin', () => { expect( clean( compileSync(dedent` - import { Meta } from '@storybook/addon-docs'; + import { Meta } from '@storybook/addon-docs/blocks'; @@ -560,7 +560,7 @@ describe('docs-mdx-compiler-plugin', () => { ).toMatchInlineSnapshot(` import {Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs} from "react/jsx-runtime"; import {useMDXComponents as _provideComponents} from "@mdx-js/react"; - import {Meta} from '@storybook/addon-docs'; + import {Meta} from '@storybook/addon-docs/blocks'; function _createMdxContent(props) { const _components = { h1: "h1", @@ -587,7 +587,7 @@ describe('docs-mdx-compiler-plugin', () => { clean( compileSync(dedent` import { Button } from '@storybook/react/demo'; - import { Story, Meta } from '@storybook/addon-docs'; + import { Story, Meta } from '@storybook/addon-docs/blocks'; `) @@ -596,7 +596,7 @@ describe('docs-mdx-compiler-plugin', () => { import {jsx as _jsx} from "react/jsx-runtime"; import {useMDXComponents as _provideComponents} from "@mdx-js/react"; import {Button} from '@storybook/react/demo'; - import {Story, Meta} from '@storybook/addon-docs'; + import {Story, Meta} from '@storybook/addon-docs/blocks'; function _createMdxContent(props) { return _jsx(Meta, { component: Button @@ -610,7 +610,7 @@ describe('docs-mdx-compiler-plugin', () => { expect( clean( compileSync(dedent` - import { Meta } from '@storybook/addon-docs'; + import { Meta } from '@storybook/addon-docs/blocks'; @@ -638,7 +638,7 @@ describe('docs-mdx-compiler-plugin', () => { ).toMatchInlineSnapshot(` import {Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs} from "react/jsx-runtime"; import {useMDXComponents as _provideComponents} from "@mdx-js/react"; - import {Meta} from '@storybook/addon-docs'; + import {Meta} from '@storybook/addon-docs/blocks'; function _createMdxContent(props) { return _jsxs(_Fragment, { children: [_jsx(Meta, { diff --git a/code/addons/docs/src/index.ts b/code/addons/docs/src/index.ts index cff5e1c83d2b..564d4ab6d5d5 100644 --- a/code/addons/docs/src/index.ts +++ b/code/addons/docs/src/index.ts @@ -2,9 +2,6 @@ import { definePreview } from 'storybook/preview-api'; import * as addonAnnotations from './preview'; -// eslint-disable-next-line @typescript-eslint/ban-ts-comment -// @ts-ignore (these types only work once the package is compiled) -export * from '@storybook/addon-docs/blocks'; export { DocsRenderer } from './DocsRenderer'; export type { DocsParameters } from './types'; diff --git a/code/addons/docs/template/stories/docs2/MetaOf.mdx b/code/addons/docs/template/stories/docs2/MetaOf.mdx index ee40c7f95625..9d3b3ffbf4fb 100644 --- a/code/addons/docs/template/stories/docs2/MetaOf.mdx +++ b/code/addons/docs/template/stories/docs2/MetaOf.mdx @@ -1,4 +1,4 @@ -import { Meta, Story, Stories } from '@storybook/addon-docs'; +import { Meta, Story, Stories } from '@storybook/addon-docs/blocks'; import * as ButtonStories from './button.stories.ts'; diff --git a/code/addons/docs/template/stories/docs2/MetaOfNamed.mdx b/code/addons/docs/template/stories/docs2/MetaOfNamed.mdx index 9de44a95adb7..455d03c3dbc6 100644 --- a/code/addons/docs/template/stories/docs2/MetaOfNamed.mdx +++ b/code/addons/docs/template/stories/docs2/MetaOfNamed.mdx @@ -1,4 +1,4 @@ -import { Meta, Story, Stories } from '@storybook/addon-docs'; +import { Meta, Story, Stories } from '@storybook/addon-docs/blocks'; import * as ButtonStories from './button.stories.ts'; diff --git a/code/addons/docs/template/stories/docs2/Title.mdx b/code/addons/docs/template/stories/docs2/Title.mdx index f94dc947bb89..52a74470badc 100644 --- a/code/addons/docs/template/stories/docs2/Title.mdx +++ b/code/addons/docs/template/stories/docs2/Title.mdx @@ -1,4 +1,4 @@ -import { Meta, Subtitle } from '@storybook/addon-docs'; +import { Meta, Subtitle } from '@storybook/addon-docs/blocks'; diff --git a/code/addons/docs/template/stories/docs2/UtfSymbolScroll.mdx b/code/addons/docs/template/stories/docs2/UtfSymbolScroll.mdx index 11c902ce3baa..d8aa64b1bf1c 100644 --- a/code/addons/docs/template/stories/docs2/UtfSymbolScroll.mdx +++ b/code/addons/docs/template/stories/docs2/UtfSymbolScroll.mdx @@ -1,4 +1,4 @@ -import { Meta } from '@storybook/addon-docs'; +import { Meta } from '@storybook/addon-docs/blocks'; diff --git a/code/addons/docs/template/stories/docspage/override.stories.ts b/code/addons/docs/template/stories/docspage/override.stories.ts index 8633007233be..dc8e926b0b47 100644 --- a/code/addons/docs/template/stories/docspage/override.stories.ts +++ b/code/addons/docs/template/stories/docspage/override.stories.ts @@ -2,7 +2,7 @@ // once sandbox linking is working // // import { createElement } from 'react'; -// import { Title, Primary } from '@storybook/addon-docs'; +// import { Title, Primary } from '@storybook/addon-docs/blocks'; // // const Override = () => // createElement('div', { style: { border: '10px solid green', padding: '100px' } }, [ diff --git a/code/addons/jest/package.json b/code/addons/jest/package.json index c09baec0017f..877fe3b72e6b 100644 --- a/code/addons/jest/package.json +++ b/code/addons/jest/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-jest", - "version": "9.0.6", + "version": "9.0.7", "description": "React storybook addon that show component jest report", "keywords": [ "addon", diff --git a/code/addons/links/package.json b/code/addons/links/package.json index 7fd6d33b9f66..b22b101ab8d4 100644 --- a/code/addons/links/package.json +++ b/code/addons/links/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-links", - "version": "9.0.6", + "version": "9.0.7", "description": "Link stories together to build demos and prototypes with your UI components", "keywords": [ "storybook-addons", diff --git a/code/addons/measure/package.json b/code/addons/measure/package.json index d44f2057e629..23f15d460e04 100644 --- a/code/addons/measure/package.json +++ b/code/addons/measure/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-measure", - "version": "9.0.6", + "version": "9.0.7", "description": "Empty package - please don't use it anymore", "keywords": [], "homepage": "https://github.com/storybookjs/storybook", diff --git a/code/addons/onboarding/package.json b/code/addons/onboarding/package.json index 2ad20e23a04e..a0f33195a83a 100644 --- a/code/addons/onboarding/package.json +++ b/code/addons/onboarding/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-onboarding", - "version": "9.0.6", + "version": "9.0.7", "description": "Storybook Addon Onboarding - Introduces a new onboarding experience", "keywords": [ "storybook-addons", diff --git a/code/addons/outline/package.json b/code/addons/outline/package.json index f698271acba4..9cc497451cd0 100644 --- a/code/addons/outline/package.json +++ b/code/addons/outline/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-outline", - "version": "9.0.6", + "version": "9.0.7", "description": "Empty package - please don't use it anymore", "keywords": [], "homepage": "https://github.com/storybookjs/storybook", diff --git a/code/addons/pseudo-states/package.json b/code/addons/pseudo-states/package.json index bcd1e6caae55..ab23648650e5 100644 --- a/code/addons/pseudo-states/package.json +++ b/code/addons/pseudo-states/package.json @@ -1,6 +1,6 @@ { "name": "storybook-addon-pseudo-states", - "version": "9.0.6", + "version": "9.0.7", "description": "CSS pseudo states for Storybook", "keywords": [ "storybook", diff --git a/code/addons/themes/package.json b/code/addons/themes/package.json index dfa890c555e2..bc2950cacb2d 100644 --- a/code/addons/themes/package.json +++ b/code/addons/themes/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-themes", - "version": "9.0.6", + "version": "9.0.7", "description": "Switch between multiple themes for you components in Storybook", "keywords": [ "css", @@ -70,6 +70,8 @@ }, "devDependencies": { "@storybook/icons": "^1.4.0", + "react": "^18.2.0", + "react-dom": "^18.2.0", "typescript": "^5.8.3" }, "peerDependencies": { diff --git a/code/addons/toolbars/package.json b/code/addons/toolbars/package.json index b2ebbfd6da76..7bcb69faf1f4 100644 --- a/code/addons/toolbars/package.json +++ b/code/addons/toolbars/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-toolbars", - "version": "9.0.6", + "version": "9.0.7", "description": "Empty package - please don't use it anymore", "keywords": [], "homepage": "https://github.com/storybookjs/storybook", diff --git a/code/addons/viewport/package.json b/code/addons/viewport/package.json index 302311b22ee6..028890638f1b 100644 --- a/code/addons/viewport/package.json +++ b/code/addons/viewport/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-viewport", - "version": "9.0.6", + "version": "9.0.7", "description": "Empty package - please don't use it anymore", "keywords": [], "homepage": "https://github.com/storybookjs/storybook", diff --git a/code/addons/vitest/package.json b/code/addons/vitest/package.json index 04ad739d4e51..d21fcd547b19 100644 --- a/code/addons/vitest/package.json +++ b/code/addons/vitest/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-vitest", - "version": "9.0.6", + "version": "9.0.7", "description": "Storybook addon for testing components", "keywords": [ "storybook-addons", diff --git a/code/addons/vitest/src/postinstall.ts b/code/addons/vitest/src/postinstall.ts index 9e93be4fa550..7251b86266c2 100644 --- a/code/addons/vitest/src/postinstall.ts +++ b/code/addons/vitest/src/postinstall.ts @@ -89,7 +89,11 @@ export default async function postInstall(options: PostinstallOptions) { if (out.migrateToNextjsVite) { await packageManager.addDependencies( - { installAsDevDependencies: true, skipInstall: options.skipInstall }, + { + installAsDevDependencies: true, + skipInstall: options.skipInstall, + packageJson: await packageManager.readPackageJson(), + }, [`@storybook/nextjs-vite@${versions['@storybook/nextjs-vite']}`] ); @@ -268,7 +272,11 @@ export default async function postInstall(options: PostinstallOptions) { logger.plain(colors.gray(' ' + versionedDependencies.join(', '))); await packageManager.addDependencies( - { installAsDevDependencies: true, skipInstall: options.skipInstall }, + { + installAsDevDependencies: true, + skipInstall: options.skipInstall, + packageJson: await packageManager.readPackageJson(), + }, versionedDependencies ); } diff --git a/code/builders/builder-vite/package.json b/code/builders/builder-vite/package.json index 8578f7095e79..71e591969264 100644 --- a/code/builders/builder-vite/package.json +++ b/code/builders/builder-vite/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/builder-vite", - "version": "9.0.6", + "version": "9.0.7", "description": "A plugin to run and build Storybooks with Vite", "homepage": "https://github.com/storybookjs/storybook/tree/next/code/builders/builder-vite/#readme", "bugs": { diff --git a/code/builders/builder-webpack5/package.json b/code/builders/builder-webpack5/package.json index 9cd37986f24c..39ae731b1d96 100644 --- a/code/builders/builder-webpack5/package.json +++ b/code/builders/builder-webpack5/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/builder-webpack5", - "version": "9.0.6", + "version": "9.0.7", "description": "Storybook framework-agnostic API", "keywords": [ "storybook" diff --git a/code/core/package.json b/code/core/package.json index 889f5f339fb1..682c6aacfc7a 100644 --- a/code/core/package.json +++ b/code/core/package.json @@ -1,6 +1,6 @@ { "name": "storybook", - "version": "9.0.6", + "version": "9.0.7", "description": "Storybook framework-agnostic API", "keywords": [ "storybook" diff --git a/code/core/src/common/js-package-manager/JsPackageManager.ts b/code/core/src/common/js-package-manager/JsPackageManager.ts index 3f9b7a0aafaa..d3437834bd97 100644 --- a/code/core/src/common/js-package-manager/JsPackageManager.ts +++ b/code/core/src/common/js-package-manager/JsPackageManager.ts @@ -236,18 +236,24 @@ export abstract class JsPackageManager { */ public async addDependencies( options: { - skipInstall?: boolean; installAsDevDependencies?: boolean; - packageJson?: PackageJson; writeOutputToFile?: boolean; - }, + } & ( + | { + skipInstall?: false; + packageJson?: PackageJson; + } + | { + skipInstall: true; + packageJson: PackageJson; + } + ), dependencies: string[] ) { const { skipInstall, writeOutputToFile = true } = options; if (skipInstall) { const { packageJson } = options; - invariant(packageJson, 'Missing packageJson.'); const dependenciesMap = dependencies.reduce((acc, dep) => { const [packageName, packageVersion] = getPackageDetails(dep); diff --git a/code/core/src/common/versions.ts b/code/core/src/common/versions.ts index 07ee621c3597..f6d455e3126b 100644 --- a/code/core/src/common/versions.ts +++ b/code/core/src/common/versions.ts @@ -1,53 +1,53 @@ // auto generated file, do not edit export default { - '@storybook/addon-a11y': '9.0.6', - '@storybook/addon-actions': '9.0.6', - '@storybook/addon-backgrounds': '9.0.6', - '@storybook/addon-controls': '9.0.6', - '@storybook/addon-docs': '9.0.6', - '@storybook/addon-jest': '9.0.6', - '@storybook/addon-links': '9.0.6', - '@storybook/addon-measure': '9.0.6', - '@storybook/addon-onboarding': '9.0.6', - '@storybook/addon-outline': '9.0.6', - 'storybook-addon-pseudo-states': '9.0.6', - '@storybook/addon-themes': '9.0.6', - '@storybook/addon-toolbars': '9.0.6', - '@storybook/addon-viewport': '9.0.6', - '@storybook/addon-vitest': '9.0.6', - '@storybook/builder-vite': '9.0.6', - '@storybook/builder-webpack5': '9.0.6', - storybook: '9.0.6', - '@storybook/angular': '9.0.6', - '@storybook/ember': '9.0.6', - '@storybook/html-vite': '9.0.6', - '@storybook/nextjs': '9.0.6', - '@storybook/nextjs-vite': '9.0.6', - '@storybook/preact-vite': '9.0.6', - '@storybook/react-native-web-vite': '9.0.6', - '@storybook/react-vite': '9.0.6', - '@storybook/react-webpack5': '9.0.6', - '@storybook/server-webpack5': '9.0.6', - '@storybook/svelte-vite': '9.0.6', - '@storybook/sveltekit': '9.0.6', - '@storybook/vue3-vite': '9.0.6', - '@storybook/web-components-vite': '9.0.6', - sb: '9.0.6', - '@storybook/cli': '9.0.6', - '@storybook/codemod': '9.0.6', - '@storybook/core-webpack': '9.0.6', - 'create-storybook': '9.0.6', - '@storybook/csf-plugin': '9.0.6', - 'eslint-plugin-storybook': '9.0.6', - '@storybook/react-dom-shim': '9.0.6', - '@storybook/preset-create-react-app': '9.0.6', - '@storybook/preset-react-webpack': '9.0.6', - '@storybook/preset-server-webpack': '9.0.6', - '@storybook/html': '9.0.6', - '@storybook/preact': '9.0.6', - '@storybook/react': '9.0.6', - '@storybook/server': '9.0.6', - '@storybook/svelte': '9.0.6', - '@storybook/vue3': '9.0.6', - '@storybook/web-components': '9.0.6', + '@storybook/addon-a11y': '9.0.7', + '@storybook/addon-actions': '9.0.7', + '@storybook/addon-backgrounds': '9.0.7', + '@storybook/addon-controls': '9.0.7', + '@storybook/addon-docs': '9.0.7', + '@storybook/addon-jest': '9.0.7', + '@storybook/addon-links': '9.0.7', + '@storybook/addon-measure': '9.0.7', + '@storybook/addon-onboarding': '9.0.7', + '@storybook/addon-outline': '9.0.7', + 'storybook-addon-pseudo-states': '9.0.7', + '@storybook/addon-themes': '9.0.7', + '@storybook/addon-toolbars': '9.0.7', + '@storybook/addon-viewport': '9.0.7', + '@storybook/addon-vitest': '9.0.7', + '@storybook/builder-vite': '9.0.7', + '@storybook/builder-webpack5': '9.0.7', + storybook: '9.0.7', + '@storybook/angular': '9.0.7', + '@storybook/ember': '9.0.7', + '@storybook/html-vite': '9.0.7', + '@storybook/nextjs': '9.0.7', + '@storybook/nextjs-vite': '9.0.7', + '@storybook/preact-vite': '9.0.7', + '@storybook/react-native-web-vite': '9.0.7', + '@storybook/react-vite': '9.0.7', + '@storybook/react-webpack5': '9.0.7', + '@storybook/server-webpack5': '9.0.7', + '@storybook/svelte-vite': '9.0.7', + '@storybook/sveltekit': '9.0.7', + '@storybook/vue3-vite': '9.0.7', + '@storybook/web-components-vite': '9.0.7', + sb: '9.0.7', + '@storybook/cli': '9.0.7', + '@storybook/codemod': '9.0.7', + '@storybook/core-webpack': '9.0.7', + 'create-storybook': '9.0.7', + '@storybook/csf-plugin': '9.0.7', + 'eslint-plugin-storybook': '9.0.7', + '@storybook/react-dom-shim': '9.0.7', + '@storybook/preset-create-react-app': '9.0.7', + '@storybook/preset-react-webpack': '9.0.7', + '@storybook/preset-server-webpack': '9.0.7', + '@storybook/html': '9.0.7', + '@storybook/preact': '9.0.7', + '@storybook/react': '9.0.7', + '@storybook/server': '9.0.7', + '@storybook/svelte': '9.0.7', + '@storybook/vue3': '9.0.7', + '@storybook/web-components': '9.0.7', }; diff --git a/code/core/src/components/components/syntaxhighlighter/syntaxhighlighter.tsx b/code/core/src/components/components/syntaxhighlighter/syntaxhighlighter.tsx index c05dfc08eb38..b073d9b2bbdf 100644 --- a/code/core/src/components/components/syntaxhighlighter/syntaxhighlighter.tsx +++ b/code/core/src/components/components/syntaxhighlighter/syntaxhighlighter.tsx @@ -59,8 +59,9 @@ const themedSyntax = memoize(2)((theme) => const copyToClipboard: (text: string) => Promise = createCopyToClipboardFunction(); export function createCopyToClipboardFunction() { - if (navigator?.clipboard) { - return (text: string) => navigator.clipboard.writeText(text); + if (globalWindow.top?.navigator?.clipboard) { + const clipboard = globalWindow.top.navigator.clipboard; + return async (text: string) => clipboard.writeText(text); } return async (text: string) => { const tmp = document.createElement('TEXTAREA') as HTMLTextAreaElement; diff --git a/code/core/src/core-server/utils/__mockdata__/src/docs2/Template.mdx b/code/core/src/core-server/utils/__mockdata__/src/docs2/Template.mdx index 420fac1c277b..cc9fc12d3f32 100644 --- a/code/core/src/core-server/utils/__mockdata__/src/docs2/Template.mdx +++ b/code/core/src/core-server/utils/__mockdata__/src/docs2/Template.mdx @@ -1,4 +1,4 @@ -import { Meta } from '@storybook/addon-docs'; +import { Meta } from '@storybook/addon-docs/blocks'; diff --git a/code/core/src/core-server/utils/__mockdata__/src/docs2/Title.mdx b/code/core/src/core-server/utils/__mockdata__/src/docs2/Title.mdx index b9e99041157d..75643a1dd03c 100644 --- a/code/core/src/core-server/utils/__mockdata__/src/docs2/Title.mdx +++ b/code/core/src/core-server/utils/__mockdata__/src/docs2/Title.mdx @@ -1,4 +1,4 @@ -import { Meta } from '@storybook/addon-docs'; +import { Meta } from '@storybook/addon-docs/blocks'; diff --git a/code/core/src/manager-api/version.ts b/code/core/src/manager-api/version.ts index 9a43a4ea5f53..84207b63d845 100644 --- a/code/core/src/manager-api/version.ts +++ b/code/core/src/manager-api/version.ts @@ -1 +1 @@ -export const version = '9.0.6'; +export const version = '9.0.7'; diff --git a/code/frameworks/angular/package.json b/code/frameworks/angular/package.json index 761c9161d2e5..3d5352e7c141 100644 --- a/code/frameworks/angular/package.json +++ b/code/frameworks/angular/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/angular", - "version": "9.0.6", + "version": "9.0.7", "description": "Storybook for Angular: Develop Angular components in isolation with hot reloading.", "keywords": [ "storybook", diff --git a/code/frameworks/angular/template/stories/basics/README.mdx b/code/frameworks/angular/template/stories/basics/README.mdx index 4af25e032e7b..f2f64c9634f6 100644 --- a/code/frameworks/angular/template/stories/basics/README.mdx +++ b/code/frameworks/angular/template/stories/basics/README.mdx @@ -1,4 +1,4 @@ -import { Meta } from '@storybook/addon-docs'; +import { Meta } from '@storybook/addon-docs/blocks'; diff --git a/code/frameworks/angular/template/stories/core/README.mdx b/code/frameworks/angular/template/stories/core/README.mdx index 15dbdc282625..5e62dde83109 100644 --- a/code/frameworks/angular/template/stories/core/README.mdx +++ b/code/frameworks/angular/template/stories/core/README.mdx @@ -1,4 +1,4 @@ -import { Meta } from '@storybook/addon-docs'; +import { Meta } from '@storybook/addon-docs/blocks'; diff --git a/code/frameworks/angular/template/stories/others/ngx-translate/README.mdx b/code/frameworks/angular/template/stories/others/ngx-translate/README.mdx index b998907b39cf..5bb491b3a5ce 100644 --- a/code/frameworks/angular/template/stories/others/ngx-translate/README.mdx +++ b/code/frameworks/angular/template/stories/others/ngx-translate/README.mdx @@ -1,4 +1,4 @@ -import { Meta } from '@storybook/addon-docs'; +import { Meta } from '@storybook/addon-docs/blocks'; diff --git a/code/frameworks/ember/package.json b/code/frameworks/ember/package.json index ea93c2efcc4b..734858727f4e 100644 --- a/code/frameworks/ember/package.json +++ b/code/frameworks/ember/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/ember", - "version": "9.0.6", + "version": "9.0.7", "description": "Storybook for Ember: Develop Ember Component in isolation with Hot Reloading.", "homepage": "https://github.com/storybookjs/storybook/tree/next/code/frameworks/ember", "bugs": { diff --git a/code/frameworks/html-vite/package.json b/code/frameworks/html-vite/package.json index 932899b66725..1de6cbb0bad2 100644 --- a/code/frameworks/html-vite/package.json +++ b/code/frameworks/html-vite/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/html-vite", - "version": "9.0.6", + "version": "9.0.7", "description": "Storybook for HTML and Vite: Develop HTML in isolation with Hot Reloading.", "keywords": [ "storybook" diff --git a/code/frameworks/nextjs-vite/package.json b/code/frameworks/nextjs-vite/package.json index ab5a36b9a9b2..059de2d748b5 100644 --- a/code/frameworks/nextjs-vite/package.json +++ b/code/frameworks/nextjs-vite/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/nextjs-vite", - "version": "9.0.6", + "version": "9.0.7", "description": "Storybook for Next.js and Vite", "keywords": [ "storybook", diff --git a/code/frameworks/nextjs/package.json b/code/frameworks/nextjs/package.json index 2217080b9077..9381238e2363 100644 --- a/code/frameworks/nextjs/package.json +++ b/code/frameworks/nextjs/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/nextjs", - "version": "9.0.6", + "version": "9.0.7", "description": "Storybook for Next.js", "keywords": [ "storybook", diff --git a/code/frameworks/preact-vite/package.json b/code/frameworks/preact-vite/package.json index 028d1d82c173..54f5b29021e6 100644 --- a/code/frameworks/preact-vite/package.json +++ b/code/frameworks/preact-vite/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/preact-vite", - "version": "9.0.6", + "version": "9.0.7", "description": "Storybook for Preact and Vite: Develop Preact components in isolation with Hot Reloading.", "keywords": [ "storybook" diff --git a/code/frameworks/react-native-web-vite/package.json b/code/frameworks/react-native-web-vite/package.json index 525ea909c73a..5d6ee23c45f2 100644 --- a/code/frameworks/react-native-web-vite/package.json +++ b/code/frameworks/react-native-web-vite/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/react-native-web-vite", - "version": "9.0.6", + "version": "9.0.7", "description": "Develop react-native components an isolated web environment with hot reloading.", "keywords": [ "storybook" diff --git a/code/frameworks/react-vite/package.json b/code/frameworks/react-vite/package.json index 0bb6bbf7a4cf..83c9ec78f2ac 100644 --- a/code/frameworks/react-vite/package.json +++ b/code/frameworks/react-vite/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/react-vite", - "version": "9.0.6", + "version": "9.0.7", "description": "Storybook for React and Vite: Develop React components in isolation with Hot Reloading.", "keywords": [ "storybook" diff --git a/code/frameworks/react-webpack5/package.json b/code/frameworks/react-webpack5/package.json index b1a111ceac6f..58247e47efbf 100644 --- a/code/frameworks/react-webpack5/package.json +++ b/code/frameworks/react-webpack5/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/react-webpack5", - "version": "9.0.6", + "version": "9.0.7", "description": "Storybook for React: Develop React Component in isolation with Hot Reloading.", "keywords": [ "storybook" diff --git a/code/frameworks/server-webpack5/package.json b/code/frameworks/server-webpack5/package.json index 0bfe13c503e6..b27f4f2cde96 100644 --- a/code/frameworks/server-webpack5/package.json +++ b/code/frameworks/server-webpack5/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/server-webpack5", - "version": "9.0.6", + "version": "9.0.7", "description": "Storybook for Server: View HTML snippets from a server in isolation with Hot Reloading.", "keywords": [ "storybook" diff --git a/code/frameworks/svelte-vite/package.json b/code/frameworks/svelte-vite/package.json index 330a09c869f0..7609023b75f5 100644 --- a/code/frameworks/svelte-vite/package.json +++ b/code/frameworks/svelte-vite/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/svelte-vite", - "version": "9.0.6", + "version": "9.0.7", "description": "Storybook for Svelte and Vite: Develop Svelte components in isolation with Hot Reloading.", "keywords": [ "storybook" diff --git a/code/frameworks/sveltekit/package.json b/code/frameworks/sveltekit/package.json index 08e24bfaf766..87cdc73337ac 100644 --- a/code/frameworks/sveltekit/package.json +++ b/code/frameworks/sveltekit/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/sveltekit", - "version": "9.0.6", + "version": "9.0.7", "description": "Storybook for SvelteKit", "keywords": [ "storybook", diff --git a/code/frameworks/vue3-vite/package.json b/code/frameworks/vue3-vite/package.json index dab9c99414d9..a42613dec70d 100644 --- a/code/frameworks/vue3-vite/package.json +++ b/code/frameworks/vue3-vite/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/vue3-vite", - "version": "9.0.6", + "version": "9.0.7", "description": "Storybook for Vue3 and Vite: Develop Vue3 components in isolation with Hot Reloading.", "keywords": [ "storybook" diff --git a/code/frameworks/web-components-vite/package.json b/code/frameworks/web-components-vite/package.json index 2f79c1b7717d..225cf9f9e3f5 100644 --- a/code/frameworks/web-components-vite/package.json +++ b/code/frameworks/web-components-vite/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/web-components-vite", - "version": "9.0.6", + "version": "9.0.7", "description": "Storybook for web-components and Vite: Develop Web Components in isolation with Hot Reloading.", "keywords": [ "storybook" diff --git a/code/lib/cli-sb/package.json b/code/lib/cli-sb/package.json index a9fccec0b37f..26d3b5ee6fb0 100644 --- a/code/lib/cli-sb/package.json +++ b/code/lib/cli-sb/package.json @@ -1,6 +1,6 @@ { "name": "sb", - "version": "9.0.6", + "version": "9.0.7", "description": "Storybook CLI", "keywords": [ "storybook" diff --git a/code/lib/cli-storybook/package.json b/code/lib/cli-storybook/package.json index 1c8651bb3c25..73ab7906096f 100644 --- a/code/lib/cli-storybook/package.json +++ b/code/lib/cli-storybook/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/cli", - "version": "9.0.6", + "version": "9.0.7", "description": "Storybook CLI", "keywords": [ "storybook" diff --git a/code/lib/cli-storybook/src/automigrate/fixes/__test__/main-config-with-essential-options.js b/code/lib/cli-storybook/src/automigrate/fixes/__test__/main-config-with-essential-options.js new file mode 100644 index 000000000000..3bdf9ec20390 --- /dev/null +++ b/code/lib/cli-storybook/src/automigrate/fixes/__test__/main-config-with-essential-options.js @@ -0,0 +1,20 @@ +const config = { + stories: ['../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'], + addons: [ + { + name: '@storybook/addon-essentials', + options: { + docs: false, + backgrounds: false, + measure: false, + outline: false, + grid: false, + }, + }, + ], + framework: { + name: '@storybook/angular', + options: {}, + }, +}; +export default config; diff --git a/code/lib/cli-storybook/src/automigrate/fixes/eslint-plugin.ts b/code/lib/cli-storybook/src/automigrate/fixes/eslint-plugin.ts index 9b8b55af641b..c5b6f6da2605 100644 --- a/code/lib/cli-storybook/src/automigrate/fixes/eslint-plugin.ts +++ b/code/lib/cli-storybook/src/automigrate/fixes/eslint-plugin.ts @@ -74,7 +74,14 @@ export const eslintPlugin: Fix = { logger.info(`โœ… Adding dependencies: ${deps}`); if (!dryRun) { - await packageManager.addDependencies({ installAsDevDependencies: true, skipInstall }, deps); + await packageManager.addDependencies( + { + installAsDevDependencies: true, + skipInstall, + packageJson: await packageManager.readPackageJson(), + }, + deps + ); } if (!dryRun && unsupportedExtension) { diff --git a/code/lib/cli-storybook/src/automigrate/fixes/remove-essentials.test.ts b/code/lib/cli-storybook/src/automigrate/fixes/remove-essentials.test.ts index e3aaef89e428..b397b3e51d61 100644 --- a/code/lib/cli-storybook/src/automigrate/fixes/remove-essentials.test.ts +++ b/code/lib/cli-storybook/src/automigrate/fixes/remove-essentials.test.ts @@ -1,10 +1,14 @@ import { beforeEach, describe, expect, it, vi } from 'vitest'; import type { JsPackageManager, PackageJson } from 'storybook/internal/common'; +import { formatConfig, readConfig } from 'storybook/internal/csf-tools'; import type { StorybookConfigRaw } from 'storybook/internal/types'; +import { dedent } from 'ts-dedent'; + import type { CheckOptions, RunOptions } from '../types'; import { removeEssentials } from './remove-essentials'; +import { moveEssentialOptions } from './remove-essentials.utils'; // Mock modules before any other imports or declarations vi.mock('node:fs/promises', async () => { @@ -528,3 +532,31 @@ describe('remove-essentials migration', () => { }); }); }); + +describe('moveEssentialOptions', () => { + it('should move essential options to features', async () => { + const main = await readConfig('main.ts'); + await moveEssentialOptions(false, { + docs: false, + backgrounds: false, + measure: false, + outline: false, + grid: false, + })(main); + + expect(dedent(formatConfig(main))).toMatchInlineSnapshot(` + "export default { + stories: ['../src/**/*.stories.@(js|jsx|ts|tsx)'], + addons: ['@storybook/addon-links'], + + features: { + docs: false, + backgrounds: false, + measure: false, + outline: false, + grid: false + } + };" + `); + }); +}); diff --git a/code/lib/cli-storybook/src/automigrate/fixes/remove-essentials.ts b/code/lib/cli-storybook/src/automigrate/fixes/remove-essentials.ts index 844b51fffd69..764e96abd166 100644 --- a/code/lib/cli-storybook/src/automigrate/fixes/remove-essentials.ts +++ b/code/lib/cli-storybook/src/automigrate/fixes/remove-essentials.ts @@ -8,10 +8,13 @@ import { import picocolors from 'picocolors'; import { dedent } from 'ts-dedent'; +import { updateMainConfig } from '../helpers/mainConfigFile'; import type { Fix } from '../types'; +import { moveEssentialOptions } from './remove-essentials.utils'; interface AddonDocsOptions { hasEssentials: boolean; + essentialsOptions?: Record; hasDocsDisabled: boolean; hasDocsAddon: boolean; additionalAddonsToRemove: string[]; @@ -50,6 +53,7 @@ export const removeEssentials: Fix = { let hasEssentialsAddon = false; let hasDocsAddon = false; let hasDocsDisabled = false; + let essentialsOptions: Record | undefined = undefined; const additionalAddonsToRemove: string[] = []; const CORE_ADDONS = [ @@ -98,6 +102,14 @@ export const removeEssentials: Fix = { if (typeof essentialsEntry === 'object') { const options = essentialsEntry.options || {}; hasDocsDisabled = options.docs === false; + + const optionsExceptDocs = Object.fromEntries( + Object.entries(options).filter(([key]) => key !== 'docs') + ); + + if (Object.keys(optionsExceptDocs).length > 0) { + essentialsOptions = optionsExceptDocs; + } } } @@ -105,7 +117,7 @@ export const removeEssentials: Fix = { return null; } - return { + const result: AddonDocsOptions = { hasEssentials: hasEssentialsAddon, hasDocsDisabled, hasDocsAddon, @@ -113,6 +125,12 @@ export const removeEssentials: Fix = { allDeps, packageJson, }; + + if (essentialsOptions) { + result.essentialsOptions = essentialsOptions; + } + + return result; } catch (err) { return null; } @@ -159,8 +177,14 @@ export const removeEssentials: Fix = { `; }, - async run({ result, dryRun, packageManager, configDir, packageJson }) { - const { hasEssentials, hasDocsDisabled, hasDocsAddon, additionalAddonsToRemove } = result; + async run({ result, dryRun, packageManager, configDir, packageJson, mainConfigPath }) { + const { + hasEssentials, + hasDocsDisabled, + hasDocsAddon, + additionalAddonsToRemove, + essentialsOptions, + } = result; if (!hasEssentials && additionalAddonsToRemove.length === 0) { return; @@ -204,6 +228,13 @@ export const removeEssentials: Fix = { ); } + if (essentialsOptions) { + updateMainConfig( + { mainConfigPath, dryRun: !!dryRun }, + moveEssentialOptions(dryRun, essentialsOptions) + ); + } + // If docs was enabled (not disabled) and not already installed, add it if (!hasDocsDisabled && hasEssentials) { if (!hasDocsAddon) { diff --git a/code/lib/cli-storybook/src/automigrate/fixes/remove-essentials.utils.ts b/code/lib/cli-storybook/src/automigrate/fixes/remove-essentials.utils.ts new file mode 100644 index 000000000000..4c43751b5b21 --- /dev/null +++ b/code/lib/cli-storybook/src/automigrate/fixes/remove-essentials.utils.ts @@ -0,0 +1,17 @@ +import type { ConfigFile } from 'storybook/internal/csf-tools'; + +export function moveEssentialOptions( + dryRun: boolean | undefined, + essentialsOptions: Record +): (main: ConfigFile) => Promise | void { + return async (main) => { + const features = main.getFieldValue(['features']) || {}; + + if (!dryRun) { + main.setFieldValue(['features'], { + ...features, + ...essentialsOptions, + }); + } + }; +} diff --git a/code/lib/codemod/package.json b/code/lib/codemod/package.json index d4d6e2dbe704..d3a0cd3f34c4 100644 --- a/code/lib/codemod/package.json +++ b/code/lib/codemod/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/codemod", - "version": "9.0.6", + "version": "9.0.7", "description": "A collection of codemod scripts written with JSCodeshift", "keywords": [ "storybook" diff --git a/code/lib/core-webpack/package.json b/code/lib/core-webpack/package.json index 585661ea427a..a54e167403b3 100644 --- a/code/lib/core-webpack/package.json +++ b/code/lib/core-webpack/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/core-webpack", - "version": "9.0.6", + "version": "9.0.7", "description": "Storybook framework-agnostic API", "keywords": [ "storybook" diff --git a/code/lib/create-storybook/package.json b/code/lib/create-storybook/package.json index 68bb50c4d0d8..c3005c5c93ca 100644 --- a/code/lib/create-storybook/package.json +++ b/code/lib/create-storybook/package.json @@ -1,6 +1,6 @@ { "name": "create-storybook", - "version": "9.0.6", + "version": "9.0.7", "description": "Initialize Storybook into your project", "homepage": "https://github.com/storybookjs/storybook/tree/next/code/lib/create-storybook", "bugs": { diff --git a/code/lib/create-storybook/src/generators/ANGULAR/index.ts b/code/lib/create-storybook/src/generators/ANGULAR/index.ts index 376ef8af5a08..f4d43fed83b5 100644 --- a/code/lib/create-storybook/src/generators/ANGULAR/index.ts +++ b/code/lib/create-storybook/src/generators/ANGULAR/index.ts @@ -76,7 +76,6 @@ const generator: Generator<{ projectName: string }> = async ( }, 'angular', { - extraAddons: [`@storybook/addon-onboarding`], extraPackages: [ angularVersion ? `@angular-devkit/build-angular@${angularVersion}` diff --git a/code/lib/create-storybook/src/generators/EMBER/index.ts b/code/lib/create-storybook/src/generators/EMBER/index.ts index 0ac57da9e7a7..c7283cfd96e4 100644 --- a/code/lib/create-storybook/src/generators/EMBER/index.ts +++ b/code/lib/create-storybook/src/generators/EMBER/index.ts @@ -8,9 +8,7 @@ const generator: Generator = async (packageManager, npmOptions, options) => { npmOptions, { ...options, builder: CoreBuilder.Webpack5 }, 'ember', - { - staticDir: 'dist', - }, + { staticDir: 'dist' }, 'ember' ); }; diff --git a/code/lib/create-storybook/src/generators/NEXTJS/index.ts b/code/lib/create-storybook/src/generators/NEXTJS/index.ts index 7b87f1a3cd62..34a9b7ed2145 100644 --- a/code/lib/create-storybook/src/generators/NEXTJS/index.ts +++ b/code/lib/create-storybook/src/generators/NEXTJS/index.ts @@ -17,11 +17,7 @@ const generator: Generator = async (packageManager, npmOptions, options) => { npmOptions, { ...options, builder: CoreBuilder.Webpack5 }, 'react', - { - staticDir, - extraAddons: [`@storybook/addon-onboarding`], - webpackCompiler: ({ builder }) => undefined, - }, + { staticDir, webpackCompiler: () => undefined }, 'nextjs' ); }; diff --git a/code/lib/create-storybook/src/generators/REACT/index.ts b/code/lib/create-storybook/src/generators/REACT/index.ts index b75402eec116..b87e825b3f8f 100644 --- a/code/lib/create-storybook/src/generators/REACT/index.ts +++ b/code/lib/create-storybook/src/generators/REACT/index.ts @@ -11,7 +11,6 @@ const generator: Generator = async (packageManager, npmOptions, options) => { await baseGenerator(packageManager, npmOptions, options, 'react', { extraPackages, webpackCompiler: ({ builder }) => (builder === CoreBuilder.Webpack5 ? 'swc' : undefined), - extraAddons: [`@storybook/addon-onboarding`], }); }; diff --git a/code/lib/create-storybook/src/generators/REACT_NATIVE_WEB/index.ts b/code/lib/create-storybook/src/generators/REACT_NATIVE_WEB/index.ts index 957c6446fe73..c8846e7dc267 100644 --- a/code/lib/create-storybook/src/generators/REACT_NATIVE_WEB/index.ts +++ b/code/lib/create-storybook/src/generators/REACT_NATIVE_WEB/index.ts @@ -20,10 +20,7 @@ const generator: Generator = async (packageManager, npmOptions, options) => { npmOptions, options, 'react', - { - extraPackages, - extraAddons: [`@storybook/addon-onboarding`], - }, + { extraPackages }, 'react-native-web-vite' ); diff --git a/code/lib/create-storybook/src/generators/REACT_SCRIPTS/index.ts b/code/lib/create-storybook/src/generators/REACT_SCRIPTS/index.ts index 6b02bc39798c..d4b485e3dbc3 100644 --- a/code/lib/create-storybook/src/generators/REACT_SCRIPTS/index.ts +++ b/code/lib/create-storybook/src/generators/REACT_SCRIPTS/index.ts @@ -48,7 +48,7 @@ const generator: Generator = async (packageManager, npmOptions, options) => { // Miscellaneous dependency to add to be sure Storybook + CRA is working fine with Yarn PnP mode extraPackages.push('prop-types'); - const extraAddons = [`@storybook/preset-create-react-app`, `@storybook/addon-onboarding`]; + const extraAddons = [`@storybook/preset-create-react-app`]; await baseGenerator( packageManager, diff --git a/code/lib/create-storybook/src/generators/VUE3/index.ts b/code/lib/create-storybook/src/generators/VUE3/index.ts index c1c2ffc54758..c8fbc25fa6c4 100644 --- a/code/lib/create-storybook/src/generators/VUE3/index.ts +++ b/code/lib/create-storybook/src/generators/VUE3/index.ts @@ -4,7 +4,6 @@ import type { Generator } from '../types'; const generator: Generator = async (packageManager, npmOptions, options) => { await baseGenerator(packageManager, npmOptions, options, 'vue3', { - extraAddons: [`@storybook/addon-onboarding`], extraPackages: async ({ builder }) => { return builder === CoreBuilder.Webpack5 ? ['vue-loader@^17.0.0', '@vue/compiler-sfc@^3.2.0'] diff --git a/code/lib/create-storybook/src/generators/WEBPACK_REACT/index.ts b/code/lib/create-storybook/src/generators/WEBPACK_REACT/index.ts index e4b40f479994..d0e5c9113cfe 100644 --- a/code/lib/create-storybook/src/generators/WEBPACK_REACT/index.ts +++ b/code/lib/create-storybook/src/generators/WEBPACK_REACT/index.ts @@ -4,7 +4,6 @@ import type { Generator } from '../types'; const generator: Generator = async (packageManager, npmOptions, options) => { await baseGenerator(packageManager, npmOptions, options, 'react', { - extraAddons: [`@storybook/addon-onboarding`], webpackCompiler: ({ builder }) => (builder === CoreBuilder.Webpack5 ? 'swc' : undefined), }); }; diff --git a/code/lib/create-storybook/src/generators/baseGenerator.ts b/code/lib/create-storybook/src/generators/baseGenerator.ts index d68fcf54feec..de9805d4c8f8 100644 --- a/code/lib/create-storybook/src/generators/baseGenerator.ts +++ b/code/lib/create-storybook/src/generators/baseGenerator.ts @@ -291,11 +291,14 @@ export async function baseGenerator( extraAddons.push('@chromatic-com/storybook@^4'); } - // Add @storybook/addon-docs when docs feature is selected if (features.includes('docs')) { extraAddons.push('@storybook/addon-docs'); } + if (features.includes('onboarding')) { + extraAddons.push('@storybook/addon-onboarding'); + } + // added to main.js const addons = [ ...(compiler ? [`@storybook/addon-webpack5-compiler-${compiler}`] : []), diff --git a/code/lib/create-storybook/src/generators/types.ts b/code/lib/create-storybook/src/generators/types.ts index 43d433ba0a90..5da1bce268e2 100644 --- a/code/lib/create-storybook/src/generators/types.ts +++ b/code/lib/create-storybook/src/generators/types.ts @@ -46,7 +46,7 @@ export type Generator = ( commandOptions?: CommandOptions ) => Promise; -export type GeneratorFeature = 'docs' | 'test'; +export type GeneratorFeature = 'docs' | 'test' | 'onboarding'; export type CommandOptions = { packageManager: PackageManagerName; diff --git a/code/lib/create-storybook/src/initiate.ts b/code/lib/create-storybook/src/initiate.ts index 8fb224c17e5d..60b9f856e575 100644 --- a/code/lib/create-storybook/src/initiate.ts +++ b/code/lib/create-storybook/src/initiate.ts @@ -53,6 +53,17 @@ import { currentDirectoryIsEmpty, scaffoldNewProject } from './scaffold-new-proj const logger = console; +const ONBOARDING_PROJECT_TYPES = [ + ProjectType.REACT, + ProjectType.REACT_SCRIPTS, + ProjectType.REACT_NATIVE_WEB, + ProjectType.REACT_PROJECT, + ProjectType.WEBPACK_REACT, + ProjectType.NEXTJS, + ProjectType.VUE3, + ProjectType.ANGULAR, +]; + const installStorybook = async ( projectType: Project, packageManager: JsPackageManager, @@ -440,12 +451,16 @@ export async function doInitiate(options: CommandOptions): Promise< if (isInteractive) { selectedFeatures.add('test'); } + if (newUser) { + selectedFeatures.add('onboarding'); + } } const telemetryFeatures = { dev: true, docs: selectedFeatures.has('docs'), test: selectedFeatures.has('test'), + onboarding: selectedFeatures.has('onboarding'), }; // Check if the current directory is empty. @@ -577,6 +592,10 @@ export async function doInitiate(options: CommandOptions): Promise< } } + if (selectedFeatures.has('onboarding') && !ONBOARDING_PROJECT_TYPES.includes(projectType)) { + selectedFeatures.delete('onboarding'); + } + if (!options.skipInstall) { await packageManager.installDependencies(); } diff --git a/code/lib/csf-plugin/package.json b/code/lib/csf-plugin/package.json index c6dfc94c2558..7db6a83b3d25 100644 --- a/code/lib/csf-plugin/package.json +++ b/code/lib/csf-plugin/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/csf-plugin", - "version": "9.0.6", + "version": "9.0.7", "description": "Enrich CSF files via static analysis", "keywords": [ "storybook" diff --git a/code/lib/eslint-plugin/package.json b/code/lib/eslint-plugin/package.json index ffcabcc65f1f..82ccf81b48bc 100644 --- a/code/lib/eslint-plugin/package.json +++ b/code/lib/eslint-plugin/package.json @@ -1,6 +1,6 @@ { "name": "eslint-plugin-storybook", - "version": "9.0.6", + "version": "9.0.7", "description": "Best practice rules for Storybook", "keywords": [ "eslint", diff --git a/code/lib/react-dom-shim/package.json b/code/lib/react-dom-shim/package.json index 451abc6e310a..ca2ab370439f 100644 --- a/code/lib/react-dom-shim/package.json +++ b/code/lib/react-dom-shim/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/react-dom-shim", - "version": "9.0.6", + "version": "9.0.7", "description": "", "keywords": [ "storybook" diff --git a/code/package.json b/code/package.json index 58f005ad3392..0278597e8d47 100644 --- a/code/package.json +++ b/code/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/root", - "version": "9.0.6", + "version": "9.0.7", "private": true, "description": "Storybook root", "homepage": "https://storybook.js.org/", @@ -283,5 +283,6 @@ "Dependency Upgrades" ] ] - } + }, + "deferredNextVersion": "9.0.8" } diff --git a/code/presets/create-react-app/package.json b/code/presets/create-react-app/package.json index 6e1746dd4e53..aecc37eac254 100644 --- a/code/presets/create-react-app/package.json +++ b/code/presets/create-react-app/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/preset-create-react-app", - "version": "9.0.6", + "version": "9.0.7", "description": "Storybook for Create React App preset", "keywords": [ "storybook" diff --git a/code/presets/react-webpack/package.json b/code/presets/react-webpack/package.json index e7ebb8a42e11..a973bf27a8ec 100644 --- a/code/presets/react-webpack/package.json +++ b/code/presets/react-webpack/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/preset-react-webpack", - "version": "9.0.6", + "version": "9.0.7", "description": "Storybook for React: Develop React Component in isolation with Hot Reloading", "keywords": [ "storybook" diff --git a/code/presets/server-webpack/package.json b/code/presets/server-webpack/package.json index 7056640fcff0..123794b6f79a 100644 --- a/code/presets/server-webpack/package.json +++ b/code/presets/server-webpack/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/preset-server-webpack", - "version": "9.0.6", + "version": "9.0.7", "description": "Storybook for Server: View HTML snippets from a server in isolation with Hot Reloading.", "keywords": [ "storybook" diff --git a/code/renderers/html/package.json b/code/renderers/html/package.json index 47f791acb15b..4271afe85a36 100644 --- a/code/renderers/html/package.json +++ b/code/renderers/html/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/html", - "version": "9.0.6", + "version": "9.0.7", "description": "Storybook HTML renderer", "keywords": [ "storybook" diff --git a/code/renderers/preact/package.json b/code/renderers/preact/package.json index 98826cf6df7f..3ae3abf095c6 100644 --- a/code/renderers/preact/package.json +++ b/code/renderers/preact/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/preact", - "version": "9.0.6", + "version": "9.0.7", "description": "Storybook Preact renderer", "keywords": [ "storybook" diff --git a/code/renderers/react/package.json b/code/renderers/react/package.json index 85bc717a42ec..5547dc1ffb62 100644 --- a/code/renderers/react/package.json +++ b/code/renderers/react/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/react", - "version": "9.0.6", + "version": "9.0.7", "description": "Storybook React renderer", "keywords": [ "storybook" diff --git a/code/renderers/server/package.json b/code/renderers/server/package.json index ceb550dec136..a4d7f9e16280 100644 --- a/code/renderers/server/package.json +++ b/code/renderers/server/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/server", - "version": "9.0.6", + "version": "9.0.7", "description": "Storybook Server renderer", "keywords": [ "storybook" diff --git a/code/renderers/svelte/package.json b/code/renderers/svelte/package.json index 5ca9996914c6..9fd45dfae317 100644 --- a/code/renderers/svelte/package.json +++ b/code/renderers/svelte/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/svelte", - "version": "9.0.6", + "version": "9.0.7", "description": "Storybook Svelte renderer", "keywords": [ "storybook" diff --git a/code/renderers/vue3/package.json b/code/renderers/vue3/package.json index bf3f073eb91d..4415be6ee2b1 100644 --- a/code/renderers/vue3/package.json +++ b/code/renderers/vue3/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/vue3", - "version": "9.0.6", + "version": "9.0.7", "description": "Storybook Vue 3 renderer", "keywords": [ "storybook" diff --git a/code/renderers/web-components/package.json b/code/renderers/web-components/package.json index afad4ecf0c42..adfd9fed3d0a 100644 --- a/code/renderers/web-components/package.json +++ b/code/renderers/web-components/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/web-components", - "version": "9.0.6", + "version": "9.0.7", "description": "Storybook web-components renderer", "keywords": [ "lit", diff --git a/code/yarn.lock b/code/yarn.lock index 41c2fb00707a..63dd75b88f4c 100644 --- a/code/yarn.lock +++ b/code/yarn.lock @@ -6034,6 +6034,8 @@ __metadata: resolution: "@storybook/addon-themes@workspace:addons/themes" dependencies: "@storybook/icons": "npm:^1.4.0" + react: "npm:^18.2.0" + react-dom: "npm:^18.2.0" ts-dedent: "npm:^2.0.0" typescript: "npm:^5.8.3" peerDependencies: diff --git a/docs/_snippets/init-command.md b/docs/_snippets/init-command.md index db2da5924dfd..851b1da7192f 100644 --- a/docs/_snippets/init-command.md +++ b/docs/_snippets/init-command.md @@ -1,11 +1,11 @@ ```shell renderer="common" language="js" packageManager="npm" -npx storybook@next init +npx storybook@latest init ``` ```shell renderer="common" language="js" packageManager="pnpm" -pnpm dlx storybook@next init +pnpm dlx storybook@latest init ``` ```shell renderer="common" language="js" packageManager="yarn" -yarn dlx storybook@next init +yarn dlx storybook@latest init ``` diff --git a/docs/_snippets/migrate-csf-2-to-3.md b/docs/_snippets/migrate-csf-2-to-3.md new file mode 100644 index 000000000000..6c78aff509b3 --- /dev/null +++ b/docs/_snippets/migrate-csf-2-to-3.md @@ -0,0 +1,11 @@ +```shell renderer="common" language="js" packageManager="npm" +npx storybook migrate csf-2-to-3 --glob="**/*.stories.tsx" --parser=tsx +``` + +```shell renderer="common" language="js" packageManager="pnpm" +pnpm exec storybook migrate csf-2-to-3 --glob="**/*.stories.tsx" --parser=tsx +``` + +```shell renderer="common" language="js" packageManager="yarn" +yarn exec storybook migrate csf-2-to-3 --glob="**/*.stories.tsx" --parser=tsx +``` diff --git a/docs/_snippets/storybook-upgrade.md b/docs/_snippets/storybook-upgrade.md index 3b71ef4c4d98..7d1921e6bd44 100644 --- a/docs/_snippets/storybook-upgrade.md +++ b/docs/_snippets/storybook-upgrade.md @@ -1,11 +1,11 @@ ```shell renderer="common" language="js" packageManager="npm" -npx storybook@next upgrade +npx storybook@latest upgrade ``` ```shell renderer="common" language="js" packageManager="pnpm" -pnpm dlx storybook@next upgrade +pnpm dlx storybook@latest upgrade ``` ```shell renderer="common" language="js" packageManager="yarn" -yarn dlx storybook@next upgrade +yarn dlx storybook@latest upgrade ``` diff --git a/docs/api/csf/csf-factories.mdx b/docs/api/csf/csf-factories.mdx index 39aa278362bd..0f8f76f9cc43 100644 --- a/docs/api/csf/csf-factories.mdx +++ b/docs/api/csf/csf-factories.mdx @@ -6,337 +6,6 @@ tab: title: CSF Factories (Experimental) --- - - - - CSF Factories are currently only supported in [React](?renderer=react) projects. - - - - - - - - This is an experimental feature and (though unlikely) the API may change in future releases. We [welcome feedback](https://github.com/storybookjs/storybook/discussions/30112) and contributions to help improve this feature. - - CSF Factories are the next evolution of Storybook's Component Story Format (CSF). This new API uses a pattern called factory functions to provide full type safety to your Storybook stories, making it easier to configure addons correctly and unlocking the full potential of Storybook's features. -This reference will provide an overview of the API and a migration guide to upgrade from CSF 3. - -## Overview - -The CSF Factories API is composed of four main functions to help you write stories. Note how three of the functions operate as factories, each producing the next function in the chain (`definePreview` โ†’ `preview.meta` โ†’ `meta.story`), providing full type safety at each step. - -### `defineMain` - -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, nextjs-vite) -import { defineMain } from '@storybook/your-framework/node'; - -export default defineMain({ - framework: '@storybook/your-framework', - stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'], - addons: ['@storybook/addon-a11y'], -}); -``` - -### `definePreview` - -Similarly, the `definePreview` function specifies your project's story configuration. This function is also type-safe and will infer types throughout your project. - -Importantly, by specifying addons here, their types will be available throughout your project, enabling autocompletion and type checking. - -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, nextjs-vite) -import { definePreview } from '@storybook/your-framework'; -import addonA11y from '@storybook/addon-a11y'; - -export default definePreview({ - // ๐Ÿ‘‡ Add your addons here - addons: [addonA11y()], - parameters: { - // type-safe! - a11y: { - options: { xpath: true }, - }, - }, -}); -``` - - - The preview configuration will be automatically updated to reference the necessary addons when installing an addon via `npx storybook add ` or running `storybook dev`. - - -### `preview.meta` - -The `meta` function on the `preview` object is used to define the [metadata for your stories](./index.mdx#default-export). It accepts an object containing the `component`, `title`, `parameters`, and other story properties. - -```ts title="Button.stories.js|ts" -// Learn about the # subpath import: https://storybook.js.org/docs/api/csf/csf-factories#subpath-imports -import preview from '#.storybook/preview'; - -import { Button } from './Button'; - -const meta = preview.meta({ - component: Button, - parameters: { - // type-safe! - layout: 'centered', - } -}); -export default meta; -``` - -### `meta.story` - -Finally, the `story` function on the `meta` object defines the stories. This function accepts an object containing the [`name`](../../writing-stories/index.mdx#rename-stories), [`args`](../../writing-stories/args.mdx), [`parameters`](../../writing-stories/parameters.mdx), and other story properties. - -```ts title="Button.stories.js|ts" -// ...from above -const meta = preview.meta({ /* ... */ }); - -export const Primary = meta.story({ - args: { - // type-safe! - primary: true, - }, -}); -``` - -### Subpath imports - -CSF Factories leverages subpath imports to simplify importing constructs from the preview file. While you can still use relative path imports, subpath imports offer a more convenient and maintainable approach: - -```ts -// โœ… Subpath imports won't break if you move story files around -import preview from '#.storybook/preview'; - -// โŒ Relative imports will break if you move story files around -import preview from '../../../.storybook/preview'; -``` - -See the manual migration steps for details about [configuring the necessary subpath imports](#1-add-subpath-import-in-packagejson). - -For more details, refer to the [subpath imports documentation](../../writing-stories/mocking-data-and-modules/mocking-modules.mdx#subpath-imports). - -## Upgrading from CSF 1, 2, or 3 - -You can upgrade your project's story files to CSF Factories incrementally or all at once. However, before using CSF Factories in a story file, you must upgrade your `.storybook/main.js|ts` and `.storybook/preview.js|ts` files. - -### 1. Add subpath import in `package.json` - -To be able to consistently import the preview file from any location in your project, you need to add a subpath import in your `package.json`. For more information, refer to the [subpath imports documentation](../../writing-stories/mocking-data-and-modules/mocking-modules.mdx#subpath-imports). - -```json title="package.json" -{ - "imports": { - "#*": ["./*", "./*.ts", "./*.tsx"], - }, -} -``` - -### 2. Update your main Storybook config file - -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, nextjs-vite) -+ import { defineMain } from '@storybook/your-framework/node'; -- import { StorybookConfig } from '@storybook/your-framework'; - -+ export default defineMain({ -- export const config: StorybookConfig = { - // ...current config -+ }); -- }; -- export default config; -``` - -### 3. Update your preview config file - -Update your `.storybook/preview.js|ts` file to use the new [`definePreview`](#definepreview) function. - -
-Which addons should be specified in `preview`? - -The ability for an addon to provide annotation types (`parameters`, `globals`, etc.) is new and not all addons support it yet. - -If an addon provides annotations (i.e. it distributes a `./preview` export), it can be imported in two ways: - -1. For official Storybook addons, you import the default export: - `import addonName from '@storybook/addon-name'` - -2. For community addons, you should import the entire module and access the addon from there: - `import * as addonName from 'community-addon-name'` - -
- -```diff title=".storybook/preview.js|ts" -// Replace your-framework with the framework you are using (e.g., react-vite, nextjs, nextjs-vite) -+ import { definePreview } from '@storybook/your-framework'; -- import type { Preview } from '@storybook/your-framework'; -// ๐Ÿ‘‡ Import the addons you are using -+ import addonA11y from '@storybook/addon-a11y'; - -+ export default definePreview({ -- export const preview: Preview = { - // ...current config - // ๐Ÿ‘‡ Add your addons here -+ addons: [addonA11y()], -+ }); -- }; -- export default preview; -``` - -### 4. Update your story files - -Story files have been updated for improved usability. With the new format: - -- Import the preview construct from the Storybook preview file -- The meta object is now created via the [`preview.meta`](#previewmeta) function and does not have to be exported as a default export -- Stories are now created from the meta object, via the [`meta.story`](#metastory) function - - -The examples below show the changes needed to upgrade a story file from CSF 3 to CSF Factories. You can also upgrade from CSF 1 or 2 using similar steps. - - -```diff title="Button.stories.js|ts" -// Learn about the # subpath import: https://storybook.js.org/docs/api/csf/csf-factories#subpath-imports -+ import preview from '#.storybook/preview'; -- import type { Meta, StoryObj } from '@storybook/your-framework'; - -import { Button } from './Button'; - -+ const meta = preview.meta({ -- const meta = { - // ...current meta -+ }); -- } satisfies Meta; -- export default meta; - -- type Story = StoryObj; - -+ export const Primary = meta.story({ -- export const Primary: Story = { - // ...current story -+ }); -- }; -``` - -Note that importing or manually applying any type to the meta or stories is no longer necessary. Thanks to the factory function pattern, the types are now inferred automatically. - -#### 4.1 Reusing story properties - -Previously, story properties such as `Story.args` or `Story.parameters` were accessed directly when reusing them in another story. While accessing them like this is still supported, it is deprecated in CSF Factories. - -All of the story properties are now contained within a new property called `composed` and should be accessed from that property instead. For instance, `Story.composed.args` or `Story.composed.parameters`. - -```diff title="Button.stories.js|ts" -// ...rest of file - -+ export const Primary = meta.story({ -- export const Primary: Story = { - args: { primary: true }, -+ }); -- }; - -+ export const PrimaryDisabled = meta.story({ -- export const PrimaryDisabled: Story = { - args: { -+ ...Primary.composed.args, -- ...Primary.args, - disabled: true, - } -+ }); -- }; -``` - - - The property name "composed" was chosen because the values within are composed from the story, its component meta, and the preview configuration. - - If you want to access the direct input to the story, you can use `Story.input` instead of `Story.composed`. - - -### 5. Update your Vitest setup file - -If you're using [Storybook's Vitest addon](../../writing-tests/integrations/vitest-addon.mdx), you can remove your Vitest setup file. - -If you are using [portable stories in Vitest](../portable-stories/portable-stories-vitest.mdx), you may use a Vitest setup file to configure your stories. This file must be updated to use the new CSF Factories format. - - -Note that this only applies if you use CSF Factories for all your tested stories. If you use a mix of CSF 1, 2, or 3 and CSF Factories, you must maintain two separate setup files. - - -```diff title="vitest.setup.js|ts" -import { beforeAll } from 'vitest'; -// ๐Ÿ‘‡ No longer necessary -- // Replace your-framework with the framework you are using, e.g. react-vite, nextjs, nextjs-vite, etc. -import { setProjectAnnotations } from '@storybook/your-framework'; -- import * as addonAnnotations from 'my-addon/preview'; -+ import preview from './.storybook/preview'; -- import * as previewAnnotations from './.storybook/preview'; - -// No longer necessary -- const annotations = setProjectAnnotations([previewAnnotations, addonAnnotations]); - -// Run Storybook's beforeAll hook -+ beforeAll(preview.composed.beforeAll); -- beforeAll(annotations.beforeAll); -``` - -### 6. Reusing stories in test files - -[Storybook's Vitest addon](../../writing-tests/integrations/vitest-addon.mdx) allows you to test your components directly inside Storybook. All the stories are automatically turned into Vitest tests, making integration seamless in your testing suite. - -If you cannot use Storybook Test, you can still reuse the stories in your test files using [portable stories](../portable-stories/portable-stories-vitest.mdx). In prior story formats, you had to compose the stories before rendering them in your test files. With CSF Factories, you can now reuse the stories directly. - -```diff title="Button.test.js|ts" -import { test, expect } from 'vitest'; -import { screen } from '@testing-library/react'; -- // Replace your-framework with the framework you are using, e.g. react-vite, nextjs, nextjs-vite, etc. -import { composeStories } from '@storybook/your-framework'; - -// Import all stories from the stories file -import * as stories from './Button.stories'; - -+ const { Primary } = stories; -- const { Primary } = composeStories(stories); - -test('renders primary button with default args', async () => { - // The run function will mount the component and run all of Storybook's lifecycle hooks - await Primary.run(); - const buttonElement = screen.getByText('Text coming from args in stories file!'); - expect(buttonElement).not.toBeNull(); -}); -``` - -The `Story` object also provides a `Component` property, enabling you to render the component with any method you choose, such as [Testing Library](https://testing-library.com/). You can also access its composed properties ([`args`](../../writing-stories/args.mdx), [`parameters`](../../writing-stories/parameters.mdx), etc.) via the `composed` property. - -Here's an example of how you can reuse a story in a test file by rendering its component: - -{/* prettier-ignore-start */} - -{/* prettier-ignore-end */} - -## Frequently asked questions (FAQ) - -### Will I have to migrate all of my stories to this new format? - -Storybook will continue to support CSF 1, [CSF 2](../../../release-6-5/docs/api/stories/csf.mdx), and [CSF 3](./index.mdx) for the foreseeable future. None of these prior formats are deprecated. - -While using CSF Factories, you can still use the older formats, as long as they are not mixed in the same file. If you want to migrate your existing files to the new format, refer to [the upgrade section](#upgrading-from-csf-3), above. - -### Will this format work with MDX docs pages? - -Yes, the [doc blocks](../../writing-docs/doc-blocks.mdx) used to reference stories in MDX files support the CSF Factories format with no changes needed. - -### How can I know more about this format and provide feedback? - -For more information on this experimental format's original proposal, refer to its [RFC on GitHub](https://github.com/storybookjs/storybook/discussions/30112). We welcome your comments! - - \ No newline at end of file +While this feature is experimental, we will be documenting progress in the [RFC](https://github.com/storybookjs/storybook/discussions/30112). We welcome your feedback! diff --git a/docs/api/csf/index.mdx b/docs/api/csf/index.mdx index ca3c9b012472..ba5472a0218b 100644 --- a/docs/api/csf/index.mdx +++ b/docs/api/csf/index.mdx @@ -173,6 +173,14 @@ The first option is the recommended solution if you follow the best practice of ## Upgrading from CSF 2 to CSF 3 + + +Storybook provides a codemod to help you upgrade from CSF 2 to CSF 3. You can run it with the following command: + + + + + In CSF 2, the named exports are always functions that instantiate a component, and those functions can be annotated with configuration options. For example: {/* prettier-ignore-start */} diff --git a/docs/get-started/frameworks/angular.mdx b/docs/get-started/frameworks/angular.mdx index 41818fa20220..48c1da7609f6 100644 --- a/docs/get-started/frameworks/angular.mdx +++ b/docs/get-started/frameworks/angular.mdx @@ -276,7 +276,7 @@ export const WithCustomProvider: Story = { The Storybook [Angular builder](https://angular.io/guide/glossary#builder) is a way to run Storybook in an Angular workspace. It is a drop-in replacement for running `storybook dev` and `storybook build` directly. -You can run `npx storybook@next automigrate` to try letting Storybook detect and automatically fix your configuration. Otherwise, you can follow the next steps to adjust your configuration manually. +You can run `npx storybook@latest automigrate` to try letting Storybook detect and automatically fix your configuration. Otherwise, you can follow the next steps to adjust your configuration manually. #### Do you have only one Angular project in your workspace? diff --git a/docs/versions/latest.json b/docs/versions/latest.json index 8362108863a5..e1f23991864e 100644 --- a/docs/versions/latest.json +++ b/docs/versions/latest.json @@ -1 +1 @@ -{"version":"9.0.6","info":{"plain":"- Addon Docs: Fix reference to global JSX namespace - [#31671](https://github.com/storybookjs/storybook/pull/31671), thanks @mrginglymus!\n- Angular: Improve Vite compatibility - [#31686](https://github.com/storybookjs/storybook/pull/31686), thanks @ndelangen!\n- Preview: Fix type issues - [#31537](https://github.com/storybookjs/storybook/pull/31537), thanks @mrginglymus!\n- Telemetry: Improve error handling - [#31656](https://github.com/storybookjs/storybook/pull/31656), thanks @ndelangen!"}} +{"version":"9.0.8","info":{"plain":"- Addon Docs: Fix SyntaxHighlighter \\\"Copy\\\" button by avoiding potentially mocked clipboard - [#31682](https://github.com/storybookjs/storybook/pull/31682), thanks @ghengeveld!\n- Addon Themes: Define missing React dependencies - [#31688](https://github.com/storybookjs/storybook/pull/31688), thanks @ghengeveld!\n- Addon-vitest: Fix adding with `--skip-install` failing missing packageJson invariant - [#31720](https://github.com/storybookjs/storybook/pull/31720), thanks @JReinhold!\n- AddonDocs: Remove export of blocks - [#31724](https://github.com/storybookjs/storybook/pull/31724), thanks @ndelangen!\n- Automigration: Enhance removeEssentials to convert options - [#31658](https://github.com/storybookjs/storybook/pull/31658), thanks @ndelangen!\n- CLI: Don't install addon-onboarding during minimal installs - [#31616](https://github.com/storybookjs/storybook/pull/31616), thanks @ghengeveld!"}} diff --git a/docs/versions/next.json b/docs/versions/next.json index aeb8f6849c0a..36033a183767 100644 --- a/docs/versions/next.json +++ b/docs/versions/next.json @@ -1 +1 @@ -{"version":"9.1.0-alpha.2","info":{"plain":"- Addon-Vitest: Properly merge configs - [#31629](https://github.com/storybookjs/storybook/pull/31629), thanks @valentinpalkovic!\n- Angular: Support v20 - [#31611](https://github.com/storybookjs/storybook/pull/31611), thanks @valentinpalkovic!\n- CLI: Respect --skip-install in postinstall scripts - [#31605](https://github.com/storybookjs/storybook/pull/31605), thanks @yannbf!\n- CLI: Update VTA version range for storybook init - [#31612](https://github.com/storybookjs/storybook/pull/31612), thanks @ghengeveld!\n- React Native Web: Include expo in babel transforms - [#31607](https://github.com/storybookjs/storybook/pull/31607), thanks @dannyhw!"}} +{"version":"9.1.0-alpha.4","info":{"plain":"- CSF Factories: Add parameters/globals types, `extend` API, portable stories - [#30601](https://github.com/storybookjs/storybook/pull/30601), thanks @kasperpeulen!"}} diff --git a/test-storybooks/external-docs/components/AccountForm.mdx b/test-storybooks/external-docs/components/AccountForm.mdx index 1048a938b871..d0fd645a9e7e 100644 --- a/test-storybooks/external-docs/components/AccountForm.mdx +++ b/test-storybooks/external-docs/components/AccountForm.mdx @@ -1,4 +1,4 @@ -import { Meta, Story } from '@storybook/addon-docs'; +import { Meta, Story } from '@storybook/addon-docs/blocks'; import * as AccountFormStories from './AccountForm.stories'; ## Docs for Account form diff --git a/test-storybooks/external-docs/components/Template.mdx b/test-storybooks/external-docs/components/Template.mdx index fc2a3cf935cf..2b27b2abe310 100644 --- a/test-storybooks/external-docs/components/Template.mdx +++ b/test-storybooks/external-docs/components/Template.mdx @@ -1,4 +1,4 @@ -import { Title, Description, ArgsTable, Stories, PRIMARY_STORY } from '@storybook/addon-docs'; +import { Title, Description, ArgsTable, Stories, PRIMARY_STORY } from '@storybook/addon-docs/blocks'; # This is a template! diff --git a/test-storybooks/external-docs/components/emoji-button.mdx b/test-storybooks/external-docs/components/emoji-button.mdx index 9aa0417cf745..658de90a1694 100644 --- a/test-storybooks/external-docs/components/emoji-button.mdx +++ b/test-storybooks/external-docs/components/emoji-button.mdx @@ -1,4 +1,4 @@ -import { Meta } from '@storybook/addon-docs'; +import { Meta } from '@storybook/addon-docs/blocks'; import * as EmojiButtonStories from './emoji-button.stories.tsx'; import Template from './Template.mdx'; diff --git a/test-storybooks/external-docs/pages/_app.js b/test-storybooks/external-docs/pages/_app.js index b1d0261547bb..06b851aec1d9 100644 --- a/test-storybooks/external-docs/pages/_app.js +++ b/test-storybooks/external-docs/pages/_app.js @@ -1,7 +1,7 @@ /* eslint-disable react/prop-types */ import React from 'react'; import 'nextra-theme-docs/style.css'; -import { ExternalDocs } from '@storybook/addon-docs'; +import { ExternalDocs } from '@storybook/addon-docs/blocks'; import * as reactAnnotations from '@storybook/react/preview'; import * as previewAnnotations from '../.storybook/preview'; diff --git a/test-storybooks/external-docs/pages/index.mdx b/test-storybooks/external-docs/pages/index.mdx index 6e2b480410ab..001c2345adb4 100644 --- a/test-storybooks/external-docs/pages/index.mdx +++ b/test-storybooks/external-docs/pages/index.mdx @@ -1,5 +1,5 @@ import Callout from 'nextra-theme-docs/callout'; -import { Title, Meta, Story, Canvas } from '@storybook/addon-docs'; +import { Title, Meta, Story, Canvas } from '@storybook/addon-docs/blocks'; import * as AccountFormStories from '../components/AccountForm.stories'; import * as ButtonStories from '../components/button.stories';