chore(deps): upgrade babel [EE-5219] (#9034)

.github/workflows/validate-openapi-spec.yaml

@@ -21,7 +21,7 @@ jobs:
         run: cd ./api && go get -t -v -d ./...
       - uses: actions/setup-node@v3
         with:
-          node-version: '14'
+          node-version: '18'
           cache: 'yarn'
       - run: yarn --frozen-lockfile
 

.storybook/main.js

@@ -1,58 +0,0 @@
-const TsconfigPathsPlugin = require('tsconfig-paths-webpack-plugin');
-
-module.exports = {
-  stories: ['../app/**/*.stories.mdx', '../app/**/*.stories.@(ts|tsx)'],
-  addons: [
-    '@storybook/addon-links',
-    '@storybook/addon-essentials',
-    {
-      name: '@storybook/addon-postcss',
-      options: {
-        cssLoaderOptions: {
-          importLoaders: 1,
-          modules: {
-            localIdentName: '[path][name]__[local]',
-            auto: true,
-            exportLocalsConvention: 'camelCaseOnly',
-          },
-        },
-        postcssLoaderOptions: {
-          implementation: require('postcss'),
-        },
-      },
-    },
-  ],
-  webpackFinal: (config) => {
-    config.resolve.plugins = [
-      ...(config.resolve.plugins || []),
-      new TsconfigPathsPlugin({
-        extensions: config.resolve.extensions,
-      }),
-    ];
-
-    const svgRule = config.module.rules.find((rule) => rule.test && typeof rule.test.test === 'function' && rule.test.test('.svg'));
-    svgRule.test = new RegExp(svgRule.test.source.replace('svg|', ''));
-
-    config.module.rules.unshift({
-      test: /\.svg$/i,
-      type: 'asset',
-      resourceQuery: { not: [/c/] }, // exclude react component if *.svg?url
-    });
-
-    config.module.rules.unshift({
-      test: /\.svg$/i,
-      issuer: /\.(js|ts)(x)?$/,
-      resourceQuery: /c/, // *.svg?c
-      use: [{ loader: '@svgr/webpack', options: { icon: true } }],
-    });
-
-    return config;
-  },
-  core: {
-    builder: 'webpack5',
-  },
-  staticDirs: ['./public'],
-  typescript: {
-    reactDocgen: 'react-docgen-typescript-plugin',
-  },
-};

.storybook/main.ts

@@ -0,0 +1,95 @@
+import { StorybookConfig } from '@storybook/react-webpack5';
+
+import TsconfigPathsPlugin from 'tsconfig-paths-webpack-plugin';
+import { Configuration } from 'webpack';
+import postcss from 'postcss';
+const config: StorybookConfig = {
+  stories: ['../app/**/*.stories.@(ts|tsx)'],
+  addons: [
+    '@storybook/addon-links',
+    '@storybook/addon-essentials',
+    {
+      name: '@storybook/addon-styling',
+      options: {
+        cssLoaderOptions: {
+          importLoaders: 1,
+          modules: {
+            localIdentName: '[path][name]__[local]',
+            auto: true,
+            exportLocalsConvention: 'camelCaseOnly',
+          },
+        },
+        postCss: {
+          implementation: postcss,
+        },
+      },
+    },
+  ],
+  webpackFinal: (config) => {
+    const rules = config?.module?.rules || [];
+
+    const imageRule = rules.find((rule) => {
+      const test = (rule as { test: RegExp }).test;
+
+      if (!test) {
+        return false;
+      }
+
+      return test.test('.svg');
+    }) as { [key: string]: any };
+
+    imageRule.exclude = /\.svg$/;
+
+    rules.unshift({
+      test: /\.svg$/i,
+      type: 'asset',
+      resourceQuery: {
+        not: [/c/],
+      }, // exclude react component if *.svg?url
+    });
+
+    rules.unshift({
+      test: /\.svg$/i,
+      issuer: /\.(js|ts)(x)?$/,
+      resourceQuery: /c/,
+      // *.svg?c
+      use: [
+        {
+          loader: '@svgr/webpack',
+          options: {
+            icon: true,
+          },
+        },
+      ],
+    });
+    return {
+      ...config,
+      resolve: {
+        ...config.resolve,
+        plugins: [
+          ...(config.resolve?.plugins || []),
+          new TsconfigPathsPlugin({
+            extensions: config.resolve?.extensions,
+          }),
+        ],
+      },
+      module: {
+        ...config.module,
+        rules,
+      },
+    } satisfies Configuration;
+  },
+  staticDirs: ['./public'],
+  typescript: {
+    reactDocgen: 'react-docgen-typescript',
+  },
+  framework: {
+    name: '@storybook/react-webpack5',
+    options: {},
+  },
+  docs: {
+    autodocs: true,
+  },
+};
+
+export default config;

package.json

@@ -24,8 +24,8 @@
     "lint": "eslint --cache --fix './**/*.{js,jsx,ts,tsx}'",
     "test": "jest --silent",
     "sb": "yarn storybook",
-    "storybook": "start-storybook -p 6006",
+    "storybook": "storybook dev -p 6006",
-    "storybook:build": "build-storybook -o ./dist/storybook",
+    "storybook:build": "storybook build -o ./dist/storybook",
     "analyze-webpack": "webpack --config ./webpack/webpack.analyze.js",
     "prepare": "husky install"
   },
@@ -126,19 +126,18 @@
   },
   "devDependencies": {
     "@apidevtools/swagger-cli": "^4.0.4",
-    "@babel/core": "^7.16.0",
+    "@babel/core": "^7.22.1",
-    "@babel/preset-env": "^7.16.4",
+    "@babel/preset-env": "^7.22.4",
-    "@babel/preset-react": "^7.16.0",
+    "@babel/preset-react": "^7.22.3",
-    "@babel/preset-typescript": "^7.16.0",
+    "@babel/preset-typescript": "^7.21.5",
     "@simbathesailor/use-what-changed": "^2.0.0",
-    "@storybook/addon-actions": "^6.5.16",
+    "@storybook/addon-actions": "^7.0.18",
-    "@storybook/addon-essentials": "^6.5.16",
+    "@storybook/addon-essentials": "^7.0.18",
-    "@storybook/addon-links": "^6.5.16",
+    "@storybook/addon-links": "^7.0.18",
-    "@storybook/addon-postcss": "^2.0.0",
+    "@storybook/addon-styling": "^1.0.8",
-    "@storybook/builder-webpack5": "^6.5.16",
+    "@storybook/react": "^7.0.18",
-    "@storybook/manager-webpack5": "^6.5.16",
+    "@storybook/react-webpack5": "^7.0.18",
-    "@storybook/react": "^6.5.16",
+    "@svgr/webpack": "^8.0.1",
-    "@svgr/webpack": "^6.2.1",
     "@testing-library/jest-dom": "^5.16.1",
     "@testing-library/react": "^12.1.2",
     "@testing-library/user-event": "^13.5.0",
@@ -160,9 +159,9 @@
     "@typescript-eslint/parser": "^5.59.5",
     "auto-ngtemplate-loader": "^2.0.1",
     "autoprefixer": "^10.4.14",
-    "babel-jest": "^27.4.2",
+    "babel-jest": "^29.5.0",
-    "babel-loader": "^8.2.3",
+    "babel-loader": "^9.1.2",
-    "babel-plugin-i18next-extract": "^0.8.3",
+    "babel-plugin-i18next-extract": "^0.9.0",
     "babel-plugin-lodash": "^3.3.4",
     "clean-terminal-webpack-plugin": "^3.0.0",
     "clean-webpack-plugin": "^4.0.0",
@@ -204,13 +203,14 @@
     "react-test-renderer": "^17.0.2",
     "source-map-loader": "^3.0.0",
     "speed-measure-webpack-plugin": "^1.5.0",
+    "storybook": "^7.0.18",
     "storybook-css-modules-preset": "^1.1.1",
     "style-loader": "^3.3.3",
     "swagger2openapi": "^7.0.8",
     "tailwindcss": "3.1.4",
     "tsconfig-paths-webpack-plugin": "^4.0.1",
     "typescript": "^5.0.4",
-    "webpack": "^5.82.1",
+    "webpack": "^5.84.1",
     "webpack-build-notifier": "^2.3.0",
     "webpack-bundle-analyzer": "^4.8.0",
     "webpack-cli": "^5.1.1",