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

Updates documentation to feature previewjs TS types

Browse Source
This commit is contained in:
jonniebigodes 2023-03-02 22:33:12 +00:00
parent 2a2995ab25
commit d69691057a
36 changed files with 284 additions and 169 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
docs/addons/install-addons.md
View File

@ -22,6 +22,12 @@ For example, to include accessibility testing in Storybook, run the following co
<!-- prettier-ignore-end -->
<div class="aside">
ℹ️ Installing the package with `@next` will install the cutting-edge version of it. Be advised prerelease versions are subject to breaking changes and are not recommended for production use. Use at your own risk.
</div>
Next, update [`.storybook/main.js|ts`](../configure/overview.md#configure-story-rendering) to the following:
<!-- prettier-ignore-start -->

8
docs/api/argtypes.md
View File

@ -61,6 +61,7 @@ If you want more control over the args table or any other aspect of using argTyp
<CodeSnippets
paths={[
'common/storybook-customize-argtypes.js.mdx',
'common/storybook-customize-argtypes.ts.mdx',
]}
/>
@ -146,7 +147,8 @@ Results in the following change into your story and UI.
<CodeSnippets
paths={[
'common/button-story-argtypes-with-categories.js.mdx'
'common/button-story-argtypes-with-categories.js.mdx',
'common/button-story-argtypes-with-categories.ts.mdx',
]}
/>
@ -168,7 +170,8 @@ You can also extend the formula above and introduce subcategories, allowing bett
<CodeSnippets
paths={[
'common/button-story-argtypes-with-subcategories.js.mdx'
'common/button-story-argtypes-with-subcategories.js.mdx',
'common/button-story-argtypes-with-subcategories.ts.mdx',
]}
/>
@ -185,6 +188,7 @@ You can also define arg types at the global level; they will apply to every comp
<CodeSnippets
paths={[
'common/button-story-project-args-theme.js.mdx',
'common/button-story-project-args-theme.ts.mdx',
]}
/>

35
docs/api/csf.md
View File

@ -99,10 +99,12 @@ Consider Storybook’s ["Button" example](../writing-stories/introduction.md#def
paths={[
'react/button-story-click-handler.js.mdx',
'react/button-story-click-handler.ts.mdx',
'vue/button-story-click-handler.2.js.mdx',
'vue/button-story-click-handler.ts-2.ts.mdx',
'vue/button-story-click-handler.3.js.mdx',
'vue/button-story-click-handler.ts-3.ts.mdx',
'vue/button-story-click-handler.v2-js.js.mdx',
'vue/button-story-click-handler.v2-ts.ts.mdx',
'vue/button-story-click-handler.v2-ts-4-9.ts.mdx',
'vue/button-story-click-handler.v3-js.js.mdx',
'vue/button-story-click-handler.v3-ts.ts.mdx',
'vue/button-story-click-handler.v3-ts-4-9.ts.mdx',
'svelte/button-story-click-handler.js.mdx',
'angular/button-story-click-handler.ts.mdx',
'web-components/button-story-click-handler.js.mdx',
@ -122,10 +124,12 @@ Now consider the same example, re-written with args:
paths={[
'react/button-story-click-handler-args.js.mdx',
'react/button-story-click-handler-args.ts.mdx',
'vue/button-story-click-handler-args.2.js.mdx',
'vue/button-story-click-handler-args.ts-2.ts.mdx',
'vue/button-story-click-handler-args.3.js.mdx',
'vue/button-story-click-handler-args.ts-3.ts.mdx',
'vue/button-story-click-handler-args.v2-js.js.mdx',
'vue/button-story-click-handler-args.v2-ts.ts.mdx',
'vue/button-story-click-handler-args.v2-ts-4-9.ts.mdx',
'vue/button-story-click-handler-args.v3-js.js.mdx',
'vue/button-story-click-handler-args.v3-ts.ts.mdx',
'vue/button-story-click-handler-args.v3-ts-4-9.ts.mdx',
'angular/button-story-click-handler-args.ts.mdx',
'svelte/button-story-click-handler-args.js.mdx',
'web-components/button-story-click-handler-args.js.mdx',
@ -174,10 +178,8 @@ A good use case for the `play` function is a form component. With previous Story
'react/login-form-with-play-function.js.mdx',
'react/login-form-with-play-function.ts.mdx',
'angular/login-form-with-play-function.ts.mdx',
'vue/login-form-with-play-function.2.js.mdx',
'vue/login-form-with-play-function.ts-2.ts.mdx',
'vue/login-form-with-play-function.3.js.mdx',
'vue/login-form-with-play-function.ts-3.ts.mdx',
'vue/login-form-with-play-function.js.mdx',
'vue/login-form-with-play-function.ts.mdx',
'web-components/login-form-with-play-function.js.mdx',
'web-components/login-form-with-play-function.ts.mdx',
'svelte/login-form-with-play-function.js.mdx',
@ -253,10 +255,8 @@ Consider the following story file:
paths={[
'react/my-component-story-with-nonstory.js.mdx',
'react/my-component-story-with-nonstory.ts.mdx',
'vue/my-component-story-with-nonstory.2.js.mdx',
'vue/my-component-story-with-nonstory.ts-2.ts.mdx',
'vue/my-component-story-with-nonstory.3.js.mdx',
'vue/my-component-story-with-nonstory.ts-3.ts.mdx',
'vue/my-component-story-with-nonstory.js.mdx',
'vue/my-component-story-with-nonstory.ts.mdx',
'svelte/my-component-story-with-nonstory.js.mdx',
'angular/my-component-story-with-nonstory.ts.mdx',
'web-components/my-component-story-with-nonstory.js.mdx',
@ -313,8 +313,7 @@ Here's the CSF 3 equivalent:
paths={[
'common/csf-3-example-starter.js.mdx',
'react/csf-3-example-starter.ts.mdx',
'vue/csf-3-example-starter.ts-2.ts.mdx',
'vue/csf-3-example-starter.ts-3.ts.mdx',
'vue/csf-3-example-starter.ts.mdx',
'angular/csf-3-example-starter.ts.mdx',
'web-components/csf-3-example-starter.js.mdx',
'web-components/csf-3-example-starter.ts.mdx',

3
docs/api/new-frameworks.md
View File

@ -123,7 +123,8 @@ Consider the following hypothetical example:
<CodeSnippets
paths={[
'common/button-story-hypothetical-example.js.mdx'
'common/button-story-hypothetical-example.js.mdx',
'common/button-story-hypothetical-example.ts.mdx'
]}
usesCsf3
csf2Path="api/new-frameworks#snippet-button-story-hypothetical-example"

6
docs/builders/builder-api.md
View File

@ -23,6 +23,12 @@ To opt into a builder, the user must add it as a dependency and then edit their
<!-- prettier-ignore-end -->
<div class="aside">
ℹ️ Installing the package with `@next` will install the cutting-edge version of it. Be advised prerelease versions are subject to breaking changes and are not recommended for production use. Use at your own risk.
</div>
<!-- prettier-ignore-start -->
<CodeSnippets

6
docs/builders/vite.md
View File

@ -24,6 +24,12 @@ Run the following command to install the builder.
<!-- prettier-ignore-end -->
<div class="aside">
ℹ️ Installing the package with `@next` will install the cutting-edge version of it. Be advised prerelease versions are subject to breaking changes and are not recommended for production use. Use at your own risk.
</div>
Update your Storybook configuration (in `.storybook/main.js|ts`) to include the builder.
<!-- prettier-ignore-start -->

6
docs/configure/environment-variables.md
View File

@ -51,10 +51,8 @@ Then you can access this environment variable anywhere, even within your stories
paths={[
'react/my-component-with-env-variables.js.mdx',
'react/my-component-with-env-variables.ts.mdx',
'vue/my-component-with-env-variables.2.js.mdx',
'vue/my-component-with-env-variables.ts-2.ts.mdx',
'vue/my-component-with-env-variables.3.js.mdx',
'vue/my-component-with-env-variables.ts-3.ts.mdx',
'vue/my-component-with-env-variables.js.mdx',
'vue/my-component-with-env-variables.ts.mdx',
'angular/my-component-with-env-variables.ts.mdx',
'web-components/my-component-with-env-variables.js.mdx',
'web-components/my-component-with-env-variables.ts.mdx',

10
docs/configure/images-and-assets.md
View File

@ -16,10 +16,12 @@ Afterward, you can use any asset in your stories:
paths={[
'react/component-story-static-asset-with-import.js.mdx',
'react/component-story-static-asset-with-import.ts.mdx',
'vue/component-story-static-asset-with-import.2.js.mdx',
'vue/component-story-static-asset-with-import.ts-2.ts.mdx',
'vue/component-story-static-asset-with-import.3.js.mdx',
'vue/component-story-static-asset-with-import.ts-3.ts.mdx',
'vue/component-story-static-asset-with-import.v2-js.js.mdx',
'vue/component-story-static-asset-with-import.v2-ts.ts.mdx',
'vue/component-story-static-asset-with-import.v2-ts-4-9.ts.mdx',
'vue/component-story-static-asset-with-import.v3-js.js.mdx',
'vue/component-story-static-asset-with-import.v3-ts.ts.mdx',
'vue/component-story-static-asset-with-import.v3-ts-4-9.ts.mdx',
'angular/component-story-static-asset-with-import.ts.mdx',
'svelte/component-story-static-asset-with-import.js.mdx',
'web-components/component-story-static-asset-with-import.js.mdx',

3
docs/configure/story-layout.md
View File

@ -12,7 +12,8 @@ You can add the parameter to your [`./storybook/preview.js`](./overview.md#confi
<CodeSnippets
paths={[
'common/storybook-preview-layout-param.js.mdx'
'common/storybook-preview-layout-param.js.mdx',
'common/storybook-preview-layout-param.ts.mdx',
]}
/>

9
docs/configure/theming.md
View File

@ -24,6 +24,12 @@ Make sure you have installed [`@storybook/addons`](https://www.npmjs.com/package
<!-- prettier-ignore-end -->
<div class="aside">
ℹ️ Installing the package with `@next` will install the cutting-edge version of it. Be advised prerelease versions are subject to breaking changes and are not recommended for production use. Use at your own risk.
</div>
As an example, you can tell Storybook to use the "dark" theme by modifying [`.storybook/manager.js`](./overview.md#configure-story-rendering):
<!-- prettier-ignore-start -->
@ -61,6 +67,7 @@ Here's how you'd specify the same theme for docs in [`.storybook/preview.js`](./
<CodeSnippets
paths={[
'common/storybook-preview-docs-dark-theme.js.mdx',
'common/storybook-preview-docs-dark-theme.js.mdx',
]}
/>
@ -164,6 +171,7 @@ Here's how you might insert a custom code renderer for `code` blocks on the page
<CodeSnippets
paths={[
'common/storybook-preview-custom-code-renderer.js.mdx',
'common/storybook-preview-custom-code-renderer.ts.mdx',
]}
/>
@ -178,6 +186,7 @@ Here's how you might insert a custom `<Canvas />` block:
<CodeSnippets
paths={[
'common/storybook-preview-custom-canvas.js.mdx',
'common/storybook-preview-custom-canvas.ts.mdx',
]}
/>

1
docs/essentials/actions.md
View File

@ -43,6 +43,7 @@ Another option is to use a global parameter to match all [argTypes](../api/argty
<CodeSnippets
paths={[
'common/storybook-preview-matching-argtypes.js.mdx',
'common/storybook-preview-matching-argtypes.ts.mdx',
]}
/>

1
docs/essentials/backgrounds.md
View File

@ -22,6 +22,7 @@ But you're not restricted to these backgrounds, you can configure your own set o
<CodeSnippets
paths={[
'common/storybook-preview-configure-background-colors.js.mdx',
'common/storybook-preview-configure-background-colors.ts.mdx',
]}
/>

17
docs/essentials/controls.md
View File

@ -109,6 +109,7 @@ If you haven't used the CLI to setup the configuration, or if you want to define
<CodeSnippets
paths={[
'common/storybook-addon-controls-custom-matchers.js.mdx',
'common/storybook-addon-controls-custom-matchers.ts.mdx',
]}
/>
@ -124,10 +125,12 @@ Until now, we only used auto-generated controls based on the component we're wri
paths={[
'react/table-story-fully-customize-controls.js.mdx',
'react/table-story-fully-customize-controls.ts.mdx',
'vue/table-story-fully-customize-controls.2.js.mdx',
'vue/table-story-fully-customize-controls.ts-2.ts.mdx',
'vue/table-story-fully-customize-controls.3.js.mdx',
'vue/table-story-fully-customize-controls.ts-3.ts.mdx',
'vue/table-story-fully-customize-controls.v2-js.js.mdx',
'vue/table-story-fully-customize-controls.v2-ts.ts.mdx',
'vue/table-story-fully-customize-controls.v2-ts-4-9.ts.mdx',
'vue/table-story-fully-customize-controls.v3-js.js.mdx',
'vue/table-story-fully-customize-controls.v3-ts.ts.mdx',
'vue/table-story-fully-customize-controls.v3-ts-4-9.ts.mdx',
'angular/table-story-fully-customize-controls.ts.mdx',
'web-components/table-story-fully-customize-controls.js.mdx',
'web-components/table-story-fully-customize-controls.ts.mdx',
@ -158,8 +161,8 @@ One way to deal with this is to use primitive values (e.g., strings) as arg valu
paths={[
'react/component-story-custom-args-complex.js.mdx',
'react/component-story-custom-args-complex.ts.mdx',
'vue/component-story-custom-args-complex.3.js.mdx',
'vue/component-story-custom-args-complex.ts-3.ts.mdx',
'vue/component-story-custom-args-complex.js.mdx',
'vue/component-story-custom-args-complex.ts.mdx',
'angular/component-story-custom-args-complex.ts.mdx',
'svelte/component-story-custom-args-complex.js.mdx',
'web-components/component-story-custom-args-complex.js.mdx',
@ -250,6 +253,7 @@ To enable expanded mode globally, add the following to [`.storybook/preview.js`]
<CodeSnippets
paths={[
'common/storybook-preview-expanded-controls.js.mdx',
'common/storybook-preview-expanded-controls.ts.mdx',
]}
/>
@ -268,6 +272,7 @@ For `color` controls, you can specify an array of `presetColors`, either on the
<CodeSnippets
paths={[
'common/storybook-preview-parameters-color-swatches.js.mdx',
'common/storybook-preview-parameters-color-swatches.ts.mdx',
]}
/>

6
docs/essentials/interactions.md
View File

@ -32,6 +32,12 @@ Run the following command to install the interactions addon and related dependen
<!-- prettier-ignore-end -->
<div class="aside">
ℹ️ Installing the package with `@next` will install the cutting-edge version of it. Be advised prerelease versions are subject to breaking changes and are not recommended for production use. Use at your own risk.
</div>
Next, update [`.storybook/main.js|ts`](../configure/overview.md#configure-story-rendering) to the following:
<!-- prettier-ignore-start -->

17
docs/essentials/introduction.md
View File

@ -31,6 +31,12 @@ If you're upgrading from a previous Storybook version, you'll need to run the fo
<!-- prettier-ignore-end -->
<div class="aside">
ℹ️ Installing the package with `@next` will install the cutting-edge version of it. Be advised prerelease versions are subject to breaking changes and are not recommended for production use. Use at your own risk.
</div>
Update your Storybook configuration (in [`.storybook/main.js`](../configure/overview.md#configure-story-rendering)) to include the Essentials addon.
<!-- prettier-ignore-start -->
@ -62,6 +68,12 @@ If you need to reconfigure any of the [individual Essentials addons](https://sto
<!-- prettier-ignore-end -->
<div class="aside">
ℹ️ Installing the package with `@next` will install the cutting-edge version of it. Be advised prerelease versions are subject to breaking changes and are not recommended for production use. Use at your own risk.
</div>
<!-- prettier-ignore-start -->
<CodeSnippets
@ -87,14 +99,13 @@ Below is an abridged configuration and table with all the available options for
<!-- prettier-ignore-end -->
| Addon | Configuration element | Description |
| ------------------------------ |-----------------------|--------------------------------------------------------------------------------------------------------------------------------------------------|
| ------------------------------ | --------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------ |
| `@storybook/addon-actions` | N/A | N/A |
| `@storybook/addon-viewport` | N/A | N/A |
| `@storybook/addon-docs` | `configureJSX` | Enables JSX support in MDX for projects that aren't configured to handle the format. <br/> `configureJSX: true` |
| | `babelOptions` | Provides additional Babel configurations for file transpilation. <br/> `babelOptions: { plugins: [], presets: []}` <br/> Extends `configureJSX`. |
| | `csfPluginOptions` | Provides additional configuration for Storybook's CSF plugin. Can be disabled with `null` |
| | `mdxPluginOptions` | Provides additional configuration for Storybook's MDX plugin. |
| | `transcludeMarkdown` | Enables Markdown file support into MDX and render them as components. <br/> `transcludeMarkdown: true` |
| | `mdxPluginOptions` | Provides additional configuration for Storybook's MDX plugin. |
| `@storybook/addon-controls` | N/A | N/A |
| `@storybook/addon-backgrounds` | N/A | N/A |
| `@storybook/addon-toolbars` | N/A | N/A |

3
docs/essentials/toolbars-and-globals.md
View File

@ -21,6 +21,7 @@ Storybook has a simple, declarative syntax for configuring toolbar menus. In you
<CodeSnippets
paths={[
'common/storybook-preview-configure-globaltypes.js.mdx',
'common/storybook-preview-configure-globaltypes.ts.mdx',
]}
/>
@ -45,6 +46,7 @@ For example, suppose you are using `styled-components`. You can add a theme prov
<CodeSnippets
paths={[
'common/storybook-preview-use-global-type.js.mdx',
'common/storybook-preview-use-global-type.ts.mdx',
]}
/>
@ -63,6 +65,7 @@ In your [`.storybook/preview.js`](../configure/overview.md#configure-story-rende
<CodeSnippets
paths={[
'common/storybook-preview-locales-globaltype.js.mdx',
'common/storybook-preview-locales-globaltype.ts.mdx',
]}
/>

4
docs/essentials/viewport.md
View File

@ -24,6 +24,7 @@ If you want to change the default set of viewports, you can set the global `para
<CodeSnippets
paths={[
'common/storybook-preview-change-viewports.js.mdx',
'common/storybook-preview-change-viewports.ts.mdx',
]}
/>
@ -56,6 +57,7 @@ Change your [`.storybook/preview.js`](../configure/overview.md#configure-story-r
<CodeSnippets
paths={[
'common/storybook-preview-granular-viewports.js.mdx',
'common/storybook-preview-granular-viewports.ts.mdx',
]}
/>
@ -86,6 +88,7 @@ Make the following change to use them in your Storybook:
<CodeSnippets
paths={[
'common/storybook-preview-viewport-use-new-devices.js.mdx',
'common/storybook-preview-viewport-use-new-devices.ts.mdx',
]}
/>
@ -102,6 +105,7 @@ For instance, if you want to use these two with the minimal set of viewports, yo
<CodeSnippets
paths={[
'common/storybook-preview-merge-viewports.js.mdx',
'common/storybook-preview-merge-viewports.ts.mdx',
]}
/>

29
docs/get-started/setup.md
View File

@ -13,10 +13,12 @@ Pick a simple component from your project, like a Button, and write a `.stories.
'react/your-component.js.mdx',
'react/your-component.ts.mdx',
'angular/your-component.ts.mdx',
'vue/your-component.2.js.mdx',
'vue/your-component.ts-2.ts.mdx',
'vue/your-component.3.js.mdx',
'vue/your-component.ts-3.ts.mdx',
'vue/your-component.v2-js.js.mdx',
'vue/your-component.v2-ts.ts.mdx',
'vue/your-component.v2-ts-4-9.ts.mdx',
'vue/your-component.v3-js.js.mdx',
'vue/your-component.v3-ts.ts.mdx',
'vue/your-component.v3-ts-4-9.ts.mdx',
'web-components/your-component.js.mdx',
'web-components/your-component.ts.mdx',
'svelte/your-component.js.mdx',
@ -72,13 +74,18 @@ Use [decorators](../writing-stories/decorators.md) to “wrap” every story in
<CodeSnippets
paths={[
'react/storybook-preview-with-styled-components-decorator.js.mdx',
'react/storybook-preview-with-styled-components-decorator.story-function.js.mdx',
'vue/storybook-preview-with-library-decorator.2-library.js.mdx',
'vue/storybook-preview-with-library-decorator.3-library.js.mdx',
'vue/storybook-preview-with-hoc-component-decorator.2-component.js.mdx',
'vue/storybook-preview-with-hoc-component-decorator.3-component.js.mdx',
'vue/storybook-preview-with-mixin-decorator.2-mixin.js.mdx',
'angular/storybook-preview-with-styled-components-decorator.ts.mdx'
'react/storybook-preview-with-styled-components-decorator.ts.mdx',
'vue/storybook-preview-with-library-decorator.library-v2-js.js.mdx',
'vue/storybook-preview-with-library-decorator.library-v2-ts.ts.mdx',
'vue/storybook-preview-with-library-decorator.library-v3-js.js.mdx',
'vue/storybook-preview-with-library-decorator.library-v3-ts.ts.mdx',
'vue/storybook-preview-with-hoc-component-decorator.component-v2-js.js.mdx',
'vue/storybook-preview-with-hoc-component-decorator.component-v2-ts.ts.mdx',
'vue/storybook-preview-with-hoc-component-decorator.component-v3.js.js.mdx',
'vue/storybook-preview-with-hoc-component-decorator.component-v3-ts.ts.mdx',
'vue/storybook-preview-with-mixin-decorator.mixin-v2-js.js.mdx',
'vue/storybook-preview-with-mixin-decorator.mixin-v2-ts.ts.mdx',
'angular/storybook-preview-with-styled-components-decorator.ts.mdx',
]}
/>

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

@ -18,8 +18,7 @@ Let’s start with the `Button` component. A story is a function that describes
'react/button-story.ts.mdx',
'angular/button-story.ts.mdx',
'vue/button-story.js.mdx',
'vue/button-story.ts-2.ts.mdx',
'vue/button-story.ts-3.ts.mdx',
'vue/button-story.ts.mdx',
'web-components/button-story.js.mdx',
'web-components/button-story.ts.mdx',
'svelte/button-story.js.mdx',
@ -45,10 +44,12 @@ The above story definition can be further improved to take advantage of [Storybo
paths={[
'react/button-story-with-args.js.mdx',
'react/button-story-with-args.ts.mdx',
'vue/button-story-with-args.2.js.mdx',
'vue/button-story-with-args.ts-2.ts.mdx',
'vue/button-story-with-args.3.js.mdx',
'vue/button-story-with-args.ts-3.ts.mdx',
'vue/button-story-with-args.v2-js.js.mdx',
'vue/button-story-with-args.v2-ts.ts.mdx',
'vue/button-story-with-args.v2-ts-4-9.ts.mdx',
'vue/button-story-with-args.v3-js.js.mdx',
'vue/button-story-with-args.v3-ts.ts.mdx',
'vue/button-story-with-args.v3-ts-4-9.ts.mdx',
'angular/button-story-with-args.ts.mdx',
'web-components/button-story-with-args.js.mdx',
'web-components/button-story-with-args.ts.mdx',

10
docs/why-storybook.md
View File

@ -42,10 +42,12 @@ You write stories for granular UI component variation and then use those stories
'react/histogram-story.js.mdx',
'react/histogram-story.ts.mdx',
'angular/histogram-story.ts.mdx',
'vue/histogram-story.2.js.mdx',
'vue/histogram-story.ts-2.ts.mdx',
'vue/histogram-story.3.js.mdx',
'vue/histogram-story.ts-3.ts.mdx',
'vue/histogram-story.v2-js.js.mdx',
'vue/histogram-story.v2-ts.ts.mdx',
'vue/histogram-story.v2-ts-4-9.ts.mdx',
'vue/histogram-story.v3-js.js.mdx',
'vue/histogram-story.v3-ts.ts.mdx',
'vue/histogram-story.v3-ts-4-9.ts.mdx',
'svelte/histogram-story.js.mdx',
'web-components/histogram-story.js.mdx',
'web-components/histogram-story.ts.mdx',

4
docs/writing-docs/autodocs.md
View File

@ -63,6 +63,7 @@ To replace the default documentation template used by Storybook, you can extend
<CodeSnippets
paths={[
'common/storybook-preview-auto-docs-custom-template-function.js.mdx',
'common/storybook-preview-auto-docs-custom-template-function.ts.mdx',
]}
/>
@ -128,6 +129,7 @@ The Docs Container is the component that wraps up the documentation page. It's r
<CodeSnippets
paths={[
'common/storybook-preview-auto-docs-custom-docs-container.js.mdx',
'common/storybook-preview-auto-docs-custom-docs-container.ts.mdx',
]}
/>
@ -142,6 +144,7 @@ By default, Storybook provides two themes for the UI: `light` and `dark`. If you
<CodeSnippets
paths={[
'common/storybook-preview-auto-docs-override-theme.js.mdx',
'common/storybook-preview-auto-docs-override-theme.ts.mdx',
]}
/>
@ -156,6 +159,7 @@ Out of the box, Storybook has a set of components that you can use to customize
<CodeSnippets
paths={[
'common/storybook-preview-auto-docs-override-mdx-container.js.mdx',
'common/storybook-preview-auto-docs-override-mdx-container.ts.mdx',
]}
/>

14
docs/writing-docs/doc-blocks.md
View File

@ -96,15 +96,13 @@ In both use cases (MDX and automatic docs), many of the doc blocks can be custom
For example, you can filter out the `style` prop from all [`Controls`](../api/doc-block-controls.md) tables through your Storybook:
<!-- prettier-ignore-start -->
```js
// .storybook/preview.js
<CodeSnippets
paths={[
'common/storybook-preview-doc-blocks-controls-exclude-prop.js.mdx',
'common/storybook-preview-doc-blocks-controls-exclude-prop.ts.mdx',
]}
/>
export const parameters = {
docs: {
controls: { exclude: ['style'] }
}
}
```
<!-- prettier-ignore-end -->
<div class="aside">

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

@ -24,10 +24,12 @@ To define the args of a single story, use the `args` CSF story key:
paths={[
'react/button-story-with-args.js.mdx',
'react/button-story-with-args.ts.mdx',
'vue/button-story-with-args.2.js.mdx',
'vue/button-story-with-args.ts-2.ts.mdx',
'vue/button-story-with-args.3.js.mdx',
'vue/button-story-with-args.ts-3.ts.mdx',
'vue/button-story-with-args.v2-js.js.mdx',
'vue/button-story-with-args.v2-ts.ts.mdx',
'vue/button-story-with-args.v2-ts-4-9.ts.mdx',
'vue/button-story-with-args.v3-js.js.mdx',
'vue/button-story-with-args.v3-ts.ts.mdx',
'vue/button-story-with-args.v3-ts-4-9.ts.mdx',
'angular/button-story-with-args.ts.mdx',
'web-components/button-story-with-args.js.mdx',
'web-components/button-story-with-args.ts.mdx',
@ -72,8 +74,7 @@ You can also define args at the component level; they will apply to all the comp
'react/button-story-component-args-primary.js.mdx',
'react/button-story-component-args-primary.ts.mdx',
'vue/button-story-component-args-primary.js.mdx',
'vue/button-story-component-args-primary.ts-2.ts.mdx',
'vue/button-story-component-args-primary.ts-3.ts.mdx',
'vue/button-story-component-args-primary.ts.mdx',
'angular/button-story-component-args-primary.ts.mdx',
'web-components/button-story-component-args-primary.js.mdx',
'web-components/button-story-component-args-primary.ts.mdx',
@ -94,6 +95,7 @@ You can also define args at the global level; they will apply to every component
<CodeSnippets
paths={[
'common/button-story-project-args-theme.js.mdx',
'common/button-story-project-args-theme.ts.mdx',
]}
/>
@ -133,10 +135,12 @@ Args are useful when writing stories for composite components that are assembled
'react/page-story.js.mdx',
'react/page-story.ts.mdx',
'angular/page-story.ts.mdx',
'vue/page-story.2.js.mdx',
'vue/page-story.ts-2.ts.mdx',
'vue/page-story.3.js.mdx',
'vue/page-story.ts-3.ts.mdx',
'vue/page-story.v2-js.js.mdx',
'vue/page-story.v2-ts.ts.mdx',
'vue/page-story.v2-ts-4-9.ts.mdx',
'vue/page-story.v3-js.js.mdx',
'vue/page-story.v3-ts.ts.mdx',
'vue/page-story.v3-ts-4-9.ts.mdx',
'web-components/page-story.js.mdx',
'web-components/page-story.ts.mdx',
'svelte/page-story.js.mdx',
@ -157,10 +161,12 @@ You can use args in your stories to configure the component's appearance, simila
paths={[
'react/page-story-slots.js.mdx',
'react/page-story-slots.ts.mdx',
'vue/page-story-slots.2.js.mdx',
'vue/page-story-slots.ts-2.ts.mdx',
'vue/page-story-slots.3.js.mdx',
'vue/page-story-slots.ts-3.ts.mdx',
'vue/page-story-slots.v2-js.js.mdx',
'vue/page-story-slots.v2-ts.ts.mdx',
'vue/page-story-slots.v2-ts-4-9.ts.mdx',
'vue/page-story-slots.v3-js.js.mdx',
'vue/page-story-slots.v3-ts.ts.mdx',
'vue/page-story-slots.v3-ts-4-9.ts.mdx',
'angular/page-story-slots.ts.mdx',
'web-components/page-story-slots.js.mdx',
'web-components/page-story-slots.ts.mdx',
@ -244,7 +250,8 @@ In Storybook 5 and before we passed the context as the first argument. If you’
<CodeSnippets
paths={[
'common/storybook-preview-parameters-old-format.js.mdx'
'common/storybook-preview-parameters-old-format.js.mdx',
'common/storybook-preview-parameters-old-format.ts.mdx',
]}
/>

9
docs/writing-stories/build-pages-with-storybook.md
View File

@ -111,6 +111,7 @@ Update your `.storybook/preview.js` file and enable the addon via a [global deco
<CodeSnippets
paths={[
'common/storybook-preview-register-msw-addon.js.mdx',
'common/storybook-preview-register-msw-addon.ts.mdx',
]}
/>
@ -197,11 +198,11 @@ To test your screen with the GraphQL mocked data, you could write the following
paths={[
'react/documentscreen-story-msw-graphql-query.js.mdx',
'react/documentscreen-story-msw-graphql-query.ts.mdx',
'vue/documentscreen-story-msw-graphql-query.3.js.mdx',
'vue/documentscreen-story-msw-graphql-query.ts-3.ts.mdx',
'vue/apollo-wrapper-component.with-mock-implementation-3.js.mdx',
'angular/documentscreen-story-msw-graphql-query.ts.mdx',
'vue/documentscreen-story-msw-graphql-query.js.mdx',
'vue/documentscreen-story-msw-graphql-query.ts.mdx',
'angular/apollo-module.mock-apollo-module.ts.mdx',
'angular/documentscreen-story-msw-graphql-query.ts.mdx',
'svelte/documentscreen-story-msw-graphql-query.js.mdx',
'svelte/apollo-wrapper-component.with-mock-implementation.js.mdx',
]}
@ -251,6 +252,7 @@ Add the decorator you've just implemented to your [storybook/preview.js](../conf
<CodeSnippets
paths={[
'common/storybook-preview-with-mock-decorator.js.mdx',
'common/storybook-preview-with-mock-decorator.ts.mdx',
]}
/>
@ -375,6 +377,7 @@ If you’ve set up `GlobalContainerContext`, you’ll need to set up a decorator
<CodeSnippets
paths={[
'react/mock-context-container-global.js.mdx',
'react/mock-context-container-global.ts.mdx',
]}
/>

32
docs/writing-stories/decorators.md
View File

@ -17,12 +17,9 @@ Some components require a “harness” to render in a useful way. For instance,
<CodeSnippets
paths={[
'react/your-component-with-decorator.js.mdx',
'react/your-component-with-decorator.story-function-js.js.mdx',
'react/your-component-with-decorator.ts.mdx',
'react/your-component-with-decorator.story-function-ts.ts.mdx',
'vue/your-component-with-decorator.js.mdx',
'vue/your-component-with-decorator.ts-2.ts.mdx',
'vue/your-component-with-decorator.ts-3.ts.mdx',
'vue/your-component-with-decorator.ts.mdx',
'angular/your-component-with-decorator.ts.mdx',
'web-components/your-component-with-decorator.js.mdx',
'web-components/your-component-with-decorator.ts.mdx',
@ -45,12 +42,17 @@ For example, if you're working with React's Styled Components and your component
<CodeSnippets
paths={[
'react/storybook-preview-with-styled-components-decorator.js.mdx',
'react/storybook-preview-with-styled-components-decorator.story-function.js.mdx',
'vue/storybook-preview-with-library-decorator.2-library.js.mdx',
'vue/storybook-preview-with-library-decorator.3-library.js.mdx',
'vue/storybook-preview-with-hoc-component-decorator.2-component.js.mdx',
'vue/storybook-preview-with-hoc-component-decorator.3-component.js.mdx',
'vue/storybook-preview-with-mixin-decorator.2-mixin.js.mdx',
'react/storybook-preview-with-styled-components-decorator.ts.mdx',
'vue/storybook-preview-with-library-decorator.library-v2-js.js.mdx',
'vue/storybook-preview-with-library-decorator.library-v2-ts.ts.mdx',
'vue/storybook-preview-with-library-decorator.library-v3-js.js.mdx',
'vue/storybook-preview-with-library-decorator.library-v3-ts.ts.mdx',
'vue/storybook-preview-with-hoc-component-decorator.component-v2-js.js.mdx',
'vue/storybook-preview-with-hoc-component-decorator.component-v2-ts.ts.mdx',
'vue/storybook-preview-with-hoc-component-decorator.component-v3.js.js.mdx',
'vue/storybook-preview-with-hoc-component-decorator.component-v3-ts.ts.mdx',
'vue/storybook-preview-with-mixin-decorator.mixin-v2-js.js.mdx',
'vue/storybook-preview-with-mixin-decorator.mixin-v2-ts.ts.mdx',
'angular/add-localize-package-to-polyfills.ts.mdx',
'angular/storybook-preview-with-angular-polyfills.js.mdx',
]}
@ -86,11 +88,9 @@ To define a decorator for a single story, use the `decorators` key on a named ex
<CodeSnippets
paths={[
'react/button-story-decorator.js.mdx',
'react/button-story-decorator.story-function.js.mdx',
'react/button-story-decorator.ts.mdx',
'vue/button-story-decorator.js.mdx',
'vue/button-story-decorator.ts-2.ts.mdx',
'vue/button-story-decorator.ts-3.ts.mdx',
'vue/button-story-decorator.ts.mdx',
'angular/button-story-decorator.ts.mdx',
'web-components/button-story-decorator.js.mdx',
'web-components/button-story-decorator.ts.mdx',
@ -116,8 +116,7 @@ To define a decorator for all stories of a component, use the `decorators` key o
'react/button-story-component-decorator.js.mdx',
'react/button-story-component-decorator.ts.mdx',
'vue/button-story-component-decorator.js.mdx',
'vue/button-story-component-decorator.ts-2.ts.mdx',
'vue/button-story-component-decorator.ts-3.ts.mdx',
'vue/button-story-component-decorator.ts.mdx',
'angular/button-story-component-decorator.ts.mdx',
'web-components/button-story-component-decorator.js.mdx',
'web-components/button-story-component-decorator.ts.mdx',
@ -136,8 +135,9 @@ We can also set a decorator for **all stories** via the `decorators` export of y
<CodeSnippets
paths={[
'react/storybook-preview-global-decorator.js.mdx',
'react/storybook-preview-global-decorator.story-function.js.mdx',
'react/storybook-preview-global-decorator.ts.mdx',
'vue/storybook-preview-global-decorator.js.mdx',
'vue/storybook-preview-global-decorator.ts.mdx',
'angular/storybook-preview-global-decorator.ts.mdx',
'web-components/storybook-preview-global-decorator.js.mdx',
'svelte/storybook-preview-global-decorator.js.mdx',

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

@ -34,8 +34,7 @@ The _default_ export metadata controls how Storybook lists your stories and prov
'react/button-story-default-export-with-component.js.mdx',
'react/button-story-default-export-with-component.ts.mdx',
'vue/button-story-default-export-with-component.js.mdx',
'vue/button-story-default-export-with-component.ts-2.ts.mdx',
'vue/button-story-default-export-with-component.ts-3.ts.mdx',
'vue/button-story-default-export-with-component.ts.mdx',
'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',
@ -63,8 +62,7 @@ Use the _named_ exports of a CSF file to define your component’s stories. We r
'react/button-story.js.mdx',
'react/button-story.ts.mdx',
'vue/button-story.js.mdx',
'vue/button-story.ts-2.ts.mdx',
'vue/button-story.ts-3.ts.mdx',
'vue/button-story.ts.mdx',
'angular/button-story.ts.mdx',
'web-components/button-story.js.mdx',
'web-components/button-story.ts.mdx',
@ -136,8 +134,7 @@ A story is a function that describes how to render a component. You can have mul
'react/button-story-with-emojis.js.mdx',
'react/button-story-with-emojis.ts.mdx',
'vue/button-story-with-emojis.js.mdx',
'vue/button-story-with-emojis.ts-2.ts.mdx',
'vue/button-story-with-emojis.ts-3.ts.mdx',
'vue/button-story-with-emojis.ts.mdx',
'angular/button-story-with-emojis.ts.mdx',
'web-components/button-story-with-emojis.js.mdx',
'web-components/button-story-with-emojis.ts.mdx',
@ -163,10 +160,12 @@ Refine this pattern by introducing `args` for your component's stories. It reduc
paths={[
'react/button-story-using-args.js.mdx',
'react/button-story-using-args.ts.mdx',
'vue/button-story-using-args.2.js.mdx',
'vue/button-story-using-args.ts-2.ts.mdx',
'vue/button-story-using-args.3.js.mdx',
'vue/button-story-using-args.ts-3.ts.mdx',
'vue/button-story-using-args.v2-js.js.mdx',
'vue/button-story-using-args.v2-ts.ts.mdx',
'vue/button-story-using-args.v2-ts-4-9.ts.mdx',
'vue/button-story-using-args.v3-js.js.mdx',
'vue/button-story-using-args.v3-ts.ts.mdx',
'vue/button-story-using-args.v3-ts-4-9.ts.mdx',
'angular/button-story-using-args.ts.mdx',
'web-components/button-story-using-args.js.mdx',
'web-components/button-story-using-args.ts.mdx',
@ -191,10 +190,12 @@ What’s more, you can import `args` to reuse when writing stories for other com
'react/button-group-story.js.mdx',
'react/button-group-story.ts.mdx',
'angular/button-group-story.ts.mdx',
'vue/button-group-story.2.js.mdx',
'vue/button-group-story.ts-2.ts.mdx',
'vue/button-group-story.3.js.mdx',
'vue/button-group-story.ts-3.ts.mdx',
'vue/button-group-story.v2-js.js.mdx',
'vue/button-group-story.v2-ts.ts.mdx',
'vue/button-group-story.v2-ts-4-9.ts.mdx',
'vue/button-group-story.v3-js.js.mdx',
'vue/button-group-story.v3-ts.ts.mdx',
'vue/button-group-story.v3-ts-4-9.ts.mdx',
'web-components/button-group-story.js.mdx',
'web-components/button-group-story.ts.mdx',
'svelte/button-group-story.js.mdx',
@ -237,10 +238,8 @@ Storybook's `play` function and the [`@storybook/addon-interactions`](https://st
'react/login-form-with-play-function.js.mdx',
'react/login-form-with-play-function.ts.mdx',
'angular/login-form-with-play-function.ts.mdx',
'vue/login-form-with-play-function.2.js.mdx',
'vue/login-form-with-play-function.ts-2.ts.mdx',
'vue/login-form-with-play-function.3.js.mdx',
'vue/login-form-with-play-function.ts-3.ts.mdx',
'vue/login-form-with-play-function.js.mdx',
'vue/login-form-with-play-function.ts.mdx',
'web-components/login-form-with-play-function.js.mdx',
'web-components/login-form-with-play-function.ts.mdx',
'svelte/login-form-with-play-function.js.mdx',
@ -264,8 +263,7 @@ For instance, suppose you wanted to test your Button component against a differe
'react/button-story-with-blue-args.js.mdx',
'react/button-story-with-blue-args.ts.mdx',
'vue/button-story-with-blue-args.js.mdx',
'vue/button-story-with-blue-args.ts-2.ts.mdx',
'vue/button-story-with-blue-args.ts-3.ts.mdx',
'vue/button-story-with-blue-args.ts.mdx',
'angular/button-story-with-blue-args.ts.mdx',
'web-components/button-story-with-blue-args.js.mdx',
'web-components/button-story-with-blue-args.ts.mdx',
@ -299,8 +297,7 @@ A simple example is adding padding to a component’s stories. Accomplish this u
'react/button-story-component-decorator.js.mdx',
'react/button-story-component-decorator.ts.mdx',
'vue/button-story-component-decorator.js.mdx',
'vue/button-story-component-decorator.ts-2.ts.mdx',
'vue/button-story-component-decorator.ts-3.ts.mdx',
'vue/button-story-component-decorator.ts.mdx',
'angular/button-story-component-decorator.ts.mdx',
'web-components/button-story-component-decorator.js.mdx',
'web-components/button-story-component-decorator.ts.mdx',
@ -325,10 +322,8 @@ When building design systems or component libraries, you may have two or more co
'react/list-story-starter.js.mdx',
'react/list-story-starter.ts.mdx',
'angular/list-story-starter.ts.mdx',
'vue/list-story-starter.2.js.mdx',
'vue/list-story-starter.ts-2.ts.mdx',
'vue/list-story-starter.3.js.mdx',
'vue/list-story-starter.ts-3.ts.mdx',
'vue/list-story-starter.js.mdx',
'vue/list-story-starter.ts.mdx',
'web-components/list-story-starter.js.mdx',
'web-components/list-story-starter.ts.mdx',
'html/list-story-starter.js.mdx',
@ -349,10 +344,8 @@ In such cases, it makes sense to render a different function for each story:
'react/list-story-expanded.js.mdx',
'react/list-story-expanded.ts.mdx',
'angular/list-story-expanded.ts.mdx',
'vue/list-story-expanded.2.js.mdx',
'vue/list-story-expanded.ts-2.ts.mdx',
'vue/list-story-expanded.3.js.mdx',
'vue/list-story-expanded.ts-3.ts.mdx',
'vue/list-story-expanded.js.mdx',
'vue/list-story-expanded.ts.mdx',
'web-components/list-story-expanded.js.mdx',
'web-components/list-story-expanded.ts.mdx',
'html/list-story-expanded.js.mdx',
@ -373,10 +366,12 @@ You can also reuse stories from the child `ListItem` in your `List` component. T
'react/list-story-reuse-data.js.mdx',
'react/list-story-reuse-data.ts.mdx',
'angular/list-story-reuse-data.ts.mdx',
'vue/list-story-reuse-data.2.js.mdx',
'vue/list-story-reuse-data.ts-2.ts.mdx',
'vue/list-story-reuse-data.3.js.mdx',
'vue/list-story-reuse-data.ts-3.ts.mdx',
'vue/list-story-reuse-data.v2-js.js.mdx',
'vue/list-story-reuse-data.v2-ts.ts.mdx',
'vue/list-story-reuse-data.v2-ts-4-9.ts.mdx',
'vue/list-story-reuse-data.v3-js.js.mdx',
'vue/list-story-reuse-data.v3-ts.ts.mdx',
'vue/list-story-reuse-data.v3-ts-4-9.ts.mdx',
'web-components/list-story-reuse-data.js.mdx',
'web-components/list-story-reuse-data.ts.mdx',
'html/list-story-reuse-data.js.mdx',

5
docs/writing-stories/loaders.md
View File

@ -20,8 +20,8 @@ Loaders are helpful when you need to load story data externally (e.g., from a re
paths={[
'react/loader-story.js.mdx',
'react/loader-story.ts.mdx',
'vue/loader-story.3.js.mdx',
'vue/loader-story.ts-3.ts.mdx',
'vue/loader-story.js.mdx',
'vue/loader-story.ts.mdx',
'angular/loader-story.ts.mdx',
'web-components/loader-story.js.mdx',
'web-components/loader-story.ts.mdx',
@ -44,6 +44,7 @@ We can also set a loader for **all stories** via the `loaders` export of your [`
<CodeSnippets
paths={[
'common/storybook-preview-global-loader.js.mdx',
'common/storybook-preview-global-loader.ts.mdx',
]}
/>

4
docs/writing-stories/naming-components-and-hierarchy.md
View File

@ -103,6 +103,7 @@ The most powerful method of sorting is to provide a function to `storySort`. Any
<CodeSnippets
paths={[
'common/storybook-preview-sort-function.js.mdx',
'common/storybook-preview-sort-function.ts.mdx',
]}
/>
@ -115,6 +116,7 @@ The `storySort` can also accept a configuration object.
<CodeSnippets
paths={[
'common/storybook-preview-empty-sort-object.js.mdx',
'common/storybook-preview-empty-sort-object.ts.mdx',
]}
/>
@ -136,6 +138,7 @@ The `order` array can accept a nested array in order to sort 2nd-level story kin
<CodeSnippets
paths={[
'common/storybook-preview-with-ordered-pages.js.mdx',
'common/storybook-preview-with-ordered-pages.ts.mdx',
]}
/>
@ -159,6 +162,7 @@ If you want certain categories to sort to the end of the list, you can insert a
<CodeSnippets
paths={[
'common/storybook-preview-with-ordered-pages-and-wildcard.js.mdx',
'common/storybook-preview-with-ordered-pages-and-wildcard.ts.mdx',
]}
/>

4
docs/writing-stories/parameters.md
View File

@ -36,8 +36,7 @@ We can set the parameters for all stories of a component using the `parameters`
'react/button-story-with-blue-args.js.mdx',
'react/button-story-with-blue-args.ts.mdx',
'vue/button-story-with-blue-args.js.mdx',
'vue/button-story-with-blue-args.ts-2.ts.mdx',
'vue/button-story-with-blue-args.ts-3.ts.mdx',
'vue/button-story-with-blue-args.ts.mdx',
'angular/button-story-with-blue-args.ts.mdx',
'web-components/button-story-with-blue-args.js.mdx',
'web-components/button-story-with-blue-args.ts.mdx',
@ -56,6 +55,7 @@ We can also set the parameters for **all stories** via the `parameters` export o
<CodeSnippets
paths={[
'common/preview-story-custom-params.js.mdx',
'common/preview-story-custom-params.ts.mdx',
]}
/>

6
docs/writing-stories/play-function.md
View File

@ -24,6 +24,12 @@ Run the following command to install the addon and the required dependencies.
<!-- prettier-ignore-end -->
<div class="aside">
ℹ️ Installing the package with `@next` will install the cutting-edge version of it. Be advised prerelease versions are subject to breaking changes and are not recommended for production use. Use at your own risk.
</div>
Update your Storybook configuration (in `.storybook/main.js|ts`) to include the interactions addon.
<!-- prettier-ignore-start -->

26
docs/writing-stories/stories-for-multiple-components.md
View File

@ -11,10 +11,8 @@ It's useful to write stories that [render two or more components](../writing-sto
'react/list-story-with-subcomponents.js.mdx',
'react/list-story-with-subcomponents.ts.mdx',
'angular/list-story-with-subcomponents.ts.mdx',
'vue/list-story-with-sub-components.2.js.mdx',
'vue/list-story-with-sub-components.ts-2.ts.mdx',
'vue/list-story-with-sub-components.3.js.mdx',
'vue/list-story-with-sub-components.ts-3.ts.mdx',
'vue/list-story-with-sub-components.js.mdx',
'vue/list-story-with-sub-components.ts.mdx',
'web-components/list-story-with-subcomponents.js.mdx',
'web-components/list-story-with-subcomponents.ts.mdx',
]}
@ -45,10 +43,12 @@ The simplest change we can make to the above is to reuse the stories of the `Lis
paths={[
'react/list-story-unchecked.js.mdx',
'react/list-story-unchecked.ts.mdx',
'vue/list-story-unchecked.2.js.mdx',
'vue/list-story-unchecked.ts-2.ts.mdx',
'vue/list-story-unchecked.3.js.mdx',
'vue/list-story-unchecked.ts-3.ts.mdx',
'vue/list-story-unchecked.v2-js.js.mdx',
'vue/list-story-unchecked.v2-ts.ts.mdx',
'vue/list-story-unchecked.v2-ts-4-9.ts.mdx',
'vue/list-story-unchecked.v3-js.js.mdx',
'vue/list-story-unchecked.v3-ts.ts.mdx',
'vue/list-story-unchecked.v3-ts-4-9.ts.mdx',
'angular/list-story-unchecked.ts.mdx',
'web-components/list-story-unchecked.js.mdx',
'web-components/list-story-unchecked.ts.mdx',
@ -107,10 +107,12 @@ Another option that is more “data”-based is to create a special “story-gen
paths={[
'react/list-story-template.js.mdx',
'react/list-story-template.ts.mdx',
'vue/list-story-template.2.js.mdx',
'vue/list-story-template.ts-2.ts.mdx',
'vue/list-story-template.3.js.mdx',
'vue/list-story-template.ts-3.ts.mdx',
'vue/list-story-template.v2-js.js.mdx',
'vue/list-story-template.v2-ts.ts.mdx',
'vue/list-story-template.v2-ts-4-9.ts.mdx',
'vue/list-story-template.v3-js.js.mdx',
'vue/list-story-template.v3-ts.ts.mdx',
'vue/list-story-template.v3-ts-4-9.ts.mdx',
'angular/list-story-template.ts.mdx',
'web-components/list-story-template.js.mdx',
'web-components/list-story-template.ts.mdx',

17
docs/writing-tests/accessibility-testing.md
View File

@ -32,6 +32,12 @@ Run the following command to install the addon.
<!-- prettier-ignore-end -->
<div class="aside">
ℹ️ Installing the package with `@next` will install the cutting-edge version of it. Be advised prerelease versions are subject to breaking changes and are not recommended for production use. Use at your own risk.
</div>
Update your Storybook configuration (in `.storybook/main.js|ts`) to include the accessibility addon.
<!-- prettier-ignore-start -->
@ -65,10 +71,12 @@ Storybook's a11y addon runs [Axe](https://github.com/dequelabs/axe-core) on the
'react/component-story-with-accessibility.js.mdx',
'react/component-story-with-accessibility.ts.mdx',
'angular/component-story-with-accessibility.ts.mdx',
'vue/component-story-with-accessibility.2.js.mdx',
'vue/component-story-with-accessibility.ts-2.ts.mdx',
'vue/component-story-with-accessibility.3.js.mdx',
'vue/component-story-with-accessibility.ts-3.ts.mdx',
'vue/component-story-with-accessibility.v2-js.js.mdx',
'vue/component-story-with-accessibility.v2-ts.ts.mdx',
'vue/component-story-with-accessibility.v2-ts-4-9.ts.mdx',
'vue/component-story-with-accessibility.v3-js.js.mdx',
'vue/component-story-with-accessibility.v3-ts.ts.mdx',
'vue/component-story-with-accessibility.v3-ts-4-9.ts.mdx',
'svelte/component-story-with-accessibility.js.mdx',
'web-components/component-story-with-accessibility.js.mdx',
'web-components/component-story-with-accessibility.ts.mdx',
@ -96,6 +104,7 @@ If you need to dismiss an accessibility rule or modify its settings across all s
<CodeSnippets
paths={[
'common/storybook-addon-a11y-global-config.js.mdx',
'common/storybook-addon-a11y-global-config.ts.mdx',
]}
/>

14
docs/writing-tests/importing-stories-in-tests.md
View File

@ -34,7 +34,7 @@ Run the following command to add Storybook's testing addon into your environment
<div class="aside">
💡 When running the command to install the addon, don't forget to select **only** your framework.
ℹ️ Installing the package with `@next` will install the cutting-edge version of it. Be advised prerelease versions are subject to breaking changes and are not recommended for production use. Use at your own risk. Additionally, don't forget to select **only** your framework.
</div>
@ -108,10 +108,8 @@ An example of an end-to-end test with Cypress and Storybook is testing a login c
'react/login-form-with-play-function.js.mdx',
'react/login-form-with-play-function.ts.mdx',
'angular/login-form-with-play-function.ts.mdx',
'vue/login-form-with-play-function.2.js.mdx',
'vue/login-form-with-play-function.ts-2.ts.mdx',
'vue/login-form-with-play-function.3.js.mdx',
'vue/login-form-with-play-function.ts-3.ts.mdx',
'vue/login-form-with-play-function.js.mdx',
'vue/login-form-with-play-function.ts.mdx',
'web-components/login-form-with-play-function.js.mdx',
'web-components/login-form-with-play-function.ts.mdx',
'svelte/login-form-with-play-function.js.mdx',
@ -156,10 +154,8 @@ A real-life scenario of user flow testing with Playwright would be how to test a
'react/login-form-with-play-function.js.mdx',
'react/login-form-with-play-function.ts.mdx',
'angular/login-form-with-play-function.ts.mdx',
'vue/login-form-with-play-function.2.js.mdx',
'vue/login-form-with-play-function.ts-2.ts.mdx',
'vue/login-form-with-play-function.3.js.mdx',
'vue/login-form-with-play-function.ts-3.ts.mdx',
'vue/login-form-with-play-function.js.mdx',
'vue/login-form-with-play-function.ts.mdx',
'web-components/login-form-with-play-function.js.mdx',
'web-components/login-form-with-play-function.ts.mdx',
'svelte/login-form-with-play-function.js.mdx',

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

@ -37,6 +37,12 @@ Run the following command to install the interactions addon and related dependen
<!-- prettier-ignore-end -->
<div class="aside">
ℹ️ Installing the package with `@next` will install the cutting-edge version of it. Be advised prerelease versions are subject to breaking changes and are not recommended for production use. Use at your own risk.
</div>
Update your Storybook configuration (in `.storybook/main.js|ts`) to include the interactions addon.
<!-- prettier-ignore-start -->
@ -61,10 +67,8 @@ The test itself is defined inside a `play` function connected to a story. Here's
'react/login-form-with-play-function.js.mdx',
'react/login-form-with-play-function.ts.mdx',
'angular/login-form-with-play-function.ts.mdx',
'vue/login-form-with-play-function.2.js.mdx',
'vue/login-form-with-play-function.ts-2.ts.mdx',
'vue/login-form-with-play-function.3.js.mdx',
'vue/login-form-with-play-function.ts-3.ts.mdx',
'vue/login-form-with-play-function.js.mdx',
'vue/login-form-with-play-function.ts.mdx',
'web-components/login-form-with-play-function.js.mdx',
'web-components/login-form-with-play-function.ts.mdx',
'svelte/login-form-with-play-function.js.mdx',
@ -111,6 +115,7 @@ For complex flows, it can be worthwhile to group sets of related interactions to
<CodeSnippets
paths={[
'common/storybook-interactions-step-function.js.mdx',
'common/storybook-interactions-step-function.ts.mdx',
]}
usesCsf3
csf2Path="writing-tests/interaction-testing#snippet-storybook-interactions-step-function"

6
docs/writing-tests/test-coverage.md
View File

@ -32,6 +32,12 @@ Run the following command to install the addon.
<!-- prettier-ignore-end -->
<div class="aside">
ℹ️ Installing the package with `@next` will install the cutting-edge version of it. Be advised prerelease versions are subject to breaking changes and are not recommended for production use. Use at your own risk.
</div>
Update your Storybook configuration (in `.storybook/main.js|ts`) to include the coverage addon.
<!-- prettier-ignore-start -->

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

@ -27,6 +27,12 @@ Run the following command to install it.
<!-- prettier-ignore-end -->
<div class="aside">
ℹ️ Installing the package with `@next` will install the cutting-edge version of it. Be advised prerelease versions are subject to breaking changes and are not recommended for production use. Use at your own risk.
</div>
Update your `package.json` scripts and enable the test runner.
```json