@pega/custom-dx-components 2.0.24 → 8.8.1

package/src/tasks/create/templates/Constellation/Template/DETAILS/styles.js.mustache

@@ -2,6 +2,6 @@ import styled, { css } from 'styled-components';
 
 export default styled.div(() => {
   return css`
-    margin: 8px 0;
+    margin: 0px 0px;
   `;
 });

package/src/tasks/create/templates/Constellation/Template/DETAILS-region/styles.js.mustache

@@ -2,6 +2,6 @@ import styled, { css } from 'styled-components';
 
 export default styled.div(() => {
   return css`
-    margin: 8px 0;
+    margin: 0px 0px;
   `;
 });

package/src/tasks/create/templates/Constellation/Template/FORM/styles.js.mustache

@@ -2,6 +2,6 @@ import styled, { css } from 'styled-components';
 
 export default styled.div(() => {
   return css`
-    margin: 8px 0;
+    margin: 0px 0px;
   `;
 });

package/src/tasks/create/templates/Constellation/Template/FORM-region/index.jsx.mustache

@@ -19,13 +19,16 @@ export default function {{COMPONENT_CLASS_NAME}}(props) {
   gridContainer.cols = gridRepeat;
   gridContainer.alignItems = 'start';
 
+  const flexContainer = {direction: 'column'};
+  flexContainer.gap = 2;
+
   return (
     <Styled{{COMPONENT_CLASS_NAME}}Wrapper>
     {{! pick new delimiteres for mustache }}
     {{=<% %>=}}
       <Grid container={gridContainer}>
        {children.map((child, i) => (
-        <Flex container={{ direction: 'column'}} key={`r-${i + 1}`}>
+        <Flex container={flexContainer} key={`r-${i + 1}`}>
         {child}
         </Flex>
        ))}

package/src/tasks/create/templates/Constellation/Template/FORM-region/styles.js.mustache

@@ -2,6 +2,6 @@ import styled, { css } from 'styled-components';
 
 export default styled.div(() => {
   return css`
-    margin: 8px 0;
+    margin: 0px 0px;
   `;
 });

package/src/tasks/create/templates/Constellation/Template/PAGE/styles.js.mustache

@@ -2,6 +2,6 @@ import styled, { css } from 'styled-components';
 
 export default styled.div(() => {
   return css`
-    margin: 0px 0;
+    margin: 0px 0px;
   `;
 });

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

@@ -0,0 +1,400 @@
+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 pegaConfigInternalJsonPath = path.join(path.resolve(), DXCB_CONFIG_INTERNAL_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("/create-all", "/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/index.js

@@ -1,12 +1,15 @@
 export { default as createComponent } from './create/index.js';
+export { default as createAllComponents } from './create-all/index.js';
 export { default as deleteComponent } from './delete/index.js';
 export { default as deleteAllComponents } from './delete-all/index.js';
 export { default as initProject } from './init/index.js';
 export { default as publishComponent } from './publish/index.js';
 export { default as publishAllComponents } from './publish-all/index.js';
+export { default as renameComponent } from './rename/index.js';
 export { default as listComponents } from './list/index.js';
 export { default as updateComponent } from './update/index.js';
 export { default as validate } from './validator/index.js';
 export { default as authenticate } from './authenticate/index.js';
 export { default as upgrade } from './upgrade/index.js';
 export { default as buildComponent } from './build/index.js';
+export { default as buildAllComponents } from './build-all/index.js';

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

@@ -5,15 +5,18 @@
   "organization": "{{organization}}",
   "main": "src/index.js",
   "scripts": {
-    "start-storybook": "start-storybook --port 6040 --quiet",
+    "startStorybook": "start-storybook --port 6040 --quiet",
     "build": "tsc -b tsconfig.build.json",
     "lint": "run-p -cl lint:*",
     "fix": "run-p -cl fix:*",
     "authenticate": "custom-dx-components authenticate",
     "buildComponent": "custom-dx-components buildComponent",
+    "buildAllComponents": "custom-dx-components buildAllComponents",
     "create": "custom-dx-components create",
+    "createAll": "custom-dx-components createAll",
     "publish": "custom-dx-components publish",
     "publishAll": "custom-dx-components publishAll",
+    "rename": "custom-dx-components rename",
     "list": "custom-dx-components list",
     "validate-schema": "custom-dx-components validateSchema",
     "update": "custom-dx-components update",
@@ -54,7 +57,7 @@
   },
   "devDependencies": {
     "@pega/configs": "^0.3.4",
-    "@pega/custom-dx-components": "^2.0.24",
+    "@pega/custom-dx-components": "^8.8.1",
     "@pega/eslint-config": "^0.3.2",
     "@storybook/addon-actions": "^6.5.12",
     "@storybook/addon-essentials": "^6.5.12",

package/src/tasks/list/helper.js

@@ -4,7 +4,7 @@ import https from 'https';
 import chalk from 'chalk';
 import fetch from 'node-fetch';
 
-import { LIST_COMPONENT_SERVICE_REST_ENDPOINT, TOKEN_PATH } from '../../constants.js';
+import { LIST_COMPONENT_SERVICE_REST_ENDPOINT, LP_LIST_COMPONENT_SERVICE_REST_ENDPOINT, TOKEN_PATH } from '../../constants.js';
 import { constructCompleteUrl, getComponents, getPegaServerConfig } from '../../util.js';
 
 export const SOURCE_OF_COMPONENT_TYPES = {
@@ -42,9 +42,10 @@ export const listLocalComponents = async sourceOfComponents => {
 
 export const getComponentsFromServer = async data => {
   const defaultPegaServerConfig = await getPegaServerConfig();
+  const isLaunchpad = defaultPegaServerConfig.serverType === 'launchpad';
   const url = constructCompleteUrl(
     defaultPegaServerConfig.server,
-    LIST_COMPONENT_SERVICE_REST_ENDPOINT
+    isLaunchpad ? LP_LIST_COMPONENT_SERVICE_REST_ENDPOINT :  LIST_COMPONENT_SERVICE_REST_ENDPOINT
   );
   return new Promise((resolve, reject) => {
     try {
@@ -63,12 +64,19 @@ export const getComponentsFromServer = async data => {
             refresh_token: refreshToken
           } = JSON.parse(data);
           let status = 500;
+
+          const headers = {
+            Authorization: `${tokenType} ${accessToken}`
+          }
+
+          if(isLaunchpad) {
+            headers.cookie = `Pega-AAT=${accessToken}`;
+          }
+
           fetch(url, {
             method: 'GET',
             agent: new https.Agent({ rejectUnauthorized: false }),
-            headers: {
-              Authorization: `${tokenType} ${accessToken}`
-            }
+            headers
           })
             .then(response => {
               status = response.status;
@@ -100,8 +108,13 @@ export const getComponentsFromServer = async data => {
 
 export const displayServerComponents = async data => {
   const defaultPegaServerConfig = await getPegaServerConfig();
+  const isLaunchpad = defaultPegaServerConfig.serverType === 'launchpad';
   const parsedData = JSON.parse(data);
-  const componentList = parsedData.pxResults?.map(({ label, pyRuleSet, pyRuleSetVersion }) => ({
+  const list = isLaunchpad ? parsedData.components : parsedData.pxResults;
+  /**
+   * TODO: Need to modify the components list mapping code to support Launchpad components
+   */
+  const componentList = list?.map(({ label, pyRuleSet, pyRuleSetVersion }) => ({
     'Rule name': label,
     'Ruleset name': pyRuleSet,
     'Ruleset version': pyRuleSetVersion

package/src/tasks/publish/helper.js

@@ -125,7 +125,7 @@ export const publishComponentToServer = async data => {
           const respData = JSON.parse(resp);
           if (status === 401) {
             throw new Error(
-              'Error occured in authentication. Please regenerate using authenticate'
+              'Error occurred in authentication. Please regenerate using authenticate'
             );
             // console.log(accessTokenUri, refreshToken);
             /* TODO - Handle refresh_token */
@@ -137,9 +137,9 @@ export const publishComponentToServer = async data => {
         })
         .catch(e => Promise.reject(`${chalk.bold.red(e)}`));
     } else {
-      throw new Error(`Error occured in authentication. Please regenerate using authenticate`);
+      throw new Error(`Error occurred in authentication. Please regenerate using authenticate`);
     }
   } catch (err) {
-    throw new Error(`Error occured in authentication. Please regenerate using authenticate`);
+    throw new Error(`Error occurred in authentication. Please regenerate using authenticate`);
   }
 };

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

@@ -69,13 +69,27 @@ export const zipComponent = async componentKey => {
   const zipContent = zip.toBuffer().toString('base64');
 
   const configContent = Buffer.from(fs.readFileSync(`${srcDirectory}/config.json`)).toString();
-  fs.rmdir('dist', { recursive: true }, err => {
+  //fs.rmdir('dist', { recursive: true }, err => {
+  //  if (err) {
+  //    throw err;
+  //  }
+  //});
+  return { zipContent, configContent };
+};
+
+export const cleanUp = async () => {
+  fs.rm('dist/components', { recursive: true }, err => {
     if (err) {
       throw err;
     }
   });
-  return { zipContent, configContent };
-};
+
+  fs.rm('lib', { recursive: true }, err => {
+    if (err) {
+      throw err;
+    }
+  });
+}
 
 export const publishComponentToServer = async data => {
   const { configContent, zipContent, componentKey, rulesetName, rulesetVersion } = data;
@@ -119,7 +133,7 @@ export const publishComponentToServer = async data => {
           const respData = JSON.parse(resp);
           if (status === 401) {
             throw new Error(
-              'Error occured in authentication. Please regenerate using authenticate'
+              'Error occurred in authentication. Please regenerate using authenticate'
             );
             // console.log(accessTokenUri, refreshToken);
             /* TODO - Handle refresh_token */
@@ -131,9 +145,9 @@ export const publishComponentToServer = async data => {
         })
         .catch(e => Promise.reject(`${chalk.bold.red(e)}`));
     } else {
-      throw new Error(`Error occured in authentication. Please regenerate using authenticate`);
+      throw new Error(`Error occurred in authentication. Please regenerate using authenticate`);
     }
   } catch (err) {
-    throw new Error(`Error occured in authentication. Please regenerate using authenticate`);
+    throw new Error(`Error occurred in authentication. Please regenerate using authenticate`);
   }
 };