+
+#### Learn more about builders
+
+- [Vite builder](./vite.md) for bundling with Vite
+- [Webpack builder](./webpack.md) for bundling with Webpack
+- [Builder API](./builder-api.md) for building a Storybook builder
\ No newline at end of file
diff --git a/docs/configure/babel.md b/docs/configure/babel.md
index aa6d23031050..a1af175354ef 100644
--- a/docs/configure/babel.md
+++ b/docs/configure/babel.md
@@ -18,7 +18,7 @@ It has three different modes:
Storybook works with evergreen browsers by default.
-If you want to run Storybook in IE11, make sure to [disable](../essentials/introduction#disabling-addons) the docs-addon that is part of `@storybook/addon-essentials`, as this currently [causes issues in IE11](https://github.com/storybookjs/storybook/issues/8884).
+If you want to run Storybook in IE11, make sure to [disable](../essentials/introduction.md#disabling-addons) the docs-addon that is part of `@storybook/addon-essentials`, as this currently [causes issues in IE11](https://github.com/storybookjs/storybook/issues/8884).
Here are some key features of Storybook's Babel configurations.
@@ -38,7 +38,7 @@ You can also place a `.storybook/.babelrc` file to use a unique configuration fo
### Custom configuration
-If you need, you can customize the default Babel configuration used by Storybook. Update your [`.storybook/main.js`](./overview#configure-your-storybook-project) and add the `babel` field with the options you want to use:
+If you need, you can customize the default Babel configuration used by Storybook. Update your [`.storybook/main.js`](./overview.md#configure-your-storybook-project) and add the `babel` field with the options you want to use:
diff --git a/docs/configure/features-and-behavior.md b/docs/configure/features-and-behavior.md
index 42d791c02226..d936e062d962 100644
--- a/docs/configure/features-and-behavior.md
+++ b/docs/configure/features-and-behavior.md
@@ -23,7 +23,7 @@ The following table details how to use the API values:
| **showPanel** | Boolean | Display panel that shows addon configurations | `true` |
| **panelPosition** | String/Object | Where to show the addon panel | `bottom` or `right` |
| **enableShortcuts** | Boolean | Enable/disable shortcuts | `true` |
-| **isToolshown** | Boolean | Show/hide tool bar | `true` |
+| **showToolbar** | Boolean | Show/hide tool bar | `true` |
| **theme** | Object | Storybook Theme, see next section | `undefined` |
| **selectedPanel** | String | Id to select an addon panel | `storybook/actions/panel` |
| **initialActive** | String | Select the default active tab on Mobile | `sidebar` or `canvas` or `addons` |
@@ -54,4 +54,5 @@ You can use URL parameters to configure some of the available features:
| **isFullscreen** | `full` | `true` |
| **showNav** | `nav` | `false` |
| **showPanel** | `panel` | `false`, `right`, `bottom` |
-| **selectedPanel** | `addonPanel` | Any panel ID |
\ No newline at end of file
+| **selectedPanel** | `addonPanel` | Any panel ID |
+| **showTabs** | `tabs` | `true` |
\ No newline at end of file
diff --git a/docs/configure/images-and-assets.md b/docs/configure/images-and-assets.md
index 779a8c7bb3f6..8049a22db88a 100644
--- a/docs/configure/images-and-assets.md
+++ b/docs/configure/images-and-assets.md
@@ -127,4 +127,4 @@ In this case, you need to have all your images and media files with relative pat
If you load static content via importing, this is automatic, and you do not have to do anything.
-Suppose you are serving assets in a [static directory](#serving-static-files-via-storybook) along with your Storybook. In that case, you need to use relative paths to load images or use the base element.
+Suppose you are serving assets in a [static directory](#serving-static-files-via-storybook-configuration) along with your Storybook. In that case, you need to use relative paths to load images or use the base element.
diff --git a/docs/configure/overview.md b/docs/configure/overview.md
index 493b5f1150a9..462d88bc3cd6 100644
--- a/docs/configure/overview.md
+++ b/docs/configure/overview.md
@@ -27,7 +27,7 @@ The main configuration file is `main.js`. This file controls the Storybook serve
The `main.js` configuration file is a [preset](../addons/addon-types.md) and, as such, has a powerful interface, but the key fields within it are:
- `stories` - an array of globs that indicates the [location of your story files](#configure-story-loading), relative to `main.js`.
-- `addons` - a list of the [addons](/addons) you are using.
+- `addons` - a list of the [addons](https://storybook.js.org/addons/) you are using.
- `webpackFinal` - custom [webpack configuration](./webpack.md#extending-storybooks-webpack-config).
- `babel` - custom [babel configuration](./babel.md).
- `framework` - framework specific configurations to help the loading and building process.
diff --git a/docs/configure/storybook-addons.md b/docs/configure/storybook-addons.md
index 55b33eac648d..21233c31bf3e 100644
--- a/docs/configure/storybook-addons.md
+++ b/docs/configure/storybook-addons.md
@@ -22,4 +22,4 @@ There are many, many Storybook addons, but they can be roughly categorized into
- **Essential** addons are core-team developed addons that are considered a part of the out-of-the-box user experience. These ship by default with new Storybook installations.
- **Core** addons are developed by the core team. They are kept in sync with the development of Storybook itself and written in idiomatic ways as templates for other addons. They can be found within the [Storybook monorepo](https://github.com/storybookjs/storybook/tree/next/addons).
-- **Community** addons are addons written by the massive Storybook community. They can be found on our [website](/addons), [GitHub](https://github.com/), and [npm](https://www.npmjs.com/).
\ No newline at end of file
+- **Community** addons are addons written by the massive Storybook community. They can be found on our [website](https://storybook.js.org/addons/), [GitHub](https://github.com/), and [npm](https://www.npmjs.com/).
\ No newline at end of file
diff --git a/docs/configure/styling-and-css.md b/docs/configure/styling-and-css.md
index f45208957370..2253874499fb 100644
--- a/docs/configure/styling-and-css.md
+++ b/docs/configure/styling-and-css.md
@@ -10,7 +10,7 @@ CSS-in-JS libraries are designed to use basic JavaScript, and they often work in
### Importing CSS files
-If your component files import their CSS, Storybook's webpack configuration will work out of the box. The noticeable exception to this is if you're using a CSS precompiler. In this case, you can either install and configure a Storybook preset (e.g., [SCSS preset](https://github.com/storybookjs/presets/tree/master/packages/preset-scss)), or customize [Storybook's webpack configuration](./webpack#extending-storybooks-webpack-config) and include the appropriate loader.
+If your component files import their CSS, Storybook's webpack configuration will work out of the box. The noticeable exception to this is if you're using a CSS precompiler. In this case, you can either install and configure a Storybook preset (e.g., [SCSS preset](https://github.com/storybookjs/presets/tree/master/packages/preset-scss)), or customize [Storybook's webpack configuration](./webpack.md#extending-storybooks-webpack-config) and include the appropriate loader.
@@ -18,4 +18,4 @@ To use your CSS in all stories, you import it in [`.storybook/preview.js`](./ove
### Adding webfonts
-If you need webfonts to be available, you may need to add some code to the [`.storybook/preview-head.html`](./story-rendering.md#adding-to-head) file. We recommend including any assets with your Storybook if possible, in which case you likely want to configure the [static file location](./images-and-assets#serving-static-files-via-storybook).
\ No newline at end of file
+If you need webfonts to be available, you may need to add some code to the [`.storybook/preview-head.html`](./story-rendering.md#adding-to-head) file. We recommend including any assets with your Storybook if possible, in which case you likely want to configure the [static file location](./images-and-assets.md#serving-static-files-via-storybook-configuration).
\ No newline at end of file
diff --git a/docs/configure/telemetry.md b/docs/configure/telemetry.md
new file mode 100644
index 000000000000..72c66d0b8aed
--- /dev/null
+++ b/docs/configure/telemetry.md
@@ -0,0 +1,174 @@
+---
+title: 'Telemetry'
+---
+
+Storybook collects completely anonymous data to help us improve user experience. Participation in this anonymous program is optional, and you may opt-out if you'd not like to share any information.
+
+## Why is telemetry collected?
+
+Hundreds of thousands of developers use Storybook daily to build, test, and document components. Storybook is framework agnostic and integrates with the front-end ecosystem:
+
+- **JavaScript frameworks** such as [React](https://reactjs.org/), [Vue](https://vuejs.org/), and [Svelte](https://svelte.dev/)
+- **Libraries** such as [Styled-Components](https://styled-components.com/), [Tailwind](https://tailwindcss.com/), [Redux](https://redux.js.org/)
+- **Design tools** such as [Figma](https://figma.com/), [Sketch](https://www.sketch.com/), [Zeplin](https://zeplin.io/) and [InVision](https://www.invisionapp.com/)
+- **Workflow tools** such as [Notion](https://www.notion.so/product), [Confluence](https://www.atlassian.com/software/confluence), and [Jira](https://www.atlassian.com/software/jira)
+
+In the past, our improvement process relied on manually gathering feedback. But with a growing userbase and the need to support a wide variety of integrations, we need a more accurate method for gauging Storybook usage and pain points.
+
+These telemetry data help us (the maintainers) to prioritize the highest impact projects. That allows us to keep up with trends in the front-end ecosystem and verify that our community's hard work achieves the intended result.
+
+## What is being collected?
+
+We collect general usage details, including command invocation, Storybook version, addons, and the view layer.
+
+Specifically, we track the following information in our telemetry events:
+
+- Timestamp of the occurrence.
+- Command invoked (e.g., `init`, `upgrade`, `start-storybook`).
+- Storybook unique identifier: One-way hash generated during Storybook installation process.
+- One way hash of the IP address where the event occurred for spam detection.
+- Story count.
+- Storybook version.
+- Storybook metadata:
+ - Language (e.g., TypeScript, JavaScript).
+ - Supported view layers (e.g., React, Vue, Angular, Svelte).
+ - Builder (e.g., Webpack4, Webpack5, Vite).
+ - Meta framework (e.g., [Next](https://nextjs.org/), [Gatsby](https://www.gatsbyjs.com/), [CRA](https://create-react-app.dev/)).
+ - [Addons](/addons) (e.g., [Essentials](../essentials/introduction), [Accessibility](https://storybook.js.org/addons/@storybook/addon-a11y/)).
+ - [Feature flags](./overview.md#feature-flags) (e.g., `buildStoriesJson`).
+- Whether the command was invoked on CI or not.
+
+Access to the raw data is highly controlled, limited to select members of Storybook's core team who maintain the telemetry. We cannot identify individual users from the dataset: it is anonymized and untraceable back to the user.
+
+## What about sensitive information?
+
+We take your privacy and our security very seriously. We perform additional steps to ensure that secure data (e.g., environment variables or other forms of sensitive data) **do not** make their way into our analytics. You can view all the information we collect by setting the `STORYBOOK_TELEMETRY_DEBUG` to `1` to print out the information gathered. For example:
+
+
+
+
+
+
+
+Will generate the following output:
+
+```json
+{
+ "anonymousId": "8bcfdfd5f9616a1923dd92adf89714331b2d18693c722e05152a47f8093392bb",
+ "eventType": "start",
+ "payload": {
+ "storyIndex": {
+ "storyCount": 4,
+ "version": 3
+ }
+ },
+ "inCI": false,
+ "metadata": {
+ "generatedAt": 1648233198722,
+ "builder": {
+ "name": "webpack4"
+ },
+ "hasCustomBabel": false,
+ "hasCustomWebpack": true,
+ "hasStaticDirs": true,
+ "hasStorybookEslint": false,
+ "refCount": 0,
+ "metaFramework": {
+ "name": "CRA",
+ "packageName": "react-scripts",
+ "version": "4.0.3"
+ },
+ "features": {
+ "buildStoriesJson": true
+ },
+ "storybookVersion": "6.5.0",
+ "language": "typescript",
+ "storybookPackages": {
+ "@storybook/addons": {
+ "version": "6.5.0"
+ },
+ "@storybook/builder-webpack4": {
+ "version": "6.5.0"
+ },
+ "@storybook/react": {
+ "version": "6.5.0"
+ }
+ },
+ "framework": {
+ "name": "react"
+ },
+ "addons": {
+ "@storybook/preset-create-react-app": {
+ "version": "3.2.0"
+ },
+ "@storybook/addon-ie11": {
+ "version": "0.0.7--canary.5e87b64.0"
+ },
+ "@storybook/addon-essentials": {
+ "options": {
+ "viewport": false
+ },
+ "version": "6.5.0"
+ }
+ }
+ }
+}
+```
+
+## Will this data be shared?
+
+The data we collect is anonymous, not traceable to the source, and only meaningful in aggregate form. No data we collect is personally identifiable.
+In the future, we plan to share relevant data with the community through public dashboards (or similar data representation formats).
+
+## How to opt-out
+
+You may opt-out of the telemetry by setting Storybook's configuration element `disableTelemetry` to `true`, using the `--disable-telemetry` flag, or setting the environment variable`STORYBOOK_DISABLE_TELEMETRY` to `1`. For example:
+
+
+
+
+
+
+
+## Crash reports (disabled by default)
+
+In addition to general usage telemetry, you may also choose to share crash reports. Storybook will then sanitize the error object (removing all user paths) and append it to the telemetry event. To enable crash reporting, you can set the `enableCrashReports` configuration element to `true`, using the `--enable-crash-reports` flag, or set the `STORYBOOK_ENABLE_CRASH_REPORTS` environment variable to `1`. For example:
+
+
+
+
+
+
+
+Generates the following item in the telemetry event:
+
+
+
+
+
+
diff --git a/docs/configure/theming.md b/docs/configure/theming.md
index e2928d0826cd..55e8118bb38f 100644
--- a/docs/configure/theming.md
+++ b/docs/configure/theming.md
@@ -32,7 +32,7 @@ When setting a theme, set a complete theme object. The theme is replaced, not co
## Theming docs
-[Storybook Docs](../writing-docs/introduction) uses the same theme system as Storybook’s UI but is themed independently from the main UI.
+[Storybook Docs](../writing-docs/introduction.md) uses the same theme system as Storybook’s UI but is themed independently from the main UI.
Supposing you have a Storybook theme defined for the main UI in [`.storybook/manager.js`](./overview.md#configure-story-rendering):
@@ -85,6 +85,7 @@ Above, we're creating a new theme that will:
- Use Storybook's `light` theme as a baseline.
- Replace Storybook's logo in the sidebar with our own (defined in the brandImage variable).
- Add custom branding information.
+- Set the brand link to open in the same window (as opposed to a new one), via the `target` attribute.
Finally, we'll need to import the theme into Storybook. Create a new file called `manager.js` in your `.storybook` directory and add the following:
@@ -226,4 +227,4 @@ Or with template literals:
]}
/>
-
\ No newline at end of file
+
diff --git a/docs/configure/upgrading.md b/docs/configure/upgrading.md
index 4cc4322328e4..5cd1f7cdf0e1 100644
--- a/docs/configure/upgrading.md
+++ b/docs/configure/upgrading.md
@@ -18,7 +18,7 @@ This upgrades all of the Storybook packages in your project to the latest stable
-In addition to running the command, we also recommend checking the [MIGRATION.md file](https://github.com/storybookjs/storybook/blob/next/MIGRATION.md), for the detailed log of relevant changes and deprecations that might affect your upgrade.
+In addition to running the command, we also recommend checking the [MIGRATION.md file](https://github.com/storybookjs/storybook/blob/next/MIGRATION.md), for the detailed log of relevant changes and deprecations that might affect your upgrade.
@@ -42,4 +42,8 @@ To upgrade to the latest pre-release:
npx sb@next upgrade --prerelease
```
-If you'd like to downgrade to a stable version, manually edit the package version numbers in your `package.json` and re-install.
\ No newline at end of file
+If you'd like to downgrade to a stable version, manually edit the package version numbers in your `package.json` and re-install.
+
+
+Storybook collects completely anonymous data to help us improve user experience. Participation is optional, and you may [opt-out](../configure/telemetry.md#how-to-opt-out) if you'd not like to share any information.
+
diff --git a/docs/configure/webpack.md b/docs/configure/webpack.md
index d86127a6ae25..c156547d953e 100644
--- a/docs/configure/webpack.md
+++ b/docs/configure/webpack.md
@@ -2,7 +2,7 @@
title: 'Webpack'
---
-Storybook displays your components in a custom web application built using [Webpack](https://webpack.js.org/). Webpack is a complex tool, but our default configuration is intended to cover most use cases. [Addons](/addons) are also available that extend the configuration for other everyday use cases.
+Storybook displays your components in a custom web application built using [Webpack](https://webpack.js.org/). Webpack is a complex tool, but our default configuration is intended to cover most use cases. [Addons](https://storybook.js.org/addons/) are also available that extend the configuration for other everyday use cases.
You can customize Storybook's webpack setup by providing a `webpackFinal` field in [`.storybook/main.js`](./overview.md#configure-your-storybook-project) file.
@@ -69,7 +69,7 @@ When you start your Storybook, you'll see an improvement in loading times. Read
### Webpack 5
-Storybook builds your project with Webpack 4 by default. If your project uses Webpack 5, you can opt into the Webpack 5 builder by installing the `@storybook/builder-webpack5` package, and opting in in your `main.js`:
+Storybook builds your project with Webpack 4 by default. If your project uses Webpack 5, you can opt into the Webpack 5 builder by installing the required dependencies (i.e., `@storybook/builder-webpack5`, `@storybook/manager-webpack5`) and update your Storybook configuration as follows:
diff --git a/docs/contribute/code.md b/docs/contribute/code.md
index b6c92a5560ee..9a1f4fada5b6 100644
--- a/docs/contribute/code.md
+++ b/docs/contribute/code.md
@@ -59,7 +59,9 @@ yarn build
When asked if you want to start the build in `watch` mode, answer **yes** to develop in interactive mode. Afterward, choose which packages you want to build. For example, if you're going to work on a feature for `@storybook/addon-docs`, you might want to select `@storybook/addon-docs` and `@storybook/components`.
-💡 Build's `watch' mode is great for interactive development. However, for performance reasons it only transpiles your code and doesn't execute the TypeScript compiler. If something isn't working as expected, try running `build` WITHOUT watch mode: it will re-generate TypeScript types and also perform type checking for you.
+
+💡 Build's `watch` mode is great for interactive development. However, for performance reasons it only transpiles your code and doesn't execute the TypeScript compiler. If something isn't working as expected, try running `build` WITHOUT watch mode: it will re-generate TypeScript types and also perform type checking for you.
+
-💡 The `sb link` command relies on `yarn 2` linking under the hood. It requires that the local repro is using `yarn 2`, which will be the case if you're using the [`sb repro` command](./how-to-reproduce) per our contributing guidelines. If you are trying to link to a non-`yarn 2` project, linking will fail.
+💡 The sb link command relies on yarn 2 linking under the hood. It requires that the local repro is using yarn 2, which will be the case if you're using the [sb repro command](./how-to-reproduce) per our contributing guidelines. If you are trying to link to a non-yarn 2 project, linking will fail.
## Troubleshooting
-`yarn build --all --watch` watches everything but is resource-intensive
+yarn build --all --watch watches everything but is resource-intensive
It's troublesome to know which packages you're going to change ahead of time, and watching all of them can be highly demanding, even on modern machines. If you're working on a powerful enough machine, you can use `yarn build --all --watch` instead of `yarn build`.
diff --git a/docs/contribute/how-to-contribute.md b/docs/contribute/how-to-contribute.md
index 546b0b9ccd34..894cb309f598 100644
--- a/docs/contribute/how-to-contribute.md
+++ b/docs/contribute/how-to-contribute.md
@@ -12,8 +12,8 @@ In the interest of fostering an open and welcoming environment, we as contributo
- [**Code**](./code.md): Features, bug fixes, dependency updates
- [**Docs**](./documentation-updates.md): Typos, clarifications
-- [**Integrations**](./../api/new-frameworks): Integrate Storybook with your favorite library
-- [**Addons**](./../addons/introduction): Build an addon and share it with the community
+- [**Integrations**](./../api/new-frameworks.md): Integrate Storybook with your favorite library
+- [**Addons**](./../addons/introduction.md): Build an addon and share it with the community
- [**Examples**](https://github.com/storybookjs/storybook/tree/next/examples/official-storybook): Add an example/test for a feature
## Not sure how to get started?
diff --git a/docs/contribute/how-to-reproduce.md b/docs/contribute/how-to-reproduce.md
index 1372a8205290..ebc2ae7f39f3 100644
--- a/docs/contribute/how-to-reproduce.md
+++ b/docs/contribute/how-to-reproduce.md
@@ -50,7 +50,7 @@ If everything worked as it should, you should have a fully functional Storybook
Before adding code, install and configure any necessary packages. For example, if you run into a problem with a CSS framework (e.g., [Tailwind](https://tailwindcss.com/)), you should install and configure it.
-Install and configure any Storybook [addons](/addons) that relate to the issue (e.g.,`@storybook/addon-a11y`).
+Install and configure any Storybook [addons](https://storybook.js.org/addons/) that relate to the issue (e.g.,`@storybook/addon-a11y`).
## Add stories
diff --git a/docs/contribute/new-snippets.md b/docs/contribute/new-snippets.md
index c6b51f6dcde9..84e4a91439b2 100644
--- a/docs/contribute/new-snippets.md
+++ b/docs/contribute/new-snippets.md
@@ -110,7 +110,7 @@ yarn start:skip-addons
```
-💡 During the start process if there's an issue with the the documentation, the process will stop and you'll get a notification.
+💡 During the start process if there's an issue with the documentation, the process will stop and you'll get a notification.
Open a browser window to `http://localhost:8000`, click the Docs link, and select your framework from the dropdown.
diff --git a/docs/essentials/controls.md b/docs/essentials/controls.md
index 305653acedfd..5da997b1fc61 100644
--- a/docs/essentials/controls.md
+++ b/docs/essentials/controls.md
@@ -11,7 +11,7 @@ Storybook Controls gives you a graphical UI to interact with a component's argum
/>
-Controls does not require any modification to your components. Stories for controls are:
+Controls do not require any modification to your components. Stories for controls are:
- Convenient. Auto-generate controls based on React/Vue/Angular/etc. components.
- Portable. Reuse your interactive stories in documentation, tests, and even in designs.
@@ -180,7 +180,7 @@ The Controls addon can be configured in two ways:
### Annotation
-As shown above, you can configure individual controls with the “control" annotation in the [argTypes](../api/argtypes) field of either a component or story. Below is a condensed example and table featuring all available controls.
+As shown above, you can configure individual controls with the “control" annotation in the [argTypes](../api/argtypes.md) field of either a component or story. Below is a condensed example and table featuring all available controls.
| Data Type | Control | Description |
| ----------- | -------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
@@ -197,7 +197,7 @@ As shown above, you can configure individual controls with the “control" annot
| | `select` | Provides a drop-down list component to handle single value selection. `argTypes: { age: { control: 'select', options: [20, 30, 40, 50] }}` |
| | `multi-select` | Provides a drop-down list that allows multiple selected values. `argTypes: { countries: { control: 'multi-select', options: ['USA', 'Canada', 'Mexico'] }}` |
| **string** | `text` | Provides a freeform text input. `argTypes: { label: { control: 'text' }}` |
-| | `color` | Provides a color picker component to handle color values. Can be additionally configured to include a set of color presets. `argTypes: { color: { control: { type: 'color', presetsColors: ['red', 'green']} }}` |
+| | `color` | Provides a color picker component to handle color values. Can be additionally configured to include a set of color presets. `argTypes: { color: { control: { type: 'color', presetColors: ['red', 'green']} }}` |
| | `date` | Provides a datepicker component to handle date selection. `argTypes: { startDate: { control: 'date' }}` |
@@ -302,7 +302,7 @@ paths={[
### Conditional controls
-In some cases, it's useful to be able to conditionally exclude a control based on the value of another control. Controls supports basic versions of these use cases with the `addIf` and `removeIf` options, which can take a boolean value, or a string which can refer to the value of another arg.
+In some cases, it's useful to be able to conditionally exclude a control based on the value of another control. Controls supports basic versions of these use cases with the `if`, which can takes a simple query object to determine whether to include the control.
Consider a collection of "advanced" settings that are only visible when the user toggles an "advanced" toggle.
@@ -328,6 +328,24 @@ Or consider a constraint where if the user sets one control value, it doesn't ma
+The query object must contain either an `arg` or `global` target:
+
+| field | type | meaning |
+| ------ | ------ | ----------------------------- |
+| arg | string | The ID of the arg to test. |
+| global | string | The ID of the global to test. |
+
+It may also contain at most one of the following operators:
+
+| operator | type | meaning |
+| -------- | ------- | ---------------------------------------------------- |
+| truthy | boolean | Is the target value truthy? |
+| exists | boolean | Is the target value defined? |
+| eq | any | Is the target value equal to the provided value? |
+| neq | any | Is the target value NOT equal to the provided value? |
+
+If no operator is provided, that is equivalent to `{ truthy: true }`.
+
## Hide NoControls warning
If you don't plan to handle the control args inside your Story, you can remove the warning with:
diff --git a/docs/essentials/introduction.md b/docs/essentials/introduction.md
index db59851a0415..4d84463a8e9e 100644
--- a/docs/essentials/introduction.md
+++ b/docs/essentials/introduction.md
@@ -32,7 +32,7 @@ Update your Storybook configuration (in [`.storybook/main.js`](../configure/over
diff --git a/docs/faq.md b/docs/faq.md
index 9c5934ea7830..1976efce092f 100644
--- a/docs/faq.md
+++ b/docs/faq.md
@@ -83,6 +83,20 @@ module.exports = {
💡 Fast Refresh only works in development mode with React 16.10 or higher.
+### How do I setup the new React Context Root API with Storybook?
+
+If your installed React Version equals or is higher than 18.0.0, the new React Root API is automatically used and the newest React [concurrent features](https://reactjs.org/docs/concurrent-mode-intro.html) can be used.
+
+You can opt-out from the new React Root API by setting the following property in your `.storybook/main.js` file:
+
+```js
+module.exports = {
+ reactOptions: {
+ legacyRootApi: true,
+ },
+};
+```
+
### Why is there no addons channel?
A common error is that an addon tries to access the "channel", but the channel is not set. It can happen in a few different cases:
@@ -97,7 +111,6 @@ A common error is that an addon tries to access the "channel", but the channel i
2. In React Native, it's a special case documented in [#1192](https://github.com/storybookjs/storybook/issues/1192)
-
### Why aren't Controls visible in the Canvas panel but visible in the Docs panel?
If you're adding Storybook's dependencies manually, make sure you include the [`@storybook/addon-controls`](https://www.npmjs.com/package/@storybook/addon-controls) dependency in your project and reference it in your `.storybook/main.js` as follows:
@@ -132,67 +145,73 @@ With the release of version 6.0, we updated our documentation as well. That does
We're only covering versions 5.3 and 5.0 as they were important milestones for Storybook. If you want to go back in time a little more, you'll have to check the specific release in the monorepo.
-| Section | Page | Current Location | Version 5.3 location | Version 5.0 location |
-|------------------|-------------------------------------------|------------------------------------------------------------------------------------|----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|----------------------------------------------------------------------------------------------------------------------------------------------------------|
-| Get started | Install | [See current documentation](../get-started/install.md) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/guides/quick-start-guide) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.0/docs/src/pages/guides/quick-start-guide) |
-| | What's a story | [See current documentation](../get-started/whats-a-story.md) | [See versioned documentation for your framework](https://github.com/storybookjs/storybook/blob/release/5.3/docs/src/pages/guides) | [See versioned documentation for your framework](https://github.com/storybookjs/storybook/blob/release/5.0/docs/src/pages/guides) |
-| | Browse Stories | [See current documentation](../get-started/browse-stories.md) | [See versioned documentation for your framework](https://github.com/storybookjs/storybook/blob/release/5.3/docs/src/pages/guides) | [See versioned documentation for your framework](https://github.com/storybookjs/storybook/blob/release/5.0/docs/src/pages/guides) |
-| | Setup | [See current documentation](../get-started/setup.md) | [See versioned documentation for your framework](https://github.com/storybookjs/storybook/blob/release/5.3/docs/src/pages/guides) | [See versioned documentation for your framework](https://github.com/storybookjs/storybook/blob/release/5.0/docs/src/pages/guides) |
-| Write stories | Introduction | [See current documentation](../writing-stories/introduction.md) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/basics/writing-stories) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.0/docs/src/pages/basics/writing-stories) |
-| | Parameters | [See current documentation](../writing-stories/parameters.md) | See versioned documentation here | Non existing feature or undocumented |
-| | Decorators | [See current documentation](../writing-stories/decorators.md) | See versioned documentation here | See versioned documentation here |
-| | Naming components and hierarchy | [See current documentation](../writing-stories/naming-components-and-hierarchy.md) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/basics/writing-stories) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.0/docs/src/pages/basics/writing-stories) |
-| | Build pages and screens | [See current documentation](../writing-stories/build-pages-with-storybook.md) | Non existing feature or undocumented | Non existing feature or undocumented |
-| | Stories for multiple components | [See current documentation](../writing-stories/stories-for-multiple-components.md) | Non existing feature or undocumented | Non existing feature or undocumented |
-| Write docs | DocsPage | [See current documentation](../writing-docs/docs-page.md) | See versioned addon documentation | Non existing feature or undocumented |
-| | MDX | [See current documentation](../writing-docs/mdx.md) | See versioned addon documentation | Non existing feature or undocumented |
-| | Doc Blocks/Argstable | [See current documentation](../writing-docs/doc-block-argstable.md) | [See versioned addon documentation](https://github.com/storybookjs/storybook/tree/release/5.3/addons/docs/) | Non existing feature or undocumented |
-| | Doc Blocks/Canvas | [See current documentation](../writing-docs/doc-block-canvas.md) | [See versioned addon documentation](https://github.com/storybookjs/storybook/tree/release/5.3/addons/docs/) | Non existing feature or undocumented |
-| | Doc Blocks/Color Palette | [See current documentation](../doc-block-colorpalette.md) | [See versioned addon documentation](https://github.com/storybookjs/storybook/tree/release/5.3/addons/docs/) | Non existing feature or undocumented |
-| | Doc Blocks/Description | [See current documentation](../writing-docs/doc-block-description.md) | [See versioned addon documentation](https://github.com/storybookjs/storybook/tree/release/5.3/addons/docs/) | Non existing feature or undocumented |
-| | Doc Blocks/Icon Gallery | [See current documentation](../writing-docs/doc-block-icongallery.md) | [See versioned addon documentation](https://github.com/storybookjs/storybook/tree/release/5.3/addons/docs/) | Non existing feature or undocumented |
-| | Doc Blocks/Source | [See current documentation](../writing-docs/doc-block-source.md) | [See versioned addon documentation](https://github.com/storybookjs/storybook/tree/release/5.3/addons/docs/) | Non existing feature or undocumented |
-| | Doc Blocks/Story | [See current documentation](../writing-docs/doc-block-story.md) | [See versioned addon documentation](https://github.com/storybookjs/storybook/tree/release/5.3/addons/docs/) | Non existing feature or undocumented |
-| | Doc Blocks/Typeset | [See current documentation](../writing-docs/doc-block-typeset.md) | [See versioned addon documentation](https://github.com/storybookjs/storybook/tree/release/5.3/addons/docs/) | Non existing feature or undocumented |
-| | Preview and build docs | [See current documentation](../writing-docs/build-documentation.md) | Non existing feature or undocumented | Non existing feature or undocumented |
-| Testing | Visual tests | [See current documentation](../writing-tests/visual-testing.md) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/testing/automated-visual-testing) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.0/docs/src/pages/testing/automated-visual-testing) |
-| | Accessibility tests | [See current documentation](../writing-tests/accessibility-testing.md) | Non existing feature or undocumented | Non existing feature or undocumented |
-| | Interaction tests | [See current documentation](../writing-tests/interaction-testing.md) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/testing/interaction-testing) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.0/docs/src/pages/testing/interaction-testing) |
-| | Snapshot tests | [See current documentation](../writing-tests/snapshot-testing.md) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/testing/structural-testing) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.0/docs/src/pages/testing/structural-testing) |
-| | Import stories in tests | [See current documentation](../writing-tests/importing-stories-in-tests.md) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/testing/react-ui-testing) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.0/docs/src/pages/testing/react-ui-testing) |
-| Sharing | Publish Storybook | [See current documentation](../sharing/publish-storybook.md) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/basics/exporting-storybook) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.0/docs/src/pages/basics/exporting-storybook) |
-| | Embed | [See current documentation](../sharing/embed.md) | Non existing feature or undocumented | Non existing feature or undocumented |
-| | Composition | [See current documentation](../sharing/storybook-composition.md) | Non existing feature or undocumented | Non existing feature or undocumented |
-| | Package Composition | [See current documentation](../sharing/package-composition.md) | Non existing feature or undocumented | Non existing feature or undocumented |
-| Essential addons | Controls | [See current documentation](../essentials/controls.md) | Controls are specific to version 6.0 see [Knobs versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/addons/knobs) | Controls are specific to version 6.0 see [Knobs versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.0/addons/knobs) |
-| | Actions | [See current documentation](../essentials/actions.md) | [See addon versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/addons/actions) | [See addon versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.0/addons/actions) |
-| | Viewport | [See current documentation](../essentials/viewport.md) | [See addon versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/addons/viewport) | [See addon versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.0/addons/viewport) |
-| | Backgrounds | [See current documentation](../essentials/backgrounds.md) | [See addon versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/addons/backgrounds) | [See addon versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.0/addons/backgrounds) |
-| | Toolbars and globals | [See current documentation](../essentials/toolbars-and-globals.md) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/basics/toolbar-guide) | Non existing feature or undocumented |
-| Configure | Overview | [See current documentation](../configure/overview.md) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/configurations/overview) | [See versioned documentation](https://github.com/storybookjs/storybook/blob/release/5.0/docs/src/pages/basics/writing-stories) |
-| | Integration/Webpack | [See current documentation](../configure/webpack.md) | See versioned documentation | See versioned documentation |
-| | Integration/Babel | [See current documentation](../configure/babel.md) | See versioned documentation here and [here](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/configurations/custom-babel-config) | See versioned documentation here and [here](https://github.com/storybookjs/storybook/tree/release/5.0/docs/src/pages/configurations/custom-babel-config) |
-| | Integration/Typescript | [See current documentation](../configure/typescript.md) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/configurations/typescript-config) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.0/docs/src/pages/configurations/typescript-config) |
-| | Integration/Styling and CSS | [See current documentation](../configure/styling-and-css.md) | See versioned documentation | See versioned documentation |
-| | Integration/Images and assets | [See current documentation](../configure/images-and-assets.md) | See versioned documentation | See versioned documentation |
-| | Story rendering | [See current documentation](../configure/story-rendering.md) | See versioned documentation [here](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/configurations/add-custom-head-tags) and [here](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/configurations/add-custom-body) | See versioned documentation [here](https://github.com/storybookjs/storybook/tree/release/5.0/docs/src/pages/configurations/add-custom-head-tags) |
-| | Story Layout | [See current documentation](../configure/story-layout.md) | Non existing feature or undocumented | Non existing feature or undocumented |
-| | User Interface/Features and behavior | [See current documentation](../configure/features-and-behavior.md) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/configurations/options-parameter) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.0/docs/src/pages/configurations/options-parameter) |
-| | User Interface/Theming | [See current documentation](../configure/theming.md) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/configurations/theming) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.0/docs/src/pages/configurations/theming) |
-| | User Interface/Sidebar & URLS | [See current documentation](../configure/sidebar-and-urls.md) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/configurations/options-parameter) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.0/docs/src/pages/configurations/options-parameter) |
-| | Environment variables | [See current documentation](../configure/environment-variables.md) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/configurations/env-vars) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.0/docs/src/pages/configurations/env-vars) |
-| Addons | Introduction | [See current documentation](../addons/introduction.md) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/addons/writing-addons) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.0/docs/src/pages/addons/writing-addons) |
-| | Install addons | [See current documentation](../addons/install-addons.md) | [See versioned documentation](https://github.com/storybookjs/storybook/blob/release/5.3/docs/src/pages/addons/using-addons/) | [See versioned documentation](https://github.com/storybookjs/storybook/blob/release/5.0/docs/src/pages/addons/using-addons/) |
-| | Writing Addons | [See current documentation](../addons/writing-addons.md) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/addons/writing-addons) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.0/docs/src/pages/addons/writing-addons) |
-| | Writing Presets | [See current documentation](../addons/writing-presets.md) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/presets/writing-presets) | Non existing feature or undocumented |
-| | Addons Knowledge Base | [See current documentation](../addons/addon-knowledge-base.md) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/addons/writing-addons) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.0/docs/src/pages/addons/writing-addons) |
-| | Types of addons | [See current documentation](../addons/addon-types.md) | Non existing feature or undocumented | Non existing feature or undocumented |
-| | Addons API | [See current documentation](../addons/addons-api.md) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/addons/api) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.0/docs/src/pages/addons/api) |
-| API | Stories/Component Story Format | [See current documentation](../api/csf.md) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/formats/component-story-format) | Non existing feature or undocumented |
-| | Stories/MDX syntax | [See current documentation](../api/mdx.md) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/formats/mdx-syntax) | Non existing feature or undocumented |
-| | Stories/StoriesOF format (see note below) | [See current documentation](../../lib/core/docs/storiesOf.md) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/formats/storiesof-api) | Non existing feature or undocumented |
-| | Frameworks | [See current documentation](../api/new-frameworks.md) | Non existing feature or undocumented | Non existing feature or undocumented |
-| | CLI options | [See current documentation](../api/cli-options.md) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/configurations/cli-options) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.0/docs/src/pages/configurations/cli-options) |
+
+| Section | Page | Current Location | Version 5.3 location | Version 5.0 location |
+|------------------|-------------------------------------------|-----------------------------------------------------------------------------------|----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|----------------------------------------------------------------------------------------------------------------------------------------------------------|
+| Get started | Install | [See current documentation](./get-started/install.md) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/guides/quick-start-guide) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.0/docs/src/pages/guides/quick-start-guide) |
+| | What's a story | [See current documentation](./get-started/whats-a-story.md) | [See versioned documentation for your framework](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/guides) | [See versioned documentation for your framework](https://github.com/storybookjs/storybook/tree/release/5.0/docs/src/pages/guides) |
+| | Browse Stories | [See current documentation](./get-started/browse-stories.md) | [See versioned documentation for your framework](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/guides) | [See versioned documentation for your framework](https://github.com/storybookjs/storybook/blob/release/5.0/docs/src/pages/guides) |
+| | Setup | [See current documentation](./get-started/setup.md) | [See versioned documentation for your framework](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/guides) | [See versioned documentation for your framework](https://github.com/storybookjs/storybook/tree/release/5.0/docs/src/pages/guides) |
+| Write stories | Introduction | [See current documentation](./writing-stories/introduction.md) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/basics/writing-stories) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.0/docs/src/pages/basics/writing-stories) |
+| | Parameters | [See current documentation](./writing-stories/parameters.md) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/basics/writing-stories/index.md#parameters) | Non existing feature or undocumented |
+| | Decorators | [See current documentation](./writing-stories/decorators.md) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/basics/writing-stories/index.md#decorators) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.0/docs/src/pages/basics/writing-stories/index.md#using-decorators) |
+| | Naming components and hierarchy | [See current documentation](./writing-stories/naming-components-and-hierarchy.md) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/basics/writing-stories) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.0/docs/src/pages/basics/writing-stories) |
+| | Build pages and screens | [See current documentation](./writing-stories/build-pages-with-storybook.md) | Non existing feature or undocumented | Non existing feature or undocumented |
+| | Stories for multiple components | [See current documentation](./writing-stories/stories-for-multiple-components.md) | Non existing feature or undocumented | Non existing feature or undocumented |
+| Write docs | DocsPage | [See current documentation](./writing-docs/docs-page.md) | See versioned addon documentation | Non existing feature or undocumented |
+| | MDX | [See current documentation](./writing-docs/mdx.md) | See versioned addon documentation | Non existing feature or undocumented |
+| | Doc Blocks/Argstable | [See current documentation](./writing-docs/doc-block-argstable.md) | [See versioned addon documentation](https://github.com/storybookjs/storybook/tree/release/5.3/addons/docs/) | Non existing feature or undocumented |
+| | Doc Blocks/Canvas | [See current documentation](./writing-docs/doc-block-canvas.md) | [See versioned addon documentation](https://github.com/storybookjs/storybook/tree/release/5.3/addons/docs/) | Non existing feature or undocumented |
+| | Doc Blocks/Color Palette | [See current documentation](./writing-docs/doc-block-colorpalette.md) | [See versioned addon documentation](https://github.com/storybookjs/storybook/tree/release/5.3/addons/docs/) | Non existing feature or undocumented |
+| | Doc Blocks/Description | [See current documentation](./writing-docs/doc-block-description.md) | [See versioned addon documentation](https://github.com/storybookjs/storybook/tree/release/5.3/addons/docs/) | Non existing feature or undocumented |
+| | Doc Blocks/Icon Gallery | [See current documentation](./writing-docs/doc-block-icongallery.md) | [See versioned addon documentation](https://github.com/storybookjs/storybook/tree/release/5.3/addons/docs/) | Non existing feature or undocumented |
+| | Doc Blocks/Source | [See current documentation](./writing-docs/doc-block-source.md) | [See versioned addon documentation](https://github.com/storybookjs/storybook/tree/release/5.3/addons/docs/) | Non existing feature or undocumented |
+| | Doc Blocks/Story | [See current documentation](./writing-docs/doc-block-story.md) | [See versioned addon documentation](https://github.com/storybookjs/storybook/tree/release/5.3/addons/docs/) | Non existing feature or undocumented |
+| | Doc Blocks/Typeset | [See current documentation](./writing-docs/doc-block-typeset.md) | [See versioned addon documentation](https://github.com/storybookjs/storybook/tree/release/5.3/addons/docs/) | Non existing feature or undocumented |
+| | Preview and build docs | [See current documentation](./writing-docs/build-documentation.md) | Non existing feature or undocumented | Non existing feature or undocumented |
+| Testing | Visual tests | [See current documentation](./writing-tests/visual-testing.md) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/testing/automated-visual-testing) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.0/docs/src/pages/testing/automated-visual-testing) |
+| | Accessibility tests | [See current documentation](./writing-tests/accessibility-testing.md) | Non existing feature or undocumented | Non existing feature or undocumented |
+| | Interaction tests | [See current documentation](./writing-tests/interaction-testing.md) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/testing/interaction-testing) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.0/docs/src/pages/testing/interaction-testing) |
+| | Snapshot tests | [See current documentation](./writing-tests/snapshot-testing.md) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/testing/structural-testing) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.0/docs/src/pages/testing/structural-testing) |
+| | Import stories in tests | [See current documentation](./writing-tests/importing-stories-in-tests.md) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/testing/react-ui-testing) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.0/docs/src/pages/testing/react-ui-testing) |
+| Sharing | Publish Storybook | [See current documentation](./sharing/publish-storybook.md) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/basics/exporting-storybook) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.0/docs/src/pages/basics/exporting-storybook) |
+| | Embed | [See current documentation](./sharing/embed.md) | Non existing feature or undocumented | Non existing feature or undocumented |
+| | Composition | [See current documentation](./sharing/storybook-composition.md) | Non existing feature or undocumented | Non existing feature or undocumented |
+| | Package Composition | [See current documentation](./sharing/package-composition.md) | Non existing feature or undocumented | Non existing feature or undocumented |
+| Essential addons | Controls | [See current documentation](./essentials/controls.md) | Controls are specific to version 6.0 see [Knobs versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/addons/knobs) | Controls are specific to version 6.0 see [Knobs versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.0/addons/knobs) |
+| | Actions | [See current documentation](./essentials/actions.md) | [See addon versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/addons/actions) | [See addon versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.0/addons/actions) |
+| | Viewport | [See current documentation](./essentials/viewport.md) | [See addon versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/addons/viewport) | [See addon versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.0/addons/viewport) |
+| | Backgrounds | [See current documentation](./essentials/backgrounds.md) | [See addon versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/addons/backgrounds) | [See addon versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.0/addons/backgrounds) |
+| | Toolbars and globals | [See current documentation](./essentials/toolbars-and-globals.md) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/basics/toolbar-guide) | Non existing feature or undocumented |
+| Configure | Overview | [See current documentation](./configure/overview.md) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/configurations/overview) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.0/docs/src/pages/basics/writing-stories) |
+| | Integration/Babel | [See current documentation](./configure/babel.md) | See versioned documentation here and [here](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/configurations/custom-babel-config) | See versioned documentation here and [here](https://github.com/storybookjs/storybook/tree/release/5.0/docs/src/pages/configurations/custom-babel-config) |
+| | Integration/Typescript | [See current documentation](./configure/typescript.md) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/configurations/typescript-config) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.0/docs/src/pages/configurations/typescript-config) |
+| | Integration/Styling and CSS | [See current documentation](./configure/styling-and-css.md) | See versioned documentation | See versioned documentation |
+| | Integration/Images and assets | [See current documentation](./configure/images-and-assets.md) | See versioned documentation | See versioned documentation |
+| | Story rendering | [See current documentation](./configure/story-rendering.md) | See versioned documentation [here](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/configurations/add-custom-head-tags) and [here](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/configurations/add-custom-body) | See versioned documentation [here](https://github.com/storybookjs/storybook/tree/release/5.0/docs/src/pages/configurations/add-custom-head-tags) |
+| | Story Layout | [See current documentation](./configure/story-layout.md) | Non existing feature or undocumented | Non existing feature or undocumented |
+| | User Interface/Features and behavior | [See current documentation](./configure/features-and-behavior.md) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/configurations/options-parameter) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.0/docs/src/pages/configurations/options-parameter) |
+| | User Interface/Theming | [See current documentation](./configure/theming.md) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/configurations/theming) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.0/docs/src/pages/configurations/theming) |
+| | User Interface/Sidebar & URLS | [See current documentation](./configure/sidebar-and-urls.md) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/configurations/options-parameter) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.0/docs/src/pages/configurations/options-parameter) |
+| | Environment variables | [See current documentation](./configure/environment-variables.md) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/configurations/env-vars) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.0/docs/src/pages/configurations/env-vars) |
+| Builders | Introduction | [See current documentation](./builders/overview.md) | Non existing feature or undocumented | Non existing feature or undocumented |
+| | Vite | [See current documentation](./builders/vite.md) | Non existing feature or undocumented | Non existing feature or undocumented |
+| | Webpack | [See current documentation](./builders/webpack.md) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/configurations/custom-webpack-config/index.md) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.0/docs/src/pages/configurations/custom-webpack-config/index.md) |
+| | Builder API | [See current documentation](./builders/builder-api.md) | Non existing feature or undocumented | Non existing feature or undocumented |
+| Addons | Introduction | [See current documentation](./addons/introduction.md) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/addons/writing-addons) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.0/docs/src/pages/addons/writing-addons) |
+| | Install addons | [See current documentation](./addons/install-addons.md) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/addons/using-addons/) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.0/docs/src/pages/addons/using-addons/) |
+| | Writing Addons | [See current documentation](./addons/writing-addons.md) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/addons/writing-addons) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.0/docs/src/pages/addons/writing-addons) |
+| | Writing Presets | [See current documentation](./addons/writing-presets.md) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/presets/writing-presets) | Non existing feature or undocumented |
+| | Addons Knowledge Base | [See current documentation](./addons/addon-knowledge-base.md) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/addons/writing-addons) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.0/docs/src/pages/addons/writing-addons) |
+| | Types of addons | [See current documentation](./addons/addon-types.md) | Non existing feature or undocumented | Non existing feature or undocumented |
+| | Addons API | [See current documentation](./addons/addons-api.md) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/addons/api) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.0/docs/src/pages/addons/api) |
+| API | Stories/Component Story Format | [See current documentation](./api/csf.md) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/formats/component-story-format) | Non existing feature or undocumented |
+| | Stories/MDX syntax | [See current documentation](./api/mdx.md) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/formats/mdx-syntax) | Non existing feature or undocumented |
+| | Stories/StoriesOF format (see note below) | [See current documentation](../lib/core/docs/storiesOf.md) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/formats/storiesof-api) | Non existing feature or undocumented |
+| | Frameworks | [See current documentation](./api/new-frameworks.md) | Non existing feature or undocumented | Non existing feature or undocumented |
+| | CLI options | [See current documentation](./api/cli-options.md) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/configurations/cli-options) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.0/docs/src/pages/configurations/cli-options) |
+
+
With the release of version 5.3, we've updated how you can write your stories more compactly and easily. It doesn't mean that the storiesOf format has been removed. For the time being, we're still supporting it, and we have documentation for it. But be advised that this is bound to change in the future.
@@ -252,7 +271,7 @@ Suppose you don't want to run the command above frequently. Add http-serve
### Can I use Storybook with Vue 3?
-Yes, with the release of version 6.2, Storybook now includes support for Vue 3. See the [install page](../get-started/install.md) for instructions.
+Yes, with the release of version 6.2, Storybook now includes support for Vue 3. See the [install page](./get-started/install.md) for instructions.
### Is snapshot testing with Storyshots supported for Vue 3?
@@ -264,7 +283,7 @@ See our documentation on how to customize the [Storyshots configuration](./snaps
### Why are my MDX stories not working in IE11?
-Currently there's an issue when using MDX stories with IE11. This issue does not apply to [DocsPage](../writing-docs/docs-page.md). If you're interested in helping us fix this issue, read our Contribution guidelines and submit a pull request.
+Currently there's an issue when using MDX stories with IE11. This issue does not apply to [DocsPage](./writing-docs/docs-page.md). If you're interested in helping us fix this issue, read our Contribution guidelines and submit a pull request.
### Why are my mocked GraphQL queries failing with Storybook's MSW addon?
@@ -360,12 +379,10 @@ export default meta;
Although valid, it introduces additional boilerplate code to the story definition. Instead, we're working towards implementing a safer mechanism based on what's currently being discussed in the following [issue](https://github.com/microsoft/TypeScript/issues/7481). Once the feature is released, we'll migrate our existing examples and documentation accordingly.
-
## Why is Storybook's source loader returning undefined with curried functions?
This is a known issue with Storybook. If you're interested in getting it fixed, open an issue with a [working reproduction](./contribute/how-to-reproduce) so that it can be triaged and fixed in future releases.
-
## Why are my args no longer displaying the default values?
Before version 6.3, unset args were set to the `argTypes.defaultValue` if specified or inferred from the component's properties (e.g., React's prop types, Angular inputs, Vue props). Starting with version 6.3, Storybook no longer infers default values but instead defines the arg's value as `undefined` when unset, allowing the framework to supply its default value.
@@ -400,4 +417,4 @@ export default {
},
},
};
-```
\ No newline at end of file
+```
diff --git a/docs/get-started/conclusion.md b/docs/get-started/conclusion.md
index 79d662b19f48..074d4dd09a48 100644
--- a/docs/get-started/conclusion.md
+++ b/docs/get-started/conclusion.md
@@ -8,4 +8,4 @@ If you’d like to learn workflows for building app UIs with Storybook, check ou
- [How to write stories](../writing-stories/introduction.md)
- [How to document components and design systems](../writing-docs/introduction.md)
-- [View example Storybooks from leading companies](./examples.md)
+- [View example Storybooks from leading companies](https://storybook.js.org/showcase)
diff --git a/docs/get-started/install.md b/docs/get-started/install.md
index 7c24707d5429..7daf4ffda386 100644
--- a/docs/get-started/install.md
+++ b/docs/get-started/install.md
@@ -41,6 +41,7 @@ The command above will make the following changes to your local environment:
- 🛠 Setup the necessary scripts to run and build Storybook.
- 🛠 Add the default Storybook configuration.
- 📝 Add some boilerplate stories to get you started.
+- 📡 Set up telemetry to help us improve Storybook. Read more about it [here](../configure/telemetry.md).
Depending on your framework, first, build your app and then check that everything worked by running:
@@ -88,6 +89,10 @@ Below are some of the most common installation issues and instructions on how to
+
+Storybook collects completely anonymous data to help us improve user experience. Participation is optional, and you may [opt-out](../configure/telemetry.md#how-to-opt-out) if you'd not like to share any information.
+
+
If all else fails, try asking for [help](https://storybook.js.org/support)
diff --git a/docs/get-started/setup.md b/docs/get-started/setup.md
index 792a7365c445..2959e5685ddd 100644
--- a/docs/get-started/setup.md
+++ b/docs/get-started/setup.md
@@ -42,20 +42,20 @@ Storybook comes with a permissive [default configuration](../configure/overview.
Your project may have additional requirements before components can be rendered in isolation. This warrants customizing configuration further. There are three broad categories of configuration you might need.
-Build configuration like webpack and Babel
+Build configuration like Webpack and Babel
If you see errors on the CLI when you run the `yarn storybook` command, you likely need to make changes to Storybook’s build configuration. Here are some things to try:
- [Presets](../addons/addon-types.md) bundle common configurations for various technologies into Storybook. In particular, presets exist for Create React App, SCSS and Ant Design.
- Specify a custom [Babel configuration](../configure/babel.md#custom-babel-config) for Storybook. Storybook automatically tries to use your project’s config if it can.
-- Adjust the [webpack configuration](../configure/webpack.md) that Storybook uses. Try patching in your own configuration if needed.
+- Adjust the [Webpack configuration](../builders/webpack.md) that Storybook uses. Try patching in your own configuration if needed.
Runtime configuration
-If Storybook builds but you see an error immediately when connecting to it in the browser, in that case, chances are one of your input files is not compiling/transpiling correctly to be interpreted by the browser. Storybook supports modern browsers and IE11, but you may need to check the Babel and webpack settings (see above) to ensure your component code works correctly.
+If Storybook builds but you see an error immediately when connecting to it in the browser, in that case, chances are one of your input files is not compiling/transpiling correctly to be interpreted by the browser. Storybook supports modern browsers and IE11, but you may need to check the Babel and Webpack settings (see above) to ensure your component code works correctly.
@@ -104,7 +104,7 @@ If you are using CSS-in-JS, chances are your styles are working because they’r
@import CSS into components
-Storybook allows you to import CSS files in your components directly. But in some cases you may need to [tweak its webpack configuration](../configure/webpack.md#extendingstorybooks-webpack-config). Angular components require [a special import](../configure/styling-and-css.md#importing-css-files).
+Storybook allows you to import CSS files in your components directly. But in some cases you may need to [tweak its Webpack configuration](../builders/webpack.md#extendingstorybooks-webpack-config). Angular components require [a special import](../configure/styling-and-css.md#importing-css-files).
@@ -125,7 +125,7 @@ Alternatively, if you want to inject a CSS link tag to the `` directly (or
Load fonts or images from a local directory
-If you're referencing fonts or images from a local directory, you'll need to configure the Storybook script to [serve the static files](../configure/images-and-assets).
+If you're referencing fonts or images from a local directory, you'll need to configure the Storybook script to [serve the static files](../configure/images-and-assets.md).
diff --git a/docs/sharing/design-addon-panel.png b/docs/sharing/design-addon-panel.png
new file mode 100644
index 000000000000..fdb6a4b52e19
Binary files /dev/null and b/docs/sharing/design-addon-panel.png differ
diff --git a/docs/sharing/design-integrations.md b/docs/sharing/design-integrations.md
new file mode 100644
index 000000000000..48f87006987a
--- /dev/null
+++ b/docs/sharing/design-integrations.md
@@ -0,0 +1,174 @@
+---
+title: 'Design integrations'
+---
+
+Storybook integrates with design tools to speed up your development workflow. That helps you debug inconsistencies earlier in the design process, discover existing components to reuse, and compare designs to stories.
+
+## Figma
+
+[Figma](https://www.figma.com/) is a collaborative UI design tool that allows multiple people to work on the same design simultaneously in the browser. There are two ways to integrate Storybook and Figma.
+
+- [**Embed Storybook in Figma**](#embed-storybook-in-figma-with-the-plugin)
+- [**Embed Figma in Storybook**](#embed-figma-in-storybook-with-the-addon)
+
+### Embed Storybook in Figma with the plugin
+
+[Storybook Connect](https://www.figma.com/community/plugin/1056265616080331589/Storybook-Connect) is a Figma plugin that allows you to embed component stories in Figma. It’s powered by [Storybook embeds](./embed.md) and [Chromatic](https://www.chromatic.com/), a publishing tool created by the Storybook team.
+
+
+
+#### Install plugin
+
+Before we begin, you must have a Storybook [published to Chromatic](./publish-storybook.md#publish-storybook-with-chromatic). It provides the index, versions, and access control that back the plugin.
+
+Go to [Storybook Connect](https://www.figma.com/community/plugin/1056265616080331589/Storybook-Connect) to install the plugin.
+
+In Figma, open the command palette (in Mac OS, use `Command + /`, in Windows use `Control + /`) and type `Storybook Connect` to enable it.
+
+
+
+Follow the instructions to connect and authenticate with Chromatic.
+
+#### Link stories to Figma components
+
+Link stories to Figma components, variants, and instances.
+
+Go to a story in a Storybook published on Chromatic. Make sure it’s on the branch you want to link. Then copy the URL to the story.
+
+In Figma, select the component, open the plugin, and paste the URL.
+
+
+
+Chromatic will automatically update your linked stories to reflect the most recent Storybook published on the branch you linked. That means the link persists even as you push new code.
+
+
+💡 The plugin does not support linking stories to Figma layers.
+
+
+#### View stories in Figma
+
+Once they're connected, you'll be able to view the story by clicking the link in the sidebar. Click "View story". Alternatively, open the plugin by using the command palette (in Mac OS, use `Command + /`, in Windows, use `Control + /`), then type `Storybook Connect`.
+
+
+
+### Embed Figma in Storybook with the addon
+
+[Design addon](https://storybook.js.org/addons/storybook-addon-designs) allows you to embed Figma files and prototypes in Storybook.
+
+
+
+#### Install design addon
+
+Run the following command to install the addon.
+
+
+
+
+
+
+
+Update your Storybook configuration (in `.storybook/main.js|ts`) to include the addon.
+
+
+
+
+
+
+
+#### Link Figma components to stories
+
+In Figma, open the file you want to embed in Storybook. You can embed files, prototypes, components, and frames.
+
+- Embed a file or prototype, click the "Share" button to generate a unique URL for the file then click "Copy link".
+
+- Embed a component or frame check "Link to selected frame" in the Share dialog. Or right click on the frame and go to "Copy/Paste as" » "Copy link".
+
+In Storybook, add a new [parameter](../writing-stories/parameters.md) named `design` to your story and paste the Figma URL. For example:
+
+
+
+
+
+
+
+#### View designs in Storybook
+
+Click the "Design" tab in the addon panel to view the embedded Figma design.
+
+
+
+## Zeplin
+
+[Zeplin](https://zeplin.io/) is a design tool that generates styleguides from [Sketch](https://www.sketch.com/), [Figma](https://www.figma.com/), and [Adobe XD](https://www.adobe.com/en/products/xd.html).
+
+Use the [Zeplin addon](https://storybook.js.org/addons/storybook-zeplin) to connect Storybook. The addon displays designs from Zeplin alongside the currently selected story. It includes convenient tooling to overlay the design image atop the live component.
+
+Zeplin's native app also supports [links to published Storybooks](https://support.zeplin.io/en/articles/5674596-connecting-your-storybook-instance-with-zeplin).
+
+
+
+## Zeroheight
+
+[Zeroheight](https://zeroheight.com/) is a collaborative styleguide generator for design systems. It showcases design, code, brand, and copywriting documentation in one place. Users can easily edit that documentation with a WYSIWYG editor.
+
+Zeroheight integrates with [Storybook](https://zeroheight.com/3xlwst8/p/507ba7-storybook), enabling you to embed stories alongside your design specs.
+
+
+
+## UXPin
+
+[UXPin](https://www.uxpin.com/) is an interactive design tool that uses production code to generate prototypes.
+
+UXPin allows you to [use interactive stories](https://www.uxpin.com/docs/merge/storybook-integration/) to design user flows.
+
+
+
+## InVision Design System Manager
+
+[InVision DSM](https://www.invisionapp.com/design-system-manager) is a design system documentation tool. It helps design teams consolidate UX principles, user interface design, and design tokens in a shared workspace.
+
+InVision allows you to embed [Storybook](https://support.invisionapp.com/hc/en-us/articles/360028388192-Publishing-Storybook-to-DSM) in your design system documentation.
+
+
+
+## Adobe XD
+
+[Adobe XD](https://www.adobe.com/products/xd.html) is a UI and UX design tool for creating wireframes, interactive designs, and prototypes.
+
+Integrate Adobe XD with Storybook using the [design addon](https://storybook.js.org/addons/storybook-addon-designs/). You can [embed design specs](https://helpx.adobe.com/xd/help/publish-design-specs.html) alongside stories by following these [instructions](https://pocka.github.io/storybook-addon-designs/?path=/story/docs-iframe-readme--page).
+
+## Build your own integration
+
+Extend and customize Storybook by building an integration. Integrate with lower-level Storybook APIs or bootstrap an addon to customize Storybook's UI and behavior.
+
+- [Addon documentation](../addons/introduction.md)
+- [Create an addon tutorial](https://storybook.js.org/tutorials/create-an-addon/)
diff --git a/docs/sharing/figma-plugin-open-in-figma.png b/docs/sharing/figma-plugin-open-in-figma.png
new file mode 100644
index 000000000000..9c699609c207
Binary files /dev/null and b/docs/sharing/figma-plugin-open-in-figma.png differ
diff --git a/docs/sharing/figma-plugin-open-story.mp4 b/docs/sharing/figma-plugin-open-story.mp4
new file mode 100644
index 000000000000..354a5355af47
Binary files /dev/null and b/docs/sharing/figma-plugin-open-story.mp4 differ
diff --git a/docs/sharing/figma-plugin-paste-url.png b/docs/sharing/figma-plugin-paste-url.png
new file mode 100644
index 000000000000..a9484c11c3e8
Binary files /dev/null and b/docs/sharing/figma-plugin-paste-url.png differ
diff --git a/docs/sharing/figma-plugin-sidebar.png b/docs/sharing/figma-plugin-sidebar.png
new file mode 100644
index 000000000000..9cf9c13265cc
Binary files /dev/null and b/docs/sharing/figma-plugin-sidebar.png differ
diff --git a/docs/sharing/storybook-composition.md b/docs/sharing/storybook-composition.md
index 88284c846a0b..ba12b5276a9c 100644
--- a/docs/sharing/storybook-composition.md
+++ b/docs/sharing/storybook-composition.md
@@ -65,7 +65,7 @@ You can also compose Storybooks based on the current development environment (e.
-💡 Similar to the other fields available in Storybook’s configuration file, the `refs` field can also be a function that accepts a config parameter containing Storybook’s configuration object. Check the [webpack documentation](../configure/webpack.md#extending-storybooks-webpack-config) to learn more about it.
+💡 Similar to the other fields available in Storybook’s configuration file, the `refs` field can also be a function that accepts a config parameter containing Storybook’s configuration object. Check the [Webpack documentation](../builders/webpack.md#extending-storybooks-webpack-config) to learn more about it.
diff --git a/docs/sharing/storybook-figma-addon.png b/docs/sharing/storybook-figma-addon.png
new file mode 100644
index 000000000000..f6924a72b90d
Binary files /dev/null and b/docs/sharing/storybook-figma-addon.png differ
diff --git a/docs/sharing/storybook-invision-dsm.gif b/docs/sharing/storybook-invision-dsm.gif
new file mode 100644
index 000000000000..adaf18d8d021
Binary files /dev/null and b/docs/sharing/storybook-invision-dsm.gif differ
diff --git a/docs/sharing/storybook-uxpin.mp4 b/docs/sharing/storybook-uxpin.mp4
new file mode 100644
index 000000000000..e9a8d4750ff3
Binary files /dev/null and b/docs/sharing/storybook-uxpin.mp4 differ
diff --git a/docs/sharing/storybook-zeplin-addon.png b/docs/sharing/storybook-zeplin-addon.png
new file mode 100644
index 000000000000..d334ac147894
Binary files /dev/null and b/docs/sharing/storybook-zeplin-addon.png differ
diff --git a/docs/sharing/storybook-zeroheight.gif b/docs/sharing/storybook-zeroheight.gif
new file mode 100644
index 000000000000..4ec641641307
Binary files /dev/null and b/docs/sharing/storybook-zeroheight.gif differ
diff --git a/docs/snippets/angular/button-story-with-blue-args.mdx.mdx b/docs/snippets/angular/button-story-with-blue-args.mdx.mdx
index 423d9de4a6b7..15b10326a495 100644
--- a/docs/snippets/angular/button-story-with-blue-args.mdx.mdx
+++ b/docs/snippets/angular/button-story-with-blue-args.mdx.mdx
@@ -20,5 +20,5 @@ import { Button } from './button.component';
}}
/>
-
+
```
\ No newline at end of file
diff --git a/docs/snippets/angular/component-story-figma-integration.mdx.mdx b/docs/snippets/angular/component-story-figma-integration.mdx.mdx
new file mode 100644
index 000000000000..85939ccf81a0
--- /dev/null
+++ b/docs/snippets/angular/component-story-figma-integration.mdx.mdx
@@ -0,0 +1,27 @@
+```md
+
+
+import { Canvas, Meta, Story } from '@storybook/addon-docs';
+
+import { withDesign } from 'storybook-addon-designs';
+
+import { MyComponent } from './MyComponent.component';
+
+
+
+export const Template = () => ({ props: {} });
+
+
+```
\ No newline at end of file
diff --git a/docs/snippets/angular/component-story-figma-integration.ts.mdx b/docs/snippets/angular/component-story-figma-integration.ts.mdx
new file mode 100644
index 000000000000..eb0e2565f611
--- /dev/null
+++ b/docs/snippets/angular/component-story-figma-integration.ts.mdx
@@ -0,0 +1,29 @@
+```ts
+// MyComponent.stories.ts
+
+import { Story, Meta } from '@storybook/angular/';
+
+import { withDesign } from 'storybook-addon-designs';
+
+import { MyComponent } from './MyComponent.component';
+
+// More on default export: https://storybook.js.org/docs/angular/writing-stories/introduction#default-export
+export default {
+ title: 'FigmaExample',
+ component: MyComponent,
+ decorators: [withDesign],
+} as Meta;
+
+// More on component templates: https://storybook.js.org/docs/angular/writing-stories/introduction#using-args
+const Template: Story = () => ({
+ props: {},
+});
+
+export const Example = Template.bind({});
+Example.parameters = {
+ design: {
+ type: 'figma',
+ url: 'https://www.figma.com/file/Sample-File',
+ },
+};
+```
\ No newline at end of file
diff --git a/docs/snippets/angular/login-form-with-play-function.mdx.mdx b/docs/snippets/angular/login-form-with-play-function.mdx.mdx
index 03e662a852a8..31443143cd7d 100644
--- a/docs/snippets/angular/login-form-with-play-function.mdx.mdx
+++ b/docs/snippets/angular/login-form-with-play-function.mdx.mdx
@@ -5,6 +5,8 @@ import { Canvas, Meta, Story } from '@storybook/addon-docs';
import { within, userEvent } from '@storybook/testing-library';
+import { expect } from '@storybook/jest';
+
import { LoginForm } from './LoginForm.component';
@@ -13,7 +15,7 @@ export const Template = (args) => ({ props: args });
```
\ No newline at end of file
diff --git a/docs/snippets/angular/login-form-with-play-function.ts.mdx b/docs/snippets/angular/login-form-with-play-function.ts.mdx
index 276e1d785a2e..48df0db4da3c 100644
--- a/docs/snippets/angular/login-form-with-play-function.ts.mdx
+++ b/docs/snippets/angular/login-form-with-play-function.ts.mdx
@@ -5,6 +5,8 @@ import { Meta, Story } from '@storybook/angular';
import { userEvent, within } from '@storybook/testing-library';
+import { expect } from '@storybook/jest';
+
import { LoginForm } from './LoginForm.component';
export default {
@@ -27,14 +29,19 @@ FilledForm.play = async ({ canvasElement }) => {
// Starts querying the component from its root element
const canvas = within(canvasElement);
- await userEvent.type(canvas.getByTestId('email'), 'email@provider.com', {
- delay: 100,
- });
- await userEvent.type(canvas.getByTestId('password'), 'a-random-password', {
- delay: 100,
- });
+ // 👇 Simulate interactions with the component
+ await userEvent.type(canvas.getByTestId('email'), 'email@provider.com');
+
+ await userEvent.type(canvas.getByTestId('password'), 'a-random-password');
// See https://storybook.js.org/docs/angular/essentials/actions#automatically-matching-args to learn how to setup logging in the Actions panel
await userEvent.click(canvas.getByRole('button'));
+
+ // 👇 Assert DOM structure
+ await expect(
+ canvas.getByText(
+ 'Everything is perfect. Your account is ready and we should probably get you started!'
+ )
+ ).toBeInTheDocument();
};
```
\ No newline at end of file
diff --git a/docs/snippets/angular/my-component-play-function-with-delay.mdx.mdx b/docs/snippets/angular/my-component-play-function-with-delay.mdx.mdx
index 20b6d5cc2a49..6ed819ac2e70 100644
--- a/docs/snippets/angular/my-component-play-function-with-delay.mdx.mdx
+++ b/docs/snippets/angular/my-component-play-function-with-delay.mdx.mdx
@@ -16,7 +16,7 @@ export const Template = (args) => ({ props: args });
play={async () => {
const exampleElement= screen.getByLabelText('example-element');
- // The delay option set the ammount of milliseconds between characters being typed
+ // The delay option set the amount of milliseconds between characters being typed
await userEvent.type(exampleElement, 'random string', {
delay: 100,
});
@@ -28,4 +28,4 @@ export const Template = (args) => ({ props: args });
}} >
{Template.bind({})}
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/angular/my-component-play-function-with-delay.ts.mdx b/docs/snippets/angular/my-component-play-function-with-delay.ts.mdx
index c0bdc9307061..084f43dd360d 100644
--- a/docs/snippets/angular/my-component-play-function-with-delay.ts.mdx
+++ b/docs/snippets/angular/my-component-play-function-with-delay.ts.mdx
@@ -23,7 +23,7 @@ const Template: Story = (args) => ({
export const DelayedStory: Story = Template.bind({});
DelayedStory.play = () => {
const exampleElement= screen.getByLabelText('example-element');
- // The delay option set the ammount of milliseconds between characters being typed
+ // The delay option set the amount of milliseconds between characters being typed
await userEvent.type(exampleElement, 'random string', {
delay: 100,
});
@@ -33,4 +33,4 @@ DelayedStory.play = () => {
delay: 100,
});
};
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/common/args-usage-with-addons.js.mdx b/docs/snippets/common/args-usage-with-addons.js.mdx
index 7c1ccf730efd..77d833352065 100644
--- a/docs/snippets/common/args-usage-with-addons.js.mdx
+++ b/docs/snippets/common/args-usage-with-addons.js.mdx
@@ -1,5 +1,5 @@
```js
-// your-addon/register.js
+// your-addon/manager.js
import { useArgs } from '@storybook/api';
diff --git a/docs/snippets/common/component-cypress-test.js.mdx b/docs/snippets/common/component-cypress-test.js.mdx
index 03d9db2866a7..8de26d698793 100644
--- a/docs/snippets/common/component-cypress-test.js.mdx
+++ b/docs/snippets/common/component-cypress-test.js.mdx
@@ -8,7 +8,7 @@ describe('Login Form', () => {
cy.visit('/iframe.html?id=components-login-form--example');
cy.get('#login-form').within(() => {
cy.log('**enter the email**');
- cy.get('#email').should('have.value', 'your-own-emailaddress@provider.com');
+ cy.get('#email').should('have.value', 'email@provider.com');
cy.log('**enter password**');
cy.get('#password').should('have.value', 'a-random-password');
});
diff --git a/docs/snippets/common/component-playwright-test.js.mdx b/docs/snippets/common/component-playwright-test.js.mdx
index d9d195f40967..0e0e83b99a43 100644
--- a/docs/snippets/common/component-playwright-test.js.mdx
+++ b/docs/snippets/common/component-playwright-test.js.mdx
@@ -7,7 +7,7 @@ test('Login Form inputs', async ({ page }) => {
await page.goto('http://localhost:6006/iframe.html?id=components-login-form--example');
const email = await page.inputValue('#email');
const password = await page.inputValue('#password');
- await expect(email).toBe('your-own-emailaddress@provider.com');
+ await expect(email).toBe('email@provider.com');
await expect(password).toBe('a-random-password');
});
```
\ No newline at end of file
diff --git a/docs/snippets/common/component-story-conditional-controls-mutual-exclusion.js.mdx b/docs/snippets/common/component-story-conditional-controls-mutual-exclusion.js.mdx
index 86b3c15aaccc..58ecafb7128c 100644
--- a/docs/snippets/common/component-story-conditional-controls-mutual-exclusion.js.mdx
+++ b/docs/snippets/common/component-story-conditional-controls-mutual-exclusion.js.mdx
@@ -6,10 +6,13 @@ export default {
title: 'Button',
argTypes: {
// button can be passed a label or an image, not both
- label: { control: 'text', removeIf: 'image' },
+ label: {
+ control: 'text',
+ if: { arg: 'image', truthy: false },
+ },
image: {
control: { type: 'select', options: ['foo.jpg', 'bar.jpg'] },
- removeIf: 'label',
+ if: { arg: 'label', truthy: false },
},
},
};
diff --git a/docs/snippets/common/component-story-conditional-controls-toggle.js.mdx b/docs/snippets/common/component-story-conditional-controls-toggle.js.mdx
index 9f46bf6e4acb..2eba20f71e3e 100644
--- a/docs/snippets/common/component-story-conditional-controls-toggle.js.mdx
+++ b/docs/snippets/common/component-story-conditional-controls-toggle.js.mdx
@@ -8,9 +8,9 @@ export default {
label: { control: 'text' }, // always shows
advanced: { control: 'boolean' },
// below are only included when advanced is true
- margin: { control: 'number', addIf: 'advanced' },
- padding: { control: 'number', addIf: 'advanced' },
- cornerRadius: { control: 'number', addIf: 'advanced' },
+ margin: { control: 'number', if: { arg: 'advanced' } },
+ padding: { control: 'number', if: { arg: 'advanced' } },
+ cornerRadius: { control: 'number', if: { arg: 'advanced' } },
},
};
```
diff --git a/docs/snippets/common/component-story-custom-source.js.mdx b/docs/snippets/common/component-story-custom-source.js.mdx
index ae09a7eb6291..a1bc4291717c 100644
--- a/docs/snippets/common/component-story-custom-source.js.mdx
+++ b/docs/snippets/common/component-story-custom-source.js.mdx
@@ -12,7 +12,7 @@ export default {
component: Button,
};
-export const Template = (args) => ({
+const Template = (args) => ({
//👇 Your template goes here
});
diff --git a/docs/snippets/common/component-story-mdx-dedent.mdx.mdx b/docs/snippets/common/component-story-mdx-dedent.mdx.mdx
index 8d377271a76e..d66d3d240e56 100644
--- a/docs/snippets/common/component-story-mdx-dedent.mdx.mdx
+++ b/docs/snippets/common/component-story-mdx-dedent.mdx.mdx
@@ -10,7 +10,7 @@ import dedent from 'ts-dedent';
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/common/my-addon-initial-panel-state.js.mdx b/docs/snippets/common/my-addon-initial-panel-state.js.mdx
index 72c6f1e7cb00..8009d61ac4fd 100644
--- a/docs/snippets/common/my-addon-initial-panel-state.js.mdx
+++ b/docs/snippets/common/my-addon-initial-panel-state.js.mdx
@@ -1,5 +1,5 @@
```js
-// /my-addon/src/register.js
+// /my-addon/src/manager.js
import React from 'react';
diff --git a/docs/snippets/common/storybook-a11y-install.npm.js.mdx b/docs/snippets/common/storybook-a11y-install.npm.js.mdx
new file mode 100644
index 000000000000..933ac6105d46
--- /dev/null
+++ b/docs/snippets/common/storybook-a11y-install.npm.js.mdx
@@ -0,0 +1,3 @@
+```shell
+npm install @storybook/addon-a11y --save-dev
+```
\ No newline at end of file
diff --git a/docs/snippets/common/storybook-a11y-install.yarn.js.mdx b/docs/snippets/common/storybook-a11y-install.yarn.js.mdx
new file mode 100644
index 000000000000..41e5bf35360e
--- /dev/null
+++ b/docs/snippets/common/storybook-a11y-install.yarn.js.mdx
@@ -0,0 +1,3 @@
+```shell
+yarn add --dev @storybook/addon-a11y
+```
\ No newline at end of file
diff --git a/docs/snippets/common/storybook-a11y-register.js.mdx b/docs/snippets/common/storybook-a11y-register.js.mdx
index 26837cd8cdd5..4c6401ea169a 100644
--- a/docs/snippets/common/storybook-a11y-register.js.mdx
+++ b/docs/snippets/common/storybook-a11y-register.js.mdx
@@ -2,11 +2,10 @@
// .storybook/main.js
module.exports = {
- stories:[],
- addons:[
- '@storybook/addon-links',
- '@storybook/addon-essentials',
- '@storybook/preset-create-react-app',
+ stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
+ addons: [
+ // Other Storybook addons
'@storybook/addon-a11y', //👈 The a11y addon goes here
+ ],
};
-```
+```
\ No newline at end of file
diff --git a/docs/snippets/common/storybook-a11y-register.ts.mdx b/docs/snippets/common/storybook-a11y-register.ts.mdx
new file mode 100644
index 000000000000..73137a1bf616
--- /dev/null
+++ b/docs/snippets/common/storybook-a11y-register.ts.mdx
@@ -0,0 +1,16 @@
+```ts
+// .storybook/main.ts
+
+// Imports Storybook's configuration API
+import type { StorybookConfig } from '@storybook/core-common';
+
+const config: StorybookConfig = {
+ stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
+ addons: [
+ // Other Storybook addons
+ '@storybook/addon-a11y', //👈 The a11y addon goes here
+ ],
+};
+
+module.exports = config;
+```
\ No newline at end of file
diff --git a/docs/snippets/common/storybook-addon-change-panel.js.mdx b/docs/snippets/common/storybook-addon-change-panel.js.mdx
index 8e4794320c1e..fc9f821e60c4 100644
--- a/docs/snippets/common/storybook-addon-change-panel.js.mdx
+++ b/docs/snippets/common/storybook-addon-change-panel.js.mdx
@@ -1,5 +1,5 @@
```js
-// /my-addon/src/register.js
+// /my-addon/src/manager.js
import { useParameter } from '@storybook/api';
diff --git a/docs/snippets/common/storybook-addon-disable-addon.js.mdx b/docs/snippets/common/storybook-addon-disable-addon.js.mdx
index b8dc0b43b88e..f74d563d5366 100644
--- a/docs/snippets/common/storybook-addon-disable-addon.js.mdx
+++ b/docs/snippets/common/storybook-addon-disable-addon.js.mdx
@@ -1,5 +1,5 @@
```js
-// /my-addon/register.js
+// /my-addon/manager.js
addons.register(ADDON_ID, () => {
addons.add(PANEL_ID, {
diff --git a/docs/snippets/common/storybook-addon-interactions-addon-full-install.npm.js.mdx b/docs/snippets/common/storybook-addon-interactions-addon-full-install.npm.js.mdx
new file mode 100644
index 000000000000..027dc24430bf
--- /dev/null
+++ b/docs/snippets/common/storybook-addon-interactions-addon-full-install.npm.js.mdx
@@ -0,0 +1,3 @@
+```shell
+npm install @storybook/testing-library @storybook/jest @storybook/addon-interactions --save-dev
+```
\ No newline at end of file
diff --git a/docs/snippets/common/storybook-addon-interactions-addon-full-install.yarn.js.mdx b/docs/snippets/common/storybook-addon-interactions-addon-full-install.yarn.js.mdx
new file mode 100644
index 000000000000..d4e583095882
--- /dev/null
+++ b/docs/snippets/common/storybook-addon-interactions-addon-full-install.yarn.js.mdx
@@ -0,0 +1,3 @@
+```shell
+yarn add --dev @storybook/testing-library @storybook/jest @storybook/addon-interactions
+```
\ No newline at end of file
diff --git a/docs/snippets/common/storybook-addon-panel-example.js.mdx b/docs/snippets/common/storybook-addon-panel-example.js.mdx
index 5f3898b61c67..29d8a1ab9d46 100644
--- a/docs/snippets/common/storybook-addon-panel-example.js.mdx
+++ b/docs/snippets/common/storybook-addon-panel-example.js.mdx
@@ -1,5 +1,5 @@
```js
-// addon-panel/register.js
+// addon-panel/manager.js
import React from 'react';
diff --git a/docs/snippets/common/storybook-addon-panel-initial.js.mdx b/docs/snippets/common/storybook-addon-panel-initial.js.mdx
index fb4b80e7cff0..9f9e6b6c05f0 100644
--- a/docs/snippets/common/storybook-addon-panel-initial.js.mdx
+++ b/docs/snippets/common/storybook-addon-panel-initial.js.mdx
@@ -1,5 +1,5 @@
```js
-// .storybook/my-addon/register.js
+// .storybook/my-addon/manager.js
import React from 'react';
diff --git a/docs/snippets/common/storybook-addon-tab-example.js.mdx b/docs/snippets/common/storybook-addon-tab-example.js.mdx
index bbfddd9627cd..dcfa1b41f92b 100644
--- a/docs/snippets/common/storybook-addon-tab-example.js.mdx
+++ b/docs/snippets/common/storybook-addon-tab-example.js.mdx
@@ -1,5 +1,5 @@
```js
-// addon-tab/register.js
+// addon-tab/manager.js
import React from 'react';
diff --git a/docs/snippets/common/storybook-addon-toolbar-example.js.mdx b/docs/snippets/common/storybook-addon-toolbar-example.js.mdx
index 37ca2cfb2713..869c9df49ad4 100644
--- a/docs/snippets/common/storybook-addon-toolbar-example.js.mdx
+++ b/docs/snippets/common/storybook-addon-toolbar-example.js.mdx
@@ -1,5 +1,5 @@
```js
-// addon-toolbar/register.js
+// addon-toolbar/manager.js
import React from "react";
diff --git a/docs/snippets/common/storybook-addons-api-disablequeryparams.js.mdx b/docs/snippets/common/storybook-addons-api-disablequeryparams.js.mdx
index 415edea16fd7..6f5f9e3845aa 100644
--- a/docs/snippets/common/storybook-addons-api-disablequeryparams.js.mdx
+++ b/docs/snippets/common/storybook-addons-api-disablequeryparams.js.mdx
@@ -1,5 +1,5 @@
```js
-// /my-addon/register.js
+// /my-addon/manager.js
addons.register('my-organisation/my-addon', (api) => {
api.setQueryParams({
diff --git a/docs/snippets/common/storybook-addons-api-getqueryparam.js.mdx b/docs/snippets/common/storybook-addons-api-getqueryparam.js.mdx
index 76513f992911..0c324ddd0d24 100644
--- a/docs/snippets/common/storybook-addons-api-getqueryparam.js.mdx
+++ b/docs/snippets/common/storybook-addons-api-getqueryparam.js.mdx
@@ -1,5 +1,5 @@
```js
-// /my-addon/register.js
+// /my-addon/manager.js
addons.register('my-organisation/my-addon', (api) => {
api.getQueryParam('bbc');
diff --git a/docs/snippets/common/storybook-addons-api-geturlstate.js.mdx b/docs/snippets/common/storybook-addons-api-geturlstate.js.mdx
index e7e9f13fe831..39321b7f1958 100644
--- a/docs/snippets/common/storybook-addons-api-geturlstate.js.mdx
+++ b/docs/snippets/common/storybook-addons-api-geturlstate.js.mdx
@@ -1,5 +1,5 @@
```js
-// /my-addon/register.js
+// /my-addon/manager.js
addons.register('my-organisation/my-addon', (api) => {
const href = api.getUrlState({
diff --git a/docs/snippets/common/storybook-addons-api-imports.js.mdx b/docs/snippets/common/storybook-addons-api-imports.js.mdx
index eb2af57b1a9a..e44d88ab048f 100644
--- a/docs/snippets/common/storybook-addons-api-imports.js.mdx
+++ b/docs/snippets/common/storybook-addons-api-imports.js.mdx
@@ -1,5 +1,5 @@
```js
-// .storybook/my-addon/register.js
+// .storybook/my-addon/manager.js
import { addons } from '@storybook/addons';
```
\ No newline at end of file
diff --git a/docs/snippets/common/storybook-addons-api-makedecorator.js.mdx b/docs/snippets/common/storybook-addons-api-makedecorator.js.mdx
index 2f69823954b9..3c9617bfa19e 100644
--- a/docs/snippets/common/storybook-addons-api-makedecorator.js.mdx
+++ b/docs/snippets/common/storybook-addons-api-makedecorator.js.mdx
@@ -1,5 +1,5 @@
```js
-// .storybook/my-addon/register.js
+// .storybook/my-addon/manager.js
import { makeDecorator } from '@storybook/addons';
diff --git a/docs/snippets/common/storybook-addons-api-on.js.mdx b/docs/snippets/common/storybook-addons-api-on.js.mdx
index aa2e706c51c6..ac86c5e43918 100644
--- a/docs/snippets/common/storybook-addons-api-on.js.mdx
+++ b/docs/snippets/common/storybook-addons-api-on.js.mdx
@@ -1,5 +1,5 @@
```js
-// /my-addon/register.js
+// /my-addon/manager.js
addons.register('my-organisation/my-addon', (api) => {
api.on('some-event', (eventData) => console.log(eventData));
diff --git a/docs/snippets/common/storybook-addons-api-register.js.mdx b/docs/snippets/common/storybook-addons-api-register.js.mdx
index 009b2ea7e660..3c044eebd8c4 100644
--- a/docs/snippets/common/storybook-addons-api-register.js.mdx
+++ b/docs/snippets/common/storybook-addons-api-register.js.mdx
@@ -1,5 +1,5 @@
```js
-// .storybook/my-addon/register.js
+// .storybook/my-addon/manager.js
import { addons } from '@storybook/addons';
diff --git a/docs/snippets/common/storybook-addons-api-selectincurrentkind.js.mdx b/docs/snippets/common/storybook-addons-api-selectincurrentkind.js.mdx
index 24b46cc3191b..46c89f25fa43 100644
--- a/docs/snippets/common/storybook-addons-api-selectincurrentkind.js.mdx
+++ b/docs/snippets/common/storybook-addons-api-selectincurrentkind.js.mdx
@@ -1,5 +1,5 @@
```js
-// /my-addon/register.js
+// /my-addon/manager.js
addons.register('my-organisation/my-addon', (api) => {
api.selectInCurrentKind('Basic');
diff --git a/docs/snippets/common/storybook-addons-api-selectstory.js.mdx b/docs/snippets/common/storybook-addons-api-selectstory.js.mdx
index bd1314b7ec4f..4af2f91bc3ad 100644
--- a/docs/snippets/common/storybook-addons-api-selectstory.js.mdx
+++ b/docs/snippets/common/storybook-addons-api-selectstory.js.mdx
@@ -1,5 +1,5 @@
```js
-// /my-addon/register.js
+// /my-addon/manager.js
addons.register('my-organisation/my-addon', (api) => {
api.selectStory('Button', 'Basic');
diff --git a/docs/snippets/common/storybook-addons-api-setqueryparams.js.mdx b/docs/snippets/common/storybook-addons-api-setqueryparams.js.mdx
index 988482dbd3ad..bbfaa727b722 100644
--- a/docs/snippets/common/storybook-addons-api-setqueryparams.js.mdx
+++ b/docs/snippets/common/storybook-addons-api-setqueryparams.js.mdx
@@ -1,5 +1,5 @@
```js
-// /my-addon/register.js
+// /my-addon/manager.js
addons.register('my-organisation/my-addon', (api) => {
api.setQueryParams({
diff --git a/docs/snippets/common/storybook-addons-api-useaddonstate.js.mdx b/docs/snippets/common/storybook-addons-api-useaddonstate.js.mdx
index c0800d6d301b..6d6db143ba12 100644
--- a/docs/snippets/common/storybook-addons-api-useaddonstate.js.mdx
+++ b/docs/snippets/common/storybook-addons-api-useaddonstate.js.mdx
@@ -1,5 +1,5 @@
```js
-// /my-addon/register.js
+// /my-addon/manager.js
import React from 'react';
diff --git a/docs/snippets/common/storybook-addons-api-useapi.js.mdx b/docs/snippets/common/storybook-addons-api-useapi.js.mdx
index f88c1c1524a2..f6c05424dc6a 100644
--- a/docs/snippets/common/storybook-addons-api-useapi.js.mdx
+++ b/docs/snippets/common/storybook-addons-api-useapi.js.mdx
@@ -1,5 +1,5 @@
```js
-// /my-addon/register.js
+// /my-addon/manager.js
import React from 'react';
diff --git a/docs/snippets/common/storybook-addons-api-usechannel.js.mdx b/docs/snippets/common/storybook-addons-api-usechannel.js.mdx
index 7184c752dc05..f017c5cfccb0 100644
--- a/docs/snippets/common/storybook-addons-api-usechannel.js.mdx
+++ b/docs/snippets/common/storybook-addons-api-usechannel.js.mdx
@@ -1,5 +1,5 @@
```js
-// /my-addon/register.js
+// /my-addon/manager.js
import React from 'react';
diff --git a/docs/snippets/common/storybook-addons-api-useglobal.js.mdx b/docs/snippets/common/storybook-addons-api-useglobal.js.mdx
index 94f5a8b83313..ad33aef34253 100644
--- a/docs/snippets/common/storybook-addons-api-useglobal.js.mdx
+++ b/docs/snippets/common/storybook-addons-api-useglobal.js.mdx
@@ -1,5 +1,5 @@
```js
-// /my-addon/register.js
+// /my-addon/manager.js
import React from 'react';
diff --git a/docs/snippets/common/storybook-addons-api-useparameter.js.mdx b/docs/snippets/common/storybook-addons-api-useparameter.js.mdx
index 3c496cbb2a09..fdbc74301782 100644
--- a/docs/snippets/common/storybook-addons-api-useparameter.js.mdx
+++ b/docs/snippets/common/storybook-addons-api-useparameter.js.mdx
@@ -1,5 +1,5 @@
```js
-// /my-addon/register.js
+// /my-addon/manager.js
import React from 'react';
diff --git a/docs/snippets/common/storybook-addons-api-usestorybookstate.js.mdx b/docs/snippets/common/storybook-addons-api-usestorybookstate.js.mdx
index 62f1605af9f1..4e1515a3b6b3 100644
--- a/docs/snippets/common/storybook-addons-api-usestorybookstate.js.mdx
+++ b/docs/snippets/common/storybook-addons-api-usestorybookstate.js.mdx
@@ -1,5 +1,5 @@
```js
-// /my-addon/register.js
+// /my-addon/manager.js
import React from 'react';
diff --git a/docs/snippets/common/storybook-argtypes-with-addon.js.mdx b/docs/snippets/common/storybook-argtypes-with-addon.js.mdx
index 3187d5e6f3a4..f34c4859bfb9 100644
--- a/docs/snippets/common/storybook-argtypes-with-addon.js.mdx
+++ b/docs/snippets/common/storybook-argtypes-with-addon.js.mdx
@@ -1,5 +1,5 @@
```js
-// .storybook/my-addon/register.js
+// .storybook/my-addon/manager.js
import { useArgTypes } from '@storybook/api';
diff --git a/docs/snippets/common/storybook-builder-api-build-server.ts.mdx b/docs/snippets/common/storybook-builder-api-build-server.ts.mdx
new file mode 100644
index 000000000000..28f40b3d394f
--- /dev/null
+++ b/docs/snippets/common/storybook-builder-api-build-server.ts.mdx
@@ -0,0 +1,36 @@
+```ts
+// build.ts
+
+import { build as viteBuild } from 'vite';
+import { stringifyProcessEnvs } from './envs';
+import { commonConfig } from './vite-config';
+
+import type { EnvsRaw, ExtendedOptions } from './types';
+
+export async function build(options: ExtendedOptions) {
+ const { presets } = options;
+
+ const baseConfig = await commonConfig(options, 'build');
+ const config = {
+ ...baseConfig,
+ build: {
+ outDir: options.outputDir,
+ emptyOutDir: false,
+ sourcemap: true,
+ },
+ };
+
+ const finalConfig = await presets.apply('viteFinal', config, options);
+
+ const envsRaw = await presets.apply>('env');
+ // Stringify env variables after getting `envPrefix` from the final config
+ const envs = stringifyProcessEnvs(envsRaw, finalConfig.envPrefix);
+ // Update `define`
+ finalConfig.define = {
+ ...finalConfig.define,
+ ...envs,
+ };
+
+ await viteBuild(finalConfig);
+}
+```
\ No newline at end of file
diff --git a/docs/snippets/common/storybook-builder-api-configuration-options.ts.mdx b/docs/snippets/common/storybook-builder-api-configuration-options.ts.mdx
new file mode 100644
index 000000000000..6e802781ee3a
--- /dev/null
+++ b/docs/snippets/common/storybook-builder-api-configuration-options.ts.mdx
@@ -0,0 +1,36 @@
+```ts
+// vite-server.ts
+
+import { stringifyProcessEnvs } from './envs';
+import { getOptimizeDeps } from './optimizeDeps';
+import { commonConfig } from './vite-config';
+
+import type { EnvsRaw, ExtendedOptions } from './types';
+
+export async function createViteServer(options: ExtendedOptions, devServer: Server) {
+ const { port, presets } = options;
+
+ // Defines the baseline config.
+ const baseConfig = await commonConfig(options, 'development');
+ const defaultConfig = {
+ ...baseConfig,
+ server: {
+ middlewareMode: true,
+ hmr: {
+ port,
+ server: devServer,
+ },
+ fs: {
+ strict: true,
+ },
+ },
+ optimizeDeps: await getOptimizeDeps(baseConfig, options),
+ };
+
+ const finalConfig = await presets.apply('viteFinal', defaultConfig, options);
+
+ const envsRaw = await presets.apply>('env');
+
+ // Remainder implementation
+}
+```
\ No newline at end of file
diff --git a/docs/snippets/common/storybook-builder-api-dev-server.ts.mdx b/docs/snippets/common/storybook-builder-api-dev-server.ts.mdx
new file mode 100644
index 000000000000..a4731e6d7799
--- /dev/null
+++ b/docs/snippets/common/storybook-builder-api-dev-server.ts.mdx
@@ -0,0 +1,14 @@
+```ts
+// server.ts
+
+import { createServer } from 'vite';
+
+export async function createViteServer(options: ExtendedOptions, devServer: Server) {
+ // Remainder server configuration
+
+ // Creates the server.
+ return createServer({
+ // The server configuration goes here
+ });
+}
+```
\ No newline at end of file
diff --git a/docs/snippets/common/storybook-builder-api-interface.ts.mdx b/docs/snippets/common/storybook-builder-api-interface.ts.mdx
new file mode 100644
index 000000000000..d8cbd038c15b
--- /dev/null
+++ b/docs/snippets/common/storybook-builder-api-interface.ts.mdx
@@ -0,0 +1,22 @@
+```ts
+export interface Builder {
+ start: (args: {
+ options: Options;
+ startTime: ReturnType;
+ router: Router;
+ server: Server;
+ }) => Promise;
+ bail: (e?: Error) => Promise;
+ }>;
+ build: (arg: {
+ options: Options;
+ startTime: ReturnType;
+ }) => Promise;
+ bail: (e?: Error) => Promise;
+ getConfig: (options: Options) => Promise;
+ corePresets?: string[];
+ overridePresets?: string[];
+}
+```
\ No newline at end of file
diff --git a/docs/snippets/common/storybook-builder-api-mdx.ts.mdx b/docs/snippets/common/storybook-builder-api-mdx.ts.mdx
new file mode 100644
index 000000000000..e9591db2ad4f
--- /dev/null
+++ b/docs/snippets/common/storybook-builder-api-mdx.ts.mdx
@@ -0,0 +1,20 @@
+```ts
+// mdx-plugin.ts
+
+import mdx from 'vite-plugin-mdx';
+
+import { createCompiler } from '@storybook/csf-tools/mdx';
+
+export function mdxPlugin() {
+ return mdx((filename) => {
+ const compilers = [];
+
+ if (filename.endsWith('stories.mdx') || filename.endsWith('story.mdx')) {
+ compilers.push(createCompiler({}));
+ }
+ return {
+ compilers,
+ };
+ });
+}
+```
\ No newline at end of file
diff --git a/docs/snippets/common/storybook-builder-api-preview-exports.ts.mdx b/docs/snippets/common/storybook-builder-api-preview-exports.ts.mdx
new file mode 100644
index 000000000000..0fd6743bacd1
--- /dev/null
+++ b/docs/snippets/common/storybook-builder-api-preview-exports.ts.mdx
@@ -0,0 +1,82 @@
+```ts
+// codegen-iframe-script.ts
+
+import { virtualPreviewFile, virtualStoriesFile } from './virtual-file-names';
+import { transformAbsPath } from './utils/transform-abs-path';
+import type { ExtendedOptions } from './types';
+
+export async function generateIframeScriptCode(options: ExtendedOptions) {
+ const { presets, frameworkPath, framework } = options;
+ const frameworkImportPath = frameworkPath || `@storybook/${framework}`;
+
+ const presetEntries = await presets.apply('config', [], options);
+ const configEntries = [...presetEntries].filter(Boolean);
+
+ const absoluteFilesToImport = (files: string[], name: string) =>
+ files
+ .map((el, i) => `import ${name ? `* as ${name}_${i} from ` : ''}'${transformAbsPath(el)}'`)
+ .join('\n');
+
+ const importArray = (name: string, length: number) =>
+ new Array(length).fill(0).map((_, i) => `${name}_${i}`);
+
+ const code = `
+ // Ensure that the client API is initialized by the framework before any other iframe code
+ // is loaded. That way our client-apis can assume the existence of the API+store
+ import { configure } from '${frameworkImportPath}';
+
+ import {
+ addDecorator,
+ addParameters,
+ addArgTypesEnhancer,
+ addArgsEnhancer,
+ setGlobalRender
+ } from '@storybook/client-api';
+ import { logger } from '@storybook/client-logger';
+ ${absoluteFilesToImport(configEntries, 'config')}
+ import * as preview from '${virtualPreviewFile}';
+ import { configStories } from '${virtualStoriesFile}';
+
+ const configs = [${importArray('config', configEntries.length)
+ .concat('preview.default')
+ .join(',')}].filter(Boolean)
+
+ configs.forEach(config => {
+ Object.keys(config).forEach((key) => {
+ const value = config[key];
+ switch (key) {
+ case 'args':
+ case 'argTypes': {
+ return logger.warn('Invalid args/argTypes in config, ignoring.', JSON.stringify(value));
+ }
+ case 'decorators': {
+ return value.forEach((decorator) => addDecorator(decorator, false));
+ }
+ case 'parameters': {
+ return addParameters({ ...value }, false);
+ }
+ case 'render': {
+ return setGlobalRender(value)
+ }
+ case 'globals':
+ case 'globalTypes': {
+ const v = {};
+ v[key] = value;
+ return addParameters(v, false);
+ }
+ case 'decorateStory':
+ case 'renderToDOM': {
+ return null;
+ }
+ default: {
+ // eslint-disable-next-line prefer-template
+ return console.log(key + ' was not supported :( !');
+ }
+ }
+ });
+ })
+ configStories(configure);
+ `.trim();
+ return code;
+}
+```
\ No newline at end of file
diff --git a/docs/snippets/common/storybook-builder-api-shutdown-server.ts.mdx b/docs/snippets/common/storybook-builder-api-shutdown-server.ts.mdx
new file mode 100644
index 000000000000..03144c66ca7d
--- /dev/null
+++ b/docs/snippets/common/storybook-builder-api-shutdown-server.ts.mdx
@@ -0,0 +1,24 @@
+```ts
+// index.ts
+
+import { createViteServer } from './vite-server';
+
+export const start: ViteBuilder['start'] = async ({ options, server: devServer }) => {
+ // Remainder implementation goes here
+
+ const server = await createViteServer(options as ExtendedOptions, devServer);
+ async function bail(e?: Error): Promise {
+ try {
+ return await server.close();
+ } catch (err) {
+ console.warn('unable to close the server');
+ }
+ throw e;
+ }
+
+ return {
+ bail,
+ totalTime: process.hrtime(startTime),
+ };
+};
+```
\ No newline at end of file
diff --git a/docs/snippets/common/storybook-client-preview.ts.mdx b/docs/snippets/common/storybook-client-preview.ts.mdx
index 436d862dc8ac..765d8d1ab341 100644
--- a/docs/snippets/common/storybook-client-preview.ts.mdx
+++ b/docs/snippets/common/storybook-client-preview.ts.mdx
@@ -1,7 +1,7 @@
```ts
// your-framework/src/client/preview/index.ts
-import { start } from '@storybook/core/client';
+import { start } from '@storybook/core';
import './globals';
diff --git a/docs/snippets/common/storybook-config-layout.js.mdx b/docs/snippets/common/storybook-config-layout.js.mdx
index 550254d31dd3..c36446aebea2 100644
--- a/docs/snippets/common/storybook-config-layout.js.mdx
+++ b/docs/snippets/common/storybook-config-layout.js.mdx
@@ -9,7 +9,7 @@ addons.setConfig({
showPanel: true,
panelPosition: 'bottom',
enableShortcuts: true,
- isToolshown: true,
+ showToolbar: true,
theme: undefined,
selectedPanel: undefined,
initialActive: 'sidebar',
@@ -18,11 +18,11 @@ addons.setConfig({
collapsedRoots: ['other'],
},
toolbar: {
- title: { hidden: false, },
- zoom: { hidden: false, },
- eject: { hidden: false, },
- copy: { hidden: false, },
- fullscreen: { hidden: false, },
+ title: { hidden: false },
+ zoom: { hidden: false },
+ eject: { hidden: false },
+ copy: { hidden: false },
+ fullscreen: { hidden: false },
},
});
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/common/storybook-disable-telemetry-env.env-var.js.mdx b/docs/snippets/common/storybook-disable-telemetry-env.env-var.js.mdx
new file mode 100644
index 000000000000..9ed1c3e5430d
--- /dev/null
+++ b/docs/snippets/common/storybook-disable-telemetry-env.env-var.js.mdx
@@ -0,0 +1,3 @@
+```shell
+STORYBOOK_DISABLE_TELEMETRY=1 yarn storybook
+```
\ No newline at end of file
diff --git a/docs/snippets/common/storybook-disable-telemetry-flag.npm.js.mdx b/docs/snippets/common/storybook-disable-telemetry-flag.npm.js.mdx
new file mode 100644
index 000000000000..81212a40c93a
--- /dev/null
+++ b/docs/snippets/common/storybook-disable-telemetry-flag.npm.js.mdx
@@ -0,0 +1,3 @@
+```shell
+npm run storybook -- --disable-telemetry
+```
diff --git a/docs/snippets/common/storybook-disable-telemetry-flag.yarn.js.mdx b/docs/snippets/common/storybook-disable-telemetry-flag.yarn.js.mdx
new file mode 100644
index 000000000000..c9e70448cefa
--- /dev/null
+++ b/docs/snippets/common/storybook-disable-telemetry-flag.yarn.js.mdx
@@ -0,0 +1,3 @@
+```shell
+yarn storybook --disable-telemetry
+```
diff --git a/docs/snippets/common/storybook-figma-addon-install.npm.js.mdx b/docs/snippets/common/storybook-figma-addon-install.npm.js.mdx
new file mode 100644
index 000000000000..2ef0c42eee1f
--- /dev/null
+++ b/docs/snippets/common/storybook-figma-addon-install.npm.js.mdx
@@ -0,0 +1,3 @@
+```shell
+npm install --save-dev storybook-addon-designs
+```
\ No newline at end of file
diff --git a/docs/snippets/common/storybook-figma-addon-install.yarn.js.mdx b/docs/snippets/common/storybook-figma-addon-install.yarn.js.mdx
new file mode 100644
index 000000000000..2c11db47977a
--- /dev/null
+++ b/docs/snippets/common/storybook-figma-addon-install.yarn.js.mdx
@@ -0,0 +1,3 @@
+```shell
+yarn add -D storybook-addon-designs
+```
\ No newline at end of file
diff --git a/docs/snippets/common/storybook-main-disable-telemetry.main-js.js.mdx b/docs/snippets/common/storybook-main-disable-telemetry.main-js.js.mdx
new file mode 100644
index 000000000000..c7786a174244
--- /dev/null
+++ b/docs/snippets/common/storybook-main-disable-telemetry.main-js.js.mdx
@@ -0,0 +1,18 @@
+```js
+// .storybook/main.js
+
+module.exports = {
+ stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
+ addons: [
+ '@storybook/addon-links',
+ '@storybook/addon-essentials',
+ '@storybook/addon-interactions',
+ '@storybook/preset-create-react-app',
+ ],
+ framework: '@storybook/react',
+ core: {
+ builder: 'webpack5',
+ disableTelemetry: true, // 👈 Disables telemetry
+ },
+};
+```
\ No newline at end of file
diff --git a/docs/snippets/common/storybook-main-disable-telemetry.main-ts.ts.mdx b/docs/snippets/common/storybook-main-disable-telemetry.main-ts.ts.mdx
new file mode 100644
index 000000000000..1f707e2d95e7
--- /dev/null
+++ b/docs/snippets/common/storybook-main-disable-telemetry.main-ts.ts.mdx
@@ -0,0 +1,23 @@
+```ts
+// .storybook/main.ts
+
+// Imports Storybook's configuration API
+import type { StorybookConfig } from '@storybook/core-common';
+
+const config: StorybookConfig = {
+ stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
+ addons: [
+ '@storybook/addon-links',
+ '@storybook/addon-essentials',
+ '@storybook/addon-interactions',
+ '@storybook/preset-create-react-app',
+ ],
+ framework: '@storybook/react',
+ core: {
+ builder: 'webpack5',
+ disableTelemetry: true, // 👈 Disables telemetry
+ },
+};
+
+module.exports = config;
+```
\ No newline at end of file
diff --git a/docs/snippets/common/storybook-main-enable-interactive-debugger.js.mdx b/docs/snippets/common/storybook-main-enable-interactive-debugger.js.mdx
new file mode 100644
index 000000000000..d1c4064fa142
--- /dev/null
+++ b/docs/snippets/common/storybook-main-enable-interactive-debugger.js.mdx
@@ -0,0 +1,14 @@
+```js
+// .storybook/main.js|ts
+
+module.exports = {
+ stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
+ addons: [
+ // Other Storybook addons
+ '@storybook/addon-interactions', // 👈 Addon is registered here
+ ],
+ features: {
+ interactionsDebugger: true, // 👈 Enable playback controls
+ },
+};
+```
\ No newline at end of file
diff --git a/docs/snippets/common/storybook-main-figma-addon-register.js.mdx b/docs/snippets/common/storybook-main-figma-addon-register.js.mdx
new file mode 100644
index 000000000000..de68b73dcacc
--- /dev/null
+++ b/docs/snippets/common/storybook-main-figma-addon-register.js.mdx
@@ -0,0 +1,11 @@
+```js
+// .storybook/main.js|ts
+
+module.exports = {
+ stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
+ addons: [
+ // Other Storybook addons
+ 'storybook-addon-designs', // 👈 Addon is registered here
+ ],
+};
+```
\ No newline at end of file
diff --git a/docs/snippets/common/storybook-main-register-addon.js.mdx b/docs/snippets/common/storybook-main-register-addon.js.mdx
index 0f587017ee85..675a1d62c08a 100644
--- a/docs/snippets/common/storybook-main-register-addon.js.mdx
+++ b/docs/snippets/common/storybook-main-register-addon.js.mdx
@@ -2,6 +2,6 @@
// .storybook/main.js
module.exports = {
- addons: ['path/to/register.js'],
+ addons: ['path/to/manager.js'],
};
```
\ No newline at end of file
diff --git a/docs/snippets/common/storybook-main-register-essentials-addon.js.mdx b/docs/snippets/common/storybook-main-register-essentials-addon.js.mdx
new file mode 100644
index 000000000000..8c20f79bb8e8
--- /dev/null
+++ b/docs/snippets/common/storybook-main-register-essentials-addon.js.mdx
@@ -0,0 +1,8 @@
+```js
+// .storybook/main.js
+
+module.exports = {
+ stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
+ addons: ['@storybook/addon-links', '@storybook/addon-essentials'],
+};
+```
diff --git a/docs/snippets/common/storybook-main-register-presets-managerentry.js.mdx b/docs/snippets/common/storybook-main-register-presets-managerentry.js.mdx
index 4a913b4f8aa3..18fa46acdf1f 100644
--- a/docs/snippets/common/storybook-main-register-presets-managerentry.js.mdx
+++ b/docs/snippets/common/storybook-main-register-presets-managerentry.js.mdx
@@ -3,7 +3,6 @@
module.exports = {
addons: [
- '@storybook/addon-storysource/register', // A managerEntry registered here, in this case from the storysource addon.
'@storybook/addon-docs/preset', // A preset registered here, in this case from the addon-docs addon.
],
};
diff --git a/docs/snippets/common/storybook-main-use-manager-entries.js.mdx b/docs/snippets/common/storybook-main-use-manager-entries.js.mdx
index 5bbaa228a809..024799320379 100644
--- a/docs/snippets/common/storybook-main-use-manager-entries.js.mdx
+++ b/docs/snippets/common/storybook-main-use-manager-entries.js.mdx
@@ -2,6 +2,6 @@
// .storybook/main.js
module.exports = {
- managerEntries: ['@storybook/addon-storysource/register'],
+ managerEntries: ['some-storybook-addon/entry-point.js'],
};
```
\ No newline at end of file
diff --git a/docs/snippets/common/storybook-main-webpack5-fsCache.mdx b/docs/snippets/common/storybook-main-webpack5-fsCache.js.mdx
similarity index 97%
rename from docs/snippets/common/storybook-main-webpack5-fsCache.mdx
rename to docs/snippets/common/storybook-main-webpack5-fsCache.js.mdx
index 622152ccfc46..9ea2077caa93 100644
--- a/docs/snippets/common/storybook-main-webpack5-fsCache.mdx
+++ b/docs/snippets/common/storybook-main-webpack5-fsCache.js.mdx
@@ -11,4 +11,4 @@ module.exports = {
},
},
};
-```
+```
\ No newline at end of file
diff --git a/docs/snippets/common/storybook-preview-configure-globaltypes.js.mdx b/docs/snippets/common/storybook-preview-configure-globaltypes.js.mdx
index fb0cd405ac72..65d78e77448b 100644
--- a/docs/snippets/common/storybook-preview-configure-globaltypes.js.mdx
+++ b/docs/snippets/common/storybook-preview-configure-globaltypes.js.mdx
@@ -12,6 +12,8 @@ export const globalTypes = {
items: ['light', 'dark'],
// Property that specifies if the name of the item will be displayed
showName: true,
+ // Change title based on selected value
+ dynamicTitle: true,
},
},
};
diff --git a/docs/snippets/common/storybook-run-dev.npm.js.mdx b/docs/snippets/common/storybook-run-dev.npm.js.mdx
index 0a952c1b61cc..8f7f525b9a59 100644
--- a/docs/snippets/common/storybook-run-dev.npm.js.mdx
+++ b/docs/snippets/common/storybook-run-dev.npm.js.mdx
@@ -1,4 +1,3 @@
```shell
-# Starts Storybook in development mode
npm run storybook
```
\ No newline at end of file
diff --git a/docs/snippets/common/storybook-run-dev.yarn.js.mdx b/docs/snippets/common/storybook-run-dev.yarn.js.mdx
index c93bf22abb92..137dc51f4c21 100644
--- a/docs/snippets/common/storybook-run-dev.yarn.js.mdx
+++ b/docs/snippets/common/storybook-run-dev.yarn.js.mdx
@@ -1,4 +1,3 @@
```shell
-# Starts Storybook in development mode
yarn storybook
```
\ No newline at end of file
diff --git a/docs/snippets/common/storybook-storysource-manager-entries.js.mdx b/docs/snippets/common/storybook-storysource-manager-entries.js.mdx
index 5e792ec1d298..e9c5dec6d95e 100644
--- a/docs/snippets/common/storybook-storysource-manager-entries.js.mdx
+++ b/docs/snippets/common/storybook-storysource-manager-entries.js.mdx
@@ -1,7 +1,5 @@
```js
// storysource/preset.js
-export function managerEntries(entry = []) {
- return [...entry, require.resolve('@storybook/addon-storysource/register')];
-}
+/* nothing needed */
```
\ No newline at end of file
diff --git a/docs/snippets/common/storybook-telemetry-crash-report-event.js.mdx b/docs/snippets/common/storybook-telemetry-crash-report-event.js.mdx
new file mode 100644
index 000000000000..88d98f5c6bb3
--- /dev/null
+++ b/docs/snippets/common/storybook-telemetry-crash-report-event.js.mdx
@@ -0,0 +1,13 @@
+```js
+{
+ stack: 'Error: Your button is not working\n' +
+ ' at Object. ($SNIP/test.js:39:27)\n' +
+ ' at Module._compile (node:internal/modules/cjs/loader:1103:14)\n' +
+ ' at Object.Module._extensions..js (node:internal/modules/cjs/loader:1157:10)\n' +
+ ' at Module.load (node:internal/modules/cjs/loader:981:32)\n' +
+ ' at Function.Module._load (node:internal/modules/cjs/loader:822:12)\n' +
+ ' at Function.executeUserEntryPoint [as runMain] (node:internal/modules/run_main:77:12)\n' +
+ ' at node:internal/main/run_main_module:17:47',
+ message: 'Your button is not working'
+}
+```
\ No newline at end of file
diff --git a/docs/snippets/common/storybook-telemetry-main-enable-crash-reports.main-js.js.mdx b/docs/snippets/common/storybook-telemetry-main-enable-crash-reports.main-js.js.mdx
new file mode 100644
index 000000000000..c1e3d032880e
--- /dev/null
+++ b/docs/snippets/common/storybook-telemetry-main-enable-crash-reports.main-js.js.mdx
@@ -0,0 +1,18 @@
+```js
+// .storybook/main.js
+
+module.exports = {
+ stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
+ addons: [
+ '@storybook/addon-links',
+ '@storybook/addon-essentials',
+ '@storybook/addon-interactions',
+ '@storybook/preset-create-react-app',
+ ],
+ framework: '@storybook/react',
+ core: {
+ builder: 'webpack5',
+ enableCrashReports: true, // 👈 Appends the crash reports to the telemetry events
+ },
+};
+```
\ No newline at end of file
diff --git a/docs/snippets/common/storybook-telemetry-main-enable-crash-reports.main-ts.ts.mdx b/docs/snippets/common/storybook-telemetry-main-enable-crash-reports.main-ts.ts.mdx
new file mode 100644
index 000000000000..7ce3bba1a827
--- /dev/null
+++ b/docs/snippets/common/storybook-telemetry-main-enable-crash-reports.main-ts.ts.mdx
@@ -0,0 +1,23 @@
+```ts
+// .storybook/main.ts
+
+// Imports Storybook's configuration API
+import type { StorybookConfig } from '@storybook/core-common';
+
+const config: StorybookConfig = {
+ stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
+ addons: [
+ '@storybook/addon-links',
+ '@storybook/addon-essentials',
+ '@storybook/addon-interactions',
+ '@storybook/preset-create-react-app',
+ ],
+ framework: '@storybook/react',
+ core: {
+ builder: 'webpack5',
+ enableCrashReports: true, // 👈 Appends the crash reports to the telemetry events
+ },
+};
+
+module.exports = config;
+```
\ No newline at end of file
diff --git a/docs/snippets/common/storybook-telemetry-preview-event.npm.js.mdx b/docs/snippets/common/storybook-telemetry-preview-event.npm.js.mdx
new file mode 100644
index 000000000000..eab8893ec86f
--- /dev/null
+++ b/docs/snippets/common/storybook-telemetry-preview-event.npm.js.mdx
@@ -0,0 +1,3 @@
+```shell
+STORYBOOK_TELEMETRY_DEBUG=1 npm run storybook
+```
\ No newline at end of file
diff --git a/docs/snippets/common/storybook-telemetry-preview-event.yarn.js.mdx b/docs/snippets/common/storybook-telemetry-preview-event.yarn.js.mdx
new file mode 100644
index 000000000000..fdb9d20be615
--- /dev/null
+++ b/docs/snippets/common/storybook-telemetry-preview-event.yarn.js.mdx
@@ -0,0 +1,3 @@
+```shell
+STORYBOOK_TELEMETRY_DEBUG=1 yarn storybook
+```
\ No newline at end of file
diff --git a/docs/snippets/common/storybook-telemetry-storybook-enable-crash-reports.env-var.js.mdx b/docs/snippets/common/storybook-telemetry-storybook-enable-crash-reports.env-var.js.mdx
new file mode 100644
index 000000000000..41b65f194069
--- /dev/null
+++ b/docs/snippets/common/storybook-telemetry-storybook-enable-crash-reports.env-var.js.mdx
@@ -0,0 +1,3 @@
+```shell
+STORYBOOK_ENABLE_CRASH_REPORTS=1 yarn storybook
+```
\ No newline at end of file
diff --git a/docs/snippets/common/storybook-telemetry-storybook-enable-crash-reports.npm.js.mdx b/docs/snippets/common/storybook-telemetry-storybook-enable-crash-reports.npm.js.mdx
new file mode 100644
index 000000000000..b0fc399a5408
--- /dev/null
+++ b/docs/snippets/common/storybook-telemetry-storybook-enable-crash-reports.npm.js.mdx
@@ -0,0 +1,3 @@
+```shell
+npm run storybook -- --enable-crash-reports
+```
\ No newline at end of file
diff --git a/docs/snippets/common/storybook-telemetry-storybook-enable-crash-reports.yarn.js.mdx b/docs/snippets/common/storybook-telemetry-storybook-enable-crash-reports.yarn.js.mdx
new file mode 100644
index 000000000000..71876f939367
--- /dev/null
+++ b/docs/snippets/common/storybook-telemetry-storybook-enable-crash-reports.yarn.js.mdx
@@ -0,0 +1,3 @@
+```shell
+yarn storybook --enable-crash-reports
+```
\ No newline at end of file
diff --git a/docs/snippets/common/storybook-test-runner-a11y-config.js.mdx b/docs/snippets/common/storybook-test-runner-a11y-config.js.mdx
new file mode 100644
index 000000000000..22bf4552fe90
--- /dev/null
+++ b/docs/snippets/common/storybook-test-runner-a11y-config.js.mdx
@@ -0,0 +1,23 @@
+```js
+// .storybook/test-runner.js
+
+const { injectAxe, checkA11y } = require('axe-playwright');
+
+/*
+* See https://storybook.js.org/docs/react/writing-tests/test-runner#test-hook-api-experimental
+* to learn more about the test-runner hooks API.
+*/
+module.exports = {
+ async preRender(page) {
+ await injectAxe(page);
+ },
+ async postRender(page) {
+ await checkA11y(page, '#root', {
+ detailedReport: true,
+ detailedReportOptions: {
+ html: true,
+ },
+ });
+ },
+};
+```
\ No newline at end of file
diff --git a/docs/snippets/common/storybook-test-runner-a11y-config.ts.mdx b/docs/snippets/common/storybook-test-runner-a11y-config.ts.mdx
new file mode 100644
index 000000000000..aed751c49a9b
--- /dev/null
+++ b/docs/snippets/common/storybook-test-runner-a11y-config.ts.mdx
@@ -0,0 +1,27 @@
+```ts
+// .storybook/test-runner.ts
+
+import { injectAxe, checkA11y } from 'axe-playwright';
+
+import type { TestRunnerConfig } from '@storybook/test-runner';
+
+/*
+* See https://storybook.js.org/docs/react/writing-tests/test-runner#test-hook-api-experimental
+* to learn more about the test-runner hooks API.
+*/
+const a11yConfig: TestRunnerConfig = {
+ async preRender(page) {
+ await injectAxe(page);
+ },
+ async postRender(page) {
+ await checkA11y(page, '#root', {
+ detailedReport: true,
+ detailedReportOptions: {
+ html: true,
+ },
+ });
+ },
+};
+
+module.exports = a11yConfig;
+```
\ No newline at end of file
diff --git a/docs/snippets/common/storybook-test-runner-axe-playwright.npm.js.mdx b/docs/snippets/common/storybook-test-runner-axe-playwright.npm.js.mdx
new file mode 100644
index 000000000000..aecfe3f9f414
--- /dev/null
+++ b/docs/snippets/common/storybook-test-runner-axe-playwright.npm.js.mdx
@@ -0,0 +1,3 @@
+```shell
+npm install axe-playwright --save-dev
+```
\ No newline at end of file
diff --git a/docs/snippets/common/storybook-test-runner-axe-playwright.yarn.js.mdx b/docs/snippets/common/storybook-test-runner-axe-playwright.yarn.js.mdx
new file mode 100644
index 000000000000..e2d8d43da865
--- /dev/null
+++ b/docs/snippets/common/storybook-test-runner-axe-playwright.yarn.js.mdx
@@ -0,0 +1,3 @@
+```shell
+yarn add --dev axe-playwright
+```
\ No newline at end of file
diff --git a/docs/snippets/common/storybook-test-runner-disable-stories-json.npm.js.mdx b/docs/snippets/common/storybook-test-runner-disable-stories-json.npm.js.mdx
new file mode 100644
index 000000000000..79ae4ca39232
--- /dev/null
+++ b/docs/snippets/common/storybook-test-runner-disable-stories-json.npm.js.mdx
@@ -0,0 +1,3 @@
+```shell
+npm run test-storybook -- --no-stories-json
+```
\ No newline at end of file
diff --git a/docs/snippets/common/storybook-test-runner-disable-stories-json.yarn.js.mdx b/docs/snippets/common/storybook-test-runner-disable-stories-json.yarn.js.mdx
new file mode 100644
index 000000000000..141d6375fa63
--- /dev/null
+++ b/docs/snippets/common/storybook-test-runner-disable-stories-json.yarn.js.mdx
@@ -0,0 +1,3 @@
+```shell
+yarn test-storybook --no-stories-json
+```
\ No newline at end of file
diff --git a/docs/snippets/common/storybook-test-runner-execute-with-flags.npm.js.mdx b/docs/snippets/common/storybook-test-runner-execute-with-flags.npm.js.mdx
new file mode 100644
index 000000000000..88667dfad959
--- /dev/null
+++ b/docs/snippets/common/storybook-test-runner-execute-with-flags.npm.js.mdx
@@ -0,0 +1,3 @@
+```shell
+npm run test-storybook -- --watch
+```
\ No newline at end of file
diff --git a/docs/snippets/common/storybook-test-runner-execute-with-flags.yarn.js.mdx b/docs/snippets/common/storybook-test-runner-execute-with-flags.yarn.js.mdx
new file mode 100644
index 000000000000..7f4617721424
--- /dev/null
+++ b/docs/snippets/common/storybook-test-runner-execute-with-flags.yarn.js.mdx
@@ -0,0 +1,3 @@
+```shell
+yarn test-storybook --watch
+```
\ No newline at end of file
diff --git a/docs/snippets/common/storybook-test-runner-execute-with-url.env-var.js.mdx b/docs/snippets/common/storybook-test-runner-execute-with-url.env-var.js.mdx
new file mode 100644
index 000000000000..abc722730ba3
--- /dev/null
+++ b/docs/snippets/common/storybook-test-runner-execute-with-url.env-var.js.mdx
@@ -0,0 +1,3 @@
+```shell
+TARGET_URL=https://the-storybook-url-here.com yarn test-storybook
+```
\ No newline at end of file
diff --git a/docs/snippets/common/storybook-test-runner-execute-with-url.npm.js.mdx b/docs/snippets/common/storybook-test-runner-execute-with-url.npm.js.mdx
new file mode 100644
index 000000000000..9b3b6020ba60
--- /dev/null
+++ b/docs/snippets/common/storybook-test-runner-execute-with-url.npm.js.mdx
@@ -0,0 +1,3 @@
+```shell
+npm run test-storybook -- --url https://the-storybook-url-here.com
+```
\ No newline at end of file
diff --git a/docs/snippets/common/storybook-test-runner-execute-with-url.yarn.js.mdx b/docs/snippets/common/storybook-test-runner-execute-with-url.yarn.js.mdx
new file mode 100644
index 000000000000..af9b66dc11a4
--- /dev/null
+++ b/docs/snippets/common/storybook-test-runner-execute-with-url.yarn.js.mdx
@@ -0,0 +1,3 @@
+```shell
+yarn test-storybook --url https://the-storybook-url-here.com
+```
\ No newline at end of file
diff --git a/docs/snippets/common/storybook-test-runner-execute.npm.js.mdx b/docs/snippets/common/storybook-test-runner-execute.npm.js.mdx
new file mode 100644
index 000000000000..345a549b73d0
--- /dev/null
+++ b/docs/snippets/common/storybook-test-runner-execute.npm.js.mdx
@@ -0,0 +1,3 @@
+```shell
+npm run test-storybook
+```
\ No newline at end of file
diff --git a/docs/snippets/common/storybook-test-runner-execute.yarn.js.mdx b/docs/snippets/common/storybook-test-runner-execute.yarn.js.mdx
new file mode 100644
index 000000000000..0e90b9012b2b
--- /dev/null
+++ b/docs/snippets/common/storybook-test-runner-execute.yarn.js.mdx
@@ -0,0 +1,3 @@
+```shell
+yarn test-storybook
+```
\ No newline at end of file
diff --git a/docs/snippets/common/storybook-test-runner-hooks-example.js.mdx b/docs/snippets/common/storybook-test-runner-hooks-example.js.mdx
new file mode 100644
index 000000000000..85f2437a74a0
--- /dev/null
+++ b/docs/snippets/common/storybook-test-runner-hooks-example.js.mdx
@@ -0,0 +1,24 @@
+```js
+// .storybook/test-runner.js
+
+module.exports = {
+ // Hook that is executed before the test runner starts running tests
+ setup() {
+ // Add your configuration here.
+ },
+ /* Hook to execute before a story is rendered.
+ * The page argument is the Playwright's page object for the story.
+ * The context argument is a Storybook object containing the story's id, title, and name.
+ */
+ async preRender(page, context) {
+ // Add your configuration here.
+ },
+ /* Hook to execute after a story is rendered.
+ * The page argument is the Playwright's page object for the story
+ * The context argument is a Storybook object containing the story's id, title, and name.
+ */
+ async postRender(page, context) {
+ // Add your configuration here.
+ },
+};
+```
\ No newline at end of file
diff --git a/docs/snippets/common/storybook-test-runner-hooks-example.ts.mdx b/docs/snippets/common/storybook-test-runner-hooks-example.ts.mdx
new file mode 100644
index 000000000000..bdc01f0f8c8b
--- /dev/null
+++ b/docs/snippets/common/storybook-test-runner-hooks-example.ts.mdx
@@ -0,0 +1,28 @@
+```ts
+// .storybook/test-runner.ts
+
+import type { TestRunnerConfig } from '@storybook/test-runner';
+
+const config: TestRunnerConfig = {
+ // Hook that is executed before the test runner starts running tests
+ setup() {
+ // Add your configuration here.
+ },
+ /* Hook to execute before a story is rendered.
+ * The page argument is the Playwright's page object for the story.
+ * The context argument is a Storybook object containing the story's id, title, and name.
+ */
+ async preRender(page, context) {
+ // Add your configuration here.
+ },
+ /* Hook to execute after a story is rendered.
+ * The page argument is the Playwright's page object for the story
+ * The context argument is a Storybook object containing the story's id, title, and name.
+ */
+ async postRender(page, context) {
+ // Add your configuration here.
+ },
+};
+
+module.exports = config;
+```
\ No newline at end of file
diff --git a/docs/snippets/common/storybook-test-runner-install.npm.js.mdx b/docs/snippets/common/storybook-test-runner-install.npm.js.mdx
new file mode 100644
index 000000000000..90f046c3ec62
--- /dev/null
+++ b/docs/snippets/common/storybook-test-runner-install.npm.js.mdx
@@ -0,0 +1,3 @@
+```shell
+npm install @storybook/test-runner jest --save-dev
+```
\ No newline at end of file
diff --git a/docs/snippets/common/storybook-test-runner-install.yarn.js.mdx b/docs/snippets/common/storybook-test-runner-install.yarn.js.mdx
new file mode 100644
index 000000000000..3221e525779e
--- /dev/null
+++ b/docs/snippets/common/storybook-test-runner-install.yarn.js.mdx
@@ -0,0 +1,3 @@
+```shell
+yarn add --dev @storybook/test-runner jest
+```
\ No newline at end of file
diff --git a/docs/snippets/common/storybook-test-runner-local-build-workflow.yml.mdx b/docs/snippets/common/storybook-test-runner-local-build-workflow.yml.mdx
new file mode 100644
index 000000000000..ce8e8658aaa5
--- /dev/null
+++ b/docs/snippets/common/storybook-test-runner-local-build-workflow.yml.mdx
@@ -0,0 +1,26 @@
+```yml
+# .github/workflows/storybook-tests.yml
+
+name: 'Storybook Tests'
+on: push
+jobs:
+ test:
+ timeout-minutes: 60
+ runs-on: ubuntu-latest
+ steps:
+ - uses: actions/checkout@v2
+ - uses: actions/setup-node@v2
+ with:
+ node-version: '14.x'
+ - name: Install dependencies
+ run: yarn
+ - name: Install Playwright
+ run: npx playwright install --with-deps
+ - name: Build Storybook
+ run: yarn build-storybook --quiet
+ - name: Serve Storybook and run tests
+ run: |
+ npx concurrently -k -s first -n "SB,TEST" -c "magenta,blue" \
+ "npx http-server storybook-static --port 6006 --silent" \
+ "npx wait-on tcp:6006 && yarn test-storybook"
+```
\ No newline at end of file
diff --git a/docs/snippets/common/storybook-test-runner-with-deploy-event-workflow.yml.mdx b/docs/snippets/common/storybook-test-runner-with-deploy-event-workflow.yml.mdx
new file mode 100644
index 000000000000..4a8705f7ec19
--- /dev/null
+++ b/docs/snippets/common/storybook-test-runner-with-deploy-event-workflow.yml.mdx
@@ -0,0 +1,24 @@
+```yml
+# .github/workflows/storybook-tests.yml
+
+name: Storybook Tests
+on: deployment_status
+jobs:
+ test:
+ timeout-minutes: 60
+ runs-on: ubuntu-latest
+ if: github.event.deployment_status.state == 'success'
+ steps:
+ - uses: actions/checkout@v2
+ - uses: actions/setup-node@v2
+ with:
+ node-version: '14.x'
+ - name: Install dependencies
+ run: yarn
+ - name: Install Playwright
+ run: npx playwright install --with-deps
+ - name: Run Storybook tests
+ run: yarn test-storybook
+ env:
+ TARGET_URL: '${{ github.event.deployment_status.target_url }}'
+```
\ No newline at end of file
diff --git a/docs/snippets/common/storybook-test-runner-with-stories-json.npm.js.mdx b/docs/snippets/common/storybook-test-runner-with-stories-json.npm.js.mdx
new file mode 100644
index 000000000000..0199d36a8ba6
--- /dev/null
+++ b/docs/snippets/common/storybook-test-runner-with-stories-json.npm.js.mdx
@@ -0,0 +1,3 @@
+```shell
+npm run test-storybook -- --stories-json
+```
\ No newline at end of file
diff --git a/docs/snippets/common/storybook-test-runner-with-stories-json.yarn.js.mdx b/docs/snippets/common/storybook-test-runner-with-stories-json.yarn.js.mdx
new file mode 100644
index 000000000000..8a5bf7838bda
--- /dev/null
+++ b/docs/snippets/common/storybook-test-runner-with-stories-json.yarn.js.mdx
@@ -0,0 +1,3 @@
+```shell
+yarn test-storybook --stories-json
+```
\ No newline at end of file
diff --git a/docs/snippets/common/storybook-testing-addon-install.npm.js.mdx b/docs/snippets/common/storybook-testing-addon-install.npm.js.mdx
new file mode 100644
index 000000000000..f49ff3a0f3fb
--- /dev/null
+++ b/docs/snippets/common/storybook-testing-addon-install.npm.js.mdx
@@ -0,0 +1,3 @@
+```shell
+npm install --save-dev @storybook/testing-( react | vue | vue3 | angular)
+```
\ No newline at end of file
diff --git a/docs/snippets/common/storybook-testing-addon-install.yarn.js.mdx b/docs/snippets/common/storybook-testing-addon-install.yarn.js.mdx
new file mode 100644
index 000000000000..4b6378ec00d9
--- /dev/null
+++ b/docs/snippets/common/storybook-testing-addon-install.yarn.js.mdx
@@ -0,0 +1,3 @@
+```shell
+yarn add --dev @storybook/testing-( react | vue | vue3 | angular )
+```
\ No newline at end of file
diff --git a/docs/snippets/common/storybook-theme-example-variables.ts.mdx b/docs/snippets/common/storybook-theme-example-variables.ts.mdx
index 5fcafab87256..6c3be843f097 100644
--- a/docs/snippets/common/storybook-theme-example-variables.ts.mdx
+++ b/docs/snippets/common/storybook-theme-example-variables.ts.mdx
@@ -8,5 +8,6 @@ export default create({
brandTitle: 'My custom storybook',
brandUrl: 'https://example.com',
brandImage: 'https://place-hold.it/350x150',
+ brandTarget: '_self',
});
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/common/storybook-vite-builder-aliasing.js.mdx b/docs/snippets/common/storybook-vite-builder-aliasing.js.mdx
new file mode 100644
index 000000000000..d34ce2dc5052
--- /dev/null
+++ b/docs/snippets/common/storybook-vite-builder-aliasing.js.mdx
@@ -0,0 +1,20 @@
+```js
+// .storybook/main.js|ts
+
+module.exports = {
+ stories: ['../stories/**/*.stories.mdx', '../stories/**/*.stories.@(js|jsx|ts|tsx)'],
+ addons: ['@storybook/addon-links', '@storybook/addon-essentials'],
+ core: {
+ builder: '@storybook/builder-vite',
+ },
+ async viteFinal(config, { configType }) {
+ // Return the updated configuration
+ return mergeConfig(config, {
+ // Adds a new alias
+ resolve: {
+ alias: { exampleAlias: 'something' },
+ },
+ });
+ },
+};
+```
\ No newline at end of file
diff --git a/docs/snippets/common/storybook-vite-builder-config-env.js.mdx b/docs/snippets/common/storybook-vite-builder-config-env.js.mdx
new file mode 100644
index 000000000000..a3dbee8895aa
--- /dev/null
+++ b/docs/snippets/common/storybook-vite-builder-config-env.js.mdx
@@ -0,0 +1,24 @@
+```js
+// .storybook/main.js|ts
+
+const { mergeConfig } = require('vite');
+
+module.exports = {
+ stories: ['../stories/**/*.stories.mdx', '../stories/**/*.stories.@(js|jsx|ts|tsx)'],
+ addons: ['@storybook/addon-links', '@storybook/addon-essentials'],
+ core: {
+ builder: '@storybook/builder-vite',
+ },
+ async viteFinal(config, { configType }) {
+ if (configType === 'DEVELOPMENT') {
+ // Your development configuration goes here
+ }
+ if (configType === 'PRODUCTION') {
+ // Your production configuration goes here.
+ }
+ return mergeConfig(config, {
+ // Your environment configuration here
+ });
+ },
+};
+```
\ No newline at end of file
diff --git a/docs/snippets/common/storybook-vite-builder-error-optimized.js.mdx b/docs/snippets/common/storybook-vite-builder-error-optimized.js.mdx
new file mode 100644
index 000000000000..cc7883900911
--- /dev/null
+++ b/docs/snippets/common/storybook-vite-builder-error-optimized.js.mdx
@@ -0,0 +1,18 @@
+```js
+// .storybook/main.js|ts
+
+module.exports = {
+ stories: ['../stories/**/*.stories.mdx', '../stories/**/*.stories.@(js|jsx|ts|tsx)'],
+ addons: ['@storybook/addon-links', '@storybook/addon-essentials'],
+ core: {
+ builder: '@storybook/builder-vite',
+ },
+ async viteFinal(config, { configType }) {
+ config.optimizeDeps.include = [
+ ...(config.optimizeDeps?.include ?? []),
+ // Other dependencies go here
+ ];
+ return config;
+ },
+};
+```
\ No newline at end of file
diff --git a/docs/snippets/common/storybook-vite-builder-install.npm.js.mdx b/docs/snippets/common/storybook-vite-builder-install.npm.js.mdx
new file mode 100644
index 000000000000..e4d64958fb9a
--- /dev/null
+++ b/docs/snippets/common/storybook-vite-builder-install.npm.js.mdx
@@ -0,0 +1,3 @@
+```shell
+npm install @storybook/builder-vite --save-dev
+```
\ No newline at end of file
diff --git a/docs/snippets/common/storybook-vite-builder-install.yarn.js.mdx b/docs/snippets/common/storybook-vite-builder-install.yarn.js.mdx
new file mode 100644
index 000000000000..ff51b902c057
--- /dev/null
+++ b/docs/snippets/common/storybook-vite-builder-install.yarn.js.mdx
@@ -0,0 +1,3 @@
+```shell
+yarn add --dev @storybook/builder-vite
+```
\ No newline at end of file
diff --git a/docs/snippets/common/storybook-vite-builder-register.js.mdx b/docs/snippets/common/storybook-vite-builder-register.js.mdx
new file mode 100644
index 000000000000..6ae400a96a42
--- /dev/null
+++ b/docs/snippets/common/storybook-vite-builder-register.js.mdx
@@ -0,0 +1,11 @@
+```js
+// .storybook/main.js|ts
+
+module.exports = {
+ stories: ['../stories/**/*.stories.mdx', '../stories/**/*.stories.@(js|jsx|ts|tsx)'],
+ addons: ['@storybook/addon-links', '@storybook/addon-essentials'],
+ core: {
+ builder: '@storybook/builder-vite', // 👈 The builder enabled here.
+ },
+};
+```
\ No newline at end of file
diff --git a/docs/snippets/common/storybook-vite-builder-svelte-plugin.js.mdx b/docs/snippets/common/storybook-vite-builder-svelte-plugin.js.mdx
new file mode 100644
index 000000000000..3ec43e4e035e
--- /dev/null
+++ b/docs/snippets/common/storybook-vite-builder-svelte-plugin.js.mdx
@@ -0,0 +1,24 @@
+```js
+// .storybook/main.js|ts
+
+const preprocess = require('svelte-preprocess');
+
+module.exports = {
+ stories: ['../stories/**/*.stories.mdx', '../stories/**/*.stories.@(js|jsx|ts|tsx)'],
+ addons: ['@storybook/addon-links', '@storybook/addon-essentials'],
+ core: {
+ builder: '@storybook/builder-vite',
+ },
+ async viteFinal(config, { configType }) {
+ // Customize the Vite config here
+ return config;
+ },
+ svelteOptions: {
+ preprocess: preprocess({
+ typescript: true,
+ postcss: true,
+ sourceMap: true,
+ }),
+ },
+};
+```
\ No newline at end of file
diff --git a/docs/snippets/common/storybook-vite-builder-ts-configure.ts.mdx b/docs/snippets/common/storybook-vite-builder-ts-configure.ts.mdx
new file mode 100644
index 000000000000..3948e084d949
--- /dev/null
+++ b/docs/snippets/common/storybook-vite-builder-ts-configure.ts.mdx
@@ -0,0 +1,19 @@
+```ts
+// .storybook/main.ts
+
+import type { StorybookViteConfig } from '@storybook/builder-vite';
+
+const config: StorybookViteConfig = {
+ stories: ['../stories/**/*.stories.mdx', '../stories/**/*.stories.@(js|jsx|ts|tsx)'],
+ addons: ['@storybook/addon-links', '@storybook/addon-essentials'],
+ core: {
+ builder: '@storybook/builder-vite',
+ },
+ async viteFinal(config, options) {
+ // Add your configuration here
+ return config;
+ },
+};
+
+export default config;
+```
\ No newline at end of file
diff --git a/docs/snippets/common/your-theme.js.mdx b/docs/snippets/common/your-theme.js.mdx
index 24f9771bad36..4858c332aa17 100644
--- a/docs/snippets/common/your-theme.js.mdx
+++ b/docs/snippets/common/your-theme.js.mdx
@@ -37,5 +37,6 @@ export default create({
brandTitle: 'My custom storybook',
brandUrl: 'https://example.com',
brandImage: 'https://place-hold.it/350x150',
+ brandTarget: '_self',
});
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/react/accessibility-testing-with-jest-axe.js.mdx b/docs/snippets/react/accessibility-testing-with-jest-axe.js.mdx
deleted file mode 100644
index 73946a456b30..000000000000
--- a/docs/snippets/react/accessibility-testing-with-jest-axe.js.mdx
+++ /dev/null
@@ -1,23 +0,0 @@
-```js
-// MyComponent.test.js
-
-import { render } from '@testing-library/react';
-
-import { composeStories } from '@storybook/testing-react';
-
-import { axe, toHaveNoViolations } from 'jest-axe';
-
-import * as MyComponentStories from './MyComponent.stories';
-
-const { Accessible } = composeStories(MyComponentStories);
-
-expect.extend(toHaveNoViolations);
-
-test('Example accessiblity test', async () => {
- const { container } = render();
-
- const AxeResults = await axe(container);
-
- expect(AxeResults).toHaveNoViolations();
-});
-```
\ No newline at end of file
diff --git a/docs/snippets/react/button-story-with-blue-args.mdx.mdx b/docs/snippets/react/button-story-with-blue-args.mdx.mdx
index f9f69d188f71..7c5e3c682781 100644
--- a/docs/snippets/react/button-story-with-blue-args.mdx.mdx
+++ b/docs/snippets/react/button-story-with-blue-args.mdx.mdx
@@ -20,5 +20,5 @@ import { Button } from './Button';
}}
/>
-
+
```
\ No newline at end of file
diff --git a/docs/snippets/react/component-story-figma-integration.js.mdx b/docs/snippets/react/component-story-figma-integration.js.mdx
new file mode 100644
index 000000000000..57ecc2750431
--- /dev/null
+++ b/docs/snippets/react/component-story-figma-integration.js.mdx
@@ -0,0 +1,27 @@
+```js
+// MyComponent.stories.js|jsx
+
+import React from 'react';
+
+import { withDesign } from 'storybook-addon-designs';
+
+import { MyComponent } from './MyComponent';
+
+// More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
+export default {
+ title: 'FigmaExample',
+ component: MyComponent,
+ decorators: [withDesign],
+};
+
+// More on component templates: https://storybook.js.org/docs/react/writing-stories/introduction#using-args
+const Template = () => ;
+
+export const Example = Template.bind({});
+Example.parameters = {
+ design: {
+ type: 'figma',
+ url: 'https://www.figma.com/file/Sample-File',
+ },
+};
+```
\ No newline at end of file
diff --git a/docs/snippets/react/component-story-figma-integration.mdx.mdx b/docs/snippets/react/component-story-figma-integration.mdx.mdx
new file mode 100644
index 000000000000..455cb3a10eaa
--- /dev/null
+++ b/docs/snippets/react/component-story-figma-integration.mdx.mdx
@@ -0,0 +1,27 @@
+```md
+
+
+import { Canvas, Meta, Story } from '@storybook/addon-docs';
+
+import { withDesign } from 'storybook-addon-designs';
+
+import { MyComponent } from './MyComponent';
+
+
+
+export const Template = () => ;
+
+
+```
\ No newline at end of file
diff --git a/docs/snippets/react/component-story-figma-integration.ts.mdx b/docs/snippets/react/component-story-figma-integration.ts.mdx
new file mode 100644
index 000000000000..1b54ea82e143
--- /dev/null
+++ b/docs/snippets/react/component-story-figma-integration.ts.mdx
@@ -0,0 +1,29 @@
+```ts
+// MyComponent.stories.ts|tsx
+
+import React from 'react';
+
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+
+import { withDesign } from 'storybook-addon-designs';
+
+import { MyComponent } from './MyComponent';
+
+// More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
+export default {
+ title: 'FigmaExample',
+ component: MyComponent,
+ decorators: [withDesign],
+} as ComponentMeta;
+
+// More on component templates: https://storybook.js.org/docs/react/writing-stories/introduction#using-args
+const Template: ComponentStory = () => ;
+
+export const Example = Template.bind({});
+Example.parameters = {
+ design: {
+ type: 'figma',
+ url: 'https://www.figma.com/file/Sample-File',
+ },
+};
+```
\ No newline at end of file
diff --git a/docs/snippets/react/document-screen-fetch.js.mdx b/docs/snippets/react/document-screen-fetch.js.mdx
index 160069be7840..86f04def6814 100644
--- a/docs/snippets/react/document-screen-fetch.js.mdx
+++ b/docs/snippets/react/document-screen-fetch.js.mdx
@@ -22,7 +22,7 @@ function useFetchData() {
})
.then((res) => res.json())
.then((data) => {
- setStatus('sucess');
+ setStatus('success');
setData(data);
})
.catch(() => {
diff --git a/docs/snippets/react/login-form-with-play-function.js.mdx b/docs/snippets/react/login-form-with-play-function.js.mdx
index 01d5427e4283..ca6e59d02331 100644
--- a/docs/snippets/react/login-form-with-play-function.js.mdx
+++ b/docs/snippets/react/login-form-with-play-function.js.mdx
@@ -5,6 +5,8 @@ import React from 'react';
import { within, userEvent } from '@storybook/testing-library';
+import { expect } from '@storybook/jest';
+
import { LoginForm } from './LoginForm';
export default {
@@ -25,14 +27,19 @@ FilledForm.play = async ({ canvasElement }) => {
// Starts querying the component from its root element
const canvas = within(canvasElement);
- await userEvent.type(canvas.getByTestId('email'), 'email@provider.com', {
- delay: 100,
- });
- await userEvent.type(canvas.getByTestId('password'), 'a-random-password', {
- delay: 100,
- });
+ // 👇 Simulate interactions with the component
+ await userEvent.type(canvas.getByTestId('email'), 'email@provider.com');
+
+ await userEvent.type(canvas.getByTestId('password'), 'a-random-password');
// See https://storybook.js.org/docs/react/essentials/actions#automatically-matching-args to learn how to setup logging in the Actions panel
await userEvent.click(canvas.getByRole('button'));
+
+ // 👇 Assert DOM structure
+ await expect(
+ canvas.getByText(
+ 'Everything is perfect. Your account is ready and we should probably get you started!'
+ )
+ ).toBeInTheDocument();
};
-```
+```
\ No newline at end of file
diff --git a/docs/snippets/react/login-form-with-play-function.mdx.mdx b/docs/snippets/react/login-form-with-play-function.mdx.mdx
index 2593c723fb15..327a8ae55c42 100644
--- a/docs/snippets/react/login-form-with-play-function.mdx.mdx
+++ b/docs/snippets/react/login-form-with-play-function.mdx.mdx
@@ -5,6 +5,8 @@ import { Canvas, Meta, Story } from '@storybook/addon-docs';
import { within, userEvent } from '@storybook/testing-library';
+import { expect } from '@storybook/jest';
+
import { LoginForm } from './LoginForm';
@@ -22,16 +24,22 @@ export const Template = (args) => ;
// Starts querying the component from its root element
const canvas = within(canvasElement);
- await userEvent.type(canvas.getByTestId('email'), 'email@provider.com', {
- delay: 100,
- });
- await userEvent.type(canvas.getByTestId('password'), 'a-random-password', {
- delay: 100,
- });
- // See https://storybook.js.org/docs/react/essentials/actions#automatically-matching-args to learn how to setup logging in the Actions panel
- await userEvent.click(canvas.getByRole('button'));
- }}>
- {Template.bind({})}
+ // 👇 Simulate interactions with the component
+ await userEvent.type(canvas.getByTestId('email'), 'email@provider.com');
+
+ await userEvent.type(canvas.getByTestId('password'), 'a-random-password');
+
+ // See https://storybook.js.org/docs/react/essentials/actions#automatically-matching-args to learn how to setup logging in the Actions panel
+ await userEvent.click(canvas.getByRole('button'));
+
+ // 👇 Assert DOM structure
+ await expect(
+ canvas.getByText(
+ 'Everything is perfect. Your account is ready and we should probably get you started!'
+ )
+ ).toBeInTheDocument();
+ }}>
+ {Template.bind({})}
```
diff --git a/docs/snippets/react/login-form-with-play-function.ts.mdx b/docs/snippets/react/login-form-with-play-function.ts.mdx
index df528c066cf8..05b3e8395739 100644
--- a/docs/snippets/react/login-form-with-play-function.ts.mdx
+++ b/docs/snippets/react/login-form-with-play-function.ts.mdx
@@ -7,6 +7,8 @@ import { ComponentStory, ComponentMeta } from '@storybook/react';
import { within, userEvent } from '@storybook/testing-library';
+import { expect } from '@storybook/jest';
+
import { LoginForm } from './LoginForm';
export default {
@@ -27,14 +29,19 @@ FilledForm.play = async ({ canvasElement }) => {
// Starts querying the component from its root element
const canvas = within(canvasElement);
- await userEvent.type(canvas.getByTestId('email'), 'email@provider.com', {
- delay: 100,
- });
- await userEvent.type(canvas.getByTestId('password'), 'a-random-password', {
- delay: 100,
- });
+ // 👇 Simulate interactions with the component
+ await userEvent.type(canvas.getByTestId('email'), 'email@provider.com');
+
+ await userEvent.type(canvas.getByTestId('password'), 'a-random-password');
// See https://storybook.js.org/docs/react/essentials/actions#automatically-matching-args to learn how to setup logging in the Actions panel
await userEvent.click(canvas.getByRole('button'));
+
+ // 👇 Assert DOM structure
+ await expect(
+ canvas.getByText(
+ 'Everything is perfect. Your account is ready and we should probably get you started!'
+ )
+ ).toBeInTheDocument();
};
```
\ No newline at end of file
diff --git a/docs/snippets/react/my-component-play-function-with-delay.js.mdx b/docs/snippets/react/my-component-play-function-with-delay.js.mdx
index 434cd2304a6b..ffda0d5edec1 100644
--- a/docs/snippets/react/my-component-play-function-with-delay.js.mdx
+++ b/docs/snippets/react/my-component-play-function-with-delay.js.mdx
@@ -22,7 +22,7 @@ export const DelayedStory = Template.bind({});
DelayedStory.play = async () => {
const exampleElement= screen.getByLabelText('example-element');
- // The delay option set the ammount of milliseconds between characters being typed
+ // The delay option set the amount of milliseconds between characters being typed
await userEvent.type(exampleElement, 'random string', {
delay: 100,
});
@@ -32,4 +32,4 @@ DelayedStory.play = async () => {
delay: 100,
});
};
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/react/my-component-play-function-with-delay.mdx.mdx b/docs/snippets/react/my-component-play-function-with-delay.mdx.mdx
index 44dd26e7fd96..56ab5df2ebcc 100644
--- a/docs/snippets/react/my-component-play-function-with-delay.mdx.mdx
+++ b/docs/snippets/react/my-component-play-function-with-delay.mdx.mdx
@@ -16,7 +16,7 @@ export const Template = (args) => ;
play={async () => {
const exampleElement= screen.getByLabelText('example-element');
- // The delay option set the ammount of milliseconds between characters being typed
+ // The delay option set the amount of milliseconds between characters being typed
await userEvent.type(exampleElement, 'random string', {
delay: 100,
});
@@ -28,4 +28,4 @@ export const Template = (args) => ;
}}>
{Template.bind({})}
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/react/my-component-play-function-with-delay.ts.mdx b/docs/snippets/react/my-component-play-function-with-delay.ts.mdx
index 93ce662baabd..0d806f32d210 100644
--- a/docs/snippets/react/my-component-play-function-with-delay.ts.mdx
+++ b/docs/snippets/react/my-component-play-function-with-delay.ts.mdx
@@ -24,7 +24,7 @@ export const DelayedStory = Template.bind({});
DelayedStory.play = async () => {
const exampleElement= screen.getByLabelText('example-element');
- // The delay option set the ammount of milliseconds between characters being typed
+ // The delay option set the amount of milliseconds between characters being typed
await userEvent.type(exampleElement, 'random string', {
delay: 100,
});
@@ -34,4 +34,4 @@ DelayedStory.play = async () => {
delay: 100,
});
};
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/react/storybook-testing-addon-optional-config.js.mdx b/docs/snippets/react/storybook-testing-addon-optional-config.js.mdx
index 60b244c3ff40..9bc7bbd7a6ba 100644
--- a/docs/snippets/react/storybook-testing-addon-optional-config.js.mdx
+++ b/docs/snippets/react/storybook-testing-addon-optional-config.js.mdx
@@ -1,5 +1,5 @@
```js
-// setupTests.js
+// setupFile.js
import { setGlobalConfig } from '@storybook/testing-react';
@@ -7,4 +7,4 @@ import { setGlobalConfig } from '@storybook/testing-react';
import * as globalStorybookConfig from './.storybook/preview';
setGlobalConfig(globalStorybookConfig);
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/svelte/button-story-with-blue-args.mdx.mdx b/docs/snippets/svelte/button-story-with-blue-args.mdx.mdx
index 68046a1c382a..c6d410ddc632 100644
--- a/docs/snippets/svelte/button-story-with-blue-args.mdx.mdx
+++ b/docs/snippets/svelte/button-story-with-blue-args.mdx.mdx
@@ -3,7 +3,7 @@
import { Meta } from '@storybook/addon-docs';
-import Button from './Button.svelte';
+import Button from './Button.svelte';
-
+
```
\ No newline at end of file
diff --git a/docs/snippets/svelte/component-story-figma-integration.js.mdx b/docs/snippets/svelte/component-story-figma-integration.js.mdx
new file mode 100644
index 000000000000..a509ab634c30
--- /dev/null
+++ b/docs/snippets/svelte/component-story-figma-integration.js.mdx
@@ -0,0 +1,28 @@
+```js
+// MyComponent.stories.js
+
+import { withDesign } from 'storybook-addon-designs';
+
+import MyComponent from './MyComponent.svelte';
+
+// More on default export: https://storybook.js.org/docs/svelte/writing-stories/introduction#default-export
+export default {
+ title: 'FigmaExample',
+ component: { MyComponent },
+ decorators: [withDesign],
+};
+
+// More on component templates: https://storybook.js.org/docs/svelte/writing-stories/introduction#using-args
+const Template = () => ({
+ props: {},
+ Component: MyComponent,
+});
+
+export const Example = Template.bind({});
+Example.parameters = {
+ design: {
+ type: 'figma',
+ url: 'https://www.figma.com/file/Sample-File',
+ },
+};
+```
\ No newline at end of file
diff --git a/docs/snippets/svelte/component-story-figma-integration.mdx.mdx b/docs/snippets/svelte/component-story-figma-integration.mdx.mdx
new file mode 100644
index 000000000000..3dcfbcfd35e0
--- /dev/null
+++ b/docs/snippets/svelte/component-story-figma-integration.mdx.mdx
@@ -0,0 +1,34 @@
+```md
+
+
+import { Canvas, Meta, Story } from '@storybook/addon-docs';
+
+import { withDesign } from 'storybook-addon-designs';
+
+import MyComponent from './MyComponent.svelte';
+
+
+
+export const Template = () => ({
+ props: {},
+ Component: MyComponent,
+});
+
+
+```
\ No newline at end of file
diff --git a/docs/snippets/svelte/login-form-with-play-function.js.mdx b/docs/snippets/svelte/login-form-with-play-function.js.mdx
index e49f2f000811..e06ea2235a84 100644
--- a/docs/snippets/svelte/login-form-with-play-function.js.mdx
+++ b/docs/snippets/svelte/login-form-with-play-function.js.mdx
@@ -3,6 +3,8 @@
import { within, userEvent } from '@storybook/testing-library';
+import { expect } from '@storybook/jest';
+
import LoginForm from './LoginForm.svelte';
export default {
@@ -26,14 +28,19 @@ FilledForm.play = async ({ canvasElement }) => {
// Starts querying the component from its root element
const canvas = within(canvasElement);
- await userEvent.type(canvas.getByTestId('email'), 'email@provider.com', {
- delay: 100,
- });
- await userEvent.type(canvas.getByTestId('password'), 'a-random-password', {
- delay: 100,
- });
+ // 👇 Simulate interactions with the component
+ await userEvent.type(canvas.getByTestId('email'), 'email@provider.com');
+
+ await userEvent.type(canvas.getByTestId('password'), 'a-random-password');
// See https://storybook.js.org/docs/svelte/essentials/actions#automatically-matching-args to learn how to setup logging in the Actions panel
await userEvent.click(canvas.getByRole('button'));
+
+ // 👇 Assert DOM structure
+ await expect(
+ canvas.getByText(
+ 'Everything is perfect. Your account is ready and we should probably get you started!'
+ )
+ ).toBeInTheDocument();
};
```
\ No newline at end of file
diff --git a/docs/snippets/svelte/login-form-with-play-function.mdx.mdx b/docs/snippets/svelte/login-form-with-play-function.mdx.mdx
index b6545bb4cd51..8f5e3441bf6c 100644
--- a/docs/snippets/svelte/login-form-with-play-function.mdx.mdx
+++ b/docs/snippets/svelte/login-form-with-play-function.mdx.mdx
@@ -5,6 +5,8 @@ import { Canvas, Meta, Story } from '@storybook/addon-docs';
import { within, userEvent } from '@storybook/testing-library';
+import { expect } from '@storybook/jest';
+
import LoginForm from './LoginForm.svelte';
@@ -22,19 +24,23 @@ export const Template = (args) => ({
{
-
// Starts querying the component from its root element
const canvas = within(canvasElement);
- await userEvent.type(canvas.getByTestId('email'), 'email@provider.com', {
- delay: 100,
- });
- await userEvent.type(canvas.getByTestId('password'), 'a-random-password', {
- delay: 100,
- });
+ // 👇 Simulate interactions
+ await userEvent.type(canvas.getByTestId('email'), 'email@provider.com');
+
+ await userEvent.type(canvas.getByTestId('password'), 'a-random-password');
// See https://storybook.js.org/docs/svelte/essentials/actions#automatically-matching-args to learn how to setup logging in the Actions panel
await userEvent.click(canvas.getByRole('button'));
+
+ // 👇 Assert DOM structure
+ await expect(
+ canvas.getByText(
+ 'Everything is perfect. Your account is ready and we should probably get you started!'
+ )
+ ).toBeInTheDocument();
}}>
{Template.bind({})}
diff --git a/docs/snippets/svelte/my-component-play-function-with-delay.js.mdx b/docs/snippets/svelte/my-component-play-function-with-delay.js.mdx
index 2c84dca6544a..47ce8d030ca1 100644
--- a/docs/snippets/svelte/my-component-play-function-with-delay.js.mdx
+++ b/docs/snippets/svelte/my-component-play-function-with-delay.js.mdx
@@ -23,7 +23,7 @@ export const DelayedStory = Template.bind({});
DelayedStory.play = async () => {
const exampleElement= screen.getByLabelText('example-element');
- // The delay option set the ammount of milliseconds between characters being typed
+ // The delay option set the amount of milliseconds between characters being typed
await userEvent.type(exampleElement, 'random string', {
delay: 100,
});
@@ -33,4 +33,4 @@ DelayedStory.play = async () => {
delay: 100,
});
};
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/svelte/my-component-play-function-with-delay.mdx.mdx b/docs/snippets/svelte/my-component-play-function-with-delay.mdx.mdx
index 79f0fee163c0..2706786d7110 100644
--- a/docs/snippets/svelte/my-component-play-function-with-delay.mdx.mdx
+++ b/docs/snippets/svelte/my-component-play-function-with-delay.mdx.mdx
@@ -19,7 +19,7 @@ export const Template = (args) => ({
play={async () => {
const exampleElement= screen.getByLabelText('example-element');
- // The delay option set the ammount of milliseconds between characters being typed
+ // The delay option set the amount of milliseconds between characters being typed
await userEvent.type(exampleElement, 'random string', {
delay: 100,
});
@@ -31,4 +31,4 @@ export const Template = (args) => ({
}}>
{Template.bind({})}
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/vue/accessibility-testing-with-jest-axe.js.mdx b/docs/snippets/vue/accessibility-testing-with-jest-axe.js.mdx
deleted file mode 100644
index bb64b8201590..000000000000
--- a/docs/snippets/vue/accessibility-testing-with-jest-axe.js.mdx
+++ /dev/null
@@ -1,23 +0,0 @@
-```js
-// MyComponent.test.js
-
-import { render } from '@testing-library/vue';
-
-import { composeStories } from '@storybook/testing-vue';
-
-import { axe, toHaveNoViolations } from 'jest-axe';
-
-import * as MyComponentStories from './MyComponent.stories';
-
-const { Accessible } = composeStories(MyComponentStories);
-
-expect.extend(toHaveNoViolations);
-
-test('Example accessiblity test', async () => {
- const { container } = render(Accessible());
-
- const AxeResults = await axe(container);
-
- expect(AxeResults).toHaveNoViolations();
-});
-```
\ No newline at end of file
diff --git a/docs/snippets/vue/badge-story-starter-example.mdx.mdx b/docs/snippets/vue/badge-story-starter-example.mdx.mdx
index 1905cd91cac4..3b228d2840a9 100644
--- a/docs/snippets/vue/badge-story-starter-example.mdx.mdx
+++ b/docs/snippets/vue/badge-story-starter-example.mdx.mdx
@@ -76,4 +76,4 @@ with unique URLs and isolated snapshot tests.
}}
-```
+```
\ No newline at end of file
diff --git a/docs/snippets/vue/badge-story.mdx-2.mdx.mdx b/docs/snippets/vue/badge-story.mdx-2.mdx.mdx
index fb34bac4968d..32ed8f0726b5 100644
--- a/docs/snippets/vue/badge-story.mdx-2.mdx.mdx
+++ b/docs/snippets/vue/badge-story.mdx-2.mdx.mdx
@@ -69,4 +69,4 @@ with unique URLs, which is great for review and testing.
{Template.bind({})}
-```
+```
\ No newline at end of file
diff --git a/docs/snippets/vue/button-group-story.2.js.mdx b/docs/snippets/vue/button-group-story.2.js.mdx
index 73edf3359698..a083bfbce036 100644
--- a/docs/snippets/vue/button-group-story.2.js.mdx
+++ b/docs/snippets/vue/button-group-story.2.js.mdx
@@ -1,5 +1,5 @@
```js
-//ButtonGroup.stories.js
+// ButtonGroup.stories.js
import ButtonGroup from './ButtonGroup.vue';
diff --git a/docs/snippets/vue/button-group-story.3.js.mdx b/docs/snippets/vue/button-group-story.3.js.mdx
index fba028c49219..6197ffd73ae4 100644
--- a/docs/snippets/vue/button-group-story.3.js.mdx
+++ b/docs/snippets/vue/button-group-story.3.js.mdx
@@ -1,5 +1,5 @@
```js
-//ButtonGroup.stories.js
+// ButtonGroup.stories.js
import ButtonGroup from './ButtonGroup.vue';
diff --git a/docs/snippets/vue/button-group-story.ts-2.ts.mdx b/docs/snippets/vue/button-group-story.ts-2.ts.mdx
new file mode 100644
index 000000000000..d0e1eb3adadc
--- /dev/null
+++ b/docs/snippets/vue/button-group-story.ts-2.ts.mdx
@@ -0,0 +1,31 @@
+```ts
+// ButtonGroup.stories.ts
+
+import ButtonGroup from './ButtonGroup.vue';
+
+import { Meta, StoryFn } from '@storybook/vue';
+
+//👇 Imports the Button stories
+import * as ButtonStories from './Button.stories';
+
+export default {
+ /* 👇 The title prop is optional.
+ * See https://storybook.js.org/docs/vue/configure/overview#configure-story-loading
+ * to learn how to generate automatic titles
+ */
+ title: 'ButtonGroup',
+ component: ButtonGroup,
+} as Meta;
+
+const Template: StoryFn = (args, { argTypes }) => ({
+ components: { ButtonGroup },
+ props: Object.keys(argTypes),
+ template: '',
+});
+
+export const Pair = Template.bind({});
+Pair.args = {
+ buttons: [{ ...ButtonStories.Primary.args }, { ...ButtonStories.Secondary.args }],
+ orientation: 'horizontal',
+};
+```
\ No newline at end of file
diff --git a/docs/snippets/vue/button-group-story.ts-3.ts.mdx b/docs/snippets/vue/button-group-story.ts-3.ts.mdx
new file mode 100644
index 000000000000..91b68cc272f6
--- /dev/null
+++ b/docs/snippets/vue/button-group-story.ts-3.ts.mdx
@@ -0,0 +1,33 @@
+```ts
+// ButtonGroup.stories.ts
+
+import ButtonGroup from './ButtonGroup.vue';
+
+import { Meta, StoryFn } from '@storybook/vue3';
+
+//👇 Imports the Button stories
+import * as ButtonStories from './Button.stories';
+
+export default {
+ /* 👇 The title prop is optional.
+ * See https://storybook.js.org/docs/vue/configure/overview#configure-story-loading
+ * to learn how to generate automatic titles
+ */
+ title: 'ButtonGroup',
+ component: ButtonGroup,
+} as Meta;
+
+const Template: StoryFn = (args) => ({
+ components: { ButtonGroup },
+ setup() {
+ return { args };
+ },
+ template: '',
+});
+
+export const Pair = Template.bind({});
+Pair.args = {
+ buttons: [{ ...ButtonStories.Primary.args }, { ...ButtonStories.Secondary.args }],
+ orientation: 'horizontal',
+};
+```
\ No newline at end of file
diff --git a/docs/snippets/vue/button-story-component-decorator.ts-2.ts.mdx b/docs/snippets/vue/button-story-component-decorator.ts-2.ts.mdx
new file mode 100644
index 000000000000..37a6ec4b52f0
--- /dev/null
+++ b/docs/snippets/vue/button-story-component-decorator.ts-2.ts.mdx
@@ -0,0 +1,17 @@
+```ts
+// Button.stories.ts
+
+import Button from './Button.vue';
+
+import { Meta } from '@storybook/vue';
+
+export default {
+ /* 👇 The title prop is optional.
+ * See https://storybook.js.org/docs/vue/configure/overview#configure-story-loading
+ * to learn how to generate automatic titles
+ */
+ title: 'Button',
+ component: Button,
+ decorators: [() => ({ template: '
' })],
+} as Meta;
+```
\ No newline at end of file
diff --git a/docs/snippets/vue/button-story-component-decorator.ts-3.ts.mdx b/docs/snippets/vue/button-story-component-decorator.ts-3.ts.mdx
new file mode 100644
index 000000000000..bc4678319e93
--- /dev/null
+++ b/docs/snippets/vue/button-story-component-decorator.ts-3.ts.mdx
@@ -0,0 +1,17 @@
+```ts
+// Button.stories.ts
+
+import Button from './Button.vue';
+
+import { Meta } from '@storybook/vue3';
+
+export default {
+ /* 👇 The title prop is optional.
+ * See https://storybook.js.org/docs/vue/configure/overview#configure-story-loading
+ * to learn how to generate automatic titles
+ */
+ title: 'Button',
+ component: Button,
+ decorators: [() => ({ template: '
' })],
+} as Meta;
+```
\ No newline at end of file
diff --git a/docs/snippets/vue/button-story-default-export-with-component.ts-2.ts.mdx b/docs/snippets/vue/button-story-default-export-with-component.ts-2.ts.mdx
new file mode 100644
index 000000000000..3203b13bc70a
--- /dev/null
+++ b/docs/snippets/vue/button-story-default-export-with-component.ts-2.ts.mdx
@@ -0,0 +1,16 @@
+```ts
+// Button.stories.ts
+
+import Button from './Button.vue';
+
+import { Meta } from '@storybook/vue';
+
+export default {
+ /* 👇 The title prop is optional.
+ * See https://storybook.js.org/docs/vue/configure/overview#configure-story-loading
+ * to learn how to generate automatic titles
+ */
+ title: 'Button',
+ component: Button,
+} as Meta;
+```
\ No newline at end of file
diff --git a/docs/snippets/vue/button-story-default-export-with-component.ts-3.ts.mdx b/docs/snippets/vue/button-story-default-export-with-component.ts-3.ts.mdx
new file mode 100644
index 000000000000..afc5e65c7954
--- /dev/null
+++ b/docs/snippets/vue/button-story-default-export-with-component.ts-3.ts.mdx
@@ -0,0 +1,16 @@
+```ts
+// Button.stories.ts
+
+import Button from './Button.vue';
+
+import { Meta } from '@storybook/vue3';
+
+export default {
+ /* 👇 The title prop is optional.
+ * See https://storybook.js.org/docs/vue/configure/overview#configure-story-loading
+ * to learn how to generate automatic titles
+ */
+ title: 'Button',
+ component: Button,
+} as Meta;
+```
\ No newline at end of file
diff --git a/docs/snippets/vue/button-story-rename-story.js.mdx b/docs/snippets/vue/button-story-rename-story.js.mdx
index 1b87c6bc4b53..95750d3d6c82 100644
--- a/docs/snippets/vue/button-story-rename-story.js.mdx
+++ b/docs/snippets/vue/button-story-rename-story.js.mdx
@@ -17,4 +17,4 @@ export const Primary = () => ({
template: '',
});
Primary.storyName = 'I am the primary';
-```
+```
\ No newline at end of file
diff --git a/docs/snippets/vue/button-story-rename-story.ts-2.ts.mdx b/docs/snippets/vue/button-story-rename-story.ts-2.ts.mdx
new file mode 100644
index 000000000000..14dfc01e1fc2
--- /dev/null
+++ b/docs/snippets/vue/button-story-rename-story.ts-2.ts.mdx
@@ -0,0 +1,22 @@
+```ts
+// Button.stories.ts
+
+import Button from './Button.vue';
+
+import { Meta, StoryFn } from '@storybook/vue';
+
+export default {
+ /* 👇 The title prop is optional.
+ * See https://storybook.js.org/docs/vue/configure/overview#configure-story-loading
+ * to learn how to generate automatic titles
+ */
+ title: 'Button',
+ component: Button,
+} as Meta;
+
+export const Primary: StoryFn = () => ({
+ components: { Button },
+ template: '',
+});
+Primary.storyName = 'I am the primary';
+```
\ No newline at end of file
diff --git a/docs/snippets/vue/button-story-rename-story.ts-3.ts.mdx b/docs/snippets/vue/button-story-rename-story.ts-3.ts.mdx
new file mode 100644
index 000000000000..8925512e6961
--- /dev/null
+++ b/docs/snippets/vue/button-story-rename-story.ts-3.ts.mdx
@@ -0,0 +1,22 @@
+```ts
+// Button.stories.ts
+
+import Button from './Button.vue';
+
+import { Meta, StoryFn } from '@storybook/vue3';
+
+export default {
+ /* 👇 The title prop is optional.
+ * See https://storybook.js.org/docs/vue/configure/overview#configure-story-loading
+ * to learn how to generate automatic titles
+ */
+ title: 'Button',
+ component: Button,
+} as Meta;
+
+export const Primary: StoryFn = () => ({
+ components: { Button },
+ template: '',
+});
+Primary.storyName = 'I am the primary';
+```
\ No newline at end of file
diff --git a/docs/snippets/vue/button-story-using-args.ts-2.ts.mdx b/docs/snippets/vue/button-story-using-args.ts-2.ts.mdx
new file mode 100644
index 000000000000..4bfe62dd1183
--- /dev/null
+++ b/docs/snippets/vue/button-story-using-args.ts-2.ts.mdx
@@ -0,0 +1,33 @@
+```ts
+// Button.stories.ts
+
+import Button from './Button.vue';
+
+import { Meta, StoryFn } from '@storybook/vue';
+
+export default {
+ /* 👇 The title prop is optional.
+ * See https://storybook.js.org/docs/vue/configure/overview#configure-story-loading
+ * to learn how to generate automatic titles
+ */
+ title: 'Button',
+ component: Button,
+} as Meta;
+
+//👇 We create a “template” of how args map to rendering
+const Template: StoryFn = (args, { argTypes }) => ({
+ components: { Button },
+ props: Object.keys(argTypes),
+ template: '',
+});
+
+//👇 Each story then reuses that template
+export const Primary = Template.bind({});
+Primary.args = { background: '#ff0', label: 'Button' };
+
+export const Secondary = Template.bind({});
+Secondary.args = { ...Primary.args, label: '😄👍😍💯' };
+
+export const Tertiary = Template.bind({});
+Tertiary.args = { ...Primary.args, label: '📚📕📈🤓' };
+```
\ No newline at end of file
diff --git a/docs/snippets/vue/button-story-using-args.ts-3.ts.mdx b/docs/snippets/vue/button-story-using-args.ts-3.ts.mdx
new file mode 100644
index 000000000000..b081e49bbe23
--- /dev/null
+++ b/docs/snippets/vue/button-story-using-args.ts-3.ts.mdx
@@ -0,0 +1,35 @@
+```ts
+// Button.stories.ts
+
+import Button from './Button.vue';
+
+import { Meta, StoryFn } from '@storybook/vue3';
+
+export default {
+ /* 👇 The title prop is optional.
+ * See https://storybook.js.org/docs/vue/configure/overview#configure-story-loading
+ * to learn how to generate automatic titles
+ */
+ title: 'Button',
+ component: Button,
+} as Meta;
+
+//👇 We create a “template” of how args map to rendering
+const Template: StoryFn = (args) => ({
+ components: { Button },
+ setup() {
+ return { args };
+ },
+ template: '',
+});
+
+//👇 Each story then reuses that template
+export const Primary = Template.bind({});
+Primary.args = { background: '#ff0', label: 'Button' };
+
+export const Secondary = Template.bind({});
+Secondary.args = { ...Primary.args, label: '😄👍😍💯' };
+
+export const Tertiary = Template.bind({});
+Tertiary.args = { ...Primary.args, label: '📚📕📈🤓' };
+```
\ No newline at end of file
diff --git a/docs/snippets/vue/button-story-with-blue-args.mdx.mdx b/docs/snippets/vue/button-story-with-blue-args.mdx.mdx
index 062da40594be..445dcaceb6bf 100644
--- a/docs/snippets/vue/button-story-with-blue-args.mdx.mdx
+++ b/docs/snippets/vue/button-story-with-blue-args.mdx.mdx
@@ -20,5 +20,5 @@ import Button from './Button.vue';
}}
/>
-
+
```
\ No newline at end of file
diff --git a/docs/snippets/vue/button-story-with-blue-args.ts-2.ts.mdx b/docs/snippets/vue/button-story-with-blue-args.ts-2.ts.mdx
new file mode 100644
index 000000000000..c55b57c2ccc5
--- /dev/null
+++ b/docs/snippets/vue/button-story-with-blue-args.ts-2.ts.mdx
@@ -0,0 +1,26 @@
+```ts
+// Button.stories.ts
+
+import Button from './Button.vue';
+
+import { Meta } from '@storybook/vue';
+
+export default {
+ /* 👇 The title prop is optional.
+ * See https://storybook.js.org/docs/vue/configure/overview#configure-story-loading
+ * to learn how to generate automatic titles
+ */
+ title: 'Button',
+ component: Button,
+ //👇 Creates specific parameters for the story
+ parameters: {
+ backgrounds: {
+ values: [
+ { name: 'red', value: '#f00' },
+ { name: 'green', value: '#0f0' },
+ { name: 'blue', value: '#00f' },
+ ],
+ },
+ },
+} as Meta;
+```
\ No newline at end of file
diff --git a/docs/snippets/vue/button-story-with-blue-args.ts-3.ts.mdx b/docs/snippets/vue/button-story-with-blue-args.ts-3.ts.mdx
new file mode 100644
index 000000000000..00cd50dc5c04
--- /dev/null
+++ b/docs/snippets/vue/button-story-with-blue-args.ts-3.ts.mdx
@@ -0,0 +1,26 @@
+```ts
+// Button.stories.ts
+
+import Button from './Button.vue';
+
+import { Meta } from '@storybook/vue3';
+
+export default {
+ /* 👇 The title prop is optional.
+ * See https://storybook.js.org/docs/vue/configure/overview#configure-story-loading
+ * to learn how to generate automatic titles
+ */
+ title: 'Button',
+ component: Button,
+ //👇 Creates specific parameters for the story
+ parameters: {
+ backgrounds: {
+ values: [
+ { name: 'red', value: '#f00' },
+ { name: 'green', value: '#0f0' },
+ { name: 'blue', value: '#00f' },
+ ],
+ },
+ },
+} as Meta;
+```
\ No newline at end of file
diff --git a/docs/snippets/vue/button-story-with-emojis.ts-2.ts.mdx b/docs/snippets/vue/button-story-with-emojis.ts-2.ts.mdx
new file mode 100644
index 000000000000..cf8c9ca28e53
--- /dev/null
+++ b/docs/snippets/vue/button-story-with-emojis.ts-2.ts.mdx
@@ -0,0 +1,31 @@
+```ts
+// Button.stories.ts
+
+import Button from './Button.vue';
+
+import { Meta, StoryFn } from '@storybook/vue';
+
+export default {
+ /* 👇 The title prop is optional.
+ * See https://storybook.js.org/docs/vue/configure/overview#configure-story-loading
+ * to learn how to generate automatic titles
+ */
+ title: 'Button',
+ component: Button,
+} as Meta;
+
+export const Primary: StoryFn = () => ({
+ components: { Button },
+ template: '',
+});
+
+export const Secondary: StoryFn = () => ({
+ components: { Button },
+ template: '',
+});
+
+export const Tertiary: StoryFn = () => ({
+ components: { Button },
+ template: '',
+});
+```
\ No newline at end of file
diff --git a/docs/snippets/vue/button-story-with-emojis.ts-3.ts.mdx b/docs/snippets/vue/button-story-with-emojis.ts-3.ts.mdx
new file mode 100644
index 000000000000..b292bb311fff
--- /dev/null
+++ b/docs/snippets/vue/button-story-with-emojis.ts-3.ts.mdx
@@ -0,0 +1,31 @@
+```ts
+// Button.stories.ts
+
+import Button from './Button.vue';
+
+import { Meta, StoryFn } from '@storybook/vue3';
+
+export default {
+ /* 👇 The title prop is optional.
+ * See https://storybook.js.org/docs/vue/configure/overview#configure-story-loading
+ * to learn how to generate automatic titles
+ */
+ title: 'Button',
+ component: Button,
+} as Meta;
+
+export const Primary: StoryFn = () => ({
+ components: { Button },
+ template: '',
+});
+
+export const Secondary: StoryFn = () => ({
+ components: { Button },
+ template: '',
+});
+
+export const Tertiary: StoryFn = () => ({
+ components: { Button },
+ template: '',
+});
+```
\ No newline at end of file
diff --git a/docs/snippets/vue/button-story.ts-2.ts.mdx b/docs/snippets/vue/button-story.ts-2.ts.mdx
new file mode 100644
index 000000000000..38643023a710
--- /dev/null
+++ b/docs/snippets/vue/button-story.ts-2.ts.mdx
@@ -0,0 +1,21 @@
+```ts
+// Button.stories.ts
+
+import Button from './Button.vue';
+
+import { Meta, StoryFn } from '@storybook/vue';
+
+export default {
+ /* 👇 The title prop is optional.
+ * See https://storybook.js.org/docs/vue/configure/overview#configure-story-loading
+ * to learn how to generate automatic titles
+ */
+ title: 'Button',
+ component: Button,
+} as Meta;
+
+export const Primary: StoryFn = () => ({
+ components: { Button },
+ template: '',
+});
+```
\ No newline at end of file
diff --git a/docs/snippets/vue/button-story.ts-3.ts.mdx b/docs/snippets/vue/button-story.ts-3.ts.mdx
new file mode 100644
index 000000000000..813792649c3d
--- /dev/null
+++ b/docs/snippets/vue/button-story.ts-3.ts.mdx
@@ -0,0 +1,21 @@
+```ts
+// Button.stories.ts
+
+import Button from './Button.vue';
+
+import { Meta, StoryFn } from '@storybook/vue3';
+
+export default {
+ /* 👇 The title prop is optional.
+ * See https://storybook.js.org/docs/vue/configure/overview#configure-story-loading
+ * to learn how to generate automatic titles
+ */
+ title: 'Button',
+ component: Button,
+} as Meta;
+
+export const Primary: StoryFn = () => ({
+ components: { Button },
+ template: '',
+});
+```
\ No newline at end of file
diff --git a/docs/snippets/vue/component-story-figma-integration.js.mdx b/docs/snippets/vue/component-story-figma-integration.js.mdx
new file mode 100644
index 000000000000..c11f6fc3654b
--- /dev/null
+++ b/docs/snippets/vue/component-story-figma-integration.js.mdx
@@ -0,0 +1,28 @@
+```js
+// MyComponent.stories.js
+
+import { withDesign } from 'storybook-addon-designs';
+
+import MyComponent from './MyComponent.vue';
+
+// More on default export: https://storybook.js.org/docs/vue/writing-stories/introduction#default-export
+export default {
+ title: 'FigmaExample',
+ component: MyComponent,
+ decorators: [withDesign],
+};
+
+// More on component templates: https://storybook.js.org/docs/vue/writing-stories/introduction#using-args
+const Template = () => ({
+ components: { MyComponent },
+ template: '',
+});
+
+export const Example = Template.bind({});
+Example.parameters = {
+ design: {
+ type: 'figma',
+ url: 'https://www.figma.com/file/Sample-File',
+ },
+};
+```
\ No newline at end of file
diff --git a/docs/snippets/vue/component-story-figma-integration.mdx.mdx b/docs/snippets/vue/component-story-figma-integration.mdx.mdx
new file mode 100644
index 000000000000..a75e89528830
--- /dev/null
+++ b/docs/snippets/vue/component-story-figma-integration.mdx.mdx
@@ -0,0 +1,31 @@
+```md
+
+
+import { Canvas, Meta, Story } from '@storybook/addon-docs';
+
+import { withDesign } from 'storybook-addon-designs';
+
+import MyComponent from './MyComponent.vue';
+
+
+
+export const Template = (args) => ({
+ // Components used in your story `template` are defined in the `components` object
+ components: { MyComponent },
+ template: 'MyComponent />',
+});
+
+
+```
\ No newline at end of file
diff --git a/docs/snippets/vue/component-story-figma-integration.ts.mdx b/docs/snippets/vue/component-story-figma-integration.ts.mdx
new file mode 100644
index 000000000000..0bacfcc5b3b3
--- /dev/null
+++ b/docs/snippets/vue/component-story-figma-integration.ts.mdx
@@ -0,0 +1,30 @@
+```ts
+// MyComponent.stories.ts
+
+import { Meta, StoryFn } from '@storybook/vue'; // For Vue 3 use import { Meta, Story } from '@storybook/vue3';
+
+import { withDesign } from 'storybook-addon-designs';
+
+import MyComponent from './MyComponent.vue';
+
+// More on default export: https://storybook.js.org/docs/vue/writing-stories/introduction#default-export
+export default {
+ title: 'FigmaExample',
+ component: MyComponent,
+ decorators: [withDesign],
+} as Meta;
+
+// More on component templates: https://storybook.js.org/docs/vue/writing-stories/introduction#using-args
+const Template: StoryFn = () => ({
+ components: { MyComponent },
+ template: '',
+});
+
+export const Example = Template.bind({});
+Example.parameters = {
+ design: {
+ type: 'figma',
+ url: 'https://www.figma.com/file/Sample-File',
+ },
+};
+```
\ No newline at end of file
diff --git a/docs/snippets/vue/component-story-with-accessibility.mdx-3.mdx.mdx b/docs/snippets/vue/component-story-with-accessibility.mdx-3.mdx.mdx
index 1fdcc4039747..2b891162b950 100644
--- a/docs/snippets/vue/component-story-with-accessibility.mdx-3.mdx.mdx
+++ b/docs/snippets/vue/component-story-with-accessibility.mdx-3.mdx.mdx
@@ -46,4 +46,4 @@ export const Template = (args) => ({
}}>
{Template.bind({})}
-```
+```
\ No newline at end of file
diff --git a/docs/snippets/vue/list-story-expanded.ts-2.ts.mdx b/docs/snippets/vue/list-story-expanded.ts-2.ts.mdx
new file mode 100644
index 000000000000..429fe6f3fb76
--- /dev/null
+++ b/docs/snippets/vue/list-story-expanded.ts-2.ts.mdx
@@ -0,0 +1,41 @@
+```ts
+// List.stories.ts
+
+import List from './ListComponent.vue';
+import ListItem from './ListItem.vue';
+
+import { Meta, StoryFn } from '@storybook/vue';
+
+export default {
+ /* 👇 The title prop is optional.
+ * See https://storybook.js.org/docs/vue/configure/overview#configure-story-loading
+ * to learn how to generate automatic titles
+ */
+ title: 'List',
+ component: List,
+} as Meta;
+
+export const Empty: StoryFn = (args, { argTypes }) => ({
+ components: { List },
+ props: Object.keys(argTypes),
+ template: '',
+});
+
+export const OneItem: StoryFn = (args, { argTypes }) => ({
+ components: { List, ListItem },
+ props: Object.keys(argTypes),
+ template: '',
+});
+
+export const ManyItems: StoryFn = (args, { argTypes }) => ({
+ components: { List, ListItem },
+ props: Object.keys(argTypes),
+ template: `
+
+
+
+
+
+ `,
+});
+```
\ No newline at end of file
diff --git a/docs/snippets/vue/list-story-expanded.ts-3.ts.mdx b/docs/snippets/vue/list-story-expanded.ts-3.ts.mdx
new file mode 100644
index 000000000000..74c9ea1a72b4
--- /dev/null
+++ b/docs/snippets/vue/list-story-expanded.ts-3.ts.mdx
@@ -0,0 +1,47 @@
+```ts
+// List.stories.ts
+
+import List from './ListComponent.vue';
+import ListItem from './ListItem.vue';
+
+import { Meta, StoryFn } from '@storybook/vue3';
+
+export default {
+ /* 👇 The title prop is optional.
+ * See https://storybook.js.org/docs/vue/configure/overview#configure-story-loading
+ * to learn how to generate automatic titles
+ */
+ title: 'List',
+ component: List,
+} as Meta;
+
+export const Empty: StoryFn = (args) => ({
+ components: { List },
+ setup() {
+ return { args };
+ },
+ template: '',
+});
+
+export const OneItem: StoryFn = (args) => ({
+ components: { List, ListItem },
+ setup() {
+ return { args };
+ },
+ template: '',
+});
+
+export const ManyItems: StoryFn = (args) => ({
+ components: { List, ListItem },
+ setup() {
+ return { args };
+ },
+ template: `
+
+
+
+
+
+ `,
+});
+```
\ No newline at end of file
diff --git a/docs/snippets/vue/list-story-reuse-data.ts-2.ts.mdx b/docs/snippets/vue/list-story-reuse-data.ts-2.ts.mdx
new file mode 100644
index 000000000000..225252c1575b
--- /dev/null
+++ b/docs/snippets/vue/list-story-reuse-data.ts-2.ts.mdx
@@ -0,0 +1,36 @@
+```ts
+// List.stories.ts
+
+import List from './ListComponent.vue';
+import ListItem from './ListItem.vue';
+
+import { Meta, StoryFn } from '@storybook/vue';
+
+//👇 We're importing the necessary stories from ListItem
+import { Selected, Unselected } from './ListItem.stories';
+
+export default {
+ /* 👇 The title prop is optional.
+ * See https://storybook.js.org/docs/vue/configure/overview#configure-story-loading
+ * to learn how to generate automatic titles
+ */
+ title: 'List',
+ component: List,
+} as Meta;
+
+export const ManyItems: StoryFn = (args, { argTypes }) => ({
+ components: { List, ListItem },
+ props: Object.keys(argTypes),
+ template: `
+
+
+
+
+ `,
+});
+
+ManyItems.args = {
+ Selected: Selected.args.isSelected,
+ Unselected: Unselected.args.isSelected,
+};
+```
\ No newline at end of file
diff --git a/docs/snippets/vue/list-story-reuse-data.ts-3.ts.mdx b/docs/snippets/vue/list-story-reuse-data.ts-3.ts.mdx
new file mode 100644
index 000000000000..ff0fe53148d8
--- /dev/null
+++ b/docs/snippets/vue/list-story-reuse-data.ts-3.ts.mdx
@@ -0,0 +1,38 @@
+```ts
+// List.stories.ts
+
+import List from './ListComponent.vue';
+import ListItem from './ListItem.vue';
+
+import { Meta, StoryFn } from '@storybook/vue3';
+
+//👇 We're importing the necessary stories from ListItem
+import { Selected, Unselected } from './ListItem.stories';
+
+export default {
+ /* 👇 The title prop is optional.
+ * See https://storybook.js.org/docs/vue/configure/overview#configure-story-loading
+ * to learn how to generate automatic titles
+ */
+ title: 'List',
+ component: List,
+} as Meta;
+
+export const ManyItems: StoryFn = (args) => ({
+ components: { List, ListItem },
+ setup() {
+ return { ...args };
+ },
+ template: `
+
+
+
+
+ `,
+});
+
+ManyItems.args = {
+ Selected: Selected.args.isSelected,
+ Unselected: Unselected.args.isSelected,
+};
+```
\ No newline at end of file
diff --git a/docs/snippets/vue/list-story-starter.ts-2.ts.mdx b/docs/snippets/vue/list-story-starter.ts-2.ts.mdx
new file mode 100644
index 000000000000..ff6266df96ac
--- /dev/null
+++ b/docs/snippets/vue/list-story-starter.ts-2.ts.mdx
@@ -0,0 +1,23 @@
+```ts
+// List.stories.ts
+
+import List from './ListComponent.vue';
+
+import { Meta, StoryFn } from '@storybook/vue';
+
+export default {
+ /* 👇 The title prop is optional.
+ * See https://storybook.js.org/docs/vue/configure/overview#configure-story-loading
+ * to learn how to generate automatic titles
+ */
+ title: 'List',
+ component: List,
+} as Meta;
+
+// Always an empty list, not super interesting
+const Template: StoryFn = (args, { argTypes }) => ({
+ components: { List },
+ props: Object.keys(argTypes),
+ template: '',
+});
+```
\ No newline at end of file
diff --git a/docs/snippets/vue/list-story-starter.ts-3.ts.mdx b/docs/snippets/vue/list-story-starter.ts-3.ts.mdx
new file mode 100644
index 000000000000..c70cddcd7b08
--- /dev/null
+++ b/docs/snippets/vue/list-story-starter.ts-3.ts.mdx
@@ -0,0 +1,25 @@
+```ts
+// List.stories.ts
+
+import List from './ListComponent.vue';
+
+import { Meta, StoryFn } from '@storybook/vue3';
+
+export default {
+ /* 👇 The title prop is optional.
+ * See https://storybook.js.org/docs/vue/configure/overview#configure-story-loading
+ * to learn how to generate automatic titles
+ */
+ title: 'List',
+ component: List,
+} as Meta;
+
+// Always an empty list, not super interesting
+const Template: StoryFn = (args) => ({
+ components: { List },
+ setup() {
+ return { args };
+ },
+ template: '',
+});
+```
\ No newline at end of file
diff --git a/docs/snippets/vue/login-form-with-play-function.2.js.mdx b/docs/snippets/vue/login-form-with-play-function.2.js.mdx
index 1e7b334e15d1..e82613674972 100644
--- a/docs/snippets/vue/login-form-with-play-function.2.js.mdx
+++ b/docs/snippets/vue/login-form-with-play-function.2.js.mdx
@@ -3,6 +3,8 @@
import { userEvent, within } from '@storybook/testing-library';
+import { expect } from '@storybook/jest';
+
import LoginForm from './LoginForm.vue';
export default {
@@ -14,7 +16,7 @@ export default {
component: LoginForm,
};
-export const Template = (args, { argTypes }) => ({
+const Template = (args, { argTypes }) => ({
components: { LoginForm },
props: Object.keys(argTypes),
template: ``,
@@ -27,14 +29,19 @@ FilledForm.play = async ({ canvasElement }) => {
// Starts querying the component from its root element
const canvas = within(canvasElement);
- await userEvent.type(canvas.getByTestId('email'), 'email@provider.com', {
- delay: 100,
- });
- await userEvent.type(canvas.getByTestId('password'), 'a-random-password', {
- delay: 100,
- });
+ // 👇 Simulate interactions with the component
+ await userEvent.type(canvas.getByTestId('email'), 'email@provider.com');
+
+ await userEvent.type(canvas.getByTestId('password'), 'a-random-password');
// See https://storybook.js.org/docs/vue/essentials/actions#automatically-matching-args to learn how to setup logging in the Actions panel
await userEvent.click(canvas.getByRole('button'));
+
+ // 👇 Assert DOM structure
+ await expect(
+ canvas.getByText(
+ 'Everything is perfect. Your account is ready and we should probably get you started!'
+ )
+ ).toBeInTheDocument();
};
```
\ No newline at end of file
diff --git a/docs/snippets/vue/login-form-with-play-function.3.js.mdx b/docs/snippets/vue/login-form-with-play-function.3.js.mdx
index 223a8de39411..19c529bd529a 100644
--- a/docs/snippets/vue/login-form-with-play-function.3.js.mdx
+++ b/docs/snippets/vue/login-form-with-play-function.3.js.mdx
@@ -3,6 +3,8 @@
import { userEvent, within } from '@storybook/testing-library';
+import { expect } from '@storybook/jest';
+
import LoginForm from './LoginForm.vue';
export default {
@@ -29,14 +31,19 @@ FilledForm.play = async ({ canvasElement }) => {
// Starts querying the component from its root element
const canvas = within(canvasElement);
- await userEvent.type(canvas.getByTestId('email'), 'email@provider.com', {
- delay: 100,
- });
- await userEvent.type(canvas.getByTestId('password'), 'a-random-password', {
- delay: 100,
- });
+ // 👇 Simulate interactions with the component
+ await userEvent.type(canvas.getByTestId('email'), 'email@provider.com');
+
+ await userEvent.type(canvas.getByTestId('password'), 'a-random-password');
// See https://storybook.js.org/docs/vue/essentials/actions#automatically-matching-args to learn how to setup logging in the Actions panel
await userEvent.click(canvas.getByRole('button'));
+
+ // 👇 Assert DOM structure
+ await expect(
+ canvas.getByText(
+ 'Everything is perfect. Your account is ready and we should probably get you started!'
+ )
+ ).toBeInTheDocument();
};
```
\ No newline at end of file
diff --git a/docs/snippets/vue/login-form-with-play-function.mdx-2.mdx b/docs/snippets/vue/login-form-with-play-function.mdx-2.mdx
index 6ce5d75c93a0..c1e887057671 100644
--- a/docs/snippets/vue/login-form-with-play-function.mdx-2.mdx
+++ b/docs/snippets/vue/login-form-with-play-function.mdx-2.mdx
@@ -5,6 +5,8 @@ import { Canvas, Meta, Story } from '@storybook/addon-docs';
import { userEvent, within } from '@storybook/testing-library';
+import { expect } from '@storybook/jest';
+
import LoginForm from './LoginForm.vue';
@@ -17,7 +19,7 @@ export const Template = (args, { argTypes }) => ({
\ No newline at end of file
+
diff --git a/docs/writing-stories/play-function.md b/docs/writing-stories/play-function.md
index 4538ffa37318..cef5c1be9920 100644
--- a/docs/writing-stories/play-function.md
+++ b/docs/writing-stories/play-function.md
@@ -6,7 +6,7 @@ title: 'Play function'
## Setup the interactions addon
-We recommend installing Storybook's [`addon-interactions`](/addons/@storybook/addon-interactions/) before you start writing stories with the `play` function. It's the perfect complement for it, including a handy set of UI controls to allow you command over the execution flow. At any time, you can pause, resume, rewind, and step through each interaction. Also providing you with an easy-to-use debugger for potential issues.
+We recommend installing Storybook's [`addon-interactions`](https://storybook.js.org/addons/@storybook/addon-interactions) before you start writing stories with the `play` function. It's the perfect complement for it, including a handy set of UI controls to allow you command over the execution flow. At any time, you can pause, resume, rewind, and step through each interaction. Also providing you with an easy-to-use debugger for potential issues.
Run the following command to install the addon and the required dependencies.
@@ -210,4 +210,4 @@ By default, each interaction you write inside your `play` function will be execu
-Applying these changes to your stories can provide a performance boost and improved error handling with [`addon-interactions`](/addons/@storybook/addon-interactions/).
+Applying these changes to your stories can provide a performance boost and improved error handling with [`addon-interactions`](https://storybook.js.org/addons/@storybook/addon-interactions).
diff --git a/docs/writing-tests/accessibility-testing.md b/docs/writing-tests/accessibility-testing.md
index cc14cd06abef..9dcae06f0404 100644
--- a/docs/writing-tests/accessibility-testing.md
+++ b/docs/writing-tests/accessibility-testing.md
@@ -6,29 +6,37 @@ Accessibility is the practice of making websites inclusive to all. That means su
Accessibility tests audit the rendered DOM against a set of heuristics based on [WCAG](https://www.w3.org/WAI/standards-guidelines/wcag/) rules and other industry-accepted best practices. They act as the first line of QA to catch blatant accessibility violations.
-Storybook’s official [a11y addon](https://storybook.js.org/addons/@storybook/addon-a11y) runs accessibility audits while you’re developing components to give you a fast feedback loop. It's powered by Deque's [axe-core](https://github.com/dequelabs/axe-core), which automatically catches up to [57% of WCAG issues](https://www.deque.com/blog/automated-testing-study-identifies-57-percent-of-digital-accessibility-issues/).
-
-## Setup a11y addon
+## Accessibility checks with a11y addon
+
+Storybook provides an official [a11y addon](https://storybook.js.org/addons/@storybook/addon-a11y). Powered by Deque's [axe-core](https://github.com/dequelabs/axe-core), which automatically catches up to [57% of WCAG issues](https://www.deque.com/blog/automated-testing-study-identifies-57-percent-of-digital-accessibility-issues/).
+
+### Set up the a11y addon
+
+If you want to check accessibility for your stories using the [addon](https://storybook.js.org/addons/@storybook/addon-a11y/), you'll need to install it and add it to your Storybook.
-To enable accessibility testing with Storybook, you'll need to install the [`@storybook/addon-a11y`](https://storybook.js.org/addons/@storybook/addon-a11y/) addon. Run the following command:
+Run the following command to install the addon.
-```shell
-# With npm
-npm install @storybook/addon-a11y --save-dev
+
+
+
-# With yarn
-yarn add --dev @storybook/addon-a11y
-```
+
-Update your Storybook configuration (in `.storybook/main.js`) to include the accessibility addon:
+Update your Storybook configuration (in `.storybook/main.js|ts`) to include the accessibility addon.
@@ -73,7 +81,7 @@ Cycling through both stories, you will see that the `Inaccessible` story contain
### Configure
-Out of the box, Storybook's accessibility addon includes a set of accessibility rules that cover most issues. You can also fine tune the [addon configuration](https://github.com/storybookjs/storybook/tree/next/addons/a11y#parameters) or override [Axe's ruleset](https://github.com/storybookjs/storybook/tree/next/addons/a11y#handling-failing-rules) to best suit your needs.
+Out of the box, Storybook's accessibility addon includes a set of accessibility rules that cover most issues. You can also fine-tune the [addon configuration](https://github.com/storybookjs/storybook/tree/next/addons/a11y#parameters) or override [Axe's ruleset](https://github.com/storybookjs/storybook/tree/next/addons/a11y#handling-failing-rules) to best suit your needs.
#### Global a11y configuration
@@ -148,37 +156,65 @@ Disable accessibility testing for stories or components by adding the following
-## Automate accessibility tests with Jest
+## Automate accessibility tests with test runner
+
+The most accurate way to check accessibility is manually on real devices. However, you can use automated tools to catch common accessibility issues. For example, [Axe](https://www.deque.com/axe/), on average, catches upwards to [57% of WCAG issues](https://www.deque.com/blog/automated-testing-study-identifies-57-percent-of-digital-accessibility-issues/) automatically.
+
+These tools work by auditing the rendered DOM against heuristics based on [WCAG](https://www.w3.org/WAI/standards-guidelines/wcag/) rules and other industry-accepted best practices. You can then integrate these tools into your test automation pipeline using the Storybook [test runner](./test-runner.md#test-hook-api-experimental) and [axe-playwright](https://github.com/abhinaba-ghosh/axe-playwright).
+
+### Setup
-Accessibility testing with Storybook shortens the feedback loop which means you fix issues faster. Reuse stories in a Jest test and run an accessibility audit on them using the the [jest-axe integration](https://github.com/nickcolley/jest-axe). That also unlocks the ability to integrate accessibility tests into your functional testing pipeline.
+To enable accessibility testing with the test runner, you will need to take additional steps to set it up properly. Detailed below is our recommendation to configure and execute them.
-For example, include the following test file to run an accessibility test on a story:
+Run the following command to install the required dependencies.
-When you execute your test script, it will run the accessibility audit along with any interaction tests you might have.
+Add a new [configuration file](./test-runner.md#test-hook-api-experimental) inside your Storybook directory with the following inside:
+
+
+
+
+
+
+
+
+
+💡 `preRender` and `postRender` are convenient hooks that allow you to extend the test runner's default configuration. They are **experimental** and subject to changes. Read more about them [here](./test-runner.md#test-hook-api-experimental).
+
+
+
+When you execute the test runner (for example, with `yarn test-storybook`), it will run the accessibility audit and any [interaction tests](./interaction-testing.md) you might have configured for each component story.
+
+It starts checking for issues by traversing the DOM tree starting from the story's root element and generates a detailed report based on the issues it encountered.
-
+
---
#### What’s the difference between browser-based and linter-based accessibility tests?
-Browser-based accessibility tests, like found in Storybook, evaluates the rendered DOM because that gives you the highest accuracy. Auditing code that hasn't been compiled yet is one step removed from the real thing so you won't catch everything the user might experience.
+Browser-based accessibility tests, like those found in Storybook, evaluate the rendered DOM because that gives you the highest accuracy. Auditing code that hasn't been compiled yet is one step removed from the real thing, so you won't catch everything the user might experience.
#### Learn about other UI tests
+- [Test runner](./test-runner.md) to automate test execution
- [Visual tests](./visual-testing.md) for appearance
- Accessibility tests for accessibility
- [Interaction tests](./interaction-testing.md) for user behavior simulation
- [Snapshot tests](./snapshot-testing.md) for rendering errors and warnings
-- [Import stories in other tests](./importing-stories-in-tests.md) for other tools
+- [Import stories in other tests](./importing-stories-in-tests.md) for other tools
\ No newline at end of file
diff --git a/docs/writing-tests/addon-interaction-example-optimized.mp4 b/docs/writing-tests/addon-interaction-example-optimized.mp4
index dbbafa57d051..c2b34091be68 100644
Binary files a/docs/writing-tests/addon-interaction-example-optimized.mp4 and b/docs/writing-tests/addon-interaction-example-optimized.mp4 differ
diff --git a/docs/writing-tests/addon-interactions-playback-controls-optimized.mp4 b/docs/writing-tests/addon-interactions-playback-controls-optimized.mp4
new file mode 100644
index 000000000000..2afbd10562bb
Binary files /dev/null and b/docs/writing-tests/addon-interactions-playback-controls-optimized.mp4 differ
diff --git a/docs/writing-tests/importing-stories-in-tests.md b/docs/writing-tests/importing-stories-in-tests.md
index 1f3caa31803b..d076be34b058 100644
--- a/docs/writing-tests/importing-stories-in-tests.md
+++ b/docs/writing-tests/importing-stories-in-tests.md
@@ -21,13 +21,22 @@ Storybook has test addons for core frameworks React, Vue (2,3), and Angular. Thi
Run the following command to add Storybook's testing addon into your environment:
-```shell
-# With npm, don't forget to select only your framework
-npm install --save-dev @storybook/testing-( react | vue | vue3 | angular)
+
+
+
-# With yarn, don't forget to select only your framework
-yarn add --dev @storybook/testing-( react | vue | vue3 | angular )
-```
+
+
+
+
+💡 When running the command to install the addon, don't forget to select **only** your framework.
+
+
### Optional configuration
@@ -60,7 +69,7 @@ Update your test script to include the configuration file:
## Example with Testing Library
-[Testing Library](https://testing-library.com/) is a suite of helper libraries for browser-based interaction tests. With [Component Story Format](../api/csf.md), your stories are reusable with Testing Library. Each named export (i.e., a story) is renderable within your testing setup.
+[Testing Library](https://testing-library.com/) is a suite of helper libraries for browser-based interaction tests. With [Component Story Format](../api/csf.md), your stories are reusable with Testing Library. Each named export (story) is renderable within your testing setup.
@@ -88,7 +97,7 @@ Once the test runs, it loads the story and renders it. [Testing Library](https:/
## Example with Cypress
-[Cypress](https://www.cypress.io/) is an end-to-end testing framework. It enables you to test a complete instance of your application by simulating user behavior. With Component Story Format, your stories are reusable with Cypress. Each named export (i.e., a story) is renderable within your testing setup.
+[Cypress](https://www.cypress.io/) is an end-to-end testing framework. It enables you to test a complete instance of your application by simulating user behavior. With Component Story Format, your stories are reusable with Cypress. Each named export (in other words, a story) is renderable within your testing setup.
An example of an end-to-end test with Cypress and Storybook is testing a login component for the correct inputs. For example, if you had the following story:
@@ -130,7 +139,7 @@ When Cypress runs your test, it loads Storybook's isolated iframe and checks if
## Example with Playwright
-[Playwright](https://playwright.dev/) is a browser automation tool and end-to-end testing framework from Microsoft. It offers cross-browser automation, mobile testing with device emulation, and headless testing. With Component Story Format, your stories are reusable with Playwright. Each named export (i.e., a story) is renderable within your testing setup.
+[Playwright](https://playwright.dev/) is a browser automation tool and end-to-end testing framework from Microsoft. It offers cross-browser automation, mobile testing with device emulation, and headless testing. With Component Story Format, your stories are reusable with Playwright. Each named export (in other words, a story) is renderable within your testing setup.
A real-life scenario of user flow testing with Playwright would be how to test a login form for validity. For example, if you had the following story already created:
@@ -171,8 +180,9 @@ Once you execute Playwright, it opens a new browser window, loads Storybook's is
#### Learn about other UI tests
+- [Test runner](./test-runner.md) to automate test execution
- [Visual tests](./visual-testing.md) for appearance
- [Accessibility tests](./accessibility-testing.md) for accessibility
- [Interaction tests](./interaction-testing.md) for user behavior simulation
- [Snapshot tests](./snapshot-testing.md) for rendering errors and warnings
-- Import stories in other tests for other tools
+- Import stories in other tests for other tools
\ No newline at end of file
diff --git a/docs/writing-tests/interaction-testing.md b/docs/writing-tests/interaction-testing.md
index 2fb63362a629..1b86c56dfc01 100644
--- a/docs/writing-tests/interaction-testing.md
+++ b/docs/writing-tests/interaction-testing.md
@@ -6,17 +6,51 @@ As you build more complex UIs like pages, components become responsible for more
In a nutshell, you start by supplying the appropriate props for the initial state of a component. Then simulate user behavior such as clicks and form entries. Finally, check whether the UI and component state update correctly.
+In Storybook, this familiar workflow happens in your browser. That makes it easier to debug failures because you're running tests in the same environment as you develop components: the browser.
+
-## Setup interactions addon
+## How does component testing in Storybook work?
-You can set up interaction testing in Storybook using the `play` function and [`@storybook/addon-interactions`](https://storybook.js.org/addons/@storybook/addon-interactions/).
+You start by writing a [**story**](../writing-stories/introduction.md) to set up the component's initial state. Then simulate user behavior using the **play** function. Finally, use the **test-runner** to confirm that the component renders correctly and that your interaction tests with the **play** function pass. Additionally, you can automate test execution via the [command line](./test-runner.md#cli-options) or in your [CI environment](./test-runner.md#set-up-ci-to-run-tests).
- The [`play`](../writing-stories/play-function.md) function is a small snippet of code that runs after a story finishes rendering. You can use this to test user workflows.
+- The test is written using Storybook-instrumented versions of [Jest](https://jestjs.io/) and [Testing Library](https://testing-library.com/).
+- [`@storybook/addon-interactions`](https://storybook.js.org/addons/@storybook/addon-interactions/) visualizes the test in Storybook and provides a playback interface for convenient browser-based debugging.
+- [`@storybook/test-runner`](https://github.com/storybookjs/test-runner) is a standalone utility—powered by [Jest](https://jestjs.io/) and [Playwright](https://playwright.dev/)—that executes all of your interactions tests and catches broken stories.
+
+## Set up the interactions addon
+
+To enable interaction testing with Storybook, you'll need to take additional steps to set it up properly. We recommend you go through the [test runner documentation](./test-runner.md) before proceeding with the rest of the required configuration.
+
+Run the following command to install the interactions addon and related dependencies.
+
+
+
+
+
+
+
+Update your Storybook configuration (in `.storybook/main.js|ts`) to include the interactions addon and enable playback controls for debugging.
+
+
+
+
-- [`@storybook/addon-interactions`](/addons/@storybook/addon-interactions/) includes helper utilities and a playback interface that simulates user behavior in the browser. It’s powered Testing Library and includes convenient instrumentation for debugging.
+
+
+## Write an interaction test
-Here's an example of how to set up interaction testing in Storybook with the `play` function:
+The test itself is defined inside a `play` function connected to a story. Here's an example of how to set up an interaction test with Storybook and the `play` function:
@@ -49,7 +83,7 @@ Once the story loads in the UI, it simulates the user's behavior and verifies th
## API for user-events
-Under the hood, Storybook’s interaction addon mirrors Testing Library’s `user-events` API. If you’re familiar with [Testing Library](https://testing-library.com/) you should be at home in Storybook.
+Under the hood, Storybook’s interaction addon mirrors Testing Library’s [`user-events`](https://testing-library.com/docs/user-event/intro/) API. If you’re familiar with [Testing Library](https://testing-library.com/), you should be at home in Storybook.
Below is an abridged API for user-event. For more, check out the [official user-event docs](https://testing-library.com/docs/ecosystem-user-event/).
@@ -65,6 +99,17 @@ Below is an abridged API for user-event. For more, check out the [official user-
| `type` | Writes text inside inputs, or textareas `userEvent.type(await within(canvasElement).getByRole('my-input'),'Some text');` |
| `unhover` | Unhovers out of element `userEvent.unhover(await within(canvasElement).getByLabelText(/Example/i));` |
+### Interactive debugger
+
+If you check your interactions panel, you'll see the step-by-step flow. It also offers a handy set of UI controls to pause, resume, rewind, and step through each interaction.
+
+
+
### Permalinks for reproductions
The `play` function is executed after the story is rendered. If there’s an error, it’ll be shown in the interaction addon panel to help with debugging.
@@ -75,6 +120,33 @@ Since Storybook is a webapp, anyone with the URL can reproduce the error with th
Streamline interaction testing further by automatically [publishing Storybook](../sharing/publish-storybook.md) in pull requests. That gives teams a universal reference point to test and debug stories.
+## Execute tests with the test-runner
+
+Storybook only runs the interaction test when you're viewing a story. Therefore, you'd have to go through each story to run all your checks. As your Storybook grows, it becomes unrealistic to review each change manually. Storybook [test-runner](https://github.com/storybookjs/test-runner) automates the process by running all tests for you. To execute the test-runner, open a new terminal window and run the following command:
+
+
+
+
+
+
+
+
+
+
+
+💡 If you need, you can provide additional flags to the test-runner. Read the [documentation](./test-runner.md#cli-options) to learn more.
+
+
+
+## Automate
+
+Once you're ready to push your code into a pull request, you'll want to automatically run all your checks using a Continuous Integration (CI) service before merging it. Read our [documentation](./test-runner.md#set-up-ci-to-run-tests) for a detailed guide on setting up a CI environment to run tests.
+
---
#### What’s the difference between interaction tests and visual tests?
@@ -83,8 +155,9 @@ Interaction tests can be expensive to maintain when applied wholesale to every c
#### Learn about other UI tests
+- [Test runner](./test-runner.md) to automate test execution
- [Visual tests](./visual-testing.md) for appearance
- [Accessibility tests](accessibility-testing.md) for accessibility
- Interaction tests for user behavior simulation
- [Snapshot tests](./snapshot-testing.md) for rendering errors and warnings
-- [Import stories in other tests](./importing-stories-in-tests.md) for other tools
+- [Import stories in other tests](./importing-stories-in-tests.md) for other tools
\ No newline at end of file
diff --git a/docs/writing-tests/introduction.md b/docs/writing-tests/introduction.md
index 776ed827f50d..334a684c9d2d 100644
--- a/docs/writing-tests/introduction.md
+++ b/docs/writing-tests/introduction.md
@@ -10,10 +10,13 @@ That means stories are a pragmatic starting point for your UI testing strategy.
The simplest testing method is manual “spot checking”. You run Storybook locally, then eyeball every story to verify its appearance and behavior. [Publish](../sharing/publish-storybook.md) your Storybook online to share reproductions and get teammates involved.
-Storybook also comes with tools, test runners, and handy integrations with the larger JavaScript ecosystem to expand your UI test coverage. These docs detail how you can use Storybook for UI testing.
+To test a component in isolation, you often have to mock data, dependencies, or even network requests. Check out our guide on [mocking in Storybook](../writing-stories/build-pages-with-storybook.md#mocking-connected-components) for more info.
+Storybook also comes with tools, [a test runner](./test-runner.md), and [handy integrations](./importing-stories-in-tests.md) with the larger JavaScript ecosystem to expand your UI test coverage. These docs detail how you can use Storybook for UI testing.
+
+- [**Test runner**](./test-runner.md) to automatically test your entire Storybook and catch broken stories.
- [**Visual tests**](./visual-testing.md) capture a screenshot of every story then compare it against baselines to detect appearance and integration issues
- [**Accessibility tests**](./accessibility-testing.md) catch usability issues related to visual, hearing, mobility, cognitive, speech, or neurological disabilities
- [**Interaction tests**](./interaction-testing.md) verify component functionality by simulating user behaviour, firing events, and ensuring that state is updated as expected
- [**Snapshot tests**](./snapshot-testing.md) detect changes in the rendered markup to surface rendering errors or warnings
-- [**Import stories in other tests**](./importing-stories-in-tests.md) to QA even more UI characteristics
+- [**Import stories in other tests**](./importing-stories-in-tests.md) to QA even more UI characteristics
\ No newline at end of file
diff --git a/docs/writing-tests/jest-accessibility-testing-optimized.png b/docs/writing-tests/jest-accessibility-testing-optimized.png
deleted file mode 100644
index b8f3925cb5d6..000000000000
Binary files a/docs/writing-tests/jest-accessibility-testing-optimized.png and /dev/null differ
diff --git a/docs/writing-tests/snapshot-testing.md b/docs/writing-tests/snapshot-testing.md
index 895b2ffa4b5a..242c1f00885f 100644
--- a/docs/writing-tests/snapshot-testing.md
+++ b/docs/writing-tests/snapshot-testing.md
@@ -64,7 +64,7 @@ npm i -D @storybook/addon-storyshots-puppeteer puppeteer
yarn add @storybook/addon-storyshots-puppeteer puppeteer
```
-Next, update your test file (e.g., `storybook.test.js`) to the following:
+Next, update your test file (for example, `storybook.test.js`) to the following:
@@ -110,8 +110,9 @@ Visual tests capture images of stories and compare them against image baselines.
#### Learn about other UI tests
+- [Test runner](./test-runner.md) to automate test execution
- [Visual tests](./visual-testing.md) for appearance
- [Accessibility tests](./accessibility-testing.md) for accessibility
- [Interaction tests](./interaction-testing.md) for user behavior simulation
- Snapshot tests for rendering errors and warnings
-- [Import stories in other tests](./importing-stories-in-tests.md) for other tools
+- [Import stories in other tests](./importing-stories-in-tests.md) for other tools
\ No newline at end of file
diff --git a/docs/writing-tests/storybook-interaction-test-runner-loginform-optimized.png b/docs/writing-tests/storybook-interaction-test-runner-loginform-optimized.png
new file mode 100644
index 000000000000..ce2f360da358
Binary files /dev/null and b/docs/writing-tests/storybook-interaction-test-runner-loginform-optimized.png differ
diff --git a/docs/writing-tests/test-runner-a11y-optimized.png b/docs/writing-tests/test-runner-a11y-optimized.png
new file mode 100644
index 000000000000..00a937460df2
Binary files /dev/null and b/docs/writing-tests/test-runner-a11y-optimized.png differ
diff --git a/docs/writing-tests/test-runner.md b/docs/writing-tests/test-runner.md
new file mode 100644
index 000000000000..5502adfbcd15
--- /dev/null
+++ b/docs/writing-tests/test-runner.md
@@ -0,0 +1,305 @@
+---
+title: 'Test runner'
+---
+
+Storybook test runner turns all of your stories into executable tests. It is powered by [Jest](https://jestjs.io/) and [Playwright](https://playwright.dev/).
+
+- For those [without a play function](../writing-stories/introduction.md): it verifies whether the story renders without any errors.
+- For those [with a play function](../writing-stories/play-function.md): it also checks for errors in the play function and that all assertions passed.
+
+These tests run in a live browser and can be executed via the [command line](#cli-options) or your [CI server](#set-up-ci-to-run-tests).
+
+## Setup
+
+The test-runner is a standalone, framework-agnostic utility that runs parallel to your Storybook. You will need to take some additional steps to set it up properly. Detailed below is our recommendation to configure and execute it.
+
+Run the following command to install it and the required dependencies.
+
+
+
+
+
+
+
+Update your `package.json` scripts and enable the test runner.
+
+```json
+{
+ "scripts": {
+ "test-storybook": "test-storybook"
+ }
+}
+```
+
+Start your Storybook with:
+
+
+
+
+
+
+
+
+💡 Storybook's test runner requires either a locally running Storybook instance or a published Storybook to run all the existing tests.
+
+
+Finally, open a new terminal window and run the test-runner with:
+
+
+
+
+
+
+
+## Configure
+
+Test runner offers zero-config support for Storybook. However, you can run `test-storybook --eject` for more fine-grained control. It generates a `test-runner-jest.config.js` file at the root of your project, which you can modify. Additionally, you can extend the generated configuration file and provide [testEnvironmentOptions](https://github.com/playwright-community/jest-playwright#configuration) as the test runner also uses [jest-playwright](https://github.com/playwright-community/jest-playwright) under the hood.
+
+### CLI Options
+
+The test-runner is powered by [Jest](https://jestjs.io/) and accepts a subset of its [CLI options](https://jestjs.io/docs/cli) (for example, `--watch`, `--maxWorkers`).
+If you're already using any of those flags in your project, you should be able to migrate them into Storybook's test-runner without any issues. Listed below are all the available flags and examples of using them.
+
+| Options | Description |
+| ------------------------------- | -------------------------------------------------------------------------------------------------------------------------------- |
+| `--help` | Output usage information `test-storybook --help` |
+| `-s`, `--stories-json` | Run in stories json mode. Automatically detected (requires a compatible Storybook) `test-storybook --stories-json` |
+| `--no-stories-json` | Disables stories json mode `test-storybook --no-stories-json` |
+| `-c`, `--config-dir [dir-name]` | Directory where to load Storybook configurations from `test-storybook -c .storybook` |
+| `--watch` | Run in watch mode `test-storybook --watch` |
+| `--url` | Define the URL to run tests in. Useful for custom Storybook URLs `test-storybook --url http://the-storybook-url-here.com` |
+| `--browsers` | Define browsers to run tests in. One or multiple of: chromium, firefox, webkit `test-storybook --browsers firefox chromium` |
+| `--maxWorkers [amount]` | Specifies the maximum number of workers the worker-pool will spawn for running tests `test-storybook --maxWorkers=2` |
+| `--no-cache` | Disable the cache `test-storybook --no-cache` |
+| `--clearCache` | Deletes the Jest cache directory and then exits without running tests `test-storybook --clearCache` |
+| `--verbose` | Display individual test results with the test suite hierarchy `test-storybook --verbose` |
+| `-u`, `--updateSnapshot` | Use this flag to re-record every snapshot that fails during this test run `test-storybook -u` |
+| `--eject` | Creates a local configuration file to override defaults of the test-runner `test-storybook --eject` |
+
+
+
+
+
+
+
+### Run tests against a deployed Storybook
+
+By default, the test-runner assumes that you're running it against a locally served Storybook on port `6006`. If you want to define a target URL to run against deployed Storybooks, you can use the `--url` flag or set the `TARGET_URL` environment variable. For example:
+
+
+
+
+
+
+
+## Set up CI to run tests
+
+You can also configure the test-runner to run tests on a CI environment. Documented below are some recipes to help you get started.
+
+### Run against deployed Storybooks via Github Actions deployment
+
+If you're publishing your Storybook with services such as [Vercel](https://vercel.com/) or [Netlify](https://www.netlify.com/), they emit a `deployment_status` event in GitHub Actions. You can use it and set the `deployment_status.target_url` as the `TARGET_URL` environment variable. Here's how:
+
+
+
+
+
+
+
+
+
+💡 The published Storybook must be publicly available for this example to work. We recommend running the test server using the recipe [below](#run-against-non-deployed-storybooks) if it requires authentication.
+
+
+
+### Run against non-deployed Storybooks
+
+You can use your CI provider (for example, [GitHub Actions](https://github.com/features/actions), [GitLab Pipelines](https://docs.gitlab.com/ee/ci/pipelines/), [CircleCI](https://circleci.com/)) to build and run the test runner against your built Storybook. Here's a recipe that relies on third-party libraries, that is to say, [concurrently](https://www.npmjs.com/package/concurrently), [http-server](https://www.npmjs.com/package/http-server), and [wait-on](https://www.npmjs.com/package/wait-on) to build Storybook and run tests with the test-runner.
+
+
+
+
+
+
+
+
+
+💡 By default Storybook outputs the [build](../sharing/publish-storybook.md#build-storybook-as-a-static-web-application) to the `storybook-static` directory. If you're using a different build directory, you'll need to adjust the recipe accordingly.
+
+
+
+### What's the difference between Chromatic and Test runner?
+
+The test-runner is a generic testing tool that can run locally or on CI and be configured or extended to run all kinds of tests.
+
+[Chromatic](https://www.chromatic.com/) is a cloud-based service that runs [visual](./visual-testing.md) and [interaction tests](./interaction-testing.md) (and soon accessibility tests) without setting up the test runner. It also syncs with your git provider and manages access control for private projects.
+
+However, you might want to pair the test runner and Chromatic in some cases.
+
+- Use it locally and Chromatic on your CI.
+- Use Chromatic for visual and interaction tests and run other custom tests using the test runner.
+
+## Advanced configuration
+
+### Test hook API (experimental)
+
+The test-runner renders a story and executes its [play function](../writing-stories/play-function.md) if one exists. However, certain behaviors are impossible to achieve via the play function, which executes in the browser. For example, if you want the test-runner to take visual snapshots for you, this is possible via Playwright/Jest but must be executed in Node.
+
+The test-runner exports test hooks that can be overridden globally to enable use cases like visual or DOM snapshots. These hooks give you access to the test lifecycle _before_ and _after_ the story is rendered.
+Listed below are the available hooks and an overview of how to use them.
+
+| Hook | Description |
+| ------------ | ----------------------------------------------------------------------------- |
+| `setup` | Executes once before all the tests run `setup() {}` |
+| `preRender` | Executes before a story is rendered `async preRender(page, context) {}` |
+| `postRender` | Executes after the story is rendered `async postRender(page, context) {}` |
+
+
+
+💡 These test hooks are experimental and may be subject to breaking changes. We encourage you to test as much as possible within the story's [play function](../writing-stories/play-function.md).
+
+
+
+To enable the hooks API, you'll need to add a new configuration file inside your Storybook directory and set them up as follows:
+
+
+
+
+
+
+
+
+
+💡 Except for the `setup` function, all other functions run asynchronously. Both `preRender` and `postRender` functions include two additional arguments, a [Playwright page](https://playwright.dev/docs/pages) and a context object which contains the `id`, `title`, and the `name` of the story.
+
+
+
+When the test-runner executes, your existing tests will go through the following lifecycle:
+
+- The `setup` function is executed before all the tests run.
+- The context object is generated containing the required information.
+- Playwright navigates to the story's page.
+- The `preRender` function is executed.
+- The story is rendered, and any existing `play` functions are executed.
+- The `postRender` function is executed.
+
+### Stories.json mode
+
+The test-runner transforms your story files into tests when testing a local Storybook. For a remote Storybook, it uses the Storybook's [stories.json](../configure/overview.md#feature-flags) file (a static index of all the stories) to run the tests.
+
+#### Why?
+
+Suppose you run into a situation where the local and remote Storybooks appear out of sync, or you might not even have access to the code. In that case, the `stories.json` file is guaranteed to be the most accurate representation of the deployed Storybook you are testing. To test a local Storybook using this feature, use the `--stories-json` flag as follows:
+
+
+
+
+
+
+
+
+
+💡 The `stories.json` mode is not compatible with watch mode.
+
+
+
+If you need to disable it, use the `--no-stories-json` flag:
+
+
+
+
+
+
+
+#### How do I check if my Storybook has a `stories.json` file?
+
+Stories.json mode requires a `stories.json` file. Open a browser window and navigate to your deployed Storybook instance (for example, `https://your-storybook-url-here.com/stories.json`). You should see a JSON file that starts with a `"v": 3` key, immediately followed by another key called "stories", which contains a map of story IDs to JSON objects. If that is the case, your Storybook supports [stories.json mode](../configure/overview.md#feature-flags).
+
+---
+
+## Troubleshooting
+
+### The test runner seems flaky and keeps timing out
+
+If your tests time out with the following message:
+
+```shell
+Timeout - Async callback was not invoked within the 15000 ms timeout specified by jest.setTimeout
+```
+
+It might be that Playwright couldn't handle testing the number of stories you have in your project. Perhaps you have a large number of stories, or your CI environment has a really low RAM configuration. In such cases, you should limit the number of workers that run in parallel by adjusting your command as follows:
+
+```json
+{
+ "scripts": {
+ "test-storybook:ci": "yarn test-storybook --maxWorkers=2"
+ }
+}
+```
+
+### The error output in the CLI is too short
+
+By default, the test runner truncates error outputs at 1000 characters, and you can check the full output directly in Storybook in the browser. However, if you want to change that limit, you can do so by setting the `DEBUG_PRINT_LIMIT` environment variable to a number of your choosing, for example, `DEBUG_PRINT_LIMIT=5000 yarn test-storybook`.
+
+### Run the test runner in other CI environments
+
+As the test runner is based on Playwright, you might need to use specific docker images or other configurations depending on your CI setup. In that case, you can refer to the [Playwright CI docs](https://playwright.dev/docs/ci) for more information.
+
+#### Learn about other UI tests
+
+- Test runner to automate test execution
+- [Visual tests](./visual-testing.md) for appearance
+- [Accessibility tests](./accessibility-testing.md) for accessibility
+- [Interaction tests](./interaction-testing.md) for user behavior simulation
+- [Snapshot tests](./snapshot-testing.md) for rendering errors and warnings
+- [Import stories in other tests](./importing-stories-in-tests.md) for other tools
\ No newline at end of file
diff --git a/docs/writing-tests/visual-testing.md b/docs/writing-tests/visual-testing.md
index 8ead581bbe4c..a5336a3854a0 100644
--- a/docs/writing-tests/visual-testing.md
+++ b/docs/writing-tests/visual-testing.md
@@ -50,7 +50,7 @@ View it online at https://www.chromatic.com/build?appId=...&number=1.
💡 Before running Chromatic's CLI ensure you have at least two commits added to the repository to prevent build failures, as Chromatic relies on a full Git history graph to establish the baselines. Read more about baselines in Chromatic's documentation
-When Chromatic finishes, it should have successfully deployed your Storybook and established the baselines (i.e., starting point) for all your component's stories. Additionally, providing you with a link to the published Storybook that you can share with your team to gather feedback.
+When Chromatic finishes, it should have successfully deployed your Storybook and established the baselines, that is to say, the starting point for all your component's stories. Additionally, providing you with a link to the published Storybook that you can share with your team to gather feedback.
@@ -74,8 +74,9 @@ Snapshot tests compare the rendered markup of every story against known baseline
#### Learn about other UI tests
+- [Test runner](./test-runner.md) to automate test execution
- Visual tests for appearance
- [Accessibility tests](./accessibility-testing.md) for accessibility
- [Interaction tests](./interaction-testing.md) for user behavior simulation
- [Snapshot tests](./snapshot-testing.md) for rendering errors and warnings
-- [Import stories in other tests](./importing-stories-in-tests.md) for other tools
+- [Import stories in other tests](./importing-stories-in-tests.md) for other tools
\ No newline at end of file
diff --git a/examples/angular-cli/.storybook/main.js b/examples/angular-cli/.storybook/main.js
index 8af67f228e3b..5b3bd5b5bcce 100644
--- a/examples/angular-cli/.storybook/main.js
+++ b/examples/angular-cli/.storybook/main.js
@@ -16,6 +16,7 @@ module.exports = {
],
core: {
builder: 'webpack4',
+ disableTelemetry: true,
},
angularOptions: {
enableIvy: true,
diff --git a/examples/angular-cli/package.json b/examples/angular-cli/package.json
index ee505cf78f77..cd872e88dd2b 100644
--- a/examples/angular-cli/package.json
+++ b/examples/angular-cli/package.json
@@ -1,6 +1,6 @@
{
"name": "angular-cli",
- "version": "6.5.0-alpha.52",
+ "version": "6.5.0-beta.7",
"private": true,
"license": "MIT",
"scripts": {
@@ -39,21 +39,21 @@
"@angular/compiler-cli": "^11.2.14",
"@angular/elements": "^11.2.14",
"@compodoc/compodoc": "^1.1.18",
- "@storybook/addon-a11y": "6.5.0-alpha.52",
- "@storybook/addon-actions": "6.5.0-alpha.52",
- "@storybook/addon-backgrounds": "6.5.0-alpha.52",
- "@storybook/addon-controls": "6.5.0-alpha.52",
- "@storybook/addon-docs": "6.5.0-alpha.52",
- "@storybook/addon-interactions": "6.5.0-alpha.52",
- "@storybook/addon-jest": "6.5.0-alpha.52",
- "@storybook/addon-links": "6.5.0-alpha.52",
- "@storybook/addon-storyshots": "6.5.0-alpha.52",
- "@storybook/addon-storysource": "6.5.0-alpha.52",
- "@storybook/addons": "6.5.0-alpha.52",
- "@storybook/angular": "6.5.0-alpha.52",
+ "@storybook/addon-a11y": "6.5.0-beta.7",
+ "@storybook/addon-actions": "6.5.0-beta.7",
+ "@storybook/addon-backgrounds": "6.5.0-beta.7",
+ "@storybook/addon-controls": "6.5.0-beta.7",
+ "@storybook/addon-docs": "6.5.0-beta.7",
+ "@storybook/addon-interactions": "6.5.0-beta.7",
+ "@storybook/addon-jest": "6.5.0-beta.7",
+ "@storybook/addon-links": "6.5.0-beta.7",
+ "@storybook/addon-storyshots": "6.5.0-beta.7",
+ "@storybook/addon-storysource": "6.5.0-beta.7",
+ "@storybook/addons": "6.5.0-beta.7",
+ "@storybook/angular": "6.5.0-beta.7",
"@storybook/babel-plugin-require-context-hook": "1.0.1",
"@storybook/jest": "^0.0.5",
- "@storybook/source-loader": "6.5.0-alpha.52",
+ "@storybook/source-loader": "6.5.0-beta.7",
"@storybook/testing-library": "^0.0.7",
"@types/core-js": "^2.5.4",
"@types/jest": "^26.0.16",
diff --git a/examples/cra-kitchen-sink/.storybook/main.js b/examples/cra-kitchen-sink/.storybook/main.js
index 486f57474131..6d285cb4917a 100644
--- a/examples/cra-kitchen-sink/.storybook/main.js
+++ b/examples/cra-kitchen-sink/.storybook/main.js
@@ -32,6 +32,7 @@ module.exports = {
},
core: {
builder: 'webpack4',
+ disableTelemetry: true,
},
staticDirs: ['../public'],
features: {
diff --git a/examples/cra-kitchen-sink/package.json b/examples/cra-kitchen-sink/package.json
index 4ebed6868a09..5eb92f17d1d8 100644
--- a/examples/cra-kitchen-sink/package.json
+++ b/examples/cra-kitchen-sink/package.json
@@ -1,6 +1,6 @@
{
"name": "cra-kitchen-sink",
- "version": "6.5.0-alpha.52",
+ "version": "6.5.0-beta.7",
"private": true,
"scripts": {
"build": "react-scripts build",
@@ -11,7 +11,7 @@
"test": "react-scripts test --env=jsdom"
},
"dependencies": {
- "@storybook/client-logger": "6.5.0-alpha.52",
+ "@storybook/client-logger": "6.5.0-beta.7",
"global": "^4.4.0",
"prop-types": "^15.7.2",
"react": "16.14.0",
@@ -21,19 +21,19 @@
},
"devDependencies": {
"@pmmmwh/react-refresh-webpack-plugin": "^0.5.3",
- "@storybook/addon-a11y": "6.5.0-alpha.52",
- "@storybook/addon-actions": "6.5.0-alpha.52",
- "@storybook/addon-backgrounds": "6.5.0-alpha.52",
- "@storybook/addon-docs": "6.5.0-alpha.52",
+ "@storybook/addon-a11y": "6.5.0-beta.7",
+ "@storybook/addon-actions": "6.5.0-beta.7",
+ "@storybook/addon-backgrounds": "6.5.0-beta.7",
+ "@storybook/addon-docs": "6.5.0-beta.7",
"@storybook/addon-ie11": "0.0.7--canary.5e87b64.0",
- "@storybook/addon-jest": "6.5.0-alpha.52",
- "@storybook/addon-links": "6.5.0-alpha.52",
- "@storybook/addon-storyshots": "6.5.0-alpha.52",
- "@storybook/addons": "6.5.0-alpha.52",
- "@storybook/builder-webpack4": "6.5.0-alpha.52",
+ "@storybook/addon-jest": "6.5.0-beta.7",
+ "@storybook/addon-links": "6.5.0-beta.7",
+ "@storybook/addon-storyshots": "6.5.0-beta.7",
+ "@storybook/addons": "6.5.0-beta.7",
+ "@storybook/builder-webpack4": "6.5.0-beta.7",
"@storybook/preset-create-react-app": "^3.1.6",
- "@storybook/react": "6.5.0-alpha.52",
- "@storybook/theming": "6.5.0-alpha.52",
+ "@storybook/react": "6.5.0-beta.7",
+ "@storybook/theming": "6.5.0-beta.7",
"webpack": "4"
},
"storybook": {
diff --git a/examples/cra-react15/.storybook/main.js b/examples/cra-react15/.storybook/main.js
index 76fdcb43fa94..1f0d64a52bdf 100644
--- a/examples/cra-react15/.storybook/main.js
+++ b/examples/cra-react15/.storybook/main.js
@@ -20,6 +20,7 @@ module.exports = {
},
core: {
builder: 'webpack4',
+ disableTelemetry: true,
},
staticDirs: ['../public'],
};
diff --git a/examples/cra-react15/package.json b/examples/cra-react15/package.json
index 0d67c14b3d0f..ec7dbc8186f8 100644
--- a/examples/cra-react15/package.json
+++ b/examples/cra-react15/package.json
@@ -1,6 +1,6 @@
{
"name": "cra-react15",
- "version": "6.5.0-alpha.52",
+ "version": "6.5.0-beta.7",
"private": true,
"scripts": {
"build": "react-scripts build",
@@ -19,14 +19,14 @@
"react-scripts": "3.4.4"
},
"devDependencies": {
- "@storybook/addon-actions": "6.5.0-alpha.52",
+ "@storybook/addon-actions": "6.5.0-beta.7",
"@storybook/addon-ie11": "0.0.7--canary.5e87b64.0",
- "@storybook/addon-links": "6.5.0-alpha.52",
- "@storybook/addons": "6.5.0-alpha.52",
- "@storybook/builder-webpack4": "6.5.0-alpha.52",
+ "@storybook/addon-links": "6.5.0-beta.7",
+ "@storybook/addons": "6.5.0-beta.7",
+ "@storybook/builder-webpack4": "6.5.0-beta.7",
"@storybook/preset-create-react-app": "^3.1.6",
- "@storybook/react": "6.5.0-alpha.52",
- "@storybook/theming": "6.5.0-alpha.52",
+ "@storybook/react": "6.5.0-beta.7",
+ "@storybook/theming": "6.5.0-beta.7",
"babel-core": "6",
"babel-runtime": "6",
"webpack": "4"
diff --git a/examples/cra-ts-essentials/.storybook/main.js b/examples/cra-ts-essentials/.storybook/main.ts
similarity index 71%
rename from examples/cra-ts-essentials/.storybook/main.js
rename to examples/cra-ts-essentials/.storybook/main.ts
index 97a4e0a2b0ff..651ca6c6bc74 100644
--- a/examples/cra-ts-essentials/.storybook/main.js
+++ b/examples/cra-ts-essentials/.storybook/main.ts
@@ -1,6 +1,8 @@
+import type { StorybookConfig } from '@storybook/react/types';
+
const path = require('path');
-module.exports = {
+const mainConfig: StorybookConfig = {
stories: ['../src/**/*.stories.@(tsx|mdx)'],
addons: [
'@storybook/preset-create-react-app',
@@ -13,9 +15,9 @@ module.exports = {
},
],
logLevel: 'debug',
- webpackFinal: (config) => {
+ webpackFinal: async (config) => {
// add monorepo root as a valid directory to import modules from
- config.resolve.plugins.forEach((p) => {
+ config.resolve?.plugins?.forEach((p: any) => {
if (Array.isArray(p.appSrcs)) {
p.appSrcs.push(path.join(__dirname, '..', '..', '..'));
}
@@ -24,9 +26,12 @@ module.exports = {
},
core: {
builder: 'webpack4',
+ disableTelemetry: true,
},
staticDirs: ['../public'],
features: {
buildStoriesJson: true,
},
};
+
+module.exports = mainConfig;
diff --git a/examples/cra-ts-essentials/.storybook/preview.js b/examples/cra-ts-essentials/.storybook/preview.js
deleted file mode 100644
index 305c8eb0be14..000000000000
--- a/examples/cra-ts-essentials/.storybook/preview.js
+++ /dev/null
@@ -1,27 +0,0 @@
-import React from 'react';
-
-export const decorators = [
- (StoryFn, { globals: { locale = 'en' } }) => (
- <>
-