Merge pull request #16599 from storybookjs/minor_tweaks_to_essentials_section_csf_2_0

Chore: (Docs) Minor updates to the essentials section for 6.4

docs/essentials/actions.md

@@ -36,7 +36,19 @@ When Storybook sees this argType, it will create an arg set to a special “acti
 
 ### Automatically matching args
 
-Another option is to use a parameter to match all [argTypes](../api/argtypes.md) that match a certain pattern. The following configuration automatically creates actions for each `on` argType (which you can either specify manually or can be [inferred automatically](../api/argtypes.md#automatic-argtype-inference)).
+Another option is to use a global parameter to match all [argTypes](../api/argtypes.md) that match a certain pattern. The following configuration automatically creates actions for each `on` argType (which you can either specify manually or can be [inferred automatically](../api/argtypes.md#automatic-argtype-inference)).
+
+<!-- prettier-ignore-start -->
+
+<CodeSnippets
+  paths={[
+    'common/storybook-preview-matching-argtypes.js.mdx',
+  ]}
+/>
+
+<!-- prettier-ignore-end -->
+
+If you need more granular control over which `argTypes` are matched, you can adjust your stories and include the `argTypes` parameter. For example:
 
 <!-- prettier-ignore-start -->
 

docs/essentials/controls.md

@@ -247,15 +247,15 @@ And here's what the resulting UI looks like:
 
 For `color` controls, you can specify an array of `presetColors`, either on the `control` in `argTypes`, or as a parameter under the `controls` namespace:
 
-```js
-// .storybook/preview.js
+<!-- prettier-ignore-start -->
 
-export const parameters = {
-  controls: {
-    presetColors: [{ color: '#ff4785', title: 'Coral' }, 'rgba(0, 159, 183, 1)', '#fe4a49'],
-  },
-};
-```
+<CodeSnippets
+  paths={[
+    'common/storybook-preview-parameters-color-swatches.js.mdx',
+    ]}
+/>
+
+<!-- prettier-ignore-end -->
 
 Color presets can be defined as an object with `color` and `title` or a simple CSS color string. These will then be available as swatches in the color picker. When you hover over the color swatch, you'll be able to see its title. If none is specified, it will default to the nearest CSS color name instead.
 

docs/essentials/viewport.md

@@ -118,6 +118,7 @@ Update your story through [parameters](../writing-stories/parameters.md) to incl
 <CodeSnippets
   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',

docs/snippets/angular/component-story-custom-args-complex.mdx.mdx

@@ -1,27 +1,36 @@
 ```md
 <!--- YourComponent.stories.mdx -->
 
-import { Meta, Story, Canvas } from '@storybook/addon-docs';
+import { Canvas, Meta, Story } from '@storybook/addon-docs';
 
 import { YourComponent } from './your-component.component';
 
-<Meta title="Example of how to use argTypes and functions" component={YourComponent}/>
+<Meta title="YourComponent" component={YourComponent}/>
 
 <!---👇 A function to apply some computations -->
 
 export const someFunction = (valuePropertyA, valuePropertyB) => {
 
-  <!--- Makes some computations and returns something -->
+  // Makes some computations and returns something
 
 };
 
-<!-- Render functions are a framework specific feature to allow you control on how the component renders -->
+export const Template = (args) => {
+  const { propertyA, propertyB } = args;
 
+  // 👇 Assigns the function result to a variable 
+  const someFunctionResult = someFunction(propertyA, propertyB);
+  return {
+    props: {
+      ...args,
+      someProperty: someFunctionResult,
+    },
+  };
+};
 
- <!---👇 Assigns the function result to a variable -->
 <Canvas>
   <Story
-    name="A complex case with a function"
+    name="ExampleStory"
     argTypes={{
       propertyA: {
         options: [
@@ -41,16 +50,8 @@ export const someFunction = (valuePropertyA, valuePropertyB) => {
     args={{
       propertyA: 'Item One',
       propertyB: 'Another Item One',
-    }} 
-    render={(args) => {
-      const { propertyA, propertyB } = args;
-      const someFunctionResult = someFunction(propertyA, propertyB);
-      return {
-        props: {
-          ...args,
-          someProperty: someFunctionResult,
-        },
-      };
-    }} />
-</Canvas>
+    }}>
+    {Template.bind({})}
+  </Story>
+</Canvas
 ```

docs/snippets/angular/component-story-custom-args-complex.ts.mdx

@@ -1,9 +1,16 @@
 ```ts
 // YourComponent.stories.ts
 
+import { Meta, Story} from '@storybook/angular';
+
 import { YourComponent } from './your-component.component';
 
 export default {
+  /* 👇 The title prop is optional.
+   * See https://storybook.js.org/docs/angular/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
+  title: 'YourComponent',
   component: YourComponent,
   //👇 Creates specific argTypes with options
   argTypes: {
@@ -15,25 +22,30 @@ export default {
       options: ['Another Item One', 'Another Item Two', 'Another Item Three'],
     },
   },
-};
+} as Meta;
 
 //👇 Some function to demonstrate the behavior
 const someFunction = (valuePropertyA: String, valuePropertyB: String) => {
   // Makes some computations and returns something
 };
 
-export const ExampleStory = {
-  args: { propertyA: 'Something', propertyB: 'Something else' },
-  render: (args) => {
-    const { propertyA, propertyB } = args;
-    //👇 Assigns the function result to a variable
-    const someFunctionResult = someFunction(propertyA, propertyB);
-    return {
-      props: {
-        ...args,
-        someProperty: someFunctionResult,
-      },
-    };
-  },
+const Template: Story (args) => {
+  const { propertyA, propertyB } = args;
+  
+  //👇 Assigns the function result to a variable
+  const someFunctionResult = someFunction(propertyA, propertyB);
+  
+  return {
+    props: {
+      ...args,
+      someProperty: someFunctionResult,
+    },
+  };
+};
+
+export const ExampleStory = Template.bind({});
+ExampleStory.args= {
+  propertyA: 'Item One',
+  propertyB: 'Another Item One',
 };
 ```

docs/snippets/angular/my-component-story-configure-viewports.mdx.mdx

@@ -9,7 +9,7 @@ import { MyComponent } from './MyComponent.component';
 
 
 <Meta
-  title="Stories"
+  title="MyComponent"
   parameters={{
     viewport: {
       viewports: INITIAL_VIEWPORTS,
@@ -18,16 +18,15 @@ import { MyComponent } from './MyComponent.component';
   }}
   component={MyComponent} />
 
-<!-- Render functions are a framework specific feature to allow you control on how the component renders -->
-
 <Story
   name="MyStory"
   parameters={{
     viewport: {
       defaultViewport: 'iphonex',
     }
+  }}>
+  {{
+    template: '<MyComponent></MyComponent>',
   }}
-  render={() => ({
-    template: `<MyComponent></MyComponent>`,
-  })} />
+</Story>
 ```

docs/snippets/angular/my-component-story-configure-viewports.ts.mdx

@@ -1,11 +1,18 @@
 ```ts
 // MyComponent.stories.ts
 
+import { Meta, Story } from '@storybook/angular';
+
 import { INITIAL_VIEWPORTS } from '@storybook/addon-viewport';
 
 import { MyComponent } from './MyComponent.component';
 
 export default {
+  /* 👇 The title prop is optional.
+   * See https://storybook.js.org/docs/angular/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
+  title: 'MyComponent',
   component: MyComponent,
   parameters: {
     //👇 The viewports object from the Essentials addon
@@ -17,13 +24,9 @@ export default {
       defaultViewport: 'iphone6',
     },
   },
-};
+} as Meta;
 
-export const MyStory = {
-  parameters: {
-    viewport: {
-      defaultViewport: 'iphonex',
-    },
-  },
-};
-```
+export const MyStory: Story = () => ({
+  template: '<MyComponent></MyComponent>',
+});
+```

docs/snippets/angular/my-component-story-use-globaltype.mdx.mdx

@@ -5,7 +5,7 @@ import { Meta, Story } from '@storybook/addon-docs';
 
 import { MyComponent } from './MyComponent.component';
 
-<Meta title="MDX Story with toolbars" component={MyComponent} />
+<Meta title="MyComponent" component={MyComponent} />
 
 <!-- Render functions are a framework specific feature to allow you control on how the component renders -->
 
@@ -20,12 +20,12 @@ export const getCaptionForLocale = (locale) => {
   }
 };
 
-<Story 
-  name="StoryWithLocale" 
-  render={(args, { globals: { locale } }) => {
+<Story name="StoryWithLocale">
+  {(args, { globals: { locale } }) => {
     const caption = getCaptionForLocale(locale);
     return {
       template: `<p>${caption}</p>`,
     };
-  }} />
+  }}
+</Story>
 ```

docs/snippets/angular/my-component-story-use-globaltype.ts.mdx

@@ -1,11 +1,18 @@
 ```ts
 // MyComponent.stories.ts
 
+import { Meta } from '@storybook/angular';
+
 import { MyComponent } from './MyComponent.component';
 
 export default {
+    /* 👇 The title prop is optional.
+   * See https://storybook.js.org/docs/angular/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
+  title: 'MyComponent',
   component: MyComponent,
-};
+} as Meta;
 
 const getCaptionForLocale = (locale) => {
   switch (locale) {
@@ -22,12 +29,10 @@ const getCaptionForLocale = (locale) => {
   }
 };
 
-export const StoryWithLocale = {
-  render: (args, { globals: { locale } }) => {
-    const caption = getCaptionForLocale(locale);
-    return {
-      template: `<p>${caption}</p>`,
-    };
-  },
+export const StoryWithLocale = (args, { globals: { locale } }) => {
+  const caption = getCaptionForLocale(locale);
+  return {
+    template: `<p>${caption}</p>`,
+  };
 };
-```
+```

docs/snippets/angular/table-story-fully-customize-controls.mdx.mdx

@@ -7,7 +7,20 @@ import { Table } from './table.component';
 
 <Meta title="Custom Table" component={Table} />
 
-<!-- Render functions are a framework specific feature to allow you control on how the component renders -->
+export const TableStory = (args) => ({
+  props: args,
+  template: `
+    <table>
+      <tbody>
+        <tr *ngFor="let row of data; let i=index">
+          <td *ngFor="let col of row; let j=index">
+            {{data[i][j]}}
+          </td>
+        </tr>
+      </tbody>
+    </table>
+    `,
+});
 
 <Story
   name="Numeric"
@@ -17,19 +30,7 @@ import { Table } from './table.component';
       [4, 5, 6],
     ],
     size: 'large',
-  }}
-  render={(args) => ({
-    props: args,
-    template: `
-      <table>
-        <tbody>
-          <tr *ngFor="let row of data; let i=index">
-            <td *ngFor="let col of row; let j=index">
-              {{data[i][j]}}
-            </td>
-          </tr>
-        </tbody>
-      </table>
-    `,
-  })} />
+  }}>
+  {TableStory.bind({})}
+</Story>
 ```

docs/snippets/angular/table-story-fully-customize-controls.ts.mdx

@@ -1,35 +1,42 @@
 ```ts
 // Table.stories.ts
 
+import { Meta, Story} from '@storybook/angular',
+
 import { Table } from './Table.component';
 
 export default {
+  /* 👇 The title prop is optional.
+   * See https://storybook.js.org/docs/angular/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
+  title: 'Custom Table',
   component: Table,
 };
 
-export const TableStory = {
-  args: {
-    //👇 This arg is for the story component
-    data: [
-      [1, 2, 3],
-      [4, 5, 6],
-    ],
-    //👇 The remaining args get passed to the `Table` component
-    size: 'large',
-  },
-  render: (args) => ({
-    props: args,
-    template: `
-      <table>
-        <tbody>
-          <tr *ngFor="let row of data; let i=index">
-            <td *ngFor="let col of row; let j=index">
-              {{data[i][j]}}
-            </td>
-          </tr>
-        </tbody>
+const TableStory: Story = (args) => ({
+  props: args,
+  template: `
+    <table>
+      <tbody>
+        <tr *ngFor="let row of data; let i=index">
+          <td *ngFor="let col of row; let j=index">
+            {{data[i][j]}}
+          </td>
+        </tr>
+      </tbody>
     </table>
-  `,
-  }),
+    `,
+});
+
+export const Numeric = TableStory.bind({});
+Numeric.args = {
+  //👇 This arg is for the story component
+  data: [
+    [1, 2, 3],
+    [4, 5, 6],
+  ],
+  //👇 The remaining args get passed to the `Table` component
+  size: 'large',
 };
-```
+```

docs/snippets/common/button-story-action-event-handle.js.mdx

@@ -1,9 +1,14 @@
 ```js
-// Button.stories.js | Button.stories.jsx | Button.stories.ts | Button.stories.tsx
+// Button.stories.js|jsx|ts|tsx
 
 import { Button } from './Button';
 
 export default {
+  /* 👇 The title prop is optional.
+   * See https://storybook.js.org/docs/react/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
+  title: 'Button',
   component: Button,
   parameters: {
     actions: {
@@ -11,4 +16,4 @@ export default {
     },
   },
 };
-```
+```

docs/snippets/common/button-story-controls-primary-variant.js.mdx

@@ -1,15 +1,29 @@
 ```js
-// Button.stories.js | Button.stories.jsx | Button.stories.ts | Button.stories.tsx
+// Button.stories.js|jsx|ts|tsx
 
 import { Button } from './Button';
 
 export default {
+  /* 👇 The title prop is optional.
+   * See https://storybook.js.org/docs/react/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
+   title: 'Button',
   component: Button,
 };
 
+const Template = (args) => ({
+  //👇 Your template goes here
+});
+
+export const Primary = Template.bind({});
+Primary.args = {
+  variant: 'primary',
+};
+
 export const Primary = {
   args: {
     variant: 'primary',
   },
 };
-```
+```

docs/snippets/common/button-story-controls-primary-variant.mdx.mdx

@@ -5,15 +5,17 @@ import { Meta, Story } from '@storybook/addon-docs';
 
 import { Button } from './Button';
 
-
 <Meta title="Button" component={Button} />
 
-<!-- Render functions are a framework specific feature to allow you control on how the component renders -->
+export const Template = (args) => ({
+   //👇 Your template goes here
+});
+
 <Story 
   name="Primary"
   args={{ 
     variant: 'primary',
-  }}
-  render={() => ({ })}>
+  }}>
+  {Template.bind({})}
 </Story>
 ```

docs/snippets/common/button-story-controls-radio-group.js.mdx

@@ -1,9 +1,14 @@
 ```js
-// Button.stories.js | Button.stories.jsx | Button.stories.ts | Button.stories.tsx
+// Button.stories.js|jsx|ts|tsx
 
 import { Button } from './Button';
 
 export default {
+   /* 👇 The title prop is optional.
+   * See https://storybook.js.org/docs/react/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
+  title: 'Button',
   component: Button,
   argTypes: {
     variant: {
@@ -12,4 +17,4 @@ export default {
     },
   },
 };
-```
+```

docs/snippets/common/button-story-hide-nocontrols-warning.js.mdx

@@ -1,15 +1,23 @@
 ```js
-// Button.stories.js | Button.stories.jsx | Button.stories.ts | Button.stories.tsx
+// Button.stories.js|jsx|ts|tsx
 
 import { Button } from './Button';
 
 export default {
+  /* 👇 The title prop is optional.
+   * See https://storybook.js.org/docs/react/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
+  title: 'Button',
   component: Button,
 };
 
-export const Large = {
-  parameters: {
-    controls: { hideNoControlsWarning: true },
-  },
+const Template = (args) => ({
+  //👇 Your template goes here
+});
+
+export const Large = Template.bind({});
+Large.parameters = {
+  controls: { hideNoControlsWarning: true },
 };
-```
+```

docs/snippets/common/button-story-matching-argtypes.js.mdx

@@ -1,10 +1,15 @@
 ```js
-// Button.stories.js | Button.stories.jsx | Button.stories.ts | Button.stories.tsx
+// Button.stories.js|jsx|ts|tsx
 
 import { Button } from './Button';
 
 export default {
+   /* 👇 The title prop is optional.
+   * See https://storybook.js.org/docs/react/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
+  title: 'Button',
   component: Button,
   parameters: { actions: { argTypesRegex: '^on.*' } },
 };
-```
+```

docs/snippets/common/button-story-onclick-action-argtype.js.mdx

@@ -1,10 +1,15 @@
 ```js
-// Button.stories.js | Button.stories.jsx | Button.stories.ts | Button.stories.tsx
+// Button.stories.js|jsx|ts|tsx
 
 import { Button } from './Button';
 
 export default {
+  /* 👇 The title prop is optional.
+   * See https://storybook.js.org/docs/react/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
+  title: 'Button',
   component: Button,
   argTypes: { onClick: { action: 'clicked' } },
 };
-```
+```

docs/snippets/common/component-story-custom-args-mapping.js.mdx

@@ -7,6 +7,11 @@ import { ArrowUp, ArrowDown, ArrowLeft, ArrowRight } from './icons';
 const arrows = { ArrowUp, ArrowDown, ArrowLeft, ArrowRight };
 
 export default {
+   /* 👇 The title prop is optional.
+   * See https://storybook.js.org/docs/angular/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
+  title: 'Button',
   component: Button,
   argTypes: {
     arrow: {

docs/snippets/common/component-story-disable-controls-alt.js.mdx

@@ -1,9 +1,14 @@
 ```js
-// YourComponent.stories.js | YourComponent.stories.jsx | YourComponent.stories.ts | YourComponent.stories.tsx
+// YourComponent.stories.js|jsx|ts|tsx
 
 import { YourComponent } from './YourComponent';
 
 export default {
+  /* 👇 The title prop is optional.
+   * See https://storybook.js.org/docs/react/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
+  title: 'YourComponent',
   component: YourComponent,
   argTypes: {
     // foo is the property we want to remove from the UI
@@ -12,4 +17,4 @@ export default {
     },
   },
 };
-```
+```

docs/snippets/common/component-story-disable-controls-alt.mdx.mdx

@@ -6,11 +6,11 @@ import { Meta } from '@storybook/addon-docs';
 import { YourComponent } from './your-component'
 
 <Meta 
-  title='My Story' 
+  title='YourComponent' 
   argTypes={{
     foo:{
       control: false
     }
   }}
   component={YourComponent} />
-```
+```

docs/snippets/common/component-story-disable-controls-regex.js.mdx

@@ -1,33 +1,31 @@
 ```js
-// YourComponent.stories.js | YourComponent.stories.jsx | YourComponent.stories.ts | YourComponent.stories.tsx
+// YourComponent.stories.js|jsx|ts|tsx
 
 import { YourComponent } from './YourComponent';
 
 export default {
+  /* 👇 The title prop is optional.
+   * See https://storybook.js.org/docs/react/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
+  title: 'YourComponent',
   component: YourComponent,
 };
 
-export const ArrayInclude = {
-  parameters: {
-    controls: { include: ['foo', 'bar'] },
-  },
-};
+const Template = (args) => ({
+  //👇 Your template goes here
+});
 
-export const RegexInclude = {
-  parameters: {
-    controls: { include: /^hello*/ },
-  },
-};
 
-export const ArrayExclude = {
-  parameters: {
-    controls: { exclude: ['foo', 'bar'] },
-  },
-};
+ArrayInclude = Template.bind({})
+ArrayInclude.parameters = { controls: { include: ['foo', 'bar'] } };
 
-export const RegexExclude = {
-  parameters: {
-    controls: { exclude: /^hello*/ },
-  },
-};
+RegexInclude = Template.bind({})
+RegexInclude.parameters = { controls: { include: /^hello*/ } };
+
+ArrayExclude = Template.bind({})
+ArrayExclude.parameters = { controls: { exclude: ['foo', 'bar'] } };
+
+RegexExclude = Template.bind({})
+RegexExclude.parameters = { controls: { exclude: /^hello*/ } };
 ```

docs/snippets/common/component-story-disable-controls-regex.mdx.mdx

@@ -1,13 +1,15 @@
 ```md
 <!--- YourComponent.stories.mdx -->
 
-import { Story } from '@storybook/addon-docs';
+import { Meta, Story } from '@storybook/addon-docs';
 
 import { YourComponent } from './YourComponent';
 
 <Meta title="YourComponent" component={YourComponent} />
 
-<!-- Render functions are a framework specific feature to allow you control on how the component renders -->
+export const Template = (args) => ({
+  //👇 Your template goes here
+});
 
 <Story 
   name="Array Include"
@@ -15,8 +17,9 @@ import { YourComponent } from './YourComponent';
     controls: { 
       include: ['foo', 'bar'] 
     } 
-  }}
-  render={() => ({ })}/>
+  }}>
+  {Template.bind({})}
+</Story>
 
 <Story 
   name="Regex Include"
@@ -24,8 +27,9 @@ import { YourComponent } from './YourComponent';
     controls: { include: 
       /^hello*/ 
     } 
-  }}
-  render={() => ({ })}/>
+  }}>
+  {Template.bind({})}
+</Story>
 
 <Story 
   name="Array Exclude"
@@ -33,8 +37,9 @@ import { YourComponent } from './YourComponent';
     controls: { 
       exclude: ['foo', 'bar'] 
     } 
-  }}
-  render={() => ({ })}/>
+  }}>
+  {Template.bind({})}
+</Story>
 
 <Story 
   name="Regex Exclude"
@@ -42,6 +47,7 @@ import { YourComponent } from './YourComponent';
     controls: { 
       exclude: /^hello*/ 
     } 
-  }}
-  render={() => ({ })}/>
+  }}>
+  {Template.bind({})}
+</Story>
 ```

docs/snippets/common/component-story-disable-controls.js.mdx

@@ -1,9 +1,14 @@
 ```js
-// YourComponent.stories.js | YourComponent.stories.jsx | YourComponent.stories.ts | YourComponent.stories.tsx
+// YourComponent.stories.js|jsx|ts|tsx
 
 import { YourComponent } from './YourComponent';
 
 export default {
+  /* 👇 The title prop is optional.
+   * See https://storybook.js.org/docs/react/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
+  title: 'YourComponent',
   component: YourComponent,
   argTypes: {
     // foo is the property we want to remove from the UI
@@ -14,4 +19,4 @@ export default {
     },
   },
 };
-```
+```

docs/snippets/common/component-story-disable-controls.mdx.mdx

@@ -6,7 +6,7 @@ import { Meta } from '@storybook/addon-docs';
 import { YourComponent } from './YourComponent'
 
 <Meta 
-  title="My Story"
+  title="YourComponent"
   component={YourComponent} 
   argTypes={{
     foo:{
@@ -15,4 +15,4 @@ import { YourComponent } from './YourComponent'
       }
     }
   }} />
-```
+```

docs/snippets/common/component-story-sort-controls.js.mdx

@@ -1,10 +1,15 @@
 ```js
-// YourComponent.stories.js | YourComponent.stories.jsx | YourComponent.stories.ts | YourComponent.stories.tsx
+// YourComponent.stories.js|jsx|ts|tsx
 
 import { YourComponent } from './your-component';
 
 export default {
+  /* 👇 The title prop is optional.
+   * See https://storybook.js.org/docs/react/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
+  title: 'YourComponent',
   component: YourComponent,
   parameters: { controls: { sort: 'requiredFirst' } },
 };
-```
+```

docs/snippets/common/component-story-sort-controls.mdx.mdx

@@ -13,4 +13,4 @@ import { YourComponent } from './your-component'
       sort: 'requiredFirst',
     } 
   }} />
-```
+```

docs/snippets/common/gizmo-story-controls-customization.js.mdx

@@ -1,9 +1,14 @@
 ```js
-// Gizmo.stories.js | Gizmo.stories.jsx | Gizmo.stories.ts | Gizmo.stories.tsx
+// Gizmo.stories.js|jsx|ts|tsx
 
 import { Gizmo } from './Gizmo';
 
 export default {
+   /* 👇 The title prop is optional.
+   * See https://storybook.js.org/docs/vue/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
+  title: 'Gizmo',
   component: Gizmo,
   argTypes: {
     width: {
@@ -11,4 +16,4 @@ export default {
     },
   },
 };
-```
+```

docs/snippets/common/storybook-addon-backgrounds-configure-backgrounds.js.mdx

@@ -1,10 +1,15 @@
 ```js
-// Button.stories.js | Button.stories.jsx | Button.stories.ts | Button.stories.tsx
+// Button.stories.js|jsx|ts| tsx
 
 import { Button } from './Button';
 
 // To apply a set of backgrounds to all stories of Button:
 export default {
+  /* 👇 The title prop is optional.
+   * See https://storybook.js.org/docs/react/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
+  title: 'Button',
   component: Button,
   parameters: {
     backgrounds: {
@@ -16,4 +21,4 @@ export default {
     },
   },
 };
-```
+```

docs/snippets/common/storybook-addon-backgrounds-configure-grid.js.mdx

@@ -1,10 +1,15 @@
 ```js
-// Button.stories.js | Button.stories.jsx | Button.stories.ts | Button.stories.tsx
+// Button.stories.js|jsx|ts|tsx
 
 import { Button } from './Button';
 
 // To apply a grid to all stories of Button:
 export default {
+  /* 👇 The title prop is optional.
+   * See https://storybook.js.org/docs/react/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
+  title: 'Button',
   component: Button,
   parameters: {
     backgrounds: {

docs/snippets/common/storybook-addon-backgrounds-disable-backgrounds.js.mdx

@@ -1,15 +1,23 @@
 ```js
-// Button.stories.js | Button.stories.jsx | Button.stories.ts | Button.stories.tsx
+// Button.stories.js|jsx|ts|tsx
 
 import { Button } from './Button';
 
 export default {
+  /* 👇 The title prop is optional.
+   * See https://storybook.js.org/docs/react/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
+  title: 'Button',
   component: Button,
 };
 
-export const Large = {
-  parameters: {
-    backgrounds: { disable: true },
-  },
+const Template = (args) => ({
+  //👇 Your template goes here
+});
+
+export const Large = Template.bind({});
+Large.parameters = {
+  backgrounds: { disable: true },
 };
-```
+```

docs/snippets/common/storybook-addon-backgrounds-disable-backgrounds.mdx.mdx

@@ -7,7 +7,10 @@ import { Button } from './Button';
 
 <Meta title="Button" component={Button} />
 
-<!-- Render functions are a framework specific feature to allow you control on how the component renders -->
+export const Template = (args) => ({
+   //👇 Your template goes here
+});
+
 
 <Story
   name="Large"
@@ -15,7 +18,7 @@ import { Button } from './Button';
     backgrounds: {
       disable: true,
     },
-  }}
-  render={() => ({ })}>
+  }}>
+  {Template.bind({})}
 </Story>
 ```

docs/snippets/common/storybook-addon-backgrounds-disable-grid.js.mdx

@@ -1,19 +1,27 @@
 ```js
-// Button.stories.js | Button.stories.jsx | Button.stories.ts | Button.stories.tsx
+// Button.stories.js|jsx|ts|tsx
 
 import { Button } from './Button';
 
 export default {
+  /* 👇 The title prop is optional.
+   * See https://storybook.js.org/docs/react/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
+  title: 'Button',
   component: Button,
 };
 
-export const Large = {
-  parameters: {
-    backgrounds: {
-      grid: {
-        disable: true,
-      },
-    },
-  },
+const Template = (args) => ({
+  //👇 Your template goes here
+});
+
+export const Large = Template.bind({});
+Large.parameters = {
+  backgrounds: {
+    grid: {
+      disable: true,
+    }
+  }
 };
-```
+```

docs/snippets/common/storybook-addon-backgrounds-override-background-color.js.mdx

@@ -1,15 +1,23 @@
 ```js
-// Button.stories.js | Button.stories.jsx |  Button.stories.ts | Button.stories.tsx
+// Button.stories.js|jsx|ts|tsx
 
 import { Button } from './Button';
 
 export default {
+  /* 👇 The title prop is optional.
+   * See https://storybook.js.org/docs/react/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
+   title: 'Button',
   component: Button,
 };
 
-export const Large = {
-  parameters: {
-    backgrounds: { default: 'facebook' },
-  },
+const Template = (args) => ({
+  //👇 Your template goes here
+});
+
+export const Large = Template.bind({});
+Large.parameters = {
+  backgrounds: { default: 'facebook' },
 };
 ```

docs/snippets/common/storybook-addon-backgrounds-override-background-color.mdx.mdx

@@ -7,7 +7,10 @@ import { Button } from './Button';
 
 <Meta title="Button" component={Button} />
 
-<!-- Render functions are a framework specific feature to allow you control on how the component renders -->
+export const Template = (args) => ({
+   //👇 Your template goes here
+});
+
 
 <Story
   name="Large"
@@ -15,7 +18,7 @@ import { Button } from './Button';
     backgrounds: {
       default: 'facebook',
     },
-  }}
-  render={() => ({ })}>
+  }}>
+  {Template.bind({})}
 </Story>
 ```

docs/snippets/common/storybook-preview-matching-argtypes.js.mdx

@@ -0,0 +1,7 @@
+```js
+// .storybook/preview.js
+
+export const parameters = {
+  actions: { argTypesRegex: '^on.*' }
+}
+```

docs/snippets/common/storybook-preview-parameters-color-swatches.js.mdx

@@ -0,0 +1,9 @@
+```js
+// .storybook/preview.js
+
+export const parameters = {
+  controls: {
+    presetColors: [{ color: '#ff4785', title: 'Coral' }, 'rgba(0, 159, 183, 1)', '#fe4a49'],
+  },
+};
+```

docs/snippets/react/component-story-custom-args-complex.js.mdx

@@ -1,11 +1,16 @@
 ```js
-// YourComponent.stories.js | YourComponent.stories.jsx
+// YourComponent.stories.js|jsx
 
 import React from 'react';
 
 import { YourComponent } from './your-component';
 
 export default {
+  /* 👇 The title prop is optional.
+   * See https://storybook.js.org/docs/angular/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
+  title: 'YourComponent',
   component: YourComponent,
   //👇 Creates specific argTypes with options
   argTypes: {
@@ -24,17 +29,16 @@ const someFunction = (valuePropertyA, valuePropertyB) => {
   // Makes some computations and returns something
 };
 
-export const ExampleStory = {
-  args: {
-    propertyA: 'Something',
-    propertyB: 'Something else',
-  },
-  render: (args) => {
-    const { propertyA, propertyB } = args;
-    //👇 Assigns the function result to a variable
-    const someFunctionResult = someFunction(propertyA, propertyB);
+const Template = ({ propertyA, propertyB, ...rest }) => {
+  //👇 Assigns the function result to a variable
+  const someFunctionResult = someFunction(propertyA, propertyB);
 
-    return <YourComponent {...args} someProperty={someFunctionResult} />;
-  },
+  return <YourComponent someProperty={someFunctionResult} {...rest} />;
 };
-```
+
+export const ExampleStory = Template.bind({});
+ExampleStory.args= {
+  propertyA: 'Item One',
+  propertyB: 'Another Item One',
+};
+```

docs/snippets/react/component-story-custom-args-complex.mdx.mdx

@@ -1,24 +1,24 @@
 ```md
 <!--- YourComponent.stories.mdx -->
 
-import { Meta, Story, Canvas } from '@storybook/addon-docs';
+import { Canvas, Meta, Story } from '@storybook/addon-docs';
 
 import { YourComponent } from './your-component';
 
-<Meta title="Example of how to use argTypes and functions" component={YourComponent} />
-
-<!-- Render functions are a framework specific feature to allow you control on how the component renders -->
-
+<Meta title="YourComponent" component={YourComponent} />
 
 <!---👇 A function to apply some computations -->
 
 export const someFunction = (valuePropertyA, valuePropertyB) => {
-
-  <!--- Makes some computations and returns something -->
-
+  // Makes some computations and returns something
 };
 
-<!---👇 Assigns the function result to a variable -->
+export const Template = ({propertyA,propertyB,...rest})=>{
+  //👇 Assigns the function result to a variable
+
+const someFunctionResult = someFunction(propertyA, propertyB);
+  return <YourComponent someProperty={someFunctionResult} {...rest} />;
+}
 
 <Canvas>
   <Story
@@ -42,11 +42,8 @@ export const someFunction = (valuePropertyA, valuePropertyB) => {
     args={{
       propertyA: 'Item One',
       propertyB: 'Another Item One',
-    }}
-    render={(args) => {
-      const { propertyA, propertyB } = args;
-      const someFunctionResult = someFunction(propertyA, propertyB);
-      return <YourComponent {...args} someProperty={someFunctionResult} />;
-    }} />
+    }}>
+    {Template.bind({})}
+  </Story>
 </Canvas>
-```
+```

docs/snippets/react/component-story-custom-args-complex.ts.mdx

@@ -1,11 +1,11 @@
 ```ts
-// YourComponent.stories.ts | YourComponent.stories.tsx
+// YourComponent.stories.ts|tsx
 
 import React from 'react';
 
-import { Story, Meta } from '@storybook/react';
+import { ComponentStory, ComponentMeta } from '@storybook/react';
 
-import { YourComponent, YourComponentProps } from './your-component';
+import { YourComponent } from './your-component';
 
 //👇 Some function to demonstrate the behavior
 const someFunction = (valuePropertyA, valuePropertyB) => {
@@ -13,8 +13,11 @@ const someFunction = (valuePropertyA, valuePropertyB) => {
 };
 
 export default {
-  component: YourComponent,
-  title: 'A complex case with a function',
+  /* 👇 The title prop is optional.
+   * See https://storybook.js.org/docs/react/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
+  title: 'YourComponent',
   //👇 Creates specific argTypes with options
   argTypes: {
     propertyA: {
@@ -25,12 +28,18 @@ export default {
       options: ['Another Item One', 'Another Item Two', 'Another Item Three'],
     },
   },
-} as Meta;
+} as ComponentMeta<typeof YourComponent>;
 
-const Template: Story<YourComponentProps> = ({ propertyA, propertyB, ...rest }) => {
+const Template: ComponentStory<typeof YourComponent> = ({ propertyA, propertyB, ...rest }) => {
   //👇 Assigns the result from the function to a variable
   const someFunctionResult = someFunction(propertyA, propertyB);
 
   return <YourComponent someProperty={someFunctionResult} {...rest} />;
 };
+
+export const ExampleStory = Template.bind({});
+ExampleStory.args= {
+  propertyA: 'Item One',
+  propertyB: 'Another Item One',
+};
 ```

docs/snippets/react/my-component-story-configure-viewports.js.mdx

@@ -1,5 +1,5 @@
 ```js
-// MyComponent.stories.js | MyComponent.stories.ts | MyComponent.stories.jsx | MyComponent.stories.tsx
+// MyComponent.stories.js|jsx
 
 import React from 'react';
 
@@ -8,6 +8,11 @@ import { INITIAL_VIEWPORTS } from '@storybook/addon-viewport';
 import { MyComponent } from './MyComponent';
 
 export default {
+  /* 👇 The title prop is optional.
+   * See https://storybook.js.org/docs/react/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
+  title: 'MyComponent',
   component: MyComponent,
   parameters: {
     //👇 The viewports object from the Essentials addon
@@ -20,11 +25,10 @@ export default {
   },
 };
 
-export const MyStory = {
-  parameters: {
-    viewport: {
-      defaultViewport: 'iphonex',
-    },
+export const MyStory = () => <MyComponent />;
+MyStory.parameters = {
+  viewport: {
+    defaultViewport: 'iphonex',
   },
 };
-```
+```

docs/snippets/react/my-component-story-configure-viewports.mdx.mdx

@@ -18,14 +18,13 @@ import { MyComponent } from './MyComponent';
   component={MyComponent}
 />
 
-<!-- Render functions are a framework specific feature to allow you control on how the component renders -->
-
 <Story
   name="MyStory"
   parameters={{
     viewport: {
       defaultViewport: 'iphonex',
     },
-  }}
-  render={() => <MyComponent />} />
+  }}>
+  <MyComponent />
+</Story>
 ```

docs/snippets/react/my-component-story-configure-viewports.ts.mdx

@@ -0,0 +1,36 @@
+```ts
+// MyComponent.stories.ts|tsx
+
+import React from 'react';
+
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+
+import { INITIAL_VIEWPORTS } from '@storybook/addon-viewport';
+
+import { MyComponent } from './MyComponent';
+
+export default {
+  /* 👇 The title prop is optional.
+   * See https://storybook.js.org/docs/react/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
+  title: 'MyComponent',
+  component: MyComponent,
+  parameters: {
+    //👇 The viewports object from the Essentials addon
+    viewport: {
+      //👇 The viewports you want to use
+      viewports: INITIAL_VIEWPORTS,
+      //👇 Your own default viewport
+      defaultViewport: 'iphone6',
+    },
+  },
+} as ComponentMeta<typeof MyComponent>;
+
+export const MyStory: ComponentStory<typeof MyComponent> = () => <MyComponent />;
+MyStory.parameters = {
+  viewport: {
+    defaultViewport: 'iphonex',
+  },
+};
+```

docs/snippets/react/my-component-story-use-globaltype-backwards-compat.js.mdx

@@ -1,8 +1,8 @@
 ```js
-// MyComponent.stories.js | MyComponent.stories.jsx | MyComponent.stories.ts | MyComponent.stories.tsx
+// MyComponent.stories.js|jsx|ts|tsx
 
 export const StoryWithLocale = ({ globals: { locale } }) => {
   const caption = getCaptionForLocale(locale);
   return <>{caption}</>;
 };
-```
+```

docs/snippets/react/my-component-story-use-globaltype.js.mdx

@@ -1,11 +1,16 @@
 ```js
-// MyComponent.stories.js | MyComponent.stories.jsx | MyComponent.stories.ts | MyComponent.stories.tsx
+// MyComponent.stories.js|jsx|ts|tsx
 
 import React from 'react';
 
 import { MyComponent } from './MyComponent';
 
 export default {
+    /* 👇 The title prop is optional.
+   * See https://storybook.js.org/docs/react/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
+  title: 'MyComponent',
   component: MyComponent,
 };
 
@@ -24,10 +29,8 @@ const getCaptionForLocale = (locale) => {
   }
 };
 
-export const StoryWithLocale = {
-  render: (args, { globals: { locale } }) => {
-    const caption = getCaptionForLocale(locale);
-    return <>{caption}</>;
-  },
+export const StoryWithLocale = (args, { globals: { locale } }) => {
+  const caption = getCaptionForLocale(locale);
+  return <>{caption}</>;
 };
-```
+```

docs/snippets/react/my-component-story-use-globaltype.mdx.mdx

@@ -5,7 +5,7 @@ import { Meta, Story } from '@storybook/addon-docs';
 
 import { MyComponent } from './MyComponent';
 
-<Meta title="MDX Story with toolbars" component={MyComponent} />
+<Meta title="MyComponent" component={MyComponent} />
 
 export const getCaptionForLocale = (locale) => {
   switch(locale) {
@@ -18,12 +18,10 @@ export const getCaptionForLocale = (locale) => {
   }
 };
 
-<!-- Render functions are a framework specific feature to allow you control on how the component renders -->
-
-<Story 
-  name="StoryWithLocale"
-  render={(args, { globals: { locale } }) => {
+<Story name="StoryWithLocale">
+  {(args, { globals: { locale } }) => {
     const caption = getCaptionForLocale(locale);
     return <>{caption}</>;
-  }} />
+  }}
+</Story>
 ```

docs/snippets/react/table-story-fully-customize-controls.js.mdx

@@ -1,5 +1,5 @@
 ```js
-// Table.stories.js | Table.stories.jsx
+// Table.stories.js|jsx!ts!tsx
 
 import React from 'react';
 
@@ -8,29 +8,31 @@ import { TD } from './TableDataCell';
 import { TR } from './TableRow';
 
 export default {
+  /* 👇 The title prop is optional.
+   * See https://storybook.js.org/docs/react/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
+  title: 'Custom Table',
   component: Table,
 };
 
-export const TableStory = {
-  args: {
-    //👇 This arg is for the story component
-    data: [
-      [1, 2, 3],
-      [4, 5, 6],
-    ],
-    //👇 The remaining args get passed to the `Table` component
-    size: 'large',
-  },
-  render: ({ data, ...args }) => (
-    <Table {...args}>
-      {data.map((row) => (
-        <TR>
-          {row.map((item) => (
-            <TD>{item}</TD>
-          ))}
-        </TR>
-      ))}
-    </Table>
-  ),
+const TableStory = ({ data, ...args}) => (
+  <Table {...args}>
+    {data.map((row) => (
+      <TR>
+        {row.map((item) => (
+          <TD>{item}</TD>
+        ))}
+      </TR>
+    ))}
+  </Table>
+);
+
+export const Numeric = TableStory.bind({});
+Numeric.args = {
+  //👇 This arg is for the story component
+  data: [[1, 2, 3], [4, 5, 6]],
+  //👇 The remaining args get passed to the `Table` component
+  size: 'large',
 };
-```
+```

docs/snippets/react/table-story-fully-customize-controls.mdx.mdx

@@ -7,17 +7,18 @@ import { Table } from './Table';
 
 <Meta title="Custom Table" component={Table} />
 
-<!-- Render functions are a framework specific feature to allow you control on how the component renders -->
+export const TableStory = ({ data, ...args }) => (
+  <Table {...args} >
+    {data.map(row => (<TR>{row.map(item => <TD>{item}</TD>}</TR>))}
+  </Table>
+);
 
 <Story
   name="Numeric"
   args={{
     data: [[1, 2, 3], [4, 5, 6]],
     size: 'large',
-  }}
-  render={({ data, ...args }) => (
-    <Table {...args} >
-      {data.map(row => (<TR>{row.map(item => <TD>{item}</TD>}</TR>))}
-    </Table>
-  )} />
+  }}>
+  {TableStory.bind({})}
+</Story>
 ```

docs/snippets/svelte/component-story-custom-args-complex.js.mdx

@@ -4,6 +4,11 @@
 import YourComponent from './YourComponent.svelte';
 
 export default {
+   /* 👇 The title prop is optional.
+   * See https://storybook.js.org/docs/svelte/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
+  title: 'YourComponent',
   component: YourComponent,
   //👇 Creates specific argTypes
   argTypes: {
@@ -22,22 +27,23 @@ const someFunction = (valuePropertyA, valuePropertyB) => {
   // Makes some computations and returns something
 };
 
-export const ExampleStory = {
-  args: {
-    propertyA: 'Something',
-    propertyB: 'Something else',
-  },
-  render: (args) => {
-    const { propertyA, propertyB } = args;
-    //👇 Assigns the function result to a variable
-    const someFunctionResult = someFunction(propertyA, propertyB);
-    return {
-      Component: YourComponent,
-      props: {
-        ...args,
-        someProperty: someFunctionResult,
-      },
-    };
-  },
+const Template = (args) => {
+  const { propertyA, propertyB } = args;
+  
+  //👇 Assigns the function result to a variable
+  const someFunctionResult = someFunction(propertyA, propertyB);
+  return {
+    Component: YourComponent,
+    props: {
+      ...args,
+      someProperty: someFunctionResult,
+    },
+  };
 };
-```
+
+export const ExampleStory = Template.bind({});
+ExampleStory.args= {
+  propertyA: 'Item One',
+  propertyB: 'Another Item One',
+};
+```

docs/snippets/svelte/my-component-story-configure-viewports.js.mdx

@@ -6,6 +6,11 @@ import { INITIAL_VIEWPORTS } from '@storybook/addon-viewport';
 import MyComponent from './MyComponent.svelte';
 
 export default {
+   /* 👇 The title prop is optional.
+   * See https://storybook.js.org/docs/svelte/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
+  title: 'MyComponent',
   component: MyComponent,
   parameters: {
     //👇 The viewports object from the Essentials addon
@@ -18,14 +23,12 @@ export default {
   },
 };
 
-export const MyStory = {
-  render: () => ({
-    Component: MyComponent,
-  }),
-  parameters: {
-    viewport: {
-      defaultViewport: 'iphonex',
-    },
+export const MyStory = () => ({
+  Component: MyComponent,
+});
+MyStory.parameters = {
+  viewport: {
+    defaultViewport: 'iphonex',
   },
 };
-```
+```

docs/snippets/svelte/my-component-story-configure-viewports.mdx.mdx

@@ -8,7 +8,7 @@ import { INITIAL_VIEWPORTS } from '@storybook/addon-viewport';
 import MyComponent from './MyComponent.svelte';
 
 <Meta
-  title="Stories"
+  title="MyComponent"
   parameters={{
     viewport: {
       viewports: INITIAL_VIEWPORTS,
@@ -17,16 +17,17 @@ import MyComponent from './MyComponent.svelte';
   }}
   component={MyComponent} />
 
-<!-- Render functions are a framework specific feature to allow you control on how the component renders -->
-
 <Story
   name="MyStory"
   parameters={{
     viewport: {
       defaultViewport: 'iphonex',
     }
+  }}>
+   {() => {
+    return {
+      Component: MyComponent,
+    };
   }}
-  render={() => ({
-    Component: MyComponent,
-  })} />
+</Story>
 ```

docs/snippets/svelte/my-component-story-configure-viewports.native-format.mdx

@@ -10,7 +10,7 @@
 </script>
 
 <Meta
-  title="Stories"
+  title="MyComponent"
   component={MyComponent}
   parameters={{
     //👇 The viewports object from the Essentials addon
@@ -28,7 +28,7 @@
 </Template>
 
 <Story
-  name="ExampleStory"
+  name="MyStory"
   parameters={{
     viewport: {
       defaultViewport: 'iphonex',

docs/snippets/svelte/my-component-story-use-globaltype-backwards-compat.js.mdx

@@ -4,10 +4,10 @@
 export const StoryWithLocale = ({ globals: { locale } }) => {
   const caption = getCaptionForLocale(locale);
   return {
-    component: SampleComponent,
+    component: MyComponent,
     props: {
       locale: caption,
     },
   };
 };
-```
+```

docs/snippets/svelte/my-component-story-use-globaltype.js.mdx

@@ -4,6 +4,11 @@
 import MyComponent from './MyComponent.svelte';
 
 export default {
+  /* 👇 The title prop is optional.
+   * See https://storybook.js.org/docs/svelte/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
+  title: 'MyComponent',
   component: MyComponent,
 };
 
@@ -22,15 +27,13 @@ const getCaptionForLocale = (locale) => {
   }
 };
 
-export const StoryWithLocale = {
-  render: (args, { globals: { locale } }) => {
-    const caption = getCaptionForLocale(locale);
-    return {
-      component: MyComponent,
-      props: {
-        locale: caption,
-      },
-    };
-  },
+export const StoryWithLocale = (args, { globals: { locale } }) => {
+  const caption = getCaptionForLocale(locale);
+  return {
+    component: SampleComponent,
+    props: {
+      locale: caption,
+    },
+  };
 };
 ```

docs/snippets/svelte/my-component-story-use-globaltype.mdx.mdx

@@ -5,7 +5,7 @@ import { Meta, Story } from '@storybook/addon-docs';
 
 import MyComponent from './MyComponent.svelte';
 
-<Meta title="MDX Story with toolbars" component={MyComponent} />
+<Meta title="MyComponent" component={MyComponent} />
 
 export const getCaptionForLocale = (locale) => {
   switch(locale) {
@@ -18,10 +18,8 @@ export const getCaptionForLocale = (locale) => {
   }
 };
 
-<!-- Render functions are a framework specific feature to allow you control on how the component renders -->
-
-<Story name="StoryWithLocale"
-  render={(args, { globals: { locale } }) => {
+<Story name="StoryWithLocale">
+  {(args, { globals: { locale } }) => {
     const caption = getCaptionForLocale(locale);
     return {
       component: MyComponent,
@@ -29,5 +27,6 @@ export const getCaptionForLocale = (locale) => {
         locale: caption,
       },
     };
-  }} />
+  }}
+</Story>
 ```

docs/snippets/svelte/table-story-fully-customize-controls.native-format.mdx

@@ -8,7 +8,7 @@
 </script>
 
 <Meta
-  title="Table"
+  title="Custom Table"
   component={Table}
   argTypes={{
     size: {

docs/snippets/vue/component-story-custom-args-complex.3.js.mdx

@@ -4,6 +4,11 @@
 import YourComponent from './YourComponent.vue';
 
 export default {
+  /* 👇 The title prop is optional.
+   * See https://storybook.js.org/docs/vue/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
+  title: 'YourComponent',
   component: YourComponent,
   //👇 Creates specific argTypes with options
   argTypes: {
@@ -22,27 +27,28 @@ const someFunction = (valuePropertyA, valuePropertyB) => {
   // Makes some computations and returns something
 };
 
-export const ExampleStory = {
-  args: {
-    propertyA: 'Something',
-    propertyB: 'Something else',
-  },
-  render: (args) => {
-    const { propertyA, propertyB } = args;
-    //👇 Assigns the function result to a variable
-    const functionResult = someFunction(propertyA, propertyB);
-    return {
-      components: { YourComponent },
-      setup() {
-        return {
+const Template = (args) => {
+  //👇 Assigns the function result to a variable
+  const functionResult = someFunction(args.propertyA, args.propertyB);
+  return {
+    components: { YourComponent },
+    setup() {
+      //👇 The args will now be passed down to the template
+      return {
+        args: {
           ...args,
           //👇 Replaces arg variable with the override (without the need of mutation)
           someProperty: functionResult,
-        };
-      },
-      template:
-        '<YourComponent :propertyA="propertyA" :propertyB="propertyB" :someProperty="someProperty"/>',
-    };
-  },
+        },
+      };
+    },
+    template:  '<YourComponent :propertyA="propertyA" :propertyB="propertyB" :someProperty="someProperty"/>',
+  };
 };
-```
+
+export const ExampleStory = Template.bind({});
+ExampleStory.args= {
+  propertyA: 'Item One',
+  propertyB: 'Another Item One',
+};
+```

docs/snippets/vue/component-story-custom-args-complex.mdx-3.mdx.mdx

@@ -1,25 +1,42 @@
 ```md
 <!--- YourComponent.stories.mdx -->
 
-import { Meta, Story, Canvas } from '@storybook/addon-docs';
+import { Canvas, Meta, Story } from '@storybook/addon-docs';
 
 import YourComponent from './YourComponent.vue';
 
-<Meta title="Example of how to use argTypes and functions" component={YourComponent}/>
+<Meta title="YourComponent" component={YourComponent}/>
 
 <!---👇 A function to apply some computations -->
 
 export const someFunction = (valuePropertyA, valuePropertyB) => {
 
-  <!--- Makes some computations and returns something -->
+  // Makes some computations and returns something 
 
 };
 
-<!-- Render functions are a framework specific feature to allow you control on how the component renders -->
+export const Template = (args) => {
+  //👇 Assigns the function result to a variable
+  const functionResult = someFunction(args.propertyA, args.propertyB);
+  return {
+    components: { YourComponent },
+    setup() {
+      //👇 The args will now be passed down to the template
+      return {
+        args: {
+          ...args,
+          //👇 Replaces arg variable with the override (without the need of mutation)
+          someProperty: functionResult,
+        },
+      };
+    },
+    template:  '<YourComponent :propertyA="propertyA" :propertyB="propertyB" :someProperty="someProperty"/>',
+  };
+};
 
 <Canvas>
   <Story
-    name="A complex case with a function"
+    name="ExampleStory"
     argTypes={{
       propertyA: {
         options: [
@@ -39,22 +56,8 @@ export const someFunction = (valuePropertyA, valuePropertyB) => {
     args={{
       propertyA: 'Item One',
       propertyB: 'Another Item One',
-    }}
-    render={(args) => {
-      const { propertyA, propertyB } = args;
-      const functionResult = someFunction(propertyA, propertyB);
-      return {
-        components: { YourComponent },
-        setup() {
-          return {
-            args: {
-              ...args,
-              someProperty: functionResult,
-            },
-          };
-        },
-        template: '<YourComponent v-bind="args" />',
-      };
-    }} />
+    }}>
+    {Template.bind({})}
+  </Story>
 </Canvas>
 ```

docs/snippets/vue/my-component-story-configure-viewports.js.mdx

@@ -6,6 +6,11 @@ import { INITIAL_VIEWPORTS } from '@storybook/addon-viewport';
 import MyComponent from './MyComponent.vue';
 
 export default {
+  /* 👇 The title prop is optional.
+   * See https://storybook.js.org/docs/vue/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
+  title: 'MyComponent',
   component: MyComponent,
   parameters: {
     //👇 The viewports object from the Essentials addon
@@ -19,15 +24,13 @@ export default {
   },
 };
 
-export const MyStory = {
-  parameters: {
-    viewport: {
-      defaultViewport: 'iphonex',
-    },
+export const MyStory = () => ({
+  components: { MyComponent },
+  template: '<MyComponent />',
+});
+MyStory.parameters = {
+  viewport: {
+    defaultViewport: 'iphonex'
   },
-  render: () => ({
-    components: { MyComponent },
-    template: '<MyComponent />',
-  }),
 };
-```
+```

docs/snippets/vue/my-component-story-configure-viewports.mdx.mdx

@@ -7,10 +7,8 @@ import { INITIAL_VIEWPORTS } from '@storybook/addon-viewport';
 
 import MyComponent from './MyComponent.vue';
 
-<!-- Render functions are a framework specific feature to allow you control on how the component renders -->
-
 <Meta
-  title="Stories"
+  title="MyComponent"
   parameters={{
     viewport: {
       viewports: INITIAL_VIEWPORTS,
@@ -26,9 +24,11 @@ import MyComponent from './MyComponent.vue';
     viewport: {
       defaultViewport: 'iphonex',
     }
+  }}>
+  {() => {
+    return {
+      template: `<MyComponent />`,
+    };
   }}
-  render={() => ({
-    components: { MyComponent },
-    template: '<MyComponent />',
-  })} />
+</Story>
 ```

docs/snippets/vue/my-component-story-use-globaltype.js.mdx

@@ -4,6 +4,11 @@
 import MyComponent from './MyComponent.vue';
 
 export default {
+  /* 👇 The title prop is optional.
+   * See https://storybook.js.org/docs/vue/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
+  title: 'MyComponent',
   component: MyComponent,
 };
 
@@ -22,12 +27,10 @@ const getCaptionForLocale = (locale) => {
   }
 };
 
-export const StoryWithLocale = {
-  render: (args, { globals: { locale } }) => {
-    const caption = getCaptionForLocale(locale);
-    return {
-      template: `<p>${caption}</p>`,
-    };
-  },
+export const StoryWithLocale = (args, { globals: { locale } }) => {
+  const caption = getCaptionForLocale(locale);
+  return {
+    template: `<p>${caption}</p>`,
+  };
 };
-```
+```

docs/snippets/vue/my-component-story-use-globaltype.mdx.mdx

@@ -5,7 +5,7 @@ import { Meta, Story } from '@storybook/addon-docs';
 
 import MyComponent from './MyComponent.vue';
 
-<Meta title="MDX Story with toolbars" component={MyComponent} />
+<Meta title="MyComponent" component={MyComponent} />
 
 export const getCaptionForLocale = (locale) => {
   switch(locale) {
@@ -18,14 +18,12 @@ export const getCaptionForLocale = (locale) => {
   }
 };
 
-<!-- Render functions are a framework specific feature to allow you control on how the component renders -->
-
-<Story 
-  name="StoryWithLocale"
-  render={(args, { globals: { locale } }) => {
+<Story name="StoryWithLocale">
+  {(args, { globals: { locale } }) => {
     const caption = getCaptionForLocale(locale);
     return {
       template: `<p>${caption}</p>`,
     };
-  }} />
+  }}
+</Story>
 ```

docs/snippets/vue/table-story-fully-customize-controls.2.js.mdx

@@ -4,31 +4,35 @@
 import Table from './Table.vue';
 
 export default {
+   /* 👇 The title prop is optional.
+   * See https://storybook.js.org/docs/vue/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
+  title: 'Custom Table',
   component: Table,
 };
 
-export const TableStory = {
-  args: {
-    //👇 This arg is for the story component
-    data: [
-      [1, 2, 3],
-      [4, 5, 6],
-    ],
-    //👇 The remaining args get passed to the `Table` component
-    size: 'large',
-  },
-  render: (args, { argTypes }) => ({
-    components: { Table },
-    props: Object.keys(argTypes),
-    template: `
-      <Table v-bind="$props">
-        <tr v-for="(row, idx1) in data">
-          <td v-for="(col, idx2) in row">
-            {{ data[idx1][idx2] }}
-          </td>
-        </tr>
-    </Table>
-    `,
-  }),
+const TableStory = (args, { argTypes }) => ({
+  components: { Table },
+  props: Object.keys(argTypes),
+  template: `
+    <Table v-bind="$props">
+      <tr v-for="(row, idx1) in data">
+        <td v-for="(col, idx2) in row">
+          {{ data[idx1][idx2] }}
+        </td>
+      </tr>
+    </Table>`,
+});
+
+export const Numeric = TableStory.bind({});
+Numeric.args = {
+  //👇 This arg is for the story component
+  data: [
+    [1, 2, 3],
+    [4, 5, 6],
+  ],
+  //👇 The remaining args get passed to the `Table` component
+  size: 'large',
 };
-```
+```

docs/snippets/vue/table-story-fully-customize-controls.3.js.mdx

@@ -1,35 +1,41 @@
 ```js
 // Table.stories.js
+
 import Table from './Table.vue';
 
 export default {
+   /* 👇 The title prop is optional.
+   * See https://storybook.js.org/docs/vue/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
+  title: 'Custom Table',
   component: Table,
 };
 
-export const TableStory = {
-  args: {
-    //👇 This arg is for the story component
-    data: [
-      [1, 2, 3],
-      [4, 5, 6],
-    ],
-    //👇 The remaining args get passed to the `Table` component
-    size: 'large',
+const TableStory = (args) => ({
+  components: { Table },
+  setup() {
+    return { args };
   },
-  render: (args) => ({
-    components: { Table },
-    setup() {
-      return { args };
-    },
-    template: `
-      <Table v-bind="args">
-        <tr v-for="(row, idx1) in data">
-          <td v-for="(col, idx2) in row">
-            {{ data[idx1][idx2] }}
-          </td>
-        </tr>
-      </Table>
+  template: `
+    <Table v-bind="args">
+      <tr v-for="(row, idx1) in data">
+        <td v-for="(col, idx2) in row">
+          {{ data[idx1][idx2] }}
+        </td>
+      </tr>
+    </Table>
   `,
-  }),
+});
+
+export const Numeric = TableStory.bind({});
+Numeric.args = {
+  //👇 This arg is for the story component
+  data: [
+    [1, 2, 3],
+    [4, 5, 6],
+  ],
+  //👇 The remaining args get passed to the `Table` component
+  size: 'large',
 };
-```
+```

docs/snippets/vue/table-story-fully-customize-controls.mdx-2.mdx.mdx

@@ -7,7 +7,18 @@ import Table from './Table.vue';
 
 <Meta title="Custom Table" component={Table} />
 
-<!-- Render functions are a framework specific feature to allow you control on how the component renders -->
+export const TableStory = (args, { argTypes }) => ({
+  components: { Table },
+  props: Object.keys(argTypes),
+  template: `
+    <Table v-bind="$props">
+      <tr v-for="(row, idx1) in data">
+        <td v-for="(col, idx2) in row">
+          {{ data[idx1][idx2] }}
+        </td>
+      </tr>
+    </Table>`,
+});
 
 <Story
   name="Numeric"
@@ -17,17 +28,7 @@ import Table from './Table.vue';
       [4, 5, 6],
     ],
     size: 'large',
-  }}
-  render={(args, { argTypes }) =>({
-    components: { Table },
-    props: Object.keys(argTypes),
-    template: `
-      <Table v-bind="$props">
-        <tr v-for="(row, idx1) in data">
-          <td v-for="(col, idx2) in row">
-            {{ data[idx1][idx2] }}
-          </td>
-        </tr>
-      </Table>`,
-  })} />
+  }}>
+  {TableStory.bind({})}
+</Story>
 ```

docs/snippets/vue/table-story-fully-customize-controls.mdx-3.mdx.mdx

@@ -7,7 +7,20 @@ import Table from './Table.vue';
 
 <Meta title="Custom Table" component={Table} />
 
-<!-- Render functions are a framework specific feature to allow you control on how the component renders -->
+export const TableStory = (args) => ({
+  components: { Table },
+  setup() {
+    return { args };
+  },
+  template: `
+    <Table v-bind="args">
+      <tr v-for="(row, idx1) in data">
+        <td v-for="(col, idx2) in row">
+          {{ data[idx1][idx2] }}
+        </td>
+      </tr>
+    </Table>`,
+});
 
 <Story
   name="Numeric"
@@ -17,19 +30,7 @@ import Table from './Table.vue';
       [4, 5, 6],
     ],
     size: 'large',
-  }}
-  render={(args) => ({
-    components: { Table },
-    setup() {
-      return { args };
-    },
-    template: `
-      <Table v-bind="args">
-        <tr v-for="(row, idx1) in data">
-          <td v-for="(col, idx2) in row">
-            {{ data[idx1][idx2] }}
-          </td>
-        </tr>
-      </Table>`,
-  })} />
+  }}>
+  {TableStory.bind({})}
+</Story>
 ```