@pega/sdk 0.0.1

package/templates/react-sdk-reference/src/components/widget/Followers/Followers.tsx

@@ -0,0 +1,43 @@
+import type { PropsWithChildren } from 'react';
+import { Card, CardContent, CardHeader, Typography } from '@mui/material';
+import makeStyles from '@mui/styles/makeStyles';
+import type { PConnProps } from '@pega/sdk-react';
+
+interface FollowersProps extends PConnProps {
+  // If any, enter additional props that only exist on this component
+}
+
+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)
+  }
+}));
+
+export default function Followers(props: PropsWithChildren<FollowersProps>) {
+  const componentName = 'Followers';
+  // 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' component='div'>
+            {componentName} - <em>unsupported</em>
+          </Typography>
+        }
+      />
+      <CardContent>
+        <Typography>{componentName} content</Typography>
+      </CardContent>
+    </Card>
+  );
+}

package/templates/react-sdk-reference/src/components/widget/Followers/config-ext.json

@@ -0,0 +1,8 @@
+{
+  "name": "Followers",
+  "label": "Followers",
+  "description": "Followers",
+  "type": "Widget",
+  "subtype": "CASE",
+  "properties": []
+}

package/templates/react-sdk-reference/src/components/widget/Followers/index.tsx

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

package/templates/react-sdk-reference/src/components/widget/QuickCreate/QuickCreate.tsx

@@ -0,0 +1,88 @@
+import { useEffect, useState } from 'react';
+import { Utils } from '../../helpers/utils';
+import { getComponentFromRegistry } from '@pega/sdk-react';
+import type { PConnProps } from '@pega/sdk-react';
+
+interface QuickCreateProps extends PConnProps {
+  // If any, enter additional props that only exist on this component
+  heading: string;
+  showCaseIcons: boolean;
+  classFilter: any[];
+}
+
+export default function QuickCreate(props: QuickCreateProps) {
+  // Get emitted components from map (so we can get any override that may exist)
+  const WssQuickCreate = getComponentFromRegistry('WssQuickCreate');
+
+  const { getPConnect, heading, showCaseIcons, classFilter } = props;
+  const pConn = getPConnect();
+  const createCase = className => {
+    pConn
+      .getActionsApi()
+      .createWork(className, {} as any)
+      .catch(error => {
+        console.log('Error in case creation: ', error?.message);
+      });
+  };
+
+  const [quickCreatecases, setCases] = useState([]);
+
+  /* If the classFilter is empty and has no entries - we will default to the default set of case types
+     It will usually come from the envInfo but for Launchpad, this is not populated - instead get the list of cases from the store */
+  useEffect(() => {
+    const cases: any = [];
+    const defaultCases: any = [];
+    const envInfo = PCore.getEnvironmentInfo();
+    if (envInfo?.environmentInfoObject?.pyCaseTypeList) {
+      envInfo.environmentInfoObject.pyCaseTypeList.forEach(casetype => {
+        if (casetype.pyWorkTypeName && casetype.pyWorkTypeImplementationClassName) {
+          defaultCases.push({
+            classname: casetype.pyWorkTypeImplementationClassName,
+            onClick: () => {
+              createCase(casetype.pyWorkTypeImplementationClassName);
+            },
+            ...(showCaseIcons && { icon: Utils.getImageSrc(casetype?.pxIcon, Utils.getSDKStaticConentUrl()) }),
+            label: casetype.pyWorkTypeName
+          });
+        }
+      });
+    } else {
+      const pConnectInAppContext = PCore.createPConnect({
+        options: { context: PCore.getConstants().APP.APP }
+      }).getPConnect();
+      const pyPortalInAppContext = pConnectInAppContext.getValue('pyPortal') as any;
+      pyPortalInAppContext?.pyCaseTypesAvailableToCreate?.forEach(casetype => {
+        if (casetype.pyClassName && casetype.pyLabel) {
+          defaultCases.push({
+            classname: casetype.pyClassName,
+            onClick: () => {
+              createCase(casetype.pyClassName);
+            },
+            ...(showCaseIcons && { icon: Utils.getImageSrc(casetype?.pxIcon, Utils.getSDKStaticConentUrl()) }),
+            label: casetype.pyLabel
+          });
+        }
+      });
+    }
+
+    /* If classFilter is not empty - filter from the list of defaultCases */
+    if (classFilter?.length > 0) {
+      classFilter.forEach(item => {
+        defaultCases.forEach(casetype => {
+          if (casetype.classname === item) {
+            cases.push(casetype);
+          }
+        });
+      });
+      setCases(cases);
+    } else {
+      setCases(defaultCases);
+    }
+  }, []);
+
+  return (
+    <div>
+      <WssQuickCreate heading={heading} actions={quickCreatecases} />
+    </div>
+  );
+}

package/templates/react-sdk-reference/src/components/widget/QuickCreate/config-ext.json

@@ -0,0 +1,9 @@
+{
+  "name": "QuickCreate",
+  "label": "Quick create",
+  "description": "Quick create widget",
+  "type": "Widget",
+  "subtype": "PAGE",
+  "properties": [],
+  "defaultConfig": {}
+}

package/templates/react-sdk-reference/src/components/widget/QuickCreate/index.tsx

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

package/templates/react-sdk-reference/src/components/widget/SummaryItem/SummaryItem.css

@@ -0,0 +1,76 @@
+.psdk-utility {
+  width: 100%;
+  padding: 0.625rem 0rem;
+  text-align: left;
+  border-radius: 0.6125rem;
+  margin: 0.3125rem 0rem;
+}
+
+.psdk-utility-card {
+  display: flex;
+  flex-direction: row;
+  padding: 0.25rem 0rem 0.25rem 0.25rem;
+  margin-bottom: 0.5rem;
+  align-items: center;
+  border: 0.0625rem solid var(--utility-card-border-color);
+  border-radius: calc(0.25rem);
+  min-height: 3rem;
+}
+
+.psdk-utility-card-icon {
+  flex-grow: 1;
+  max-width: 2.813rem;
+  align-content: center;
+  display: flex;
+}
+
+.psdk-utility-card-svg-icon {
+  width: 2.5rem;
+  display: inline-block;
+  filter: var(--svg-color);
+}
+
+.psdk-utility-card-main {
+  flex-grow: 2;
+  margin-left: 5px;
+}
+
+.psdk-utility-card-main-primary-label {
+  font-weight: bold;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  white-space: normal;
+}
+
+.psdk-utility-card-action-svg-icon {
+  width: 1.4rem;
+  display: inline-block;
+  filter: var(--svg-color);
+}
+
+.psdk-utility-button {
+  background: none;
+  border: none;
+  cursor: pointer;
+}
+
+.psdk-utility-action {
+  flex-grow: 1;
+  text-align: right;
+}
+
+.psdk-utility-card-actions-svg-icon {
+  width: 1.4rem;
+  display: inline-block;
+  vertical-align: middle;
+  filter: var(--svg-color);
+}
+
+.psdk-utility-link-button {
+  background: none;
+  border: none;
+  align-items: center;
+  display: flex;
+  padding: 0;
+  color: var(--link-button-color);
+}

package/templates/react-sdk-reference/src/components/widget/SummaryItem/SummaryItem.tsx

@@ -0,0 +1,89 @@
+import { useState } from 'react';
+import { IconButton, Menu, MenuItem } from '@mui/material';
+import MoreVertIcon from '@mui/icons-material/MoreVert';
+import { Utils } from '../../helpers/utils';
+import type { PConnProps } from '@pega/sdk-react';
+
+import './SummaryItem.css';
+
+interface SummaryItemProps extends PConnProps {
+  // If any, enter additional props that only exist on this component
+  menuIconOverride$: string;
+  menuIconOverrideAction$: any;
+  arItems$: any[] | any;
+}
+
+export default function SummaryItem(props: SummaryItemProps) {
+  let imagePath$ = '';
+  let menuIconOverride$;
+  menuIconOverride$ = props.menuIconOverride$;
+  imagePath$ = Utils.getIconPath(Utils.getSDKStaticConentUrl());
+  const item = props.arItems$;
+  const srcImg = `${imagePath$}${item.visual.icon}.svg`;
+  const [anchorEl, setAnchorEl] = useState(null);
+  const open = Boolean(anchorEl);
+  if (menuIconOverride$) {
+    menuIconOverride$ = Utils.getImageSrc(menuIconOverride$, Utils.getSDKStaticConentUrl());
+  }
+
+  function removeAttachment() {
+    props.menuIconOverrideAction$(item);
+  }
+
+  const handleClick = event => {
+    setAnchorEl(event.currentTarget);
+  };
+
+  const handleClose = () => {
+    setAnchorEl(null);
+  };
+
+  return (
+    <div className='psdk-utility-card'>
+      <div className='psdk-utility-card-icon'>
+        <img className='psdk-utility-card-svg-icon' src={srcImg} />
+      </div>
+      <div className='psdk-utility-card-main'>
+        {item.primary.type !== 'URL' && <div className='psdk-utility-card-main-primary-label'>{item.primary.name}</div>}
+        {item.primary.type === 'URL' && (
+          <div className='psdk-utility-card-main-primary-url'>
+            <button type='button' className='psdk-utility-link-button'>
+              {item.primary.name}&nbsp;
+              <img className='psdk-utility-card-actions-svg-icon' src={`${imagePath$}${item.primary.icon}.svg`} />
+            </button>
+          </div>
+        )}
+        {item.secondary.text && <div style={{ color: item.secondary.error ? 'red' : undefined }}>{item.secondary.text}</div>}
+      </div>
+      <div className='psdk-utility-action'>
+        {menuIconOverride$ && (
+          <button type='button' className='psdk-utility-button' aria-label='Delete Attachment' onClick={removeAttachment}>
+            <img className='psdk-utility-card-action-svg-icon' src={menuIconOverride$} />
+          </button>
+        )}
+        {!menuIconOverride$ && (
+          <div>
+            <IconButton
+              id='setting-button'
+              aria-controls={open ? 'file-menu' : undefined}
+              aria-expanded={open ? 'true' : undefined}
+              aria-haspopup='true'
+              onClick={handleClick}
+              size='large'
+            >
+              <MoreVertIcon />
+            </IconButton>
+            <Menu id='file-menu' anchorEl={anchorEl} keepMounted open={Boolean(anchorEl)} onClose={handleClose}>
+              {item.actions &&
+                item.actions.map(option => (
+                  <MenuItem style={{ fontSize: '14px' }} key={option.id || option.text} onClick={option.onClick}>
+                    {option.text}
+                  </MenuItem>
+                ))}
+            </Menu>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}

package/templates/react-sdk-reference/src/components/widget/SummaryItem/index.tsx

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

package/templates/react-sdk-reference/src/components/widget/SummaryList/SummaryList.tsx

@@ -0,0 +1,23 @@
+import { getComponentFromRegistry } from '@pega/sdk-react';
+import type { PConnProps } from '@pega/sdk-react';
+
+interface SummaryListProps extends PConnProps {
+  // If any, enter additional props that only exist on this component
+  arItems$: any[];
+  menuIconOverride$?: string;
+  menuIconOverrideAction$?: any;
+}
+
+export default function SummaryList(props: SummaryListProps) {
+  // Get emitted components from map (so we can get any override that may exist)
+  const SummaryItem = getComponentFromRegistry('SummaryItem');
+
+  const { menuIconOverride$: menuOverride = '' } = props;
+  return (
+    <div>
+      {props.arItems$.map(file => (
+        <SummaryItem key={file.id} menuIconOverride$={menuOverride} arItems$={file} menuIconOverrideAction$={props.menuIconOverrideAction$} />
+      ))}
+    </div>
+  );
+}

package/templates/react-sdk-reference/src/components/widget/SummaryList/index.tsx

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

package/templates/react-sdk-reference/src/components/widget/ToDo/ToDo.css

@@ -0,0 +1,81 @@
+.psdk-display-divider {
+  border-bottom: 0.0625rem solid var(--app-neutral-light-color);
+}
+
+.psdk-todo {
+  padding: 0.5rem;
+}
+
+.psdk-todo-header {
+  display: inline-flex;
+}
+
+.psdk-todo-text {
+  padding: 0.5rem 0.625rem;
+  font-size: 1.1rem;
+  font-weight: bold;
+}
+
+.psdk-assignment-count {
+  background-color: var(--app-primary-light-color);
+  margin: 0.5rem;
+  border-radius: 45%;
+  padding: 0.15rem 0.4rem;
+}
+
+.psdk-todo-id {
+  color: var(--app-primary-color);
+  cursor: pointer;
+}
+
+.psdk-avatar {
+  margin: 0rem;
+  padding: 0rem;
+  min-width: 2.5rem;
+  min-height: 2.5rem;
+  max-width: 2.5rem;
+  max-height: 2.5rem;
+  border-radius: 50%;
+  justify-content: center;
+  align-items: center;
+  text-align: center;
+  display: flex;
+  background: var(--app-primary-color);
+  color: var(--app-text-color);
+  font-weight: bold;
+  font-size: 1.25rem;
+}
+
+.psdk-todo-assignment {
+  display: inline-flex;
+  width: 100%;
+  padding: 0.625rem 0rem;
+}
+
+.psdk-todo-assignment-data {
+  display: inline-flex;
+}
+
+.psdk-todo-assignment-task {
+  color: var(--app-neutral-color);
+}
+
+.psdk-todo-assignment-action {
+  display: inline-flex;
+}
+
+.psdk-todo-card {
+  width: 100%;
+  padding-left: 0.625rem;
+}
+
+.psdk-todo-show-more {
+  width: 100%;
+  text-align: center;
+}
+
+.psdk-todo-avatar-header {
+  display: flex;
+  align-items: center;
+  padding: 16px;
+}