You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
-[Framework-specific Vite plugins have to be explicitly added](#framework-specific-vite-plugins-have-to-be-explicitly-added)
21
22
-[For React:](#for-react)
22
23
-[For Vue:](#for-vue)
@@ -97,17 +98,17 @@
97
98
-[Tab addons cannot manually route, Tool addons can filter their visibility via tabId](#tab-addons-cannot-manually-route-tool-addons-can-filter-their-visibility-via-tabid)
-[7.0 Deprecations and default changes](#70-deprecations-and-default-changes)
202
203
-[storyStoreV7 enabled by default](#storystorev7-enabled-by-default)
203
204
-[`Story` type deprecated](#story-type-deprecated)
@@ -439,6 +440,7 @@ The `docs.autodocs` setting in `main.js` is deprecated in 8.1 and will be remove
439
440
It has been replaced with a tags-based system which is more flexible than before.
440
441
441
442
`docs.autodocs` takes three values:
443
+
442
444
-`true`: generate autodocs for every component
443
445
-`false`: don't generate autodocs at all
444
446
-`tag`: generate autodocs for components that have been tagged `'autodocs'`.
@@ -448,8 +450,8 @@ Starting in 8.1, to generate autodocs for every component (`docs.autodocs = true
448
450
```js
449
451
// .storybook/preview.js
450
452
exportdefault {
451
-
tags: ['autodocs'],
452
-
}
453
+
tags: ["autodocs"],
454
+
};
453
455
```
454
456
455
457
Tags cascade, so setting `'autodocs'` at the project level automatically propagates to every component and story. If you set autodocs globally and want to opt-out for a particular component, you can remove the `'autodocs'` tag for a component like this:
@@ -458,8 +460,8 @@ Tags cascade, so setting `'autodocs'` at the project level automatically propaga
458
460
// Button.stories.ts
459
461
exportdefault {
460
462
component: Button,
461
-
tags: ['!autodocs'],
462
-
}
463
+
tags: ["!autodocs"],
464
+
};
463
465
```
464
466
465
467
If you had set `docs.autodocs = 'tag'`, the default setting, you can remove the setting from `.storybook/main.js`. That is now the default behavior.
@@ -602,6 +604,19 @@ These sections explain the rationale, and the required changes you might have to
602
604
-[New Addons API](#new-addons-api)
603
605
-[`addons.setConfig` should now be imported from `@storybook/manager-api`.](#addonssetconfig-should-now-be-imported-from-storybookmanager-api)
In Storybook 8, `@storybook/testing-library` has been integrated to a new package called `@storybook/test`, which uses Vitest APIs for an improved experience. When upgrading to Storybook 8 with 'npx storybook@latest upgrade', you will get prompted and will get an automigration for the new package. Please migrate when you can.
610
+
611
+
To migrate by hand, install `@storybook/test` and replace `@storybook/testing-libary` imports globally:
New to Storybook 8: Storybook's Visual Tests addon helps you catch unintentional changes/bugs in your stories. The addon is powered by Chromatic, a cloud-based testing tool developed by Storybook's core team.
Copy file name to clipboardExpand all lines: docs/migration-guide/from-older-version.md
+24-3Lines changed: 24 additions & 3 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -7,9 +7,8 @@ Storybook 8 focuses on improving performance, compatibility, and stability. Key
7
7
- 🩻 A new visual testing workflow via [the Visual Tests addon](https://www.chromatic.com/docs/visual-tests-addon/)
8
8
- 💨 [2-4x faster test builds](https://storybook.js.org/blog/optimize-storybook-7-6/#2-4x-faster-builds-with-thetest-flag), [25-50% faster React docgen](https://storybook.js.org/blog/optimize-storybook-7-6/#22x-faster-react-docgen), and [SWC support for Webpack projects](https://storybook.js.org/blog/optimize-storybook-7-6/#using-webpack-enable-swc)
9
9
- 🧩 Improved framework support: you no longer need to install React as a peer dependency when using a non-React renderer
10
-
- 🎛️ Strengthened control generation in [React](https://storybook.js.org/blog/storybook-8-beta/#major-performance-improvements
11
-
) and [Vue](https://storybook.js.org/blog/first-class-vue-support-storybook-8/) projects
12
-
- ⚡️ Improved Vite architecture, Vitest testing, and Vite 5 support
10
+
- 🎛️ Strengthened control generation in [React](https://storybook.js.org/blog/storybook-8-beta/#major-performance-improvements) and [Vue](https://storybook.js.org/blog/first-class-vue-support-storybook-8/) projects
11
+
- ⚡️ Improved Vite architecture, Vitest testing, and Vite 5 support
13
12
- 🌐 [Support for React Server Components (RSC)](https://storybook.js.org/blog/storybook-react-server-components/): our experimental solution renders async RSC in the browser and mocks Node code
14
13
- ✨ A refreshed desktop UI & mobile UX
15
14
- ➕ Much, much more
@@ -24,6 +23,7 @@ The rest of this guide will help you upgrade successfully, either automatically
24
23
-[Start and build CLI binaries removed](https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#start-storybook--build-storybook-binaries-removed)
25
24
-[`storiesOf` API has been removed](https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#removal-of-storiesof-api)
26
25
-[`*.stories.mdx` format has been removed](https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#dropping-support-for-storiesmdx-csf-in-mdx-format-and-mdx1-support)
26
+
-[Packages have been consolidated/removed](#package-structure-changes)
27
27
-[Implicit actions (from `argTypesRegex`) can no longer be used during rendering (e.g. in a play function)](https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#implicit-actions-can-not-be-used-during-rendering-for-example-in-the-play-function)
28
28
-[`react-docgen` (instead of `react-docgen-typescript`) is the default for component analysis](https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#react-docgen-component-analysis-by-default)
29
29
-[Storyshots has been removed](https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#storyshots-has-been-removed)
@@ -88,6 +88,27 @@ Storybook 8 uses MDX 3. If you're coming from MDX 1 (used by Storybook 6), there
88
88
89
89
If you are using Vite, you may now need to create a `vite.config.js` file in your project root to allow newer versions of Vite to work with Storybook. Additionally, you may need to install and configure a Vite plugin for your framework. More information is available in the [full migration notes](https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#framework-specific-vite-plugins-have-to-be-explicitly-added).
90
90
91
+
## Package structure changes
92
+
93
+
The following packages are **removed**. See the [full migration notes](https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#removed-deprecated-shim-packages) for details.
The following packages are **deprecated**. See the [full migration notes](https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#deprecated-storybooktesting-library-package) for details.
Copy file name to clipboardExpand all lines: docs/migration-guide/index.md
+24-3Lines changed: 24 additions & 3 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -7,9 +7,8 @@ Storybook 8 focuses on improving performance, compatibility, and stability. Key
7
7
- 🩻 A new visual testing workflow via [the Visual Tests addon](https://www.chromatic.com/docs/visual-tests-addon/)
8
8
- 💨 [2-4x faster test builds](https://storybook.js.org/blog/optimize-storybook-7-6/#2-4x-faster-builds-with-thetest-flag), [25-50% faster React docgen](https://storybook.js.org/blog/optimize-storybook-7-6/#22x-faster-react-docgen), and [SWC support for Webpack projects](https://storybook.js.org/blog/optimize-storybook-7-6/#using-webpack-enable-swc)
9
9
- 🧩 Improved framework support: you no longer need to install React as a peer dependency when using a non-React renderer
10
-
- 🎛️ Strengthened control generation in [React](https://storybook.js.org/blog/storybook-8-beta/#major-performance-improvements
11
-
) and [Vue](https://storybook.js.org/blog/first-class-vue-support-storybook-8/) projects
12
-
- ⚡️ Improved Vite architecture, Vitest testing, and Vite 5 support
10
+
- 🎛️ Strengthened control generation in [React](https://storybook.js.org/blog/storybook-8-beta/#major-performance-improvements) and [Vue](https://storybook.js.org/blog/first-class-vue-support-storybook-8/) projects
11
+
- ⚡️ Improved Vite architecture, Vitest testing, and Vite 5 support
13
12
- 🌐 [Support for React Server Components (RSC)](https://storybook.js.org/blog/storybook-react-server-components/): our experimental solution renders async RSC in the browser and mocks Node code
14
13
- ✨ A refreshed desktop UI & mobile UX
15
14
- ➕ Much, much more
@@ -30,6 +29,7 @@ The rest of this guide will help you upgrade successfully, either automatically
30
29
31
30
-[`storiesOf` API has been removed](https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#removal-of-storiesof-api)
32
31
-[`*.stories.mdx` format has been removed](https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#dropping-support-for-storiesmdx-csf-in-mdx-format-and-mdx1-support)
32
+
-[Packages have been consolidated/removed](#package-structure-changes)
33
33
-[Implicit actions (from `argTypesRegex`) can no longer be used during rendering (e.g. in a play function)](https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#implicit-actions-can-not-be-used-during-rendering-for-example-in-the-play-function)
34
34
-[`react-docgen` (instead of `react-docgen-typescript`) is the default for component analysis](https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#react-docgen-component-analysis-by-default)
35
35
-[Storyshots has been removed](https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#storyshots-has-been-removed)
@@ -152,6 +152,27 @@ If you prefer to debug yourself, here are a few useful things you can do to help
152
152
1. Try removing all addons that are not in the `@storybook` npm namespace (make sure you don't remove the `storybook` package). Community addons that work well with 7.x might not yet be compatible with 8.0, and this is the fastest way to isolate that possibility. If you find an addon that needs to be upgraded to work with Storybook 8, please post an issue on the addon’s repository, or better yet, a pull request to upgrade it!
153
153
2. Another debugging technique is to bisect to older prerelease versions of Storybook to figure out which release broke your Storybook. For example, assuming that the current prerelease of Storybook is `8.0.0-beta.56`, you could set the version to `8.0.0-alpha.0` in your `package.json` and reinstall to verify that it still works (`alpha.0` should be nearly identical to `7.6.x`). If it works, you could then try `8.0.0-beta.0`, then `8.0.0-beta.28` and so forth. Once you’ve isolated the bad release, read through its [CHANGELOG](https://github.com/storybookjs/storybook/blob/next/CHANGELOG.md) entry and perhaps there’s a change that jumps out as the culprit. If you find the problem, please submit an issue or pull request to the Storybook monorepo and we’ll do our best to take care of it quickly.
154
154
155
+
## Package structure changes
156
+
157
+
The following packages are **removed**. See the [full migration notes](https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#removed-deprecated-shim-packages) for details.
The following packages are **deprecated**. See the [full migration notes](https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#deprecated-storybooktesting-library-package) for details.
In addition to the automigrations and manual migrations above, there are also optional migrations that you should consider. These are features that we’ve deprecated in Storybook 8 (but remain backwards compatible), or best practices that should help you be more productive in the future.
0 commit comments