chore(storybook): ✨ add webpack 5 support

.storybook/main.js

@@ -2,6 +2,7 @@ const path = require("path");
 const tsconfig = path.resolve(__dirname, "../tsconfig.storybook.json");
 
 module.exports = {
+  core: { builder: "webpack5" },
   stories: ["../src/**/*.stories.@(js|jsx|ts|tsx)"],
   addons: [
     "storybook-addon-preview",
@@ -16,11 +17,4 @@ module.exports = {
       },
     },
   ],
-  // Need to configure typescript manually otherwise addons will not infer from types
-  // https://github.com/storybookjs/storybook/issues/11146#issuecomment-643878741
-  typescript: {
-    reactDocgenTypescriptOptions: {
-      tsconfigPath: tsconfig,
-    },
-  },
 };

package.json

@@ -37,21 +37,21 @@
   ],
   "scripts": {
     "postinstall": "concurrently \"husky install\" \"patch-package\"",
-    "storybook": "yarn generatejs && start-storybook -p 6006",
+    "storybook": "TAILWIND_MODE=watch start-storybook -p 6006",
+    "generatejs": "node scripts/generate-js",
     "test": "jest --config ./jest.config.ts --no-cache",
     "tsd": "tsd",
     "keys": "node scripts/builds/keys",
     "lint": "eslint . --ext .tsx,.ts,.jsx,.js",
     "lint:fix": "eslint . --ext .tsx,.ts,.jsx,.js --fix",
     "lint:package": "sort-package-json",
     "format": "prettier --write \"./**/*.{js,ts,css,less,json,md,html,yml,yaml,pcss,jsx,tsx}\"",
-    "format:package": "sort-package-json",
-    "docs": "node scripts/builds/docs.js",
-    "prebuild": "rimraf dist",
+      "format:package": "sort-package-json",
+      "docs": "node scripts/builds/docs.js",
+      "prebuild": "rimraf dist",
     "build": "concurrently yarn:build:*",
     "build:cjs": "cross-env BABEL_ENV=cjs babel src --extensions .ts,.tsx -d dist/cjs --source-maps",
     "build:esm": "cross-env BABEL_ENV=esm babel src --extensions .ts,.tsx -d dist/esm --source-maps",
-    "generatejs": "node scripts/generate-js",
     "storybook-build": "yarn generatejs && build-storybook",
     "prepublishOnly": "yarn test && yarn build && pinst --disable",
     "postpublish": "pinst --enable",
@@ -116,11 +116,13 @@
     "@commitlint/config-conventional": "12.1.4",
     "@emotion/css": "11.1.3",
     "@react-spring/web": "9.2.3",
-    "@storybook/addon-a11y": "6.3.0-rc.9",
-    "@storybook/addon-actions": "6.3.0-rc.9",
-    "@storybook/addon-essentials": "6.3.0-rc.9",
+    "@storybook/addon-a11y": "6.3.0-rc.11",
+    "@storybook/addon-actions": "6.3.0-rc.11",
+    "@storybook/addon-essentials": "6.3.0-rc.11",
     "@storybook/addon-postcss": "^2.0.0",
-    "@storybook/react": "6.3.0-rc.9",
+    "@storybook/builder-webpack5": "^6.3.0-rc.11",
+    "@storybook/manager-webpack5": "^6.3.0-rc.11",
+    "@storybook/react": "6.3.0-rc.11",
     "@testing-library/dom": "^7.28.1",
     "@testing-library/jest-dom": "^5.14.1",
     "@testing-library/react": "^11.2.7",
@@ -132,7 +134,7 @@
     "@types/mockdate": "^3.0.0",
     "@types/node": "^15.12.2",
     "@types/react": "17.0.11",
-    "@types/react-dom": "17.0.7",
+    "@types/react-dom": "17.0.8",
     "@types/react-transition-group": "4.4.1",
     "@types/testing-library__jest-dom": "5.14.0",
     "@typescript-eslint/eslint-plugin": "4.27.0",
@@ -193,12 +195,12 @@
     "standard-version": "9.3.0",
     "storybook-addon-preview": "^2.1.2",
     "strip-comments": "^2.0.1",
-    "tailwindcss": "^2.1.4",
+    "tailwindcss": "^2.2.0",
     "ts-jest": "^27.0.3",
     "ts-morph": "^11.0.0",
     "ts-node": "^10.0.0",
     "tsd": "^0.17.0",
-    "typescript": "4.3.3",
+    "typescript": "4.3.4",
     "webpack": "^5.39.1",
     "yaml": "^1.10.2"
   },