Merge pull request #1287 from kazupon/getstorybook-support-for-vue

CLI support for Vue

lib/cli/bin/generate.js

@@ -143,6 +143,20 @@ switch (projectType) {
       .then(end);
     break;
 
+  case types.SFC_VUE:
+    // eslint-disable-next-line
+    require('../generators/SFC_VUE')
+      .then(commandLog('Adding storybook support to your "Single File Components Vue" app'))
+      .then(end);
+    break;
+
+  case types.VUE:
+    // eslint-disable-next-line
+    require('../generators/VUE')
+      .then(commandLog('Adding storybook support to your "Vue" app'))
+      .then(end);
+    break;
+
   default:
     paddedLog(`Unsupported Project type. (code: ${projectType})`);
     paddedLog('Visit https://storybook.js.org for more information.');

lib/cli/generators/SFC_VUE/index.js

@@ -0,0 +1,19 @@
+const mergeDirs = require('merge-dirs').default;
+const helpers = require('../../lib/helpers');
+const path = require('path');
+const latestVersion = require('latest-version');
+
+module.exports = latestVersion('@storybook/vue').then(version => {
+  mergeDirs(path.resolve(__dirname, 'template'), '.', 'overwrite');
+
+  const packageJson = helpers.getPackageJson();
+
+  packageJson.devDependencies = packageJson.devDependencies || {};
+  packageJson.devDependencies['@storybook/vue'] = `^${version}`;
+
+  packageJson.scripts = packageJson.scripts || {};
+  packageJson.scripts.storybook = 'start-storybook -p 6006';
+  packageJson.scripts['build-storybook'] = 'build-storybook';
+
+  helpers.writePackageJson(packageJson);
+});

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

@@ -0,0 +1,4 @@
+/* eslint-disable import/no-extraneous-dependencies, import/no-unresolved, import/extensions */
+
+import '@storybook/addon-actions/register'
+import '@storybook/addon-links/register'

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

@@ -0,0 +1,7 @@
+import { configure } from '@storybook/vue'
+
+function loadStories() {
+  require('../src/stories')
+}
+
+configure(loadStories, module)

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

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

lib/cli/generators/SFC_VUE/template/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/storybooks/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 {
+    margin: 15px;
+    max-width: 600px;
+    line-height: 1.4;
+    font-family: "Helvetica Neue", Helvetica, "Segoe UI", Arial, freesans, sans-serif;
+  }
+
+  .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>

lib/cli/generators/SFC_VUE/template/src/stories/index.js

@@ -0,0 +1,26 @@
+/* eslint-disable import/no-extraneous-dependencies, import/no-unresolved, import/extensions */
+
+import { storiesOf } from '@storybook/vue';
+import { action } from '@storybook/addon-actions';
+import { linkTo } from '@storybook/addon-links';
+
+import MyButton from './MyButton.vue';
+import Welcome from './Welcome.vue';
+
+storiesOf('Welcome', module).add('to Storybook', () => ({
+  components: { Welcome },
+  template: '<welcome :showApp="action" />',
+  methods: { action: linkTo('Button') },
+}));
+
+storiesOf('Button', module)
+  .add('with text', () => ({
+    components: { MyButton },
+    template: '<my-button @click="action">Hello Button</my-button>',
+    methods: { action: action('clicked') },
+  }))
+  .add('with some emoji', () => ({
+    components: { MyButton },
+    template: '<my-button @click="action">😀 😎 👍 💯</my-button>',
+    methods: { action: action('clicked') },
+  }));

lib/cli/generators/VUE/index.js

@@ -0,0 +1,19 @@
+const mergeDirs = require('merge-dirs').default;
+const helpers = require('../../lib/helpers');
+const path = require('path');
+const latestVersion = require('latest-version');
+
+module.exports = latestVersion('@storybook/vue').then(version => {
+  mergeDirs(path.resolve(__dirname, 'template'), '.', 'overwrite');
+
+  const packageJson = helpers.getPackageJson();
+
+  packageJson.devDependencies = packageJson.devDependencies || {};
+  packageJson.devDependencies['@storybook/vue'] = `^${version}`;
+
+  packageJson.scripts = packageJson.scripts || {};
+  packageJson.scripts.storybook = 'start-storybook -p 6006';
+  packageJson.scripts['build-storybook'] = 'build-storybook';
+
+  helpers.writePackageJson(packageJson);
+});

lib/cli/generators/VUE/template/.storybook/addons.js

@@ -0,0 +1,4 @@
+/* eslint-disable import/no-extraneous-dependencies, import/no-unresolved, import/extensions */
+
+import '@storybook/addon-actions/register'
+import '@storybook/addon-links/register'

lib/cli/generators/VUE/template/.storybook/config.js

@@ -0,0 +1,9 @@
+/* eslint-disable import/no-extraneous-dependencies, import/no-unresolved, import/extensions */
+
+import { configure } from '@storybook/vue'
+
+function loadStories() {
+  require('../stories')
+}
+
+configure(loadStories, module)

lib/cli/generators/VUE/template/stories/MyButton.js

@@ -0,0 +1,30 @@
+/* eslint-disable import/no-extraneous-dependencies, import/no-unresolved, import/extensions */
+
+export default {
+  name: 'my-button',
+
+  data () {
+    return {
+      buttonStyles: {
+        border: '1px solid #eee',
+        borderRadius: 3,
+        backgroundColor: '#FFFFFF',
+        cursor: 'pointer',
+        fontSize: 15,
+        padding: '3px 10px',
+        margin: 10
+      }
+    }
+  },
+
+  template: `
+    <button :style="buttonStyles" @click="onClick">
+      <slot></slot>
+    </button>
+  `,
+
+  methods: {
+    onClick () {
+    }
+  }
+}

lib/cli/generators/VUE/template/stories/Welcome.js

@@ -0,0 +1,122 @@
+/* eslint-disable import/no-extraneous-dependencies, import/no-unresolved, import/extensions */
+
+const log = () => console.log('Welcome to storybook!')
+
+export default {
+  name: 'welcome',
+
+  props: {
+    showApp: {
+      type: Function,
+      default: log
+    }
+  },
+
+  data () {
+    return {
+      main: {
+        margin: 15,
+        maxWidth: 600,
+        lineHeight: 1.4,
+        fontFamily: '"Helvetica Neue", Helvetica, "Segoe UI", Arial, freesans, sans-serif'
+      },
+
+      logo: {
+        width: 200
+      },
+
+      link: {
+        color: '#1474f3',
+        textDecoration: 'none',
+        borderBottom: '1px solid #1474f3',
+        paddingBottom: 2
+      },
+
+      code: {
+        fontSize: 15,
+        fontWeight: 600,
+        padding: '2px 5px',
+        border: '1px solid #eae9e9',
+        borderRadius: 4,
+        backgroundColor: '#f3f2f2',
+        color: '#3a3a3a'
+      },
+
+      note: {
+        opacity: 0.5
+      }
+    }
+  },
+
+  template: `
+    <div :style="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 :style="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 :style="link" @click="onClick" role="button" tabIndex="0">stories</a>
+        <br />
+        for a component called
+        <br />
+        <code :style="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 :style="code">Button</code> component
+        located at <code :style="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
+          :style="link"
+          href="https://github.com/storybooks/storybook"
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          Storybook
+        </a>
+        <br />
+        repo for more information.
+      </p>
+      <p :style="note">
+        <b>NOTE:</b>
+        <br />
+        Have a look at the
+        <br />
+        <code :style="code">.storybook/webpack.config.js</code>
+        <br />
+        to add webpack
+        loaders and plugins you are using in this project.
+      </p>
+    </div>
+  `,
+
+  methods: {
+    onClick (event) {
+      event.preventDefault()
+      this.showApp()
+    }
+  }
+}

lib/cli/generators/VUE/template/stories/index.js

@@ -0,0 +1,25 @@
+import { storiesOf } from '@storybook/vue'
+import { action } from '@storybook/addon-actions'
+import { linkTo } from '@storybook/addon-links'
+
+import MyButton from './MyButton'
+import Welcome from './Welcome'
+
+storiesOf('Welcome', module)
+  .add('to Storybook', () => ({
+    components: { Welcome },
+    template: '<welcome :showApp="action" />',
+    methods: { action: linkTo('Button') }
+  }))
+
+storiesOf('Button', module)
+  .add('with text', () => ({
+    components: { MyButton },
+    template: '<my-button @click="action">Hello Button</my-button>',
+    methods: { action: linkTo('clicked') }
+  }))
+  .add('with some emoji', () => ({
+    components: { MyButton },
+    template: '<my-button @click="action">😀 😎 👍 💯</my-button>',
+    methods: { action: linkTo('clicked') }
+  }))

lib/cli/lib/detect.js

@@ -12,7 +12,8 @@ module.exports = function detect(options) {
   if (!options.force && packageJson.devDependencies) {
     if (
       packageJson.devDependencies['@storybook/react'] ||
-      packageJson.devDependencies['@storybook/react-native']
+      packageJson.devDependencies['@storybook/react-native'] ||
+      packageJson.devDependencies['@storybook/vue']
     ) {
       return types.ALREADY_HAS_STORYBOOK;
     }
@@ -25,19 +26,24 @@ module.exports = function detect(options) {
     }
   }
 
-  if (
-    !options.force &&
-    packageJson.devDependencies &&
-    (packageJson.devDependencies['@storybook/react'] ||
-      packageJson.devDependencies['@storybook/react-native'])
-  ) {
-    return types.ALREADY_HAS_STORYBOOK;
-  }
-
   if (fs.existsSync(path.resolve('.meteor'))) {
     return types.METEOR;
   }
 
+  if (
+    packageJson.devDependencies &&
+    (packageJson.devDependencies['vue-loader'] || packageJson.devDependencies.vueify)
+  ) {
+    return types.SFC_VUE;
+  }
+
+  if (
+    (packageJson.dependencies && packageJson.dependencies.vue) ||
+    (packageJson.devDependencies && packageJson.devDependencies.vue)
+  ) {
+    return types.VUE;
+  }
+
   if (packageJson.devDependencies && packageJson.devDependencies['react-scripts']) {
     return types.REACT_SCRIPTS;
   }

lib/cli/lib/project_types.js

@@ -7,6 +7,8 @@ module.exports = {
   REACT_NATIVE_SCRIPTS: 'REACT_NATIVE_SCRIPTS',
   REACT_PROJECT: 'REACT_PROJECT',
   WEBPACK_REACT: 'WEBPACK_REACT',
+  VUE: 'VUE',
+  SFC_VUE: 'SFC_VUE',
   ALREADY_HAS_STORYBOOK: 'ALREADY_HAS_STORYBOOK',
   UPDATE_PACKAGE_ORGANIZATIONS: 'UPDATE_PACKAGE_ORGANIZATIONS',
 };