@pega/dx-component-builder-sdk 0.23.9 → 0.23.11

package/tests/assets/sdk-r/components/create/override-sdk/template/WideNarrowDetails/config-ext.json

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

package/tests/assets/sdk-r/components/create/override-sdk/template/WideNarrowDetails/index.tsx

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

package/tests/assets/sdk-r/components/create/override-sdk/template/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/tests/assets/sdk-r/components/create/override-sdk/template/WideNarrowForm/WideNarrowForm.tsx

@@ -0,0 +1,22 @@
+import { PropsWithChildren, ReactElement } from 'react';
+import { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
+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/tests/assets/sdk-r/components/create/override-sdk/template/WideNarrowForm/config-ext.json

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

package/tests/assets/sdk-r/components/create/override-sdk/template/WideNarrowForm/index.tsx

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

package/tests/assets/sdk-r/components/create/override-sdk/template/WideNarrowPage/WideNarrowPage.tsx

@@ -0,0 +1,28 @@
+import { Children, PropsWithChildren } from 'react';
+import { getComponentFromMap } from '@pega/react-sdk-components/lib/bridge/helpers/sdk_component_map';
+import { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
+
+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 = getComponentFromMap('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/tests/assets/sdk-r/components/create/override-sdk/template/WideNarrowPage/config-ext.json

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

package/tests/assets/sdk-r/components/create/override-sdk/template/WideNarrowPage/index.tsx

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

package/tests/assets/sdk-r/components/create/override-sdk/template/WssNavBar/WssNavBar.css

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

package/tests/assets/sdk-r/components/create/override-sdk/template/WssNavBar/WssNavBar.tsx

@@ -0,0 +1,157 @@
+import React, { useState } from 'react';
+import { makeStyles } from '@material-ui/core/styles';
+import AppBar from '@material-ui/core/AppBar';
+import Box from '@material-ui/core/Box';
+import Toolbar from '@material-ui/core/Toolbar';
+import Container from '@material-ui/core/Container';
+import { IconButton, Menu, MenuItem, Typography, Button } from '@material-ui/core';
+import Avatar from '@material-ui/core/Avatar';
+import MenuIcon from '@material-ui/icons/Menu';
+import { logout } from '@pega/auth/lib/sdk-auth-manager';
+import { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
+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 };
+  // eslint-disable-next-line react/no-unused-prop-types
+  portalName: string;
+  imageSrc: string;
+  // eslint-disable-next-line react/no-unused-prop-types
+  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: {
+    width: '3.6rem'
+  },
+  appName: {
+    color: 'white',
+    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 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='xl'>
+          <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}>
+                <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>Logout</Typography>
+                </MenuItem>
+              </Menu>
+            </Box>
+          </Toolbar>
+          {position === 'below' && <>{navLinksContent}</>}
+        </Container>
+      </AppBar>
+    </div>
+  );
+}

package/tests/assets/sdk-r/components/create/override-sdk/template/WssNavBar/index.tsx

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

package/tests/assets/sdk-r/components/create/override-sdk/template/_template.md

@@ -0,0 +1,6 @@
+# The **override-sdk/template** directory
+
+The **src/components/override-sdk/template** directory contains the code for **template** components 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 **template** 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/template**.

package/tests/assets/sdk-r/components/create/override-sdk/widget/ActionButtonsForFileUtil/ActionButtonsForFileUtil.css

@@ -0,0 +1,27 @@
+.psdk-actions {
+  height: 6.25rem;
+  display: flex;
+  position: relative;
+  align-items: center;
+  width: 100%;
+}
+
+.psdk-action-buttons {
+  width: 50%;
+  justify-content: center;
+  display: flex;
+}
+
+.primary-button {
+  background-color: #3f51b5 !important;
+  color: white !important;
+  padding: 6px 14px !important;
+  text-transform: unset !important;
+  font-size: 14px;
+}
+
+.secondary-button {
+  box-shadow: 0px 5px 10px 0px rgb(0 0 0 / 20%);
+  text-transform: unset !important;
+  padding: 6px 14px !important;
+}

package/tests/assets/sdk-r/components/create/override-sdk/widget/ActionButtonsForFileUtil/ActionButtonsForFileUtil.tsx

@@ -0,0 +1,32 @@
+import { Button } from '@material-ui/core';
+import { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
+import './ActionButtonsForFileUtil.css';
+
+interface ActionButtonsForFileUtilProps extends PConnProps {
+  // If any, enter additional props that only exist on this component
+  arMainButtons: any[];
+  arSecondaryButtons: any[];
+  primaryAction: any;
+  secondaryAction: any;
+}
+
+export default function ActionButtonsForFileUtil(props: ActionButtonsForFileUtilProps) {
+  return (
+    <div className='psdk-actions'>
+      <div className='psdk-action-buttons'>
+        {props.arSecondaryButtons.map(file => (
+          <Button className='secondary-button' key={file.actionID} onClick={props.secondaryAction}>
+            {file.name}
+          </Button>
+        ))}
+      </div>
+      <div className='psdk-action-buttons'>
+        {props.arMainButtons.map(file => (
+          <Button className='primary-button' key={file.actionID} onClick={props.primaryAction}>
+            {file.name}
+          </Button>
+        ))}
+      </div>
+    </div>
+  );
+}

package/tests/assets/sdk-r/components/create/override-sdk/widget/ActionButtonsForFileUtil/index.tsx

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

package/tests/assets/sdk-r/components/create/override-sdk/widget/AppAnnouncement/AppAnnouncement.tsx

@@ -0,0 +1,60 @@
+import { Card, CardContent, CardHeader, Typography, CardActions, Button } from '@material-ui/core';
+import { makeStyles } from '@material-ui/core/styles';
+import { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
+
+interface AppAnnouncementProps extends PConnProps {
+  // If any, enter additional props that only exist on this component
+  header?: string;
+  description?: string;
+  datasource?: any;
+  whatsnewlink?: string;
+}
+
+const useStyles = makeStyles(theme => ({
+  root: {
+    marginTop: theme.spacing(1),
+    marginBottom: theme.spacing(1),
+    borderLeft: '6px solid',
+    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 => {
+      return item.name;
+    });
+  }
+
+  const classes = useStyles();
+
+  const handleClick = () => {
+    window.open(whatsnewlink);
+  };
+
+  return (
+    <Card title='AppAnnouncement' className={classes.root}>
+      <CardHeader title={<Typography variant='h6'>{header}</Typography>} />
+      <CardContent>
+        <Typography variant='body1' gutterBottom>
+          {description}
+        </Typography>
+        {details.map((itm, idx) => {
+          const theKey = `AppAnn-item-${idx}`;
+          return (
+            <Typography key={theKey} variant='body2'>
+              - {itm}
+            </Typography>
+          );
+        })}
+      </CardContent>
+      <CardActions>
+        <Button color='primary' onClick={handleClick} size='small'>
+          See what&apos;s new
+        </Button>
+      </CardActions>
+    </Card>
+  );
+}

package/tests/assets/sdk-r/components/create/override-sdk/widget/AppAnnouncement/config-ext.json

@@ -0,0 +1,9 @@
+{
+    "componentKey": "AppAnnouncement",
+    "name": "AppAnnouncement",
+    "label": "App announcement",
+    "description": "App announcement widget",
+    "type": "Widget",
+    "subtype": "PAGE",
+    "properties": []
+}

package/tests/assets/sdk-r/components/create/override-sdk/widget/AppAnnouncement/index.tsx

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

package/tests/assets/sdk-r/components/create/override-sdk/widget/Attachment/Attachment.css

@@ -0,0 +1,96 @@
+.label {
+  display: block;
+  margin-bottom: 10px;
+}
+
+.file-div {
+  border: 1px dashed var(--app-neutral-dark-color);
+  width: 100%;
+  padding: 0.5rem;
+  text-align: center;
+  position: relative;
+}
+
+.file-div-error {
+  border: 1px dashed var(--app-error-color);
+  width: 100%;
+  padding: 0.5rem;
+  text-align: center;
+  position: relative;
+}
+
+.progress-div {
+  text-align: center;
+  position: absolute;
+  left: 47%;
+}
+
+.file-label::after {
+  display: inline;
+  content: ' *';
+  vertical-align: top;
+  color: var(--app-neutral-dark-color);
+}
+
+.file-error {
+  color: var(--app-error-color);
+}
+
+.psdk-utility-card {
+  display: flex;
+  flex-direction: row;
+  padding: 0.25rem 0rem 0.25rem 0.25rem;
+  margin-bottom: 0.5rem;
+}
+
+.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;
+}
+
+.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;
+}
+
+.psdk-utility-card {
+  display: flex;
+  align-items: center;
+  border: 0.0625rem solid rgb(207, 207, 207);
+  border-radius: calc(0.25rem);
+  min-height: 3rem;
+}
+
+.psdk-utility-button {
+  background: none;
+  border: none;
+  cursor: pointer;
+}
+
+.psdk-utility-action {
+  flex-grow: 1;
+  text-align: right;
+}
+
+.file-disabled {
+  opacity: 0.4;
+}