@pega/dx-component-builder-sdk 0.23.10 → 0.23.12

package/tests/assets/sdk-r/components/createAll/custom-sdk/template/Pega_DXIL_MyTwoColumnForm/demo.stories.tsx

@@ -0,0 +1,188 @@
+import { useState } from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { TextField } from '@material-ui/core';
+import MuiPhoneNumber from 'material-ui-phone-number';
+import { KeyboardDatePicker, MuiPickersUtilsProvider } from '@material-ui/pickers';
+import DayjsUtils from '@date-io/dayjs';
+
+import PegaDxilMyTwoColumnForm from './index';
+import { pyReviewRaw } from './mock';
+
+const meta: Meta<typeof PegaDxilMyTwoColumnForm> = {
+  title: 'PegaDxilMyTwoColumnForm',
+  component: PegaDxilMyTwoColumnForm,
+  excludeStories: /.*Data$/,
+  parameters: {
+    type: "TwoColumnForm",
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof PegaDxilMyTwoColumnForm>;
+
+const renderField = resolvedProps => {
+  const { displayMode, value = '', label = '', onChange} = resolvedProps;
+
+  const variant = displayMode === 'LABELS_LEFT' ? 'inline' : 'stacked';
+  let val: any = '';
+  if (label === 'Service Date')
+    val = <MuiPickersUtilsProvider utils={DayjsUtils}><KeyboardDatePicker
+      variant='inline'
+      inputVariant='outlined'
+      placeholder='mm/dd/yyyy'
+      fullWidth
+      format='MM/DD/YYYY'
+      mask='__/__/____'
+      size='small'
+      label={label}
+      value={value || null}
+      onChange={onChange}
+    />
+    </MuiPickersUtilsProvider>
+
+
+  if (label === 'Email')
+    val = <TextField type='email' fullWidth value={value} size='small' variant='outlined' style={{ fontSize: '14px' }} label={label} onChange={onChange} />;
+
+  if (label === 'First Name' || label === 'Last Name' || label === 'Middle Name')
+    val = <TextField value={value} fullWidth size='small' variant='outlined' style={{ fontSize: '14px' }} label={label} onChange={onChange} />;
+
+  if (label === 'Phone Number')
+    val = <MuiPhoneNumber value={value} fullWidth variant='outlined' size='small' style={{ fontSize: '14px' }} defaultCountry='us' label={label} onChange={onChange} />;
+
+
+  if (variant === 'inline') {
+    val = value || <span aria-hidden='true'>&ndash;&ndash;</span>;
+  }
+
+  return <span key={label}>{val}</span>;
+};
+
+export const BasePegaDxilMyTwoColumnForm: Story = (args) => {
+  const [firstName, setFirstName] = useState('John');
+  const [middleName, setMiddleName] = useState('');
+  const [lastName, setLastName] = useState('Joe');
+  const [phone, setPhone] = useState('+16397975093');
+  const [serviceDate, setServiceDate] = useState('2023-01-25');
+  const [email, setEmail] = useState('john@doe.com');
+  const regionChildrenResolved = [
+    {
+      readOnly: undefined,
+      value: firstName,
+      label: 'First Name',
+      hasSuggestions: false,
+      onChange: val => {
+        setFirstName(val.target.value);
+      }
+    },
+    {
+      readOnly: undefined,
+      value: middleName,
+      label: 'Middle Name',
+      hasSuggestions: false,
+      onChange: val => {
+        setMiddleName(val.target.value);
+      }
+    },
+    {
+      readOnly: undefined,
+      value: lastName,
+      label: 'Last Name',
+      hasSuggestions: false,
+      onChange: val => {
+        setLastName(val.target.value);
+      }
+    },
+    {
+      readOnly: undefined,
+      value: email,
+      label: 'Email',
+      hasSuggestions: false,
+      onChange: val => {
+        setEmail(val.target.value);
+      }
+    },
+    {
+      readOnly: undefined,
+      value: phone,
+      label: 'Phone Number',
+      datasource: {
+        fields: {
+          value: undefined
+        },
+        source: [
+          {
+            value: '+1'
+          },
+          {
+            value: '+91'
+          },
+          {
+            value: '+48'
+          },
+          {
+            value: '+44'
+          }
+        ]
+      },
+      hasSuggestions: false,
+      onChange: val => {
+        setPhone(val);
+      }
+    },
+    {
+      readOnly: undefined,
+      value: serviceDate,
+      label: 'Service Date',
+      hasSuggestions: false,
+      onChange: date => {
+        const changeValue = date && date.isValid() ? date.toISOString() : null;
+        setServiceDate(changeValue);
+      }
+
+    }
+  ];
+  const props = {
+    template: 'DefaultForm',
+    getPConnect: () => {
+      return {
+        getChildren: () => {
+          return pyReviewRaw.children;
+        },
+        createComponent: config => {
+          switch (config.config.value) {
+            case '@P .FirstName':
+              return renderField(regionChildrenResolved[0]);
+            case '@P .MiddleName':
+              return renderField(regionChildrenResolved[1]);
+            case '@P .LastName':
+              return renderField(regionChildrenResolved[2]);
+            case '@P .Email':
+              return renderField(regionChildrenResolved[3]);
+            case '@P .PhoneNumber':
+              return renderField(regionChildrenResolved[4]);
+            case '@P .ServiceDate':
+              return renderField(regionChildrenResolved[5]);
+            default:
+              break;
+          }
+        }
+      };
+    }
+  };
+
+  const regionAChildren = pyReviewRaw.children[0].children.map(child => {
+    return props.getPConnect().createComponent(child);
+  });
+  const regionBChildren = pyReviewRaw.children[1].children.map(child => {
+    return props.getPConnect().createComponent(child);
+  });
+
+  return <PegaDxilMyTwoColumnForm {...props} {...args} >
+        {regionAChildren}
+        {regionBChildren}
+      </PegaDxilMyTwoColumnForm>;
+};
+
+BasePegaDxilMyTwoColumnForm.args = {};

package/tests/assets/sdk-r/components/createAll/custom-sdk/template/Pega_DXIL_MyTwoColumnForm/index.tsx

@@ -0,0 +1,63 @@
+import { PropsWithChildren, ReactElement } from 'react';
+import { Grid, GridSize } from '@material-ui/core';
+import { makeStyles } from '@material-ui/core/styles';
+
+import StyledPegaDxilMyTwoColumnFormWrapper from './styles';
+import { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
+
+interface PegaDxilMyTwoColumnFormProps 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'
+  }
+}));
+
+// Duplicated runtime code from React SDK
+
+// 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 PegaDxilMyTwoColumnForm(props: PropsWithChildren<PegaDxilMyTwoColumnFormProps>) {
+  const classes = useStyles();
+
+  const { children, templateCol = '1fr 1fr' } = props;
+  const childrenToRender = children as ReactElement[];
+
+  if (childrenToRender.length !== 2) {
+    // eslint-disable-next-line no-console
+    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 (
+    <StyledPegaDxilMyTwoColumnFormWrapper>
+    <Grid container spacing={1}>
+      <Grid item xs={12} md={aSize} className={classes.colStyles}>
+        {childrenToRender[0]}
+      </Grid>
+      <Grid item xs={12} md={bSize} className={classes.colStyles}>
+        {childrenToRender[1]}
+      </Grid>
+    </Grid>
+    </StyledPegaDxilMyTwoColumnFormWrapper>
+  );
+}

package/tests/assets/sdk-r/components/createAll/custom-sdk/template/Pega_DXIL_MyTwoColumnForm/mock.ts

@@ -0,0 +1,132 @@
+export const pyReviewRaw = {
+    name: 'CollectInformation',
+    type: 'View',
+    config: {
+      template: 'DefaultForm',
+      ruleClass: 'OM5W9U-SampleApp-Work-Test',
+      localeReference: '@LR OM5W9U-SAMPLEAPP-WORK-TEST!VIEW!COLLECTINFORMATION',
+      context: '@P .pyViewContext'
+    },
+    children: [
+      {
+        name: 'A',
+        type: 'Region',
+        children: [
+          {
+            type: 'TextInput',
+            config: {
+              value: '@P .FirstName',
+              label: '@L First Name'
+            }
+          },
+          {
+            type: 'TextInput',
+            config: {
+              value: '@P .MiddleName',
+              label: '@L Middle Name'
+            }
+          },
+          {
+            type: 'TextInput',
+            config: {
+              value: '@P .LastName',
+              label: '@L Last Name'
+            }
+          }
+        ]
+      },
+      {
+        name: 'B',
+        type: 'Region',
+        children: [
+          {
+            type: 'Email',
+            config: {
+              value: '@P .Email',
+              label: '@L Email'
+            }
+          },
+          {
+            type: 'Phone',
+            config: {
+              value: '@P .PhoneNumber',
+              label: '@L Phone Number',
+              datasource: {
+                source: '@DATASOURCE D_pyCountryCallingCodeList.pxResults',
+                fields: {
+                  value: '@P .pyCallingCode'
+                }
+              }
+            }
+          },
+          {
+            type: 'Date',
+            config: {
+              value: '@P .ServiceDate',
+              label: '@L Service Date'
+            }
+          }
+        ]
+      }
+    ],
+    classID: 'OM5W9U-SampleApp-Work-Test'
+  };
+  
+  export const regionChildrenResolved = [
+    {
+      readOnly: undefined,
+      value: 'John',
+      label: 'First Name',
+      hasSuggestions: false
+    },
+    {
+      readOnly: undefined,
+      value: 'Din',
+      label: 'Middle Name',
+      hasSuggestions: false
+    },
+    {
+      readOnly: undefined,
+      value: 'Doe',
+      label: 'Last Name',
+      hasSuggestions: false
+    },
+    {
+      readOnly: undefined,
+      value: 'John@doe.com',
+      label: 'Email',
+      hasSuggestions: false
+    },
+    {
+      readOnly: undefined,
+      value: '+16397975093',
+      label: 'Phone Number',
+      datasource: {
+        fields: {
+          value: undefined
+        },
+        source: [
+          {
+            value: '+1'
+          },
+          {
+            value: '+91'
+          },
+          {
+            value: '+48'
+          },
+          {
+            value: '+44'
+          }
+        ]
+      },
+      hasSuggestions: false
+    },
+    {
+      readOnly: undefined,
+      value: '2023-01-25',
+      label: 'Service Date',
+      hasSuggestions: false
+    }
+  ];
+  

package/tests/assets/sdk-r/components/createAll/custom-sdk/template/Pega_DXIL_MyTwoColumnForm/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/template/_template.md

@@ -0,0 +1,6 @@
+# The **custom-sdk/template** directory
+
+The **src/components/custom-sdk/template** directory contains the code for the custom **template** components you want to create and use with the **React SDK**.
+
+When you run the **npm run  create** command to create new _template_ 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/template**.

package/tests/assets/sdk-r/components/createAll/custom-sdk/widget/Pega_DXIL_MyCaseWidget/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_MyCaseWidget/config.json

@@ -0,0 +1,23 @@
+{
+  "name": "Pega_DXIL_MyCaseWidget",
+  "label": "My Case Widget",
+  "description": "My Case Widget",
+  "organization": "Pega",
+  "version": "0.0.1",
+  "library": "DXIL",
+  "allowedApplications": [],
+  "componentKey": "Pega_DXIL_MyCaseWidget",
+  "type": "Widget",
+  "subtype": "CASE",
+  "icon": "OneColumnPage.svg",
+  "properties": [
+   {
+      "name": "label",
+      "label": "Label value",
+      "format": "TEXT"
+    }
+  ],
+  "defaultConfig": {
+     "label": "@L My Case Widget"
+  }
+}

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

@@ -0,0 +1,68 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import PegaDxilMyCaseWidget from './index';
+import { historyData } from './mock';
+
+window.PCore = {
+  ...window.PCore,
+  getDataApiUtils: () : any => {
+    return {
+      getData: (): any => {
+        return new Promise(resolve => {
+          resolve(historyData);
+        });
+      }
+    }
+  },
+  getConstants: (): any => {
+    return {
+      CASE_INFO: {
+        CASE_INFO_ID: 'caseInfo.ID'
+      }
+    };
+  }
+}
+
+const meta: Meta<typeof PegaDxilMyCaseWidget> = {
+  title: 'PegaDxilMyCaseWidget',
+  component: PegaDxilMyCaseWidget,
+  excludeStories: /.*Data$/
+};
+
+export default meta;
+type Story = StoryObj<typeof PegaDxilMyCaseWidget>;
+
+export const BasePegaDxilMyCaseWidget: Story = (args) => {
+
+  const props = {
+    label: 'Case history',
+
+    getPConnect: () => {
+      return {
+        getValue: value => {
+          return value;
+        },
+        getContextName: () => {
+          return 'app/primary_1';
+        },
+        getLocalizedValue: value => {
+          return value;
+        },
+        getActionsApi: () => {
+          return {
+            updateFieldValue: () => {/* nothing */},
+            triggerFieldChange: () => {/* nothing */}
+          };
+        },
+        ignoreSuggestion: () => {/* nothing */},
+        acceptSuggestion: () => {/* nothing */},
+        setInheritedProps: () => {/* nothing */},
+        resolveConfigProps: () => {/* nothing */}
+      };
+    }
+  };
+
+  return <PegaDxilMyCaseWidget {...props} {...args} />;
+};
+
+BasePegaDxilMyCaseWidget.args = {};