GitHub/storybook
1
0
Fork 0
mirror of https://github.com/storybookjs/storybook.git synced 2025-04-04 19:11:08 +08:00
Code Issues Packages Projects Releases Wiki Activity

Merge branch 'future/base' into future/SB-444

Browse Source 
# Conflicts:
#	docs/snippets/html/button-story-with-args.ts.mdx
This commit is contained in:
Norbert de Langen 2022-06-29 09:56:16 +02:00
commit 83759ea727
No known key found for this signature in database
GPG Key ID: FD0E78AF9A837762
56 changed files with 722 additions and 245 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
addons/interactions/package.json
View File

@ -52,7 +52,7 @@
},
"devDependencies": {
"@storybook/jest": "^0.0.5",
"@storybook/testing-library": "^0.0.12",
"@storybook/testing-library": "0.0.14-next.0",
"formik": "^2.2.9"
},
"peerDependencies": {

4
docs/configure/overview.md
View File

@ -28,7 +28,7 @@ The `main.js` configuration file is a [preset](../addons/addon-types.md) and, as
- `stories` - an array of globs that indicates the [location of your story files](#configure-story-loading), relative to `main.js`.
- `addons` - a list of the [addons](https://storybook.js.org/addons/) you are using.
- `webpackFinal` - custom [webpack configuration](./webpack.md#extending-storybooks-webpack-config).
- `webpackFinal` - custom [webpack configuration](../builders/webpack.md#extending-storybooks-webpack-config).
- `babel` - custom [babel configuration](./babel.md).
- `framework` - framework specific configurations to help the loading and building process.
@ -185,7 +185,7 @@ You can also use Storybook's API to configure your project with TypeScript. Unde
| `features` | Enables Storybook's additional features.<br/> See table below for a list of available features `features: { storyStoreV7: true }` |
| `refs` | Configures [Storybook composition](../sharing/storybook-composition.md) <br/> `refs:{ example: { title: 'ExampleStorybook', url:'https://your-url.com' } }` |
| `logLevel` | Configures Storybook's logs in the browser terminal. Useful for debugging <br/> `logLevel: 'debug'` |
| `webpackFinal` | Customize Storybook's [Webpack](./webpack.md) setup <br/> `webpackFinal: async (config:any) => { return config; }` |
| `webpackFinal` | Customize Storybook's [Webpack](../builders/webpack.md) setup <br/> `webpackFinal: async (config:any) => { return config; }` |
| `env` | Defines custom Storybook [environment variables](./environment-variables.md#using-storybook-configuration). <br/> `env: (config) => ({...config, EXAMPLE_VAR: 'Example var' }),` |
## Configure story rendering

2
docs/configure/story-rendering.md
View File

@ -2,7 +2,7 @@
title: 'Story rendering'
---
In Storybook, your stories render in a particular “preview” iframe (Canvas tab) inside the larger Storybook web application. The JavaScript build configuration of the preview is controlled by a [webpack](./webpack.md) config, but you also may want to directly control the rendered HTML to help your stories render correctly.
In Storybook, your stories render in a particular “preview” iframe (Canvas tab) inside the larger Storybook web application. The JavaScript build configuration of the preview is controlled by a [webpack](../builders/webpack.md) config, but you also may want to directly control the rendered HTML to help your stories render correctly.
## Adding to &#60;head&#62;

4
docs/configure/styling-and-css.md
View File

@ -10,7 +10,7 @@ CSS-in-JS libraries are designed to use basic JavaScript, and they often work in
### Importing CSS files
If your component files import their CSS, Storybook's webpack configuration will work out of the box. The noticeable exception to this is if you're using a CSS precompiler. In this case, you can either install and configure a Storybook preset (e.g., [SCSS preset](https://github.com/storybookjs/presets/tree/master/packages/preset-scss)), or customize [Storybook's webpack configuration](./webpack.md#extending-storybooks-webpack-config) and include the appropriate loader.
If your component files import their CSS, Storybook's webpack configuration will work out of the box. The noticeable exception to this is if you're using a CSS precompiler. In this case, you can either install and configure a Storybook preset (e.g., [SCSS preset](https://github.com/storybookjs/presets/tree/master/packages/preset-scss)), or customize [Storybook's webpack configuration](../builders/webpack.md#extending-storybooks-webpack-config) and include the appropriate loader.
<FeatureSnippets paths={['configure/css-troubleshooting/angular.mdx']} />
@ -18,4 +18,4 @@ To use your CSS in all stories, you import it in [`.storybook/preview.js`](./ove
### Adding webfonts
If you need webfonts to be available, you may need to add some code to the [`.storybook/preview-head.html`](./story-rendering.md#adding-to-head) file. We recommend including any assets with your Storybook if possible, in which case you likely want to configure the [static file location](./images-and-assets.md#serving-static-files-via-storybook-configuration).
If you need webfonts to be available, you may need to add some code to the [`.storybook/preview-head.html`](./story-rendering.md#adding-to-head) file. We recommend including any assets with your Storybook if possible, in which case you likely want to configure the [static file location](./images-and-assets.md#serving-static-files-via-storybook-configuration).

138
docs/faq.md
View File

@ -154,72 +154,70 @@ With the release of version 6.0, we updated our documentation as well. That does
We're only covering versions 5.3 and 5.0 as they were important milestones for Storybook. If you want to go back in time a little more, you'll have to check the specific release in the monorepo.
| Section | Page | Current Location | Version 5.3 location | Version 5.0 location |
|------------------|-------------------------------------------|-----------------------------------------------------------------------------------|----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|----------------------------------------------------------------------------------------------------------------------------------------------------------|
| Get started | Install | [See current documentation](./get-started/install.md) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/guides/quick-start-guide) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.0/docs/src/pages/guides/quick-start-guide) |
| | What's a story | [See current documentation](./get-started/whats-a-story.md) | [See versioned documentation for your framework](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/guides) | [See versioned documentation for your framework](https://github.com/storybookjs/storybook/tree/release/5.0/docs/src/pages/guides) |
| | Browse Stories | [See current documentation](./get-started/browse-stories.md) | [See versioned documentation for your framework](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/guides) | [See versioned documentation for your framework](https://github.com/storybookjs/storybook/blob/release/5.0/docs/src/pages/guides) |
| | Setup | [See current documentation](./get-started/setup.md) | [See versioned documentation for your framework](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/guides) | [See versioned documentation for your framework](https://github.com/storybookjs/storybook/tree/release/5.0/docs/src/pages/guides) |
| Write stories | Introduction | [See current documentation](./writing-stories/introduction.md) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/basics/writing-stories) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.0/docs/src/pages/basics/writing-stories) |
| | Parameters | [See current documentation](./writing-stories/parameters.md) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/basics/writing-stories/index.md#parameters) | Non existing feature or undocumented |
| | Decorators | [See current documentation](./writing-stories/decorators.md) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/basics/writing-stories/index.md#decorators) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.0/docs/src/pages/basics/writing-stories/index.md#using-decorators) |
| | Naming components and hierarchy | [See current documentation](./writing-stories/naming-components-and-hierarchy.md) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/basics/writing-stories) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.0/docs/src/pages/basics/writing-stories) |
| | Build pages and screens | [See current documentation](./writing-stories/build-pages-with-storybook.md) | Non existing feature or undocumented | Non existing feature or undocumented |
| | Stories for multiple components | [See current documentation](./writing-stories/stories-for-multiple-components.md) | Non existing feature or undocumented | Non existing feature or undocumented |
| Write docs | DocsPage | [See current documentation](./writing-docs/docs-page.md) | See versioned addon documentation | Non existing feature or undocumented |
| | MDX | [See current documentation](./writing-docs/mdx.md) | See versioned addon documentation | Non existing feature or undocumented |
| | Doc Blocks/Argstable | [See current documentation](./writing-docs/doc-block-argstable.md) | [See versioned addon documentation](https://github.com/storybookjs/storybook/tree/release/5.3/addons/docs/) | Non existing feature or undocumented |
| | Doc Blocks/Canvas | [See current documentation](./writing-docs/doc-block-canvas.md) | [See versioned addon documentation](https://github.com/storybookjs/storybook/tree/release/5.3/addons/docs/) | Non existing feature or undocumented |
| | Doc Blocks/Color Palette | [See current documentation](./writing-docs/doc-block-colorpalette.md) | [See versioned addon documentation](https://github.com/storybookjs/storybook/tree/release/5.3/addons/docs/) | Non existing feature or undocumented |
| | Doc Blocks/Description | [See current documentation](./writing-docs/doc-block-description.md) | [See versioned addon documentation](https://github.com/storybookjs/storybook/tree/release/5.3/addons/docs/) | Non existing feature or undocumented |
| | Doc Blocks/Icon Gallery | [See current documentation](./writing-docs/doc-block-icongallery.md) | [See versioned addon documentation](https://github.com/storybookjs/storybook/tree/release/5.3/addons/docs/) | Non existing feature or undocumented |
| | Doc Blocks/Source | [See current documentation](./writing-docs/doc-block-source.md) | [See versioned addon documentation](https://github.com/storybookjs/storybook/tree/release/5.3/addons/docs/) | Non existing feature or undocumented |
| | Doc Blocks/Story | [See current documentation](./writing-docs/doc-block-story.md) | [See versioned addon documentation](https://github.com/storybookjs/storybook/tree/release/5.3/addons/docs/) | Non existing feature or undocumented |
| | Doc Blocks/Typeset | [See current documentation](./writing-docs/doc-block-typeset.md) | [See versioned addon documentation](https://github.com/storybookjs/storybook/tree/release/5.3/addons/docs/) | Non existing feature or undocumented |
| | Preview and build docs | [See current documentation](./writing-docs/build-documentation.md) | Non existing feature or undocumented | Non existing feature or undocumented |
| Testing | Visual tests | [See current documentation](./writing-tests/visual-testing.md) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/testing/automated-visual-testing) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.0/docs/src/pages/testing/automated-visual-testing) |
| | Accessibility tests | [See current documentation](./writing-tests/accessibility-testing.md) | Non existing feature or undocumented | Non existing feature or undocumented |
| | Interaction tests | [See current documentation](./writing-tests/interaction-testing.md) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/testing/interaction-testing) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.0/docs/src/pages/testing/interaction-testing) |
| | Snapshot tests | [See current documentation](./writing-tests/snapshot-testing.md) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/testing/structural-testing) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.0/docs/src/pages/testing/structural-testing) |
| | Import stories in tests | [See current documentation](./writing-tests/importing-stories-in-tests.md) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/testing/react-ui-testing) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.0/docs/src/pages/testing/react-ui-testing) |
| Sharing | Publish Storybook | [See current documentation](./sharing/publish-storybook.md) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/basics/exporting-storybook) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.0/docs/src/pages/basics/exporting-storybook) |
| | Embed | [See current documentation](./sharing/embed.md) | Non existing feature or undocumented | Non existing feature or undocumented |
| | Composition | [See current documentation](./sharing/storybook-composition.md) | Non existing feature or undocumented | Non existing feature or undocumented |
| | Package Composition | [See current documentation](./sharing/package-composition.md) | Non existing feature or undocumented | Non existing feature or undocumented |
| Essential addons | Controls | [See current documentation](./essentials/controls.md) | Controls are specific to version 6.0 see [Knobs versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/addons/knobs) | Controls are specific to version 6.0 see [Knobs versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.0/addons/knobs) |
| | Actions | [See current documentation](./essentials/actions.md) | [See addon versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/addons/actions) | [See addon versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.0/addons/actions) |
| | Viewport | [See current documentation](./essentials/viewport.md) | [See addon versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/addons/viewport) | [See addon versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.0/addons/viewport) |
| | Backgrounds | [See current documentation](./essentials/backgrounds.md) | [See addon versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/addons/backgrounds) | [See addon versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.0/addons/backgrounds) |
| | Toolbars and globals | [See current documentation](./essentials/toolbars-and-globals.md) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/basics/toolbar-guide) | Non existing feature or undocumented |
| Configure | Overview | [See current documentation](./configure/overview.md) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/configurations/overview) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.0/docs/src/pages/basics/writing-stories) |
| | Integration/Babel | [See current documentation](./configure/babel.md) | See versioned documentation here and [here](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/configurations/custom-babel-config) | See versioned documentation here and [here](https://github.com/storybookjs/storybook/tree/release/5.0/docs/src/pages/configurations/custom-babel-config) |
| | Integration/Typescript | [See current documentation](./configure/typescript.md) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/configurations/typescript-config) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.0/docs/src/pages/configurations/typescript-config) |
| | Integration/Styling and CSS | [See current documentation](./configure/styling-and-css.md) | See versioned documentation | See versioned documentation |
| | Integration/Images and assets | [See current documentation](./configure/images-and-assets.md) | See versioned documentation | See versioned documentation |
| | Story rendering | [See current documentation](./configure/story-rendering.md) | See versioned documentation [here](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/configurations/add-custom-head-tags) and [here](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/configurations/add-custom-body) | See versioned documentation [here](https://github.com/storybookjs/storybook/tree/release/5.0/docs/src/pages/configurations/add-custom-head-tags) |
| | Story Layout | [See current documentation](./configure/story-layout.md) | Non existing feature or undocumented | Non existing feature or undocumented |
| | User Interface/Features and behavior | [See current documentation](./configure/features-and-behavior.md) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/configurations/options-parameter) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.0/docs/src/pages/configurations/options-parameter) |
| | User Interface/Theming | [See current documentation](./configure/theming.md) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/configurations/theming) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.0/docs/src/pages/configurations/theming) |
| | User Interface/Sidebar & URLS | [See current documentation](./configure/sidebar-and-urls.md) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/configurations/options-parameter) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.0/docs/src/pages/configurations/options-parameter) |
| | Environment variables | [See current documentation](./configure/environment-variables.md) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/configurations/env-vars) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.0/docs/src/pages/configurations/env-vars) |
| Builders | Introduction | [See current documentation](./builders/overview.md) | Non existing feature or undocumented | Non existing feature or undocumented |
| | Vite | [See current documentation](./builders/vite.md) | Non existing feature or undocumented | Non existing feature or undocumented |
| | Webpack | [See current documentation](./builders/webpack.md) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/configurations/custom-webpack-config/index.md) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.0/docs/src/pages/configurations/custom-webpack-config/index.md) |
| | Builder API | [See current documentation](./builders/builder-api.md) | Non existing feature or undocumented | Non existing feature or undocumented |
| Addons | Introduction | [See current documentation](./addons/introduction.md) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/addons/writing-addons) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.0/docs/src/pages/addons/writing-addons) |
| | Install addons | [See current documentation](./addons/install-addons.md) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/addons/using-addons/) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.0/docs/src/pages/addons/using-addons/) |
| | Writing Addons | [See current documentation](./addons/writing-addons.md) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/addons/writing-addons) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.0/docs/src/pages/addons/writing-addons) |
| | Writing Presets | [See current documentation](./addons/writing-presets.md) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/presets/writing-presets) | Non existing feature or undocumented |
| | Addons Knowledge Base | [See current documentation](./addons/addon-knowledge-base.md) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/addons/writing-addons) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.0/docs/src/pages/addons/writing-addons) |
| | Types of addons | [See current documentation](./addons/addon-types.md) | Non existing feature or undocumented | Non existing feature or undocumented |
| | Addons API | [See current documentation](./addons/addons-api.md) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/addons/api) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.0/docs/src/pages/addons/api) |
| API | Stories/Component Story Format | [See current documentation](./api/csf.md) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/formats/component-story-format) | Non existing feature or undocumented |
| | Stories/MDX syntax | [See current documentation](./api/mdx.md) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/formats/mdx-syntax) | Non existing feature or undocumented |
| | Stories/StoriesOF format (see note below) | [See current documentation](../lib/core/docs/storiesOf.md) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/formats/storiesof-api) | Non existing feature or undocumented |
| | Frameworks | [See current documentation](./api/new-frameworks.md) | Non existing feature or undocumented | Non existing feature or undocumented |
| | CLI options | [See current documentation](./api/cli-options.md) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/configurations/cli-options) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.0/docs/src/pages/configurations/cli-options) |
| Section | Page | Current Location | Version 5.3 location | Version 5.0 location |
| ---------------- | ----------------------------------------- | ---------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Get started | Install | [See current documentation](./get-started/install.md) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/guides/quick-start-guide) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.0/docs/src/pages/guides/quick-start-guide) |
| | What's a story | [See current documentation](./get-started/whats-a-story.md) | [See versioned documentation for your framework](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/guides) | [See versioned documentation for your framework](https://github.com/storybookjs/storybook/tree/release/5.0/docs/src/pages/guides) |
| | Browse Stories | [See current documentation](./get-started/browse-stories.md) | [See versioned documentation for your framework](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/guides) | [See versioned documentation for your framework](https://github.com/storybookjs/storybook/blob/release/5.0/docs/src/pages/guides) |
| | Setup | [See current documentation](./get-started/setup.md) | [See versioned documentation for your framework](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/guides) | [See versioned documentation for your framework](https://github.com/storybookjs/storybook/tree/release/5.0/docs/src/pages/guides) |
| Write stories | Introduction | [See current documentation](./writing-stories/introduction.md) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/basics/writing-stories) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.0/docs/src/pages/basics/writing-stories) |
| | Parameters | [See current documentation](./writing-stories/parameters.md) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/basics/writing-stories/index.md#parameters) | Non existing feature or undocumented |
| | Decorators | [See current documentation](./writing-stories/decorators.md) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/basics/writing-stories/index.md#decorators) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.0/docs/src/pages/basics/writing-stories/index.md#using-decorators) |
| | Naming components and hierarchy | [See current documentation](./writing-stories/naming-components-and-hierarchy.md) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/basics/writing-stories) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.0/docs/src/pages/basics/writing-stories) |
| | Build pages and screens | [See current documentation](./writing-stories/build-pages-with-storybook.md) | Non existing feature or undocumented | Non existing feature or undocumented |
| | Stories for multiple components | [See current documentation](./writing-stories/stories-for-multiple-components.md) | Non existing feature or undocumented | Non existing feature or undocumented |
| Write docs | DocsPage | [See current documentation](./writing-docs/docs-page.md) | See versioned addon documentation | Non existing feature or undocumented |
| | MDX | [See current documentation](./writing-docs/mdx.md) | See versioned addon documentation | Non existing feature or undocumented |
| | Doc Blocks/Argstable | [See current documentation](./writing-docs/doc-block-argstable.md) | [See versioned addon documentation](https://github.com/storybookjs/storybook/tree/release/5.3/addons/docs/) | Non existing feature or undocumented |
| | Doc Blocks/Canvas | [See current documentation](./writing-docs/doc-block-canvas.md) | [See versioned addon documentation](https://github.com/storybookjs/storybook/tree/release/5.3/addons/docs/) | Non existing feature or undocumented |
| | Doc Blocks/Color Palette | [See current documentation](./writing-docs/doc-block-colorpalette.md) | [See versioned addon documentation](https://github.com/storybookjs/storybook/tree/release/5.3/addons/docs/) | Non existing feature or undocumented |
| | Doc Blocks/Description | [See current documentation](./writing-docs/doc-block-description.md) | [See versioned addon documentation](https://github.com/storybookjs/storybook/tree/release/5.3/addons/docs/) | Non existing feature or undocumented |
| | Doc Blocks/Icon Gallery | [See current documentation](./writing-docs/doc-block-icongallery.md) | [See versioned addon documentation](https://github.com/storybookjs/storybook/tree/release/5.3/addons/docs/) | Non existing feature or undocumented |
| | Doc Blocks/Source | [See current documentation](./writing-docs/doc-block-source.md) | [See versioned addon documentation](https://github.com/storybookjs/storybook/tree/release/5.3/addons/docs/) | Non existing feature or undocumented |
| | Doc Blocks/Story | [See current documentation](./writing-docs/doc-block-story.md) | [See versioned addon documentation](https://github.com/storybookjs/storybook/tree/release/5.3/addons/docs/) | Non existing feature or undocumented |
| | Doc Blocks/Typeset | [See current documentation](./writing-docs/doc-block-typeset.md) | [See versioned addon documentation](https://github.com/storybookjs/storybook/tree/release/5.3/addons/docs/) | Non existing feature or undocumented |
| | Preview and build docs | [See current documentation](./writing-docs/build-documentation.md) | Non existing feature or undocumented | Non existing feature or undocumented |
| Testing | Visual tests | [See current documentation](./writing-tests/visual-testing.md) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/testing/automated-visual-testing) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.0/docs/src/pages/testing/automated-visual-testing) |
| | Accessibility tests | [See current documentation](./writing-tests/accessibility-testing.md) | Non existing feature or undocumented | Non existing feature or undocumented |
| | Interaction tests | [See current documentation](./writing-tests/interaction-testing.md) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/testing/interaction-testing) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.0/docs/src/pages/testing/interaction-testing) |
| | Snapshot tests | [See current documentation](./writing-tests/snapshot-testing.md) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/testing/structural-testing) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.0/docs/src/pages/testing/structural-testing) |
| | Import stories in tests | [See current documentation](./writing-tests/importing-stories-in-tests.md) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/testing/react-ui-testing) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.0/docs/src/pages/testing/react-ui-testing) |
| Sharing | Publish Storybook | [See current documentation](./sharing/publish-storybook.md) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/basics/exporting-storybook) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.0/docs/src/pages/basics/exporting-storybook) |
| | Embed | [See current documentation](./sharing/embed.md) | Non existing feature or undocumented | Non existing feature or undocumented |
| | Composition | [See current documentation](./sharing/storybook-composition.md) | Non existing feature or undocumented | Non existing feature or undocumented |
| | Package Composition | [See current documentation](./sharing/package-composition.md) | Non existing feature or undocumented | Non existing feature or undocumented |
| Essential addons | Controls | [See current documentation](./essentials/controls.md) | Controls are specific to version 6.0 see [Knobs versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/addons/knobs) | Controls are specific to version 6.0 see [Knobs versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.0/addons/knobs) |
| | Actions | [See current documentation](./essentials/actions.md) | [See addon versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/addons/actions) | [See addon versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.0/addons/actions) |
| | Viewport | [See current documentation](./essentials/viewport.md) | [See addon versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/addons/viewport) | [See addon versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.0/addons/viewport) |
| | Backgrounds | [See current documentation](./essentials/backgrounds.md) | [See addon versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/addons/backgrounds) | [See addon versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.0/addons/backgrounds) |
| | Toolbars and globals | [See current documentation](./essentials/toolbars-and-globals.md) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/basics/toolbar-guide) | Non existing feature or undocumented |
| Configure | Overview | [See current documentation](./configure/overview.md) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/configurations/overview) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.0/docs/src/pages/basics/writing-stories) |
| | Integration/Babel | [See current documentation](./configure/babel.md) | See versioned documentation here and [here](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/configurations/custom-babel-config) | See versioned documentation here and [here](https://github.com/storybookjs/storybook/tree/release/5.0/docs/src/pages/configurations/custom-babel-config) |
| | Integration/Typescript | [See current documentation](./configure/typescript.md) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/configurations/typescript-config) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.0/docs/src/pages/configurations/typescript-config) |
| | Integration/Styling and CSS | [See current documentation](./configure/styling-and-css.md) | See versioned documentation | See versioned documentation |
| | Integration/Images and assets | [See current documentation](./configure/images-and-assets.md) | See versioned documentation | See versioned documentation |
| | Story rendering | [See current documentation](./configure/story-rendering.md) | See versioned documentation [here](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/configurations/add-custom-head-tags) and [here](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/configurations/add-custom-body) | See versioned documentation [here](https://github.com/storybookjs/storybook/tree/release/5.0/docs/src/pages/configurations/add-custom-head-tags) |
| | Story Layout | [See current documentation](./configure/story-layout.md) | Non existing feature or undocumented | Non existing feature or undocumented |
| | User Interface/Features and behavior | [See current documentation](./configure/features-and-behavior.md) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/configurations/options-parameter) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.0/docs/src/pages/configurations/options-parameter) |
| | User Interface/Theming | [See current documentation](./configure/theming.md) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/configurations/theming) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.0/docs/src/pages/configurations/theming) |
| | User Interface/Sidebar & URLS | [See current documentation](./configure/sidebar-and-urls.md) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/configurations/options-parameter) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.0/docs/src/pages/configurations/options-parameter) |
| | Environment variables | [See current documentation](./configure/environment-variables.md) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/configurations/env-vars) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.0/docs/src/pages/configurations/env-vars) |
| Builders | Introduction | [See current documentation](./builders/overview.md) | Non existing feature or undocumented | Non existing feature or undocumented |
| | Vite | [See current documentation](./builders/vite.md) | Non existing feature or undocumented | Non existing feature or undocumented |
| | Webpack | [See current documentation](./builders/webpack.md) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/configurations/custom-webpack-config/index.md) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.0/docs/src/pages/configurations/custom-webpack-config/index.md) |
| | Builder API | [See current documentation](./builders/builder-api.md) | Non existing feature or undocumented | Non existing feature or undocumented |
| Addons | Introduction | [See current documentation](./addons/introduction.md) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/addons/writing-addons) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.0/docs/src/pages/addons/writing-addons) |
| | Install addons | [See current documentation](./addons/install-addons.md) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/addons/using-addons/) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.0/docs/src/pages/addons/using-addons/) |
| | Writing Addons | [See current documentation](./addons/writing-addons.md) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/addons/writing-addons) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.0/docs/src/pages/addons/writing-addons) |
| | Writing Presets | [See current documentation](./addons/writing-presets.md) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/presets/writing-presets) | Non existing feature or undocumented |
| | Addons Knowledge Base | [See current documentation](./addons/addon-knowledge-base.md) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/addons/writing-addons) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.0/docs/src/pages/addons/writing-addons) |
| | Types of addons | [See current documentation](./addons/addon-types.md) | Non existing feature or undocumented | Non existing feature or undocumented |
| | Addons API | [See current documentation](./addons/addons-api.md) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/addons/api) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.0/docs/src/pages/addons/api) |
| API | Stories/Component Story Format | [See current documentation](./api/csf.md) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/formats/component-story-format) | Non existing feature or undocumented |
| | Stories/MDX syntax | [See current documentation](./api/mdx.md) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/formats/mdx-syntax) | Non existing feature or undocumented |
| | Stories/StoriesOF format (see note below) | [See current documentation](https://github.com/storybookjs/storybook/blob/next/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) |
<div class="aside">
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 <code>storiesOf</code> 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.
@ -294,7 +292,6 @@ See our documentation on how to customize the [Storyshots configuration](./writi
Currently there's an issue when using MDX stories with IE11. This issue does <strong>not</strong> apply to [DocsPage](./writing-docs/docs-page.md). If you're interested in helping us fix this issue, read our <a href="https://github.com/storybookjs/storybook/blob/next/CONTRIBUTING.md">Contribution guidelines</a> and submit a pull request.
### 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:
@ -350,7 +347,6 @@ You'll need to update it to make it compatible with MDX 2.
See the following [issue](https://github.com/mdx-js/mdx/issues/1945) for more information.
### Why can't I import my own stories into MDX 2?
This is a known issue with MDX 2. We're working to fix it. For now you can apply the following workaround:
@ -365,7 +361,6 @@ import * as stories from './Button.stories.jsx';
<Story name="Basic" story={stories.Basic} />
```
### 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:
@ -408,8 +403,6 @@ Yes, check the [addon's examples](https://github.com/mswjs/msw-storybook-addon/t
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.
### How can my code detect if it is running in Storybook?
You can do this by checking for the `IS_STORYBOOK` global variable, which will equal `true` when running in Storybook. The environment variable `process.env.STORYBOOK` is also set to `true`.
@ -486,11 +479,10 @@ export default {
There's an issue with Storybook's test runner and the latest version of Jest (i.e., version 28), which prevents it from running effectively. As a workaround, you can downgrade Jest to the previous stable version (i.e., version 27), and you'll be able to run it. See the following [issue](https://github.com/storybookjs/test-runner/issues/99) for more information.
### How does Storybook handles enviroment variables?
Storybook has built-in support for [environment variables](./configure/environment-variables.md). By default, environment variables are only available in Node.js code and are not available in the browser as some variables should be kept secret (e.g., API keys) and **not** exposed to anyone visiting the published Storybook.
To expose a variable, you must preface its name with `STORYBOOK_`. So `STORYBOOK_API_URL` will be available in browser code but `API_KEY` will not. Additionally you can also customize which variables are exposed by setting the [`env`](./configure/environment-variables.md#using-storybook-configuration) field in the `.storybook/main.js` file.
Variables are set when JavaScript is compiled so when the development server is started or you build your Storybook. Environment variable files should not be committed to Git as they often contain secrets which are not safe to add to Git. Instead, add `.env.*` to your `.gitignore` file and set up the environment variables manually on your hosting provider (e.g., [GitHub](https://docs.github.com/en/actions/security-guides/encrypted-secrets#creating-encrypted-secrets-for-a-repository)).
Variables are set when JavaScript is compiled so when the development server is started or you build your Storybook. Environment variable files should not be committed to Git as they often contain secrets which are not safe to add to Git. Instead, add `.env.*` to your `.gitignore` file and set up the environment variables manually on your hosting provider (e.g., [GitHub](https://docs.github.com/en/actions/security-guides/encrypted-secrets#creating-encrypted-secrets-for-a-repository)).

10
docs/frameworks.js
View File

@ -117,27 +117,27 @@ module.exports = {
{
name: 'Source',
unsupported: [],
path: 'writing-docs/doc-blocks#source',
path: 'writing-docs/doc-block-source',
},
{
name: 'Dynamic source',
supported: ['react', 'vue', 'angular', 'svelte', 'web-components', 'html'],
path: 'writing-docs/doc-blocks#source',
path: 'writing-docs/doc-block-source',
},
{
name: 'Args Table',
supported: ['react', 'vue', 'angular', 'html', 'ember', 'web-components', 'svelte'],
path: 'writing-docs/doc-blocks#argstable',
path: 'writing-docs/doc-block-argstable',
},
{
name: 'Description',
supported: ['react', 'vue', 'angular', 'ember', 'web-components'],
path: 'writing-docs/doc-blocks#description',
path: 'writing-docs/doc-block-description',
},
{
name: 'Inline stories',
supported: ['react', 'vue', 'web-components', 'html', 'svelte', 'angular'],
path: 'writing-docs/doc-blocks#inline-rendering',
path: 'writing-docs/docs-page#inline-stories-vs-iframe-stories',
},
],
},

7
docs/get-started/installation-problems/angular.mdx
View File

@ -1,3 +1,10 @@
- Storybook's CLI provides support for both [Yarn](https://yarnpkg.com/) and [npm](https://www.npmjs.com/) package managers.
If you have Yarn installed in your environment but prefer to use npm as your default package manager add the `--use-npm` flag to your installation command. For example:
```shell
npx storybook init --use-npm
```
- Add the `--type angular` flag to the installation command to set up Storybook manually:
```shell

7
docs/get-started/installation-problems/ember.mdx
View File

@ -1,3 +1,10 @@
- Storybook's CLI provides support for both [Yarn](https://yarnpkg.com/) and [npm](https://www.npmjs.com/) package managers.
If you have Yarn installed in your environment but prefer to use npm as your default package manager add the `--use-npm` flag to your installation command. For example:
```shell
npx storybook init --use-npm
```
- Add the `--type ember` flag to the installation command to set up Storybook manually:
```shell

7
docs/get-started/installation-problems/preact.mdx
View File

@ -1,3 +1,10 @@
- Storybook's CLI provides support for both [Yarn](https://yarnpkg.com/) and [npm](https://www.npmjs.com/) package managers.
If you have Yarn installed in your environment but prefer to use npm as your default package manager add the `--use-npm` flag to your installation command. For example:
```shell
npx storybook init --use-npm
```
- Add the `--type preact` flag to the installation command to set up Storybook manually:
```shell

7
docs/get-started/installation-problems/react.mdx
View File

@ -1,3 +1,10 @@
- Storybook's CLI provides support for both [Yarn](https://yarnpkg.com/) and [npm](https://www.npmjs.com/) package managers.
If you have Yarn installed in your environment but prefer to use npm as your default package manager add the `--use-npm` flag to your installation command. For example:
```shell
npx storybook init --use-npm
```
- Add the `--type react` flag to the installation command to set up Storybook manually:
```shell

7
docs/get-started/installation-problems/svelte.mdx
View File

@ -1,3 +1,10 @@
- Storybook's CLI provides support for both [Yarn](https://yarnpkg.com/) and [npm](https://www.npmjs.com/) package managers.
If you have Yarn installed in your environment but prefer to use npm as your default package manager add the `--use-npm` flag to your installation command. For example:
```shell
npx storybook init --use-npm
```
- Add the `--type svelte` flag to the installation command to set up Storybook manually:
```shell

7
docs/get-started/installation-problems/vue.mdx
View File

@ -1,3 +1,10 @@
- Storybook's CLI provides support for both [Yarn](https://yarnpkg.com/) and [npm](https://www.npmjs.com/) package managers.
If you have Yarn installed in your environment but prefer to use npm as your default package manager add the `--use-npm` flag to your installation command. For example:
```shell
npx storybook init --use-npm
```
- Add the `--type vue` (for Vue 2), or `--type vue3` (for Vue 3) flag to the installation command to set up Storybook manually:
```shell

2
docs/get-started/whats-a-story.md
View File

@ -93,6 +93,6 @@ Stories are also helpful for checking that UI continues to look correct as you m
/>
</video>
Checking component’s stories as you develop helps prevent accidental regressions. Tools that integrate with Storybook can also [automate](../writing-tests/introduction.md) this for you.
Checking component’s stories as you develop helps prevent accidental regressions. [Tools that integrate with Storybook can automate this](../writing-tests/introduction.md) for you.
Now that we’ve seen the basic anatomy of a story let’s see how we use Storybook’s UI to develop stories.

21
docs/snippets/html/button-story-component-decorator.js.mdx Normal file
View File

@ -0,0 +1,21 @@
```js
// Button.stories.js
import { createButton } from './Button';
export default {
/* 👇 The title prop is optional.
* See https://storybook.js.org/docs/html/configure/overview#configure-story-loading
* to learn how to generate automatic titles
*/
title: 'Button',
decorators: [(story) => {
const decorator = document.createElement('div');
decorator.style.margin = '3em';
decorator.appendChild(story());
return decorator;
}],
};
export const Primary = (args) => createButton(args);
```

23
docs/snippets/html/button-story-component-decorator.ts.mdx Normal file
View File

@ -0,0 +1,23 @@
```ts
// Button.stories.ts
import { Meta, StoryFn } from '@storybook/html';
import { createButton, ButtonArgs } from './Button';
export default {
/* 👇 The title prop is optional.
* See https://storybook.js.org/docs/html/configure/overview#configure-story-loading
* to learn how to generate automatic titles
*/
title: 'Button',
decorators: [(story) => {
const decorator = document.createElement('div');
decorator.style.margin = '3em';
decorator.appendChild(story());
return decorator;
}],
} as Meta<ButtonArgs>;
export const Primary: StoryFn<ButtonArgs> = (args) => createButton(args);
```

13
docs/snippets/html/button-story-default-exports.js.mdx Normal file
View File

@ -0,0 +1,13 @@
```js
// Button.stories.js
import { createButton } from './Button';
export default {
/* 👇 The title prop is optional.
* See https://storybook.js.org/docs/html/configure/overview#configure-story-loading
* to learn how to generate automatic titles
*/
title: 'Button',
};
```

15
docs/snippets/html/button-story-default-exports.ts.mdx Normal file
View File

@ -0,0 +1,15 @@
```ts
// Button.stories.ts
import { Meta } from '@storybook/html';
import { createButton, ButtonArgs } from './Button';
export default {
/* 👇 The title prop is optional.
* See https://storybook.js.org/docs/html/configure/overview#configure-story-loading
* to learn how to generate automatic titles
*/
title: 'Button',
} as Meta<ButtonArgs>;
```

16
docs/snippets/html/button-story-rename-story.js.mdx Normal file
View File

@ -0,0 +1,16 @@
```js
// Button.stories.js
import { createButton } from './Button';
export default {
/* 👇 The title prop is optional.
* See https://storybook.js.org/docs/html/configure/overview#configure-story-loading
* to learn how to generate automatic titles
*/
title: 'Button',
};
export const Primary = (args) => createButton(args);
Primary.storyName = 'I am the primary';
```

18
docs/snippets/html/button-story-rename-story.ts.mdx Normal file
View File

@ -0,0 +1,18 @@
```ts
// Button.stories.ts
import { Meta, StoryFn } from '@storybook/html';
import { createButton, ButtonArgs } from './Button';
export default {
/* 👇 The title prop is optional.
* See https://storybook.js.org/docs/html/configure/overview#configure-story-loading
* to learn how to generate automatic titles
*/
title: 'Button',
} as Meta<ButtonArgs>;
export const Primary: StoryFn<ButtonArgs> = (args) => createButton(args);
Primary.storyName = 'I am the primary';
```

26
docs/snippets/html/button-story-using-args.js.mdx Normal file
View File

@ -0,0 +1,26 @@
```js
// Button.stories.js
import { createButton } from './Button';
export default {
/* 👇 The title prop is optional.
* See https://storybook.js.org/docs/html/configure/overview#configure-story-loading
* to learn how to generate automatic titles
*/
title: 'Button',
};
//👇 We create a “template” of how args map to rendering
const Template = (args) => createButton(args);
//👇 Each story then reuses that template
export const Primary = Template.bind({});
Primary.args = { primary: true, label: 'Button' };
export const Secondary = Template.bind({});
Secondary.args = { ...Primary.args, label: '😄👍😍💯' };
export const Tertiary = Template.bind({});
Tertiary.args = { ...Primary.args, label: '📚📕📈🤓' };
```

27
docs/snippets/html/button-story-using-args.ts.mdx Normal file
View File

@ -0,0 +1,27 @@
```ts
// Button.stories.ts
import { Meta, StoryFn } from '@storybook/html';
import { createButton, ButtonArgs } from './Button';
export default {
/* 👇 The title prop is optional.
* See https://storybook.js.org/docs/html/configure/overview#configure-story-loading
* to learn how to generate automatic titles
*/
title: 'Button',
} as Meta<ButtonArgs>;
//👇 We create a “template” of how args map to rendering
const Template: StoryFn<ButtonArgs> = (args): HTMLButtonElement => createButton(args);
//👇 Each story then reuses that template
export const Primary = Template.bind({});
Primary.args = { primary: true, label: 'Button' };
export const Secondary = Template.bind({});
Secondary.args = { ...Primary.args, label: '😄👍😍💯' };
export const Tertiary = Template.bind({});
Tertiary.args = { ...Primary.args, label: '📚📕📈🤓' };
```

2
docs/snippets/html/button-story-with-args.js.mdx
View File

@ -1,4 +1,6 @@
```js
// Button.stories.js
export default {
/* 👇 The title prop is optional.
* See https://storybook.js.org/docs/html/configure/overview#configure-story-loading

11
docs/snippets/html/button-story-with-args.ts.mdx
View File

@ -1,16 +1,23 @@
```ts
// Button.stories.ts
import type { Meta, StoryFn } from '@storybook/html';
type ButtonArgs = {
primary: boolean;
label: string;
}
export default {
/* 👇 The title prop is optional.
* See https://storybook.js.org/docs/html/configure/overview#configure-story-loading
* to learn how to generate automatic titles
*/
title: 'Button',
} as Meta;
} as Meta<ButtonArgs>;
//👇 We create a “template” of how args map to rendering
const Template: StoryFn = (args): HTMLButtonElement => {
const Template: StoryFn<ButtonArgs> = (args): HTMLButtonElement => {
const btn = document.createElement('button');
btn.innerText = args.label;

25
docs/snippets/html/button-story-with-blue-args.js.mdx Normal file
View File

@ -0,0 +1,25 @@
```js
// Button.stories.js
import { createButton } from './Button';
export default {
/* 👇 The title prop is optional.
* See https://storybook.js.org/docs/html/configure/overview#configure-story-loading
* to learn how to generate automatic titles
*/
title: 'Button',
//👇 Creates specific parameters for the story
parameters: {
backgrounds: {
values: [
{ name: 'red', value: '#f00' },
{ name: 'green', value: '#0f0' },
{ name: 'blue', value: '#00f' },
],
},
},
};
export const Primary = (args) => createButton(args);
```

27
docs/snippets/html/button-story-with-blue-args.ts.mdx Normal file
View File

@ -0,0 +1,27 @@
```ts
// Button.stories.ts
import { Meta, StoryFn } from '@storybook/html';
import { createButton, ButtonArgs } from './Button';
export default {
/* 👇 The title prop is optional.
* See https://storybook.js.org/docs/html/configure/overview#configure-story-loading
* to learn how to generate automatic titles
*/
title: 'Button',
//👇 Creates specific parameters for the story
parameters: {
backgrounds: {
values: [
{ name: 'red', value: '#f00' },
{ name: 'green', value: '#0f0' },
{ name: 'blue', value: '#00f' },
],
},
},
} as Meta<ButtonArgs>;
export const Primary: StoryFn<ButtonArgs> = (args) => createButton(args);
```

16
docs/snippets/html/button-story-with-emojis.js.mdx Normal file
View File

@ -0,0 +1,16 @@
```js
// Button.stories.js
import { createButton } from './Button';
export default {
/* 👇 The title prop is optional.
* See https://storybook.js.org/docs/html/configure/overview#configure-story-loading
* to learn how to generate automatic titles
*/
title: 'Button',
};
export const Primary = () => createButton({ backgroundColor: "#ff0", label: "Button"});
export const Secondary = () => createButton({ backgroundColor: "#ff0", label: "😄👍😍💯"});
export const Tertiary = () => createButton({ backgroundColor: "#ff0", label: "📚📕📈🤓"});
```

17
docs/snippets/html/button-story-with-emojis.ts.mdx Normal file
View File

@ -0,0 +1,17 @@
```ts
// Button.stories.ts
import { Meta, StoryFn } from '@storybook/html';
import { createButton, ButtonArgs } from './Button';
export default {
/* 👇 The title prop is optional.
* See https://storybook.js.org/docs/html/configure/overview#configure-story-loading
* to learn how to generate automatic titles
*/
title: 'Button',
} as Meta<ButtonArgs>;
export const Primary: StoryFn<ButtonArgs> = () => createButton({ backgroundColor: "#ff0", label: "Button"});
export const Secondary: StoryFn<ButtonArgs> = () => createButton({ backgroundColor: "#ff0", label: "😄👍😍💯"});
export const Tertiary: StoryFn<ButtonArgs> = () => createButton({ backgroundColor: "#ff0", label: "📚📕📈🤓"});
```

2
docs/snippets/html/button-story.js.mdx
View File

@ -1,4 +1,6 @@
```js
// Button.stories.js
export default {
/* 👇 The title prop is optional.
* See https://storybook.js.org/docs/html/configure/overview#configure-story-loading

2
docs/snippets/html/button-story.ts.mdx
View File

@ -1,4 +1,6 @@
```ts
// Button.stories.ts
import { Meta, StoryFn } from '@storybook/html';
export default {

27
docs/snippets/html/list-story-expanded.js.mdx Normal file
View File

@ -0,0 +1,27 @@
```js
// List.stories.js
import { createList } from './List';
import { createListItem } from './ListItem';
export default {
title: 'List',
};
export const Empty = (args) => createList(args);
export const OneItem = (args) => {
const list = createList(args);
list.appendChild(createListItem());
return list;
};
export const ManyItems = (args) => {
const list = createList(args);
list.appendChild(createListItem());
list.appendChild(createListItem());
list.appendChild(createListItem());
return list;
};
```

29
docs/snippets/html/list-story-expanded.ts.mdx Normal file
View File

@ -0,0 +1,29 @@
```ts
// List.stories.ts
import { Meta, StoryFn } from '@storybook/html';
import { createList, ListArgs } from './List';
import { createListItem } from './ListItem';
export default {
title: 'List',
} as Meta<ListArgs>;
export const Empty: StoryFn<ListArgs> = (args) => createList(args);
export const OneItem: StoryFn<ListArgs> = (args) => {
const list = createList(args);
list.appendChild(createListItem());
return list;
};
export const ManyItems: StoryFn<ListArgs> = (args) => {
const list = createList(args);
list.appendChild(createListItem());
list.appendChild(createListItem());
list.appendChild(createListItem());
return list;
};
```

22
docs/snippets/html/list-story-reuse-data.js.mdx Normal file
View File

@ -0,0 +1,22 @@
```js
// List.stories.js
import { createList } from './List';
import { createListItem } from './ListItem';
// 👇 We're importing the necessary stories from ListItem
import { Selected, Unselected } from './ListItem.stories';
export default {
title: 'List',
};
export const ManyItems = (args) => {
const list = createList(args);
list.appendChild(createListItem(Selected.args));
list.appendChild(createListItem(Unselected.args));
list.appendChild(createListItem(Unselected.args));
return list;
};
```

32
docs/snippets/html/list-story-reuse-data.ts.mdx Normal file
View File

@ -0,0 +1,32 @@
```ts
// List.stories.ts
import { Meta, StoryFn } from '@storybook/html';
import { createList, ListArgs } from './List';
import { createListItem } from './ListItem';
// 👇 We're importing the necessary stories from ListItem
import { Selected, Unselected } from './ListItem.stories';
export default {
title: 'List',
} as Meta<ListArgs>;
export const Empty: StoryFn<ListArgs> = (args) => createList(args);
export const OneItem: StoryFn<ListArgs> = (args) => {
const list = createList(args);
list.appendChild(createListItem());
return list;
};
export const ManyItems: StoryFn<ListArgs> = (args) => {
const list = createList(args);
list.appendChild(createListItem(Selected.args));
list.appendChild(createListItem(Unselected.args));
list.appendChild(createListItem(Unselected.args));
return list;
};
```

12
docs/snippets/html/list-story-starter.js.mdx Normal file
View File

@ -0,0 +1,12 @@
```js
// List.stories.js
import { createList } from './List';
export default {
title: 'List',
};
// Always an empty list, not super interesting
const Template = (args) => createList(args);
```

14
docs/snippets/html/list-story-starter.ts.mdx Normal file
View File

@ -0,0 +1,14 @@
```ts
// List.stories.ts
import { Meta, StoryFn } from '@storybook/html';
import { createList, ListArgs } from './List';
export default {
title: 'List',
} as Meta<ListArgs>;
// Always an empty list, not super interesting
const Template: StoryFn<ListArgs> = (args) => createList(args);
```

2
docs/writing-stories/args.md
View File

@ -33,6 +33,8 @@ To define the args of a single story, use the `args` CSF story key:
'svelte/button-story-with-args.native-format.mdx',
'svelte/button-story-with-args.mdx.mdx',
'web-components/button-story-with-args.js.mdx',
'html/button-story-with-args.ts.mdx',
'html/button-story-with-args.js.mdx',
]}
/>

20
docs/writing-stories/introduction.md
View File

@ -37,6 +37,8 @@ The _default_ export metadata controls how Storybook lists your stories and prov
'angular/button-story-default-export-with-component.ts.mdx',
'svelte/button-story-default-export-with-component.js.mdx',
'web-components/button-story-default-export-with-component.js.mdx',
'html/button-story-default-export.js.mdx',
'html/button-story-default-export.ts.mdx',
]}
/>
@ -59,6 +61,8 @@ Use the _named_ exports of a CSF file to define your component’s stories. We r
'svelte/button-story.js.mdx',
'svelte/button-story.native-format.mdx',
'web-components/button-story.js.mdx',
'html/button-story.js.mdx',
'html/button-story.ts.mdx',
]}
/>
@ -99,6 +103,8 @@ You can rename any particular story you need. For instance, to give it a more ac
'angular/button-story-rename-story.ts.mdx',
'svelte/button-story-rename-story.js.mdx',
'web-components/button-story-rename-story.js.mdx',
'html/button-story-rename-story.js.mdx',
'html/button-story-rename-story.ts.mdx',
]}
/>
@ -127,6 +133,8 @@ A story is a function that describes how to render a component. You can have mul
'svelte/button-story-with-emojis.native-format.mdx',
'svelte/button-story-with-emojis.mdx.mdx',
'web-components/button-story-with-emojis.js.mdx',
'html/button-story-with-emojis.js.mdx',
'html/button-story-with-emojis.ts.mdx',
]}
/>
@ -152,6 +160,8 @@ Refine this pattern by introducing `args` for your component's stories. It reduc
'svelte/button-story-using-args.js.mdx',
'svelte/button-story-using-args.native-format.mdx',
'web-components/button-story-using-args.js.mdx',
'html/button-story-using-args.js.mdx',
'html/button-story-using-args.ts.mdx',
]}
/>
@ -254,6 +264,8 @@ For instance, suppose you wanted to test your Button component against a differe
'svelte/button-story-with-blue-args.native-format.mdx',
'svelte/button-story-with-blue-args.mdx.mdx',
'web-components/button-story-with-blue-args.js.mdx',
'html/button-story-with-blue-args.js.mdx',
'html/button-story-with-blue-args.ts.mdx',
]}
/>
@ -286,6 +298,8 @@ A simple example is adding padding to a component’s stories. Accomplish this u
'svelte/button-story-component-decorator.native-format.mdx',
'svelte/button-story-component-decorator.mdx.mdx',
'web-components/button-story-component-decorator.js.mdx',
'html/button-story-component-decorator.js.mdx',
'html/button-story-component-decorator.ts.mdx',
]}
/>
@ -310,6 +324,8 @@ When building design systems or component libraries, you may have two or more co
'vue/list-story-starter.ts-3.ts.mdx',
'svelte/list-story-starter.native-format.mdx',
'web-components/list-story-starter.js.mdx',
'html/list-story-starter.js.mdx',
'html/list-story-starter.ts.mdx',
]}
/>
@ -330,6 +346,8 @@ In such cases, it makes sense to render a different function for each story:
'vue/list-story-expanded.ts-3.ts.mdx',
'svelte/list-story-expanded.native-format.mdx',
'web-components/list-story-expanded.js.mdx',
'html/list-story-expanded.js.mdx',
'html/list-story-expanded.ts.mdx',
]}
/>
@ -349,6 +367,8 @@ You can also reuse stories from the child `ListItem` in your `List` component. T
'vue/list-story-reuse-data.3.js.mdx',
'vue/list-story-reuse-data.ts-3.ts.mdx',
'web-components/list-story-reuse-data.js.mdx',
'html/list-story-reuse-data.js.mdx',
'html/list-story-reuse-data.ts.mdx',
]}
/>

4
docs/writing-tests/interaction-testing.md
View File

@ -157,7 +157,7 @@ Interaction tests can be expensive to maintain when applied wholesale to every c
- [Test runner](./test-runner.md) to automate test execution
- [Visual tests](./visual-testing.md) for appearance
- [Accessibility tests](accessibility-testing.md) for accessibility
- [Accessibility tests](./accessibility-testing.md) for accessibility
- Interaction tests for user behavior simulation
- [Snapshot tests](./snapshot-testing.md) for rendering errors and warnings
- [Import stories in other tests](./importing-stories-in-tests.md) for other tools
- [Import stories in other tests](./importing-stories-in-tests.md) for other tools

1
docs/writing-tests/test-runner.md
View File

@ -45,7 +45,6 @@ Start your Storybook with:
'angular/storybook-run-dev.with-builder.js.mdx',
'common/storybook-run-dev.yarn.js.mdx',
'common/storybook-run-dev.npm.js.mdx',
]}
/>

2
examples/angular-cli/package.json
View File

@ -60,7 +60,7 @@
"@storybook/babel-plugin-require-context-hook": "1.0.1",
"@storybook/jest": "^0.0.5",
"@storybook/source-loader": "7.0.0-alpha.6",
"@storybook/testing-library": "^0.0.12",
"@storybook/testing-library": "0.0.14-next.0",
"@types/core-js": "^2.5.4",
"@types/jest": "^26.0.16",
"@types/node": "^14.14.20 || ^16.0.0",

2
examples/official-storybook/package.json
View File

@ -38,7 +38,7 @@
"@storybook/react-webpack5": "7.0.0-alpha.6",
"@storybook/router": "7.0.0-alpha.6",
"@storybook/source-loader": "7.0.0-alpha.6",
"@storybook/testing-library": "^0.0.12",
"@storybook/testing-library": "0.0.14-next.0",
"@storybook/theming": "7.0.0-alpha.6",
"@testing-library/dom": "^7.31.2",
"@testing-library/user-event": "^13.1.9",

2
examples/svelte-kitchen-sink/package.json
View File

@ -26,7 +26,7 @@
"@storybook/source-loader": "7.0.0-alpha.6",
"@storybook/svelte": "7.0.0-alpha.6",
"@storybook/svelte-webpack5": "7.0.0-alpha.6",
"@storybook/testing-library": "^0.0.7",
"@storybook/testing-library": "0.0.14-next.0",
"storybook": "7.0.0-alpha.6",
"svelte-jester": "^2.3.2",
"svelte-preprocess": "^4.10.6"

2
examples/vue-3-cli/package.json
View File

@ -20,7 +20,7 @@
"@storybook/addon-links": "7.0.0-alpha.6",
"@storybook/addon-storyshots": "7.0.0-alpha.6",
"@storybook/jest": "^0.0.5",
"@storybook/testing-library": "^0.0.12",
"@storybook/testing-library": "0.0.14-next.0",
"@storybook/vue3": "7.0.0-alpha.6",
"@storybook/vue3-webpack5": "7.0.0-alpha.6",
"@vue/cli-plugin-babel": "^5.0.4",

2
examples/vue-kitchen-sink/package.json
View File

@ -28,7 +28,7 @@
"@storybook/addons": "7.0.0-alpha.6",
"@storybook/jest": "^0.0.5",
"@storybook/source-loader": "7.0.0-alpha.6",
"@storybook/testing-library": "^0.0.12",
"@storybook/testing-library": "0.0.14-next.0",
"@storybook/vue": "7.0.0-alpha.6",
"@storybook/vue-webpack5": "7.0.0-alpha.6",
"@vue/babel-preset-jsx": "^1.2.4",

2
examples/web-components-kitchen-sink/package.json
View File

@ -56,7 +56,7 @@
"@storybook/source-loader": "link:../../lib/source-loader",
"@storybook/store": "link:../../lib/store",
"@storybook/telemetry": "link:../../lib/telemetry",
"@storybook/testing-library": "^0.0.12 ",
"@storybook/testing-library": "0.0.14-next.0",
"@storybook/theming": "link:../../lib/theming",
"@storybook/ui": "link:../../lib/ui",
"@storybook/web-components": "link:../../renderers/web-components",

2
lib/cli/src/automigrate/fixes/index.ts
View File

@ -5,6 +5,7 @@ import { vue3 } from './vue3';
import { mainjsFramework } from './mainjsFramework';
import { eslintPlugin } from './eslint-plugin';
import { builderVite } from './builder-vite';
import { npm7 } from './npm7';
import { Fix } from '../types';
export * from '../types';
@ -16,4 +17,5 @@ export const fixes: Fix[] = [
mainjsFramework,
eslintPlugin,
builderVite,
npm7,
];

11
lib/cli/src/js-package-manager/NPMProxy.ts
View File

@ -23,10 +23,13 @@ export class NPMProxy extends JsPackageManager {
}
hasLegacyPeerDeps() {
return (
this.executeCommand('npm', ['config', 'get', 'legacy-peer-deps', '--location=project']) ===
'true'
);
const result = this.executeCommand('npm', [
'config',
'get',
'legacy-peer-deps',
'--location=project',
]);
return result.trim() === 'true';
}
setLegacyPeerDeps() {

4
lib/core-common/templates/base-preview-head.html
View File

@ -237,8 +237,8 @@
.sb-argstableBlock td:nth-of-type(3) {
width: 15%;
}
.sb-argstableBlock th:laste-of-type,
.sb-argstableBlock td:laste-of-type {
.sb-argstableBlock th:last-of-type,
.sb-argstableBlock td:last-of-type {
width: 25%;
padding-right: 20px;
}

1
lib/core-server/package.json
View File

@ -54,7 +54,6 @@
"commander": "^6.2.1",
"compression": "^1.7.4",
"core-js": "^3.8.2",
"cpy": "^8.1.2",
"detect-port": "^1.3.0",
"express": "^4.17.1",
"fs-extra": "^9.0.1",

5
lib/core-server/src/build-static.ts
View File

@ -1,5 +1,4 @@
import chalk from 'chalk';
import cpy from 'cpy';
import fs from 'fs-extra';
import path, { join } from 'path';
import dedent from 'ts-dedent';
@ -60,7 +59,7 @@ export async function buildStaticStandalone(
}
await fs.emptyDir(options.outputDir);
await cpy(defaultFavIcon, options.outputDir);
await fs.copyFile(defaultFavIcon, path.join(options.outputDir, path.basename(defaultFavIcon)));
const { getPrebuiltDir } = await import('@storybook/manager-webpack5/prebuilt-manager');
@ -191,7 +190,7 @@ export async function buildStaticStandalone(
const startTime = process.hrtime();
// When using the prebuilt manager, we straight up copy it into the outputDir instead of building it
const manager = prebuiltDir
? cpy('**', options.outputDir, { cwd: prebuiltDir, parents: true }).then(() => {})
? fs.copy(prebuiltDir, options.outputDir, { dereference: true }).then(() => {})
: managerBuilder.build({ startTime, options: fullOptions });
if (options.ignorePreview) {

6
lib/core-server/src/core-presets.test.ts
View File

@ -77,7 +77,11 @@ jest.mock('@storybook/store', () => {
};
});
jest.mock('cpy', () => () => Promise.resolve());
jest.mock('fs-extra', () => ({
...jest.requireActual('fs-extra'),
copyFile: jest.fn().mockResolvedValue(Promise.resolve()),
copy: jest.fn().mockResolvedValue(Promise.resolve()),
}));
jest.mock('http', () => ({
...jest.requireActual('http'),
createServer: () => ({ listen: (_options, cb) => cb(), on: jest.fn() }),

15
lib/store/src/storySort.test.ts
View File

@ -130,4 +130,19 @@ describe('preview.storySort', () => {
expect(sortFn(fixture.a_c, fixture.a_b)).toBeLessThan(0);
expect(sortFn(fixture.a_b, fixture.a_c)).toBeGreaterThan(0);
});
it('sorts according to the nested order array with parent wildcard', () => {
const sortFn = storySort({
order: ['*', ['*', 'b', 'a']],
includeNames: true,
});
expect(sortFn(fixture.a_a, fixture.a_b)).toBeGreaterThan(0);
expect(sortFn(fixture.a_b, fixture.a_a)).toBeLessThan(0);
expect(sortFn(fixture.a_c, fixture.a_a)).toBeLessThan(0);
expect(sortFn(fixture.a_c, fixture.a_b)).toBeLessThan(0);
expect(sortFn(fixture.a_a, fixture.a_c)).toBeGreaterThan(0);
expect(sortFn(fixture.a_b, fixture.a_c)).toBeGreaterThan(0);
expect(sortFn(fixture.a_a, fixture.a_a)).toBe(0);
});
});

3
lib/store/src/storySort.ts
View File

@ -79,7 +79,8 @@ export const storySort =
}
// If a nested array is provided for a name, use it for ordering.
const index = order.indexOf(nameA);
let index = order.indexOf(nameA);
if (index === -1) index = order.indexOf('*');
order = index !== -1 && Array.isArray(order[index + 1]) ? order[index + 1] : [];
// We'll need to look at the next part of the name.

2
lib/ui/src/components/sidebar/Tree.tsx
View File

@ -189,7 +189,6 @@ const Node = React.memo<NodeProps>(
data-ref-id={refId}
data-item-id={item.id}
data-nodetype="root"
aria-expanded={isExpanded}
>
<CollapseButton
type="button"
@ -198,6 +197,7 @@ const Node = React.memo<NodeProps>(
event.preventDefault();
setExpanded({ ids: [item.id], value: !isExpanded });
}}
aria-expanded={isExpanded}
>
<CollapseIcon isExpanded={isExpanded} />
{item.renderLabel?.(item) || item.name}

2
package.json
View File

@ -208,7 +208,7 @@
"@storybook/svelte": "workspace:*",
"@storybook/svelte-webpack5": "workspace:*",
"@storybook/telemetry": "workspace:*",
"@storybook/testing-library": "^0.0.12",
"@storybook/testing-library": "0.0.14-next.0",
"@storybook/theming": "workspace:*",
"@storybook/ui": "workspace:*",
"@storybook/vue": "workspace:*",

276
yarn.lock
View File

@ -7167,7 +7167,7 @@ __metadata:
"@storybook/csf": 0.0.2--canary.4566f4d.1
"@storybook/instrumenter": 7.0.0-alpha.6
"@storybook/jest": ^0.0.5
"@storybook/testing-library": ^0.0.12
"@storybook/testing-library": 0.0.14-next.0
"@storybook/theming": 7.0.0-alpha.6
core-js: ^3.8.2
formik: ^2.2.9
@ -7543,6 +7543,28 @@ __metadata:
languageName: node
linkType: hard
"@storybook/addons@npm:6.5.9":
version: 6.5.9
resolution: "@storybook/addons@npm:6.5.9"
dependencies:
"@storybook/api": 6.5.9
"@storybook/channels": 6.5.9
"@storybook/client-logger": 6.5.9
"@storybook/core-events": 6.5.9
"@storybook/csf": 0.0.2--canary.4566f4d.1
"@storybook/router": 6.5.9
"@storybook/theming": 6.5.9
"@types/webpack-env": ^1.16.0
core-js: ^3.8.2
global: ^4.4.0
regenerator-runtime: ^0.13.7
peerDependencies:
react: ^16.8.0 || ^17.0.0 || ^18.0.0
react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0
checksum: 3ee3e61abc7bff6b481374597cc6717936685222b187d173462483d77d9b284fe5650e9764f7232ae80678e4718440d712f182c01c16887d53c77a1abe262616
languageName: node
linkType: hard
"@storybook/angular@7.0.0-alpha.6, @storybook/angular@workspace:*, @storybook/angular@workspace:frameworks/angular":
version: 0.0.0-use.local
resolution: "@storybook/angular@workspace:frameworks/angular"
@ -7717,6 +7739,34 @@ __metadata:
languageName: node
linkType: hard
"@storybook/api@npm:6.5.9":
version: 6.5.9
resolution: "@storybook/api@npm:6.5.9"
dependencies:
"@storybook/channels": 6.5.9
"@storybook/client-logger": 6.5.9
"@storybook/core-events": 6.5.9
"@storybook/csf": 0.0.2--canary.4566f4d.1
"@storybook/router": 6.5.9
"@storybook/semver": ^7.3.2
"@storybook/theming": 6.5.9
core-js: ^3.8.2
fast-deep-equal: ^3.1.3
global: ^4.4.0
lodash: ^4.17.21
memoizerific: ^1.11.3
regenerator-runtime: ^0.13.7
store2: ^2.12.0
telejson: ^6.0.8
ts-dedent: ^2.0.0
util-deprecate: ^1.0.2
peerDependencies:
react: ^16.8.0 || ^17.0.0 || ^18.0.0
react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0
checksum: 6f3aaed66c27715740397ff80a01fda1e363e75165c90cb5f50e4effc00e91b2d1f58b506d2279e83a905f794988e9aaaa75d5b7380c192c954f8c6520368d67
languageName: node
linkType: hard
"@storybook/babel-plugin-require-context-hook@npm:1.0.1":
version: 1.0.1
resolution: "@storybook/babel-plugin-require-context-hook@npm:1.0.1"
@ -7841,6 +7891,17 @@ __metadata:
languageName: node
linkType: hard
"@storybook/channels@npm:6.5.9":
version: 6.5.9
resolution: "@storybook/channels@npm:6.5.9"
dependencies:
core-js: ^3.8.2
ts-dedent: ^2.0.0
util-deprecate: ^1.0.2
checksum: 3011663b754fe9028076b2a27573c6ca2040eb227918c315b9e6ea4d23298b1ac305e26aa4e89c02c9120ddd475d0f49d42bcb287b84cb37953c5f99606c3ed1
languageName: node
linkType: hard
"@storybook/cli@7.0.0-alpha.6, @storybook/cli@workspace:*, @storybook/cli@workspace:lib/cli":
version: 0.0.0-use.local
resolution: "@storybook/cli@workspace:lib/cli"
@ -7918,7 +7979,7 @@ __metadata:
languageName: unknown
linkType: soft
"@storybook/client-logger@7.0.0-alpha.6, @storybook/client-logger@^6 || ^7 || ^7.0.0-0, @storybook/client-logger@workspace:*, @storybook/client-logger@workspace:lib/client-logger":
"@storybook/client-logger@7.0.0-alpha.6, @storybook/client-logger@workspace:*, @storybook/client-logger@workspace:lib/client-logger":
version: 0.0.0-use.local
resolution: "@storybook/client-logger@workspace:lib/client-logger"
dependencies:
@ -7947,6 +8008,16 @@ __metadata:
languageName: node
linkType: hard
"@storybook/client-logger@npm:6.5.9, @storybook/client-logger@npm:^6.4.0":
version: 6.5.9
resolution: "@storybook/client-logger@npm:6.5.9"
dependencies:
core-js: ^3.8.2
global: ^4.4.0
checksum: 764aacff6859c2cfe93f90498504e6628d8c7606490f1eec835639e21f177b10f0e93cad605dadf0ca6e08f6d5e62153597de6c80570ae65d76b4c71b6884e09
languageName: node
linkType: hard
"@storybook/codemod@7.0.0-alpha.6, @storybook/codemod@workspace:*, @storybook/codemod@workspace:lib/codemod":
version: 0.0.0-use.local
resolution: "@storybook/codemod@workspace:lib/codemod"
@ -8129,6 +8200,15 @@ __metadata:
languageName: node
linkType: hard
"@storybook/core-events@npm:6.5.9":
version: 6.5.9
resolution: "@storybook/core-events@npm:6.5.9"
dependencies:
core-js: ^3.8.2
checksum: 5d9eb651ef528330bebe9048eec61d4e3af29fabcf3cc8d7572a94f199e2220dfa738c19d65a761de5ec377d7933316af5eb2bfd0dc8c4027cd7dd57951552bd
languageName: node
linkType: hard
"@storybook/core-server@7.0.0-alpha.6, @storybook/core-server@workspace:lib/core-server":
version: 0.0.0-use.local
resolution: "@storybook/core-server@workspace:lib/core-server"
@ -8160,7 +8240,6 @@ __metadata:
commander: ^6.2.1
compression: ^1.7.4
core-js: ^3.8.2
cpy: ^8.1.2
detect-port: ^1.3.0
express: ^4.17.1
fs-extra: ^9.0.1
@ -8466,7 +8545,7 @@ __metadata:
languageName: unknown
linkType: soft
"@storybook/instrumenter@7.0.0-alpha.6, @storybook/instrumenter@^6 || ^7 || ^7.0.0-0, @storybook/instrumenter@workspace:*, @storybook/instrumenter@workspace:lib/instrumenter":
"@storybook/instrumenter@7.0.0-alpha.6, @storybook/instrumenter@workspace:*, @storybook/instrumenter@workspace:lib/instrumenter":
version: 0.0.0-use.local
resolution: "@storybook/instrumenter@workspace:lib/instrumenter"
dependencies:
@ -8490,6 +8569,19 @@ __metadata:
languageName: node
linkType: hard
"@storybook/instrumenter@npm:^6.4.0":
version: 6.5.9
resolution: "@storybook/instrumenter@npm:6.5.9"
dependencies:
"@storybook/addons": 6.5.9
"@storybook/client-logger": 6.5.9
"@storybook/core-events": 6.5.9
core-js: ^3.8.2
global: ^4.4.0
checksum: df6e535759540c09cb0addd65250121a10767ea7f43d6452417208eb09f565250f52c4417c707c964b61da063ee06d15c7aa3baaa86a0a585768fc94cdb8f31d
languageName: node
linkType: hard
"@storybook/instrumenter@npm:^6.4.0 || >=6.5.0-0":
version: 6.5.7
resolution: "@storybook/instrumenter@npm:6.5.7"
@ -9107,7 +9199,7 @@ __metadata:
"@storybook/svelte": "workspace:*"
"@storybook/svelte-webpack5": "workspace:*"
"@storybook/telemetry": "workspace:*"
"@storybook/testing-library": ^0.0.12
"@storybook/testing-library": 0.0.14-next.0
"@storybook/theming": "workspace:*"
"@storybook/ui": "workspace:*"
"@storybook/vue": "workspace:*"
@ -9331,6 +9423,22 @@ __metadata:
languageName: node
linkType: hard
"@storybook/router@npm:6.5.9":
version: 6.5.9
resolution: "@storybook/router@npm:6.5.9"
dependencies:
"@storybook/client-logger": 6.5.9
core-js: ^3.8.2
memoizerific: ^1.11.3
qs: ^6.10.0
regenerator-runtime: ^0.13.7
peerDependencies:
react: ^16.8.0 || ^17.0.0 || ^18.0.0
react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0
checksum: 765977adbcaa1d06958489bd1316056c35f712f04c603a3848ed04dea3155f65369a085759913ccf19ffda3de41d429f455fbc330c3bcf7b3fdc65e9a3ddd320
languageName: node
linkType: hard
"@storybook/semver@npm:^7.3.2":
version: 7.3.2
resolution: "@storybook/semver@npm:7.3.2"
@ -9477,29 +9585,16 @@ __metadata:
languageName: unknown
linkType: soft
"@storybook/testing-library@npm:^0.0.12":
version: 0.0.12
resolution: "@storybook/testing-library@npm:0.0.12"
"@storybook/testing-library@npm:0.0.14-next.0":
version: 0.0.14-next.0
resolution: "@storybook/testing-library@npm:0.0.14-next.0"
dependencies:
"@storybook/client-logger": ^6 || ^7 || ^7.0.0-0
"@storybook/instrumenter": ^6 || ^7 || ^7.0.0-0
"@storybook/client-logger": ^6.4.0
"@storybook/instrumenter": ^6.4.0
"@testing-library/dom": ^8.3.0
"@testing-library/user-event": ^13.2.1
ts-dedent: ^2.2.0
checksum: ea1ad2ded53bc109defd3d2b7d41348f8fa823d1e092b62bb6fcb87568358c3743eed72ce4d1e61b73f80097d408ff02a520c17f347589df244380043828892c
languageName: node
linkType: hard
"@storybook/testing-library@npm:^0.0.7":
version: 0.0.7
resolution: "@storybook/testing-library@npm:0.0.7"
dependencies:
"@storybook/client-logger": 6.4.0-rc.5
"@storybook/instrumenter": 6.4.0-rc.5
"@testing-library/dom": ^8.3.0
"@testing-library/user-event": ^13.2.1
ts-dedent: ^2.2.0
checksum: 6be4b2d418195417cd0a04e5a4f2b71a93364cb88780084714a0553c39e6b38943458511b25b101c830b332783afec98a40eefcdc663dca3f34e8f48609a4670
checksum: fd10ebddd305743f4388ad939b90fed155b6c3a755e96a73f72d38d9afe2546a22be0c9a5d83b8b6d91742dd7be5d2e7dfcbbd630b2fa97e4ef7dde00f0824b0
languageName: node
linkType: hard
@ -9576,6 +9671,21 @@ __metadata:
languageName: node
linkType: hard
"@storybook/theming@npm:6.5.9":
version: 6.5.9
resolution: "@storybook/theming@npm:6.5.9"
dependencies:
"@storybook/client-logger": 6.5.9
core-js: ^3.8.2
memoizerific: ^1.11.3
regenerator-runtime: ^0.13.7
peerDependencies:
react: ^16.8.0 || ^17.0.0 || ^18.0.0
react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0
checksum: 28b2626ab2ef4396d3e8d0fad651bf13b323318028e7b01a99c9b999f368655d7aa78dd8154396753828746d934cfbaee1575c890307893d6a3cca9655c9a60e
languageName: node
linkType: hard
"@storybook/ui@7.0.0-alpha.6, @storybook/ui@workspace:*, @storybook/ui@workspace:lib/ui":
version: 0.0.0-use.local
resolution: "@storybook/ui@workspace:lib/ui"
@ -13019,7 +13129,7 @@ __metadata:
"@storybook/babel-plugin-require-context-hook": 1.0.1
"@storybook/jest": ^0.0.5
"@storybook/source-loader": 7.0.0-alpha.6
"@storybook/testing-library": ^0.0.12
"@storybook/testing-library": 0.0.14-next.0
"@types/core-js": ^2.5.4
"@types/jest": ^26.0.16
"@types/node": ^14.14.20 || ^16.0.0
@ -13585,13 +13695,6 @@ __metadata:
languageName: node
linkType: hard
"arrify@npm:^2.0.1":
version: 2.0.1
resolution: "arrify@npm:2.0.1"
checksum: 3fb30b5e7c37abea1907a60b28a554d2f0fc088757ca9bf5b684786e583fdf14360721eb12575c1ce6f995282eab936712d3c4389122682eafab0e0b57f78dbb
languageName: node
linkType: hard
"asap@npm:^2.0.0, asap@npm:~2.0.3, asap@npm:~2.0.6":
version: 2.0.6
resolution: "asap@npm:2.0.6"
@ -17607,35 +17710,6 @@ __metadata:
languageName: node
linkType: hard
"cp-file@npm:^7.0.0":
version: 7.0.0
resolution: "cp-file@npm:7.0.0"
dependencies:
graceful-fs: ^4.1.2
make-dir: ^3.0.0
nested-error-stacks: ^2.0.0
p-event: ^4.1.0
checksum: db3ef3e3e466742f392ae71edb9b2cdbb314e855d97630a65de57bc1097bacf6e844f6d9d44882b8678c0de26ba7e656c2c915960435970067823372e807eafa
languageName: node
linkType: hard
"cpy@npm:^8.1.2":
version: 8.1.2
resolution: "cpy@npm:8.1.2"
dependencies:
arrify: ^2.0.1
cp-file: ^7.0.0
globby: ^9.2.0
has-glob: ^1.0.0
junk: ^3.1.0
nested-error-stacks: ^2.1.0
p-all: ^2.1.0
p-filter: ^2.1.0
p-map: ^3.0.0
checksum: 84611fdd526a0582ae501a0fa1e1d55e16348c69110eb17be5fc0c087b7b2aa6caec014286b669e4f123750d01e0c4db77d32fdcdb9840c3df4d161a137a345a
languageName: node
linkType: hard
"cra-kitchen-sink@workspace:examples/cra-kitchen-sink":
version: 0.0.0-use.local
resolution: "cra-kitchen-sink@workspace:examples/cra-kitchen-sink"
@ -24619,15 +24693,6 @@ __metadata:
languageName: node
linkType: hard
"has-glob@npm:^1.0.0":
version: 1.0.0
resolution: "has-glob@npm:1.0.0"
dependencies:
is-glob: ^3.0.0
checksum: 2546d20b7a667304d8b2e490c2d5a4e20e799a43eb6d97c0d47c0c737bbde082a73731001c791d445b904b3f408d584477df7d2d301183e13c4b3f0a3c81787b
languageName: node
linkType: hard
"has-property-descriptors@npm:^1.0.0":
version: 1.0.0
resolution: "has-property-descriptors@npm:1.0.0"
@ -26572,7 +26637,7 @@ __metadata:
languageName: node
linkType: hard
"is-glob@npm:^3.0.0, is-glob@npm:^3.1.0":
"is-glob@npm:^3.1.0":
version: 3.1.0
resolution: "is-glob@npm:3.1.0"
dependencies:
@ -29235,13 +29300,6 @@ __metadata:
languageName: node
linkType: hard
"junk@npm:^3.1.0":
version: 3.1.0
resolution: "junk@npm:3.1.0"
checksum: 820174b9fa9a3af09aeeeeb1022df2481a2b10752ce5f65ac63924a79cb9bba83ea7c288e8d5b448951109742da5ea69a230846f4bf3c17c5c6a1d0603b63db4
languageName: node
linkType: hard
"jwa@npm:^1.4.1":
version: 1.4.1
resolution: "jwa@npm:1.4.1"
@ -32725,13 +32783,6 @@ __metadata:
languageName: node
linkType: hard
"nested-error-stacks@npm:^2.0.0, nested-error-stacks@npm:^2.1.0":
version: 2.1.1
resolution: "nested-error-stacks@npm:2.1.1"
checksum: feec00417e4778661cfbbe657e6add6ca9918dcc026cd697ac330b4a56a79e4882b36dde8abc138167566b1ce4c5baa17d2d4df727a96f8b96aebace1c3ffca7
languageName: node
linkType: hard
"next-themes@npm:^0.0.8":
version: 0.0.8
resolution: "next-themes@npm:0.0.8"
@ -33777,7 +33828,7 @@ __metadata:
"@storybook/react-webpack5": 7.0.0-alpha.6
"@storybook/router": 7.0.0-alpha.6
"@storybook/source-loader": 7.0.0-alpha.6
"@storybook/testing-library": ^0.0.12
"@storybook/testing-library": 0.0.14-next.0
"@storybook/theming": 7.0.0-alpha.6
"@testing-library/dom": ^7.31.2
"@testing-library/user-event": ^13.1.9
@ -34032,15 +34083,6 @@ __metadata:
languageName: node
linkType: hard
"p-all@npm:^2.1.0":
version: 2.1.0
resolution: "p-all@npm:2.1.0"
dependencies:
p-map: ^2.0.0
checksum: 874eafa2e3f38b258f8beed34549befbc8a52a63818e0981b8beff03f592e1e1f47b8aab2483f844f2745815ffa010def58bf1edbc95614466c55411f02f3049
languageName: node
linkType: hard
"p-cancelable@npm:^0.4.0":
version: 0.4.1
resolution: "p-cancelable@npm:0.4.1"
@ -34078,24 +34120,6 @@ __metadata:
languageName: node
linkType: hard
"p-event@npm:^4.1.0":
version: 4.2.0
resolution: "p-event@npm:4.2.0"
dependencies:
p-timeout: ^3.1.0
checksum: f1b6a2fb13d47f2a8afc00150da5ece0d28940ce3d8fa562873e091d3337d298e78fee9cb18b768598ff1d11df608b2ae23868309ff6405b864a2451ccd6d25a
languageName: node
linkType: hard
"p-filter@npm:^2.1.0":
version: 2.1.0
resolution: "p-filter@npm:2.1.0"
dependencies:
p-map: ^2.0.0
checksum: 5ac34b74b3b691c04212d5dd2319ed484f591c557a850a3ffc93a08cb38c4f5540be059c6b10a185773c479ca583a91ea00c7d6c9958c815e6b74d052f356645
languageName: node
linkType: hard
"p-finally@npm:^1.0.0":
version: 1.0.0
resolution: "p-finally@npm:1.0.0"
@ -34189,22 +34213,13 @@ __metadata:
languageName: node
linkType: hard
"p-map@npm:^2.0.0, p-map@npm:^2.1.0":
"p-map@npm:^2.1.0":
version: 2.1.0
resolution: "p-map@npm:2.1.0"
checksum: 735dae87badd4737a2dd582b6d8f93e49a1b79eabbc9815a4d63a528d5e3523e978e127a21d784cccb637010e32103a40d2aaa3ab23ae60250b1a820ca752043
languageName: node
linkType: hard
"p-map@npm:^3.0.0":
version: 3.0.0
resolution: "p-map@npm:3.0.0"
dependencies:
aggregate-error: ^3.0.0
checksum: 297930737e52412ad9f5787c52774ad6496fad9a8be5f047e75fd0a3dc61930d8f7a9b2bbe1c4d1404e54324228a4f69721da2538208dadaa4ef4c81773c9f20
languageName: node
linkType: hard
"p-map@npm:^4.0.0":
version: 4.0.0
resolution: "p-map@npm:4.0.0"
@ -34256,15 +34271,6 @@ __metadata:
languageName: node
linkType: hard
"p-timeout@npm:^3.1.0":
version: 3.2.0
resolution: "p-timeout@npm:3.2.0"
dependencies:
p-finally: ^1.0.0
checksum: 524b393711a6ba8e1d48137c5924749f29c93d70b671e6db761afa784726572ca06149c715632da8f70c090073afb2af1c05730303f915604fd38ee207b70a61
languageName: node
linkType: hard
"p-try@npm:^1.0.0":
version: 1.0.0
resolution: "p-try@npm:1.0.0"
@ -41946,7 +41952,7 @@ __metadata:
"@storybook/source-loader": 7.0.0-alpha.6
"@storybook/svelte": 7.0.0-alpha.6
"@storybook/svelte-webpack5": 7.0.0-alpha.6
"@storybook/testing-library": ^0.0.7
"@storybook/testing-library": 0.0.14-next.0
global: ^4.4.0
storybook: 7.0.0-alpha.6
svelte-jester: ^2.3.2
@ -44792,7 +44798,7 @@ __metadata:
"@storybook/addon-links": 7.0.0-alpha.6
"@storybook/addon-storyshots": 7.0.0-alpha.6
"@storybook/jest": ^0.0.5
"@storybook/testing-library": ^0.0.12
"@storybook/testing-library": 0.0.14-next.0
"@storybook/vue3": 7.0.0-alpha.6
"@storybook/vue3-webpack5": 7.0.0-alpha.6
"@vue/cli-plugin-babel": ^5.0.4
@ -44894,7 +44900,7 @@ __metadata:
"@storybook/addons": 7.0.0-alpha.6
"@storybook/jest": ^0.0.5
"@storybook/source-loader": 7.0.0-alpha.6
"@storybook/testing-library": ^0.0.12
"@storybook/testing-library": 0.0.14-next.0
"@storybook/vue": 7.0.0-alpha.6
"@storybook/vue-webpack5": 7.0.0-alpha.6
"@vue/babel-preset-jsx": ^1.2.4