From c954d7894f402ee95488b4abd25a20394c259287 Mon Sep 17 00:00:00 2001 From: Daniela Date: Fri, 2 Dec 2022 16:30:55 +0100 Subject: [PATCH 1/5] upgrade webpack for storybook --- .storybook/main.js | 11 ++++++++++- package.json | 12 +++++++----- 2 files changed, 17 insertions(+), 6 deletions(-) diff --git a/.storybook/main.js b/.storybook/main.js index e563dc3db..6b4d7be59 100644 --- a/.storybook/main.js +++ b/.storybook/main.js @@ -1,6 +1,12 @@ const path = require('path'); +// loading our custom webpack.config.js +const webpackConfig = require('visyn_scripts/config/webpack.config.js'); + module.exports = { + core: { + builder: 'webpack5', + }, stories: [ "../src/**/*.stories.mdx", "../src/**/*.stories.@(js|jsx|ts|tsx)" @@ -19,6 +25,9 @@ module.exports = { ...(config.resolve.alias || {}), 'tdp_core/dist': path.resolve(__dirname, '../', 'dist') }; - return config; + return { + // using our custom webpack config + ...webpackConfig({ workspace_mode: 'single' }, { mode: 'production' }) + }; }, } \ No newline at end of file diff --git a/package.json b/package.json index 91f9a1c4a..9be3bd4ef 100644 --- a/package.json +++ b/package.json @@ -104,12 +104,14 @@ "devDependencies": { "@babel/core": "^7.17.7", "@babel/plugin-transform-typescript": "7.17.12", - "@storybook/addon-actions": "^6.5.9", - "@storybook/addon-essentials": "^6.5.9", - "@storybook/addon-interactions": "^6.5.9", - "@storybook/addon-links": "^6.5.9", + "@storybook/addon-actions": "^6.5.14", + "@storybook/addon-essentials": "^6.5.14", + "@storybook/addon-interactions": "^6.5.14", + "@storybook/addon-links": "^6.5.14", + "@storybook/builder-webpack5": "^6.5.14", + "@storybook/manager-webpack5": "^6.5.14", "@storybook/preset-scss": "^1.0.3", - "@storybook/react": "^6.5.9", + "@storybook/react": "^6.5.14", "@storybook/testing-library": "0.0.9", "cypress": "^9.5.2", "local-cypress": "^1.2.5" From bf625e912c25c069c175b59762c37c039e5f3fc6 Mon Sep 17 00:00:00 2001 From: Daniela Date: Fri, 2 Dec 2022 18:44:03 +0100 Subject: [PATCH 2/5] use webpack.config from storybook and override rules --- .storybook/main.js | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) diff --git a/.storybook/main.js b/.storybook/main.js index 6b4d7be59..61d591627 100644 --- a/.storybook/main.js +++ b/.storybook/main.js @@ -1,4 +1,5 @@ const path = require('path'); +const MiniCssExtractPlugin = require('mini-css-extract-plugin'); // loading our custom webpack.config.js const webpackConfig = require('visyn_scripts/config/webpack.config.js'); @@ -26,8 +27,9 @@ module.exports = { 'tdp_core/dist': path.resolve(__dirname, '../', 'dist') }; return { - // using our custom webpack config - ...webpackConfig({ workspace_mode: 'single' }, { mode: 'production' }) - }; + ...config, + module: { ...config.module, rules: webpackConfig({ workspace_mode: 'single' }, { mode: 'production' }).module.rules }, + plugins: [new MiniCssExtractPlugin()] + } }, } \ No newline at end of file From 5d81dd0ba0b26e1cc4d74d25bdea5dab5c35db18 Mon Sep 17 00:00:00 2001 From: Daniela Date: Fri, 2 Dec 2022 19:23:52 +0100 Subject: [PATCH 3/5] add HtmlWebpackPlugin --- .storybook/main.js | 40 ++++++++++++++++++++++++++++++++++++++-- 1 file changed, 38 insertions(+), 2 deletions(-) diff --git a/.storybook/main.js b/.storybook/main.js index 61d591627..f25f5bfd6 100644 --- a/.storybook/main.js +++ b/.storybook/main.js @@ -1,9 +1,16 @@ const path = require('path'); const MiniCssExtractPlugin = require('mini-css-extract-plugin'); +const HtmlWebpackPlugin = require('html-webpack-plugin'); + // loading our custom webpack.config.js const webpackConfig = require('visyn_scripts/config/webpack.config.js'); + +const appPkg = require(path.join('./../', 'package.json')); +const isEnvProduction = true; + +const { entries } = appPkg.visyn; module.exports = { core: { builder: 'webpack5', @@ -24,12 +31,41 @@ module.exports = { // These can only be resolved in a workspace currently, and not in the standalone repo. config.resolve.alias = { ...(config.resolve.alias || {}), - 'tdp_core/dist': path.resolve(__dirname, '../', 'dist') + 'tdp_core/dist': path.resolve(__dirname, '../', 'dist'), }; + // config.resolve.alias["core-js/modules"] = "@storybook/core/node_modules/core-js/modules"; + // config.resolve.alias["core-js/features"] = "@storybook/core/node_modules/core-js/features"; + config.plugins.push(new MiniCssExtractPlugin()); + config.plugins.push( new HtmlWebpackPlugin({ + inject: true, + template: './storybook-static/index.html', + filename: "storybook test", + title: "Storybook", + excludeChunks: true, + meta: { + description: "storybook test description", + }, + ...(isEnvProduction + ? { + minify: { + removeComments: true, + collapseWhitespace: true, + removeRedundantAttributes: true, + useShortDoctype: true, + removeEmptyAttributes: true, + removeStyleLinkTypeAttributes: true, + keepClosingSlash: true, + minifyJS: true, + minifyCSS: true, + minifyURLs: true, + }, + } + : {}), + }), + ); return { ...config, module: { ...config.module, rules: webpackConfig({ workspace_mode: 'single' }, { mode: 'production' }).module.rules }, - plugins: [new MiniCssExtractPlugin()] } }, } \ No newline at end of file From 0a6f803b67178683be4b04c61830354a4b405caf Mon Sep 17 00:00:00 2001 From: Michael Puehringer Date: Wed, 11 Jan 2023 16:43:59 +0100 Subject: [PATCH 4/5] Fix storybook path aliases --- .storybook/main.js | 71 +++++++--------------------------------------- package.json | 3 +- 2 files changed, 13 insertions(+), 61 deletions(-) diff --git a/.storybook/main.js b/.storybook/main.js index f25f5bfd6..ef6402dda 100644 --- a/.storybook/main.js +++ b/.storybook/main.js @@ -1,71 +1,22 @@ const path = require('path'); -const MiniCssExtractPlugin = require('mini-css-extract-plugin'); -const HtmlWebpackPlugin = require('html-webpack-plugin'); - -// loading our custom webpack.config.js -const webpackConfig = require('visyn_scripts/config/webpack.config.js'); - - -const appPkg = require(path.join('./../', 'package.json')); -const isEnvProduction = true; - -const { entries } = appPkg.visyn; module.exports = { core: { builder: 'webpack5', }, - stories: [ - "../src/**/*.stories.mdx", - "../src/**/*.stories.@(js|jsx|ts|tsx)" - ], - addons: [ - "@storybook/addon-links", - "@storybook/addon-essentials", - "@storybook/addon-interactions", - "@storybook/preset-scss" - ], - framework: "@storybook/react", + stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'], + addons: ['@storybook/addon-links', '@storybook/addon-essentials', '@storybook/addon-interactions', '@storybook/preset-scss', 'storybook-addon-swc'], + framework: '@storybook/react', webpackFinal: async (config) => { - // Add tdp_core/dist as alias, as we have scss/code imports like tdp_core/dist/assets/... - // These can only be resolved in a workspace currently, and not in the standalone repo. config.resolve.alias = { ...(config.resolve.alias || {}), - 'tdp_core/dist': path.resolve(__dirname, '../', 'dist'), + // I have no clue why this is required, but if this is missing we get a "Can't resolve '../../assets/icons/datavisyn_logo.svg' in '.../src/scss'"" + '../../assets': path.resolve(__dirname, '../src/assets'), + // Add tdp_core/dist as alias, as we have scss/code imports like tdp_core/dist/assets/... + 'tdp_core/dist': path.resolve(__dirname, '../src'), + 'tdp_core/src': path.resolve(__dirname, '../src'), + 'tdp_core': path.resolve(__dirname, '../src'), }; - // config.resolve.alias["core-js/modules"] = "@storybook/core/node_modules/core-js/modules"; - // config.resolve.alias["core-js/features"] = "@storybook/core/node_modules/core-js/features"; - config.plugins.push(new MiniCssExtractPlugin()); - config.plugins.push( new HtmlWebpackPlugin({ - inject: true, - template: './storybook-static/index.html', - filename: "storybook test", - title: "Storybook", - excludeChunks: true, - meta: { - description: "storybook test description", - }, - ...(isEnvProduction - ? { - minify: { - removeComments: true, - collapseWhitespace: true, - removeRedundantAttributes: true, - useShortDoctype: true, - removeEmptyAttributes: true, - removeStyleLinkTypeAttributes: true, - keepClosingSlash: true, - minifyJS: true, - minifyCSS: true, - minifyURLs: true, - }, - } - : {}), - }), - ); - return { - ...config, - module: { ...config.module, rules: webpackConfig({ workspace_mode: 'single' }, { mode: 'production' }).module.rules }, - } + return config; }, -} \ No newline at end of file +}; diff --git a/package.json b/package.json index 5efc32619..80e72d32f 100644 --- a/package.json +++ b/package.json @@ -114,7 +114,8 @@ "@storybook/preset-scss": "^1.0.3", "@storybook/react": "^6.5.14", "@storybook/testing-library": "0.0.9", - "cypress": "^11.2.0" + "cypress": "^11.2.0", + "storybook-addon-swc": "^1.1.9" }, "overrides": { "@types/react": "^16.9.23", From ffd910b4d4936ef138eb8dd1e7537895ce278b52 Mon Sep 17 00:00:00 2001 From: Daniela Date: Tue, 17 Jan 2023 13:42:30 +0100 Subject: [PATCH 5/5] use latest version of storybook --- package.json | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/package.json b/package.json index 80e72d32f..7d0cd90dd 100644 --- a/package.json +++ b/package.json @@ -105,14 +105,14 @@ "devDependencies": { "@babel/core": "^7.17.7", "@babel/plugin-transform-typescript": "7.17.12", - "@storybook/addon-actions": "^6.5.14", - "@storybook/addon-essentials": "^6.5.14", - "@storybook/addon-interactions": "^6.5.14", - "@storybook/addon-links": "^6.5.14", - "@storybook/builder-webpack5": "^6.5.14", - "@storybook/manager-webpack5": "^6.5.14", + "@storybook/addon-actions": "^6.5.15", + "@storybook/addon-essentials": "^6.5.15", + "@storybook/addon-interactions": "^6.5.15", + "@storybook/addon-links": "^6.5.15", + "@storybook/builder-webpack5": "^6.5.15", + "@storybook/manager-webpack5": "^6.5.15", "@storybook/preset-scss": "^1.0.3", - "@storybook/react": "^6.5.14", + "@storybook/react": "^6.5.15", "@storybook/testing-library": "0.0.9", "cypress": "^11.2.0", "storybook-addon-swc": "^1.1.9"