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) => ;
+
+// Storybook >= 8
+export const Button = (args, context) => ;
+```
+
#### Methods and properties from AddonStore
-The following methods and properties from the class `AddonStore` in `@storybook/manager-api` are now removed:
+The following methods and properties from the class `AddonStore` in `@storybook/manager-api` are now removed:
- `serverChannel` -> Use `channel` instead
- `getServerChannel` -> Use `getChannel` instead
@@ -809,7 +828,7 @@ The following methods and properties from the class `AddonStore` in `@storybook
- `hasServerChannel` -> Use `hasChannel` instead
- `addPanel`
-The following methods and properties from the class `AddonStore` in `@storybook/preview-api` are now removed:
+The following methods and properties from the class `AddonStore` in `@storybook/preview-api` are now removed:
- `serverChannel` -> Use `channel` instead
- `getServerChannel` -> Use `getChannel` instead
@@ -854,7 +873,7 @@ import { setProjectAnnotations } from `@storybook/testing-react`.
The `StorybookViteConfig` type is now removed in favor of `StorybookConfig`:
```ts
-import type { StorybookConfig } from '@storybook/react-vite';
+import type { StorybookConfig } from "@storybook/react-vite";
```
#### props from WithTooltipComponent from @storybook/components
@@ -863,8 +882,8 @@ The deprecated properties `tooltipShown`, `closeOnClick`, and `onVisibilityChang
```tsx
...
@@ -877,10 +896,10 @@ The `LinkTo` (React component) direct import from `@storybook/addon-links` is no
```ts
// before
-import LinkTo from '@storybook/addon-links';
+import LinkTo from "@storybook/addon-links";
// after
-import LinkTo from '@storybook/addon-links/react';
+import LinkTo from "@storybook/addon-links/react";
```
#### DecoratorFn, Story, ComponentStory, ComponentStoryObj, ComponentStoryFn and ComponentMeta TypeScript types
@@ -905,11 +924,11 @@ export const Component = () => {
const someHandler = () => {
// Old method: api.navigateToSettingsPage('/settings/about');
- api.changeSettingsTab('about'); // the /settings path is not necessary anymore
+ api.changeSettingsTab("about"); // the /settings path is not necessary anymore
};
// ...
-}
+};
```
#### storyIndexers
@@ -921,11 +940,11 @@ The Storybook's main.js configuration property `storyIndexers` is now removed in
The following story and meta parameters are now removed:
```ts
-parameters.docs.iframeHeight // becomes docs.story.iframeHeight
-parameters.docs.inlineStories // becomes docs.story.inline
-parameters.jsx.transformSource // becomes parameters.docs.source.transform
-parameters.docs.transformSource // becomes parameters.docs.source.transform
-parameters.docs.source.transformSource // becomes parameters.docs.source.transform
+parameters.docs.iframeHeight; // becomes docs.story.iframeHeight
+parameters.docs.inlineStories; // becomes docs.story.inline
+parameters.jsx.transformSource; // becomes parameters.docs.source.transform
+parameters.docs.transformSource; // becomes parameters.docs.source.transform
+parameters.docs.source.transformSource; // becomes parameters.docs.source.transform
```
More info [here](#autodocs-changes) and [here](#source-block).
@@ -945,12 +964,15 @@ Additionally, given that CSF in MDX is not supported anymore, the following prop
The `collapseAll` and `expandAll` APIs (possibly used by addons) are now removed. Please emit events for these actions instead:
```ts
-import { STORIES_COLLAPSE_ALL, STORIES_EXPAND_ALL } from '@storybook/core-events';
-import { useStorybookApi } from '@storybook/manager-api';
+import {
+ STORIES_COLLAPSE_ALL,
+ STORIES_EXPAND_ALL,
+} from "@storybook/core-events";
+import { useStorybookApi } from "@storybook/manager-api";
-const api = useStorybookApi()
-api.collapseAll() // becomes api.emit(STORIES_COLLAPSE_ALL)
-api.expandAll() // becomes api.emit(STORIES_EXPAND_ALL)
+const api = useStorybookApi();
+api.collapseAll(); // becomes api.emit(STORIES_COLLAPSE_ALL)
+api.expandAll(); // becomes api.emit(STORIES_EXPAND_ALL)
```
#### Source Doc block properties
@@ -973,20 +995,20 @@ The following properties were removed from the Canvas Doc block:
The `name` prop is now removed in favor of the `of` property. [More info](#doc-blocks).
-#### `createChannel` from `@storybook/postmessage` and `@storybook/channel-websocket`
+#### `createChannel` from `@storybook/postmessage` and `@storybook/channel-websocket`
The `createChannel` APIs from both `@storybook/channel-websocket` and `@storybook/postmessage` are now removed. Please use `createBrowserChannel` instead, from the `@storybook/channels` package.
Additionally, the `PostmsgTransport` type is now removed in favor of `PostMessageTransport`.
-
#### StoryStore and methods deprecated
The StoryStore (`__STORYBOOK_STORY_STORE__` and `__STORYBOOK_PREVIEW__.storyStore`) are deprecated, and will no longer be accessible in Storybook 9.0.
In particular, the following methods on the `StoryStore` are deprecated and will be removed in 9.0:
- - `store.fromId()` - please use `preview.loadStory({ storyId })` instead.
- - `store.raw()` - please use `preview.extract()` instead.
+
+- `store.fromId()` - please use `preview.loadStory({ storyId })` instead.
+- `store.raw()` - please use `preview.extract()` instead.
Note that both these methods require initialization, so you should await `preview.ready()`.
@@ -1011,7 +1033,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();
},
@@ -1021,7 +1043,7 @@ export const ButtonClick = {
In Storybook 8 this feature will be removed, and spies have to added explicitly:
```ts
-import { fn } from '@storybook/test';
+import { fn } from "@storybook/test";
export default {
component: Button,
@@ -1032,7 +1054,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();
},
};
@@ -1069,8 +1091,8 @@ As of Storybook 7.6.0 the list of globalized packages can be imported like this:
```ts
// tsup.config.ts
-import { globalPackages as globalManagerPackages } from '@storybook/manager/globals';
-import { globalPackages as globalPreviewPackages } from '@storybook/preview/globals';
+import { globalPackages as globalManagerPackages } from "@storybook/manager/globals";
+import { globalPackages as globalPreviewPackages } from "@storybook/preview/globals";
const allGlobalPackages = [...globalManagerPackages, ...globalPreviewPackages];
```
@@ -1155,12 +1177,12 @@ The `type` property is now a required field, and the `id` property should not be
Here's a correct 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",
render: ({ active }) => (active ?
Hello World
: null),
});
});
@@ -1200,7 +1222,7 @@ If your `preview.js` file looks like this:
```js
export const parameters = {
- actions: { argTypesRegex: '^on[A-Z].*' },
+ actions: { argTypesRegex: "^on[A-Z].*" },
};
```
@@ -1209,7 +1231,7 @@ Please migrate it to use a default export instead:
```js
const preview = {
parameters: {
- actions: { argTypesRegex: '^on[A-Z].*' },
+ actions: { argTypesRegex: "^on[A-Z].*" },
},
};
export default preview;
@@ -1220,11 +1242,11 @@ Additionally, we introduced typings for that default export (Preview), so you ca
The `Preview` type will come from the Storybook package for the **renderer** you are using. For example, if you are using Angular, you will import it from `@storybook/angular`, or if you're using Vue3, you will import it from `@storybook/vue3`:
```ts
-import { Preview } from '@storybook/react';
+import { Preview } from "@storybook/react";
const preview: Preview = {
parameters: {
- actions: { argTypesRegex: '^on[A-Z].*' },
+ actions: { argTypesRegex: "^on[A-Z].*" },
},
};
export default preview;
@@ -1236,7 +1258,7 @@ In JavaScript projects using `preview.js`, it's also possible to use the `Previe
/** @type { import('@storybook/react').Preview } */
const preview = {
parameters: {
- actions: { argTypesRegex: '^on[A-Z].*' },
+ actions: { argTypesRegex: "^on[A-Z].*" },
},
};
export default preview;
@@ -1250,24 +1272,33 @@ If your main.js file looks like this:
```js
module.exports = {
- stories: ['../stories/**/*.stories.mdx', '../stories/**/*.stories.@(js|jsx|ts|tsx)'],
- framework: { name: '@storybook/react-vite' },
+ stories: [
+ "../stories/**/*.stories.mdx",
+ "../stories/**/*.stories.@(js|jsx|ts|tsx)",
+ ],
+ framework: { name: "@storybook/react-vite" },
};
```
Or like this:
```js
-export const stories = ['../stories/**/*.stories.mdx', '../stories/**/*.stories.@(js|jsx|ts|tsx)'];
-export const framework = { name: '@storybook/react-vite' };
+export const stories = [
+ "../stories/**/*.stories.mdx",
+ "../stories/**/*.stories.@(js|jsx|ts|tsx)",
+];
+export const framework = { name: "@storybook/react-vite" };
```
Please migrate it to use a default export instead:
```js
const config = {
- stories: ['../stories/**/*.stories.mdx', '../stories/**/*.stories.@(js|jsx|ts|tsx)'],
- framework: { name: '@storybook/react-vite' },
+ stories: [
+ "../stories/**/*.stories.mdx",
+ "../stories/**/*.stories.@(js|jsx|ts|tsx)",
+ ],
+ framework: { name: "@storybook/react-vite" },
};
export default config;
```
@@ -1277,11 +1308,14 @@ Additionally, we introduced typings for that default export (StorybookConfig), s
The `StorybookConfig` type will come from the Storybook package for the **framework** you are using, which relates to the package in the "framework" field you have in your main.ts file. For example, if you are using React Vite, you will import it from `@storybook/react-vite`:
```ts
-import { StorybookConfig } from '@storybook/react-vite';
+import { StorybookConfig } from "@storybook/react-vite";
const config: StorybookConfig = {
- stories: ['../stories/**/*.stories.mdx', '../stories/**/*.stories.@(js|jsx|ts|tsx)'],
- framework: { name: '@storybook/react-vite' },
+ stories: [
+ "../stories/**/*.stories.mdx",
+ "../stories/**/*.stories.@(js|jsx|ts|tsx)",
+ ],
+ framework: { name: "@storybook/react-vite" },
};
export default config;
```
@@ -1291,8 +1325,11 @@ In JavaScript projects using `main.js`, it's also possible to use the `Storybook
```ts
/** @type { import('@storybook/react-vite').StorybookConfig } */
const config = {
- stories: ['../stories/**/*.stories.mdx', '../stories/**/*.stories.@(js|jsx|ts|tsx)'],
- framework: { name: '@storybook/react-vite' },
+ stories: [
+ "../stories/**/*.stories.mdx",
+ "../stories/**/*.stories.@(js|jsx|ts|tsx)",
+ ],
+ framework: { name: "@storybook/react-vite" },
};
export default config;
```
@@ -1318,13 +1355,13 @@ To fix these errors, the addon will have to be re-released with a newer browser-
module.exports = {
presets: [
[
- '@babel/preset-env',
+ "@babel/preset-env",
{
shippedProposals: true,
- useBuiltIns: 'usage',
- corejs: '3',
+ useBuiltIns: "usage",
+ corejs: "3",
modules: false,
- targets: { chrome: '100' },
+ targets: { chrome: "100" },
},
],
],
@@ -1454,7 +1491,7 @@ Here's an example, in case you picked `@storybook/react-vite`:
export default {
// ... your configuration
framework: {
- name: '@storybook/react-vite',
+ name: "@storybook/react-vite",
options: {},
},
};
@@ -1470,7 +1507,7 @@ For React, what used to be:
export default {
reactOptions: { fastRefresh: true },
framework: {
- name: '@storybook/react-webpack5',
+ name: "@storybook/react-webpack5",
options: {},
},
};
@@ -1481,7 +1518,7 @@ Becomes:
```js
export default {
framework: {
- name: '@storybook/react-webpack5',
+ name: "@storybook/react-webpack5",
options: { fastRefresh: true },
},
};
@@ -1493,7 +1530,7 @@ For Angular, what used to be:
export default {
angularOptions: { enableIvy: true },
framework: {
- name: '@storybook/angular',
+ name: "@storybook/angular",
options: {},
},
};
@@ -1504,7 +1541,7 @@ Becomes:
```js
export default {
framework: {
- name: '@storybook/angular',
+ name: "@storybook/angular",
options: { enableIvy: true },
},
};
@@ -1536,7 +1573,7 @@ Becomes:
```js
export default {
framework: {
- name: '@storybook/react-webpack5',
+ name: "@storybook/react-webpack5",
options: {
builder: { lazyCompilation: true },
},
@@ -1554,10 +1591,10 @@ If you are using TypeScript you should import the `StorybookConfig` type from yo
For example:
```ts
-import type { StorybookConfig } from '@storybook/react-vite';
+import type { StorybookConfig } from "@storybook/react-vite";
const config: StorybookConfig = {
framework: {
- name: '@storybook/react-vite',
+ name: "@storybook/react-vite",
options: {},
},
// ... your configuration
@@ -1613,17 +1650,17 @@ In 7.0 the location of the standalone node API has moved to `@storybook/core-ser
If you used the React standalone API, for example, you might have written:
```js
-const buildStandalone = require('@storybook/react/standalone');
+const buildStandalone = require("@storybook/react/standalone");
const options = {};
-buildStandalone(options).then(() => console.log('done'));
+buildStandalone(options).then(() => console.log("done"));
```
In 7.0, you would now use:
```js
-const { build } = require('@storybook/core-server');
+const { build } = require("@storybook/core-server");
const options = {};
-build(options).then(() => console.log('done'));
+build(options).then(() => console.log("done"));
```
#### Change of root html IDs
@@ -1650,7 +1687,12 @@ In 7.0, this pattern will also match `.mdx` files (the new extension for docs fi
```js
export default {
- stories: [{ directory: '../path/to/directory', files: '**/*.stories.@(mdx|tsx|ts|jsx|js)' }],
+ stories: [
+ {
+ directory: "../path/to/directory",
+ files: "**/*.stories.@(mdx|tsx|ts|jsx|js)",
+ },
+ ],
};
```
@@ -1724,7 +1766,7 @@ Given the following `main.js`:
```js
export default {
- stories: ['../**/*.stories.*'],
+ stories: ["../**/*.stories.*"],
};
```
@@ -1732,7 +1774,7 @@ If you want to restore the previous behavior to include `node_modules`, you can
```js
export default {
- stories: ['../**/*.stories.*', '../**/node_modules/**/*.stories.*'],
+ stories: ["../**/*.stories.*", "../**/node_modules/**/*.stories.*"],
};
```
@@ -1959,11 +2001,11 @@ export const Default: Story = {
You can also use the `provide-style` decorator to provide an application-wide service:
```js
-import { provideAnimations } from '@angular/platform-browser/animations';
-import { moduleMetadata } from '@storybook/angular';
+import { provideAnimations } from "@angular/platform-browser/animations";
+import { moduleMetadata } from "@storybook/angular";
export default {
- title: 'Example',
+ title: "Example",
decorators: [
applicationConfig({
providers: [provideAnimations()],
@@ -1991,7 +2033,7 @@ For existing users, SvelteKit projects need to use the `@storybook/sveltekit` fr
```js
// .storybook/main.js
export default {
- framework: '@storybook/sveltekit',
+ framework: "@storybook/sveltekit",
};
```
@@ -2004,20 +2046,20 @@ In 6.x `@storybook/vue3` exported a Vue application instance called `app`. In 7.
Before:
```js
-import { app } from '@storybook/vue3';
-import Button from './Button.vue';
+import { app } from "@storybook/vue3";
+import Button from "./Button.vue";
-app.component('GlobalButton', Button);
+app.component("GlobalButton", Button);
```
After:
```js
-import { setup } from '@storybook/vue3';
-import Button from './Button.vue';
+import { setup } from "@storybook/vue3";
+import Button from "./Button.vue";
setup((app) => {
- app.component('GlobalButton', Button);
+ app.component("GlobalButton", Button);
});
```
@@ -2045,10 +2087,10 @@ These 2 packages replace `@storybook/addons`.
When adding addons to storybook, you can (for example) add panels:
```js
-import { addons } from '@storybook/manager-api';
+import { addons } from "@storybook/manager-api";
-addons.addPanel('my-panel', {
- title: 'My Panel',
+addons.addPanel("my-panel", {
+ title: "My Panel",
render: ({ active, key }) =>
My Panel
,
});
```
@@ -2072,11 +2114,11 @@ Here's an example of using the new API:
The `@storybook/preview-api` is used here, because the `useEffect` hook is used in a decorator.
```js
-import { useEffect, makeDecorator } from '@storybook/preview-api';
+import { useEffect, makeDecorator } from "@storybook/preview-api";
export const withMyAddon = makeDecorator({
- name: 'withMyAddon',
- parameterName: 'myAddon',
+ name: "withMyAddon",
+ parameterName: "myAddon",
wrapper: (getStory) => {
useEffect(() => {
// do something with the options
@@ -2155,7 +2197,7 @@ If your `.manager.js` config references `register.js` of any of the following ad
The default export from `@storybook/addons` has been removed. Please use the named exports instead:
```js
-import { addons } from '@storybook/addons';
+import { addons } from "@storybook/addons";
```
The named export has been available since 6.0 or earlier, so your updated code will be backwards-compatible with older versions of Storybook.
@@ -2222,7 +2264,7 @@ You can configure Autodocs in `main.js`:
module.exports = {
docs: {
autodocs: true, // see below for alternatives
- defaultName: 'Docs', // set to change the name of generated docs entries
+ defaultName: "Docs", // set to change the name of generated docs entries
},
};
```
@@ -2254,8 +2296,8 @@ Previously `.stories.mdx` files were used to both define and document stories. I
If you were using `.stories.mdx` files to write stories, we encourage you to move the stories to a CSF file, and _attach_ an `.mdx` file to that CSF file to document them. You can use the `Meta` block to attach a MDX file to a CSF file, and the `Story` block to render the stories:
```mdx
-import { Meta, Story } from '@storybook/blocks';
-import * as ComponentStories from './some-component.stories';
+import { Meta, Story } from "@storybook/blocks";
+import * as ComponentStories from "./some-component.stories";
@@ -2273,7 +2315,7 @@ By default docs entries are listed first for the component. You can sort them us
In Storybook 6.x, to create a unattached docs MDX file (that is, one not attached to story or a CSF file), you'd have to create a `.stories.mdx` file, and describe its location with the `Meta` doc block:
```mdx
-import { Meta } from '@storybook/addon-docs';
+import { Meta } from "@storybook/addon-docs";
```
@@ -2322,8 +2364,8 @@ Notice the `?raw` suffix in the markdown import is needed for this to work.
To reference a story in a MDX file, you should reference it with `of`:
```mdx
-import { Meta, Story } from '@storybook/blocks';
-import * as ComponentStories from './some-component.stories';
+import { Meta, Story } from "@storybook/blocks";
+import * as ComponentStories from "./some-component.stories";
@@ -2333,9 +2375,9 @@ import * as ComponentStories from './some-component.stories';
You can also reference a story from a different component:
```mdx
-import { Meta, Story } from '@storybook/blocks';
-import * as ComponentStories from './some-component.stories';
-import * as SecondComponentStories from './second-component.stories';
+import { Meta, Story } from "@storybook/blocks";
+import * as ComponentStories from "./some-component.stories";
+import * as SecondComponentStories from "./second-component.stories";
@@ -2367,8 +2409,8 @@ That also means the Canvas block no longer supports containing multiple stories
Here's a full example of the new API:
```mdx
-import { Meta, Canvas } from '@storybook/blocks';
-import * as ComponentStories from './some-component.stories';
+import { Meta, Canvas } from "@storybook/blocks";
+import * as ComponentStories from "./some-component.stories";
@@ -2434,9 +2476,9 @@ To override the theme, you can continue to use the `docs.theme` parameter.
If you want to override the MDX components supplied to your docs page, use the `MDXProvider` from `@mdx-js/react`:
```js
-import { MDXProvider } from '@mdx-js/react';
-import { DocsContainer } from '@storybook/blocks';
-import * as DesignSystem from 'your-design-system';
+import { MDXProvider } from "@mdx-js/react";
+import { DocsContainer } from "@storybook/blocks";
+import * as DesignSystem from "your-design-system";
export const MyDocsContainer = (props) => (
;
```
@@ -2610,11 +2652,11 @@ export const MyStory: Story = () => ;
However with the introduction of CSF3, the `Story` type has been deprecated in favor of two other types: `StoryFn` for CSF2 and `StoryObj` for CSF3.
```ts
-import type { StoryFn, StoryObj } from '@storybook/react';
+import type { StoryFn, StoryObj } from "@storybook/react";
export const MyCsf2Story: StoryFn = () => ;
export const MyCsf3Story: StoryObj = {
- render: () =>
+ render: () => ,
};
```
@@ -2643,24 +2685,24 @@ ComponentMeta -> Meta
Here are a few examples:
```ts
-import type { StoryFn, StoryObj } from '@storybook/react';
-import { Button, ButtonProps } from './Button';
+import type { StoryFn, StoryObj } from "@storybook/react";
+import { Button, ButtonProps } from "./Button";
// This works in 7.0, making the ComponentX types redundant.
const meta: Meta = { component: Button };
-export const CSF3Story: StoryObj = { args: { label: 'Label' } };
+export const CSF3Story: StoryObj = { args: { label: "Label" } };
export const CSF2Story: StoryFn = (args) => ;
-CSF2Story.args = { label: 'Label' };
+CSF2Story.args = { label: "Label" };
// Passing props directly still works as well.
const meta: Meta = { component: Button };
-export const CSF3Story: StoryObj = { args: { label: 'Label' } };
+export const CSF3Story: StoryObj = { args: { label: "Label" } };
export const CSF2Story: StoryFn = (args) => ;
-CSF2Story.args = { label: 'Label' };
+CSF2Story.args = { label: "Label" };
```
We have set up a codemod that attempts to automatically migrate your code for you (update the glob to suit your needs):
@@ -2678,9 +2720,9 @@ The "rendering" function that renderers (ex-frameworks) must export (`renderToDO
In 6.x you could import XFramework types:
```ts
-import type { ReactFramework } from '@storybook/react';
-import type { VueFramework } from '@storybook/vue';
-import type { SvelteFramework } from '@storybook/svelte';
+import type { ReactFramework } from "@storybook/react";
+import type { VueFramework } from "@storybook/vue";
+import type { SvelteFramework } from "@storybook/svelte";
// etc.
```
@@ -2688,9 +2730,9 @@ import type { SvelteFramework } from '@storybook/svelte';
Those are deprecated in 7.0 as they are renamed to:
```ts
-import type { ReactRenderer } from '@storybook/react';
-import type { VueRenderer } from '@storybook/vue';
-import type { SvelteRenderer } from '@storybook/svelte';
+import type { ReactRenderer } from "@storybook/react";
+import type { VueRenderer } from "@storybook/vue";
+import type { SvelteRenderer } from "@storybook/svelte";
// etc.
```
@@ -2700,27 +2742,27 @@ import type { SvelteRenderer } from '@storybook/svelte';
In 6.x you could import the type `DecoratorFn`:
```ts
-import type { DecoratorFn } from '@storybook/react';
+import type { DecoratorFn } from "@storybook/react";
```
This type is deprecated in 7.0, instead you can use the type `Decorator`, which is now available for all renderers:
```ts
-import type { Decorator } from '@storybook/react';
+import type { Decorator } from "@storybook/react";
// or
-import type { Decorator } from '@storybook/vue';
+import type { Decorator } from "@storybook/vue";
// or
-import type { Decorator } from '@storybook/svelte';
+import type { Decorator } from "@storybook/svelte";
// etc.
```
The type `Decorator` accepts a generic parameter `TArgs`. This can be used like this:
```tsx
-import type { Decorator } from '@storybook/react';
-import { LocaleProvider } from './locale';
+import type { Decorator } from "@storybook/react";
+import { LocaleProvider } from "./locale";
-const withLocale: Decorator<{ locale: 'en' | 'es' }> = (Story, { args }) => (
+const withLocale: Decorator<{ locale: "en" | "es" }> = (Story, { args }) => (
@@ -2772,7 +2814,7 @@ Example:
```js
// .storybook/manager.js
-import { addons } from '@storybook/addons';
+import { addons } from "@storybook/addons";
addons.setConfig({
showToolbar: false,
@@ -2842,12 +2884,13 @@ This might be considered a breaking change. However, we feel justified to releas
If you want to restore the old titles in the UI, you can customize your sidebar with the following code snippet in `.storybook/manager.js`:
```js
-import { addons } from '@storybook/addons';
-import startCase from 'lodash/startCase';
+import { addons } from "@storybook/addons";
+import startCase from "lodash/startCase";
addons.setConfig({
sidebar: {
- renderLabel: ({ name, type }) => (type === 'story' ? name : startCase(name)),
+ renderLabel: ({ name, type }) =>
+ type === "story" ? name : startCase(name),
},
});
```
@@ -2862,7 +2905,7 @@ Since CSF3 is experimental, we are introducing this technically breaking change
```js
// atoms/Button/Button.stories.js
-export default { title: 'Atoms/Button/Button' };
+export default { title: "Atoms/Button/Button" };
```
#### Auto-title always prefixes
@@ -2905,13 +2948,13 @@ In ancient versions of Storybook, addons were registered by referring to `addon-
Before:
```js
-module.exports = { addons: ['my-addon/register.js'] };
+module.exports = { addons: ["my-addon/register.js"] };
```
After:
```js
-module.exports = { addons: ['my-addon'] };
+module.exports = { addons: ["my-addon"] };
```
## From version 6.3.x to 6.4.0
@@ -2957,7 +3000,7 @@ Then edit your `.storybook/main.js` config:
```js
module.exports = {
core: {
- builder: 'webpack5',
+ builder: "webpack5",
},
};
```
@@ -2974,13 +3017,13 @@ If you don't specify a component file, it will be inferred from the file's locat
Consider a project configuration `/path/to/project/.storybook/main.js` containing:
```js
-module.exports = { stories: ['../src/**/*.stories.*'] };
+module.exports = { stories: ["../src/**/*.stories.*"] };
```
And the file `/path/to/project/src/components/Button.stories.tsx` containing the default export:
```js
-import { Button } from './Button';
+import { Button } from "./Button";
export default { component: Button };
// named exports...
```
@@ -3024,20 +3067,20 @@ If you are migrating to experimental CSF3, the following is compatible with 6.4
```ts
// CSF2 function stories, current API, will break in 7.0
-import type { Story } from '@storybook/';
+import type { Story } from "@storybook/";
// CSF3 object stories, will persist in 7.0
-import type { StoryObj } from '@storybook/';
+import type { StoryObj } from "@storybook/";
```
The following is compatible with 6.4 and also forward-compatible with anticipated 7.0 changes:
```ts
// CSF2 function stories, forward-compatible mode
-import type { StoryFn } from '@storybook/';
+import type { StoryFn } from "@storybook/";
// CSF3 object stories, using future 7.0 types
-import type { Story } from '@storybook//types-7-0';
+import type { Story } from "@storybook//types-7-0";
```
### Story Store v7
@@ -3070,7 +3113,7 @@ In 7.0, we're moving towards a model where the user specifies their framework in
```js
module.exports = {
// ... your existing config
- framework: '@storybook/react', // OR whatever framework you're using
+ framework: "@storybook/react", // OR whatever framework you're using
};
```
@@ -3083,7 +3126,7 @@ To activate the v7 mode set the feature flag in your `.storybook/main.js` config
```js
module.exports = {
// ... your existing config
- framework: '@storybook/react', // OR whatever framework you're using
+ framework: "@storybook/react", // OR whatever framework you're using
features: {
storyStoreV7: true,
},
@@ -3146,7 +3189,7 @@ export default {
parameters: {
options: {
storySort: {
- order: ['Introduction', '*'],
+ order: ["Introduction", "*"],
},
},
},
@@ -3177,7 +3220,7 @@ Storyshots is not currently compatible with the v7 store. However, you can use t
```js
module.exports = {
features: {
- storyStoreV7: !global.navigator?.userAgent?.match?.('jsdom'),
+ storyStoreV7: !global.navigator?.userAgent?.match?.("jsdom"),
},
};
```
@@ -3329,7 +3372,11 @@ After:
```js
// .storybook/main.js
module.exports = {
- staticDirs: ['../public', '../static', { from: '../foo/assets', to: '/assets' }],
+ staticDirs: [
+ "../public",
+ "../static",
+ { from: "../foo/assets", to: "/assets" },
+ ],
};
```
@@ -3374,7 +3421,7 @@ Then edit your `.storybook/main.js` config:
```js
module.exports = {
core: {
- builder: 'webpack5',
+ builder: "webpack5",
},
};
```
@@ -3440,7 +3487,7 @@ If you were using `argType.defaultValue` or relying on inference to set a defaul
export default {
component: MyComponent,
args: {
- argName: 'default-value',
+ argName: "default-value",
},
};
```
@@ -3452,7 +3499,7 @@ export default {
component: MyComponent,
argTypes: {
argName: {
- table: { defaultValue: { summary: 'SomeType' } },
+ table: { defaultValue: { summary: "SomeType" } },
},
},
};
@@ -3475,10 +3522,10 @@ To update your code, you should be able to global replace `@storybook/addon-docs
```js
// before
-import { Meta, Story } from '@storybook/addon-docs/blocks';
+import { Meta, Story } from "@storybook/addon-docs/blocks";
// after
-import { Meta, Story } from '@storybook/addon-docs';
+import { Meta, Story } from "@storybook/addon-docs";
```
#### Deprecated layout URL params
@@ -3512,19 +3559,19 @@ Storybook 6.2 for Angular uses `parameters.component` as the preferred way to sp
Consider the existing story from 6.1 or earlier:
```ts
-export default { title: 'Button' };
+export default { title: "Button" };
export const Basic = () => ({
component: Button,
- props: { label: 'Label' },
+ props: { label: "Label" },
});
```
From 6.2 this should be rewritten as:
```ts
-export default { title: 'Button', component: Button };
+export default { title: "Button", component: Button };
export const Basic = () => ({
- props: { label: 'Label' },
+ props: { label: "Label" },
});
```
@@ -3588,9 +3635,9 @@ If you depend upon these plugins being applied, install them and create a `postc
```js
module.exports = {
plugins: [
- require('postcss-flexbugs-fixes'),
- require('autoprefixer')({
- flexbox: 'no-2009',
+ require("postcss-flexbugs-fixes"),
+ require("autoprefixer")({
+ flexbox: "no-2009",
}),
],
};
@@ -3644,10 +3691,10 @@ Storybook HTML components are now exported directly from '@storybook/components'
```js
// before
-import { components } from '@storybook/components/html';
+import { components } from "@storybook/components/html";
// after
-import { components } from '@storybook/components';
+import { components } from "@storybook/components";
```
## From version 6.0.x to 6.1.0
@@ -3660,8 +3707,8 @@ The addon uses decorators which are set up automatically by a preset. The requir
```js
module.exports = {
- stories: ['../**/*.stories.js'],
- addons: ['@storybook/addon-backgrounds/register'],
+ stories: ["../**/*.stories.js"],
+ addons: ["@storybook/addon-backgrounds/register"],
};
```
@@ -3669,8 +3716,8 @@ To fix it, just replace `@storybook/addon-backgrounds/register` with `@storybook
```js
module.exports = {
- stories: ['../**/*.stories.js'],
- addons: ['@storybook/addon-backgrounds'],
+ stories: ["../**/*.stories.js"],
+ addons: ["@storybook/addon-backgrounds"],
};
```
@@ -3721,14 +3768,14 @@ Each item in the story store contains a field called `storyFn`, which is a fully
Before:
```js
-const { storyFn } = store.fromId('some--id');
+const { storyFn } = store.fromId("some--id");
console.log(storyFn());
```
After:
```js
-const { unboundStoryFn, applyLoaders } = store.fromId('some--id');
+const { unboundStoryFn, applyLoaders } = store.fromId("some--id");
const context = await applyLoaders();
console.log(unboundStoryFn(context));
```
@@ -3877,13 +3924,17 @@ This breaking change only affects you if your stories actually use the context,
Consider the following story that uses the context:
```js
-export const Dummy = ({ parameters }) =>
{JSON.stringify(parameters)}
;
+export const Dummy = ({ parameters }) => (
+
{JSON.stringify(parameters)}
+);
```
Here's an updated story for 6.0 that ignores the args object:
```js
-export const Dummy = (_args, { parameters }) =>
+);
```
Alternatively, if you want to opt out of the new behavior, you can add the following to your `.storybook/preview.js` config:
@@ -3947,7 +3998,7 @@ If you need to restore the old JSX handling behavior, you can configure `.storyb
module.exports = {
addons: [
{
- name: '@storybook/addon-docs',
+ name: "@storybook/addon-docs",
options: { configureJSX: false },
},
],
@@ -3964,7 +4015,7 @@ To restore the old behavior, or pass any MDX-specific babel options, you can con
module.exports = {
addons: [
{
- name: '@storybook/addon-docs',
+ name: "@storybook/addon-docs",
options: { mdxBabelOptions: { babelrc: true, configFile: true } },
},
],
@@ -4007,15 +4058,15 @@ Consider the following `main.js` config for `addon-knobs`:
```js
module.exports = {
- stories: ['../**/*.stories.js'],
- addons: ['@storybook/addon-knobs'],
+ stories: ["../**/*.stories.js"],
+ addons: ["@storybook/addon-knobs"],
};
```
In earlier versions of Storybook, this would automatically call `@storybook/addon-knobs/register`, which adds the knobs panel to the Storybook UI. As a user you would also add a decorator:
```js
-import { withKnobs } from '../index';
+import { withKnobs } from "../index";
addDecorator(withKnobs);
```
@@ -4026,8 +4077,8 @@ If you wish to disable this new behavior, you can modify your `main.js` to force
```js
module.exports = {
- stories: ['../**/*.stories.js'],
- addons: ['@storybook/addon-knobs/register'],
+ stories: ["../**/*.stories.js"],
+ addons: ["@storybook/addon-knobs/register"],
};
```
@@ -4086,7 +4137,7 @@ The `setStories`/`SET_STORIES` event has changed and now denormalizes global and
If you want the full denormalized parameters for a story, you can do something like:
```js
-import { combineParameters } from '@storybook/api';
+import { combineParameters } from "@storybook/api";
const story = data.stories[storyId];
const parameters = combineParameters(
@@ -4113,7 +4164,7 @@ npx sb@latest migrate upgrade-hierarchy-separators --glob="*/**/*.stories.@(tsx|
We also now default to showing "roots", which are non-expandable groupings in the sidebar for the top-level groups. If you'd like to disable this, set the `showRoots` option in `.storybook/manager.js`:
```js
-import { addons } from '@storybook/addons';
+import { addons } from "@storybook/addons";
addons.setConfig({
showRoots: false,
@@ -4211,7 +4262,7 @@ export const Example = () => ;
Example.story = {
parameters: {
storySource: {
- source: 'custom source',
+ source: "custom source",
},
},
};
@@ -4220,7 +4271,7 @@ Example.story = {
The MDX analog:
```jsx
-
+
```
@@ -4236,13 +4287,13 @@ In 5.3, `addons` paths were relative to the project root, which was inconsistent
So, for example, if you had:
```js
-module.exports = { addons: ['./.storybook/my-local-addon/register'] };
+module.exports = { addons: ["./.storybook/my-local-addon/register"] };
```
You'd need to update this to:
```js
-module.exports = { addons: ['./my-local-addon/register'] };
+module.exports = { addons: ["./my-local-addon/register"] };
```
#### Deprecated setAddon
@@ -4303,7 +4354,7 @@ To configure a11y now, you have to specify configuration using story parameters,
```js
export const parameters = {
a11y: {
- element: '#storybook-root',
+ element: "#storybook-root",
config: {},
options: {},
manual: true,
@@ -4324,11 +4375,11 @@ Consider the following example of its usage in `Button.stories.js`:
```jsx
// Button.stories.js
export default {
- title: 'Button',
+ title: "Button",
parameters: {
backgrounds: [
- { name: 'twitter', value: '#00aced', default: true },
- { name: 'facebook', value: '#3b5998' },
+ { name: "twitter", value: "#00aced", default: true },
+ { name: "facebook", value: "#3b5998" },
],
},
};
@@ -4339,13 +4390,13 @@ Here's an updated version of the example, using the new api:
```jsx
// Button.stories.js
export default {
- title: 'Button',
+ title: "Button",
parameters: {
backgrounds: {
- default: 'twitter',
+ default: "twitter",
values: [
- { name: 'twitter', value: '#00aced' },
- { name: 'facebook', value: '#3b5998' },
+ { name: "twitter", value: "#00aced" },
+ { name: "facebook", value: "#3b5998" },
],
},
},
@@ -4382,7 +4433,7 @@ Remove the addon-centered decorator and instead add a `layout` parameter:
```js
export const MyStory = () =>
my story
;
MyStory.story = {
- parameters: { layout: 'centered' },
+ parameters: { layout: "centered" },
};
```
@@ -4400,7 +4451,7 @@ You should use `addon.setConfig` to set them:
```js
// in .storybook/manager.js
-import { addons } from '@storybook/addons';
+import { addons } from "@storybook/addons";
addons.setConfig({
showRoots: false,
@@ -4426,7 +4477,7 @@ To load stories, use the `stories` field in `main.js`. You can pass a glob or ar
```js
// in .storybook/main.js
module.exports = {
- stories: ['../src/**/*.stories.js'],
+ stories: ["../src/**/*.stories.js"],
};
```
@@ -4436,9 +4487,9 @@ You can also pass an array of single file names if you want to be careful about
// in .storybook/main.js
module.exports = {
stories: [
- '../src/components/Button.stories.js',
- '../src/components/Table.stories.js',
- '../src/components/Page.stories.js',
+ "../src/components/Button.stories.js",
+ "../src/components/Table.stories.js",
+ "../src/components/Page.stories.js",
],
};
```
@@ -4484,8 +4535,8 @@ These files are now soft-deprecated, (_they still work, but over time we will pr
```js
module.exports = {
- stories: ['../**/*.stories.js'],
- addons: ['@storybook/addon-knobs'],
+ stories: ["../**/*.stories.js"],
+ addons: ["@storybook/addon-knobs"],
};
```
@@ -4497,11 +4548,11 @@ If you had a `presets.js` file before you can add the array of presets to the ma
```js
module.exports = {
- stories: ['../**/*.stories.js'],
+ stories: ["../**/*.stories.js"],
addons: [
- '@storybook/preset-create-react-app',
+ "@storybook/preset-create-react-app",
{
- name: '@storybook/addon-docs',
+ name: "@storybook/addon-docs",
options: { configureJSX: true },
},
],
@@ -4525,16 +4576,16 @@ This file can also be used to inject global stylesheets, fonts etc, into the pre
If you are setting storybook options in `config.js`, especially `theme`, you should migrate it to `manager.js`:
```js
-import { addons } from '@storybook/addons';
-import { create } from '@storybook/theming/create';
+import { addons } from "@storybook/addons";
+import { create } from "@storybook/theming/create";
const theme = create({
- base: 'light',
- brandTitle: 'My custom title',
+ base: "light",
+ brandTitle: "My custom title",
});
addons.setConfig({
- panelPosition: 'bottom',
+ panelPosition: "bottom",
theme,
});
```
@@ -4643,7 +4694,7 @@ The default viewports have been reduced to a smaller set, we think is enough for
You can get the old default back by adding the following to your `config.js`:
```js
-import { INITIAL_VIEWPORTS } from '@storybook/addon-viewport';
+import { INITIAL_VIEWPORTS } from "@storybook/addon-viewport";
addParameters({
viewport: {
@@ -4673,7 +4724,9 @@ For example, here's how to sort by story ID using `storySort`:
addParameters({
options: {
storySort: (a, b) =>
- a[1].kind === b[1].kind ? 0 : a[1].id.localeCompare(b[1].id, undefined, { numeric: true }),
+ a[1].kind === b[1].kind
+ ? 0
+ : a[1].id.localeCompare(b[1].id, undefined, { numeric: true }),
},
});
```
@@ -4719,7 +4772,9 @@ Storybook 5.1 relies on `core-js@^3.0.0` and therefore causes a conflict with An
{
"compilerOptions": {
"paths": {
- "core-js/es7/reflect": ["node_modules/core-js/proposals/reflect-metadata"],
+ "core-js/es7/reflect": [
+ "node_modules/core-js/proposals/reflect-metadata"
+ ],
"core-js/es6/*": ["node_modules/core-js/es"]
}
}
@@ -4794,7 +4849,7 @@ We're working on providing a better way of sorting stories for now the feature h
If you're using webpack's `require.context` to load stories, you can sort the execution of requires:
```js
-var context = require.context('../stories', true, /\.stories\.js$/);
+var context = require.context("../stories", true, /\.stories\.js$/);
var modules = context.keys();
// sort them
@@ -4864,8 +4919,8 @@ Here's an old configuration:
```js
addDecorator(
withOptions({
- name: 'Storybook',
- url: 'https://storybook.js.org',
+ name: "Storybook",
+ url: "https://storybook.js.org",
goFullScreen: false,
addonPanelInRight: true,
})
@@ -4875,18 +4930,18 @@ addDecorator(
And here's its new counterpart:
```js
-import { create } from '@storybook/theming/create';
+import { create } from "@storybook/theming/create";
addParameters({
options: {
theme: create({
- base: 'light',
- brandTitle: 'Storybook',
- brandUrl: 'https://storybook.js.org',
+ base: "light",
+ brandTitle: "Storybook",
+ brandUrl: "https://storybook.js.org",
// To control appearance:
// brandImage: 'http://url.of/some.svg',
}),
isFullscreen: false,
- panelPosition: 'right',
+ panelPosition: "right",
isToolshown: true,
},
});
@@ -4916,10 +4971,10 @@ The behavior of adding decorators to a kind has changed in SB5 ([#5781](https://
In SB4 it was possible to add decorators to only a subset of the stories of a kind.
```js
-storiesOf('Stories', module)
- .add('noncentered', () => 'Hello')
+storiesOf("Stories", module)
+ .add("noncentered", () => "Hello")
.addDecorator(centered)
- .add('centered', () => 'Hello');
+ .add("centered", () => "Hello");
```
The semantics has changed in SB5 so that calling `addDecorator` on a kind adds a decorator to all its stories, no matter the order. So in the previous example, both stories would be centered.
@@ -4927,9 +4982,9 @@ The semantics has changed in SB5 so that calling `addDecorator` on a kind adds a
To allow for a subset of the stories in a kind to be decorated, we've added the ability to add decorators to individual stories using parameters:
```js
-storiesOf('Stories', module)
- .add('noncentered', () => 'Hello')
- .add('centered', () => 'Hello', { decorators: [centered] });
+storiesOf("Stories", module)
+ .add("noncentered", () => "Hello")
+ .add("centered", () => "Hello", { decorators: [centered] });
```
### Addon backgrounds uses parameters
@@ -4946,7 +5001,7 @@ storiesOf('Stories', module)
You should replace it with:
```js
-storiesOf('Stories', module).addParameters({ backgrounds: options });
+storiesOf("Stories", module).addParameters({ backgrounds: options });
```
You can pass `backgrounds` parameters at the global level (via `addParameters` imported from `@storybook/react` et al.), and the story level (via the third argument to `.add()`).
@@ -4956,8 +5011,8 @@ You can pass `backgrounds` parameters at the global level (via `addParameters` i
In the options object for `@storybook/addon-cssresources`, the `name` attribute for each resource has been renamed to `id`. If you previously had:
```js
-import { withCssResources } from '@storybook/addon-cssresources';
-import { addDecorator } from '@storybook/react';
+import { withCssResources } from "@storybook/addon-cssresources";
+import { addDecorator } from "@storybook/react";
addDecorator(
withCssResources({
@@ -4975,8 +5030,8 @@ addDecorator(
You should replace it with:
```js
-import { withCssResources } from '@storybook/addon-cssresources';
-import { addDecorator } from '@storybook/react';
+import { withCssResources } from "@storybook/addon-cssresources";
+import { addDecorator } from "@storybook/react";
addDecorator(
withCssResources({
@@ -5004,7 +5059,7 @@ configureViewport(options);
You should replace it with:
```js
-import { addParameters } from '@storybook/react'; // or others
+import { addParameters } from "@storybook/react"; // or others
addParameters({ viewport: options });
```
@@ -5026,7 +5081,7 @@ configureA11y(options);
You should replace it with:
```js
-import { addParameters } from '@storybook/react'; // or others
+import { addParameters } from "@storybook/react"; // or others
addParameters({ a11y: options });
```
@@ -5042,19 +5097,19 @@ See the [a11y addon README](https://github.com/storybookjs/storybook/blob/master
If you previously had:
```js
-import centered from '@storybook/addon-centered';
+import centered from "@storybook/addon-centered";
```
You should replace it with the React or Vue version as appropriate
```js
-import centered from '@storybook/addon-centered/react';
+import centered from "@storybook/addon-centered/react";
```
or
```js
-import centered from '@storybook/addon-centered/vue';
+import centered from "@storybook/addon-centered/vue";
```
### New keyboard shortcuts defaults
@@ -5161,13 +5216,13 @@ at Object../node_modules/@storybook/components/dist/navigation/MenuLink.js (Menu
4.x introduces generic addon decorators that are not tied to specific view layers [#3555](https://github.com/storybookjs/storybook/pull/3555). So for example:
```js
-import { number } from '@storybook/addon-knobs/react';
+import { number } from "@storybook/addon-knobs/react";
```
Becomes:
```js
-import { number } from '@storybook/addon-knobs';
+import { number } from "@storybook/addon-knobs";
```
### Knobs select ordering
@@ -5339,7 +5394,7 @@ Knobs users: there was a bug in 3.2.x where using the knobs addon imported all f
In the case of React or React-Native, import knobs like this:
```js
-import { withKnobs, text, boolean, number } from '@storybook/addon-knobs/react';
+import { withKnobs, text, boolean, number } from "@storybook/addon-knobs/react";
```
In the case of Vue: `import { ... } from '@storybook/addon-knobs/vue';`
@@ -5367,10 +5422,10 @@ We're in the process of upgrading our addons APIs. As a first step, we've upgrad
Here's an example of using Notes and Info in 3.2 with the new API.
```js
-storiesOf('composition', module).add(
- 'new addons api',
- withInfo('see Notes panel for composition info')(
- withNotes({ text: 'Composition: Info(Notes())' })((context) => (
+storiesOf("composition", module).add(
+ "new addons api",
+ withInfo("see Notes panel for composition info")(
+ withNotes({ text: "Composition: Info(Notes())" })((context) => (
))
)
@@ -5482,17 +5537,17 @@ If you **are** using these addons, it takes two steps to migrate:
change `addons.js` like so:
```js
- import '@storybook/addon-actions/register';
- import '@storybook/addon-links/register';
+ import "@storybook/addon-actions/register";
+ import "@storybook/addon-links/register";
```
change `x.story.js` like so:
```js
- import React from 'react';
- import { storiesOf } from '@storybook/react';
- import { action } from '@storybook/addon-actions';
- import { linkTo } from '@storybook/addon-links';
+ import React from "react";
+ import { storiesOf } from "@storybook/react";
+ import { action } from "@storybook/addon-actions";
+ import { linkTo } from "@storybook/addon-links";
```
diff --git a/code/lib/preview-api/README-store.md b/code/lib/preview-api/README-store.md
index 2a74216ded2a..8e261bf30e65 100644
--- a/code/lib/preview-api/README-store.md
+++ b/code/lib/preview-api/README-store.md
@@ -51,18 +51,12 @@ Changing the args cause the story to be re-rendered with the new set of args.
### Using args in a story
-By default (starting in 6.0) the args will be passed to the story as first argument and the context as second:
+By default the args will be passed to the story as first argument and the context as second:
```js
const YourStory = ({ x, y } /*, context*/) => /* render your story using `x` and `y` */
```
-If you set the `parameters.options.passArgsFirst` option on a story to false, args are passed to a story in the context, preserving the pre-6.0 story API; like parameters, they are available as `context.args`.
-
-```js
-const YourStory = ({ args: { x, y }}) => /* render your story using `x` and `y` */
-```
-
### Arg types and values
Arg types are used by the docs addon to populate the props table and are documented there. They are controlled by `argTypes` and can (sometimes) be automatically inferred from type information about the story or the component rendered by the story.
diff --git a/code/lib/preview-api/src/modules/store/csf/prepareStory.test.ts b/code/lib/preview-api/src/modules/store/csf/prepareStory.test.ts
index d6e463eec382..0e76648dd5cb 100644
--- a/code/lib/preview-api/src/modules/store/csf/prepareStory.test.ts
+++ b/code/lib/preview-api/src/modules/store/csf/prepareStory.test.ts
@@ -107,16 +107,6 @@ describe('prepareStory', () => {
expect(parameters).toEqual({ __isArgsStory: true });
});
- it('does not set `__isArgsStory` if `passArgsFirst` is disabled', () => {
- const { parameters } = prepareStory(
- { id, name, parameters: { passArgsFirst: false }, moduleExport },
- { id, title },
- { render }
- );
-
- expect(parameters).toEqual({ passArgsFirst: false, __isArgsStory: false });
- });
-
it('does not set `__isArgsStory` if `render` does not take args', () => {
const { parameters } = prepareStory(
{ id, name, moduleExport },
@@ -417,30 +407,6 @@ describe('prepareStory', () => {
expect.objectContaining({ args: { one: 'mapped', two: 2, three: 3 } })
);
});
-
- it('passes args as the first argument to the story if `parameters.passArgsFirst` is true', () => {
- const renderMock = vi.fn();
- const firstStory = prepareStory(
- { id, name, args: { a: 1 }, parameters: { passArgsFirst: true }, moduleExport },
- { id, title },
- { render: renderMock }
- );
-
- firstStory.undecoratedStoryFn({ args: firstStory.initialArgs, ...firstStory } as any);
- expect(renderMock).toHaveBeenCalledWith(
- { a: 1 },
- expect.objectContaining({ args: { a: 1 } })
- );
-
- const secondStory = prepareStory(
- { id, name, args: { a: 1 }, parameters: { passArgsFirst: false }, moduleExport },
- { id, title },
- { render: renderMock }
- );
-
- secondStory.undecoratedStoryFn({ args: secondStory.initialArgs, ...secondStory } as any);
- expect(renderMock).toHaveBeenCalledWith(expect.objectContaining({ args: { a: 1 } }));
- });
});
describe('storyFn', () => {
diff --git a/code/lib/preview-api/src/modules/store/csf/prepareStory.ts b/code/lib/preview-api/src/modules/store/csf/prepareStory.ts
index cb93df64116a..28a807b02e66 100644
--- a/code/lib/preview-api/src/modules/store/csf/prepareStory.ts
+++ b/code/lib/preview-api/src/modules/store/csf/prepareStory.ts
@@ -4,7 +4,6 @@ import { global } from '@storybook/global';
import type {
Args,
ArgsStoryFn,
- LegacyStoryFn,
ModuleExport,
NormalizedComponentAnnotations,
NormalizedProjectAnnotations,
@@ -69,12 +68,8 @@ export function prepareStory(
return updatedContext;
};
- const undecoratedStoryFn: LegacyStoryFn = (context: StoryContext) => {
- const { passArgsFirst: renderTimePassArgsFirst = true } = context.parameters;
- return renderTimePassArgsFirst
- ? (render as ArgsStoryFn)(context.args, context)
- : (render as LegacyStoryFn)(context);
- };
+ const undecoratedStoryFn = (context: StoryContext) =>
+ (render as ArgsStoryFn)(context.args, context);
// Currently it is only possible to set these globally
const { applyDecorators = defaultDecorateStory, runStep } = projectAnnotations;
@@ -171,9 +166,7 @@ function preparePartialAnnotations(
componentAnnotations.render ||
projectAnnotations.render;
- const { passArgsFirst = true } = parameters;
-
- parameters.__isArgsStory = passArgsFirst && render && render.length > 0;
+ parameters.__isArgsStory = render && render.length > 0;
}
// Pull out args[X] into initialArgs for argTypes enhancers
diff --git a/docs/essentials/toolbars-and-globals.md b/docs/essentials/toolbars-and-globals.md
index 7acb99956520..125499681c61 100644
--- a/docs/essentials/toolbars-and-globals.md
+++ b/docs/essentials/toolbars-and-globals.md
@@ -182,29 +182,6 @@ Using the example above, you can modify any story to retrieve the **Locale** `gl
-
-
-In Storybook 6.0, if you set the global option `passArgsFirst: false` for backward compatibility, the story context is passed as the first argument:
-
-
-
-
-
-
-
-
-
## Consuming globals from within an addon
If you're working on a Storybook addon and need to retrieve globals, you can do so. The `@storybook/manager-api` package provides a hook for this scenario. You can use the [`useGlobals()`](../addons/addons-api.md#useglobals) hook to retrieve any globals you want.
diff --git a/docs/snippets/angular/my-component-story-use-globaltype-backwards-compat.ts.mdx b/docs/snippets/angular/my-component-story-use-globaltype-backwards-compat.ts.mdx
deleted file mode 100644
index 1cf7ec80db62..000000000000
--- a/docs/snippets/angular/my-component-story-use-globaltype-backwards-compat.ts.mdx
+++ /dev/null
@@ -1,10 +0,0 @@
-```ts
-// MyComponent.stories.ts
-
-export const StoryWithLocale = ({ globals: { locale } }) => {
- const caption = getCaptionForLocale(locale);
- return {
- template: `
`,
- };
-};
-```
diff --git a/docs/snippets/web-components/my-component-story-use-globaltype-backwards-compat.js.mdx b/docs/snippets/web-components/my-component-story-use-globaltype-backwards-compat.js.mdx
deleted file mode 100644
index 76acfbb14c6e..000000000000
--- a/docs/snippets/web-components/my-component-story-use-globaltype-backwards-compat.js.mdx
+++ /dev/null
@@ -1,17 +0,0 @@
-```js
-// MyComponent.stories.js
-
-import { html } from 'lit';
-
-/*
- *👇 Render functions are a framework specific feature to allow you control on how the component renders.
- * See https://storybook.js.org/docs/api/csf
- * to learn how to use render functions.
- */
-export const StoryWithLocale = {
- render: ({ globals: { locale } }) => {
- const caption = getCaptionForLocale(locale);
- return html`
${caption}
`;
- },
-};
-```
diff --git a/docs/snippets/web-components/my-component-story-use-globaltype-backwards-compat.ts.mdx b/docs/snippets/web-components/my-component-story-use-globaltype-backwards-compat.ts.mdx
deleted file mode 100644
index d95971c3c18a..000000000000
--- a/docs/snippets/web-components/my-component-story-use-globaltype-backwards-compat.ts.mdx
+++ /dev/null
@@ -1,19 +0,0 @@
-```ts
-// MyComponent.stories.ts
-
-import { html } from 'lit';
-
-import { StoryObj } from '@storybook/web-components';
-
-/*
- *👇 Render functions are a framework specific feature to allow you control on how the component renders.
- * See https://storybook.js.org/docs/api/csf
- * to learn how to use render functions.
- */
-export const StoryWithLocale: StoryObj = {
- render: ({ globals: { locale } }) => {
- const caption = getCaptionForLocale(locale);
- return html`
${caption}
`;
- },
-};
-```
diff --git a/docs/writing-stories/args.md b/docs/writing-stories/args.md
index 5a3d7cbd14a6..403e1c72b3f3 100644
--- a/docs/writing-stories/args.md
+++ b/docs/writing-stories/args.md
@@ -277,28 +277,3 @@ If you are [writing an addon](../addons/writing-addons.md) that wants to read or
-
-
-parameters.passArgsFirst
-
-In Storybook 6+, we pass the args as the first argument to the story function. The second argument is the “context”, which includes story parameters, globals, argTypes, and other information.
-
-In Storybook 5 and before we passed the context as the first argument. If you’d like to revert to that functionality set the `parameters.passArgsFirst` parameter in [`.storybook/preview.js`](../configure/index.md#configure-story-rendering):
-
-
-
-
-
-
-
-
-
-Note that `args` is still available as a key in the context.
-
-
-