@pega/custom-dx-components 0.242.17 → 0.242.18

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pega/custom-dx-components",
-  "version": "0.242.17",
+  "version": "0.242.18",
   "description": "Utility for building custom UI components",
   "bin": "./bin/index.js",
   "scripts": {

package/src/constants.js

@@ -43,7 +43,8 @@ export const CATEGORY_CONSTELLATION = 'constellation';
 
 export const BOOTSTRAP_CONFIG = 'PRRestService/api/application/v2/data_views/D_pxBootstrapConfig';
 
-export const JEST_ASSETS_PATH = 'node_modules/@pega/custom-dx-components/tests/assets/components/';
+export const JEST_ASSETS_ORIGINAL_PATH = 'node_modules/@pega/custom-dx-components/tests/assets/original/components/';
+export const JEST_ASSETS_LIBRARY_PATH = 'node_modules/@pega/custom-dx-components/tests/assets/library/components/';
 export const JEST_CREATE_PATH = 'create/';
 export const JEST_CREATE_ALL_CONSTELLATION_PATH = 'createAll/Constellation/';
 export const JEST_CREATE_ALL_LAUNCHPAD_PATH = 'createAll/Launchpad';

package/src/tasks/build-jest-assets/index.js

@@ -5,11 +5,11 @@ import inquirer from 'inquirer';
 import { Listr } from 'listr2';
 import chalk from 'chalk';
 
-import { showVersion, getServerType, setServerType, getSubComponents, deleteLocalComponent, checkPathAccess, getComponents } from '../../util.js';
+import { showVersion, getServerType, setServerType, getSubComponents, deleteLocalComponent, checkPathAccess, getComponents, getLibraryBased, setLibraryBased } from '../../util.js';
 import createAll from '../create-all/index.js';
 import create from '../create/index.js';
 
-import { JEST_ASSETS_PATH, JEST_CREATE_PATH, JEST_CREATE_ALL_CONSTELLATION_PATH, JEST_CREATE_ALL_LAUNCHPAD_PATH, TASKS_CONFIG_JSON_FILENAME, COMPONENTS_DIRECTORY_PATH } from '../../constants.js';
+import { JEST_ASSETS_ORIGINAL_PATH, JEST_ASSETS_LIBRARY_PATH, JEST_CREATE_PATH, JEST_CREATE_ALL_CONSTELLATION_PATH, JEST_CREATE_ALL_LAUNCHPAD_PATH, TASKS_CONFIG_JSON_FILENAME, COMPONENTS_DIRECTORY_PATH } from '../../constants.js';
 
 
 const getBuildAssetsQuestions = async ()  => {
@@ -92,7 +92,7 @@ const deleteAssets = async() => {
   }
 }
 
-const createJestAssets = async(isLaunchPad = false) => {
+const createJestOriginalAssets = async(isLaunchPad = false) => {
 
   // initially delete local assets
   await deleteAssets();
@@ -108,7 +108,7 @@ const createJestAssets = async(isLaunchPad = false) => {
 
   // goto Constellation
   // get current test assets and delete them
-  let createAllPath = path.join(path.resolve(), JEST_ASSETS_PATH, jestCreateAllPath);
+  let createAllPath = path.join(path.resolve(), JEST_ASSETS_ORIGINAL_PATH, jestCreateAllPath);
   const fileList = await getSubComponents(createAllPath, '');
 
   for (const index in fileList) {
@@ -127,7 +127,56 @@ const createJestAssets = async(isLaunchPad = false) => {
 
   await create(myOptions);
 
-  let createPath = path.join(path.resolve(), JEST_ASSETS_PATH, JEST_CREATE_PATH);
+  let createPath = path.join(path.resolve(), JEST_ASSETS_ORIGINAL_PATH, JEST_CREATE_PATH);
+  const myFileList = await getSubComponents(createPath, '');
+
+  for (const index in myFileList) {
+    const componentToDelete = myFileList[index];
+    // console.log(chalk.bold.green("Deleting: " + componentToDelete));
+    // eslint-disable-next-line no-await-in-loop
+    await deleteTestComponent(createPath, componentToDelete);
+  }
+
+  await copyAssets(createPath);
+  await deleteAssets();
+}
+
+const createJestLibraryAssets = async(isLaunchPad = false) => {
+
+  // initially delete local assets
+  await deleteAssets();
+
+  // const framework = await getFramework();
+  let args  = [ '','', '', 'My', '0.0.1', 'DXIL', '', 'Pega'];
+  let myOptions = {};
+  myOptions["params"] = args;
+
+  await createAll(myOptions);
+
+  const jestCreateAllPath = isLaunchPad ? JEST_CREATE_ALL_LAUNCHPAD_PATH : JEST_CREATE_ALL_CONSTELLATION_PATH;
+
+  // goto Constellation
+  // get current test assets and delete them
+  let createAllPath = path.join(path.resolve(), JEST_ASSETS_LIBRARY_PATH, jestCreateAllPath);
+  const fileList = await getSubComponents(createAllPath, '');
+
+  for (const index in fileList) {
+    const componentToDelete = fileList[index];
+    // console.log(chalk.bold.green("Deleting: " + componentToDelete));
+    // eslint-disable-next-line no-await-in-loop
+    await deleteTestComponent(createAllPath, componentToDelete);
+  }
+
+  await copyAssets(createAllPath);
+  await deleteAssets();
+
+  args  = [ '','', '', 'Field', 'Text', 'MyTestText', 'My Test Text', '0.0.1','DXIL', '', 'My Test Text Description', 'Pega'];
+  myOptions = {};
+  myOptions["params"] = args;
+
+  await create(myOptions);
+
+  let createPath = path.join(path.resolve(), JEST_ASSETS_LIBRARY_PATH, JEST_CREATE_PATH);
   const myFileList = await getSubComponents(createPath, '');
 
   for (const index in myFileList) {
@@ -152,18 +201,32 @@ export default async options => {
   if (buildAssets) {
     // get current server type
     const savedServerType = await getServerType();
+    const savedLibraryBased = await getLibraryBased();
+
+    await setLibraryBased(false);
 
     // Constellation
     await setServerType("infinity");
-    await createJestAssets(false);
+    await createJestOriginalAssets(false);
 
     //Launchpad
     await setServerType("launchpad");
-    await createJestAssets(true);
+    await createJestOriginalAssets(true);
+
+    // Constellation Library
+    await setLibraryBased(true);
+    await setServerType("infinity");
+    await createJestLibraryAssets(false);
+
+    //Launchpad
+    // await setServerType("launchpad");
+    // await createJestLibraryAssets(true);
 
 
     // restore serverType
     await setServerType(savedServerType);
+    await setLibraryBased(savedLibraryBased);
+
   }
 
 

package/src/tasks/build-lib/index.js

@@ -104,11 +104,10 @@ export default async (options) => {
     dBuild === 'y' ||
     dBuild === true ||
     dBuild === 'true') ? true : false;
+
   }
   else {
 
-
-
     console.log(`\nLibrary ${chalk.bold.green(currentOrgLib)} `)
     const questions = await getBuildComponentQuestions(compDef.version);
     const answers = await inquirer.prompt(questions);

package/src/tasks/create/index.js

@@ -32,7 +32,7 @@ const copyComponentTemplate = async options => {
   });
 };
 
-const isLibraryBased = await getLibraryBased();
+let isLibraryBased = await getLibraryBased();
 
 const compileMustacheTemplates = async (
   componentDirectory,
@@ -186,6 +186,7 @@ const validateCompile = async (
     framework = "Constellation";
   }
 
+  isLibraryBased = await getLibraryBased();
 
   // check of library or version has changed from default, if so, update componentDefaults
   const componentDefaults = await getComponentDefaults();

package/src/tasks/create/templates/Constellation/Template/FORM/demo.stories.tsx.mustache

@@ -1,4 +1,3 @@
-
 /* eslint-disable react/jsx-no-useless-fragment */
 // @ts-nocheck
 import { useState } from 'react';
@@ -21,11 +20,8 @@ const meta: Meta<typeof {{COMPONENT_CLASS_NAME}}> = {
 export default meta;
 type Story = StoryObj<typeof {{COMPONENT_CLASS_NAME}}>;
 
-// Below constant will define whether we're in readonly mode or not
-const readOnly = true;
-
 const renderField = resolvedProps => {
-  const { displayMode, value = '', label = '', key } = resolvedProps;
+  const { displayMode, value = '', label = '', key, readOnly } = resolvedProps;
 
   // eslint-disable-next-line react-hooks/rules-of-hooks
   const [inputValue, setInputValue] = useState(value);
@@ -77,7 +73,8 @@ const renderField = resolvedProps => {
         key={key}
         onChange={e => {
           setInputValue(e.target.value);
-        }} />
+        }}
+      />
     );
   }
 
@@ -182,6 +179,8 @@ const renderField = resolvedProps => {
 };
 
 export const Base{{COMPONENT_CLASS_NAME}}: Story = args => {
+  const { readOnly } = args;
+
   const props = {
     readOnly: readOnly,
     getPConnect: () => {
@@ -198,32 +197,38 @@ export const Base{{COMPONENT_CLASS_NAME}}: Story = args => {
             case '@P .FirstName':
               return renderField({
                 ...regionChildrenResolved[0],
-                displayMode: readOnly ? 'LABELS_LEFT' : ''
+                displayMode: readOnly ? 'LABELS_LEFT' : '',
+                readOnly
               });
             case '@P .MiddleName':
               return renderField({
                 ...regionChildrenResolved[1],
-                displayMode: readOnly ? 'LABELS_LEFT' : ''
+                displayMode: readOnly ? 'LABELS_LEFT' : '',
+                readOnly
               });
             case '@P .LastName':
               return renderField({
                 ...regionChildrenResolved[2],
-                displayMode: readOnly ? 'LABELS_LEFT' : ''
+                displayMode: readOnly ? 'LABELS_LEFT' : '',
+                readOnly
               });
             case '@P .Email':
               return renderField({
                 ...regionChildrenResolved[3],
-                displayMode: readOnly ? 'LABELS_LEFT' : ''
+                displayMode: readOnly ? 'LABELS_LEFT' : '',
+                readOnly
               });
             case '@P .PhoneNumber':
               return renderField({
                 ...regionChildrenResolved[4],
-                displayMode: readOnly ? 'LABELS_LEFT' : ''
+                displayMode: readOnly ? 'LABELS_LEFT' : '',
+                readOnly
               });
             case '@P .ServiceDate':
               return renderField({
                 ...regionChildrenResolved[5],
-                displayMode: readOnly ? 'LABELS_LEFT' : ''
+                displayMode: readOnly ? 'LABELS_LEFT' : '',
+                readOnly
               });
           }
         }
@@ -243,6 +248,7 @@ export const Base{{COMPONENT_CLASS_NAME}}: Story = args => {
 };
 
 Base{{COMPONENT_CLASS_NAME}}.args = {
+  readOnly: false,
   showLabel: true,
   label: 'Form template',
   NumCols: 1,

package/src/tasks/create/templates/Constellation/Template/FORM-region/demo.stories.tsx.mustache

@@ -1,5 +1,3 @@
-
-
 // @ts-nocheck
 import { useState } from 'react';
 import type { Meta, StoryObj } from '@storybook/react';
@@ -22,14 +20,13 @@ export default meta;
 type Story = StoryObj<typeof {{COMPONENT_CLASS_NAME}}>;
 
 const renderField = resolvedProps => {
-  const { displayMode, value = '', label = '', key } = resolvedProps;
+  const { displayMode, value = '', label = '', key, readOnly } = resolvedProps;
 
   // eslint-disable-next-line react-hooks/rules-of-hooks
   const [inputValue, setInputValue] = useState(value);
   // eslint-disable-next-line react-hooks/rules-of-hooks
   const [phoneValue, setPhoneValue] = useState('+16397975093');
 
-
   const variant = displayMode === 'LABELS_LEFT' ? 'inline' : 'stacked';
 
   let val =
@@ -131,6 +128,30 @@ const renderField = resolvedProps => {
       </Text>
     );
   }
+  if (readOnly) {
+    return {
+      getPConnect: () => {
+        return {
+          getRawMetadata: () => {
+            return {};
+          },
+          resolveConfigProps: props => {
+            return props;
+          },
+          getConfigProps: () => {
+            return {
+              value: '',
+              label: label,
+              displayMode: 'LABELS_LEFT'
+            };
+          },
+          getComponent: () => {
+            return val;
+          }
+        };
+      }
+    };
+  }
   return (
     <FieldValueList
       variant={variant}
@@ -144,7 +165,10 @@ const renderField = resolvedProps => {
 };
 
 export const Base{{COMPONENT_CLASS_NAME}}: Story = args => {
+  const { readOnly } = args;
+
   const props = {
+    readOnly: readOnly,
     getPConnect: () => {
       return {
         getChildren: () => {
@@ -157,39 +181,92 @@ export const Base{{COMPONENT_CLASS_NAME}}: Story = args => {
           // eslint-disable-next-line default-case
           switch (config.config.value) {
             case '@P .FirstName':
-              return renderField(regionChildrenResolved[0]);
+              return renderField({
+                ...regionChildrenResolved[0],
+                readOnly,
+                displayMode: readOnly ? 'LABELS_LEFT' : ''
+              });
             case '@P .MiddleName':
-              return renderField(regionChildrenResolved[1]);
+              return renderField({
+                ...regionChildrenResolved[1],
+                readOnly,
+                displayMode: readOnly ? 'LABELS_LEFT' : ''
+              });
             case '@P .LastName':
-              return renderField(regionChildrenResolved[2]);
+              return renderField({
+                ...regionChildrenResolved[2],
+                readOnly,
+                displayMode: readOnly ? 'LABELS_LEFT' : ''
+              });
             case '@P .Email':
-              return renderField(regionChildrenResolved[3]);
+              return renderField({
+                ...regionChildrenResolved[3],
+                readOnly,
+                displayMode: readOnly ? 'LABELS_LEFT' : ''
+              });
             case '@P .PhoneNumber':
-              return renderField(regionChildrenResolved[4]);
+              return renderField({
+                ...regionChildrenResolved[4],
+                readOnly,
+                displayMode: readOnly ? 'LABELS_LEFT' : ''
+              });
             case '@P .ServiceDate':
-              return renderField(regionChildrenResolved[5]);
+              return renderField({
+                ...regionChildrenResolved[5],
+                readOnly,
+                displayMode: readOnly ? 'LABELS_LEFT' : ''
+              });
           }
         }
       };
     }
   };
 
-  const regionAChildren = pyReviewRaw.children[0].children.map(child => {
-    return props.getPConnect().createComponent(child);
-  });
-  const regionBChildren = pyReviewRaw.children[1].children.map(child => {
-    return props.getPConnect().createComponent(child);
-  });
+  const regionAChildren = readOnly
+    ? {
+        props: {
+          getPConnect: () => {
+            return {
+              getChildren: () => {
+                return pyReviewRaw.children[0].children.map(child => {
+                  return props.getPConnect().createComponent(child);
+                });
+              }
+            };
+          }
+        }
+      }
+    : pyReviewRaw.children[0].children.map(child => {
+        return props.getPConnect().createComponent(child);
+      });
+
+  const regionBChildren = readOnly
+    ? {
+        props: {
+          getPConnect: () => {
+            return {
+              getChildren: () => {
+                return pyReviewRaw.children[1].children.map(child => {
+                  return props.getPConnect().createComponent(child);
+                });
+              }
+            };
+          }
+        }
+      }
+    : pyReviewRaw.children[1].children.map(child => {
+        return props.getPConnect().createComponent(child);
+      });
 
   return (
     <{{COMPONENT_CLASS_NAME}} {...props} {...args}>
-      {regionAChildren}
-      {regionBChildren}
+      {[regionAChildren, regionBChildren]}
     </{{COMPONENT_CLASS_NAME}}>
   );
 };
 
 Base{{COMPONENT_CLASS_NAME}}.args = {
+  readOnly: false,
   showLabel: true,
   label: 'Form Region template',
 };

package/src/tasks/create-all/index.js

@@ -32,7 +32,7 @@ const pegaConfigJsonPath = path.join(path.resolve(), TASKS_CONFIG_JSON_FILENAME)
 
 const copy = promisify(ncp);
 
-const isLibraryBased = await getLibraryBased();
+let isLibraryBased = await getLibraryBased();
 
 const copyComponentTemplate = async (options) => {
   if (options.targetDirectory) {
@@ -255,6 +255,9 @@ export const validateCompile = async (
 };
 
 export const validateCompileAll = async ({ prefix, library, version, allowedApplications, organization }, options) => {
+
+  isLibraryBased = await getLibraryBased();
+
   // eslint-disable-next-line no-restricted-syntax, guard-for-in
   for (const fieldIdx in COMPONENT_SCHEMA.subtype.field) {
     const type = 'Field';

package/src/tasks/delete-lib/index.js

@@ -31,7 +31,7 @@ export default async (options) => {
   const libraryName = organization.concat("_").concat(library);
 
   if (options.params.length >= 5) {
-    sourceOfLibrary = options.param[3];
+    sourceOfLibrary = options.params[3];
     version = options.params[4];
 
   }

package/src/tasks/init/template/package.json.mustache

@@ -80,7 +80,7 @@
   },
   "devDependencies": {
     "@pega/configs": "^0.6.0",
-    "@pega/custom-dx-components": "0.242.17",
+    "@pega/custom-dx-components": "0.242.18",
     "@pega/pcore-pconnect-typedefs": "~3.0.0",
     "@storybook/addon-actions": "^7.6.7",
     "@storybook/addon-essentials": "^7.6.19",

package/src/tasks/list-lib/index.js

@@ -46,9 +46,14 @@ export default async (options) => {
   organization = compDef.organization;
   library = compDef.library;
   const libraryName = organization.concat("_").concat(library);
+  let selectedVersion;
+  let libVersions = [];
 
-  if (options.params.length >= 4) {
-    sourceOfLibrary = options.param[3];
+  if (options.params.length >= 5) {
+    sourceOfLibrary = options.params[3];
+    selectedVersion = options.params[4];
+
+    libVersions.push(selectedVersion);
 
   }
   else {
@@ -62,26 +67,30 @@ export default async (options) => {
   if (sourceOfLibrary === SOURCE_OF_COMPONENT_TYPES.LOCAL ) {
     // local
 
-    let libVersions = [];
-    try {
-      libVersions = await getLocalLibraryVersions(libraryName);
-    }
-    catch (ex) {
-    }
+    if (libVersions.length == 0) {
+      try {
+        libVersions = await getLocalLibraryVersions(libraryName);
+      }
+      catch (ex) {
+      }
 
+    }
 
     if (libVersions.length > 0) {
-        const libAnswers = await inquirer.prompt([
 
-          {
-            name: 'libVersion',
-            type: 'rawlist',
-            message: 'Enter version',
-            choices: libVersions
-          },
-        ]);
+        if (selectedVersion === undefined) {
+          const libAnswers = await inquirer.prompt([
+
+            {
+              name: 'libVersion',
+              type: 'rawlist',
+              message: 'Enter version',
+              choices: libVersions
+            },
+          ]);
 
-        const selectedVersion = libAnswers.libVersion;
+          selectedVersion = libAnswers.libVersion;
+        }
 
         let data = await getLocalLibraryVersionData(libraryName, selectedVersion);
         data = JSON.parse(data);

package/src/tasks/promote-webpack/index.js

@@ -7,7 +7,6 @@ import chalk from 'chalk';
 import inquirer from 'inquirer';
 
 import {
-  convertIntoPascalCase,
   checkPathAccess,
   showVersion,
   updateUseWebPackPromotion,
@@ -18,7 +17,6 @@ import {
   WEBPACK_CONFIG_JS_FILENAME,
   WEBPACK_PATHS_JS_FILENAME,
   PACKAGE_JSON_FILENAME,
-  BUILDER_INDEX_FILE_PATH,
   BUILDER_DIR_FILE_PATH
 } from '../../constants.js';