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} />
+<Meta title="Button" component={Button} />
-
-<!-- Render functions are a framework specific feature to allow you control on how the component renders -->
 
 # Button
 
-<Story 
+<Story name="Primary">
-  name="Primary"
+  {{
-  render={() => ({
     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={{}}
+  args={{}}>
-  render={(args) => ({
+  {Template.bind({})}
-    props: args,
+</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 = {
+//👇 We create a “template” of how args map to rendering
-  args: {
+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

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

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

@@ -1,13 +1,21 @@
 ```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={{}}
+  args={{}}>
-  render={(args) => <YourComponent {...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 
+<Story name="Primary">
-  name="Primary"
+  {{
-  render={() => ({
-    Component: Button,
     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 = {
+//👇 We create a “template” of how args map to rendering
-  args: {
+const Template = (args) => ({
-    //👇 The args you need here will depend on your component
-  },
-  render: (args) => ({
-    Component: YourComponent,
   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) => ({
-<!-- 👇 The args you need here will depend on your component -->
-
-<Story
-  name="FirstStory"
-  args={{}}
-  render={(args) => ({
   Component: YourComponent,
   props: args,
-  })} />
+});
+
+<!-- 👇 The args you need here will depend on your component -->
+<Story
+  name="FirstStory"
+  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 
+<Story name="Primary">
-  name="Primary"
+  {() => {
-  render={() => ({
+    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 = {
+//👇 We create a “template” of how args map to rendering
-  args: {
+const Template = (args, { argTypes }) => ({
-    //👇 The args you need here will depend on your component
+  components: { YourComponent },
-  },
-  render: (args, { argTypes }) => ({
-    components: { Button },
   props: Object.keys(argTypes),
-    template: '<Button v-bind="$props" />',
+  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 = {
+//👇 We create a “template” of how args map to rendering
-  args: {
+const Template = (args) => ({
-    //👇 The args you need here will depend on your component
-  },
-  render: (args) => ({
   components: { YourComponent },
   setup() {
+    //👇 The args will now be passed down to the template
     return { 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={{}}
+  args={{}}>
-  render={(args, { argTypes }) => ({
+  {Template.bind({})}
-    props: Object.keys(argTypes),
+</Story>
-    components: { YourComponent },
-    template: `<YourComponent v-bind="$props" />`,
-  })} />
 ```

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) => ({
-<!-- 👇 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" />`,
-  })} />
+});
+
+<!-- 👇 The args you need here will depend on your component -->
+<Story
+  name="FirstStory"
+  args={{}}>
+  {Template.bind({})}
+</Story>
 ```