@elliemae/pui-cli 6.0.0-beta.2 → 6.0.0-beta.3

package/lib/babel/babel.config.js

@@ -10,7 +10,7 @@ const nodeEnvPreset = {
 const webEnvPreset = {
   modules: process.env.ES_MODULES === 'false' ? 'commonjs' : false,
   useBuiltIns: 'usage',
-  corejs: { version: '3.18', proposals: true },
+  corejs: { version: '3.19', proposals: true },
 };
 
 const presetEnvOptions =
@@ -39,13 +39,14 @@ const config = {
     '@babel/plugin-proposal-class-properties',
     '@babel/plugin-syntax-dynamic-import',
     '@babel/plugin-proposal-export-default-from',
+    'lodash',
+    'date-fns',
   ],
   env: {
     development: {
       plugins: [
         ['babel-plugin-styled-components', { displayName: true }],
         '@babel/plugin-transform-react-jsx-source',
-        'react-refresh/babel',
       ],
     },
     production: {
@@ -79,7 +80,11 @@ if (process.env.MODULE_EXTENSIONS === 'true') {
   config.plugins.push('babel-plugin-add-import-extension');
 }
 
-// ToDo: Once ECC team migrates from webpack 3 to webpack 5 remove tis strip-block plugin from commonjs output. without this they are receiving error when import.meta is used in app sdk
+if (process.env.STORYBOOK_BUILD !== 'true') {
+  config.env?.development?.plugins?.push?.('react-refresh/babel');
+}
+
+// ToDo: Once ECC team migrates from webpack 3 to webpack 5 remove this strip-block plugin from commonjs output. without this they are receiving error when import.meta is used in app sdk
 if (process.env.ES_MODULES === 'false') {
   config.plugins.push([
     'babel-plugin-transform-strip-block',

package/lib/cli-commands/build.js

@@ -21,7 +21,7 @@ async function buildWebApp() {
 async function buildService() {
   await exec('rimraf ./build');
   await exec(
-    `cross-env NODE_ENV=production MODULE_EXTENSIONS=true TARGET_ENV=node babel --extensions '.ts,.js' --config-file ./babel.config.cjs --out-dir ./build --ignore '**/*.test.js','**/*.test.ts' ./app`,
+    `cross-env NODE_ENV=production MODULE_EXTENSIONS=true TARGET_ENV=node babel --extensions '.ts,.js' --config-file ./babel.config.cjs --out-dir ./build --copy-files --no-copy-ignored --ignore '**/*.test.ts','**/*.test.js','**/*.spec.ts','**/*.test.js' ./app`,
   );
 }
 

package/lib/cli-commands/lint.js

@@ -1,10 +1,11 @@
 const { exit } = require('yargs');
 const { exec, logError, logSuccess } = require('./utils');
-const { isTypeScripEnabled } = require('../typescript/util');
+const { isTypeScriptEnabled } = require('../typescript/util');
 
-async function lintCSS() {
+async function lintCSS(fix = false) {
+  const fixIssues = fix ? '--fix' : '';
   await exec(
-    `stylelint "./**/*.{js, ts}" --color --allowEmptyInput --ignore-pattern '/dist/**/*'`,
+    `stylelint ./{lib,app}/**/*.{js,jsx,ts,tsx} ${fixIssues} --color --allowEmptyInput --ignore-pattern /dist/**/*`,
   );
 }
 
@@ -18,7 +19,8 @@ async function lintJS(fix = false) {
 async function handler(argv) {
   if (argv.js) {
     // run typescript compilation
-    if (isTypeScripEnabled) await exec('tsc');
+    if (isTypeScriptEnabled())
+      await exec('tsc --noEmit --emitDeclarationOnly false');
     try {
       await exec('rimraf ./reports/eslint.json');
       await lintJS(argv.fix);

package/lib/cli-commands/pack.js

@@ -2,7 +2,7 @@ const { exit } = require('yargs');
 const path = require('path');
 const { writeFile, readFile } = require('fs/promises');
 const { exec, logInfo, logError, logSuccess } = require('./utils');
-const { isTypeScripEnabled } = require('../typescript/util');
+const { isTypeScriptEnabled } = require('../typescript/util');
 
 const { name } = require('../../package.json');
 
@@ -42,7 +42,7 @@ async function nodeBuild({ srcPath, commonJS, emitModuleType, target }) {
   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 --ignore **/*.test.js --ignore **/*.test.ts --ignore **/*.spec.js --ignore **/*.spec.ts --ignore **/*.test.jsx --ignore **/*.test.tsx --ignore **/*.spec.jsx --ignore **/*.spec.tsx`,
+    `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' },
   );
   if (emitModuleType) {
@@ -58,7 +58,7 @@ async function nodeBuild({ srcPath, commonJS, emitModuleType, target }) {
 async function pack({ production, target, module, srcPath, emitModuleType }) {
   logInfo('Build in-progress...');
   await exec('rimraf ./dist');
-  if (isTypeScripEnabled()) {
+  if (isTypeScriptEnabled()) {
     await compileTypeScript();
   }
   if (target !== 'node') await webBuild(production);

package/lib/cli-commands/storybook.js

@@ -10,7 +10,7 @@ async function buildStoryBook(isDoc = false) {
 
 async function startStoryBook(isDoc = false) {
   await exec(
-    `cross-env FORCE_COLOR=true start-storybook ${
+    `cross-env NODE_ENV=development STORYBOOK_BUILD=true FORCE_COLOR=true start-storybook ${
       isDoc && '--docs'
     } -p 11000 --quiet`,
   );

package/lib/cli-commands/test.js

@@ -13,7 +13,8 @@ async function handler(argv) {
   let commandOptions = '--coverage';
   if (argv.fix) commandOptions = '-u';
   else if (argv.watch) commandOptions = '--watchAll';
-  if (CI) commandOptions += ' --ci';
+  if (CI) commandOptions += ' --ci --runInBand';
+  else commandOptions += ' --maxWorkers=50%';
   if (argv.p) commandOptions += ' --passWithNoTests';
   if (argv.r) commandOptions += ' --bail --findRelatedTests';
   if (argv.s) commandOptions += ' --silent';

package/lib/lint/eslint/common.js

@@ -112,16 +112,15 @@ const reactRules = {
 exports.reactRules = reactRules;
 
 exports.baseConfig = {
-  parser: 'babel-eslint',
+  parser: '@babel/eslint-parser',
   plugins: basePlugins,
   env: {
     jest: true,
     browser: true,
     node: true,
-    es6: true,
+    es2021: true,
   },
   parserOptions: {
-    ecmaVersion: 2020,
     sourceType: 'module',
     ecmaFeatures: {
       jsx: true,

package/lib/lint/lint-staged.config.js

@@ -1,5 +1,5 @@
 module.exports = {
-  '*.{ts,tsx}': ['tsc-files'],
+  '*.{ts,tsx}': ['tsc-files --noEmit --emitDeclarationOnly false'],
   '*.{js,ts,jsx,tsx}': [
     'npm run lint:fix',
     'npm run test:staged',

package/lib/lint/stylelint.config.js

@@ -1,16 +1,9 @@
 module.exports = {
-  processors: [
-    [
-      'stylelint-processor-styled-components',
-      {
-        ignoreFiles: ['**/*.scss'],
-      },
-    ],
-  ],
+  customSyntax: '@stylelint/postcss-css-in-js',
   plugins: [],
   extends: [
     'stylelint-config-recommended',
     'stylelint-config-styled-components',
   ],
-  rules: { 'selector-type-no-unknown': null },
+  rules: { 'selector-type-no-unknown': null, 'no-extra-semicolons': null },
 };

package/lib/release/release.config.js

@@ -2,11 +2,11 @@ module.exports = {
   branches: [
     '+([0-9])?(.{+([0-9]),x}).x',
     'master',
-    'next',
     'next-major',
     { name: 'beta', prerelease: true },
     { name: 'alpha', prerelease: true },
     { name: 'hotfix', prerelease: true },
+    { name: 'next', prerelease: true },
   ],
   plugins: [
     '@semantic-release/commit-analyzer',

package/lib/server/csp.js

@@ -12,6 +12,8 @@ const sources = [
   '*.ellielabs.com',
   'http://pdx-col.eum-appdynamics.com',
   'https://pdx-col.eum-appdynamics.com/',
+  'https://www.google-analytics.com',
+  'https://www.googletagmanager.com',
 ];
 
 const sendFileWithCSPNonce = ({

package/lib/server/util/index.js

@@ -3,9 +3,9 @@ const path = require('path');
 
 const getCWD = () => process.cwd();
 
-const allJS = new RegExp(/\.js$/);
+const allJS = /\.js$/;
 
-const serviceEndpoints = new RegExp(/\.endpoint\.js$/);
+const serviceEndpoints = /\.endpoint\.js$/;
 
 const getFilesMatching = (filePattern) => {
   const getFiles = (dir) => {

package/lib/testing/jest.config.js

@@ -62,6 +62,7 @@ const jestConfig = {
     '.*\\.(jpg|jpeg|png|gif|eot|otf|webp|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga|ico)$': `${getRootDir()}/lib/testing/mocks/image.js`,
     '.*\\.svg$': `${getRootDir()}/lib/testing/mocks/svg.js`,
     '.*\\.(html)$': `${getRootDir()}/lib/testing/mocks/html.js`,
+    '^lodash-es$': 'lodash',
     '@elliemae/pui-user-monitoring': `${getRootDir()}/lib/testing/mocks/pui-user-monitoring.js`,
     '@elliemae/pui-app-loader': `${getRootDir()}/lib/testing/mocks/pui-app-loader.js`,
     '@elliemae/pui-diagnostics': `${getRootDir()}/lib/testing/mocks/pui-diagnostics.js`,
@@ -74,7 +75,7 @@ const jestConfig = {
   snapshotSerializers: [],
   testResultsProcessor: 'jest-sonar-reporter',
   transformIgnorePatterns: [
-    'node_modules/(?!(@elliemae/*)/)',
+    'node_modules/(?!(@elliemae/*|lodash-es/*)/)',
     'node_modules/@elliemae/em-platform-document-viewer',
   ],
   globals: {

package/lib/typescript/util.js

@@ -1,5 +1,5 @@
 const fs = require('fs');
 const path = require('path');
 
-exports.isTypeScripEnabled = () =>
+exports.isTypeScriptEnabled = () =>
   fs.existsSync(path.join(process.cwd(), 'tsconfig.json'));

package/lib/webpack/helpers.js

@@ -1,8 +1,6 @@
-/* eslint-disable max-lines */
 const path = require('path');
 const fs = require('fs');
 const _ = require('lodash');
-const ImageMinimizerPlugin = require('image-minimizer-webpack-plugin');
 
 let pathSep = path.sep;
 if (pathSep === '\\')
@@ -89,7 +87,12 @@ const getAlias = () =>
     './node_modules',
   );
 
-const modulesToTranspile = ['@elliemae/pui-*', '@elliemae/ds-*', '@dnd-kit/*'];
+const modulesToTranspile = [
+  '@elliemae/pui-*',
+  '@elliemae/ds-*',
+  '@dnd-kit/*',
+  '@elliemae/em-platform-document-viewer',
+];
 
 const getUserMonitoringFileName = () => {
   const libName = 'emuiUserMonitoring';
@@ -119,6 +122,7 @@ const getAppLoaderFileName = () => {
 
 const getDiagnosticsFileName = () => {
   const libName = 'emuiDiagnostics';
+  // eslint-disable-next-line max-lines
   const libPath = path.join(
     process.cwd(),
     'node_modules/@elliemae/pui-diagnostics/dist/public/js',
@@ -176,37 +180,10 @@ const isAppLoaderEnabled = () => process.env.APP_LOADER === 'true';
 
 const getMediaPath = () => `assets/[name].[contenthash].[ext]`;
 
-const getImageMinimizerPlugin = () =>
-  new ImageMinimizerPlugin({
-    minimizerOptions: {
-      // Lossless optimization with custom option
-      // Feel free to experiment with options for better result for you
-      plugins: [
-        ['gifsicle', { interlaced: true }],
-        ['jpegtran', { progressive: true }],
-        ['optipng', { optimizationLevel: 5 }],
-        // Svgo configuration here https://github.com/svg/svgo#configuration
-        [
-          'svgo',
-          {
-            plugins: [
-              {
-                name: 'preset-default',
-                params: {
-                  overrides: {
-                    removeViewBox: false,
-                    addAttributesToSVGElement: {
-                      attributes: [{ xmlns: 'http://www.w3.org/2000/svg' }],
-                    },
-                  },
-                },
-              },
-            ],
-          },
-        ],
-      ],
-    },
-  });
+const isGoogleTagManagerEnabled = () => {
+  const appConfig = JSON.parse(getAppConfig());
+  return !!appConfig?.googleTagManager;
+};
 
 exports.excludeNodeModulesExcept = excludeNodeModulesExcept;
 exports.getLibraryName = getLibraryName;
@@ -221,7 +198,6 @@ exports.isAppLoaderEnabled = isAppLoaderEnabled;
 exports.LATEST_VERSION = LATEST_VERSION;
 exports.getPaths = getPaths;
 exports.getMediaPath = getMediaPath;
-exports.getImageMinimizerPlugin = getImageMinimizerPlugin;
 exports.resolveExtensions = [
   '.wasm',
   '.mjs',
@@ -232,3 +208,5 @@ exports.resolveExtensions = [
   '.json',
 ];
 exports.mainFields = ['browser', 'module', 'main'];
+exports.isGoogleTagManagerEnabled = isGoogleTagManagerEnabled;
+exports.ESBUILD_TARGET = 'es2020';

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

@@ -1,10 +1,5 @@
 /* eslint-disable max-lines */
-/**
- * COMMON WEBPACK CONFIGURATION
- */
-
 const webpack = require('webpack');
-const StyleLintPlugin = require('stylelint-webpack-plugin');
 const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 const PostcssPresetEnv = require('postcss-preset-env');
 const CopyWebpackPlugin = require('copy-webpack-plugin');
@@ -12,8 +7,6 @@ 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 stylelintFormatter = require('stylelint-formatter-pretty');
-// const ESLintPlugin = require('eslint-webpack-plugin');
 const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');
 const { ProvidePlugin } = require('webpack');
 
@@ -24,11 +17,9 @@ const {
   getAlias,
   getPaths,
   getMediaPath,
-  getImageMinimizerPlugin,
+  ESBUILD_TARGET,
 } = require('./helpers');
-const { isTypeScripEnabled } = require('../typescript/util');
-
-const ESBUILD_TARGET = 'es2020';
+const { isTypeScriptEnabled } = require('../typescript/util');
 
 // get the application configuration
 const devMode = process.env.NODE_ENV !== 'production';
@@ -61,14 +52,6 @@ const plugins = [
   new ProvidePlugin({
     React: 'react',
   }),
-  new StyleLintPlugin({
-    emitError: true,
-    emitWarning: true,
-    allowEmptyInput: true,
-    failOnError: !devMode,
-    formatter: stylelintFormatter,
-    files: '(lib|app)/**/view/**/*.{js,ts,jsx,tsx}',
-  }),
   new CopyWebpackPlugin({
     patterns: [
       {
@@ -117,10 +100,9 @@ const plugins = [
   new DuplicatePackageCheckerPlugin(),
   new MomentLocalesPlugin(),
   new WebpackManifestPlugin(),
-  getImageMinimizerPlugin(),
 ];
 
-if (isTypeScripEnabled()) {
+if (isTypeScriptEnabled()) {
   plugins.push(
     new ForkTsCheckerWebpackPlugin({
       async: devMode,
@@ -144,6 +126,21 @@ module.exports = (options) => ({
   optimization: options.optimization,
   module: {
     rules: [
+      {
+        test: /\.(jpe?g|png|gif|svg|ico)$/,
+        use: [
+          'file-loader',
+          {
+            loader: 'image-webpack-loader',
+            options: {
+              gifsicle: {
+                enabled: false,
+              },
+            },
+          },
+        ],
+        enforce: 'pre',
+      },
       {
         test: /\.(js|ts|jsx|tsx)$/,
         enforce: 'pre',
@@ -260,6 +257,7 @@ module.exports = (options) => ({
     extensions: ['.wasm', '.mjs', '.ts', '.tsx', '.js', '.jsx', '.json'],
     mainFields: ['browser', 'module', 'main'],
     alias: {
+      'lodash-es': 'lodash',
       ...getAlias(),
       ...((options.resolve || {}).alias || {}),
     },

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

@@ -1,7 +1,3 @@
-/**
- * DEVELOPMENT WEBPACK CONFIGURATION
- */
-
 const path = require('path');
 const webpack = require('webpack');
 const HtmlWebpackPlugin = require('html-webpack-plugin');
@@ -9,7 +5,12 @@ const CircularDependencyPlugin = require('circular-dependency-plugin');
 const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 const ReactRefreshWebpackPlugin = require('@pmmmwh/react-refresh-webpack-plugin');
 
-const { getAssetPath, isAppLoaderEnabled, getPaths } = require('./helpers');
+const {
+  getAssetPath,
+  isAppLoaderEnabled,
+  getPaths,
+  isGoogleTagManagerEnabled,
+} = require('./helpers');
 const baseConfigFactory = require('./webpack.base.babel');
 
 const {
@@ -25,6 +26,14 @@ const {
 const devConfig = {
   mode: 'development',
 
+  cache: {
+    type: 'filesystem',
+    allowCollectingMemory: true,
+    buildDependencies: {
+      config: [__filename],
+    },
+  },
+
   // Add hot reloading in development
   entry: {
     app: [
@@ -83,6 +92,7 @@ const devConfig = {
         appLoaderScriptPath,
         diagnosticsScriptPath,
         encwLoaderScriptPath,
+        googleTagManager: isGoogleTagManagerEnabled(),
       },
     }),
     new CircularDependencyPlugin({

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

@@ -4,15 +4,12 @@ const webpack = require('webpack');
 const {
   optimize: { LimitChunkCountPlugin },
 } = require('webpack');
-const StyleLintPlugin = require('stylelint-webpack-plugin');
 const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 const CopyWebpackPlugin = require('copy-webpack-plugin');
 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 stylelintFormatter = require('stylelint-formatter-pretty');
-// const ESLintPlugin = require('eslint-webpack-plugin');
 const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');
 
 const {
@@ -22,10 +19,9 @@ const {
   modulesToTranspile,
   getAssetPath,
   getAlias,
-  getImageMinimizerPlugin,
   getMediaPath,
 } = require('./helpers');
-const { isTypeScripEnabled } = require('../typescript/util');
+const { isTypeScriptEnabled } = require('../typescript/util');
 
 const devMode = process.env.NODE_ENV !== 'production';
 const minicssLoader = {
@@ -46,15 +42,6 @@ const plugins = [
     APP_CONFIG: getAppConfig(true),
   }),
   new CaseSensitivePathsPlugin(),
-  // new ESLintPlugin(),
-  new StyleLintPlugin({
-    emitError: true,
-    emitWarning: true,
-    allowEmptyInput: true,
-    failOnError: !devMode,
-    formatter: stylelintFormatter,
-    files: '(lib|app)/**/view/**/*.{js,ts,jsx,tsx}',
-  }),
   new CopyWebpackPlugin({
     patterns: [
       {
@@ -73,10 +60,9 @@ const plugins = [
     maxChunks: 1,
   }),
   new MomentLocalesPlugin(),
-  getImageMinimizerPlugin(),
 ];
 
-if (isTypeScripEnabled()) {
+if (isTypeScriptEnabled()) {
   plugins.push(
     new ForkTsCheckerWebpackPlugin({
       async: devMode,
@@ -101,6 +87,21 @@ module.exports = (options) => ({
   optimization: options.optimization,
   module: {
     rules: [
+      {
+        test: /\.(jpe?g|png|gif|svg|ico)$/,
+        use: [
+          'file-loader',
+          {
+            loader: 'image-webpack-loader',
+            options: {
+              gifsicle: {
+                enabled: false,
+              },
+            },
+          },
+        ],
+        enforce: 'pre',
+      },
       {
         test: /^(?!.*\.exec\.js$).*\.(js|ts|jsx|tsx)$/,
         enforce: 'pre',
@@ -136,7 +137,21 @@ module.exports = (options) => ({
       {
         test: /\.exec\.js$/,
         exclude: /node_modules/,
-        use: ['script-loader'],
+        use: [
+          {
+            loader: 'imports-loader',
+            options: {
+              wrapper: {
+                thisArg: 'window',
+                args: {
+                  module: false,
+                  exports: false,
+                  define: false,
+                },
+              },
+            },
+          },
+        ],
       },
       {
         test: /\.css$/,
@@ -212,6 +227,7 @@ module.exports = (options) => ({
     extensions: ['.wasm', '.mjs', '.ts', '.tsx', '.js', '.jsx', '.json'],
     mainFields: ['browser', 'module', 'main'],
     alias: {
+      'lodash-es': 'lodash',
       ...getAlias(),
       ...((options.resolve || {}).alias || {}),
     },

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

@@ -1,7 +1,3 @@
-/**
- * DEVELOPMENT WEBPACK CONFIGURATION
- */
-
 const CircularDependencyPlugin = require('circular-dependency-plugin');
 const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 const HtmlWebpackPlugin = require('html-webpack-plugin');

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

@@ -1,4 +1,3 @@
-// Important modules this config uses
 const path = require('path');
 const TerserPlugin = require('terser-webpack-plugin');
 const CompressionPlugin = require('compression-webpack-plugin');

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

@@ -1,7 +1,6 @@
 /* eslint-disable max-lines */
 const path = require('path');
 const HtmlWebpackPlugin = require('html-webpack-plugin');
-// const WebpackPwaManifest = require('webpack-pwa-manifest');
 const { GenerateSW } = require('workbox-webpack-plugin');
 const CompressionPlugin = require('compression-webpack-plugin');
 const MiniCssExtractPlugin = require('mini-css-extract-plugin');
@@ -15,6 +14,8 @@ const {
   LATEST_VERSION,
   getPaths,
   getAppVersion,
+  isGoogleTagManagerEnabled,
+  ESBUILD_TARGET,
 } = require('./helpers');
 
 const getProdConfig = ({ latestVersion = true } = {}) => {
@@ -23,12 +24,10 @@ const getProdConfig = ({ latestVersion = true } = {}) => {
   return {
     mode: 'production',
 
-    // In production, we skip all hot-reloading stuff
     entry: {
       app: path.join(process.cwd(), 'app/index'),
     },
 
-    // eslint-disable-next-line max-len
     // Utilize long-term caching by adding content hashes (not compilation hashes) to compiled assets
     output: {
       path: buildPath,
@@ -42,7 +41,7 @@ const getProdConfig = ({ latestVersion = true } = {}) => {
       moduleIds: 'deterministic',
       minimizer: [
         new ESBuildMinifyPlugin({
-          target: 'es2020',
+          target: ESBUILD_TARGET,
           css: true,
         }),
       ],
@@ -78,29 +77,6 @@ const getProdConfig = ({ latestVersion = true } = {}) => {
         minRatio: Number.MAX_SAFE_INTEGER,
       }),
 
-      // new WebpackPwaManifest({
-      //   name: 'Ellie Mae UI Boilerplate',
-      //   short_name: 'EM BP',
-      //   description: 'EllieMae UI Boilerplate-based project!',
-      //   background_color: '#fafafa',
-      //   theme_color: '#b1624d',
-      //   inject: true,
-      //   ios: true,
-      //   icons: [
-      //     {
-      //       src: path.resolve('app/view/images/icon-512x512.png'),
-      //       destination: path.join('media', 'images'),
-      //       sizes: [72, 96, 128, 144, 192, 384, 512],
-      //     },
-      //     {
-      //       src: path.resolve('app/view/images/icon-512x512.png'),
-      //       sizes: [120, 152, 167, 180],
-      //       ios: true,
-      //       destination: path.join('media', 'images'),
-      //     },
-      //   ],
-      // }),
-
       new BundleAnalyzerPlugin({
         analyzerMode: 'static',
         reportFilename: path.join(process.cwd(), 'reports/bundle-stats.html'),
@@ -158,6 +134,7 @@ const htmlWebpackPlugin = new HtmlWebpackPlugin({
     appLoaderScriptPath,
     diagnosticsScriptPath,
     encwLoaderScriptPath,
+    googleTagManager: isGoogleTagManagerEnabled(),
   },
 });
 

package/lib/webpack/webpack.storybook.js

@@ -1,9 +1,7 @@
-/* eslint-disable max-lines, no-param-reassign */
+/* eslint-disable max-lines */
 const webpack = require('webpack');
 const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 const CopyWebpackPlugin = require('copy-webpack-plugin');
-const StyleLintPlugin = require('stylelint-webpack-plugin');
-const stylelintFormatter = require('stylelint-formatter-pretty');
 const CompressionPlugin = require('compression-webpack-plugin');
 const TsconfigPathsPlugin = require('tsconfig-paths-webpack-plugin');
 const {
@@ -15,13 +13,12 @@ const {
   resolveExtensions,
   mainFields,
   getMediaPath,
-  getImageMinimizerPlugin,
 } = require('./helpers');
 
 const IS_APP = isApp();
 const CWD = process.cwd();
 
-const getAdditionalPlugins = (isProd) => [
+const getAdditionalPlugins = () => [
   new webpack.DefinePlugin({
     APP_CONFIG: getAppConfig(),
   }),
@@ -51,15 +48,6 @@ const getAdditionalPlugins = (isProd) => [
       },
     ],
   }),
-  new StyleLintPlugin({
-    emitError: true,
-    emitWarning: true,
-    allowEmptyInput: true,
-    failOnError: isProd,
-    formatter: stylelintFormatter,
-    files: '(lib|app)/**/view/**/*.{js,ts,jsx,tsx}',
-  }),
-  getImageMinimizerPlugin(),
 ];
 
 const compressionPlugin = new CompressionPlugin({
@@ -71,6 +59,21 @@ const compressionPlugin = new CompressionPlugin({
 });
 
 const getModulePreRules = () => [
+  {
+    test: /\.(jpe?g|png|gif|svg|ico)$/,
+    use: [
+      'file-loader',
+      {
+        loader: 'image-webpack-loader',
+        options: {
+          gifsicle: {
+            enabled: false,
+          },
+        },
+      },
+    ],
+    enforce: 'pre',
+  },
   {
     test: /\.(js|ts|jsx|tsx)$/,
     enforce: 'pre',
@@ -145,7 +148,7 @@ exports.webpackFinal = async (config, { configType }) => {
   config.module.rules.push(...getModulePreRules());
   config.module.rules.unshift(...getModuleRules(isProd));
 
-  config.plugins.push(...getAdditionalPlugins(isProd));
+  config.plugins.push(...getAdditionalPlugins());
   if (isProd) {
     config.plugins.push(compressionPlugin);
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elliemae/pui-cli",
-  "version": "6.0.0-beta.2",
+  "version": "6.0.0-beta.3",
   "private": false,
   "description": "EllieMae Platform UI CLI",
   "sideEffects": false,
@@ -47,153 +47,155 @@
     "indent": 4
   },
   "dependencies": {
-    "@babel/cli": "~7.15.7",
-    "@babel/core": "~7.15.8",
-    "@babel/node": "~7.15.8",
-    "@babel/plugin-proposal-class-properties": "~7.14.5",
-    "@babel/plugin-proposal-export-default-from": "~7.14.5",
+    "@babel/cli": "~7.16.0",
+    "@babel/core": "~7.16.0",
+    "@babel/eslint-parser": "~7.16.3",
+    "@babel/node": "~7.16.0",
+    "@babel/plugin-proposal-class-properties": "~7.16.0",
+    "@babel/plugin-proposal-export-default-from": "~7.16.0",
     "@babel/plugin-syntax-dynamic-import": "~7.8.3",
-    "@babel/plugin-transform-modules-commonjs": "~7.15.4",
-    "@babel/plugin-transform-react-constant-elements": "~7.14.5",
-    "@babel/plugin-transform-react-inline-elements": "~7.14.5",
-    "@babel/plugin-transform-react-jsx-source": "~7.14.5",
-    "@babel/plugin-transform-runtime": "~7.15.8",
-    "@babel/preset-env": "~7.15.8",
-    "@babel/preset-react": "~7.14.5",
-    "@babel/preset-typescript": "~7.15.0",
-    "@babel/runtime": "~7.15.4",
-    "@commitlint/cli": "~13.2.0",
-    "@commitlint/config-conventional": "~13.2.0",
+    "@babel/plugin-transform-modules-commonjs": "~7.16.0",
+    "@babel/plugin-transform-react-constant-elements": "~7.16.0",
+    "@babel/plugin-transform-react-inline-elements": "~7.16.0",
+    "@babel/plugin-transform-react-jsx-source": "~7.16.0",
+    "@babel/plugin-transform-runtime": "~7.16.4",
+    "@babel/preset-env": "~7.16.4",
+    "@babel/preset-react": "~7.16.0",
+    "@babel/preset-typescript": "~7.16.0",
+    "@babel/runtime": "~7.16.3",
+    "@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.1",
-    "@semantic-release/changelog": "~6.0.0",
-    "@semantic-release/exec": "~6.0.1",
-    "@semantic-release/git": "~10.0.0",
-    "@storybook/addon-a11y": "~6.3.10",
-    "@storybook/addon-actions": "~6.3.10",
-    "@storybook/addon-backgrounds": "~6.3.10",
+    "@pmmmwh/react-refresh-webpack-plugin": "~0.5.2",
+    "@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.10",
-    "@storybook/addon-docs": "~6.3.10",
+    "@storybook/addon-controls": "~6.3.12",
+    "@storybook/addon-docs": "~6.3.12",
     "@storybook/addon-events": "~6.2.9",
     "@storybook/addon-knobs": "~6.3.1",
-    "@storybook/addon-links": "~6.3.10",
-    "@storybook/addon-storysource": "~6.3.10",
-    "@storybook/addon-toolbars": "~6.3.10",
-    "@storybook/addon-viewport": "~6.3.10",
-    "@storybook/addons": "~6.3.10",
-    "@storybook/builder-webpack5": "~6.3.10",
-    "@storybook/manager-webpack5": "~6.3.10",
-    "@storybook/react": "~6.3.10",
-    "@storybook/theming": "~6.3.10",
+    "@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",
+    "@stylelint/postcss-css-in-js": "~0.37.2",
     "@svgr/webpack": "~5.5.0",
-    "@testing-library/jest-dom": "~5.14.1",
+    "@testing-library/jest-dom": "~5.15.1",
     "@testing-library/react": "~12.1.2",
     "@testing-library/react-hooks": "~7.0.2",
-    "@types/jest": "~27.0.2",
-    "@types/node": "~16.10.3",
+    "@types/jest": "~27.0.3",
+    "@types/node": "~16.11.10",
     "@types/rimraf": "~3.0.2",
     "@types/testing-library__jest-dom": "~5.14.1",
-    "@typescript-eslint/eslint-plugin": "~4.33.0",
-    "@typescript-eslint/parser": "~4.33.0",
-    "autoprefixer": "~10.3.7",
-    "axe-core": "~4.3.3",
-    "babel-eslint": "~10.1.0",
-    "babel-loader": "~8.2.2",
+    "@typescript-eslint/eslint-plugin": "~5.4.0",
+    "@typescript-eslint/parser": "~5.4.0",
+    "autoprefixer": "~10.4.0",
+    "axe-core": "~4.3.5",
+    "babel-loader": "~8.2.3",
     "babel-plugin-add-import-extension": "1.5.1",
+    "babel-plugin-date-fns": "~2.0.0",
     "babel-plugin-dynamic-import-node": "~2.3.3",
     "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.2",
+    "babel-plugin-source-map-support": "~2.1.3",
+    "babel-plugin-styled-components": "~2.0.1",
     "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",
     "body-parser": "~1.19.0",
-    "browserslist": "~4.17.3",
+    "browserslist": "~4.18.1",
     "bundlesize": "~0.18.1",
     "case-sensitive-paths-webpack-plugin": "~2.4.0",
     "chalk": "~4.1.2",
     "circular-dependency-plugin": "~5.2.2",
     "classnames": "~2.3.1",
-    "compare-versions": "~3.6.0",
+    "compare-versions": "~4.1.1",
     "compression": "~1.7.4",
-    "compression-webpack-plugin": "~9.0.0",
-    "copy-webpack-plugin": "~9.0.1",
+    "compression-webpack-plugin": "~9.0.1",
+    "copy-webpack-plugin": "~10.0.0",
     "cors": "~2.8.5",
     "cross-env": "~7.0.3",
-    "css-loader": "~6.3.0",
-    "css-minimizer-webpack-plugin": "~3.1.1",
+    "css-loader": "~6.5.1",
+    "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-loader": "~2.15.1",
-    "eslint": "~7.32.0",
+    "esbuild-loader": "~2.16.0",
+    "eslint": "~8.3.0",
     "eslint-config-airbnb": "~18.2.1",
-    "eslint-config-airbnb-base": "~14.2.1",
-    "eslint-config-airbnb-typescript": "~14.0.0",
+    "eslint-config-airbnb-base": "~15.0.0",
+    "eslint-config-airbnb-typescript": "~15.0.0",
     "eslint-config-prettier": "~8.3.0",
     "eslint-config-react-app": "~6.0.0",
     "eslint-import-resolver-babel-module": "~5.3.1",
     "eslint-import-resolver-typescript": "~2.5.0",
-    "eslint-import-resolver-webpack": "~0.13.1",
-    "eslint-loader": "~4.0.2",
+    "eslint-import-resolver-webpack": "~0.13.2",
     "eslint-plugin-compat": "~3.13.0",
     "eslint-plugin-eslint-comments": "~3.2.0",
-    "eslint-plugin-import": "~2.24.2",
-    "eslint-plugin-jest": "~24.5.2",
-    "eslint-plugin-jsdoc": "~36.1.0",
-    "eslint-plugin-jsx-a11y": "~6.4.1",
-    "eslint-plugin-mdx": "~1.15.1",
+    "eslint-plugin-import": "~2.25.3",
+    "eslint-plugin-jest": "~25.3.0",
+    "eslint-plugin-jsdoc": "~37.0.3",
+    "eslint-plugin-jsx-a11y": "~6.5.1",
+    "eslint-plugin-mdx": "~1.16.0",
     "eslint-plugin-prettier": "~4.0.0",
-    "eslint-plugin-react": "~7.26.1",
-    "eslint-plugin-react-hooks": "~4.2.0",
+    "eslint-plugin-react": "~7.27.1",
+    "eslint-plugin-react-hooks": "~4.3.0",
     "eslint-plugin-redux-saga": "~1.2.1",
-    "eslint-plugin-testing-library": "~4.12.4",
+    "eslint-plugin-testing-library": "~5.0.0",
     "eslint-plugin-wdio": "~7.4.2",
-    "eslint-webpack-plugin": "~3.0.1",
     "execa": "~5.1.1",
     "express": "~4.17.1",
-    "express-pino-logger": "~6.0.0",
+    "express-pino-logger": "~7.0.0",
     "file-loader": "~6.2.0",
-    "fork-ts-checker-webpack-plugin": "~6.3.4",
+    "fork-ts-checker-webpack-plugin": "~6.4.2",
     "helmet-csp": "~3.4.0",
-    "html-loader": "~2.1.2",
-    "html-webpack-plugin": "~5.3.2",
-    "http-server": "~13.0.2",
-    "husky": "~7.0.2",
+    "html-loader": "~3.0.1",
+    "html-webpack-plugin": "~5.5.0",
+    "http-server": "~14.0.0",
+    "husky": "~7.0.4",
     "husky-init": "~7.0.0",
-    "image-minimizer-webpack-plugin": "~2.2.0",
-    "imagemin-gifsicle": "~7.0.0",
-    "imagemin-jpegtran": "~7.0.0",
-    "imagemin-optipng": "~8.0.0",
-    "imagemin-svgo": "~10.0.0",
-    "imports-loader": "~3.0.0",
+    "image-webpack-loader": "~8.0.1",
+    "imports-loader": "~3.1.1",
     "ip": "~1.1.5",
     "jest-axe": "~5.0.1",
-    "jest-cli": "~27.2.4",
+    "jest-cli": "~27.3.1",
     "jest-sonar-reporter": "~2.0.0",
-    "jest-styled-components": "~7.0.5",
+    "jest-styled-components": "~7.0.8",
     "jscodeshift": "~0.13.0",
     "jsdoc": "~3.6.7",
-    "lint-staged": "~11.2.0",
-    "mini-css-extract-plugin": "~2.4.1",
+    "lint-staged": "~12.1.2",
+    "mini-css-extract-plugin": "~2.4.5",
     "minimist": "~1.2.5",
     "moment": "~2.29.1",
     "moment-locales-webpack-plugin": "~1.2.0",
     "msw": "~0.35.0",
-    "node-plop": "~0.26.2",
-    "nodemon": "~2.0.13",
-    "npm-check-updates": "~11.8.5",
+    "node-plop": "~0.26.3",
+    "nodemon": "~2.0.15",
+    "npm-check-updates": "12.0.2",
     "null-loader": "~4.0.1",
-    "pino": "~6.13.3",
-    "pino-pretty": "~7.0.1",
+    "pino": "~7.4.1",
+    "pino-pretty": "~7.2.0",
     "pinst": "~2.1.6",
-    "plop": "~2.7.4",
-    "postcss": "~8.3.9",
-    "postcss-loader": "~6.1.1",
-    "postcss-preset-env": "~6.7.0",
+    "plop": "~2.7.6",
+    "postcss": "~8.4.1",
+    "postcss-jsx": "~0.36.4",
+    "postcss-html": "~1.3.0",
+    "postcss-markdown": "~1.2.0",
+    "postcss-syntax": "~0.36.2",
+    "postcss-loader": "~6.2.0",
+    "postcss-preset-env": "~7.0.1",
     "prettier": "~2.4.1",
     "pug": "~3.0.2",
     "pug-loader": "~2.4.0",
@@ -201,52 +203,51 @@
     "raw-loader": "~4.0.2",
     "react-axe": "~3.5.4",
     "react-docgen": "~5.4.0",
-    "react-refresh": "~0.10.0",
+    "react-refresh": "~0.11.0",
     "react-test-renderer": "~17.0.2",
     "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",
-    "style-loader": "~3.3.0",
-    "stylelint": "~13.13.1",
-    "stylelint-config-recommended": "~5.0.0",
+    "storybook-addon-turbo-build": "~1.0.1",
+    "style-loader": "~3.3.1",
+    "stylelint": "~14.1.0",
+    "stylelint-config-recommended": "~6.0.0",
     "stylelint-config-styled-components": "~0.1.1",
     "stylelint-custom-processor-loader": "~0.6.0",
-    "stylelint-formatter-pretty": "~2.1.1",
     "stylelint-processor-styled-components": "~1.10.0",
-    "stylelint-webpack-plugin": "~3.0.1",
     "svg-url-loader": "~7.1.1",
-    "svgo": "~2.7.0",
-    "terser-webpack-plugin": "~5.2.4",
-    "ts-node": "~10.2.1",
-    "tsc-alias": "~1.3.10",
-    "tsc-files": "~1.1.2",
-    "tsconfig-paths": "~3.11.0",
-    "tsconfig-paths-webpack-plugin": "~3.5.1",
-    "type-fest": "~2.3.4",
-    "typescript": "~4.4.3",
+    "svgo": "~2.8.0",
+    "terser-webpack-plugin": "~5.2.5",
+    "ts-node": "~10.4.0",
+    "tsc-alias": "~1.4.1",
+    "tsc-files": "~1.1.3",
+    "tsconfig-paths": "~3.12.0",
+    "tsconfig-paths-webpack-plugin": "~3.5.2",
+    "type-fest": "~2.6.0",
+    "typescript": "~4.5.2",
     "update-notifier": "~5.1.0",
     "url-loader": "~4.1.1",
     "uuid": "~8.3.2",
-    "webpack": "~5.57.1",
-    "webpack-bundle-analyzer": "~4.4.2",
-    "webpack-cli": "~4.9.0",
-    "webpack-dev-middleware": "~5.2.1",
+    "webpack": "~5.64.3",
+    "webpack-bundle-analyzer": "~4.5.0",
+    "webpack-cli": "~4.9.1",
+    "webpack-dev-middleware": "~5.2.2",
     "webpack-hot-middleware": "~2.25.1",
     "webpack-manifest-plugin": "~4.0.2",
     "webpack-merge": "~5.8.0",
     "webpack-pwa-manifest": "~4.3.0",
     "webpack-strip-block": "~0.3.0",
     "whatwg-fetch": "~3.6.2",
-    "workbox-webpack-plugin": "~6.3.0",
+    "workbox-webpack-plugin": "~6.4.1",
     "yargs": "~17.2.1"
   },
   "devDependencies": {
-    "redux": "~4.1.1",
+    "redux": "~4.1.2",
     "redux-saga": "~1.1.3",
-    "styled-components": "~5.3.1"
+    "styled-components": "~5.3.3"
   }
 }