Merge pull request storybookjs#15405 from storybookjs/fix_react_snippets

Chore: (Docs snippets) Updates for jsx and tsx support
abue9 · Jul 2, 2021 · 5096004 · 5096004
2 parents 051a42e + b7f47e9
commit 5096004
Show file tree

Hide file tree

Showing 132 changed files with 153 additions and 147 deletions.
diff --git a/docs/essentials/auto-generated-controls/react.mdx b/docs/essentials/auto-generated-controls/react.mdx
@@ -1,6 +1,8 @@
 To use auto-detected controls with React, you must fill in the `component` field in your story metadata:
 
 ```ts
+// Button.stories.js | Button.stories.jsx | Button.stories.ts | Button.stories.tsx
+
 import { Button } from './Button';
 
 export default {

diff --git a/docs/essentials/introduction.md b/docs/essentials/introduction.md
@@ -29,6 +29,8 @@ npm install --save-dev @storybook/addon-essentials
 Update your Storybook configuration (in `.storybook/main.js`) to include the essentials addon.
 
 ```js
+// .storybook/main.js
+
 module.exports = {
   addons: ['@storybook/addon-essentials'],
 };

diff --git a/docs/snippets/common/badge-story-custom-argtypes.js.mdx b/docs/snippets/common/badge-story-custom-argtypes.js.mdx
@@ -1,5 +1,5 @@
 ```js
-// Badge.stories.js | Badge.stories.ts
+// Badge.stories.js | Badge.stories.jsx  | Badge.stories.ts | Badge.stories.tsx
 
 export default {
   component: Badge,

diff --git a/docs/snippets/common/button-group-story-subcomponents.js.mdx b/docs/snippets/common/button-group-story-subcomponents.js.mdx
@@ -1,5 +1,5 @@
 ```js
-// ButtonGroup.stories.js
+// ButtonGroup.stories.js | ButtonGroup.stories.jsx
 
 import { Button, ButtonGroup } from '../ButtonGroup';
 

diff --git a/docs/snippets/common/button-group-story-subcomponents.ts.mdx b/docs/snippets/common/button-group-story-subcomponents.ts.mdx
@@ -1,5 +1,5 @@
 ```ts
-// ButtonGroup.stories.ts
+// ButtonGroup.stories.ts | ButtonGroup.stories.tsx
 
 import { Meta } from '@storybook/react/types-6-0';
 

diff --git a/docs/snippets/common/button-story-action-event-handle.js.mdx b/docs/snippets/common/button-story-action-event-handle.js.mdx
@@ -1,5 +1,5 @@
 ```js
-// Button.stories.js | Button.stories.ts
+// Button.stories.js | Button.stories.jsx | Button.stories.ts | Button.stories.tsx
 
 export default {
   title: 'Button',

diff --git a/docs/snippets/common/button-story-argtypes-with-categories.js.mdx b/docs/snippets/common/button-story-argtypes-with-categories.js.mdx
@@ -1,5 +1,5 @@
 ```js
-// Button.stories.js | Button.stories.ts
+// Button.stories.js | Button.stories.jsx | Button.stories.ts | Button.stories.tsx
 
 export default {
   title: 'Button',

diff --git a/docs/snippets/common/button-story-argtypes-with-subcategories.js.mdx b/docs/snippets/common/button-story-argtypes-with-subcategories.js.mdx
@@ -1,5 +1,5 @@
 ```js
-// Button.stories.js | Button.stories.ts
+// Button.stories.js | Button.stories.jsx | Button.stories.ts | Button.stories.tsx
 
 export default {
   title: 'Button',

diff --git a/docs/snippets/common/button-story-controls-primary-variant.js.mdx b/docs/snippets/common/button-story-controls-primary-variant.js.mdx
@@ -1,5 +1,5 @@
 ```js
-// Button.stories.js
+// Button.stories.js | Button.stories.jsx | Button.stories.ts | Button.stories.tsx
 
 const Primary = Template.bind({});
 Primary.args = {

diff --git a/docs/snippets/common/button-story-controls-radio-group.js.mdx b/docs/snippets/common/button-story-controls-radio-group.js.mdx
@@ -1,5 +1,5 @@
 ```js
-// Button.stories.js
+// Button.stories.js | Button.stories.jsx | Button.stories.ts | Button.stories.tsx
 
 export default {
   title: 'Button',

diff --git a/docs/snippets/common/button-story-default-export.js.mdx b/docs/snippets/common/button-story-default-export.js.mdx
@@ -1,7 +1,7 @@
 ```js
-// Button.stories.js | Button.stories.ts
+// Button.stories.js | Button.stories.jsx | Button.stories.ts | Button.stories.tsx
 
 export default {
-  title: 'Button'
-}
+  title: 'Button',
+};
 ```
diff --git a/docs/snippets/common/button-story-disable-addon.js.mdx b/docs/snippets/common/button-story-disable-addon.js.mdx
@@ -1,5 +1,5 @@
 ```js
-// Button.stories.js | Button.stories.ts
+// Button.stories.js |  Button.stories.jsx | Button.stories.ts | Button.stories.tsx
 
 export default {
   title: 'Button',

diff --git a/docs/snippets/common/button-story-disable-docspage-component.js.mdx b/docs/snippets/common/button-story-disable-docspage-component.js.mdx
@@ -1,5 +1,5 @@
 ```js
-// Button.stories.js | Button.stories.ts
+// Button.stories.js | Button.stories.jsx | Button.stories.ts | Button.stories.tsx
 
 import { Button } from './Button';
 

diff --git a/docs/snippets/common/button-story-docs-code-type.js.mdx b/docs/snippets/common/button-story-docs-code-type.js.mdx
@@ -1,5 +1,5 @@
 ```js
-// Button.stories.js | Button.stories.ts
+// Button.stories.js | Button.stories.jsx | Button.stories.ts | Button.stories.tsx
 
 export default {
   title: 'Button',
@@ -10,7 +10,7 @@ export default {
   parameters: {
     docs: {
       source: {
-        type: 'code'
+        type: 'code',
       }
     }
   }

diff --git a/docs/snippets/common/button-story-docspage-with-custom-component.js.mdx b/docs/snippets/common/button-story-docspage-with-custom-component.js.mdx
@@ -1,5 +1,5 @@
 ```js
-// Button.stories.js | Button.stories.ts
+// Button.stories.js | Button.stories.jsx | Button.stories.ts | Button.stories.tsx
 
 import { Button } from './Button';
 

diff --git a/docs/snippets/common/button-story-docspage-with-mdx.js.mdx b/docs/snippets/common/button-story-docspage-with-mdx.js.mdx
@@ -1,6 +1,5 @@
 ```js
-
-// Button.stories.js | Button.stories.ts
+// Button.stories.js | Button.stories.jsx | Button.stories.ts | Button.stories.tsx
 
 import { Button } from './Button';
 

diff --git a/docs/snippets/common/button-story-grouped.js.mdx b/docs/snippets/common/button-story-grouped.js.mdx
@@ -1,7 +1,7 @@
 ```js
-// Button.stories.js | Button.stories.ts
+// Button.stories.js | Button.stories.jsx | Button.stories.ts | Button.stories.tsx
 
 export default {
-  title: 'Design System/Atoms/Button'
-}
+  title: 'Design System/Atoms/Button',
+};
 ```
diff --git a/docs/snippets/common/button-story-hide-nocontrols-warning.js.mdx b/docs/snippets/common/button-story-hide-nocontrols-warning.js.mdx
@@ -1,5 +1,5 @@
 ```js
-// Button.stories.js | Button.stories.ts
+// Button.stories.js | Button.stories.jsx | Button.stories.ts | Button.stories.tsx
 
 export const Large = Template.bind({});
 

diff --git a/docs/snippets/common/button-story-hoisted.js.mdx b/docs/snippets/common/button-story-hoisted.js.mdx
@@ -1,5 +1,5 @@
 ```js
-// Button.stories.js | Button.stories.ts
+// Button.stories.js | Button.stories.jsx | Button.stories.ts | Button.stories.tsx
 
 import { Button as ButtonComponent } from './Button';
 

diff --git a/docs/snippets/common/button-story-matching-argtypes.js.mdx b/docs/snippets/common/button-story-matching-argtypes.js.mdx
@@ -1,5 +1,5 @@
 ```js
-// Button.stories.js | Button.stories.ts
+// Button.stories.js | Button.stories.jsx | Button.stories.ts | Button.stories.tsx
 
 export default {
   title: 'Button',

diff --git a/docs/snippets/common/button-story-onclick-action-argtype.js.mdx b/docs/snippets/common/button-story-onclick-action-argtype.js.mdx
@@ -1,5 +1,5 @@
 ```js
-// Button.stories.js | Button.stories.ts
+// Button.stories.js | Button.stories.jsx | Button.stories.ts | Button.stories.tsx
 
 export default {
   title: 'Button',

diff --git a/docs/snippets/common/button-story-primary-composition.js.mdx b/docs/snippets/common/button-story-primary-composition.js.mdx
@@ -1,5 +1,5 @@
 ```js
-// Button.stories.js | Button.stories.ts
+// Button.stories.js | Button.stories.jsx | Button.stories.ts | Button.stories.tsx
 
 const Primary = ButtonStory.bind({});
 Primary.args = {

diff --git a/docs/snippets/common/button-story-primary-long-name.js.mdx b/docs/snippets/common/button-story-primary-long-name.js.mdx
@@ -1,5 +1,5 @@
 ```js
-// Button.stories.js | Button.stories.ts
+// Button.stories.js | Button.stories.jsx | Button.stories.ts | Button.stories.tsx
 
 export const PrimaryLongName = Template.bind({});
 

diff --git a/docs/snippets/common/button-story-remix-docspage.js.mdx b/docs/snippets/common/button-story-remix-docspage.js.mdx
@@ -1,5 +1,5 @@
 ```js
-// Button.stories.js
+// Button.stories.js | Button.stories.jsx
 
 import React from 'react';
 

diff --git a/docs/snippets/common/button-story-remix-docspage.ts.mdx b/docs/snippets/common/button-story-remix-docspage.ts.mdx
@@ -1,5 +1,5 @@
 ```ts
-// Button.stories.tsx
+// Button.stories.ts | Button.stories.tsx
 
 import React from 'react';
 

diff --git a/docs/snippets/common/button-story-with-parameters.js.mdx b/docs/snippets/common/button-story-with-parameters.js.mdx
@@ -1,5 +1,5 @@
 ```js
-// Button.stories.js
+// Button.stories.js | Button.stories.jsx | Button.stories.ts | Button.stories.tsx
 
 export const Primary = Template.bind({});
 Primary.args ={

diff --git a/docs/snippets/common/checkbox-story-csf.js.mdx b/docs/snippets/common/checkbox-story-csf.js.mdx
@@ -1,11 +1,11 @@
 ```js
-// Checkbox.stories.js
+// Checkbox.stories.js | Checkbox.stories.jsx 
 
 import { Checkbox } from './Checkbox';
 
 export default { 
-    title: 'MDX/Checkbox', 
-    component: Checkbox
+  title: 'MDX/Checkbox',
+  component: Checkbox,
 };
 
 const Template = (args) => <Checkbox {...args} />

diff --git a/docs/snippets/common/checkbox-story-grouped.js.mdx b/docs/snippets/common/checkbox-story-grouped.js.mdx
@@ -1,7 +1,7 @@
 ```js
-// Checkbox.stories.js | Checkbox.stories.ts
+// Checkbox.stories.js | Checkbox.stories.jsx | Checkbox.stories.ts | Checkbox.stories.tsx
 
 export default {
-  title: 'Design System/Atoms/Checkbox'
-}
+  title: 'Design System/Atoms/Checkbox',
+};
 ```
diff --git a/docs/snippets/common/component-story-csf-argstable-customization.js.mdx b/docs/snippets/common/component-story-csf-argstable-customization.js.mdx
@@ -1,5 +1,5 @@
 ```js
-// Button.stories.js | Button.stories.ts
+// Button.stories.js | Button.stories.jsx | Button.stories.ts | Button.stories.tsx
 
 export default {
   title: 'Button',

diff --git a/docs/snippets/common/component-story-csf-description.js.mdx b/docs/snippets/common/component-story-csf-description.js.mdx
@@ -1,5 +1,5 @@
 ```js
-// Button.stories.js | Button.stories.ts
+// Button.stories.js | Button.stories.jsx | Button.stories.ts | Button.stories.tsx
 
 export default {
   title: 'CustomDescription',

diff --git a/docs/snippets/common/component-story-custom-args-mapping.js.mdx b/docs/snippets/common/component-story-custom-args-mapping.js.mdx
@@ -1,5 +1,5 @@
 ```js
-// Button.stories.js
+// Button.stories.js | Button.stories.jsx | Button.stories.ts | Button.stories.tsx
 
 import { Button } from './button';
 import { ArrowUp, ArrowDown, ArrowLeft, ArrowRight } from './icons';

diff --git a/docs/snippets/common/component-story-custom-source.js.mdx b/docs/snippets/common/component-story-custom-source.js.mdx
@@ -1,5 +1,5 @@
 ```js
-// Button.stories.js | Button.stories.ts
+// Button.stories.js | Button.stories.jsx | Button.stories.ts | Button.stories.tsx
 
 export const CustomSource = () => Template.bind({});
 

diff --git a/docs/snippets/common/component-story-disable-controls-alt.js.mdx b/docs/snippets/common/component-story-disable-controls-alt.js.mdx
@@ -1,5 +1,5 @@
 ```js
-// YourComponent.stories.js | YourComponent.stories.ts
+// YourComponent.stories.js | YourComponent.stories.jsx | YourComponent.stories.ts | YourComponent.stories.tsx
 
 import { YourComponent } from './your-component'
 

diff --git a/docs/snippets/common/component-story-disable-controls-regex.js.mdx b/docs/snippets/common/component-story-disable-controls-regex.js.mdx
@@ -1,5 +1,5 @@
 ```js
-// YourComponent.stories.js | YourComponent.stories.ts
+// YourComponent.stories.js | YourComponent.stories.jsx | YourComponent.stories.ts | YourComponent.stories.tsx
 
 ArrayInclude = Template.bind({})
 ArrayInclude.parameters = { controls: { include: ['foo', 'bar'] } };

diff --git a/docs/snippets/common/component-story-disable-controls.js.mdx b/docs/snippets/common/component-story-disable-controls.js.mdx
@@ -1,5 +1,5 @@
 ```js
-// YourComponent.stories.js | YourComponent.stories.ts
+// YourComponent.stories.js | YourComponent.stories.jsx | YourComponent.stories.ts | YourComponent.stories.tsx
 
 import { YourComponent } from './your-component'
 

diff --git a/docs/snippets/common/component-story-dynamic-title.js.mdx b/docs/snippets/common/component-story-dynamic-title.js.mdx
@@ -1,5 +1,5 @@
 ```js
-// MyComponent.stories.js | MyComponent.stories.ts
+// MyComponent.stories.js | MyComponent.stories.jsx | MyComponent.stories.ts | MyComponent.stories.tsx
 
 import base from 'paths.macro';
 

diff --git a/docs/snippets/common/component-story-sort-controls.js.mdx b/docs/snippets/common/component-story-sort-controls.js.mdx
@@ -1,5 +1,5 @@
 ```js
-// YourComponent.stories.js | YourComponent.stories.ts
+// YourComponent.stories.js | YourComponent.stories.jsx | YourComponent.stories.ts | YourComponent.stories.tsx
 
 import { YourComponent } from './your-component'
 

diff --git a/docs/snippets/common/custom-docs-page.ts-component.ts.mdx b/docs/snippets/common/custom-docs-page.ts-component.ts.mdx
@@ -3,7 +3,7 @@
 
 import React from 'react';
 
-export const CustomDocumentationComponent: React.FC<{}> = () => {
+export const CustomDocumentationComponent: React.VFC<{}> = () => {
   return (
     <div>
       <h1>Replacing DocsPage with a custom component</h1>

diff --git a/docs/snippets/common/foo-bar-baz-story.js.mdx b/docs/snippets/common/foo-bar-baz-story.js.mdx
@@ -1,5 +1,5 @@
 ```js
-// FooBar.stories.js | FooBar.stories.ts
+// FooBar.stories.js | FooBar.stories.jsx | FooBar.stories.ts | FooBar.stories.tsx
 
 export default {
   title: 'Foo/Bar',

diff --git a/docs/snippets/common/gizmo-story-controls-customization.js.mdx b/docs/snippets/common/gizmo-story-controls-customization.js.mdx
@@ -1,5 +1,5 @@
 ```js
-// Gizmo.stories.js | Gizmo.stories.ts
+// Gizmo.stories.js | Gizmo.stories.jsx | Gizmo.stories.ts | Gizmo.stories.tsx
 
 export default {
   title: 'Gizmo',

diff --git a/docs/snippets/common/my-component-story-import-json.js.mdx b/docs/snippets/common/my-component-story-import-json.js.mdx
@@ -1,5 +1,5 @@
 ```js
-// MyComponent.stories.js | MyComponent.stories.ts
+// MyComponent.stories.js | MyComponent.stories.jsx | MyComponent.stories.ts | MyComponent.stories.tsx
 
 // This will automatically be parsed to the contents of `data.json`
 import data from './data.json';

diff --git a/docs/snippets/common/my-component-story-import-static-asset.js.mdx b/docs/snippets/common/my-component-story-import-static-asset.js.mdx
@@ -1,5 +1,5 @@
 ```js
-// MyComponent.stories.js | MyComponent.stories.ts
+// MyComponent.stories.js | MyComponent.stories.jsx | MyComponent.stories.ts | MyComponent.stories.tsx
 
 // This will include './static/image.png' in the bundle. 
 // And return a path to be included in a src attribute

diff --git a/docs/snippets/common/my-component-story-mandatory-export.js.mdx b/docs/snippets/common/my-component-story-mandatory-export.js.mdx
@@ -1,5 +1,5 @@
 ```js
-// MyComponent.story.js
+// MyComponent.story.js | MyComponent.story.jsx | MyComponent.story.ts | MyComponent.story.tsx
 
 import MyComponent from './MyComponent';
 

diff --git a/docs/snippets/common/my-component-story-use-globaltype-backwards-compat.js.mdx b/docs/snippets/common/my-component-story-use-globaltype-backwards-compat.js.mdx
@@ -1,5 +1,5 @@
 ```js
-// MyComponent.stories.js
+// MyComponent.stories.js | MyComponent.stories.jsx | MyComponent.stories.ts | MyComponent.stories.tsx
 
 export const StoryWithLocale = ({ globals: { locale } }) => {
   const caption = getCaptionForLocale(locale);

diff --git a/docs/snippets/common/my-component-story-use-globaltype.js.mdx b/docs/snippets/common/my-component-story-use-globaltype.js.mdx
@@ -1,5 +1,5 @@
 ```js
-// MyComponent.stories.js
+// MyComponent.stories.js | MyComponent.stories.jsx | MyComponent.stories.ts | MyComponent.stories.tsx
 
 const getCaptionForLocale = (locale) => {
   switch(locale) {

diff --git a/docs/snippets/common/my-component-story-with-storyname.js.mdx b/docs/snippets/common/my-component-story-with-storyname.js.mdx
@@ -1,5 +1,5 @@
 ```js
-// MyComponent.stories.js
+// MyComponent.story.js | MyComponent.story.jsx | MyComponent.story.ts | MyComponent.story.tsx
 
 export const Simple = () => <MyComponent />;
 

diff --git a/docs/snippets/common/my-component-story.js.mdx b/docs/snippets/common/my-component-story.js.mdx
@@ -1,5 +1,5 @@
 ```js
-// MyComponent.stories.js | MyComponent.stories.ts
+// MyComponent.stories.js | MyComponent.stories.jsx | MyComponent.stories.ts | MyComponent.stories.tsx
 
 import { MyComponent } from './MyComponent';
 

diff --git a/docs/snippets/common/other-foo-bar-story.js.mdx b/docs/snippets/common/other-foo-bar-story.js.mdx
@@ -1,5 +1,5 @@
 ```js
-// FooBar.stories.js | FooBar.stories.ts
+// FooBar.stories.js | FooBar.stories.jsx | FooBar.stories.ts | FooBar.stories.tsx
 
 export default {
   title: 'OtherFoo/Bar',

diff --git a/docs/snippets/common/storybook-addon-backgrounds-configure-backgrounds.js.mdx b/docs/snippets/common/storybook-addon-backgrounds-configure-backgrounds.js.mdx
@@ -1,5 +1,5 @@
 ```js
-// Button.stories.js | Button.stories.ts
+// Button.stories.js | Button.stories.jsx | Button.stories.ts | Button.stories.tsx
 
 // To apply a set of backgrounds to all stories of Button:
 export default {

diff --git a/docs/snippets/common/storybook-addon-backgrounds-configure-grid.js.mdx b/docs/snippets/common/storybook-addon-backgrounds-configure-grid.js.mdx
@@ -1,5 +1,5 @@
 ```js
-// Button.stories.js | Button.stories.ts
+// Button.stories.js | Button.stories.jsx | Button.stories.ts | Button.stories.tsx
 
 // To apply a grid to all stories of Button:
 export default {

diff --git a/docs/snippets/common/storybook-addon-backgrounds-disable-backgrounds.js.mdx b/docs/snippets/common/storybook-addon-backgrounds-disable-backgrounds.js.mdx
@@ -1,5 +1,5 @@
 ```js
-// Button.stories.js | Button.stories.ts
+// Button.stories.js | Button.stories.jsx | Button.stories.ts | Button.stories.tsx
 
 export const Large = Template.bind({});
 Large.parameters = {