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

Removes mdx stories from the docs and misc updates

Browse Source
This commit is contained in:
jonniebigodes 2022-11-16 18:24:16 +00:00
parent 82dc644bae
commit acf8a8592a
22 changed files with 9 additions and 182 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -51,16 +51,11 @@ 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',
'react/my-component-with-env-variables.mdx.mdx',
'vue/my-component-with-env-variables.2.js.mdx',
'vue/my-component-with-env-variables.mdx-2.mdx.mdx',
'vue/my-component-with-env-variables.3.js.mdx',
'vue/my-component-with-env-variables.mdx-3.mdx.mdx',
'angular/my-component-with-env-variables.ts.mdx',
'angular/my-component-with-env-variables.mdx.mdx',
'web-components/my-component-with-env-variables.js.mdx',
'svelte/my-component-with-env-variables.js.mdx',
'svelte/my-component-with-env-variables.mdx.mdx',
]}
/>
@ -95,7 +90,6 @@ When Storybook loads, it will enable you to access them in your stories similar
<CodeSnippets
paths={[
'common/my-component-env-var-config.js.mdx',
'common/my-component-env-var-config.mdx.mdx',
]}
/>

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

@ -16,15 +16,10 @@ 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',
'react/component-story-static-asset-with-import.mdx.mdx',
'vue/component-story-static-asset-with-import.2.js.mdx',
'vue/component-story-static-asset-with-import.mdx-2.mdx.mdx',
'vue/component-story-static-asset-with-import.3.js.mdx',
'vue/component-story-static-asset-with-import.mdx-3.mdx.mdx',
'angular/component-story-static-asset-with-import.ts.mdx',
'angular/component-story-static-asset-with-import.mdx.mdx',
'svelte/component-story-static-asset-with-import.js.mdx',
'svelte/component-story-static-asset-with-import.mdx.mdx',
]}
/>
@ -54,13 +49,9 @@ Here `../public` is your static directory. Now use it in a component or story li
paths={[
'react/component-story-static-asset-without-import.js.mdx',
'react/component-story-static-asset-without-import.ts.mdx',
'react/component-story-static-asset-without-import.mdx.mdx',
'vue/component-story-static-asset-without-import.js.mdx',
'vue/component-story-static-asset-without-import.mdx.mdx',
'angular/component-story-static-asset-without-import.ts.mdx',
'angular/component-story-static-asset-without-import.mdx.mdx',
'svelte/component-story-static-asset-without-import.js.mdx',
'svelte/component-story-static-asset-without-import.mdx.mdx',
]}
/>
@ -104,13 +95,9 @@ Upload your files to an online CDN and reference them. In this example, we’re
paths={[
'react/component-story-static-asset-cdn.js.mdx',
'react/component-story-static-asset-cdn.ts.mdx',
'react/component-story-static-asset-cdn.mdx.mdx',
'vue/component-story-static-asset-cdn.js.mdx',
'vue/component-story-static-asset-cdn.mdx.mdx',
'angular/component-story-static-asset-cdn.ts.mdx',
'angular/component-story-static-asset-cdn.mdx.mdx',
'svelte/component-story-static-asset-cdn.js.mdx',
'svelte/component-story-static-asset-cdn.mdx.mdx',
]}
/>

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

@ -35,7 +35,6 @@ You can also set it at a component level like so:
<CodeSnippets
paths={[
'common/storybook-component-layout-param.js.mdx',
'common/storybook-component-layout-param.mdx.mdx',
]}
/>
@ -50,7 +49,6 @@ Or even apply it to specific stories like so:
<CodeSnippets
paths={[
'common/storybook-story-layout-param.js.mdx',
'common/storybook-story-layout-param.mdx.mdx',
]}
/>

2
docs/contribute/new-snippets.md
View File

@ -78,7 +78,7 @@ Create the file `ember/your-component.js.mdx`, similar to the other frameworks,
```
<div class="aside">
💡 Code snippets are divided into various file extensions, if you're contributing a TypeScript file use <code>.ts.mdx</code>, or if you're adding MDX files use <code>.mdx.mdx</code> .
💡 Code snippets are divided into various file extensions, if you're contributing a TypeScript file use <code>.ts.mdx</code>, or if you're adding JavaScript files use <code>.js.mdx</code> .
</div>
Go through the rest of the documentation and repeat the process.

3
docs/essentials/actions.md
View File

@ -24,7 +24,6 @@ You can use [argTypes](../api/argtypes.md) to tell Storybook that an arg to your
<CodeSnippets
paths={[
'common/button-story-onclick-action-argtype.js.mdx',
'common/button-story-onclick-action-argtype.mdx.mdx',
]}
/>
@ -55,7 +54,6 @@ If you need more granular control over which `argTypes` are matched, you can adj
<CodeSnippets
paths={[
'common/button-story-matching-argtypes.js.mdx',
'common/button-story-matching-argtypes.mdx.mdx',
]}
/>
@ -76,7 +74,6 @@ It is also possible to detect if your component is emitting the correct HTML eve
<CodeSnippets
paths={[
'common/button-story-action-event-handle.js.mdx',
'common/button-story-action-event-handle.mdx.mdx',
]}
/>

5
docs/essentials/backgrounds.md
View File

@ -38,7 +38,6 @@ You can also define backgrounds per-component or per-story basis through [parame
<CodeSnippets
paths={[
'common/storybook-addon-backgrounds-configure-backgrounds.js.mdx',
'common/storybook-addon-backgrounds-configure-backgrounds.mdx.mdx',
]}
/>
@ -51,7 +50,6 @@ You can also override a single key on the `backgrounds` parameter, for instance,
<CodeSnippets
paths={[
'common/storybook-addon-backgrounds-override-background-color.js.mdx',
'common/storybook-addon-backgrounds-override-background-color.mdx.mdx',
]}
/>
@ -66,7 +64,6 @@ If you want to disable backgrounds in a story, you can do so by setting the `bac
<CodeSnippets
paths={[
'common/storybook-addon-backgrounds-disable-backgrounds.js.mdx',
'common/storybook-addon-backgrounds-disable-backgrounds.mdx.mdx',
]}
/>
@ -83,7 +80,6 @@ You don't need additional configuration to get started. But its properties are f
<CodeSnippets
paths={[
'common/storybook-addon-backgrounds-configure-grid.js.mdx',
'common/storybook-addon-backgrounds-configure-grid.mdx.mdx',
]}
/>
@ -98,7 +94,6 @@ If you need to disable the grid for a specific story, set the `backgrounds` para
<CodeSnippets
paths={[
'common/storybook-addon-backgrounds-disable-grid.js.mdx',
'common/storybook-addon-backgrounds-disable-grid.mdx.mdx',
]}
/>

22
docs/essentials/controls.md
View File

@ -51,7 +51,6 @@ For instance, suppose you have a `variant` arg on your story that should be `pri
<CodeSnippets
paths={[
'common/button-story-controls-primary-variant.js.mdx',
'common/button-story-controls-primary-variant.mdx.mdx',
]}
/>
@ -72,7 +71,6 @@ We can specify which controls get used by declaring a custom [argType](../api/ar
<CodeSnippets
paths={[
'common/button-story-controls-radio-group.js.mdx',
'common/button-story-controls-radio-group.mdx.mdx',
]}
/>
@ -118,13 +116,9 @@ Until now, we only used auto-generated controls based on the component we're wri
<CodeSnippets
paths={[
'react/table-story-fully-customize-controls.js.mdx',
'react/table-story-fully-customize-controls.mdx.mdx',
'vue/table-story-fully-customize-controls.2.js.mdx',
'vue/table-story-fully-customize-controls.mdx-2.mdx.mdx',
'vue/table-story-fully-customize-controls.3.js.mdx',
'vue/table-story-fully-customize-controls.mdx-3.mdx.mdx',
'angular/table-story-fully-customize-controls.ts.mdx',
'angular/table-story-fully-customize-controls.mdx.mdx',
]}
/>
@ -150,11 +144,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',
'react/component-story-custom-args-complex.mdx.mdx',
'vue/component-story-custom-args-complex.3.js.mdx',
'vue/component-story-custom-args-complex.mdx-3.mdx.mdx',
'angular/component-story-custom-args-complex.ts.mdx',
'angular/component-story-custom-args-complex.mdx.mdx',
'svelte/component-story-custom-args-complex.js.mdx',
]}
/>
@ -213,7 +204,6 @@ As shown above, you can configure individual controls with the “control" annot
<CodeSnippets
paths={[
'common/gizmo-story-controls-customization.js.mdx',
'common/gizmo-story-controls-customization.mdx.mdx',
]}
/>
@ -274,7 +264,6 @@ Suppose you want to disable Controls for a property called `foo` in a component'
<CodeSnippets
paths={[
'common/component-story-disable-controls.js.mdx',
'common/component-story-disable-controls.mdx.mdx'
]}
/>
@ -291,13 +280,16 @@ Resulting in the following change in Storybook UI:
The previous example also removed the prop documentation from the table. In some cases, this is fine. However, sometimes you might want to render the prop documentation, but without a control. The following example illustrates how:
<!-- prettier-ignore-start -->
<CodeSnippets
paths={[
'common/component-story-disable-controls-alt.js.mdx',
'common/component-story-disable-controls-alt.mdx.mdx'
]}
'common/component-story-disable-controls-alt.js.mdx',
]}
/>
<!-- prettier-ignore-end -->
<div class="aside">
💡 As with other Storybook properties, such as [decorators](../writing-stories/decorators.md), you can apply the same pattern at a story level for more granular cases.
@ -377,7 +369,6 @@ Consider the following story snippets:
<CodeSnippets
paths={[
'common/component-story-disable-controls-regex.js.mdx',
'common/component-story-disable-controls-regex.mdx.mdx'
]}
/>
@ -394,7 +385,6 @@ Consider the following snippet to force required args first:
<CodeSnippets
paths={[
'common/component-story-sort-controls.js.mdx',
'common/component-story-sort-controls.mdx.mdx'
]}
/>

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

@ -101,13 +101,9 @@ Using the example above, you can modify any story to retrieve the **Locale** `gl
<CodeSnippets
paths={[
'react/my-component-story-use-globaltype.js.mdx',
'react/my-component-story-use-globaltype.mdx.mdx',
'vue/my-component-story-use-globaltype.js.mdx',
'vue/my-component-story-use-globaltype.mdx.mdx',
'angular/my-component-story-use-globaltype.ts.mdx',
'angular/my-component-story-use-globaltype.mdx.mdx',
'svelte/my-component-story-use-globaltype.js.mdx',
'svelte/my-component-story-use-globaltype.mdx.mdx',
'web-components/my-component-story-use-globaltype.js.mdx',
]}
/>

4
docs/essentials/viewport.md
View File

@ -119,14 +119,10 @@ Update your story through [parameters](../writing-stories/parameters.md) to incl
paths={[
'react/my-component-story-configure-viewports.js.mdx',
'react/my-component-story-configure-viewports.ts.mdx',
'react/my-component-story-configure-viewports.mdx.mdx',
'vue/my-component-story-configure-viewports.js.mdx',
'vue/my-component-story-configure-viewports.mdx.mdx',
'angular/my-component-story-configure-viewports.ts.mdx',
'angular/my-component-story-configure-viewports.mdx.mdx',
'web-components/my-component-story-configure-viewports.js.mdx',
'svelte/my-component-story-configure-viewports.js.mdx',
'svelte/my-component-story-configure-viewports.mdx.mdx',
]}
/>

1
docs/get-started/install.md
View File

@ -29,6 +29,7 @@ Storybook needs to be installed into a project that is already set up with a fra
- 📦 [Create React App](https://reactjs.org/docs/create-a-new-react-app.html)
- 📦 [Create a Vue App](https://vuejs.org/guide/quick-start.html)
- 📦 [Ember CLI](https://guides.emberjs.com/release/getting-started/quick-start/)
- 📦 [Vite CLI](https://vitejs.dev/guide/#scaffolding-your-first-vite-project)
- Or any other tooling available.
</details>

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

@ -12,15 +12,10 @@ Pick a simple component from your project, like a Button, and write a `.stories.
paths={[
'react/your-component.js.mdx',
'react/your-component.ts.mdx',
'react/your-component.mdx.mdx',
'angular/your-component.ts.mdx',
'angular/your-component.mdx.mdx',
'vue/your-component.2.js.mdx',
'vue/your-component.mdx-2.mdx.mdx',
'vue/your-component.3.js.mdx',
'vue/your-component.mdx-3.mdx.mdx',
'svelte/your-component.js.mdx',
'svelte/your-component.mdx.mdx',
'web-components/your-component.js.mdx',
'html/your-component.js.mdx',
'html/your-component.ts.mdx',

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

@ -16,13 +16,9 @@ Let’s start with the `Button` component. A story is a function that describes
paths={[
'react/button-story.js.mdx',
'react/button-story.ts.mdx',
'react/button-story.mdx.mdx',
'angular/button-story.ts.mdx',
'angular/button-story.mdx.mdx',
'vue/button-story.js.mdx',
'vue/button-story.mdx.mdx',
'svelte/button-story.js.mdx',
'svelte/button-story.mdx.mdx',
'web-components/button-story.js.mdx',
'html/button-story.js.mdx',
'html/button-story.ts.mdx',
@ -44,16 +40,11 @@ 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',
'react/button-story-with-args.mdx.mdx',
'vue/button-story-with-args.2.js.mdx',
'vue/button-story-with-args.mdx-2.mdx.mdx',
'vue/button-story-with-args.3.js.mdx',
'vue/button-story-with-args.mdx-3.mdx.mdx',
'angular/button-story-with-args.ts.mdx',
'angular/button-story-with-args.mdx.mdx',
'web-components/button-story-with-args.js.mdx',
'svelte/button-story-with-args.js.mdx',
'svelte/button-story-with-args.mdx.mdx',
'html/button-story-with-args.js.mdx',
'html/button-story-with-args.ts.mdx',
'preact/button-story-with-args.js.mdx',

4
docs/sharing/design-integrations.md
View File

@ -102,14 +102,10 @@ In Storybook, add a new [parameter](../writing-stories/parameters.md) named `des
paths={[
'react/component-story-figma-integration.js.mdx',
'react/component-story-figma-integration.ts.mdx',
'react/component-story-figma-integration.mdx.mdx',
'vue/component-story-figma-integration.js.mdx',
'vue/component-story-figma-integration.ts.mdx',
'vue/component-story-figma-integration.mdx.mdx',
'angular/component-story-figma-integration.ts.mdx',
'angular/component-story-figma-integration.mdx.mdx',
'svelte/component-story-figma-integration.js.mdx',
'svelte/component-story-figma-integration.mdx.mdx',
]}
/>

6
docs/why-storybook.md
View File

@ -41,20 +41,14 @@ You write stories for granular UI component variation and then use those stories
paths={[
'react/histogram-story.js.mdx',
'react/histogram-story.ts.mdx',
'react/histogram-story.mdx.mdx',
'angular/histogram-story.ts.mdx',
'angular/histogram-story.mdx.mdx',
'vue/histogram-story.2.js.mdx',
'vue/histogram-story.ts-2.ts.mdx',
'vue/histogram-story.mdx-2.mdx',
'vue/histogram-story.3.js.mdx',
'vue/histogram-story.ts-3.ts.mdx',
'vue/histogram-story.mdx-3.mdx',
'svelte/histogram-story.js.mdx',
'svelte/histogram-story.mdx.mdx',
'web-components/histogram-story.js.mdx',
'preact/histogram-story.js.mdx',
'preact/histogram-story.mdx.mdx',
'html/histogram-story.js.mdx',
'html/histogram-story.ts.mdx',
]}

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

@ -22,15 +22,10 @@ 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',
'react/button-story-with-args.mdx.mdx',
'vue/button-story-with-args.2.js.mdx',
'vue/button-story-with-args.mdx-2.mdx.mdx',
'vue/button-story-with-args.3.js.mdx',
'vue/button-story-with-args.mdx-3.mdx.mdx',
'angular/button-story-with-args.ts.mdx',
'angular/button-story-with-args.mdx.mdx',
'svelte/button-story-with-args.js.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',
@ -63,13 +58,9 @@ You can also define args at the component level; they will apply to all the comp
paths={[
'react/button-story-component-args-primary.js.mdx',
'react/button-story-component-args-primary.ts.mdx',
'react/button-story-component-args-primary.mdx.mdx',
'vue/button-story-component-args-primary.js.mdx',
'vue/button-story-component-args-primary.mdx.mdx',
'angular/button-story-component-args-primary.ts.mdx',
'angular/button-story-component-args-primary.mdx.mdx',
'svelte/button-story-component-args-primary.js.mdx',
'svelte/button-story-component-args-primary.mdx.mdx',
'web-components/button-story-component-args-primary.js.mdx',
]}
/>
@ -137,13 +128,9 @@ 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',
'react/page-story-slots.mdx.mdx',
'vue/page-story-slots.2.js.mdx',
'vue/page-story-slots.mdx-2.mdx.mdx',
'vue/page-story-slots.3.js.mdx',
'vue/page-story-slots.mdx-3.mdx.mdx',
'angular/page-story-slots.ts.mdx',
'angular/page-story-slots.mdx.mdx',
]}
/>

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

@ -20,13 +20,9 @@ Some components require a “harness” to render in a useful way. For instance,
'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',
'react/your-component-with-decorator.mdx.mdx',
'vue/your-component-with-decorator.js.mdx',
'vue/your-component-with-decorator.mdx.mdx',
'angular/your-component-with-decorator.ts.mdx',
'angular/your-component-with-decorator.mdx.mdx',
'svelte/your-component-with-decorator.js.mdx',
'svelte/your-component-with-decorator.mdx.mdx',
'web-components/your-component-with-decorator.js.mdx',
]}
/>
@ -90,13 +86,9 @@ To define a decorator for a single story, use the `decorators` key on a named ex
'react/button-story-decorator.js.mdx',
'react/button-story-decorator.story-function.js.mdx',
'react/button-story-decorator.ts.mdx',
'react/button-story-decorator.mdx.mdx',
'vue/button-story-decorator.js.mdx',
'vue/button-story-decorator.mdx.mdx',
'angular/button-story-decorator.ts.mdx',
'angular/button-story-decorator.mdx.mdx',
'svelte/button-story-decorator.js.mdx',
'svelte/button-story-decorator.mdx.mdx',
'web-components/button-story-decorator.js.mdx',
]}
/>
@ -115,13 +107,9 @@ To define a decorator for all stories of a component, use the `decorators` key o
paths={[
'react/button-story-component-decorator.js.mdx',
'react/button-story-component-decorator.ts.mdx',
'react/button-story-component-decorator.mdx.mdx',
'vue/button-story-component-decorator.js.mdx',
'vue/button-story-component-decorator.mdx.mdx',
'angular/button-story-component-decorator.ts.mdx',
'angular/button-story-component-decorator.mdx.mdx',
'svelte/button-story-component-decorator.js.mdx',
'svelte/button-story-component-decorator.mdx.mdx',
'web-components/button-story-component-decorator.js.mdx',
]}
/>

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

@ -76,7 +76,6 @@ Use the _named_ exports of a CSF file to define your component’s stories. We r
<CodeSnippets
paths={[
'react/button-story.with-hooks.js.mdx',
'react/button-story.mdx-with-hooks.mdx.mdx',
]}
/>
@ -120,15 +119,11 @@ A story is a function that describes how to render a component. You can have mul
paths={[
'react/button-story-with-emojis.js.mdx',
'react/button-story-with-emojis.ts.mdx',
'react/button-story-with-emojis.mdx.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.mdx.mdx',
'angular/button-story-with-emojis.ts.mdx',
'angular/button-story-with-emojis.mdx.mdx',
'svelte/button-story-with-emojis.js.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',
@ -215,17 +210,12 @@ Storybook's `play` function and the [`@storybook/addon-interactions`](https://st
paths={[
'react/login-form-with-play-function.js.mdx',
'react/login-form-with-play-function.ts.mdx',
'react/login-form-with-play-function.mdx.mdx',
'angular/login-form-with-play-function.ts.mdx',
'angular/login-form-with-play-function.mdx.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.mdx-2.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.mdx-3.mdx',
'svelte/login-form-with-play-function.js.mdx',
'svelte/login-form-with-play-function.mdx.mdx',
]}
/>
@ -243,15 +233,11 @@ For instance, suppose you wanted to test your Button component against a differe
paths={[
'react/button-story-with-blue-args.js.mdx',
'react/button-story-with-blue-args.ts.mdx',
'react/button-story-with-blue-args.mdx.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.mdx.mdx',
'angular/button-story-with-blue-args.ts.mdx',
'angular/button-story-with-blue-args.mdx.mdx',
'svelte/button-story-with-blue-args.js.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',
@ -276,15 +262,11 @@ A simple example is adding padding to a component’s stories. Accomplish this u
paths={[
'react/button-story-component-decorator.js.mdx',
'react/button-story-component-decorator.ts.mdx',
'react/button-story-component-decorator.mdx.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.mdx.mdx',
'angular/button-story-component-decorator.ts.mdx',
'angular/button-story-component-decorator.mdx.mdx',
'svelte/button-story-component-decorator.js.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',

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

@ -19,13 +19,9 @@ Loaders are helpful when you need to load story data externally (e.g., from a re
<CodeSnippets
paths={[
'react/loader-story.js.mdx',
'react/loader-story.mdx.mdx',
'vue/loader-story.3.js.mdx',
'vue/loader-story.mdx.mdx',
'angular/loader-story.ts.mdx',
'angular/loader-story.mdx.mdx',
'svelte/loader-story.js.mdx',
'svelte/loader-story.mdx.mdx',
]}
/>

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

@ -15,7 +15,6 @@ We can set a parameter for a single story with the `parameters` key on a CSF exp
<CodeSnippets
paths={[
'common/component-story-custom-params.js.mdx',
'common/component-story-custom-params.mdx.mdx',
]}
/>
@ -31,13 +30,9 @@ We can set the parameters for all stories of a component using the `parameters`
paths={[
'react/button-story-with-blue-args.js.mdx',
'react/button-story-with-blue-args.ts.mdx',
'react/button-story-with-blue-args.mdx.mdx',
'vue/button-story-with-blue-args.js.mdx',
'vue/button-story-with-blue-args.mdx.mdx',
'angular/button-story-with-blue-args.ts.mdx',
'angular/button-story-with-blue-args.mdx.mdx',
'svelte/button-story-with-blue-args.js.mdx',
'svelte/button-story-with-blue-args.mdx.mdx',
'web-components/button-story-with-blue-args.js.mdx',
]}
/>

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

@ -43,14 +43,10 @@ Storybook's `play` functions are small code snippets that run once the story fin
paths={[
'react/register-component-with-play-function.js.mdx',
'react/register-component-with-play-function.ts.mdx',
'react/register-component-with-play-function.mdx.mdx',
'angular/register-component-with-play-function.ts.mdx',
'angular/register-component-with-play-function.mdx.mdx',
'vue/register-component-with-play-function.js.mdx',
'vue/register-component-with-play-function.ts.mdx',
'vue/register-component-with-play-function.mdx.mdx',
'svelte/register-component-with-play-function.js.mdx',
'svelte/register-component-with-play-function.mdx.mdx',
]}
/>
@ -97,14 +93,10 @@ A common type of component interaction is a button click. If you need to reprodu
paths={[
'react/my-component-play-function-with-clickevent.js.mdx',
'react/my-component-play-function-with-clickevent.ts.mdx',
'react/my-component-play-function-with-clickevent.mdx.mdx',
'angular/my-component-play-function-with-clickevent.ts.mdx',
'angular/my-component-play-function-with-clickevent.mdx.mdx',
'vue/my-component-play-function-with-clickevent.js.mdx',
'vue/my-component-play-function-with-clickevent.ts.mdx',
'vue/my-component-play-function-with-clickevent.mdx.mdx',
'svelte/my-component-play-function-with-clickevent.js.mdx',
'svelte/my-component-play-function-with-clickevent.mdx.mdx',
]}
/>
@ -120,14 +112,10 @@ Asides from click events, you can also script additional events with the `play`
paths={[
'react/my-component-play-function-with-selectevent.js.mdx',
'react/my-component-play-function-with-selectevent.ts.mdx',
'react/my-component-play-function-with-selectevent.mdx.mdx',
'angular/my-component-play-function-with-selectevent.ts.mdx',
'angular/my-component-play-function-with-selectevent.mdx.mdx',
'vue/my-component-play-function-with-selectevent.js.mdx',
'vue/my-component-play-function-with-selectevent.ts.mdx',
'vue/my-component-play-function-with-selectevent.mdx.mdx',
'svelte/my-component-play-function-with-selectevent.js.mdx',
'svelte/my-component-play-function-with-selectevent.mdx.mdx',
]}
/>
@ -141,14 +129,10 @@ In addition to events, you can also create interactions with the `play` function
paths={[
'react/my-component-play-function-with-delay.js.mdx',
'react/my-component-play-function-with-delay.ts.mdx',
'react/my-component-play-function-with-delay.mdx.mdx',
'angular/my-component-play-function-with-delay.ts.mdx',
'angular/my-component-play-function-with-delay.mdx.mdx',
'vue/my-component-play-function-with-delay.js.mdx',
'vue/my-component-play-function-with-delay.ts.mdx',
'vue/my-component-play-function-with-delay.mdx.mdx',
'svelte/my-component-play-function-with-delay.js.mdx',
'svelte/my-component-play-function-with-delay.mdx.mdx',
]}
/>
@ -164,14 +148,10 @@ You can also use the `play` function to verify the existence of an element based
paths={[
'react/my-component-play-function-waitfor.js.mdx',
'react/my-component-play-function-waitfor.ts.mdx',
'react/my-component-play-function-waitfor.mdx.mdx',
'angular/my-component-play-function-waitfor.ts.mdx',
'angular/my-component-play-function-waitfor.mdx.mdx',
'vue/my-component-play-function-waitfor.js.mdx',
'vue/my-component-play-function-waitfor.ts.mdx',
'vue/my-component-play-function-waitfor.mdx.mdx',
'svelte/my-component-play-function-waitfor.js.mdx',
'svelte/my-component-play-function-waitfor.mdx.mdx',
]}
/>
@ -187,14 +167,10 @@ If you need, you can also adjust your `play` function to find elements based on
paths={[
'react/my-component-play-function-alt-queries.js.mdx',
'react/my-component-play-function-alt-queries.ts.mdx',
'react/my-component-play-function-alt-queries.mdx.mdx',
'angular/my-component-play-function-alt-queries.ts.mdx',
'angular/my-component-play-function-alt-queries.mdx.mdx',
'vue/my-component-play-function-alt-queries.js.mdx',
'vue/my-component-play-function-alt-queries.ts.mdx',
'vue/my-component-play-function-alt-queries.mdx.mdx',
'svelte/my-component-play-function-alt-queries.js.mdx',
'svelte/my-component-play-function-alt-queries.mdx.mdx',
]}
/>
@ -214,14 +190,10 @@ Otherwise, if the component is not immediately available, for instance, due to a
paths={[
'react/my-component-play-function-query-findby.js.mdx',
'react/my-component-play-function-query-findby.ts.mdx',
'react/my-component-play-function-query-findby.mdx.mdx',
'angular/my-component-play-function-query-findby.ts.mdx',
'angular/my-component-play-function-query-findby.mdx.mdx',
'vue/my-component-play-function-query-findby.js.mdx',
'vue/my-component-play-function-query-findby.ts.mdx',
'vue/my-component-play-function-query-findby.mdx.mdx',
'svelte/my-component-play-function-query-findby.js.mdx',
'svelte/my-component-play-function-query-findby.mdx.mdx',
]}
/>
@ -237,14 +209,10 @@ By default, each interaction you write inside your `play` function will be execu
paths={[
'react/my-component-play-function-with-canvas.js.mdx',
'react/my-component-play-function-with-canvas.ts.mdx',
'react/my-component-play-function-with-canvas.mdx.mdx',
'angular/my-component-play-function-with-canvas.ts.mdx',
'angular/my-component-play-function-with-canvas.mdx.mdx',
'vue/my-component-play-function-with-canvas.js.mdx',
'vue/my-component-play-function-with-canvas.ts.mdx',
'vue/my-component-play-function-with-canvas.mdx.mdx',
'svelte/my-component-play-function-with-canvas.js.mdx',
'svelte/my-component-play-function-with-canvas.mdx.mdx',
]}
/>

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

@ -61,15 +61,10 @@ Storybook's a11y addon runs [Axe](https://github.com/dequelabs/axe-core) on the
paths={[
'react/component-story-with-accessibility.js.mdx',
'react/component-story-with-accessibility.ts.mdx',
'react/component-story-with-accessibility.mdx.mdx',
'angular/component-story-with-accessibility.ts.mdx',
'angular/component-story-with-accessibility.mdx.mdx',
'vue/component-story-with-accessibility.2.js.mdx',
'vue/component-story-with-accessibility.mdx-2.mdx.mdx',
'vue/component-story-with-accessibility.3.js.mdx',
'vue/component-story-with-accessibility.mdx-3.mdx.mdx',
'svelte/component-story-with-accessibility.js.mdx',
'svelte/component-story-with-accessibility.mdx.mdx',
]}
/>
@ -106,7 +101,6 @@ You can also customize your own set of rules for all stories of a component. Upd
<CodeSnippets
paths={[
'common/storybook-addon-a11y-component-config.js.mdx',
'common/storybook-addon-a11y-component-config.mdx.mdx',
]}
/>
@ -122,13 +116,9 @@ Customize the a11y ruleset at the story level by updating your story to include
paths={[
'react/storybook-addon-a11y-story-config.js.mdx',
'react/storybook-addon-a11y-story-config.ts.mdx',
'react/storybook-addon-a11y-story-config.mdx.mdx',
'angular/storybook-addon-a11y-story-config.ts.mdx',
'angular/storybook-addon-a11y-story-config.mdx.mdx',
'vue/storybook-addon-a11y-story-config.js.mdx',
'vue/storybook-addon-a11y-story-config.mdx.mdx',
'svelte/storybook-addon-a11y-story-config.js.mdx',
'svelte/storybook-addon-a11y-story-config.mdx.mdx',
]}
/>
@ -144,13 +134,9 @@ Disable accessibility testing for stories or components by adding the following
paths={[
'react/storybook-addon-a11y-disable.js.mdx',
'react/storybook-addon-a11y-disable.ts.mdx',
'react/storybook-addon-a11y-disable.mdx.mdx',
'angular/storybook-addon-a11y-disable.ts.mdx',
'angular/storybook-addon-a11y-disable.mdx.mdx',
'vue/storybook-addon-a11y-disable.js.mdx',
'vue/storybook-addon-a11y-disable.mdx.mdx',
'svelte/storybook-addon-a11y-disable.js.mdx',
'svelte/storybook-addon-a11y-disable.mdx.mdx',
]}
/>

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

@ -58,15 +58,10 @@ The test itself is defined inside a `play` function connected to a story. Here's
paths={[
'react/login-form-with-play-function.js.mdx',
'react/login-form-with-play-function.ts.mdx',
'react/login-form-with-play-function.mdx.mdx',
'angular/login-form-with-play-function.ts.mdx',
'angular/login-form-with-play-function.mdx.mdx',
'vue/login-form-with-play-function.2.js.mdx',
'vue/login-form-with-play-function.mdx-2.mdx',
'vue/login-form-with-play-function.3.js.mdx',
'vue/login-form-with-play-function.mdx-3.mdx',
'svelte/login-form-with-play-function.js.mdx',
'svelte/login-form-with-play-function.mdx.mdx',
]}
/>
@ -85,7 +80,7 @@ Once the story loads in the UI, it simulates the user's behavior and verifies th
Under the hood, Storybook’s interaction addon mirrors Testing Library’s [`user-events`](https://testing-library.com/docs/user-event/intro/) API. If you’re familiar with [Testing Library](https://testing-library.com/), you should be at home in Storybook.
Below is an abridged API for user-event. For more, check out the [official user-event docs](https://testing-library.com/docs/ecosystem-user-event/).
Below is an abridged API for user-event. For more, check out the [official user-event docs](https://testing-library.com/docs/user-event/utility/).
| User events | Description |
| ----------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------- |