@pega/dx-component-builder-sdk 0.23.14 → 0.23.16

package/tests/assets/sdk-r/components/createAll/custom-sdk/field/Pega_DXIL_MyURL/demo.stories.tsx

@@ -13,7 +13,7 @@ const meta: Meta<typeof PegaDxilMyUrl> = {
 export default meta;
 type Story = StoryObj<typeof PegaDxilMyUrl>;
 
-export const BasePegaDxilMyUrl: Story = (args) => {
+export const BasePegaDxilMyUrl: Story = args => {
   const [value, setValue] = useState(configProps.value);
 
   const props = {
@@ -33,8 +33,12 @@ export const BasePegaDxilMyUrl: Story = (args) => {
         }
       };
     },
-    onChange: (event) => { setValue(event.target.value); },
-    onBlur: () => { return configProps.value; }
+    onChange: event => {
+      setValue(event.target.value);
+    },
+    onBlur: () => {
+      return configProps.value;
+    }
   };
 
   return <PegaDxilMyUrl {...props} {...args} />;
@@ -50,5 +54,5 @@ BasePegaDxilMyUrl.args = {
   status: configProps.status,
   hideLabel: configProps.hideLabel,
   displayMode: configProps.displayMode,
-  validatemessage: configProps.validatemessage,
+  validatemessage: configProps.validatemessage
 };

package/tests/assets/sdk-r/components/createAll/custom-sdk/field/Pega_DXIL_MyURL/index.tsx

@@ -11,7 +11,6 @@ interface PegaDxilMyUrlProps extends PConnFieldProps {
 // 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 PegaDxilMyUrl(props: PegaDxilMyUrlProps) {
   // Get emitted components from map (so we can get any override that may exist)
   const FieldValueList = getComponentFromMap('FieldValueList');
@@ -55,22 +54,22 @@ export default function PegaDxilMyUrl(props: PegaDxilMyUrlProps) {
 
   return (
     <StyledPegaDxilMyUrlWrapper>
-    <TextField
-      type='url'
-      fullWidth
-      variant='outlined'
-      helperText={helperTextToDisplay}
-      placeholder={placeholder ?? ''}
-      size='small'
-      required={required}
-      disabled={disabled}
-      onChange={onChange}
-      onBlur={!readOnly ? onBlur : undefined}
-      error={status === 'error'}
-      label={label}
-      value={value}
-      InputProps={{ inputProps: { ...testProp } }}
-    />
+      <TextField
+        type='url'
+        fullWidth
+        variant='outlined'
+        helperText={helperTextToDisplay}
+        placeholder={placeholder ?? ''}
+        size='small'
+        required={required}
+        disabled={disabled}
+        onChange={onChange}
+        onBlur={!readOnly ? onBlur : undefined}
+        error={status === 'error'}
+        label={label}
+        value={value}
+        InputProps={{ inputProps: { ...testProp } }}
+      />
      </StyledPegaDxilMyUrlWrapper>
   );
 }

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

@@ -1,7 +1,7 @@
 import type { Meta, StoryObj } from '@storybook/react';
 
-import PegaDxilMyDetails from "./index";
-import operatorDetails, { pyReviewRaw } from "./mock";
+import PegaDxilMyDetails from './index';
+import operatorDetails, { pyReviewRaw } from './mock';
 
 const meta: Meta<typeof PegaDxilMyDetails> = {
   title: 'PegaDxilMyDetails',
@@ -20,28 +20,28 @@ window.PCore = {
   getUserApi: (): any => {
     return {
       getOperatorDetails: () => {
-        return new Promise((resolve) => {
+        return new Promise(resolve => {
           resolve(operatorDetails);
         });
-      },
+      }
     };
   },
   getEnvironmentInfo: (): any => {
-  return {
-    getUseLocale: () => {
-      return 'en-GB';
-    },
-    getLocale: () => {
-      return 'en-GB';
-    }
-  };
-}
+    return {
+      getUseLocale: () => {
+        return 'en-GB';
+      },
+      getLocale: () => {
+        return 'en-GB';
+      }
+    };
+  }
 };
 
-export const BasePegaDxilMyDetails: Story = (args) => {
+export const BasePegaDxilMyDetails: Story = args => {
   const props = {
-    NumCols: "1",
-    template: "DefaultForm",
+    NumCols: '1',
+    template: 'DefaultForm',
     showHighlightedData: false,
     getPConnect: () => {
       return {
@@ -57,21 +57,21 @@ export const BasePegaDxilMyDetails: Story = (args) => {
         getInheritedProps: () => {
           return pyReviewRaw.config.inheritedProps;
         },
-        
+
         setInheritedProp: () => {
           /* nothing */
         },
         resolveConfigProps: () => {
           /* nothing */
-        },
+        }
       };
-    },
+    }
   };
 
   return <PegaDxilMyDetails {...props} {...args} />;
 };
 
 BasePegaDxilMyDetails.args = {
-  label: "Details",
-  showLabel: true,
-}
+  label: 'Details',
+  showLabel: true
+};

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

@@ -15,7 +15,6 @@ interface PegaDxilMyDetailsProps extends PConnProps {
 }
 // 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 PegaDxilMyDetails(props: PegaDxilMyDetailsProps) {
   // Get emitted components from map (so we can get any override that may exist)
   const FieldGroup = getComponentFromMap('FieldGroup');
@@ -55,25 +54,25 @@ export default function PegaDxilMyDetails(props: PegaDxilMyDetailsProps) {
   }
 
   return (
-  <StyledPegaDxilMyDetailsWrapper>
-    <FieldGroup name={propsToUse.showLabel ? propsToUse.label : ''}>
-      {showHighlightedData && highlightedDataArr.length > 0 && (
-        <Grid container spacing={1} style={{ padding: '0 0 1em' }}>
-          {highlightedDataArr.map((child, i) => (
-            <Grid item xs={12} key={`hf-${i + 1}`}>
+    <StyledPegaDxilMyDetailsWrapper>
+      <FieldGroup name={propsToUse.showLabel ? propsToUse.label : ''}>
+        {showHighlightedData && highlightedDataArr.length > 0 && (
+          <Grid container spacing={1} style={{ padding: '0 0 1em' }}>
+            {highlightedDataArr.map((child, i) => (
+              <Grid item xs={12} key={`hf-${i + 1}`}>
+                {child}
+              </Grid>
+            ))}
+          </Grid>
+        )}
+        <Grid container spacing={1}>
+          {children.map((child, i) => (
+            <Grid item xs={12} key={`r-${i + 1}`}>
               {child}
             </Grid>
           ))}
         </Grid>
-      )}
-      <Grid container spacing={1}>
-        {children.map((child, i) => (
-          <Grid item xs={12} key={`r-${i + 1}`}>
-            {child}
-          </Grid>
-        ))}
-      </Grid>
-    </FieldGroup>
+      </FieldGroup>
     </StyledPegaDxilMyDetailsWrapper>
   );
-}
+}

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

@@ -11,16 +11,16 @@ window.PCore = {
       getGenericFailedMessage() {
         /* nothing */
       }
-    }
+    };
   },
   getConstants: (): any => {
     return {
       CASE_INFO: {
-        INSTRUCTIONS: ""
+        INSTRUCTIONS: ''
       }
-    }
-}
-}
+    };
+  }
+};
 
 const meta: Meta<typeof PegaDxilMyForm> = {
   title: 'PegaDxilMyForm',
@@ -34,7 +34,7 @@ const meta: Meta<typeof PegaDxilMyForm> = {
 export default meta;
 type Story = StoryObj<typeof PegaDxilMyForm>;
 
-export const BasePegaDxilMyForm: Story = (args) => {
+export const BasePegaDxilMyForm: Story = args => {
 
   const [firstName, setFirstName] = useState('John');
   const [middleName, setMiddleName] = useState('');
@@ -44,10 +44,10 @@ export const BasePegaDxilMyForm: Story = (args) => {
   const [email, setEmail] = useState('john@doe.com');
 
   const props = {
-    NumCols: "1",
+    NumCols: '1',
     template: 'DefaultForm',
 
-     getPConnect: () => {
+    getPConnect: () => {
       return {
         getChildren: () => {
           return [
@@ -69,12 +69,19 @@ export const BasePegaDxilMyForm: Story = (args) => {
                           return {
                             getActionsApi: () => {
                               return {
-                                updateFieldValue: () => {/* nothing */},
-                                triggerFieldChange: () => {/* nothing */}
+                                updateFieldValue: () => {
+                                  /* nothing */
+                                },
+                                triggerFieldChange: () => {
+                                  /* nothing */
+                                }
                               };
                             },
                             getStateProps: () => {
                               return { value: '.firstname' };
+                            },
+                            getComputedVisibility: () => {
+                              return true;
                             }
                           };
                         }
@@ -92,12 +99,19 @@ export const BasePegaDxilMyForm: Story = (args) => {
                           return {
                             getActionsApi: () => {
                               return {
-                                updateFieldValue: () => {/* nothing */},
-                                triggerFieldChange: () => {/* nothing */}
+                                updateFieldValue: () => {
+                                  /* nothing */
+                                },
+                                triggerFieldChange: () => {
+                                  /* nothing */
+                                }
                               };
                             },
                             getStateProps: () => {
                               return { value: '.middlename' };
+                            },
+                            getComputedVisibility: () => {
+                              return true;
                             }
                           };
                         }
@@ -117,12 +131,19 @@ export const BasePegaDxilMyForm: Story = (args) => {
                           return {
                             getActionsApi: () => {
                               return {
-                                updateFieldValue: () => {/* nothing */},
-                                triggerFieldChange: () => {/* nothing */}
+                                updateFieldValue: () => {
+                                  /* nothing */
+                                },
+                                triggerFieldChange: () => {
+                                  /* nothing */
+                                }
                               };
                             },
                             getStateProps: () => {
                               return { value: '.lastname' };
+                            },
+                            getComputedVisibility: () => {
+                              return true;
                             }
                           };
                         }
@@ -157,6 +178,13 @@ export const BasePegaDxilMyForm: Story = (args) => {
                         },
                         onBlur: () => {
                           /* nothing */
+                        },
+                        getPConnect: () => {
+                          return {
+                            getComputedVisibility: () => {
+                              return true;
+                            }
+                          };
                         }
                       },
 
@@ -212,6 +240,9 @@ export const BasePegaDxilMyForm: Story = (args) => {
                               return {
                                 value: ''
                               };
+                            },
+                            getComputedVisibility: () => {
+                              return true;
                             }
                           };
                         },
@@ -228,6 +259,13 @@ export const BasePegaDxilMyForm: Story = (args) => {
                         hasSuggestions: false,
                         onChange: val => {
                           setEmail(val.target.value);
+                        },
+                        getPConnect: () => {
+                          return {
+                            getComputedVisibility: () => {
+                              return true;
+                            }
+                          };
                         }
                       }
                     ];
@@ -237,14 +275,14 @@ export const BasePegaDxilMyForm: Story = (args) => {
             }
           ];
         },
-        getValue: (val) => {
+        getValue: val => {
           return val;
         },
         getCurrentView: () => {
-          return "";
+          return '';
         },
         getCurrentClassID: () => {
-          return "";
+          return '';
         }
       };
     }
@@ -253,4 +291,4 @@ export const BasePegaDxilMyForm: Story = (args) => {
   return <PegaDxilMyForm {...props} {...args} />;
 };
 
-BasePegaDxilMyForm.args = {}
+BasePegaDxilMyForm.args = {};

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

@@ -25,7 +25,6 @@ const Child = connectToState(mapStateToProps)(props => {
 // 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);
@@ -63,8 +62,8 @@ export default function PegaDxilMyForm(props: PropsWithChildren<PegaDxilMyFormPr
         <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 key='instructions' id='instruction-text'
+          dangerouslySetInnerHTML={{ __html: instructions }}
           />
         </div>
       )}
@@ -72,4 +71,4 @@ export default function PegaDxilMyForm(props: PropsWithChildren<PegaDxilMyFormPr
     </>
     </StyledPegaDxilMyFormWrapper>
   );
-}
+}

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

@@ -1,7 +1,7 @@
 /* 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 AppAnnouncement from '@pega/react-sdk-components/lib/components/widget/AppAnnouncement';
 
 import PegaDxilMyPage from './index';
 import { pyHome1Resolved, pyHome1Raw } from './mock';
@@ -15,8 +15,7 @@ const meta: Meta<typeof PegaDxilMyPage> = {
 export default meta;
 type Story = StoryObj<typeof PegaDxilMyPage>;
 
-export const BasePegaDxilMyPage: Story = (args) => {
-  
+export const BasePegaDxilMyPage: Story = args => {
   const configProps = pyHome1Resolved.children[0].children[0].config;
 
   const props = {
@@ -32,8 +31,12 @@ export const BasePegaDxilMyPage: Story = (args) => {
                 resolve({});
               });
             },
-            updateFieldValue: () => {/* nothing */},
-            triggerFieldChange: () => {/* nothing */}
+            updateFieldValue: () => {
+              /* nothing */
+            },
+            triggerFieldChange: () => {
+              /* nothing */
+            }
           };
         },
         getChildren: () => {
@@ -49,31 +52,44 @@ export const BasePegaDxilMyPage: Story = (args) => {
           return pyHome1Raw;
         },
         createComponent: config => {
-         if(config.type === 'AppAnnouncement') {
-              return (
-                <AppAnnouncement
-                  key='announcement'
-                  header='Announcements'
-                  description={configProps.description}
-                  datasource={configProps.datasource}
-                  whatsnewlink={configProps.whatsnewlink}
-                />
-              );
+          if (config.type === 'AppAnnouncement') {
+            return (
+              <AppAnnouncement
+                key='announcement'
+                header='Announcements'
+                description={configProps.description}
+                datasource={configProps.datasource}
+                whatsnewlink={configProps.whatsnewlink}
+                getPConnect={(): typeof PConnect => ({}) as typeof PConnect}
+              />
+            );
           }
         },
-        ignoreSuggestion: () => {/* nothing */},
-        acceptSuggestion: () => {/* nothing */},
-        setInheritedProps: () => {/* nothing */},
-        resolveConfigProps: () => {/* nothing */}
+        ignoreSuggestion: () => {
+          /* nothing */
+        },
+        acceptSuggestion: () => {
+          /* nothing */
+        },
+        setInheritedProps: () => {
+          /* nothing */
+        },
+        resolveConfigProps: () => {
+          /* nothing */
+        }
       };
     }
   };
 
   const regionAChildren = pyHome1Raw.children[0].children.map(child => {
-   return props.getPConnect().createComponent(child);
+    return props.getPConnect().createComponent(child);
   });
 
-  return <PegaDxilMyPage {...props} {...args} >{regionAChildren}</PegaDxilMyPage>;
+  return (
+    <PegaDxilMyPage {...props} {...args}>
+      {regionAChildren}
+    </PegaDxilMyPage>
+  );
 };
 
 BasePegaDxilMyPage.args = {};

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

@@ -14,16 +14,15 @@ interface PegaDxilMyPageProps extends PConnProps {
 // 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}
-      />
+        <OneColumn
+        {...props}
+        />
       </StyledPegaDxilMyPageWrapper>
   );
-}
+}

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

@@ -1,43 +1,43 @@
 import type { Meta, StoryObj } from '@storybook/react';
 
-import PegaDxilMyTwoColumnDetails from "./index";
-import operatorDetails, { pyReviewRaw } from "./mock";
+import PegaDxilMyTwoColumnDetails from './index';
+import operatorDetails, { pyReviewRaw } from './mock';
 
 window.PCore = {
   ...window.PCore,
   getUserApi: (): any => {
-      return new Promise((resolve) => {
-        resolve(operatorDetails);
-      });
+    return new Promise(resolve => {
+      resolve(operatorDetails);
+    });
   },
   getEnvironmentInfo: (): any => {
     return {
       getUseLocale: () => {
-        return "en-US";
+        return 'en-US';
       },
       getLocale: () => {
         return 'en-GB';
       }
     };
   }
-}
+};
 
 const meta: Meta<typeof PegaDxilMyTwoColumnDetails> = {
   title: 'PegaDxilMyTwoColumnDetails',
   component: PegaDxilMyTwoColumnDetails,
   excludeStories: /.*Data$/,
   parameters: {
-    type: "DetailsRegion",
-  },
+    type: 'DetailsRegion'
+  }
 };
 
 export default meta;
 type Story = StoryObj<typeof PegaDxilMyTwoColumnDetails>;
 
-export const BasePegaDxilMyTwoColumnDetails: Story = (args) => {
+export const BasePegaDxilMyTwoColumnDetails: Story = args => {
   const props = {
-    NumCols: "2",
-    template: "DefaultForm",
+    NumCols: '2',
+    template: 'DefaultForm',
     getPConnect: () => {
       return {
         getChildren: () => {
@@ -57,9 +57,9 @@ export const BasePegaDxilMyTwoColumnDetails: Story = (args) => {
         },
         resolveConfigProps: () => {
           /* nothing */
-        },
+        }
       };
-    },
+    }
   };
 
   return <PegaDxilMyTwoColumnDetails {...props} {...args} />;
@@ -67,6 +67,6 @@ export const BasePegaDxilMyTwoColumnDetails: Story = (args) => {
 
 BasePegaDxilMyTwoColumnDetails.args = {
   showHighlightedData: false,
-  label: "Details Region",
-  showLabel: true,
-}
+  label: 'Details Region',
+  showLabel: true
+};

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

@@ -15,7 +15,6 @@ interface PegaDxilMyTwoColumnDetailsProps extends PConnProps {
 }
 // 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 PegaDxilMyTwoColumnDetails(props: PegaDxilMyTwoColumnDetailsProps) {
   // Get emitted components from map (so we can get any override that may exist)
   const FieldGroup = getComponentFromMap('FieldGroup');
@@ -55,25 +54,25 @@ export default function PegaDxilMyTwoColumnDetails(props: PegaDxilMyTwoColumnDet
   }
 
   return (
-  <StyledPegaDxilMyTwoColumnDetailsWrapper>
-    <FieldGroup name={propsToUse.showLabel ? propsToUse.label : ''}>
-      {showHighlightedData && highlightedDataArr.length > 0 && (
-        <Grid container spacing={1} style={{ padding: '0 0 1em' }}>
-          {highlightedDataArr.map((child, i) => (
-            <Grid item xs={6} key={`hf-${i + 1}`}>
+    <StyledPegaDxilMyTwoColumnDetailsWrapper>
+      <FieldGroup name={propsToUse.showLabel ? propsToUse.label : ''}>
+        {showHighlightedData && highlightedDataArr.length > 0 && (
+          <Grid container spacing={1} style={{ padding: '0 0 1em' }}>
+            {highlightedDataArr.map((child, i) => (
+              <Grid item xs={6} key={`hf-${i + 1}`}>
+                {child}
+              </Grid>
+            ))}
+          </Grid>
+        )}
+        <Grid container spacing={1}>
+          {children.map((child, i) => (
+            <Grid item xs={6} key={`r-${i + 1}`}>
               {child}
             </Grid>
           ))}
         </Grid>
-      )}
-      <Grid container spacing={1}>
-        {children.map((child, i) => (
-          <Grid item xs={6} key={`r-${i + 1}`}>
-            {child}
-          </Grid>
-        ))}
-      </Grid>
-    </FieldGroup>
+      </FieldGroup>
     </StyledPegaDxilMyTwoColumnDetailsWrapper>
   );
-}
+}