diff --git a/webapp/storybook/config.js b/webapp/storybook/config.js index 377a71fa8..2631285e1 100644 --- a/webapp/storybook/config.js +++ b/webapp/storybook/config.js @@ -22,8 +22,19 @@ Vue.component('v-popover', { template: '
Popover Content
', }) +// 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 })) diff --git a/webapp/storybook/webpack.config.js b/webapp/storybook/webpack.config.js index 6463386b1..344d12708 100644 --- a/webapp/storybook/webpack.config.js +++ b/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), diff --git a/webapp/test/testSetup.js b/webapp/test/testSetup.js index a15a6810a..09d161e1f 100644 --- a/webapp/test/testSetup.js +++ b/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) -// })