@pega/custom-dx-components 0.23.20 → 0.23.22

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pega/custom-dx-components",
-  "version": "0.23.20",
+  "version": "0.23.22",
   "description": "Utility for building custom UI components",
   "bin": "./bin/index.js",
   "scripts": {
@@ -15,47 +15,47 @@
   "type": "module",
   "sideEffects": false,
   "dependencies": {
-    "@babel/core": "^7.23.3",
+    "@babel/core": "^7.23.7",
     "@babel/plugin-transform-class-properties": "^7.23.3",
     "@babel/preset-react": "^7.23.3",
-    "@pega/auth": "^0.1.1",
-    "adm-zip": "^0.5.9",
+    "@pega/auth": "^0.1.6",
+    "adm-zip": "^0.5.10",
     "ajv": "^8.12.0",
     "ajv-keywords": "^5.1.0",
     "arg": "^5.0.2",
-    "babel-loader": "^9.1.2",
-    "chalk": "^5.0.1",
+    "babel-loader": "^9.1.3",
+    "chalk": "^5.3.0",
     "check-git": "^2.0.2",
     "compression-webpack-plugin": "^10.0.0",
-    "css-loader": "6.7.1",
-    "css-minimizer-webpack-plugin": "^5.0.0",
-    "eslint": "^8.4.1",
-    "execa": "^6.1.0",
+    "css-loader": "6.8.1",
+    "css-minimizer-webpack-plugin": "^5.0.1",
+    "eslint": "^8.56.0",
+    "execa": "^8.0.1",
     "file-loader": "6.2.0",
-    "fs-extra": "^10.1.0",
+    "fs-extra": "^11.2.0",
     "gitignore": "^0.7.0",
-    "inquirer": "^9.1.1",
-    "listr": "^0.14.3",
-    "mini-css-extract-plugin": "2.6.1",
+    "inquirer": "^9.2.12",
+    "listr2": "^8.0.1",
+    "mini-css-extract-plugin": "2.7.6",
     "mustache": "^4.2.0",
     "ncp": "^2.0.0",
-    "node-fetch": "^3.2.10",
-    "ora": "^6.1.2",
+    "node-fetch": "^3.3.2",
+    "ora": "^8.0.1",
     "pascalcase": "^2.0.0",
-    "postcss": "^8.4.16",
-    "postcss-loader": "7.0.1",
-    "postcss-preset-env": "7.8.2",
+    "postcss": "^8.4.33",
+    "postcss-loader": "7.3.4",
+    "postcss-preset-env": "9.3.0",
     "prop-types": "^15.8.1",
     "react": "^18.2.0",
     "react-dev-utils": "^12.0.1",
-    "resolve": "1.22.1",
+    "resolve": "1.22.8",
     "resolve-url-loader": "^5.0.0",
-    "sass-loader": "^13.0.2",
-    "terser-webpack-plugin": "5.3.6",
-    "ts-loader": "^9.3.1",
-    "typescript": "^4.8.3",
+    "sass-loader": "^13.3.3",
+    "terser-webpack-plugin": "5.3.10",
+    "ts-loader": "^9.5.1",
+    "typescript": "^4.9.5",
     "url-loader": "4.1.1",
-    "webpack": "5.76.1"
+    "webpack": "5.89.0"
   },
   "author": "Custom component dev",
   "license": "SEE LICENSE IN LICENSE",
@@ -64,16 +64,16 @@
     "custom-components"
   ],
   "devDependencies": {
-    "@babel/preset-env": "^7.23.3",
-    "@pega/configs": "^0.5.3",
-    "@pega/prettier-config": "^0.5.3",
-    "@types/jest": "^29.5.3",
-    "babel-jest": "^29.6.1",
-    "cspell": "^4.0.23",
-    "jest": "^29.6.1",
-    "jest-environment-jsdom": "^29.3.1",
-    "jest-junit": "^15.0.0",
-    "prettier": "2.7.1",
+    "@babel/preset-env": "^7.23.7",
+    "@pega/configs": "^0.7.1",
+    "@pega/prettier-config": "^0.7.1",
+    "@types/jest": "^29.5.11",
+    "babel-jest": "^29.7.0",
+    "cspell": "^8.3.2",
+    "jest": "^29.7.0",
+    "jest-environment-jsdom": "^29.7.0",
+    "jest-junit": "^16.0.0",
+    "prettier": "3.1.1",
     "ts-jest": "^29.1.1"
   }
 }

package/src/constants.js

@@ -18,9 +18,12 @@ export const INF_TOKEN_URL_V1 = 'PRRestService/oauth2/v1/token';
 export const INF_AUTHORIZE_URL_V1 = 'PRRestService/oauth2/v1/authorize';
 export const LP_TOKEN_URL = 'uas/oauth/token';
 export const LP_AUTHORIZE_URL = 'uas/oauth/authorize';
-export const LP_LIST_COMPONENT_SERVICE_REST_ENDPOINT = 'pegalaunchpad/c11n/v103/app/appstudiox/componentslist?field0=type&value0={type}';
-export const LP_PUBLISH_COMPONENT_SERVICE_REST_ENDPOINT = 'pegalaunchpad/c11n/isolations/{isolationId}/v102/assetsUpdate';
-export const LP_DELETE_COMPONENT_SERVICE_REST_ENDPOINT = 'pegalaunchpad/c11n/isolations/{isolationId}/v102/assetsUpdate';
+export const LP_LIST_COMPONENT_SERVICE_REST_ENDPOINT =
+  'pegalaunchpad/c11n/v103/app/appstudiox/componentslist?field0=type&value0={type}';
+export const LP_PUBLISH_COMPONENT_SERVICE_REST_ENDPOINT =
+  'pegalaunchpad/c11n/isolations/{isolationId}/v102/assetsUpdate';
+export const LP_DELETE_COMPONENT_SERVICE_REST_ENDPOINT =
+  'pegalaunchpad/c11n/isolations/{isolationId}/v102/assetsUpdate';
 
 export const FIELD_PATH = '/field';
 export const TEMPLATE_PATH = '/template';
@@ -165,6 +168,14 @@ export const COMPONENT_SCHEMA = {
       {
         name: 'Picklist',
         value: 'Picklist'
+      },
+      {
+        name: 'Autocomplete',
+        value: 'Picklist-Autocomplete'
+      },
+      {
+        name: 'Radio Buttons',
+        value: 'Picklist-RadioButtons'
       }
     ],
     template: [

package/src/tasks/authenticate/helper.js

@@ -1,17 +1,23 @@
 /* eslint-disable import/prefer-default-export */
 import { AUTHENTICATE_SCHEMA, AUTHENTICATE_DEFAULTS } from '../../constants.js';
 
-export const getAuthQuestions = async (dxcbConfig) => {
+export const getAuthQuestions = async dxcbConfig => {
   const defaultPegaConfig = dxcbConfig;
-  const aAlwaysAsk = dxcbConfig.questions_askAlways ? dxcbConfig.questions_askAlways.split(',') : [];
+  const aAlwaysAsk = dxcbConfig.questions_askAlways
+    ? dxcbConfig.questions_askAlways.split(',')
+    : [];
   const aNeverAsk = dxcbConfig.questions_askNever ? dxcbConfig.questions_askNever.split(',') : [];
   const aAskOnce = dxcbConfig.questions_askOnce ? dxcbConfig.questions_askOnce.split(',') : [];
-  const aAskedOnce = dxcbConfig.questions_askedOnce ? dxcbConfig.questions_askedOnce.split(',') : [];
+  const aAskedOnce = dxcbConfig.questions_askedOnce
+    ? dxcbConfig.questions_askedOnce.split(',')
+    : [];
 
   // Ask if various must, never, once criteria are met
-  const askThisTime = (prop) => {
-    return aAlwaysAsk.includes(prop) ||
-      (!aNeverAsk.includes(prop) && (aAskOnce.includes(prop) && !aAskedOnce.includes(prop)));
+  const askThisTime = prop => {
+    return (
+      aAlwaysAsk.includes(prop) ||
+      (!aNeverAsk.includes(prop) && aAskOnce.includes(prop) && !aAskedOnce.includes(prop))
+    );
   };
 
   const initAnswer = (prop, defValue) => {
@@ -21,11 +27,10 @@ export const getAuthQuestions = async (dxcbConfig) => {
     return defaultPegaConfig[prop] ? defaultPegaConfig[prop] : defValue;
   };
 
-  const initAnswers = (answers) => {
+  const initAnswers = answers => {
     // Setup default answers (if they are present and non-empty)
     answers.serverType = initAnswer('serverType', AUTHENTICATE_DEFAULTS.serverType);
     answers.server = initAnswer('server', AUTHENTICATE_DEFAULTS.server);
-    answers.isolationId = initAnswer('isolationId');
     answers.clientId = initAnswer('clientId', AUTHENTICATE_DEFAULTS.clientId);
     answers.grantType = initAnswer('grantType', AUTHENTICATE_DEFAULTS.grantType);
     answers.authService = initAnswer('authService', AUTHENTICATE_DEFAULTS.authService);
@@ -79,28 +84,15 @@ export const getAuthQuestions = async (dxcbConfig) => {
         return fnStandardWhen('server', answers);
       }
     },
-    {
-      name: 'isolationId',
-      tpye: 'input',
-      message: 'Enter isolation id',
-      default: defaultPegaConfig.isolationId,
-      validate: value => {
-        if (value.trim()) {
-          return true;
-        }
-        return 'Launchpad isolationId cannot be empty';
-      },
-      when: answers => {
-        return answers.serverType === "launchpad" && fnStandardWhen('isolationId', answers);
-      }
-    },
     {
       name: 'grantType',
       type: 'rawlist',
       message: 'Enter OAuth 2.0 grant type',
       default: defaultPegaConfig.grantType,
       choices: answers => {
-        return AUTHENTICATE_SCHEMA.grantType.filter(gt => !(answers.serverType === "launchpad" && gt.value === "passwordCreds"));
+        return AUTHENTICATE_SCHEMA.grantType.filter(
+          gt => !(answers.serverType === 'launchpad' && gt.value === 'passwordCreds')
+        );
       },
       validate: value => {
         if (value.trim()) {
@@ -124,7 +116,11 @@ export const getAuthQuestions = async (dxcbConfig) => {
         return 'Authentication service alias cannot be empty';
       },
       when: answers => {
-        return answers.serverType === "infinity" && answers.grantType === "authCode" && fnStandardWhen('authService', answers);
+        return (
+          answers.serverType === 'infinity' &&
+          answers.grantType === 'authCode' &&
+          fnStandardWhen('authService', answers)
+        );
       }
     },
     {
@@ -139,7 +135,11 @@ export const getAuthQuestions = async (dxcbConfig) => {
         return 'Redirect URI cannot be empty';
       },
       when: answers => {
-        return answers.serverType === "infinity" && answers.grantType === "authCode" && fnStandardWhen('redirectUri', answers);
+        return (
+          answers.serverType === 'infinity' &&
+          answers.grantType === 'authCode' &&
+          fnStandardWhen('redirectUri', answers)
+        );
       }
     },
     {
@@ -148,13 +148,17 @@ export const getAuthQuestions = async (dxcbConfig) => {
       message: 'Enter user id',
       default: defaultPegaConfig.user,
       validate: (value, answers) => {
-        if (value.trim() || answers.grantType === "authCode") {
+        if (value.trim() || answers.grantType === 'authCode') {
           return true;
         }
         return 'Username cannot be empty';
       },
       when: answers => {
-        return (answers.serverType === "infinity" && answers.grantType === "passwordCreds") && fnStandardWhen('user', answers);
+        return (
+          answers.serverType === 'infinity' &&
+          answers.grantType === 'passwordCreds' &&
+          fnStandardWhen('user', answers)
+        );
       }
     },
     {
@@ -163,13 +167,18 @@ export const getAuthQuestions = async (dxcbConfig) => {
       message: 'Enter password',
       default: defaultPegaConfig.password,
       validate: (value, answers) => {
-        if (value.trim() || answers.grantType === "authCode") {
+        if (value.trim() || answers.grantType === 'authCode') {
           return true;
         }
         return 'Password cannot be empty';
       },
       when: answers => {
-        return (answers.user && (answers.serverType === "infinity" && answers.grantType === "passwordCreds") && fnStandardWhen('password', answers));
+        return (
+          answers.user &&
+          answers.serverType === 'infinity' &&
+          answers.grantType === 'passwordCreds' &&
+          fnStandardWhen('password', answers)
+        );
       }
     },
     {
@@ -199,8 +208,11 @@ export const getAuthQuestions = async (dxcbConfig) => {
         return 'clientSecret cannot be empty';
       },
       when: answers => {
-        return (((answers.serverType === "infinity" && answers.grantType !== "authCode") ||
-          answers.serverType === "launchpad") && fnStandardWhen('clientSecret', answers));
+        return (
+          ((answers.serverType === 'infinity' && answers.grantType !== 'authCode') ||
+            answers.serverType === 'launchpad') &&
+          fnStandardWhen('clientSecret', answers)
+        );
       }
     }
   ];

package/src/tasks/authenticate/index.js

@@ -103,7 +103,9 @@ const generateAccessToken = async config => {
       }
     }
     if (serverType === 'launchpad') {
-      authConfig.isolationId = isolationId;
+      if (isolationId) {
+        authConfig.isolationId = isolationId;
+      }
       authConfig.noPKCE = true;
     }
 

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

@@ -1,5 +1,5 @@
 import inquirer from 'inquirer';
-import Listr from 'listr';
+import { Listr } from 'listr2';
 import chalk from 'chalk';
 
 import validate from '../validator/index.js';

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

@@ -0,0 +1,76 @@
+import inquirer from 'inquirer';
+import { Listr } from 'listr2';
+import chalk from 'chalk';
+
+import validate from '../validator/index.js';
+
+import bundleComponent from '../bundle/index.js';
+import lintComponent from '../linter/index.js';
+import { getPublishComponentQuestions } from './helper.js';
+import { getComponentDirectoryPath, showVersion } from '../../util.js';
+
+export default async options => {
+  showVersion();
+
+  let componentKey;
+  let sourceMap;
+  let devBuild;
+  let content;
+
+  if (options.params.length >= 6) {
+    componentKey = options.params[3];
+    sourceMap = options.params[4];
+    const dBuild = options.params[5];
+    devBuild = (dBuild === 'Y' ||
+    dBuild === 'y' ||
+    dBuild === true ||
+    dBuild === 'true') ? true : false;
+
+    content = { componentKey, sourceMap, devBuild};
+  }
+  else {
+    const questions = await getPublishComponentQuestions();
+    const answers = await inquirer.prompt(questions);
+    ({ componentKey, sourceMap, devBuild } = answers);
+
+    content = {
+      ...answers
+    };
+  }
+
+
+
+  const sDevBuild = devBuild ? '(dev build)' : '';
+  const tasks = new Listr(
+    [
+      {
+        title: 'Validate config schema',
+        task: async () => {
+          await validate(componentKey);
+        }
+      },
+      {
+        title: 'Lint component',
+        task: async () => {
+          const targetDirectory = await getComponentDirectoryPath(componentKey);
+          // console.log(`in buildComponent Lint component task: componentKey: ${componentKey} targetDirectory: ${targetDirectory}`);
+          await lintComponent(targetDirectory);
+        }
+      },
+      {
+        title: `Bundle Component ${sDevBuild}`,
+        type: 'confirm',
+        task: async () => await bundleComponent(componentKey, sourceMap, devBuild),
+        skip: () => (options.skipBundle ? 'Skipped bundling component' : undefined)
+      }
+    ],
+    {
+      exitOnError: true
+    }
+  );
+
+  await tasks.run().catch(err => {
+    console.log(chalk.bold.red(err.toString()));
+  });
+  return true;
+};

package/src/tasks/create/index.js

@@ -47,7 +47,6 @@ const compileMustacheTemplates = async (
   const componentClassName = convertIntoPascalCase(componentKey);
 
   const isTemplate = type === 'Template';
-  const isPicklist = subtype === 'Picklist';
   const isBool = subtype === 'Boolean';
   const isPhone = subtype === 'Phone';
 
@@ -56,15 +55,29 @@ const compileMustacheTemplates = async (
   }
 
   let mustacheSubType = subtype;
-  if (typeof(mustacheSubType) == "string") {
-    if (mustacheSubType == "FORM-region") {
-      mustacheSubType = "FORM";
-    }
-    else if (mustacheSubType == "DETAILS-region") {
-      mustacheSubType = "DETAILS";
+  if (typeof mustacheSubType === 'string') {
+    // eslint-disable-next-line default-case
+    switch (mustacheSubType) {
+      case 'FORM-region':
+        mustacheSubType = 'FORM';
+        break;
+      case 'DETAILS-region':
+        mustacheSubType = 'DETAILS';
+        break;
+      case 'Text-Input':
+        mustacheSubType = 'Text';
+        break;
+      case 'Picklist-Autocomplete':
+        mustacheSubType = 'Picklist';
+        break;
+      case 'Picklist-RadioButtons':
+        mustacheSubType = 'Picklist';
+        break;
     }
   }
 
+  const isPicklist = subtype === 'Picklist';
+
   if (allowedApplications.trim() === '') {
     allowedApplications = [];
   } else {

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

@@ -0,0 +1,46 @@
+import  {PConnect } from '@pega/pcore-pconnect-typedefs';
+
+// PConnProps.d.ts
+// This gives us a place to have each component (which is most DX Components) that is
+//  expected to have a getPConnect extend its props (from BaseProps)
+//  such that every component will be expected to have a getPConnect() function
+//  that returns a PConnect object. (new/better way of doing .propTypes).
+//  This PConnProps can be extended to include other props that we know are in every component
+export interface PConnProps {
+  // getPConnect should exist for every C11n component. (add @ts-ignore in special cases where it isn't)
+  getPConnect: () => typeof PConnect;
+
+  // Allow any/all other key/value pairs in the BaseProps for now
+  //  TODO: refine which other props are always expected for various component
+  //    types and consider further interface "subclassing". For example, we may
+  //    want to create a "BasePropsForm" that gives guidance on required, readonly, etc.
+  //    and any other props that every Form component expects.
+  //    For example, see the PConnFieldProps below.
+  // NOTE: if you uncomment the line below, the PConnProps type will allow
+  //  otherwise undefined types to appear. This can be helpful for debugging
+  //  or when adding new components whose types aren't yet known.
+  // [key: string]: any;
+}
+
+
+// PConnFieldProps extends PConnProps to bring in the common properties that are
+// associated with most field components (ex: Dropdown, TextInput, etc.) in the
+//  components/field directory
+export interface PConnFieldProps extends PConnProps {
+  label: string,
+  required: boolean,
+  disabled: boolean,
+  value: any,
+  validatemessage: string,
+  status?: string,
+  onChange?: any,
+  onBlur?: any,
+  readOnly: boolean,
+  testId: string,
+  helperText: string,
+  displayMode?: string,
+  hideLabel: boolean,
+  placeholder?: string,
+  fieldMetadata?: any,
+  additionalProps?: any
+}

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

@@ -0,0 +1,27 @@
+
+import Boolean from "./Boolean";
+
+
+export default {
+  ...Boolean
+};
+
+
+
+export function format(value: any, type: string) {
+  let formattedValue;
+
+  switch (type?.toLowerCase()) {
+
+
+    case "boolean":
+    case "checkbox": {
+      formattedValue = Boolean.TrueFalse(value, { allowEmpty: false });
+      break;
+    }
+
+    default:
+      formattedValue = value;
+  }
+  return formattedValue;
+}

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

@@ -0,0 +1,64 @@
+
+/* eslint-disable react/jsx-no-useless-fragment */
+// @ts-nocheck
+import { useState } from 'react';
+import { withKnobs } from '@storybook/addon-knobs';
+
+import { configProps, stateProps } from './mock';
+
+import {{COMPONENT_CLASS_NAME}} from './index';
+
+export default {
+  title: '{{COMPONENT_CLASS_NAME}}',
+  decorators: [withKnobs],
+  component: {{COMPONENT_CLASS_NAME}}
+};
+
+export const Base{{COMPONENT_CLASS_NAME}} = () => {
+
+  const [value, setValue] = useState(configProps.value);
+
+  const props = {
+    value,
+    label: configProps.label,
+    helperText: configProps.helperText,
+    caption: configProps.caption,
+    validatemessage: configProps.validatemessage,
+    hideLabel: configProps.hideLabel,
+    testId: configProps.testId,
+    additionalProps: configProps.additionalProps,
+    displayMode: configProps.displayMode,
+    variant: configProps.variant,
+    trueLabel: configProps.trueLabel,
+    falseLabel: configProps.falseLabel,
+    disabled: configProps.disabled,
+    readOnly: configProps.readOnly,
+    required: configProps.required,
+    getPConnect: () => {
+      return {
+        getStateProps: () => {
+          return stateProps;
+        },
+        getActionsApi: () => {
+          return {
+            updateFieldValue: (propName, theValue) => {
+              setValue(theValue);
+            },
+            triggerFieldChange: () => { /* nothing */}
+          };
+        },
+        getValidationApi: () => {
+          return {
+            validate: () => { /* nothing */}
+          };
+        }
+      };
+    }
+  };
+
+  return (
+    <>
+      <{{COMPONENT_CLASS_NAME}} {...props} />
+    </>
+  );
+};

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

@@ -0,0 +1,18 @@
+const handleEvent = (actions: any, eventType: string, propName: string, value: string) => {
+  switch (eventType) {
+    case 'change':
+      actions.updateFieldValue(propName, value);
+      break;
+    case 'blur':
+      actions.triggerFieldChange(propName, value);
+      break;
+    case 'changeNblur':
+      actions.updateFieldValue(propName, value);
+      actions.triggerFieldChange(propName, value);
+      break;
+    default:
+      break;
+  }
+};
+
+export default handleEvent;