@pega/custom-dx-components 2.0.23 → 2.0.25

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

@@ -1,9 +1,7 @@
 import { useState } from 'react';
-import { withKnobs } from '@storybook/addon-knobs';
+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}}',
@@ -12,45 +10,30 @@ export default {
 };
 
 export const base{{COMPONENT_CLASS_NAME}} = () => {
-  // eslint-disable-next-line react-hooks/rules-of-hooks
-  const [value, setValue] = useState(configProps.value);
+  const [value, setValue] = useState('test 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 */}
+            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;
-}

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

@@ -1,5 +1,6 @@
-import { withKnobs } from '@storybook/addon-knobs';
-import { configProps, stateProps } from './mock.stories';
+import { useState } from 'react';
+import { withKnobs, text, boolean } from '@storybook/addon-knobs';
+
 import {{COMPONENT_CLASS_NAME}} from './index.jsx';
 
 export default {
@@ -8,61 +9,31 @@ export default {
   component: {{COMPONENT_CLASS_NAME}}
 };
 
-if (!window.PCore) {
-  window.PCore = {};
-}
-
-window.PCore.getEnvironmentInfo = () => {
-  return {
-    getLocale: () => {
-      return 'en-GB';
-    }
-  };
-};
-
 export const base{{COMPONENT_CLASS_NAME}} = () => {
+  const [value, setValue] = useState('test value');
+
   const props = {
     getPConnect: () => {
       return {
         getActionsApi: () => {
           return {
-            updateFieldValue: () => {/* nothing */},
-            triggerFieldChange: () => {/* nothing */}
-          };
-        },
-        getValidationApi: () => {
-          return {
-            validate: () => {/* nothing */}
+            updateFieldValue: (propName, value) => {
+              setValue(value);
+            }
           };
         },
         getStateProps: () => {
-          return stateProps;
-        },
-        getConfigProps: () => {
-          return configProps;
-        },
-        ignoreSuggestion: () => {/* nothing */},
-        acceptSuggestion: () => {/* nothing */},
-        clearErrorMessages: () => {/* nothing */}
+          return { value: '.name' };
+        }
       };
     },
-    value: configProps.value,
-    validatemessage: configProps.validatemessage,
-    label: configProps.label,
-    hideLabel: configProps.hideLabel,
-    helperText: configProps.helperText,
-    nextYearRange: configProps.nextYearRange,
-    previousYearRange: configProps.previousYearRange,
-    showWeekNumber: configProps.showWeekNumber,
-    testId: configProps.testId,
-    showAsFormattedText: configProps.showAsFormattedText,
-    additionalProps: configProps.additionalProps,
-    displayMode: configProps.displayMode,
-    variant: configProps.variant,
-    hasSuggestions: configProps.hasSuggestions,
-    disabled: configProps.disabled,
-    readOnly: configProps.readOnly,
-    required: configProps.required
+    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/Date/index.jsx.mustache

@@ -1,8 +1,6 @@
-/* eslint-disable no-undef */
 import { useEffect, useState } from 'react';
-import { DateInput, FieldValueList, DateTimeDisplay, Text,  } from '@pega/cosmos-react-core';
+import { DateInput, FieldValueList, DateTimeDisplay, Text } from '@pega/cosmos-react-core';
 import PropTypes from 'prop-types';
-import FormattedText from "./FormattedText.jsx";
 
 import Styled{{COMPONENT_CLASS_NAME}}Wrapper from './styles';
 

package/src/tasks/create/templates/Constellation/Field/DateTime/date-time.js.mustache

@@ -47,6 +47,7 @@ function TimeFormatter(value, options) {
 }
 
 export const DateTimeShortFormatter = (value, options) => {
+//export function DateTimeShortFormatter(value, options) {
   return DateFormatter(value, {
     ...options,
     type: "customFormat",

package/src/tasks/create/templates/Constellation/Field/DateTime/{date-utils.js.mustache → date-utils.js}

@@ -1,4 +1,3 @@
-/* eslint-disable no-undef */
 import dayjs from "dayjs";
 
 const relativeTime = require("dayjs/plugin/relativeTime");

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

@@ -1,4 +1,3 @@
-/* eslint-disable no-undef */
 import dayjs from 'dayjs';
 
 const relativeTime = require('dayjs/plugin/relativeTime');

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

@@ -1,5 +1,6 @@
-import { withKnobs } from '@storybook/addon-knobs';
-import { configProps, stateProps } from './mock.stories';
+import { useState } from 'react';
+import { withKnobs, text, boolean } from '@storybook/addon-knobs';
+
 import {{COMPONENT_CLASS_NAME}} from './index.jsx';
 
 export default {
@@ -8,61 +9,31 @@ export default {
   component: {{COMPONENT_CLASS_NAME}}
 };
 
-if (!window.PCore) {
-  window.PCore = {};
-}
-
-window.PCore.getEnvironmentInfo = () => {
-  return {
-    getTimeZone: () => {
-      return '';
-    }
-  };
-};
-
 export const base{{COMPONENT_CLASS_NAME}} = () => {
+  const [value, setValue] = useState('test value');
+
   const props = {
     getPConnect: () => {
       return {
         getActionsApi: () => {
           return {
-            updateFieldValue: () => {/* nothing */},
-            triggerFieldChange: () => {/* nothing */}
-          };
-        },
-        getValidationApi: () => {
-          return {
-            validate: () => {/* nothing */}
+            updateFieldValue: (propName, value) => {
+              setValue(value);
+            }
           };
         },
         getStateProps: () => {
-          return stateProps;
-        },
-        getConfigProps: () => {
-          return configProps;
-        },
-        ignoreSuggestion: () => {/* nothing */},
-        acceptSuggestion: () => {/* nothing */},
-        clearErrorMessages: () => {/* nothing */}
+          return { value: '.name' };
+        }
       };
     },
-    value: configProps.value,
-    validatemessage: configProps.validatemessage,
-    label: configProps.label,
-    hideLabel: configProps.hideLabel,
-    helperText: configProps.helperText,
-    withSeconds: configProps.withSeconds,
-    nextYearRange: configProps.nextYearRange,
-    previousYearRange: configProps.previousYearRange,
-    showWeekNumber: configProps.showWeekNumber,
-    testId: configProps.testId,
-    additionalProps: configProps.additionalProps,
-    displayMode: configProps.displayMode,
-    variant: configProps.variant,
-    hasSuggestions: configProps.hasSuggestions,
-    disabled: configProps.disabled,
-    readOnly: configProps.readOnly,
-    required: configProps.required
+    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/DateTime/index.jsx.mustache

@@ -1,4 +1,3 @@
-/* eslint-disable no-undef */
 import { useEffect, useState } from 'react';
 import { DateTimeInput, FieldValueList, DateTimeDisplay, Text } from "@pega/cosmos-react-core";
 import PropTypes from "prop-types";
@@ -247,7 +246,6 @@ const {{COMPONENT_CLASS_NAME}} = props => {
   displayMode: PropTypes.string,
   variant: PropTypes.string,
   formatter: PropTypes.string,
-  Format: PropTypes.string,
   hasSuggestions: PropTypes.bool
 };