Merge pull request #21363 from storybookjs/chore_documentation_framew…

…ork_ts_4_9

Chore (Docs) Adds TS 4-9 to the documentation

docs/addons/addon-knowledge-base.md

@@ -26,6 +26,9 @@ Then when adding a story, you can pass a disabled parameter.
 
 <CodeSnippets
   paths={[
+    'angular/button-story-disable-addon.ts.mdx',
+    'web-components/button-story-disable-addon.js.mdx',
+    'web-components/button-story-disable-addon.ts.mdx',
     'common/button-story-disable-addon.js.mdx',
     'common/button-story-disable-addon.ts.mdx',
   ]}

docs/addons/install-addons.md

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

docs/api/argtypes.md

@@ -60,7 +60,11 @@ If you want more control over the args table or any other aspect of using argTyp
 
 <CodeSnippets
   paths={[
+    'angular/storybook-customize-argtypes.ts.mdx',
+    'web-components/storybook-customize-argtypes.js.mdx',
+    'web-components/storybook-customize-argtypes.ts.mdx',
     'common/storybook-customize-argtypes.js.mdx',
+    'common/storybook-customize-argtypes.ts.mdx',
   ]}
 />
 
@@ -146,7 +150,11 @@ Results in the following change into your story and UI.
 
 <CodeSnippets
   paths={[
-    'common/button-story-argtypes-with-categories.js.mdx'
+    'angular/button-story-argtypes-with-categories.ts.mdx',
+    'web-components/button-story-argtypes-with-categories.js.mdx',
+    'web-components/button-story-argtypes-with-categories.ts.mdx',
+    'common/button-story-argtypes-with-categories.js.mdx',
+    'common/button-story-argtypes-with-categories.ts.mdx',
   ]}
 />
 
@@ -168,7 +176,11 @@ You can also extend the formula above and introduce subcategories, allowing bett
 
 <CodeSnippets
   paths={[
-    'common/button-story-argtypes-with-subcategories.js.mdx'
+    'angular/button-story-argtypes-with-subcategories.ts.mdx',
+    'web-components/button-story-argtypes-with-subcategories.js.mdx',
+    'web-components/button-story-argtypes-with-subcategories.ts.mdx',
+    'common/button-story-argtypes-with-subcategories.js.mdx',
+    'common/button-story-argtypes-with-subcategories.ts.mdx',
   ]}
 />
 
@@ -185,6 +197,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',
   ]}
 />
 

docs/api/csf.md

@@ -26,6 +26,9 @@ The `component` field is required and used by addons for automatic prop table ge
 
 <CodeSnippets
   paths={[
+    'angular/my-component-story-mandatory-export.ts.mdx',
+    'web-components/my-component-story-mandatory-export.js.mdx',
+    'web-components/my-component-story-mandatory-export.ts.mdx',
     'common/my-component-story-mandatory-export.js.mdx',
     'common/my-component-story-mandatory-export.ts.mdx',
   ]}
@@ -78,6 +81,9 @@ Storybook's `name` configuration element is helpful in specific circumstances. C
 
 <CodeSnippets
   paths={[
+    'angular/my-component-story-with-storyname.ts.mdx',
+    'web-components/my-component-story-with-storyname.js.mdx',
+    'web-components/my-component-story-with-storyname.ts.mdx',
     'common/my-component-story-with-storyname.js.mdx',
     'common/my-component-story-with-storyname.ts.mdx',
   ]}
@@ -99,10 +105,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 +130,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 +184,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 +261,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 +319,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',

docs/api/doc-block-argtypes.md

@@ -42,9 +42,12 @@ The following `exclude` configurations are equivalent:
 
 <CodeSnippets
   paths={[
+    'angular/api-doc-block-argtypes-parameter.ts.mdx',
+    'web-components/api-doc-block-argtypes-parameter.js.mdx',
+    'web-components/api-doc-block-argtypes-parameter.ts.mdx',
+    'web-components/api-doc-block-argtypes-parameter.ts.mdx',
     'common/api-doc-block-argtypes-parameter.js.mdx',
     'common/api-doc-block-argtypes-parameter.ts.mdx',
-    'common/api-doc-block-argtypes-parameter.ts-4-9.mdx',
   ]}
 />
 

docs/api/doc-block-canvas.md

@@ -44,9 +44,11 @@ The following `sourceState` configurations are equivalent:
 
 <CodeSnippets
   paths={[
+    'angular/api-doc-block-canvas-parameter.ts.mdx',
+    'web-components/api-doc-block-canvas-parameter.js.mdx',
+    'web-components/api-doc-block-canvas-parameter.ts.mdx',
     'common/api-doc-block-canvas-parameter.js.mdx',
     'common/api-doc-block-canvas-parameter.ts.mdx',
-    'common/api-doc-block-canvas-parameter.ts-4-9.mdx',
   ]}
 />
 
@@ -74,7 +76,7 @@ Array<{
   className?: string;
   onClick: () => void;
   disabled?: boolean;
-}>
+}>;
 ```
 
 Default: `parameters.docs.canvas.additionalActions`

docs/api/doc-block-controls.md

@@ -44,9 +44,11 @@ The following `exclude` configurations are equivalent:
 
 <CodeSnippets
   paths={[
+    'angular/api-doc-block-controls-parameter.ts.mdx',
+    'web-components/api-doc-block-controls-parameter.js.mdx',
+    'web-components/api-doc-block-controls-parameter.ts.mdx',
     'common/api-doc-block-controls-parameter.js.mdx',
     'common/api-doc-block-controls-parameter.ts.mdx',
-    'common/api-doc-block-controls-parameter.ts-4-9.mdx',
   ]}
 />
 

docs/api/doc-block-description.md

@@ -88,6 +88,9 @@ export const Button = () => <button>Click me</button>;
 
 <CodeSnippets
   paths={[
+    'angular/api-doc-block-description-example.ts.mdx',
+    'web-components/api-doc-block-description-example.js.mdx',
+    'web-components/api-doc-block-description-example.ts.mdx',
     'common/api-doc-block-description-example.js.mdx',
     'common/api-doc-block-description-example.ts.mdx',
     'common/api-doc-block-description-example.ts-4-9.mdx',

docs/api/doc-block-source.md

@@ -36,9 +36,11 @@ The following `language` configurations are equivalent:
 
 <CodeSnippets
   paths={[
+    'angular/api-doc-block-source-parameter.ts.mdx',
+    'web-components/api-doc-block-source-parameter.js.mdx',
+    'web-components/api-doc-block-source-parameter.ts.mdx',
     'common/api-doc-block-source-parameter.js.mdx',
     'common/api-doc-block-source-parameter.ts.mdx',
-    'common/api-doc-block-source-parameter.ts-4-9.mdx',
   ]}
 />
 

docs/api/doc-block-story.md

@@ -44,9 +44,11 @@ The following `autoplay` configurations are equivalent:
 
 <CodeSnippets
   paths={[
+    'angular/api-doc-block-story-parameter.ts.mdx',
+    'web-components/api-doc-block-story-parameter.js.mdx',
+    'web-components/api-doc-block-story-parameter.ts.mdx',
     'common/api-doc-block-story-parameter.js.mdx',
     'common/api-doc-block-story-parameter.ts.mdx',
-    'common/api-doc-block-story-parameter.ts-4-9.mdx',
   ]}
 />
 

docs/api/new-frameworks.md

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

docs/builders/builder-api.md

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

docs/builders/vite.md

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

docs/configure/environment-variables.md

@@ -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',
@@ -95,6 +93,9 @@ When Storybook loads, it will enable you to access them in your stories similar
 
 <CodeSnippets
   paths={[
+    'angular/my-component-env-var-config.ts.mdx',
+    'web-components/my-component-env-var-config.js.mdx',
+    'web-components/my-component-env-var-config.ts.mdx',
     'common/my-component-env-var-config.js.mdx',
     'common/my-component-env-var-config.ts.mdx',
   ]}

docs/configure/images-and-assets.md

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