@pega/dx-component-builder-sdk 23.1.15 → 24.1.11

package/tests/assets/sdk-r/components/createAll/custom-sdk/template/Pega_DXIL_MyDetails/mock.ts

@@ -1,120 +1,124 @@
 const operatorDetails = {
   data: {
-    pzLoadTime: "January 18, 2023 10:33:19 AM EST",
-    pzPageNameHash: "_pa1519192551088960pz",
+    pzLoadTime: 'January 18, 2023 10:33:19 AM EST',
+    pzPageNameHash: '_pa1519192551088960pz',
     pyOperatorInfo: {
-      pyUserName: "french DigV2",
-      pyPosition: "",
-      pyImageInsKey: "",
+      pyUserName: 'french DigV2',
+      pyPosition: '',
+      pyImageInsKey: '',
       pySkills: [
         {
-          pySkillName: "",
-          pzIndexOwnerKey: "DATA-ADMIN-OPERATOR-ID FRENCHTEST.DIGV2",
-          pySkillRating: 0,
-        },
+          pySkillName: '',
+          pzIndexOwnerKey: 'DATA-ADMIN-OPERATOR-ID FRENCHTEST.DIGV2',
+          pySkillRating: 0
+        }
       ],
-      pyReportToUserName: "",
-      pyReportTo: "",
-      pyOrganization: "DXIL",
-      pyTitle: "",
-      pyLabel: "frenchTest.DigV2",
-      pyEmailAddress: "User@DigV2",
-      pyTelephone: "",
-    },
+      pyReportToUserName: '',
+      pyReportTo: '',
+      pyOrganization: 'DXIL',
+      pyTitle: '',
+      pyLabel: 'frenchTest.DigV2',
+      pyEmailAddress: 'User@DigV2',
+      pyTelephone: ''
+    }
   },
   status: 200,
-  statusText: "",
+  statusText: '',
   headers: {
-    "content-length": "435",
-    "content-type": "application/json;charset=UTF-8",
+    'content-length': '435',
+    'content-type': 'application/json;charset=UTF-8'
   },
-  request: {},
+  request: {}
 };
 
 export default operatorDetails;
 
 export const pyReviewRaw = {
-  name: "pyReview",
-  type: "View",
+  name: 'pyReview',
+  type: 'View',
   config: {
-    template: "Details",
-    ruleClass: "MyCo-MyCompon-Work-MyComponents",
+    template: 'Details',
+    ruleClass: 'MyCo-MyCompon-Work-MyComponents',
     showLabel: true,
-    label: "@L Details",
-    localeReference: "@LR MYCO-MYCOMPON-WORK-MYCOMPONENTS!VIEW!PYREVIEW",
+    label: '@L Details',
+    localeReference: '@LR MYCO-MYCOMPON-WORK-MYCOMPONENTS!VIEW!PYREVIEW',
     showHighlightedData: true,
     highlightedData: [
       {
-        type: "TextInput",
+        type: 'TextInput',
         config: {
-          value: "@P .pyStatusWork",
-          label: "@L Work Status",
-          displayMode: "STACKED_LARGE_VAL",
-          displayAsStatus: true,
-        },
+          value: '@P .pyStatusWork',
+          label: '@L Work Status',
+          displayMode: 'STACKED_LARGE_VAL',
+          displayAsStatus: true
+        }
       },
       {
-        type: "TextInput",
+        type: 'TextInput',
         config: {
-          value: "@P .pyID",
-          label: "@L Case ID",
-          displayMode: "STACKED_LARGE_VAL",
-        },
+          value: '@P .pyID',
+          label: '@L Case ID',
+          displayMode: 'STACKED_LARGE_VAL'
+        }
       },
       {
-        type: "DateTime",
+        type: 'DateTime',
         config: {
-          value: "@P .pxCreateDateTime",
-          label: "@L Create date/time",
-          displayMode: "STACKED_LARGE_VAL",
-        },
+          value: '@P .pxCreateDateTime',
+          label: '@L Create date/time',
+          displayMode: 'STACKED_LARGE_VAL'
+        }
       },
       {
-        type: "UserReference",
+        type: 'UserReference',
         config: {
-          label: "@L Create Operator",
-          value: "@USER .pxCreateOperator",
-          placeholder: "Select...",
-          displayMode: "STACKED_LARGE_VAL",
-        },
-      },
+          label: '@L Create Operator',
+          value: '@USER .pxCreateOperator',
+          placeholder: 'Select...',
+          displayMode: 'STACKED_LARGE_VAL'
+        }
+      }
     ],
     inheritedProps: [
       {
-        prop: "label",
-        value: "@L Details",
+        prop: 'label',
+        value: '@L Details'
       },
       {
-        prop: "showLabel",
-        value: true,
-      },
-    ],
+        prop: 'showLabel',
+        value: true
+      }
+    ]
   },
   children: [
     {
-      name: "A",
-      type: "Region",
+      name: 'A',
+      type: 'Region',
       getPConnect: () => {
         return {
           getRawMetadata: () => {
             return pyReviewRaw.children[0];
-          },
+          }
         };
       },
       children: [
         {
           readOnly: undefined,
-          placeholder: "First Name",
-          value: "John",
-          label: "First Name",
+          placeholder: 'First Name',
+          value: 'John',
+          label: 'First Name',
           hasSuggestions: false,
-          displayMode: "LABELS_LEFT",
+          displayMode: 'LABELS_LEFT',
           getPConnect: () => {
             return {
               getActionsApi: () => {
                 return {
-                  updateFieldValue: () => {/* nothing */},
-                  triggerFieldChange: () => {/* nothing */}
+                  updateFieldValue: () => {
+                    /* nothing */
+                  },
+                  triggerFieldChange: () => {
+                    /* nothing */
+                  }
                 };
               },
               getStateProps: () => {
@@ -125,17 +129,21 @@ export const pyReviewRaw = {
         },
         {
           readOnly: undefined,
-          placeholder: "Middle Name",
-          value: "",
-          label: "Middle Name",
+          placeholder: 'Middle Name',
+          value: '',
+          label: 'Middle Name',
           hasSuggestions: false,
-          displayMode: "LABELS_LEFT",
+          displayMode: 'LABELS_LEFT',
           getPConnect: () => {
             return {
               getActionsApi: () => {
                 return {
-                  updateFieldValue: () => {/* nothing */},
-                  triggerFieldChange: () => {/* nothing */}
+                  updateFieldValue: () => {
+                    /* nothing */
+                  },
+                  triggerFieldChange: () => {
+                    /* nothing */
+                  }
                 };
               },
               getStateProps: () => {
@@ -146,17 +154,21 @@ export const pyReviewRaw = {
         },
         {
           readOnly: undefined,
-          placeholder: "Last Name",
-          value: "Doe",
-          label: "Last Name",
+          placeholder: 'Last Name',
+          value: 'Doe',
+          label: 'Last Name',
           hasSuggestions: false,
-          displayMode: "LABELS_LEFT",
+          displayMode: 'LABELS_LEFT',
           getPConnect: () => {
             return {
               getActionsApi: () => {
                 return {
-                  updateFieldValue: () => {/* nothing */},
-                  triggerFieldChange: () => {/* nothing */}
+                  updateFieldValue: () => {
+                    /* nothing */
+                  },
+                  triggerFieldChange: () => {
+                    /* nothing */
+                  }
                 };
               },
               getStateProps: () => {
@@ -166,57 +178,78 @@ export const pyReviewRaw = {
           }
         },
         {
-          value: "john@doe.com",
-          label: "Email",
+          value: 'john@doe.com',
+          label: 'Email',
           required: true,
-          testId: "CE8AE9DA5B7CD6C3DF2929543A9AF92D",
+          testId: 'CE8AE9DA5B7CD6C3DF2929543A9AF92D',
           hasSuggestions: false,
-          displayMode: "LABELS_LEFT",
+          displayMode: 'LABELS_LEFT'
         },
         {
           readOnly: undefined,
-          value: "+16397975093",
-          label: "Phone",
-          displayMode: "LABELS_LEFT",
+          value: '+16397975093',
+          label: 'Phone',
+          displayMode: 'LABELS_LEFT',
           hasSuggestions: false,
+          getPConnect: () => {
+            return {
+              getActionsApi: () => {
+                return {
+                  updateFieldValue: () => {
+                    /* nothing */
+                  },
+                  triggerFieldChange: () => {
+                    /* nothing */
+                  }
+                };
+              },
+              getStateProps: () => {
+                return { value: '' };
+              }
+            };
+          }
         },
         {
           readOnly: undefined,
-          placeholder: "Price",
-          value: "90.99",
-          label: "Price",
+          placeholder: 'Price',
+          value: '90.99',
+          label: 'Price',
           hasSuggestions: false,
-          displayMode: "LABELS_LEFT",
+          displayMode: 'LABELS_LEFT',
           getPConnect: () => {
             return {
-              getActionsApi: () => {/* nothing */},
+              getActionsApi: () => {
+                /* nothing */
+              },
               getStateProps: () => {
                 return {
-                  value: "",
+                  value: ''
                 };
               },
               getComponentName: () => {
-                return "currency";
-              },
+                return 'currency';
+              }
             };
-          },
+          }
         },
         {
           readOnly: undefined,
-          value: "100 Mbps",
-          label: "Internet Plan",
+          value: '100 Mbps',
+          label: 'Internet Plan',
           hasSuggestions: false,
-          displayMode: "LABELS_LEFT",
+          displayMode: 'LABELS_LEFT',
           getPConnect: () => {
             return {
-              getActionsApi: () => {/* nothing */},
+              getActionsApi: () => {
+                /* nothing */
+              },
               getStateProps: () => {
                 return {
-                  value: "",
+                  value: ''
                 };
               },
               getComponentName: () => {
-                return "radio";
+                return 'radio';
               },
               getContextName: () => {
                 return 'app/primary_1';
@@ -242,109 +275,109 @@ export const pyReviewRaw = {
               },
               getLocalizedValue: val => {
                 return val;
-              },
+              }
             };
-          },
+          }
         },
         {
-            label: "Update operator",
-            createLabel: "Created",
-            updateLabel: "Updated",
-            updateDateTime: "2023-03-10T12:53:04.670Z",
-            createDateTime: "2023-03-10T12:52:20.054Z",
-            updateOperator: {
-              userId: "User.DigV2",
-              userName: "User DigV2",
-            },
-            createOperator: {
-              userId: "User.DigV2",
-              userName: "User DigV2",
-            },
-        },
-      ],
-    },
+          label: 'Update operator',
+          createLabel: 'Created',
+          updateLabel: 'Updated',
+          updateDateTime: '2023-03-10T12:53:04.670Z',
+          createDateTime: '2023-03-10T12:52:20.054Z',
+          updateOperator: {
+            userId: 'User.DigV2',
+            userName: 'User DigV2'
+          },
+          createOperator: {
+            userId: 'User.DigV2',
+            userName: 'User DigV2'
+          }
+        }
+      ]
+    }
   ],
-  classID: "MyCo-MyCompon-Work-MyComponents",
+  classID: 'MyCo-MyCompon-Work-MyComponents'
 };
 
 export const pyReviewResolved = {
   readOnly: true,
-  template: "Details",
-  ruleClass: "MyCo-MyCompon-Work-MyComponents",
+  template: 'Details',
+  ruleClass: 'MyCo-MyCompon-Work-MyComponents',
   showLabel: true,
-  label: "Details",
-  localeReference: "MYCO-MYCOMPON-WORK-MYCOMPONENTS!VIEW!PYREVIEW",
+  label: 'Details',
+  localeReference: 'MYCO-MYCOMPON-WORK-MYCOMPONENTS!VIEW!PYREVIEW',
   showHighlightedData: true,
   highlightedData: [
     {
-      type: "TextInput",
+      type: 'TextInput',
       config: {
-        value: "New",
-        label: "Work Status",
-        displayMode: "STACKED_LARGE_VAL",
-        displayAsStatus: true,
-      },
+        value: 'New',
+        label: 'Work Status',
+        displayMode: 'STACKED_LARGE_VAL',
+        displayAsStatus: true
+      }
     },
     {
-      type: "TextInput",
+      type: 'TextInput',
       config: {
-        value: "M-1002",
-        label: "Case ID",
-        displayMode: "STACKED_LARGE_VAL",
-      },
+        value: 'M-1002',
+        label: 'Case ID',
+        displayMode: 'STACKED_LARGE_VAL'
+      }
     },
     {
-      type: "DateTime",
+      type: 'DateTime',
       config: {
-        value: "2022-12-11T20:06:27.232Z",
-        label: "Create date/time",
-        displayMode: "STACKED_LARGE_VAL",
-      },
+        value: '2022-12-11T20:06:27.232Z',
+        label: 'Create date/time',
+        displayMode: 'STACKED_LARGE_VAL'
+      }
     },
     {
-      type: "UserReference",
+      type: 'UserReference',
       config: {
-        label: "Create Operator",
+        label: 'Create Operator',
         value: {
-          userId: "conns",
-          userName: "Sara Connor",
+          userId: 'conns',
+          userName: 'Sara Connor'
         },
-        placeholder: "Select...",
-        displayMode: "STACKED_LARGE_VAL",
-      },
-    },
+        placeholder: 'Select...',
+        displayMode: 'STACKED_LARGE_VAL'
+      }
+    }
   ],
-  displayMode: "LABELS_LEFT",
+  displayMode: 'LABELS_LEFT'
 };
 
 export const regionChildrenResolved = [
   {
     readOnly: true,
-    value: "",
-    label: "SLA Deadline",
-    displayMode: "LABELS_LEFT",
+    value: '',
+    label: 'SLA Deadline',
+    displayMode: 'LABELS_LEFT'
   },
   {
     readOnly: true,
-    value: "",
-    label: "SLA Goal",
-    displayMode: "LABELS_LEFT",
+    value: '',
+    label: 'SLA Goal',
+    displayMode: 'LABELS_LEFT'
   },
   {
     readOnly: true,
-    value: "",
-    label: "SLA Start Time",
-    listType: "associated",
+    value: '',
+    label: 'SLA Start Time',
+    listType: 'associated',
     datasource: [
       {
-        key: "AssignmentCreation",
-        value: "The creation time of the Assignment",
+        key: 'AssignmentCreation',
+        value: 'The creation time of the Assignment'
       },
       {
-        key: "CurrentTime",
-        value: "Current Date Time",
-      },
+        key: 'CurrentTime',
+        value: 'Current Date Time'
+      }
     ],
-    displayMode: "LABELS_LEFT",
-  },
-];
+    displayMode: 'LABELS_LEFT'
+  }
+];

package/tests/assets/sdk-r/components/createAll/custom-sdk/template/Pega_DXIL_MyForm/config.json

@@ -10,7 +10,7 @@
   "type": "Template",
   "subtype": "FORM",
   "icon": "DefaultForm.svg",
-    "properties": [
+  "properties": [
     {
       "format": "SELECT",
       "name": "NumCols",

package/tests/assets/sdk-r/components/createAll/custom-sdk/template/Pega_DXIL_MyForm/demo.stories.tsx

@@ -35,7 +35,6 @@ export default meta;
 type Story = StoryObj<typeof PegaDxilMyForm>;
 
 export const BasePegaDxilMyForm: Story = args => {
-
   const [firstName, setFirstName] = useState('John');
   const [middleName, setMiddleName] = useState('');
   const [lastName, setLastName] = useState('Joe');
@@ -183,6 +182,19 @@ export const BasePegaDxilMyForm: Story = args => {
                           return {
                             getComputedVisibility: () => {
                               return true;
+                            },
+                            getActionsApi: () => {
+                              return {
+                                updateFieldValue: () => {
+                                  /* nothing */
+                                },
+                                triggerFieldChange: () => {
+                                  /* nothing */
+                                }
+                              };
+                            },
+                            getStateProps: () => {
+                              return { value: '' };
                             }
                           };
                         }

package/tests/assets/sdk-r/components/createAll/custom-sdk/template/Pega_DXIL_MyForm/index.tsx

@@ -8,7 +8,7 @@ import { getKeyForMappedField, mapStateToProps } from './utils';
 import { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
 
 import './DefaultForm.css';
-import StyledPegaDxilMyFormWrapper from "./styles";
+import StyledPegaDxilMyFormWrapper from './styles';
 
 interface PegaDxilMyFormProps extends PConnProps {
   // If any, enter additional props that only exist on this component
@@ -57,18 +57,16 @@ export default function PegaDxilMyForm(props: PropsWithChildren<PegaDxilMyFormPr
 
   return (
     <StyledPegaDxilMyFormWrapper>
-    <>
-      {instructions && (
-        <div className='psdk-default-form-instruction-text'>
-          {/* server performs sanitization method for instructions html content */}
-          {/* eslint-disable react/no-danger */}
-          <div key='instructions' id='instruction-text'
-          dangerouslySetInnerHTML={{ __html: instructions }}
-          />
-        </div>
-      )}
-      <div className={divClass}>{dfChildren}</div>
-    </>
+      <>
+        {instructions && (
+          <div className='psdk-default-form-instruction-text'>
+            {/* server performs sanitization method for instructions html content */}
+            {/* eslint-disable react/no-danger */}
+            <div key='instructions' id='instruction-text' dangerouslySetInnerHTML={{ __html: instructions }} />
+          </div>
+        )}
+        <div className={divClass}>{dfChildren}</div>
+      </>
     </StyledPegaDxilMyFormWrapper>
   );
 }

package/tests/assets/sdk-r/components/createAll/custom-sdk/template/Pega_DXIL_MyForm/utils.ts

@@ -30,4 +30,4 @@ export const getKeyForMappedField = field => {
   }
 
   return uuidv4();
-};
+};

package/tests/assets/sdk-r/components/createAll/custom-sdk/template/Pega_DXIL_MyPage/OneColumn.tsx

@@ -1,32 +1,31 @@
-import { Grid } from "@material-ui/core";
+import { Grid } from '@material-ui/core';
 import { makeStyles } from '@material-ui/core/styles';
 
-interface OneColumnProps{
+interface OneColumnProps {
   // If any, enter additional props that only exist on this component
-  children: any[]
+  children: any[];
 }
 
 const useStyles = makeStyles((/* theme */) => ({
   colStyles: {
-    display: "grid",
-    gap: "1rem",
-    alignContent: "baseline",
-  },
+    display: 'grid',
+    gap: '1rem',
+    alignContent: 'baseline'
+  }
 }));
 
-
 export default function OneColumn(props: OneColumnProps) {
   const classes = useStyles();
 
-  const { children} = props;
+  const { children } = props;
 
   return (
     <Grid container spacing={2}>
       <Grid item xs={12} className={classes.colStyles}>
-        {children.map(child => { return child; } )}
+        {children.map(child => {
+          return child;
+        })}
       </Grid>
     </Grid>
-  )
+  );
 }
-
-

package/tests/assets/sdk-r/components/createAll/custom-sdk/template/Pega_DXIL_MyPage/demo.stories.tsx

@@ -9,7 +9,7 @@ import { pyHome1Resolved, pyHome1Raw } from './mock';
 const meta: Meta<typeof PegaDxilMyPage> = {
   title: 'PegaDxilMyPage',
   component: PegaDxilMyPage,
-  excludeStories: /.*Data$/,
+  excludeStories: /.*Data$/
 };
 
 export default meta;