First attempt of using storybook for component dev

webapp/.storybook/config.js

@@ -0,0 +1,14 @@
+import { configure } from '@storybook/vue'
+import Vue from 'vue'
+import Vuex from 'vuex'
+
+Vue.use(Vuex)
+
+// Automatically import all files ending in *.stories.js
+const req = require.context('../stories', true, /.story.js$/)
+
+function loadStories() {
+  req.keys().forEach(req)
+}
+
+configure(loadStories, module)

webapp/.storybook/webpack.config.js

@@ -0,0 +1,44 @@
+const path = require('path')
+const nuxtConf = require('../nuxt.config')
+const srcDir = `../${nuxtConf.srcDir || ''}`
+const rootDir = `../${nuxtConf.rootDir || ''}`
+
+// Export a function. Accept the base config as the only param.
+module.exports = async ({ config, mode }) => {
+  // `mode` has a value of 'DEVELOPMENT' or 'PRODUCTION'
+  // You can change the configuration based on that.
+  // 'PRODUCTION' is used when building the static version of storybook.
+
+  // Make whatever fine-grained changes you need
+  config.module.rules.push({
+    test: /\.scss$/,
+    use: [
+      'style-loader',
+      'css-loader',
+      'sass-loader',
+      {
+        loader: 'style-resources-loader',
+        options: {
+          patterns: [
+            path.resolve(
+              __dirname,
+              '../node_modules/@human-connection/styleguide/dist/shared.scss',
+            ),
+          ],
+          injector: 'prepend',
+        },
+      },
+    ],
+    include: path.resolve(__dirname, '../'),
+  })
+
+  config.resolve.alias = {
+    ...config.resolve.alias,
+    '@': path.dirname(path.resolve(__dirname)),
+    '~~': path.resolve(__dirname, rootDir),
+    '~': path.resolve(__dirname, srcDir),
+  }
+
+  // Return the altered config
+  return config
+}

webapp/package.json

@@ -12,6 +12,7 @@
   "scripts": {
     "dev": "cross-env NODE_ENV=development nodemon server/index.js --watch server",
     "dev:styleguide": "cross-env STYLEGUIDE_DEV=true yarn dev",
+    "storybook": "start-storybook -p 9001 -c .storybook",
     "build": "nuxt build",
     "start": "cross-env node server/index.js",
     "generate": "nuxt generate",
@@ -83,6 +84,7 @@
     "@babel/core": "~7.4.5",
     "@babel/plugin-syntax-dynamic-import": "^7.2.0",
     "@babel/preset-env": "~7.4.5",
+    "@storybook/vue": "~5.1.9",
     "@vue/cli-shared-utils": "~3.8.0",
     "@vue/eslint-config-prettier": "~4.0.1",
     "@vue/server-test-utils": "~1.0.0-beta.29",
@@ -90,6 +92,8 @@
     "babel-core": "~7.0.0-bridge.0",
     "babel-eslint": "~10.0.2",
     "babel-jest": "~24.8.0",
+    "babel-loader": "~8.0.6",
+    "babel-preset-vue": "~2.0.2",
     "eslint": "~5.16.0",
     "eslint-config-prettier": "~5.0.0",
     "eslint-config-standard": "~12.0.0",
@@ -107,8 +111,11 @@
     "nodemon": "~1.19.1",
     "prettier": "~1.18.2",
     "sass-loader": "~7.1.0",
+    "style-resources-loader": "~1.2.1",
     "tippy.js": "^4.3.4",
     "vue-jest": "~3.0.4",
-    "vue-svg-loader": "~0.12.0"
+    "vue-loader": "~15.7.0",
+    "vue-svg-loader": "~0.12.0",
+    "vue-template-compiler": "~2.6.10"
   }
-}
+}

webapp/stories/editor.story.js

@@ -0,0 +1,12 @@
+import { storiesOf } from '@storybook/vue'
+import HcEditor from '~/components/Editor/index.vue'
+
+storiesOf('Editor', module)
+  .add('Empty', () => ({
+    components: { HcEditor },
+    template: `<hc-editor value="" />`,
+  }))
+  .add('Hello World', () => ({
+    components: { HcEditor },
+    template: `<hc-editor value="Empty" />`,
+  }))