chore: Add missing snippets for vue

docs/configure/images-and-assets.md

@@ -15,6 +15,7 @@ Afterwards you can use any asset in your stories:
 <CodeSnippets
   paths={[
     'react/component-story-static-asset-with-import.js.mdx',
+    'vue/component-story-static-asset-with-import.js.mdx'
   ]}
 />
 
@@ -41,6 +42,7 @@ Here `./public` is your static directory. Now use it in a component or story lik
 <CodeSnippets
   paths={[
     'react/component-story-static-asset-without-import.js.mdx',
+    'vue/component-story-static-asset-without-import.js.mdx',
   ]}
 />
 
@@ -65,6 +67,7 @@ Upload your files to an online CDN and reference them. In this example we’re u
 <CodeSnippets
   paths={[
     'react/component-story-static-asset-cdn.js.mdx',
+    'vue/component-story-static-asset-cdn.js.mdx',
   ]}
 />
 

docs/essentials/controls.md

@@ -92,6 +92,7 @@ Up until now, we only used auto-generated controls based on the component we're
   paths={[
     'react/table-story-fully-customize-controls.js.mdx',
     'react/table-story-fully-customize-controls.mdx.mdx',
+    'vue/table-story-fully-customize-controls.js.mdx',
   ]}
 />
 
@@ -113,7 +114,8 @@ As they can be complex cases:
   paths={[
     'react/component-story-custom-args-complex.js.mdx',
     'react/component-story-custom-args-complex.ts.mdx',
-    'react/component-story-custom-args-complex.mdx.mdx'
+    'react/component-story-custom-args-complex.mdx.mdx',
+     'vue/component-story-custom-args-complex.js.mdx',
   ]}
 />
 
@@ -128,7 +130,8 @@ Or even with certain types of elements, such as icons:
   paths={[
     'react/component-story-custom-args-icons.js.mdx',
     'react/component-story-custom-args-icons.ts.mdx',
-    'react/component-story-custom-args-icons.mdx.mdx'
+    'react/component-story-custom-args-icons.mdx.mdx',
+    'vue/component-story-custom-args-icons.js.mdx',
   ]}
 />
 

docs/snippets/vue/app-story-with-mock.js.mdx

@@ -0,0 +1,35 @@
+```js
+// App.stories.js
+
+import App from './App.vue';
+
+export default {
+  title: 'App',
+  component: App
+};
+
+const Template = (_args, { argTypes }) => ({
+  props: Object.keys(argTypes),
+  components: { App },
+  template: "<App />"
+});
+
+export const Success = Template.bind({});
+
+Success.parameters = {
+  fetch: {
+    json: {
+      JavaScript: 3390991,
+      "C++": 44974,
+      TypeScript: 15530,
+      CoffeeScript: 12253,
+      Python: 9383,
+      C: 5341,
+      Shell: 5115,
+      HTML: 3420,
+      CSS: 3171,
+      Makefile: 189
+    }
+  }
+};
+```

docs/snippets/vue/button-component-with-proptypes.js.mdx

@@ -0,0 +1,31 @@
+```html
+<!-- Button.vue -->
+
+<template>
+  <button type="button" :disabled="isDisabled">{{ content }}</button>
+</template>
+
+<script>
+  export default {
+    name: "button",
+    props: {
+      /**
+      * Checks if the button should be disabled
+      */
+      isDisabled: {
+        type: Boolean,
+        default: false,
+        required: true
+      },
+      /**
+      * The display content of the button
+      */
+      content: {
+        type: String,
+        default: 'One',
+        required: true
+      }
+    }
+  };
+</script>
+```

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

@@ -0,0 +1,26 @@
+```js
+//ButtonGroup.stories.js
+
+import ButtonGroup from './ButtonGroup';
+import * as ButtonStories from './MyButton.stories';
+
+export default {
+  title: 'ButtonGroup',
+  component: ButtonGroup,
+};
+
+const Template = (args, { argTypes }) => ({
+  components: { ButtonGroup },
+  props: Object.keys(argTypes),
+  template: '<ButtonGroup v-bind="$props" />'
+});
+
+export const Pair = Template.bind({});
+Pair.args = {
+  buttons: [
+    { ...ButtonStories.Primary.args },
+    { ...ButtonStories.Secondary.args }
+  ],
+  orientation: "horizontal"
+};
+```

docs/snippets/vue/button-story-default-docs-code.js.mdx

@@ -0,0 +1,37 @@
+```js
+// Button.stories.js
+
+import Button from './Button.vue';
+
+export default {
+  title: 'Button',
+  component: Button,
+  argTypes: {
+    backgroundColor: { control: "color" }
+  },
+};
+
+const someFunction = someValue => {
+  return `i am a ${someValue}`;
+};
+
+export const ExampleStory = (args, { argTypes }) => {
+  // destructure the label from the args object
+  const oldArgs = args;
+  const { label } = oldArgs;
+  //
+  // assigns the function result to a variable and pass it as a prop into the component
+  const functionResult = someFunction(label);
+  args.label = functionResult;
+  return {
+    props: Object.keys(argTypes),
+    components: { Button },
+    template: '<Button v-bind="$props" />',
+  };
+};
+ExampleStory.args = {
+  primary: true,
+  size: "small",
+  label: "button",
+};
+```

docs/snippets/vue/button-test.js.mdx

@@ -0,0 +1,15 @@
+```js
+// tests/unit/Button.test.js
+
+import { mount } from '@vue/test-utils';
+
+import MyButton from '../../src/stories/Button.vue';
+import { Primary } from '../../src/stories/Button.stories';
+
+it('renders the button in the primary state', () => {
+  const wrapper = mount(MyButton, {
+    propsData: Primary.args,
+  });
+  expect(wrapper.classes()).toContain('storybook-button--primary');
+});
+```

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

@@ -0,0 +1,43 @@
+```js
+// YourComponent.stories.js
+
+import YourComponent from './YourComponent.vue';
+
+export default {
+  title: 'A complex case with a function',
+  component: YourComponent,
+  // creates specific argTypes with options
+  argTypes: {
+    propertyA: {
+      control: {
+        type: 'select',
+        options: ['Item One', 'Item Two', 'Item Three']
+      }
+    },
+    propertyB: {
+      control: {
+        type: 'select',
+        options: ['Another Item One', 'Another Item Two', 'Another Item Three']
+      }
+    }
+  },
+};
+
+// a function to apply some computations
+const someFunction = (valuePropertyA, valuePropertyB) => {
+  // makes some computations and returns something
+};
+
+const Template = (args, { argTypes }) => {
+  const { propertyA, propertyB } = args;
+
+  const someFunctionResult = someFunction(propertyA, propertyB);
+
+  args.someProperty = someFunctionResult;
+  return {
+    components: { YourComponent },
+    props: Object.keys(argTypes),
+    template: `<YourComponent v-bind="$props" />`
+  };
+};
+```

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

@@ -0,0 +1,36 @@
+```js
+// YourComponent.stories.js
+
+import YourComponent from "./YourComponent.vue";
+
+import { browser, tablet, mobile, user, watch } from "./icons";
+
+// Maps the icons to a JSON serializable object to be safely used with the argTypes
+const iconMap = { browser, tablet, mobile, user, watch };
+
+export default {
+  title: 'My Story with Icons',
+  component: YourComponent,
+  argTypes: {
+    icon: {
+      control: {
+        type: 'select',
+        options: Object.keys(iconMap)
+      }
+    }
+  },
+};
+
+const Template = (args, { argTypes }) => {
+  // retrieves the appropriate icon passes it as a component prop
+  const oldArgs = args;
+  const { icon } = oldArgs;
+  const selectedIcon = iconMap[icon];
+  args.icon = selectedIcon;
+  return {
+    props: Object.keys(argTypes),
+    components: { Icon },
+    template: '<YourComponent v-bind="$props"/>'
+  };
+};
+```

docs/snippets/vue/component-story-static-asset-cdn.js.mdx

@@ -0,0 +1,10 @@
+```js
+// MyComponent.stories.js
+
+export default {
+  title: "img",
+};
+export const withAnImage = () => ({
+  template: '<img src="https://placehold.it/350x150" alt="My CDN placeholder"/>'
+});
+```

docs/snippets/vue/component-story-static-asset-with-import.js.mdx

@@ -0,0 +1,26 @@
+```js
+// MyComponent.stories.js
+
+import imageFile from './static/image.png';
+
+export default {
+  title: 'img'
+};
+
+const image = {
+  src: imageFile,
+  alt: 'my image'
+};
+
+export const withAnImage = () => ({
+  template: `<img :src="src" :alt="alt"/>`,
+  props: {
+    src: {
+      default: () => image.src,
+    },
+    alt: {
+      default: () => image.alt,
+    }
+  }
+});
+```

docs/snippets/vue/component-story-static-asset-without-import.js.mdx

@@ -0,0 +1,10 @@
+```js
+// MyComponent.stories.js
+
+export default {
+  title: "img",
+};
+export const withAnImage = () => ({
+  template: '<img src="image.png" alt="my image" />'
+});
+```

docs/snippets/vue/list-story-expanded.js.mdx

@@ -0,0 +1,35 @@
+```js
+// List.stories.js
+
+import List from "./ListComponent.vue";
+import ListItem from "./ListItem.vue";
+
+export default {
+  component: List,
+  title: 'List'
+};
+
+export const Empty = (args, { argTypes }) => ({
+  components: { List },
+  props: Object.keys(argTypes),
+  template: '<list v-bind="$props"/>',
+});
+
+export const OneItem = (args, { argTypes }) => ({
+  components: { List, ListItem },
+  props: Object.keys(argTypes),
+  template: '<list v-bind="$props"> <list-item/></list>',
+});
+
+export const ManyItems = (args, { argTypes }) => ({
+  components: { List, ListItem },
+  props: Object.keys(argTypes),
+  template: `
+    <list v-bind="$props">
+        <list-item/>
+        <list-item/>
+        <list-item/>
+    </list>
+    `,
+});
+```

docs/snippets/vue/list-story-reuse-data.js.mdx

@@ -0,0 +1,20 @@
+```js
+// List.stories.js
+
+import List from './ListComponent.vue';
+import ListItem from './ListItem.vue';
+
+import { Selected, Unselected } from './ListItem.stories';
+
+export const ManyItems = (args, { argTypes }) => ({
+  components: { List, ListItem },
+  props: Object.keys(argTypes),
+  template: `
+    <list v-bind="$props">
+      <list-item :itemProperty="Selected"/>
+      <list-item :itemProperty="Unselected"/>
+      <list-item :itemProperty="Unselected"/>
+    </list>
+    `,
+});
+```

docs/snippets/vue/list-story-starter.js.mdx

@@ -0,0 +1,17 @@
+```js
+// List.stories.js
+
+import List from './ListComponent.vue';
+
+export default {
+  component: List,
+  title: 'List'
+};
+
+// Always an empty list, not super interesting
+const Template = (args, { argTypes }) => ({
+  components: { List },
+  props: Object.keys(argTypes),
+  template: '<list v-bind="$props"/>',
+});
+```

docs/snippets/vue/list-story-template.js.mdx

@@ -0,0 +1,33 @@
+```js
+// List.stories.js
+
+import List from './List.vue';
+import ListItem from './ListItem.vue';
+import { Unchecked } from './ListItem.stories';
+
+const ListTemplate = (args, { argTypes }) => ({
+  props: Object.keys(argTypes),
+  components: { List, ListItem },
+  template: `
+    <List v-bind="$props">
+        <div v-for="item in items" :key="item.someString">
+            <ListItem v-bind="$props"/>
+        </div>
+    </List>
+    `,
+});
+
+export const Empty = ListTemplate.bind({});
+EmptyListTemplate.args = {
+  items: [],
+};
+
+export const OneItem = ListTemplate.bind({});
+OneItem.args = {
+  items: [
+    {
+      ...Unchecked.args,
+    },
+  ],
+};
+```

docs/snippets/vue/list-story-unchecked.js.mdx

@@ -0,0 +1,19 @@
+```js
+// List.stories.js
+
+import List from './List.vue';
+import ListItem from "./ListItem.vue";
+
+// Importing the ListItem stories
+
+import { Unchecked } from './ListItem.stories';
+
+export const OneItem = (args, { argTypes }) => ({
+  props: Object.keys(argTypes),
+  components: { List, ListItem },
+  template: '<List v-bind="$props"><ListItem v-bind="$props"/></List>',
+});
+OneItem.args = {
+  ...Unchecked.args,
+};
+```

docs/snippets/vue/list-story-with-sub-components.js.mdx

@@ -0,0 +1,24 @@
+```js
+// List.stories.js
+
+import List from './List.vue';
+import ListItem from './ListItem.vue';
+
+export default {
+  component: List,
+  subcomponents: { ListItem },
+  title: 'List'
+};
+
+export const Empty = (args, { argTypes }) => ({
+  props: Object.keys(argTypes),
+  components: { List },
+  template: '<List v-bind="$props"/>',
+});
+
+export const OneItem = (args, { argTypes }) => ({
+  props: Object.keys(argTypes),
+  components: { List, ListItem },
+  template: '<List v-bind="$props"><ListItem /></List>',
+});
+```

docs/snippets/vue/page-story-with-args-composition.js.mdx

@@ -0,0 +1,27 @@
+```js
+// YourPage.stories.js
+
+import DocumentScreen from './DocumentScreen.vue';
+
+import * as PageLayoutStories from './PageLayout.stories';
+import * as DocumentHeaderStories from './DocumentHeader.stories';
+import * as DocumentListStories from './DocumentList.stories';
+
+export default {
+  title:'DocumentScreen',
+  component: DocumentScreen
+};
+
+const Template = (args, { argTypes }) => ({
+  props: Object.keys(argTypes),
+  components: { DocumentScreen },
+  template: '<DocumentScreen v-bind="$props"/>'
+});
+
+export const Simple = Template.bind({});
+Simple.args = {
+  user: PageLayoutStories.Simple.args.user,
+  document: DocumentHeaderStories.Simple.args.document,
+  subdocuments: DocumentListStories.Simple.args.documents
+};
+```

docs/snippets/vue/simple-page-implementation.js.mdx

@@ -0,0 +1,38 @@
+```html
+<!-- YourPage.vue -->
+
+<template>
+  <PageLayout :user="user">
+    <DocumentHeader :document="document" />
+    <DocumentList :documents="subdocuments" />
+  </PageLayout>
+</template>
+
+<script>
+import PageLayout from './PageLayout';
+import DocumentHeader from './DocumentHeader';
+import DocumentList from './DocumentList';
+export default {
+  name: 'DocumentScreen',
+  components: { PageLayout, DocumentHeader, DocumentList },
+  props: {
+    user: {
+      type: String,
+      default: 'N/A',
+    },
+    document: {
+      type: Object,
+      default: () => ({
+        id: 1,
+        title: 'A document',
+        content: 'Lorem Ipsum',
+      }),
+    },
+    subdocuments: {
+      type: Array,
+      default: () => [],
+    },
+  },
+};
+</script>
+```

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

@@ -0,0 +1,26 @@
+```js
+// Table.stories.js
+
+const TableStory = (args, { argTypes }) => ({
+  components: { Table },
+  props: Object.keys(argTypes),
+  template: `
+    <tr v-for="(row, idx1) in data">
+        <td v-for="(col, idx2) in row">
+            {{ data[idx1][idx2] }}
+        </td>
+    </tr>
+  `
+});
+
+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/workflows/build-pages-with-storybook.md

@@ -37,7 +37,8 @@ When you are building screens in this way, it is typical that the inputs of a co
 <CodeSnippets
   paths={[
     'react/simple-page-implementation.js.mdx',
-    'react/simple-page-implementation.ts.mdx'
+    'react/simple-page-implementation.ts.mdx',
+    'vue/simple-page-implementation.js.mdx'
   ]}
 />
 
@@ -51,6 +52,7 @@ In such cases it is natural to use [args composition](../writing-stories/args.md
   paths={[
     'react/page-story-with-args-composition.js.mdx',
     'react/page-story-with-args-composition.ts.mdx',
+    'vue/page-story-with-args-composition.js.mdx'
   ]}
 />
 
@@ -129,6 +131,7 @@ Once that configuration is complete, we can set the mock values in a specific st
 <CodeSnippets
   paths={[
     'react/app-story-with-mock.js.mdx',
+    'vue/app-story-with-mock.js.mdx'
   ]}
 />
 

docs/workflows/faq.md

@@ -128,6 +128,7 @@ We're actively working in providing a better way to address this situation, but
 With the release of version 6.0, we also updated our documentation as well. That doesn't mean that the old documentation was removed, we kept it to help you with your Storybook migration process. Use the content from the table below in conjunction with our <a href="https://github.com/storybookjs/storybook/blob/next/MIGRATION.md">migration guide</a> .
 
 We're only covering version 5.3 and 5.0 as they were important milestones for Storybook. If you want to go back in time a little more you'll have to check the specific release in the monorepo.
+
 | Section          | Page                                       | Current Location                                                                   | Version 5.3 location                                                                                                                                                                                                                                                 | Version 5.0 location                                                                                                                                     |
 |------------------|--------------------------------------------|------------------------------------------------------------------------------------|----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|----------------------------------------------------------------------------------------------------------------------------------------------------------|
 | Get Started      | Install                                    | [See current documentation](../get-started/install.md)                             | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/guides/quick-start-guide)                                                                                                                                     | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.0/docs/src/pages/guides/quick-start-guide)                         |

docs/workflows/stories-for-multiple-components.md

@@ -11,6 +11,7 @@ It's useful to write stories that [render two or more components](../writing-sto
     'react/list-story-with-subcomponents.js.mdx',
     'react/list-story-with-subcomponents.ts.mdx',
     'angular/list-story-with-subcomponents.ts.mdx',
+    'vue/list-story-with-sub-components.js.mdx'
   ]}
 />
 
@@ -37,6 +38,7 @@ The simplest change we can make to the above is to reuse the stories of the `Lis
   paths={[
     'react/list-story-unchecked.js.mdx',
     'react/list-story-unchecked.ts.mdx',
+    'vue/list-story-unchecked.js.mdx'
   ]}
 />
 
@@ -77,7 +79,8 @@ Another option that is more “data”-based is to create a special “story-gen
 <CodeSnippets
   paths={[
     'react/list-story-template.js.mdx',
-    'react/list-story-template.ts.mdx'
+    'react/list-story-template.ts.mdx',
+    'vue/list-story-template.js.mdx'
   ]}
 />
 

docs/workflows/unit-testing.md

@@ -15,6 +15,7 @@ Here is an example of how you can use it in a testing library:
 <CodeSnippets
   paths={[
     'react/button-test.js.mdx',
+    'vue/button-test.js.mdx'
   ]}
 />
 

docs/writing-docs/doc-blocks.md

@@ -25,7 +25,8 @@ This is extremely useful, but it can be further expanded. Additional information
   paths={[
     'react/button-component-with-proptypes.js.mdx',
     'react/button-component-with-proptypes.ts.mdx',
-    'angular/button-component-with-proptypes.ts.mdx'
+    'angular/button-component-with-proptypes.ts.mdx',
+    'vue/button-component-with-proptypes.js.mdx'
   ]}
 />
 
@@ -240,6 +241,7 @@ As an example, if you had the following story:
   paths={[
     'react/button-story-default-docs-code.js.mdx',
     'react/button-story-default-docs-code.ts.mdx',
+    'vue/button-story-default-docs-code.js.mdx'
   ]}
 />
 

docs/writing-stories/introduction.md

@@ -121,6 +121,7 @@ What’s more, you can import args to reuse when writing stories for other compo
     'react/button-group-story.js.mdx',
     'react/button-group-story.ts.mdx',
     'angular/button-group-story.ts.mdx',
+    'vue/button-group-story.js.mdx'
   ]}
 />
 
@@ -200,7 +201,8 @@ When building design systems or component libraries, you may have two or more co
   paths={[
     'react/list-story-starter.js.mdx',
     'react/list-story-starter.ts.mdx',
-    'angular/list-story-starter.ts.mdx'
+    'angular/list-story-starter.ts.mdx',
+    'vue/list-story-starter.js.mdx'
   ]}
 />
 
@@ -214,7 +216,8 @@ In such cases, it makes sense to render a different function for each story:
   paths={[
     'react/list-story-expanded.js.mdx',
     'react/list-story-expanded.ts.mdx',
-    'angular/list-story-expanded.ts.mdx'
+    'angular/list-story-expanded.ts.mdx',
+    'vue/list-story-expanded.js.mdx'
   ]}
 />
 
@@ -228,7 +231,8 @@ You can also reuse stories from the child `ListItem` in your `List` component. T
   paths={[
     'react/list-story-reuse-data.js.mdx',
     'react/list-story-reuse-data.ts.mdx',
-    'angular/list-story-reuse-data.ts.mdx'
+    'angular/list-story-reuse-data.ts.mdx',
+    'vue/list-story-reuse-data.js.mdx'
   ]}
 />