@pega/sdk 0.0.3 → 0.0.4

package/templates/react-sdk-reference/src/components/designSystemExtension/CaseSummaryFields/CaseSummaryFields.tsx

@@ -43,14 +43,14 @@ export default function CaseSummaryFields(props: CaseSummaryFieldsProps) {
         default:
           return (
             <TextField
-              variant='standard'
-              value='---'
+              variant="standard"
+              value="---"
               label={field.config.label}
               slotProps={{
                 input: {
                   readOnly: true,
-                  disableUnderline: true
-                }
+                  disableUnderline: true,
+                },
               }}
             />
           );
@@ -64,14 +64,14 @@ export default function CaseSummaryFields(props: CaseSummaryFieldsProps) {
       case 'dropdown':
         return (
           <TextField
-            variant='standard'
+            variant="standard"
             value={field.config.value}
             label={field.config.label}
             slotProps={{
               input: {
                 readOnly: true,
-                disableUnderline: true
-              }
+                disableUnderline: true,
+              },
             }}
           />
         );
@@ -83,14 +83,14 @@ export default function CaseSummaryFields(props: CaseSummaryFieldsProps) {
 
         return (
           <TextField
-            variant='standard'
+            variant="standard"
             value={fieldValue}
             label={fieldLabel}
             slotProps={{
               input: {
                 readOnly: true,
-                disableUnderline: true
-              }
+                disableUnderline: true,
+              },
             }}
           />
         );
@@ -99,15 +99,15 @@ export default function CaseSummaryFields(props: CaseSummaryFieldsProps) {
       case 'status':
         return (
           <TextField
-            variant='standard'
-            className='psdk-csf-status-style'
+            variant="standard"
+            className="psdk-csf-status-style"
             value={field.config.value}
             label={field.config.label}
             slotProps={{
               input: {
                 readOnly: true,
-                disableUnderline: true
-              }
+                disableUnderline: true,
+              },
             }}
           />
         );
@@ -117,15 +117,15 @@ export default function CaseSummaryFields(props: CaseSummaryFieldsProps) {
         return (
           <a href={`tel:${displayPhone}`}>
             <TextField
-              variant='standard'
+              variant="standard"
               value={field.config.value}
               label={field.config.label}
               slotProps={{
                 input: {
                   readOnly: true,
                   disableUnderline: true,
-                  inputProps: { style: { cursor: 'pointer' } }
-                }
+                  inputProps: { style: { cursor: 'pointer' } },
+                },
               }}
             />
           </a>
@@ -137,15 +137,15 @@ export default function CaseSummaryFields(props: CaseSummaryFieldsProps) {
         return (
           <a href={`mailto:${displayEmail}`}>
             <TextField
-              variant='standard'
+              variant="standard"
               value={field.config.value}
               label={field.config.label}
               slotProps={{
                 input: {
                   readOnly: true,
                   disableUnderline: true,
-                  inputProps: { style: { cursor: 'pointer' } }
-                }
+                  inputProps: { style: { cursor: 'pointer' } },
+                },
               }}
             />
           </a>
@@ -157,20 +157,22 @@ export default function CaseSummaryFields(props: CaseSummaryFieldsProps) {
         const theDateFormatInfo = getDateFormatInfo();
         // console.log(`theDateFormatInfo: ${theDateFormatInfo}`);
         const theFormat =
-          fieldTypeLower === 'datetime' ? `${theDateFormatInfo.dateFormatStringLong} hh:mm a` : theDateFormatInfo.dateFormatStringLong;
+          fieldTypeLower === 'datetime'
+            ? `${theDateFormatInfo.dateFormatStringLong} hh:mm a`
+            : theDateFormatInfo.dateFormatStringLong;
 
         return (
           <TextField
-            variant='standard'
+            variant="standard"
             value={format(field.config.value, field.type, {
-              format: theFormat
+              format: theFormat,
             })}
             label={field.config.label}
             slotProps={{
               input: {
                 readOnly: true,
-                disableUnderline: true
-              }
+                disableUnderline: true,
+              },
             }}
           />
         );
@@ -180,14 +182,14 @@ export default function CaseSummaryFields(props: CaseSummaryFieldsProps) {
         const theCurrencyOptions = getCurrencyOptions(field.config?.currencyISOCode);
         return (
           <TextField
-            variant='standard'
+            variant="standard"
             value={format(field.config.value, field.type, theCurrencyOptions)}
             label={field.config.label}
             slotProps={{
               input: {
                 readOnly: true,
-                disableUnderline: true
-              }
+                disableUnderline: true,
+              },
             }}
           />
         );
@@ -197,14 +199,14 @@ export default function CaseSummaryFields(props: CaseSummaryFieldsProps) {
       case 'userreference':
         return (
           <TextField
-            variant='standard'
+            variant="standard"
             value={format(field.config.value, field.type)}
             label={field.config.label}
             slotProps={{
               input: {
                 readOnly: true,
-                disableUnderline: true
-              }
+                disableUnderline: true,
+              },
             }}
           />
         );
@@ -245,7 +247,7 @@ export default function CaseSummaryFields(props: CaseSummaryFieldsProps) {
   if (showStatus && theFields?.[1].type !== 'status') {
     const oStatus = {
       type: 'status',
-      config: { value: status, label: 'Status' }
+      config: { value: status, label: 'Status' },
     };
 
     const count = theFieldsModifiable.length;
@@ -263,7 +265,7 @@ export default function CaseSummaryFields(props: CaseSummaryFieldsProps) {
   }
 
   return (
-    <Grid container className='psdk-case-summary-fields'>
+    <Grid container className="psdk-case-summary-fields">
       {theFieldsAsGridItems}
     </Grid>
   );

package/templates/react-sdk-reference/src/components/designSystemExtension/DetailsFields/DetailsFields.tsx

@@ -49,17 +49,13 @@ export default function DetailsFields(props: DetailsFieldsProps) {
     configObj.config.readOnly = true;
     configObj.config.displayMode = 'DISPLAY_ONLY';
     const propToUse = { ...thePConn.getInheritedProps() };
-    configObj.config.label =
-      theCompType === 'reference' ? propToUse?.label : label;
+    configObj.config.label = theCompType === 'reference' ? propToUse?.label : label;
     fieldComponents.push({
       type: theCompType,
       label,
       value: (
         <React.Fragment key={index}>
-          {createElement(
-            PConnectComponent,
-            thePConn.getReferencedViewPConnect(),
-          )}
+          {createElement(PConnectComponent, thePConn.getReferencedViewPConnect())}
         </React.Fragment>
       ),
     });
@@ -70,11 +66,7 @@ export default function DetailsFields(props: DetailsFieldsProps) {
 
     return (
       <Grid size={{ xs: 6 }} key={keyVal}>
-        <Typography
-          variant='body2'
-          component='span'
-          className={`${classes.fieldLabel}`}
-        >
+        <Typography variant="body2" component="span" className={`${classes.fieldLabel}`}>
           {dispValue}
         </Typography>
       </Grid>
@@ -108,11 +100,7 @@ export default function DetailsFields(props: DetailsFieldsProps) {
 
     return (
       <Grid size={{ xs: 6 }} key={keyVal}>
-        <Typography
-          variant='body2'
-          component='span'
-          className={classes.fieldValue}
-        >
+        <Typography variant="body2" component="span" className={classes.fieldValue}>
           {formattedValue}
         </Typography>
       </Grid>
@@ -122,11 +110,7 @@ export default function DetailsFields(props: DetailsFieldsProps) {
   function getGridItem(field: any, keyVal: string) {
     return (
       <Grid size={{ xs: 12 }} key={keyVal}>
-        <Typography
-          variant='body2'
-          component='span'
-          className={classes.fieldValue}
-        >
+        <Typography variant="body2" component="span" className={classes.fieldValue}>
           {field?.value}
         </Typography>
       </Grid>
@@ -140,12 +124,7 @@ export default function DetailsFields(props: DetailsFieldsProps) {
       }
       if (isValidElement(field?.value)) {
         return (
-          <Grid
-            container
-            spacing={1}
-            style={{ padding: '4px 0px' }}
-            key={index}
-          >
+          <Grid container spacing={1} style={{ padding: '4px 0px' }} key={index}>
             {getGridItem(field, `${index}-item`)}
           </Grid>
         );

package/templates/react-sdk-reference/src/components/designSystemExtension/FieldGroup/FieldGroup.tsx

@@ -13,30 +13,30 @@ interface FieldGroupProps {
   instructions?: string;
 }
 
-const useStyles = makeStyles(theme => ({
+const useStyles = makeStyles((theme) => ({
   root: {
     marginRight: theme.spacing(1),
     marginLeft: theme.spacing(1),
     marginTop: theme.spacing(1),
-    marginBottom: theme.spacing(1)
+    marginBottom: theme.spacing(1),
   },
   fieldMargin: {
     paddingTop: theme.spacing(1),
     paddingBottom: theme.spacing(1),
-    marginTop: theme.spacing(1)
+    marginTop: theme.spacing(1),
   },
   fullWidth: {
-    width: '100%'
+    width: '100%',
   },
   fieldGroupHeader: {
     display: 'flex',
     alignItems: 'center',
     gap: '5px',
-    cursor: collapsible => (collapsible ? 'pointer' : 'auto')
+    cursor: (collapsible) => (collapsible ? 'pointer' : 'auto'),
   },
   instructionText: {
-    padding: '5px 0'
-  }
+    padding: '5px 0',
+  },
 }));
 
 export default function FieldGroup(props: PropsWithChildren<FieldGroupProps>) {
@@ -51,16 +51,16 @@ export default function FieldGroup(props: PropsWithChildren<FieldGroupProps>) {
   );
 
   const headerClickHandler = () => {
-    setCollapsed(current => !current);
+    setCollapsed((current) => !current);
   };
 
   return (
-    <Grid container spacing={4} justifyContent='space-between'>
+    <Grid container spacing={4} justifyContent="space-between">
       <Grid style={{ width: '100%' }}>
         {name && (
           <div className={classes.fieldMargin}>
             {collapsible ? (
-              <span id='field-group-header' className={classes.fieldGroupHeader} onClick={headerClickHandler}>
+              <span id="field-group-header" className={classes.fieldGroupHeader} onClick={headerClickHandler}>
                 {collapsed ? <KeyboardArrowRightIcon /> : <KeyboardArrowDownIcon />}
                 <b>{name}</b>
               </span>
@@ -70,7 +70,11 @@ export default function FieldGroup(props: PropsWithChildren<FieldGroupProps>) {
           </div>
         )}
         {instructions && instructions !== 'none' && (
-          <div key='instructions' className={classes.instructionText} dangerouslySetInnerHTML={{ __html: instructions }} />
+          <div
+            key="instructions"
+            className={classes.instructionText}
+            dangerouslySetInnerHTML={{ __html: instructions }}
+          />
         )}
         {!collapsed && descAndChildren}
       </Grid>

package/templates/react-sdk-reference/src/components/designSystemExtension/FieldGroupList/FieldGroupList.tsx

@@ -20,24 +20,24 @@ export default function FieldGroupList(props: FieldGroupListProps) {
   }
 
   return (
-    <Grid container spacing={4} justifyContent='space-between'>
+    <Grid container spacing={4} justifyContent="space-between">
       <Grid style={{ width: '100%' }}>
         <Grid container spacing={1}>
-          {props.items.map(item => (
+          {props.items.map((item) => (
             <Grid key={item.name} style={{ width: '100%' }}>
               <b>{item.name}</b>
               {props.onDelete && (
                 <button
-                  type='button'
+                  type="button"
                   style={{ float: 'right' }}
-                  className='psdk-utility-button'
+                  className="psdk-utility-button"
                   id={`delete-row-${item.id}`}
-                  aria-label='Delete Row'
+                  aria-label="Delete Row"
                   onClick={() => {
                     props.onDelete(item.id);
                   }}
                 >
-                  <img className='psdk-utility-card-action-svg-icon' src={menuIconOverride$} />
+                  <img className="psdk-utility-card-action-svg-icon" src={menuIconOverride$} />
                 </button>
               )}
               {item.children}
@@ -47,7 +47,7 @@ export default function FieldGroupList(props: FieldGroupListProps) {
             </Grid>
           ))}
           {props.onAdd && (
-            <Link onClick={props.onAdd} style={{ cursor: 'pointer' }} underline='hover'>
+            <Link onClick={props.onAdd} style={{ cursor: 'pointer' }} underline="hover">
               +Add
             </Link>
           )}

package/templates/react-sdk-reference/src/components/designSystemExtension/FieldValueList/FieldValueList.tsx

@@ -12,26 +12,26 @@ interface FieldValueListProps {
   isHtml?: boolean;
 }
 
-const useStyles = makeStyles(theme => ({
+const useStyles = makeStyles((theme) => ({
   root: {
     marginRight: theme.spacing(1),
     marginLeft: theme.spacing(1),
     marginTop: theme.spacing(1),
-    marginBottom: theme.spacing(1)
+    marginBottom: theme.spacing(1),
   },
   fieldLabel: {
     fontWeight: 400,
-    color: theme.palette.text.secondary
+    color: theme.palette.text.secondary,
   },
   fieldValue: {
-    color: theme.palette.text.primary
+    color: theme.palette.text.primary,
   },
   noPaddingTop: {
-    paddingTop: '0 !important'
+    paddingTop: '0 !important',
   },
   noPaddingBottom: {
-    paddingBottom: '0 !important'
-  }
+    paddingBottom: '0 !important',
+  },
 }));
 
 function formatItemValue(value) {
@@ -51,8 +51,11 @@ export default function FieldValueList(props: FieldValueListProps) {
 
   function getGridItemLabel() {
     return (
-      <Grid size={{ xs: variant === 'stacked' ? 12 : 4 }} className={variant === 'stacked' ? classes.noPaddingBottom : ''}>
-        <Typography variant='body2' component='span' className={`${classes.fieldLabel}`}>
+      <Grid
+        size={{ xs: variant === 'stacked' ? 12 : 4 }}
+        className={variant === 'stacked' ? classes.noPaddingBottom : ''}
+      >
+        <Typography variant="body2" component="span" className={`${classes.fieldLabel}`}>
           {name}
         </Typography>
       </Grid>
@@ -63,11 +66,14 @@ export default function FieldValueList(props: FieldValueListProps) {
     const formattedValue = formatItemValue(value);
 
     return (
-      <Grid size={{ xs: variant === 'stacked' || !name ? 12 : 8 }} className={variant === 'stacked' ? classes.noPaddingTop : ''}>
+      <Grid
+        size={{ xs: variant === 'stacked' || !name ? 12 : 8 }}
+        className={variant === 'stacked' ? classes.noPaddingTop : ''}
+      >
         {isHtml ? (
           <div dangerouslySetInnerHTML={{ __html: formattedValue }} />
         ) : (
-          <Typography variant={variant === 'stacked' ? 'h6' : 'body2'} component='span' className={classes.fieldValue}>
+          <Typography variant={variant === 'stacked' ? 'h6' : 'body2'} component="span" className={classes.fieldValue}>
             {formattedValue}
           </Typography>
         )}
@@ -76,7 +82,7 @@ export default function FieldValueList(props: FieldValueListProps) {
   }
 
   return (
-    <Grid container spacing={4} justifyContent='space-between'>
+    <Grid container spacing={4} justifyContent="space-between">
       {name ? getGridItemLabel() : null}
       {getGridItemValue()}
     </Grid>

package/templates/react-sdk-reference/src/components/designSystemExtension/Operator/Operator.tsx

@@ -22,15 +22,15 @@ interface OperatorProps extends PConnProps {
   displayLabel?: any;
 }
 
-const useStyles = makeStyles(theme => ({
+const useStyles = makeStyles((theme) => ({
   root: {
     padding: theme.spacing(1),
-    margin: theme.spacing(1)
+    margin: theme.spacing(1),
   },
   popover: {
     padding: theme.spacing(1),
-    margin: theme.spacing(1)
-  }
+    margin: theme.spacing(1),
+  },
 }));
 
 export default function Operator(props: OperatorProps) {
@@ -80,17 +80,19 @@ export default function Operator(props: OperatorProps) {
           {
             id: 'pyPosition',
             name: localizedVal('Position', localeCategory),
-            value: res.data.pyOperatorInfo.pyPosition ? res.data.pyOperatorInfo.pyPosition : fillerString
+            value: res.data.pyOperatorInfo.pyPosition ? res.data.pyOperatorInfo.pyPosition : fillerString,
           },
           {
             id: 'pyOrganization',
             name: localizedVal('Organization', localeCategory),
-            value: res.data.pyOperatorInfo.pyOrganization ? res.data.pyOperatorInfo.pyOrganization : fillerString
+            value: res.data.pyOperatorInfo.pyOrganization ? res.data.pyOperatorInfo.pyOrganization : fillerString,
           },
           {
             id: 'ReportToUserName',
             name: localizedVal('Reports to', localeCategory),
-            value: res.data.pyOperatorInfo.pyReportToUserName ? res.data.pyOperatorInfo.pyReportToUserName : fillerString
+            value: res.data.pyOperatorInfo.pyReportToUserName
+              ? res.data.pyOperatorInfo.pyReportToUserName
+              : fillerString,
           },
           {
             id: 'pyTelephone',
@@ -99,7 +101,7 @@ export default function Operator(props: OperatorProps) {
               <a href={`tel:${res.data.pyOperatorInfo.pyTelephone}`}>{res.data.pyOperatorInfo.pyTelephone}</a>
             ) : (
               fillerString
-            )
+            ),
           },
           {
             id: 'pyEmailAddress',
@@ -108,39 +110,39 @@ export default function Operator(props: OperatorProps) {
               <a href={`mailto:${res.data.pyOperatorInfo.pyEmailAddress}`}>{res.data.pyOperatorInfo.pyEmailAddress}</a>
             ) : (
               fillerString
-            )
-          }
+            ),
+          },
         ];
       } else {
         console.log(
-          `Operator: PCore.getUserApi().getOperatorDetails(${caseOpId}); returned empty res.data.pyOperatorInfo.pyUserName - adding default`
+          `Operator: PCore.getUserApi().getOperatorDetails(${caseOpId}); returned empty res.data.pyOperatorInfo.pyUserName - adding default`,
         );
         fields = [
           {
             id: 'pyPosition',
             name: localizedVal('Position', localeCategory),
-            value: fillerString
+            value: fillerString,
           },
           {
             id: 'pyOrganization',
             name: localizedVal('Organization', localeCategory),
-            value: fillerString
+            value: fillerString,
           },
           {
             id: 'ReportToUserName',
             name: localizedVal('Reports to', localeCategory),
-            value: fillerString
+            value: fillerString,
           },
           {
             id: 'pyTelephone',
             name: localizedVal('Telephone', localeCategory),
-            value: fillerString
+            value: fillerString,
           },
           {
             id: 'pyEmailAddress',
             name: localizedVal('Email address', localeCategory),
-            value: fillerString
-          }
+            value: fillerString,
+          },
         ];
       }
       // Whatever the fields are, update the component's popoverFields
@@ -163,17 +165,17 @@ export default function Operator(props: OperatorProps) {
     return (
       <Grid container className={classes.popover} spacing={1}>
         <Grid size={{ xs: 12 }}>
-          <Typography variant='h6'>{caseOpName}</Typography>
+          <Typography variant="h6">{caseOpName}</Typography>
         </Grid>
-        {popoverFields.map(field => {
+        {popoverFields.map((field) => {
           return (
             <React.Fragment key={field.id}>
               <Grid container size={{ xs: 12 }} spacing={1}>
                 <Grid size={{ xs: 6 }}>
-                  <Typography variant='caption'>{field.name}</Typography>
+                  <Typography variant="caption">{field.name}</Typography>
                 </Grid>
                 <Grid size={{ xs: 6 }}>
-                  <Typography variant='subtitle2'>{field.value}</Typography>
+                  <Typography variant="subtitle2">{field.value}</Typography>
                 </Grid>
               </Grid>
             </React.Fragment>
@@ -188,7 +190,7 @@ export default function Operator(props: OperatorProps) {
   return (
     <>
       <TextField
-        variant='standard'
+        variant="standard"
         defaultValue={caseOpName}
         label={caseOpLabel}
         onClick={showOperatorDetails}
@@ -196,8 +198,8 @@ export default function Operator(props: OperatorProps) {
           input: {
             readOnly: true,
             disableUnderline: true,
-            inputProps: { style: { cursor: 'pointer' } }
-          }
+            inputProps: { style: { cursor: 'pointer' } },
+          },
         }}
       />
       <br />
@@ -210,7 +212,7 @@ export default function Operator(props: OperatorProps) {
         anchorOrigin={{ vertical: 'bottom', horizontal: 'center' }}
         transformOrigin={{ vertical: 'top', horizontal: 'center' }}
         slotProps={{
-          paper: { style: { maxWidth: '45ch' } }
+          paper: { style: { maxWidth: '45ch' } },
         }}
       >
         {getPopoverGrid()}

package/templates/react-sdk-reference/src/components/designSystemExtension/Pulse/Pulse.tsx

@@ -8,13 +8,13 @@ interface PulseProps {
   // If any, enter additional props that only exist on this component
 }
 
-const useStyles = makeStyles(theme => ({
+const useStyles = makeStyles((theme) => ({
   root: {
     marginTop: theme.spacing(1),
     marginBottom: theme.spacing(1),
     borderLeft: '6px solid',
-    borderLeftColor: theme.palette.primary.light
-  }
+    borderLeftColor: theme.palette.primary.light,
+  },
 }));
 
 export default function Pulse(props: PropsWithChildren<PulseProps>) {
@@ -24,7 +24,7 @@ export default function Pulse(props: PropsWithChildren<PulseProps>) {
 
   return (
     <Card className={classes.root}>
-      <CardHeader title={<Typography variant='h6'>Pulse</Typography>} />
+      <CardHeader title={<Typography variant="h6">Pulse</Typography>} />
       <CardContent>
         <Typography>Pulse</Typography>
       </CardContent>