fix: upgrade storybook & use webpack 5 with storybook (#182)

this change fixes optional chaining issue which was fixed in acord@v8 and that is fixed in webpack 5

reference link: webpack/webpack#10227 (comment)

babel.config.json

@@ -0,0 +1,4 @@
+// this babel file is specifically for storybook. this is not being used for creating build of components
+{
+  "presets": ["@babel/preset-typescript", "@babel/preset-env"]
+}

package.json

@@ -113,17 +113,21 @@
   },
   "devDependencies": {
     "@babel/core": "^7.15.8",
+    "@babel/preset-env": "7.20.2",
+    "@babel/preset-typescript": "^7.18.6",
     "@commitlint/cli": "^17.1.2",
     "@commitlint/config-conventional": "^17.1.0",
     "@pangolindex/sdk": "4.0.2",
     "@rollup/plugin-commonjs": "^21.0.0",
     "@rollup/plugin-json": "^4.1.0",
     "@rollup/plugin-node-resolve": "^13.0.5",
     "@rollup/plugin-url": "^7.0.0",
-    "@storybook/addon-actions": "^6.3.12",
-    "@storybook/addon-essentials": "^6.3.12",
-    "@storybook/addon-links": "^6.3.12",
-    "@storybook/react": "^6.3.12",
+    "@storybook/addon-actions": "6.5.14",
+    "@storybook/addon-essentials": "6.5.14",
+    "@storybook/addon-links": "6.5.14",
+    "@storybook/builder-webpack5": "6.5.14",
+    "@storybook/manager-webpack5": "6.5.14",
+    "@storybook/react": "6.5.14",
     "@types/mixpanel-browser": "^2.38.0",
     "@types/numeral": "^2.0.2",
     "@types/prop-types": "^15.7.4",
@@ -156,6 +160,7 @@
     "eslint-plugin-testing-library": "^4.12.4",
     "husky": "^7.0.0",
     "lint-staged": "^11.2.3",
+    "node-polyfill-webpack-plugin": "^2.0.1",
     "prettier": "^2.4.1",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",

src/.storybook/main.js

@@ -1,4 +1,5 @@
 const path = require('path');
+const NodePolyfillPlugin = require('node-polyfill-webpack-plugin');
 
 module.exports = {
   webpackFinal: async (config) => {
@@ -18,10 +19,17 @@ module.exports = {
 
     return {
       ...updatedConfig,
-      plugins,
+      // we are using NodePolyfillPlugin to support node polyfill in webpack 5
+      plugins: [...plugins, new NodePolyfillPlugin()],
     };
   },
 
   stories: ['../**/*.stories.mdx', '../**/*.stories.@(js|jsx|ts|tsx)'],
-  addons: ['@storybook/addon-links', '@storybook/addon-essentials', '@storybook/preset-create-react-app'],
+  addons: ['@storybook/addon-links', '@storybook/addon-essentials'],
+  features: {
+    babelModeV7: true,
+  },
+  core: {
+    builder: 'webpack5',
+  },
 };