@pega/custom-dx-components 2.0.14 → 2.0.16

package/README.md

@@ -8,13 +8,13 @@ This project provides you with an environment to extend Constellation by giving
 
 Ensure you have access to the following in your system:
 
-- Pega Infinity Server version 8.7 or later
+- Pega Infinity Server version 8.8 or later
 
 - Git version 2.30 or later
 
-- System node version 16
+- System node version 18
 
-- System npm version 7
+- System npm version 8
 
 ## Initialize a project
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pega/custom-dx-components",
-  "version": "2.0.14",
+  "version": "2.0.16",
   "description": "Utility for building custom UI components",
   "bin": "./bin/index.js",
   "scripts": {
@@ -26,7 +26,6 @@
     "css-loader": "6.7.1",
     "css-minimizer-webpack-plugin": "^4.1.0",
     "execa": "^6.1.0",
-    "eslint": "^8.4.1",
     "file-loader": "6.2.0",
     "fs-extra": "^10.1.0",
     "gitignore": "^0.7.0",
@@ -62,6 +61,7 @@
   "devDependencies": {
     "@pega/configs": "^0.3.3",
     "cspell": "^6.9.0",
+    "eslint": "^8.23.1",
     "prettier": "2.7.1"
   }
 }

package/src/cli.js

@@ -3,14 +3,11 @@ import chalk from 'chalk';
 
 import {
   authenticate,
-  buildComponent,
   createComponent,
   deleteComponent,
-  deleteAllComponents,
   initProject,
   listComponents,
   publishComponent,
-  publishAllComponents,
   updateComponent,
   validate,
   upgrade
@@ -19,14 +16,11 @@ import {
 const TASKS = {
   INIT: 'init',
   CREATE: 'create',
-  BUILD: 'buildComponent',
   PUBLISH: 'publish',
-  PUBLISH_All: 'publishAll',
   LIST: 'list',
   VALIDATE_SCHEMA: 'validateSchema',
   UPDATE: 'update',
   DELETE: 'delete',
-  DELETE_ALL: "deleteAll",
   AUTHENTICATE: 'authenticate',
   UPGRADE: 'upgrade'
 };
@@ -66,14 +60,6 @@ export default async (args = []) => {
       publishComponent(options);
       break;
     }
-    case TASKS.PUBLISH_All: {
-      publishAllComponents(options);
-      break;
-    }
-    case TASKS.BUILD: {
-      buildComponent(options);
-      break;
-    }
     case TASKS.LIST: {
       listComponents(options);
       break;
@@ -90,10 +76,6 @@ export default async (args = []) => {
       deleteComponent(options);
       break;
     }
-    case TASKS.DELETE_ALL: {
-      deleteAllComponents(options);
-      break;
-    }
     case TASKS.AUTHENTICATE: {
       authenticate(options);
       break;

package/src/tasks/authenticate/index.js

@@ -6,7 +6,7 @@ import chalk from 'chalk';
 import inquirer from 'inquirer';
 import fetch from 'node-fetch';
 
-import { checkPathAccess, getTokenUrl, showVersion } from '../../util.js';
+import { checkPathAccess, getTokenUrl } from '../../util.js';
 import { TOKEN_PATH } from '../../constants.js';
 
 import { getAuthQuestions } from './helper.js';
@@ -57,8 +57,6 @@ const generateAccessToken = async config => {
 };
 
 export default async options => {
-  showVersion();
-
   await checkPathAccess(pegaConfigJsonPath);
 
   let data = fs.readFileSync(pegaConfigJsonPath, { encoding: 'utf8' });

package/src/tasks/create/index.js

@@ -14,8 +14,7 @@ import {
   getComponents,
   getComponentDefaults,
   sanitize,
-  validateSemver,
-  showVersion
+  validateSemver
 } from '../../util.js';
 import { COMPONENT_SCHEMA } from '../../constants.js';
 
@@ -88,7 +87,7 @@ const compileMustacheTemplates = async (
       ALLOWEDAPPS: JSON.stringify(allowedApplications),
       TYPE: type,
       SUB_TYPE: JSON.stringify(mustacheSubType),
-      DESCRIPTION: description || componentLabel,
+      DESCRIPTION: description,
       IS_TEMPLATE: isTemplate,
       IS_PICKLIST: isPicklist,
       IS_BOOLEAN: isBool,
@@ -173,8 +172,6 @@ const validateCompile = async (
 };
 
 export default async options => {
-  showVersion();
-
   if (options.params[10]) {
     const componentName = options.params[3];
     const componentLabel = options.params[4];
@@ -229,7 +226,6 @@ export default async options => {
       {
         name: 'version',
         message: 'Enter component version',
-        default: componentDefaults.version,
         validate: value => {
           if (validateSemver(value)) {
             return true;
@@ -316,6 +312,7 @@ export default async options => {
       }
     ];
 
+    console.log(chalk.green("DX Component Builder v2.0.16"));
     await inquirer.prompt(questions).then(async answers => {
       const {
         componentName,

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

@@ -7,7 +7,7 @@ export default {
 
 
 
-export function format(value, type) {
+export function format(value, type, options) {
   let formattedValue;
 
   switch (type?.toLowerCase()) {

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

@@ -1,8 +1,7 @@
-import { withKnobs } from '@storybook/addon-knobs';
+import { useState } from 'react';
+import { withKnobs, text, boolean } from '@storybook/addon-knobs';
 
-import { configProps, stateProps } from './mock.stories';
-
-import {{COMPONENT_CLASS_NAME}} from './index';
+import {{COMPONENT_CLASS_NAME}} from './index.jsx';
 
 export default {
   title: '{{COMPONENT_CLASS_NAME}}',
@@ -11,40 +10,30 @@ export default {
 };
 
 export const base{{COMPONENT_CLASS_NAME}} = () => {
+  const [value, setValue] = useState('test value');
+
   const props = {
-    value: configProps.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: () => { /* nothing */},
-            triggerFieldChange: () => { /* nothing */}
+            updateFieldValue: (propName, value) => {
+              setValue(value);
+            }
           };
         },
-        getValidationApi: () => {
-          return {
-            validate: () => { /* nothing */}
-          };
+        getStateProps: () => {
+          return { value: '.name' };
         }
       };
-    }
+    },
+    value,
+    placeholder: text('Placeholder', 'Test placeholder'),
+    disabled: boolean('Disabled', false),
+    readOnly: boolean('Disabled', false),
+    required: boolean('Disabled', false),
+    label: text('Label', 'Sample Label'),
+    testId: text('Test id', 'text-12344566')
   };
 
   return (

package/src/tasks/create/templates/Constellation/Field/Boolean/index.jsx.mustache

@@ -7,6 +7,7 @@ import {
 import PropTypes from "prop-types";
 
 // includes in bundle
+import { format } from "./boolean-format";
 import handleEvent from "./event-utils";
 
 import Styled{{COMPONENT_CLASS_NAME}}Wrapper from './styles';
@@ -69,7 +70,7 @@ const {{COMPONENT_CLASS_NAME}} = props => {
 
   let displayComponent;
   if (displayMode) {
-    displayComponent = <{{COMPONENT_CLASS_NAME}}  value={value} trueLabel={trueLabel} falseLabel={falseLabel} />;
+    displayComponent = <BooleanDisplay value={value} trueLabel={trueLabel} falseLabel={falseLabel}></BooleanDisplay>;
   }
 
   if (displayMode === 'DISPLAY_ONLY') {

package/src/tasks/create/templates/Constellation/Field/Date/date.js.mustache

@@ -1,90 +1,31 @@
-/* eslint-disable no-undef */
 import dayjs from 'dayjs';
-import DateFormatter from './DateFormatter';
 
 const relativeTime = require('dayjs/plugin/relativeTime');
 const utc = require('dayjs/plugin/utc');
-const localizedFormat = require('dayjs/plugin/localizedFormat');
-const tzone = require('dayjs/plugin/timezone');
 
 dayjs.extend(relativeTime);
-dayjs.extend(localizedFormat);
 dayjs.extend(utc);
-dayjs.extend(tzone);
 
-function isIsoDate(str) {
-  if (!/\d{4}-\d{2}-\d{2}T\d{2}:\d{2}:\d{2}.\d{3}Z/.test(str)) return false;
-  const d = new Date(str);
-  return d.toISOString() === str;
-}
-
-function getDateObject(text) {
-  // TODO - cleanup formatters util functions as DX APIs are returning values per ISO std now.
-  const timeStamp = text.replace(/-/g, '');
-  const isDateTime = timeStamp.indexOf('GMT') !== -1;
-  const year = parseInt(timeStamp.substr(0, 4), 10);
-  const month = parseInt(timeStamp.substr(4, 2), 10) - 1;
-  const day = parseInt(timeStamp.substr(6, 2), 10);
-
-  const date = new Date();
-
-  date.setDate(day);
-  date.setMonth(month);
-  date.setFullYear(year);
-
-  if (isDateTime) {
-    const hours = parseInt(timeStamp.substr(9, 2), 10);
-    const minutes = parseInt(timeStamp.substr(11, 2), 10);
-    const seconds = parseInt(timeStamp.substr(13, 2), 10);
-    const ms = parseInt(timeStamp.substr(16, 3), 10);
-    date.setHours(hours);
-    date.setMinutes(minutes);
-    date.setSeconds(seconds);
-    date.setMilliseconds(ms);
-  }
-
-  return date;
-}
-
-function parseDateInISO(value) {
-  const isMilliSeconds = new RegExp('^[0-9]+$').exec(value);
-  if (isMilliSeconds) {
-    const date = new Date(parseInt(value, 10));
-    return date.toISOString();
-  }
-
-  if (isIsoDate(value)) {
-    const date = new Date(value);
-    return date.toISOString();
-  }
-
-  return value ? getDateObject(value).toISOString() : value;
-}
-
-export default {
-  ...DateFormatter
-};
-
-export const datetimedisplayformatter = formatter => {
+export const datetimedisplayformatter = (formatter) => {
   const objectvalues = {};
   switch (formatter) {
-    case 'DateTime-Long': {
-      objectvalues.variantVal = 'datetime';
-      objectvalues.formatVal = 'long';
+    case "DateTime-Long": {
+      objectvalues.variantVal = "datetime";
+      objectvalues.formatVal = "long";
       break;
     }
-    case 'DateTime-Short': {
-      objectvalues.variantVal = 'date';
-      objectvalues.formatVal = 'short';
+    case "DateTime-Short": {
+      objectvalues.variantVal = "date";
+      objectvalues.formatVal = "short";
       break;
     }
-    case 'DateTime-Since': {
-      objectvalues.variantVal = 'relative';
+    case "DateTime-Since": {
+      objectvalues.variantVal = "relative";
       break;
     }
-    case 'Time-Only': {
-      objectvalues.variantVal = 'time';
-      objectvalues.formatVal = 'short';
+    case "Time-Only": {
+      objectvalues.variantVal = "time";
+      objectvalues.formatVal = "short";
       break;
     }
     // no default
@@ -92,8 +33,13 @@ export const datetimedisplayformatter = formatter => {
   return objectvalues;
 };
 
-export const formatExists = formatterVal => {
-  const formatterValues = ['DateTime-Long', 'DateTime-Short', 'DateTime-Since', 'Time-Only'];
+export const formatExists = (formatterVal) => {
+  const formatterValues = [
+    "DateTime-Long",
+    "DateTime-Short",
+    "DateTime-Since",
+    "Time-Only"
+  ];
   let isformatter = false;
   if (formatterValues.includes(formatterVal)) {
     isformatter = true;
@@ -101,6 +47,8 @@ export const formatExists = formatterVal => {
   return isformatter;
 };
 
+
+
 /**
  * Return relative time in fromNow for the given datetime
  * @description Convert and return the given datetime in dayJSObject
@@ -108,11 +56,11 @@ export const formatExists = formatterVal => {
  * @param {string} text datetime
  * @returns {object} datetime as a dayjs object
  */
-export const getDayJSObject = text => {
+export const getDayJSObject = (text) => {
   const momObj = dayjs(text);
   if (momObj.isValid()) return momObj;
   const timeStamp = text;
-  const isDateTime = timeStamp.indexOf('GMT') !== -1;
+  const isDateTime = timeStamp.indexOf("GMT") !== -1;
   const year = parseInt(timeStamp.substr(0, 4), 10);
   const month = parseInt(timeStamp.substr(4, 2), 10) - 1;
   const day = parseInt(timeStamp.substr(6, 2), 10);
@@ -138,7 +86,7 @@ export const getDayJSObject = text => {
   }
 
   mom = dayjs(
-    mom.toLocaleString('en-US', {
+    mom.toLocaleString("en-US", {
       timeZone: CurrentTz
     })
   );
@@ -152,8 +100,8 @@ export const getDayJSObject = text => {
  * @param {string} time datetime
  * @returns {object} relative time from now
  */
-export const getRelativeTime = time => {
-  let relativetime = '';
+export const getRelativeTime = (time) => {
+  let relativetime = "";
   if (dayjs(time).isUTC()) {
     relativetime = dayjs(time).fromNow();
   } else {
@@ -169,7 +117,7 @@ export const getRelativeTime = time => {
  * @param {string} value from which Year needs to be taken out
  * @returns {number} year for the date passed
  */
-export const getFullYear = value =>
+export const getFullYear = (value) =>
   value ? new Date(value).getFullYear() : new Date().getFullYear();
 
 /**
@@ -219,8 +167,8 @@ export const getMinDate = (previousYears, currentYear, yearFromValue) => {
  *
  * @returns {number} clockFormat
  */
-export const parseClockFormat = clockFormat =>
-  typeof clockFormat === 'string' ? parseInt(clockFormat, 10) : clockFormat;
+export const parseClockFormat = (clockFormat) =>
+  typeof clockFormat === "string" ? parseInt(clockFormat, 10) : clockFormat;
 
 /**
  * Return datetime value string off to seconds
@@ -232,9 +180,9 @@ export const parseClockFormat = clockFormat =>
  */
 export const correctDateTimeToSeconds = (datetime, withSeconds) => {
   if (withSeconds) {
-    return `${datetime.substring(0, datetime.indexOf('Z'))}.000Z`;
+    return `${datetime.substring(0, datetime.indexOf("Z"))}.000Z`;
   }
-  return `${datetime.substring(0, datetime.lastIndexOf(':'))}:00.000Z`;
+  return `${datetime.substring(0, datetime.lastIndexOf(":"))}:00.000Z`;
 };
 
 /**
@@ -247,9 +195,12 @@ export const correctDateTimeToSeconds = (datetime, withSeconds) => {
  */
 export const timeCorrectedToSeconds = (datetime, withSeconds) => {
   if (withSeconds) {
-    return datetime.substring(datetime.indexOf('T') + 1, datetime.indexOf('.'));
+    return datetime.substring(datetime.indexOf("T") + 1, datetime.indexOf("."));
   }
-  return `${datetime.substring(datetime.indexOf('T') + 1, datetime.lastIndexOf(':'))}:00`;
+  return `${datetime.substring(
+    datetime.indexOf("T") + 1,
+    datetime.lastIndexOf(":")
+  )}:00`;
 };
 
 /**
@@ -272,13 +223,14 @@ export const datetimeFireChangeBlurEvents = (
   propName,
   pConn
 ) => {
+
   // TODO - clean up, we should not rely on timestamp from cosmos to check InComplete validation
   // above triggerFieldChange should have validated this
   if (errorState) {
     pConn.getValidationApi().validate(errorState);
   }
   // BUG-640834 In errorState presist old values avoiding store update & re-render.
-  else {
+  else{
     if (formattedValue !== actualValue) {
       actions.updateFieldValue(propName, formattedValue);
     }
@@ -299,27 +251,27 @@ export const getDateFormat = (locale, options) => {
     .formatToParts()
     .map(({ type, value }) => {
       switch (type) {
-        case 'day':
-          return 'DD';
-        case 'month':
-          return 'MM';
-        case 'year':
-          return 'YYYY';
-        case 'hour':
-          return 'hh';
-        case 'minute':
-          return 'mm';
-        case 'second':
-          return 'ss';
-        case 'dayPeriod':
-          return 'A';
-        case 'literal':
+        case "day":
+          return "DD";
+        case "month":
+          return "MM";
+        case "year":
+          return "YYYY";
+        case "hour":
+          return "hh";
+        case "minute":
+          return "mm";
+        case "second":
+          return "ss";
+        case "dayPeriod":
+          return "A";
+        case "literal":
           return value;
         default:
-          return '';
+          return "";
       }
     })
-    .join('');
+    .join("");
 };
 
 /**
@@ -329,13 +281,15 @@ export const getDateFormat = (locale, options) => {
  * @returns {boolean} True or False for the locale
  * Example : getDateFormat("pl-PL") returns false
  */
-export const is12HClockFormat = locale => {
+export const is12HClockFormat = (locale) => {
   const meridiem = new Intl.DateTimeFormat(locale, {
-    hour: 'numeric'
+    hour: "numeric"
   })
     .formatToParts()
-    .find(({ type }) => type === 'dayPeriod');
-  return !!(meridiem === null || meridiem === undefined ? undefined : meridiem.value);
+    .find(({ type }) => type === "dayPeriod");
+  return !!(meridiem === null || meridiem === undefined
+    ? undefined
+    : meridiem.value);
 };
 
 /**
@@ -348,9 +302,9 @@ export const is12HClockFormat = locale => {
  */
 export const getTimeOptions = (withSeconds, is12h = false) => {
   return {
-    hour: 'numeric',
-    minute: 'numeric',
-    ...(withSeconds && { second: 'numeric' }),
+    hour: "numeric",
+    minute: "numeric",
+    ...(withSeconds && { second: "numeric" }),
     hour12: is12h
   };
 };
@@ -365,75 +319,9 @@ export const getTimeOptions = (withSeconds, is12h = false) => {
  */
 export const getDateTimeOptions = (withSeconds, is12h = false) => {
   return {
-    year: 'numeric',
-    month: 'numeric',
-    day: 'numeric',
+    year: "numeric",
+    month: "numeric",
+    day: "numeric",
     ...getTimeOptions(withSeconds, is12h)
   };
 };
-
-export function getCurrentTimezone(timezone) {
-  if (timezone) return timezone;
-  return PCore?.getLocaleUtils?.().getTimeZoneInUse?.();
-}
-
-export function format(value, type, options) {
-  let formattedValue;
-
-  switch (type?.toLowerCase()) {
-    case 'currency': {
-      const defaultOptions = {
-        locale: getLocale(),
-        position: 'before',
-        decPlaces: 2
-      };
-      const params = { ...defaultOptions, ...options };
-      formattedValue = Currency.Currency(value, params);
-      break;
-    }
-
-    case 'decimal': {
-      const defaultOptions = { locale: getLocale(), decPlaces: 2 };
-      const params = { ...defaultOptions, ...options };
-      formattedValue = Currency.Decimal(value, params);
-      break;
-    }
-
-    case 'integer': {
-      const defaultOptions = { locale: getLocale() };
-      const params = { ...defaultOptions, ...options };
-      formattedValue = Currency.Integer(value, params);
-      break;
-    }
-
-    case 'date': {
-      const defaultOptions = {
-        format: 'MMM DD, YYYY',
-        timezone: getCurrentTimezone()
-      };
-      const params = { ...defaultOptions, ...options };
-      formattedValue = DateFormatter.Date(parseDateInISO(value), params);
-      break;
-    }
-
-    case 'datetime': {
-      const defaultOptions = {
-        format: 'MMM DD, YYYY h:mm A',
-        timezone: getCurrentTimezone()
-      };
-      const params = { ...defaultOptions, ...options };
-      formattedValue = DateFormatter.Date(parseDateInISO(value), params);
-      break;
-    }
-
-    case 'boolean':
-    case 'checkbox': {
-      formattedValue = Boolean.TrueFalse(value, { allowEmpty: false });
-      break;
-    }
-
-    default:
-      formattedValue = value;
-  }
-  return formattedValue;
-}