fix(storybook): upgrade to webpack5 (#810)

* upgrade webpack for storybook

* use webpack.config from storybook and override rules

* add HtmlWebpackPlugin

* Fix storybook path aliases

* use latest version of storybook

Co-authored-by: Michael Puehringer <[email protected]>
Co-authored-by: Michael Pühringer <[email protected]>

.storybook/main.js

@@ -1,24 +1,22 @@
 const path = require('path');
 
 module.exports = {
-  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",
+  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', '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'),
     };
     return config;
   },
-}
+};

package.json

@@ -105,14 +105,17 @@
   "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.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.9",
+    "@storybook/react": "^6.5.15",
     "@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",