@pega/sdk 0.0.1

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

@@ -0,0 +1,270 @@
+import { useState, useEffect } from 'react';
+import isDeepEqual from 'fast-deep-equal/react';
+import Grid from '@mui/material/Grid';
+import TextField from '@mui/material/TextField';
+
+import { getDateFormatInfo } from '../../helpers/date-format-utils';
+import { getCurrencyOptions } from '../../field/Currency/currency-utils';
+import { getComponentFromRegistry } from '@pega/sdk-react';
+
+import './CaseSummaryFields.css';
+
+import { format } from '../../helpers/formatters';
+
+// CaseSummaryFields is one of the few components that does NOT have getPConnect.
+//  So, no need to extend PConnProps
+interface CaseSummaryFieldsProps {
+  // If any, enter additional props that only exist on this component
+  status?: string;
+  showStatus?: boolean;
+  theFields: any[] | any | never;
+}
+
+export default function CaseSummaryFields(props: CaseSummaryFieldsProps) {
+  // Get emitted components from map (so we can get any override that may exist)
+  const Operator = getComponentFromRegistry('Operator');
+
+  const { status, showStatus, theFields } = props;
+
+  const [theFieldsToRender, setFieldsToRender] = useState([]);
+  const [theFieldsAsGridItems, setFieldsAsGridItems] = useState<any[]>([]);
+
+  function getFieldValue(field: any): any {
+    const fieldTypeLower = field.type.toLowerCase();
+
+    if (field.config.value === null || field.config.value === '') {
+      // Special handling for missing value
+
+      switch (fieldTypeLower) {
+        case 'caseoperator':
+          return <Operator {...field.config} />;
+          break;
+
+        default:
+          return (
+            <TextField
+              variant='standard'
+              value='---'
+              label={field.config.label}
+              slotProps={{
+                input: {
+                  readOnly: true,
+                  disableUnderline: true
+                }
+              }}
+            />
+          );
+      }
+    }
+
+    switch (fieldTypeLower) {
+      case 'textinput':
+      case 'decimal':
+      case 'integer':
+      case 'dropdown':
+        return (
+          <TextField
+            variant='standard'
+            value={field.config.value}
+            label={field.config.label}
+            slotProps={{
+              input: {
+                readOnly: true,
+                disableUnderline: true
+              }
+            }}
+          />
+        );
+
+      case 'checkbox': {
+        const { caption, label, value, trueLabel, falseLabel } = field.config;
+        const fieldLabel = label || caption;
+        const fieldValue = value ? trueLabel : falseLabel;
+
+        return (
+          <TextField
+            variant='standard'
+            value={fieldValue}
+            label={fieldLabel}
+            slotProps={{
+              input: {
+                readOnly: true,
+                disableUnderline: true
+              }
+            }}
+          />
+        );
+      }
+
+      case 'status':
+        return (
+          <TextField
+            variant='standard'
+            className='psdk-csf-status-style'
+            value={field.config.value}
+            label={field.config.label}
+            slotProps={{
+              input: {
+                readOnly: true,
+                disableUnderline: true
+              }
+            }}
+          />
+        );
+
+      case 'phone': {
+        const displayPhone = field.config.value !== '' ? field.config.value : '---';
+        return (
+          <a href={`tel:${displayPhone}`}>
+            <TextField
+              variant='standard'
+              value={field.config.value}
+              label={field.config.label}
+              slotProps={{
+                input: {
+                  readOnly: true,
+                  disableUnderline: true,
+                  inputProps: { style: { cursor: 'pointer' } }
+                }
+              }}
+            />
+          </a>
+        );
+      }
+
+      case 'email': {
+        const displayEmail = format(field.config.value, field.type);
+        return (
+          <a href={`mailto:${displayEmail}`}>
+            <TextField
+              variant='standard'
+              value={field.config.value}
+              label={field.config.label}
+              slotProps={{
+                input: {
+                  readOnly: true,
+                  disableUnderline: true,
+                  inputProps: { style: { cursor: 'pointer' } }
+                }
+              }}
+            />
+          </a>
+        );
+      }
+
+      case 'date':
+      case 'datetime': {
+        const theDateFormatInfo = getDateFormatInfo();
+        // console.log(`theDateFormatInfo: ${theDateFormatInfo}`);
+        const theFormat =
+          fieldTypeLower === 'datetime' ? `${theDateFormatInfo.dateFormatStringLong} hh:mm a` : theDateFormatInfo.dateFormatStringLong;
+
+        return (
+          <TextField
+            variant='standard'
+            value={format(field.config.value, field.type, {
+              format: theFormat
+            })}
+            label={field.config.label}
+            slotProps={{
+              input: {
+                readOnly: true,
+                disableUnderline: true
+              }
+            }}
+          />
+        );
+      }
+
+      case 'currency': {
+        const theCurrencyOptions = getCurrencyOptions(field.config?.currencyISOCode);
+        return (
+          <TextField
+            variant='standard'
+            value={format(field.config.value, field.type, theCurrencyOptions)}
+            label={field.config.label}
+            slotProps={{
+              input: {
+                readOnly: true,
+                disableUnderline: true
+              }
+            }}
+          />
+        );
+      }
+
+      case 'boolean':
+      case 'userreference':
+        return (
+          <TextField
+            variant='standard'
+            value={format(field.config.value, field.type)}
+            label={field.config.label}
+            slotProps={{
+              input: {
+                readOnly: true,
+                disableUnderline: true
+              }
+            }}
+          />
+        );
+
+      case 'caseoperator':
+        return <Operator {...field.config} />;
+
+      default:
+        return (
+          <span>
+            {field.type.toLowerCase()} {field.config.value}
+          </span>
+        );
+    }
+  }
+
+  // Whenever theFieldsToRender changes, update theFieldsAsGridItems that's used during render
+  useEffect(() => {
+    const arGridItems = theFieldsToRender?.map((field: any) => {
+      // display the field when either visibility property doesn't exist or is true(if exists)
+      if (field.config.visibility === undefined || field.config.visibility === true) {
+        return (
+          <Grid size={{ xs: 6 }} key={field.config.label}>
+            {getFieldValue(field)}
+          </Grid>
+        );
+      }
+
+      return null;
+    });
+    setFieldsAsGridItems(arGridItems);
+  }, [theFieldsToRender]);
+
+  const theFieldsModifiable = theFields;
+
+  // Special Case: if showStatus is true, splice the status value to be 2nd in theFields
+  //  if it's not already there
+  if (showStatus && theFields?.[1].type !== 'status') {
+    const oStatus = {
+      type: 'status',
+      config: { value: status, label: 'Status' }
+    };
+
+    const count = theFieldsModifiable.length;
+    if (count < 2) {
+      theFieldsModifiable.push(oStatus);
+    } else {
+      theFieldsModifiable.splice(1, 0, oStatus);
+    }
+  }
+
+  // At this point, we know what fields we want to render...
+  //  So, update our state if it's changed
+  if (!isDeepEqual(theFieldsToRender, theFieldsModifiable)) {
+    setFieldsToRender(theFieldsModifiable);
+  }
+
+  return (
+    <Grid container className='psdk-case-summary-fields'>
+      {theFieldsAsGridItems}
+    </Grid>
+  );
+}

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

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

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

@@ -0,0 +1,164 @@
+import React, { createElement, isValidElement } from 'react';
+import Grid from '@mui/material/Grid';
+import Typography from '@mui/material/Typography';
+import makeStyles from '@mui/styles/makeStyles';
+
+import { PConnectComponent } from '@pega/sdk-react';
+import { format } from '../../helpers/formatters';
+
+// DetailsFields is one of the few components that does NOT have getPConnect.
+//  So, no need to extend PConnProps
+interface DetailsFieldsProps {
+  // If any, enter additional props that only exist on this component
+  fields: any[];
+}
+
+const useStyles = makeStyles((theme) => ({
+  root: {
+    paddingRight: theme.spacing(1),
+    paddingLeft: theme.spacing(1),
+    paddingTop: theme.spacing(1),
+    paddingBottom: theme.spacing(1),
+    marginRight: theme.spacing(1),
+    marginLeft: theme.spacing(1),
+    marginTop: theme.spacing(1),
+    marginBottom: theme.spacing(1),
+  },
+  fieldLabel: {
+    display: 'block',
+    fontWeight: 400,
+    color: theme.palette.text.secondary,
+  },
+  fieldValue: {
+    fontWeight: 400,
+    color: theme.palette.text.primary,
+  },
+}));
+
+export default function DetailsFields(props: DetailsFieldsProps) {
+  // const componentName = "DetailsFields";
+  const { fields = [] } = props;
+  const classes = useStyles();
+  const fieldComponents: any[] = [];
+
+  fields?.forEach((field, index) => {
+    const thePConn = field.getPConnect();
+    const theCompType = thePConn.getComponentName().toLowerCase();
+    const { label } = thePConn.getConfigProps();
+    const configObj = thePConn?.getReferencedView();
+    configObj.config.readOnly = true;
+    configObj.config.displayMode = 'DISPLAY_ONLY';
+    const propToUse = { ...thePConn.getInheritedProps() };
+    configObj.config.label =
+      theCompType === 'reference' ? propToUse?.label : label;
+    fieldComponents.push({
+      type: theCompType,
+      label,
+      value: (
+        <React.Fragment key={index}>
+          {createElement(
+            PConnectComponent,
+            thePConn.getReferencedViewPConnect(),
+          )}
+        </React.Fragment>
+      ),
+    });
+  });
+
+  function getGridItemLabel(field: any, keyVal: string) {
+    const dispValue = field.label;
+
+    return (
+      <Grid size={{ xs: 6 }} key={keyVal}>
+        <Typography
+          variant='body2'
+          component='span'
+          className={`${classes.fieldLabel}`}
+        >
+          {dispValue}
+        </Typography>
+      </Grid>
+    );
+  }
+
+  function formatItemValue(inField: any) {
+    const { type, value } = inField;
+    let formattedVal = value;
+
+    switch (type) {
+      case 'date':
+        formattedVal = format(value, type);
+        break;
+
+      default:
+        // No match means we return the value as we received it
+        break;
+    }
+
+    // Finally, if the value is undefined or an empty string, we want to display it as "---"
+    if (formattedVal === undefined || formattedVal === '') {
+      formattedVal = '---';
+    }
+
+    return formattedVal;
+  }
+
+  function getGridItemValue(field: any, keyVal: string) {
+    const formattedValue = formatItemValue(field);
+
+    return (
+      <Grid size={{ xs: 6 }} key={keyVal}>
+        <Typography
+          variant='body2'
+          component='span'
+          className={classes.fieldValue}
+        >
+          {formattedValue}
+        </Typography>
+      </Grid>
+    );
+  }
+
+  function getGridItem(field: any, keyVal: string) {
+    return (
+      <Grid size={{ xs: 12 }} key={keyVal}>
+        <Typography
+          variant='body2'
+          component='span'
+          className={classes.fieldValue}
+        >
+          {field?.value}
+        </Typography>
+      </Grid>
+    );
+  }
+
+  function getGridItems() {
+    const gridItems: any[] = fieldComponents.map((field, index) => {
+      if (field?.type === 'reference') {
+        return field?.value;
+      }
+      if (isValidElement(field?.value)) {
+        return (
+          <Grid
+            container
+            spacing={1}
+            style={{ padding: '4px 0px' }}
+            key={index}
+          >
+            {getGridItem(field, `${index}-item`)}
+          </Grid>
+        );
+      }
+      return (
+        <Grid container spacing={1} style={{ padding: '4px 0px' }} key={index}>
+          {getGridItemLabel(field, `${index}-label`)}
+          {getGridItemValue(field, `${index}-value`)}
+        </Grid>
+      );
+    });
+    return gridItems;
+  }
+
+  return <>{getGridItems()}</>;
+}

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

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

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

@@ -0,0 +1,79 @@
+import { type PropsWithChildren, useState } from 'react';
+import Grid from '@mui/material/Grid';
+import makeStyles from '@mui/styles/makeStyles';
+import KeyboardArrowRightIcon from '@mui/icons-material/KeyboardArrowRight';
+import KeyboardArrowDownIcon from '@mui/icons-material/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;
+  collapsible?: boolean;
+  instructions?: string;
+}
+
+const useStyles = makeStyles(theme => ({
+  root: {
+    marginRight: theme.spacing(1),
+    marginLeft: theme.spacing(1),
+    marginTop: theme.spacing(1),
+    marginBottom: theme.spacing(1)
+  },
+  fieldMargin: {
+    paddingTop: theme.spacing(1),
+    paddingBottom: theme.spacing(1),
+    marginTop: theme.spacing(1)
+  },
+  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, collapsible = false, instructions } = props;
+  const classes = useStyles(collapsible);
+  const [collapsed, setCollapsed] = useState(false);
+
+  const descAndChildren = (
+    <Grid container>
+      <div className={classes.fullWidth}>{children}</div>
+    </Grid>
+  );
+
+  const headerClickHandler = () => {
+    setCollapsed(current => !current);
+  };
+
+  return (
+    <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}>
+                {collapsed ? <KeyboardArrowRightIcon /> : <KeyboardArrowDownIcon />}
+                <b>{name}</b>
+              </span>
+            ) : (
+              <b>{name}</b>
+            )}
+          </div>
+        )}
+        {instructions && instructions !== 'none' && (
+          <div key='instructions' className={classes.instructionText} dangerouslySetInnerHTML={{ __html: instructions }} />
+        )}
+        {!collapsed && descAndChildren}
+      </Grid>
+    </Grid>
+  );
+}

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

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

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

@@ -0,0 +1,58 @@
+import Grid from '@mui/material/Grid';
+import Divider from '@mui/material/Divider';
+import Link from '@mui/material/Link';
+
+import { Utils } from '../../helpers/utils';
+
+// FieldGroupList is one of the few components that does NOT have getPConnect.
+//  So, no need to extend PConnProps
+interface FieldGroupListProps {
+  // If any, enter additional props that only exist on this component
+  items: any[] | any;
+  onDelete: any;
+  onAdd: any;
+}
+
+export default function FieldGroupList(props: FieldGroupListProps) {
+  let menuIconOverride$ = 'trash';
+  if (menuIconOverride$) {
+    menuIconOverride$ = Utils.getImageSrc(menuIconOverride$, Utils.getSDKStaticConentUrl());
+  }
+
+  return (
+    <Grid container spacing={4} justifyContent='space-between'>
+      <Grid style={{ width: '100%' }}>
+        <Grid container spacing={1}>
+          {props.items.map(item => (
+            <Grid key={item.name} style={{ width: '100%' }}>
+              <b>{item.name}</b>
+              {props.onDelete && (
+                <button
+                  type='button'
+                  style={{ float: 'right' }}
+                  className='psdk-utility-button'
+                  id={`delete-row-${item.id}`}
+                  aria-label='Delete Row'
+                  onClick={() => {
+                    props.onDelete(item.id);
+                  }}
+                >
+                  <img className='psdk-utility-card-action-svg-icon' src={menuIconOverride$} />
+                </button>
+              )}
+              {item.children}
+              <br />
+              {props.onAdd && <Divider />}
+              <br />
+            </Grid>
+          ))}
+          {props.onAdd && (
+            <Link onClick={props.onAdd} style={{ cursor: 'pointer' }} underline='hover'>
+              +Add
+            </Link>
+          )}
+        </Grid>
+      </Grid>
+    </Grid>
+  );
+}

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

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

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

@@ -0,0 +1,84 @@
+import Grid from '@mui/material/Grid';
+import Typography from '@mui/material/Typography';
+import makeStyles from '@mui/styles/makeStyles';
+
+// FieldValueList is one of the few components that does NOT have getPConnect.
+//  So, no need to extend PConnProps
+interface FieldValueListProps {
+  // If any, enter additional props that only exist on this component
+  name?: string;
+  value: any;
+  variant?: string;
+  isHtml?: boolean;
+}
+
+const useStyles = makeStyles(theme => ({
+  root: {
+    marginRight: theme.spacing(1),
+    marginLeft: theme.spacing(1),
+    marginTop: theme.spacing(1),
+    marginBottom: theme.spacing(1)
+  },
+  fieldLabel: {
+    fontWeight: 400,
+    color: theme.palette.text.secondary
+  },
+  fieldValue: {
+    color: theme.palette.text.primary
+  },
+  noPaddingTop: {
+    paddingTop: '0 !important'
+  },
+  noPaddingBottom: {
+    paddingBottom: '0 !important'
+  }
+}));
+
+function formatItemValue(value) {
+  let formattedVal = value;
+
+  // if the value is undefined or an empty string, we want to display it as "---"
+  if (formattedVal === undefined || formattedVal === '') {
+    formattedVal = '---';
+  }
+
+  return formattedVal;
+}
+
+export default function FieldValueList(props: FieldValueListProps) {
+  const { name, value, variant = 'inline', isHtml = false } = props;
+  const classes = useStyles();
+
+  function getGridItemLabel() {
+    return (
+      <Grid size={{ xs: variant === 'stacked' ? 12 : 4 }} className={variant === 'stacked' ? classes.noPaddingBottom : ''}>
+        <Typography variant='body2' component='span' className={`${classes.fieldLabel}`}>
+          {name}
+        </Typography>
+      </Grid>
+    );
+  }
+
+  function getGridItemValue() {
+    const formattedValue = formatItemValue(value);
+
+    return (
+      <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}>
+            {formattedValue}
+          </Typography>
+        )}
+      </Grid>
+    );
+  }
+
+  return (
+    <Grid container spacing={4} justifyContent='space-between'>
+      {name ? getGridItemLabel() : null}
+      {getGridItemValue()}
+    </Grid>
+  );
+}

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

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