From fadfb7c03a19d4e72349c542b31aed17fb7d265f Mon Sep 17 00:00:00 2001 From: Daniel Main Date: Thu, 23 Dec 2021 22:31:38 +0100 Subject: [PATCH] [DDW-596] Upgraded to storybook 6 --- package.json | 16 ++-- storybook/{addons.js => _addons.js} | 0 storybook/{config.js => _config.js} | 0 storybook/main.js | 62 ++++++++++++++ storybook/webpack.config.js | 126 ---------------------------- 5 files changed, 71 insertions(+), 133 deletions(-) rename storybook/{addons.js => _addons.js} (100%) rename storybook/{config.js => _config.js} (100%) create mode 100644 storybook/main.js delete mode 100644 storybook/webpack.config.js diff --git a/package.json b/package.json index 6ae06e363a..49f7198e2d 100644 --- a/package.json +++ b/package.json @@ -88,12 +88,14 @@ "@babel/register": "7.0.0", "@dump247/storybook-state": "1.6.1", "@pmmmwh/react-refresh-webpack-plugin": "0.5.3", - "@storybook/addon-actions": "5.3.14", - "@storybook/addon-knobs": "5.3.14", - "@storybook/addon-links": "5.3.14", - "@storybook/addons": "5.3.14", - "@storybook/core": "5.3.14", - "@storybook/react": "5.3.14", + "@storybook/addon-actions": "6.4.9", + "@storybook/addon-knobs": "6.4.0", + "@storybook/addon-links": "6.4.9", + "@storybook/addons": "6.4.9", + "@storybook/builder-webpack5": "^6.4.9", + "@storybook/core": "6.4.9", + "@storybook/manager-webpack5": "^6.4.9", + "@storybook/react": "6.4.9", "@testing-library/jest-dom": "5.15.1", "@testing-library/react": "12.1.2", "asar": "2.1.0", @@ -177,7 +179,7 @@ "transform-loader": "0.2.4", "utf-8-validate": "5.0.2", "webdriverio": "5.18.7", - "webpack": "5.64.4", + "webpack": "5.65.0", "webpack-cli": "4.9.1", "webpack-dev-server": "4.6.0", "ws": "7.3.1", diff --git a/storybook/addons.js b/storybook/_addons.js similarity index 100% rename from storybook/addons.js rename to storybook/_addons.js diff --git a/storybook/config.js b/storybook/_config.js similarity index 100% rename from storybook/config.js rename to storybook/_config.js diff --git a/storybook/main.js b/storybook/main.js new file mode 100644 index 0000000000..71551c16bf --- /dev/null +++ b/storybook/main.js @@ -0,0 +1,62 @@ +const MiniCssExtractPlugin = require('mini-css-extract-plugin'); +const path = require('path'); + +module.exports = { + alias: { + Renderer: path.resolve(__dirname, 'source/renderer'), + }, + stories: ['./stories/**/*.stories.@(js|mdx|ts)'], + addons: [ + '@storybook/addon-knobs', + '@storybook/addon-actions', + '@storybook/addon-links', + '@storybook/builder-webpack5', + '@storybook/manager-webpack5', + './addons/DaedalusMenu/register', + ], + core: { + builder: 'webpack5', + }, + // Make whatever fine-grained changes you need + 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', + { + loader: 'css-loader', + options: { + modules: { + localIdentName: '[name]_[local]', + }, + sourceMap: true, + importLoaders: true, + }, + }, + { + loader: 'sass-loader', + options: { + sourceMap: true, + implementation: require.resolve('sass'), + }, + }, + { + loader: 'babel-loader', + options: { + cacheCompression: false, + cacheDirectory: true, + plugins: [require.resolve('react-refresh/babel')].filter(Boolean), + }, + }, + ], + }); + + // Return the altered config + return config; + }, +}; diff --git a/storybook/webpack.config.js b/storybook/webpack.config.js deleted file mode 100644 index a57602be1b..0000000000 --- a/storybook/webpack.config.js +++ /dev/null @@ -1,126 +0,0 @@ -const AutoDllPlugin = require('autodll-webpack-plugin'); - -const isCi = process.env.CI && process.env.CI !== ''; - -module.exports = async ({ config }) => { - const [jsxRule] = config.module.rules; - jsxRule.use.unshift('thread-loader'); - // Use Auto DLL plugin for faster development builds - if (!isCi) { - const [htmlWebpackPlugin] = config.plugins; - const { templateParameters } = htmlWebpackPlugin.options; - htmlWebpackPlugin.options.templateParameters = (...args) => - Object.assign(templateParameters.call(null, ...args), { - dlls: ['./vendor.dll.js'], - }); - config.plugins.push( - new AutoDllPlugin({ - inject: true, - filename: 'vendor.dll.js', - entry: { - vendor: [ - '@storybook/addon-actions', - '@storybook/addon-knobs', - '@storybook/addon-links', - '@storybook/addons', - '@storybook/core', - '@storybook/react', - 'aes-js', - 'bignumber.js', - 'bip39', - 'blakejs', - 'bs58', - 'classnames', - 'es6-error', - 'faker', - 'humanize-duration', - 'lodash', - 'mobx', - 'mobx-react', - 'mobx-react-form', - 'mobx-react-router', - 'moment', - 'pbkdf2', - 'qrcode.react', - 'react', - 'react-copy-to-clipboard', - 'react-datetime', - 'react-dom', - 'react-router', - 'react-svg-inline', - 'recharts', - 'route-parser', - 'safe-buffer', - 'unorm', - 'validator', - ], - }, - }) - ); - } - return { - ...config, - cache: !isCi, - devtool: isCi ? 'none' : config.devtool, - optimization: { - minimize: false, - }, - module: { - rules: [ - jsxRule, - { - test: /\.scss/, - use: [ - { - loader: 'style-loader', - }, - { - loader: 'css-loader', - options: { - sourceMap: !isCi, - modules: true, - localIdentName: '[name]_[local]', - importLoaders: true, - }, - }, - { - loader: 'sass-loader', - options: { - implementation: require.resolve('sass'), - sourceMap: !isCi, - }, - }, - ], - }, - { - test: /\.css/, - use: [{ loader: 'css-loader', options: { sourceMap: !isCi } }], - }, - { - test: /\.inline\.svg$/, - use: 'svg-inline-loader', - }, - { - test: /\.(woff2?|eot|ttf|otf|png|jpe?g|gif|svg)(\?.*)?$/, - exclude: /\.inline\.svg$/, - use: { - loader: 'url-loader', - options: { - limit: 10000, - }, - }, - }, - { - test: /\.md$/, - use: [ - { loader: 'html-loader', options: { importLoaders: true } }, - { loader: 'markdown-loader?gfm=false' }, - ], - }, - ], - }, - node: { - fs: 'empty', - }, - }; -};