@pega/custom-dx-components 26.1.11 → 26.1.12-alpha.0.2

package/src/tasks/bundle/builder/webpack.config.js

@@ -12,23 +12,13 @@ import paths from './paths.js';
 
 const require = createRequire(import.meta.url);
 
-// const appPackageJson = require(paths.appPackageJson);
-
 // Source maps are resource heavy and can cause out of memory issue for large source files.
 
 const compressionBRConfObj = {
   filename: '[path][base].br',
   algorithm: 'brotliCompress',
   test: /\.(js|css|html|svg|png|jpg|woff|woff2)$/,
-  compressionOptions: { level: 11 }
-};
-
-/* For gzip use below */
-const compressionGZConfObj = {
-  filename: '[path][base].gz',
-  algorithm: 'gzip',
-  test: /\.(js|css|html|svg|png|jpg|woff|woff2)$/,
-  compressionOptions: { level: 9 }
+  compressionOptions: { level: 11 },
 };
 
 let shouldUseSourceMap = process.env.SOURCE_MAP;
@@ -46,7 +36,7 @@ const sassModuleRegex = /\.module\.(scss|sass)$/;
 export default (
   webpackEnv,
   // eslint-disable-next-line no-unused-vars
-  { inputFile, outputFile, componentKey, externals, globals, sourceMap, devBuild }
+  { inputFile, outputFile, componentKey, externals, globals, sourceMap, devBuild },
 ) => {
   const isEnvDevelopment = webpackEnv === 'development' || devBuild;
   const isEnvProduction = webpackEnv === 'production';
@@ -57,11 +47,11 @@ export default (
   const getStyleLoaders = (cssOptions, preProcessor) => {
     const loaders = [
       isEnvProduction && {
-        loader: MiniCssExtractPlugin.loader
+        loader: MiniCssExtractPlugin.loader,
       },
       {
         loader: require.resolve('css-loader'),
-        options: cssOptions
+        options: cssOptions,
       },
       {
         // Options for PostCSS as we reference these options twice
@@ -75,13 +65,13 @@ export default (
                 'postcss-preset-env',
                 {
                   // Options
-                }
-              ]
-            ]
+                },
+              ],
+            ],
           },
-          sourceMap: isEnvProduction ? shouldUseSourceMap : isEnvDevelopment
-        }
-      }
+          sourceMap: isEnvProduction ? shouldUseSourceMap : isEnvDevelopment,
+        },
+      },
     ].filter(Boolean);
     if (preProcessor) {
       loaders.push(
@@ -89,15 +79,15 @@ export default (
           loader: require.resolve('resolve-url-loader'),
           options: {
             sourceMap: isEnvProduction ? shouldUseSourceMap : isEnvDevelopment,
-            root: paths.appSrc
-          }
+            root: paths.appSrc,
+          },
         },
         {
           loader: require.resolve(preProcessor),
           options: {
-            sourceMap: true
-          }
-        }
+            sourceMap: true,
+          },
+        },
       );
     }
     return loaders;
@@ -122,20 +112,16 @@ export default (
       library: {
         name: componentKey,
         type: 'umd',
-        export: 'default'
+        export: 'default',
       },
-      publicPath: ''
+      publicPath: '',
     },
     optimization: {
       minimize: isEnvProduction,
-      minimizer: [new TerserPlugin(), new CssMinimizerPlugin()]
+      minimizer: [new TerserPlugin(), new CssMinimizerPlugin()],
     },
     resolve: {
-      plugins: [],
-      extensions: ['.tsx', '.ts', '.js']
-    },
-    resolveLoader: {
-      plugins: []
+      extensions: ['.tsx', '.ts', '.js'],
     },
     module: {
       strictExportPresence: true,
@@ -153,8 +139,8 @@ export default (
               options: {
                 limit: imageInlineSizeLimit,
                 mimetype: 'image/avif',
-                name: `${componentKey}/media/[name].[hash:8].[ext]`
-              }
+                name: `${componentKey}/media/[name].[hash:8].[ext]`,
+              },
             },
             // "url" loader works like "file" loader except that it embeds assets
             // smaller than specified limit in bytes as data URLs to avoid requests.
@@ -164,8 +150,8 @@ export default (
               loader: require.resolve('url-loader'),
               options: {
                 limit: imageInlineSizeLimit,
-                name: `${componentKey}/media/[name].[hash:8].[ext]`
-              }
+                name: `${componentKey}/media/[name].[hash:8].[ext]`,
+              },
             },
             // Process application JS with TS-Loader.
             // The preset includes JSX, Flow, TypeScript, and some ESnext features.
@@ -174,18 +160,18 @@ export default (
               include: paths.appSrc,
               loader: 'ts-loader',
               options: {
-                configFile: 'tsconfig.build.json'
+                configFile: 'tsconfig.build.json',
               },
-              exclude: /node_modules/
+              exclude: /node_modules/,
             },
 
             {
               test: /\.(ts|tsx)$/,
               loader: 'ts-loader',
               options: {
-                configFile: 'tsconfig.build.json'
+                configFile: 'tsconfig.build.json',
               },
-              exclude: /node_modules/
+              exclude: /node_modules/,
             },
             // "postcss" loader applies autoprefixer to our CSS.
             // "css" loader resolves paths in CSS and adds assets as dependencies.
@@ -199,13 +185,13 @@ export default (
               exclude: cssModuleRegex,
               use: getStyleLoaders({
                 importLoaders: 1,
-                sourceMap: isEnvProduction ? shouldUseSourceMap : isEnvDevelopment
+                sourceMap: isEnvProduction ? shouldUseSourceMap : isEnvDevelopment,
               }),
               // Don't consider CSS imports dead code even if the
               // containing package claims to have no side effects.
               // Remove this when webpack adds a warning or an error for this.
               // See https://github.com/webpack/webpack/issues/6571
-              sideEffects: true
+              sideEffects: true,
             },
             // Adds support for CSS Modules (https://github.com/css-modules/css-modules)
             // using the extension .module.css
@@ -215,9 +201,9 @@ export default (
                 importLoaders: 1,
                 sourceMap: isEnvProduction ? shouldUseSourceMap : isEnvDevelopment,
                 modules: {
-                  getLocalIdent: getCSSModuleLocalIdent
-                }
-              })
+                  getLocalIdent: getCSSModuleLocalIdent,
+                },
+              }),
             },
             // Opt-in support for SASS (using .scss or .sass extensions).
             // By default we support SASS Modules with the
@@ -228,15 +214,15 @@ export default (
               use: getStyleLoaders(
                 {
                   importLoaders: 3,
-                  sourceMap: isEnvProduction ? shouldUseSourceMap : isEnvDevelopment
+                  sourceMap: isEnvProduction ? shouldUseSourceMap : isEnvDevelopment,
                 },
-                'sass-loader'
+                'sass-loader',
               ),
               // Don't consider CSS imports dead code even if the
               // containing package claims to have no side effects.
               // Remove this when webpack adds a warning or an error for this.
               // See https://github.com/webpack/webpack/issues/6571
-              sideEffects: true
+              sideEffects: true,
             },
             // Adds support for CSS Modules, but using SASS
             // using the extension .module.scss or .module.sass
@@ -247,11 +233,11 @@ export default (
                   importLoaders: 3,
                   sourceMap: isEnvProduction ? shouldUseSourceMap : isEnvDevelopment,
                   modules: {
-                    getLocalIdent: getCSSModuleLocalIdent
-                  }
+                    getLocalIdent: getCSSModuleLocalIdent,
+                  },
                 },
-                'sass-loader'
-              )
+                'sass-loader',
+              ),
             },
             // "file" loader makes sure those assets get served by WebpackDevServer.
             // When you `import` an asset, you get its (virtual) filename.
@@ -266,14 +252,14 @@ export default (
               // by webpack's internal loaders.
               exclude: [/\.(js|mjs|jsx|ts|tsx)$/, /\.html$/, /\.json$/],
               options: {
-                name: `${componentKey}/media/[name].[hash:8].[ext]`
-              }
-            }
+                name: `${componentKey}/media/[name].[hash:8].[ext]`,
+              },
+            },
             // ** STOP ** Are you adding a new loader?
             // Make sure to add the new loader(s) before the "file" loader.
-          ]
-        }
-      ]
+          ],
+        },
+      ],
     },
     plugins: [
       // This gives some necessary context to module not found errors, such as
@@ -286,14 +272,14 @@ export default (
       // Otherwise React will be compiled in the very slow development mode.
       isEnvProduction &&
         new webpack.DefinePlugin({
-          PRODUCTION: JSON.stringify(true)
+          PRODUCTION: JSON.stringify(true),
         }),
       isEnvProduction &&
         new MiniCssExtractPlugin({
           // Options similar to the same options in webpackOptions.output
           // both options are optional
           filename: `${componentKey}/css/${componentKey}.[contenthash:8].css`,
-          chunkFilename: `${componentKey}/css/${componentKey}.[contenthash:8].chunk.css`
+          chunkFilename: `${componentKey}/css/${componentKey}.[contenthash:8].chunk.css`,
         }),
       // Moment.js is an extremely popular library that bundles large locale files
       // by default due to how webpack interprets its code. This is a practical
@@ -302,44 +288,44 @@ export default (
       // You can remove this if you don't use Moment.js:
       new webpack.IgnorePlugin({
         resourceRegExp: /^\.\/locale$/,
-        contextRegExp: /moment$/
+        contextRegExp: /moment$/,
       }),
       /* cosmos 4.x and below */
       /* Ignore cosmos icons */
       new webpack.IgnorePlugin({
         resourceRegExp: /^\.\/icons$/,
-        contextRegExp: /@pega\/cosmos-react-core\/lib\/components\/Icon$/
+        contextRegExp: /@pega\/cosmos-react-core\/lib\/components\/Icon$/,
       }),
 
       /* Ignore cosmos icons - windows */
       new webpack.IgnorePlugin({
         resourceRegExp: /^\.\/icons$/,
-        contextRegExp: /@pega\\cosmos-react-core\\lib\\components\\Icon$/
+        contextRegExp: /@pega\\cosmos-react-core\\lib\\components\\Icon$/,
       }),
 
       /* Ignore cosmos streamline-icons */
       new webpack.IgnorePlugin({
         resourceRegExp: /^\.\/streamline-icons$/,
-        contextRegExp: /@pega\/cosmos-react-core\/lib\/components\/Icon$/
+        contextRegExp: /@pega\/cosmos-react-core\/lib\/components\/Icon$/,
       }),
 
       /* Ignore cosmos streamline-icons - windows */
       new webpack.IgnorePlugin({
         resourceRegExp: /^\.\/streamline-icons$/,
-        contextRegExp: /@pega\\cosmos-react-core\\lib\\components\\Icon$/
+        contextRegExp: /@pega\\cosmos-react-core\\lib\\components\\Icon$/,
       }),
 
       /* cosmos 6.x and above */
       /* Ignore cosmos icons */
       new webpack.IgnorePlugin({
         resourceRegExp: /^\.\/.*\/.*\.icon$/,
-        contextRegExp: /@pega\/cosmos-react-core\/lib\/components\/Icon$/
+        contextRegExp: /@pega\/cosmos-react-core\/lib\/components\/Icon$/,
       }),
 
       /* Ignore cosmos icons - windows */
       new webpack.IgnorePlugin({
         resourceRegExp: /^\.\/.*\/.*\.icon$/,
-        contextRegExp: /@pega\\cosmos-react-core\\lib\\components\\Icon$/
+        contextRegExp: /@pega\\cosmos-react-core\\lib\\components\\Icon$/,
       }),
 
       // This configuration works on both Windows and Unix-like systems (Linux, macOS).
@@ -354,25 +340,22 @@ export default (
       new webpack.ContextReplacementPlugin(new RegExp('@pega[\\\\/]cosmos-react-core[\\\\/]lib[\\\\/]components[\\\\/]Icon$'), /^$/),
       new webpack.ContextReplacementPlugin(
         new RegExp('@pega[\\\\/]cosmos-react-core[\\\\/]lib[\\\\/]components[\\\\/]Icon[\\\\/]streamline-icons$'),
-        /^$/
+        /^$/,
       ),
 
       new webpack.optimize.LimitChunkCountPlugin({
-        maxChunks: 1
+        maxChunks: 1,
       }),
       new webpack.optimize.MinChunkSizePlugin({
-        minChunkSize: 100000 // Minimum number of characters
+        minChunkSize: 100000, // Minimum number of characters
       }),
-      !devBuild && new CompressionPlugin(compressionBRConfObj)
-
-      /* Dont generate gzip file */
-      /* isEnvProduction && new CompressionPlugin(compressionGZConfObj) */
+      !devBuild && new CompressionPlugin(compressionBRConfObj),
     ].filter(Boolean),
     performance: {
       hints: false,
       maxEntrypointSize: 512000,
-      maxAssetSize: 512000
+      maxAssetSize: 512000,
     },
-    externals
+    externals,
   };
 };

package/src/tasks/bundle/index.js

@@ -16,13 +16,13 @@ const bundleComponent = async (componentKey, sourceMap, devBuild, showStats = tr
 
   const idx = (
     await Promise.all(
-      extensions.map(ext =>
+      extensions.map((ext) =>
         stat(path.join(componentDirectory, `index.${ext}`))
           .then(() => true)
-          .catch(() => false)
-      )
+          .catch(() => false),
+      ),
     )
-  ).findIndex(exists => exists);
+  ).findIndex((exists) => exists);
 
   if (idx === -1) throw new Error('Index file not found.');
 
@@ -35,12 +35,12 @@ const bundleComponent = async (componentKey, sourceMap, devBuild, showStats = tr
     buildConfig = JSON.parse(fs.readFileSync(BUILD_CONFIG_JSON_FILENAME, 'utf8'));
   }
 
-  let externals = buildConfig.externals || [];
+  let externals;
   externals = {
     react: 'React',
     'react-dom': 'ReactDOM',
     PCore: 'PCore',
-    ...buildConfig.externals
+    ...buildConfig.externals,
   };
 
   let globals = buildConfig.globals || {};
@@ -49,7 +49,7 @@ const bundleComponent = async (componentKey, sourceMap, devBuild, showStats = tr
     react: 'React',
     'react-dom': 'ReactDOM',
     PCore: 'PCore',
-    ...buildConfig.globals
+    ...buildConfig.globals,
   };
 
   globals = { ...globals, ...defaultGlobals };
@@ -61,7 +61,7 @@ const bundleComponent = async (componentKey, sourceMap, devBuild, showStats = tr
     globals,
     sourceMap,
     devBuild,
-    showStats
+    showStats,
   });
 };
 

package/src/tasks/create/index.js

@@ -1,10 +1,8 @@
 import path from 'path';
 import { URL, fileURLToPath } from 'url';
 import fs from 'fs';
-import { promisify } from 'util';
 
 import inquirer from 'inquirer';
-import ncp from 'ncp';
 import chalk from 'chalk';
 
 import {
@@ -28,21 +26,23 @@ import {
   getMaxComponentNameCount,
   getStandaloneMaxLibraryCount,
   getStandaloneMaxComponentNameCount,
-  getStandaloneMaxLibraryFromPrefixCount
+  getStandaloneMaxLibraryFromPrefixCount,
 } from '../../util.js';
 import { COMPONENT_SCHEMA, SHARED_FILE_NAMES } from '../../constants.js';
 
-const copy = promisify(ncp);
+const copy = fs.promises.cp;
 
-const copyComponentTemplate = async options => {
+const copyComponentTemplate = async (options) => {
   return copy(options.templateDirectory, options.targetDirectory, {
-    clobber: false
+    recursive: true,
+    force: false,
+    errorOnExist: false,
   });
 };
 
 const compileMustacheTemplates = async (
   componentDirectory,
-  { componentKey, componentName, componentLabel, library, version, type, subtype, description, organization }
+  { componentKey, componentName, componentLabel, library, version, type, subtype, description, organization },
 ) => {
   const files = fs.readdirSync(componentDirectory);
   const componentClassName = convertIntoPascalCase(componentKey);
@@ -92,7 +92,7 @@ const compileMustacheTemplates = async (
   // }
 
   // allowedApplications = allowedApplications.filter(el => !!el.trim()).map(el => el.trim());
-  files.forEach(file => {
+  files.forEach((file) => {
     const filePath = path.join(componentDirectory, file);
 
     const subTypeLabel = getSubTypeLabel(type, subtype);
@@ -112,7 +112,7 @@ const compileMustacheTemplates = async (
       IS_TEMPLATE: isTemplate,
       IS_PICKLIST: isPicklist,
       IS_BOOLEAN: isBool,
-      IS_PHONE: isPhone
+      IS_PHONE: isPhone,
     });
 
     const realFileName = file.replace('.mustache', '');
@@ -216,7 +216,7 @@ const validateCompile = async ({ componentName, componentLabel, library, version
   await copyComponentTemplate({
     ...options,
     targetDirectory,
-    templateDirectory
+    templateDirectory,
   });
   await compileMustacheTemplates(targetDirectory, {
     componentKey,
@@ -227,13 +227,13 @@ const validateCompile = async ({ componentName, componentLabel, library, version
     type,
     subtype,
     description,
-    organization
+    organization,
   });
 
   console.log(chalk.green(`${componentKey} component is created in ${targetDirectory}`));
 };
 
-export default async options => {
+export default async (options) => {
   await showVersion();
 
   await checkLibraryAndArchives();
@@ -262,9 +262,9 @@ export default async options => {
         type,
         subtype,
         description,
-        organization
+        organization,
       },
-      options
+      options,
     );
   } else {
     const framework = 'Constellation';
@@ -277,7 +277,7 @@ export default async options => {
         type: 'rawlist',
         message: 'Enter type of component',
         default: componentDefaults.type,
-        choices: COMPONENT_SCHEMA.type
+        choices: COMPONENT_SCHEMA.type,
       },
       {
         name: 'subtype',
@@ -287,7 +287,7 @@ export default async options => {
         choices: COMPONENT_SCHEMA.subtype.field,
         when(answers) {
           return answers.type === 'Field';
-        }
+        },
       },
       {
         name: 'subtype',
@@ -297,7 +297,7 @@ export default async options => {
         choices: COMPONENT_SCHEMA.subtype.template,
         when(answers) {
           return answers.type === 'Template';
-        }
+        },
       },
       {
         name: 'subtype',
@@ -308,13 +308,13 @@ export default async options => {
         when(answers) {
           return answers.type === 'Widget';
         },
-        validate: value => {
+        validate: (value) => {
           /* value should not be empty */
           if (Array.isArray(value) && value.length) {
             return true;
           }
           return 'Please select subtype';
-        }
+        },
       },
       {
         name: 'subtype',
@@ -324,18 +324,18 @@ export default async options => {
         choices: COMPONENT_SCHEMA.subtype.presentation,
         when(answers) {
           return answers.type === 'Presentation';
-        }
+        },
       },
       {
         name: 'componentName',
-        message: value => {
+        message: (value) => {
           if (serverType === 'launchpad') {
             return `Enter component name (required)`;
           } else {
             return `Enter component name (required) (${maxChars} max chars)`;
           }
         },
-        validate: value => {
+        validate: (value) => {
           /* value should not be empty
           It should not have spaces
           It should not start with a number
@@ -349,30 +349,30 @@ export default async options => {
           }
 
           return 'Only alphanumeric values are allowed, starting with alphabets, no spaces.';
-        }
+        },
       },
       {
         name: 'componentLabel',
         message: 'Enter component label for display (required)',
-        validate: value => {
+        validate: (value) => {
           if (value) {
             return true;
           }
           return 'Please provide value for label';
-        }
+        },
       },
       {
         name: 'version',
         message: 'Enter component version',
         default: componentDefaults.version,
-        validate: value => {
+        validate: (value) => {
           if (validateSemver(value)) {
             return true;
           }
           return 'Please provide semver compatible version e.g 0.0.1';
         },
-        when: () => !isLibraryBased
-      }
+        when: () => !isLibraryBased,
+      },
     ];
 
     const answers = await inquirer.prompt(questions);
@@ -381,7 +381,7 @@ export default async options => {
     const libQuestions = [
       {
         name: 'library',
-        message: value => {
+        message: (value) => {
           if (serverType === 'launchpad') {
             return `Enter library name (required)`;
           } else {
@@ -389,7 +389,7 @@ export default async options => {
           }
         },
         default: componentDefaults.library,
-        validate: value => {
+        validate: (value) => {
           /* value should not be empty
             It should not have spaces
             It should not start with a number
@@ -403,13 +403,13 @@ export default async options => {
           }
           return 'Only alphanumeric values are allowed, starting with alphabets';
         },
-        when: () => !isLibraryBased
+        when: () => !isLibraryBased,
       },
       {
         name: 'description',
         message: 'Enter description for the component (default is label)',
-        default: componentDefaults.description
-      }
+        default: componentDefaults.description,
+      },
     ];
 
     const libAnswers = await inquirer.prompt(libQuestions);
@@ -423,9 +423,9 @@ export default async options => {
         framework,
         type: answers.type,
         subtype: answers.subtype,
-        description: libAnswers.description
+        description: libAnswers.description,
       },
-      options
+      options,
     );
   }
 

package/src/tasks/create/templates/Constellation/Field/Boolean/index.tsx.mustache

@@ -1,9 +1,7 @@
 import {
   Checkbox as CosmosCheckbox,
   CheckboxGroup,
-  FieldValueList,
-  Text,
-  withConfiguration,
+      withConfiguration,
   BooleanDisplay
 } from "@pega/cosmos-react-core";
 
@@ -53,7 +51,6 @@ function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}Props) {
     testId,
     additionalProps = {},
     displayMode,
-    variant = 'inline',
     trueLabel,
     falseLabel
   } = props;
@@ -110,39 +107,7 @@ function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}Props) {
     );
   }
 
-  if (displayMode === "LABELS_LEFT") {
-    return (
-      <Styled{{COMPONENT_CLASS_NAME}}Wrapper>
-      <FieldValueList
-        variant={hideLabel ? 'stacked' : variant}
-        data-testid={testId}
-        fields={[{ id: '1', name: hideLabel ? '' : caption, value: displayComponent }]}
-      />
-     </Styled{{COMPONENT_CLASS_NAME}}Wrapper>
-    );
-  }
 
-  if (displayMode === "STACKED_LARGE_VAL") {
-    return (
-      <Styled{{COMPONENT_CLASS_NAME}}Wrapper>
-      <FieldValueList
-        variant='stacked'
-        data-testid={testId}
-        fields={[
-          {
-            id: '2',
-            name: hideLabel ? '' : caption,
-            value: (
-              <Text variant='h1' as='span'>
-                {displayComponent}
-              </Text>
-            )
-          }
-        ]}
-      />
-      </Styled{{COMPONENT_CLASS_NAME}}Wrapper>
-    );
-  }
 
 
   return (