@pega/dx-component-builder-sdk 0.1.4 → 0.1.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pega/dx-component-builder-sdk",
-  "version": "0.1.4",
+  "version": "0.1.5",
   "description": "Utility for building custom UI components",
   "bin": "./bin/index.js",
   "scripts": {

package/src/tasks/create/templates/SDK-React/Field/Date/demo.stories.jsx.mustache

@@ -3,7 +3,7 @@ import { withKnobs } from '@storybook/addon-knobs';
 
 import { configProps, stateProps } from './mock.stories';
 
-import {{COMPONENT_CLASS_NAME}} from './index.jsx';
+import {{COMPONENT_CLASS_NAME}} from './index.tsx';
 
 export default {
   title: '{{COMPONENT_CLASS_NAME}}',

package/src/tasks/create/templates/SDK-React/Field/Date/index.tsx.mustache

@@ -6,8 +6,10 @@ import handleEvent from '@pega/react-sdk-components/lib/components/helpers/event
 import FieldValueList from '@pega/react-sdk-components/lib/components/designSystemExtensions/FieldValueList';
 import PropTypes from 'prop-types';
 
+
 import Styled{{COMPONENT_CLASS_NAME}}Wrapper from './styles';
 
+
 // Duplicated runtime code from React SDK
 
 // props passed in combination of props from property panel (config.json) and run time props from Constellation
@@ -88,7 +90,7 @@ export default function {{COMPONENT_CLASS_NAME}}(props: any) {
           InputProps={{ ...testProp }}
     <%={{ }}=%>     {{! revert delimiteres for mustache }}
         />
-      </MuiPickersUtilsProvider>    
+      </MuiPickersUtilsProvider>
     </Styled{{COMPONENT_CLASS_NAME}}Wrapper>
   );
 }

package/src/tasks/create/templates/SDK-React/Field/DateTime/demo.stories.jsx.mustache

@@ -3,7 +3,7 @@ import { withKnobs } from '@storybook/addon-knobs';
 
 import { configProps, stateProps } from './mock.stories';
 
-import {{COMPONENT_CLASS_NAME}} from './index.jsx';
+import {{COMPONENT_CLASS_NAME}} from './index.tsx';
 
 export default {
   title: '{{COMPONENT_CLASS_NAME}}',

package/src/tasks/create/templates/SDK-React/Field/DateTime/index.tsx.mustache

@@ -6,8 +6,10 @@ import handleEvent from '@pega/react-sdk-components/lib/components/helpers/event
 import FieldValueList from '@pega/react-sdk-components/lib/components/designSystemExtensions/FieldValueList';
 import PropTypes from 'prop-types';
 
+
 import Styled{{COMPONENT_CLASS_NAME}}Wrapper from './styles';
 
+
 // Duplicated runtime code from React SDK
 
 // props passed in combination of props from property panel (config.json) and run time props from Constellation
@@ -78,7 +80,7 @@ export default function {{COMPONENT_CLASS_NAME}}(props: any) {
           onAccept={handleAccept}
           data-test-id={testId}
         />
-      </MuiPickersUtilsProvider>    
+      </MuiPickersUtilsProvider>
     </Styled{{COMPONENT_CLASS_NAME}}Wrapper>
   );
 }

package/src/tasks/create/templates/SDK-React/Field/Text/demo.stories.jsx.mustache

@@ -1,4 +1,5 @@
-import {{COMPONENT_CLASS_NAME}} from './index.jsx';
+import { useState } from 'react';
+import {{COMPONENT_CLASS_NAME}} from './index.tsx';
 import { withKnobs } from '@storybook/addon-knobs';
 import { configProps } from './mock.stories';
 
@@ -9,9 +10,10 @@ export default {
 };
 
 export const Base{{COMPONENT_CLASS_NAME}} = () => {
+  const [value, setValue] = useState(configProps.value);
 
   const props = {
-    value: configProps.value,
+    value,
     placeholder: configProps.placeholder,
     label: configProps.label,
     testId: configProps.testId,
@@ -21,7 +23,21 @@ export const Base{{COMPONENT_CLASS_NAME}} = () => {
     required: configProps.required,
     readOnly: configProps.readOnly,
     displayMode: configProps.displayMode,
-    onchange: () => { return configProps.value; },
+    getPConnect: () => {
+      return {
+        getActionsApi: () => {
+          return {
+            updateFieldValue: (propName, theValue) => {
+              setValue(theValue);
+            }
+          };
+        },
+        getStateProps: () => {
+          return { value: '.name' };
+        }
+      };
+    },
+    onChange: (event) => { setValue(event.target.value); },
     onBlur: () => { return configProps.value; }
   };
 

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

@@ -1,4 +1,5 @@
-import {{COMPONENT_CLASS_NAME}} from './index.jsx';
+import { useState } from 'react';
+import {{COMPONENT_CLASS_NAME}} from './index.tsx';
 import { withKnobs } from '@storybook/addon-knobs';
 import { configProps } from './mock.stories';
 
@@ -9,9 +10,10 @@ export default {
 };
 
 export const Base{{COMPONENT_CLASS_NAME}} = () => {
- 
+  const [value, setValue] = useState(configProps.value);
+
   const props = {
-    value: configProps.value,
+    value,
     placeholder: configProps.placeholder,
     label: configProps.label,
     testId: configProps.testId,
@@ -21,7 +23,21 @@ export const Base{{COMPONENT_CLASS_NAME}} = () => {
     required: configProps.required,
     readOnly: configProps.readOnly,
     displayMode: configProps.displayMode,
-    onchange: () => { return configProps.value; },
+    getPConnect: () => {
+      return {
+        getActionsApi: () => {
+          return {
+            updateFieldValue: (propName, theValue) => {
+              setValue(theValue);
+            }
+          };
+        },
+        getStateProps: () => {
+          return { value: '.name' };
+        }
+      };
+    },
+    onChange: (event) => { setValue(event.target.value); },
     onBlur: () => { return configProps.value; }
   };
   return (

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

@@ -1,4 +1,5 @@
-import {{COMPONENT_CLASS_NAME}} from './index.jsx';
+import { useState } from 'react';
+import {{COMPONENT_CLASS_NAME}} from './index.tsx';
 import { withKnobs } from '@storybook/addon-knobs';
 import { configProps, fieldMetadata } from './mock.stories';
 
@@ -9,15 +10,31 @@ export default {
 };
 
 export const Base{{COMPONENT_CLASS_NAME}} = () => {
+  const [value, setValue] = useState(configProps.value);
+
   const props = {
-    value: configProps.value,
+    value,
     placeholder: configProps.placeholder,
     label: configProps.label,
     helperText: configProps.helperText,
     testId: configProps.testId,
     hasSuggestions: configProps.hasSuggestions,
     fieldMetadata,
-    onchange: () => { return configProps.value; },
+    getPConnect: () => {
+      return {
+        getActionsApi: () => {
+          return {
+            updateFieldValue: (propName, theValue) => {
+              setValue(theValue);
+            }
+          };
+        },
+        getStateProps: () => {
+          return { value: '.name' };
+        }
+      };
+    },
+    onChange: (event) => { setValue(event.target.value); },
     onBlur: () => { return configProps.value; }
   };
 

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

@@ -1,5 +1,5 @@
-
-import {{COMPONENT_CLASS_NAME}} from './index.jsx';
+import { useState } from 'react';
+import {{COMPONENT_CLASS_NAME}} from './index.tsx';
 import { configProps, fieldMetadata } from './mock.stories';
 import { withKnobs } from '@storybook/addon-knobs';
 
@@ -10,9 +10,10 @@ export default {
 };
 
 export const Base{{COMPONENT_CLASS_NAME}} = () => {
+  const [value, setValue] = useState(configProps.value);
 
   const props = {
-    value: configProps.value,
+    value,
     placeholder: configProps.placeholder,
     label: configProps.label,
     testId: configProps.testId,
@@ -23,7 +24,21 @@ export const Base{{COMPONENT_CLASS_NAME}} = () => {
     readOnly: configProps.readOnly,
     displayMode: configProps.displayMode,
     fieldMetadata,
-    onchange: () => { return configProps.value; },
+    getPConnect: () => {
+      return {
+        getActionsApi: () => {
+          return {
+            updateFieldValue: (propName, theValue) => {
+              setValue(theValue);
+            }
+          };
+        },
+        getStateProps: () => {
+          return { value: '.name' };
+        }
+      };
+    },
+    onChange: (event) => { setValue(event.target.value); },
     onBlur: () => { return configProps.value; }
   };
 

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

@@ -1,4 +1,5 @@
-import {{COMPONENT_CLASS_NAME}} from './index.jsx';
+import { useState } from 'react';
+import {{COMPONENT_CLASS_NAME}} from './index.tsx';
 import { withKnobs } from '@storybook/addon-knobs';
 import { configProps } from './mock.stories';
 
@@ -9,9 +10,10 @@ export default {
 };
 
 export const Base{{COMPONENT_CLASS_NAME}} = () => {
+  const [value, setValue] = useState(configProps.value);
  
   const props = {
-    value: configProps.value,
+    value,
     placeholder: configProps.placeholder,
     label: configProps.label,
     testId: configProps.testId,
@@ -21,7 +23,21 @@ export const Base{{COMPONENT_CLASS_NAME}} = () => {
     required: configProps.required,
     readOnly: configProps.readOnly,
     displayMode: configProps.displayMode,
-    onchange: () => { return configProps.value; },
+    getPConnect: () => {
+      return {
+        getActionsApi: () => {
+          return {
+            updateFieldValue: (propName, theValue) => {
+              setValue(theValue);
+            }
+          };
+        },
+        getStateProps: () => {
+          return { value: '.name' };
+        }
+      };
+    },
+    onChange: (event) => { setValue(event.target.value); },
     onBlur: () => { return configProps.value; }
   };
 

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

@@ -1,5 +1,6 @@
+import { useState } from 'react';
 import { withKnobs } from '@storybook/addon-knobs';
-import {{COMPONENT_CLASS_NAME}} from './index.jsx';
+import {{COMPONENT_CLASS_NAME}} from './index.tsx';
 import { configProps } from './mock.stories';
 
 export default {
@@ -9,9 +10,10 @@ export default {
 };
 
 export const Base{{COMPONENT_CLASS_NAME}} = () => {
+  const [value, setValue] = useState(configProps.value);
 
   const props = {
-    value: configProps.value,
+    value,
     placeholder: configProps.placeholder,
     label: configProps.label,
     testId: configProps.testId,
@@ -21,8 +23,22 @@ export const Base{{COMPONENT_CLASS_NAME}} = () => {
     required: configProps.required,
     readOnly: configProps.readOnly,
     displayMode: configProps.displayMode,
-    onchange: () => { return configProps.value; },
-    onBlur: ( return configProps.value; ) => {}
+    getPConnect: () => {
+      return {
+        getActionsApi: () => {
+          return {
+            updateFieldValue: (propName, theValue) => {
+              setValue(theValue);
+            }
+          };
+        },
+        getStateProps: () => {
+          return { value: '.name' };
+        }
+      };
+    },
+    onChange: (event) => { setValue(event.target.value); },
+    onBlur: () => { return configProps.value; }
   };
 
   return (

package/src/tasks/create/templates/SDK-React/Field/TimeofDay/demo.stories.jsx.mustache

@@ -3,7 +3,7 @@ import { withKnobs } from '@storybook/addon-knobs';
 
 import { configProps, stateProps } from './mock.stories';
 
-import {{COMPONENT_CLASS_NAME}} from './index.jsx';
+import {{COMPONENT_CLASS_NAME}} from './index.tsx';
 
 export default {
   title: '{{COMPONENT_CLASS_NAME}}',

package/src/tasks/create/templates/SDK-React/Field/TimeofDay/index.tsx.mustache

@@ -9,6 +9,7 @@ import PropTypes from 'prop-types';
 
 import Styled{{COMPONENT_CLASS_NAME}}Wrapper from './styles';
 
+
 // Duplicated runtime code from React SDK
 
 // props passed in combination of props from property panel (config.json) and run time props from Constellation

package/src/tasks/create/templates/SDK-React/Widget/CASE/demo.stories.jsx.mustache

@@ -0,0 +1,70 @@
+import { withKnobs } from '@storybook/addon-knobs';
+
+import { historyData } from './mock.stories';
+
+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.getConstants = () => {
+  return {
+    CASE_INFO: {
+      CASE_INFO_ID: 'caseInfo.ID'
+    }
+  };
+};
+
+window.PCore.getDataApiUtils = () => {
+  return {
+    getData: () => {
+      return new Promise(resolve => {
+        resolve(historyData);
+      });
+    }
+  };
+};
+
+export const Base{{COMPONENT_CLASS_NAME}} = () => {
+
+  const props = {
+    label: 'Case history',
+
+    getPConnect: () => {
+      return {
+        getValue: value => {
+          return value;
+        },
+        getContextName: () => {
+          return 'app/primary_1';
+        },
+        getLocalizedValue: value => {
+          return value;
+        },
+        getActionsApi: () => {
+          return {
+            updateFieldValue: () => {/* nothing */},
+            triggerFieldChange: () => {/* nothing */}
+          };
+        },
+        ignoreSuggestion: () => {/* nothing */},
+        acceptSuggestion: () => {/* nothing */},
+        setInheritedProps: () => {/* nothing */},
+        resolveConfigProps: () => {/* nothing */}
+      };
+    }
+  };
+
+  return (
+    <>
+      <{{COMPONENT_CLASS_NAME}} {...props} />
+    </>
+  );
+};

package/src/tasks/create/templates/SDK-React/Widget/CASE/mock.stories.js.mustache

@@ -0,0 +1,390 @@
+// eslint-disable-next-line import/prefer-default-export
+export const historyData = {
+  data: {
+    fetchDateTime: '2023-01-18T12:04:56.517Z',
+    pxObjClass: 'Pega-API-DataExploration-Data',
+    resultCount: 31,
+    data: [
+      {
+        pxTimeCreated: '2023-01-13T21:46:33.339Z',
+        pxObjClass: 'History-DXIL-DigV2-Work',
+        pyPerformer: 'User DigV2',
+        pxInsName: 'DXIL-DIGV2-WORK C-7430!20230113T214633.339 GMT',
+        pxLongitude: null,
+        pzInsKey: 'HISTORY-DXIL-DIGV2-WORK DXIL-DIGV2-WORK C-7430!20230113T214633.339 GMT',
+        pxHistoryForReference: 'DXIL-DIGV2-WORK C-7430',
+        pyMessageKey: "Assigned to User DigV2 to 'complete task' ",
+        pyMemo: null,
+        pxLatitude: null
+      },
+      {
+        pxTimeCreated: '2023-01-13T21:46:33.332Z',
+        pxObjClass: 'History-DXIL-DigV2-Work',
+        pyPerformer: 'User DigV2',
+        pxInsName: 'DXIL-DIGV2-WORK C-7430!20230113T214633.332 GMT',
+        pzInsKey: 'HISTORY-DXIL-DIGV2-WORK DXIL-DIGV2-WORK C-7430!20230113T214633.332 GMT',
+        pxLongitude: null,
+        pyMessageKey: "Assignment to 'complete task' completed by performing a 'EmbeddedData'.",
+        pxHistoryForReference: 'DXIL-DIGV2-WORK C-7430',
+        pyMemo: null,
+        pxLatitude: null
+      },
+      {
+        pxTimeCreated: '2023-01-13T21:46:32.005Z',
+        pxObjClass: 'History-DXIL-DigV2-Work',
+        pyPerformer: 'User DigV2',
+        pxInsName: 'DXIL-DIGV2-WORK C-7430!20230113T214632.005 GMT',
+        pzInsKey: 'HISTORY-DXIL-DIGV2-WORK DXIL-DIGV2-WORK C-7430!20230113T214632.005 GMT',
+        pxLongitude: null,
+        pxHistoryForReference: 'DXIL-DIGV2-WORK C-7430',
+        pyMessageKey: "Assigned to User DigV2 to 'complete task' ",
+        pyMemo: null,
+        pxLatitude: null
+      },
+      {
+        pxTimeCreated: '2023-01-13T21:46:31.998Z',
+        pxObjClass: 'History-DXIL-DigV2-Work',
+        pyPerformer: 'User DigV2',
+        pxInsName: 'DXIL-DIGV2-WORK C-7430!20230113T214631.998 GMT',
+        pzInsKey: 'HISTORY-DXIL-DIGV2-WORK DXIL-DIGV2-WORK C-7430!20230113T214631.998 GMT',
+        pxLongitude: null,
+        pxHistoryForReference: 'DXIL-DIGV2-WORK C-7430',
+        pyMessageKey: "Assignment to 'complete task' removed via ticket.",
+        pxLatitude: null,
+        pyMemo: null
+      },
+      {
+        pxTimeCreated: '2023-01-13T21:46:31.175Z',
+        pxObjClass: 'History-DXIL-DigV2-Work',
+        pyPerformer: 'User DigV2',
+        pxInsName: 'DXIL-DIGV2-WORK C-7430!20230113T214631.175 GMT',
+        pxLongitude: null,
+        pzInsKey: 'HISTORY-DXIL-DIGV2-WORK DXIL-DIGV2-WORK C-7430!20230113T214631.175 GMT',
+        pyMessageKey: "Assigned to User DigV2 to 'complete task' ",
+        pxHistoryForReference: 'DXIL-DIGV2-WORK C-7430',
+        pxLatitude: null,
+        pyMemo: null
+      },
+      {
+        pxTimeCreated: '2023-01-13T21:46:31.168Z',
+        pxObjClass: 'History-DXIL-DigV2-Work',
+        pyPerformer: 'User DigV2',
+        pxInsName: 'DXIL-DIGV2-WORK C-7430!20230113T214631.168 GMT',
+        pzInsKey: 'HISTORY-DXIL-DIGV2-WORK DXIL-DIGV2-WORK C-7430!20230113T214631.168 GMT',
+        pxLongitude: null,
+        pxHistoryForReference: 'DXIL-DIGV2-WORK C-7430',
+        pyMessageKey: "Assignment to 'complete task' completed by performing a 'EmbeddedData'.",
+        pyMemo: null,
+        pxLatitude: null
+      },
+      {
+        pxObjClass: 'History-DXIL-DigV2-Work',
+        pxTimeCreated: '2023-01-13T21:46:29.893Z',
+        pyPerformer: 'User DigV2',
+        pxInsName: 'DXIL-DIGV2-WORK C-7430!20230113T214629.893 GMT',
+        pzInsKey: 'HISTORY-DXIL-DIGV2-WORK DXIL-DIGV2-WORK C-7430!20230113T214629.893 GMT',
+        pxLongitude: null,
+        pxHistoryForReference: 'DXIL-DIGV2-WORK C-7430',
+        pyMessageKey: "Assigned to User DigV2 to 'complete task' ",
+        pyMemo: null,
+        pxLatitude: null
+      },
+      {
+        pxObjClass: 'History-DXIL-DigV2-Work',
+        pxTimeCreated: '2023-01-13T21:46:29.887Z',
+        pyPerformer: 'User DigV2',
+        pxInsName: 'DXIL-DIGV2-WORK C-7430!20230113T214629.887 GMT',
+        pxLongitude: null,
+        pzInsKey: 'HISTORY-DXIL-DIGV2-WORK DXIL-DIGV2-WORK C-7430!20230113T214629.887 GMT',
+        pxHistoryForReference: 'DXIL-DIGV2-WORK C-7430',
+        pyMessageKey: "Assignment to 'complete task' removed via ticket.",
+        pxLatitude: null,
+        pyMemo: null
+      },
+      {
+        pxTimeCreated: '2023-01-13T21:46:28.248Z',
+        pxObjClass: 'History-DXIL-DigV2-Work',
+        pyPerformer: 'User DigV2',
+        pxInsName: 'DXIL-DIGV2-WORK C-7430!20230113T214628.248 GMT',
+        pxLongitude: null,
+        pzInsKey: 'HISTORY-DXIL-DIGV2-WORK DXIL-DIGV2-WORK C-7430!20230113T214628.248 GMT',
+        pyMessageKey: "Assigned to User DigV2 to 'complete task' ",
+        pxHistoryForReference: 'DXIL-DIGV2-WORK C-7430',
+        pxLatitude: null,
+        pyMemo: null
+      },
+      {
+        pxObjClass: 'History-DXIL-DigV2-Work',
+        pxTimeCreated: '2023-01-13T21:46:28.242Z',
+        pyPerformer: 'User DigV2',
+        pxInsName: 'DXIL-DIGV2-WORK C-7430!20230113T214628.242 GMT',
+        pxLongitude: null,
+        pzInsKey: 'HISTORY-DXIL-DIGV2-WORK DXIL-DIGV2-WORK C-7430!20230113T214628.242 GMT',
+        pyMessageKey: "Assignment to 'complete task' completed by performing a 'EmbeddedData'.",
+        pxHistoryForReference: 'DXIL-DIGV2-WORK C-7430',
+        pyMemo: null,
+        pxLatitude: null
+      },
+      {
+        pxObjClass: 'History-DXIL-DigV2-Work',
+        pxTimeCreated: '2023-01-13T21:46:08.399Z',
+        pyPerformer: 'User DigV2',
+        pxInsName: 'DXIL-DIGV2-WORK C-7430!20230113T214608.399 GMT',
+        pxLongitude: null,
+        pzInsKey: 'HISTORY-DXIL-DIGV2-WORK DXIL-DIGV2-WORK C-7430!20230113T214608.399 GMT',
+        pxHistoryForReference: 'DXIL-DIGV2-WORK C-7430',
+        pyMessageKey: "Assigned to User DigV2 to 'complete task' ",
+        pxLatitude: null,
+        pyMemo: null
+      },
+      {
+        pxTimeCreated: '2023-01-13T21:46:08.393Z',
+        pxObjClass: 'History-DXIL-DigV2-Work',
+        pyPerformer: 'User DigV2',
+        pxInsName: 'DXIL-DIGV2-WORK C-7430!20230113T214608.393 GMT',
+        pxLongitude: null,
+        pzInsKey: 'HISTORY-DXIL-DIGV2-WORK DXIL-DIGV2-WORK C-7430!20230113T214608.393 GMT',
+        pyMessageKey: "Assignment to 'complete task' removed via ticket.",
+        pxHistoryForReference: 'DXIL-DIGV2-WORK C-7430',
+        pxLatitude: null,
+        pyMemo: null
+      },
+      {
+        pxObjClass: 'History-DXIL-DigV2-Work',
+        pxTimeCreated: '2023-01-13T21:46:07.584Z',
+        pyPerformer: 'User DigV2',
+        pxInsName: 'DXIL-DIGV2-WORK C-7430!20230113T214607.584 GMT',
+        pxLongitude: null,
+        pzInsKey: 'HISTORY-DXIL-DIGV2-WORK DXIL-DIGV2-WORK C-7430!20230113T214607.584 GMT',
+        pxHistoryForReference: 'DXIL-DIGV2-WORK C-7430',
+        pyMessageKey: "Assigned to User DigV2 to 'complete task' ",
+        pyMemo: null,
+        pxLatitude: null
+      },
+      {
+        pxObjClass: 'History-DXIL-DigV2-Work',
+        pxTimeCreated: '2023-01-13T21:46:07.579Z',
+        pyPerformer: 'User DigV2',
+        pxInsName: 'DXIL-DIGV2-WORK C-7430!20230113T214607.579 GMT',
+        pzInsKey: 'HISTORY-DXIL-DIGV2-WORK DXIL-DIGV2-WORK C-7430!20230113T214607.579 GMT',
+        pxLongitude: null,
+        pxHistoryForReference: 'DXIL-DIGV2-WORK C-7430',
+        pyMessageKey: "Assignment to 'complete task' completed by performing a 'EmbeddedData'.",
+        pxLatitude: null,
+        pyMemo: null
+      },
+      {
+        pxObjClass: 'History-DXIL-DigV2-Work',
+        pxTimeCreated: '2023-01-13T21:46:06.262Z',
+        pyPerformer: 'User DigV2',
+        pxInsName: 'DXIL-DIGV2-WORK C-7430!20230113T214606.262 GMT',
+        pxLongitude: null,
+        pzInsKey: 'HISTORY-DXIL-DIGV2-WORK DXIL-DIGV2-WORK C-7430!20230113T214606.262 GMT',
+        pxHistoryForReference: 'DXIL-DIGV2-WORK C-7430',
+        pyMessageKey: "Assigned to User DigV2 to 'complete task' ",
+        pyMemo: null,
+        pxLatitude: null
+      },
+      {
+        pxObjClass: 'History-DXIL-DigV2-Work',
+        pxTimeCreated: '2023-01-13T21:46:06.256Z',
+        pyPerformer: 'User DigV2',
+        pxInsName: 'DXIL-DIGV2-WORK C-7430!20230113T214606.256 GMT',
+        pxLongitude: null,
+        pzInsKey: 'HISTORY-DXIL-DIGV2-WORK DXIL-DIGV2-WORK C-7430!20230113T214606.256 GMT',
+        pxHistoryForReference: 'DXIL-DIGV2-WORK C-7430',
+        pyMessageKey: "Assignment to 'complete task' removed via ticket.",
+        pxLatitude: null,
+        pyMemo: null
+      },
+      {
+        pxObjClass: 'History-DXIL-DigV2-Work',
+        pxTimeCreated: '2023-01-13T21:45:57.503Z',
+        pyPerformer: 'User DigV2',
+        pxInsName: 'DXIL-DIGV2-WORK C-7430!20230113T214557.503 GMT',
+        pxLongitude: null,
+        pzInsKey: 'HISTORY-DXIL-DIGV2-WORK DXIL-DIGV2-WORK C-7430!20230113T214557.503 GMT',
+        pyMessageKey: "Assigned to User DigV2 to 'complete task' ",
+        pxHistoryForReference: 'DXIL-DIGV2-WORK C-7430',
+        pxLatitude: null,
+        pyMemo: null
+      },
+      {
+        pxObjClass: 'History-DXIL-DigV2-Work',
+        pxTimeCreated: '2023-01-13T21:45:57.496Z',
+        pyPerformer: 'User DigV2',
+        pxInsName: 'DXIL-DIGV2-WORK C-7430!20230113T214557.496 GMT',
+        pxLongitude: null,
+        pzInsKey: 'HISTORY-DXIL-DIGV2-WORK DXIL-DIGV2-WORK C-7430!20230113T214557.496 GMT',
+        pxHistoryForReference: 'DXIL-DIGV2-WORK C-7430',
+        pyMessageKey: "Assignment to 'complete task' completed by performing a 'EmbeddedData'.",
+        pyMemo: null,
+        pxLatitude: null
+      },
+      {
+        pxObjClass: 'History-DXIL-DigV2-Work',
+        pxTimeCreated: '2023-01-13T21:45:36.250Z',
+        pyPerformer: 'User DigV2',
+        pxInsName: 'DXIL-DIGV2-WORK C-7430!20230113T214536.250 GMT',
+        pxLongitude: null,
+        pzInsKey: 'HISTORY-DXIL-DIGV2-WORK DXIL-DIGV2-WORK C-7430!20230113T214536.250 GMT',
+        pxHistoryForReference: 'DXIL-DIGV2-WORK C-7430',
+        pyMessageKey: "Assigned to User DigV2 to 'complete task' ",
+        pxLatitude: null,
+        pyMemo: null
+      },
+      {
+        pxObjClass: 'History-DXIL-DigV2-Work',
+        pxTimeCreated: '2023-01-13T21:45:36.244Z',
+        pyPerformer: 'User DigV2',
+        pxInsName: 'DXIL-DIGV2-WORK C-7430!20230113T214536.244 GMT',
+        pxLongitude: null,
+        pzInsKey: 'HISTORY-DXIL-DIGV2-WORK DXIL-DIGV2-WORK C-7430!20230113T214536.244 GMT',
+        pxHistoryForReference: 'DXIL-DIGV2-WORK C-7430',
+        pyMessageKey: "Assignment to 'complete task' removed via ticket.",
+        pxLatitude: null,
+        pyMemo: null
+      },
+      {
+        pxTimeCreated: '2023-01-13T21:45:35.364Z',
+        pxObjClass: 'History-DXIL-DigV2-Work',
+        pyPerformer: 'User DigV2',
+        pxInsName: 'DXIL-DIGV2-WORK C-7430!20230113T214535.364 GMT',
+        pxLongitude: null,
+        pzInsKey: 'HISTORY-DXIL-DIGV2-WORK DXIL-DIGV2-WORK C-7430!20230113T214535.364 GMT',
+        pxHistoryForReference: 'DXIL-DIGV2-WORK C-7430',
+        pyMessageKey: "Assigned to User DigV2 to 'complete task' ",
+        pxLatitude: null,
+        pyMemo: null
+      },
+      {
+        pxTimeCreated: '2023-01-13T21:45:35.356Z',
+        pxObjClass: 'History-DXIL-DigV2-Work',
+        pyPerformer: 'User DigV2',
+        pxInsName: 'DXIL-DIGV2-WORK C-7430!20230113T214535.356 GMT',
+        pzInsKey: 'HISTORY-DXIL-DIGV2-WORK DXIL-DIGV2-WORK C-7430!20230113T214535.356 GMT',
+        pxLongitude: null,
+        pyMessageKey: "Assignment to 'complete task' completed by performing a 'EmbeddedData'.",
+        pxHistoryForReference: 'DXIL-DIGV2-WORK C-7430',
+        pyMemo: null,
+        pxLatitude: null
+      },
+      {
+        pxObjClass: 'History-DXIL-DigV2-Work',
+        pxTimeCreated: '2023-01-13T21:45:33.224Z',
+        pyPerformer: 'User DigV2',
+        pxInsName: 'DXIL-DIGV2-WORK C-7430!20230113T214533.224 GMT',
+        pxLongitude: null,
+        pzInsKey: 'HISTORY-DXIL-DIGV2-WORK DXIL-DIGV2-WORK C-7430!20230113T214533.224 GMT',
+        pxHistoryForReference: 'DXIL-DIGV2-WORK C-7430',
+        pyMessageKey: "Assigned to User DigV2 to 'complete task' ",
+        pxLatitude: null,
+        pyMemo: null
+      },
+      {
+        pxTimeCreated: '2023-01-13T21:45:33.218Z',
+        pxObjClass: 'History-DXIL-DigV2-Work',
+        pyPerformer: 'User DigV2',
+        pxInsName: 'DXIL-DIGV2-WORK C-7430!20230113T214533.218 GMT',
+        pzInsKey: 'HISTORY-DXIL-DIGV2-WORK DXIL-DIGV2-WORK C-7430!20230113T214533.218 GMT',
+        pxLongitude: null,
+        pxHistoryForReference: 'DXIL-DIGV2-WORK C-7430',
+        pyMessageKey: "Assignment to 'complete task' removed via ticket.",
+        pxLatitude: null,
+        pyMemo: null
+      },
+      {
+        pxTimeCreated: '2023-01-13T21:45:32.436Z',
+        pxObjClass: 'History-DXIL-DigV2-Work',
+        pyPerformer: 'User DigV2',
+        pxInsName: 'DXIL-DIGV2-WORK C-7430!20230113T214532.436 GMT',
+        pzInsKey: 'HISTORY-DXIL-DIGV2-WORK DXIL-DIGV2-WORK C-7430!20230113T214532.436 GMT',
+        pxLongitude: null,
+        pxHistoryForReference: 'DXIL-DIGV2-WORK C-7430',
+        pyMessageKey: "Assigned to User DigV2 to 'complete task' ",
+        pxLatitude: null,
+        pyMemo: null
+      },
+      {
+        pxTimeCreated: '2023-01-13T21:45:32.430Z',
+        pxObjClass: 'History-DXIL-DigV2-Work',
+        pyPerformer: 'User DigV2',
+        pxInsName: 'DXIL-DIGV2-WORK C-7430!20230113T214532.430 GMT',
+        pxLongitude: null,
+        pzInsKey: 'HISTORY-DXIL-DIGV2-WORK DXIL-DIGV2-WORK C-7430!20230113T214532.430 GMT',
+        pyMessageKey: "Assignment to 'complete task' completed by performing a 'EmbeddedData'.",
+        pxHistoryForReference: 'DXIL-DIGV2-WORK C-7430',
+        pxLatitude: null,
+        pyMemo: null
+      },
+      {
+        pxTimeCreated: '2023-01-13T21:45:25.003Z',
+        pxObjClass: 'History-DXIL-DigV2-Work',
+        pyPerformer: 'User DigV2',
+        pxInsName: 'DXIL-DIGV2-WORK C-7430!20230113T214525.003 GMT',
+        pzInsKey: 'HISTORY-DXIL-DIGV2-WORK DXIL-DIGV2-WORK C-7430!20230113T214525.003 GMT',
+        pxLongitude: null,
+        pyMessageKey: "Assigned to User DigV2 to 'complete task' ",
+        pxHistoryForReference: 'DXIL-DIGV2-WORK C-7430',
+        pxLatitude: null,
+        pyMemo: null
+      },
+      {
+        pxObjClass: 'History-DXIL-DigV2-Work',
+        pxTimeCreated: '2023-01-13T21:45:24.994Z',
+        pyPerformer: 'User DigV2',
+        pxInsName: 'DXIL-DIGV2-WORK C-7430!20230113T214524.994 GMT',
+        pxLongitude: null,
+        pzInsKey: 'HISTORY-DXIL-DIGV2-WORK DXIL-DIGV2-WORK C-7430!20230113T214524.994 GMT',
+        pxHistoryForReference: 'DXIL-DIGV2-WORK C-7430',
+        pyMessageKey: "Assignment to 'complete task' completed by performing a 'Select Test'.",
+        pyMemo: null,
+        pxLatitude: null
+      },
+      {
+        pxObjClass: 'History-DXIL-DigV2-Work',
+        pxTimeCreated: '2023-01-13T21:45:23.570Z',
+        pyPerformer: 'User DigV2',
+        pxInsName: 'DXIL-DIGV2-WORK C-7430!20230113T214523.570 GMT',
+        pzInsKey: 'HISTORY-DXIL-DIGV2-WORK DXIL-DIGV2-WORK C-7430!20230113T214523.570 GMT',
+        pxLongitude: null,
+        pxHistoryForReference: 'DXIL-DIGV2-WORK C-7430',
+        pyMessageKey: "Assigned to User DigV2 to 'complete task' ",
+        pyMemo: null,
+        pxLatitude: null
+      },
+      {
+        pxObjClass: 'History-DXIL-DigV2-Work',
+        pxTimeCreated: '2023-01-13T21:45:23.563Z',
+        pyPerformer: 'User DigV2',
+        pxInsName: 'DXIL-DIGV2-WORK C-7430!20230113T214523.563 GMT',
+        pzInsKey: 'HISTORY-DXIL-DIGV2-WORK DXIL-DIGV2-WORK C-7430!20230113T214523.563 GMT',
+        pxLongitude: null,
+        pyMessageKey: 'ChangeStageAutomatic\tCreate\tPick Test',
+        pxHistoryForReference: 'DXIL-DIGV2-WORK C-7430',
+        pxLatitude: null,
+        pyMemo: 'ChangeStageAutomatic\tCreate\tPick Test'
+      },
+      {
+        pxObjClass: 'History-DXIL-DigV2-Work',
+        pxTimeCreated: '2023-01-13T21:45:23.550Z',
+        pyPerformer: 'User DigV2',
+        pxInsName: 'DXIL-DIGV2-WORK C-7430!20230113T214523.550 GMT',
+        pzInsKey: 'HISTORY-DXIL-DIGV2-WORK DXIL-DIGV2-WORK C-7430!20230113T214523.550 GMT',
+        pxLongitude: null,
+        pyMessageKey: 'Item created.',
+        pxHistoryForReference: 'DXIL-DIGV2-WORK C-7430',
+        pyMemo: null,
+        pxLatitude: null
+      }
+    ],
+    hasMoreResults: false
+  },
+  status: 200,
+  statusText: '',
+  headers: {
+    'content-length': '1328',
+    'content-type': 'application/json;charset=UTF-8'
+  },
+  request: {}
+};

package/src/tasks/create/templates/SDK-React/Widget/PAGE-CASE/demo.stories.jsx.mustache

@@ -0,0 +1,60 @@
+import { withKnobs } from '@storybook/addon-knobs';
+
+import { configProps, operatorDetails } from './mock.stories';
+
+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.getUserApi = () => {
+  return {
+    getOperatorDetails: () => {
+      return new Promise(resolve => {
+        resolve(operatorDetails);
+      });
+    }
+  };
+};
+
+export const Base{{COMPONENT_CLASS_NAME}} = () => {
+
+  const props = {
+    label: configProps.label,
+    createLabel: configProps.createLabel,
+    updateLabel: configProps.updateLabel,
+    createOperator: configProps.createOperator,
+    updateOperator: configProps.updateOperator,
+    createDateTime: configProps.createDateTime,
+    updateDateTime: configProps.updateDateTime,
+    hideLabel: configProps.hideLabel,
+
+    getPConnect: () => {
+      return {
+        getActionsApi: () => {
+          return {
+            updateFieldValue: () => {/* nothing */},
+            triggerFieldChange: () => {/* nothing */}
+          };
+        },
+        ignoreSuggestion: () => {/* nothing */},
+        acceptSuggestion: () => {/* nothing */},
+        setInheritedProps: () => {/* nothing */},
+        resolveConfigProps: () => {/* nothing */}
+      };
+    }
+  };
+
+  return (
+    <>
+      <{{COMPONENT_CLASS_NAME}} {...props} />
+    </>
+  );
+};

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

@@ -52,12 +52,12 @@ export default function {{COMPONENT_CLASS_NAME}}(props) {
   let caseOpId = "";
   let caseTime = null;
 
-  if (fieldLabel === "created") {
+  if (fieldLabel === "create operator") {
     caseOpLabel = createLabel;
     caseOpName = createOperator.userName;
     caseTime = createDateTime;
     caseOpId = createOperator.userId;
-  } else if (fieldLabel === "updated") {
+  } else if (fieldLabel === "update operator") {
     caseOpLabel = updateLabel;
     caseOpName = updateOperator.userName;
     caseTime = updateDateTime;

package/src/tasks/create/templates/SDK-React/Widget/PAGE-CASE/mock.stories.js.mustache

@@ -0,0 +1,52 @@
+// eslint-disable-next-line import/prefer-default-export
+export const configProps = {
+  label: 'Create operator',
+  createLabel: 'Created',
+  updateLabel: 'Updated',
+  updateDateTime: '2023-01-16T14:53:33.280Z',
+  createDateTime: '2023-01-16T14:53:33.198Z',
+  updateOperator: {
+    userId: 'admin@mediaco',
+    userName: 'admin'
+  },
+  createOperator: {
+    userId: 'admin@mediaco',
+    userName: 'admin'
+  },
+  hideLabel: true,
+  key: '_532zx1dah',
+  displayMode: 'LABELS_LEFT'
+};
+
+export const operatorDetails = {
+  data: {
+    pzLoadTime: 'January 18, 2023 10:33:19 AM EST',
+    pzPageNameHash: '_pa1519192551088960pz',
+    pyOperatorInfo: {
+      pyUserName: 'french DigV2',
+      pyPosition: '',
+      pyImageInsKey: '',
+      pySkills: [
+        {
+          pySkillName: '',
+          pzIndexOwnerKey: 'DATA-ADMIN-OPERATOR-ID FRENCHTEST.DIGV2',
+          pySkillRating: 0
+        }
+      ],
+      pyReportToUserName: '',
+      pyReportTo: '',
+      pyOrganization: 'DXIL',
+      pyTitle: '',
+      pyLabel: 'frenchTest.DigV2',
+      pyEmailAddress: 'User@DigV2',
+      pyTelephone: ''
+    }
+  },
+  status: 200,
+  statusText: '',
+  headers: {
+    'content-length': '435',
+    'content-type': 'application/json;charset=UTF-8'
+  },
+  request: {}
+};