@pega/dx-component-builder-sdk 0.1.23 → 0.1.25

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

@@ -0,0 +1,34 @@
+const operatorDetails = {
+  data: {
+    "pzLoadTime": "March 13, 2023 10:58:15 AM EDT",
+    "pzPageNameHash": "_pa134221491644431pz",
+    "pyOperatorInfo": {
+        "pyUserName": "User DigV2",
+        "pyPosition": "",
+        "pyImageInsKey": "",
+        "pySkills": [
+            {
+                "pySkillName": "",
+                "pzIndexOwnerKey": "DATA-ADMIN-OPERATOR-ID USER.DIGV2",
+                "pySkillRating": 0
+            }
+        ],
+        "pyReportToUserName": "",
+        "pyReportTo": "",
+        "pyOrganization": "DXIL",
+        "pyTitle": "",
+        "pyLabel": "User.DigV2",
+        "pyEmailAddress": "User@DigV2",
+        "pyTelephone": ""
+    }
+  },
+  status: 200,
+  statusText: '',
+  headers: {
+    'content-length': '435',
+    'content-type': 'application/json;charset=UTF-8'
+  },
+  request: {}
+};
+
+export default operatorDetails;

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

@@ -0,0 +1,200 @@
+import { useState } from 'react';
+
+import { withKnobs } from '@storybook/addon-knobs';
+
+import {{COMPONENT_CLASS_NAME}} from './index.tsx';
+
+export default {
+  title: '{{COMPONENT_CLASS_NAME}}',
+  decorators: [withKnobs],
+  component: {{COMPONENT_CLASS_NAME}}
+};
+
+if (!window.PCore) {
+  window.PCore = {};
+}
+
+window.PCore = {
+  getErrorHandler() {
+    return {
+      getGenericFailedMessage() {
+        /* nothing */
+      }
+    };
+  }
+};
+
+export const Base{{COMPONENT_CLASS_NAME}} = () => {
+
+  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);
+                        }
+                      },
+                      {
+                        readOnly: undefined,
+                        placeholder: 'Middle Name',
+                        value: middleName,
+                        label: 'Middle Name',
+                        hasSuggestions: false,
+                        onChange: val => {
+                          setMiddleName(val.target.value);
+                        }
+                      },
+
+                      {
+                        value: lastName,
+                        label: 'Last Name',
+                        required: true,
+                        placeholder: 'Last Name',
+                        testId: '77587239BF4C54EA493C7033E1DBF636',
+                        hasSuggestions: false,
+                        onChange: val => {
+                          setLastName(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.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);
+                        }
+                      }
+                    ];
+                  }
+                };
+              }
+            }
+          ];
+        }
+      };
+    }
+  };
+
+  return (
+    <>
+      <{{COMPONENT_CLASS_NAME}} {...props}></{{COMPONENT_CLASS_NAME}}>
+    </>
+  );
+};

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

@@ -0,0 +1,183 @@
+import { useState } from 'react';
+import {{COMPONENT_CLASS_NAME}} from './index.tsx';
+import { pyReviewRaw } from './mock.stories';
+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';
+
+export default {
+  title: '{{COMPONENT_CLASS_NAME}}',
+  component: {{COMPONENT_CLASS_NAME}}
+};
+
+const renderField = resolvedProps => {
+  const { displayMode, value = '', label = '', onChange} = resolvedProps;
+
+  const variant = displayMode === 'LABELS_LEFT' ? 'inline' : 'stacked';
+  let val = '';
+  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>
+
+{{! pick new delimiteres for mustache }}
+{{=<% %>=}}
+
+  if (label === 'Email')
+    val = <TextField type='email' 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>;
+
+  if (label === 'Phone Number')
+    val = <MuiPhoneNumber value={value} variant='outlined' size='small' style={{ fontSize: '14px' }} defaultCountry='us' label={label} onChange={onChange}></MuiPhoneNumber>;
+
+<%={{ }}=%>     {{! revert delimiteres for mustache }}
+
+  if (variant === 'inline') {
+    val = value || <span aria-hidden='true'>&ndash;&ndash;</span>;
+  }
+
+  return val;
+};
+
+export const Base{{COMPONENT_CLASS_NAME}} = () => {
+  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 (
+    <>
+      <{{COMPONENT_CLASS_NAME}} {...props}>
+        {regionAChildren}
+        {regionBChildren}
+      </{{COMPONENT_CLASS_NAME}}>
+    </>
+  );
+};

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

@@ -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/src/tasks/index.js

@@ -1,5 +1,6 @@
 export { default as createComponent } from './create/index.js';
 export { default as overrideComponent } from './override/index.js';
+export { default as overrideAllComponents } from './override-all/index.js';
 export { default as deleteComponent } from './delete/index.js';
 export { default as deleteAllComponents } from './delete-all/index.js';
 export { default as mapAllComponents } from './map-all/index.js';

package/src/tasks/override/index.js

@@ -57,7 +57,7 @@ const checkAndCreateConfigComponentKey = async (targetDirectory) => {
       }
 
 
-      // stringify "4", makes the json string look like JSON in the file
+      // stringify "4", makes the json string look like JSON in the file, formated instead of a single line
       const configContent = JSON.stringify(configObj, null, 4);
 
       // update file
@@ -67,7 +67,9 @@ const checkAndCreateConfigComponentKey = async (targetDirectory) => {
   }
   catch (err) {
     // no config-ext.json file, so no update, which is ok
-    console.log(chalk.yellow("Component has no config file for extension."));
+    const arPaths = targetDirectory.split("/");
+    const compName = arPaths[arPaths.length-1] ;
+    console.log(chalk.yellow(`Component ${compName} has no config file for extension.`));
   }
 }