@pega/sdk 0.0.3 → 0.0.4

package/templates/react-sdk-reference/src/components/template/SingleReferenceReadOnly/SingleReferenceReadOnly.tsx

@@ -25,7 +25,7 @@ export default function SingleReferenceReadOnly(props: SingleReferenceReadOnlyPr
     referenceType = '',
     hideLabel = false,
     dataRelationshipContext = null,
-    config
+    config,
   } = props;
 
   const editableComponents = ['AutoComplete', 'SimpleTableSelect', 'Dropdown'];
@@ -36,10 +36,10 @@ export default function SingleReferenceReadOnly(props: SingleReferenceReadOnlyPr
     config.caseID = config.value;
     config.contextPage = `@P .${dataRelationshipContext}`;
     config.resourceParams = {
-      workID: displayAs === 'table' ? config.selectionKey : config.value
+      workID: displayAs === 'table' ? config.selectionKey : config.value,
     };
     config.resourcePayload = {
-      caseClassName: ruleClass
+      caseClassName: ruleClass,
     };
   }
 
@@ -52,17 +52,17 @@ export default function SingleReferenceReadOnly(props: SingleReferenceReadOnlyPr
         displayMode,
         referenceType,
         hideLabel,
-        dataRelationshipContext
-      }
+        dataRelationshipContext,
+      },
     },
     '',
     0,
-    {}
+    {},
   ); // 2nd, 3rd, and 4th args empty string/object/null until typedef marked correctly as optional
 
   return (
     <>
-      <FormControl variant='standard' sx={{ display: 'flex', flexDirection: 'row' }}>
+      <FormControl variant="standard" sx={{ display: 'flex', flexDirection: 'row' }}>
         <FormLabel sx={{ marginRight: '2rem' }}>{label}</FormLabel>
         {component}
       </FormControl>

package/templates/react-sdk-reference/src/components/template/SubTabs/SubTabs.tsx

@@ -30,7 +30,7 @@ export default function SubTabs(props: PropsWithChildren<SubTabsProps>) {
 
   return (
     <TabContext value={currentTabId.toString()}>
-      <Tabs onChange={handleTabClick} value={currentTabId} variant='scrollable'>
+      <Tabs onChange={handleTabClick} value={currentTabId} variant="scrollable">
         {tabItems.map((tab: any) => (
           <Tab key={tab.id} label={tab.name} value={tab.id} />
         ))}

package/templates/react-sdk-reference/src/components/template/SubTabs/tabUtils.ts

@@ -1,5 +1,5 @@
-export const getDeferFriendlyTabs = allTabs => {
-  return allTabs.map(tab => {
+export const getDeferFriendlyTabs = (allTabs) => {
+  return allTabs.map((tab) => {
     const theTabCompConfig = tab.getPConnect().getConfigProps();
     return { type: 'DeferLoad', config: theTabCompConfig };
   });
@@ -10,7 +10,7 @@ export const getVisibleTabs = (allTabs, uuid) => {
   return allTabs.props
     .getPConnect()
     .getChildren()
-    ?.filter(child => {
+    ?.filter((child) => {
       // US-402838: Filter out tab entries if the config object does not contain the visibility attribute or it evaluates to the boolean true,
       const config = child.getPConnect().getConfigProps();
 
@@ -20,7 +20,7 @@ export const getVisibleTabs = (allTabs, uuid) => {
         child.getPConnect().registerAdditionalProps({
           deferLoadId,
           isChildDeferLoad: true,
-          lastUpdateCaseTime: '@P caseInfo.lastUpdateTime'
+          lastUpdateCaseTime: '@P caseInfo.lastUpdateTime',
         });
       }
       index += 1;
@@ -34,18 +34,20 @@ export const getTransientTabs = (availableTabs, currentTabId, tabItems) => {
       const config = child.getPConnect().getConfigProps();
       const tabLabel =
         config.label ||
-        config.inheritedProps?.find(obj => obj.prop === 'label')?.value ||
+        config.inheritedProps?.find((obj) => obj.prop === 'label')?.value ||
         PCore.getLocaleUtils().getLocaleValue('No label specified in config', 'Generic');
       const tabContent = () => {
         if (i.toString() === currentTabId) {
-          return tabItems?.[i.toString()]?.content ? tabItems?.[i.toString()]?.content : child.getPConnect().getComponent();
+          return tabItems?.[i.toString()]?.content
+            ? tabItems?.[i.toString()]?.content
+            : child.getPConnect().getComponent();
         }
         return tabItems?.[i.toString()]?.content;
       };
       return {
         name: tabLabel,
         id: i.toString(),
-        content: tabContent()
+        content: tabContent(),
       };
     }) || []
   );
@@ -69,13 +71,13 @@ export const tabClick = (id, availableTabs, currentTabId, setCurrentTabId, tabIt
 };
 
 export const searchtabsClick = (id, mainTabs, currentTabId, setCurrentTabId) => {
-  const currentTab = mainTabs.find(item => item.id === currentTabId && item.visibility());
+  const currentTab = mainTabs.find((item) => item.id === currentTabId && item.visibility());
   const currentPConn = currentTab?.getPConnect();
   const { deferLoadId } = currentPConn?.getConfigProps() ?? {};
   PCore.getDeferLoadManager().deactivate(deferLoadId, currentPConn.getContextName());
 
   setCurrentTabId(id);
-  const nextActiveTab = mainTabs.find(item => item.id === id && item.visibility());
+  const nextActiveTab = mainTabs.find((item) => item.id === id && item.visibility());
   if (mainTabs && nextActiveTab?.content === null) {
     nextActiveTab.content = nextActiveTab.getPConnect().getComponent();
   }
@@ -86,10 +88,10 @@ export const searchtabsClick = (id, mainTabs, currentTabId, setCurrentTabId) =>
   PCore.getDeferLoadManager().refreshComponent(activeId, nextPConn.getContextName());
 };
 
-export const getTabLabel = tabPConnect => {
+export const getTabLabel = (tabPConnect) => {
   const config = tabPConnect.getConfigProps();
 
-  const label = config.inheritedProps?.find(obj => obj.prop === 'label')?.value;
+  const label = config.inheritedProps?.find((obj) => obj.prop === 'label')?.value;
 
   if (label) {
     return label;

package/templates/react-sdk-reference/src/components/template/TwoColumn/TwoColumn/TwoColumn.tsx

@@ -12,8 +12,8 @@ const useStyles = makeStyles(() => ({
   colStyles: {
     display: 'grid',
     gap: '1rem',
-    alignContent: 'baseline'
-  }
+    alignContent: 'baseline',
+  },
 }));
 
 export default function TwoColumn(props: PropsWithChildren<TwoColumnProps>) {
@@ -35,7 +35,7 @@ export default function TwoColumn(props: PropsWithChildren<TwoColumnProps>) {
   const colAArray = templateCol
     .replaceAll(/[a-z]+/g, '')
     .split(/\s/)
-    .map(itm => Number(itm));
+    .map((itm) => Number(itm));
   const totalCols = colAArray.reduce((v, itm) => itm + v, 0);
   const ratio = 12 / totalCols;
   aSize = (ratio * colAArray[0]) as GridSize;

package/templates/react-sdk-reference/src/components/template/TwoColumn/TwoColumnTab/TwoColumnTab.tsx

@@ -12,8 +12,8 @@ const useStyles = makeStyles(() => ({
   colStyles: {
     display: 'grid',
     gap: '1rem',
-    alignContent: 'baseline'
-  }
+    alignContent: 'baseline',
+  },
 }));
 
 export default function TwoColumnTab(props: PropsWithChildren<TwoColumnTabProps>) {
@@ -35,7 +35,7 @@ export default function TwoColumnTab(props: PropsWithChildren<TwoColumnTabProps>
   const colAArray = templateCol
     .replaceAll(/[a-z]+/g, '')
     .split(/\s/)
-    .map(itm => Number(itm));
+    .map((itm) => Number(itm));
   const totalCols = colAArray.reduce((v, itm) => itm + v, 0);
   const ratio = 12 / totalCols;
   aSize = (ratio * colAArray[0]) as GridSize;

package/templates/react-sdk-reference/src/components/template/WideNarrow/WideNarrow/WideNarrow.tsx

@@ -21,15 +21,15 @@ export default function WideNarrow(props: PropsWithChildren<WideNarrowProps>) {
   return (
     <>
       {children && (children as ReactElement[]).length === 2 && (
-        <div className='psdk-wide-narrow-column'>
-          <div className='psdk-wide-column-column'>{children[0]}</div>
-          <div className='psdk-narrow-column-column'>{children[1]}</div>
+        <div className="psdk-wide-narrow-column">
+          <div className="psdk-wide-column-column">{children[0]}</div>
+          <div className="psdk-narrow-column-column">{children[1]}</div>
         </div>
       )}
       {a && b && (
-        <div className='psdk-wide-narrow-column'>
-          <div className='psdk-wide-column-column'>{a}</div>
-          <div className='psdk-narrow-column-column'>{b}</div>
+        <div className="psdk-wide-narrow-column">
+          <div className="psdk-wide-column-column">{a}</div>
+          <div className="psdk-narrow-column-column">{b}</div>
         </div>
       )}
     </>

package/templates/react-sdk-reference/src/components/template/WideNarrow/WideNarrowDetails/WideNarrowDetails.tsx

@@ -18,12 +18,7 @@ export default function WideNarrowDetails(props: WideNarrowDetailsProps) {
   // Get emitted components from map (so we can get any override that may exist)
   const FieldGroup = getComponentFromRegistry('FieldGroup');
 
-  const {
-    label,
-    showLabel = true,
-    getPConnect,
-    showHighlightedData = false,
-  } = props;
+  const { label, showLabel = true, getPConnect, showHighlightedData = false } = props;
 
   // Get the inherited props from the parent to determine label settings
   const propsToUse = { label, showLabel, ...getPConnect().getInheritedProps() };
@@ -32,26 +27,23 @@ export default function WideNarrowDetails(props: WideNarrowDetailsProps) {
   // in a readonly (display) mode instead of a editable
   getPConnect().setInheritedProp('displayMode', 'DISPLAY_ONLY');
   getPConnect().setInheritedProp('readOnly', true);
-  const children = (getPConnect().getChildren() as any[])?.map(
-    (configObject, index) => {
-      let theConfigObject: object = configObject;
-      if (!theConfigObject) {
-        theConfigObject = {};
-      }
+  const children = (getPConnect().getChildren() as any[])?.map((configObject, index) => {
+    let theConfigObject: object = configObject;
+    if (!theConfigObject) {
+      theConfigObject = {};
+    }
 
-      return createElement(PConnectComponent, {
-        ...theConfigObject,
+    return createElement(PConnectComponent, {
+      ...theConfigObject,
 
-        key: index.toString(),
-      });
-    },
-  );
+      key: index.toString(),
+    });
+  });
 
   // Set up highlighted data to pass in return if is set to show, need raw metadata to pass to createComponent
   let highlightedDataArr = [];
   if (showHighlightedData) {
-    const { highlightedData = [] } = (getPConnect().getRawMetadata() as any)
-      .config;
+    const { highlightedData = [] } = (getPConnect().getRawMetadata() as any).config;
     highlightedDataArr = highlightedData.map((field) => {
       field.config.displayMode = 'STACKED_LARGE_VAL';
 
@@ -75,10 +67,7 @@ export default function WideNarrowDetails(props: WideNarrowDetailsProps) {
       {showHighlightedData && highlightedDataArr.length > 0 && (
         <Grid container spacing={1} style={{ padding: '0 0 1em' }}>
           {highlightedDataArr.map((child, i) => (
-            <Grid
-              size={{ xs: COLUMN_WIDTHS[i] as GridSize }}
-              key={`hf-${i + 1}`}
-            >
+            <Grid size={{ xs: COLUMN_WIDTHS[i] as GridSize }} key={`hf-${i + 1}`}>
               {child}
             </Grid>
           ))}

package/templates/react-sdk-reference/src/components/template/WideNarrow/WideNarrowForm/WideNarrowForm.tsx

@@ -12,9 +12,9 @@ export default function WideNarrowForm(props: PropsWithChildren<WideNarrowFormPr
   return (
     <>
       {children && (children as ReactElement[]).length === 2 && (
-        <div className='psdk-wide-narrow-column'>
-          <div className='psdk-wide-column-column'>{children[0]}</div>
-          <div className='psdk-narrow-column-column'>{children[1]}</div>
+        <div className="psdk-wide-narrow-column">
+          <div className="psdk-wide-column-column">{children[0]}</div>
+          <div className="psdk-narrow-column-column">{children[1]}</div>
         </div>
       )}
     </>

package/templates/react-sdk-reference/src/components/template/WideNarrow/WideNarrowPage/WideNarrowPage.tsx

@@ -22,7 +22,13 @@ export default function WideNarrowPage(props: PropsWithChildren<WideNarrowPagePr
 
   return (
     <div>
-      <WideNarrow a={childArray[0]} b={childArray[1]} title={title} cols={templateCol} icon={icon?.replace('pi pi-', '')} />
+      <WideNarrow
+        a={childArray[0]}
+        b={childArray[1]}
+        title={title}
+        cols={templateCol}
+        icon={icon?.replace('pi pi-', '')}
+      />
     </div>
   );
 }

package/templates/react-sdk-reference/src/components/template/WssNavBar/WssNavBar.tsx

@@ -25,25 +25,25 @@ interface WssNavBarProps extends PConnProps {
   appName: any;
 }
 
-const useStyles = makeStyles(theme => ({
+const useStyles = makeStyles((theme) => ({
   root: {
-    display: 'flex'
+    display: 'flex',
   },
   content: {
     flexGrow: 1,
     height: '100vh',
     marginLeft: theme.spacing(2),
-    marginRight: theme.spacing(2)
+    marginRight: theme.spacing(2),
   },
   appListLogo: {
     maxWidth: '100%',
-    height: '3rem'
+    height: '3rem',
   },
   appName: {
     marginLeft: theme.spacing(2),
     marginRight: theme.spacing(4),
-    fontSize: '1.5rem'
-  }
+    fontSize: '1.5rem',
+  },
 }));
 
 export default function WssNavBar(props: WssNavBarProps) {
@@ -73,9 +73,9 @@ export default function WssNavBar(props: WssNavBarProps) {
   };
 
   const navLinksContent = (
-    <Box id='nav-links' sx={{ flexGrow: 1, display: { xs: 'none', md: 'flex' } }} style={{ justifyContent: alignment }}>
-      {navLinks.map(link => (
-        <Button className='link-style' key={link.text} onClick={link.onClick}>
+    <Box id="nav-links" sx={{ flexGrow: 1, display: { xs: 'none', md: 'flex' } }} style={{ justifyContent: alignment }}>
+      {navLinks.map((link) => (
+        <Button className="link-style" key={link.text} onClick={link.onClick}>
           {link.text}
         </Button>
       ))}
@@ -83,41 +83,41 @@ export default function WssNavBar(props: WssNavBarProps) {
   );
 
   return (
-    <div id='NavBar' className='nav-bar'>
-      <AppBar position='static' color='primary'>
+    <div id="NavBar" className="nav-bar">
+      <AppBar position="static" color="primary">
         <Container maxWidth={false}>
           <Toolbar disableGutters style={{ justifyContent: 'space-between' }}>
-            <Button id='appName' style={{ textTransform: 'capitalize' }} onClick={appInfo.onClick}>
+            <Button id="appName" style={{ textTransform: 'capitalize' }} onClick={appInfo.onClick}>
               <img src={appInfo.imageSrc} className={classes.appListLogo} />
               <span className={classes.appName}>{appInfo.appName}</span>
             </Button>
             <Box sx={{ flexGrow: 1, display: { xs: 'flex', md: 'none' } }}>
               <IconButton
-                size='small'
-                aria-label='account of current user'
-                aria-controls='menu-appbar'
-                aria-haspopup='true'
+                size="small"
+                aria-label="account of current user"
+                aria-controls="menu-appbar"
+                aria-haspopup="true"
                 onClick={handleOpenNavMenu}
-                color='inherit'
+                color="inherit"
               >
                 <MenuIcon />
               </IconButton>
               <Menu
-                id='menu-appbar'
+                id="menu-appbar"
                 anchorEl={anchorElNav}
                 anchorOrigin={{
                   vertical: 'bottom',
-                  horizontal: 'left'
+                  horizontal: 'left',
                 }}
                 keepMounted
                 transformOrigin={{
                   vertical: 'top',
-                  horizontal: 'left'
+                  horizontal: 'left',
                 }}
                 open={Boolean(anchorElNav)}
                 onClose={handleCloseNavMenu}
               >
-                {navLinks.map(link => (
+                {navLinks.map((link) => (
                   <MenuItem key={link.text} onClick={link.onClick}>
                     <Typography>{link.text}</Typography>
                   </MenuItem>
@@ -128,20 +128,20 @@ export default function WssNavBar(props: WssNavBarProps) {
             {position === 'inline' && <>{navLinksContent}</>}
 
             <Box sx={{ flexGrow: 0 }}>
-              <IconButton onClick={handleOpenUserMenu} size='large'>
+              <IconButton onClick={handleOpenUserMenu} size="large">
                 <Avatar>{operator.currentUserInitials}</Avatar>
               </IconButton>
               <Menu
-                id='menu-appbar'
+                id="menu-appbar"
                 anchorEl={anchorElUser}
                 anchorOrigin={{
                   vertical: 'top',
-                  horizontal: 'right'
+                  horizontal: 'right',
                 }}
                 keepMounted
                 transformOrigin={{
                   vertical: 'top',
-                  horizontal: 'right'
+                  horizontal: 'right',
                 }}
                 open={Boolean(anchorElUser)}
                 onClose={handleCloseUserMenu}

package/templates/react-sdk-reference/src/components/template/utils.tsx

@@ -2,18 +2,18 @@ import type { ReactNode } from 'react';
 import { isValidElement } from 'react';
 
 export function prepareCaseSummaryData(caseSummaryRegion, portalSpecificVisibilityChecker?) {
-  const filterVisibleChildren = children => {
+  const filterVisibleChildren = (children) => {
     return children
       ?.getPConnect()
       ?.getChildren()
-      ?.filter(child => {
+      ?.filter((child) => {
         const configProps = child.getPConnect().getConfigProps();
         const defaultVisibilityCn = !('visibility' in configProps) || configProps.visibility === true;
         return defaultVisibilityCn && (portalSpecificVisibilityChecker?.(configProps) ?? true);
       });
   };
-  const convertChildrenToSummaryData = children => {
-    return children?.map(childItem => {
+  const convertChildrenToSummaryData = (children) => {
+    return children?.map((childItem) => {
       const childPConnData = childItem.getPConnect().resolveConfigProps(childItem.getPConnect().getRawMetadata());
       return childPConnData;
     });
@@ -38,7 +38,7 @@ export function prepareCaseSummaryData(caseSummaryRegion, portalSpecificVisibili
 
   return {
     primarySummaryFields,
-    secondarySummaryFields
+    secondarySummaryFields,
   };
 }
 
@@ -50,7 +50,7 @@ export const filterUtilities = (utils: ReactNode) => {
     if (!utilsMeta?.children?.length) return;
     utilsMeta = {
       ...utilsMeta,
-      children: utilsMeta.children.filter((child: any) => child.config?.availableInChannel?.selfService === true)
+      children: utilsMeta.children.filter((child: any) => child.config?.availableInChannel?.selfService === true),
     };
     return utilsMeta.children?.length ? pConnect.createComponent(utilsMeta) : undefined;
   }

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

@@ -10,20 +10,20 @@ interface AppAnnouncementProps extends PConnProps {
   whatsnewlink?: string;
 }
 
-const useStyles = makeStyles(theme => ({
+const useStyles = makeStyles((theme) => ({
   root: {
     marginTop: theme.spacing(1),
     marginBottom: theme.spacing(1),
     borderLeft: '6px solid',
-    borderLeftColor: theme.palette.primary.light
-  }
+    borderLeftColor: theme.palette.primary.light,
+  },
 }));
 
 export default function AppAnnouncement(props: AppAnnouncementProps) {
   const { header = '', description = '', datasource = [], whatsnewlink = '' } = props;
   let details = [];
   if (datasource && datasource.source) {
-    details = datasource.source.map(item => {
+    details = datasource.source.map((item) => {
       return item.name;
     });
   }
@@ -35,23 +35,23 @@ export default function AppAnnouncement(props: AppAnnouncementProps) {
   };
 
   return (
-    <Card title='AppAnnouncement' className={classes.root}>
-      <CardHeader title={<Typography variant='h6'>{header}</Typography>} />
+    <Card title="AppAnnouncement" className={classes.root}>
+      <CardHeader title={<Typography variant="h6">{header}</Typography>} />
       <CardContent>
-        <Typography variant='body1' gutterBottom>
+        <Typography variant="body1" gutterBottom>
           {description}
         </Typography>
         {details.map((itm, idx) => {
           const theKey = `AppAnn-item-${idx}`;
           return (
-            <Typography key={theKey} variant='body2'>
+            <Typography key={theKey} variant="body2">
               - {itm}
             </Typography>
           );
         })}
       </CardContent>
       <CardActions>
-        <Button color='primary' onClick={handleClick} size='small'>
+        <Button color="primary" onClick={handleClick} size="small">
           See what&apos;s new
         </Button>
       </CardActions>