CLI: SFC_VUE template MDX support

lib/cli/generators/SFC_VUE/index.js

@@ -16,6 +16,9 @@ export default async (npmOptions, { storyFormat = 'csf' }) => {
     '@storybook/addon-links',
     '@storybook/addons',
   ];
+  if (storyFormat === 'mdx') {
+    packages.push('@storybook/addon-docs');
+  }
   const versionedPackages = await getVersions(npmOptions, packages);
 
   copyTemplate(__dirname, storyFormat);

lib/cli/generators/SFC_VUE/template-mdx/.storybook/addons.js

@@ -0,0 +1,2 @@
+import '@storybook/addon-actions/register';
+import '@storybook/addon-links/register';

lib/cli/generators/SFC_VUE/template-mdx/.storybook/config.js

@@ -0,0 +1,4 @@
+import { configure } from '@storybook/vue';
+
+// automatically import all files ending in *.stories.js
+configure(require.context('../src/stories', true, /\.stories\.js$/), module);

lib/cli/generators/SFC_VUE/template-mdx/.storybook/presets.js

@@ -0,0 +1 @@
+module.exports = ['@storybook/addon-docs/vue/preset'];

lib/cli/generators/SFC_VUE/template-mdx/src/stories/0-Welcome.stories.mdx

@@ -0,0 +1,23 @@
+import { Meta, Story, Preview } from '@storybook/addon-docs/blocks';
+import { linkTo } from '@storybook/addon-links';
+import Welcome from './Welcome.vue';
+
+<Meta title="Welcome" />
+
+# Welcome
+
+This is a test document written in MDX that defines a `Welcome` story wrapped in a `Preview` doc block:
+
+<Preview withToolbar>
+  <Story name="to Storybook">
+    {() => ({
+      components: {
+        Welcome,
+      },
+      template: '<welcome :showApp="action" />',
+      methods: {
+        action: linkTo('Button'),
+      },
+    })}
+  </Story>
+</Preview>

lib/cli/generators/SFC_VUE/template-mdx/src/stories/1-Button.stories.mdx

@@ -0,0 +1,49 @@
+import { Meta, Story } from '@storybook/addon-docs/blocks';
+import { action } from '@storybook/addon-actions';
+import { linkTo } from '@storybook/addon-links';
+import MyButton from './MyButton.vue';
+
+<Meta title="Button" />
+
+# Button
+
+This `Button` documentation defines three stories:
+
+<Story name="text">
+  {() => ({
+    components: {
+      MyButton,
+    },
+    template: '<my-button @click="action">Hello Button</my-button>',
+    methods: {
+      action: action('clicked'),
+    },
+  })}
+</Story>
+
+<Story name="jsx">
+  {() => ({
+    components: {
+      MyButton,
+    },
+    render() {
+      return <my-button onClick={this.action}>With JSX</my-button>;
+    },
+    methods: {
+      action: linkTo('clicked'),
+    },
+  })}
+</Story>
+
+<Story name="emoji">
+  {() => ({
+    components: {
+      MyButton,
+    },
+    template:
+      '<my-button @click="action"><span role="img" aria-label="so cool">😀 😎 👍 💯</span></my-button>',
+    methods: {
+      action: action('clicked'),
+    },
+  })}
+</Story>

lib/cli/generators/SFC_VUE/template-mdx/src/stories/MyButton.vue

@@ -0,0 +1,29 @@
+<template>
+  <button class="button-styles" @click="onClick">
+    <slot></slot>
+  </button>
+</template>
+
+<script>
+  export default {
+    name: 'my-button',
+
+    methods: {
+      onClick () {
+        this.$emit('click');
+      }
+    }
+  }
+</script>
+
+<style>
+  .button-styles {
+    border: 1px solid #eee;
+    border-radius: 3px;
+    background-color: #FFFFFF;
+    cursor: pointer;
+    font-size: 15pt;
+    padding: 3px 10px;
+    margin: 10px;
+  }
+</style>

lib/cli/generators/SFC_VUE/template-mdx/src/stories/Welcome.vue

@@ -0,0 +1,120 @@
+<template>
+  <div class="main">
+    <h1>Welcome to STORYBOOK</h1>
+    <p>
+      This is a UI component dev environment for your app.
+    </p>
+    <p>
+      We've added some basic stories inside the
+      <br />
+      <code class="code">src/stories</code>
+      <br />
+      directory.
+      <br />
+      A story is a single state of one or more UI components. You can have as many stories as
+      you want.
+      <br />
+      (Basically a story is like a visual test case.)
+    </p>
+    <p>
+      See these sample
+      <br />
+      <a class="link" @click="onClick" role="button" tabIndex="0">stories</a>
+      <br />
+      for a component called
+      <br />
+      <code class="code">Button</code>
+      .
+    </p>
+    <p>
+      Just like that, you can add your own components as stories.
+      <br />
+      You can also edit those components and see changes right away.
+      <br />
+      (Try editing the <code class="code">Button</code> component
+      located at <code class="code">src/stories/Button.js</code>.)
+    </p>
+    <p>
+      This is just one thing you can do with Storybook.
+      <br />
+      Have a look at the
+      <br />
+      <a
+        class="link"
+        href="https://github.com/storybookjs/storybook"
+        target="_blank"
+        rel="noopener noreferrer"
+      >
+        Storybook
+      </a>
+      <br />
+      repo for more information.
+    </p>
+    <p class="note">
+      <b>NOTE:</b>
+      <br />
+      Have a look at the
+      <br />
+      <code class="code">.storybook/webpack.config.js</code>
+      <br />
+      to add webpack
+      loaders and plugins you are using in this project.
+    </p>
+  </div>
+</template>
+
+<script>
+  const log = () => console.log('Welcome to storybook!')
+
+  export default {
+    name: 'welcome',
+
+    props: {
+      showApp: {
+        type: Function,
+        default: log
+      }
+    },
+
+    methods: {
+      onClick (event) {
+        event.preventDefault()
+        this.showApp()
+      }
+    }
+  }
+</script>
+
+<style>
+  .main {
+    padding: 15px;
+    line-height: 1.4;
+    font-family: "Helvetica Neue", Helvetica, "Segoe UI", Arial, freesans, sans-serif;
+    background-color: #ffffff;
+  }
+
+  .logo {
+    width: 200px;
+  }
+
+  .link {
+    color: #1474f3;
+    text-decoration: none;
+    border-bottom: 1px solid #1474f3;
+    padding-bottom: 2px;
+  }
+
+  .code {
+    font-size: 15px;
+    font-weight: 600;
+    padding: 2px 5px;
+    border: 1px solid #eae9e9;
+    border-radius: 4px;
+    background-color: #f3f2f2;
+    color: #3a3a3a;
+  }
+
+  .note {
+    opacity: 0.5;
+  }
+</style>