@pega/custom-dx-components 0.0.1 → 0.23.2

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

@@ -0,0 +1,398 @@
+import path from 'path';
+import { URL, fileURLToPath } from 'url';
+import fs from 'fs';
+import { promisify } from 'util';
+import { join } from 'path';
+
+import inquirer from 'inquirer';
+import ncp from 'ncp';
+import chalk from 'chalk';
+
+import { checkPathAccess, showVersion } from '../../util.js';
+
+export const DXCB_CONFIG_INTERNAL_JSON_FILENAME = 'src/dxcb.config.json';
+
+import {
+  convertIntoPascalCase,
+  compileMustacheTemplate,
+  getComponentDirectoryPath,
+  getPegaConfig,
+  getComponents,
+  getComponentDefaults,
+  sanitize,
+  validateSemver
+} from '../../util.js';
+import {
+  COMPONENT_SCHEMA,
+  COMPONENTS_DIRECTORY_PATH,
+  TASKS_CONFIG_JSON_FILENAME,
+  COMPONENTS_PATH,
+  CATEGORY_CONSTELLATION
+ } from '../../constants.js';
+
+const pegaConfigJsonPath = path.join(path.resolve(), TASKS_CONFIG_JSON_FILENAME);
+
+const copy = promisify(ncp);
+
+const copyComponentTemplate = async options => {
+  if (options.targetDirectory) {
+    return copy(options.templateDirectory, options.targetDirectory, {
+      clobber: false
+    });
+  }
+  else {
+    return copy(options.templateDirectoryConstellation, options.targetDirectoryConstellation, {
+      clobber: false,
+      filter: (fileName) => {
+        // filter out the file config.json or config.json.mustache
+        if (fileName.indexOf("config.json") >= 0) return false;
+        else return true;
+      }
+    });
+  }
+
+};
+
+export const compileMustacheTemplates = async (
+  componentDirectory,
+  {
+    componentKey,
+    componentName,
+    componentLabel,
+    library,
+    version,
+    type,
+    subtype,
+    description,
+    organization,
+    allowedApplications
+  }
+) => {
+  const files = fs.readdirSync(componentDirectory);
+  const componentClassName = convertIntoPascalCase(componentKey);
+
+  const isTemplate = type === 'Template';
+  const isPicklist = subtype === 'Picklist';
+  const isBool = subtype === 'Boolean';
+  const isPhone = subtype === 'Phone';
+
+  if (Array.isArray(subtype) && subtype.length === 1) {
+    subtype = subtype.toString();
+  }
+
+  let mustacheSubType = subtype;
+
+  // overrides
+  if (typeof(mustacheSubType) == "string") {
+    switch (mustacheSubType) {
+      case "FORM-region" :
+        mustacheSubType = "FORM";
+        break;
+      case "DETAILS-region" :
+        mustacheSubType = "DETAILS";
+        break;
+      case "Text-Input" :
+        mustacheSubType = "Text";
+        break;
+    }
+
+  }
+
+  if (allowedApplications.trim() === '') {
+    allowedApplications = [];
+  } else {
+    if (allowedApplications.indexOf(',') !== -1) {
+      allowedApplications = allowedApplications.split(',');
+    }
+    allowedApplications = [].concat(allowedApplications);
+  }
+
+  allowedApplications = allowedApplications.filter(el => !!el.trim()).map(el => el.trim());
+  files.forEach(file => {
+    const filePath = path.join(componentDirectory, file);
+
+    const output = compileMustacheTemplate(filePath, {
+      COMPONENT_KEY: componentKey,
+      COMPONENT_NAME: componentName,
+      COMPONENT_LABEL: componentLabel,
+      COMPONENT_CLASS_NAME: componentClassName,
+      ORGANIZATION: organization,
+      VERSION: version,
+      LIBRARY: library,
+      ALLOWEDAPPS: JSON.stringify(allowedApplications),
+      TYPE: type,
+      SUB_TYPE: JSON.stringify(mustacheSubType),
+      DESCRIPTION: description || componentLabel,
+      IS_TEMPLATE: isTemplate,
+      IS_PICKLIST: isPicklist,
+      IS_BOOLEAN: isBool,
+      IS_PHONE: isPhone
+    });
+    fs.writeFileSync(filePath, output);
+    fs.renameSync(filePath, filePath.replace('.mustache', ''));
+  });
+};
+
+
+export const validateCompileAll = async (
+  {
+    prefix,
+    library,
+    version,
+    allowedApplications,
+    organization
+  },
+  options,
+
+) => {
+
+
+  for (let fieldIdx in COMPONENT_SCHEMA.subtype.field) {
+    const type = "Field";
+    const subtype = COMPONENT_SCHEMA.subtype.field[fieldIdx].value;
+    const prefixNoSpace = prefix.replace(/\s+/g, '');
+    const componentNameNoSpace = COMPONENT_SCHEMA.subtype.field[fieldIdx].name.replace(/\s+/g, '');
+    const componentName = "".concat(prefixNoSpace).concat(componentNameNoSpace);
+    const componentLabel = "".concat(prefix).concat(" ").concat(COMPONENT_SCHEMA.subtype.field[fieldIdx].name);
+    const description = componentLabel;
+
+    await validateCompile(
+      {
+        library,
+        organization,
+        componentName,
+        componentLabel,
+        version,
+        type,
+        subtype,
+        description,
+        allowedApplications
+      },
+      options
+    )
+  }
+
+  for (let templateIdx in COMPONENT_SCHEMA.subtype.template) {
+    const type = "Template";
+    const subtype = COMPONENT_SCHEMA.subtype.template[templateIdx].value;
+    const prefixNoSpace = prefix.replace(/\s+/g, '');
+    let templateNameOriginal  = COMPONENT_SCHEMA.subtype.template[templateIdx].name;
+    let templateName =  convertIntoPascalCase(COMPONENT_SCHEMA.subtype.template[templateIdx].name);
+    let templateLabel = convertIntoPascalCase(COMPONENT_SCHEMA.subtype.template[templateIdx].name);
+    if (templateNameOriginal.indexOf("region") >= 0) {
+      let templateNameBase = convertIntoPascalCase(templateNameOriginal.replace(" region", ""));
+      templateName = "TwoColumn".concat(templateNameBase);
+      templateLabel = "Two Column ".concat(templateNameBase);
+    }
+    const componentName = "".concat(prefixNoSpace).concat(templateName);
+    const componentLabel = "".concat(prefix).concat(" ").concat(templateLabel);
+    const description = componentLabel;
+
+    await validateCompile(
+      {
+        library,
+        organization,
+        componentName,
+        componentLabel,
+        version,
+        type,
+        subtype,
+        description,
+        allowedApplications
+      },
+      options
+    )
+  }
+
+
+  for (let widgetIdx in COMPONENT_SCHEMA.subtype.widget) {
+    const type = "Widget";
+    const subtype = COMPONENT_SCHEMA.subtype.widget[widgetIdx].value;
+    const prefixNoSpace = prefix.replace(/\s+/g, '');
+    let widgetNameOriginal  = COMPONENT_SCHEMA.subtype.widget[widgetIdx].name;
+    let widgetName = convertIntoPascalCase(COMPONENT_SCHEMA.subtype.widget[widgetIdx].name).concat("Widget");
+    let widgetLabel = convertIntoPascalCase(COMPONENT_SCHEMA.subtype.widget[widgetIdx].name).concat(" Widget");
+    if (widgetName.indexOf("&") >= 0) {
+      widgetName = convertIntoPascalCase(widgetNameOriginal.replace(" & ", ""));
+    }
+    const componentName = "".concat(prefixNoSpace).concat(widgetName);
+    const componentLabel = "".concat(prefix).concat(" ").concat(widgetLabel);
+    const description = componentLabel;
+
+    await validateCompile(
+      {
+        library,
+        organization,
+        componentName,
+        componentLabel,
+        version,
+        type,
+        subtype,
+        description,
+        allowedApplications
+      },
+      options
+    )
+  }
+
+
+}
+
+
+export const validateCompile = async (
+  {
+    library,
+    organization,
+    componentName,
+    componentLabel,
+    version,
+    framework,
+    type,
+    subtype,
+    description,
+    allowedApplications
+  },
+  options
+) => {
+
+  let sSubType = subtype;
+  if (Array.isArray(subtype)) {
+    sSubType = subtype.join("-");
+  }
+
+  const typeLC = type.toLowerCase();
+
+  //await checkPathAccess(pegaConfigInternalJsonPath);
+
+  framework = convertIntoPascalCase(CATEGORY_CONSTELLATION);
+
+  let pegaConfig = await getPegaConfig();
+  let templateParentDir = `./templates/${framework}`;
+
+
+  const templateDir = `${templateParentDir}/${type}/${sSubType}`;
+  let templateDirectory = fileURLToPath(new URL(templateDir, import.meta.url));
+  templateDirectory = templateDirectory.replace( path.sep + "create-all", path.sep + "create");
+
+  const componentKey = `${organization}_${library}_${componentName}`;
+
+  const targetDirectory = await getComponentDirectoryPath(componentKey);
+
+  const components = await getComponents(false);
+
+
+  if (components.includes(componentKey)) {
+    console.log(chalk.red(`${componentKey} component already exists in ${targetDirectory}`));
+
+    return;
+  }
+
+  // component
+  await copyComponentTemplate({
+    ...options,
+    targetDirectory,
+    templateDirectory
+  });
+  await compileMustacheTemplates(targetDirectory, {
+    componentKey,
+    componentName,
+    componentLabel,
+    library,
+    version,
+    type,
+    subtype,
+    description,
+    organization,
+    allowedApplications
+  });
+
+
+  console.log(chalk.green(`created ${componentKey} component in ${targetDirectory}`));
+
+
+
+};
+
+export default async options => {
+  showVersion();
+
+  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];
+
+  const { library } = componentData;
+  const { organization } = JSON.parse(fs.readFileSync(path.resolve('package.json'), 'utf8'));
+
+  let componentDefaults = await getComponentDefaults();
+  componentDefaults.library = library;
+
+
+  const questions = [
+    {
+      name: 'prefix',
+      message: 'Enter prefix label'
+    },
+    {
+      name: 'version',
+      message: 'Enter component version',
+      default: componentDefaults.version,
+      validate: value => {
+        if (validateSemver(value)) {
+          return true;
+        }
+        return 'Please provide semver compatible version e.g 0.0.1';
+      }
+    },
+    {
+      name: 'library',
+      message: 'Enter library name (required)',
+      default: componentDefaults.library,
+      validate: value => {
+        /* value should not be empty
+          It should not have spaces
+          It should not start with a number
+          Only case-insensitive alphanumeric values are allowed
+        */
+        if (value && !/^\d/.test(value) && value === sanitize(value)) {
+          return true;
+        }
+        return 'Only alphanumeric values are allowed, starting with alphabets';
+      }
+    },
+    {
+      name: 'allowedApplications',
+      message: 'Please enter the application names to be supported (comma-separated). ',
+      suffix: 'Keep empty for all applications'
+    }
+  ];
+
+  await inquirer.prompt(questions).then(async answers => {
+    const {
+      prefix,
+      library,
+      version,
+      allowedApplications
+    } = answers;
+    await validateCompileAll(
+      {
+        prefix,
+        library,
+        version,
+        allowedApplications,
+        organization
+      },
+      options
+    );
+  });
+
+};

package/src/tasks/delete/helper.js

@@ -2,17 +2,17 @@ import chalk from 'chalk';
 import inquirer from 'inquirer';
 import ora from 'ora';
 
-import { LIST_COMPONENT_SERVICE_REST_ENDPOINT } from '../../constants.js';
+
 import {
-  constructCompleteUrl,
   deleteLocalComponent,
   deleteServerComponent,
   getComponents,
-  getPegaServerConfig,
-  nodeFetch
+  getPegaServerConfig
 } from '../../util.js';
 import { getComponentsFromServer } from '../list/helper.js';
 
+
+
 export const SOURCE_OF_COMPONENT_TYPES = {
   SERVER: 'Server',
   LOCAL: 'Local'
@@ -92,6 +92,8 @@ export const deleteServerComponents = async (sourceOfComponents, answers) => {
       choices: choicesArr
     });
     await deleteServerComponent(answers.componentToDelete);
+
+
   } else {
     console.log(chalk.bold.redBright(`No custom components in ${sourceOfComponents}`));
   }

package/src/tasks/delete/index.js

@@ -9,6 +9,8 @@ import {
   getDeleteComponentsQuestions
 } from './helper.js';
 
+import { showVersion } from '../../util.js';
+
 const deleteComponentsFn = async (sourceOfComponents, answers) => {
   switch (sourceOfComponents) {
     case SOURCE_OF_COMPONENT_TYPES.LOCAL: {
@@ -27,6 +29,8 @@ const deleteComponentsFn = async (sourceOfComponents, answers) => {
 };
 
 export default async options => {
+  showVersion();
+
   let sourceOfComponentsOption = SOURCE_OF_COMPONENT_TYPES.LOCAL;
   if (options.params[3] === SOURCE_OF_COMPONENT_TYPES.LOCAL) {
     sourceOfComponentsOption = options.params[3];

package/src/tasks/delete-all/helper.js

@@ -0,0 +1,153 @@
+import chalk from 'chalk';
+import inquirer from 'inquirer';
+import ora from 'ora';
+
+import {
+  deleteLocalComponent,
+  deleteServerComponent,
+  getComponents,
+  getPegaServerConfig,
+  validateRulesetVersion
+} from '../../util.js';
+import { getComponentsFromServer } from '../list/helper.js';
+
+export const SOURCE_OF_COMPONENT_TYPES = {
+  SERVER: 'Server',
+  LOCAL: 'Local'
+};
+
+export const getDeleteComponentsQuestions = async (options, sourceOfComponentsOption) => {
+  const defaultPegaServerConfig = await getPegaServerConfig();
+
+
+  return [
+    {
+      name: 'sourceOfComponents',
+      type: 'rawlist',
+      message: 'Delete components from Server or Local ?',
+      choices: Object.values(SOURCE_OF_COMPONENT_TYPES),
+      default: defaultPegaServerConfig.sourceOfComponents,
+      when() {
+        return !options.params[3];
+      }
+    }
+  ];
+};
+
+
+
+export const deleteLocalComponents = async sourceOfComponents => {
+  const localComponents = await getComponents();
+
+  for (var index in localComponents) {
+    console.log(chalk.bold.green(localComponents[index]));
+  }
+
+  if (localComponents.length > 0) {
+    const answers = await inquirer.prompt([
+
+      {
+        name: 'confirmDeletion',
+        type: 'confirm',
+        message: 'Delete all local ?',
+        default: false
+      }
+    ]);
+    if (answers.confirmDeletion) {
+      for (var index in localComponents) {
+        var componentToDelete = localComponents[index];
+        //console.log(chalk.bold.green("Deleting: " + componentToDelete));
+        await deleteLocalComponent(componentToDelete);
+      }
+    }
+  } else {
+    console.log(chalk.bold.redBright(`No custom components in ${sourceOfComponents}`));
+  }
+};
+
+export const deleteServerComponents = async (sourceOfComponents, answers) => {
+  const spinner = ora('Fetching components from server').start();
+  const data = await getComponentsFromServer(answers);
+  const defaultPegaConfig = await getPegaServerConfig();
+
+  const serverComponents = JSON.parse(data);
+  spinner.stop();
+  if (serverComponents && serverComponents.pxResults?.length > 0) {
+    const choicesArr = serverComponents.pxResults.map(({ label, pyRuleSet, pyRuleSetVersion }) => {
+      const name = `${standardizeStr(label, 45)} ${standardizeStr(pyRuleSet, 30)} ${standardizeStr(
+        pyRuleSetVersion,
+        20
+      )}`;
+
+      const value = `${label}~|~${pyRuleSet}~|~${pyRuleSetVersion}`;
+      const short = `Selected component : ${chalk.redBright(
+        `${label} ${pyRuleSet} : ${pyRuleSetVersion}`
+      )}`;
+
+      return { name, value, short };
+    });
+
+    const selectedComp = await inquirer.prompt([
+      {
+        name: 'rulesetName',
+        message: 'Enter ruleset name',
+        default: defaultPegaConfig.rulesetName,
+        validate: value => {
+          if (value.trim()) {
+            return true;
+          }
+          return 'Ruleset name cannot be empty';
+        }
+      },
+      {
+        name: 'rulesetVersion',
+        message: 'Enter ruleset version',
+        default: defaultPegaConfig.rulesetVersion,
+        validate: value => {
+          if (validateRulesetVersion(value)) {
+            return true;
+          }
+          return 'Please provide compatible version e.g 01-01-01';
+        }
+      }
+      ]);
+
+      for (var index in choicesArr) {
+        var componentToDelete = choicesArr[index].value;
+        var arData = componentToDelete.split("~|~");
+        if (arData[1] == selectedComp.rulesetName && arData[2] == selectedComp.rulesetVersion) {
+          console.log(chalk.bold.green(arData[0]));
+        }
+      }
+
+
+    const answers = await inquirer.prompt([
+      {
+        name: 'confirmDeletion',
+        type: 'confirm',
+        message: 'Do you want to delete these components ?',
+        default: false
+      }
+    ]);
+    if (answers.confirmDeletion) {
+      for (var index in choicesArr) {
+        var componentToDelete = choicesArr[index].value;
+        var arData = componentToDelete.split("~|~");
+        if (arData[1] == selectedComp.rulesetName && arData[2] == selectedComp.rulesetVersion) {
+          await deleteServerComponent(componentToDelete);
+        }
+      }
+    }
+
+
+  } else {
+    console.log(chalk.bold.redBright(`No custom components in ${sourceOfComponents}`));
+  }
+};
+
+export const standardizeStr = (str, leng) => {
+  for (let i = str.length; i <= leng; i++) {
+    str += ' ';
+  }
+  return str;
+};

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

@@ -0,0 +1,49 @@
+import inquirer from 'inquirer';
+import ora from 'ora';
+import chalk from 'chalk';
+
+import {
+  deleteLocalComponents,
+  SOURCE_OF_COMPONENT_TYPES,
+  deleteServerComponents,
+  getDeleteComponentsQuestions
+} from './helper.js';
+
+import { showVersion } from '../../util.js';
+
+const deleteComponentsFn = async (sourceOfComponents, answers) => {
+  switch (sourceOfComponents) {
+    case SOURCE_OF_COMPONENT_TYPES.LOCAL: {
+      await deleteLocalComponents(sourceOfComponents);
+      break;
+    }
+    case SOURCE_OF_COMPONENT_TYPES.SERVER: {
+      await deleteServerComponents(sourceOfComponents, answers);
+      break;
+    }
+    default: {
+      console.log('Source of components needs to be either Local or Server');
+      break;
+    }
+  }
+};
+
+export default async options => {
+  showVersion();
+
+  let sourceOfComponentsOption = SOURCE_OF_COMPONENT_TYPES.LOCAL;
+  if (options.params[3] === SOURCE_OF_COMPONENT_TYPES.LOCAL) {
+    sourceOfComponentsOption = options.params[3];
+    await deleteComponentsFn(sourceOfComponentsOption);
+  } else if (options.params[3] === SOURCE_OF_COMPONENT_TYPES.SERVER) {
+    sourceOfComponentsOption = options.params[3];
+    const questions = await getDeleteComponentsQuestions(options, sourceOfComponentsOption);
+    const answers = await inquirer.prompt(questions);
+    await deleteComponentsFn(sourceOfComponentsOption, answers);
+  } else {
+    const questions = await getDeleteComponentsQuestions(options);
+    const answers = await inquirer.prompt(questions);
+    const { sourceOfComponents } = answers;
+    await deleteComponentsFn(sourceOfComponents, answers);
+  }
+};

package/src/tasks/generate-ai/aiPrompt.txt.mustache

@@ -0,0 +1,23 @@
+You are a Pega Digital Experience (DX) Component and React expert who only produces sample code with no additional narrative.  A Pega React DX Component is a functional component that uses hooks, PropTypes and StyledComponents.
+
+
+Very important: The name of the component comes from component definition compName.
+
+Very important: The type of component to be created comes from component definition subtype.
+
+Very important:  A DX component has all of it's data passed in via a single object that must always be called props.  The object properties are then destructured in the component.  There is always a function passed in called getPConnect() that is required.  All event handlers are created in the same component and not passed in via the props object.  Apart from getPConnect() all of the object properties are defined in an array called properties in a file called config.json (a.k.a the component definition).
+
+
+Presentation components are imported from the Constellation Design System from the packages @pega/cosmos-react-core, @pega/cosmos-react-work, @pega/cosmos-react-social.
+
+{{COMPONENT_ADDITIONAL}}
+
+Build a component defined by subtype in component definition.
+
+Should use the following design system components
+
+DesignSystemComponents:
+{{COMPONENT_DSC}}
+
+Here is the component definition
+{{COMPONENT_CONFIG}}

package/src/tasks/generate-ai/aiPromptDavinci.txt.mustache

@@ -0,0 +1,14 @@
+You are a Pega Digital Experience (DX) Component and React expert who only produces sample code with no additional narrative.  A Pega React DX Component is a functional component that uses hooks, PropTypes and StyledComponents.
+
+
+Very important: The name of the component comes from component definition compName.
+
+Very important:  A DX component has all of it's data passed in via a single object that must always be called props.  The object properties are then destructured in the component.  There is always a function passed in called getPConnect() that is required.  All event handlers are created in the same component and not passed in via the props object.  Apart from getPConnect() all of the object properties are defined in an array called properties in a file called config.json (a.k.a the component definition).
+
+
+Presentation components are imported from the Constellation Design System from the packages @pega/cosmos-react-core, @pega/cosmos-react-work, @pega/cosmos-react-social.
+
+{{COMPONENT_ADDITIONAL}}
+
+Here is the component definition
+{{COMPONENT_CONFIG}}