diff --git a/MIGRATION.md b/MIGRATION.md index 547996e8aba6..670f89c77ac8 100644 --- a/MIGRATION.md +++ b/MIGRATION.md @@ -42,6 +42,7 @@ - [Web Components](#web-components) - [Dropping default babel plugins in Webpack5-based projects](#dropping-default-babel-plugins-in-webpack5-based-projects) - [Deprecations which are now removed](#deprecations-which-are-now-removed) + - [Removed `passArgsFirst` option](#removed-passargsfirst-option) - [Methods and properties from AddonStore](#methods-and-properties-from-addonstore) - [Methods and properties from PreviewAPI](#methods-and-properties-from-previewapi) - [Removals in @storybook/types](#removals-in-storybooktypes) @@ -62,20 +63,20 @@ - [Source Doc block properties](#source-doc-block-properties) - [Canvas Doc block properties](#canvas-doc-block-properties) - [`Primary` Doc block properties](#primary-doc-block-properties) - - [`createChannel` from `@storybook/postmessage` and `@storybook/channel-websocket`](#createchannel-from-storybookpostmessage-and--storybookchannel-websocket) + - [`createChannel` from `@storybook/postmessage` and `@storybook/channel-websocket`](#createchannel-from-storybookpostmessage-and-storybookchannel-websocket) - [StoryStore and methods deprecated](#storystore-and-methods-deprecated) - [From version 7.5.0 to 7.6.0](#from-version-750-to-760) - - [CommonJS with Vite is deprecated](#commonjs-with-vite-is-deprecated) - - [Using implicit actions during rendering is deprecated](#using-implicit-actions-during-rendering-is-deprecated) - - [typescript.skipBabel deprecated](#typescriptskipbabel-deprecated) - - [Primary doc block accepts of prop](#primary-doc-block-accepts-of-prop) - - [Addons no longer need a peer dependency on React](#addons-no-longer-need-a-peer-dependency-on-react) + - [CommonJS with Vite is deprecated](#commonjs-with-vite-is-deprecated) + - [Using implicit actions during rendering is deprecated](#using-implicit-actions-during-rendering-is-deprecated) + - [typescript.skipBabel deprecated](#typescriptskipbabel-deprecated) + - [Primary doc block accepts of prop](#primary-doc-block-accepts-of-prop) + - [Addons no longer need a peer dependency on React](#addons-no-longer-need-a-peer-dependency-on-react) - [From version 7.4.0 to 7.5.0](#from-version-740-to-750) - - [`storyStoreV6` and `storiesOf` is deprecated](#storystorev6-and-storiesof-is-deprecated) - - [`storyIndexers` is replaced with `experimental_indexers`](#storyindexers-is-replaced-with-experimental_indexers) + - [`storyStoreV6` and `storiesOf` is deprecated](#storystorev6-and-storiesof-is-deprecated) + - [`storyIndexers` is replaced with `experimental_indexers`](#storyindexers-is-replaced-with-experimental_indexers) - [From version 7.0.0 to 7.2.0](#from-version-700-to-720) - - [Addon API is more type-strict](#addon-api-is-more-type-strict) - - [Addon-controls hideNoControlsWarning parameter is deprecated](#addon-controls-hidenocontrolswarning-parameter-is-deprecated) + - [Addon API is more type-strict](#addon-api-is-more-type-strict) + - [Addon-controls hideNoControlsWarning parameter is deprecated](#addon-controls-hidenocontrolswarning-parameter-is-deprecated) - [From version 6.5.x to 7.0.0](#from-version-65x-to-700) - [7.0 breaking changes](#70-breaking-changes) - [Dropped support for Node 15 and below](#dropped-support-for-node-15-and-below) @@ -101,7 +102,7 @@ - [Deploying build artifacts](#deploying-build-artifacts) - [Dropped support for file URLs](#dropped-support-for-file-urls) - [Serving with nginx](#serving-with-nginx) - - [Ignore story files from node\_modules](#ignore-story-files-from-node_modules) + - [Ignore story files from node_modules](#ignore-story-files-from-node_modules) - [7.0 Core changes](#70-core-changes) - [7.0 feature flags removed](#70-feature-flags-removed) - [Story context is prepared before for supporting fine grained updates](#story-context-is-prepared-before-for-supporting-fine-grained-updates) @@ -114,7 +115,7 @@ - [Addon-interactions: Interactions debugger is now default](#addon-interactions-interactions-debugger-is-now-default) - [7.0 Vite changes](#70-vite-changes) - [Vite builder uses Vite config automatically](#vite-builder-uses-vite-config-automatically) - - [Vite cache moved to node\_modules/.cache/.vite-storybook](#vite-cache-moved-to-node_modulescachevite-storybook) + - [Vite cache moved to node_modules/.cache/.vite-storybook](#vite-cache-moved-to-node_modulescachevite-storybook) - [7.0 Webpack changes](#70-webpack-changes) - [Webpack4 support discontinued](#webpack4-support-discontinued) - [Babel mode v7 exclusively](#babel-mode-v7-exclusively) @@ -164,7 +165,7 @@ - [Dropped addon-docs manual babel configuration](#dropped-addon-docs-manual-babel-configuration) - [Dropped addon-docs manual configuration](#dropped-addon-docs-manual-configuration) - [Autoplay in docs](#autoplay-in-docs) - - [Removed STORYBOOK\_REACT\_CLASSES global](#removed-storybook_react_classes-global) + - [Removed STORYBOOK_REACT_CLASSES global](#removed-storybook_react_classes-global) - [7.0 Deprecations and default changes](#70-deprecations-and-default-changes) - [storyStoreV7 enabled by default](#storystorev7-enabled-by-default) - [`Story` type deprecated](#story-type-deprecated) @@ -377,7 +378,6 @@ - [Packages renaming](#packages-renaming) - [Deprecated embedded addons](#deprecated-embedded-addons) - ## From version 7.x to 8.0.0 ### Manager addons are now rendered with React 18 @@ -385,13 +385,14 @@ The UI added to the manager via addons is now rendered with React 18. Example: + ```tsx -import { addons, types } from '@storybook/manager-api'; +import { addons, types } from "@storybook/manager-api"; -addons.register('my-addon', () => { - addons.add('my-addon/panel', { +addons.register("my-addon", () => { + addons.add("my-addon/panel", { type: types.PANEL, - title: 'My Addon', + title: "My Addon", // This will be called as a JSX element by react 18 render: ({ active }) => (active ?
Hello World
: null), }); @@ -429,8 +430,8 @@ In Storybook 7, we would automatically add frameworks-specific Vite plugins, e.g In Storybook 8 those plugins have to be added explicitly in the user's `vite.config.ts`: ```ts -import { defineConfig } from 'vite'; -import react from '@vitejs/plugin-react'; +import { defineConfig } from "vite"; +import react from "@vitejs/plugin-react"; // https://vitejs.dev/config/ export default defineConfig({ @@ -451,7 +452,7 @@ export default { export const ButtonClick = { play: async ({ args, canvasElement }) => { - await userEvent.click(within(canvasElement).getByRole('button')); + await userEvent.click(within(canvasElement).getByRole("button")); // args.onClick is a jest spy in 7.0 await expect(args.onClick).toHaveBeenCalled(); }, @@ -461,7 +462,7 @@ export const ButtonClick = { In Storybook 8 this feature is removed, and spies have to added explicitly: ```ts -import { fn } from '@storybook/test'; +import { fn } from "@storybook/test"; export default { component: Button, @@ -472,7 +473,7 @@ export default { export const ButtonClick = { play: async ({ args, canvasElement }) => { - await userEvent.click(within(canvasElement).getByRole('button')); + await userEvent.click(within(canvasElement).getByRole("button")); await expect(args.onClick).toHaveBeenCalled(); }, }; @@ -493,7 +494,7 @@ To summarize: Storybook now uses MDX3 under the hood. This change contains many improvements and a few small breaking changes that probably won't affect you. However we recommend checking the [migration notes from MDX here](https://mdxjs.com/blog/v3/). -#### Dropping support for *.stories.mdx (CSF in MDX) format and MDX1 support +#### Dropping support for \*.stories.mdx (CSF in MDX) format and MDX1 support In Storybook 7, we deprecated the ability of using MDX both for documentation and for defining stories in the same .stories.mdx file. It is now removed, and Storybook won't support .stories.mdx files anymore. We provide migration scripts to help you onto the new format. @@ -539,7 +540,7 @@ The fast-refresh implementation currently relies on the `react-refresh/babel` pa Furthermore, the existing implementation does not account for cases where fast-refresh might already be configured in a user's Babel configuration. Rather than filtering out existing configurations, our current approach could lead to duplications, resulting in a sub-optimal development experience. -We believe in empowering our users, and setting up fast-refresh manually is a straightforward process. The following configuration will configure fast-refresh if Storybook does not automatically pick up your fast-refresh configuration: +We believe in empowering our users, and setting up fast-refresh manually is a straightforward process. The following configuration will configure fast-refresh if Storybook does not automatically pick up your fast-refresh configuration: `package.json`: @@ -612,8 +613,8 @@ In Storybook 7, the file name `path/to/foo.bar.stories.js` would result in the [ ```js export default { - title: 'path/to/foo', -} + title: "path/to/foo", +}; ``` Alternatively, if you need to achieve a different behavior for a large number of files, you can provide a [custom indexer](https://storybook.js.org/docs/7.0/vue/configure/sidebar-and-urls#processing-custom-titles) to generate the titles dynamically. @@ -707,9 +708,9 @@ We feel `react-docgen` is the right tradeoff for most React projects. However, i ```js export default { typescript: { - reactDocgen: 'react-docgen-typescript', - } -} + reactDocgen: "react-docgen-typescript", + }, +}; ``` For more information see: https://storybook.js.org/docs/react/api/main-config-typescript#reactdocgen @@ -724,7 +725,7 @@ Starting in 8.0, Storybook requires Next.js 13.5 and up. Similar to how Next.js detects if SWC should be used, Storybook will follow more or less the same rules: -- If you use Next.js 14 or higher and you don't have a .babelrc file, Storybook will use SWC to transpile your code. +- If you use Next.js 14 or higher and you don't have a .babelrc file, Storybook will use SWC to transpile your code. - Even if you have a .babelrc file, Storybook will still use SWC to transpile your code if you set the experimental `experimental.forceSwcTransforms` flag to `true` in your `next.config.js`. #### Angular @@ -758,7 +759,7 @@ Until now, Storybook provided a set of default Babel plugins that were applied t // Add this to automatically import `h` from `preact` when needed "@babel/plugin-transform-react-jsx", { "importSource": "preact", - "runtime": "automatic" + "runtime": "automatic" } ], // Add this if you want to use TypeScript with Preact @@ -777,9 +778,9 @@ const config = { [ "@babel/plugin-transform-react-jsx", { "importSource": "preact", - "runtime": "automatic" + "runtime": "automatic" } - ], + ], "@babel/preset-typescript" ) return options; @@ -799,9 +800,27 @@ Until the 8.0 release, Storybook provided the `@babel/preset-env` preset for Web ### Deprecations which are now removed +#### Removed `passArgsFirst` option + +Since Storybook 6, we have had an option called `parameters.passArgsFirst` (default=`true`), which sallows you to pass the context to the story function first when set to `false.` We have removed this option. In Storybook 8.0, the args are always passed first, and as a second argument, the context is passed. + +```js +// Storybook < 8 +export default { + parameters: { + passArgsFirst: false, + }, +}; + +export const Button = (context) =>