integrate styleguide with hot reload

nuxt.config.js

@@ -1,6 +1,7 @@
 const pkg = require('./package')
 const envWhitelist = ['NODE_ENV', 'MAINTENANCE']
 const dev = process.env.NODE_ENV !== 'production'
+const path = require('path')
 
 module.exports = {
   mode: 'universal',
@@ -54,7 +55,6 @@ module.exports = {
   ** Global CSS
   */
   css: ['~assets/styles/main.scss'],
-
   /*
   ** Plugins to load before mounting the App
   */
@@ -103,7 +103,8 @@ module.exports = {
     ['@nuxtjs/dotenv', { only: envWhitelist }],
     ['nuxt-env', { keys: envWhitelist }],
     '@nuxtjs/apollo',
-    '@nuxtjs/axios'
+    '@nuxtjs/axios',
+    ['nuxt-sass-resources-loader', path.resolve(__dirname, './styleguide/src/system/styles/shared.scss')]
   ],
 
   /*
@@ -185,6 +186,29 @@ module.exports = {
           exclude: /(node_modules)/
         })
       }
+      config.resolve.alias['@@'] = path.resolve(__dirname, './styleguide/src/system')
+      config.module.rules.push({
+        resourceQuery: /blockType=docs/,
+        loader: require.resolve('./styleguide/src/loader/docs-loader.js')
+      })
+      const svgRule = config.module.rules.find(rule => rule.test.test('.svg'))
+      svgRule.test = /\.(png|jpe?g|gif|webp)$/
+      config.module.rules.push({
+        test: /\.svg$/,
+        loader: 'vue-svg-loader',
+        options: {
+          svgo: {
+            plugins: [
+              {
+                removeViewBox: false
+              },
+              {
+                removeDimensions: true
+              }
+            ]
+          }
+        }
+      })
     }
   }
 }

package.json

@@ -62,8 +62,10 @@
     "jest": "^23.6.0",
     "node-sass": "^4.9.3",
     "nodemon": "^1.11.0",
+    "nuxt-sass-resources-loader": "^2.0.5",
     "prettier": "1.14.3",
     "sass-loader": "^7.1.0",
-    "vue-jest": "^3.0.0"
+    "vue-jest": "^3.0.0",
+    "vue-svg-loader": "^0.11.0"
   }
 }

plugins/design-system.js

@@ -1,5 +1,5 @@
 import Vue from 'vue'
-import DesignSystem from 'vue-cion-design-system'
-import 'vue-cion-design-system/dist/system.css'
+import DesignSystem from '@@'
+import '@@/styles/main.scss'
 
 Vue.use(DesignSystem)

styleguide/package.json

@@ -26,8 +26,9 @@
     "@vue/eslint-config-prettier": "^3.0.0-rc.12",
     "@vue/test-utils": "^1.0.0-beta.20",
     "async-validator": "^1.8.5",
-    "babel-core": "7.0.0-bridge.0",
+    "babel-core": "^6.26.3",
     "babel-jest": "^23.0.1",
+    "babel-plugin-transform-require-context": "^0.0.3",
     "cheerio": "^1.0.0-rc.2",
     "clone-deep": "^4.0.0",
     "codemirror": "^5.39.2",

styleguide/src/system/components/data-input/FormItem/FormItem.vue

@@ -7,7 +7,7 @@
       :label="$parentInput.label"
       :for="$parentInput.id" />
     <slot/>
-    <ds-input-error :error="$parentInput.error" />
+    <ds-input-error :error="$parentInput ? $parentInput.error : null" />
   </div>
 </template>
 

styleguide/src/system/components/typography/Icon/Icon.vue

@@ -44,7 +44,11 @@ export default {
   },
   computed: {
     svgComponent() {
-      return icons[this.name]
+      const icon = icons[this.name]
+      if (!icon) {
+        return false
+      }
+      return icon.render ? icon : icon.default
     }
   }
 }