Merge pull request #16595 from storybookjs/docs_fix_get_started_for_6_4

Chore: (Docs) Minor tweaks to the get started section for 6.4

docs/get-started/setup.md

@@ -63,14 +63,20 @@ If a particular story has a problem rendering, often it means your component exp
 
 A common frontend pattern is for components to assume that they render in a specific “context” with parent components higher up the rendering hierarchy (for instance, theme providers).
 
-Use [decorators](../writing-stories/decorators.md) to “wrap” every story in the necessary context providers. The [`.storybook/preview.js`](../configure/overview.md#configure-story-rendering) file allows you to customize how components render in Canvas, the preview iframe. In this decorator example, we wrap every component rendered in Storybook with `ThemeProvider`.
+Use [decorators](../writing-stories/decorators.md) to “wrap” every story in the necessary context providers. The [`.storybook/preview.js`](../configure/overview.md#configure-story-rendering) file allows you to customize how components render in Canvas, the preview iframe. See how you can wrap every component rendered in Storybook with [Styled Components](https://styled-components.com/) `ThemeProvider`, [Vue's Fortawesome](https://github.com/FortAwesome/vue-fontawesome), or with an Angular theme provider component in the example below.
 
 <!-- prettier-ignore-start -->
 
 <CodeSnippets
   paths={[
     'react/storybook-preview-with-styled-components-decorator.js.mdx',
-    'vue/storybook-preview-with-styled-components-decorator.js.mdx',
+    'react/storybook-preview-with-styled-components-decorator.story-function.js.mdx',
+    'vue/storybook-preview-with-library-decorator.2-library.js.mdx',
+    'vue/storybook-preview-with-library-decorator.3-library.js.mdx',
+    'vue/storybook-preview-with-hoc-component-decorator.2-component.js.mdx',
+    'vue/storybook-preview-with-hoc-component-decorator.3-component.js.mdx',
+    'vue/storybook-preview-with-mixin-decorator.2-mixin.js.mdx',
+    'vue/storybook-preview-with-mixin-decorator.3-mixin.js.mdx',
     'angular/storybook-preview-with-styled-components-decorator.ts.mdx'
   ]}
 />

docs/snippets/angular/button-story.mdx.mdx

@@ -5,18 +5,16 @@ import { Meta, Story } from '@storybook/addon-docs';
 
 import { Button } from './button.component.ts';
 
-<Meta title="Components/Button" component={Button} />
-
-<!-- Render functions are a framework specific feature to allow you control on how the component renders -->
+<Meta title="Button" component={Button} />
 
 # Button
 
-<Story 
-  name="Primary"
-  render={() => ({
+<Story name="Primary">
+  {{
     props: {
       primary: true,
       label: 'Button',
     },
-  })} />
+  }}
+</Story>
 ```

docs/snippets/angular/your-component.mdx.mdx

@@ -8,14 +8,13 @@ import { YourComponent } from './your.component';
 <!--👇 The title prop determines where your story goes in the story list -->
 <Meta title="YourComponent" component={YourComponent} />
 
-<!-- Render functions are a framework specific feature to allow you control on how the component renders -->
-
+<!--👇 We create a “template” of how args map to rendering --> 
+export const Template = (args) => ({ props: args });
 
 <!-- 👇 The args you need here will depend on your component -->
 <Story
   name="FirstStory"
-  args={{}}
-  render={(args) => ({
-    props: args,
-  })} />
+  args={{}}>
+  {Template.bind({})}
+</Story>
 ```

docs/snippets/angular/your-component.ts.mdx

@@ -1,16 +1,28 @@
 ```ts
 // YourComponent.stories.ts
 
+import { Meta, Story } from '@storybook/angular';
+
+
 import { YourComponent } from './your.component';
 
 //👇 This default export determines where your story goes in the story list
 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,
-};
+} as Meta;
 
-export const FirstStory = {
-  args: {
-    //👇 The args you need here will depend on your component
-  },
+//👇 We create a “template” of how args map to rendering
+const Template: Story = (args) => ({
+  props:args,
+});
+
+export const FirstStory = Template.bind({});
+FirstStory.args= {
+ //👇 The args you need here will depend on your component
 };
-```
+```

docs/snippets/react/button-story.mdx.mdx

@@ -5,13 +5,11 @@ 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 -->
+<Meta title="Button" component={Button} />
 
 # Button
 
-<Story 
-  name="Primary"
-  render={() => <Button primary>Button</Button>} />
+<Story name="Primary">
+  <Button primary>Button</Button>
+</Story>
 ```

docs/snippets/react/your-component.js.mdx

@@ -1,16 +1,24 @@
 ```js
-// YourComponent.stories.js | YourComponent.stories.jsx
+// YourComponent.stories.js|jsx
 
 import { YourComponent } from './YourComponent';
 
 //👇 This default export determines where your story goes in the story list
 export default {
+  /* 👇 The title prop is optional.
+   * See https://storybook.js.org/docsreact/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
+  title: 'YourComponent',
   component: YourComponent,
 };
 
+//👇 We create a “template” of how args map to rendering
+const Template = (args) => <YourComponent {...args} />;
+
 export const FirstStory = {
   args: {
     //👇 The args you need here will depend on your component
   },
 };
-```
+```

docs/snippets/react/your-component.mdx.mdx

@@ -8,11 +8,13 @@ import { YourComponent } from './YourComponent';
 <!--👇 The title prop determines where your story goes in the story list -->
 <Meta title="YourComponent" component={YourComponent} />
 
-<!-- Render functions are a framework specific feature to allow you control on how the component renders -->
+<!--👇 We create a “template” of how args map to rendering -->
+export const Template = (args) => <YourComponent {...args} />;
 
 <!-- 👇 The args you need here will depend on your component -->
 <Story
   name="FirstStory"
-  args={{}}
-  render={(args) => <YourComponent {...args} />} />
+  args={{}}>
+  {Template.bind({})}
+</Story>
 ```

docs/snippets/react/your-component.ts.mdx

@@ -1,22 +1,27 @@
 ```ts
-// YourComponent.stories.ts | YourComponent.stories.tsx
+// YourComponent.stories.ts|tsx
 
-import React, { ComponentProps } from 'react';
+import React from 'react';
 
-import { Story, Meta } from '@storybook/react';
+import { ComponentStory, ComponentMeta } from '@storybook/react';
 
 import { YourComponent } from './YourComponent';
 
 //👇 This default export determines where your story goes in the story list
 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,
-} as Meta;
+} as ComponentMeta<typeof YourComponent>;
 
 //👇 We create a “template” of how args map to rendering
-const Template: Story<ComponentProps<typeof YourComponent>> = (args) => <YourComponent {...args} />;
+const Template: ComponentStory<typeof YourComponent> = (args) => <YourComponent {...args} />;
 
 export const FirstStory = Template.bind({});
+
 FirstStory.args = {
   /*👇 The args you need here will depend on your component */
 };

docs/snippets/svelte/button-story.mdx.mdx

@@ -7,17 +7,14 @@ import Button from './Button.svelte';
 
 <Meta title="Button" component={Button}/>
 
-<!-- Render functions are a framework specific feature to allow you control on how the component renders -->
-
 # Button
 
-<Story 
-  name="Primary"
-  render={() => ({
-    Component: Button,
+<Story name="Primary">
+  {{
     props: {
       primary: true,
       label: 'Button',
     },
-  })} />
+  }}
+</Story>
 ```

docs/snippets/svelte/your-component.js.mdx

@@ -5,16 +5,21 @@ import YourComponent from './YourComponent.svelte';
 
 //👇This default export determines where your story goes in the story list
 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,
 };
 
-export const FirstStory = {
-  args: {
-    //👇 The args you need here will depend on your component
-  },
-  render: (args) => ({
-    Component: YourComponent,
-    props: args,
-  }),
+//👇 We create a “template” of how args map to rendering
+const Template = (args) => ({
+  props: args,
+});
+
+export const FirstStory = Template.bind({});
+FirstStory.args= {
+ //👇 The args you need here will depend on your component
 };
-```
+```

docs/snippets/svelte/your-component.mdx.mdx

@@ -9,15 +9,16 @@ import YourComponent from './YourComponent.svelte';
 
 <Meta title="YourComponent" component={YourComponent} />
 
-<!-- Render functions are a framework specific feature to allow you control on how the component renders -->
+<!--👇 We create a “template” of how args map to rendering -->
+export const Template = (args) => ({
+  Component: YourComponent,
+  props: args,
+});
 
 <!-- 👇 The args you need here will depend on your component -->
-
 <Story
   name="FirstStory"
-  args={{}}
-  render={(args) => ({
-    Component: YourComponent,
-    props: args,
-  })} />
+  args={{}}>
+  {Template.bind({})}
+</Story>
 ```

docs/snippets/vue/button-story.mdx.mdx

@@ -7,14 +7,15 @@ import Button from './Button.vue';
 
 <Meta title="Button" component={Button} />
 
-<!-- Render functions are a framework specific feature to allow you control on how the component renders -->
 
 # Button
 
-<Story 
-  name="Primary"
-  render={() => ({
-    components: { Button },
-    template: `<Button primary label="Button" />`,
-  })} />
+<Story name="Primary">
+  {() => {
+    return {
+      components: { Button },
+      template: `<Button primary label="Button" />`,
+    };
+  }}
+</Story>
 ```

docs/snippets/vue/your-component.2.js.mdx

@@ -5,17 +5,23 @@ import YourComponent from './YourComponent.vue';
 
 //👇 This default export determines where your story goes in the story list
 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,
 };
 
-export const FirstStory = {
-  args: {
-    //👇 The args you need here will depend on your component
-  },
-  render: (args, { argTypes }) => ({
-    components: { Button },
-    props: Object.keys(argTypes),
-    template: '<Button v-bind="$props" />',
-  }),
+//👇 We create a “template” of how args map to rendering
+const Template = (args, { argTypes }) => ({
+  components: { YourComponent },
+  props: Object.keys(argTypes),
+  template: '<YourComponent v-bind="$props"/>',
+});
+
+export const FirstStory = Template.bind({});
+FirstStory.args = {
+  //👇 The args you need here will depend on your component
 };
-```
+```

docs/snippets/vue/your-component.3.js.mdx

@@ -5,19 +5,27 @@ import YourComponent from './YourComponent.vue';
 
 //👇 This default export determines where your story goes in the story list
 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,
 };
 
-export const FirstStory = {
-  args: {
-    //👇 The args you need here will depend on your component
+//👇 We create a “template” of how args map to rendering
+const Template = (args) => ({
+  components: { YourComponent },
+  setup() {
+    //👇 The args will now be passed down to the template
+    return { args };
   },
-  render: (args) => ({
-    components: { YourComponent },
-    setup() {
-      return { args };
-    },
-    template: '<YourComponent v-bind="args" />',
-  }),
+  template: '<YourComponent v-bind="args"/>',
+});
+
+export const FirstStory = Template.bind({});
+
+FirstStory.args = {
+  /* 👇 The args you need here will depend on your component */
 };
-```
+```

docs/snippets/vue/your-component.mdx-2.mdx.mdx

@@ -8,15 +8,17 @@ import YourComponent from './YourComponent.vue';
 <!--👇 The title prop determines where your story goes in the story list -->
 <Meta title="YourComponent" component={YourComponent} />
 
-<!-- Render functions are a framework specific feature to allow you control on how the component renders -->
+<!--👇 We create a “template” of how args map to rendering -->
+export const Template = (args, { argTypes }) => ({
+  props: Object.keys(argTypes),
+  components: { YourComponent },
+  template: `<YourComponent v-bind="$props" />`,
+});
 
 <!-- 👇 The args you need here will depend on your component -->
 <Story
   name="FirstStory"
-  args={{}}
-  render={(args, { argTypes }) => ({
-    props: Object.keys(argTypes),
-    components: { YourComponent },
-    template: `<YourComponent v-bind="$props" />`,
-  })} />
+  args={{}}>
+  {Template.bind({})}
+</Story>
 ```

docs/snippets/vue/your-component.mdx-3.mdx.mdx

@@ -8,17 +8,19 @@ import YourComponent from './YourComponent.vue';
 <!--👇 The title prop determines where your story goes in the story list -->
 <Meta title="YourComponent" component={YourComponent} />
 
-<!-- Render functions are a framework specific feature to allow you control on how the component renders -->
+<!--👇 We create a “template” of how args map to rendering -->
+export const Template = (args) => ({
+  components: { YourComponent },
+  setup() {
+    return { args };
+  },
+  template: `<YourComponent v-bind="args" />`,
+});
 
 <!-- 👇 The args you need here will depend on your component -->
 <Story
   name="FirstStory"
-  args={{}}
-  render={(args) => ({
-    components: { YourComponent },
-    setup() {
-      return { args };
-    },
-    template: `<YourComponent v-bind="args" />`,
-  })} />
+  args={{}}>
+  {Template.bind({})}
+</Story>
 ```