configure storybook to load BaseComponents and svgs

webapp/storybook/config.js

@@ -22,8 +22,19 @@ Vue.component('v-popover', {
   template: '<div><slot>Popover Content</slot></div>',
 })
 
+// Globally register base components
+const componentFiles = require.context('../components/_new/generic', true, /Base[a-zA-Z]+\.vue/)
+
+componentFiles.keys().forEach(fileName => {
+  const component = componentFiles(fileName)
+  const componentConfig = component.default || component
+  const componentName = component.name || fileName.replace(/^.+\//, '').replace('.vue', '')
+
+  Vue.component(componentName, componentConfig)
+})
+
 // Setup design token addon
-const scssReq = require.context('!!raw-loader!~/view/styles', true, /.\.scss$/)
+const scssReq = require.context('!!raw-loader!~/assets/_new/styles', true, /.\.scss$/)
 const scssTokenFiles = scssReq
   .keys()
   .map(filename => ({ filename, content: scssReq(filename).default }))

webapp/storybook/webpack.config.js

@@ -32,6 +32,30 @@ module.exports = async ({ config, mode }) => {
     include: path.resolve(__dirname, '../'),
   })
 
+  // load svgs with vue-svg-loader instead of file-loader
+  let rule = config.module.rules.find(
+    r =>
+      r.test && r.test.toString().includes('svg') && r.loader && r.loader.includes('file-loader'),
+  )
+  rule.test = /\.(ico|jpg|jpeg|png|gif|eot|otf|webp|ttf|woff|woff2|cur|ani)(\?.*)?$/
+
+  config.module.rules.push({
+    test: /\.svg$/,
+    loader: 'vue-svg-loader',
+    options: {
+      svgo: {
+        plugins: [
+          {
+            removeViewBox: false,
+          },
+          {
+            removeDimensions: true,
+          },
+        ],
+      },
+    },
+  })
+
   config.resolve.alias = {
     ...config.resolve.alias,
     '~~': path.resolve(__dirname, rootDir),

webapp/test/testSetup.js

@@ -1,6 +1,3 @@
-// import fs from 'fs'
-// import path from 'path'
-
 import { createLocalVue } from '@vue/test-utils'
 import Vuex from 'vuex'
 import VTooltip from 'v-tooltip'
@@ -17,14 +14,3 @@ global.localVue.use(Styleguide)
 global.localVue.use(BaseComponents)
 global.localVue.use(Filters)
 global.localVue.use(InfiniteScroll)
-
-// // import BaseComponents without require.context for tests
-// const componentFiles = fs
-//   .readdirSync(path.join(__dirname, 'components/_new/generic/'))
-//   .filter(fileName => /Base[a-zA-Z]+\.vue/.test(fileName))
-
-// componentFiles.forEach(fileName => {
-//   const componentName = fileName.replace(/^.+\//, '').replace('.vue', '')
-//   const componentConfig = require('~/components/_new/generic/' + fileName)
-//   global.localVue.component(componentName, componentConfig.default || componentConfig)
-// })