-The icon element used in the example loads the icons from the @storybook/components package. See [here](../workflows/faq.md#what-icons-are-available-for-my-toolbar-or-my-addon) for the list of available icons that you can use.
+The icon element used in the example loads the icons from the @storybook/components package. See [here](../faq.md#what-icons-are-available-for-my-toolbar-or-my-addon) for the list of available icons that you can use.
diff --git a/docs/addons/addons-api.md b/docs/addons/addons-api.md
index cdb4db144ea7..5ba804d8ca8a 100644
--- a/docs/addons/addons-api.md
+++ b/docs/addons/addons-api.md
@@ -85,7 +85,7 @@ The options to `makeDecorator` are:
-π‘ Note:If the story's parameters include `{ foo: { disable: true } }` (where `foo` is the `parameterName` of your addon), your decorator will not be called.
+π‘ If the story's parameters include `{ foo: { disable: true } }` (where `foo` is the `parameterName` of your addon), your decorator will not be called.
@@ -286,7 +286,7 @@ This method allows you to set query string parameters. You can use that as tempo
-π‘ Note: If you need to remove a query param, use `null` for that. For example, let's say we need to remove the `bbc` query param. See below how to do it:
+π‘ If you need to remove a query param, use `null` for that. For example, let's say we need to remove the `bbc` query param. See below how to do it:
-NOTE: This API is experimental and may change outside of the typical semver release cycle
+This API is experimental and may change outside of the typical semver release cycle
-π‘ NOTE: The flag --no-manager-cache disables the internal caching of Storybook and can severely impact your Storybook loading time, so only use it when you need to refresh Storybook's UI, such as when editing themes.
+π‘ The flag --no-manager-cache disables the internal caching of Storybook and can severely impact your Storybook loading time, so only use it when you need to refresh Storybook's UI, such as when editing themes.
-π‘ NOTE: Starting in 6.4 the `-s` flag is deprecated. Instead, use a configuration object in your `.storybook/main.js` file. See the [images and assets documentation](../configure/images-and-assets.md#serving-static-files-via-storybook) for more information.
+π‘ Starting in 6.4 the `-s` flag is deprecated. Instead, use a configuration object in your `.storybook/main.js` file. See the [images and assets documentation](../configure/images-and-assets.md#serving-static-files-via-storybook) for more information.
@@ -65,5 +65,5 @@ Usage: build-storybook [options]
| `--docs` | Builds Storybook in documentation mode. Learn more about it in [here](../writing-docs/build-documentation.md#publish-storybooks-documentation) `build-storybook --docs` |
-π‘ NOTE: If you're using npm instead of yarn to publish Storybook, the commands work slightly different. For example, npm run build-storybook -- -o ./path/to/build.
-
\ No newline at end of file
+π‘ If you're using npm instead of yarn to publish Storybook, the commands work slightly different. For example, npm run build-storybook -- -o ./path/to/build.
+
diff --git a/docs/configure/environment-variables.md b/docs/configure/environment-variables.md
index a4838576d895..830c94e1cc2d 100644
--- a/docs/configure/environment-variables.md
+++ b/docs/configure/environment-variables.md
@@ -65,7 +65,7 @@ Then you can access this environment variable anywhere, even within your stories
You can also use specific files for specific modes. Add a .env.development or .env.production to apply different values to your environment variables.
-You can also pass these environment variables when you are [building your Storybook](../workflows/publish-storybook.md) with `build-storybook`.
+You can also pass these environment variables when you are [building your Storybook](../sharing/publish-storybook.md) with `build-storybook`.
Then they'll be hardcoded to the static version of your Storybook.
@@ -82,5 +82,5 @@ The table below lists the available options:
| Chromium | `BROWSER="chromium"` |
-π‘ Note: By default, Storybook will open a new Chrome window as part of its startup process. If you don't have Chrome installed, make sure to include one of the following options, or set your default browser accordingly.
-
\ No newline at end of file
+π‘ By default, Storybook will open a new Chrome window as part of its startup process. If you don't have Chrome installed, make sure to include one of the following options, or set your default browser accordingly.
+
diff --git a/docs/configure/overview.md b/docs/configure/overview.md
index b947d79daf50..1577221a5813 100644
--- a/docs/configure/overview.md
+++ b/docs/configure/overview.md
@@ -75,7 +75,7 @@ Additionally, you can also customize your Storybook configuration to load your s
-π‘ Note: If you've enabled on-demand story loading, this option will not work. You must define the story's titles manually.
+π‘ If you've enabled on-demand story loading, this option will not work. You must define the story's titles manually.
When Storybook starts, it will look for any file containing the `stories` extension inside the `packages/stories` directory and generate the titles for your stories.
diff --git a/docs/configure/sidebar-and-urls.md b/docs/configure/sidebar-and-urls.md
index 62fcc0048600..774d47fabf7d 100644
--- a/docs/configure/sidebar-and-urls.md
+++ b/docs/configure/sidebar-and-urls.md
@@ -44,7 +44,7 @@ If you need, you can also generate automatic titles for all your stories using a
## Permalinking to stories
-By default, Storybook generates an `id` for each story based on the component title and the story name. This `id` in particular is used in the URL for each story, and that URL can serve as a permalink (primarily when you [publish](../workflows/publish-storybook.md) your Storybook).
+By default, Storybook generates an `id` for each story based on the component title and the story name. This `id` in particular is used in the URL for each story, and that URL can serve as a permalink (primarily when you [publish](../sharing/publish-storybook.md) your Storybook).
Consider the following story:
diff --git a/docs/configure/webpack.md b/docs/configure/webpack.md
index e39670004848..19657a0a79d2 100644
--- a/docs/configure/webpack.md
+++ b/docs/configure/webpack.md
@@ -109,7 +109,7 @@ The following code snippet shows how you can replace the loaders from Storybook
-π‘ Note: Projects initialized via generators (e.g, Vue CLI) may require that you import their own webpack config file (i.e., /projectRoot/node_modules/@vue/cli-service/webpack.config.js) to use a certain feature with Storybook. For other generators, make sure to check the documentation for instructions.
+π‘ Projects initialized via generators (e.g, Vue CLI) may require that you import their own webpack config file (i.e., /projectRoot/node_modules/@vue/cli-service/webpack.config.js) to use a certain feature with Storybook. For other generators, make sure to check the documentation for instructions.
-π‘ Note: You can add the --template flag to include a custom template.
+π‘ You can add the --template flag to include a custom template.
Next, select the framework, for example, `react`:
@@ -33,7 +33,7 @@ Finally, enter a location for your reproduction:
-π‘ Note: If you don't provide a full path for the reproduction it will be generated in the current directory.
+π‘ If you don't provide a full path for the reproduction it will be generated in the current directory.
If everything worked as it should, you should have a fully functional Storybook set up in your local environment.
@@ -68,7 +68,7 @@ An excellent way to check your reproduction is to have it deployed online. We r
### Helpful resources when working with Chromatic
-- [Publish Storybook](../workflows/publish-storybook.md)
+- [Publish Storybook](../sharing/publish-storybook.md)
- [Setup Chromatic](https://www.chromatic.com/docs/setup)
- [Automate Chromatic with continuous integration](https://www.chromatic.com/docs/ci)
diff --git a/docs/contribute/new-snippets.md b/docs/contribute/new-snippets.md
index 19970f08f33b..8f3aca9df89b 100644
--- a/docs/contribute/new-snippets.md
+++ b/docs/contribute/new-snippets.md
@@ -80,7 +80,7 @@ Create the file `ember/your-component.js.mdx`, similar to the other frameworks,
```
-π‘ Note: Code snippets are divided into various file extensions, if you're contributing a TypeScript file use .ts.mdx, or if you're adding MDX files use .mdx.mdx .
+π‘ Code snippets are divided into various file extensions, if you're contributing a TypeScript file use .ts.mdx, or if you're adding MDX files use .mdx.mdx .
Go through the rest of the documentation and repeat the process.
@@ -110,7 +110,7 @@ yarn start:skip-addons
```
-π‘ Note: 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 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/actions.md b/docs/essentials/actions.md
index d78d1b7f54ae..aeec1b2d1e50 100644
--- a/docs/essentials/actions.md
+++ b/docs/essentials/actions.md
@@ -63,7 +63,7 @@ If you need more granular control over which `argTypes` are matched, you can adj
-π‘ NOTE: If you're generating argTypes with another addon (like [docs](../writing-docs/introduction.md), which is the common behavior), ensure the actions addon AFTER the other addon. You can do this by listing it later in the addons registration code in [`.storybook/main.js`](../configure/overview.md#configure-story-rendering). This is default in [essentials](./introduction.md).
+π‘ If you're generating argTypes with another addon (like [docs](../writing-docs/introduction.md), which is the common behavior), ensure the actions addon AFTER the other addon. You can do this by listing it later in the addons registration code in [`.storybook/main.js`](../configure/overview.md#configure-story-rendering). This is default in [essentials](./introduction.md).
diff --git a/docs/essentials/controls.md b/docs/essentials/controls.md
index 17ccc30ef02d..9ee5f664cfb5 100644
--- a/docs/essentials/controls.md
+++ b/docs/essentials/controls.md
@@ -105,7 +105,7 @@ To do so, use the `matchers` property in the `controls` parameter:
## Fully custom args
-Up until now, we only used auto-generated controls based on the component we're writing stories for. If we are writing [complex stories](../workflows/stories-for-multiple-components.md), we may want to add controls for args that arenβt part of the component.
+Up until now, we only used auto-generated controls based on the component we're writing stories for. If we are writing [complex stories](../writing-stories/stories-for-multiple-components.md), we may want to add controls for args that arenβt part of the component.
diff --git a/docs/essentials/interactions.md b/docs/essentials/interactions.md
index f0f343f23da2..eafc1e73aeba 100644
--- a/docs/essentials/interactions.md
+++ b/docs/essentials/interactions.md
@@ -39,7 +39,7 @@ Next, update [`.storybook/main.js`](../configure/overview.md#configure-story-ren
-β οΈ Note: Make sure to list `@storybook/addon-interactions` **after** `addon-essentials` (or `addon-actions`).
+π‘ Make sure to list `@storybook/addon-interactions` **after** `addon-essentials` (or `addon-actions`).
Now when you run Storybook, the Interactions addon will be enabled.
diff --git a/docs/essentials/measure-and-outline.md b/docs/essentials/measure-and-outline.md
index b6fe17dfb804..ebb804ae27d5 100644
--- a/docs/essentials/measure-and-outline.md
+++ b/docs/essentials/measure-and-outline.md
@@ -15,7 +15,7 @@ With Storybook's Measure addon, you can quickly visualize each component's measu
-π‘ Note: Alternatively you can press the m key on your keyboard to toggle the addon.
+π‘ Alternatively you can press the m key on your keyboard to toggle the addon.
## Outline addon
diff --git a/docs/essentials/toolbars-and-globals.md b/docs/essentials/toolbars-and-globals.md
index efa82574d2aa..99f18673735d 100644
--- a/docs/essentials/toolbars-and-globals.md
+++ b/docs/essentials/toolbars-and-globals.md
@@ -68,7 +68,7 @@ In your [`.storybook/preview.js`](../configure/overview.md#configure-story-rende
-π‘ The icon element used in the examples loads the icons from the @storybook/components package. See [here](../workflows/faq.md#what-icons-are-available-for-my-toolbar-or-my-addon) for the list of available icons that you can use.
+π‘ The icon element used in the examples loads the icons from the @storybook/components package. See [here](../faq.md#what-icons-are-available-for-my-toolbar-or-my-addon) for the list of available icons that you can use.
diff --git a/docs/faq.md b/docs/faq.md
new file mode 100644
index 000000000000..7669ea6db84e
--- /dev/null
+++ b/docs/faq.md
@@ -0,0 +1,377 @@
+---
+title: 'Frequently Asked Questions'
+---
+
+Here are some answers to frequently asked questions. If you have a question, you can ask it by opening an issue on the [Storybook Repository](https://github.com/storybookjs/storybook/).
+
+### How can I opt-out of Angular Ivy?
+
+In case you are having trouble with Angular Ivy you can deactivate it in your `main.js`:
+
+```javascript
+module.exports = {
+ stories: [
+ /* ... */
+ ],
+ addons: [
+ /* ... */
+ ],
+ angularOptions: {
+ enableIvy: false,
+ },
+};
+```
+
+Please report any issues related to Ivy in our [GitHub Issue Tracker](https://github.com/storybookjs/storybook/labels/app%3A%20angular) as the support for View Engine will be dropped in a future release of Angular.
+
+### How can I run coverage tests with Create React App and leave out stories?
+
+Create React App does not allow providing options to Jest in your `package.json`, however you can run `jest` with commandline arguments:
+
+```sh
+npm test -- --coverage --collectCoverageFrom='["src/**/*.{js,jsx}","!src/**/stories/*"]'
+```
+
+
+π‘ If you're using yarn as a package manager, you'll need to adjust the command accordingly.
+
+
+### I see `ReferenceError: React is not defined` when using Storybook with Next.js
+
+Next automatically defines `React` for all of your files via a babel plugin. In Storybook, you can solve this either by:
+
+1. Adding `import React from 'react'` to your component files.
+2. Adding a `.babelrc` that includes [`babel-plugin-react-require`](https://www.npmjs.com/package/babel-plugin-react-require)
+
+### How do I setup Storybook to share Webpack configuration with Next.js?
+
+You can generally reuse webpack rules by placing them in a file that is `require()`-ed from both your `next.config.js` and your `.storybook/main.js` files. For example:
+
+```js
+module.exports = {
+ webpackFinal: async (baseConfig) => {
+ const nextConfig = require('/path/to/next.config.js');
+
+ // merge whatever from nextConfig into the webpack config storybook will use
+ return { ...baseConfig, ...nextConfig };
+ },
+};
+```
+
+### How do I setup React Fast Refresh with Storybook?
+
+Fast refresh is an opt-in feature that can be used in Storybook React.
+There are two ways that you can enable it, go ahead and pick one:
+
+- You can set a `FAST_REFRESH` environment variable in your `.env` file:
+
+```
+FAST_REFRESH=true
+```
+
+- Or you can set the following properties in your `.storybook/main.js` files:
+
+```js
+module.exports = {
+ reactOptions: {
+ fastRefresh: true,
+ },
+};
+```
+
+
+π‘ Fast Refresh only works in development mode with React 16.10 or higher.
+
+
+### 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:
+
+1. You're trying to access addon channel (e.g., by calling `setOptions`) in a non-browser environment like Jest. You may need to add a channel mock:
+
+ ```js
+ import { addons, mockChannel } from '@storybook/addons';
+
+ addons.setChannel(mockChannel());
+ ```
+
+2. In React Native, it's a special case documented in [#1192](https://github.com/storybookjs/storybook/issues/1192)
+
+### Can I modify React component state in stories?
+
+Not directly. If you control the component source, you can do something like this:
+
+```js
+import React, { Component } from 'react';
+
+export default {
+ title: 'MyComponent',
+};
+
+class MyComponent extends Component {
+ constructor(props) {
+ super(props);
+
+ this.state = {
+ someVar: 'defaultValue',
+ ...props.initialState,
+ };
+ }
+ // ...
+}
+
+export const defaultView = () => ;
+```
+
+### 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:
+
+```js
+// .storybook/main.js
+
+module.exports = {
+ addons: ['@storybook/addon-controls'],
+};
+```
+
+### Why aren't the addons working in a composed Storybook?
+
+Composition is a new feature that we released with version 6.0, and there are still some limitations to it.
+
+For now, the addons you're using in a composed Storybook will not work.
+
+We're working on overcoming this limitation, and soon you'll be able to use them as if you are working with a non-composed Storybook.
+
+### Which community addons are compatible with the latest version of Storybook?
+
+Starting with Storybook version 6.0, we've introduced some great features aimed at streamlining your development workflow.
+
+With this, we would like to point out that if you plan on using addons created by our fantastic community, you need to consider that some of those addons might be working with an outdated version of Storybook.
+
+We're actively working to provide a better way to address this situation, but in the meantime, we would ask for a bit of caution on your end so that you don't run into unexpected problems. Let us know by creating an issue in the [Storybook repo](https://github.com/storybookjs/storybook/issues) so that we can gather information and create a curated list with those addons to help not only you but the rest of the community.
+
+### Is it possible to browse the documentation for past versions of Storybook?
+
+With the release of version 6.0, we updated our documentation as well. That doesn't mean that the old documentation was removed. We kept it to help you with your Storybook migration process. Use the content from the table below in conjunction with our migration guide .
+
+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 | [See current documentation](../writing-docs/doc-blocks.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) |
+
+
+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.
+
+
+### What icons are available for my toolbar or my addon?
+
+With the [`@storybook/components`](https://www.npmjs.com/package/@storybook/components) package, you get a set of icons that you can use to customize your UI. Use the table below as a reference while writing your addon or defining your Storybook global types.
+Go through this [story](https://5a375b97f4b14f0020b0cda3-wbeulgbetj.chromatic.com/?path=/story/basics-icon--labels) to see how the icons look.
+
+| accessibility | accessibilityalt | add | admin | alert |
+| -------------- | ---------------- | ------------ | ------------ | ------------- |
+| arrowdown | arrowleft | arrowleftalt | arrowright | arrowrightalt |
+| arrowup | back | basket | batchaccept | batchdeny |
+| beaker | bell | bitbucket | book | bookmark |
+| bookmarkhollow | bottombar | box | branch | browser |
+| button | calendar | camera | category | certificate |
+| check | chevrondown | chromatic | circle | circlehollow |
+| close | closeAlt | cog | collapse | comment |
+| commit | compass | component | contrast | copy |
+| cpu | credit | cross | dashboard | database |
+| delete | discord | docchart | doclist | document |
+| download | edit | ellipsis | email | expand |
+| expandalt | eye | eyeclose | facebook | facehappy |
+| faceneutral | facesad | filter | flag | folder |
+| form | gdrive | github | gitlab | globe |
+| google | graphbar | graphline | graphql | grid |
+| grow | heart | hearthollow | home | hourglass |
+| info | key | lightning | lightningoff | link |
+| listunordered | location | lock | markup | medium |
+| memory | menu | merge | mirror | mobile |
+| nut | outbox | outline | paintbrush | paperclip |
+| paragraph | phone | photo | pin | play |
+| plus | power | print | proceed | profile |
+| pullrequest | question | redirect | redux | reply |
+| repository | requestchange | rss | search | share |
+| sharealt | shield | sidebar | sidebaralt | speaker |
+| star | starhollow | stop | structure | subtract |
+| support | switchalt | sync | tablet | thumbsup |
+| time | timer | transfer | trash | twitter |
+| undo | unfold | unlock | upload | user |
+| useradd | useralt | users | video | watch |
+| wrench | youtube | zoom | zoomout | zoomreset |
+
+### I see a "No Preview" error with a Storybook production build
+
+If you're using the `serve` package to verify your production build of Storybook, you'll get that error. It relates to how `serve` handles rewrites. For instance, `/iframe.html` is rewritten into `/iframe`, and you'll get that error.
+
+We recommend that you use [http-server](https://www.npmjs.com/package/http-server) instead and use the following command to preview Storybook:
+
+```shell
+npx http-server storybook-static
+```
+
+
+Suppose you don't want to run the command above frequently. Add http-server as a development dependency and create a new script to preview your production build of Storybook.
+
+
+### 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.
+
+### Is snapshot testing with Storyshots supported for Vue 3?
+
+Yes, with the release of version 6.2, the [`Storyshots addon`](https://www.npmjs.com/package/@storybook/addon-storyshots) will automatically detect Vue 3 projects.
+
+If you run into a situation where this is not the case, you can adjust the `config` object and manually specify the framework (e.g., `vue3`).
+
+See our documentation on how to customize the [Storyshots configuration](./snapshot-testing.md).
+
+### 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.
+
+### Why are my mocked GraphQL queries failing with Storybook's MSW addon?
+
+If you're working with Vue 3, you'll need to install [`@vue/apollo-composable`](https://www.npmjs.com/package/@vue/apollo-composable). With Svelte, you'll need to install [`@rollup/plugin-replace`](https://www.npmjs.com/package/@rollup/plugin-replace) and update your `rollup.config` file to the following:
+
+```js
+// rollup.config
+
+// Boilerplate imports
+
+import replace from '@rollup/plugin-replace';
+const production = !process.env.ROLLUP_WATCH;
+
+// Remainder rollup.config implementation
+
+export default {
+ input: 'src/main.js',
+ output: {
+ sourcemap: true,
+ format: 'iife',
+ name: 'app',
+ file: 'public/build/bundle.js',
+ },
+ plugins: [
+ // Other plugins
+
+ // Configures the replace plugin to allow Grapqhl Queries to work properly
+ replace({
+ 'process.env.NODE_ENV': JSON.stringify('development'),
+ }),
+};
+```
+
+With Angular, the most common issue is the placement of the `mockServiceWorker.js` file. Use this [example](https://github.com/mswjs/examples/tree/master/examples/rest-angular/) as a point of reference.
+
+### Can I use other GraphQL providers with Storybook's MSW addon?
+
+Yes, check the [addon's examples](https://github.com/mswjs/msw-storybook-addon/tree/master/packages/docs/src/demos) to learn how to integrate different providers.
+
+### Can I mock GraphQL mutations with Storybook's MSW addon?
+
+No, currently, the MSW addon only has support for GraphQL queries. If you're interested in including this feature, open an issue in the [MSW addon repository](https://github.com/mswjs/msw-storybook-addon) and follow up with the maintainer.
+
+### Why aren't my code blocks highlighted with Storybook MDX
+
+Out of the box, Storybook provides syntax highlighting for a set of languages (e.g., Javascript, Markdown, CSS, HTML, Typescript, GraphQL) that you can use with your code blocks. If you're writing your custom code blocks with MDX, you'll need to import the syntax highlighter manually. For example, if you're adding a code block for SCSS, adjust your story to the following:
+
+
+
+
+
+
+
+
+π‘ Check react-syntax-highlighter's documentation for a list of available languages.
+
+
+Applying this small change will enable you to add syntax highlight for SCSS or any other language available.
+
+### How can my code detect if it is running in Storybook?
+
+You can do this by checking the value of `process.env.STORYBOOK`, which will
+equal `'true'` when running in Storybook. Be careful β `process` may be
+undefined when your code runs outside of Storybook.
+
+```javascript
+export function isRunningInStorybook() {
+ try {
+ if (process.env.STORYBOOK) return true;
+ } catch {
+ // A ReferenceError will be thrown if process is undefined
+ }
+
+ return false;
+}
+```
+
+This works because Babel replaces `process.env.STORYBOOK` with the value of the
+`STORYBOOK` environment variable. Because this is done through a Babel plugin,
+the following will **NOT** work:
+
+```javascript
+export function isRunningInStorybook() {
+ return typeof process?.env?.STORYBOOK !== 'undefined';
+ // ReferenceError: process is not defined
+}
+```
\ No newline at end of file
diff --git a/docs/get-started/whats-a-story.md b/docs/get-started/whats-a-story.md
index dba754d3ddd7..b642d1dd00f7 100644
--- a/docs/get-started/whats-a-story.md
+++ b/docs/get-started/whats-a-story.md
@@ -25,6 +25,8 @@ Letβs start with the `Button` component. A story is a function that describes
'svelte/button-story.native-format.mdx',
'svelte/button-story.mdx.mdx',
'web-components/button-story.js.mdx',
+ 'html/button-story.js.mdx',
+ 'html/button-story.ts.mdx',
]}
/>
diff --git a/docs/sharing/build-publish-only.png b/docs/sharing/build-publish-only.png
new file mode 100644
index 000000000000..17684e9b026f
Binary files /dev/null and b/docs/sharing/build-publish-only.png differ
diff --git a/docs/workflows/combine-storybooks.png b/docs/sharing/combine-storybooks.png
similarity index 100%
rename from docs/workflows/combine-storybooks.png
rename to docs/sharing/combine-storybooks.png
diff --git a/docs/workflows/composition-versioning.png b/docs/sharing/composition-versioning.png
similarity index 100%
rename from docs/workflows/composition-versioning.png
rename to docs/sharing/composition-versioning.png
diff --git a/docs/sharing/embed-ghost.png b/docs/sharing/embed-ghost.png
new file mode 100644
index 000000000000..04803a422da8
Binary files /dev/null and b/docs/sharing/embed-ghost.png differ
diff --git a/docs/sharing/embed-medium-optimized.mp4 b/docs/sharing/embed-medium-optimized.mp4
new file mode 100644
index 000000000000..5e369a4a8d25
Binary files /dev/null and b/docs/sharing/embed-medium-optimized.mp4 differ
diff --git a/docs/sharing/embed-notion.png b/docs/sharing/embed-notion.png
new file mode 100644
index 000000000000..1a524c4e259b
Binary files /dev/null and b/docs/sharing/embed-notion.png differ
diff --git a/docs/sharing/embed.md b/docs/sharing/embed.md
new file mode 100644
index 000000000000..9c3ea5bcfe87
--- /dev/null
+++ b/docs/sharing/embed.md
@@ -0,0 +1,119 @@
+---
+title: 'Embed stories'
+---
+
+Embed stories to showcase your work to teammates and the developer community at large. In order to use embeds, your Storybook must be published and publicly accessible.
+
+Storybook supports `
+```
+
+
+
+
+
+
+
+## Embed a story without the toolbar
+
+To embed a plain story without Storybook's toolbar, click the "open canvas in new tab" icon in the top-right corner of Storybook to get the canvas URL. For example:
+
+
+
+```js
+// oEmbed
+https://5ccbc373887ca40020446347-bysekhynzd.chromatic.com/iframe.html?id=/story/shadowboxcta--default&viewMode=story
+
+// iframe embed
+ ;
+```
+
+
+
+
+
+
+## Embed a docs page
+
+Embed a component's docs page by replacing the viewMode=story with viewMode=docs in the story URL.
+
+
+
+```js
+// oEmbed
+https://5ccbc373887ca40020446347-bysekhynzd.chromatic.com/iframe.html?id=/story/shadowboxcta--default&viewMode=docs
+
+// iframe embed
+
+```
+
+
+
+
+
+
+
+## Embed stories on other platforms
+
+Every platform has different levels of embed support. Check the documentation of your service to see how they recommend embedding external content.
+
+
+
+How to embed in Medium
+
+Paste the Storybook URL into your Medium article, then press Enter. The embed will automatically resize to fit the story's height.
+
+While editing an article, Medium renders all embeds non-interactive. Once your article is published, it will become interactive. [Preview a demo on Medium](https://medium.com/@ghengeveld/embedding-storybook-on-medium-ce8a280c03ad).
+
+
+
+
+
+
+
+How to embed in Notion
+
+In your Notion document, type /embed, press Enter, and paste the story URL as the embed link. You can resize the embed as necessary.
+
+
+
+
+
+
+
+How to embed in Ghost
+
+Type `/html` in your Ghost post, press Enter and paste the iframe URL. You can resize the embed via the width and height properties as required.
+
+
+
+
diff --git a/docs/sharing/package-composition.md b/docs/sharing/package-composition.md
new file mode 100644
index 000000000000..201dd798d3cd
--- /dev/null
+++ b/docs/sharing/package-composition.md
@@ -0,0 +1,72 @@
+---
+title: 'Package Composition'
+---
+
+Storybook is widely used by component libraries and design systems. Design system authors can automatically compose their design systems inside their consumerβs Storybooks.
+
+For example, if you use a design system package, its stories can appear alongside your own. That makes it convenient to cross reference usage documentation without leaving Storybook.
+
+
+
+Composition via a package requires a secure integration between the service where you publish Storybook and Storybookβs own APIs. We recommend [publishing Storybook to Chromatic](./publish-storybook.md#publish-storybook-with-chromatic) for full support of these features.
+
+
+
+## For consumers
+
+Composition happens automatically if the package [supports](#for-authors) it. When you install the package, Storybook will load its stories alongside your own.
+
+
+
+### Set up
+
+If you want to configure how the composed Storybook behaves, you can disable the `ref` element in your [`.storybook/main.js`](../configure/overview.md#configure-story-rendering)
+
+
+
+
+
+
+
+### Switching versions
+
+Change the version of the composed Storybook to see how the library evolves. This requires [configuration](#show-a-version-selector) from the package author.
+
+
+
+## For authors
+
+Component library authors can expand adoption by composing their components in their consumerβs Storybooks.
+
+Add a `storybook` property in your published `package.json`that contains an object with a `url` field. Point the URL field to a published Storybook at the version you want.
+
+```json
+// Your component libraryβs package.json
+{
+ "storybook": {
+ "url": "https://host.com/your-storybook-for-this-version"
+ }
+}
+```
+
+### Automatic version selection
+
+If you're using [Chromatic](./publish-storybook.md#publish-storybook-with-chromatic), you can provide a single URL for your Storybook in the `storybook.url` field. You do not need to change the URL each time you publish a new version. Storybook will automatically find the correct URL for your package. For example:
+
+```json
+{
+ "storybook": {
+ "url": "https://master--xyz123.chromatic.com"
+ }
+}
+```
+
+In this example `xyz123` is your Chromatic project id. Storybook will automatically compose in the Storybook published to that project corresponding to the version the user has installed.
+
+### Show a version selector
+
+If you're using [Chromatic](./publish-storybook.md#publish-storybook-with-chromatic), you can provide a list of versions for the user to [choose from](#switching-versions) to experiment with other versions of your package.
diff --git a/docs/workflows/package-composition.png b/docs/sharing/package-composition.png
similarity index 100%
rename from docs/workflows/package-composition.png
rename to docs/sharing/package-composition.png
diff --git a/docs/sharing/prbadge-publish.png b/docs/sharing/prbadge-publish.png
new file mode 100644
index 000000000000..5f4f58dae06c
Binary files /dev/null and b/docs/sharing/prbadge-publish.png differ
diff --git a/docs/sharing/publish-storybook.md b/docs/sharing/publish-storybook.md
new file mode 100644
index 000000000000..babccd0407da
--- /dev/null
+++ b/docs/sharing/publish-storybook.md
@@ -0,0 +1,136 @@
+---
+title: 'Publish Storybook'
+---
+
+Teams publish Storybook online to review and collaborate on works in progress. That allows developers, designers, PMs, and other stakeholders to check if the UI looks right without touching code or requiring a local dev environment.
+
+
+
+## Build Storybook as a static web application
+
+First, we'll need to build Storybook as a static web application. The functionality is already built-in and pre-configured. Run the following command inside your project's root directory:
+
+```shell
+# With yarn
+yarn build-storybook
+
+# With npm
+npm run build-storybook
+```
+
+
+
+π‘ You can provide additional flags to customize the command. Read more about the flag options [here](../api/cli-options.md).
+
+
+
+Storybook will create a static web application capable of being served by any web server. Preview it locally by running the following command:
+
+```shell
+npx http-server ./path/to/build
+```
+
+## Publish Storybook with Chromatic
+
+Once you've built your Storybook as a static web app, you can publish it to your web host. We recommend [Chromatic](https://www.chromatic.com/), a free publishing service made for Storybook that documents, versions, and indexes your UI components securely in the cloud.
+
+
+
+To get started, sign up with your GitHub, GitLab, Bitbucket, or email and generate a unique _project-token_ for your project.
+
+Next, install the [Chromatic CLI](https://www.npmjs.com/package/chromatic) package from npm:
+
+```shell
+# With npm
+npm install --save-dev chromatic
+
+# With yarn
+yarn add --dev chromatic
+```
+
+Run the following command after the package finishes installing. Make sure that you replace `your-project-token` with your own project token.
+
+```shell
+npx chromatic --project-token=
+```
+
+When Chromatic finishes, you should have successfully deployed your Storybook. Preview it by clicking the link provided (i.e., https://random-uuid.chromatic.com).
+
+```shell
+Build 1 published.
+
+View it online at https://www.chromatic.com/build?appId=...&number=1.
+```
+
+
+
+### Setup CI to publish automatically
+
+Configure your CI environment to publish your Storybook and [run Chromatic](https://www.chromatic.com/docs/ci)) whenever you push code to a repository. Let's see how to set it up using GitHub Actions.
+
+In your project's root directory, add a new file called `chromatic.yml` inside the `.github/workflows` directory:
+
+
+
+
+
+
+
+
+
+π‘ Secrets are secure environment variables provided by GitHub so that you don't need to hard code your `project-token`. Read the [official documentation](https://docs.github.com/en/actions/security-guides/encrypted-secrets#creating-encrypted-secrets-for-a-repository) to learn how to configure them.
+
+
+
+Commit and push the file. Congratulations, you've successfully automated publishing your Storybook. Now whenever you open a PR youβll get a handy link to your published Storybook in your PR checks.
+
+
+
+### Review with your team
+
+Publishing Storybook as part of the development process makes it quick and easy to [gather team feedback](https://storybook.js.org/tutorials/design-systems-for-developers/react/en/review/).
+
+A common method to ask for review is to paste a link to the published Storybook in a pull request or Slack.
+
+If you publish your Storybook to Chromatic, you can use the [UI Review](https://www.chromatic.com/features/publish) feature to automatically scan your PRs for new and updated stories. That makes it easy to identify what changed and give feedback.
+
+
+
+## Publish Storybook to other services
+
+You can publish the static Storybook web app to many hosts. We maintain [`storybook-deployer`](https://github.com/storybookjs/storybook-deployer), a handy tool to help you publish to AWS or GitHub pages.
+
+But features like [Composition](./storybook-composition.md), [embed](./embed.md), history, and versioning require tighter integration with Storybook APIs and secure authentication. Your hosting provider may not be capable of supporting these features. Learn about the Component Publishing Protocol (CPP) to see what.
+
+
+
+
+ π‘ Limitation: Addons in composed Storybooks will not work as they normally do in non-composed Storybook.
+
+
+## Compose local Storybooks
+
+You can also compose multiple Storybooks that are running locally. For instance, if you have a React Storybook and a Angular Storybook running on different ports you can update your configuration file (i.e., `.storybook/main.js`) and reference them;
+
+
+
+
+
+
+
+Adding this configuration will combine both the React and Angular Storybooks into your current one. When either of these changes, youβll see the changes being applied automatically. Enabling you to develop both frameworks in sync.
+
+## Compose Storybooks per environment
+
+You can also compose Storybooks based on the current development environment (e.g, development, staging, production). For instance if the project you're working on has already a published Storybook, but also includes a version with cutting edge features not yet released you can adjust the composition based on that. For example:
+
+
+
+
+
+
+
+
+
+π‘ 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.
+
+
+
+### Improve your Storybook composition
+
+So far we've seen how we can use composition with local or published Storybooks. One thing worth mentioning as your Storybook will grow in time with your own stories, or through composition with other Storybooks, is that you can optimize the deployment process by including the following command in your workflow, run from your project root:
+
+```shell
+npx sb extract
+```
+
+
+
+`sb extract` uses [Puppeteer](https://www.npmjs.com/package/puppeteer), which downloads and installs Chromium. Set the environment `SB_CHROMIUM_PATH` to configure your local Chromium installation.
+
+
+
+Running this command will generate a `stories.json` file in the default build directory (`storybook-static`) with the information related to your Storybook. Hereβs an example of the file contents:
+
+
+
+
+
+
+
+Linking to a Storybook deployed using this approach will yield all the stories and other relevant information displayed in the UI.
+
+If you need, you can also add additional arguments to this command. For instance, if you want to generate the stories.json file into a custom directory you can use the following:
+
+```shell
+npx sb extract my-built-storybook-directory my-other-directory/stories.json
+```
+
+When executed it will lookup a built Storybook in the `my-built-storybook-directory` and create the `stories.json` file in the `my-other-directory` with all the necessary information.
+
+
+
+π‘ If you need to use the arguments, youβll need to include both of them or the command will fail.
+
+
-π‘ Note: If you're using yarn as a package manager, you'll need to adjust the command accordingly.
-
-
-### I see `ReferenceError: React is not defined` when using Storybook with Next.js
-
-Next automatically defines `React` for all of your files via a babel plugin. In Storybook, you can solve this either by:
-
-1. Adding `import React from 'react'` to your component files.
-2. Adding a `.babelrc` that includes [`babel-plugin-react-require`](https://www.npmjs.com/package/babel-plugin-react-require)
-
-### How do I setup Storybook to share Webpack configuration with Next.js?
-
-You can generally reuse webpack rules by placing them in a file that is `require()`-ed from both your `next.config.js` and your `.storybook/main.js` files. For example:
-
-```js
-module.exports = {
- webpackFinal: async (baseConfig) => {
- const nextConfig = require('/path/to/next.config.js');
-
- // merge whatever from nextConfig into the webpack config storybook will use
- return { ...baseConfig, ...nextConfig };
- },
-};
-```
-
-### How do I setup React Fast Refresh with Storybook?
-
-Fast refresh is an opt-in feature that can be used in Storybook React.
-There are two ways that you can enable it, go ahead and pick one:
-
-- You can set a `FAST_REFRESH` environment variable in your `.env` file:
-
-```
-FAST_REFRESH=true
-```
-
-- Or you can set the following properties in your `.storybook/main.js` files:
-
-```js
-module.exports = {
- reactOptions: {
- fastRefresh: true,
- },
-};
-```
-
-
-π‘ Note: Fast Refresh only works in development mode with React 16.10 or higher.
-
-
-### 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:
-
-1. You're trying to access addon channel (e.g., by calling `setOptions`) in a non-browser environment like Jest. You may need to add a channel mock:
-
- ```js
- import { addons, mockChannel } from '@storybook/addons';
-
- addons.setChannel(mockChannel());
- ```
-
-2. In React Native, it's a special case documented in [#1192](https://github.com/storybookjs/storybook/issues/1192)
-
-### Can I modify React component state in stories?
-
-Not directly. If you control the component source, you can do something like this:
-
-```js
-import React, { Component } from 'react';
-
-export default {
- title: 'MyComponent',
-};
-
-class MyComponent extends Component {
- constructor(props) {
- super(props);
-
- this.state = {
- someVar: 'defaultValue',
- ...props.initialState,
- };
- }
- // ...
-}
-
-export const defaultView = () => ;
-```
-
-### 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:
-
-```js
-// .storybook/main.js
-
-module.exports = {
- addons: ['@storybook/addon-controls'],
-};
-```
-
-### Why aren't the addons working in a composed Storybook?
-
-Composition is a new feature that we released with version 6.0, and there are still some limitations to it.
-
-For now, the addons you're using in a composed Storybook will not work.
-
-We're working on overcoming this limitation, and soon you'll be able to use them as if you are working with a non-composed Storybook.
-
-### Which community addons are compatible with the latest version of Storybook?
-
-Starting with Storybook version 6.0, we've introduced some great features aimed at streamlining your development workflow.
-
-With this, we would like to point out that if you plan on using addons created by our fantastic community, you need to consider that some of those addons might be working with an outdated version of Storybook.
-
-We're actively working to provide a better way to address this situation, but in the meantime, we would ask for a bit of caution on your end so that you don't run into unexpected problems. Let us know by creating an issue in the [Storybook repo](https://github.com/storybookjs/storybook/issues) so that we can gather information and create a curated list with those addons to help not only you but the rest of the community.
-
-### Is it possible to browse the documentation for past versions of Storybook?
-
-With the release of version 6.0, we updated our documentation as well. That doesn't mean that the old documentation was removed. We kept it to help you with your Storybook migration process. Use the content from the table below in conjunction with our migration guide .
-
-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) |
-| Writing 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) |
-| Writing 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 | [See current documentation](../writing-docs/doc-blocks.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 |
-| 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) |
-| Workflows | Publish Storybook | [See current documentation](./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) |
-| | Build pages and screens | [See current documentation](./build-pages-with-storybook.md) | Non existing feature or undocumented | Non existing feature or undocumented |
-| | Stories for multiple components | [See current documentation](./stories-for-multiple-components.md) | Non existing feature or undocumented | Non existing feature or undocumented |
-| | Testing with Storybook/Unit Testing | [See current documentation](./unit-testing.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) |
-| | Testing with Storybook/Visual Testing | [See current documentation](./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) |
-| | Testing with Storybook/Interaction Testing | [See current documentation](./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) |
-| | Testing with Storybook/Snapshot Testing | [See current documentation](./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) |
-| 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) |
-
-
-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.
-
-
-### What icons are available for my toolbar or my addon?
-
-With the [`@storybook/components`](https://www.npmjs.com/package/@storybook/components) package, you get a set of icons that you can use to customize your UI. Use the table below as a reference while writing your addon or defining your Storybook global types.
-Go through this [story](https://5a375b97f4b14f0020b0cda3-wbeulgbetj.chromatic.com/?path=/story/basics-icon--labels) to see how the icons look.
-
-| accessibility | accessibilityalt | add | admin | alert |
-| -------------- | ---------------- | ------------ | ------------ | ------------- |
-| arrowdown | arrowleft | arrowleftalt | arrowright | arrowrightalt |
-| arrowup | back | basket | batchaccept | batchdeny |
-| beaker | bell | bitbucket | book | bookmark |
-| bookmarkhollow | bottombar | box | branch | browser |
-| button | calendar | camera | category | certificate |
-| check | chevrondown | chromatic | circle | circlehollow |
-| close | closeAlt | cog | collapse | comment |
-| commit | compass | component | contrast | copy |
-| cpu | credit | cross | dashboard | database |
-| delete | discord | docchart | doclist | document |
-| download | edit | ellipsis | email | expand |
-| expandalt | eye | eyeclose | facebook | facehappy |
-| faceneutral | facesad | filter | flag | folder |
-| form | gdrive | github | gitlab | globe |
-| google | graphbar | graphline | graphql | grid |
-| grow | heart | hearthollow | home | hourglass |
-| info | key | lightning | lightningoff | link |
-| listunordered | location | lock | markup | medium |
-| memory | menu | merge | mirror | mobile |
-| nut | outbox | outline | paintbrush | paperclip |
-| paragraph | phone | photo | pin | play |
-| plus | power | print | proceed | profile |
-| pullrequest | question | redirect | redux | reply |
-| repository | requestchange | rss | search | share |
-| sharealt | shield | sidebar | sidebaralt | speaker |
-| star | starhollow | stop | structure | subtract |
-| support | switchalt | sync | tablet | thumbsup |
-| time | timer | transfer | trash | twitter |
-| undo | unfold | unlock | upload | user |
-| useradd | useralt | users | video | watch |
-| wrench | youtube | zoom | zoomout | zoomreset |
-
-### I see a "No Preview" error with a Storybook production build
-
-If you're using the `serve` package to verify your production build of Storybook, you'll get that error. It relates to how `serve` handles rewrites. For instance, `/iframe.html` is rewritten into `/iframe`, and you'll get that error.
-
-We recommend that you use [http-server](https://www.npmjs.com/package/http-server) instead and use the following command to preview Storybook:
-
-```shell
-npx http-server storybook-static
-```
-
-
-Suppose you don't want to run the command above frequently. Add http-server as a development dependency and create a new script to preview your production build of Storybook.
-
-
-### 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.
-
-### Is snapshot testing with Storyshots supported for Vue 3?
-
-Yes, with the release of version 6.2, the [`Storyshots addon`](https://www.npmjs.com/package/@storybook/addon-storyshots) will automatically detect Vue 3 projects.
-
-If you run into a situation where this is not the case, you can adjust the `config` object and manually specify the framework (e.g., `vue3`).
-
-See our documentation on how to customize the [Storyshots configuration](./snapshot-testing.md).
-
-### 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.
-
-### Why are my mocked GraphQL queries failing with Storybook's MSW addon?
-
-If you're working with Vue 3, you'll need to install [`@vue/apollo-composable`](https://www.npmjs.com/package/@vue/apollo-composable). With Svelte, you'll need to install [`@rollup/plugin-replace`](https://www.npmjs.com/package/@rollup/plugin-replace) and update your `rollup.config` file to the following:
-
-```js
-// rollup.config
-
-// Boilerplate imports
-
-import replace from '@rollup/plugin-replace';
-const production = !process.env.ROLLUP_WATCH;
-
-// Remainder rollup.config implementation
-
-export default {
- input: 'src/main.js',
- output: {
- sourcemap: true,
- format: 'iife',
- name: 'app',
- file: 'public/build/bundle.js',
- },
- plugins: [
- // Other plugins
-
- // Configures the replace plugin to allow Grapqhl Queries to work properly
- replace({
- 'process.env.NODE_ENV': JSON.stringify('development'),
- }),
-};
-```
-
-With Angular, the most common issue is the placement of the `mockServiceWorker.js` file. Use this [example](https://github.com/mswjs/examples/tree/master/examples/rest-angular/) as a point of reference.
-
-### Can I use other GraphQL providers with Storybook's MSW addon?
-
-Yes, check the [addon's examples](https://github.com/mswjs/msw-storybook-addon/tree/master/packages/docs/src/demos) to learn how to integrate different providers.
-
-### Can I mock GraphQL mutations with Storybook's MSW addon?
-
-No, currently, the MSW addon only has support for GraphQL queries. If you're interested in including this feature, open an issue in the [MSW addon repository](https://github.com/mswjs/msw-storybook-addon) and follow up with the maintainer.
-
-### Why aren't my code blocks highlighted with Storybook MDX
-
-Out of the box, Storybook provides syntax highlighting for a set of languages (e.g., Javascript, Markdown, CSS, HTML, Typescript, GraphQL) that you can use with your code blocks. If you're writing your custom code blocks with MDX, you'll need to import the syntax highlighter manually. For example, if you're adding a code block for SCSS, adjust your story to the following:
-
-
-
-
-
-
-
-
-π‘ Check react-syntax-highlighter's documentation for a list of available languages.
-
-
-Applying this small change will enable you to add syntax highlight for SCSS or any other language available.
-
-### How can my code detect if it is running in Storybook?
-
-You can do this by checking the value of `process.env.STORYBOOK`, which will
-equal `'true'` when running in Storybook. Be careful β `process` may be
-undefined when your code runs outside of Storybook.
-
-```javascript
-export function isRunningInStorybook() {
- try {
- if (process.env.STORYBOOK) return true;
- } catch {
- // A ReferenceError will be thrown if process is undefined
- }
-
- return false;
-}
-```
-
-This works because Babel replaces `process.env.STORYBOOK` with the value of the
-`STORYBOOK` environment variable. Because this is done through a Babel plugin,
-the following will **NOT** work:
-
-```javascript
-export function isRunningInStorybook() {
- return typeof process?.env?.STORYBOOK !== 'undefined';
- // ReferenceError: process is not defined
-}
-```
\ No newline at end of file
diff --git a/docs/workflows/package-composition.md b/docs/workflows/package-composition.md
deleted file mode 100644
index 86c18dc39162..000000000000
--- a/docs/workflows/package-composition.md
+++ /dev/null
@@ -1,88 +0,0 @@
----
-title: 'Package Composition'
----
-
-Storybook is widely used by component libraries and design systems. Design system authors can automatically compose their design systems inside their consumerβs Storybooks.
-
-For example, if you use a design system package, its stories can appear alongside your own. That makes it convenient to cross reference usage documentation without leaving Storybook.
-
-## For package consumers
-
-Composition happens automatically if the package [supports](#for-package-authors) it. When you install the package, Storybook will load its stories alongside your own.
-
-
-
-### Configuring
-
-If you want to configure how the composed Storybook behaves, you can disable the `ref` element in your [`.storybook/main.js`](../configure/overview.md#configure-story-rendering)
-
-
-
-
-
-
-
-### Changing versions
-
-Change the version of the composed Storybook to see how the library evolves. This requires [configuration](#providing-a-version-section) from the package author.
-
-
-
-## For package authors
-
-Component library authors can expand adoption by composing their components in their consumerβs Storybooks.
-
-Add a `storybook` property in your published `package.json`that contains an object with a `url` field. Point the URL field to a published Storybook at the version you want.
-
-```json
-// Your component libraryβs package.json
-{
- "storybook": {
- "url": "https://host.com/your-storybook-for-this-version"
- }
-}
-```
-
-### Automatic version selection
-
-If you are using a [CHP level 1 service](#chp-level-1) for hosting (such as [Chromatic.com](https://www.chromatic.com/)), you can provide a single URL for your Storybook in the `storybook.url` field. You do not need to change the URL each time you publish a new version. Storybook will automatically find the correct URL for your package.
-
-For example, for Chromatic, you might do:
-
-```json
-{
- "storybook": {
- "url": "https://master--xyz123.chromatic.com"
- }
-}
-```
-
-In this example `xyz123` is your projectβs id. Storybook will automatically compose in the Storybook published to that project corresponding to the version the user has installed.
-
-### Providing a version section
-
-Similarly, if you're using a [CHP level 1 service](#chp-level-1) (such as chromatic.com) for hosting, you can provide a list of versions for the user to [choose from](#changing-versions) to experiment with other versions of your package.
-
-## Component Hosting Protocol (CHP)
-
-Storybook can communicate with services that host built Storybooks online. This enables features such as [Composition](./storybook-composition). We categorize services via compliance with the "Component Hosting Protocol" (CHP) with various levels of support in Storybook.
-
-### CHP level 1
-
-The service serves uploaded Storybooks and makes the following available:
-
-- Versioned endpoints, URLs that resolve to different published Storybooks depending on a `version=x.y.z` query parameter (where `x.y.z` is the released version of the package).
-- Support for `/stories.json`
-- Support for `/metadata.json` and the `releases` field.
-
-Examples of such services: [chromatic.com](https://www.chromatic.com/).
-
-### CHP level 0
-
-The service can serve uploaded Storybooks. There is no special integration with Storybook APIs.
-
-Examples of such services: [Netlify](https://www.netlify.com/) and [S3](https://aws.amazon.com/en/s3/).
diff --git a/docs/workflows/publish-storybook.md b/docs/workflows/publish-storybook.md
deleted file mode 100644
index c9692969c105..000000000000
--- a/docs/workflows/publish-storybook.md
+++ /dev/null
@@ -1,74 +0,0 @@
----
-title: 'Publish Storybook'
----
-
-Storybook is more than a UI component development tool. Teams also publish Storybook online to review and collaborate on works in progress. That allows developers, designers, and PMs to check if UI looks right without touching code or needing a local dev environment.
-
-## Build Storybook as a static web application
-
-First, weβll need to build Storybook as a static web application using `build-storybook`, a command thatβs installed by default. If you're using Yarn run the following command:
-
-
-π‘ Note: Be careful when running the build-storybook command with the -o flag as you might unknowingly overwrite essential files and folders. For instance avoid running build-storybook -o ./ as this will replace the root project contents with the output of the command.
-
-
-```shell
-yarn build-storybook -o ./path/to/build
-```
-
-If you're using npm run the following command:
-
-```shell
-npm run build-storybook -- -o ./path/to/build
-```
-
-Storybook will create a static web application at the path you specify. This can be served by any web server. Try it out locally by running:
-
-```shell
-npx http-server ./path/to/build
-```
-
-
-
-Asides from the `-o` flag, you can also include other flags to build Storybook, for instance if you're using [Docs](../writing-docs/introduction.md), you can append the `--docs` flag and Storybook will build your [MDX](../writing-docs/mdx.md) and [CSF](../writing-stories/introduction.md#component-story-format) stories into a rich and interactive documentation.
-
-You can learn more about these flag options [here](../api/cli-options.md).
-
-
- We would like to point out that there's some limitations to composition. For now addons in composed Storybooks will not work as they do in non composed Storybooks.
-
-
-## Compose local Storybooks
-
-You can also compose Storybook that are running locally. For instance, if you have a React Storybook and a Angular Storybook running on different ports:
-
-
-
-
-
-
-
-This composes the React and Angular Storybooks into your current Storybook. When either code base changes, hot-module-reload will work perfectly. That enables you to develop both frameworks in sync.
-
-## Compose Storybooks per environment
-
-You can also compose Storybooks based on the current development environment. For instance if the project you're working has already a published Storybook, but also includes a version with cutting edge features not yet released you can adjust the composition based on that. For instance:
-
-
-
-
-
-
-
-
-
-π‘ Note: Same as with the majority of fields available within main.js, the refs field can also be a function and accept a config parameter that contains Storybook's configuration object. See the related [webpack documentation](../configure/webpack.md#extending-storybooks-webpack-config).
-
-
-
-### Improve your Storybook composition
-
-So far we've covered how we can use composition with local or published Storybooks. One thing worth mentioning as your Storybook will grow in time with your own stories, or through composition with other Storybooks, is that you can optimize the deployment process by including the following command in your workflow, run from your project root:
-
-```shell
-npx sb extract
-```
-
-
-
-`sb extract` uses [Puppeteer](https://www.npmjs.com/package/puppeteer), which downloads and installs Chromium. Specify your own locally-installed Chromium executable by setting the environment variable `SB_CHROMIUM_PATH`.
-
-
-
-Using this command will generate a `stories.json` file in the default build directory (`storybook-static`) with information regarding your Storybook. Here's how it might look:
-
-
-
-
-
-
-
-Once you add a reference to a Storybook deployed using this method, almost immediately you'll see all the stories and other relevant information displayed in the UI.
-
-If required, you can also add additional arguments to this command. You can use the following to generate the `stories.json` file to a custom directory:
-
-```shell
-npx sb extract my-built-storybook-directory my-other-directory/stories.json
-```
-
-Once the command executes it will look for a built Storybook in the `my-built-storybook-directory` and create the `stories.json` file in `my-other-directory`.
-
-
-
-If you need to use arguments, you'll need to use both of them, or the command will not be executed properly.
-
-
diff --git a/docs/writing-docs/build-documentation.md b/docs/writing-docs/build-documentation.md
index 64eee6340e25..fcb87e06d888 100644
--- a/docs/writing-docs/build-documentation.md
+++ b/docs/writing-docs/build-documentation.md
@@ -4,7 +4,7 @@ title: 'Preview and build docs'
-π‘ NOTE: Currently there's an issue when using MDX stories with IE11. This issue does not apply to [DocsPage](./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](./docs-page.md). If you're interested in helping us fix this issue, read our Contribution guidelines and submit a pull request.
@@ -23,7 +23,7 @@ At any point during your development, you can preview the documentation you've w
```
-π‘ Note: The --no-manager-cache flag is required to generate a successful preview of the documentation. But it comes with a cost as you're disabling Storybook's internal caching mechanism which can lead to increased loading times.
+π‘ The --no-manager-cache flag is required to generate a successful preview of the documentation. But it comes with a cost as you're disabling Storybook's internal caching mechanism which can lead to increased loading times.
Depending on your configuration, when you execute the `storybook-docs` script. Storybook will be put into documentation mode and will generate a different build.
@@ -40,7 +40,7 @@ There's some caveats to this build mode, as to the normal Storybook build:
## Publish Storybook's documentation
-You can also publish your documentation, the same you would [publish](../workflows/publish-storybook.md) your Storybook. You can use the `--docs` flag with `build-storybook` command. We recommend as well including it as a script in your `package.json` file:
+You can also publish your documentation, the same you would [publish](../sharing/publish-storybook.md) your Storybook. You can use the `--docs` flag with `build-storybook` command. We recommend as well including it as a script in your `package.json` file:
```json
{
diff --git a/docs/writing-docs/doc-blocks.md b/docs/writing-docs/doc-blocks.md
index a8ac274b5b4e..d6fa250734fb 100644
--- a/docs/writing-docs/doc-blocks.md
+++ b/docs/writing-docs/doc-blocks.md
@@ -4,7 +4,7 @@ title: 'Doc Blocks'
-π‘ NOTE: Currently there's an issue when using MDX stories with IE11. This issue does not apply to [DocsPage](./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](./docs-page.md). If you're interested in helping us fix this issue, read our Contribution guidelines and submit a pull request.
-π‘ NOTE: Currently there's an issue when using MDX stories with IE11. This issue does not apply to DocsPage. 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. If you're interested in helping us fix this issue, read our Contribution guidelines and submit a pull request.
diff --git a/docs/writing-docs/introduction.md b/docs/writing-docs/introduction.md
index 5131824ef681..449a06a7c52c 100644
--- a/docs/writing-docs/introduction.md
+++ b/docs/writing-docs/introduction.md
@@ -4,7 +4,7 @@ title: 'How to document components'
-π‘ NOTE: Currently there's an issue when using MDX stories with IE11. This issue does not apply to [DocsPage](./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](./docs-page.md). If you're interested in helping us fix this issue, read our Contribution guidelines and submit a pull request.
-π‘ NOTE: Currently there's an issue when using MDX stories with IE11. This issue does not apply to [Docs page](./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 [Docs page](./docs-page.md). If you're interested in helping us fix this issue, read our Contribution guidelines and submit a pull request.
@@ -210,7 +210,7 @@ You can also use anchors to target a specific section of a page:
```
-π‘ Note: By applying this pattern with the Controls addon, all anchors will be ignored in Canvas based on how Storybook handles URLs to track the args values.
+π‘ By applying this pattern with the Controls addon, all anchors will be ignored in Canvas based on how Storybook handles URLs to track the args values.
diff --git a/docs/writing-stories/args.md b/docs/writing-stories/args.md
index 522d01702e8b..4fd864f09126 100644
--- a/docs/writing-stories/args.md
+++ b/docs/writing-stories/args.md
@@ -38,7 +38,7 @@ To define the args of a single story, use the `args` CSF story key:
-These args will only apply to the story for which they are attached, although you can [reuse](../workflows/build-pages-with-storybook.md#args-composition-for-presentational-screens) them via JavaScript object reuse:
+These args will only apply to the story for which they are attached, although you can [reuse](./build-pages-with-storybook.md#args-composition-for-presentational-screens) them via JavaScript object reuse:
@@ -92,7 +92,7 @@ You can separate the arguments to a story to compose in other stories. Here's ho
-π‘Note: If you find yourself re-using the same args for most of a component's stories, you should consider using [component-level args](#component-args).
+π‘ If you find yourself re-using the same args for most of a component's stories, you should consider using [component-level args](#component-args).
diff --git a/docs/workflows/argstable-subcomponents.png b/docs/writing-stories/argstable-subcomponents.png
similarity index 100%
rename from docs/workflows/argstable-subcomponents.png
rename to docs/writing-stories/argstable-subcomponents.png
diff --git a/docs/workflows/build-pages-with-storybook.md b/docs/writing-stories/build-pages-with-storybook.md
similarity index 98%
rename from docs/workflows/build-pages-with-storybook.md
rename to docs/writing-stories/build-pages-with-storybook.md
index f97d885891e5..d1343a48a5a1 100644
--- a/docs/workflows/build-pages-with-storybook.md
+++ b/docs/writing-stories/build-pages-with-storybook.md
@@ -113,7 +113,7 @@ To test your screen with the mocked data, you could write a similar set of stori
-π‘ Note: This example details how you can mock the REST request with fetch. Similar HTTP clients such as axios can be used as well.
+π‘ This example details how you can mock the REST request with fetch. Similar HTTP clients such as axios can be used as well.
The mocked data (i.e., `TestData`) will be injected via [parameters](./writing-stories/parameters), enabling you to configure it per-story basis.
diff --git a/docs/writing-stories/decorators.md b/docs/writing-stories/decorators.md
index 26c3b2203931..52bcad0f61d1 100644
--- a/docs/writing-stories/decorators.md
+++ b/docs/writing-stories/decorators.md
@@ -71,12 +71,12 @@ The second argument to a decorator function is the **story context** which in pa
- `viewMode`- Storybook's current active window (e.g., canvas, docs).
-π‘ Note: This pattern can also be applied to your own stories. Some of Storybook's supported frameworks already use it (e.g., vue 2).
+π‘ This pattern can also be applied to your own stories. Some of Storybook's supported frameworks already use it (e.g., vue 2).
### Using decorators to provide data
-If your components are βconnectedβ and require side-loaded data to render, you can use decorators to provide that data in a mocked way without having to refactor your components to take that data as an arg. There are several techniques to achieve this. Depending on exactly how you are loading that data -- read more in the [building pages in Storybook](../workflows/build-pages-with-storybook.md) section.
+If your components are βconnectedβ and require side-loaded data to render, you can use decorators to provide that data in a mocked way without having to refactor your components to take that data as an arg. There are several techniques to achieve this. Depending on exactly how you are loading that data -- read more in the [building pages in Storybook](./build-pages-with-storybook.md) section.
## Story decorators
diff --git a/docs/writing-stories/introduction.md b/docs/writing-stories/introduction.md
index 676cccbfb088..4ff6d6e5f40a 100644
--- a/docs/writing-stories/introduction.md
+++ b/docs/writing-stories/introduction.md
@@ -63,7 +63,7 @@ Use the _named_ exports of a CSF file to define your componentβs stories. We r
-π‘ Note: Using framework specific elements such as [React Hooks](https://reactjs.org/docs/hooks-intro.html) alongside your stories is a valid approach, but you should treat them as an advanced use case. We recommend using [args](./args.md) as much as possible when writing your own stories.
+π‘ Using framework specific elements such as [React Hooks](https://reactjs.org/docs/hooks-intro.html) alongside your stories is a valid approach, but you should treat them as an advanced use case. We recommend using [args](./args.md) as much as possible when writing your own stories.
@@ -136,7 +136,9 @@ Refine this pattern by introducing `args` for your component's stories. It reduc
-π‘ Note:Template.bind({}) is a standard JavaScript technique for making a copy of a function. We copy the Template so each exported story can set its own properties on it.
+
+π‘ `Template.bind({})` is a [standard JavaScript technique](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/bind) for making a copy of a function. We copy the `Template` so each exported story can set its own properties on it.
+
By introducing args into your component's stories, you're not only reducing the amount of code you need to write, but you're also decreasing data duplication, as shown by spreading the `Primary` story's args into the other stories.
@@ -318,6 +320,6 @@ You can also reuse stories from the child `ListItem` in your `List` component. T
-π‘ Note that there are disadvantages in writing stories like this as you cannot take full advantage of the args mechanism and composing args as you build even more complex composite components. For more discussion, see the [multi component stories](../workflows/stories-for-multiple-components.md) workflow documentation.
+π‘ Note that there are disadvantages in writing stories like this as you cannot take full advantage of the args mechanism and composing args as you build even more complex composite components. For more discussion, see the [multi component stories](../writing-stories/stories-for-multiple-components.md) workflow documentation.
diff --git a/docs/writing-stories/play-function.md b/docs/writing-stories/play-function.md
index ad2c71cbdec2..5d4e20da42ab 100644
--- a/docs/writing-stories/play-function.md
+++ b/docs/writing-stories/play-function.md
@@ -187,7 +187,7 @@ If you need, you can also adjust your `play` function to find elements based on
## Working with the Canvas
diff --git a/docs/workflows/stories-for-multiple-components.md b/docs/writing-stories/stories-for-multiple-components.md
similarity index 100%
rename from docs/workflows/stories-for-multiple-components.md
rename to docs/writing-stories/stories-for-multiple-components.md
diff --git a/docs/writing-tests/importing-stories-in-tests.md b/docs/writing-tests/importing-stories-in-tests.md
index 99da8acd4208..385416572dc7 100644
--- a/docs/writing-tests/importing-stories-in-tests.md
+++ b/docs/writing-tests/importing-stories-in-tests.md
@@ -64,7 +64,7 @@ Update your test script to include the configuration file:
-π‘ Note: You can use Testing Library out-of-the-box with [Storybook Interaction Testing](./interaction-testing.md).
+π‘ You can use Testing Library out-of-the-box with [Storybook Interaction Testing](./interaction-testing.md).
@@ -108,7 +108,7 @@ An example of an end-to-end test with Cypress and Storybook is testing a login c
- π‘ Note: the play function contains small snippets of code that run after the story renders. It allows you to sequence interactions in stories.
+ π‘ The play function contains small snippets of code that run after the story renders. It allows you to sequence interactions in stories.
@@ -150,7 +150,7 @@ A real-life scenario of user flow testing with Playwright would be how to test a
- π‘ Note: the play function contains small snippets of code that run after the story renders. It allows you to sequence interactions in stories.
+ π‘ The play function contains small snippets of code that run after the story renders. It allows you to sequence interactions in stories.
With Playwright, you can write a test to check if the inputs are filled and match the story:
diff --git a/docs/writing-tests/interaction-testing.md b/docs/writing-tests/interaction-testing.md
index 33c89204dcdd..2a0d6fbf96ff 100644
--- a/docs/writing-tests/interaction-testing.md
+++ b/docs/writing-tests/interaction-testing.md
@@ -83,7 +83,7 @@ Since Storybook is a webapp, anyone with the URL can reproduce the error with th
-Streamline interaction testing further by automatically [publishing Storybook](../workflows/publish-storybook.md) in pull requests. That gives teams a universal reference point to test and debug stories.
+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.
---
diff --git a/docs/writing-tests/introduction.md b/docs/writing-tests/introduction.md
index 4ad6cbe44978..776ed827f50d 100644
--- a/docs/writing-tests/introduction.md
+++ b/docs/writing-tests/introduction.md
@@ -8,7 +8,7 @@ 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](../workflows/publish-storybook.md) your Storybook online to share reproductions and get teammates involved.
+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.
diff --git a/docs/writing-tests/snapshot-testing.md b/docs/writing-tests/snapshot-testing.md
index 2f9c9d000d6f..0bf019e40a3a 100644
--- a/docs/writing-tests/snapshot-testing.md
+++ b/docs/writing-tests/snapshot-testing.md
@@ -35,7 +35,7 @@ Add a test file to your environment with the following contents to configure Sto
-π‘ NOTE: You can name the test file differently to suit your needs. Bear in mind that it requires to be picked up by Jest.
+π‘ You can name the test file differently to suit your needs. Bear in mind that it requires to be picked up by Jest.
Run your first test. Storyshots will recognize your stories (based on [.storybook/main.js's setup](https://storybook.js.org/docs/react/configure/story-rendering)) and save them in the **snapshots** directory.
diff --git a/docs/writing-tests/visual-testing.md b/docs/writing-tests/visual-testing.md
index e2941d540cb1..6baa917216a3 100644
--- a/docs/writing-tests/visual-testing.md
+++ b/docs/writing-tests/visual-testing.md
@@ -35,7 +35,9 @@ npx chromatic --project-token
```
- Note: Don't forget to replace your-project-token with the one provided by Chromatic.
+
+ Don't forget to replace `your-project-token` with the one provided by Chromatic.
+