@pega/dx-component-builder-sdk 0.23.14 → 0.23.15

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

@@ -14,42 +14,67 @@ const meta: Meta<typeof PegaDxilMyTwoColumnForm> = {
   component: PegaDxilMyTwoColumnForm,
   excludeStories: /.*Data$/,
   parameters: {
-    type: "TwoColumnForm",
-  },
+    type: 'TwoColumnForm'
+  }
 };
 
 export default meta;
 type Story = StoryObj<typeof PegaDxilMyTwoColumnForm>;
 
 const renderField = resolvedProps => {
-  const { displayMode, value = '', label = '', onChange} = resolvedProps;
+  const { displayMode, value = '', label = '', onChange } = resolvedProps;
 
   const variant = displayMode === 'LABELS_LEFT' ? 'inline' : 'stacked';
   let val: any = '';
   if (label === 'Service Date')
-    val = <MuiPickersUtilsProvider utils={DayjsUtils}><KeyboardDatePicker
-      variant='inline'
-      inputVariant='outlined'
-      placeholder='mm/dd/yyyy'
-      fullWidth
-      format='MM/DD/YYYY'
-      mask='__/__/____'
-      size='small'
-      label={label}
-      value={value || null}
-      onChange={onChange}
-    />
-    </MuiPickersUtilsProvider>
+    val = (
+      <MuiPickersUtilsProvider utils={DayjsUtils}>
+        <KeyboardDatePicker
+          variant='inline'
+          inputVariant='outlined'
+          placeholder='mm/dd/yyyy'
+          fullWidth
+          format='MM/DD/YYYY'
+          mask='__/__/____'
+          size='small'
+          label={label}
+          value={value || null}
+          onChange={onChange}
+        />
+      </MuiPickersUtilsProvider>
+    );
 
 
   if (label === 'Email')
-    val = <TextField type='email' fullWidth value={value} size='small' variant='outlined' style={{ fontSize: '14px' }} label={label} onChange={onChange} />;
+    val = (
+      <TextField
+        type='email'
+        fullWidth
+        value={value}
+        size='small'
+        variant='outlined'
+        style={{ fontSize: '14px' }}
+        label={label}
+        onChange={onChange}
+      />
+    );
 
   if (label === 'First Name' || label === 'Last Name' || label === 'Middle Name')
     val = <TextField value={value} fullWidth size='small' variant='outlined' style={{ fontSize: '14px' }} label={label} onChange={onChange} />;
 
   if (label === 'Phone Number')
-    val = <MuiPhoneNumber value={value} fullWidth variant='outlined' size='small' style={{ fontSize: '14px' }} defaultCountry='us' label={label} onChange={onChange} />;
+    val = (
+      <MuiPhoneNumber
+        value={value}
+        fullWidth
+        variant='outlined'
+        size='small'
+        style={{ fontSize: '14px' }}
+        defaultCountry='us'
+        label={label}
+        onChange={onChange}
+      />
+    );
 
 
   if (variant === 'inline') {
@@ -59,7 +84,7 @@ const renderField = resolvedProps => {
   return <span key={label}>{val}</span>;
 };
 
-export const BasePegaDxilMyTwoColumnForm: Story = (args) => {
+export const BasePegaDxilMyTwoColumnForm: Story = args => {
   const [firstName, setFirstName] = useState('John');
   const [middleName, setMiddleName] = useState('');
   const [lastName, setLastName] = useState('Joe');
@@ -140,7 +165,6 @@ export const BasePegaDxilMyTwoColumnForm: Story = (args) => {
         const changeValue = date && date.isValid() ? date.toISOString() : null;
         setServiceDate(changeValue);
       }
-
     }
   ];
   const props = {
@@ -179,10 +203,12 @@ export const BasePegaDxilMyTwoColumnForm: Story = (args) => {
     return props.getPConnect().createComponent(child);
   });
 
-  return <PegaDxilMyTwoColumnForm {...props} {...args} >
-        {regionAChildren}
-        {regionBChildren}
-      </PegaDxilMyTwoColumnForm>;
+  return (
+    <PegaDxilMyTwoColumnForm {...props} {...args}>
+      {regionAChildren}
+      {regionBChildren}
+    </PegaDxilMyTwoColumnForm>
+  );
 };
 
 BasePegaDxilMyTwoColumnForm.args = {};

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

@@ -21,7 +21,6 @@ const useStyles = makeStyles(() => ({
 // Duplicated runtime code from React SDK
 
 // props passed in combination of props from property panel (config.json) and run time props from Constellation
-// any default values in config.pros should be set in defaultProps at bottom of this file
 export default function PegaDxilMyTwoColumnForm(props: PropsWithChildren<PegaDxilMyTwoColumnFormProps>) {
   const classes = useStyles();
 
@@ -50,14 +49,14 @@ export default function PegaDxilMyTwoColumnForm(props: PropsWithChildren<PegaDxi
 
   return (
     <StyledPegaDxilMyTwoColumnFormWrapper>
-    <Grid container spacing={1}>
-      <Grid item xs={12} md={aSize} className={classes.colStyles}>
-        {childrenToRender[0]}
+      <Grid container spacing={1}>
+        <Grid item xs={12} md={aSize} className={classes.colStyles}>
+          {childrenToRender[0]}
+        </Grid>
+        <Grid item xs={12} md={bSize} className={classes.colStyles}>
+          {childrenToRender[1]}
+        </Grid>
       </Grid>
-      <Grid item xs={12} md={bSize} className={classes.colStyles}>
-        {childrenToRender[1]}
-      </Grid>
-    </Grid>
     </StyledPegaDxilMyTwoColumnFormWrapper>
   );
-}
+}

package/tests/assets/sdk-r/components/createAll/custom-sdk/widget/Pega_DXIL_MyCaseWidget/demo.stories.tsx

@@ -5,14 +5,14 @@ import { historyData } from './mock';
 
 window.PCore = {
   ...window.PCore,
-  getDataApiUtils: () : any => {
+  getDataApiUtils: (): any => {
     return {
       getData: (): any => {
         return new Promise(resolve => {
           resolve(historyData);
         });
       }
-    }
+    };
   },
   getConstants: (): any => {
     return {
@@ -21,7 +21,7 @@ window.PCore = {
       }
     };
   }
-}
+};
 
 const meta: Meta<typeof PegaDxilMyCaseWidget> = {
   title: 'PegaDxilMyCaseWidget',
@@ -32,7 +32,7 @@ const meta: Meta<typeof PegaDxilMyCaseWidget> = {
 export default meta;
 type Story = StoryObj<typeof PegaDxilMyCaseWidget>;
 
-export const BasePegaDxilMyCaseWidget: Story = (args) => {
+export const BasePegaDxilMyCaseWidget: Story = args => {
 
   const props = {
     label: 'Case history',
@@ -50,14 +50,26 @@ export const BasePegaDxilMyCaseWidget: Story = (args) => {
         },
         getActionsApi: () => {
           return {
-            updateFieldValue: () => {/* nothing */},
-            triggerFieldChange: () => {/* nothing */}
+            updateFieldValue: () => {
+              /* nothing */
+            },
+            triggerFieldChange: () => {
+              /* nothing */
+            }
           };
         },
-        ignoreSuggestion: () => {/* nothing */},
-        acceptSuggestion: () => {/* nothing */},
-        setInheritedProps: () => {/* nothing */},
-        resolveConfigProps: () => {/* nothing */}
+        ignoreSuggestion: () => {
+          /* nothing */
+        },
+        acceptSuggestion: () => {
+          /* nothing */
+        },
+        setInheritedProps: () => {
+          /* nothing */
+        },
+        resolveConfigProps: () => {
+          /* nothing */
+        }
       };
     }
   };

package/tests/assets/sdk-r/components/createAll/custom-sdk/widget/Pega_DXIL_MyCaseWidget/index.tsx

@@ -39,7 +39,6 @@ const StyledTableCell = withStyles((theme: Theme) =>
 // Case widget example is a "history table"
 
 // props passed in combination of props from property panel (config.json) and run time props from Constellation
-// any default values in config.pros should be set in defaultProps at bottom of this file
 export default function PegaDxilMyCaseWidget(props: PegaDxilMyCaseWidgetProps) {
   const { getPConnect } = props;
   const thePConn = getPConnect();
@@ -164,15 +163,15 @@ export default function PegaDxilMyCaseWidget(props: PegaDxilMyCaseWidgetProps) {
   }
 
   return (
-  <StyledPegaDxilMyCaseWidgetWrapper>
-    <div id='CaseHistory'>
-      <TableContainer>
-        <Table>
-          <TableHead>{getTableHeader()}</TableHead>
-          <TableBody>{getTableData()}</TableBody>
-        </Table>
-      </TableContainer>
-    </div>
+    <StyledPegaDxilMyCaseWidgetWrapper>
+      <div id='CaseHistory'>
+        <TableContainer>
+          <Table>
+            <TableHead>{getTableHeader()}</TableHead>
+            <TableBody>{getTableData()}</TableBody>
+          </Table>
+        </TableContainer>
+      </div>
     </StyledPegaDxilMyCaseWidgetWrapper>
   );
-}
+}

package/tests/assets/sdk-r/components/createAll/custom-sdk/widget/Pega_DXIL_MyPageCaseWidget/demo.stories.tsx

@@ -14,7 +14,7 @@ window.PCore = {
       }
     };
   }
-}
+};
 
 const meta: Meta<typeof PegaDxilMyPageCaseWidget> = {
   title: 'PegaDxilMyPageCaseWidget',
@@ -25,21 +25,33 @@ const meta: Meta<typeof PegaDxilMyPageCaseWidget> = {
 export default meta;
 type Story = StoryObj<typeof PegaDxilMyPageCaseWidget>;
 
-export const BasePegaDxilMyPageCaseWidget: Story = (args) => {
+export const BasePegaDxilMyPageCaseWidget: Story = args => {
 
   const props = {
     getPConnect: () => {
       return {
         getActionsApi: () => {
           return {
-            updateFieldValue: () => {/* nothing */},
-            triggerFieldChange: () => {/* nothing */}
+            updateFieldValue: () => {
+              /* nothing */
+            },
+            triggerFieldChange: () => {
+              /* nothing */
+            }
           };
         },
-        ignoreSuggestion: () => {/* nothing */},
-        acceptSuggestion: () => {/* nothing */},
-        setInheritedProps: () => {/* nothing */},
-        resolveConfigProps: () => {/* nothing */}
+        ignoreSuggestion: () => {
+          /* nothing */
+        },
+        acceptSuggestion: () => {
+          /* nothing */
+        },
+        setInheritedProps: () => {
+          /* nothing */
+        },
+        resolveConfigProps: () => {
+          /* nothing */
+        }
       };
     }
   };
@@ -49,4 +61,4 @@ export const BasePegaDxilMyPageCaseWidget: Story = (args) => {
 
 BasePegaDxilMyPageCaseWidget.args = {
   ...caseOpConfig
-}
+};

package/tests/assets/sdk-r/components/createAll/custom-sdk/widget/Pega_DXIL_MyPageCaseWidget/index.tsx

@@ -13,13 +13,13 @@ import { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
 
 interface PegaDxilMyPageCaseWidgetProps extends PConnProps {
   // If any, enter additional props that only exist on this component
-    label: string;
-    createDateTime: string;
-    createLabel: string;
-    createOperator: { userName: string; userId: string };
-    updateDateTime: string;
-    updateLabel: string;
-    updateOperator: { userName: string; userId: string };
+  label: string;
+  createDateTime: string;
+  createLabel: string;
+  createOperator: { userName: string; userId: string };
+  updateDateTime: string;
+  updateLabel: string;
+  updateOperator: { userName: string; userId: string };
 }
 
 const useStyles = makeStyles(theme => ({
@@ -38,7 +38,6 @@ const useStyles = makeStyles(theme => ({
 // Page Case Widget example
 
 // props passed in combination of props from property panel (config.json) and run time props from Constellation
-// any default values in config.pros should be set in defaultProps at bottom of this file
 export default function PegaDxilMyPageCaseWidget(props: PegaDxilMyPageCaseWidgetProps) {
   // const componentName = "Operator";
   const classes = useStyles();
@@ -192,31 +191,32 @@ export default function PegaDxilMyPageCaseWidget(props: PegaDxilMyPageCaseWidget
   // End of popover-related
 
   return (
-  <StyledPegaDxilMyPageCaseWidgetWrapper><>
-      <TextField
-        defaultValue={caseOpName}
-        label={caseOpLabel}
-        onClick={showOperatorDetails}
-        InputProps={{
-          readOnly: true,
-          disableUnderline: true,
-          inputProps: { style: { cursor: 'pointer' } }
-        }}
-      />
-      <br />
-      {Utils.generateDateTime(caseTime, 'DateTime-Since')}
-      <Popover
-        id={popoverId}
-        open={popoverOpen}
-        anchorEl={popoverAnchorEl}
-        onClose={handlePopoverClose}
-        anchorOrigin={{ vertical: 'bottom', horizontal: 'center' }}
-        transformOrigin={{ vertical: 'top', horizontal: 'center' }}
-        PaperProps={{ style: { maxWidth: '45ch' } }}
-      >
-        {getPopoverGrid()}
-      </Popover>
-    </>
+    <StyledPegaDxilMyPageCaseWidgetWrapper>
+      <>
+        <TextField
+          defaultValue={caseOpName}
+          label={caseOpLabel}
+          onClick={showOperatorDetails}
+          InputProps={{
+            readOnly: true,
+            disableUnderline: true,
+            inputProps: { style: { cursor: 'pointer' } }
+          }}
+        />
+        <br />
+        {Utils.generateDateTime(caseTime, 'DateTime-Since')}
+        <Popover
+          id={popoverId}
+          open={popoverOpen}
+          anchorEl={popoverAnchorEl}
+          onClose={handlePopoverClose}
+          anchorOrigin={{ vertical: 'bottom', horizontal: 'center' }}
+          transformOrigin={{ vertical: 'top', horizontal: 'center' }}
+          PaperProps={{ style: { maxWidth: '45ch' } }}
+        >
+          {getPopoverGrid()}
+        </Popover>
+      </>
     </StyledPegaDxilMyPageCaseWidgetWrapper>
   );
-}
+}

package/tests/assets/sdk-r/components/createAll/custom-sdk/widget/Pega_DXIL_MyPageWidget/demo.stories.tsx

@@ -12,8 +12,7 @@ const meta: Meta<typeof PegaDxilMyPageWidget> = {
 export default meta;
 type Story = StoryObj<typeof PegaDxilMyPageWidget>;
 
-export const BasePegaDxilMyPageWidget: Story = (args) => {
-  
+export const BasePegaDxilMyPageWidget: Story = args => {
   const props = {
     datasource: configProps.datasource,
     whatsnewlink: configProps.whatsnewlink
@@ -24,5 +23,5 @@ export const BasePegaDxilMyPageWidget: Story = (args) => {
 
 BasePegaDxilMyPageWidget.args = {
   header: configProps.header,
-  description: configProps.description,
-}
+  description: configProps.description
+};

package/tests/assets/sdk-r/components/createAll/custom-sdk/widget/Pega_DXIL_MyPageWidget/index.tsx

@@ -25,7 +25,6 @@ const useStyles = makeStyles(theme => ({
 // Page Widget example is the "App Announcment"
 
 // props passed in combination of props from property panel (config.json) and run time props from Constellation
-// any default values in config.pros should be set in defaultProps at bottom of this file
 export default function PegaDxilMyPageWidget(props: PegaDxilMyPageWidgetProps) {
   const { header = '', description = '', datasource = [], whatsnewlink = '' } = props;
   let details = [];
@@ -42,28 +41,28 @@ export default function PegaDxilMyPageWidget(props: PegaDxilMyPageWidgetProps) {
   };
 
   return (
-  <StyledPegaDxilMyPageWidgetWrapper>
-    <Card title='AppAnnouncement' className={classes.root}>
-      <CardHeader title={<Typography variant='h6'>{header}</Typography>} />
-      <CardContent>
-        <Typography variant='body1' gutterBottom>
-          {description}
-        </Typography>
-        {details.map((itm, idx) => {
-          const theKey = `AppAnn-item-${idx}`;
-          return (
-            <Typography key={theKey} variant='body2'>
-              - {itm}
-            </Typography>
-          );
-        })}
-      </CardContent>
-      <CardActions>
-        <Button color='primary' onClick={handleClick} size='small'>
-          See what&apos;s new
-        </Button>
-      </CardActions>
-    </Card>
+    <StyledPegaDxilMyPageWidgetWrapper>
+      <Card title='AppAnnouncement' className={classes.root}>
+        <CardHeader title={<Typography variant='h6'>{header}</Typography>} />
+        <CardContent>
+          <Typography variant='body1' gutterBottom>
+            {description}
+          </Typography>
+          {details.map((itm, idx) => {
+            const theKey = `AppAnn-item-${idx}`;
+            return (
+              <Typography key={theKey} variant='body2'>
+                - {itm}
+              </Typography>
+            );
+          })}
+        </CardContent>
+        <CardActions>
+          <Button color='primary' onClick={handleClick} size='small'>
+            See what&apos;s new
+          </Button>
+        </CardActions>
+      </Card>
     </StyledPegaDxilMyPageWidgetWrapper>
   );
-}
+}

package/tests/assets/sdk-r/components/createAll/override-sdk/designSystemExtension/FieldGroup/FieldGroup.tsx

@@ -1,12 +1,16 @@
-import { PropsWithChildren } from 'react';
+import { PropsWithChildren, useState } from 'react';
 import Grid from '@material-ui/core/Grid';
 import { makeStyles } from '@material-ui/core/styles';
+import KeyboardArrowRightIcon from '@material-ui/icons/KeyboardArrowRight';
+import KeyboardArrowDownIcon from '@material-ui/icons/KeyboardArrowDown';
 
 // FieldGroupProps is one of the few components that does NOT have getPConnect.
 //  So, no need to extend PConnProps
 interface FieldGroupProps {
   // If any, enter additional props that only exist on this component
-  name: string | object;
+  name?: string;
+  collapsible?: boolean;
+  instructions?: string;
 }
 
 const useStyles = makeStyles(theme => ({
@@ -23,12 +27,22 @@ const useStyles = makeStyles(theme => ({
   },
   fullWidth: {
     width: '100%'
+  },
+  fieldGroupHeader: {
+    display: 'flex',
+    alignItems: 'center',
+    gap: '5px',
+    cursor: collapsible => (collapsible ? 'pointer' : 'auto')
+  },
+  instructionText: {
+    padding: '5px 0'
   }
 }));
 
 export default function FieldGroup(props: PropsWithChildren<FieldGroupProps>) {
-  const { children, name } = props;
-  const classes = useStyles();
+  const { children, name, collapsible = false, instructions } = props;
+  const classes = useStyles(collapsible);
+  const [collapsed, setCollapsed] = useState(false);
 
   const descAndChildren = (
     <Grid container>
@@ -36,15 +50,30 @@ export default function FieldGroup(props: PropsWithChildren<FieldGroupProps>) {
     </Grid>
   );
 
+  const headerClickHandler = () => {
+    setCollapsed(current => !current);
+  };
+
   return (
     <Grid container spacing={4} justifyContent='space-between'>
       <Grid item style={{ width: '100%' }}>
         {name && (
           <div className={classes.fieldMargin}>
-            <b>{props.name}</b>
+            {collapsible ? (
+              <span id='field-group-header' className={classes.fieldGroupHeader} onClick={headerClickHandler}>
+                {collapsed ? <KeyboardArrowRightIcon /> : <KeyboardArrowDownIcon />}
+                <b>{name}</b>
+              </span>
+            ) : (
+              <b>{name}</b>
+            )}
           </div>
         )}
-        {descAndChildren}
+        {instructions && instructions !== 'none' && (
+          // eslint-disable-next-line react/no-danger
+          <div key='instructions' className={classes.instructionText} dangerouslySetInnerHTML={{ __html: instructions }} />
+        )}
+        {!collapsed && descAndChildren}
       </Grid>
     </Grid>
   );

package/tests/assets/sdk-r/components/createAll/override-sdk/field/Checkbox/Checkbox.tsx

@@ -10,6 +10,8 @@ interface CheckboxProps extends Omit<PConnFieldProps, 'value'> {
   value?: boolean;
   // eslint-disable-next-line react/no-unused-prop-types
   caption?: string;
+  trueLabel?: string;
+  falseLabel?: string;
 }
 
 export default function CheckboxComponent(props: CheckboxProps) {
@@ -18,7 +20,6 @@ export default function CheckboxComponent(props: CheckboxProps) {
 
   const {
     getPConnect,
-    label,
     value = false,
     readOnly,
     testId,
@@ -28,7 +29,9 @@ export default function CheckboxComponent(props: CheckboxProps) {
     helperText,
     validatemessage,
     displayMode,
-    hideLabel
+    hideLabel,
+    trueLabel,
+    falseLabel
   } = props;
   const helperTextToDisplay = validatemessage || helperText;
 
@@ -45,11 +48,11 @@ export default function CheckboxComponent(props: CheckboxProps) {
   }, [value]);
 
   if (displayMode === 'LABELS_LEFT') {
-    return <FieldValueList name={hideLabel ? '' : label} value={value.toString()} />;
+    return <FieldValueList name={hideLabel ? '' : caption} value={value ? trueLabel : falseLabel} />;
   }
 
   if (displayMode === 'STACKED_LARGE_VAL') {
-    return <FieldValueList name={hideLabel ? '' : label} value={value.toString()} variant='stacked' />;
+    return <FieldValueList name={hideLabel ? '' : caption} value={value ? trueLabel : falseLabel} variant='stacked' />;
   }
 
   const handleChange = event => {

package/tests/assets/sdk-r/components/createAll/override-sdk/field/Group/Group.tsx

@@ -0,0 +1,37 @@
+import { ReactElement, useMemo } from 'react';
+import { Grid } from '@material-ui/core';
+import FieldGroup from '@pega/react-sdk-components/lib/components/designSystemExtension/FieldGroup';
+import { PConnFieldProps } from '@pega/react-sdk-components/lib/types/PConnProps';
+
+interface GroupProps extends PConnFieldProps {
+  children: ReactElement[];
+  heading: string;
+  showHeading: boolean;
+  instructions?: string;
+  collapsible: boolean;
+  type: string;
+}
+
+export default function Group(props: GroupProps) {
+  const { children, heading, showHeading, instructions, collapsible, displayMode, type } = props;
+
+  const isReadOnly = displayMode === 'LABELS_LEFT';
+
+  const content = useMemo(() => {
+    return (
+      <Grid container spacing={2}>
+        {children?.map(child => (
+          <Grid item xs={12} key={child.key}>
+            {child}
+          </Grid>
+        ))}
+      </Grid>
+    );
+  }, [children, type, isReadOnly]);
+
+  return (
+    <FieldGroup name={showHeading ? heading : undefined} collapsible={collapsible} instructions={instructions}>
+      {content}
+    </FieldGroup>
+  );
+}

package/tests/assets/sdk-r/components/createAll/override-sdk/field/Group/config-ext.json

@@ -0,0 +1,8 @@
+{
+    "componentKey": "Group",
+    "name": "Group",
+    "label": "Field Group",
+    "description": "Field Group",
+    "type": "Group",
+    "properties": []
+}

package/tests/assets/sdk-r/components/createAll/override-sdk/field/Group/index.tsx

@@ -0,0 +1 @@
+export { default } from './Group';