@pega/custom-dx-components 23.1.13 → 24.1.11

package/README.md

@@ -8,7 +8,7 @@ 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 23 or later
+- Pega Infinity Server version 24 or later
 
 - Git version 2.30 or later
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pega/custom-dx-components",
-  "version": "23.1.13",
+  "version": "24.1.11",
   "description": "Utility for building custom UI components",
   "bin": "./bin/index.js",
   "scripts": {

package/src/cli.js

@@ -37,7 +37,7 @@ const TASKS = {
   VALIDATE_SCHEMA: 'validateSchema',
   UPDATE: 'update',
   DELETE: 'delete',
-  DELETE_ALL: 'deleteAll',
+  DELETE_ALL: "deleteAll",
   AUTHENTICATE: 'authenticate',
   UPGRADE: 'upgrade',
   BUILD_JEST_ASSETS: 'buildJestAssets'

package/src/constants.js

@@ -139,6 +139,10 @@ export const COMPONENT_SCHEMA = {
         name: 'URL',
         value: 'Text-URL'
       },
+      {
+        name: 'Icon Button URL',
+        value: 'Icon-Button-URL'
+      },
       {
         name: 'Integer',
         value: 'Integer'

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

@@ -56,11 +56,17 @@ export const zipComponent = async (componentKey) => {
   const srcDirectory = await getComponentDirectoryPath(componentKey);
   const buildDirectory = await path.join(path.resolve(), 'dist/components', componentKey);
   const configJson = `${srcDirectory}/config.json`;
+  const localizationJson = `${srcDirectory}/localizations.json`;
 
   const zip = new AdmZip();
 
   zip.addLocalFolder(srcDirectory, 'src/');
   zip.addLocalFile(configJson);
+
+  if (fs.existsSync(localizationJson)) {
+    zip.addLocalFile(localizationJson);
+  }
+
   zip.addLocalFolder(buildDirectory);
   const zipContent = zip.toBuffer().toString('base64');
 

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

@@ -46,13 +46,21 @@ export const zipComponent = async (componentKey) => {
   const buildDirectory = await path.join(path.resolve(), 'dist/components', componentKey);
   const configJson = `${srcDirectory}/config.json`;
 
+  const localizationJson = `${srcDirectory}/localizations.json`;
+
   const zip = new AdmZip();
 
   zip.addLocalFolder(srcDirectory, 'src/');
   zip.addLocalFile(configJson);
+
+  if (fs.existsSync(localizationJson)) {
+    zip.addLocalFile(localizationJson);
+  }
+
   zip.addLocalFolder(buildDirectory);
   const zipContent = zip.toBuffer().toString('base64');
 
+
   const configContent = Buffer.from(fs.readFileSync(`${srcDirectory}/config.json`)).toString();
   if (fs.existsSync('dist/components')) {
     fs.rm('dist/components', { recursive: true }, err => {

package/src/tasks/bundle/builder/webpack.config.js

@@ -304,6 +304,7 @@ export default (
         resourceRegExp: /^\.\/locale$/,
         contextRegExp: /moment$/
       }),
+      /* cosmos 4.x and below */
       /* Ignore cosmos icons */
       new webpack.IgnorePlugin({
         resourceRegExp: /^\.\/icons$/,
@@ -327,7 +328,20 @@ export default (
         resourceRegExp: /^\.\/streamline-icons$/,
         contextRegExp: /@pega\\cosmos-react-core\\lib\\components\\Icon$/
       }),
-      
+
+      /* cosmos 6.x and above */
+      /* Ignore cosmos icons */
+      new webpack.IgnorePlugin({
+        resourceRegExp: /^\.\/.*\/.*\.icon$/,
+        contextRegExp: /@pega\/cosmos-react-core\/lib\/components\/Icon$/
+      }),
+
+      /* Ignore cosmos icons - windows */
+      new webpack.IgnorePlugin({
+        resourceRegExp: /^\.\/.*\/.*\.icon$/,
+        contextRegExp: /@pega\\cosmos-react-core\\lib\\components\\Icon$/
+      }),
+
       new webpack.optimize.LimitChunkCountPlugin({
         maxChunks: 1
       }),

package/src/tasks/create/index.js

@@ -73,6 +73,9 @@ const compileMustacheTemplates = async (
       case 'Picklist-RadioButtons':
         mustacheSubType = 'Picklist';
         break;
+      case 'Icon-Button-URL':
+        mustacheSubType = 'Text-URL';
+        break;
     }
   }
 

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

@@ -23,20 +23,7 @@ export const Base{{COMPONENT_CLASS_NAME}}: Story = args => {
 
   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: () => {
@@ -76,6 +63,9 @@ Base{{COMPONENT_CLASS_NAME}}.args = {
   required: configProps.required,
   status: configProps.status,
   hideLabel: configProps.hideLabel,
+  trueLabel: configProps.trueLabel,
+  falseLabel: configProps.falseLabel,
   displayMode: configProps.displayMode,
+  variant: configProps.variant,
   validatemessage: configProps.validatemessage
 };

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

@@ -3,7 +3,8 @@ import {
   CheckboxGroup,
   FieldValueList,
   Text,
-  withConfiguration
+  withConfiguration,
+  BooleanDisplay
 } from "@pega/cosmos-react-core";
 
 import type { PConnFieldProps } from './PConnProps';
@@ -96,15 +97,17 @@ function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}Props) {
 
   let displayComponent;
   if (displayMode) {
-    // @ts-ignore
     displayComponent = (
-      // @ts-ignore
-      <{{COMPONENT_CLASS_NAME}} value={value} trueLabel={trueLabel} falseLabel={falseLabel} />
+      <BooleanDisplay value={value} trueLabel={trueLabel} falseLabel={falseLabel} />
     );
   }
 
   if (displayMode === 'DISPLAY_ONLY') {
-    return ( <Styled{{COMPONENT_CLASS_NAME}}Wrapper> {displayComponent} </Styled{{COMPONENT_CLASS_NAME}}Wrapper>);
+    return (
+      <Styled{{COMPONENT_CLASS_NAME}}Wrapper>
+       {displayComponent}
+      </Styled{{COMPONENT_CLASS_NAME}}Wrapper>
+    );
   }
 
   if (displayMode === "LABELS_LEFT") {

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

@@ -31,6 +31,9 @@ window.PCore.getEnvironmentInfo = () => {
 
 export const Base{{COMPONENT_CLASS_NAME}}: Story = args => {
   const props = {
+    value: configProps.value,
+    additionalProps: configProps.additionalProps,
+    hasSuggestions: configProps.hasSuggestions,
     getPConnect: () => {
       return {
         getActionsApi: () => {
@@ -54,25 +57,7 @@ export const Base{{COMPONENT_CLASS_NAME}}: Story = args => {
         acceptSuggestion: () => {/* nothing */},
         clearErrorMessages: () => {/* nothing */}
       };
-    },
-    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,
-    validatemessage: '',
-    disabled: configProps.disabled,
-    readOnly: configProps.readOnly,
-    required: configProps.required
+    }
   };
 
   return (
@@ -92,6 +77,10 @@ Base{{COMPONENT_CLASS_NAME}}.args = {
   required: configProps.required,
   status: configProps.status,
   hideLabel: configProps.hideLabel,
+  nextYearRange: configProps.nextYearRange,
+  previousYearRange: configProps.previousYearRange,
+  showAsFormattedText: configProps.showAsFormattedText,
   displayMode: configProps.displayMode,
+  variant: configProps.variant,
   validatemessage: configProps.validatemessage
 };

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

@@ -31,6 +31,9 @@ window.PCore.getEnvironmentInfo = () => {
 
 export const Base{{COMPONENT_CLASS_NAME}}: Story = args => {
   const props = {
+    value: configProps.value,
+    additionalProps: configProps.additionalProps,
+    hasSuggestions: configProps.hasSuggestions,
     getPConnect: () => {
       return {
         getActionsApi: () => {
@@ -54,24 +57,7 @@ export const Base{{COMPONENT_CLASS_NAME}}: Story = args => {
         acceptSuggestion: () => {/* nothing */},
         clearErrorMessages: () => {/* nothing */}
       };
-    },
-    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
+    }
   };
 
   return (
@@ -92,6 +78,9 @@ Base{{COMPONENT_CLASS_NAME}}.args = {
   required: configProps.required,
   status: configProps.status,
   hideLabel: configProps.hideLabel,
+  nextYearRange: configProps.nextYearRange,
+  previousYearRange: configProps.previousYearRange,
   displayMode: configProps.displayMode,
+  variant: configProps.variant,
   validatemessage: configProps.validatemessage
 };

package/src/tasks/create/templates/Constellation/Field/DateTime/mock.ts.mustache

@@ -2,6 +2,7 @@
 // @ts-nocheck
 export const configProps = {
   value: '2023-01-24T16:45:00.000Z',
+  placeholder: 'DateTime Placeholder',
   validatemessage: '',
   label: 'DateTime Label',
   hideLabel: false,

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

@@ -20,14 +20,7 @@ export const Base{{COMPONENT_CLASS_NAME}}: Story = args => {
 
   const props = {
     value: configProps.value,
-    placeholder: configProps.placeholder,
-    label: configProps.label,
-    helperText: configProps.helperText,
-    showGroupSeparators: configProps.showGroupSeparators,
-    hasSuggestions: configProps.hasSuggestions,
-    testId: configProps.testId,
     fieldMetadata,
-    validatemessage: '',
     getPConnect: () => {
       return {
         getStateProps: () => {
@@ -66,5 +59,6 @@ Base{{COMPONENT_CLASS_NAME}}.args = {
   status: configProps.status,
   hideLabel: configProps.hideLabel,
   displayMode: configProps.displayMode,
+  variant: configProps.variant,
   validatemessage: configProps.validatemessage
 };

package/src/tasks/create/templates/Constellation/Field/Decimal/mock.ts.mustache

@@ -9,6 +9,7 @@ export const configProps = {
   testId: 'decimal-12345678',
   hasSuggestions: false,
   displayMode: '',
+  variant: '',
   hideLabel: false,
   readOnly: false,
   required: false,

package/src/tasks/create/templates/Constellation/Field/Decimal-Currency/demo.stories.tsx.mustache

@@ -20,17 +20,8 @@ export const Base{{COMPONENT_CLASS_NAME}}: Story = args => {
 
   const props = {
     value: Number(configProps.value),
-    placeholder: configProps.placeholder,
-    label: configProps.label,
-    helperText: configProps.helperText,
-    showGroupSeparators: configProps.showGroupSeparators,
-    allowDecimals: configProps.allowDecimals,
-    currencyISOCode: configProps.currencyISOCode,
-    alwaysShowISOCode: configProps.alwaysShowISOCode,
     hasSuggestions: configProps.hasSuggestions,
-    testId: configProps.testId,
     fieldMetadata,
-    validatemessage: '',
     getPConnect: () => {
       return {
         getStateProps: () => {
@@ -60,6 +51,7 @@ export const Base{{COMPONENT_CLASS_NAME}}: Story = args => {
 
 Base{{COMPONENT_CLASS_NAME}}.args = {
   label: configProps.label,
+  placeholder: configProps.placeholder,
   helperText: configProps.helperText,
   showGroupSeparators: configProps.showGroupSeparators,
   allowDecimals: configProps.allowDecimals,
@@ -72,5 +64,6 @@ Base{{COMPONENT_CLASS_NAME}}.args = {
   status: configProps.status,
   hideLabel: configProps.hideLabel,
   displayMode: configProps.displayMode,
+  variant: configProps.variant,
   validatemessage: configProps.validatemessage
 };

package/src/tasks/create/templates/Constellation/Field/Decimal-Currency/mock.ts.mustache

@@ -3,6 +3,7 @@
 export const configProps = {
   value: '',
   label: 'Currency Sample',
+  placeholder: 'Currency Placeholder',
   currencyISOCode: 'USD',
   allowDecimals: true,
   showGroupSeparators: true,
@@ -12,6 +13,7 @@ export const configProps = {
   testId: 'currency-12345678',
   hasSuggestions: false,
   displayMode: '',
+  variant: '',
   hideLabel: false,
   readOnly: false,
   required: false,

package/src/tasks/create/templates/Constellation/Field/Decimal-Percentage/demo.stories.tsx.mustache

@@ -20,14 +20,8 @@ export const Base{{COMPONENT_CLASS_NAME}}: Story = args => {
 
   const props = {
     value: configProps.value,
-    placeholder: configProps.placeholder,
-    label: configProps.label,
-    helperText: configProps.helperText,
-    showGroupSeparators: configProps.showGroupSeparators,
     hasSuggestions: configProps.hasSuggestions,
-    testId: configProps.testId,
     fieldMetadata,
-    validatemessage: '',
     getPConnect: () => {
       return {
         getStateProps: () => {
@@ -57,6 +51,7 @@ export const Base{{COMPONENT_CLASS_NAME}}: Story = args => {
 Base{{COMPONENT_CLASS_NAME}}.args = {
   label: configProps.label,
   helperText: configProps.helperText,
+  placeholder: configProps.placeholder,
   showGroupSeparators: configProps.showGroupSeparators,
   testId: configProps.testId,
   readOnly: configProps.readOnly,
@@ -65,5 +60,6 @@ Base{{COMPONENT_CLASS_NAME}}.args = {
   status: configProps.status,
   hideLabel: configProps.hideLabel,
   displayMode: configProps.displayMode,
+  variant: configProps.variant,
   validatemessage: configProps.validatemessage
 };

package/src/tasks/create/templates/Constellation/Field/Decimal-Percentage/mock.ts.mustache

@@ -8,6 +8,7 @@ export const configProps = {
   testId: 'percentage-12345678',
   hasSuggestions: false,
   displayMode: '',
+  variant: '',
   hideLabel: false,
   readOnly: false,
   required: false,

package/src/tasks/create/templates/Constellation/Field/Icon-Button-URL/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/Icon-Button-URL/config.json.mustache

@@ -0,0 +1,64 @@
+{
+  "name": "{{COMPONENT_KEY}}",
+  "label": "{{COMPONENT_LABEL}}",
+  "description": "{{DESCRIPTION}}",
+  "organization": "{{ORGANIZATION}}",
+  "version": "{{VERSION}}",
+  "library": "{{LIBRARY}}",
+  "allowedApplications": {{{ALLOWEDAPPS}}},
+  "componentKey": "{{COMPONENT_KEY}}",
+  "type": "{{TYPE}}",
+  "subtype": {{{SUB_TYPE}}},
+  "icon": "images/pz-url-active.svg",
+  "properties": [
+    {
+      "format": "SELECT",
+      "name": "countryCode",
+      "label": "Country code",
+      "defaultValue": "USA",
+      "source": [
+        {
+          "key": "USA",
+          "value": "United States"
+        },
+        {
+          "key": "CAN",
+          "value": "Canada"
+        },
+        {
+          "key": "AUS",
+          "value": "Australia"
+        },
+        {
+          "key": "JPN",
+          "value": "Japan"
+        },
+        {
+          "key": "IND",
+          "value": "India"
+        },
+        {
+          "key": "TUR",
+          "value": "Turkey"
+        }
+      ]
+    },
+    {
+      "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"
+  }
+}

package/src/tasks/create/templates/Constellation/Field/Icon-Button-URL/demo.stories.tsx.mustache

@@ -0,0 +1,104 @@
+
+/* eslint-disable react/jsx-no-useless-fragment */
+// @ts-nocheck
+import type { Meta, StoryObj } from '@storybook/react';
+
+import {{COMPONENT_CLASS_NAME}} from './index';
+import { stateProps, configProps } from './mock';
+
+const meta: Meta<typeof {{COMPONENT_CLASS_NAME}}> = {
+  title: '{{COMPONENT_CLASS_NAME}}',
+  component: {{COMPONENT_CLASS_NAME}},
+  excludeStories: /.*Data$/
+};
+
+export default meta;
+type Story = StoryObj<typeof {{COMPONENT_CLASS_NAME}}>;
+
+if (!window.PCore) {
+  window.PCore = {};
+}
+
+const statelistData = {
+  data: [
+    {
+      pyLabel: 'Massachusetts',
+      pyStateCode: 'MA'
+    },
+    {
+      pyLabel: 'Rhode Island',
+      pyStateCode: 'RI'
+    },
+    {
+      pyLabel: 'Connecticut',
+      pyStateCode: 'CT'
+    }
+  ]
+};
+
+window.PCore.getDataPageUtils = () => {
+  return {
+    getData: () => {
+      return new Promise(resolve => {
+        resolve(statelistData);
+      });
+    },
+    getDataAsync: () => {
+      return new Promise(resolve => {
+        resolve(statelistData);
+      });
+    }
+  };
+};
+
+export const Base{{COMPONENT_CLASS_NAME}}: Story = args => {
+
+  const props = {
+    countryCode: configProps.countryCode,
+    getPConnect: () => {
+      return {
+        getValue: value => {
+          return value;
+        },
+        getContextName: () => {
+          return 'app/primary_1';
+        },
+        getLocalizedValue: value => {
+          return value;
+        },
+        getActionsApi: () => {
+          return {
+            updateFieldValue: () => {
+              /* nothing */
+            },
+            triggerFieldChange: () => {
+              /* nothing */
+            }
+          };
+        },
+        ignoreSuggestion: () => {
+          /* nothing */
+        },
+        acceptSuggestion: () => {
+          /* nothing */
+        },
+        setInheritedProps: () => {
+          /* nothing */
+        },
+        resolveConfigProps: () => {
+          /* nothing */
+        }
+      };
+    }
+  };
+
+  return (
+    <>
+      <{{COMPONENT_CLASS_NAME}} {...props} {...args} />
+    </>
+  );
+};
+
+Base{{COMPONENT_CLASS_NAME}}.args = {
+  countryCode: configProps.countryCode
+};