@pega/sdk 0.0.1

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

@@ -0,0 +1,54 @@
+import type { PropsWithChildren, ReactElement } from 'react';
+import Grid, { type GridSize } from '@mui/material/Grid';
+import makeStyles from '@mui/styles/makeStyles';
+import type { PConnProps } from '@pega/sdk-react';
+
+interface TwoColumnProps extends PConnProps {
+  // If any, enter additional props that only exist on this component
+  templateCol?: string;
+}
+
+const useStyles = makeStyles(() => ({
+  colStyles: {
+    display: 'grid',
+    gap: '1rem',
+    alignContent: 'baseline'
+  }
+}));
+
+export default function TwoColumn(props: PropsWithChildren<TwoColumnProps>) {
+  const classes = useStyles();
+
+  const { children, templateCol = '1fr 1fr' } = props;
+  const childrenToRender = children as ReactElement[];
+
+  if (childrenToRender.length !== 2) {
+    console.error(`TwoColumn template sees more than 2 columns: ${childrenToRender.length}`);
+  }
+
+  // Calculate the size
+  //  Default to assume the 2 columns are evenly split. However, override if templateCol
+  //  (example value: "1fr 1fr")
+  let aSize: GridSize = 6;
+  let bSize: GridSize = 6;
+
+  const colAArray = templateCol
+    .replaceAll(/[a-z]+/g, '')
+    .split(/\s/)
+    .map(itm => Number(itm));
+  const totalCols = colAArray.reduce((v, itm) => itm + v, 0);
+  const ratio = 12 / totalCols;
+  aSize = (ratio * colAArray[0]) as GridSize;
+  bSize = (ratio * colAArray[1]) as GridSize;
+
+  return (
+    <Grid container spacing={1}>
+      <Grid size={{ xs: 12, md: aSize }} className={classes.colStyles}>
+        {childrenToRender[0]}
+      </Grid>
+      <Grid size={{ xs: 12, md: bSize }} className={classes.colStyles}>
+        {childrenToRender[1]}
+      </Grid>
+    </Grid>
+  );
+}

package/templates/react-sdk-reference/src/components/template/TwoColumn/TwoColumn/config-ext.json

@@ -0,0 +1,8 @@
+{
+  "name": "TwoColumn",
+  "label": "Two column",
+  "description": "TwoColumn Template",
+  "type": "Template",
+  "subtype": "FORM",
+  "properties": []
+}

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

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

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

@@ -0,0 +1,17 @@
+import { getComponentFromRegistry } from '@pega/sdk-react';
+import type { PConnProps } from '@pega/sdk-react';
+
+interface TwoColumnPageProps extends PConnProps {
+  // If any, enter additional props that only exist on this component
+}
+
+/*
+ * The wrapper handles knowing how to take in just children
+ *  and mapping to the TwoColumn template.
+ */
+export default function TwoColumnPage(props: TwoColumnPageProps) {
+  // Get emitted components from map (so we can get any override that may exist)
+  const TwoColumn = getComponentFromRegistry('TwoColumn');
+
+  return <TwoColumn {...props} />;
+}

package/templates/react-sdk-reference/src/components/template/TwoColumn/TwoColumnPage/config-ext.json

@@ -0,0 +1,8 @@
+{
+  "name": "TwoColumnPage",
+  "label": "Two column",
+  "description": "TwoColumn Page Template",
+  "type": "Template",
+  "subtype": "PAGE",
+  "properties": []
+}

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

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

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

@@ -0,0 +1,12 @@
+.psdk-two-column {
+  display: flow-root;
+  height: 100%;
+}
+
+/* Create two equal columns that floats next to each other */
+.psdk-two-column-column {
+  width: 50%;
+  float: left;
+  padding: 0rem 0.3125rem;
+  height: 100%;
+}

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

@@ -0,0 +1,54 @@
+import type { PropsWithChildren, ReactElement } from 'react';
+import Grid, { type GridSize } from '@mui/material/Grid';
+import makeStyles from '@mui/styles/makeStyles';
+import type { PConnProps } from '@pega/sdk-react';
+
+interface TwoColumnTabProps extends PConnProps {
+  // If any, enter additional props that only exist on this component
+  templateCol?: string;
+}
+
+const useStyles = makeStyles(() => ({
+  colStyles: {
+    display: 'grid',
+    gap: '1rem',
+    alignContent: 'baseline'
+  }
+}));
+
+export default function TwoColumnTab(props: PropsWithChildren<TwoColumnTabProps>) {
+  const classes = useStyles();
+
+  const { children, templateCol = '1fr 1fr' } = props;
+  const childrenToRender = children as ReactElement[];
+
+  if (childrenToRender.length !== 2) {
+    console.error(`TwoColumn template sees more than 2 columns: ${childrenToRender.length}`);
+  }
+
+  // Calculate the size
+  //  Default to assume the 2 columns are evenly split. However, override if templateCol
+  //  (example value: "1fr 1fr")
+  let aSize: GridSize = 6;
+  let bSize: GridSize = 6;
+
+  const colAArray = templateCol
+    .replaceAll(/[a-z]+/g, '')
+    .split(/\s/)
+    .map(itm => Number(itm));
+  const totalCols = colAArray.reduce((v, itm) => itm + v, 0);
+  const ratio = 12 / totalCols;
+  aSize = (ratio * colAArray[0]) as GridSize;
+  bSize = (ratio * colAArray[1]) as GridSize;
+
+  return (
+    <Grid container spacing={1}>
+      <Grid size={{ xs: 12, md: aSize }} className={classes.colStyles}>
+        {childrenToRender[0]}
+      </Grid>
+      <Grid size={{ xs: 12, md: bSize }} className={classes.colStyles}>
+        {childrenToRender[1]}
+      </Grid>
+    </Grid>
+  );
+}

package/templates/react-sdk-reference/src/components/template/TwoColumn/TwoColumnTab/config-ext.json

@@ -0,0 +1,8 @@
+{
+  "name": "TwoColumnTab",
+  "label": "Two column",
+  "description": "Two column",
+  "type": "Template",
+  "subtype": "TAB",
+  "properties": []
+}

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

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

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

@@ -0,0 +1,19 @@
+.psdk-wide-narrow-column {
+  display: flow-root;
+  height: 100%;
+}
+
+/* Create two columns that float next to each other */
+.psdk-wide-narrow-column .psdk-narrow-column-column {
+  width: 30%;
+  float: left;
+  padding: 0rem 0rem 0rem 0.3125rem;
+  height: 100%;
+}
+
+.psdk-wide-narrow-column .psdk-wide-column-column {
+  width: 70%;
+  float: left;
+  padding: 0rem 0.3125rem 0rem 0rem;
+  height: 100%;
+}

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

@@ -0,0 +1,37 @@
+import type { PropsWithChildren, ReactElement } from 'react';
+import type { PConnProps } from '@pega/sdk-react';
+import './WideNarrow.css';
+
+interface WideNarrowProps extends PConnProps {
+  // If any, enter additional props that only exist on this component
+  a: any;
+  b: any;
+
+  title?: string;
+
+  cols?: string;
+
+  icon?: string;
+}
+
+export default function WideNarrow(props: PropsWithChildren<WideNarrowProps>) {
+  // const {a, b /*, cols, icon, title */ } = props;
+  const { a, b, children = [] } = props;
+
+  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>
+      )}
+      {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>
+      )}
+    </>
+  );
+}

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

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

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

@@ -0,0 +1,96 @@
+import { createElement } from 'react';
+import Grid, { type GridSize } from '@mui/material/Grid';
+
+import { getComponentFromRegistry, PConnectComponent } from '@pega/sdk-react';
+
+import type { PConnProps } from '@pega/sdk-react';
+
+interface WideNarrowDetailsProps extends PConnProps {
+  // If any, enter additional props that only exist on this component
+  showLabel?: boolean;
+  label?: string;
+  showHighlightedData?: boolean;
+}
+
+const COLUMN_WIDTHS = [8, 4];
+
+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;
+
+  // Get the inherited props from the parent to determine label settings
+  const propsToUse = { label, showLabel, ...getPConnect().getInheritedProps() };
+
+  // Set display mode prop and re-create the children so this part of the dom tree renders
+  // 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 = {};
+      }
+
+      return createElement(PConnectComponent, {
+        ...theConfigObject,
+
+        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;
+    highlightedDataArr = highlightedData.map((field) => {
+      field.config.displayMode = 'STACKED_LARGE_VAL';
+
+      // Mark as status display when using pyStatusWork
+      if (field.config.value === '@P .pyStatusWork') {
+        field.type = 'TextInput';
+        field.config.displayAsStatus = true;
+      }
+
+      return getPConnect().createComponent(field, '', 0, {}); // 2nd, 3rd, and 4th args empty string/object/null until typedef marked correctly as optional
+    });
+  }
+
+  let theName = '';
+  if (propsToUse?.showLabel && propsToUse.label) {
+    theName = propsToUse.label;
+  }
+
+  return (
+    <FieldGroup name={theName}>
+      {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}`}
+            >
+              {child}
+            </Grid>
+          ))}
+        </Grid>
+      )}
+      <Grid container spacing={1}>
+        {children?.map((child, i) => (
+          <Grid size={{ xs: COLUMN_WIDTHS[i] as GridSize }} key={`r-${i + 1}`}>
+            {child}
+          </Grid>
+        ))}
+      </Grid>
+    </FieldGroup>
+  );
+}

package/templates/react-sdk-reference/src/components/template/WideNarrow/WideNarrowDetails/config-ext.json

@@ -0,0 +1,8 @@
+{
+  "name": "WideNarrowDetails",
+  "label": "Details (Wide-narrow)",
+  "description": "Details (Wide-narrow) template",
+  "type": "Template",
+  "subtype": "DETAILS",
+  "properties": []
+}

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

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

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

@@ -0,0 +1,19 @@
+.psd-wide-narrow-column {
+  display: flow-root;
+  height: 100%;
+}
+
+/* Create two equal columns that floats next to each other */
+.psd-wide-narrow-column .psdk-narrow-column-column {
+  width: 30%;
+  float: left;
+  padding: 0rem 0.3125rem 0rem 0rem;
+  height: 100%;
+}
+
+.psd-wide-narrow-column .psdk-wide-column-column {
+  width: 70%;
+  float: left;
+  padding: 0rem 0rem 0rem 0.3125rem;
+  height: 100%;
+}

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

@@ -0,0 +1,22 @@
+import type { PropsWithChildren, ReactElement } from 'react';
+import type { PConnProps } from '@pega/sdk-react';
+import './WideNarrowForm.css';
+
+interface WideNarrowFormProps extends PConnProps {
+  // If any, enter additional props that only exist on this component
+}
+
+export default function WideNarrowForm(props: PropsWithChildren<WideNarrowFormProps>) {
+  const { children } = props;
+
+  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>
+      )}
+    </>
+  );
+}

package/templates/react-sdk-reference/src/components/template/WideNarrow/WideNarrowForm/config-ext.json

@@ -0,0 +1,8 @@
+{
+  "name": "WideNarrowForm",
+  "label": "Wide-narrow",
+  "description": "WideNarrow Template",
+  "type": "Template",
+  "subtype": "FORM",
+  "properties": []
+}

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

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

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

@@ -0,0 +1,28 @@
+import { Children, type PropsWithChildren } from 'react';
+import { getComponentFromRegistry } from '@pega/sdk-react';
+import type { PConnProps } from '@pega/sdk-react';
+
+interface WideNarrowPageProps extends PConnProps {
+  // If any, enter additional props that only exist on this component
+  title: string;
+  templateCol?: string;
+  icon?: string;
+}
+
+/*
+ * The wrapper handles knowing how to take in just children and mapping
+ * to the Cosmos template.
+ */
+export default function WideNarrowPage(props: PropsWithChildren<WideNarrowPageProps>) {
+  // Get emitted components from map (so we can get any override that may exist)
+  const WideNarrow = getComponentFromRegistry('WideNarrow');
+
+  const { children, title, templateCol = '1fr 1fr', icon = '' } = props;
+  const childArray = Children.toArray(children);
+
+  return (
+    <div>
+      <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/WideNarrow/WideNarrowPage/config-ext.json

@@ -0,0 +1,8 @@
+{
+  "name": "WideNarrowPage",
+  "label": "Wide-narrow",
+  "description": "Wide-narrow Page Template",
+  "type": "Template",
+  "subtype": "PAGE",
+  "properties": []
+}

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

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

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

@@ -0,0 +1,11 @@
+.link-style {
+  color: var(--app-text-color) !important;
+  text-transform: capitalize !important;
+  font-size: 1rem !important;
+}
+
+.nav-bar {
+  position: sticky;
+  inset-block-start: 0;
+  z-index: 100;
+}

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

@@ -0,0 +1,160 @@
+import React, { useState } from 'react';
+import makeStyles from '@mui/styles/makeStyles';
+import AppBar from '@mui/material/AppBar';
+import Box from '@mui/material/Box';
+import Toolbar from '@mui/material/Toolbar';
+import Container from '@mui/material/Container';
+import { IconButton, Menu, MenuItem, Typography, Button } from '@mui/material';
+import Avatar from '@mui/material/Avatar';
+import MenuIcon from '@mui/icons-material/Menu';
+import { logout } from '@pega/auth/lib/sdk-auth-manager';
+import type { PConnProps } from '@pega/sdk-react';
+import './WssNavBar.css';
+
+interface WssNavBarProps extends PConnProps {
+  // If any, enter additional props that only exist on this component
+  appInfo: any;
+  navLinks: any[];
+  operator: { currentUserInitials: string };
+  navDisplayOptions: { alignment: string; position: string };
+
+  portalName: string;
+  imageSrc: string;
+
+  fullImageSrc: string;
+  appName: any;
+}
+
+const useStyles = makeStyles(theme => ({
+  root: {
+    display: 'flex'
+  },
+  content: {
+    flexGrow: 1,
+    height: '100vh',
+    marginLeft: theme.spacing(2),
+    marginRight: theme.spacing(2)
+  },
+  appListLogo: {
+    maxWidth: '100%',
+    height: '3rem'
+  },
+  appName: {
+    marginLeft: theme.spacing(2),
+    marginRight: theme.spacing(4),
+    fontSize: '1.5rem'
+  }
+}));
+
+export default function WssNavBar(props: WssNavBarProps) {
+  const { appInfo, navLinks, operator, navDisplayOptions } = props;
+  const { alignment, position } = navDisplayOptions;
+  const classes = useStyles();
+
+  const [anchorElNav, setAnchorElNav] = useState<null | HTMLElement>(null);
+  const [anchorElUser, setAnchorElUser] = useState<null | HTMLElement>(null);
+
+  const localizedVal = PCore.getLocaleUtils().getLocaleValue;
+  const localeCategory = 'AppShell';
+
+  const handleOpenNavMenu = (event: React.MouseEvent<HTMLElement>) => {
+    setAnchorElNav(event.currentTarget);
+  };
+  const handleOpenUserMenu = (event: React.MouseEvent<HTMLElement>) => {
+    setAnchorElUser(event.currentTarget);
+  };
+
+  const handleCloseNavMenu = () => {
+    setAnchorElNav(null);
+  };
+
+  const handleCloseUserMenu = () => {
+    setAnchorElUser(null);
+  };
+
+  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}>
+          {link.text}
+        </Button>
+      ))}
+    </Box>
+  );
+
+  return (
+    <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}>
+              <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'
+                onClick={handleOpenNavMenu}
+                color='inherit'
+              >
+                <MenuIcon />
+              </IconButton>
+              <Menu
+                id='menu-appbar'
+                anchorEl={anchorElNav}
+                anchorOrigin={{
+                  vertical: 'bottom',
+                  horizontal: 'left'
+                }}
+                keepMounted
+                transformOrigin={{
+                  vertical: 'top',
+                  horizontal: 'left'
+                }}
+                open={Boolean(anchorElNav)}
+                onClose={handleCloseNavMenu}
+              >
+                {navLinks.map(link => (
+                  <MenuItem key={link.text} onClick={link.onClick}>
+                    <Typography>{link.text}</Typography>
+                  </MenuItem>
+                ))}
+              </Menu>
+            </Box>
+
+            {position === 'inline' && <>{navLinksContent}</>}
+
+            <Box sx={{ flexGrow: 0 }}>
+              <IconButton onClick={handleOpenUserMenu} size='large'>
+                <Avatar>{operator.currentUserInitials}</Avatar>
+              </IconButton>
+              <Menu
+                id='menu-appbar'
+                anchorEl={anchorElUser}
+                anchorOrigin={{
+                  vertical: 'top',
+                  horizontal: 'right'
+                }}
+                keepMounted
+                transformOrigin={{
+                  vertical: 'top',
+                  horizontal: 'right'
+                }}
+                open={Boolean(anchorElUser)}
+                onClose={handleCloseUserMenu}
+              >
+                <MenuItem onClick={logout}>
+                  <Typography>{localizedVal('Log off', localeCategory)}</Typography>
+                </MenuItem>
+              </Menu>
+            </Box>
+          </Toolbar>
+          {position === 'below' && <>{navLinksContent}</>}
+        </Container>
+      </AppBar>
+    </div>
+  );
+}

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

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