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 62% rename from .storybook/config.js rename to .storybook/preview.js index 608c5fd..d0ed990 100644 --- a/.storybook/config.js +++ b/.storybook/preview.js @@ -1,17 +1,10 @@ /* eslint-disable import/no-extraneous-dependencies */ -import { configure, addParameters, addDecorator } from '@storybook/vue' -import theme from './theme'; +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: '
', })) 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" } }