@pega/sdk 0.0.1

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

@@ -0,0 +1,220 @@
+import React, { useState } from 'react';
+import TextField from '@mui/material/TextField';
+import Popover from '@mui/material/Popover';
+import Grid from '@mui/material/Grid';
+import Typography from '@mui/material/Typography';
+import makeStyles from '@mui/styles/makeStyles';
+
+import Utils from '../../helpers/utils';
+import type { PConnProps } from '@pega/sdk-react';
+
+// Operator is one of the few components that does NOT have getPConnect.
+//  So, no need to extend PConnProps
+interface OperatorProps 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 };
+  displayLabel?: any;
+}
+
+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 classes = useStyles();
+
+  const fieldLabel = props?.label?.toLowerCase();
+  const displayLabel = props?.displayLabel?.toLowerCase();
+  let caseOpLabel = '---';
+  let caseOpName = '---';
+  let caseOpId = '';
+  let caseTime = '';
+
+  if (fieldLabel === 'create operator' || displayLabel === 'create operator') {
+    caseOpLabel = props.createLabel;
+    caseOpName = props.createOperator.userName;
+    caseTime = props.createDateTime;
+    caseOpId = props.createOperator.userId;
+  } else if (fieldLabel === 'update operator' || displayLabel === 'update operator') {
+    caseOpLabel = props.updateLabel;
+    caseOpName = props.updateOperator.userName;
+    caseTime = props.updateDateTime;
+    caseOpId = props.updateOperator.userId;
+  }
+
+  // Popover-related
+  const [popoverAnchorEl, setPopoverAnchorEl] = useState(null);
+  const [popoverFields, setPopoverFields] = useState<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: any) => {
+      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 {
+        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 size={{ xs: 12 }}>
+          <Typography variant='h6'>{caseOpName}</Typography>
+        </Grid>
+        {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>
+                </Grid>
+                <Grid size={{ xs: 6 }}>
+                  <Typography variant='subtitle2'>{field.value}</Typography>
+                </Grid>
+              </Grid>
+            </React.Fragment>
+          );
+        })}
+      </Grid>
+    );
+  }
+
+  // End of popover-related
+
+  return (
+    <>
+      <TextField
+        variant='standard'
+        defaultValue={caseOpName}
+        label={caseOpLabel}
+        onClick={showOperatorDetails}
+        slotProps={{
+          input: {
+            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' }}
+        slotProps={{
+          paper: { style: { maxWidth: '45ch' } }
+        }}
+      >
+        {getPopoverGrid()}
+      </Popover>
+    </>
+  );
+}

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

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

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

@@ -0,0 +1,33 @@
+import type { PropsWithChildren } from 'react';
+import { Card, CardContent, CardHeader, Typography } from '@mui/material';
+import makeStyles from '@mui/styles/makeStyles';
+
+// 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
+}
+
+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: PropsWithChildren<PulseProps>) {
+  // eslint-disable-next-line @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/templates/react-sdk-reference/src/components/designSystemExtension/Pulse/index.tsx

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

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

@@ -0,0 +1,201 @@
+import React, { forwardRef } from 'react';
+import { Editor } from '@tinymce/tinymce-react';
+import {
+  FormControl,
+  FormHelperText,
+  InputLabel,
+  useTheme,
+} from '@mui/material';
+import makeStyles from '@mui/styles/makeStyles';
+import {
+  useAfterInitialEffect,
+  useConsolidatedRef,
+  useUID,
+} from '@pega/sdk-react';
+
+const useStyles = makeStyles((theme) => ({
+  fieldLabel: {
+    position: 'relative',
+    transform: 'translate(0, 0px) scale(1)',
+    marginBottom: '5px',
+    color: theme.palette.text.secondary,
+  },
+}));
+
+interface RichTextEditorProps {
+  id?: string;
+  defaultValue: string;
+  label: string;
+  labelHidden: boolean;
+  info: string;
+  testId: string;
+  placeholder: string;
+  disabled: boolean;
+  required: boolean;
+  readOnly: boolean;
+  error: boolean;
+  onBlur: React.EventHandler<any>;
+  onChange: React.EventHandler<any>;
+}
+
+const RichTextEditor = forwardRef(function RichTextEditor(
+  props: RichTextEditorProps,
+  ref,
+) {
+  const theme = useTheme();
+  const classes = useStyles();
+  const uid = useUID();
+  const {
+    id = uid,
+    defaultValue,
+    label,
+    labelHidden,
+    info,
+    testId,
+    placeholder,
+    disabled,
+    required,
+    readOnly,
+    error,
+    onBlur,
+    onChange,
+  } = props;
+
+  const editorRef: any = useConsolidatedRef(ref);
+  let richTextComponent: any = null;
+
+  useAfterInitialEffect(() => {
+    editorRef?.current.mode.set(readOnly || disabled ? 'readonly' : 'design');
+  }, [readOnly, disabled]);
+
+  const filePickerCallback = (cb) => {
+    const input = document.createElement('input');
+    input.setAttribute('type', 'file');
+    input.setAttribute('accept', 'image/*');
+
+    input.addEventListener('change', (e: any) => {
+      const file = e.target.files[0];
+
+      const reader: any = new FileReader();
+      reader.addEventListener('load', () => {
+        /*
+          Note: Now we need to register the blob in TinyMCEs image blob
+          registry. In the next release this part hopefully won't be
+          necessary, as we are looking to handle it internally.
+        */
+        const blobId = `blobid${new Date().getTime()}`;
+        const blobCache = editorRef.current.editorUpload.blobCache;
+        const base64 = reader.result.split(',')[1];
+        const blobInfo = blobCache.create(blobId, file, base64);
+        blobCache.add(blobInfo);
+
+        /* call the callback and populate the Title field with the file name */
+        cb(blobInfo.blobUri(), { title: file.name });
+      });
+      reader.readAsDataURL(file);
+    });
+
+    input.click();
+  };
+
+  if (readOnly) {
+    const value = defaultValue || '--';
+
+    richTextComponent = (
+      <div
+        key={id}
+        id={id}
+        className='readonly-richtext-editor'
+        dangerouslySetInnerHTML={{ __html: value }}
+      />
+    );
+  } else {
+    richTextComponent = (
+      <Editor
+        tinymceScriptSrc='tinymce/tinymce.min.js'
+        onInit={(_evt, editor) => {
+          editorRef.current = editor;
+        }}
+        id={id}
+        initialValue={defaultValue}
+        disabled={disabled}
+        init={{
+          skin: theme.palette.mode === 'dark' ? 'oxide-dark' : 'oxide',
+          // ...other TinyMCE config...
+          content_style: `
+            body {
+              font-family: ${theme.typography.fontFamily};
+              font-size: ${theme.typography.fontSize}px;
+              color: ${theme.palette.text.primary};
+              background: ${theme.palette.background.paper};
+            }
+            a { color: ${theme.palette.primary.main}; }
+            h1, h2, h3, h4, h5, h6 { color: ${theme.palette.text.primary}; font-family: ${theme.typography.fontFamily}; }
+            blockquote { color: ${theme.palette.text.secondary}; border-left: 4px solid ${theme.palette.primary.light}; padding-left: 8px; }
+            ul, ol { color: ${theme.palette.text.primary}; }
+            input, textarea, select {
+              background: ${theme.palette.background.paper};
+              color: ${theme.palette.text.primary};
+              border: 1px solid ${theme.palette.divider};
+              border-radius: 4px;
+              padding: 6px 10px;
+              font-size: 1em;
+              font-family: inherit;
+            }
+            .mce-content-body[data-mce-placeholder]:not(.mce-visualblocks)::before {
+              color: ${theme.palette.text.secondary};
+              opacity: 0.7;
+            }
+            /* Add more styles as needed */
+          `,
+          placeholder,
+          menubar: false,
+          statusbar: false,
+          min_height: 130,
+          plugins: [
+            'lists',
+            'advlist',
+            'autolink',
+            'image',
+            'link',
+            'autoresize',
+          ],
+          autoresize_bottom_margin: 0,
+          toolbar: disabled
+            ? false
+            : 'blocks | bold italic strikethrough | bullist numlist outdent indent | link image',
+          toolbar_location: 'bottom',
+          // content_style: 'body { font-family:Helvetica, Arial,sans-serif; font-size:14px }',
+          branding: false,
+          paste_data_images: true,
+          file_picker_types: 'image',
+          file_picker_callback: filePickerCallback,
+        }}
+        onBlur={onBlur}
+        onEditorChange={onChange}
+      />
+    );
+  }
+
+  return (
+    <FormControl
+      variant='standard'
+      data-test-id={testId}
+      error={error}
+      required={required}
+    >
+      {!labelHidden && (
+        <InputLabel
+          id='demo-simple-select-error-label'
+          className={classes.fieldLabel}
+        >
+          {label}
+        </InputLabel>
+      )}
+      {richTextComponent}
+      {info && <FormHelperText>{info}</FormHelperText>}
+    </FormControl>
+  );
+});
+
+export default RichTextEditor;

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

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

package/templates/react-sdk-reference/src/components/designSystemExtension/WssQuickCreate/WssQuickCreate.css

@@ -0,0 +1,33 @@
+.quick-link-ul-list {
+  list-style: none;
+  padding: 0;
+  grid-template-columns: repeat(auto-fit, minmax(min(20ch, 100%), 1fr));
+  display: grid;
+  gap: calc(1rem);
+}
+
+.quick-link-button {
+  text-transform: capitalize !important;
+  font-size: 16px !important;
+  color: var(--app-text-color) !important;
+  height: 10rem;
+  width: 100%;
+}
+
+.quick-link-icon {
+  flex-shrink: 0;
+  object-fit: contain;
+  width: 3rem;
+  height: 3rem;
+}
+
+.quick-link-button-span {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.quick-link-heading {
+  margin-top: 8px;
+}

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

@@ -0,0 +1,48 @@
+import { Button } from '@mui/material';
+import { makeStyles } from '@mui/styles';
+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?: any[];
+}
+
+const useStyles = makeStyles(theme => ({
+  quickLinkList: {
+    backgroundColor: theme.palette.mode === 'dark' ? 'var(--app-background-color)' : 'var(--link-button-color)',
+    color: 'var(--app-text-color)',
+    borderRadius: '16px',
+    border: '1px solid var(--app-primary-color)'
+  }
+}));
+
+export default function WssQuickCreate(props: WssQuickCreateProps) {
+  const { heading, actions } = props;
+  const classes = useStyles();
+
+  return (
+    <div>
+      <h1 id='quick-links-heading' className='quick-links-heading'>
+        {heading}
+      </h1>
+      <ul id='quick-links' className='quick-link-ul-list'>
+        {actions &&
+          actions.map(element => {
+            return (
+              <li className={classes.quickLinkList} 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/templates/react-sdk-reference/src/components/designSystemExtension/WssQuickCreate/index.tsx

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