@pega/dx-component-builder-sdk 0.1.7 → 0.1.8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pega/dx-component-builder-sdk",
-  "version": "0.1.7",
+  "version": "0.1.8",
   "description": "Utility for building custom UI components",
   "bin": "./bin/index.js",
   "scripts": {

package/src/tasks/build/helper.js

@@ -78,7 +78,7 @@ export const zipComponent = async (componentKey, category = CATEGORY_CUSTOM) =>
   const zipContent = zip.toBuffer().toString('base64');
 
   const configContent = Buffer.from(fs.readFileSync(`${srcDirectory}/config.json`)).toString();
-  fs.rmdir('dist', { recursive: true }, err => {
+  fs.rmd('dist', { recursive: true }, err => {
     if (err) {
       throw err;
     }

package/src/tasks/create/index.js

@@ -22,6 +22,7 @@ import {
   convertIntoPascalCase,
   compileMustacheTemplate,
   getComponentDirectoryPath,
+  getPegaConfig,
   getComponents,
   getComponentDefaults,
   sanitize,
@@ -157,7 +158,13 @@ const validateCompile = async (
 
   framework = internalData.sdkType;
 
-  const templateDir = `./templates/${framework}/${type}/${sSubType}`;
+  let pegaConfig = await getPegaConfig();
+  let templateParentDir = `./templates/${framework}`;
+  if (pegaConfig['custom-templates-path'] && pegaConfig['custom-templates-path'] != "") {
+    templateParentDir = pegaConfig['custom-templates-path'];
+  }
+
+  const templateDir = `${templateParentDir}/${type}/${sSubType}`;
   const templateDirectory = fileURLToPath(new URL(templateDir, import.meta.url));
 
   const templateDirConstellation = `./templates/Constellation/${type}/${sSubType}`;

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

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

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

@@ -0,0 +1,60 @@
+import { useState } from 'react';
+import { withKnobs } from '@storybook/addon-knobs';
+
+import { configProps, stateProps } from './mock.stories';
+
+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/index.jsx.mustache

@@ -7,7 +7,6 @@ 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';
@@ -70,7 +69,7 @@ const {{COMPONENT_CLASS_NAME}} = props => {
 
   let displayComponent;
   if (displayMode) {
-    displayComponent = <BooleanDisplay value={value} trueLabel={trueLabel} falseLabel={falseLabel}></BooleanDisplay>;
+    displayComponent = <{{COMPONENT_CLASS_NAME}}  value={value} trueLabel={trueLabel} falseLabel={falseLabel} />;
   }
 
   if (displayMode === 'DISPLAY_ONLY') {

package/src/tasks/create/templates/Constellation/Field/Boolean/mock.stories.js.mustache

@@ -0,0 +1,21 @@
+export const configProps = {
+  value: true,
+  label: 'Boolean label',
+  helperText: 'Test helper text',
+  caption: 'Boolean caption',
+  validatemessage: '',
+  hideLabel: false,
+  testId: '12345678',
+  additionalProps: {},
+  displayMode: '',
+  variant: '',
+  trueLabel: 'True',
+  falseLabel: 'False',
+  disabled: false,
+  readOnly: false,
+  required: true
+};
+
+export const stateProps = {
+  value: '.Test'
+};

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

@@ -0,0 +1,61 @@
+import dayjs from 'dayjs';
+import relativeTime from 'dayjs/plugin/relativeTime';
+import localizedFormat from 'dayjs/plugin/localizedFormat';
+import utc from 'dayjs/plugin/utc';
+import tzone from 'dayjs/plugin/timezone';
+
+dayjs.extend(relativeTime);
+dayjs.extend(localizedFormat);
+dayjs.extend(utc);
+dayjs.extend(tzone);
+
+const types = ['fromNow', 'customFormat'];
+
+
+
+// value should be in ISO 8601 format.
+function DateFormatter(
+  value,
+  { type = types[1], format = "DD/MM/YYYY", timezone } = {}
+) {
+  if (!value) return value;
+  switch (type) {
+    case types[1]:
+      if (timezone) return dayjs(value).tz(timezone).format(format);
+      return dayjs(value).format(format);
+    case types[0]:
+      return dayjs(value).from(dayjs());
+    default:
+      return value;
+  }
+}
+
+// value should be in hh:mm:ss format (00:00:00 - 23:59:59).
+function TimeFormatter(value, options) {
+  if (!value) return value;
+  const { locale = "en-US" } = options;
+  const timeOnlyRegex = /^(?:[01]\d|2[0123]):(?:[012345]\d):(?:[012345]\d)$/;
+  if (value.length === 8 && timeOnlyRegex.test(value)) {
+    const tempDate = new Date();
+    const hours = parseInt(value.substr(0, 2), 10);
+    const minutes = parseInt(value.substr(3, 2), 10);
+    const seconds = parseInt(value.substr(6, 2), 10);
+    tempDate.setHours(hours);
+    tempDate.setMinutes(minutes);
+    tempDate.setSeconds(seconds);
+    return tempDate.toLocaleTimeString(locale);
+  }
+  return DateFormatter(value, options);
+}
+
+export default {
+  Date: (value, options) => DateFormatter(value, { type: 'customFormat', ...options }),
+  'Date-Time-Default': (value, options) =>
+    DateFormatter(value, { ...options, type: 'customFormat', format: 'lll' }),
+  'Time-Default': (value, options) =>
+    TimeFormatter(value, {
+      ...options,
+      type: 'customFormat',
+      format: 'hh:mm A'
+    })
+};

package/src/tasks/create/templates/Constellation/Field/Date/FormattedText.jsx.mustache

@@ -0,0 +1,41 @@
+import { FieldValueList } from '@pega/cosmos-react-core';
+import PropTypes from 'prop-types';
+
+import { format } from './date.js';
+
+export default function FormattedText(props) {
+  const { formatType, label, value, testId, hideLabel, variant, additionalProps } = props;
+
+  let text = value;
+
+  text = format(text, formatType, additionalProps);
+
+  const fields = [
+    {
+      id: label.toLowerCase(),
+      name: hideLabel ? '' : label,
+      value: text
+    }
+  ];
+  return <FieldValueList variant={variant} fields={fields} data-testid={testId} />;
+}
+
+FormattedText.defaultProps = {
+  formatType: 'none',
+  variant: 'stacked',
+  value: undefined,
+  label: '',
+  testId: null,
+  hideLabel: false,
+  additionalProps: {}
+};
+
+FormattedText.propTypes = {
+  formatType: PropTypes.string,
+  variant: PropTypes.oneOf(['inline', 'stacked']),
+  value: PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.bool]),
+  label: PropTypes.string,
+  testId: PropTypes.string,
+  additionalProps: PropTypes.objectOf(PropTypes.any),
+  hideLabel: PropTypes.bool
+};

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

@@ -1,31 +1,90 @@
+/* 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);
 
-export const datetimedisplayformatter = (formatter) => {
+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 => {
   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
@@ -33,13 +92,8 @@ 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;
@@ -47,8 +101,6 @@ export const formatExists = (formatterVal) => {
   return isformatter;
 };
 
-
-
 /**
  * Return relative time in fromNow for the given datetime
  * @description Convert and return the given datetime in dayJSObject
@@ -56,11 +108,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);
@@ -86,7 +138,7 @@ export const getDayJSObject = (text) => {
   }
 
   mom = dayjs(
-    mom.toLocaleString("en-US", {
+    mom.toLocaleString('en-US', {
       timeZone: CurrentTz
     })
   );
@@ -100,8 +152,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 {
@@ -117,7 +169,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();
 
 /**
@@ -167,8 +219,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
@@ -180,9 +232,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`;
 };
 
 /**
@@ -195,12 +247,9 @@ 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`;
 };
 
 /**
@@ -223,14 +272,13 @@ 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);
     }
@@ -251,27 +299,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('');
 };
 
 /**
@@ -281,15 +329,13 @@ 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);
 };
 
 /**
@@ -302,9 +348,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
   };
 };
@@ -319,9 +365,75 @@ 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;
+}