diff --git a/web/.storybook/main.js b/web/.storybook/main.js
index f88ff3343..add1d485b 100644
--- a/web/.storybook/main.js
+++ b/web/.storybook/main.js
@@ -14,12 +14,89 @@ module.exports = {
'@storybook/addon-links',
'@storybook/addon-essentials',
'@storybook/preset-scss',
- '@storybook/addon-postcss',
'@storybook/addon-a11y',
- 'storybook-addon-designs',
'storybook-addon-fetch-mock',
'@storybook/addon-mdx-gfm',
- '@storybook/addon-styling-webpack'
+ '@storybook/addon-styling-webpack',
+ {
+ name: '@storybook/addon-styling-webpack',
+
+ options: {
+ rules: [
+ {
+ test: /\.css$/,
+ sideEffects: true,
+ use: [
+ require.resolve('style-loader'),
+ {
+ loader: require.resolve('css-loader'),
+ options: {
+ // Want to add more CSS Modules options? Read more here: https://github.com/webpack-contrib/css-loader#modules
+ modules: {
+ auto: true,
+ },
+ },
+ },
+ ],
+ },
+ {
+ test: /\.s[ac]ss$/,
+ sideEffects: true,
+ use: [
+ require.resolve('style-loader'),
+ {
+ loader: require.resolve('css-loader'),
+ options: {
+ // Want to add more CSS Modules options? Read more here: https://github.com/webpack-contrib/css-loader#modules
+ modules: {
+ auto: true,
+ },
+ importLoaders: 2,
+ },
+ },
+ require.resolve('resolve-url-loader'),
+ {
+ loader: require.resolve('sass-loader'),
+ options: {
+ // Want to add more Sass options? Read more here: https://webpack.js.org/loaders/sass-loader/#options
+ implementation: require.resolve('sass'),
+ sourceMap: true,
+ sassOptions: {},
+ },
+ },
+ ],
+ },
+ {
+ test: /\.less$/,
+ sideEffects: true,
+ use: [
+ require.resolve('style-loader'),
+ {
+ loader: require.resolve('css-loader'),
+ options: {
+ // Want to add more CSS Modules options? Read more here: https://github.com/webpack-contrib/css-loader#modules
+ modules: {
+ auto: true,
+ },
+ importLoaders: 1,
+ },
+ },
+ {
+ loader: require.resolve('less-loader'),
+ options: {
+ // Want to add more Less options? Read more here: https://webpack.js.org/loaders/less-loader/#options
+ implementation: require.resolve('less'),
+ sourceMap: true,
+ lessOptions: {
+ javascriptEnabled: true,
+ },
+ },
+ },
+ ],
+ },
+ ],
+ },
+ },
],
webpackFinal: async (config, { configType }) => {
@@ -33,31 +110,31 @@ module.exports = {
use: ['@svgr/webpack'],
});
- config.module.rules.push({
- test: /\.less$/,
- use: [
- require.resolve('style-loader'),
- require.resolve('css-loader'),
- {
- loader: require.resolve('less-loader'),
- options: {
- lessOptions: { javascriptEnabled: true },
- },
- },
- ],
- });
+ // config.module.rules.push({
+ // test: /\.less$/,
+ // use: [
+ // require.resolve('style-loader'),
+ // require.resolve('css-loader'),
+ // {
+ // loader: require.resolve('less-loader'),
+ // options: {
+ // lessOptions: { javascriptEnabled: true },
+ // },
+ // },
+ // ],
+ // });
return config;
},
framework: {
name: '@storybook/nextjs',
- options: {}
+ options: {},
},
staticDirs: ['../public', '../../static', './story-assets'],
docs: {
- autodocs: true
- }
+ autodocs: true,
+ },
};
diff --git a/web/package-lock.json b/web/package-lock.json
index c6139805f..fe22fd258 100644
--- a/web/package-lock.json
+++ b/web/package-lock.json
@@ -68,7 +68,7 @@
"@storybook/cli": "7.5.1",
"@storybook/mdx2-csf": "1.1.0",
"@storybook/nextjs": "^7.5.1",
- "@storybook/preset-scss": "1.0.3",
+ "@storybook/preset-scss": "^1.0.3",
"@storybook/react": "7.5.1",
"@storybook/testing-library": "0.2.2",
"@svgr/webpack": "8.1.0",
@@ -110,10 +110,10 @@
"npm": "^10.0.0",
"postcss": "^8.4.31",
"prettier": "3.0.3",
+ "resolve-url-loader": "^5.0.0",
"sass": "1.69.4",
- "sass-loader": "13.3.2",
+ "sass-loader": "^13.3.2",
"storybook": "^7.5.1",
- "storybook-addon-designs": "6.3.1",
"storybook-addon-fetch-mock": "1.0.1",
"storybook-preset-less": "1.1.3",
"style-dictionary": "3.8.0",
@@ -3068,28 +3068,6 @@
"integrity": "sha512-cEee/Z+I12mZcFJshKcCqC8tuX5hG3s+d+9nZ3LabqKF1vKdF41B92pJVCBggjAGORAeOzyyDDKrZwIkLffeOQ==",
"dev": true
},
- "node_modules/@figspec/components": {
- "version": "1.0.2",
- "resolved": "https://registry.npmjs.org/@figspec/components/-/components-1.0.2.tgz",
- "integrity": "sha512-rTjjH7wvM55ZuX+MRVPND1cs4Z4JspJvKc9lzGxm/8gD4dLfgeFztQuNy+daGglaxcGXLXTuJ2oJtZ0/lmRKmw==",
- "dev": true,
- "dependencies": {
- "lit": "^2.1.3"
- }
- },
- "node_modules/@figspec/react": {
- "version": "1.0.3",
- "resolved": "https://registry.npmjs.org/@figspec/react/-/react-1.0.3.tgz",
- "integrity": "sha512-r683qOko+5CbT48Ox280fMx2MNAtaFPgCNJvldOqN3YtmAzlcTT+YSxd3OahA+kjXGGrnzDbUgeTOX1cPLII+g==",
- "dev": true,
- "dependencies": {
- "@figspec/components": "^1.0.1",
- "@lit-labs/react": "^1.0.2"
- },
- "peerDependencies": {
- "react": "^16.14.0 || ^17.0.0 || ^18.0.0"
- }
- },
"node_modules/@floating-ui/core": {
"version": "1.5.0",
"resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.5.0.tgz",
@@ -4284,27 +4262,6 @@
"@lezer/lr": "^1.0.0"
}
},
- "node_modules/@lit-labs/react": {
- "version": "1.2.1",
- "resolved": "https://registry.npmjs.org/@lit-labs/react/-/react-1.2.1.tgz",
- "integrity": "sha512-DiZdJYFU0tBbdQkfwwRSwYyI/mcWkg3sWesKRsHUd4G+NekTmmeq9fzsurvcKTNVa0comNljwtg4Hvi1ds3V+A==",
- "dev": true
- },
- "node_modules/@lit-labs/ssr-dom-shim": {
- "version": "1.1.2",
- "resolved": "https://registry.npmjs.org/@lit-labs/ssr-dom-shim/-/ssr-dom-shim-1.1.2.tgz",
- "integrity": "sha512-jnOD+/+dSrfTWYfSXBXlo5l5f0q1UuJo3tkbMDCYA2lKUYq79jaxqtGEvnRoh049nt1vdo1+45RinipU6FGY2g==",
- "dev": true
- },
- "node_modules/@lit/reactive-element": {
- "version": "1.6.3",
- "resolved": "https://registry.npmjs.org/@lit/reactive-element/-/reactive-element-1.6.3.tgz",
- "integrity": "sha512-QuTgnG52Poic7uM1AN5yJ09QMe0O28e10XzSvWDz02TJiiKee4stsiownEIadWm8nYzyDAyT+gKzUoZmiWQtsQ==",
- "dev": true,
- "dependencies": {
- "@lit-labs/ssr-dom-shim": "^1.0.0"
- }
- },
"node_modules/@mdx-js/react": {
"version": "2.3.0",
"resolved": "https://registry.npmjs.org/@mdx-js/react/-/react-2.3.0.tgz",
@@ -27403,37 +27360,6 @@
}
}
},
- "node_modules/lit": {
- "version": "2.8.0",
- "resolved": "https://registry.npmjs.org/lit/-/lit-2.8.0.tgz",
- "integrity": "sha512-4Sc3OFX9QHOJaHbmTMk28SYgVxLN3ePDjg7hofEft2zWlehFL3LiAuapWc4U/kYwMYJSh2hTCPZ6/LIC7ii0MA==",
- "dev": true,
- "dependencies": {
- "@lit/reactive-element": "^1.6.0",
- "lit-element": "^3.3.0",
- "lit-html": "^2.8.0"
- }
- },
- "node_modules/lit-element": {
- "version": "3.3.3",
- "resolved": "https://registry.npmjs.org/lit-element/-/lit-element-3.3.3.tgz",
- "integrity": "sha512-XbeRxmTHubXENkV4h8RIPyr8lXc+Ff28rkcQzw3G6up2xg5E8Zu1IgOWIwBLEQsu3cOVFqdYwiVi0hv0SlpqUA==",
- "dev": true,
- "dependencies": {
- "@lit-labs/ssr-dom-shim": "^1.1.0",
- "@lit/reactive-element": "^1.3.0",
- "lit-html": "^2.8.0"
- }
- },
- "node_modules/lit-html": {
- "version": "2.8.0",
- "resolved": "https://registry.npmjs.org/lit-html/-/lit-html-2.8.0.tgz",
- "integrity": "sha512-o9t+MQM3P4y7M7yNzqAyjp7z+mQGa4NS4CxiyLqFPyFWyc4O+nodLrkrxSaCTrla6M5YOLaT3RpbbqjszB5g3Q==",
- "dev": true,
- "dependencies": {
- "@types/trusted-types": "^2.0.2"
- }
- },
"node_modules/load-json-file": {
"version": "6.2.0",
"resolved": "https://registry.npmjs.org/load-json-file/-/load-json-file-6.2.0.tgz",
@@ -39045,15 +38971,6 @@
"url": "https://opencollective.com/storybook"
}
},
- "node_modules/storybook-addon-designs": {
- "version": "6.3.1",
- "resolved": "https://registry.npmjs.org/storybook-addon-designs/-/storybook-addon-designs-6.3.1.tgz",
- "integrity": "sha512-QCHZp4KuUikOq52MPiMfU8QifYTfhHar5vWlbcfkFDz1YrgGMy+QAEt5Y3Vdnffl4GKSK1lAsLuvTuzqTBRvnw==",
- "dev": true,
- "dependencies": {
- "@figspec/react": "^1.0.0"
- }
- },
"node_modules/storybook-addon-fetch-mock": {
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/storybook-addon-fetch-mock/-/storybook-addon-fetch-mock-1.0.1.tgz",
diff --git a/web/package.json b/web/package.json
index bc778061e..5382dd4e3 100644
--- a/web/package.json
+++ b/web/package.json
@@ -74,7 +74,7 @@
"@storybook/cli": "7.5.1",
"@storybook/mdx2-csf": "1.1.0",
"@storybook/nextjs": "^7.5.1",
- "@storybook/preset-scss": "1.0.3",
+ "@storybook/preset-scss": "^1.0.3",
"@storybook/react": "7.5.1",
"@storybook/testing-library": "0.2.2",
"@svgr/webpack": "8.1.0",
@@ -116,10 +116,10 @@
"npm": "^10.0.0",
"postcss": "^8.4.31",
"prettier": "3.0.3",
+ "resolve-url-loader": "^5.0.0",
"sass": "1.69.4",
- "sass-loader": "13.3.2",
+ "sass-loader": "^13.3.2",
"storybook": "^7.5.1",
- "storybook-addon-designs": "6.3.1",
"storybook-addon-fetch-mock": "1.0.1",
"storybook-preset-less": "1.1.3",
"style-dictionary": "3.8.0",