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

package/src/tasks/create/templates/SDK-React/template/FORM/utils.ts.mustache

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

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

@@ -46,7 +46,6 @@ const renderField = resolvedProps => {
 
 {{! pick new delimiters for mustache }}
 {{=<% %>=}}
-
   if (label === 'Email')
     val = (
       <TextField
@@ -77,7 +76,6 @@ const renderField = resolvedProps => {
         onChange={onChange}
       />
     );
-
 <%={{ }}=%>     {{! revert delimiters for mustache }}
 
   if (variant === 'inline') {

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

@@ -1,132 +1,131 @@
 export const pyReviewRaw = {
-    name: 'CollectInformation',
-    type: 'View',
-    config: {
-      template: 'DefaultForm',
-      ruleClass: 'OM5W9U-SampleApp-Work-Test',
-      localeReference: '@LR OM5W9U-SAMPLEAPP-WORK-TEST!VIEW!COLLECTINFORMATION',
-      context: '@P .pyViewContext'
+  name: 'CollectInformation',
+  type: 'View',
+  config: {
+    template: 'DefaultForm',
+    ruleClass: 'OM5W9U-SampleApp-Work-Test',
+    localeReference: '@LR OM5W9U-SAMPLEAPP-WORK-TEST!VIEW!COLLECTINFORMATION',
+    context: '@P .pyViewContext'
+  },
+  children: [
+    {
+      name: 'A',
+      type: 'Region',
+      children: [
+        {
+          type: 'TextInput',
+          config: {
+            value: '@P .FirstName',
+            label: '@L First Name'
+          }
+        },
+        {
+          type: 'TextInput',
+          config: {
+            value: '@P .MiddleName',
+            label: '@L Middle Name'
+          }
+        },
+        {
+          type: 'TextInput',
+          config: {
+            value: '@P .LastName',
+            label: '@L Last Name'
+          }
+        }
+      ]
     },
-    children: [
-      {
-        name: 'A',
-        type: 'Region',
-        children: [
-          {
-            type: 'TextInput',
-            config: {
-              value: '@P .FirstName',
-              label: '@L First Name'
-            }
-          },
-          {
-            type: 'TextInput',
-            config: {
-              value: '@P .MiddleName',
-              label: '@L Middle Name'
-            }
-          },
-          {
-            type: 'TextInput',
-            config: {
-              value: '@P .LastName',
-              label: '@L Last Name'
-            }
+    {
+      name: 'B',
+      type: 'Region',
+      children: [
+        {
+          type: 'Email',
+          config: {
+            value: '@P .Email',
+            label: '@L Email'
           }
-        ]
-      },
-      {
-        name: 'B',
-        type: 'Region',
-        children: [
-          {
-            type: 'Email',
-            config: {
-              value: '@P .Email',
-              label: '@L Email'
-            }
-          },
-          {
-            type: 'Phone',
-            config: {
-              value: '@P .PhoneNumber',
-              label: '@L Phone Number',
-              datasource: {
-                source: '@DATASOURCE D_pyCountryCallingCodeList.pxResults',
-                fields: {
-                  value: '@P .pyCallingCode'
-                }
+        },
+        {
+          type: 'Phone',
+          config: {
+            value: '@P .PhoneNumber',
+            label: '@L Phone Number',
+            datasource: {
+              source: '@DATASOURCE D_pyCountryCallingCodeList.pxResults',
+              fields: {
+                value: '@P .pyCallingCode'
               }
             }
-          },
-          {
-            type: 'Date',
-            config: {
-              value: '@P .ServiceDate',
-              label: '@L Service Date'
-            }
           }
-        ]
-      }
-    ],
-    classID: 'OM5W9U-SampleApp-Work-Test'
-  };
-  
-  export const regionChildrenResolved = [
-    {
-      readOnly: undefined,
-      value: 'John',
-      label: 'First Name',
-      hasSuggestions: false
-    },
-    {
-      readOnly: undefined,
-      value: 'Din',
-      label: 'Middle Name',
-      hasSuggestions: false
-    },
-    {
-      readOnly: undefined,
-      value: 'Doe',
-      label: 'Last Name',
-      hasSuggestions: false
-    },
-    {
-      readOnly: undefined,
-      value: 'John@doe.com',
-      label: 'Email',
-      hasSuggestions: false
-    },
-    {
-      readOnly: undefined,
-      value: '+16397975093',
-      label: 'Phone Number',
-      datasource: {
-        fields: {
-          value: undefined
         },
-        source: [
-          {
-            value: '+1'
-          },
-          {
-            value: '+91'
-          },
-          {
-            value: '+48'
-          },
-          {
-            value: '+44'
+        {
+          type: 'Date',
+          config: {
+            value: '@P .ServiceDate',
+            label: '@L Service Date'
           }
-        ]
+        }
+      ]
+    }
+  ],
+  classID: 'OM5W9U-SampleApp-Work-Test'
+};
+
+export const regionChildrenResolved = [
+  {
+    readOnly: undefined,
+    value: 'John',
+    label: 'First Name',
+    hasSuggestions: false
+  },
+  {
+    readOnly: undefined,
+    value: 'Din',
+    label: 'Middle Name',
+    hasSuggestions: false
+  },
+  {
+    readOnly: undefined,
+    value: 'Doe',
+    label: 'Last Name',
+    hasSuggestions: false
+  },
+  {
+    readOnly: undefined,
+    value: 'John@doe.com',
+    label: 'Email',
+    hasSuggestions: false
+  },
+  {
+    readOnly: undefined,
+    value: '+16397975093',
+    label: 'Phone Number',
+    datasource: {
+      fields: {
+        value: undefined
       },
-      hasSuggestions: false
+      source: [
+        {
+          value: '+1'
+        },
+        {
+          value: '+91'
+        },
+        {
+          value: '+48'
+        },
+        {
+          value: '+44'
+        }
+      ]
     },
-    {
-      readOnly: undefined,
-      value: '2023-01-25',
-      label: 'Service Date',
-      hasSuggestions: false
-    }
-  ];
-  
+    hasSuggestions: false
+  },
+  {
+    readOnly: undefined,
+    value: '2023-01-25',
+    label: 'Service Date',
+    hasSuggestions: false
+  }
+];

package/src/tasks/create/templates/SDK-React/template/PAGE/OneColumn.tsx.mustache

@@ -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/src/tasks/create/templates/SDK-React/template/PAGE/demo.stories.tsx.mustache

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

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

@@ -19,10 +19,8 @@ export default function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}
   const OneColumn = getComponentFromMap('OneColumn');
 
   return (
-      <Styled{{COMPONENT_CLASS_NAME}}Wrapper>
-        <OneColumn
-        {...props}
-        />
-      </Styled{{COMPONENT_CLASS_NAME}}Wrapper>
+    <Styled{{COMPONENT_CLASS_NAME}}Wrapper>
+      <OneColumn {...props} />
+    </Styled{{COMPONENT_CLASS_NAME}}Wrapper>
   );
 }

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

@@ -28,15 +28,15 @@ export const pyHome1Raw = {
             datasource: {
               source: [
                 {
-                    "name": "New React based UI rendering"
+                  name: 'New React based UI rendering'
                 },
                 {
-                    "name": "Support for followers and recents"
+                  name: 'Support for followers and recents'
                 },
                 {
-                    "name": "New authoring experience"
+                  name: 'New authoring experience'
                 }
-            ],
+              ],
               fields: {
                 name: '@P .pyLabel'
               }
@@ -92,16 +92,15 @@ export const pyHome1Resolved = {
             datasource: {
               source: [
                 {
-                    "name": "New React based UI rendering"
+                  name: 'New React based UI rendering'
                 },
                 {
-                    "name": "Support for followers and recents"
+                  name: 'Support for followers and recents'
                 },
                 {
-                    "name": "New authoring experience"
+                  name: 'New authoring experience'
                 }
-            ]
-            ,
+              ],
               fields: {
                 name: '@P .pyLabel'
               }

package/src/tasks/create/templates/SDK-React/widget/CASE/config.json.mustache

@@ -11,13 +11,13 @@
   "subtype": {{{SUB_TYPE}}},
   "icon": "OneColumnPage.svg",
   "properties": [
-   {
+    {
       "name": "label",
       "label": "Label value",
       "format": "TEXT"
     }
   ],
   "defaultConfig": {
-     "label": "@L {{COMPONENT_LABEL}}"
+    "label": "@L {{COMPONENT_LABEL}}"
   }
 }

package/src/tasks/create/templates/SDK-React/widget/CASE/demo.stories.tsx.mustache

@@ -3,26 +3,6 @@ import type { Meta, StoryObj } from '@storybook/react';
 import {{COMPONENT_CLASS_NAME}} from './index';
 import { historyData } from './mock';
 
-window.PCore = {
-  ...window.PCore,
-  getDataApiUtils: (): any => {
-    return {
-      getData: (): any => {
-        return new Promise(resolve => {
-          resolve(historyData);
-        });
-      }
-    };
-  },
-  getConstants: (): any => {
-    return {
-      CASE_INFO: {
-        CASE_INFO_ID: 'caseInfo.ID'
-      }
-    };
-  }
-};
-
 const meta: Meta<typeof {{COMPONENT_CLASS_NAME}}> = {
   title: '{{COMPONENT_CLASS_NAME}}',
   component: {{COMPONENT_CLASS_NAME}},
@@ -33,6 +13,25 @@ export default meta;
 type Story = StoryObj<typeof {{COMPONENT_CLASS_NAME}}>;
 
 export const Base{{COMPONENT_CLASS_NAME}}: Story = args => {
+  window.PCore = {
+    ...window.PCore,
+    getDataApiUtils: (): any => {
+      return {
+        getData: (): any => {
+          return new Promise(resolve => {
+            resolve(historyData);
+          });
+        }
+      };
+    },
+    getConstants: (): any => {
+      return {
+        CASE_INFO: {
+          CASE_INFO_ID: 'caseInfo.ID'
+        }
+      };
+    }
+  };
 
   const props = {
     label: 'Case history',

package/src/tasks/create/templates/SDK-React/widget/CASE/index.tsx.mustache

@@ -151,9 +151,9 @@ export default function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}
         const theKey = `CaseHistory-${index}`;
         theDataRows.push(
           <TableRow key={theKey}>
-            <StyledTableCell>{dataRow[0] ? dataRow[0] as any : '---'}</StyledTableCell>
-            <StyledTableCell>{dataRow[1] ? dataRow[1] as any : '---'}</StyledTableCell>
-            <StyledTableCell>{dataRow[2] ? dataRow[2] as any : '---'}</StyledTableCell>
+            <StyledTableCell>{dataRow[0] ? (dataRow[0] as any) : '---'}</StyledTableCell>
+            <StyledTableCell>{dataRow[1] ? (dataRow[1] as any) : '---'}</StyledTableCell>
+            <StyledTableCell>{dataRow[2] ? (dataRow[2] as any) : '---'}</StyledTableCell>
           </TableRow>
         );
       });

package/src/tasks/create/templates/SDK-React/widget/PAGE/config.json.mustache

@@ -11,49 +11,49 @@
   "subtype": {{{SUB_TYPE}}},
   "icon": "OneColumnPage.svg",
   "properties": [
-      {
-        "name": "description",
-        "label": "Description",
-        "format": "TEXT",
-        "defaultValue": "We've launched a brand new experience to accelerate your workflow. Check out the guides to help you get the most of Cosmos."
-      },
-      {
-        "name": "whatsnewlink",
-        "label": "What's new link",
-        "format": "TEXT",
-        "defaultValue": "https://design.pega.com"
-      },
-      {
-        "name": "image",
-        "label": "Image link",
-        "format": "TEXT",
-        "defaultValue": "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzOSAxMSI+PHRpdGxlPlBlZ2EgdGV4dC1vbmx5IGxvZ288L3RpdGxlPjxwYXRoIHN0eWxlPSJmaWxsLW9wYWNpdHk6IC4yNTsiIGZpbGw9IiNmZmYiIGQ9Ik03LjcyIDMuODJjMCAyLjI1LTEuNzggMy40MS00IDMuNDFoLTEuNnYzSDBWLjQyaDMuOTRjMi4zNiAwIDMuNzggMS4zOSAzLjc4IDMuNHptLTQtMS40N2gtMS42djNoMS43QTEuNDcgMS40NyAwIDAgMCA1LjUgMy44MmMwLS45MS0uNjUtMS40Ny0xLjc1LTEuNDd6bTcuNjggNS45MWg1LjN2Mkg5LjI5Vi40Mmg3LjM4djEuOTNoLTUuMjR2Mmg0LjI0djEuOWgtNC4yNHpNMjMuMTggMGE1IDUgMCAwIDEgMy41NyAxLjI4TDI1LjYzIDIuOGEzLjc4IDMuNzggMCAwIDAtMS4wNS0uNjNBNC4zMiA0LjMyIDAgMCAwIDIzLjMxIDIgMy4xNyAzLjE3IDAgMCAwIDIwIDUuMjdhMy4xNiAzLjE2IDAgMCAwIDEgMi4zOSAzLjA3IDMuMDcgMCAwIDAgMi4xNy44NCA0LjYgNC42IDAgMCAwIDIuMDktLjVWNi4xOWgtMi4yVjQuMzhoNC4yNXY0LjU2YTUuNDEgNS40MSAwIDAgMS00LjA4IDEuNTdBNS4zNSA1LjM1IDAgMCAxIDE5LjQzIDlhNS4wNSA1LjA1IDAgMCAxLTEuNTYtMy43NCA1LjIxIDUuMjEgMCAwIDEgMS41Ni0zLjc2QTUuMzEgNS4zMSAwIDAgMSAyMy4xOCAwem0xMS4yOS40Mmw0LjEzIDkuNzloLTIuMjVMMzUuNDggOGgtNC4wNmwtLjkgMi4xOGgtMi4yTDMyLjUxLjQyem0uMjUgNS43MkwzMy40NCAzbC0xLjI5IDMuMTR6bTMtNWEuNzEuNzEgMCAwIDEtLjc0Ljc1LjcxLjcxIDAgMCAxLS43My0uNzUuNzMuNzMgMCAwIDEgLjc1LS43Mi43Mi43MiAwIDAgMSAuNzUuNzF6TTM3IC41M2EuNTkuNTkgMCAwIDAtLjYuNi42MS42MSAwIDEgMCAxLjIxIDAgLjYuNiAwIDAgMC0uNjEtLjZ6bS0uMjQgMVYuNzFIMzdjLjEyIDAgLjE4LjA2LjI1LjA2YS4yMS4yMSAwIDAgMSAuMDcuMTguMTkuMTkgMCAwIDEtLjA3LjE4cy0uMDcuMDgtLjEzLjA4bC4yNi4zNmgtLjJMMzcgMS4yOGgtLjF2LjI5em0uMTMtLjQ0aC4yM2EuMjYuMjYgMCAwIDAgLjA3LS4wOWgtLjA2Yy0uMDUtLjE3LS4wNS0uMTctLjEzLS4xN2gtLjF6Ii8+PC9zdmc+"
-      },
-      {
-        "name": "datasource",
-        "label": "Data source for details",
-        "defaultValue": "@DATASOURCE D_pyAnnouncements.pxResults",
-        "format": "DATASOURCE",
-        "required": true,
-        "properties": [
-          {
-            "name": "name",
-            "label": "Label",
-            "defaultValue": "@P .pyLabel"
-          }
-        ]
-      },
-      {
-        "label": "Conditions",
-        "format": "GROUP",
-        "properties": [
-          {
-            "name": "visibility",
-            "label": "Visibility",
-            "format": "VISIBILITY"
-          }
-        ]
-      }
+    {
+      "name": "description",
+      "label": "Description",
+      "format": "TEXT",
+      "defaultValue": "We've launched a brand new experience to accelerate your workflow. Check out the guides to help you get the most of Cosmos."
+    },
+    {
+      "name": "whatsnewlink",
+      "label": "What's new link",
+      "format": "TEXT",
+      "defaultValue": "https://design.pega.com"
+    },
+    {
+      "name": "image",
+      "label": "Image link",
+      "format": "TEXT",
+      "defaultValue": "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzOSAxMSI+PHRpdGxlPlBlZ2EgdGV4dC1vbmx5IGxvZ288L3RpdGxlPjxwYXRoIHN0eWxlPSJmaWxsLW9wYWNpdHk6IC4yNTsiIGZpbGw9IiNmZmYiIGQ9Ik03LjcyIDMuODJjMCAyLjI1LTEuNzggMy40MS00IDMuNDFoLTEuNnYzSDBWLjQyaDMuOTRjMi4zNiAwIDMuNzggMS4zOSAzLjc4IDMuNHptLTQtMS40N2gtMS42djNoMS43QTEuNDcgMS40NyAwIDAgMCA1LjUgMy44MmMwLS45MS0uNjUtMS40Ny0xLjc1LTEuNDd6bTcuNjggNS45MWg1LjN2Mkg5LjI5Vi40Mmg3LjM4djEuOTNoLTUuMjR2Mmg0LjI0djEuOWgtNC4yNHpNMjMuMTggMGE1IDUgMCAwIDEgMy41NyAxLjI4TDI1LjYzIDIuOGEzLjc4IDMuNzggMCAwIDAtMS4wNS0uNjNBNC4zMiA0LjMyIDAgMCAwIDIzLjMxIDIgMy4xNyAzLjE3IDAgMCAwIDIwIDUuMjdhMy4xNiAzLjE2IDAgMCAwIDEgMi4zOSAzLjA3IDMuMDcgMCAwIDAgMi4xNy44NCA0LjYgNC42IDAgMCAwIDIuMDktLjVWNi4xOWgtMi4yVjQuMzhoNC4yNXY0LjU2YTUuNDEgNS40MSAwIDAgMS00LjA4IDEuNTdBNS4zNSA1LjM1IDAgMCAxIDE5LjQzIDlhNS4wNSA1LjA1IDAgMCAxLTEuNTYtMy43NCA1LjIxIDUuMjEgMCAwIDEgMS41Ni0zLjc2QTUuMzEgNS4zMSAwIDAgMSAyMy4xOCAwem0xMS4yOS40Mmw0LjEzIDkuNzloLTIuMjVMMzUuNDggOGgtNC4wNmwtLjkgMi4xOGgtMi4yTDMyLjUxLjQyem0uMjUgNS43MkwzMy40NCAzbC0xLjI5IDMuMTR6bTMtNWEuNzEuNzEgMCAwIDEtLjc0Ljc1LjcxLjcxIDAgMCAxLS43My0uNzUuNzMuNzMgMCAwIDEgLjc1LS43Mi43Mi43MiAwIDAgMSAuNzUuNzF6TTM3IC41M2EuNTkuNTkgMCAwIDAtLjYuNi42MS42MSAwIDEgMCAxLjIxIDAgLjYuNiAwIDAgMC0uNjEtLjZ6bS0uMjQgMVYuNzFIMzdjLjEyIDAgLjE4LjA2LjI1LjA2YS4yMS4yMSAwIDAgMSAuMDcuMTguMTkuMTkgMCAwIDEtLjA3LjE4cy0uMDcuMDgtLjEzLjA4bC4yNi4zNmgtLjJMMzcgMS4yOGgtLjF2LjI5em0uMTMtLjQ0aC4yM2EuMjYuMjYgMCAwIDAgLjA3LS4wOWgtLjA2Yy0uMDUtLjE3LS4wNS0uMTctLjEzLS4xN2gtLjF6Ii8+PC9zdmc+"
+    },
+    {
+      "name": "datasource",
+      "label": "Data source for details",
+      "defaultValue": "@DATASOURCE D_pyAnnouncements.pxResults",
+      "format": "DATASOURCE",
+      "required": true,
+      "properties": [
+        {
+          "name": "name",
+          "label": "Label",
+          "defaultValue": "@P .pyLabel"
+        }
+      ]
+    },
+    {
+      "label": "Conditions",
+      "format": "GROUP",
+      "properties": [
+        {
+          "name": "visibility",
+          "label": "Visibility",
+          "format": "VISIBILITY"
+        }
+      ]
+    }
   ],
   "defaultConfig": {}
 }

package/src/tasks/create/templates/SDK-React/widget/PAGE/demo.stories.tsx.mustache

@@ -1,7 +1,7 @@
 import type { Meta, StoryObj } from '@storybook/react';
 
 import {{COMPONENT_CLASS_NAME}} from './index';
-import { configProps } from './mock';
+import { configProps, worklistData } from './mock';
 
 const meta: Meta<typeof {{COMPONENT_CLASS_NAME}}> = {
   title: '{{COMPONENT_CLASS_NAME}}',
@@ -13,9 +13,52 @@ export default meta;
 type Story = StoryObj<typeof {{COMPONENT_CLASS_NAME}}>;
 
 export const Base{{COMPONENT_CLASS_NAME}}: Story = args => {
+    window.PCore = {
+    ...window.PCore,
+    getDataApiUtils: (): any => {
+      return {
+        getData: () => {
+          return new Promise(resolve => {
+            resolve(worklistData);
+          });
+        }
+      };
+    },
+    getConstants: (): any => {
+      return {
+        CASE_INFO: {
+          INSTRUCTIONS: 'caseInfo.assignments[0].instructions'
+        }
+      };
+    },
+  };
+
   const props = {
     datasource: configProps.datasource,
-    whatsnewlink: configProps.whatsnewlink
+    whatsnewlink: configProps.whatsnewlink,
+    getPConnect: () => {
+      return {
+        getValue: value => {
+          return value;
+        },
+        getContextName: () => {
+          return 'app/primary_1';
+        },
+        getLocalizedValue: value => {
+          return value;
+        },
+        getActionsApi: () => {
+          return {
+            updateFieldValue: () => {
+              /* nothing */
+            },
+            triggerFieldChange: () => {
+              /* nothing */
+            }
+          };
+        }
+      };
+    }
   };
 
   return <{{COMPONENT_CLASS_NAME}} {...props} {...args} />;