@pega/dx-component-builder-sdk 23.1.14 → 24.1.10

package/src/tasks/create/templates/SDK-React/template/DETAILS-region/mock.ts.mustache

@@ -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,18 +178,22 @@ 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',
           getPConnect: () => {
             return {
               getActionsApi: () => {
                 return {
-                  updateFieldValue: () => {/* nothing */},
-                  triggerFieldChange: () => {/* nothing */}
+                  updateFieldValue: () => {
+                    /* nothing */
+                  },
+                  triggerFieldChange: () => {
+                    /* nothing */
+                  }
                 };
               },
               getStateProps: () => {
@@ -188,16 +204,20 @@ export const pyReviewRaw = {
         },
         {
           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 */}
+                  updateFieldValue: () => {
+                    /* nothing */
+                  },
+                  triggerFieldChange: () => {
+                    /* nothing */
+                  }
                 };
               },
               getStateProps: () => {
@@ -208,41 +228,45 @@ export const pyReviewRaw = {
         },
         {
           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';
@@ -268,23 +292,27 @@ export const pyReviewRaw = {
               },
               getLocalizedValue: val => {
                 return val;
-              },
+              }
             };
-          },
+          }
         },
         {
           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: () => {
@@ -295,17 +323,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: () => {
@@ -315,18 +347,22 @@ 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',
           getPConnect: () => {
             return {
               getActionsApi: () => {
                 return {
-                  updateFieldValue: () => {/* nothing */},
-                  triggerFieldChange: () => {/* nothing */}
+                  updateFieldValue: () => {
+                    /* nothing */
+                  },
+                  triggerFieldChange: () => {
+                    /* nothing */
+                  }
                 };
               },
               getStateProps: () => {
@@ -337,16 +373,20 @@ export const pyReviewRaw = {
         },
         {
           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 */}
+                  updateFieldValue: () => {
+                    /* nothing */
+                  },
+                  triggerFieldChange: () => {
+                    /* nothing */
+                  }
                 };
               },
               getStateProps: () => {
@@ -357,41 +397,45 @@ export const pyReviewRaw = {
         },
         {
           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';
@@ -417,27 +461,27 @@ 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'
+};

package/src/tasks/create/templates/SDK-React/template/FORM/config.json.mustache

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

package/src/tasks/create/templates/SDK-React/template/FORM/demo.stories.tsx.mustache

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

package/src/tasks/create/templates/SDK-React/template/FORM/index.tsx.mustache

@@ -8,7 +8,7 @@ import { getKeyForMappedField, mapStateToProps } from './utils';
 import { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
 
 import './DefaultForm.css';
-import Styled{{COMPONENT_CLASS_NAME}}Wrapper from "./styles";
+import Styled{{COMPONENT_CLASS_NAME}}Wrapper from './styles';
 
 interface {{COMPONENT_CLASS_NAME}}Props extends PConnProps {
   // If any, enter additional props that only exist on this component
@@ -57,21 +57,19 @@ export default function {{COMPONENT_CLASS_NAME}}(props: PropsWithChildren<{{COMP
 
   return (
     <Styled{{COMPONENT_CLASS_NAME}}Wrapper>
-    <>
-      {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'
-          {{! pick new delimiters for mustache }}
-          {{=<% %>=}}
-          dangerouslySetInnerHTML={{ __html: instructions }}
-          <%={{ }}=%>     {{! revert delimiters for mustache }}
-          />
-        </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 */}
+            {{! pick new delimiters for mustache }}
+            {{=<% %>=}}
+            <div key='instructions' id='instruction-text' dangerouslySetInnerHTML={{ __html: instructions }} />
+            <%={{ }}=%>     {{! revert delimiters for mustache }}
+          </div>
+        )}
+        <div className={divClass}>{dfChildren}</div>
+      </>
     </Styled{{COMPONENT_CLASS_NAME}}Wrapper>
   );
 }