@pega/custom-dx-components 0.24.16 → 0.242.1

package/package.json

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

package/src/cli.js

@@ -5,15 +5,20 @@ import {
   authenticate,
   buildComponent,
   buildAllComponents,
+  buildLibrary,
   createComponent,
   createAllComponents,
   deleteComponent,
   deleteAllComponents,
+  deleteLibrary,
   initProject,
   listComponents,
+  listLibrary,
   publishComponent,
   publishAllComponents,
+  publishLibrary,
   renameComponent,
+  renameLibrary,
   revertWebPack,
   promoteWebPack,
   updateComponent,
@@ -28,16 +33,21 @@ const TASKS = {
   CREATE_ALL: 'createAll',
   BUILD: 'buildComponent',
   BUILD_ALL: 'buildAllComponents',
+  BUILD_LIB: 'buildLibrary',
   PROMOTE_WEBPACK: 'promoteWebPack',
   REVERT_WEBPACK: 'revertWebPack',
   PUBLISH: 'publish',
-  PUBLISH_All: 'publishAll',
+  PUBLISH_ALL: 'publishAll',
+  PUBLISH_LIB: 'publishLibrary',
   RENAME: 'rename',
+  RENAME_LIB: 'renameLibrary',
   LIST: 'list',
+  LIST_LIB: 'listLibrary',
   VALIDATE_SCHEMA: 'validateSchema',
   UPDATE: 'update',
   DELETE: 'delete',
   DELETE_ALL: "deleteAll",
+  DELETE_LIBRARY: "deleteLibrary",
   AUTHENTICATE: 'authenticate',
   UPGRADE: 'upgrade',
   BUILD_JEST_ASSETS: 'buildJestAssets'
@@ -90,14 +100,22 @@ export default async (args = []) => {
       publishComponent(options);
       break;
     }
-    case TASKS.PUBLISH_All: {
+    case TASKS.PUBLISH_ALL: {
       publishAllComponents(options);
       break;
     }
+    case TASKS.PUBLISH_LIB: {
+      publishLibrary(options);
+      break;
+    }
     case TASKS.RENAME: {
       renameComponent(options);
       break;
     }
+    case TASKS.RENAME_LIB: {
+      renameLibrary(options);
+      break;
+    }
     case TASKS.BUILD: {
       buildComponent(options);
       break;
@@ -106,10 +124,18 @@ export default async (args = []) => {
       buildAllComponents(options);
       break;
     }
+    case TASKS.BUILD_LIB: {
+      buildLibrary(options);
+      break;
+    }
     case TASKS.LIST: {
       listComponents(options);
       break;
     }
+    case TASKS.LIST_LIB: {
+      listLibrary(options);
+      break;
+    }
     case TASKS.VALIDATE_SCHEMA: {
       validate(options);
       break;
@@ -126,6 +152,10 @@ export default async (args = []) => {
       deleteAllComponents(options);
       break;
     }
+    case TASKS.DELETE_LIBRARY: {
+      deleteLibrary(options);
+      break;
+    }
     case TASKS.AUTHENTICATE: {
       authenticate(options);
       break;

package/src/constants.js

@@ -9,6 +9,8 @@ export const COMPONENTS_DIRECTORY_PATH = 'components-directory-path';
 export const COMPONENTS_PATH = 'component';
 export const TOKEN_PATH = 'node_modules/@pega/custom-dx-components/.access_token';
 export const OOTB_COMPONENTS = 'node_modules/@pega/custom-dx-components/.ootb_components';
+export const LIBRARY_BASED = 'libraryBased';
+export const SHARED_DIRECTORY = 'shared';
 
 /* REST end points */
 export const PUBLISH_COMPONENT_SERVICE_REST_ENDPOINT = 'PRRestService/dev/v1/publish_component';
@@ -39,6 +41,8 @@ export const BUILDER_DIR_FILE_PATH = '../bundle/builder';
 
 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_CREATE_PATH = 'create/';
 export const JEST_CREATE_ALL_CONSTELLATION_PATH = 'createAll/Constellation/';
@@ -53,6 +57,11 @@ export const AUTHENTICATE_DEFAULTS = {
   redirectUri: 'https://localhost:4010/'
 };
 
+export const SHARED_FILE_NAMES = [
+  "suggestions-handler.ts",
+  "PConnProps.d.ts"
+];
+
 export const AUTHENTICATE_SCHEMA = {
   serverType: [
     {

package/src/tasks/authenticate/index.js

@@ -4,7 +4,7 @@ import fs from 'node:fs';
 import chalk from 'chalk';
 import inquirer from 'inquirer';
 
-import { checkPathAccess, showVersion } from '../../util.js';
+import { checkPathAccess, showVersion, updateC11NB2SForInfinity } from '../../util.js';
 import {
   TOKEN_PATH,
   INF_TOKEN_URL_V1,
@@ -250,5 +250,16 @@ export default async options => {
     } catch (e) {}
   }
 
+  if (authOK) {
+    // get C11B2S token
+    if (isLaunchPad) {
+
+    }
+    else {
+      // update B2N token in access token file
+      await updateC11NB2SForInfinity();
+    }
+  }
+
   process.exit();
 };

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

@@ -0,0 +1,71 @@
+import fs from 'fs';
+import path from 'path';
+import chalk from 'chalk';
+
+import {
+  getComponents,
+  getPegaServerConfig,
+  checkPathAccess,
+  getComponentDefaults,
+  validateSemver
+} from '../../util.js';
+import { TASKS_CONFIG_JSON_FILENAME, COMPONENTS_DIRECTORY_PATH, COMPONENTS_PATH } from '../../constants.js';
+
+const pegaConfigJsonPath = path.join(path.resolve(), TASKS_CONFIG_JSON_FILENAME);
+
+export const getOrgLib = async () => {
+  const defaultPegaConfig = await getPegaServerConfig();
+
+  await checkPathAccess(pegaConfigJsonPath);
+
+  let data = fs.readFileSync(pegaConfigJsonPath, { encoding: 'utf8' });
+  data = data && JSON.parse(data);
+
+  if (!data[COMPONENTS_DIRECTORY_PATH]) {
+    console.error(`${chalk.red.bold('ERROR')} Could not able find components directory path in config.json`);
+    process.exit(1);
+  }
+
+  const componentData = data[COMPONENTS_PATH];
+
+  let library;
+  ({ library } = componentData);
+  let { organization } = JSON.parse(fs.readFileSync(path.resolve('package.json'), 'utf8'));
+
+  const componentDefaults = await getComponentDefaults();
+  componentDefaults.library = library;
+  componentDefaults.organization = organization;
+
+  return componentDefaults;
+}
+
+export const getBuildComponentQuestions = async (defaultVersion)  => {
+  const components = await getComponents();
+  const defaultPegaConfig = await getPegaServerConfig();
+
+
+  if (components.length == 0) {
+    console.log(chalk.redBright("No components to build"));
+    process.exit(1);
+  }
+
+  return [
+    {
+      name: 'version',
+      message: 'Enter library version',
+      default: defaultVersion,
+      validate: (value) => {
+        if (validateSemver(value)) {
+          return true;
+        }
+        return 'Please provide semver compatible version e.g 0.0.1';
+      }
+    },
+    {
+      name: 'devBuild',
+      type: 'confirm',
+      message: 'Generate development build ?',
+      default: defaultPegaConfig.devBuild
+    }
+  ];
+};

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

@@ -0,0 +1,165 @@
+import inquirer from 'inquirer';
+import { Listr } from 'listr2';
+import chalk from 'chalk';
+import path from 'path';
+import fs from 'fs';
+
+
+import validate from '../validator/index.js';
+import { lintComponent } from '../linter/index.js';
+import { getComponentDirectoryPath, showVersion, getComponents, getLibraryBased, getC11NB2STokenAndStaticServer, updateComponentDefaultVersion, deleteLocalLibrary } from '../../util.js';
+
+import { getBuildComponentQuestions, getOrgLib } from './helper.js';
+import { buildLib } from '@pega/constellation-dx-components-build-utils/index.js';
+
+const isLibraryBased = await getLibraryBased();
+
+export const updateConfigVersion = async (componentKey, buildVersion) => {
+  const componentDirectory = await getComponentDirectoryPath(componentKey);
+  let configFileName = "config.json";
+
+  const configFile = path.join(componentDirectory, configFileName);
+  let configData;
+  try {
+    configData = fs.readFileSync(path.resolve(configFile), 'utf8');
+  }
+  catch (err) {
+
+    // for now, if now file just end
+    console.log(`${chalk.bold.yellow('Config file not availabe for: ' + componentToValidate)}`);
+    return;
+
+  }
+
+  let data;
+  try {
+    data = JSON.parse(configData);
+  }
+  catch (er) {
+    throw new Error(`Invalid schema json in config.json: ${er}`);
+  }
+
+  data.version = buildVersion;
+
+  // write back file
+  fs.writeFileSync(configFile, JSON.stringify(data, null, 4),  { encoding: 'utf8' });
+}
+
+
+export function getCustomTasks(componentKey, devBuild, buildVersion, options) {
+
+  const sDevBuild = devBuild ? '(dev build)' : '';
+  return new Listr(
+    [
+      {
+        title: 'Validate config schema',
+        task: async () => {
+          await updateConfigVersion(componentKey, buildVersion);
+          await validate(componentKey);
+        },
+        skip: () => (componentKey === "shared" ? true : false)
+      },
+      {
+        title: 'Lint component',
+        task: async () => {
+          const targetDirectory = await getComponentDirectoryPath(componentKey);
+          // console.log(`in buildComponent Lint component task: componentKey: ${componentKey} targetDirectory: ${targetDirectory}`);
+          await lintComponent(targetDirectory);
+        }
+      }
+
+    ],
+    { concurrent: false, exitOnError: true }
+  );
+
+
+}
+
+
+
+
+export default async (options) => {
+  if (!isLibraryBased) {
+    console.log(`Command only supported for ${chalk.bold.green('library based')} components.`)
+    process.exit();
+  }
+
+  showVersion();
+
+
+  const components = await getComponents();
+
+  const compDef = await getOrgLib();
+  const organization = compDef.organization;
+  const library = compDef.library;
+  const currentOrgLib = organization.concat("_").concat(library);
+
+  let version;
+  let devBuild;
+
+  if (options.params.length >= 5) {
+    version = options.params[3];
+    const dBuild = options.params[4];
+    devBuild = (dBuild === 'Y' ||
+    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);
+    ({ version, devBuild } = answers);
+  }
+
+
+  const tokenAndStaticServer = await getC11NB2STokenAndStaticServer();
+
+  if (tokenAndStaticServer.C11NB2S === undefined) {
+    console.log(chalk.redBright("Need to authenticate, missing services token.\nBuilding a library requires authentication to acquire a token to build."));
+    process.exit(1);
+
+  }
+
+  const buildLibName = organization.concat("_").concat(library);
+
+  await updateComponentDefaultVersion(version);
+
+  const buildVersion = devBuild && version.indexOf("-dev") < 0 ? version.concat("-dev") : version;
+
+  for await (const componentKey of components) {
+    console.log(chalk.bold.green(`Building ${componentKey}`));
+
+    const myCustomTasks = getCustomTasks(componentKey, devBuild, buildVersion, options );
+
+    try {
+      await myCustomTasks.run();
+    }
+    catch (err) {
+      console.log(chalk.bold.red(err.toString()));
+      process.exit(1);
+    }
+
+    console.log(""); // line break
+
+  }
+
+  console.log(chalk.green.bold("Building Library... "));
+
+  // delete and rebuild library
+  try {
+    await deleteLocalLibrary(currentOrgLib);
+  }
+  catch (ex) {}
+
+  // call constellation-dx-components-build-utils build library, which will create a directory of the "buildLibName"
+  // with subdirectories for each version.
+  // If "buildDev", we append to version "-dev".  Currently, only "-dev" versions, when published, can be deleted.
+  buildLib(buildLibName, buildVersion, tokenAndStaticServer.C11NB2S, tokenAndStaticServer.appStaticContentServer);
+
+
+  return true;
+};

package/src/tasks/create/index.js

@@ -16,9 +16,13 @@ import {
   getPegaServerConfig,
   sanitize,
   validateSemver,
-  showVersion
+  showVersion,
+  updateComponentDefaultLibrary,
+  updateComponentDefaultVersion,
+  copyFileToShared,
+  getLibraryBased
 } from '../../util.js';
-import { COMPONENT_SCHEMA } from '../../constants.js';
+import { COMPONENT_SCHEMA, SHARED_FILE_NAMES } from '../../constants.js';
 
 const copy = promisify(ncp);
 
@@ -28,6 +32,8 @@ const copyComponentTemplate = async options => {
   });
 };
 
+const isLibraryBased = await getLibraryBased();
+
 const compileMustacheTemplates = async (
   componentDirectory,
   {
@@ -90,6 +96,11 @@ const compileMustacheTemplates = async (
     allowedApplications = [].concat(allowedApplications);
   }
 
+  const orgLib = organization.concat("_").concat(library);
+  const componentLabelOrgLib = componentLabel.concat(` (${orgLib})`);
+  const desciptionOrgLib = description == null || description === "" ? componentLabelOrgLib : description.concat(` (${orgLib})`);
+
+
   allowedApplications = allowedApplications.filter(el => !!el.trim()).map(el => el.trim());
   files.forEach(file => {
     const filePath = path.join(componentDirectory, file);
@@ -97,7 +108,7 @@ const compileMustacheTemplates = async (
     const output = compileMustacheTemplate(filePath, {
       COMPONENT_KEY: componentKey,
       COMPONENT_NAME: componentName,
-      COMPONENT_LABEL: componentLabel,
+      COMPONENT_LABEL: isLibraryBased ? componentLabelOrgLib : componentLabel,
       COMPONENT_CLASS_NAME: componentClassName,
       ORGANIZATION: organization,
       VERSION: version,
@@ -105,14 +116,47 @@ const compileMustacheTemplates = async (
       ALLOWEDAPPS: JSON.stringify(allowedApplications),
       TYPE: type,
       SUB_TYPE: JSON.stringify(mustacheSubType),
-      DESCRIPTION: description || componentLabel,
+      DESCRIPTION: isLibraryBased ? desciptionOrgLib : 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 === "index.tsx" || realFileName === "index.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', ''));
+    }
+
+
   });
 };
 
@@ -143,6 +187,15 @@ const validateCompile = async (
   }
 
 
+  // check of library or version has changed from default, if so, update componentDefaults
+  const componentDefaults = await getComponentDefaults();
+  if (componentDefaults.library == null || componentDefaults.library !== library) {
+    await updateComponentDefaultLibrary(library);
+  }
+  if (componentDefaults.version == null || componentDefaults.version !== version) {
+    await updateComponentDefaultVersion(version);
+  }
+
 
   const defaultPegaServerConfig = await getPegaServerConfig();
   const isLaunchpad = defaultPegaServerConfig.serverType === 'launchpad';

package/src/tasks/create/templates/Constellation/Field/Icon-Button-URL/index.tsx.mustache

@@ -119,6 +119,7 @@ function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}Props) {
     // only retrieve table data if table is shown
     if (showTable) {
       PCore.getDataPageUtils()
+        // @ts-ignore
         .getDataAsync(dataViewName, context, params, null, null)
         // @ts-ignore
         .then((response: any) => {

package/src/tasks/create/templates/Constellation/Template/DETAILS/HighlightRender.tsx.mustache

@@ -18,7 +18,7 @@ const HighlightRender = (props: HighlightRenderProps) => {
     field.config.displayAsStatus = true;
   }
 
-  const configProps = getPConnect().resolveConfigProps(field.config);
+  const configProps: any = getPConnect().resolveConfigProps(field.config);
 
   // @ts-ignore
   const reactField = getPConnect().createComponent(field);

package/src/tasks/create/templates/Constellation/Template/DETAILS-region/HighlightRender.tsx.mustache

@@ -18,7 +18,7 @@ const HighlightRender = (props: HighlightRenderProps) => {
     field.config.displayAsStatus = true;
   }
 
-  const configProps = getPConnect().resolveConfigProps(field.config);
+  const configProps: any = getPConnect().resolveConfigProps(field.config);
 
   // @ts-ignore
   const reactField = getPConnect().createComponent(field);

package/src/tasks/create/templates/Constellation/Widget/PAGE/index.tsx.mustache

@@ -50,6 +50,7 @@ function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}Props) {
   useEffect(() => {
 
     PCore.getDataApiUtils()
+      // @ts-ignore
       .getData(dataViewName, {}, context)
       // @ts-ignore
       .then((response: any) => {

package/src/tasks/create/templates/Launchpad/Field/Icon-Button-URL/index.tsx.mustache

@@ -116,6 +116,7 @@ function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}Props) {
     // only retrieve table data if table is shown
     if (showTable) {
       PCore.getDataPageUtils()
+        // @ts-ignore
         .getDataAsync(dataViewName, context, params, null, null)
         // @ts-ignore
         .then((response: any) => {

package/src/tasks/create/templates/Launchpad/Widget/PAGE/index.tsx.mustache

@@ -50,6 +50,7 @@ function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}Props) {
   useEffect(() => {
 
     PCore.getDataApiUtils()
+      // @ts-ignore
       .getData(dataViewName, {}, context)
       // @ts-ignore
       .then((response: any) => {

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

@@ -17,10 +17,14 @@ import { checkPathAccess, showVersion ,
   getComponents,
   getComponentDefaults,
   sanitize,
-  validateSemver
+  validateSemver,
+  updateComponentDefaultLibrary,
+  updateComponentDefaultVersion,
+  copyFileToShared,
+  getLibraryBased
 } from '../../util.js';
 
-import { COMPONENT_SCHEMA, COMPONENTS_DIRECTORY_PATH, TASKS_CONFIG_JSON_FILENAME, COMPONENTS_PATH, CATEGORY_CONSTELLATION } from '../../constants.js';
+import { COMPONENT_SCHEMA, COMPONENTS_DIRECTORY_PATH, TASKS_CONFIG_JSON_FILENAME, COMPONENTS_PATH, CATEGORY_CONSTELLATION, SHARED_FILE_NAMES } from '../../constants.js';
 
 export const DXCB_CONFIG_INTERNAL_JSON_FILENAME = 'src/dxcb.config.json';
 
@@ -28,6 +32,8 @@ const pegaConfigJsonPath = path.join(path.resolve(), TASKS_CONFIG_JSON_FILENAME)
 
 const copy = promisify(ncp);
 
+const isLibraryBased = await getLibraryBased();
+
 const copyComponentTemplate = async (options) => {
   if (options.targetDirectory) {
     return copy(options.templateDirectory, options.targetDirectory, {
@@ -99,6 +105,10 @@ export const compileMustacheTemplates = async (
     allowedApplications = [].concat(allowedApplications);
   }
 
+  const orgLib = organization.concat("_").concat(library);
+  const componentLabelOrgLib = componentLabel.concat(` (${orgLib})`);
+  const desciptionOrgLib = description == null || description === "" ? componentLabelOrgLib : description.concat(` (${orgLib})`);
+
   allowedApplications = allowedApplications.filter((el) => !!el.trim()).map((el) => el.trim());
   files.forEach((file) => {
     const filePath = path.join(componentDirectory, file);
@@ -106,7 +116,7 @@ export const compileMustacheTemplates = async (
     const output = compileMustacheTemplate(filePath, {
       COMPONENT_KEY: componentKey,
       COMPONENT_NAME: componentName,
-      COMPONENT_LABEL: componentLabel,
+      COMPONENT_LABEL: isLibraryBased ? componentLabelOrgLib : componentLabel,
       COMPONENT_CLASS_NAME: componentClassName,
       ORGANIZATION: organization,
       VERSION: version,
@@ -114,14 +124,46 @@ export const compileMustacheTemplates = async (
       ALLOWEDAPPS: JSON.stringify(allowedApplications),
       TYPE: type,
       SUB_TYPE: JSON.stringify(mustacheSubType),
-      DESCRIPTION: description || componentLabel,
+      DESCRIPTION: isLibraryBased ? desciptionOrgLib : 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 === "index.tsx" || realFileName === "index.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', ''));
+    }
+
   });
 };
 
@@ -148,6 +190,15 @@ export const validateCompile = async (
   const isLaunchpad = defaultPegaServerConfig.serverType === 'launchpad';
   const originalFramework = framework;
 
+  // check of library or version has changed from default, if so, update componentDefaults
+  const componentDefaults = await getComponentDefaults();
+  if (componentDefaults.library == null || componentDefaults.library !== library) {
+    await updateComponentDefaultLibrary(library);
+  }
+  if (componentDefaults.version == null || componentDefaults.version !== version) {
+    await updateComponentDefaultVersion(version);
+  }
+
   if (isLaunchpad) {
     framework = "Launchpad";