From 976098dc4e973f4895987513e4c748d9569342b9 Mon Sep 17 00:00:00 2001 From: Sergei Maertens Date: Fri, 29 Nov 2024 23:30:55 +0100 Subject: [PATCH] :technologist: [#724] Switch to react-vite builder --- .storybook/main.js | 93 ---------------------------- .storybook/main.mts | 26 ++++++++ package-lock.json | 144 ++++++++++++++++++++++++++++++++++++++++++++ package.json | 1 + 4 files changed, 171 insertions(+), 93 deletions(-) delete mode 100644 .storybook/main.js create mode 100644 .storybook/main.mts diff --git a/.storybook/main.js b/.storybook/main.js deleted file mode 100644 index 3d466674c..000000000 --- a/.storybook/main.js +++ /dev/null @@ -1,93 +0,0 @@ -const _ = require('lodash'); -const MiniCssExtractPlugin = require('mini-css-extract-plugin'); -const configFactory = require('../config/webpack.config'); - -// from ../config/webpack.config -const sassRegex = /\.(scss|sass)$/; -const config = { - core: { - disableTelemetry: true, - }, - stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'], - addons: [ - '@storybook/addon-links', - '@storybook/addon-essentials', - '@storybook/addon-interactions', - 'storybook-addon-theme-provider', - 'storybook-react-intl', - 'storybook-addon-remix-react-router', - '@storybook/addon-coverage', - '@storybook/addon-webpack5-compiler-babel', - ], - features: { - interactionsDebugger: true, - buildStoriesJson: true, - }, - - framework: { - name: '@storybook/react-webpack5', - options: {}, - }, - staticDirs: ['../src/img/', '../public'], - webpackFinal: async (sbConfig, {configType}) => { - // configType is DEVELOPMENT or PRODUCTION - const craConfig = configFactory(configType.toLowerCase()); - const mergedResolve = { - ...sbConfig.resolve, - extensions: _.uniq([...sbConfig.resolve.extensions, ...craConfig.resolve.extensions]), - modules: _.uniq([...sbConfig.resolve.modules, ...craConfig.resolve.modules]), - alias: { - ...sbConfig.resolve.alias, - ...craConfig.resolve.alias, - }, - fallback: { - ...sbConfig.resolve.fallback, - ...craConfig.resolve.fallback, - }, - // plugins: craConfig.resolve.plugins, -> this breaks the build as it adds the ModuleScopePlugin - symlinks: craConfig.resolve.symlinks, - }; - - // add sass-loader etc. - const oneOfRule = craConfig.module.rules.find(rule => rule.oneOf != null); - const sassRule = oneOfRule.oneOf.find(rule => String(rule.test) === String(sassRegex)); - const ejsLoader = oneOfRule.oneOf.find(rule => rule.loader === 'ejs-loader'); - const mergedRules = [ - sassRule, - { - ...ejsLoader, - // Exclude Storybook internal .ejs templates - test: /formio.*\.ejs$/, - }, - ...sbConfig.module.rules, - ]; - const mergedPlugins = [...sbConfig.plugins]; - if (configType === 'PRODUCTION') { - // from ../config/webpack.config - mergedPlugins.push( - new MiniCssExtractPlugin({ - // Options similar to the same options in webpackOptions.output - // both options are optional - filename: '[name].css', - }) - ); - } - const watchOptions = { - ...sbConfig.watchOptions, - // DO watch our own packages, especially useful when rebuilding the design-tokens - ignored: /node_modules\/(?!@open-formulieren)/, - }; - return { - ...sbConfig, - resolve: mergedResolve, - module: { - ...sbConfig.module, - rules: mergedRules, - }, - plugins: mergedPlugins, - watchOptions, - }; - }, - docs: {}, -}; -export default config; diff --git a/.storybook/main.mts b/.storybook/main.mts new file mode 100644 index 000000000..5893aad99 --- /dev/null +++ b/.storybook/main.mts @@ -0,0 +1,26 @@ +import {StorybookConfig} from '@storybook/react-vite'; + +const config: StorybookConfig = { + core: { + disableTelemetry: true, + }, + stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'], + addons: [ + '@storybook/addon-links', + '@storybook/addon-essentials', + '@storybook/addon-interactions', + 'storybook-addon-theme-provider', + 'storybook-react-intl', + 'storybook-addon-remix-react-router', + '@storybook/addon-coverage', + '@storybook/addon-webpack5-compiler-babel', + ], + framework: { + name: '@storybook/react-vite', + options: {}, + }, + staticDirs: ['../src/img/', '../public'], + docs: {}, +}; + +export default config; diff --git a/package-lock.json b/package-lock.json index f05f9866e..ec5014394 100644 --- a/package-lock.json +++ b/package-lock.json @@ -67,6 +67,7 @@ "@storybook/manager-api": "^8.4.6", "@storybook/preview-api": "^8.4.6", "@storybook/react": "^8.4.6", + "@storybook/react-vite": "^8.4.6", "@storybook/react-webpack5": "^8.4.6", "@storybook/test-runner": "^0.20.0", "@storybook/types": "^8.4.6", @@ -4776,6 +4777,37 @@ "node": ">=8" } }, + "node_modules/@joshwooding/vite-plugin-react-docgen-typescript": { + "version": "0.4.2", + "resolved": "https://registry.npmjs.org/@joshwooding/vite-plugin-react-docgen-typescript/-/vite-plugin-react-docgen-typescript-0.4.2.tgz", + "integrity": "sha512-feQ+ntr+8hbVudnsTUapiMN9q8T90XA1d5jn9QzY09sNoj4iD9wi0PY1vsBFTda4ZjEaxRK9S81oarR2nj7TFQ==", + "dev": true, + "dependencies": { + "magic-string": "^0.27.0", + "react-docgen-typescript": "^2.2.2" + }, + "peerDependencies": { + "typescript": ">= 4.3.x", + "vite": "^3.0.0 || ^4.0.0 || ^5.0.0 || ^6.0.0" + }, + "peerDependenciesMeta": { + "typescript": { + "optional": true + } + } + }, + "node_modules/@joshwooding/vite-plugin-react-docgen-typescript/node_modules/magic-string": { + "version": "0.27.0", + "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.27.0.tgz", + "integrity": "sha512-8UnnX2PeRAPZuN12svgR9j7M1uWMovg/CEnIwIG0LFkXSJJe4PdfUGiTGl8V9bsBHFUtfVINcSyYxd7q+kx9fA==", + "dev": true, + "dependencies": { + "@jridgewell/sourcemap-codec": "^1.4.13" + }, + "engines": { + "node": ">=12" + } + }, "node_modules/@jridgewell/gen-mapping": { "version": "0.3.5", "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.5.tgz", @@ -6015,6 +6047,25 @@ } } }, + "node_modules/@storybook/builder-vite": { + "version": "8.4.6", + "resolved": "https://registry.npmjs.org/@storybook/builder-vite/-/builder-vite-8.4.6.tgz", + "integrity": "sha512-PyJsaEPyuRFFEplpNUi+nbuJd7d1DC2dAZjpsaHTXyqg5iPIbkIgsbCJLUDeIXnUDqM/utjmMpN0sQKJuhIc6w==", + "dev": true, + "dependencies": { + "@storybook/csf-plugin": "8.4.6", + "browser-assert": "^1.2.1", + "ts-dedent": "^2.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/storybook" + }, + "peerDependencies": { + "storybook": "^8.4.6", + "vite": "^4.0.0 || ^5.0.0 || ^6.0.0" + } + }, "node_modules/@storybook/builder-webpack5": { "version": "8.4.6", "resolved": "https://registry.npmjs.org/@storybook/builder-webpack5/-/builder-webpack5-8.4.6.tgz", @@ -6461,6 +6512,99 @@ "storybook": "^8.4.6" } }, + "node_modules/@storybook/react-vite": { + "version": "8.4.6", + "resolved": "https://registry.npmjs.org/@storybook/react-vite/-/react-vite-8.4.6.tgz", + "integrity": "sha512-bVoYj3uJRz0SknK2qN3vBVSoEXsvyARQLuHjP9eX0lWBd9XSxZinmVbexPdD0OeJYcJIdmbli2/Gw7/hu5CjFA==", + "dev": true, + "dependencies": { + "@joshwooding/vite-plugin-react-docgen-typescript": "0.4.2", + "@rollup/pluginutils": "^5.0.2", + "@storybook/builder-vite": "8.4.6", + "@storybook/react": "8.4.6", + "find-up": "^5.0.0", + "magic-string": "^0.30.0", + "react-docgen": "^7.0.0", + "resolve": "^1.22.8", + "tsconfig-paths": "^4.2.0" + }, + "engines": { + "node": ">=18.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/storybook" + }, + "peerDependencies": { + "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta", + "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta", + "storybook": "^8.4.6", + "vite": "^4.0.0 || ^5.0.0 || ^6.0.0" + } + }, + "node_modules/@storybook/react-vite/node_modules/@rollup/pluginutils": { + "version": "5.1.3", + "resolved": "https://registry.npmjs.org/@rollup/pluginutils/-/pluginutils-5.1.3.tgz", + "integrity": "sha512-Pnsb6f32CD2W3uCaLZIzDmeFyQ2b8UWMFI7xtwUezpcGBDVDW6y9XgAWIlARiGAo6eNF5FK5aQTr0LFyNyqq5A==", + "dev": true, + "dependencies": { + "@types/estree": "^1.0.0", + "estree-walker": "^2.0.2", + "picomatch": "^4.0.2" + }, + "engines": { + "node": ">=14.0.0" + }, + "peerDependencies": { + "rollup": "^1.20.0||^2.0.0||^3.0.0||^4.0.0" + }, + "peerDependenciesMeta": { + "rollup": { + "optional": true + } + } + }, + "node_modules/@storybook/react-vite/node_modules/@types/estree": { + "version": "1.0.6", + "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.6.tgz", + "integrity": "sha512-AYnb1nQyY49te+VRAVgmzfcgjYS91mY5P0TKUDCLEM+gNnA+3T6rWITXRLYCpahpqSQbN5cE+gHpnPyXjHWxcw==", + "dev": true + }, + "node_modules/@storybook/react-vite/node_modules/picomatch": { + "version": "4.0.2", + "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.2.tgz", + "integrity": "sha512-M7BAV6Rlcy5u+m6oPhAPFgJTzAioX/6B0DxyvDlo9l8+T3nLKbrczg2WLUyzd45L8RqfUMyGPzekbMvX2Ldkwg==", + "dev": true, + "engines": { + "node": ">=12" + }, + "funding": { + "url": "https://github.com/sponsors/jonschlinkert" + } + }, + "node_modules/@storybook/react-vite/node_modules/strip-bom": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/strip-bom/-/strip-bom-3.0.0.tgz", + "integrity": "sha512-vavAMRXOgBVNF6nyEEmL3DBK19iRpDcoIwW+swQ+CbGiu7lju6t+JklA1MHweoWtadgt4ISVUsXLyDq34ddcwA==", + "dev": true, + "engines": { + "node": ">=4" + } + }, + "node_modules/@storybook/react-vite/node_modules/tsconfig-paths": { + "version": "4.2.0", + "resolved": "https://registry.npmjs.org/tsconfig-paths/-/tsconfig-paths-4.2.0.tgz", + "integrity": "sha512-NoZ4roiN7LnbKn9QqE1amc9DJfzvZXxF4xDavcOWt1BPkdx+m+0gJuPM+S0vCe7zTJMYUP0R8pO2XMr+Y8oLIg==", + "dev": true, + "dependencies": { + "json5": "^2.2.2", + "minimist": "^1.2.6", + "strip-bom": "^3.0.0" + }, + "engines": { + "node": ">=6" + } + }, "node_modules/@storybook/react-webpack5": { "version": "8.4.6", "resolved": "https://registry.npmjs.org/@storybook/react-webpack5/-/react-webpack5-8.4.6.tgz", diff --git a/package.json b/package.json index e130b6745..6f6ff497f 100644 --- a/package.json +++ b/package.json @@ -131,6 +131,7 @@ "@storybook/manager-api": "^8.4.6", "@storybook/preview-api": "^8.4.6", "@storybook/react": "^8.4.6", + "@storybook/react-vite": "^8.4.6", "@storybook/react-webpack5": "^8.4.6", "@storybook/test-runner": "^0.20.0", "@storybook/types": "^8.4.6",