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

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

@@ -0,0 +1,256 @@
+import { useState } from 'react';
+
+import type { Meta, StoryObj } from '@storybook/react';
+
+import PegaDxilMyForm from './index';
+
+window.PCore = {
+  ...window.PCore,
+  getErrorHandler: (): any => {
+    return {
+      getGenericFailedMessage() {
+        /* nothing */
+      }
+    }
+  },
+  getConstants: (): any => {
+    return {
+      CASE_INFO: {
+        INSTRUCTIONS: ""
+      }
+    }
+}
+}
+
+const meta: Meta<typeof PegaDxilMyForm> = {
+  title: 'PegaDxilMyForm',
+  component: PegaDxilMyForm,
+  excludeStories: /.*Data$/,
+  parameters: {
+    type: 'Form'
+  }
+};
+
+export default meta;
+type Story = StoryObj<typeof PegaDxilMyForm>;
+
+export const BasePegaDxilMyForm: Story = (args) => {
+
+  const [firstName, setFirstName] = useState('John');
+  const [middleName, setMiddleName] = useState('');
+  const [lastName, setLastName] = useState('Joe');
+  const [phone, setPhone] = useState('+16397975093');
+  const [suffix, setSuffix] = useState('');
+  const [email, setEmail] = useState('john@doe.com');
+
+  const props = {
+    NumCols: "1",
+    template: 'DefaultForm',
+
+     getPConnect: () => {
+      return {
+        getChildren: () => {
+          return [
+            {
+              getPConnect: () => {
+                return {
+                  getChildren: () => {
+                    return [
+                      {
+                        readOnly: undefined,
+                        placeholder: 'First Name',
+                        value: firstName,
+                        label: 'First Name',
+                        hasSuggestions: false,
+                        onChange: val => {
+                          setFirstName(val.target.value);
+                        },
+                        getPConnect: () => {
+                          return {
+                            getActionsApi: () => {
+                              return {
+                                updateFieldValue: () => {/* nothing */},
+                                triggerFieldChange: () => {/* nothing */}
+                              };
+                            },
+                            getStateProps: () => {
+                              return { value: '.firstname' };
+                            }
+                          };
+                        }
+                      },
+                      {
+                        readOnly: undefined,
+                        placeholder: 'Middle Name',
+                        value: middleName,
+                        label: 'Middle Name',
+                        hasSuggestions: false,
+                        onChange: val => {
+                          setMiddleName(val.target.value);
+                        },
+                        getPConnect: () => {
+                          return {
+                            getActionsApi: () => {
+                              return {
+                                updateFieldValue: () => {/* nothing */},
+                                triggerFieldChange: () => {/* nothing */}
+                              };
+                            },
+                            getStateProps: () => {
+                              return { value: '.middlename' };
+                            }
+                          };
+                        }
+                      },
+
+                      {
+                        value: lastName,
+                        label: 'Last Name',
+                        required: true,
+                        placeholder: 'Last Name',
+                        testId: '77587239BF4C54EA493C7033E1DBF636',
+                        hasSuggestions: false,
+                        onChange: val => {
+                          setLastName(val.target.value);
+                        },
+                        getPConnect: () => {
+                          return {
+                            getActionsApi: () => {
+                              return {
+                                updateFieldValue: () => {/* nothing */},
+                                triggerFieldChange: () => {/* nothing */}
+                              };
+                            },
+                            getStateProps: () => {
+                              return { value: '.lastname' };
+                            }
+                          };
+                        }
+                      },
+
+                      {
+                        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.value);
+                        },
+                        onBlur: () => {
+                          /* nothing */
+                        }
+                      },
+
+                      {
+                        value: suffix,
+                        label: 'Suffix',
+                        placeholder: 'Select...',
+                        listType: 'associated',
+                        datasource: [
+                          {
+                            key: 'Sr',
+                            value: 'Sr'
+                          },
+                          {
+                            key: 'Jr',
+                            value: 'Jr'
+                          },
+                          {
+                            key: 'III',
+                            value: 'III'
+                          },
+                          {
+                            key: 'IV',
+                            value: 'IV'
+                          },
+                          {
+                            key: 'V',
+                            value: 'V'
+                          }
+                        ],
+                        testId: '56E6DDD1CB6CEC596B433440DFB21C17',
+                        hasSuggestions: false,
+                        deferDatasource: false,
+                        getPConnect: () => {
+                          return {
+                            getContextName: () => {
+                              return null;
+                            },
+                            getDataObject: () => {
+                              return null;
+                            },
+                            getActionsApi: () => {
+                              return {
+                                updateFieldValue: (propName, value) => {
+                                  setSuffix(value);
+                                },
+                                triggerFieldChange: () => {
+                                  /* nothing */
+                                }
+                              };
+                            },
+                            getStateProps: () => {
+                              return {
+                                value: ''
+                              };
+                            }
+                          };
+                        },
+                        onChange: val => {
+                          setSuffix(val.target.value);
+                        }
+                      },
+
+                      {
+                        value: email,
+                        label: 'Email',
+                        required: true,
+                        testId: 'CE8AE9DA5B7CD6C3DF2929543A9AF92D',
+                        hasSuggestions: false,
+                        onChange: val => {
+                          setEmail(val.target.value);
+                        }
+                      }
+                    ];
+                  }
+                };
+              }
+            }
+          ];
+        },
+        getValue: (val) => {
+          return val;
+        },
+        getCurrentView: () => {
+          return "";
+        },
+        getCurrentClassID: () => {
+          return "";
+        }
+      };
+    }
+  };
+
+  return <PegaDxilMyForm {...props} {...args} />;
+};
+
+BasePegaDxilMyForm.args = {}

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

@@ -0,0 +1,75 @@
+import { createElement, PropsWithChildren } from 'react';
+
+import { getInstructions } from '@pega/react-sdk-components/lib/components/helpers/template-utils';
+import createPConnectComponent from '@pega/react-sdk-components/lib/bridge/react_pconnect';
+import connectToState from '@pega/react-sdk-components/lib/components/helpers/state-utils';
+
+import { getKeyForMappedField, mapStateToProps } from './utils';
+import { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
+
+import './DefaultForm.css';
+import StyledPegaDxilMyFormWrapper from "./styles";
+
+interface PegaDxilMyFormProps extends PConnProps {
+  // If any, enter additional props that only exist on this component
+  NumCols: string;
+  instructions: string;
+}
+
+const Child = connectToState(mapStateToProps)(props => {
+  const { key, visibility, ...rest } = props;
+
+  return createElement(createPConnectComponent(), { ...rest, key, visibility });
+});
+
+// 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 PegaDxilMyForm(props: PropsWithChildren<PegaDxilMyFormProps>) {
+  const { getPConnect, NumCols = '1' } = props;
+  const instructions = getInstructions(getPConnect(), props.instructions);
+
+  let divClass: string;
+
+  const numCols = NumCols || '1';
+  switch (numCols) {
+    case '1':
+      divClass = 'psdk-default-form-one-column';
+      break;
+    case '2':
+      divClass = 'psdk-default-form-two-column';
+      break;
+    case '3':
+      divClass = 'psdk-default-form-three-column';
+      break;
+    default:
+      divClass = 'psdk-default-form-one-column';
+      break;
+  }
+
+  // debugger;
+
+  // repoint the children because they are in a region and we need to not render the region
+  // to take the children and create components for them, put in an array and pass as the
+  // defaultForm kids
+  const arChildren = getPConnect().getChildren()[0].getPConnect().getChildren();
+  const dfChildren = arChildren?.map(kid => <Child key={getKeyForMappedField(kid)} {...kid} />);
+
+  return (
+    <StyledPegaDxilMyFormWrapper>
+    <>
+      {instructions && (
+        <div className='psdk-default-form-instruction-text'>
+          {/* server performs sanitization method for instructions html content */}
+          {/* eslint-disable react/no-danger */}
+          <div key='instructions' id='instruction-text' 
+          dangerouslySetInnerHTML={{ __html: instructions }} 
+          />
+        </div>
+      )}
+      <div className={divClass}>{dfChildren}</div>
+    </>
+    </StyledPegaDxilMyFormWrapper>
+  );
+}

package/tests/assets/sdk-r/components/createAll/custom-sdk/template/Pega_DXIL_MyForm/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/Pega_DXIL_MyForm/utils.ts

@@ -0,0 +1,33 @@
+import { v4 as uuidv4 } from 'uuid';
+
+export const mapStateToProps: any = (_, ownProps) => {
+  const { getPConnect } = ownProps;
+
+  return {
+    visibility: getPConnect().getComputedVisibility(),
+    getPConnect
+  };
+};
+
+export const getKeyForMappedField = field => {
+  if (Array.isArray(field)) {
+    return field
+      .map(item => {
+        return getKeyForMappedField(item);
+      })
+      .join('__');
+  }
+
+  const pConnect = field?.getPConnect?.();
+
+  if (pConnect?.meta?.type && pConnect?.meta?.config?.name) {
+    return `${pConnect.meta.type}_${pConnect.meta.config.name}`;
+  }
+
+  // Using label as a fallback if name is not defined.
+  if (pConnect?.meta?.type && pConnect?.meta?.config?.label) {
+    return `${pConnect.meta.type}_${pConnect.meta.config.label}`;
+  }
+
+  return uuidv4();
+};

package/tests/assets/sdk-r/components/createAll/custom-sdk/template/Pega_DXIL_MyPage/OneColumn.tsx

@@ -0,0 +1,32 @@
+import { Grid } from "@material-ui/core";
+import { makeStyles } from '@material-ui/core/styles';
+
+interface OneColumnProps{
+  // If any, enter additional props that only exist on this component
+  children: any[]
+}
+
+const useStyles = makeStyles((/* theme */) => ({
+  colStyles: {
+    display: "grid",
+    gap: "1rem",
+    alignContent: "baseline",
+  },
+}));
+
+
+export default function OneColumn(props: OneColumnProps) {
+  const classes = useStyles();
+
+  const { children} = props;
+
+  return (
+    <Grid container spacing={2}>
+      <Grid item xs={12} className={classes.colStyles}>
+        {children.map(child => { return child; } )}
+      </Grid>
+    </Grid>
+  )
+}
+
+

package/tests/assets/sdk-r/components/createAll/custom-sdk/template/Pega_DXIL_MyPage/OneColumnPage.svg

@@ -0,0 +1,28 @@
+<?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  icon</title>
+    <g id="Views" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Artboard-Copy-2" transform="translate(-38.000000, -207.000000)">
+            <g id="1-col--icon" transform="translate(38.000000, 207.000000)">
+                <rect id="bg" stroke="#A5A8BC" stroke-width="0.5" fill="#E7E9EB" x="0.25" y="0.25" width="99.5" height="69.5"></rect>
+                <g id="white" transform="translate(3.000000, 3.000000)" fill="#FFFFFF">
+                    <rect id="Rectangle" x="0" y="0" width="94" height="66.5"></rect>
+                </g>
+                <g id="gray" transform="translate(6.000000, 6.000000)" fill="#8084A7">
+                    <rect id="Rectangle" x="0" y="0" width="88" height="7.8"></rect>
+                    <rect id="Rectangle-Copy-18" x="0" y="11.7" width="88" height="7.8"></rect>
+                    <rect id="Rectangle-Copy-19" x="0" y="23.4" width="88" height="7.8"></rect>
+                    <rect id="Rectangle-Copy-20" x="0" y="35.1" width="88" height="7.8"></rect>
+                    <rect id="Rectangle-Copy-21" x="0" y="46.8" width="88" height="7.8"></rect>
+                    <rect id="Rectangle-Copy-22" x="0" y="58.5" width="88" height="5"></rect>
+                </g>
+                <g id="labels" transform="translate(39.000000, 11.000000)">
+                    <circle id="Oval-Copy-3" fill="#FFFFFF" cx="10.5" cy="10.8076923" r="10.5"></circle>
+                    <text id="A" font-family="OpenSans-Semibold, Open Sans" font-size="11" font-weight="500" fill="#56566F">
+                        <tspan x="6.75" y="14">A</tspan>
+                    </text>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

package/tests/assets/sdk-r/components/createAll/custom-sdk/template/Pega_DXIL_MyPage/config.json

@@ -0,0 +1,32 @@
+{
+  "name": "Pega_DXIL_MyPage",
+  "label": "My Page",
+  "description": "My Page",
+  "organization": "Pega",
+  "version": "0.0.1",
+  "library": "DXIL",
+  "allowedApplications": [],
+  "componentKey": "Pega_DXIL_MyPage",
+  "type": "Template",
+  "subtype": "PAGE",
+  "icon": "OneColumnPage.svg",
+  "properties": [
+    {
+      "name": "useConfigurableLayout",
+      "label": "Use inline layout for insights",
+      "format": "BOOLEAN"
+    },
+    {
+      "name": "enableGetNextWork",
+      "label": "Enable Get next work",
+      "format": "BOOLEAN"
+    },
+    {
+      "name": "A",
+      "label": "Region A",
+      "format": "CONTENTPICKER",
+      "addTypeList": ["Widgets", "Views", "Insights"]
+    }
+  ],
+  "defaultConfig": {}
+}

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

@@ -0,0 +1,79 @@
+/* eslint-disable react/no-unstable-nested-components */
+import type { Meta, StoryObj } from '@storybook/react';
+
+import AppAnnouncement from "@pega/react-sdk-components/lib/components/widget/AppAnnouncement";
+
+import PegaDxilMyPage from './index';
+import { pyHome1Resolved, pyHome1Raw } from './mock';
+
+const meta: Meta<typeof PegaDxilMyPage> = {
+  title: 'PegaDxilMyPage',
+  component: PegaDxilMyPage,
+  excludeStories: /.*Data$/,
+};
+
+export default meta;
+type Story = StoryObj<typeof PegaDxilMyPage>;
+
+export const BasePegaDxilMyPage: Story = (args) => {
+  
+  const configProps = pyHome1Resolved.children[0].children[0].config;
+
+  const props = {
+    getPConnect: () => {
+      return {
+        getStateProps: () => {
+          return {};
+        },
+        getActionsApi: () => {
+          return {
+            getNextWork: () => {
+              return new Promise(resolve => {
+                resolve({});
+              });
+            },
+            updateFieldValue: () => {/* nothing */},
+            triggerFieldChange: () => {/* nothing */}
+          };
+        },
+        getChildren: () => {
+          return pyHome1Raw.children;
+        },
+        getComponentName: () => {
+          return '';
+        },
+        getLocalizedValue: value => {
+          return value;
+        },
+        getRawMetadata: () => {
+          return pyHome1Raw;
+        },
+        createComponent: config => {
+         if(config.type === 'AppAnnouncement') {
+              return (
+                <AppAnnouncement
+                  key='announcement'
+                  header='Announcements'
+                  description={configProps.description}
+                  datasource={configProps.datasource}
+                  whatsnewlink={configProps.whatsnewlink}
+                />
+              );
+          }
+        },
+        ignoreSuggestion: () => {/* nothing */},
+        acceptSuggestion: () => {/* nothing */},
+        setInheritedProps: () => {/* nothing */},
+        resolveConfigProps: () => {/* nothing */}
+      };
+    }
+  };
+
+  const regionAChildren = pyHome1Raw.children[0].children.map(child => {
+   return props.getPConnect().createComponent(child);
+  });
+
+  return <PegaDxilMyPage {...props} {...args} >{regionAChildren}</PegaDxilMyPage>;
+};
+
+BasePegaDxilMyPage.args = {};

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

@@ -0,0 +1,29 @@
+import { getComponentFromMap } from '@pega/react-sdk-components/lib/bridge/helpers/sdk_component_map';
+
+import StyledPegaDxilMyPageWrapper from './styles';
+import { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
+
+interface PegaDxilMyPageProps 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.
+ */
+// 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 PegaDxilMyPage(props: PegaDxilMyPageProps) {
+  // Get emitted components from map (so we can get any override that may exist)
+  const OneColumn = getComponentFromMap('OneColumn');
+
+  return (
+      <StyledPegaDxilMyPageWrapper>
+      <OneColumn
+       {...props}
+      />
+      </StyledPegaDxilMyPageWrapper>
+  );
+}