@pega/dx-component-builder-sdk 0.1.15 → 0.1.17

package/src/tasks/create/templates/Constellation/Field/Picklist/demo.stories.jsx.mustache

@@ -12,6 +12,7 @@ export default {
 };
 
 export const base{{COMPONENT_CLASS_NAME}} = () => {
+  // eslint-disable-next-line react-hooks/rules-of-hooks
   const [value, setValue] = useState(configProps.value);
 
   const props = {
@@ -22,7 +23,7 @@ export const base{{COMPONENT_CLASS_NAME}} = () => {
     datasource: configProps.datasource,
     testId: configProps.testId,
     hasSuggestions: configProps.hasSuggestions,
-    fieldMetadata: fieldMetadata,
+    fieldMetadata,
 
     getPConnect: () => {
       return {
@@ -32,8 +33,8 @@ export const base{{COMPONENT_CLASS_NAME}} = () => {
         getStateProps: () => {
           return stateProps;
         },
-        getLocalizedValue: value => {
-          return value;
+        getLocalizedValue: val => {
+          return val;
         },
         getLocaleRuleNameFromKeys: (localeClass, localeContext, localeName) => {
           return `${localeClass}!${localeContext}!${localeName}`;
@@ -50,16 +51,21 @@ export const base{{COMPONENT_CLASS_NAME}} = () => {
         },
         getActionsApi: () => {
           return {
-            updateFieldValue: (propName, value) => {
-              setValue(value);
+            updateFieldValue: (propName, theValue) => {
+              setValue(theValue);
             },
-            triggerFieldChange: () => {}
+            triggerFieldChange: () => {/* nothing */}
           };
         },
-        ignoreSuggestion: () => {},
-        acceptSuggestion: () => {},
-        setInheritedProps: () => {},
-        resolveConfigProps: () => {}
+        getValidationApi: () => {
+          return {
+            validate: () => {/* nothing */}
+          };
+        },
+        ignoreSuggestion: () => {/* nothing */},
+        acceptSuggestion: () => {/* nothing */},
+        setInheritedProps: () => {/* nothing */},
+        resolveConfigProps: () => {/* nothing */}
       };
     }
   };

package/src/tasks/create/templates/Constellation/Field/Text/demo.stories.jsx.mustache

@@ -12,7 +12,7 @@ export default {
 };
 
 export const base{{COMPONENT_CLASS_NAME}} = () => {
-
+  // eslint-disable-next-line react-hooks/rules-of-hooks
   const [value, setValue] = useState(configProps.value);
 
   const props = {
@@ -29,14 +29,16 @@ export const base{{COMPONENT_CLASS_NAME}} = () => {
         },
         getActionsApi: () => {
           return {
-            updateFieldValue: () => {},
-            triggerFieldChange: () => {}
+            updateFieldValue: (propName, theValue) => {
+              setValue(theValue);
+            },
+            triggerFieldChange: () => {/* nothing */}
           };
         },
-        ignoreSuggestion: () => {},
-        acceptSuggestion: () => {},
-        setInheritedProps: () => {},
-        resolveConfigProps: () => {}
+        ignoreSuggestion: () => {/* nothing */},
+        acceptSuggestion: () => {/* nothing */},
+        setInheritedProps: () => {/* nothing */},
+        resolveConfigProps: () => {/* nothing */}
       };
     }
   };

package/src/tasks/create/templates/Constellation/Field/Text-Email/demo.stories.jsx.mustache

@@ -1,4 +1,4 @@
-import { withKnobs, text, boolean } from '@storybook/addon-knobs';
+import { withKnobs } from '@storybook/addon-knobs';
 
 import {{COMPONENT_CLASS_NAME}} from './index.jsx';
 
@@ -19,7 +19,7 @@ export const base{{COMPONENT_CLASS_NAME}} = () => {
     helperText: configProps.helperText,
     testId: configProps.testId,
     hasSuggestions: configProps.hasSuggestions,
-    fieldMetadata: fieldMetadata,
+    fieldMetadata,
 
     getPConnect: () => {
       return {
@@ -28,14 +28,14 @@ export const base{{COMPONENT_CLASS_NAME}} = () => {
         },
         getActionsApi: () => {
           return {
-            updateFieldValue: () => {},
-            triggerFieldChange: () => {}
+            updateFieldValue: () => {/* nothing */},
+            triggerFieldChange: () => {/* nothing */}
           };
         },
-        ignoreSuggestion: () => {},
-        acceptSuggestion: () => {},
-        setInheritedProps: () => {},
-        resolveConfigProps: () => {}
+        ignoreSuggestion: () => {/* nothing */},
+        acceptSuggestion: () => {/* nothing */},
+        setInheritedProps: () => {/* nothing */},
+        resolveConfigProps: () => {/* nothing */}
       };
     }
   };

package/src/tasks/create/templates/Constellation/Field/Text-Input/demo.stories.jsx.mustache

@@ -19,7 +19,7 @@ export const base{{COMPONENT_CLASS_NAME}} = () => {
     helperText: configProps.helperText,
     testId: configProps.testId,
     hasSuggestions: configProps.hasSuggestions,
-    fieldMetadata: fieldMetadata,
+    fieldMetadata,
 
     getPConnect: () => {
       return {
@@ -28,14 +28,14 @@ export const base{{COMPONENT_CLASS_NAME}} = () => {
         },
         getActionsApi: () => {
           return {
-            updateFieldValue: () => {},
-            triggerFieldChange: () => {}
+            updateFieldValue: () => {/* nothing */},
+            triggerFieldChange: () => {/* nothing */}
           };
         },
-        ignoreSuggestion: () => {},
-        acceptSuggestion: () => {},
-        setInheritedProps: () => {},
-        resolveConfigProps: () => {}
+        ignoreSuggestion: () => {/* nothing */},
+        acceptSuggestion: () => {/* nothing */},
+        setInheritedProps: () => {/* nothing */},
+        resolveConfigProps: () => {/* nothing */}
       };
     }
   };

package/src/tasks/create/templates/Constellation/Field/Text-Paragraph/demo.stories.jsx.mustache

@@ -19,7 +19,7 @@ export const base{{COMPONENT_CLASS_NAME}} = () => {
     helperText: configProps.helperText,
     testId: configProps.testId,
     hasSuggestions: configProps.hasSuggestions,
-    fieldMetadata: fieldMetadata,
+    fieldMetadata,
 
     getPConnect: () => {
       return {
@@ -28,14 +28,14 @@ export const base{{COMPONENT_CLASS_NAME}} = () => {
         },
         getActionsApi: () => {
           return {
-            updateFieldValue: () => {},
-            triggerFieldChange: () => {}
+            updateFieldValue: () => {/* nothing */},
+            triggerFieldChange: () => {/* nothing */}
           };
         },
-        ignoreSuggestion: () => {},
-        acceptSuggestion: () => {},
-        setInheritedProps: () => {},
-        resolveConfigProps: () => {}
+        ignoreSuggestion: () => {/* nothing */},
+        acceptSuggestion: () => {/* nothing */},
+        setInheritedProps: () => {/* nothing */},
+        resolveConfigProps: () => {/* nothing */}
       };
     }
   };

package/src/tasks/create/templates/Constellation/Field/Text-Phone/demo.stories.jsx.mustache

@@ -26,14 +26,14 @@ export const base{{COMPONENT_CLASS_NAME}} = () => {
         },
         getActionsApi: () => {
           return {
-            updateFieldValue: () => {},
-            triggerFieldChange: () => {}
+            updateFieldValue: () => {/* nothing */},
+            triggerFieldChange: () => {/* nothing */}
           };
         },
-        ignoreSuggestion: () => {},
-        acceptSuggestion: () => {},
-        setInheritedProps: () => {},
-        resolveConfigProps: () => {}
+        ignoreSuggestion: () => {/* nothing */},
+        acceptSuggestion: () => {/* nothing */},
+        setInheritedProps: () => {/* nothing */},
+        resolveConfigProps: () => {/* nothing */}
       };
     }
   };

package/src/tasks/create/templates/Constellation/Field/Text-Phone/index.jsx.mustache

@@ -245,7 +245,7 @@ const {{COMPONENT_CLASS_NAME}} = props => {
 {{COMPONENT_CLASS_NAME}}.propTypes = {
   value: PropTypes.string,
   placeholder: PropTypes.string,
-  datasource: PropTypes.node,
+  datasource: PropTypes.objectOf(PropTypes.any),
   label: PropTypes.string.isRequired,
   hideLabel: PropTypes.bool,
   getPConnect: PropTypes.func.isRequired,

package/src/tasks/create/templates/Constellation/Field/Text-URL/demo.stories.jsx.mustache

@@ -26,14 +26,14 @@ export const base{{COMPONENT_CLASS_NAME}} = () => {
         },
         getActionsApi: () => {
           return {
-            updateFieldValue: () => {},
-            triggerFieldChange: () => {}
+            updateFieldValue: () => {/* nothing */},
+            triggerFieldChange: () => {/* nothing */}
           };
         },
-        ignoreSuggestion: () => {},
-        acceptSuggestion: () => {},
-        setInheritedProps: () => {},
-        resolveConfigProps: () => {}
+        ignoreSuggestion: () => {/* nothing */},
+        acceptSuggestion: () => {/* nothing */},
+        setInheritedProps: () => {/* nothing */},
+        resolveConfigProps: () => {/* nothing */}
       };
     }
   };

package/src/tasks/create/templates/Constellation/Field/Text-URL/index.jsx.mustache

@@ -3,7 +3,7 @@ import { Input, FieldValueList, Text } from "@pega/cosmos-react-core";
 import PropTypes from "prop-types";
 
 // includes in bundle
-import {formatExists,textFormatter, urlFormatter, suggestionHandler} from "./text-url";
+import {formatExists,textFormatter, urlFormatter} from "./text-url.jsx";
 import handleEvent from "./event-utils";
 import { suggestionsHandler } from './suggestions-handler';
 

package/src/tasks/create/templates/Constellation/Field/Text-URL/{text-url.js.mustache → text-url.jsx.mustache}

@@ -1,4 +1,5 @@
-import {EmailDisplay, PhoneDisplay, URLDisplay } from "@pega/cosmos-react-core";
+import { useState, useRef, React} from "react";
+import { EmailDisplay, PhoneDisplay, URLDisplay, Image, Button, Lightbox } from '@pega/cosmos-react-core';
 
 export const formatExists = (formatterVal) => {
     const formatterValues = [

package/src/tasks/create/templates/Constellation/Field/TimeofDay/demo.stories.jsx.mustache

@@ -1,4 +1,4 @@
-import { withKnobs, text, boolean } from '@storybook/addon-knobs';
+import { withKnobs } from '@storybook/addon-knobs';
 import { configProps, stateProps } from './mock.stories';
 import {{COMPONENT_CLASS_NAME}} from './index.jsx';
 
@@ -14,8 +14,13 @@ export const base{{COMPONENT_CLASS_NAME}} = () => {
       return {
         getActionsApi: () => {
           return {
-            updateFieldValue: () => {},
-            triggerFieldChange: () => {}
+            updateFieldValue: () => {/* nothing */},
+            triggerFieldChange: () => {/* nothing */}
+          };
+        },
+        getValidationApi: () => {
+          return {
+            validate: () => {/* nothing */}
           };
         },
         getStateProps: () => {
@@ -24,8 +29,8 @@ export const base{{COMPONENT_CLASS_NAME}} = () => {
         getConfigProps: () => {
           return configProps;
         },
-        ignoreSuggestion: () => {},
-        clearErrorMessages: () => {}
+        ignoreSuggestion: () => {/* nothing */},
+        clearErrorMessages: () => {/* nothing */}
       };
     },
     value: configProps.value,

package/src/tasks/create/templates/Constellation/Template/DETAILS/demo.stories.jsx.mustache

@@ -8,69 +8,20 @@ export default {
   component: {{COMPONENT_CLASS_NAME}}
 };
 
-const Template = args => {
-  const regionAChildren = pyReviewRaw.children[0].children.map(child => {
-    return Primary.args.getPConnect().createComponent(child);
-  });
-
-  return <{{COMPONENT_CLASS_NAME}} {...args}>{regionAChildren}</{{COMPONENT_CLASS_NAME}}>;
-};
-
-export const Primary = Template.bind({});
-
-Primary.args = {
-  template: 'MyCo_MyComponents_NewDetailsTemplate',
-  showHighlightedData: true,
-  label: 'Test Details',
-  showLabel: true,
-  getPConnect: () => {
-    return {
-      getChildren: () => {
-        return pyReviewRaw.children;
-      },
-      getRawMetadata: () => {
-        return pyReviewRaw;
-      },
-      getInheritedProps: () => {
-        return pyReviewRaw.config.inheritedProps;
-      },
-      createComponent: config => {
-        switch (config.config.value) {
-          case '@P .pyStatusWork':
-            return renderField(pyReviewResolved.highlightedData[0].config);
-          case '@P .pyID':
-            return renderField(pyReviewResolved.highlightedData[1].config);
-          case '@P .pxCreateDateTime':
-            return renderField(pyReviewResolved.highlightedData[2].config);
-          case '@USER .pxCreateOperator':
-            return renderField(pyReviewResolved.highlightedData[3].config);
-          case '@P .pySLADeadline':
-            return renderField(regionChildrenResolved[0]);
-          case '@P .pySLAGoal':
-            return renderField(regionChildrenResolved[1]);
-          case '@P .pySLAStartTime':
-            return renderField(regionChildrenResolved[2]);
-        }
-      },
-      setInheritedProp: () => {},
-      resolveConfigProps: () => {}
-    };
-  }
-};
-
 const renderField = resolvedProps => {
   const {
     displayAsStatus = false,
     displayMode,
     value = '',
     label = '',
+    // eslint-disable-next-line react-hooks/rules-of-hooks
     theme = useTheme()
   } = resolvedProps;
 
   const variant = displayMode === 'LABELS_LEFT' ? 'inline' : 'stacked';
 
   let val =
-    value != '' ? (
+    value !== '' ? (
       <Text variant='h1' as='span'>
         {value}
       </Text>
@@ -108,3 +59,60 @@ const renderField = resolvedProps => {
   }
   return <FieldValueList variant={variant} fields={[{ name: label, value: val }]} />;
 };
+
+export const base{{COMPONENT_CLASS_NAME}} = () => {
+  const props = {
+    template: 'MyCo_MyComponents_NewDetailsTemplate',
+    showHighlightedData: true,
+    label: 'Test Details',
+    showLabel: true,
+    getPConnect: () => {
+      return {
+        getChildren: () => {
+          return pyReviewRaw.children;
+        },
+        getRawMetadata: () => {
+          return pyReviewRaw;
+        },
+        getInheritedProps: () => {
+          return pyReviewRaw.config.inheritedProps;
+        },
+        createComponent: config => {
+          // eslint-disable-next-line default-case
+          switch (config.config.value) {
+            case '@P .pyStatusWork':
+              return renderField(pyReviewResolved.highlightedData[0].config);
+            case '@P .pyID':
+              return renderField(pyReviewResolved.highlightedData[1].config);
+            case '@P .pxCreateDateTime':
+              return renderField(pyReviewResolved.highlightedData[2].config);
+            case '@USER .pxCreateOperator':
+              return renderField(pyReviewResolved.highlightedData[3].config);
+            case '@P .pySLADeadline':
+              return renderField(regionChildrenResolved[0]);
+            case '@P .pySLAGoal':
+              return renderField(regionChildrenResolved[1]);
+            case '@P .pySLAStartTime':
+              return renderField(regionChildrenResolved[2]);
+          }
+        },
+        setInheritedProp: () => {
+          /* nothing */
+        },
+        resolveConfigProps: () => {
+          /* nothing */
+        }
+      };
+    }
+  };
+
+  const regionAChildren = pyReviewRaw.children[0].children.map(child => {
+    return props.getPConnect().createComponent(child);
+  });
+
+  return (
+    <>
+      <{{COMPONENT_CLASS_NAME}} {...props}>{regionAChildren}</{{COMPONENT_CLASS_NAME}}>
+    </>
+  );
+};

package/src/tasks/create/templates/Constellation/Template/DETAILS-region/demo.stories.jsx.mustache

@@ -8,77 +8,20 @@ export default {
   component: {{COMPONENT_CLASS_NAME}}
 };
 
-const Template = args => {
-  const regionAChildren = pyReviewRaw.children[0].children.map(child => {
-    return Primary.args.getPConnect().createComponent(child);
-  });
-  const regionBChildren = pyReviewRaw.children[1].children.map(child => {
-    return Primary.args.getPConnect().createComponent(child);
-  });
-
-  return (
-    <{{COMPONENT_CLASS_NAME}} {...args}>
-      {regionAChildren}
-      {regionBChildren}
-    </{{COMPONENT_CLASS_NAME}}>
-  );
-};
-
-export const Primary = Template.bind({});
-
-Primary.args = {
-  template: 'MyCo_MyComponents_NewDetailsTemplate',
-  showHighlightedData: true,
-  label: 'Test Details',
-  showLabel: true,
-  getPConnect: () => {
-    return {
-      getChildren: () => {
-        return pyReviewRaw.children;
-      },
-      getRawMetadata: () => {
-        return pyReviewRaw;
-      },
-      getInheritedProps: () => {
-        return pyReviewRaw.config.inheritedProps;
-      },
-      createComponent: config => {
-        switch (config.config.value) {
-          case '@P .pyStatusWork':
-            return renderField(pyReviewResolved.highlightedData[0].config);
-          case '@P .pyID':
-            return renderField(pyReviewResolved.highlightedData[1].config);
-          case '@P .pxCreateDateTime':
-            return renderField(pyReviewResolved.highlightedData[2].config);
-          case '@USER .pxCreateOperator':
-            return renderField(pyReviewResolved.highlightedData[3].config);
-          case '@P .pySLADeadline':
-            return renderField(regionChildrenResolved[0]);
-          case '@P .pySLAGoal':
-            return renderField(regionChildrenResolved[1]);
-          case '@P .pySLAStartTime':
-            return renderField(regionChildrenResolved[2]);
-        }
-      },
-      setInheritedProp: () => {},
-      resolveConfigProps: () => {}
-    };
-  }
-};
-
 const renderField = resolvedProps => {
   const {
     displayAsStatus = false,
     displayMode,
     value = '',
     label = '',
+    // eslint-disable-next-line react-hooks/rules-of-hooks
     theme = useTheme()
   } = resolvedProps;
 
   const variant = displayMode === 'LABELS_LEFT' ? 'inline' : 'stacked';
 
   let val =
-    value != '' ? (
+    value !== '' ? (
       <Text variant='h1' as='span'>
         {value}
       </Text>
@@ -116,3 +59,65 @@ const renderField = resolvedProps => {
   }
   return <FieldValueList variant={variant} fields={[{ name: label, value: val }]} />;
 };
+
+
+export const base{{COMPONENT_CLASS_NAME}} = () => {
+  const props = {
+    template: 'MyCo_MyComponents_NewDetailsTemplate',
+    showHighlightedData: true,
+    label: 'Test Details',
+    showLabel: true,
+    getPConnect: () => {
+      return {
+        getChildren: () => {
+          return pyReviewRaw.children;
+        },
+        getRawMetadata: () => {
+          return pyReviewRaw;
+        },
+        getInheritedProps: () => {
+          return pyReviewRaw.config.inheritedProps;
+        },
+        createComponent: config => {
+          // eslint-disable-next-line default-case
+          switch (config.config.value) {
+            case '@P .pyStatusWork':
+              return renderField(pyReviewResolved.highlightedData[0].config);
+            case '@P .pyID':
+              return renderField(pyReviewResolved.highlightedData[1].config);
+            case '@P .pxCreateDateTime':
+              return renderField(pyReviewResolved.highlightedData[2].config);
+            case '@USER .pxCreateOperator':
+              return renderField(pyReviewResolved.highlightedData[3].config);
+            case '@P .pySLADeadline':
+              return renderField(regionChildrenResolved[0]);
+            case '@P .pySLAGoal':
+              return renderField(regionChildrenResolved[1]);
+            case '@P .pySLAStartTime':
+              return renderField(regionChildrenResolved[2]);
+          }
+        },
+        setInheritedProp: () => {
+          /* nothing */
+        },
+        resolveConfigProps: () => {
+          /* nothing */
+        }
+      };
+    }
+  };
+
+  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/Constellation/Template/FORM/demo.stories.jsx.mustache

@@ -11,51 +11,13 @@ export default {
   component: {{COMPONENT_CLASS_NAME}}
 };
 
-const Template = args => {
-  const regionAChildren = pyReviewRaw.children[0].children.map(child => {
-    return Primary.args.getPConnect().createComponent(child);
-  });
-
-  return <{{COMPONENT_CLASS_NAME}} {...args}>{regionAChildren}</{{COMPONENT_CLASS_NAME}}>;
-};
-
-export const Primary = Template.bind({});
-
-Primary.args = {
-  NumCols: 1,
-  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]);
-        }
-      }
-    };
-  }
-};
-
 const renderField = resolvedProps => {
   const { displayMode, value = '', label = '' } = resolvedProps;
 
   const variant = displayMode === 'LABELS_LEFT' ? 'inline' : 'stacked';
 
   let val =
-    value != '' ? (
+    value !== '' ? (
       <Text variant='h1' as='span'>
         {value}
       </Text>
@@ -87,3 +49,45 @@ const renderField = resolvedProps => {
   }
   return <FieldValueList variant={variant} fields={[{ name: label, value: val }]} />;
 };
+
+
+export const base{{COMPONENT_CLASS_NAME}} = () => {
+  const props = {
+    NumCols: 1,
+    template: 'DefaultForm',
+    getPConnect: () => {
+      return {
+        getChildren: () => {
+          return pyReviewRaw.children;
+        },
+        createComponent: config => {
+          // eslint-disable-next-line default-case
+          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]);
+          }
+        }
+      };
+    }
+  };
+
+  const regionAChildren = pyReviewRaw.children[0].children.map(child => {
+    return props.getPConnect().createComponent(child);
+  });
+
+  return (
+      <>
+        <{{COMPONENT_CLASS_NAME}} {...props}>{regionAChildren}</{{COMPONENT_CLASS_NAME}}>
+      </>
+  );
+};