@elliemae/pui-cli 5.17.2 → 6.0.0-beta.10

package/lib/cli-commands/pack.js

@@ -1,8 +1,10 @@
+/* eslint-disable max-lines */
 const { exit } = require('yargs');
 const path = require('path');
 const { writeFile, readFile } = require('fs/promises');
 const { exec, logInfo, logError, logSuccess } = require('./utils');
 const { isTypeScriptEnabled } = require('../typescript/util');
+const { esBuild } = require('../esbuild');
 
 const { name } = require('../../package.json');
 
@@ -37,14 +39,9 @@ async function createPackageJson(file, commonJS, sideEffects) {
   await writeFile(file, packageJSON);
 }
 
-async function nodeBuild({ srcPath, commonJS, emitModuleType, target }) {
+async function nodeBuild({ srcPath, commonJS, emitModuleType }) {
   const outDir = `./dist/${commonJS ? 'cjs' : 'es'}`;
-  const targetEnv = target === 'node' ? 'TARGET_ENV=node' : '';
-  const babelEnv = commonJS ? ' ES_MODULES=false' : '';
-  await exec(
-    `cross-env NODE_ENV=production MODULE_EXTENSIONS=true ${targetEnv}${babelEnv} babel --extensions ".ts,.tsx,.js,.jsx"  ${srcPath} --out-dir ${outDir} --copy-files --no-copy-ignored --ignore **/*.test.js --ignore **/*.test.ts --ignore **/*.spec.js --ignore **/*.spec.ts --ignore **/*.test.jsx --ignore **/*.test.tsx --ignore **/*.spec.jsx --ignore **/*.spec.tsx`,
-    { shell: true, stdio: 'inherit' },
-  );
+  await esBuild({ srcPath, commonJS });
   if (emitModuleType) {
     const sideEffects = await getSideEffects();
     await createPackageJson(
@@ -79,7 +76,6 @@ async function pack({ production, target, module, srcPath, emitModuleType }) {
         srcPath,
         commonJS: false,
         emitModuleType,
-        target,
       });
     }
   }
@@ -118,7 +114,6 @@ exports.builder = {
   },
   emitModuleType: {
     type: 'boolean',
-    // eslint-disable-next-line max-lines
     default: true,
     description:
       'creates type attribute in the package.json and sets its value to commonjs or module based on module cli argument. default: true',

package/lib/esbuild.js

@@ -0,0 +1,44 @@
+const esbuild = require('esbuild');
+const fg = require('fast-glob');
+
+const ESBUILD_TARGET = 'es2020';
+
+const commonConfig = {
+  bundle: false,
+  target: ESBUILD_TARGET,
+  loader: { '.js': 'jsx' },
+  mainFields: ['module', 'browser', 'main'],
+};
+
+const outDir = 'dist';
+
+const build = async ({ srcPath, commonJS }) => {
+  const inputFiles = [
+    `${srcPath}/**/*.{js,jsx,ts,tsx}`,
+    `!${srcPath}/**/*.test.{js,jsx,ts,tsx}`,
+    `!${srcPath}/**/*.stories.{js,jsx,ts,tsx}`,
+    `!${srcPath}/**/*.endpoint.{js,jsx,ts,tsx}`,
+  ];
+  if (!commonJS) {
+    const entryPoints = await fg(inputFiles);
+    await esbuild.build({
+      entryPoints,
+      ...commonConfig,
+      outdir: `${outDir}/es`,
+      format: 'esm',
+    });
+  } else {
+    const commonJSEntryPoints = await fg(
+      inputFiles.concat([`${srcPath}/**/*.cjs`]),
+    );
+    await esbuild.build({
+      entryPoints: commonJSEntryPoints,
+      ...commonConfig,
+      outdir: `${outDir}/cjs`,
+      format: 'cjs',
+    });
+  }
+};
+
+exports.esBuild = build;
+exports.ESBUILD_TARGET = ESBUILD_TARGET;

package/lib/server/index.js

@@ -13,8 +13,11 @@ const { loadRoutes } = require('./util');
 const { getAssetPath } = require('../webpack/helpers');
 
 const pino = expressPinoLogger({
-  prettyPrint: {
-    levelFirst: true,
+  transport: {
+    target: 'pino-pretty',
+    options: {
+      colorize: true,
+    },
   },
 });
 pino.logger.level = 'warn';

package/lib/testing/mocks/svg.js

@@ -1,3 +1,5 @@
-module.exports = {
-  ReactComponent: 'IMAGE_MOCK',
-};
+// eslint-disable-next-line no-unused-vars
+import * as React from 'react';
+
+export default 'SvgrURL';
+export const ReactComponent = 'div';

package/lib/webpack/webpack.base.babel.js

@@ -7,7 +7,7 @@ const DuplicatePackageCheckerPlugin = require('duplicate-package-checker-webpack
 const CaseSensitivePathsPlugin = require('case-sensitive-paths-webpack-plugin');
 const MomentLocalesPlugin = require('moment-locales-webpack-plugin');
 const { WebpackManifestPlugin } = require('webpack-manifest-plugin');
-const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');
+const { ProvidePlugin } = require('webpack');
 
 const {
   excludeNodeModulesExcept,
@@ -15,12 +15,10 @@ const {
   modulesToTranspile,
   getAlias,
   getPaths,
-  getMediaPath,
 } = require('./helpers');
-const { isTypeScriptEnabled } = require('../typescript/util');
+const { ESBUILD_TARGET } = require('../esbuild');
 
 // get the application configuration
-const devMode = process.env.NODE_ENV !== 'production';
 const minicssLoader = {
   loader: MiniCssExtractPlugin.loader,
   options: {},
@@ -46,6 +44,10 @@ const plugins = [
     APP_CONFIG: getAppConfig(),
   }),
   new CaseSensitivePathsPlugin(),
+  // new ESLintPlugin(),
+  new ProvidePlugin({
+    React: 'react',
+  }),
   new CopyWebpackPlugin({
     patterns: [
       {
@@ -64,21 +66,29 @@ const plugins = [
       {
         from: 'node_modules/@elliemae/pui-user-monitoring/dist/public/js',
         to: 'js',
+        toType: 'dir',
+        info: { minimized: true },
       },
       {
-        from: 'node_modules/@elliemae/pui-app-loader/dist/public/js/emuiAppLoader*.js',
-        to: 'js/[name][ext]',
+        from: 'node_modules/@elliemae/pui-app-loader/dist/public/js',
+        to: 'js',
+        toType: 'dir',
         noErrorOnMissing: true,
+        info: { minimized: true },
       },
       {
-        from: 'node_modules/@elliemae/encw-loader/dist/public/js/emuiEncwLoader*.js',
-        to: 'js/[name][ext]',
+        from: 'node_modules/@elliemae/encw-loader/dist/public/js',
+        to: 'js',
+        toType: 'dir',
         noErrorOnMissing: true,
+        info: { minimized: true },
       },
       {
-        from: 'node_modules/@elliemae/pui-diagnostics/dist/public/js/emuiDiagnostics*.js',
-        to: 'js/[name][ext]',
+        from: 'node_modules/@elliemae/pui-diagnostics/dist/public/js',
+        to: 'js',
+        toType: 'dir',
         noErrorOnMissing: true,
+        info: { minimized: true },
       },
       {
         from: 'public',
@@ -96,17 +106,6 @@ const plugins = [
   new WebpackManifestPlugin(),
 ];
 
-if (isTypeScriptEnabled()) {
-  plugins.push(
-    new ForkTsCheckerWebpackPlugin({
-      async: devMode,
-      eslint: {
-        files: './app/**/*.{ts,js,tsx,jsx}',
-      },
-    }),
-  );
-}
-
 module.exports = (options) => ({
   mode: options.mode,
   entry: options.entry,
@@ -121,7 +120,7 @@ module.exports = (options) => ({
   module: {
     rules: [
       {
-        test: /\.(jpe?g|png|gif|svg)$/,
+        test: /\.(jpe?g|png|gif|svg|ico)$/,
         use: [
           'file-loader',
           {
@@ -153,17 +152,30 @@ module.exports = (options) => ({
         ],
       },
       {
-        test: /\.(js|ts|jsx|tsx)$/,
+        test: /\.(js|jsx)$/,
         exclude: excludeNodeModulesExcept(modulesToTranspile),
         resolve: {
           fullySpecified: false,
         },
         use: {
-          loader: 'babel-loader',
+          loader: 'esbuild-loader',
           options: {
-            cacheDirectory: true,
-            compact: !devMode,
-            ...(options.babelQuery || {}),
+            loader: 'jsx',
+            target: ESBUILD_TARGET,
+          },
+        },
+      },
+      {
+        test: /\.(ts|tsx)$/,
+        exclude: excludeNodeModulesExcept(modulesToTranspile),
+        resolve: {
+          fullySpecified: false,
+        },
+        use: {
+          loader: 'esbuild-loader',
+          options: {
+            loader: 'tsx',
+            target: ESBUILD_TARGET,
           },
         },
       },
@@ -178,6 +190,13 @@ module.exports = (options) => ({
               sourceMap: true,
             },
           },
+          {
+            loader: 'esbuild-loader',
+            options: {
+              loader: 'css',
+              minify: options.mode === 'production',
+            },
+          },
           {
             loader: 'postcss-loader',
             options: {
@@ -195,22 +214,16 @@ module.exports = (options) => ({
         type: 'asset/resource',
       },
       {
-        test: /\.svg$/,
-        exclude: excludeNodeModulesExcept(['@elliemae/*']),
-        use: [
-          {
-            loader: '@svgr/webpack',
-          },
-          {
-            loader: 'file-loader',
-            options: {
-              name: getMediaPath(),
-            },
-          },
-        ],
+        type: 'asset',
+        resourceQuery: /url/, // *.svg?react
+      },
+      {
+        test: /\.svg$/i,
+        issuer: /\.[jt]sx?$/,
+        use: ['@svgr/webpack'],
       },
       {
-        test: /\.(jpe?g|png|gif)$/i,
+        test: /\.(jpe?g|png|gif|ico)$/i,
         exclude: excludeNodeModulesExcept(['@elliemae/*']),
         type: 'asset',
       },

package/lib/webpack/webpack.dev.babel.js

@@ -26,6 +26,14 @@ const {
 const devConfig = {
   mode: 'development',
 
+  cache: {
+    type: 'filesystem',
+    allowCollectingMemory: true,
+    buildDependencies: {
+      config: [__filename],
+    },
+  },
+
   // Add hot reloading in development
   entry: {
     app: [

package/lib/webpack/webpack.lib.base.babel.js

@@ -10,7 +10,6 @@ const PostcssPresetEnv = require('postcss-preset-env');
 const DuplicatePackageCheckerPlugin = require('duplicate-package-checker-webpack-plugin');
 const CaseSensitivePathsPlugin = require('case-sensitive-paths-webpack-plugin');
 const MomentLocalesPlugin = require('moment-locales-webpack-plugin');
-const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');
 
 const {
   excludeNodeModulesExcept,
@@ -19,11 +18,9 @@ const {
   modulesToTranspile,
   getAssetPath,
   getAlias,
-  getMediaPath,
 } = require('./helpers');
-const { isTypeScriptEnabled } = require('../typescript/util');
+const { ESBUILD_TARGET } = require('../esbuild');
 
-const devMode = process.env.NODE_ENV !== 'production';
 const minicssLoader = {
   loader: MiniCssExtractPlugin.loader,
   options: {},
@@ -62,17 +59,6 @@ const plugins = [
   new MomentLocalesPlugin(),
 ];
 
-if (isTypeScriptEnabled()) {
-  plugins.push(
-    new ForkTsCheckerWebpackPlugin({
-      async: devMode,
-      eslint: {
-        files: './lib/**/*.{ts,js,tsx,jsx}',
-      },
-    }),
-  );
-}
-
 module.exports = (options) => ({
   mode: options.mode,
   entry: [path.join(process.cwd(), 'lib/index')],
@@ -88,7 +74,7 @@ module.exports = (options) => ({
   module: {
     rules: [
       {
-        test: /\.(jpe?g|png|gif|svg)$/,
+        test: /\.(jpe?g|png|gif|svg|ico)$/,
         use: [
           'file-loader',
           {
@@ -126,11 +112,10 @@ module.exports = (options) => ({
           fullySpecified: false,
         },
         use: {
-          loader: 'babel-loader',
+          loader: 'esbuild-loader',
           options: {
-            cacheDirectory: true,
-            compact: !devMode,
-            ...(options.babelQuery || {}),
+            loader: 'jsx',
+            target: ESBUILD_TARGET,
           },
         },
       },
@@ -186,22 +171,16 @@ module.exports = (options) => ({
         type: 'asset/resource',
       },
       {
-        test: /\.svg$/,
-        exclude: excludeNodeModulesExcept(['@elliemae/*']),
-        use: [
-          {
-            loader: '@svgr/webpack',
-          },
-          {
-            loader: 'file-loader',
-            options: {
-              name: getMediaPath(),
-            },
-          },
-        ],
+        type: 'asset',
+        resourceQuery: /url/, // *.svg?react
+      },
+      {
+        test: /\.svg$/i,
+        issuer: /\.[jt]sx?$/,
+        use: ['@svgr/webpack'],
       },
       {
-        test: /\.(jpe?g|png|gif)$/i,
+        test: /\.(jpe?g|png|gif|ico)$/i,
         exclude: excludeNodeModulesExcept(['@elliemae/*']),
         type: 'asset',
       },

package/lib/webpack/webpack.lib.prod.babel.js

@@ -1,11 +1,11 @@
 const path = require('path');
-const TerserPlugin = require('terser-webpack-plugin');
 const CompressionPlugin = require('compression-webpack-plugin');
 const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 const HtmlWebpackPlugin = require('html-webpack-plugin');
-const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
 const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer');
+const { ESBuildMinifyPlugin } = require('esbuild-loader');
 const { getLibraryName } = require('./helpers');
+const { ESBUILD_TARGET } = require('../esbuild');
 
 const libraryName = getLibraryName();
 
@@ -23,17 +23,10 @@ module.exports = require('./webpack.lib.base.babel')({
     moduleIds: 'deterministic',
     minimize: true,
     minimizer: [
-      new TerserPlugin({
-        terserOptions: {
-          compress: {
-            comparisons: false,
-          },
-          format: {
-            comments: false,
-          },
-        },
+      new ESBuildMinifyPlugin({
+        target: ESBUILD_TARGET,
+        css: true,
       }),
-      new CssMinimizerPlugin(),
     ],
     nodeEnv: 'production',
     sideEffects: true,

package/lib/webpack/webpack.prod.babel.js

@@ -1,11 +1,11 @@
+/* eslint-disable max-lines */
 const path = require('path');
 const HtmlWebpackPlugin = require('html-webpack-plugin');
 const { GenerateSW } = require('workbox-webpack-plugin');
-const TerserPlugin = require('terser-webpack-plugin');
 const CompressionPlugin = require('compression-webpack-plugin');
 const MiniCssExtractPlugin = require('mini-css-extract-plugin');
-const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
 const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer');
+const { ESBuildMinifyPlugin } = require('esbuild-loader');
 
 const baseConfigFactory = require('./webpack.base.babel');
 const {
@@ -16,6 +16,7 @@ const {
   getAppVersion,
   isGoogleTagManagerEnabled,
 } = require('./helpers');
+const { ESBUILD_TARGET } = require('../esbuild');
 
 const getProdConfig = ({ latestVersion = true } = {}) => {
   const { buildPath, publicPath } = getPaths(latestVersion);
@@ -39,17 +40,10 @@ const getProdConfig = ({ latestVersion = true } = {}) => {
     optimization: {
       moduleIds: 'deterministic',
       minimizer: [
-        new TerserPlugin({
-          terserOptions: {
-            compress: {
-              comparisons: false,
-            },
-            format: {
-              comments: false,
-            },
-          },
+        new ESBuildMinifyPlugin({
+          target: ESBUILD_TARGET,
+          css: true,
         }),
-        new CssMinimizerPlugin(),
       ],
       runtimeChunk: true,
       splitChunks: {
@@ -78,7 +72,13 @@ const getProdConfig = ({ latestVersion = true } = {}) => {
         filename: '[path][base].gz',
         algorithm: 'gzip',
         test: /\.js$|\.css$$/,
-        exclude: [/\/adrum-ext/, /\/emuiUserMonitoring/],
+        exclude: [
+          /\/adrum-ext/,
+          /\/emuiUserMonitoring/,
+          /\/emuiDiagnostics/,
+          /\/emuiAppLoader/,
+          /\/encwLoader/,
+        ],
         // we are compressing all files since in aws cloudfront edge lambda, we don't want to whitelist files that are not compressed due to below limits
         minRatio: Number.MAX_SAFE_INTEGER,
       }),
@@ -120,7 +120,6 @@ const htmlWebpackPlugin = new HtmlWebpackPlugin({
     ? 'app/index.html'
     : 'app/index-app-loader.html',
   minify: {
-    // eslint-disable-next-line max-lines
     removeComments: true,
     collapseWhitespace: true,
     removeRedundantAttributes: true,

package/lib/webpack/webpack.storybook.js

@@ -3,17 +3,14 @@ const webpack = require('webpack');
 const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 const CopyWebpackPlugin = require('copy-webpack-plugin');
 const CompressionPlugin = require('compression-webpack-plugin');
-const TsconfigPathsPlugin = require('tsconfig-paths-webpack-plugin');
 const {
   getAppConfig,
   isApp,
   getAlias,
   excludeNodeModulesExcept,
   modulesToTranspile,
-  resolveExtensions,
-  mainFields,
-  getMediaPath,
 } = require('./helpers');
+const { ESBUILD_TARGET } = require('../esbuild');
 
 const IS_APP = isApp();
 const CWD = process.cwd();
@@ -60,7 +57,7 @@ const compressionPlugin = new CompressionPlugin({
 
 const getModulePreRules = () => [
   {
-    test: /\.(jpe?g|png|gif|svg)$/,
+    test: /\.(jpe?g|png|gif|svg|ico)$/,
     use: [
       'file-loader',
       {
@@ -101,9 +98,10 @@ const getModuleRules = () => [
       fullySpecified: false,
     },
     use: {
-      loader: 'babel-loader',
+      loader: 'esbuild-loader',
       options: {
-        cacheDirectory: true,
+        loader: 'jsx',
+        target: ESBUILD_TARGET,
       },
     },
   },
@@ -113,22 +111,16 @@ const getModuleRules = () => [
     type: 'asset/resource',
   },
   {
-    test: /\.svg$/,
-    exclude: excludeNodeModulesExcept(['@elliemae/*']),
-    use: [
-      {
-        loader: '@svgr/webpack',
-      },
-      {
-        loader: 'file-loader',
-        options: {
-          name: getMediaPath(),
-        },
-      },
-    ],
+    type: 'asset',
+    resourceQuery: /url/, // *.svg?react
+  },
+  {
+    test: /\.svg$/i,
+    issuer: /\.[jt]sx?$/,
+    use: ['@svgr/webpack'],
   },
   {
-    test: /\.(jpe?g|png|gif)$/i,
+    test: /\.(jpe?g|png|gif|ico)$/i,
     exclude: excludeNodeModulesExcept(['@elliemae/*']),
     type: 'asset',
   },
@@ -155,9 +147,6 @@ exports.webpackFinal = async (config, { configType }) => {
 
   config.resolve.alias = { ...config.resolve.alias, ...getAlias() };
   config.resolve.fallback = { ...config.resolve.fallback, crypto: false };
-  config.resolve.plugins = (config.resolve.plugins || []).concat([
-    new TsconfigPathsPlugin({ extensions: resolveExtensions, mainFields }),
-  ]);
 
   config.externals = config.externals || {};
   config.externals['@elliemae/pui-user-monitoring'] = 'emuiUserMonitoring';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elliemae/pui-cli",
-  "version": "5.17.2",
+  "version": "6.0.0-beta.10",
   "private": false,
   "description": "EllieMae Platform UI CLI",
   "sideEffects": false,
@@ -66,38 +66,36 @@
     "@commitlint/cli": "~15.0.0",
     "@commitlint/config-conventional": "~15.0.0",
     "@elliemae/browserslist-config-elliemae": "~1.2.1",
-    "@pmmmwh/react-refresh-webpack-plugin": "~0.5.2",
+    "@pmmmwh/react-refresh-webpack-plugin": "~0.5.3",
     "@semantic-release/changelog": "~6.0.1",
     "@semantic-release/exec": "~6.0.2",
     "@semantic-release/git": "~10.0.1",
-    "@storybook/addon-a11y": "~6.3.12",
-    "@storybook/addon-actions": "~6.3.12",
-    "@storybook/addon-backgrounds": "~6.3.12",
-    "@storybook/addon-console": "~1.2.3",
-    "@storybook/addon-controls": "~6.3.12",
-    "@storybook/addon-docs": "~6.3.12",
+    "@storybook/addon-a11y": "~6.4.0",
+    "@storybook/addon-actions": "~6.4.0",
+    "@storybook/addon-backgrounds": "~6.4.0",
+    "@storybook/addon-controls": "~6.4.0",
+    "@storybook/addon-docs": "~6.4.0",
     "@storybook/addon-events": "~6.2.9",
-    "@storybook/addon-knobs": "~6.3.1",
-    "@storybook/addon-links": "~6.3.12",
-    "@storybook/addon-storysource": "~6.3.12",
-    "@storybook/addon-toolbars": "~6.3.12",
-    "@storybook/addon-viewport": "~6.3.12",
-    "@storybook/addons": "~6.3.12",
-    "@storybook/builder-webpack5": "~6.3.12",
-    "@storybook/manager-webpack5": "~6.3.12",
-    "@storybook/react": "~6.3.12",
-    "@storybook/theming": "~6.3.12",
+    "@storybook/addon-links": "~6.4.0",
+    "@storybook/addon-storysource": "~6.4.0",
+    "@storybook/addon-toolbars": "~6.4.0",
+    "@storybook/addon-viewport": "~6.4.0",
+    "@storybook/addons": "~6.4.0",
+    "@storybook/builder-webpack5": "~6.4.0",
+    "@storybook/manager-webpack5": "~6.4.0",
+    "@storybook/react": "~6.4.0",
+    "@storybook/theming": "~6.4.0",
     "@stylelint/postcss-css-in-js": "~0.37.2",
-    "@svgr/webpack": "~5.5.0",
+    "@svgr/webpack": "~6.0.0",
     "@testing-library/jest-dom": "~5.15.1",
     "@testing-library/react": "~12.1.2",
     "@testing-library/react-hooks": "~7.0.2",
     "@types/jest": "~27.0.3",
-    "@types/node": "~16.11.9",
+    "@types/node": "~16.11.10",
     "@types/rimraf": "~3.0.2",
     "@types/testing-library__jest-dom": "~5.14.1",
-    "@typescript-eslint/eslint-plugin": "~5.4.0",
-    "@typescript-eslint/parser": "~5.4.0",
+    "@typescript-eslint/eslint-plugin": "~5.5.0",
+    "@typescript-eslint/parser": "~5.5.0",
     "autoprefixer": "~10.4.0",
     "axe-core": "~4.3.5",
     "babel-loader": "~8.2.3",
@@ -107,7 +105,8 @@
     "babel-plugin-import-remove-resource-query": "~1.0.0",
     "babel-plugin-lodash": "~3.3.4",
     "babel-plugin-module-resolver": "~4.1.0",
-    "babel-plugin-styled-components": "~1.13.3",
+    "babel-plugin-source-map-support": "~2.1.3",
+    "babel-plugin-styled-components": "~2.0.2",
     "babel-plugin-transform-react-remove-prop-types": "~0.4.24",
     "babel-plugin-transform-remove-console": "~6.9.4",
     "babel-plugin-transform-strip-block": "~0.0.4",
@@ -125,12 +124,15 @@
     "cors": "~2.8.5",
     "cross-env": "~7.0.3",
     "css-loader": "~6.5.1",
-    "css-minimizer-webpack-plugin": "~3.1.4",
+    "css-minimizer-webpack-plugin": "~3.2.0",
     "depcheck": "~1.4.2",
     "docdash": "~1.2.0",
     "dotenv": "~10.0.0",
     "dotenv-webpack": "~7.0.3",
     "duplicate-package-checker-webpack-plugin": "~3.0.0",
+    "esbuild": "~0.14.0",
+    "esbuild-jest": "~0.5.0",
+    "esbuild-loader": "~2.16.0",
     "eslint": "~8.3.0",
     "eslint-config-airbnb": "~18.2.1",
     "eslint-config-airbnb-base": "~15.0.0",
@@ -157,7 +159,7 @@
     "express": "~4.17.1",
     "express-pino-logger": "~7.0.0",
     "file-loader": "~6.2.0",
-    "fork-ts-checker-webpack-plugin": "~6.4.2",
+    "fork-ts-checker-webpack-plugin": "~6.5.0",
     "helmet-csp": "~3.4.0",
     "html-loader": "~3.0.1",
     "html-webpack-plugin": "~5.5.0",
@@ -168,7 +170,7 @@
     "imports-loader": "~3.1.1",
     "ip": "~1.1.5",
     "jest-axe": "~5.0.1",
-    "jest-cli": "~27.3.1",
+    "jest-cli": "~27.4.0",
     "jest-sonar-reporter": "~2.0.0",
     "jest-styled-components": "~7.0.8",
     "jscodeshift": "~0.13.0",
@@ -179,22 +181,22 @@
     "moment": "~2.29.1",
     "moment-locales-webpack-plugin": "~1.2.0",
     "msw": "~0.35.0",
-    "node-plop": "~0.26.3",
+    "node-plop": "~0.30.0",
     "nodemon": "~2.0.15",
     "npm-check-updates": "12.0.2",
     "null-loader": "~4.0.1",
-    "pino": "~7.4.0",
+    "pino": "~7.5.0",
     "pino-pretty": "~7.2.0",
     "pinst": "~2.1.6",
-    "plop": "~2.7.6",
-    "postcss": "~8.3.11",
+    "plop": "~3.0.1",
+    "postcss": "~8.4.4",
     "postcss-jsx": "~0.36.4",
-    "postcss-html": "~1.2.0",
-    "postcss-markdown": "~1.1.0",
+    "postcss-html": "~1.3.0",
+    "postcss-markdown": "~1.2.0",
     "postcss-syntax": "~0.36.2",
-    "postcss-loader": "~6.2.0",
+    "postcss-loader": "~6.2.1",
     "postcss-preset-env": "~7.0.1",
-    "prettier": "~2.4.1",
+    "prettier": "~2.5.0",
     "pug": "~3.0.2",
     "pug-loader": "~2.4.0",
     "raf": "~3.4.1",
@@ -206,10 +208,11 @@
     "resize-observer-polyfill": "~1.5.1",
     "rimraf": "~3.0.2",
     "script-loader": "~0.7.2",
-    "semantic-release": "~18.0.0",
+    "semantic-release": "~18.0.1",
     "shelljs": "~0.8.4",
     "slackify-markdown": "~4.3.0",
-    "storybook-react-router": "~1.0.8",
+    "storybook-builder-vite": "~0.1.10",
+    "storybook-addon-turbo-build": "~1.0.1",
     "style-loader": "~3.3.1",
     "stylelint": "~14.1.0",
     "stylelint-config-recommended": "~6.0.0",
@@ -229,7 +232,8 @@
     "update-notifier": "~5.1.0",
     "url-loader": "~4.1.1",
     "uuid": "~8.3.2",
-    "webpack": "~5.64.2",
+    "vite": "~2.6.14",
+    "webpack": "~5.64.4",
     "webpack-bundle-analyzer": "~4.5.0",
     "webpack-cli": "~4.9.1",
     "webpack-dev-middleware": "~5.2.2",