diff --git a/.storybook/main.js b/.storybook/main.js index b749e262d..cb32634c2 100644 --- a/.storybook/main.js +++ b/.storybook/main.js @@ -23,6 +23,18 @@ module.exports = { }, '@storybook/addon-links', '@storybook/addon-essentials', + { + /** + * Fix Storybook issue with PostCSS@8 + * @see https://github.com/storybookjs/storybook/issues/12668#issuecomment-773958085 + */ + name: '@storybook/addon-postcss', + options: { + postcssLoaderOptions: { + implementation: require('postcss'), + }, + }, + }, ], webpackFinal: config => { const newConfig = { @@ -35,7 +47,7 @@ module.exports = { newConfig.module.rules.push({ test: /\.scss$/, - use: ['style-loader', 'css-loader', 'sass-loader'], + use: ['style-loader', 'css-loader', 'postcss-loader', 'sass-loader'], include: path.resolve(__dirname, '../app/javascript'), }); diff --git a/.storybook/preview.js b/.storybook/preview.js index e553e514a..3f98c2cd8 100644 --- a/.storybook/preview.js +++ b/.storybook/preview.js @@ -4,10 +4,12 @@ import Vuex from 'vuex'; import VueI18n from 'vue-i18n'; import Vuelidate from 'vuelidate'; import Multiselect from 'vue-multiselect'; +import VueDOMPurifyHTML from 'vue-dompurify-html'; import FluentIcon from 'shared/components/FluentIcon/DashboardIcon'; import WootUiKit from '../app/javascript/dashboard/components'; import i18n from '../app/javascript/dashboard/i18n'; +import { domPurifyConfig } from 'shared/helpers/HTMLSanitizer'; import '../app/javascript/dashboard/assets/scss/storybook.scss'; @@ -15,6 +17,8 @@ Vue.use(VueI18n); Vue.use(Vuelidate); Vue.use(WootUiKit); Vue.use(Vuex); +Vue.use(VueDOMPurifyHTML, domPurifyConfig); + Vue.component('multiselect', Multiselect); Vue.component('fluent-icon', FluentIcon); diff --git a/app/javascript/dashboard/assets/scss/storybook.scss b/app/javascript/dashboard/assets/scss/storybook.scss index 0d16ea4e4..e735ed3d7 100644 --- a/app/javascript/dashboard/assets/scss/storybook.scss +++ b/app/javascript/dashboard/assets/scss/storybook.scss @@ -10,7 +10,7 @@ @import 'variables'; @import '~spinkit/scss/spinners/7-three-bounce'; -@import '~vue-multiselect/dist/vue-multiselect.min.css'; +@import 'vue-multiselect/dist/vue-multiselect.min.css'; @import '~shared/assets/stylesheets/ionicons'; @import 'mixins'; @@ -30,3 +30,18 @@ @import 'widgets/forms'; @import 'plugins/multiselect'; + +@import 'widget/assets/scss/reset'; +@import 'tailwindcss/base'; +@import 'tailwindcss/components'; +@import 'tailwindcss/utilities'; +@import 'widget/assets/scss/utilities'; + + +html, +body { + font-family: 'PlusJakarta', sans-serif; + -moz-osx-font-smoothing: grayscale; + -webkit-font-smoothing: antialiased; + height: 100%; +} diff --git a/package.json b/package.json index 76c9a36bf..7e11fb421 100644 --- a/package.json +++ b/package.json @@ -18,8 +18,7 @@ "prepare": "husky install", "size": "size-limit" }, - "size-limit": [ - { + "size-limit": [{ "path": "public/packs/js/widget-*.js", "limit": "270 KB" }, @@ -108,6 +107,7 @@ "@storybook/addon-docs": "^6.5.9", "@storybook/addon-essentials": "6.5.9", "@storybook/addon-links": "6.5.9", + "@storybook/addon-postcss": "^2.0.0", "@storybook/addons": "6.5.9", "@storybook/vue": "6.5.9", "@types/jest": "^29.5.2", diff --git a/yarn.lock b/yarn.lock index cb98cc388..00c3b53e5 100644 --- a/yarn.lock +++ b/yarn.lock @@ -5050,6 +5050,17 @@ regenerator-runtime "^0.13.7" ts-dedent "^2.0.0" +"@storybook/addon-postcss@^2.0.0": + version "2.0.0" + resolved "https://registry.yarnpkg.com/@storybook/addon-postcss/-/addon-postcss-2.0.0.tgz#ec61cb9bb2662f408072b35c466c7df801c28498" + integrity sha512-Nt82A7e9zJH4+A+VzLKKswUfru+T6FJTakj4dccP0i8DSn7a0CkzRPrLuZBq8tg4voV6gD74bcDf3gViCVBGtA== + dependencies: + "@storybook/node-logger" "^6.1.14" + css-loader "^3.6.0" + postcss "^7.0.35" + postcss-loader "^4.2.0" + style-loader "^1.3.0" + "@storybook/addon-toolbars@6.5.9": version "6.5.9" resolved "https://registry.yarnpkg.com/@storybook/addon-toolbars/-/addon-toolbars-6.5.9.tgz#feedfdac08482d43bb1f3cc00840d80322c5eace" @@ -5669,7 +5680,7 @@ prettier ">=2.2.1 <=2.3.0" ts-dedent "^2.0.0" -"@storybook/node-logger@6.5.16": +"@storybook/node-logger@6.5.16", "@storybook/node-logger@^6.1.14": version "6.5.16" resolved "https://registry.yarnpkg.com/@storybook/node-logger/-/node-logger-6.5.16.tgz#d57fd6204c2abfbc297551d98ad5475dd73207cc" integrity sha512-YjhBKrclQtjhqFNSO+BZK+RXOx6EQypAELJKoLFaawg331e8VUfvUuRCNB3fcEWp8G9oH13PQQte0OTjLyyOYg== @@ -16676,7 +16687,7 @@ postcss@^7.0.0, postcss@^7.0.1, postcss@^7.0.14, postcss@^7.0.17, postcss@^7.0.2 source-map "^0.6.1" supports-color "^6.1.0" -postcss@^7.0.36: +postcss@^7.0.35, postcss@^7.0.36: version "7.0.39" resolved "https://registry.yarnpkg.com/postcss/-/postcss-7.0.39.tgz#9624375d965630e2e1f2c02a935c82a59cb48309" integrity sha512-yioayjNbHn6z1/Bywyb2Y4s3yvDAeXGOyxqD+LnVOinq6Mdmd++SW2wUNVzavyyHxd6+DxzWGIuosg6P1Rj8uA==