chore(deps): Webpack v5 in Storybook (#2193)

package.json

@@ -20,8 +20,8 @@
     "lint:packages": "node scripts/lint-packages.js",
     "prettier": "prettier --write '**/*.{jsx,js,ts,tsx,md,mdx}'",
     "prettier:check": "prettier --check '**/*.{jsx,js,ts,tsx,md,mdx}'",
-    "storybook": "start-storybook -p 9001 -c ./scripts/.storybook -s ./scripts/.storybook/public",
-    "storybook:build": "yarn build-storybook -c ./scripts/.storybook -s ./scripts/.storybook/public -o dist-storybook",
+    "storybook": "start-storybook -p 9001 -c ./scripts/.storybook",
+    "storybook:build": "yarn build-storybook -c ./scripts/.storybook -o dist-storybook",
     "test": "jest",
     "tsc": "tsc --noEmit",
     "tsc:watch": "tsc --noEmit --watch",
@@ -47,6 +47,7 @@
     }
   },
   "resolutions": {
+    "@storybook/react/webpack": "^5",
     "@types/react": "16.14.22",
     "@types/react-dom": "16.9.14"
   },
@@ -75,11 +76,13 @@
     "@parcel/transformer-typescript-types": "2.6.2",
     "@segment/snippet": "^4.15.3",
     "@size-limit/preset-big-lib": "^8.0.1",
-    "@storybook/addon-a11y": "^6.4.19",
-    "@storybook/addon-essentials": "^6.4.19",
-    "@storybook/addon-storysource": "^6.4.19",
-    "@storybook/react": "^6.4.19",
-    "@storybook/theming": "^6.4.19",
+    "@storybook/addon-a11y": "^6.5.10",
+    "@storybook/addon-essentials": "^6.5.10",
+    "@storybook/addon-storysource": "^6.5.10",
+    "@storybook/builder-webpack5": "^6.5.10",
+    "@storybook/manager-webpack5": "^6.5.10",
+    "@storybook/react": "^6.5.10",
+    "@storybook/theming": "^6.5.10",
     "@testing-library/jest-dom": "5.16.1",
     "@testing-library/react": "12.1.4",
     "@testing-library/user-event": "13.5.0",
@@ -154,7 +157,8 @@
     "size-limit": "^8.0.1",
     "style-loader": "^2.0.0",
     "turbo": "^1.0.6",
-    "typescript": "4.7.3"
+    "typescript": "4.7.3",
+    "webpack": "5"
   },
   "engines": {
     "node": ">=14.17.0",

scripts/.storybook/main.js

@@ -1,7 +1,6 @@
 const path = require('path');
 
 module.exports = {
-  stories: ['./docs/**/*.stories.mdx', '../../packages/**/*.stories.@(ts|md)x'],
   addons: [
     '@storybook/addon-essentials',
     '@storybook/addon-a11y',
@@ -16,6 +15,14 @@ module.exports = {
     },
   ],
 
+  core: {
+    builder: 'webpack5',
+  },
+
+  staticDirs: ['./public'],
+
+  stories: ['./docs/**/*.stories.mdx', '../../packages/**/*.stories.@(ts|md)x'],
+
   webpackFinal: async (config, { configType }) => {
     // We need to split into chunks to avoid terser running out of memory
     // when trying to minify one huge JS file