@pega/dx-component-builder-sdk 0.23.10 → 0.23.12

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

@@ -0,0 +1,50 @@
+import Grid from '@material-ui/core/Grid';
+import './Banner.css';
+
+// AlertBanner is one of the few components that does NOT have getPConnect.
+//  So, no need to extend PConnProps
+
+interface BannerProps {
+  // If any, enter additional props that only exist on this component
+  a: any;
+  b: any;
+  banner: {
+    variant: any;
+    backgroundColor: any;
+    title: any;
+    message: any;
+    backgroundImage: any;
+    tintImage: any;
+  };
+  variant: any;
+}
+
+export default function Banner(props: BannerProps) {
+  const { a, b, banner, variant } = props;
+  const { title, message, backgroundImage } = banner;
+  const variantMap = {
+    'two-column': [6, 6],
+    'narrow-wide': [4, 8],
+    'wide-narrow': [8, 4]
+  };
+  return (
+    <div style={{ marginBottom: '2rem' }}>
+      <div className='background-image-style' style={{ backgroundImage: `url(${backgroundImage})` }}>
+        <div className='background-style content'>
+          <div>
+            <h1 className='title'>{title}</h1>
+            <p className='message'>{message}</p>
+          </div>
+        </div>
+      </div>
+      <Grid container item xs={12} className='banner-layout' spacing={1}>
+        <Grid item xs={variantMap[variant][0]} style={{ padding: '1em' }}>
+          {a}
+        </Grid>
+        <Grid item xs={variantMap[variant][1]} style={{ padding: '1em' }}>
+          {b}
+        </Grid>
+      </Grid>
+    </div>
+  );
+}

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

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

package/tests/assets/sdk-r/components/createAll/override-sdk/designSystemExtension/CaseSummaryFields/CaseSummaryFields.css

@@ -0,0 +1,18 @@
+.psdk-csf-status-style {
+  /* background-color: #e9eef3;
+  border-radius: calc(0.25 * 0.5rem);
+  color: #4c5a67; */
+  display: inline-block;
+  font-size: 0.75rem;
+  font-weight: bold;
+  line-height: calc(0.5rem * 2.5);
+  height: calc(0.5rem * 2.5);
+  padding: 0 0.5rem;
+  text-transform: uppercase;
+}
+
+.psdk-case-summary-fields {
+  padding: calc(2 * 0.5rem);
+  display: grid;
+  grid-row-gap: calc(2 * 0.5rem);
+}

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

@@ -0,0 +1,245 @@
+import { useState, useEffect } from 'react';
+import isDeepEqual from 'fast-deep-equal/react';
+import Grid from '@material-ui/core/Grid';
+import TextField from '@material-ui/core/TextField';
+
+import { getDateFormatInfo } from '@pega/react-sdk-components/lib/components/helpers/date-format-utils';
+import { getCurrencyOptions } from '@pega/react-sdk-components/lib/components/field/Currency/currency-utils';
+import { getComponentFromMap } from '@pega/react-sdk-components/lib/bridge/helpers/sdk_component_map';
+
+import './CaseSummaryFields.css';
+
+import { format } from '@pega/react-sdk-components/lib/components/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 = getComponentFromMap('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
+      // eslint-disable-next-line sonarjs/no-small-switch
+      switch (fieldTypeLower) {
+        case 'caseoperator':
+          return <Operator {...field.config} />;
+          break;
+
+        default:
+          return (
+            <TextField
+              value='---'
+              label={field.config.label}
+              InputProps={{
+                readOnly: true,
+                disableUnderline: true
+              }}
+            />
+          );
+      }
+    }
+
+    switch (fieldTypeLower) {
+      case 'textinput':
+      case 'decimal':
+      case 'integer':
+      case 'dropdown':
+        return (
+          <TextField
+            value={field.config.value}
+            label={field.config.label}
+            InputProps={{
+              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
+            value={fieldValue}
+            label={fieldLabel}
+            InputProps={{
+              readOnly: true,
+              disableUnderline: true
+            }}
+          />
+        );
+      }
+
+      case 'status':
+        return (
+          <TextField
+            className='psdk-csf-status-style'
+            value={field.config.value}
+            label={field.config.label}
+            InputProps={{
+              readOnly: true,
+              disableUnderline: true
+            }}
+          />
+        );
+
+      case 'phone': {
+        const displayPhone = field.config.value !== '' ? field.config.value : '---';
+        return (
+          <a href={`tel:${displayPhone}`}>
+            <TextField
+              value={field.config.value}
+              label={field.config.label}
+              InputProps={{
+                readOnly: true,
+                inputProps: {
+                  style: { cursor: 'pointer' },
+                  disableUnderline: true
+                }
+              }}
+            />
+          </a>
+        );
+      }
+
+      case 'email': {
+        const displayEmail = format(field.config.value, field.type);
+        return (
+          <a href={`mailto:${displayEmail}`}>
+            <TextField
+              value={field.config.value}
+              label={field.config.label}
+              InputProps={{
+                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
+            value={format(field.config.value, field.type, {
+              format: theFormat
+            })}
+            label={field.config.label}
+            InputProps={{
+              readOnly: true,
+              disableUnderline: true
+            }}
+          />
+        );
+      }
+
+      case 'currency': {
+        const theCurrencyOptions = getCurrencyOptions(field.config?.currencyISOCode);
+        return (
+          <TextField
+            value={format(field.config.value, field.type, theCurrencyOptions)}
+            label={field.config.label}
+            InputProps={{
+              readOnly: true,
+              disableUnderline: true
+            }}
+          />
+        );
+      }
+
+      case 'boolean':
+      case 'userreference':
+        return (
+          <TextField
+            value={format(field.config.value, field.type)}
+            label={field.config.label}
+            InputProps={{
+              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 item 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/tests/assets/sdk-r/components/createAll/override-sdk/designSystemExtension/CaseSummaryFields/index.tsx

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

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

@@ -0,0 +1,141 @@
+/* eslint-disable react/no-array-index-key */
+import React, { createElement, isValidElement } from 'react';
+import Grid from '@material-ui/core/Grid';
+import Typography from '@material-ui/core/Typography';
+import { makeStyles } from '@material-ui/core/styles';
+
+import createPConnectComponent from '@pega/react-sdk-components/lib/bridge/react_pconnect';
+import { format } from '@pega/react-sdk-components/lib/components/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 = 'LABELS_LEFT';
+    const propToUse = { ...thePConn.getInheritedProps() };
+    configObj.config.label = theCompType === 'reference' ? propToUse?.label : label;
+    fieldComponents.push({
+      type: theCompType,
+      label,
+      value: <React.Fragment key={index}>{createElement(createPConnectComponent(), thePConn.getReferencedViewPConnect())}</React.Fragment>
+    });
+  });
+
+  function getGridItemLabel(field: any, keyVal: string) {
+    const dispValue = field.label;
+
+    return (
+      <Grid item 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;
+
+    // eslint-disable-next-line sonarjs/no-small-switch
+    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 item xs={6} key={keyVal}>
+        <Typography variant='body2' component='span' className={classes.fieldValue}>
+          {formattedValue}
+        </Typography>
+      </Grid>
+    );
+  }
+
+  function getGridItem(field: any, keyVal: string) {
+    return (
+      <Grid item 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/tests/assets/sdk-r/components/createAll/override-sdk/designSystemExtension/DetailsFields/index.tsx

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

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

@@ -0,0 +1,51 @@
+import { PropsWithChildren } from 'react';
+import Grid from '@material-ui/core/Grid';
+import { makeStyles } from '@material-ui/core/styles';
+
+// 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;
+}
+
+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%'
+  }
+}));
+
+export default function FieldGroup(props: PropsWithChildren<FieldGroupProps>) {
+  const { children, name } = props;
+  const classes = useStyles();
+
+  const descAndChildren = (
+    <Grid container>
+      <div className={classes.fullWidth}>{children}</div>
+    </Grid>
+  );
+
+  return (
+    <Grid container spacing={4} justifyContent='space-between'>
+      <Grid item style={{ width: '100%' }}>
+        {name && (
+          <div className={classes.fieldMargin}>
+            <b>{props.name}</b>
+          </div>
+        )}
+        {descAndChildren}
+      </Grid>
+    </Grid>
+  );
+}

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

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

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

@@ -0,0 +1,58 @@
+import Grid from '@material-ui/core/Grid';
+import Divider from '@material-ui/core/Divider';
+import Link from '@material-ui/core/Link';
+
+import { Utils } from '@pega/react-sdk-components/lib/components/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 item style={{ width: '100%' }}>
+        <Grid container spacing={1}>
+          {props.items.map(item => (
+            <Grid item 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' }}>
+              +Add
+            </Link>
+          )}
+        </Grid>
+      </Grid>
+    </Grid>
+  );
+}

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

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

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

@@ -0,0 +1,79 @@
+import Grid from '@material-ui/core/Grid';
+import Typography from '@material-ui/core/Typography';
+import { makeStyles } from '@material-ui/core/styles';
+
+// 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;
+}
+
+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' } = props;
+  const classes = useStyles();
+
+  function getGridItemLabel() {
+    return (
+      <Grid item xs={variant === 'stacked' ? 12 : 6} className={variant === 'stacked' ? classes.noPaddingBottom : ''}>
+        <Typography variant='body2' component='span' className={`${classes.fieldLabel}`}>
+          {name}
+        </Typography>
+      </Grid>
+    );
+  }
+
+  function getGridItemValue() {
+    const formattedValue = formatItemValue(value);
+
+    return (
+      <Grid item xs={variant === 'stacked' ? 12 : 6} className={variant === 'stacked' ? classes.noPaddingTop : ''}>
+        <Typography variant={variant === 'stacked' ? 'h6' : 'body2'} component='span' className={classes.fieldValue}>
+          {formattedValue}
+        </Typography>
+      </Grid>
+    );
+  }
+
+  return (
+    <Grid container spacing={4} justifyContent='space-between'>
+      {getGridItemLabel()}
+      {getGridItemValue()}
+    </Grid>
+  );
+}

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

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