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

package/package.json

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

package/src/constants.js

@@ -221,7 +221,7 @@ export const COMPONENT_SCHEMA = {
       },
       {
         name: 'Phone',
-        value: 'Phopne'
+        value: 'Phone'
       },
       {
         name: 'Radio Buttons',
@@ -299,6 +299,10 @@ export const COMPONENT_SCHEMA = {
         name: 'Assignment Card',
         value: 'AssignmentCard'
       },
+      {
+        name: 'Attachment',
+        value: 'Attachment'
+      },
       {
         name: 'Dashboard Filter',
         value: 'DashboardFilter'
@@ -309,7 +313,7 @@ export const COMPONENT_SCHEMA = {
       },
       {
         name: 'Error Boundry',
-        value: 'ErroBoundry'
+        value: 'ErrorBoundry'
       },
       {
         name: 'Multi Step',
@@ -389,9 +393,17 @@ export const COMPONENT_SCHEMA = {
         name: 'Inline Dashboard',
         value: 'InlineDashboard'
       },
+      {
+        name: 'Inline Dashboard Page',
+        value: 'InlineDashboardPage'
+      },
       {
         name: 'List Page',
-        value: 'List Page'
+        value: 'ListPage'
+      },
+      {
+        name: 'List View',
+        value: 'ListView'
       },
       {
         name: 'Multi Reference - ReadOnly',
@@ -431,7 +443,15 @@ export const COMPONENT_SCHEMA = {
       },
       {
         name: 'Simple Table',
-        value: 'SimpleTable'
+        value: 'SimpleTable/SimpleTable'
+      },
+      {
+        name: 'Simple Table Manual',
+        value: 'SimpleTable/SimpleTableManual'
+      },
+      {
+        name: 'Simple Table Select',
+        value: 'SimpleTable/SimpleTableSelect'
       },
       {
         name: 'Single Reference - ReadOnly',

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

@@ -1,5 +1,7 @@
 import { useState } from 'react';
-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';
 
@@ -10,30 +12,32 @@ export default {
 };
 
 export const Base{{COMPONENT_CLASS_NAME}} = () => {
-  const [value, setValue] = useState('test value');
+  const [value, setValue] = useState(configProps.value);
 
   const props = {
+    value,
+    label: configProps.label,
+    hideLabel: configProps.hideLabel,
+    displayMode: configProps.displayMode,
+
     getPConnect: () => {
       return {
         getActionsApi: () => {
           return {
             updateFieldValue: (propName, theValue) => {
               setValue(theValue);
-            }
+            },
+            triggerFieldChange: () => {/* nothing */}
           };
         },
         getStateProps: () => {
-          return { value: '.name' };
+          return stateProps;
         }
       };
     },
-    value,
-    placeholder: text('Placeholder', 'Test placeholder'),
-    disabled: boolean('Disabled', false),
-    readOnly: boolean('Disabled', false),
-    required: boolean('Disabled', false),
-    label: text('Label', 'Sample Label'),
-    testId: text('Test id', 'text-12344566')
+    onChange: date => {
+      setValue(date.value);
+    }
   };
 
   return (

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

@@ -1,15 +1,13 @@
-/* eslint-disable react/no-unused-prop-types */
 import React from 'react';
-import { KeyboardDatePicker } from '@material-ui/pickers';
+import { KeyboardDatePicker, MuiPickersUtilsProvider } from '@material-ui/pickers';
+import DayjsUtils from '@date-io/dayjs';
 import TextInput from '@pega/react-sdk-components/lib/components/forms/TextInput';
 import handleEvent from '@pega/react-sdk-components/lib/components/helpers/event-utils';
 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
@@ -65,30 +63,32 @@ export default function {{COMPONENT_CLASS_NAME}}(props: any) {
 
   return (
     <Styled{{COMPONENT_CLASS_NAME}}Wrapper>
-    <KeyboardDatePicker
-      disableToolbar
-      variant='inline'
-      inputVariant='outlined'
-      placeholder='mm/dd/yyyy'
-      fullWidth
-      autoOk
-      required={required}
-      disabled={disabled}
-      format='MM/DD/YYYY'
-      mask='__/__/____'
-      error={status === 'error'}
-      helperText={helperTextToDisplay}
-      size='small'
-      label={label}
-      value={value || null}
-      onChange={handleChange}
-      onBlur={onBlur}
-      onAccept={handleAccept}
-{{! pick new delimiteres for mustache }}
-{{=<% %>=}}
-      InputProps={{ ...testProp }}
-<%={{ }}=%>     {{! revert delimiteres for mustache }}
-    />
+      <MuiPickersUtilsProvider utils={DayjsUtils}>
+        <KeyboardDatePicker
+          disableToolbar
+          variant='inline'
+          inputVariant='outlined'
+          placeholder='mm/dd/yyyy'
+          fullWidth
+          autoOk
+          required={required}
+          disabled={disabled}
+          format='MM/DD/YYYY'
+          mask='__/__/____'
+          error={status === 'error'}
+          helperText={helperTextToDisplay}
+          size='small'
+          label={label}
+          value={value || null}
+          onChange={handleChange}
+          onBlur={onBlur}
+          onAccept={handleAccept}
+    {{! pick new delimiteres for mustache }}
+    {{=<% %>=}}
+          InputProps={{ ...testProp }}
+    <%={{ }}=%>     {{! revert delimiteres for mustache }}
+        />
+      </MuiPickersUtilsProvider>    
     </Styled{{COMPONENT_CLASS_NAME}}Wrapper>
   );
 }

package/src/tasks/create/templates/SDK-React/Field/Date/mock.stories.js.mustache

@@ -0,0 +1,13 @@
+export const configProps = {
+  "value": "",
+  "label": "Date Sample",
+  "helperText": "Date Helper Text",
+  "testId": "date-12345678",
+  "hasSuggestions": false
+}
+
+
+export const stateProps = {
+  "value": ".DateSample",
+  "hasSuggestions": false
+}

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

@@ -1,5 +1,7 @@
 import { useState } from 'react';
-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';
 
@@ -10,30 +12,31 @@ export default {
 };
 
 export const Base{{COMPONENT_CLASS_NAME}} = () => {
-  const [value, setValue] = useState('test value');
+  const [value, setValue] = useState(configProps.value);
 
   const props = {
+    value,
+    label: configProps.label,
+    hideLabel: configProps.hideLabel,
+    displayMode: configProps.displayMode,
     getPConnect: () => {
       return {
         getActionsApi: () => {
           return {
             updateFieldValue: (propName, theValue) => {
               setValue(theValue);
-            }
+            },
+            triggerFieldChange: () => {/* nothing */}
           };
         },
         getStateProps: () => {
-          return { value: '.name' };
+          return stateProps;
         }
       };
     },
-    value,
-    placeholder: text('Placeholder', 'Test placeholder'),
-    disabled: boolean('Disabled', false),
-    readOnly: boolean('Disabled', false),
-    required: boolean('Disabled', false),
-    label: text('Label', 'Sample Label'),
-    testId: text('Test id', 'text-12344566')
+    onChange: dateTime => {
+      setValue(dateTime.value);
+    }
   };
 
   return (

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

@@ -1,15 +1,13 @@
-/* eslint-disable react/no-unused-prop-types */
 import React from 'react';
-import { KeyboardDateTimePicker } from '@material-ui/pickers';
+import { KeyboardDateTimePicker, MuiPickersUtilsProvider } from '@material-ui/pickers';
+import DayjsUtils from '@date-io/dayjs';
 import TextInput from '@pega/react-sdk-components/lib/components/forms/TextInput';
 import handleEvent from '@pega/react-sdk-components/lib/components/helpers/event-utils';
 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
@@ -59,26 +57,28 @@ export default function {{COMPONENT_CLASS_NAME}}(props: any) {
 
   return (
     <Styled{{COMPONENT_CLASS_NAME}}Wrapper>
-    <KeyboardDateTimePicker
-      variant='inline'
-      inputVariant='outlined'
-      fullWidth
-      autoOk
-      required={required}
-      disabled={disabled}
-      placeholder='mm/dd/yyyy hh:mm am'
-      format='MM/DD/YYYY hh:mm a'
-      mask='__/__/____ __:__ _m'
-      minutesStep={5}
-      error={status === 'error'}
-      helperText={helperTextToDisplay}
-      size='small'
-      label={label}
-      value={value || null}
-      onChange={handleChange}
-      onAccept={handleAccept}
-      data-test-id={testId}
-    />
+      <MuiPickersUtilsProvider utils={DayjsUtils}>
+        <KeyboardDateTimePicker
+          variant='inline'
+          inputVariant='outlined'
+          fullWidth
+          autoOk
+          required={required}
+          disabled={disabled}
+          placeholder='mm/dd/yyyy hh:mm am'
+          format='MM/DD/YYYY hh:mm a'
+          mask='__/__/____ __:__ _m'
+          minutesStep={5}
+          error={status === 'error'}
+          helperText={helperTextToDisplay}
+          size='small'
+          label={label}
+          value={value || null}
+          onChange={handleChange}
+          onAccept={handleAccept}
+          data-test-id={testId}
+        />
+      </MuiPickersUtilsProvider>    
     </Styled{{COMPONENT_CLASS_NAME}}Wrapper>
   );
 }

package/src/tasks/create/templates/SDK-React/Field/DateTime/mock.stories.js.mustache

@@ -0,0 +1,12 @@
+export const configProps = {
+  "value": "",
+  "label": "Date Time Sample",
+  "helperText": "Date Time Helper Text",
+  "testId": "datetime-12345678",
+  "hasSuggestions": false
+};
+
+export const stateProps = {
+  "value": ".DateTimeSample",
+  "hasSuggestions": false
+};

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

@@ -1,7 +1,6 @@
-import { useState } from 'react';
-import { withKnobs, text, boolean } from '@storybook/addon-knobs';
-
 import {{COMPONENT_CLASS_NAME}} from './index.jsx';
+import { withKnobs } from '@storybook/addon-knobs';
+import { configProps } from './mock.stories';
 
 export default {
   title: '{{COMPONENT_CLASS_NAME}}',
@@ -10,30 +9,20 @@ export default {
 };
 
 export const Base{{COMPONENT_CLASS_NAME}} = () => {
-  const [value, setValue] = useState('test value');
 
   const props = {
-    getPConnect: () => {
-      return {
-        getActionsApi: () => {
-          return {
-            updateFieldValue: (propName, theValue) => {
-              setValue(theValue);
-            }
-          };
-        },
-        getStateProps: () => {
-          return { value: '.name' };
-        }
-      };
-    },
-    value,
-    placeholder: text('Placeholder', 'Test placeholder'),
-    disabled: boolean('Disabled', false),
-    readOnly: boolean('Disabled', false),
-    required: boolean('Disabled', false),
-    label: text('Label', 'Sample Label'),
-    testId: text('Test id', 'text-12344566')
+    value: configProps.value,
+    placeholder: configProps.placeholder,
+    label: configProps.label,
+    testId: configProps.testId,
+    hasSuggestions: configProps.hasSuggestions,
+    helperText: configProps.helperText,
+    disabled: configProps.disabled,
+    required: configProps.required,
+    readOnly: configProps.readOnly,
+    displayMode: configProps.displayMode,
+    onchange: () => { return configProps.value; },
+    onBlur: () => { return configProps.value; }
   };
 
   return (

package/src/tasks/create/templates/SDK-React/Field/Text/mock.stories.js.mustache

@@ -0,0 +1,13 @@
+// eslint-disable-next-line import/prefer-default-export
+export const configProps = {
+  value: '',
+  label: 'Text Sample',
+  placeholder: 'Text Placeholder',
+  helperText: 'Text Helper Text',
+  testId: 'Text-12345678',
+  hasSuggestions: false,
+  disabled: false,
+  readOnly: false,
+  required: false,
+  displayMode: ''
+};

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

@@ -1,7 +1,6 @@
-import { useState } from 'react';
-import { withKnobs, text, boolean } from '@storybook/addon-knobs';
-
 import {{COMPONENT_CLASS_NAME}} from './index.jsx';
+import { withKnobs } from '@storybook/addon-knobs';
+import { configProps } from './mock.stories';
 
 export default {
   title: '{{COMPONENT_CLASS_NAME}}',
@@ -10,32 +9,21 @@ export default {
 };
 
 export const Base{{COMPONENT_CLASS_NAME}} = () => {
-  const [value, setValue] = useState('test value');
-
+ 
   const props = {
-    getPConnect: () => {
-      return {
-        getActionsApi: () => {
-          return {
-            updateFieldValue: (propName, theValue) => {
-              setValue(theValue);
-            }
-          };
-        },
-        getStateProps: () => {
-          return { value: '.name' };
-        }
-      };
-    },
-    value,
-    placeholder: text('Placeholder', 'Test placeholder'),
-    disabled: boolean('Disabled', false),
-    readOnly: boolean('Disabled', false),
-    required: boolean('Disabled', false),
-    label: text('Label', 'Sample Label'),
-    testId: text('Test id', 'text-12344566')
+    value: configProps.value,
+    placeholder: configProps.placeholder,
+    label: configProps.label,
+    testId: configProps.testId,
+    hasSuggestions: configProps.hasSuggestions,
+    helperText: configProps.helperText,
+    disabled: configProps.disabled,
+    required: configProps.required,
+    readOnly: configProps.readOnly,
+    displayMode: configProps.displayMode,
+    onchange: () => { return configProps.value; },
+    onBlur: () => { return configProps.value; }
   };
-
   return (
     <>
       <{{COMPONENT_CLASS_NAME}} {...props} />

package/src/tasks/create/templates/SDK-React/Field/Text-Email/mock.stories.js.mustache

@@ -0,0 +1,13 @@
+// eslint-disable-next-line import/prefer-default-export
+export const configProps = {
+  value: '',
+  label: 'Email Sample',
+  placeholder: 'Email Placeholder',
+  helperText: 'Email Helper Text',
+  testId: 'email-12345678',
+  hasSuggestions: false,
+  readOnly: false,
+  required: false,
+  disabled: false,
+  displayMode: ''
+};

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

@@ -1,7 +1,6 @@
-import { useState } from 'react';
-import { withKnobs, text, boolean } from '@storybook/addon-knobs';
-
 import {{COMPONENT_CLASS_NAME}} from './index.jsx';
+import { withKnobs } from '@storybook/addon-knobs';
+import { configProps, fieldMetadata } from './mock.stories';
 
 export default {
   title: '{{COMPONENT_CLASS_NAME}}',
@@ -10,30 +9,16 @@ export default {
 };
 
 export const Base{{COMPONENT_CLASS_NAME}} = () => {
-  const [value, setValue] = useState('test value');
-
   const props = {
-    getPConnect: () => {
-      return {
-        getActionsApi: () => {
-          return {
-            updateFieldValue: (propName, theValue) => {
-              setValue(theValue);
-            }
-          };
-        },
-        getStateProps: () => {
-          return { value: '.name' };
-        }
-      };
-    },
-    value,
-    placeholder: text('Placeholder', 'Test placeholder'),
-    disabled: boolean('Disabled', false),
-    readOnly: boolean('Disabled', false),
-    required: boolean('Disabled', false),
-    label: text('Label', 'Sample Label'),
-    testId: text('Test id', 'text-12344566')
+    value: configProps.value,
+    placeholder: configProps.placeholder,
+    label: configProps.label,
+    helperText: configProps.helperText,
+    testId: configProps.testId,
+    hasSuggestions: configProps.hasSuggestions,
+    fieldMetadata,
+    onchange: () => { return configProps.value; },
+    onBlur: () => { return configProps.value; }
   };
 
   return (

package/src/tasks/create/templates/SDK-React/Field/Text-Input/mock.stories.js.mustache

@@ -0,0 +1,20 @@
+export const configProps = {
+  value: '',
+  label: 'TextInput Sample',
+  placeholder: 'TextInput Placeholder',
+  helperText: 'TextInput Helper Text',
+  testId: 'TextInput-12345678',
+  hasSuggestions: false,
+  required: false,
+  disabled: false,
+  readOnly: false,
+  displayMode: ''
+};
+
+export const fieldMetadata = {
+  classID: 'DIXL-MediaCo-Work-NewService',
+  type: 'Text',
+  maxLength: 256,
+  displayAs: 'pxTextInput',
+  label: 'TextInput Sample'
+};

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

@@ -1,7 +1,7 @@
-import { useState } from 'react';
-import { withKnobs, text, boolean } from '@storybook/addon-knobs';
 
 import {{COMPONENT_CLASS_NAME}} from './index.jsx';
+import { configProps, fieldMetadata } from './mock.stories';
+import { withKnobs } from '@storybook/addon-knobs';
 
 export default {
   title: '{{COMPONENT_CLASS_NAME}}',
@@ -10,30 +10,21 @@ export default {
 };
 
 export const Base{{COMPONENT_CLASS_NAME}} = () => {
-  const [value, setValue] = useState('test value');
 
   const props = {
-    getPConnect: () => {
-      return {
-        getActionsApi: () => {
-          return {
-            updateFieldValue: (propName, theValue) => {
-              setValue(theValue);
-            }
-          };
-        },
-        getStateProps: () => {
-          return { value: '.name' };
-        }
-      };
-    },
-    value,
-    placeholder: text('Placeholder', 'Test placeholder'),
-    disabled: boolean('Disabled', false),
-    readOnly: boolean('Disabled', false),
-    required: boolean('Disabled', false),
-    label: text('Label', 'Sample Label'),
-    testId: text('Test id', 'text-12344566')
+    value: configProps.value,
+    placeholder: configProps.placeholder,
+    label: configProps.label,
+    testId: configProps.testId,
+    hasSuggestions: configProps.hasSuggestions,
+    helperText: configProps.helperText,
+    disabled: configProps.disabled,
+    required: configProps.required,
+    readOnly: configProps.readOnly,
+    displayMode: configProps.displayMode,
+    fieldMetadata,
+    onchange: () => { return configProps.value; },
+    onBlur: () => { return configProps.value; }
   };
 
   return (

package/src/tasks/create/templates/SDK-React/Field/Text-Paragraph/mock.stories.js.mustache

@@ -0,0 +1,20 @@
+export const configProps = {
+  value: '',
+  label: 'Paragraph Sample',
+  placeholder: 'Paragraph Placeholder',
+  helperText: 'Paragraph Helper Text',
+  testId: 'paragraph-12345678',
+  hasSuggestions: false,
+  required: false,
+  disabled: false,
+  readOnly: false,
+  displayMode: ''
+};
+
+export const fieldMetadata = {
+  classID: 'DIXL-MediaCo-Work-NewService',
+  type: 'Text',
+  displayAs: 'pxTextArea',
+  label: 'Paragraph sample',
+  maxLength: 256
+};

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

@@ -1,7 +1,6 @@
-import { useState } from 'react';
-import { withKnobs, text, boolean } from '@storybook/addon-knobs';
-
 import {{COMPONENT_CLASS_NAME}} from './index.jsx';
+import { withKnobs } from '@storybook/addon-knobs';
+import { configProps } from './mock.stories';
 
 export default {
   title: '{{COMPONENT_CLASS_NAME}}',
@@ -10,30 +9,20 @@ export default {
 };
 
 export const Base{{COMPONENT_CLASS_NAME}} = () => {
-  const [value, setValue] = useState('test value');
-
+ 
   const props = {
-    getPConnect: () => {
-      return {
-        getActionsApi: () => {
-          return {
-            updateFieldValue: (propName, theValue) => {
-              setValue(theValue);
-            }
-          };
-        },
-        getStateProps: () => {
-          return { value: '.name' };
-        }
-      };
-    },
-    value,
-    placeholder: text('Placeholder', 'Test placeholder'),
-    disabled: boolean('Disabled', false),
-    readOnly: boolean('Disabled', false),
-    required: boolean('Disabled', false),
-    label: text('Label', 'Sample Label'),
-    testId: text('Test id', 'text-12344566')
+    value: configProps.value,
+    placeholder: configProps.placeholder,
+    label: configProps.label,
+    testId: configProps.testId,
+    hasSuggestions: configProps.hasSuggestions,
+    helperText: configProps.helperText,
+    disabled: configProps.disabled,
+    required: configProps.required,
+    readOnly: configProps.readOnly,
+    displayMode: configProps.displayMode,
+    onchange: () => { return configProps.value; },
+    onBlur: () => { return configProps.value; }
   };
 
   return (

package/src/tasks/create/templates/SDK-React/Field/Text-Phone/mock.stories.js.mustache

@@ -0,0 +1,31 @@
+// eslint-disable-next-line import/prefer-default-export
+export const configProps = {
+  value: '',
+  label: 'Phone Sample',
+  datasource: {
+    source: [
+      {
+        value: '+1'
+      },
+      {
+        value: '+91'
+      },
+      {
+        value: '+48'
+      },
+      {
+        value: '+44'
+      }
+    ],
+    fields: {}
+  },
+  showCountryCode: true,
+  placeholder: 'Phone Placeholder',
+  helperText: 'Phone Helper Text',
+  testId: 'phone-12345678',
+  hasSuggestions: false,
+  required: false,
+  disabled: false,
+  readOnly: false,
+  displayMode: ''
+};

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

@@ -1,7 +1,6 @@
-import { useState } from 'react';
-import { withKnobs, text, boolean } from '@storybook/addon-knobs';
-
+import { withKnobs } from '@storybook/addon-knobs';
 import {{COMPONENT_CLASS_NAME}} from './index.jsx';
+import { configProps } from './mock.stories';
 
 export default {
   title: '{{COMPONENT_CLASS_NAME}}',
@@ -10,30 +9,20 @@ export default {
 };
 
 export const Base{{COMPONENT_CLASS_NAME}} = () => {
-  const [value, setValue] = useState('test value');
 
   const props = {
-    getPConnect: () => {
-      return {
-        getActionsApi: () => {
-          return {
-            updateFieldValue: (propName, theValue) => {
-              setValue(theValue);
-            }
-          };
-        },
-        getStateProps: () => {
-          return { value: '.name' };
-        }
-      };
-    },
-    value,
-    placeholder: text('Placeholder', 'Test placeholder'),
-    disabled: boolean('Disabled', false),
-    readOnly: boolean('Disabled', false),
-    required: boolean('Disabled', false),
-    label: text('Label', 'Sample Label'),
-    testId: text('Test id', 'text-12344566')
+    value: configProps.value,
+    placeholder: configProps.placeholder,
+    label: configProps.label,
+    testId: configProps.testId,
+    hasSuggestions: configProps.hasSuggestions,
+    helperText: configProps.helperText,
+    disabled: configProps.disabled,
+    required: configProps.required,
+    readOnly: configProps.readOnly,
+    displayMode: configProps.displayMode,
+    onchange: () => { return configProps.value; },
+    onBlur: ( return configProps.value; ) => {}
   };
 
   return (

package/src/tasks/create/templates/SDK-React/Field/Text-URL/mock.stories.js.mustache

@@ -0,0 +1,13 @@
+// eslint-disable-next-line import/prefer-default-export
+export const configProps = {
+  value: '',
+  label: 'URL Sample',
+  placeholder: 'URL Placeholder',
+  helperText: 'URL Helper Text',
+  testId: 'url-12345678',
+  hasSuggestions: false,
+  required: false,
+  disabled: false,
+  readOnly: false,
+  displayMode: ''
+};

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

@@ -1,5 +1,7 @@
 import { useState } from 'react';
-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';
 
@@ -10,30 +12,32 @@ export default {
 };
 
 export const Base{{COMPONENT_CLASS_NAME}} = () => {
-  const [value, setValue] = useState('test value');
+  const [value, setValue] = useState(configProps.value);
 
   const props = {
+    value,
+    label: configProps.label,
+    hideLabel: configProps.hideLabel,
+    displayMode: configProps.displayMode,
+
     getPConnect: () => {
       return {
         getActionsApi: () => {
           return {
             updateFieldValue: (propName, theValue) => {
               setValue(theValue);
-            }
+            },
+            triggerFieldChange: () => {/* nothing */}
           };
         },
         getStateProps: () => {
-          return { value: '.name' };
+          return stateProps;
         }
       };
     },
-    value,
-    placeholder: text('Placeholder', 'Test placeholder'),
-    disabled: boolean('Disabled', false),
-    readOnly: boolean('Disabled', false),
-    required: boolean('Disabled', false),
-    label: text('Label', 'Sample Label'),
-    testId: text('Test id', 'text-12344566')
+    onChange: time => {
+      setValue(time.value);
+    }
   };
 
   return (

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

@@ -1,7 +1,7 @@
-/* eslint-disable react/no-unused-prop-types */
 import React from 'react';
 import TextInput from '@pega/react-sdk-components/lib/components/forms/TextInput';
-import { KeyboardTimePicker } from '@material-ui/pickers';
+import { KeyboardTimePicker, MuiPickersUtilsProvider } from '@material-ui/pickers';
+import DayjsUtils from '@date-io/dayjs';
 import dayjs from 'dayjs';
 import AccessTimeIcon from '@material-ui/icons/AccessTime';
 import FieldValueList from '@pega/react-sdk-components/lib/components/designSystemExtensions/FieldValueList';
@@ -9,7 +9,6 @@ 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
@@ -58,25 +57,27 @@ export default function {{COMPONENT_CLASS_NAME}}(props: any) {
 
   return (
     <Styled{{COMPONENT_CLASS_NAME}}Wrapper>
-    <KeyboardTimePicker
-      variant='inline'
-      inputVariant='outlined'
-      placeholder='hh:mm am'
-      keyboardIcon={<AccessTimeIcon />}
-      fullWidth
-      required={required}
-      disabled={disabled}
-      error={status === 'error'}
-      helperText={helperTextToDisplay}
-      minutesStep={5}
-      size='small'
-      label={label}
-      autoOk
-      mask='__:__ _m'
-      format='hh:mm a'
-      value={timeValue}
-      onChange={handleChange}
-    />
+      <MuiPickersUtilsProvider utils={DayjsUtils}>
+        <KeyboardTimePicker
+          variant='inline'
+          inputVariant='outlined'
+          placeholder='hh:mm am'
+          keyboardIcon={<AccessTimeIcon />}
+          fullWidth
+          required={required}
+          disabled={disabled}
+          error={status === 'error'}
+          helperText={helperTextToDisplay}
+          minutesStep={5}
+          size='small'
+          label={label}
+          autoOk
+          mask='__:__ _m'
+          format='hh:mm a'
+          value={timeValue}
+          onChange={handleChange}
+        />
+      </MuiPickersUtilsProvider>
     </Styled{{COMPONENT_CLASS_NAME}}Wrapper>
   );
 }

package/src/tasks/create/templates/SDK-React/Field/TimeofDay/mock.stories.js.mustache

@@ -0,0 +1,12 @@
+export const configProps = {
+  "value": "",
+  "label": "Time Sample",
+  "helperText": "Time Helper Text",
+  "testId": "time-12345678",
+  "hasSuggestions": false
+};
+
+export const stateProps = {
+  "value": ".TimeSample",
+  "hasSuggestions": false
+};

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

@@ -0,0 +1,29 @@
+import { withKnobs } from '@storybook/addon-knobs';
+
+import {{COMPONENT_CLASS_NAME}} from './index.tsx';
+
+import { configProps } from './mock.stories';
+
+export default {
+  title: '{{COMPONENT_CLASS_NAME}}',
+  decorators: [withKnobs],
+  component: {{COMPONENT_CLASS_NAME}}
+};
+
+export const Base{{COMPONENT_CLASS_NAME}} = () => {
+  
+  const props = {
+    label: configProps.label,
+    header: configProps.header,
+    description: configProps.description,
+    image: configProps.image,
+    datasource: configProps.datasource,
+    whatsnewlink: configProps.whatsnewlink
+  };
+
+  return (
+    <>
+      <{{COMPONENT_CLASS_NAME}} {...props} />
+    </>
+  );
+};

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

@@ -0,0 +1,23 @@
+// eslint-disable-next-line import/prefer-default-export
+export const configProps = {
+  label: 'App announcement',
+  header: 'Announcements',
+  description: 'Welcome to MediaCo Application for testing SDK frameworks.',
+  whatsnewlink: 'https://design.pega.com',
+  image:
+    'data:image/svg xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzOSAxMSI PHRpdGxlPlBlZ2EgdGV4dC1vbmx5IGxvZ288L3RpdGxlPjxwYXRoIHN0eWxlPSJmaWxsLW9wYWNpdHk6IC4yNTsiIGZpbGw9IiNmZmYiIGQ9Ik03LjcyIDMuODJjMCAyLjI1LTEuNzggMy40MS00IDMuNDFoLTEuNnYzSDBWLjQyaDMuOTRjMi4zNiAwIDMuNzggMS4zOSAzLjc4IDMuNHptLTQtMS40N2gtMS42djNoMS43QTEuNDcgMS40NyAwIDAgMCA1LjUgMy44MmMwLS45MS0uNjUtMS40Ny0xLjc1LTEuNDd6bTcuNjggNS45MWg1LjN2Mkg5LjI5Vi40Mmg3LjM4djEuOTNoLTUuMjR2Mmg0LjI0djEuOWgtNC4yNHpNMjMuMTggMGE1IDUgMCAwIDEgMy41NyAxLjI4TDI1LjYzIDIuOGEzLjc4IDMuNzggMCAwIDAtMS4wNS0uNjNBNC4zMiA0LjMyIDAgMCAwIDIzLjMxIDIgMy4xNyAzLjE3IDAgMCAwIDIwIDUuMjdhMy4xNiAzLjE2IDAgMCAwIDEgMi4zOSAzLjA3IDMuMDcgMCAwIDAgMi4xNy44NCA0LjYgNC42IDAgMCAwIDIuMDktLjVWNi4xOWgtMi4yVjQuMzhoNC4yNXY0LjU2YTUuNDEgNS40MSAwIDAgMS00LjA4IDEuNTdBNS4zNSA1LjM1IDAgMCAxIDE5LjQzIDlhNS4wNSA1LjA1IDAgMCAxLTEuNTYtMy43NCA1LjIxIDUuMjEgMCAwIDEgMS41Ni0zLjc2QTUuMzEgNS4zMSAwIDAgMSAyMy4xOCAwem0xMS4yOS40Mmw0LjEzIDkuNzloLTIuMjVMMzUuNDggOGgtNC4wNmwtLjkgMi4xOGgtMi4yTDMyLjUxLjQyem0uMjUgNS43MkwzMy40NCAzbC0xLjI5IDMuMTR6bTMtNWEuNzEuNzEgMCAwIDEtLjc0Ljc1LjcxLjcxIDAgMCAxLS43My0uNzUuNzMuNzMgMCAwIDEgLjc1LS43Mi43Mi43MiAwIDAgMSAuNzUuNzF6TTM3IC41M2EuNTkuNTkgMCAwIDAtLjYuNi42MS42MSAwIDEgMCAxLjIxIDAgLjYuNiAwIDAgMC0uNjEtLjZ6bS0uMjQgMVYuNzFIMzdjLjEyIDAgLjE4LjA2LjI1LjA2YS4yMS4yMSAwIDAgMSAuMDcuMTguMTkuMTkgMCAwIDEtLjA3LjE4cy0uMDcuMDgtLjEzLjA4bC4yNi4zNmgtLjJMMzcgMS4yOGgtLjF2LjI5em0uMTMtLjQ0aC4yM2EuMjYuMjYgMCAwIDAgLjA3LS4wOWgtLjA2Yy0uMDUtLjE3LS4wNS0uMTctLjEzLS4xN2gtLjF6Ii8 PC9zdmc ',
+  datasource: {
+    source: [
+      {
+        name: 'New React based UI rendering'
+      },
+      {
+        name: 'Support for followers and recents'
+      },
+      {
+        name: 'New authoring experience'
+      }
+    ],
+    fields: {}
+  }
+};