From 0ae7d803edcc818e26d1fad4a67ed00da3f5c6cd Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Alexander=20Wennerstr=C3=B8m?= Date: Tue, 15 Sep 2020 23:56:17 +0200 Subject: [PATCH 1/2] Configurered theming of storybook --- .storybook/addons.js | 3 --- .storybook/main.js | 32 ++++++++++++++++++++++++++++ .storybook/manager.js | 6 ++++++ .storybook/{config.js => preview.js} | 3 +-- .storybook/webpack.config.js | 30 -------------------------- package-lock.json | 17 +++++++++++++-- package.json | 1 + 7 files changed, 55 insertions(+), 37 deletions(-) delete mode 100644 .storybook/addons.js create mode 100644 .storybook/main.js create mode 100644 .storybook/manager.js rename .storybook/{config.js => preview.js} (87%) delete mode 100644 .storybook/webpack.config.js diff --git a/.storybook/addons.js b/.storybook/addons.js deleted file mode 100644 index 1b865fd..0000000 --- a/.storybook/addons.js +++ /dev/null @@ -1,3 +0,0 @@ -/* eslint-disable import/no-extraneous-dependencies */ -import '@storybook/addon-actions/register' -import '@storybook/addon-links/register' diff --git a/.storybook/main.js b/.storybook/main.js new file mode 100644 index 0000000..599c592 --- /dev/null +++ b/.storybook/main.js @@ -0,0 +1,32 @@ +const path = require('path') + +module.exports = { + addons: [ + '@storybook/preset-scss', + '@storybook/addon-actions', + '@storybook/addon-links' + ], + webpackFinal: async (config, { configType }) => { + // `configType` 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'], + include: path.resolve(__dirname, '../'), + }, + { + test: /\.(png|svg|jpg|gif)$/, + use: [ + 'file-loader', + ], + include: path.resolve(__dirname, "../") + }); + + // Return the altered config + return config; + }, +}; + \ No newline at end of file diff --git a/.storybook/manager.js b/.storybook/manager.js new file mode 100644 index 0000000..01e56f7 --- /dev/null +++ b/.storybook/manager.js @@ -0,0 +1,6 @@ +import { addons } from '@storybook/addons'; +import yourTheme from './theme'; + +addons.setConfig({ + theme: yourTheme, +}); \ No newline at end of file diff --git a/.storybook/config.js b/.storybook/preview.js similarity index 87% rename from .storybook/config.js rename to .storybook/preview.js index 608c5fd..7be12bf 100644 --- a/.storybook/config.js +++ b/.storybook/preview.js @@ -1,8 +1,7 @@ /* eslint-disable import/no-extraneous-dependencies */ import { configure, addParameters, addDecorator } from '@storybook/vue' -import theme from './theme'; -import '../src/scss/fluentify.scss' +// import '../src/scss/fluentify.scss' const req = require.context('../src/stories', true, /.stories.js$/) diff --git a/.storybook/webpack.config.js b/.storybook/webpack.config.js deleted file mode 100644 index 5b65c1d..0000000 --- a/.storybook/webpack.config.js +++ /dev/null @@ -1,30 +0,0 @@ -const path = require("path"); - -module.exports = { - module: { - rules: [ - { - test: /\.scss$/, - use: [ - { - loader: "style-loader" - }, - { - loader: "css-loader" - }, - { - loader: "sass-loader" - } - ], - include: path.resolve(__dirname, "../") - }, - { - test: /\.(png|svg|jpg|gif)$/, - use: [ - 'file-loader', - ], - include: path.resolve(__dirname, "../") - } - ] - } -}; \ No newline at end of file diff --git a/package-lock.json b/package-lock.json index 9ee59d0..b215683 100644 --- a/package-lock.json +++ b/package-lock.json @@ -5560,6 +5560,11 @@ } } }, + "@storybook/preset-scss": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/@storybook/preset-scss/-/preset-scss-1.0.2.tgz", + "integrity": "sha512-Kq+Y3H7qRBxocLW57V9HtQhrw9ZzmTodFCjf+OelMh1k6SZ7/FvJHb7mtWofafHcqq1tSQlNIgYMtHRDJ64WVg==" + }, "@storybook/router": { "version": "6.0.21", "resolved": "https://registry.npmjs.org/@storybook/router/-/router-6.0.21.tgz", @@ -7216,6 +7221,7 @@ "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.2.1.tgz", "integrity": "sha512-9VGjrMsG1vePxcSweQsN20KY/c4zN0h9fLjqAbwbPfahM3t+NL+M9HC8xeXG2I8pX5NoamTGNuomEUFI7fcUjA==", "dev": true, + "optional": true, "requires": { "@types/color-name": "^1.1.1", "color-convert": "^2.0.1" @@ -7263,6 +7269,7 @@ "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz", "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==", "dev": true, + "optional": true, "requires": { "color-name": "~1.1.4" } @@ -7271,7 +7278,8 @@ "version": "1.1.4", "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz", "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==", - "dev": true + "dev": true, + "optional": true }, "emoji-regex": { "version": "8.0.0", @@ -7299,7 +7307,8 @@ "version": "4.0.0", "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz", "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==", - "dev": true + "dev": true, + "optional": true }, "hash-sum": { "version": "2.0.0", @@ -7450,6 +7459,7 @@ "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz", "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==", "dev": true, + "optional": true, "requires": { "has-flag": "^4.0.0" } @@ -7497,6 +7507,7 @@ "resolved": "https://registry.npmjs.org/vue-loader/-/vue-loader-16.0.0-beta.7.tgz", "integrity": "sha512-xQ8/GZmRPdQ3EinnE0IXwdVoDzh7Dowo0MowoyBuScEBXrRabw6At5/IdtD3waKklKW5PGokPsm8KRN6rvQ1cw==", "dev": true, + "optional": true, "requires": { "@types/mini-css-extract-plugin": "^0.9.1", "chalk": "^3.0.0", @@ -7511,6 +7522,7 @@ "resolved": "https://registry.npmjs.org/@types/mini-css-extract-plugin/-/mini-css-extract-plugin-0.9.1.tgz", "integrity": "sha512-+mN04Oszdz9tGjUP/c1ReVwJXxSniLd7lF++sv+8dkABxVNthg6uccei+4ssKxRHGoMmPxdn7uBdJWONSJGTGQ==", "dev": true, + "optional": true, "requires": { "@types/webpack": "*" } @@ -7520,6 +7532,7 @@ "resolved": "https://registry.npmjs.org/chalk/-/chalk-3.0.0.tgz", "integrity": "sha512-4D3B6Wf41KOYRFdszmDqMCGq5VV/uMAB273JILmO+3jAlh8X4qDtdtgCR3fxtbLEMzSx22QdhnDcJvu2u1fVwg==", "dev": true, + "optional": true, "requires": { "ansi-styles": "^4.1.0", "supports-color": "^7.1.0" diff --git a/package.json b/package.json index f191e5d..8ff5c3e 100644 --- a/package.json +++ b/package.json @@ -116,6 +116,7 @@ "style": "dist/fluentify.css", "unpkg": "dist/fluentify.js", "dependencies": { + "@storybook/preset-scss": "^1.0.2", "vue": "^2.6.12" } } From 76861d27e484421521b896921678c01b5c0d82af Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Alexander=20Wennerstr=C3=B8m?= Date: Wed, 16 Sep 2020 00:19:33 +0200 Subject: [PATCH 2/2] Updated preview file to include styling --- .storybook/preview.js | 10 ++-------- 1 file changed, 2 insertions(+), 8 deletions(-) diff --git a/.storybook/preview.js b/.storybook/preview.js index 7be12bf..d0ed990 100644 --- a/.storybook/preview.js +++ b/.storybook/preview.js @@ -1,16 +1,10 @@ /* eslint-disable import/no-extraneous-dependencies */ -import { configure, addParameters, addDecorator } from '@storybook/vue' +import { configure, addDecorator } from '@storybook/vue' -// import '../src/scss/fluentify.scss' +import '!style-loader!css-loader!sass-loader!../src/scss/fluentify.scss' const req = require.context('../src/stories', true, /.stories.js$/) -addParameters({ - options: { - theme: theme, - }, -}); - addDecorator(() => ({ template: '
', }))