Merge pull request #19861 from storybookjs/chore_docs_beta_remove_mdx_ts

Removes mdx stories from the docs and misc updates

docs/configure/environment-variables.md

@@ -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',
   ]}
 />
 

docs/configure/images-and-assets.md

@@ -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',
   ]}
 />
 

docs/configure/story-layout.md

@@ -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',
   ]}
 />
 

docs/contribute/new-snippets.md

@@ -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.

docs/essentials/actions.md

@@ -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',
   ]}
 />
 

docs/essentials/backgrounds.md

@@ -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',
   ]}
 />
 

docs/essentials/controls.md

@@ -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'
   ]}
 />
 

docs/essentials/toolbars-and-globals.md

@@ -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',
   ]}
 />

docs/essentials/viewport.md

@@ -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',
   ]}
 />
 

docs/get-started/install.md

@@ -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>

docs/get-started/setup.md

@@ -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',

docs/get-started/whats-a-story.md

@@ -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',

docs/sharing/design-integrations.md

@@ -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',
   ]}
 />
 

docs/why-storybook.md

@@ -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',
   ]}