@pega/dx-component-builder-sdk 8.23.16 → 8.23.17

package/src/tasks/create/templates/SDK-React/template/DETAILS-region/mock.stories.js.mustache

@@ -109,6 +109,19 @@ export const pyReviewRaw = {
           label: "First Name",
           hasSuggestions: false,
           displayMode: "LABELS_LEFT",
+          getPConnect: () => {
+            return {
+              getActionsApi: () => {
+                return {
+                  updateFieldValue: () => {/* nothing */},
+                  triggerFieldChange: () => {/* nothing */}
+                };
+              },
+              getStateProps: () => {
+                return { value: '.firstname' };
+              }
+            };
+          }
         },
         {
           readOnly: undefined,
@@ -117,6 +130,19 @@ export const pyReviewRaw = {
           label: "Middle Name",
           hasSuggestions: false,
           displayMode: "LABELS_LEFT",
+          getPConnect: () => {
+            return {
+              getActionsApi: () => {
+                return {
+                  updateFieldValue: () => {/* nothing */},
+                  triggerFieldChange: () => {/* nothing */}
+                };
+              },
+              getStateProps: () => {
+                return { value: '.middlename' };
+              }
+            };
+          }
         },
         {
           readOnly: undefined,
@@ -125,6 +151,19 @@ export const pyReviewRaw = {
           label: "Last Name",
           hasSuggestions: false,
           displayMode: "LABELS_LEFT",
+          getPConnect: () => {
+            return {
+              getActionsApi: () => {
+                return {
+                  updateFieldValue: () => {/* nothing */},
+                  triggerFieldChange: () => {/* nothing */}
+                };
+              },
+              getStateProps: () => {
+                return { value: '.lastname' };
+              }
+            };
+          }
         },
         {
           value: "john@doe.com",
@@ -133,6 +172,19 @@ export const pyReviewRaw = {
           testId: "CE8AE9DA5B7CD6C3DF2929543A9AF92D",
           hasSuggestions: false,
           displayMode: "LABELS_LEFT",
+          getPConnect: () => {
+            return {
+              getActionsApi: () => {
+                return {
+                  updateFieldValue: () => {/* nothing */},
+                  triggerFieldChange: () => {/* nothing */}
+                };
+              },
+              getStateProps: () => {
+                return { value: '.middlename' };
+              }
+            };
+          }
         },
         {
           readOnly: undefined,
@@ -140,6 +192,19 @@ export const pyReviewRaw = {
           label: "Phone",
           displayMode: "LABELS_LEFT",
           hasSuggestions: false,
+          getPConnect: () => {
+            return {
+              getActionsApi: () => {
+                return {
+                  updateFieldValue: () => {/* nothing */},
+                  triggerFieldChange: () => {/* nothing */}
+                };
+              },
+              getStateProps: () => {
+                return { value: '.middlename' };
+              }
+            };
+          }
         },
         {
           readOnly: undefined,
@@ -179,12 +244,31 @@ export const pyReviewRaw = {
               getComponentName: () => {
                 return "radio";
               },
+              getContextName: () => {
+                return 'app/primary_1';
+              },
               getConfigProps: () => {
                 return {};
               },
               getDataObject: () => {
                 return {};
               },
+              getLocaleRuleNameFromKeys: (localeClass, localeContext, localeName) => {
+                return `${localeClass}!${localeContext}!${localeName}`;
+              },
+              getCaseInfo: () => {
+                return {
+                  getClassName: () => {
+                    return 'DIXL-MediaCo-Work-NewService';
+                  }
+                };
+              },
+              getRawMetadata: () => {
+                return {};
+              },
+              getLocalizedValue: val => {
+                return val;
+              },
             };
           },
         },
@@ -195,6 +279,19 @@ export const pyReviewRaw = {
           label: "Middle Name",
           hasSuggestions: false,
           displayMode: "LABELS_LEFT",
+          getPConnect: () => {
+            return {
+              getActionsApi: () => {
+                return {
+                  updateFieldValue: () => {/* nothing */},
+                  triggerFieldChange: () => {/* nothing */}
+                };
+              },
+              getStateProps: () => {
+                return { value: '.middlename' };
+              }
+            };
+          }
         },
         {
           readOnly: undefined,
@@ -203,6 +300,19 @@ export const pyReviewRaw = {
           label: "Last Name",
           hasSuggestions: false,
           displayMode: "LABELS_LEFT",
+          getPConnect: () => {
+            return {
+              getActionsApi: () => {
+                return {
+                  updateFieldValue: () => {/* nothing */},
+                  triggerFieldChange: () => {/* nothing */}
+                };
+              },
+              getStateProps: () => {
+                return { value: '.lastname' };
+              }
+            };
+          }
         },
         {
           value: "john@doe.com",
@@ -211,6 +321,19 @@ export const pyReviewRaw = {
           testId: "CE8AE9DA5B7CD6C3DF2929543A9AF92D",
           hasSuggestions: false,
           displayMode: "LABELS_LEFT",
+          getPConnect: () => {
+            return {
+              getActionsApi: () => {
+                return {
+                  updateFieldValue: () => {/* nothing */},
+                  triggerFieldChange: () => {/* nothing */}
+                };
+              },
+              getStateProps: () => {
+                return { value: '.middlename' };
+              }
+            };
+          }
         },
         {
           readOnly: undefined,
@@ -218,11 +341,24 @@ export const pyReviewRaw = {
           label: "Phone",
           displayMode: "LABELS_LEFT",
           hasSuggestions: false,
+          getPConnect: () => {
+            return {
+              getActionsApi: () => {
+                return {
+                  updateFieldValue: () => {/* nothing */},
+                  triggerFieldChange: () => {/* nothing */}
+                };
+              },
+              getStateProps: () => {
+                return { value: '.middlename' };
+              }
+            };
+          }
         },
         {
           readOnly: undefined,
           placeholder: "Price",
-          value: "90.89",
+          value: "90.99",
           label: "Price",
           hasSuggestions: false,
           displayMode: "LABELS_LEFT",
@@ -257,29 +393,48 @@ export const pyReviewRaw = {
               getComponentName: () => {
                 return "radio";
               },
+              getContextName: () => {
+                return 'app/primary_1';
+              },
               getConfigProps: () => {
                 return {};
               },
               getDataObject: () => {
                 return {};
               },
+              getLocaleRuleNameFromKeys: (localeClass, localeContext, localeName) => {
+                return `${localeClass}!${localeContext}!${localeName}`;
+              },
+              getCaseInfo: () => {
+                return {
+                  getClassName: () => {
+                    return 'DIXL-MediaCo-Work-NewService';
+                  }
+                };
+              },
+              getRawMetadata: () => {
+                return {};
+              },
+              getLocalizedValue: val => {
+                return val;
+              },
             };
           },
         },
         {
           caseOpConfig: {
-            label: "Create operator",
+            label: "Update operator",
             createLabel: "Created",
             updateLabel: "Updated",
-            updateDateTime: "2023-03-10T15:45:56.919Z",
-            createDateTime: "2023-03-10T15:45:40.154Z",
+            updateDateTime: "2023-03-10T12:53:04.670Z",
+            createDateTime: "2023-03-10T12:52:20.054Z",
             updateOperator: {
-              userId: "rep@mediaco",
-              userName: "representative",
+              userId: "User.DigV2",
+              userName: "User DigV2",
             },
             createOperator: {
-              userId: "rep@mediaco",
-              userName: "representative",
+              userId: "User.DigV2",
+              userName: "User DigV2",
             },
           },
         },
@@ -287,4 +442,4 @@ export const pyReviewRaw = {
     },
   ],
   classID: "MyCo-MyCompon-Work-MyComponents",
-};
+};

package/src/tasks/create/templates/SDK-React/template/FORM/demo.stories.jsx.mustache

@@ -43,7 +43,7 @@ export const Base{{COMPONENT_CLASS_NAME}} = () => {
     NumCols: "1",
     template: 'DefaultForm',
 
-    getPConnect: () => {
+     getPConnect: () => {
       return {
         getChildren: () => {
           return [
@@ -60,6 +60,19 @@ export const Base{{COMPONENT_CLASS_NAME}} = () => {
                         hasSuggestions: false,
                         onChange: val => {
                           setFirstName(val.target.value);
+                        },
+                        getPConnect: () => {
+                          return {
+                            getActionsApi: () => {
+                              return {
+                                updateFieldValue: () => {/* nothing */},
+                                triggerFieldChange: () => {/* nothing */}
+                              };
+                            },
+                            getStateProps: () => {
+                              return { value: '.firstname' };
+                            }
+                          };
                         }
                       },
                       {
@@ -70,6 +83,19 @@ export const Base{{COMPONENT_CLASS_NAME}} = () => {
                         hasSuggestions: false,
                         onChange: val => {
                           setMiddleName(val.target.value);
+                        },
+                        getPConnect: () => {
+                          return {
+                            getActionsApi: () => {
+                              return {
+                                updateFieldValue: () => {/* nothing */},
+                                triggerFieldChange: () => {/* nothing */}
+                              };
+                            },
+                            getStateProps: () => {
+                              return { value: '.middlename' };
+                            }
+                          };
                         }
                       },
 
@@ -82,6 +108,19 @@ export const Base{{COMPONENT_CLASS_NAME}} = () => {
                         hasSuggestions: false,
                         onChange: val => {
                           setLastName(val.target.value);
+                        },
+                        getPConnect: () => {
+                          return {
+                            getActionsApi: () => {
+                              return {
+                                updateFieldValue: () => {/* nothing */},
+                                triggerFieldChange: () => {/* nothing */}
+                              };
+                            },
+                            getStateProps: () => {
+                              return { value: '.lastname' };
+                            }
+                          };
                         }
                       },
 
@@ -212,4 +251,4 @@ export const Base{{COMPONENT_CLASS_NAME}} = () => {
       <{{COMPONENT_CLASS_NAME}} {...props}></{{COMPONENT_CLASS_NAME}}>
     </>
   );
-};
+};

package/src/tasks/create/templates/SDK-React/template/FORM/index.tsx.mustache

@@ -1,19 +1,28 @@
-/* eslint-disable react/no-danger */
 import React, { createElement } from 'react';
-import PropTypes from 'prop-types';
 
 import { getInstructions } from './utils';
 import createPConnectComponent from '@pega/react-sdk-components/lib/bridge/react_pconnect';
+
 import './DefaultForm.css';
 
 import Styled{{COMPONENT_CLASS_NAME}}Wrapper from "./styles";
 
+//  Can't use {{COMPONENT_CLASS_NAME}}Props until getPConnect().getChildren()[0] is fixed
+// interface {{COMPONENT_CLASS_NAME}}Props extends PConnProps {
+//   // If any, enter additional props that only exist on this componentName
+//   NumCols?: string,
+//   instructions?: string,
+//   // eslint-disable-next-line react/no-unused-prop-types
+//   children: Array<any>
+// }
+
+
 // 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 {{COMPONENT_CLASS_NAME}}(props) {
-  const { getPConnect, NumCols } = props;
+export default function {{COMPONENT_CLASS_NAME}}(props /* : {{COMPONENT_CLASS_NAME}}Props */) {
+  const { getPConnect, NumCols = '1' } = props;
   const instructions = getInstructions(getPConnect(), props.instructions);
 
   let divClass: string;
@@ -49,11 +58,12 @@ export default function {{COMPONENT_CLASS_NAME}}(props) {
       {instructions && (
         <div className='psdk-default-form-instruction-text'>
           {/* server performs sanitization method for instructions html content */}
+          { /* eslint-disable react/no-danger */ }
           <div key="instructions" 
-    {{! pick new delimiteres for mustache }}
+    {{! pick new delimiters for mustache }}
     {{=<% %>=}}
           dangerouslySetInnerHTML={{ __html: instructions }} 
-    <%={{ }}=%>     {{! revert delimiteres for mustache }}
+    <%={{ }}=%>     {{! revert delimiters for mustache }}
           />
         </div>
       )}
@@ -62,12 +72,3 @@ export default function {{COMPONENT_CLASS_NAME}}(props) {
     </Styled{{COMPONENT_CLASS_NAME}}Wrapper>
   );
 }
-
-{{COMPONENT_CLASS_NAME}}.defaultProps = {
-  NumCols: '1',
-};
-
-{{COMPONENT_CLASS_NAME}}.propTypes = {
-  // children: PropTypes.arrayOf(PropTypes.node).isRequired,
-  NumCols: PropTypes.string,
-};

package/src/tasks/create/templates/SDK-React/template/FORM/utils.ts.mustache

@@ -1,5 +1,6 @@
 //  This file is adapted from React components/Templates/utils.js
-declare const PCore: any;
+// declare const PCore: any;
+
 export function getAllFields(pConnect: any) {
   const metadata = pConnect.getRawMetadata();
   let allFields = [];

package/src/tasks/create/templates/SDK-React/template/FORM-region/demo.stories.jsx.mustache

@@ -31,25 +31,25 @@ const renderField = resolvedProps => {
     />
     </MuiPickersUtilsProvider>
 
-{{! pick new delimiteres for mustache }}
+{{! pick new delimiters for mustache }}
 {{=<% %>=}}
 
   if (label === 'Email')
-    val = <TextField type='email' value={value} size='small' variant='outlined' style={{ fontSize: '14px' }} label={label} onChange={onChange}></TextField>;
+    val = <TextField type='email' fullWidth value={value} size='small' variant='outlined' style={{ fontSize: '14px' }} label={label} onChange={onChange}></TextField>;
 
   if (label === 'First Name' || label === 'Last Name' || label === 'Middle Name')
-    val = <TextField value={value} size='small' variant='outlined' style={{ fontSize: '14px' }} label={label} onChange={onChange}></TextField>;
+    val = <TextField value={value} fullWidth size='small' variant='outlined' style={{ fontSize: '14px' }} label={label} onChange={onChange}></TextField>;
 
   if (label === 'Phone Number')
-    val = <MuiPhoneNumber value={value} variant='outlined' size='small' style={{ fontSize: '14px' }} defaultCountry='us' label={label} onChange={onChange}></MuiPhoneNumber>;
+    val = <MuiPhoneNumber value={value} fullWidth variant='outlined' size='small' style={{ fontSize: '14px' }} defaultCountry='us' label={label} onChange={onChange}></MuiPhoneNumber>;
 
-<%={{ }}=%>     {{! revert delimiteres for mustache }}
+<%={{ }}=%>     {{! revert delimiters for mustache }}
 
   if (variant === 'inline') {
     val = value || <span aria-hidden='true'>&ndash;&ndash;</span>;
   }
 
-  return val;
+  return <span key={label}>{val}</span>;
 };
 
 export const Base{{COMPONENT_CLASS_NAME}} = () => {
@@ -180,4 +180,4 @@ export const Base{{COMPONENT_CLASS_NAME}} = () => {
       </{{COMPONENT_CLASS_NAME}}>
     </>
   );
-};
+};

package/src/tasks/create/templates/SDK-React/template/FORM-region/index.tsx.mustache

@@ -1,11 +1,19 @@
 
 import React from "react";
-import PropTypes from "prop-types";
 import { Grid, GridSize } from "@material-ui/core";
 import { makeStyles } from '@material-ui/core/styles';
+import type { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
+
 
 import Styled{{COMPONENT_CLASS_NAME}}Wrapper from './styles';
 
+interface {{COMPONENT_CLASS_NAME}}Props extends PConnProps {
+  // If any, enter additional props that only exist on this componentName
+  children: Array<any>,
+  templateCol: string
+}
+
+
 const useStyles = makeStyles(() => ({
   colStyles: {
     display: "grid",
@@ -19,10 +27,10 @@ const useStyles = makeStyles(() => ({
 
 // 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 {{COMPONENT_CLASS_NAME}}(props) {
+export default function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}Props) {
   const classes = useStyles();
 
-  const {children, templateCol} = props;
+  const {children, templateCol = '1fr 1fr'} = props;
 
   if (children.length !== 2) {
     // eslint-disable-next-line no-console
@@ -55,15 +63,3 @@ export default function {{COMPONENT_CLASS_NAME}}(props) {
  )
 
 }
-
-{{COMPONENT_CLASS_NAME}}.defaultProps = {
-  templateCol: "1fr 1fr",
-  // icon: ""
-};
-
-{{COMPONENT_CLASS_NAME}}.propTypes = {
-  children: PropTypes.arrayOf(PropTypes.node).isRequired,
-  // title: PropTypes.string,
-  templateCol: PropTypes.string,
-  // icon: PropTypes.string
-};

package/src/tasks/create/templates/SDK-React/template/PAGE/OneColumn.tsx.mustache

@@ -1,8 +1,12 @@
 import React from "react";
-import PropTypes from "prop-types";
 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: Array<any>
+}
+
 const useStyles = makeStyles((/* theme */) => ({
   colStyles: {
     display: "grid",
@@ -12,7 +16,7 @@ const useStyles = makeStyles((/* theme */) => ({
 }));
 
 
-export default function OneColumn(props) {
+export default function OneColumn(props: OneColumnProps) {
   const classes = useStyles();
 
   const { children} = props;
@@ -26,7 +30,4 @@ export default function OneColumn(props) {
   )
 }
 
-OneColumn.propTypes = {
-  children: PropTypes.arrayOf(PropTypes.node).isRequired,
-  // template: PropTypes.string.isRequired
-};
+

package/src/tasks/create/templates/SDK-React/template/PAGE/index.tsx.mustache

@@ -1,17 +1,24 @@
 
 import React from "react";
-import PropTypes from 'prop-types';
+import type { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
+
 
 import OneColumn from './OneColumn';
 
 import Styled{{COMPONENT_CLASS_NAME}}Wrapper from './styles';
 
+interface {{COMPONENT_CLASS_NAME}}Props extends PConnProps {
+  // If any, enter additional props that only exist on this componentName
+  children: Array<any>
+}
+
+
 
 // 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 {{COMPONENT_CLASS_NAME}}(props) {
+export default function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}Props) {
 
     return (
       <Styled{{COMPONENT_CLASS_NAME}}Wrapper>
@@ -22,10 +29,3 @@ export default function {{COMPONENT_CLASS_NAME}}(props) {
   );
 
 }
-
-{{COMPONENT_CLASS_NAME}}.defaultProps = {
-  children: PropTypes.arrayOf(PropTypes.node).isRequired,
-};
-
-{{COMPONENT_CLASS_NAME}}.propTypes = {
-};

package/src/tasks/create/templates/SDK-React/widget/CASE/index.tsx.mustache

@@ -1,6 +1,5 @@
 
 import React, { useState, useRef, useEffect } from "react";
-import PropTypes from "prop-types";
 import { withStyles, Theme, createStyles } from '@material-ui/core/styles';
 import Table from '@material-ui/core/Table';
 import TableBody from '@material-ui/core/TableBody';
@@ -13,7 +12,15 @@ import { Utils } from '@pega/react-sdk-components/lib/components/helpers/utils';
 
 import Styled{{COMPONENT_CLASS_NAME}}Wrapper from './styles';
 
-declare const PCore;
+import type { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
+
+// Remove this and use "real" PCore type once .d.ts is fixed (currently shows 2 errors)
+declare const PCore: any;
+
+
+interface {{COMPONENT_CLASS_NAME}}Props extends PConnProps {
+  // If any, enter additional props that only exist on this component  
+}
 
 const StyledTableCell = withStyles((theme: Theme) =>
   createStyles({
@@ -39,15 +46,15 @@ const StyledTableCell = withStyles((theme: Theme) =>
 
 // 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 {{COMPONENT_CLASS_NAME}}(props) {
+export default function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}Props) {
   const { getPConnect } = props;
   const thePConn = getPConnect();
   // let waitingForData = true;
 
   const displayedColumns = [
-    { label: thePConn.getLocalizedValue('Date'), type: "DateTime", fieldName: "pxTimeCreated" },
-    { label: thePConn.getLocalizedValue('Description'), type: "TextInput", fieldName: "pyMessageKey" },
-    { label: thePConn.getLocalizedValue('Performed by'), type: "TextInput", fieldName: "pyPerformer" }
+    { label: thePConn.getLocalizedValue('Date', '', ''), type: "DateTime", fieldName: "pxTimeCreated" },           // 2nd and 3rd args empty string until typedef marked correctly
+    { label: thePConn.getLocalizedValue('Description', '', ''), type: "TextInput", fieldName: "pyMessageKey" },    // 2nd and 3rd args empty string until typedef marked correctly
+    { label: thePConn.getLocalizedValue('Performed by', '', ''), type: "TextInput", fieldName: "pyPerformer" }     // 2nd and 3rd args empty string until typedef marked correctly
    ];
 
   const rowData: any = useRef([]);
@@ -55,7 +62,7 @@ export default function {{COMPONENT_CLASS_NAME}}(props) {
   const [waitingForData, setWaitingForData] = useState<boolean>(true);
 
 
-  const caseID = thePConn.getValue(PCore.getConstants().CASE_INFO.CASE_INFO_ID);
+  const caseID = thePConn.getValue(PCore.getConstants().CASE_INFO.CASE_INFO_ID, '');  // 2nd arg empty string until typedef marked correctly
   const dataViewName = "D_pyWorkHistory";
   const context = thePConn.getContextName();
 
@@ -172,7 +179,3 @@ export default function {{COMPONENT_CLASS_NAME}}(props) {
     </Styled{{COMPONENT_CLASS_NAME}}Wrapper>
   );
 }
-
-{{COMPONENT_CLASS_NAME}}.propTypes = {
-  getPConnect: PropTypes.func.isRequired
-};