|
|
|
|
@ -4,6 +4,7 @@
|
|
|
|
|
- [Addon Toolbars is now part of the core](#addon-toolbars-is-now-part-of-the-core)
|
|
|
|
|
- [Addon Controls is now part of the core](#addon-controls-is-now-part-of-the-core)
|
|
|
|
|
- [Actions addon moved to core](#actions-addon-moved-to-core)
|
|
|
|
|
- [Viewport addon moved to core](#viewport-addon-moved-to-core)
|
|
|
|
|
- [Addon viewport and addon backgrounds synchronized configuration and use globals](#addon-viewport-and-addon-backgrounds-synchronized-configuration-and-use-globals)
|
|
|
|
|
- [Manager builder removed alias for `util`, `assert` and `process`](#manager-builder-removed-alias-for-util-assert-and-process)
|
|
|
|
|
- [Docs addon moved out of addon-essentials](#docs-addon-moved-out-of-addon-essentials)
|
|
|
|
|
@ -442,637 +443,240 @@
|
|
|
|
|
- [Packages renaming](#packages-renaming)
|
|
|
|
|
- [Deprecated embedded addons](#deprecated-embedded-addons)
|
|
|
|
|
|
|
|
|
|
## From version 8.x to 9.0.0
|
|
|
|
|
|
|
|
|
|
### Addon Toolbars is now part of the core
|
|
|
|
|
|
|
|
|
|
The actions addon has been moved from `@storybook/addon-toolbars` to Storybook core. You no longer need to install it separately or include it in your addons list. As a consequence, `@storybook/addon-toolbars` is not part of `@storybook/addon-essentials` anymore.
|
|
|
|
|
|
|
|
|
|
### Addon Controls is now part of the core
|
|
|
|
|
|
|
|
|
|
Similar to the actions addon, the controls addon has been moved to core.
|
|
|
|
|
|
|
|
|
|
There should be no need to import anything from addon-controls, but it is available as `storybook/internal/controls`.
|
|
|
|
|
|
|
|
|
|
Please uninstall `@storybook/addon-controls`, and remove it from your `main.ts`.
|
|
|
|
|
|
|
|
|
|
### Actions addon moved to core
|
|
|
|
|
|
|
|
|
|
The actions addon has been moved from `@storybook/addon-actions` to Storybook core. You no longer need to install it separately or include it in your addons list. As a consequence, `@storybook/addon-actions` is not part of `@storybook/addon-essentials` anymore.
|
|
|
|
|
|
|
|
|
|
Furthermore, we have deprecated the usage of `withActions` from `@storybook/addon-actions` and we will remove it in Storybook v10. Please file an issue if you need this API.
|
|
|
|
|
|
|
|
|
|
### Addon viewport and addon backgrounds synchronized configuration and use globals
|
|
|
|
|
|
|
|
|
|
The feature flags: `viewportStoryGlobals` and `backgroundsStoryGlobals` have been removed, please remove these from your `.storybook/main.ts` file.
|
|
|
|
|
|
|
|
|
|
See here for the ways you have to configure addon viewports & backgrounds:
|
|
|
|
|
|
|
|
|
|
- [New parameters format for addon backgrounds](#new-parameters-format-for-addon-backgrounds)
|
|
|
|
|
- [New parameters format for addon viewport](#new-parameters-format-for-addon-viewport)
|
|
|
|
|
|
|
|
|
|
### Manager builder removed alias for `util`, `assert` and `process`
|
|
|
|
|
|
|
|
|
|
These dependencies (often used accidentally) were polyfilled to mocks or browser equivalents by storybook's manager builder.
|
|
|
|
|
|
|
|
|
|
Starting with Storybook `9.0`, we no longer alias these anymore.
|
|
|
|
|
|
|
|
|
|
Adding these aliases meant storybook core, had to depend on these packages, which have a deep dependency graph, added to every storybook project.
|
|
|
|
|
|
|
|
|
|
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.
|
|
|
|
|
|
|
|
|
|
### Docs addon moved out of addon-essentials
|
|
|
|
|
|
|
|
|
|
Addon docs is now no longer part of addon-essentials, because storybook is moving towards a more customizable & personally optimized approach.
|
|
|
|
|
|
|
|
|
|
If you are using addon-docs via addon-essentials, you will need to add addon-docs to your project, by installing it and adding it to your `.storybook/main.ts`'s `addons` field.
|
|
|
|
|
|
|
|
|
|
### Dropped support for legacy packages
|
|
|
|
|
|
|
|
|
|
The following packages are no longer published as part of `9.0.0`:
|
|
|
|
|
The following packages have been consolidated into the main `storybook` package:
|
|
|
|
|
|
|
|
|
|
| Old Package | New Path |
|
|
|
|
|
| ------------------------ | --------------------- |
|
|
|
|
|
| @storybook/manager-api | storybook/manager-api |
|
|
|
|
|
| @storybook/preview-api | storybook/preview-api |
|
|
|
|
|
| @storybook/theming | storybook/theming |
|
|
|
|
|
| @storybook/test | storybook/test |
|
|
|
|
|
| @storybook/addon-actions | storybook/actions |
|
|
|
|
|
|
|
|
|
|
Please un-install these packages, and ensure you have the `storybook` package installed.
|
|
|
|
|
|
|
|
|
|
Replace any imports with the path listed in the second column.
|
|
|
|
|
|
|
|
|
|
Additionally the following packages were also consolidated and placed under a `/internal` sub-path, to indicate they are for internal usage only.
|
|
|
|
|
If you're depending on these packages, they will continue to work for `9.0`, but they will likely be removed in `10.0`.
|
|
|
|
|
|
|
|
|
|
| Old Package | New Path |
|
|
|
|
|
| -------------------------- | ---------------------------------- |
|
|
|
|
|
| @storybook/channels | storybook/internal/channels |
|
|
|
|
|
| @storybook/client-logger | storybook/internal/client-logger |
|
|
|
|
|
| @storybook/core-common | storybook/internal/common |
|
|
|
|
|
| @storybook/core-events | storybook/internal/core-events |
|
|
|
|
|
| @storybook/csf-tools | storybook/internal/csf-tools |
|
|
|
|
|
| @storybook/docs-tools | storybook/internal/docs-tools |
|
|
|
|
|
| @storybook/node-logger | storybook/internal/node-logger |
|
|
|
|
|
| @storybook/router | storybook/internal/router |
|
|
|
|
|
| @storybook/telemetry | storybook/internal/telemetry |
|
|
|
|
|
| @storybook/types | storybook/internal/types |
|
|
|
|
|
| @storybook/manager | storybook/internal/manager |
|
|
|
|
|
| @storybook/preview | storybook/internal/preview |
|
|
|
|
|
| @storybook/core-server | storybook/internal/core-server |
|
|
|
|
|
| @storybook/builder-manager | storybook/internal/builder-manager |
|
|
|
|
|
| @storybook/components | storybook/internal/components |
|
|
|
|
|
|
|
|
|
|
Addon authors may continue to use the internal packages, there is currently not yet any replacement.
|
|
|
|
|
|
|
|
|
|
### Dropped support for TypeScript < 4.9
|
|
|
|
|
|
|
|
|
|
Storybook now requires TypeScript 4.9 or later. If you're using an older version of TypeScript, you'll need to upgrade to continue using Storybook.
|
|
|
|
|
|
|
|
|
|
### Test addon renamed from experimental to stable
|
|
|
|
|
|
|
|
|
|
In Storybook 9.0, we've officially stabilized the Test addon. The package has been renamed from `@storybook/experimental-addon-test` to `@storybook/addon-test`, reflecting its production-ready status. If you were using the experimental addon, you'll need to update your dependencies and imports:
|
|
|
|
|
|
|
|
|
|
```diff
|
|
|
|
|
- npm install --save-dev @storybook/experimental-addon-test
|
|
|
|
|
+ npm install --save-dev @storybook/addon-test
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
Update your imports in any custom configuration or test files:
|
|
|
|
|
|
|
|
|
|
```diff
|
|
|
|
|
- import { ... } from '@storybook/experimental-addon-test';
|
|
|
|
|
+ import { ... } from '@storybook/addon-test';
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
If you're using the addon in your Storybook configuration, update your `.storybook/main.js` or `.storybook/main.ts`:
|
|
|
|
|
|
|
|
|
|
```diff
|
|
|
|
|
export default {
|
|
|
|
|
addons: [
|
|
|
|
|
- '@storybook/experimental-addon-test',
|
|
|
|
|
+ '@storybook/addon-test',
|
|
|
|
|
],
|
|
|
|
|
};
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
The public API remains the same, so no additional changes should be needed in your test files or configuration.
|
|
|
|
|
|
|
|
|
|
### Experimental Status API has turned into a Status Store
|
|
|
|
|
|
|
|
|
|
The experimental status API previously available at `api.experimental_updateStatus` and `api.getCurrentStoryStatus` has changed, to a store that works both on the server, in the manager and in the preview.
|
|
|
|
|
|
|
|
|
|
You can use the new Status Store by importing `experimental_getStatusStore` from either `storybook/internal/core-server`, `storybook/manager-api` or `storybook/preview-api`:
|
|
|
|
|
|
|
|
|
|
```diff
|
|
|
|
|
+ import { experimental_getStatusStore } from 'storybook/manager-api';
|
|
|
|
|
+ import { StatusValue } from 'storybook/internal/types';
|
|
|
|
|
|
|
|
|
|
+ const myStatusStore = experimental_getStatusStore(MY_ADDON_ID);
|
|
|
|
|
|
|
|
|
|
addons.register(MY_ADDON_ID, (api) => {
|
|
|
|
|
- api.experimental_updateStatus({
|
|
|
|
|
- someStoryId: {
|
|
|
|
|
- status: 'success',
|
|
|
|
|
- title: 'Component tests',
|
|
|
|
|
- description: 'Works!',
|
|
|
|
|
- }
|
|
|
|
|
- });
|
|
|
|
|
+ myStatusStore.set([{
|
|
|
|
|
+ value: StatusValue.SUCCESS
|
|
|
|
|
+ title: 'Component tests',
|
|
|
|
|
+ description: 'Works!',
|
|
|
|
|
+ }]);
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
## From version 8.5.x to 8.6.x
|
|
|
|
|
|
|
|
|
|
### Angular: Support experimental zoneless support
|
|
|
|
|
|
|
|
|
|
Storybook now supports [Angular's experimental zoneless mode](https://angular.dev/guide/experimental/zoneless). This mode is intended to improve performance by removing Angular's zone.js dependency. To enable zoneless mode in your Angular Storybook, set the `experimentalZoneless` config in your `angular.json` file:
|
|
|
|
|
|
|
|
|
|
```diff
|
|
|
|
|
{
|
|
|
|
|
"projects": {
|
|
|
|
|
"your-project": {
|
|
|
|
|
"architect": {
|
|
|
|
|
"storybook": {
|
|
|
|
|
...
|
|
|
|
|
"options": {
|
|
|
|
|
...
|
|
|
|
|
+ "experimentalZoneless": true
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
"build-storybook": {
|
|
|
|
|
...
|
|
|
|
|
"options": {
|
|
|
|
|
...
|
|
|
|
|
+ "experimentalZoneless": true
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
### Addon-a11y: Replaced experimental `ally-test` tag behavior with `parameters.a11y.test`
|
|
|
|
|
|
|
|
|
|
In Storybook 8.6, the `ally-test` tag behavior in the Accessibility addon (`@storybook/addon-a11y`) has been replaced with the `parameters.a11y.test` parameter. See the comparison table below.
|
|
|
|
|
|
|
|
|
|
| Previous tag value | New parameter value | Description |
|
|
|
|
|
| ------------------ | ------------------- | ------------------------------------------------------------------------------------------------------ |
|
|
|
|
|
| `'!ally-test'` | `'off'` | Do not run accessibility tests (you can still manually verify via the addon panel) |
|
|
|
|
|
| N/A | `'todo'` | Run accessibility tests; violations return a warning in the Storybook UI and a summary count in CLI/CI |
|
|
|
|
|
| `'ally-test'` | `'error'` | Run accessibility tests; violations return a failing test in the Storybook UI and CLI/CI |
|
|
|
|
|
|
|
|
|
|
## From version 8.4.x to 8.5.x
|
|
|
|
|
|
|
|
|
|
### React Vite: react-docgen-typescript is updated
|
|
|
|
|
|
|
|
|
|
Storybook now uses [react-docgen-typescript](https://github.com/joshwooding/vite-plugin-react-docgen-typescript) v0.5.0 which updates its internal logic on how it parses files, available under an experimental feature flag `EXPERIMENTAL_useWatchProgram`, which is disabled by default.
|
|
|
|
|
|
|
|
|
|
Previously, once you made changes to a component's props, the controls and args table would not update unless you restarted Storybook. With the `EXPERIMENTAL_useWatchProgram` flag, you do not need to restart Storybook anymore, however you do need to refresh the browser page. Keep in mind that this flag is experimental and also does not support the `references` field in tsconfig.json files. Depending on how big your codebase is, it might have performance issues.
|
|
|
|
|
|
|
|
|
|
```ts
|
|
|
|
|
// .storybook/main.ts
|
|
|
|
|
const config = {
|
|
|
|
|
// ...
|
|
|
|
|
typescript: {
|
|
|
|
|
reactDocgen: "react-docgen-typescript",
|
|
|
|
|
reactDocgenTypescriptOptions: {
|
|
|
|
|
EXPERIMENTAL_useWatchProgram: true,
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
};
|
|
|
|
|
export default config;
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
### Introducing features.developmentModeForBuild
|
|
|
|
|
|
|
|
|
|
As part of our ongoing efforts to improve the testability and debuggability of Storybook, we are introducing a new feature flag: `developmentModeForBuild`. This feature flag allows you to set `process.env.NODE_ENV` to `development` in built Storybooks, enabling development-related optimizations that are typically disabled in production builds.
|
|
|
|
|
|
|
|
|
|
In development mode, React and other libraries often include additional checks and warnings that help catch potential issues early. These checks are usually stripped out in production builds to optimize performance. However, when running tests or debugging issues in a built Storybook, having these additional checks can be incredibly valuable. One such feature is React's `act`, which ensures that all updates related to a test are processed and applied before making assertions. `act` is crucial for reliable and predictable test results, but it only works correctly when `NODE_ENV` is set to `development`.
|
|
|
|
|
|
|
|
|
|
```js
|
|
|
|
|
// .storybook/main.js
|
|
|
|
|
export default {
|
|
|
|
|
features: {
|
|
|
|
|
developmentModeForBuild: true,
|
|
|
|
|
},
|
|
|
|
|
};
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
### Added source code panel to docs
|
|
|
|
|
|
|
|
|
|
Storybook Docs (`@storybook/addon-docs`) now can automatically add a new addon panel to stories that displays a source snippet beneath each story. This is an experimental feature that works similarly to the existing [source snippet doc block](https://storybook.js.org/docs/writing-docs/doc-blocks#source), but in the story view. It is intended to replace the [Storysource addon](https://storybook.js.org/addons/@storybook/addon-storysource).
|
|
|
|
|
|
|
|
|
|
To enable this globally, add the following line to your project configuration. You can also configure at the component/story level.
|
|
|
|
|
|
|
|
|
|
```js
|
|
|
|
|
// .storybook/preview.js
|
|
|
|
|
export default {
|
|
|
|
|
parameters: {
|
|
|
|
|
docs: {
|
|
|
|
|
codePanel: true,
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
};
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
### Addon-a11y: Component test integration
|
|
|
|
|
|
|
|
|
|
In Storybook 8.4, we introduced the [Test addon](https://storybook.js.org/docs/writing-tests/test-addon) (`@storybook/experimental-addon-test`). Powered by Vitest under the hood, this addon lets you watch, run, and debug your component tests directly in Storybook.
|
|
|
|
|
|
|
|
|
|
In Storybook 8.5, we revamped the [Accessibility addon](https://storybook.js.org/docs/writing-tests/accessibility-testing) (`@storybook/addon-a11y`) to integrate it with the component tests feature. This means you can now extend your component tests to include accessibility tests.
|
|
|
|
|
|
|
|
|
|
If you upgrade to Storybook 8.5 via `npx storybook@latest upgrade`, the Accessibility addon will be automatically configured to work with the component tests. However, if you're upgrading manually and you have the Test addon installed, adjust your configuration as follows:
|
|
|
|
|
|
|
|
|
|
```diff
|
|
|
|
|
// .storybook/vitest.setup.ts
|
|
|
|
|
...
|
|
|
|
|
+import * as a11yAddonAnnotations from '@storybook/addon-a11y/preview';
|
|
|
|
|
|
|
|
|
|
const annotations = setProjectAnnotations([
|
|
|
|
|
previewAnnotations,
|
|
|
|
|
+ a11yAddonAnnotations,
|
|
|
|
|
]);
|
|
|
|
|
|
|
|
|
|
// Run Storybook's beforeAll hook
|
|
|
|
|
beforeAll(annotations.beforeAll);
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
### Addon-a11y: Changing the default element selector
|
|
|
|
|
|
|
|
|
|
In Storybook 8.5, we changed the default element selector used by the Accessibility addon from `#storybook-root` to `body`. This change was made to align with the default element selector used by the Test addon when running accessibility tests via Vitest. Additionally, Tooltips or Popovers that are rendered outside the `#storybook-root` element will now be included in the accessibility tests per default allowing for a more comprehensive test coverage. If you want to fall back to the previous behavior, you can set the `a11y.element` parameter in your `.storybook/preview.<ts|js>` configuration:
|
|
|
|
|
|
|
|
|
|
```diff
|
|
|
|
|
// .storybook/preview.js
|
|
|
|
|
export const parameters = {
|
|
|
|
|
a11y: {
|
|
|
|
|
+ element: '#storybook-root',
|
|
|
|
|
},
|
|
|
|
|
};
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
### Addon-a11y: Deprecated `parameters.a11y.manual`
|
|
|
|
|
|
|
|
|
|
We have deprecated `parameters.a11y.manual` in 8.5. Please use `globals.a11y.manual` instead.
|
|
|
|
|
|
|
|
|
|
### Addon-test: You should no longer copy the content of `viteFinal` to your configuration
|
|
|
|
|
|
|
|
|
|
In version 8.4 of `@storybook/experimental-addon-test`, it was required to copy any custom configuration you had in `viteFinal` in `main.ts`, to the Vitest Storybook project. This is no longer necessary, as the Storybook Test plugin will automatically include your `viteFinal` configuration. You should remove any configurations you might already have in `viteFinal` to remove duplicates.
|
|
|
|
|
|
|
|
|
|
This is especially the case for any plugins you might have, as they could now end up being loaded twice, which is likely to cause errors when running tests. In 8.4 we documented and automatically added some Vite plugins from Storybook frameworks like `@storybook/experimental-nextjs-vite` and `@storybook/sveltekit` - **these needs to be removed as well**.
|
|
|
|
|
|
|
|
|
|
### Addon-test: Indexing behavior of @storybook/experimental-addon-test is changed
|
|
|
|
|
|
|
|
|
|
The Storybook test addon used to index stories based on the `test.include` field in the Vitest config file. This caused indexing issues with Storybook, because stories could have been indexed by Storybook and not Vitest, and vice versa. Starting in Storybook 8.5.0-alpha.18, we changed the indexing behavior so that it always uses the globs defined in the `stories` field in `.storybook/main.js` for a more consistent experience. It is now discouraged to use `test.include`, please remove it.
|
|
|
|
|
|
|
|
|
|
## From version 8.2.x to 8.3.x
|
|
|
|
|
|
|
|
|
|
### Removed `experimental_SIDEBAR_BOTTOM` and deprecated `experimental_SIDEBAR_TOP` addon types
|
|
|
|
|
|
|
|
|
|
The experimental SIDEBAR_BOTTOM addon type was removed in favor of a built-in filter UI. The enum type definition will remain available until Storybook 9.0 but will be ignored. Similarly the experimental SIDEBAR_TOP addon type is deprecated and will be removed in a future version.
|
|
|
|
|
|
|
|
|
|
These APIs allowed addons to render arbitrary content in the Storybook sidebar. Due to potential conflicts between addons and challenges regarding styling, these APIs are/will be removed. In the future, Storybook will provide declarative API hooks to allow addons to add content to the sidebar without risk of conflicts or UI inconsistencies. One such API is `experimental_updateStatus` which allow addons to set a status for stories. The SIDEBAR_BOTTOM slot is now used to allow filtering stories with a given status.
|
|
|
|
|
|
|
|
|
|
### New parameters format for addon backgrounds
|
|
|
|
|
|
|
|
|
|
> [!NOTE]
|
|
|
|
|
> You need to set the feature flag `backgroundsStoryGlobals` to `true` in your `.storybook/main.ts` to use the new format and set the value with `globals`.
|
|
|
|
|
>
|
|
|
|
|
> See here how to set feature flags: https://storybook.js.org/docs/api/main-config/main-config-features
|
|
|
|
|
|
|
|
|
|
The `addon-backgrounds` addon now uses a new format for configuring its list of selectable backgrounds.
|
|
|
|
|
The `backgrounds` parameter is now an object with an `options` property.
|
|
|
|
|
This `options` object is a key-value pair where the key is used when setting the global value, the value is an object with a `name` and `value` property.
|
|
|
|
|
|
|
|
|
|
```diff
|
|
|
|
|
// .storybook/preview.js
|
|
|
|
|
export const parameters = {
|
|
|
|
|
backgrounds: {
|
|
|
|
|
- values: [
|
|
|
|
|
- { name: 'twitter', value: '#00aced' },
|
|
|
|
|
- { name: 'facebook', value: '#3b5998' },
|
|
|
|
|
- ],
|
|
|
|
|
+ options: {
|
|
|
|
|
+ twitter: { name: 'Twitter', value: '#00aced' },
|
|
|
|
|
+ facebook: { name: 'Facebook', value: '#3b5998' },
|
|
|
|
|
+ },
|
|
|
|
|
},
|
|
|
|
|
};
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
Setting an override value should now be done via a `globals` property on your component/meta or story itself:
|
|
|
|
|
|
|
|
|
|
```diff
|
|
|
|
|
// Button.stories.ts
|
|
|
|
|
export default {
|
|
|
|
|
component: Button,
|
|
|
|
|
- parameters: {
|
|
|
|
|
- backgrounds: {
|
|
|
|
|
- default: "twitter",
|
|
|
|
|
- },
|
|
|
|
|
- },
|
|
|
|
|
+ globals: {
|
|
|
|
|
+ backgrounds: { value: "twitter" },
|
|
|
|
|
+ },
|
|
|
|
|
};
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
This locks that story to the `twitter` background, it cannot be changed by the addon UI.
|
|
|
|
|
|
|
|
|
|
### New parameters format for addon viewport
|
|
|
|
|
|
|
|
|
|
> [!NOTE]
|
|
|
|
|
> You need to set the feature flag `viewportStoryGlobals` to `true` in your `.storybook/main.ts` to use the new format and set the value with `globals`.
|
|
|
|
|
>
|
|
|
|
|
> See here how to set feature flags: https://storybook.js.org/docs/api/main-config/main-config-features
|
|
|
|
|
|
|
|
|
|
The `addon-viewport` addon now uses a new format for configuring its list of selectable viewports.
|
|
|
|
|
The `viewport` parameter is now an object with an `options` property.
|
|
|
|
|
This `options` object is a key-value pair where the key is used when setting the global value, the value is an object with a `name` and `styles` property.
|
|
|
|
|
The `styles` property is an object with a `width` and a `height` property.
|
|
|
|
|
|
|
|
|
|
```diff
|
|
|
|
|
// .storybook/preview.js
|
|
|
|
|
export const parameters = {
|
|
|
|
|
viewport: {
|
|
|
|
|
- viewports: {
|
|
|
|
|
- iphone5: {
|
|
|
|
|
- name: 'phone',
|
|
|
|
|
- styles: {
|
|
|
|
|
- width: '320px',
|
|
|
|
|
- height: '568px',
|
|
|
|
|
- },
|
|
|
|
|
- },
|
|
|
|
|
- },
|
|
|
|
|
+ options: {
|
|
|
|
|
+ iphone5: {
|
|
|
|
|
+ name: 'phone',
|
|
|
|
|
+ styles: {
|
|
|
|
|
+ width: '320px',
|
|
|
|
|
+ height: '568px',
|
|
|
|
|
+ },
|
|
|
|
|
+ },
|
|
|
|
|
+ },
|
|
|
|
|
},
|
|
|
|
|
};
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
Setting an override value should now be done via a `globals` property on your component/meta or story itself.
|
|
|
|
|
Also note the change from `defaultOrientation: "landscape"` to `isRotated: true`.
|
|
|
|
|
|
|
|
|
|
```diff
|
|
|
|
|
// Button.stories.ts
|
|
|
|
|
export default {
|
|
|
|
|
component: Button,
|
|
|
|
|
- parameters: {
|
|
|
|
|
- viewport: {
|
|
|
|
|
- defaultViewport: "iphone5",
|
|
|
|
|
- defaultOrientation: "landscape",
|
|
|
|
|
- },
|
|
|
|
|
- },
|
|
|
|
|
+ globals: {
|
|
|
|
|
+ viewport: {
|
|
|
|
|
+ value: "iphone5",
|
|
|
|
|
+ isRotated: true,
|
|
|
|
|
+ },
|
|
|
|
|
+ },
|
|
|
|
|
};
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
This locks that story to the `iphone5` viewport in landscape orientation, it cannot be changed by the addon UI.
|
|
|
|
|
|
|
|
|
|
## From version 8.1.x to 8.2.x
|
|
|
|
|
|
|
|
|
|
### Failed to resolve import "@storybook/X" error
|
|
|
|
|
|
|
|
|
|
Storybook's package structure changed in 8.2. It is a non-breaking change, but can expose missing project dependencies.
|
|
|
|
|
|
|
|
|
|
This happens when `@storybook/X` is missing in your `package.json`, but your project references `@storybook/X` in your source code (typically in a story file or in a `.storybook` config file). This is a problem with your project, and if it worked in earlier versions of Storybook, it was purely accidental.
|
|
|
|
|
|
|
|
|
|
Now in Storybook 8.2, that incorrect project configuration no longer works. The solution is to install `@storybook/X` as a dev dependency and re-run.
|
|
|
|
|
|
|
|
|
|
Example errors:
|
|
|
|
|
|
|
|
|
|
```sh
|
|
|
|
|
Cannot find module @storybook/preview-api or its corresponding type declarations
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
```sh
|
|
|
|
|
Internal server error: Failed to resolve import "@storybook/theming/create" from ".storybook/theme.ts". Does the file exist?
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
To protect your project from missing dependencies, try the `no-extraneous-dependencies` rule in [eslint-plugin-import](https://www.npmjs.com/package/eslint-plugin-import).
|
|
|
|
|
|
|
|
|
|
### Preview.js globals renamed to initialGlobals
|
|
|
|
|
|
|
|
|
|
Starting in 8.2 `preview.js` `globals` are deprecated and have been renamed to `initialGlobals`. We will remove `preview.js` `globals` in 9.0.
|
|
|
|
|
|
|
|
|
|
```diff
|
|
|
|
|
// .storybook/preview.js
|
|
|
|
|
export default {
|
|
|
|
|
- globals: [ a: 1, b: 2 ],
|
|
|
|
|
+ initialGlobals: [ a: 1, b: 2 ],
|
|
|
|
|
}
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
## From version 8.0.x to 8.1.x
|
|
|
|
|
|
|
|
|
|
### Portable stories
|
|
|
|
|
|
|
|
|
|
#### @storybook/nextjs requires specific path aliases to be setup
|
|
|
|
|
|
|
|
|
|
In order to properly mock the `next/router`, `next/header`, `next/navigation` and `next/cache` APIs, the `@storybook/nextjs` framework includes internal Webpack aliases to those modules. If you use portable stories in your Jest tests, you should set the aliases in your Jest config files `moduleNameMapper` property using the `getPackageAliases` helper from `@storybook/nextjs/export-mocks`:
|
|
|
|
|
|
|
|
|
|
```js
|
|
|
|
|
const nextJest = require("next/jest.js");
|
|
|
|
|
const { getPackageAliases } = require("@storybook/nextjs/export-mocks");
|
|
|
|
|
const createJestConfig = nextJest();
|
|
|
|
|
const customJestConfig = {
|
|
|
|
|
moduleNameMapper: {
|
|
|
|
|
...getPackageAliases(), // Add aliases for @storybook/nextjs mocks
|
|
|
|
|
},
|
|
|
|
|
};
|
|
|
|
|
module.exports = createJestConfig(customJestConfig);
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
This will make sure you end using the correct implementation of the packages and avoid having issues in your tests.
|
|
|
|
|
|
|
|
|
|
### main.js `docs.autodocs` is deprecated
|
|
|
|
|
|
|
|
|
|
The `docs.autodocs` setting in `main.js` is deprecated in 8.1 and will be removed in 9.0.
|
|
|
|
|
|
|
|
|
|
It has been replaced with a tags-based system which is more flexible than before.
|
|
|
|
|
|
|
|
|
|
`docs.autodocs` takes three values:
|
|
|
|
|
|
|
|
|
|
- `true`: generate autodocs for every component
|
|
|
|
|
- `false`: don't generate autodocs at all
|
|
|
|
|
- `tag`: generate autodocs for components that have been tagged `'autodocs'`.
|
|
|
|
|
|
|
|
|
|
Starting in 8.1, to generate autodocs for every component (`docs.autodocs = true`), add the following code to `.storybook/preview.js`:
|
|
|
|
|
|
|
|
|
|
```js
|
|
|
|
|
// .storybook/preview.js
|
|
|
|
|
export default {
|
|
|
|
|
tags: ["autodocs"],
|
|
|
|
|
};
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
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:
|
|
|
|
|
|
|
|
|
|
```js
|
|
|
|
|
// Button.stories.ts
|
|
|
|
|
export default {
|
|
|
|
|
component: Button,
|
|
|
|
|
tags: ["!autodocs"],
|
|
|
|
|
};
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
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.
|
|
|
|
|
|
|
|
|
|
If you had set `docs.autodocs = false`, this still works in 8.x, but will go away in 9.0 as a breaking change. If you don't want autodocs at all, simply remove the `'autodocs'` tag throughout your Storybook and autodocs will not be created.
|
|
|
|
|
|
|
|
|
|
### `docs` and `story` system tags removed
|
|
|
|
|
|
|
|
|
|
Storybook automatically added the tag `'docs'` to any docs entry in the index and `'story'` to any story entry in the index. This behavior was undocumented, and in an effort to reduce the number of tags we've removed them in 8.1. If you depended on these tags, please file an issue on the [Storybook monorepo](https://github.com/storybookjs/storybook) and let us know!
|
|
|
|
|
|
|
|
|
|
### Subtitle block and `parameters.componentSubtitle`
|
|
|
|
|
|
|
|
|
|
The `Subtitle` block now accepts an `of` prop, which can be a reference to a CSF file or a default export (meta).
|
|
|
|
|
|
|
|
|
|
`parameters.componentSubtitle` has been deprecated to be consistent with other parameters related to autodocs, instead use `parameters.docs.subtitle`.
|
|
|
|
|
|
|
|
|
|
### Title block `of` prop
|
|
|
|
|
|
|
|
|
|
The `Title` block now accepts an `of` prop, which can be a reference to a CSF file or a default export (meta).
|
|
|
|
|
|
|
|
|
|
It still accepts being passed `children`.
|
|
|
|
|
|
|
|
|
|
## From version 7.x to 8.0.0
|
|
|
|
|
|
|
|
|
|
### Portable stories
|
|
|
|
|
|
|
|
|
|
#### Project annotations are now merged instead of overwritten in composeStory
|
|
|
|
|
|
|
|
|
|
When passing project annotations overrides via `composeStory` such as:
|
|
|
|
|
|
|
|
|
|
```tsx
|
|
|
|
|
const projectAnnotationOverrides = { parameters: { foo: "bar" } };
|
|
|
|
|
const Primary = composeStory(
|
|
|
|
|
stories.Primary,
|
|
|
|
|
stories,
|
|
|
|
|
projectAnnotationOverrides
|
|
|
|
|
);
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
they are now merged with the annotations passed via `setProjectAnnotations` rather than completely overwriting them. This was seen as a bug and it's now fixed. If you have a use case where you really need this, please open an issue to elaborate.
|
|
|
|
|
|
|
|
|
|
#### Type change in `composeStories` API
|
|
|
|
|
|
|
|
|
|
There is a TypeScript type change in the `play` function returned from `composeStories` or `composeStory` in `@storybook/react` or `@storybook/vue3`, where before it was always defined, now it is potentially undefined. This means that you might have to make a small change in your code, such as:
|
|
|
|
|
|
|
|
|
|
```ts
|
|
|
|
|
const { Primary } = composeStories(stories)
|
|
|
|
|
|
|
|
|
|
// before
|
|
|
|
|
await Primary.play(...)
|
|
|
|
|
|
|
|
|
|
// after
|
|
|
|
|
await Primary.play?.(...) // if you don't care whether the play function exists
|
|
|
|
|
await Primary.play!(...) // if you want a runtime error when the play function does not exist
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
There are plans to make the type of the play function be inferred based on your imported story's play function in a near future, so the types will be 100% accurate.
|
|
|
|
|
|
|
|
|
|
#### Composed Vue stories are now components instead of functions
|
|
|
|
|
|
|
|
|
|
`composeStory` (and `composeStories`) from `@storybook/vue3` now return Vue components rather than story functions that return components. This means that when rendering these composed stories you just pass the composed story _without_ first calling it.
|
|
|
|
|
|
|
|
|
|
Previously when using `composeStory` from `@storybook/testing-vue3`, you would render composed stories with e.g. `render(MyStoryComposedStory({ someProp: true}))`. That is now changed to more [closely match how you would render regular Vue components](https://testing-library.com/docs/vue-testing-library/examples).
|
|
|
|
|
|
|
|
|
|
When migrating from `@storybook/testing-vue3`, you will likely hit the following error:
|
|
|
|
|
|
|
|
|
|
```ts
|
|
|
|
|
TypeError: Cannot read properties of undefined (reading 'devtoolsRawSetupState')
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
To fix it, you should change the usage of the composed story to reference it instead of calling it as a function. Here's an example using `@testing-library/vue` and Vitest:
|
|
|
|
|
|
|
|
|
|
```diff
|
|
|
|
|
import { it } from 'vitest';
|
|
|
|
|
import { render } from '@testing-library/vue';
|
|
|
|
|
import * as stories from './Button.stories';
|
|
|
|
|
import { composeStory } from '@storybook/vue3';
|
|
|
|
|
|
|
|
|
|
it('renders primary button', () => {
|
|
|
|
|
const Primary = composeStory(stories.Primary, stories.default);
|
|
|
|
|
- render(Primary({ label: 'Hello world' }));
|
|
|
|
|
+ render(Primary, { props: { label: 'Hello world' } });
|
|
|
|
|
});
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
### Tab addons are now routed to a query parameter
|
|
|
|
|
|
|
|
|
|
The URL of a tab used to be: `http://localhost:6006/?path=/my-addon-tab/my-story`.
|
|
|
|
|
|
|
|
|
|
The new URL of a tab is `http://localhost:6006/?path=/story/my-story&tab=my-addon-tab`.
|
|
|
|
|
|
|
|
|
|
### Default keyboard shortcuts changed
|
|
|
|
|
|
|
|
|
|
The default keyboard shortcuts have changed to avoid any conflicts with the browser's default shortcuts or when you are directly typing in the Manager. If you want to get the new default shortcuts, you can reset your shortcuts in the keyboard shortcuts panel by pressing the `Restore default` button.
|
|
|
|
|
|
|
|
|
|
### Manager addons are now rendered with React 18
|
|
|
|
|
|
|
|
|
|
The UI added to the manager via addons is now rendered with React 18.
|
|
|
|
|
|
|
|
|
|
Example:
|
|
|
|
|
|
|
|
|
|
```tsx
|
|
|
|
|
import { addons, types } from "@storybook/manager-api";
|
|
|
|
|
|
|
|
|
|
addons.register("my-addon", () => {
|
|
|
|
|
addons.add("my-addon/panel", {
|
|
|
|
|
type: types.PANEL,
|
|
|
|
|
title: "My Addon",
|
|
|
|
|
// This will be called as a JSX element by react 18
|
|
|
|
|
render: ({ active }) => (active ? <div>Hello World</div> : null),
|
|
|
|
|
});
|
|
|
|
|
});
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
Previously the `key` prop was passed to the render function, that is now no longer the case.
|
|
|
|
|
|
|
|
|
|
### Removal of `storiesOf`-API
|
|
|
|
|
|
|
|
|
|
The `storiesOf` API has been removed in Storybook 8.0.
|
|
|
|
|
|
|
|
|
|
If you need to dynamically create stories, you will need to implement this via the experimental `experimental_indexers` [API](#storyindexers-is-replaced-with-experimental_indexers).
|
|
|
|
|
|
|
|
|
|
For migrating to CSF, see: [`storyStoreV6` and `storiesOf` is deprecated](#storystorev6-and-storiesof-is-deprecated)
|
|
|
|
|
|
|
|
|
|
### Removed deprecated shim packages
|
|
|
|
|
|
|
|
|
|
In Storybook 7, these packages existed for backwards compatibility, but were marked as deprecated:
|
|
|
|
|
|
|
|
|
|
- `@storybook/addons` - this package has been split into 2 packages: `@storybook/preview-api` and `@storybook/manager-api`, see more here: [New Addons API](#new-addons-api).
|
|
|
|
|
- `@storybook/channel-postmessage` - this package has been merged into `@storybook/channels`.
|
|
|
|
|
- `@storybook/channel-websocket` - this package has been merged into `@storybook/channels`.
|
|
|
|
|
- `@storybook/client-api` - this package has been merged into `@storybook/preview-api`.
|
|
|
|
|
- `@storybook/core-client` - this package has been merged into `@storybook/preview-api`.
|
|
|
|
|
- `@storybook/preview-web` - this package has been merged into `@storybook/preview-api`.
|
|
|
|
|
- `@storybook/store` - this package has been merged into `@storybook/preview-api`.
|
|
|
|
|
- `@storybook/api` - this package has been replaced with `@storybook/manager-api`.
|
|
|
|
|
|
|
|
|
|
These sections explain the rationale, and the required changes you might have to make:
|
|
|
|
|
|
|
|
|
|
- [New Addons API](#new-addons-api)
|
|
|
|
|
- [`addons.setConfig` should now be imported from `@storybook/manager-api`.](#addonssetconfig-should-now-be-imported-from-storybookmanager-api)
|
|
|
|
|
Angular 16 introduced support for zoneless mode. Storybook now supports this mode in experimental mode.
|
|
|
|
|
|
|
|
|
|
To enable zoneless mode, set the `experimental_zoneless` flag to `true` in your `.storybook/main.ts` file:
|
|
|
|
|
|
|
|
|
|
````
|
|
|
|
|
<h1>Migration</h1>
|
|
|
|
|
|
|
|
|
|
- [From version 8.x to 9.0.0](#from-version-8x-to-900)
|
|
|
|
|
- [Addon Toolbars is now part of the core](#addon-toolbars-is-now-part-of-the-core)
|
|
|
|
|
- [Addon Controls is now part of the core](#addon-controls-is-now-part-of-the-core)
|
|
|
|
|
- [Actions addon moved to core](#actions-addon-moved-to-core)
|
|
|
|
|
- [Viewport addon moved to core](#viewport-addon-moved-to-core)
|
|
|
|
|
- [Addon viewport and addon backgrounds synchronized configuration and use globals](#addon-viewport-and-addon-backgrounds-synchronized-configuration-and-use-globals)
|
|
|
|
|
- [Manager builder removed alias for `util`, `assert` and `process`](#manager-builder-removed-alias-for-util-assert-and-process)
|
|
|
|
|
- [Docs addon moved out of addon-essentials](#docs-addon-moved-out-of-addon-essentials)
|
|
|
|
|
- [Dropped support for legacy packages](#dropped-support-for-legacy-packages)
|
|
|
|
|
- [Dropped support for TypeScript \< 4.9](#dropped-support-for-typescript--49)
|
|
|
|
|
- [Test addon renamed from experimental to stable](#test-addon-renamed-from-experimental-to-stable)
|
|
|
|
|
- [Experimental Status API has turned into a Status Store](#experimental-status-api-has-turned-into-a-status-store)
|
|
|
|
|
- [From version 8.5.x to 8.6.x](#from-version-85x-to-86x)
|
|
|
|
|
- [Angular: Support experimental zoneless support](#angular-support-experimental-zoneless-support)
|
|
|
|
|
- [Addon-a11y: Replaced experimental `ally-test` tag behavior with `parameters.a11y.test`](#addon-a11y-replaced-experimental-ally-test-tag-behavior-with-parametersa11ytest)
|
|
|
|
|
- [From version 8.4.x to 8.5.x](#from-version-84x-to-85x)
|
|
|
|
|
- [React Vite: react-docgen-typescript is updated](#react-vite-react-docgen-typescript-is-updated)
|
|
|
|
|
- [Introducing features.developmentModeForBuild](#introducing-featuresdevelopmentmodeforbuild)
|
|
|
|
|
- [Added source code panel to docs](#added-source-code-panel-to-docs)
|
|
|
|
|
- [Addon-a11y: Component test integration](#addon-a11y-component-test-integration)
|
|
|
|
|
- [Addon-a11y: Changing the default element selector](#addon-a11y-changing-the-default-element-selector)
|
|
|
|
|
- [Addon-a11y: Deprecated `parameters.a11y.manual`](#addon-a11y-deprecated-parametersa11ymanual)
|
|
|
|
|
- [Addon-test: You should no longer copy the content of `viteFinal` to your configuration](#addon-test-you-should-no-longer-copy-the-content-of-vitefinal-to-your-configuration)
|
|
|
|
|
- [Addon-test: Indexing behavior of @storybook/experimental-addon-test is changed](#addon-test-indexing-behavior-of-storybookexperimental-addon-test-is-changed)
|
|
|
|
|
- [From version 8.2.x to 8.3.x](#from-version-82x-to-83x)
|
|
|
|
|
- [Removed `experimental_SIDEBAR_BOTTOM` and deprecated `experimental_SIDEBAR_TOP` addon types](#removed-experimental_sidebar_bottom-and-deprecated-experimental_sidebar_top-addon-types)
|
|
|
|
|
- [New parameters format for addon backgrounds](#new-parameters-format-for-addon-backgrounds)
|
|
|
|
|
- [New parameters format for addon viewport](#new-parameters-format-for-addon-viewport)
|
|
|
|
|
- [From version 8.1.x to 8.2.x](#from-version-81x-to-82x)
|
|
|
|
|
- [Failed to resolve import "@storybook/X" error](#failed-to-resolve-import-storybookx-error)
|
|
|
|
|
- [Preview.js globals renamed to initialGlobals](#previewjs-globals-renamed-to-initialglobals)
|
|
|
|
|
- [From version 8.0.x to 8.1.x](#from-version-80x-to-81x)
|
|
|
|
|
- [Portable stories](#portable-stories)
|
|
|
|
|
- [@storybook/nextjs requires specific path aliases to be setup](#storybooknextjs-requires-specific-path-aliases-to-be-setup)
|
|
|
|
|
- [main.js `docs.autodocs` is deprecated](#mainjs-docsautodocs-is-deprecated)
|
|
|
|
|
- [`docs` and `story` system tags removed](#docs-and-story-system-tags-removed)
|
|
|
|
|
- [Subtitle block and `parameters.componentSubtitle`](#subtitle-block-and-parameterscomponentsubtitle)
|
|
|
|
|
- [Title block `of` prop](#title-block-of-prop)
|
|
|
|
|
- [From version 7.x to 8.0.0](#from-version-7x-to-800)
|
|
|
|
|
- [Portable stories](#portable-stories-1)
|
|
|
|
|
- [Project annotations are now merged instead of overwritten in composeStory](#project-annotations-are-now-merged-instead-of-overwritten-in-composestory)
|
|
|
|
|
- [Type change in `composeStories` API](#type-change-in-composestories-api)
|
|
|
|
|
- [Composed Vue stories are now components instead of functions](#composed-vue-stories-are-now-components-instead-of-functions)
|
|
|
|
|
- [Tab addons are now routed to a query parameter](#tab-addons-are-now-routed-to-a-query-parameter)
|
|
|
|
|
- [Default keyboard shortcuts changed](#default-keyboard-shortcuts-changed)
|
|
|
|
|
- [Manager addons are now rendered with React 18](#manager-addons-are-now-rendered-with-react-18)
|
|
|
|
|
- [Removal of `storiesOf`-API](#removal-of-storiesof-api)
|
|
|
|
|
- [Removed deprecated shim packages](#removed-deprecated-shim-packages)
|
|
|
|
|
- [Deprecated `@storybook/testing-library` package](#deprecated-storybooktesting-library-package)
|
|
|
|
|
- [Framework-specific Vite plugins have to be explicitly added](#framework-specific-vite-plugins-have-to-be-explicitly-added)
|
|
|
|
|
- [For React:](#for-react)
|
|
|
|
|
- [For Vue:](#for-vue)
|
|
|
|
|
- [For Svelte (without Sveltekit):](#for-svelte-without-sveltekit)
|
|
|
|
|
- [For Preact:](#for-preact)
|
|
|
|
|
- [For Solid:](#for-solid)
|
|
|
|
|
- [For Qwik:](#for-qwik)
|
|
|
|
|
- [TurboSnap Vite plugin is no longer needed](#turbosnap-vite-plugin-is-no-longer-needed)
|
|
|
|
|
- [`--webpack-stats-json` option renamed `--stats-json`](#--webpack-stats-json-option-renamed---stats-json)
|
|
|
|
|
- [Implicit actions can not be used during rendering (for example in the play function)](#implicit-actions-can-not-be-used-during-rendering-for-example-in-the-play-function)
|
|
|
|
|
- [MDX related changes](#mdx-related-changes)
|
|
|
|
|
- [MDX is upgraded to v3](#mdx-is-upgraded-to-v3)
|
|
|
|
|
- [Dropping support for \*.stories.mdx (CSF in MDX) format and MDX1 support](#dropping-support-for-storiesmdx-csf-in-mdx-format-and-mdx1-support)
|
|
|
|
|
- [Dropping support for id, name and story in Story block](#dropping-support-for-id-name-and-story-in-story-block)
|
|
|
|
|
- [Core changes](#core-changes)
|
|
|
|
|
- [`framework.options.builder.useSWC` for Webpack5-based projects removed](#frameworkoptionsbuilderuseswc-for-webpack5-based-projects-removed)
|
|
|
|
|
- [Removed `@babel/core` and `babel-loader` from `@storybook/builder-webpack5`](#removed-babelcore-and-babel-loader-from-storybookbuilder-webpack5)
|
|
|
|
|
- [`framework.options.fastRefresh` for Webpack5-based projects removed](#frameworkoptionsfastrefresh-for-webpack5-based-projects-removed)
|
|
|
|
|
- [`typescript.skipBabel` removed](#typescriptskipbabel-removed)
|
|
|
|
|
- [Dropping support for Yarn 1](#dropping-support-for-yarn-1)
|
|
|
|
|
- [Dropping support for Node.js 16](#dropping-support-for-nodejs-16)
|
|
|
|
|
- [Autotitle breaking fixes](#autotitle-breaking-fixes)
|
|
|
|
|
- [Storyshots has been removed](#storyshots-has-been-removed)
|
|
|
|
|
- [UI layout state has changed shape](#ui-layout-state-has-changed-shape)
|
|
|
|
|
- [New UI and props for Button and IconButton components](#new-ui-and-props-for-button-and-iconbutton-components)
|
|
|
|
|
- [Icons is deprecated](#icons-is-deprecated)
|
|
|
|
|
- [Removed postinstall](#removed-postinstall)
|
|
|
|
|
- [Removed stories.json](#removed-storiesjson)
|
|
|
|
|
- [Removed `sb babelrc` command](#removed-sb-babelrc-command)
|
|
|
|
|
- [Changed interfaces for `@storybook/router` components](#changed-interfaces-for-storybookrouter-components)
|
|
|
|
|
- [Extract no longer batches](#extract-no-longer-batches)
|
|
|
|
|
- [Framework-specific changes](#framework-specific-changes)
|
|
|
|
|
- [React](#react)
|
|
|
|
|
- [`react-docgen` component analysis by default](#react-docgen-component-analysis-by-default)
|
|
|
|
|
- [Next.js](#nextjs)
|
|
|
|
|
- [Require Next.js 13.5 and up](#require-nextjs-135-and-up)
|
|
|
|
|
- [Automatic SWC mode detection](#automatic-swc-mode-detection)
|
|
|
|
|
- [RSC config moved to React renderer](#rsc-config-moved-to-react-renderer)
|
|
|
|
|
- [Vue](#vue)
|
|
|
|
|
- [Require Vue 3 and up](#require-vue-3-and-up)
|
|
|
|
|
- [Angular](#angular)
|
|
|
|
|
- [Require Angular 15 and up](#require-angular-15-and-up)
|
|
|
|
|
- [Svelte](#svelte)
|
|
|
|
|
- [Require Svelte 4 and up](#require-svelte-4-and-up)
|
|
|
|
|
- [Preact](#preact)
|
|
|
|
|
- [Require Preact 10 and up](#require-preact-10-and-up)
|
|
|
|
|
- [No longer adds default Babel plugins](#no-longer-adds-default-babel-plugins)
|
|
|
|
|
- [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 `config` preset](#removed-config-preset)
|
|
|
|
|
- [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/components](#removals-in-storybookcomponents)
|
|
|
|
|
- [Removals in @storybook/types](#removals-in-storybooktypes)
|
|
|
|
|
- [--use-npm flag in storybook CLI](#--use-npm-flag-in-storybook-cli)
|
|
|
|
|
- [hideNoControlsWarning parameter from addon controls](#hidenocontrolswarning-parameter-from-addon-controls)
|
|
|
|
|
- [`setGlobalConfig` from `@storybook/react`](#setglobalconfig-from-storybookreact)
|
|
|
|
|
- [StorybookViteConfig type from @storybook/builder-vite](#storybookviteconfig-type-from-storybookbuilder-vite)
|
|
|
|
|
- [props from WithTooltipComponent from @storybook/components](#props-from-withtooltipcomponent-from-storybookcomponents)
|
|
|
|
|
- [LinkTo direct import from addon-links](#linkto-direct-import-from-addon-links)
|
|
|
|
|
- [DecoratorFn, Story, ComponentStory, ComponentStoryObj, ComponentStoryFn and ComponentMeta TypeScript types](#decoratorfn-story-componentstory-componentstoryobj-componentstoryfn-and-componentmeta-typescript-types)
|
|
|
|
|
- ["Framework" TypeScript types](#framework-typescript-types)
|
|
|
|
|
- [`navigateToSettingsPage` method from Storybook's manager-api](#navigatetosettingspage-method-from-storybooks-manager-api)
|
|
|
|
|
- [storyIndexers](#storyindexers)
|
|
|
|
|
- [Deprecated docs parameters](#deprecated-docs-parameters)
|
|
|
|
|
- [Description Doc block properties](#description-doc-block-properties)
|
|
|
|
|
- [Story Doc block properties](#story-doc-block-properties)
|
|
|
|
|
- [Manager API expandAll and collapseAll methods](#manager-api-expandall-and-collapseall-methods)
|
|
|
|
|
- [`ArgsTable` Doc block removed](#argstable-doc-block-removed)
|
|
|
|
|
- [`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)
|
|
|
|
|
- [StoryStore and methods deprecated](#storystore-and-methods-deprecated)
|
|
|
|
|
- [Addon author changes](#addon-author-changes)
|
|
|
|
|
- [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)
|
|
|
|
|
- [Removed `config` preset](#removed-config-preset-1)
|
|
|
|
|
- [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)
|
|
|
|
|
- [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)
|
|
|
|
|
- [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)
|
|
|
|
|
- [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)
|
|
|
|
|
- [Default export in Preview.js](#default-export-in-previewjs)
|
|
|
|
|
- [ESM format in Main.js](#esm-format-in-mainjs)
|
|
|
|
|
- [Modern browser support](#modern-browser-support)
|
|
|
|
|
- [React peer dependencies required](#react-peer-dependencies-required)
|
|
|
|
|
- [start-storybook / build-storybook binaries removed](#start-storybook--build-storybook-binaries-removed)
|
|
|
|
|
- [New Framework API](#new-framework-api)
|
|
|
|
|
- [Available framework packages](#available-framework-packages)
|
|
|
|
|
- [Framework field mandatory](#framework-field-mandatory)
|
|
|
|
|
- [frameworkOptions renamed](#frameworkoptions-renamed)
|
|
|
|
|
- [builderOptions renamed](#builderoptions-renamed)
|
|
|
|
|
- [TypeScript: StorybookConfig type moved](#typescript-storybookconfig-type-moved)
|
|
|
|
|
- [Titles are statically computed](#titles-are-statically-computed)
|
|
|
|
|
- [Framework standalone build moved](#framework-standalone-build-moved)
|
|
|
|
|
- [Change of root html IDs](#change-of-root-html-ids)
|
|
|
|
|
- [Stories glob matches MDX files](#stories-glob-matches-mdx-files)
|
|
|
|
|
- [Add strict mode](#add-strict-mode)
|
|
|
|
|
- [Importing plain markdown files with `transcludeMarkdown` has changed](#importing-plain-markdown-files-with-transcludemarkdown-has-changed)
|
|
|
|
|
- [Stories field in .storybook/main.js is mandatory](#stories-field-in-storybookmainjs-is-mandatory)
|
|
|
|
|
- [Stricter global types](#stricter-global-types)
|
|
|
|
|
- [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)
|
|
|
|
|
- [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)
|
|
|
|
|
- [Changed decorator order between preview.js and addons/frameworks](#changed-decorator-order-between-previewjs-and-addonsframeworks)
|
|
|
|
|
- [Dark mode detection](#dark-mode-detection)
|
|
|
|
|
- [`addons.setConfig` should now be imported from `@storybook/manager-api`.](#addonssetconfig-should-now-be-imported-from-storybookmanager-api)
|
|
|
|
|
- [7.0 core addons changes](#70-core-addons-changes)
|
|
|
|
|
- [Removed auto injection of @storybook/addon-actions decorator](#removed-auto-injection-of-storybookaddon-actions-decorator)
|
|
|
|
|
- [Addon-backgrounds: Removed deprecated grid parameter](#addon-backgrounds-removed-deprecated-grid-parameter)
|
|
|
|
|
- [Addon-a11y: Removed deprecated withA11y decorator](#addon-a11y-removed-deprecated-witha11y-decorator)
|
|
|
|
|
- [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)
|
|
|
|
|
- [7.0 Webpack changes](#70-webpack-changes)
|
|
|
|
|
- [Webpack4 support discontinued](#webpack4-support-discontinued)
|
|
|
|
|
- [Babel mode v7 exclusively](#babel-mode-v7-exclusively)
|
|
|
|
|
- [Postcss removed](#postcss-removed)
|
|
|
|
|
- [Removed DLL flags](#removed-dll-flags)
|
|
|
|
|
- [7.0 Framework-specific changes](#70-framework-specific-changes)
|
|
|
|
|
- [Angular: Removed deprecated `component` and `propsMeta` field](#angular-removed-deprecated-component-and-propsmeta-field)
|
|
|
|
|
- [Angular: Drop support for Angular \< 14](#angular-drop-support-for-angular--14)
|
|
|
|
|
- [Angular: Drop support for calling Storybook directly](#angular-drop-support-for-calling-storybook-directly)
|
|
|
|
|
- [Angular: Application providers and ModuleWithProviders](#angular-application-providers-and-modulewithproviders)
|
|
|
|
|
- [Angular: Removed legacy renderer](#angular-removed-legacy-renderer)
|
|
|
|
|
- [Angular: Initializer functions](#angular-initializer-functions)
|
|
|
|
|
- [Next.js: use the `@storybook/nextjs` framework](#nextjs-use-the-storybooknextjs-framework)
|
|
|
|
|
- [SvelteKit: needs the `@storybook/sveltekit` framework](#sveltekit-needs-the-storybooksveltekit-framework)
|
|
|
|
|
- [Vue3: replaced app export with setup](#vue3-replaced-app-export-with-setup)
|
|
|
|
|
- [Web-components: dropped lit-html v1 support](#web-components-dropped-lit-html-v1-support)
|
|
|
|
|
- [Create React App: dropped CRA4 support](#create-react-app-dropped-cra4-support)
|
|
|
|
|
- [HTML: No longer auto-dedents source code](#html-no-longer-auto-dedents-source-code)
|
|
|
|
|
- [7.0 Addon authors changes](#70-addon-authors-changes)
|
|
|
|
|
- [New Addons API](#new-addons-api)
|
|
|
|
|
- [Specific instructions for addon creators](#specific-instructions-for-addon-creators)
|
|
|
|
|
- [Specific instructions for addon users](#specific-instructions-for-addon-users)
|
|
|
|
|
- [register.js removed](#registerjs-removed)
|
|
|
|
|
- [No more default export from `@storybook/addons`](#no-more-default-export-from-storybookaddons)
|
|
|
|
|
- [No more configuration for manager](#no-more-configuration-for-manager)
|
|
|
|
|
- [Icons API changed](#icons-api-changed)
|
|
|
|
|
- [Removed global client APIs](#removed-global-client-apis)
|
|
|
|
|
- [framework parameter renamed to renderer](#framework-parameter-renamed-to-renderer)
|
|
|
|
|
- [7.0 Docs changes](#70-docs-changes)
|
|
|
|
|
- [Autodocs changes](#autodocs-changes)
|
|
|
|
|
- [MDX docs files](#mdx-docs-files)
|
|
|
|
|
- [Unattached docs files](#unattached-docs-files)
|
|
|
|
|
- [Doc Blocks](#doc-blocks)
|
|
|
|
|
- [Meta block](#meta-block)
|
|
|
|
|
- [Description block, `parameters.notes` and `parameters.info`](#description-block-parametersnotes-and-parametersinfo)
|
|
|
|
|
- [Story block](#story-block)
|
|
|
|
|
- [Source block](#source-block)
|
|
|
|
|
- [Canvas block](#canvas-block)
|
|
|
|
|
- [ArgsTable block](#argstable-block)
|
|
|
|
|
- [Configuring Autodocs](#configuring-autodocs)
|
|
|
|
|
- [MDX2 upgrade](#mdx2-upgrade)
|
|
|
|
|
- [Legacy MDX1 support](#legacy-mdx1-support)
|
|
|
|
|
- [Default docs styles will leak into non-story user components](#default-docs-styles-will-leak-into-non-story-user-components)
|
|
|
|
|
|
|
|
|
|
### Deprecated `@storybook/testing-library` package
|
|
|
|
|
|
|
|
|
|
@ -1083,7 +687,7 @@ To migrate by hand, install `@storybook/test` and replace `@storybook/testing-li
|
|
|
|
|
```ts
|
|
|
|
|
- import { userEvent } from '@storybook/testing-library';
|
|
|
|
|
+ import { userEvent } from '@storybook/test';
|
|
|
|
|
```
|
|
|
|
|
````
|
|
|
|
|
|
|
|
|
|
For more information on the change, see the [announcement post](https://storybook.js.org/blog/storybook-test/).
|
|
|
|
|
|
|
|
|
|
|
Norbert de Langen
