@pega/dx-component-builder-sdk 0.8.1 → 0.8.3

package/tests/assets/components/SDK-React/create/override-sdk/designSystemExtension/FieldGroup/FieldGroup.tsx

@@ -0,0 +1,55 @@
+import React 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
+  children: Array<any> | any,
+  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: FieldGroupProps) {
+  const { children, name } = props;
+  const classes = useStyles();
+
+  const descAndChildren = (
+    <Grid container>
+      <div className={classes.fullWidth}>{children}</div>
+    </Grid>
+  );
+
+  return (
+    <React.Fragment>
+      <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>
+    </React.Fragment>
+  );
+};

package/tests/assets/components/SDK-React/create/override-sdk/designSystemExtension/FieldGroup/index.tsx

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

package/tests/assets/components/SDK-React/create/override-sdk/designSystemExtension/FieldGroupList/FieldGroupList.tsx

@@ -0,0 +1,63 @@
+import React from 'react';
+
+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: Array<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}`}
+                  onClick={() => {
+                    props.onDelete(item.id);
+                  }}
+                >
+                  <img className='psdk-utility-card-action-svg-icon' src={menuIconOverride$}></img>
+                </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/components/SDK-React/create/override-sdk/designSystemExtension/FieldGroupList/index.tsx

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

package/tests/assets/components/SDK-React/create/override-sdk/designSystemExtension/FieldValueList/FieldValueList.tsx

@@ -0,0 +1,96 @@
+import React from 'react';
+
+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: string,
+  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 (
+    <React.Fragment>
+      <Grid container spacing={4} justifyContent='space-between'>
+        {getGridItemLabel()}
+        {getGridItemValue()}
+      </Grid>
+    </React.Fragment>
+  );
+};

package/tests/assets/components/SDK-React/create/override-sdk/designSystemExtension/FieldValueList/index.tsx

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

package/tests/assets/components/SDK-React/create/override-sdk/designSystemExtension/Operator/Operator.tsx

@@ -0,0 +1,205 @@
+import React, {useState} from "react";
+import TextField from '@material-ui/core/TextField';
+import Popover from '@material-ui/core/Popover';
+import Grid from '@material-ui/core/Grid';
+import Typography from '@material-ui/core/Typography';
+
+import { makeStyles } from '@material-ui/core/styles';
+
+import Utils from '@pega/react-sdk-components/lib/components/helpers/utils';
+
+// Operator is one of the few components that does NOT have getPConnect.
+//  So, no need to extend PConnProps
+interface OperatorProps{
+  // If any, enter additional props that only exist on this component
+  caseOpConfig: {
+    label: string,
+    createDateTime: string,
+    createLabel: string,
+    createOperator: { userName: string, userId: string },
+    updateDateTime: string,
+    updateLabel: string,
+    updateOperator: { userName: string, userId: string }
+  }
+}
+
+
+
+const useStyles = makeStyles((theme) => ({
+  root: {
+    padding: theme.spacing(1),
+    margin: theme.spacing(1),
+  },
+  popover: {
+    padding: theme.spacing(1),
+    margin: theme.spacing(1),
+  }
+}));
+
+export default function Operator(props: OperatorProps) {
+  // const componentName = "Operator";
+  const { caseOpConfig } = props;
+  const classes = useStyles();
+
+  const fieldLabel = caseOpConfig.label.toLowerCase();
+  let caseOpLabel = "---";
+  let caseOpName = "---";
+  let caseOpId = "";
+  let caseTime = "";
+
+  if (fieldLabel === "create operator") {
+    caseOpLabel = caseOpConfig.createLabel;
+    caseOpName = caseOpConfig.createOperator.userName;
+    caseTime = caseOpConfig.createDateTime;
+    caseOpId = caseOpConfig.createOperator.userId;
+  } else if (fieldLabel === "update operator") {
+    caseOpLabel = caseOpConfig.updateLabel;
+    caseOpName = caseOpConfig.updateOperator.userName;
+    caseTime = caseOpConfig.updateDateTime;
+    caseOpId = caseOpConfig.updateOperator.userId;
+  }
+
+  // Popover-related
+  const [popoverAnchorEl, setPopoverAnchorEl] = useState(null);
+  const [popoverFields, setPopoverFields] = useState<Array<any>>([]);
+
+  const popoverOpen = Boolean(popoverAnchorEl);
+  const popoverId = popoverOpen ? 'operator-details-popover' : undefined;
+
+  const handlePopoverClose = (() => {
+    setPopoverAnchorEl(null);
+  })
+
+  function showOperatorDetails(event) {
+
+    const operatorPreviewPromise = PCore.getUserApi().getOperatorDetails(caseOpId);
+    const localizedVal = PCore.getLocaleUtils().getLocaleValue;
+    const localeCategory = 'Operator';
+
+    operatorPreviewPromise.then((res) => {
+      const fillerString = "---";
+      let fields: any = [];
+      if (
+        res.data &&
+        res.data.pyOperatorInfo &&
+        res.data.pyOperatorInfo.pyUserName
+      ) {
+        fields = [
+          {
+            id: "pyPosition",
+            name: localizedVal("Position", localeCategory),
+            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
+          },
+          {
+            id: "ReportToUserName",
+            name: localizedVal('Reports to', localeCategory),
+            value: res.data.pyOperatorInfo.pyReportToUserName ? res.data.pyOperatorInfo.pyReportToUserName : fillerString
+          },
+          {
+            id: "pyTelephone",
+            name: localizedVal('Telephone', localeCategory),
+            value: res.data.pyOperatorInfo.pyTelephone ? <a href={`tel:${res.data.pyOperatorInfo.pyTelephone}`}>{res.data.pyOperatorInfo.pyTelephone}</a> : fillerString
+          },
+          {
+            id: "pyEmailAddress",
+            name: localizedVal('Email address', localeCategory),
+            value: res.data.pyOperatorInfo.pyEmailAddress ? <a href={`mailto:${res.data.pyOperatorInfo.pyEmailAddress}`}>{res.data.pyOperatorInfo.pyEmailAddress}</a> : fillerString
+          }
+        ];
+      } else {
+        // eslint-disable-next-line no-console
+        console.log(`Operator: PCore.getUserApi().getOperatorDetails(${caseOpId}); returned empty res.data.pyOperatorInfo.pyUserName - adding default`);
+        fields = [
+          {
+            id: "pyPosition",
+            name: localizedVal("Position", localeCategory),
+            value: fillerString
+          },
+          {
+            id: "pyOrganization",
+            name: localizedVal("Organization", localeCategory),
+            value: fillerString
+          },
+          {
+            id: "ReportToUserName",
+            name: localizedVal('Reports to', localeCategory),
+            value: fillerString
+          },
+          {
+            id: "pyTelephone",
+            name: localizedVal('Telephone', localeCategory),
+            value: fillerString
+          },
+          {
+            id: "pyEmailAddress",
+            name: localizedVal('Email address', localeCategory),
+            value: fillerString
+          }
+        ];
+      }
+      // Whatever the fields are, update the component's popoverFields
+      setPopoverFields(fields);
+    });
+
+    setPopoverAnchorEl(event.currentTarget);
+  }
+
+  function getPopoverGrid() {
+    // return popoverFields.map((field) => {
+    //   return <div className={classes.popover}>{field.name}: {field.value}</div>
+    // })
+
+    if (popoverFields.length === 0) {
+      return;
+    }
+
+    // There are fields, so build the grid.
+    return <Grid container className={classes.popover} spacing={1}>
+      <Grid item xs={12}><Typography variant="h6">{caseOpName}</Typography></Grid>
+      {popoverFields.map((field) => {
+        return <React.Fragment key={field.id}>
+          <Grid container item xs={12} spacing={1}>
+            <Grid item xs={6}><Typography variant="caption">{field.name}</Typography></Grid>
+            <Grid item xs={6}><Typography variant="subtitle2">{field.value}</Typography></Grid>
+          </Grid>
+        </React.Fragment>
+      })}
+    </Grid>
+
+  }
+
+  // End of popover-related
+
+  return <React.Fragment>
+      <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>
+    </React.Fragment>;
+
+}

package/tests/assets/components/SDK-React/create/override-sdk/designSystemExtension/Operator/index.tsx

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

package/tests/assets/components/SDK-React/create/override-sdk/designSystemExtension/Pulse/Pulse.tsx

@@ -0,0 +1,35 @@
+import React from "react";
+import { Card, CardContent, CardHeader, Typography } from "@material-ui/core";
+import { makeStyles } from '@material-ui/core/styles';
+
+// Pulse is one of the few components that does NOT have getPConnect.
+//  So, no need to extend PConnProps
+interface PulseProps {
+  // If any, enter additional props that only exist on this component
+  children?: Array<any>
+}
+
+
+const useStyles = makeStyles((theme) => ({
+  root: {
+    marginTop: theme.spacing(1),
+    marginBottom: theme.spacing(1),
+    borderLeft: "6px solid",
+    borderLeftColor: theme.palette.primary.light
+  },
+}));
+
+export default function Pulse(props: PulseProps) {
+  // eslint-disable-next-line no-unused-vars, @typescript-eslint/no-unused-vars
+  const { children } = props;
+  const classes = useStyles();
+
+  return (
+      <Card className={classes.root}>
+        <CardHeader title={<Typography variant="h6">Pulse</Typography>} />
+        <CardContent>
+          <Typography>Pulse</Typography>
+        </CardContent>
+      </Card>
+    );
+}

package/tests/assets/components/SDK-React/create/override-sdk/designSystemExtension/Pulse/index.tsx

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

package/tests/assets/components/SDK-React/create/override-sdk/designSystemExtension/WssQuickCreate/WssQuickCreate.css

@@ -0,0 +1,40 @@
+.quick-link-ul-list {
+  list-style: none;
+  padding: 0;
+  grid-template-columns: repeat(auto-fill, minmax(min(40ch, 100%), 1fr));
+  display: grid;
+  gap: calc(1rem);
+}
+
+.quick-link-list {
+  background-color: #3f51b5;
+  color: white;
+  border-radius: 8px;
+}
+
+.quick-link-button {
+  text-transform: capitalize !important;
+  font-size: 16px !important;
+  color: white !important;
+  padding: calc(0.5rem * 2) !important;
+  height: 6rem;
+  width: 100%;
+  justify-content: start !important;
+}
+
+.quick-link-icon {
+  width: 1em;
+  height: 1em;
+  flex-shrink: 0;
+  filter: invert(100%);
+}
+
+.quick-link-button-span {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.quick-link-heading {
+  margin-top: 8px;
+}

package/tests/assets/components/SDK-React/create/override-sdk/designSystemExtension/WssQuickCreate/WssQuickCreate.tsx

@@ -0,0 +1,37 @@
+import React from 'react';
+import { Button } from '@material-ui/core';
+import './WssQuickCreate.css';
+
+// WssQuickCreate is one of the few components that does NOT have getPConnect.
+//  So, no need to extend PConnProps
+interface WssQuickCreateProps {
+  // If any, enter additional props that only exist on this component
+  heading: string,
+  actions?: Array<any>
+}
+
+
+export default function WssQuickCreate(props: WssQuickCreateProps) {
+  const { heading, actions } = props;
+
+  return (
+    <div>
+      <h1 id="quick-links-heading" className='quick-link-heading'>{heading}</h1>
+      <ul id="quick-links" className='quick-link-ul-list'>
+        {actions &&
+          actions.map(element => {
+            return (
+            <li className='quick-link-list' key={element.label}>
+              <Button className='quick-link-button' onClick={element.onClick}>
+                <span className='quick-link-button-span'>
+                  {element.icon && <img className='quick-link-icon' src={element.icon}/>}
+                  <span>{element.label}</span>
+                </span>
+              </Button>
+            </li>
+            );
+          })}
+      </ul>
+    </div>
+  );
+}

package/tests/assets/components/SDK-React/create/override-sdk/designSystemExtension/WssQuickCreate/index.tsx

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

package/tests/assets/components/SDK-React/create/override-sdk/designSystemExtension/_designSystemExtension.md

@@ -0,0 +1,6 @@
+# The **override-sdk/designSystemExtension** directory
+
+The **src/components/override-sdk/designSystemExtension** directory contains the code for components that **extend** the design system and for which you want to override the default implementation for use with the **React SDK**.
+
+When you run the **npm run  create** command to override the default implementation of a **design system extension** component, the generated code that you can use
+as a starting point for your component development will be placed in type-specific and component-specific folders in **src/components/override-sdk/designSystemExtension**.