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

package/tests/assets/sdk-r/components/createAll/custom-sdk/widget/Pega_DXIL_MyPageCaseWidget/demo.stories.tsx

@@ -0,0 +1,52 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import PegaDxilMyPageCaseWidget from './index';
+import { caseOpConfig, operatorDetails } from './mock';
+
+window.PCore = {
+  ...window.PCore,
+  getUserApi: (): any => {
+    return {
+      getOperatorDetails: () => {
+        return new Promise(resolve => {
+          resolve(operatorDetails);
+        });
+      }
+    };
+  }
+}
+
+const meta: Meta<typeof PegaDxilMyPageCaseWidget> = {
+  title: 'PegaDxilMyPageCaseWidget',
+  component: PegaDxilMyPageCaseWidget,
+  excludeStories: /.*Data$/
+};
+
+export default meta;
+type Story = StoryObj<typeof PegaDxilMyPageCaseWidget>;
+
+export const BasePegaDxilMyPageCaseWidget: Story = (args) => {
+
+  const props = {
+    getPConnect: () => {
+      return {
+        getActionsApi: () => {
+          return {
+            updateFieldValue: () => {/* nothing */},
+            triggerFieldChange: () => {/* nothing */}
+          };
+        },
+        ignoreSuggestion: () => {/* nothing */},
+        acceptSuggestion: () => {/* nothing */},
+        setInheritedProps: () => {/* nothing */},
+        resolveConfigProps: () => {/* nothing */}
+      };
+    }
+  };
+
+  return <PegaDxilMyPageCaseWidget {...props} {...args} />;
+};
+
+BasePegaDxilMyPageCaseWidget.args = {
+  ...caseOpConfig
+}

package/tests/assets/sdk-r/components/createAll/custom-sdk/widget/Pega_DXIL_MyPageCaseWidget/index.tsx

@@ -0,0 +1,222 @@
+import React, { useState } from 'react';
+import TextField from '@material-ui/core/TextField';
+import Popover from '@material-ui/core/Popover';
+import Grid from '@material-ui/core/Grid';
+import Typography from '@material-ui/core/Typography';
+import { makeStyles } from '@material-ui/core/styles';
+
+import Utils from '@pega/react-sdk-components/lib/components/helpers/utils';
+
+import StyledPegaDxilMyPageCaseWidgetWrapper from './styles';
+import { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
+
+
+interface PegaDxilMyPageCaseWidgetProps 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 };
+}
+
+const useStyles = makeStyles(theme => ({
+  root: {
+    padding: theme.spacing(1),
+    margin: theme.spacing(1)
+  },
+  popover: {
+    padding: theme.spacing(1),
+    margin: theme.spacing(1)
+  }
+}));
+
+// Duplicated runtime code from React SDK
+
+// Page Case Widget example
+
+// props passed in combination of props from property panel (config.json) and run time props from Constellation
+// any default values in config.pros should be set in defaultProps at bottom of this file
+export default function PegaDxilMyPageCaseWidget(props: PegaDxilMyPageCaseWidgetProps) {
+  // const componentName = "Operator";
+  const classes = useStyles();
+
+  const fieldLabel = props.label.toLowerCase();
+  let caseOpLabel = '---';
+  let caseOpName = '---';
+  let caseOpId = '';
+  let caseTime = '';
+
+  if (fieldLabel === 'create operator') {
+    caseOpLabel = props.createLabel;
+    caseOpName = props.createOperator.userName;
+    caseTime = props.createDateTime;
+    caseOpId = props.createOperator.userId;
+  } else if (fieldLabel === '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 {
+        // eslint-disable-next-line no-console
+        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 item xs={12}>
+          <Typography variant='h6'>{caseOpName}</Typography>
+        </Grid>
+        {popoverFields.map(field => {
+          return (
+            <React.Fragment key={field.id}>
+              <Grid container item xs={12} spacing={1}>
+                <Grid item xs={6}>
+                  <Typography variant='caption'>{field.name}</Typography>
+                </Grid>
+                <Grid item xs={6}>
+                  <Typography variant='subtitle2'>{field.value}</Typography>
+                </Grid>
+              </Grid>
+            </React.Fragment>
+          );
+        })}
+      </Grid>
+    );
+  }
+
+  // End of popover-related
+
+  return (
+  <StyledPegaDxilMyPageCaseWidgetWrapper><>
+      <TextField
+        defaultValue={caseOpName}
+        label={caseOpLabel}
+        onClick={showOperatorDetails}
+        InputProps={{
+          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' }}
+        PaperProps={{ style: { maxWidth: '45ch' } }}
+      >
+        {getPopoverGrid()}
+      </Popover>
+    </>
+    </StyledPegaDxilMyPageCaseWidgetWrapper>
+  );
+}

package/tests/assets/sdk-r/components/createAll/custom-sdk/widget/Pega_DXIL_MyPageCaseWidget/mock.ts

@@ -0,0 +1,52 @@
+
+export const caseOpConfig = {
+  label: 'Create operator',
+  createLabel: 'Created',
+  updateLabel: 'Updated',
+  updateDateTime: '2023-01-16T14:53:33.280Z',
+  createDateTime: '2023-01-16T14:53:33.198Z',
+  updateOperator: {
+    userId: 'admin@mediaco',
+    userName: 'admin'
+  },
+  createOperator: {
+    userId: 'admin@mediaco',
+    userName: 'admin'
+  },
+  hideLabel: true,
+  key: '_532zx1dah',
+  displayMode: 'LABELS_LEFT'
+};
+
+export const operatorDetails = {
+  data: {
+    pzLoadTime: 'January 18, 2023 10:33:19 AM EST',
+    pzPageNameHash: '_pa1519192551088960pz',
+    pyOperatorInfo: {
+      pyUserName: 'french DigV2',
+      pyPosition: '',
+      pyImageInsKey: '',
+      pySkills: [
+        {
+          pySkillName: '',
+          pzIndexOwnerKey: 'DATA-ADMIN-OPERATOR-ID FRENCHTEST.DIGV2',
+          pySkillRating: 0
+        }
+      ],
+      pyReportToUserName: '',
+      pyReportTo: '',
+      pyOrganization: 'DXIL',
+      pyTitle: '',
+      pyLabel: 'frenchTest.DigV2',
+      pyEmailAddress: 'User@DigV2',
+      pyTelephone: ''
+    }
+  },
+  status: 200,
+  statusText: '',
+  headers: {
+    'content-length': '435',
+    'content-type': 'application/json;charset=UTF-8'
+  },
+  request: {}
+};

package/tests/assets/sdk-r/components/createAll/custom-sdk/widget/Pega_DXIL_MyPageCaseWidget/styles.js

@@ -0,0 +1,7 @@
+import styled, { css } from 'styled-components';
+
+export default styled.div(() => {
+  return css`
+    margin: 0px 0;
+  `;
+});

package/tests/assets/sdk-r/components/createAll/custom-sdk/widget/Pega_DXIL_MyPageWidget/OneColumnPage.svg

@@ -0,0 +1,36 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="100px" height="70px" viewBox="0 0 100 70" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>1 col </title>
+    <defs>
+        <rect id="path-1" x="0" y="0" width="100" height="70"></rect>
+    </defs>
+    <g id="Concepts" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Templates" transform="translate(-98.000000, -108.000000)">
+            <g id="Change-template" transform="translate(42.000000, 36.000000)">
+                <g id="1-col-" transform="translate(56.000000, 72.000000)">
+                    <mask id="mask-2" fill="white">
+                        <use xlink:href="#path-1"></use>
+                    </mask>
+                    <rect stroke="#A5A8BC" stroke-width="0.5" x="0.25" y="0.25" width="99.5" height="69.5"></rect>
+                    <g id="white" mask="url(#mask-2)" fill="#FFFFFF">
+                        <g transform="translate(3.000000, 3.000000)" id="Rectangle">
+                            <rect x="0" y="0" width="94" height="66.5"></rect>
+                        </g>
+                    </g>
+                    <g id="gray" mask="url(#mask-2)" fill="#8084A7">
+                        <g transform="translate(6.000000, 6.000000)" id="Rectangle">
+                            <rect x="0" y="-2.84217094e-14" width="88" height="77.8"></rect>
+                        </g>
+                    </g>
+                    <g id="labels" mask="url(#mask-2)" font-family="OpenSans-Semibold, Open Sans" font-size="11" font-weight="500">
+                        <g transform="translate(44.000000, 17.000000)" id="A">
+                            <text>
+                                <tspan x="0.75" y="12" fill="#FFFFFF">A</tspan>
+                            </text>
+                        </g>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

package/tests/assets/sdk-r/components/createAll/custom-sdk/widget/Pega_DXIL_MyPageWidget/config.json

@@ -0,0 +1,59 @@
+{
+  "name": "Pega_DXIL_MyPageWidget",
+  "label": "My Page Widget",
+  "description": "My Page Widget",
+  "organization": "Pega",
+  "version": "0.0.1",
+  "library": "DXIL",
+  "allowedApplications": [],
+  "componentKey": "Pega_DXIL_MyPageWidget",
+  "type": "Widget",
+  "subtype": "PAGE",
+  "icon": "OneColumnPage.svg",
+  "properties": [
+      {
+        "name": "description",
+        "label": "Description",
+        "format": "TEXT",
+        "defaultValue": "We've launched a brand new experience to accelerate your workflow. Check out the guides to help you get the most of Cosmos."
+      },
+      {
+        "name": "whatsnewlink",
+        "label": "What's new link",
+        "format": "TEXT",
+        "defaultValue": "https://design.pega.com"
+      },
+      {
+        "name": "image",
+        "label": "Image link",
+        "format": "TEXT",
+        "defaultValue": "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzOSAxMSI+PHRpdGxlPlBlZ2EgdGV4dC1vbmx5IGxvZ288L3RpdGxlPjxwYXRoIHN0eWxlPSJmaWxsLW9wYWNpdHk6IC4yNTsiIGZpbGw9IiNmZmYiIGQ9Ik03LjcyIDMuODJjMCAyLjI1LTEuNzggMy40MS00IDMuNDFoLTEuNnYzSDBWLjQyaDMuOTRjMi4zNiAwIDMuNzggMS4zOSAzLjc4IDMuNHptLTQtMS40N2gtMS42djNoMS43QTEuNDcgMS40NyAwIDAgMCA1LjUgMy44MmMwLS45MS0uNjUtMS40Ny0xLjc1LTEuNDd6bTcuNjggNS45MWg1LjN2Mkg5LjI5Vi40Mmg3LjM4djEuOTNoLTUuMjR2Mmg0LjI0djEuOWgtNC4yNHpNMjMuMTggMGE1IDUgMCAwIDEgMy41NyAxLjI4TDI1LjYzIDIuOGEzLjc4IDMuNzggMCAwIDAtMS4wNS0uNjNBNC4zMiA0LjMyIDAgMCAwIDIzLjMxIDIgMy4xNyAzLjE3IDAgMCAwIDIwIDUuMjdhMy4xNiAzLjE2IDAgMCAwIDEgMi4zOSAzLjA3IDMuMDcgMCAwIDAgMi4xNy44NCA0LjYgNC42IDAgMCAwIDIuMDktLjVWNi4xOWgtMi4yVjQuMzhoNC4yNXY0LjU2YTUuNDEgNS40MSAwIDAgMS00LjA4IDEuNTdBNS4zNSA1LjM1IDAgMCAxIDE5LjQzIDlhNS4wNSA1LjA1IDAgMCAxLTEuNTYtMy43NCA1LjIxIDUuMjEgMCAwIDEgMS41Ni0zLjc2QTUuMzEgNS4zMSAwIDAgMSAyMy4xOCAwem0xMS4yOS40Mmw0LjEzIDkuNzloLTIuMjVMMzUuNDggOGgtNC4wNmwtLjkgMi4xOGgtMi4yTDMyLjUxLjQyem0uMjUgNS43MkwzMy40NCAzbC0xLjI5IDMuMTR6bTMtNWEuNzEuNzEgMCAwIDEtLjc0Ljc1LjcxLjcxIDAgMCAxLS43My0uNzUuNzMuNzMgMCAwIDEgLjc1LS43Mi43Mi43MiAwIDAgMSAuNzUuNzF6TTM3IC41M2EuNTkuNTkgMCAwIDAtLjYuNi42MS42MSAwIDEgMCAxLjIxIDAgLjYuNiAwIDAgMC0uNjEtLjZ6bS0uMjQgMVYuNzFIMzdjLjEyIDAgLjE4LjA2LjI1LjA2YS4yMS4yMSAwIDAgMSAuMDcuMTguMTkuMTkgMCAwIDEtLjA3LjE4cy0uMDcuMDgtLjEzLjA4bC4yNi4zNmgtLjJMMzcgMS4yOGgtLjF2LjI5em0uMTMtLjQ0aC4yM2EuMjYuMjYgMCAwIDAgLjA3LS4wOWgtLjA2Yy0uMDUtLjE3LS4wNS0uMTctLjEzLS4xN2gtLjF6Ii8+PC9zdmc+"
+      },
+      {
+        "name": "datasource",
+        "label": "Data source for details",
+        "defaultValue": "@DATASOURCE D_pyAnnouncements.pxResults",
+        "format": "DATASOURCE",
+        "required": true,
+        "properties": [
+          {
+            "name": "name",
+            "label": "Label",
+            "defaultValue": "@P .pyLabel"
+          }
+        ]
+      },
+      {
+        "label": "Conditions",
+        "format": "GROUP",
+        "properties": [
+          {
+            "name": "visibility",
+            "label": "Visibility",
+            "format": "VISIBILITY"
+          }
+        ]
+      }
+  ],
+  "defaultConfig": {}
+}

package/tests/assets/sdk-r/components/createAll/custom-sdk/widget/Pega_DXIL_MyPageWidget/demo.stories.tsx

@@ -0,0 +1,28 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import PegaDxilMyPageWidget from './index';
+import { configProps } from './mock';
+
+const meta: Meta<typeof PegaDxilMyPageWidget> = {
+  title: 'PegaDxilMyPageWidget',
+  component: PegaDxilMyPageWidget,
+  excludeStories: /.*Data$/
+};
+
+export default meta;
+type Story = StoryObj<typeof PegaDxilMyPageWidget>;
+
+export const BasePegaDxilMyPageWidget: Story = (args) => {
+  
+  const props = {
+    datasource: configProps.datasource,
+    whatsnewlink: configProps.whatsnewlink
+  };
+
+  return <PegaDxilMyPageWidget {...props} {...args} />;
+};
+
+BasePegaDxilMyPageWidget.args = {
+  header: configProps.header,
+  description: configProps.description,
+}

package/tests/assets/sdk-r/components/createAll/custom-sdk/widget/Pega_DXIL_MyPageWidget/index.tsx

@@ -0,0 +1,69 @@
+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';
+import StyledPegaDxilMyPageWidgetWrapper from './styles';
+
+interface PegaDxilMyPageWidgetProps 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
+  }
+}));
+
+// Duplicated runtime code from React SDK
+
+// Page Widget example is the "App Announcment"
+
+// props passed in combination of props from property panel (config.json) and run time props from Constellation
+// any default values in config.pros should be set in defaultProps at bottom of this file
+export default function PegaDxilMyPageWidget(props: PegaDxilMyPageWidgetProps) {
+  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 (
+  <StyledPegaDxilMyPageWidgetWrapper>
+    <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>
+    </StyledPegaDxilMyPageWidgetWrapper>
+  );
+}

package/tests/assets/sdk-r/components/createAll/custom-sdk/widget/Pega_DXIL_MyPageWidget/mock.ts

@@ -0,0 +1,23 @@
+// eslint-disable-next-line import/prefer-default-export
+export const configProps = {
+  label: 'App announcement',
+  header: 'Announcements',
+  description: 'Welcome to MediaCo Application for testing SDK frameworks.',
+  whatsnewlink: 'https://design.pega.com',
+  image:
+    'data:image/svg xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzOSAxMSI PHRpdGxlPlBlZ2EgdGV4dC1vbmx5IGxvZ288L3RpdGxlPjxwYXRoIHN0eWxlPSJmaWxsLW9wYWNpdHk6IC4yNTsiIGZpbGw9IiNmZmYiIGQ9Ik03LjcyIDMuODJjMCAyLjI1LTEuNzggMy40MS00IDMuNDFoLTEuNnYzSDBWLjQyaDMuOTRjMi4zNiAwIDMuNzggMS4zOSAzLjc4IDMuNHptLTQtMS40N2gtMS42djNoMS43QTEuNDcgMS40NyAwIDAgMCA1LjUgMy44MmMwLS45MS0uNjUtMS40Ny0xLjc1LTEuNDd6bTcuNjggNS45MWg1LjN2Mkg5LjI5Vi40Mmg3LjM4djEuOTNoLTUuMjR2Mmg0LjI0djEuOWgtNC4yNHpNMjMuMTggMGE1IDUgMCAwIDEgMy41NyAxLjI4TDI1LjYzIDIuOGEzLjc4IDMuNzggMCAwIDAtMS4wNS0uNjNBNC4zMiA0LjMyIDAgMCAwIDIzLjMxIDIgMy4xNyAzLjE3IDAgMCAwIDIwIDUuMjdhMy4xNiAzLjE2IDAgMCAwIDEgMi4zOSAzLjA3IDMuMDcgMCAwIDAgMi4xNy44NCA0LjYgNC42IDAgMCAwIDIuMDktLjVWNi4xOWgtMi4yVjQuMzhoNC4yNXY0LjU2YTUuNDEgNS40MSAwIDAgMS00LjA4IDEuNTdBNS4zNSA1LjM1IDAgMCAxIDE5LjQzIDlhNS4wNSA1LjA1IDAgMCAxLTEuNTYtMy43NCA1LjIxIDUuMjEgMCAwIDEgMS41Ni0zLjc2QTUuMzEgNS4zMSAwIDAgMSAyMy4xOCAwem0xMS4yOS40Mmw0LjEzIDkuNzloLTIuMjVMMzUuNDggOGgtNC4wNmwtLjkgMi4xOGgtMi4yTDMyLjUxLjQyem0uMjUgNS43MkwzMy40NCAzbC0xLjI5IDMuMTR6bTMtNWEuNzEuNzEgMCAwIDEtLjc0Ljc1LjcxLjcxIDAgMCAxLS43My0uNzUuNzMuNzMgMCAwIDEgLjc1LS43Mi43Mi43MiAwIDAgMSAuNzUuNzF6TTM3IC41M2EuNTkuNTkgMCAwIDAtLjYuNi42MS42MSAwIDEgMCAxLjIxIDAgLjYuNiAwIDAgMC0uNjEtLjZ6bS0uMjQgMVYuNzFIMzdjLjEyIDAgLjE4LjA2LjI1LjA2YS4yMS4yMSAwIDAgMSAuMDcuMTguMTkuMTkgMCAwIDEtLjA3LjE4cy0uMDcuMDgtLjEzLjA4bC4yNi4zNmgtLjJMMzcgMS4yOGgtLjF2LjI5em0uMTMtLjQ0aC4yM2EuMjYuMjYgMCAwIDAgLjA3LS4wOWgtLjA2Yy0uMDUtLjE3LS4wNS0uMTctLjEzLS4xN2gtLjF6Ii8 PC9zdmc ',
+  datasource: {
+    source: [
+      {
+        name: 'New React based UI rendering'
+      },
+      {
+        name: 'Support for followers and recents'
+      },
+      {
+        name: 'New authoring experience'
+      }
+    ],
+    fields: {}
+  }
+};

package/tests/assets/sdk-r/components/createAll/custom-sdk/widget/Pega_DXIL_MyPageWidget/styles.js

@@ -0,0 +1,7 @@
+import styled, { css } from 'styled-components';
+
+export default styled.div(() => {
+  return css`
+    margin: 0px 0;
+  `;
+});

package/tests/assets/sdk-r/components/createAll/custom-sdk/widget/_widget.md

@@ -0,0 +1,6 @@
+# The **custom-sdk/widget** directory
+
+The **src/components/custom-sdk/widget** directory contains the code for the custom **widget** components you want to create and use with the **React SDK**.
+
+When you run the **npm run  create** command to create new _widget_ components, the generated code that you can use as a starting point for your component
+development will be placed in component-specific folders in **src/components/custom-sdk/widget**.

package/tests/assets/sdk-r/components/createAll/override-sdk/_override-sdk.md

@@ -0,0 +1,5 @@
+# The **components/override-sdk** directory
+
+The **src/components/override-sdk** directory contains the code for components for which you want to override the default implementation for use with the **React SDK**.
+
+When you run the **npm run  override** command to override the default implementation of a 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**.

package/tests/assets/sdk-r/components/createAll/override-sdk/designSystemExtension/AlertBanner/AlertBanner.tsx

@@ -0,0 +1,39 @@
+import { Alert } from '@material-ui/lab';
+
+// AlertBanner is one of the few components that does NOT have getPConnect.
+//  So, no need to extend PConnProps
+interface AlertBannerProps {
+  // If any, enter additional props that only exist on Date here
+  id: string;
+  variant: string;
+  messages: string[];
+  onDismiss?: any;
+}
+
+const SEVERITY_MAP = {
+  urgent: 'error',
+  warning: 'warning',
+  success: 'success',
+  info: 'info'
+};
+
+export default function AlertBanner(props: AlertBannerProps) {
+  const { id, variant, messages, onDismiss } = props;
+  let additionalProps = {};
+
+  if (onDismiss) {
+    additionalProps = {
+      onClose: onDismiss
+    };
+  }
+
+  return (
+    <div id={id}>
+      {messages.map(message => (
+        <Alert key={message} variant='outlined' severity={SEVERITY_MAP[variant]} {...additionalProps}>
+          {message}
+        </Alert>
+      ))}
+    </div>
+  );
+}

package/tests/assets/sdk-r/components/createAll/override-sdk/designSystemExtension/AlertBanner/index.tsx

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

package/tests/assets/sdk-r/components/createAll/override-sdk/designSystemExtension/Banner/Banner.css

@@ -0,0 +1,39 @@
+.background-image-style {
+  margin-left: -16px;
+  margin-right: -16px;
+  height: calc(19rem);
+  background-size: cover;
+  background-position: center center;
+}
+
+.background-style {
+  background-color: transparent;
+  color: rgb(0, 0, 0);
+  width: 100%;
+  height: 100%;
+  text-align: center;
+}
+
+.content {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  gap: calc(0.5rem);
+}
+
+.title {
+  margin: 0rem;
+  font-size: 1.728rem;
+  font-weight: 600;
+}
+
+.message {
+  margin: 0;
+  font-size: 1rem;
+  font-weight: 400;
+}
+
+.banner-layout {
+  padding: 1rem;
+}