@pega/custom-dx-components 0.23.19 → 0.23.21

package/src/util.js

@@ -30,13 +30,14 @@ export const checkPathAccess = async (path, options = {}) => {
   try {
     await access(path, fs.constants.R_OK);
   } catch (err) {
-    const message = errorMessage || `${chalk.red.bold('ERROR')} Could not able to access path - ${path}`;
+    const message =
+      errorMessage || `${chalk.red.bold('ERROR')} Could not able to access path - ${path}`;
     console.error(message);
     process.exit(1);
   }
 };
 
-export const deleteLocalComponent = async (componentKey) => {
+export const deleteLocalComponent = async componentKey => {
   const currentDirectory = process.cwd();
   const pegaConfigJsonPath = join(currentDirectory, TASKS_CONFIG_JSON_FILENAME);
 
@@ -46,7 +47,9 @@ export const deleteLocalComponent = async (componentKey) => {
   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`);
+    console.error(
+      `${chalk.red.bold('ERROR')} Could not able find components directory path in config.json`
+    );
     process.exit(1);
   }
 
@@ -61,7 +64,7 @@ export const deleteLocalComponent = async (componentKey) => {
   }
 };
 
-export const getHttpsAgent = (serverConfig) => {
+export const getHttpsAgent = serverConfig => {
   const agentOptions = { rejectUnauthorized: false };
   if (serverConfig.legacyTLS) {
     agentOptions.secureOptions = crypto.constants.SSL_OP_LEGACY_SERVER_CONNECT;
@@ -69,7 +72,7 @@ export const getHttpsAgent = (serverConfig) => {
   return new https.Agent(agentOptions);
 };
 
-export const deleteServerComponent = async (componentKey) => {
+export const deleteServerComponent = async componentKey => {
   const serverConfig = await getPegaServerConfig();
   const { server, user, password } = serverConfig;
   const url = constructCompleteUrl(server, DELETE_COMPONENT_SERVICE_REST_ENDPOINT);
@@ -79,7 +82,11 @@ export const deleteServerComponent = async (componentKey) => {
     const OauthData = fs.readFileSync(TOKEN_PATH, 'utf8');
 
     if (OauthData) {
-      const { access_token: accessToken, token_type: tokenType, refresh_token: refreshToken } = JSON.parse(OauthData);
+      const {
+        access_token: accessToken,
+        token_type: tokenType,
+        refresh_token: refreshToken
+      } = JSON.parse(OauthData);
       fetch(deleteUrl, {
         method: 'DELETE',
         agent: getHttpsAgent(serverConfig),
@@ -87,8 +94,8 @@ export const deleteServerComponent = async (componentKey) => {
           Authorization: `${tokenType} ${accessToken}`
         }
       })
-        .then((response) => response.text())
-        .then((resp) => {
+        .then(response => response.text())
+        .then(resp => {
           let respData;
           try {
             respData = JSON.parse(resp);
@@ -103,7 +110,7 @@ export const deleteServerComponent = async (componentKey) => {
             throw new Error(`${respData.message}`);
           }
         })
-        .catch((e) => Promise.reject(`${chalk.bold.red(e)}`));
+        .catch(e => Promise.reject(`${chalk.bold.red(e)}`));
     }
   } catch (error) {
     console.log(`\n${chalk.bold.red(error)}`);
@@ -121,30 +128,32 @@ export const getComponents = async () => {
   data = JSON.parse(data);
 
   if (!data[COMPONENTS_DIRECTORY_PATH]) {
-    console.error(`${chalk.red.bold('ERROR')} Could not find components directory path in config.json`);
+    console.error(
+      `${chalk.red.bold('ERROR')} Could not find components directory path in config.json`
+    );
     process.exit(1);
   }
 
   const directory = join(currentDirectory, data[COMPONENTS_DIRECTORY_PATH]);
   return fs
     .readdirSync(directory, { withFileTypes: true })
-    .filter((dirent) => dirent.isDirectory())
-    .map((dirent) => dirent.name);
+    .filter(dirent => dirent.isDirectory())
+    .map(dirent => dirent.name);
 };
 
 export const getSubComponents = async (directory, type) => {
   const subDirectory = join(directory, type);
   return fs
     .readdirSync(subDirectory, { withFileTypes: true })
-    .filter((dirent) => dirent.isDirectory())
-    .map((dirent) => dirent.name);
+    .filter(dirent => dirent.isDirectory())
+    .map(dirent => dirent.name);
 };
 
-export const getDirectoryFiles = async (directory) => {
+export const getDirectoryFiles = async directory => {
   return fs
     .readdirSync(directory, { withFileTypes: true })
-    .filter((dirent) => !dirent.isDirectory())
-    .map((dirent) => dirent.name);
+    .filter(dirent => !dirent.isDirectory())
+    .map(dirent => dirent.name);
 };
 
 export const getComponentsObj = async () => {
@@ -155,7 +164,7 @@ export const getComponentsObj = async () => {
 
   if (componentList.length > 0) {
     compList.push(
-      ...componentList.map((name) => {
+      ...componentList.map(name => {
         const container = {};
         container.name = name;
         container.value = name;
@@ -190,7 +199,7 @@ export const getComponentDefaults = async () => {
   return config.component;
 };
 
-export const getComponentDirectoryPath = async (componentKey) => {
+export const getComponentDirectoryPath = async componentKey => {
   const currentDirectory = process.cwd();
   const pegaConfigJsonPath = join(currentDirectory, TASKS_CONFIG_JSON_FILENAME);
 
@@ -200,7 +209,9 @@ export const getComponentDirectoryPath = async (componentKey) => {
   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`);
+    console.error(
+      `${chalk.red.bold('ERROR')} Could not able find components directory path in config.json`
+    );
     process.exit(1);
   }
 
@@ -212,11 +223,11 @@ export const compileMustacheTemplate = (file, data) => {
   return mustache.render(content, data);
 };
 
-export const isPascalCase = (string) => {
+export const isPascalCase = string => {
   return string === pascalCase(string);
 };
 
-export const convertIntoPascalCase = (string) => {
+export const convertIntoPascalCase = string => {
   return pascalCase(string);
 };
 
@@ -224,7 +235,7 @@ export const constructCompleteUrl = (baseServer, endPoint) => {
   return baseServer.endsWith('/') ? `${baseServer}${endPoint}` : `${baseServer}/${endPoint}`;
 };
 
-export const sanitize = (str) => {
+export const sanitize = str => {
   /* Allow only numbers and case insensitive alphabets */
   str = str.replace(/[^a-zA-Z0-9 ]/g, '');
   /* spaces will be replaced by - */
@@ -232,13 +243,13 @@ export const sanitize = (str) => {
   return str;
 };
 
-export const validateSemver = (str) => {
+export const validateSemver = str => {
   /* basic semver version validation - 0.0.1-dev */
   const regex = /^[0-9]\d*\.\d+\.\d+(?:-[a-zA-Z0-9]+)?$/g;
   return regex.test(str);
 };
 
-export const validateRulesetVersion = (str) => {
+export const validateRulesetVersion = str => {
   /* Ruleset version range - 01-99 */
   if (str.indexOf('00') !== -1) {
     return false;
@@ -268,7 +279,11 @@ export const showVersion = () => {
   const nodeMinorVersion = parseInt(arNodeVersion[1]);
 
   if (nodeMajorVersion < 18) {
-    console.log(chalk.redBright(`DX Component Builder - SDK requires node v18 or greater, current version: ${process.version}`));
+    console.log(
+      chalk.redBright(
+        `DX Component Builder - SDK requires node v18 or greater, current version: ${process.version}`
+      )
+    );
     process.exit(1);
   }
 
@@ -281,7 +296,7 @@ export const showVersion = () => {
 };
 
 export const getOOTBComponents = async () => {
-  return new Promise((resolve) => {
+  return new Promise(resolve => {
     fs.readFile(OOTB_COMPONENTS, 'utf-8', async (error, ootbComponentsData) => {
       if (error) {
         try {
@@ -298,12 +313,12 @@ export const getOOTBComponents = async () => {
                 Authorization: `${tokenType} ${accessToken}`
               }
             })
-              .then((response) => response.text())
-              .then((data) => {
+              .then(response => response.text())
+              .then(data => {
                 if (data.charAt() === '[') {
                   data = data.slice(1, -1);
                   data = data.replace(/\s/g, '');
-                  fs.writeFile(OOTB_COMPONENTS, data, (err) => {
+                  fs.writeFile(OOTB_COMPONENTS, data, err => {
                     if (err) {
                       console.error(err);
                     }
@@ -313,14 +328,14 @@ export const getOOTBComponents = async () => {
                   data = JSON.parse(data);
                   if (data && data.errors) {
                     const errMessages = data.errors;
-                    errMessages.forEach((msgArr) => {
+                    errMessages.forEach(msgArr => {
                       throw new Error(`Failed with error - ${JSON.stringify(msgArr.message)}`);
                     });
                   }
                 }
               })
               // eslint-disable-next-line prefer-promise-reject-errors
-              .catch((e) => Promise.reject(`${chalk.bold.red(e)}`));
+              .catch(e => Promise.reject(`${chalk.bold.red(e)}`));
           }
         } catch (e) {
           throw new Error('Error occurred in validation', e);
@@ -332,7 +347,7 @@ export const getOOTBComponents = async () => {
   });
 };
 
-export const deleteInfinityServerComponent = async (componentKey) => {
+export const deleteInfinityServerComponent = async componentKey => {
   const serverConfig = await getPegaServerConfig();
   const { server } = serverConfig;
   const url = constructCompleteUrl(server, DELETE_COMPONENT_SERVICE_REST_ENDPOINT);
@@ -352,11 +367,11 @@ export const deleteInfinityServerComponent = async (componentKey) => {
           Authorization: `${tokenType} ${accessToken}`
         }
       })
-        .then((response) => {
+        .then(response => {
           status = response.status;
           return response.text();
         })
-        .then((resp) => {
+        .then(resp => {
           let respData;
           try {
             respData = JSON.parse(resp);
@@ -371,10 +386,12 @@ export const deleteInfinityServerComponent = async (componentKey) => {
             throw new Error(`${respData.message}`);
           }
         })
-        .catch((e) => {
+        .catch(e => {
           if (status === 403) {
             // eslint-disable-next-line prefer-promise-reject-errors
-            Promise.reject(`${chalk.bold.red('Error forbidden: User does not have privileges to Delete.')}`);
+            Promise.reject(
+              `${chalk.bold.red('Error forbidden: User does not have privileges to Delete.')}`
+            );
           } else {
             // eslint-disable-next-line prefer-promise-reject-errors
             Promise.reject(`${chalk.bold.red(e)}`);
@@ -386,9 +403,12 @@ export const deleteInfinityServerComponent = async (componentKey) => {
   }
 };
 
-export const deleteLaunchpadServerComponent = async (componentKey) => {
+export const deleteLaunchpadServerComponent = async componentKey => {
   const { server, isolationId } = await getPegaServerConfig();
-  const deleteUrl = constructCompleteUrl(server, LP_DELETE_COMPONENT_SERVICE_REST_ENDPOINT.replace('{isolationId}', isolationId));
+  const deleteUrl = constructCompleteUrl(
+    server,
+    LP_DELETE_COMPONENT_SERVICE_REST_ENDPOINT.replace('{isolationId}', isolationId || 'undefined')
+  );
   const [componentName] = componentKey.split('~|~');
 
   try {
@@ -416,13 +436,15 @@ export const deleteLaunchpadServerComponent = async (componentKey) => {
         headers,
         body: JSON.stringify(apiBody)
       })
-        .then((response) => {
+        .then(response => {
           status = response.status;
           return response.text();
         })
-        .then((response) => {
+        .then(response => {
           if (status === 401) {
-            throw new Error('Error occurred in authentication. Please regenerate using authenticate');
+            throw new Error(
+              'Error occurred in authentication. Please regenerate using authenticate'
+            );
             // console.log(accessTokenUri, refreshToken);
             /* TODO - Handle refresh_token */
           } else if (status === 200 || status === 201) {
@@ -431,10 +453,12 @@ export const deleteLaunchpadServerComponent = async (componentKey) => {
             throw new Error(`${response.message}`);
           }
         })
-        .catch((e) => {
+        .catch(e => {
           if (status === 403) {
             // eslint-disable-next-line prefer-promise-reject-errors
-            Promise.reject(`${chalk.bold.red('Error forbidden: User does not have privileges to Delete.')}`);
+            Promise.reject(
+              `${chalk.bold.red('Error forbidden: User does not have privileges to Delete.')}`
+            );
           } else {
             // eslint-disable-next-line prefer-promise-reject-errors
             Promise.reject(`${chalk.bold.red(e)}`);

package/tests/assets/components/create/Pega_DXIL_MyTestText/demo.stories.jsx

@@ -1,8 +1,8 @@
+/* eslint-disable react/jsx-no-useless-fragment */
 import { useState } from 'react';
 import { withKnobs } from '@storybook/addon-knobs';
 
-import { stateProps, configProps } from './mock.stories';
-
+import { stateProps, configProps } from './mock';
 import PegaDxilMyTestText from './index.jsx';
 
 export default {
@@ -11,8 +11,7 @@ export default {
   component: PegaDxilMyTestText
 };
 
-export const basePegaDxilMyTestText = () => {
-  // eslint-disable-next-line react-hooks/rules-of-hooks
+export const BasePegaDxilMyTestText = () => {
   const [value, setValue] = useState(configProps.value);
 
   const props = {
@@ -32,13 +31,23 @@ export const basePegaDxilMyTestText = () => {
             updateFieldValue: (propName, theValue) => {
               setValue(theValue);
             },
-            triggerFieldChange: () => {/* nothing */}
+            triggerFieldChange: () => {
+              /* nothing */
+            }
           };
         },
-        ignoreSuggestion: () => {/* nothing */},
-        acceptSuggestion: () => {/* nothing */},
-        setInheritedProps: () => {/* nothing */},
-        resolveConfigProps: () => {/* nothing */}
+        ignoreSuggestion: () => {
+          /* nothing */
+        },
+        acceptSuggestion: () => {
+          /* nothing */
+        },
+        setInheritedProps: () => {
+          /* nothing */
+        },
+        resolveConfigProps: () => {
+          /* nothing */
+        }
       };
     }
   };

package/tests/assets/components/create/Pega_DXIL_MyTestText/{mock.stories.js → mock.js}

@@ -1,3 +1,5 @@
+/* eslint-disable storybook/default-exports */
+/* eslint-disable storybook/prefer-pascal-case */
 export const configProps = {
   value: '',
   label: 'Text Sample',

package/tests/assets/components/create/Pega_DXIL_MyTestText/styles.js

@@ -1,3 +1,4 @@
+
 // utilizing theming, comment out, if want individual style
 import styled from 'styled-components';
 import { Configuration } from '@pega/cosmos-react-core';

package/tests/assets/components/createAll/Constellation/Pega_DXIL_MyAutocomplete/component-constants.js

@@ -0,0 +1,5 @@
+export default {
+  PROPERTY_REFERENCE: 'propertyRef',
+  WORK_BASKET: 'workbasket',
+  WORK_QUEUE: 'workqueue'
+};

package/tests/assets/components/createAll/Constellation/Pega_DXIL_MyAutocomplete/config.json

@@ -0,0 +1,115 @@
+{
+  "name": "Pega_DXIL_MyAutocomplete",
+  "label": "My Autocomplete",
+  "description": "My Autocomplete",
+  "organization": "Pega",
+  "version": "0.0.1",
+  "library": "DXIL",
+  "allowedApplications": [],
+  "componentKey": "Pega_DXIL_MyAutocomplete",
+  "type": "Field",
+  "subtype": "Picklist",
+  "icon": "images/pz-dropdown-active.svg",
+  "properties": [
+    {
+      "name": "label",
+      "label": "Field label",
+      "format": "TEXT",
+      "required": true
+    },
+    {
+      "name": "readOnly",
+      "label": "Edit mode",
+      "format": "READONLY"
+    },
+    {
+      "label": "Column settings",
+      "format": "GROUP",
+      "visibility": "@VIEWTYPE == 'MultiRecordDisplayAsTable'",
+      "properties": [
+        {
+          "name": "columnWidth",
+          "label": "Column width",
+          "format": "SELECT",
+          "source": [
+            {
+              "key": "auto",
+              "value": "Auto"
+            },
+            {
+              "key": "custom",
+              "value": "Custom"
+            }
+          ]
+        },
+        {
+          "name": "width",
+          "label": "Width (px)",
+          "format": "NUMBER",
+          "visibility": "$this.columnWidth == 'custom'"
+        }
+      ]
+    },
+    {
+      "label": "Input settings",
+      "format": "GROUP",
+      "visibility": "(!readOnly = true)",
+      "properties": [
+        {
+          "name": "placeholder",
+          "label": "Placeholder",
+          "format": "TEXT"
+        },
+        {
+          "name": "helperText",
+          "label": "Helper text",
+          "format": "TEXT"
+        }
+      ]
+    },
+    {
+      "label": "Conditions",
+      "format": "GROUP",
+      "properties": [
+        {
+          "name": "required",
+          "label": "Required",
+          "format": "REQUIRED",
+          "visibility": "(!readOnly = true)"
+        },
+        {
+          "name": "disabled",
+          "label": "Disabled",
+          "format": "DISABLED",
+          "visibility": "(!readOnly = true)"
+        },
+        {
+          "name": "visibility",
+          "label": "Visibility",
+          "format": "VISIBILITY"
+        }
+      ]
+    },
+    {
+      "label": "Advanced",
+      "format": "GROUP",
+      "collapsible": true,
+      "properties": [
+        {
+          "name": "testId",
+          "label": "Test ID",
+          "format": "TEXT",
+          "ignorePattern": "[^-_\\p{N}\\p{L}]",
+          "includeAnnotations": false
+        }
+      ]
+    }
+  ],
+  "defaultConfig": {
+    "label": "@L $this.label",
+    "placeholder": "@L Select...",
+    "listType": "associated",
+    "datasource": "@ASSOCIATED .$this.name",
+    "deferDatasource": true
+  }
+}

package/tests/assets/components/createAll/Constellation/Pega_DXIL_MyAutocomplete/date.js

@@ -0,0 +1,161 @@
+/* eslint-disable @typescript-eslint/no-shadow */
+import dayjs from 'dayjs';
+import relativeTime from 'dayjs/plugin/relativeTime.js';
+import localizedFormat from 'dayjs/plugin/localizedFormat.js';
+import utc from 'dayjs/plugin/utc.js';
+import tzone from 'dayjs/plugin/timezone.js';
+import { formatDateTime, parseToDate } from '@pega/cosmos-react-core';
+
+import formatConstants from './format-constants.js';
+
+dayjs.extend(relativeTime);
+dayjs.extend(localizedFormat);
+dayjs.extend(utc);
+dayjs.extend(tzone);
+
+export const COSMOS_FORMAT_CONSTANTS = {
+  SHORT: 'short',
+  LONG: 'long'
+};
+
+export const COSMOS_VARIANT_CONSTANTS = {
+  DATE_TIME: 'datetime',
+  DATE: 'date',
+  RELATIVE: 'relative',
+  TIME: 'time'
+};
+
+export const DATE_TYPES = {
+  DATE: 'date',
+  DATE_TIME: 'datetime',
+  TIME: 'time'
+};
+
+const constellationToCosmosFormatterMap = new Map([
+  [
+    DATE_TYPES.DATE,
+    new Map([
+      [
+        formatConstants.DateTimeLong,
+        { format: COSMOS_FORMAT_CONSTANTS.LONG, variant: COSMOS_VARIANT_CONSTANTS.DATE_TIME }
+      ],
+      [
+        formatConstants.DateTimeShort,
+        { format: COSMOS_FORMAT_CONSTANTS.SHORT, variant: COSMOS_VARIANT_CONSTANTS.DATE }
+      ],
+      [
+        formatConstants.DateTimeSince,
+        { format: COSMOS_FORMAT_CONSTANTS.SHORT, variant: COSMOS_VARIANT_CONSTANTS.RELATIVE }
+      ],
+      [formatConstants.DateDefault, { format: COSMOS_FORMAT_CONSTANTS.LONG, variant: COSMOS_VARIANT_CONSTANTS.DATE }]
+    ])
+  ],
+  [
+    DATE_TYPES.TIME,
+    new Map([
+      [formatConstants.TimeDefault, { format: COSMOS_FORMAT_CONSTANTS.SHORT, variant: COSMOS_VARIANT_CONSTANTS.TIME }],
+      [formatConstants.TimeOnly, { format: COSMOS_FORMAT_CONSTANTS.LONG, variant: COSMOS_VARIANT_CONSTANTS.TIME }]
+    ])
+  ],
+  [
+    DATE_TYPES.DATE_TIME,
+    new Map([
+      [
+        formatConstants.DateTimeDefault,
+        { format: COSMOS_FORMAT_CONSTANTS.SHORT, variant: COSMOS_VARIANT_CONSTANTS.DATE_TIME }
+      ],
+      [
+        formatConstants.DateTimeShort,
+        { format: COSMOS_FORMAT_CONSTANTS.SHORT, variant: COSMOS_VARIANT_CONSTANTS.DATE }
+      ],
+      [
+        formatConstants.DateTimeSince,
+        { format: COSMOS_FORMAT_CONSTANTS.SHORT, variant: COSMOS_VARIANT_CONSTANTS.RELATIVE }
+      ],
+      [
+        formatConstants.DateTimeLong,
+        { format: COSMOS_FORMAT_CONSTANTS.LONG, variant: COSMOS_VARIANT_CONSTANTS.DATE_TIME }
+      ],
+      [formatConstants.TimeOnly, { format: COSMOS_FORMAT_CONSTANTS.SHORT, variant: COSMOS_VARIANT_CONSTANTS.TIME }]
+    ])
+  ]
+]);
+const types = ['fromNow', 'customFormat'];
+
+// value should be in ISO 8601 format.
+// eslint-disable-next-line no-shadow
+function DateFormatter(value, { type = types[1], format = 'DD/MM/YYYY', timezone, fieldType } = {}) {
+  if (!value) return value;
+  switch (type) {
+    case types[1]:
+      if (timezone && !(fieldType === 'Date' || fieldType === 'Date only'))
+        return dayjs(value).tz(timezone).format(format); // Date only value should be formatted without timezone
+      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 { timeOptions = {} } = options;
+//     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, timeOptions);
+//   }
+//   return DateFormatter(value, options);
+// }
+
+// function DateTimeShortFormatter(value, options) {
+//   return DateFormatter(value, {
+//     ...options,
+//     type: 'customFormat',
+//     format: 'MMM DD, YYYY'
+//   });
+// }
+
+export function format(value, options) {
+  if (!value) return null;
+  const { type, locale, timezone, formatter, translate } = options;
+  // eslint-disable-next-line no-shadow
+  const { format, variant } = constellationToCosmosFormatterMap.get(type).get(formatter);
+  return formatDateTime(parseToDate(value), {
+    t: translate,
+    locale,
+    format,
+    variant,
+    timeZone: type === DATE_TYPES.DATE_TIME ? timezone : 'UTC'
+  });
+}
+
+export default {
+  'DateTime-Long': (value, options) => format(value, { ...options, formatter: 'DateTime-Long' }),
+  'DateTime-Short': (value, options) => format(value, { ...options, formatter: 'DateTime-Short' }),
+  'DateTime-Since': (value, options) => format(value, { ...options, formatter: 'DateTime-Since' }),
+  'Time-Only': (value, options) => format(value, { ...options, formatter: 'Time-Only' }),
+  convertToTimezone: (value, options) => {
+    return value && options && options.timezone
+      ? DateFormatter(value, {
+          ...options,
+          type: 'customFormat',
+          format: 'YYYY-MM-DDTHH:mm:ss'
+        })
+      : value;
+  },
+  convertFromTimezone: (value, timezone) =>
+    value && timezone ? dayjs.tz(value, timezone).utc().format('YYYY-MM-DDTHH:mm:ss[Z]') : value,
+  Date: (value, options) => DateFormatter(value, { type: 'customFormat', ...options }),
+  'Date-Default': (value, options) => format(value, { ...options, formatter: 'Date-Default' }),
+  'Date-Time-Default': (value, options) => format(value, { ...options, formatter: 'Date-Time-Default' }),
+  'Time-Default': (value, options) => format(value, { ...options, formatter: 'Time-Default' })
+};