@pega/custom-dx-components 0.24.16 → 0.25.1

package/src/tasks/bundle/builder/index.js

@@ -3,14 +3,10 @@ import fs from 'fs-extra';
 import webpack from 'webpack';
 import FileSizeReporter from 'react-dev-utils/FileSizeReporter.js';
 import printBuildError from 'react-dev-utils/printBuildError.js';
-import { getUseWebPackPromotion} from '../../../util.js';
+import { getUseWebPackPromotion, addDebugLog} from '../../../util.js';
+
 
 
-const usePromoted = await getUseWebPackPromotion();
-// used by promote and revert webPack commands, do not change
-const configFactory = (
-  await import(`${usePromoted ? `../../../../../../../webpack.config.js` : `./webpack.config.js`}`)
-).default
 
 
 import paths from './paths.js';
@@ -47,9 +43,12 @@ const WARN_AFTER_CHUNK_GZIP_SIZE = 1024 * 1024;
 let compilationErrors = null;
 
 // Create the build and print the deployment instructions.
-function build(config, previousFileSizes) {
-  console.log(`Creating a ${Env} build...`);
+function build(config, previousFileSizes, showStats = true) {
+addDebugLog("bundle build", `config: ${JSON.stringify(config)}, \npreviousFileSizes: ${JSON.stringify(previousFileSizes)}, showStats: ${showStats}`, "");
 
+  if (showStats) {
+    console.log(`Creating a ${Env} build...`);
+  }
 
 
   const compiler = webpack(config);
@@ -65,14 +64,19 @@ function build(config, previousFileSizes) {
        }
        if (stats != null & typeof(stats) == "object") {
         if (stats.errors != undefined) {
-          console.log("stats:" + stats);
+          if (showStats) {
+            console.log("stats:" + stats);
+          }
         }
         else if (stats.compilation != undefined && stats.compilation.errors != undefined) {
 
           //store and print elsewhere
           compilationErrors = stats.compilation.errors;
 
-          console.log("stats:" + stats);
+          if (showStats) {
+            console.log("stats:" + stats);
+          }
+
         }
 
        }
@@ -130,15 +134,22 @@ function build(config, previousFileSizes) {
   });
 }
 
-export default ({
+export default async ({
   inputFile,
   outputFile,
   componentKey,
   externals,
   globals,
   sourceMap,
-  devBuild
+  devBuild,
+  showStats
 }) => {
+  const usePromoted = await getUseWebPackPromotion();
+  // used by promote and revert webPack commands, do not change
+  const configFactory = (
+    await import(`${usePromoted ? `../../../../../../../webpack.config.js` : `./webpack.config.js`}`)
+  ).default
+
   // Generate configuration
   const config = configFactory(Env, {
     inputFile,
@@ -161,28 +172,34 @@ export default ({
         // if you're in it, you don't end up in Trash
         fs.emptyDirSync(paths.appBuild);
         // Start the webpack build
-        return build(config, previousFileSizes);
+        return build(config, previousFileSizes, showStats);
       })
       .then(
         ({ stats, previousFileSizes, warnings }) => {
-          if (warnings.length) {
-            //console.log(chalk.yellow('Compiled with warnings.\n'), warnings[0].message);
-            console.log(chalk.yellow('Compiled with warnings.\n'));
-            for (let warning in warnings) {
-              console.log(chalk.yellow("Warning.."), warnings[warning].message);
+          if (showStats) {
+            if (warnings.length) {
+              //console.log(chalk.yellow('Compiled with warnings.\n'), warnings[0].message);
+              console.log(chalk.yellow('Compiled with warnings.\n'));
+              for (let warning in warnings) {
+                console.log(chalk.yellow("Warning.."), warnings[warning].message);
+              }
+            } else {
+              console.log(chalk.green('Compiled successfully.\n'));
             }
-          } else {
-            console.log(chalk.green('Compiled successfully.\n'));
+
+            console.log('File sizes after gzip:\n');
+            printFileSizesAfterBuild(
+              stats,
+              previousFileSizes,
+              paths.appBuild,
+              WARN_AFTER_BUNDLE_GZIP_SIZE,
+              WARN_AFTER_CHUNK_GZIP_SIZE
+            );
+          }
+          else {
+
           }
 
-          console.log('File sizes after gzip:\n');
-          printFileSizesAfterBuild(
-            stats,
-            previousFileSizes,
-            paths.appBuild,
-            WARN_AFTER_BUNDLE_GZIP_SIZE,
-            WARN_AFTER_CHUNK_GZIP_SIZE
-          );
           resolve('done emitting');
         },
         err  => {

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

@@ -354,7 +354,9 @@ export default (
       /* isEnvProduction && new CompressionPlugin(compressionGZConfObj) */
     ].filter(Boolean),
     performance: {
-      hints: 'warning'
+      hints: false,
+      maxEntrypointSize: 512000,
+      maxAssetSize: 512000
     },
     externals
   };

package/src/tasks/bundle/index.js

@@ -3,13 +3,15 @@ import fs from 'fs';
 import { stat } from 'fs/promises';
 
 import { BUILD_CONFIG_JSON_FILENAME } from '../../constants.js';
-import { getComponentDirectoryPath } from '../../util.js';
+import { getComponentDirectoryPath, addDebugLog } from '../../util.js';
 
 import buildComponent from './builder/index.js';
 
 const extensions = ['ts', 'tsx', 'js', 'jsx'];
 
-const bundleComponent = async (componentKey, sourceMap, devBuild) => {
+const bundleComponent = async (componentKey, sourceMap, devBuild, showStats = true) => {
+addDebugLog("bundleComponent", `componentKey: ${componentKey}, sourceMap: ${sourceMap}, devBuild: ${devBuild}, showStats: ${showStats}`, "");
+
   const componentDirectory = await getComponentDirectoryPath(componentKey);
 
   const idx = (
@@ -58,7 +60,8 @@ const bundleComponent = async (componentKey, sourceMap, devBuild) => {
     externals,
     globals,
     sourceMap,
-    devBuild
+    devBuild,
+    showStats
   });
 };
 

package/src/tasks/create/index.js

@@ -12,13 +12,19 @@ import {
   compileMustacheTemplate,
   getComponentDirectoryPath,
   getComponents,
-  getComponentDefaults,
   getPegaServerConfig,
   sanitize,
   validateSemver,
-  showVersion
+  showVersion,
+  updateComponentDefaultLibrary,
+  updateComponentDefaultVersion,
+  copyFileToShared,
+  getLibraryBased,
+  addDebugLog,
+  checkLibraryAndArchives,
+  getConfigDefaults
 } from '../../util.js';
-import { COMPONENT_SCHEMA } from '../../constants.js';
+import { COMPONENT_SCHEMA, SHARED_FILE_NAMES } from '../../constants.js';
 
 const copy = promisify(ncp);
 
@@ -28,6 +34,7 @@ const copyComponentTemplate = async options => {
   });
 };
 
+
 const compileMustacheTemplates = async (
   componentDirectory,
   {
@@ -40,11 +47,12 @@ const compileMustacheTemplates = async (
     subtype,
     description,
     organization,
-    allowedApplications
+    allowedApplications = ''
   }
 ) => {
   const files = fs.readdirSync(componentDirectory);
   const componentClassName = convertIntoPascalCase(componentKey);
+  const isLibraryBased =  getLibraryBased();
 
   const isTemplate = type === 'Template';
   const isBool = subtype === 'Boolean';
@@ -90,6 +98,7 @@ const compileMustacheTemplates = async (
     allowedApplications = [].concat(allowedApplications);
   }
 
+
   allowedApplications = allowedApplications.filter(el => !!el.trim()).map(el => el.trim());
   files.forEach(file => {
     const filePath = path.join(componentDirectory, file);
@@ -105,14 +114,47 @@ const compileMustacheTemplates = async (
       ALLOWEDAPPS: JSON.stringify(allowedApplications),
       TYPE: type,
       SUB_TYPE: JSON.stringify(mustacheSubType),
-      DESCRIPTION: description || componentLabel,
+      DESCRIPTION: description,
       IS_TEMPLATE: isTemplate,
       IS_PICKLIST: isPicklist,
       IS_BOOLEAN: isBool,
       IS_PHONE: isPhone
     });
-    fs.writeFileSync(filePath, output);
-    fs.renameSync(filePath, filePath.replace('.mustache', ''));
+
+    const realFileName = file.replace('.mustache', '');
+    if ( isLibraryBased) {
+      if (SHARED_FILE_NAMES.includes(realFileName)) {
+        // write to shared
+        copyFileToShared(realFileName, output);
+
+        // delete file from main components
+        fs.rmSync(filePath);
+      }
+      else if (realFileName.includes(".tsx") || realFileName.includes(".ts") ) {
+        // going to search for shared file names an change the import path
+        let newOutput = output;
+        for (const index in SHARED_FILE_NAMES) {
+          const sFileName = SHARED_FILE_NAMES[index].split(".")[0];
+          const orgPath = "./".concat(sFileName);
+          const newPath = "../shared/".concat(sFileName);
+
+          newOutput = newOutput.replaceAll(orgPath, newPath);
+        }
+        fs.writeFileSync(filePath, newOutput);
+        fs.renameSync(filePath, filePath.replace('.mustache', ''));
+      }
+      else {
+        fs.writeFileSync(filePath, output);
+        fs.renameSync(filePath, filePath.replace('.mustache', ''));
+      }
+
+    }
+    else {
+      fs.writeFileSync(filePath, output);
+      fs.renameSync(filePath, filePath.replace('.mustache', ''));
+    }
+
+
   });
 };
 
@@ -132,6 +174,7 @@ const validateCompile = async (
   options
 ) => {
 
+  const isLibraryBased =  getLibraryBased();
   let sSubType = subtype;
   if (Array.isArray(subtype)) {
     sSubType = subtype.join("-");
@@ -142,9 +185,30 @@ const validateCompile = async (
     framework = "Constellation";
   }
 
+  const orgLib = getConfigDefaults();
+  if (isLibraryBased) {
+    // library comes from config
+    library = orgLib.library;
+  }
 
-
+  // check of library or version has changed from default, if so, update componentDefaults
   const defaultPegaServerConfig = await getPegaServerConfig();
+
+  // update defaults when changes
+  if (orgLib.library == null || orgLib.library !== library) {
+    await updateComponentDefaultLibrary(library);
+  }
+
+  // library based, get version from defaults
+  if (isLibraryBased) {
+    version = orgLib.buildVersion;
+  }
+  else {
+    if (orgLib.version == null || orgLib.version !== version) {
+      await updateComponentDefaultVersion(version);
+    }
+  }
+
   const isLaunchpad = defaultPegaServerConfig.serverType === 'launchpad';
   let originalFramework = framework;
 
@@ -168,15 +232,10 @@ const validateCompile = async (
 
   }
 
-
-
-
   if (organization == null) {
    ({ organization } = JSON.parse(fs.readFileSync(path.resolve('package.json'), 'utf8')));
   }
 
-
-
   const componentKey = `${organization}_${library}_${componentName}`;
   const targetDirectory = await getComponentDirectoryPath(componentKey);
 
@@ -208,7 +267,13 @@ const validateCompile = async (
 };
 
 export default async options => {
-  showVersion();
+  await showVersion();
+
+  await checkLibraryAndArchives();
+  const isLibraryBased =  getLibraryBased();
+
+
+addDebugLog("create", "", "+");
 
   if (options.params.length >= 12) {
 
@@ -239,7 +304,7 @@ export default async options => {
       options
     );
   } else {
-    const componentDefaults = await getComponentDefaults();
+    const componentDefaults = getConfigDefaults();
     const questions = [
       {
         name: 'type',
@@ -297,7 +362,7 @@ export default async options => {
           if (value && !/^\d/.test(value) && value === sanitize(value)) {
             return true;
           }
-          return 'Only alphanumeric values are allowed, starting with alphabets';
+          return 'Only alphanumeric values are allowed, starting with alphabets, no spaces.';
         }
       },
       {
@@ -319,7 +384,8 @@ export default async options => {
             return true;
           }
           return 'Please provide semver compatible version e.g 0.0.1';
-        }
+        },
+        when: () => !isLibraryBased
       },
       {
         name: 'library',
@@ -335,16 +401,19 @@ export default async options => {
             return true;
           }
           return 'Only alphanumeric values are allowed, starting with alphabets';
-        }
+        },
+        when: () => !isLibraryBased
+
       },
       {
         name: 'allowedApplications',
         message: 'Please enter the application names to be supported (comma-separated). ',
-        suffix: 'Keep empty for all applications'
+        suffix: 'Keep empty for all applications',
+        when: () => !isLibraryBased
       },
       {
         name: 'description',
-        message: 'Enter description for the component',
+        message: 'Enter description for the component (default is label)',
         default: componentDefaults.description
       }
     ];
@@ -377,4 +446,6 @@ export default async options => {
       );
     });
   }
+
+  addDebugLog("create", "END", "-");
 };

package/src/tasks/create/templates/Constellation/Field/Boolean/config.json.mustache

@@ -140,6 +140,9 @@
   "defaultConfig": {
     "caption": "@L $this.label",
     "trueLabel": "@L Yes",
-    "falseLabel": "@L No"
-  }
+    "falseLabel": "@L No",
+    "detailFVLItem": true,
+    "isFormWidth" : true,
+    "isContainerWidth" : false
+    }
 }

package/src/tasks/create/templates/Constellation/Field/Boolean/create-nonce.ts.mustache

@@ -0,0 +1,6 @@
+/* eslint-disable camelcase */
+// @ts-ignore
+if (window?.__webpack_nonce__) {
+  // @ts-ignore
+  __webpack_nonce__ = window.__webpack_nonce__;
+}

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

@@ -1,6 +1,5 @@
 
 /* eslint-disable react/jsx-no-useless-fragment */
-// @ts-nocheck
 import { useState } from 'react';
 import type { Meta, StoryObj } from '@storybook/react';
 
@@ -17,7 +16,7 @@ const meta: Meta<typeof {{COMPONENT_CLASS_NAME}}> = {
 export default meta;
 type Story = StoryObj<typeof {{COMPONENT_CLASS_NAME}}>;
 
-export const Base{{COMPONENT_CLASS_NAME}}: Story = args => {
+export const Base{{COMPONENT_CLASS_NAME}}: Story = (args: any) => {
 
   const [value, setValue] = useState(configProps.value);
 
@@ -31,7 +30,7 @@ export const Base{{COMPONENT_CLASS_NAME}}: Story = args => {
         },
         getActionsApi: () => {
           return {
-            updateFieldValue: (propName, theValue) => {
+            updateFieldValue: (propName: string, theValue: any) => {
               setValue(theValue);
             },
             triggerFieldChange: () => { /* nothing */}

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

@@ -8,6 +8,7 @@ import {
 } from "@pega/cosmos-react-core";
 
 import type { PConnFieldProps } from './PConnProps';
+import './create-nonce';
 
 // includes in bundle
 import handleEvent from "./event-utils";
@@ -86,7 +87,6 @@ function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}Props) {
         handleEvent(actions, "changeNblur", propName, event.target.checked);
       }}
       onBlur={(event: { target: { checked: any; }; }) => {
-        // @ts-ignore
         pConn.getValidationApi().validate(event.target.checked);
       }}
       data-testid={testId}

package/src/tasks/create/templates/Constellation/Field/Boolean/mock.ts.mustache

@@ -1,4 +1,3 @@
-// @ts-nocheck
 export const configProps = {
   value: true,
   label: 'Boolean label',

package/src/tasks/create/templates/Constellation/Field/Date/config.json.mustache

@@ -194,6 +194,9 @@
     }
   ],
   "defaultConfig": {
-    "label": "@L $this.label"
+    "label": "@L $this.label",
+    "detailFVLItem": true,
+    "isFormWidth" : false,
+    "isContainerWidth" : false
   }
 }

package/src/tasks/create/templates/Constellation/Field/Date/create-nonce.ts.mustache

@@ -0,0 +1,6 @@
+/* eslint-disable camelcase */
+// @ts-ignore
+if (window?.__webpack_nonce__) {
+  // @ts-ignore
+  __webpack_nonce__ = window.__webpack_nonce__;
+}

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

@@ -3,6 +3,7 @@ import { DateInput, FieldValueList, DateTimeDisplay, Text, withConfiguration } f
 import FormattedText from "./FormattedText";
 
 import type { PConnFieldProps } from './PConnProps';
+import './create-nonce';
 
 import Styled{{COMPONENT_CLASS_NAME}}Wrapper from './styles';
 
@@ -103,8 +104,7 @@ function {{COMPONENT_CLASS_NAME}} (props: {{COMPONENT_CLASS_NAME}}Props)  {
   }, [validatemessage, hasSuggestions, myStatus]);
 
   // calculate min and max range of calendar
-  // @ts-ignore
-  const currentYear = getFullYear();
+  const currentYear = getFullYear(null);
 
   const yearFromValue = getFullYear(value);
   const maxDate = getMaxDate(
@@ -160,7 +160,7 @@ function {{COMPONENT_CLASS_NAME}} (props: {{COMPONENT_CLASS_NAME}}Props)  {
      }
 
 
-    if (formatter !== "" && formatExists(formatter)){
+    if (formatter !== "" && formatExists(formatter)) {
         // @ts-ignore
         const {variantVal, formatVal} = datetimedisplayformatter(formatter);
         variantValue = variantVal;
@@ -224,8 +224,7 @@ function {{COMPONENT_CLASS_NAME}} (props: {{COMPONENT_CLASS_NAME}}Props)  {
           hideLabel={hideLabel}
           testId={testId}
           additionalProps={textAdditionalProps}
-          // @ts-ignore
-          customFormat={getDateFormat(locale)}
+          customFormat={getDateFormat(locale, null)}
         />
       </Styled{{COMPONENT_CLASS_NAME}}Wrapper>
     );

package/src/tasks/create/templates/Constellation/Field/DateTime/config.json.mustache

@@ -251,6 +251,9 @@
     }
   ],
   "defaultConfig": {
-    "label": "@L $this.label"
+    "label": "@L $this.label",
+    "detailFVLItem": true,
+    "isFormWidth" : false,
+    "isContainerWidth" : false
   }
 }

package/src/tasks/create/templates/Constellation/Field/DateTime/create-nonce.ts.mustache

@@ -0,0 +1,6 @@
+/* eslint-disable camelcase */
+// @ts-ignore
+if (window?.__webpack_nonce__) {
+  // @ts-ignore
+  __webpack_nonce__ = window.__webpack_nonce__;
+}

package/src/tasks/create/templates/Constellation/Field/DateTime/demo.stories.tsx.mustache

@@ -1,5 +1,4 @@
 /* eslint-disable react/jsx-no-useless-fragment */
-// @ts-nocheck
 import type { Meta, StoryObj } from '@storybook/react';
 import { configProps, stateProps } from './mock';
 import {{COMPONENT_CLASS_NAME}} from './index';
@@ -29,7 +28,7 @@ window.PCore.getEnvironmentInfo = () => {
   };
 };
 
-export const Base{{COMPONENT_CLASS_NAME}}: Story = args => {
+export const Base{{COMPONENT_CLASS_NAME}}: Story = (args: any) => {
   const props = {
     value: configProps.value,
     additionalProps: configProps.additionalProps,

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

@@ -1,6 +1,7 @@
 import { useEffect, useState } from 'react';
 import { DateTimeInput, FieldValueList, DateTimeDisplay, Text, withConfiguration } from "@pega/cosmos-react-core";
 import type { PConnFieldProps } from './PConnProps';
+import './create-nonce';
 
 // includes in bundle
 import DateTimeFormatter from "./date-time";

package/src/tasks/create/templates/Constellation/Field/Decimal/config.json.mustache

@@ -273,6 +273,9 @@
     }
   ],
   "defaultConfig": {
-    "label": "@L $this.label"
+    "label": "@L $this.label",
+    "detailFVLItem": true,
+    "isFormWidth" : false,
+    "isContainerWidth" : false
   }
 }

package/src/tasks/create/templates/Constellation/Field/Decimal/create-nonce.ts.mustache

@@ -0,0 +1,6 @@
+/* eslint-disable camelcase */
+// @ts-ignore
+if (window?.__webpack_nonce__) {
+  // @ts-ignore
+  __webpack_nonce__ = window.__webpack_nonce__;
+}

package/src/tasks/create/templates/Constellation/Field/Decimal/demo.stories.tsx.mustache

@@ -1,6 +1,5 @@
 
 /* eslint-disable react/jsx-no-useless-fragment */
-// @ts-nocheck
 import type { Meta, StoryObj } from '@storybook/react';
 
 import { configProps, fieldMetadata, stateProps } from './mock';
@@ -16,7 +15,7 @@ const meta: Meta<typeof {{COMPONENT_CLASS_NAME}}> = {
 export default meta;
 type Story = StoryObj<typeof {{COMPONENT_CLASS_NAME}}>;
 
-export const Base{{COMPONENT_CLASS_NAME}}: Story = args => {
+export const Base{{COMPONENT_CLASS_NAME}}: Story = (args: any) => {
 
   const props = {
     value: configProps.value,

package/src/tasks/create/templates/Constellation/Field/Decimal/event-utils.ts.mustache

@@ -1,4 +1,4 @@
-const handleEvent = (actions: any, eventType: string, propName: string, value: string) => {
+const handleEvent = (actions: any, eventType: string, propName: string, value: string | number) => {
   switch (eventType) {
     case 'change':
       actions.updateFieldValue(propName, value);

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

@@ -2,6 +2,7 @@ import { useState, useEffect, useRef } from 'react';
 import { NumberInput, NumberDisplay, CurrencyDisplay, FieldValueList, Text, withConfiguration } from '@pega/cosmos-react-core';
 
 import type { PConnFieldProps } from './PConnProps';
+import './create-nonce';
 
 // includes in bundle
 import Styled{{COMPONENT_CLASS_NAME}}Wrapper from './styles';
@@ -87,9 +88,8 @@ function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}Props) {
   }, [validatemessage, hasSuggestions, status]);
 
   const { decimalPrecision, currencyDecimalPrecision } = props;
-  let numberOfDecimals = parseInt(decimalPrecision, 10);
+  let numberOfDecimals: number | undefined = parseInt(decimalPrecision, 10);
   if (Number.isNaN(numberOfDecimals)) {
-    // @ts-ignore
     numberOfDecimals = decimalPrecision === '' ? undefined : 2;
   }
   let noOfFractionDigits = currencyDecimalPrecision === 'auto' ? undefined : parseInt(currencyDecimalPrecision, 10);
@@ -225,14 +225,12 @@ function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}Props) {
         }
         setDecimalValue(enteredValue);
         if (value !== (enteredValue !== '' ? Number(enteredValue) : '')) {
-          // @ts-ignore
           handleEvent(actions, 'change', propName, enteredValue !== '' ? Number(enteredValue) : '');
           hasValueChange.current = true;
         }
       }}
       onBlur={() => {
         if (!value || hasValueChange.current) {
-          // @ts-ignore
           handleEvent(actions, 'blur', propName, decimalValue !== '' ? Number(decimalValue) : '');
           if (hasSuggestions) {
             pConn.ignoreSuggestion("");

package/src/tasks/create/templates/Constellation/Field/Decimal/mock.ts.mustache

@@ -1,5 +1,4 @@
 
-// @ts-nocheck
 export const configProps = {
   value: '',
   label: 'Decimal Sample',

package/src/tasks/create/templates/Constellation/Field/Decimal-Currency/config.json.mustache

@@ -286,6 +286,9 @@
     }
   ],
   "defaultConfig": {
-    "label": "@L $this.label"
+    "label": "@L $this.label",
+    "detailFVLItem": true,
+    "isFormWidth" : false,
+    "isContainerWidth" : false
   }
 }

package/src/tasks/create/templates/Constellation/Field/Decimal-Currency/create-nonce.ts.mustache

@@ -0,0 +1,6 @@
+/* eslint-disable camelcase */
+// @ts-ignore
+if (window?.__webpack_nonce__) {
+  // @ts-ignore
+  __webpack_nonce__ = window.__webpack_nonce__;
+}