@pega/dx-component-builder-sdk 0.1.46 → 0.1.48

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

@@ -15,7 +15,8 @@ export const pyReviewRaw = {
           value: '@P .pyStatusWork',
           label: '@L Work Status',
           displayMode: 'STACKED_LARGE_VAL',
-          displayAsStatus: true
+          displayAsStatus: true,
+          key: 'pyStatusWork'
         }
       },
       {
@@ -23,7 +24,8 @@ export const pyReviewRaw = {
         config: {
           value: '@P .pyID',
           label: '@L Case ID',
-          displayMode: 'STACKED_LARGE_VAL'
+          displayMode: 'STACKED_LARGE_VAL',
+          key: 'pyID'
         }
       },
       {
@@ -31,7 +33,8 @@ export const pyReviewRaw = {
         config: {
           value: '@P .pxCreateDateTime',
           label: '@L Create date/time',
-          displayMode: 'STACKED_LARGE_VAL'
+          displayMode: 'STACKED_LARGE_VAL',
+          key: 'pxCreateDateTime'
         }
       },
       {
@@ -40,7 +43,8 @@ export const pyReviewRaw = {
           label: '@L Create Operator',
           value: '@USER .pxCreateOperator',
           placeholder: 'Select...',
-          displayMode: 'STACKED_LARGE_VAL'
+          displayMode: 'STACKED_LARGE_VAL',
+          key: 'pxCreateOperator'
         }
       }
     ],
@@ -59,6 +63,7 @@ export const pyReviewRaw = {
     {
       name: 'A',
       type: 'Region',
+      key: 'A',
       getPConnect: () => {
         return {
           getRawMetadata: () => {
@@ -71,14 +76,16 @@ export const pyReviewRaw = {
           type: 'DateTime',
           config: {
             value: '@P .pySLADeadline',
-            label: '@L SLA Deadline'
+            label: '@L SLA Deadline',
+            key: 'pySLADeadline'
           }
         },
         {
           type: 'DateTime',
           config: {
             value: '@P .pySLAGoal',
-            label: '@L SLA Goal'
+            label: '@L SLA Goal',
+            key: 'pySLAGoal'
           }
         },
         {
@@ -87,7 +94,8 @@ export const pyReviewRaw = {
             value: '@P .pySLAStartTime',
             label: '@L SLA Start Time',
             listType: 'associated',
-            datasource: '@ASSOCIATED .pySLAStartTime'
+            datasource: '@ASSOCIATED .pySLAStartTime',
+            key: 'pySLAStartTime'
           }
         }
       ]
@@ -95,6 +103,7 @@ export const pyReviewRaw = {
     {
       name: 'B',
       type: 'Region',
+      key: 'B',
       getPConnect: () => {
         return {
           getRawMetadata: () => {
@@ -107,14 +116,16 @@ export const pyReviewRaw = {
           type: 'DateTime',
           config: {
             value: '@P .pySLADeadline',
-            label: '@L SLA Deadline'
+            label: '@L SLA Deadline',
+            key: 'pySLADeadline'
           }
         },
         {
           type: 'DateTime',
           config: {
             value: '@P .pySLAGoal',
-            label: '@L SLA Goal'
+            label: '@L SLA Goal',
+            key: 'pySLAGoal'
           }
         },
         {
@@ -123,7 +134,8 @@ export const pyReviewRaw = {
             value: '@P .pySLAStartTime',
             label: '@L SLA Start Time',
             listType: 'associated',
-            datasource: '@ASSOCIATED .pySLAStartTime'
+            datasource: '@ASSOCIATED .pySLAStartTime',
+            key: 'pySLAStartTime'
           }
         }
       ]
@@ -187,13 +199,15 @@ export const regionChildrenResolved = [
     readOnly: true,
     value: '',
     label: 'SLA Deadline',
-    displayMode: 'LABELS_LEFT'
+    displayMode: 'LABELS_LEFT',
+    key: 'SLA Deadline'
   },
   {
     readOnly: true,
     value: '',
     label: 'SLA Goal',
-    displayMode: 'LABELS_LEFT'
+    displayMode: 'LABELS_LEFT',
+    key: 'SLA Goal'
   },
   {
     readOnly: true,
@@ -210,6 +224,7 @@ export const regionChildrenResolved = [
         value: 'Current Date Time'
       }
     ],
-    displayMode: 'LABELS_LEFT'
+    displayMode: 'LABELS_LEFT',
+    key: 'SLA Start Time'
   }
 ];

package/src/tasks/create/templates/Constellation/template/DETAILS-region/styles.js.mustache

@@ -1,7 +1,14 @@
-import styled, { css } from 'styled-components';
+// utilizing theming, comment out, if want individual style
+import styled from 'styled-components';
+import { Configuration } from '@pega/cosmos-react-core';
 
-export default styled.div(() => {
-  return css`
-    margin: 0px 0px;
-  `;
-});
+export default styled(Configuration)``;
+
+// individual style, comment out above, and uncomment here and add styles
+// import styled, { css } from 'styled-components';
+//
+// export default styled.div(() => {
+//  return css`
+//    margin: 0px 0;
+//  `;
+// });

package/src/tasks/create/templates/Constellation/template/FORM/demo.stories.jsx.mustache

@@ -1,3 +1,5 @@
+/* eslint-disable react-hooks/rules-of-hooks */
+import { useState } from 'react';
 import { withKnobs } from '@storybook/addon-knobs';
 
 import {{COMPONENT_CLASS_NAME}} from './index.jsx';
@@ -12,45 +14,119 @@ export default {
 };
 
 const renderField = resolvedProps => {
-  const { displayMode, value = '', label = '' } = resolvedProps;
+  const { displayMode, value = '', label = '', key } = resolvedProps;
+
+  const [inputValue, setInputValue] = useState(value);
+  const [phoneValue, setPhoneValue] = useState('+16397975093');
 
   const variant = displayMode === 'LABELS_LEFT' ? 'inline' : 'stacked';
 
   let val =
     value !== '' ? (
-      <Text variant='h1' as='span'>
-        {value}
+      <Text
+        variant='h1'
+        as='span'
+        key={key}
+        onChange={e => {
+          setInputValue(e.target.value);
+        }}
+      >
+        {inputValue}
       </Text>
     ) : (
       ''
     );
 
-{{! pick new delimiteres for mustache }}
+{{! pick new delimiters for mustache }}
 {{=<% %>=}}
 
-  if (label === 'Service Date') val = <DateInput value={value} style={{ fontSize: '14px' }}></DateInput>;
+  if (label === 'Service Date')
+    val = (
+      <DateInput
+        value={inputValue}
+        style={{ fontSize: '14px' }}
+        key={key}
+        onChange={dateValue => {
+          const { valueAsISOString: date } = dateValue;
+          const trimmedDate = date ? date.substring(0, date.indexOf('T')) : date;
+          setInputValue(trimmedDate);
+        }}
+      ></DateInput>
+    );
 
-  if (label === 'Email') val = <Input type='email' value={value} style={{ fontSize: '14px' }}></Input>;
+  if (label === 'Email')
+    val = (
+      <Input
+        type='email'
+        value={inputValue}
+        style={{ fontSize: '14px' }}
+        key={key}
+        onChange={e => {
+          setInputValue(e.target.value);
+        }}
+      ></Input>
+    );
 
   if (label === 'First Name' || label === 'Last Name' || label === 'Middle Name')
-    val = <Input value={value} style={{ fontSize: '14px' }}></Input>;
+    val = (
+      <Input
+        value={inputValue}
+        style={{ fontSize: '14px' }}
+        key={key}
+        onChange={e => {
+          setInputValue(e.target.value);
+        }}
+      ></Input>
+    );
 
-  if (label === 'Phone Number') val = <CosmosPhone value={value} style={{ fontSize: '14px' }}></CosmosPhone>;
-<%={{ }}=%>     {{! revert delimiteres for mustache }}
+  if (label === 'Phone Number')
+    val = (
+      <CosmosPhone
+        value={phoneValue}
+        style={{ fontSize: '14px' }}
+        key={key}
+        onChange={phoneVal => {
+          setPhoneValue(phoneVal);
+        }}
+      ></CosmosPhone>
+    );
+
+<%={{ }}=%>     {{! revert delimiters for mustache }}
 
   if (variant === 'inline') {
-    val = value || <span aria-hidden='true'>&ndash;&ndash;</span>;
+    val = value || (
+      <span
+        aria-hidden='true'
+        onChange={e => {
+          setInputValue(e.target.value);
+        }}
+      >
+        &ndash;&ndash;
+      </span>
+    );
   } else {
     val = (
-      <Text variant='h1' as='span'>
+      <Text
+        variant='h1'
+        as='span'
+        key={key}
+        onChange={e => {
+          setInputValue(e.target.value);
+        }}
+      >
         {val}
       </Text>
     );
   }
-  return <FieldValueList variant={variant} fields={[{ name: label, value: val }]} />;
+  return (
+    <FieldValueList
+      variant={variant}
+      fields={[{ name: label, value: val }]}
+      key={key}
+    />
+  );
 };
 
-
 export const base{{COMPONENT_CLASS_NAME}} = () => {
   const props = {
     NumCols: 1,
@@ -86,8 +162,8 @@ export const base{{COMPONENT_CLASS_NAME}} = () => {
   });
 
   return (
-      <>
-        <{{COMPONENT_CLASS_NAME}} {...props}>{regionAChildren}</{{COMPONENT_CLASS_NAME}}>
-      </>
+    <>
+      <{{COMPONENT_CLASS_NAME}} {...props}>{regionAChildren}</{{COMPONENT_CLASS_NAME}}>
+    </>
   );
 };

package/src/tasks/create/templates/Constellation/template/FORM/index.jsx.mustache

@@ -19,7 +19,7 @@ export default function {{COMPONENT_CLASS_NAME}}(props) {
 
   return (
     <Styled{{COMPONENT_CLASS_NAME}}Wrapper>
-    {{! pick new delimiteres for mustache }}
+    {{! pick new delimiters for mustache }}
     {{=<% %>=}}
     <Grid container={{
           cols: `repeat(${nCols}, minmax(0, 1fr))`,
@@ -28,7 +28,7 @@ export default function {{COMPONENT_CLASS_NAME}}(props) {
         }}>
           {children}
     </Grid>
-    <%={{ }}=%>     {{! revert delimiteres for mustache }}
+    <%={{ }}=%>     {{! revert delimiters for mustache }}
     </Styled{{COMPONENT_CLASS_NAME}}Wrapper>
   );
 

package/src/tasks/create/templates/Constellation/template/FORM/mock.stories.js.mustache

@@ -16,28 +16,32 @@ export const pyReviewRaw = {
           type: 'TextInput',
           config: {
             value: '@P .FirstName',
-            label: '@L First Name'
+            label: '@L First Name',
+            key: 'FirstName'
           }
         },
         {
           type: 'TextInput',
           config: {
             value: '@P .MiddleName',
-            label: '@L Middle Name'
+            label: '@L Middle Name',
+            key: 'MiddleName'
           }
         },
         {
           type: 'TextInput',
           config: {
             value: '@P .LastName',
-            label: '@L Last Name'
+            label: '@L Last Name',
+            key: 'LastName'
           }
         },
         {
           type: 'Email',
           config: {
             value: '@P .Email',
-            label: '@L Email'
+            label: '@L Email',
+            key: 'Email'
           }
         },
         {
@@ -50,14 +54,16 @@ export const pyReviewRaw = {
               fields: {
                 value: '@P .pyCallingCode'
               }
-            }
+            },
+            key: 'PhoneNumber'
           }
         },
         {
           type: 'Date',
           config: {
             value: '@P .ServiceDate',
-            label: '@L Service Date'
+            label: '@L Service Date',
+            key: 'ServiceDate'
           }
         }
       ]
@@ -71,25 +77,29 @@ export const regionChildrenResolved = [
     readOnly: undefined,
     value: 'John',
     label: 'First Name',
-    hasSuggestions: false
+    hasSuggestions: false,
+    key: 'firstName'
   },
   {
     readOnly: undefined,
     value: '',
     label: 'Middle Name',
-    hasSuggestions: false
+    hasSuggestions: false,
+    key: 'middleName'
   },
   {
     readOnly: undefined,
     value: 'Doe',
     label: 'Last Name',
-    hasSuggestions: false
+    hasSuggestions: false,
+    key: 'lastName'
   },
   {
     readOnly: undefined,
     value: 'John@doe.com',
     label: 'Email',
-    hasSuggestions: false
+    hasSuggestions: false,
+    key: 'email'
   },
   {
     readOnly: undefined,
@@ -114,12 +124,14 @@ export const regionChildrenResolved = [
         }
       ]
     },
-    hasSuggestions: false
+    hasSuggestions: false,
+    key: 'phoneNumber'
   },
   {
     readOnly: undefined,
     value: '2023-01-25',
     label: 'Service Date',
-    hasSuggestions: false
+    hasSuggestions: false,
+    key: 'serviceDate'
   }
 ];

package/src/tasks/create/templates/Constellation/template/FORM/styles.js.mustache

@@ -1,7 +1,14 @@
-import styled, { css } from 'styled-components';
+// utilizing theming, comment out, if want individual style
+import styled from 'styled-components';
+import { Configuration } from '@pega/cosmos-react-core';
 
-export default styled.div(() => {
-  return css`
-    margin: 0px 0px;
-  `;
-});
+export default styled(Configuration)``;
+
+// individual style, comment out above, and uncomment here and add styles
+// import styled, { css } from 'styled-components';
+//
+// export default styled.div(() => {
+//  return css`
+//    margin: 0px 0;
+//  `;
+// });

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

@@ -1,3 +1,5 @@
+/* eslint-disable react-hooks/rules-of-hooks */
+import { useState } from 'react';
 import { withKnobs } from '@storybook/addon-knobs';
 
 import {{COMPONENT_CLASS_NAME}} from './index.jsx';
@@ -12,49 +14,125 @@ export default {
 };
 
 const renderField = resolvedProps => {
-  const { displayMode, value = '', label = '' } = resolvedProps;
+  const { displayMode, value = '', label = '', key } = resolvedProps;
+
+  const [inputValue, setInputValue] = useState(value);
+  const [phoneValue, setPhoneValue] = useState('+16397975093');
+
 
   const variant = displayMode === 'LABELS_LEFT' ? 'inline' : 'stacked';
 
   let val =
     value !== '' ? (
-      <Text variant='h1' as='span'>
-        {value}
+      <Text
+        variant='h1'
+        as='span'
+        key={key}
+        onChange={e => {
+          setInputValue(e.target.value);
+        }}
+      >
+        {inputValue}
       </Text>
     ) : (
       ''
     );
 
-{{! pick new delimiteres for mustache }}
+{{! pick new delimiters for mustache }}
 {{=<% %>=}}
 
   if (label === 'Service Date')
-    val = <DateInput value={value} style={{ fontSize: '14px' }}></DateInput>;
+    val = (
+      <DateInput
+        value={inputValue}
+        style={{ fontSize: '14px' }}
+        key={key}
+        onChange={dateVal => {
+          const { valueAsISOString: date } = dateVal;
+          const trimmedDate = date ? date.substring(0, date.indexOf('T')) : date;
+          setInputValue(trimmedDate);
+        }}
+      ></DateInput>
+    );
 
   if (label === 'Email')
-    val = <Input type='email' value={value} style={{ fontSize: '14px' }}></Input>;
+    val = (
+      <Input
+        type='email'
+        value={inputValue}
+        style={{ fontSize: '14px' }}
+        key={key}
+        onChange={e => {
+          setInputValue(e.target.value);
+        }}
+      ></Input>
+    );
 
   if (label === 'First Name' || label === 'Last Name' || label === 'Middle Name')
-    val = <Input value={value} style={{ fontSize: '14px' }}></Input>;
+    val = (
+      <Input
+        value={inputValue}
+        style={{ fontSize: '14px' }}
+        key={key}
+        onChange={e => {
+          setInputValue(e.target.value);
+        }}
+      ></Input>
+    );
 
   if (label === 'Phone Number')
-    val = <CosmosPhone value={value} style={{ fontSize: '14px' }}></CosmosPhone>;
+    val = (
+      <CosmosPhone
+        value={phoneValue}
+        showCountryCode
+        style={{ fontSize: '14px' }}
+        key={key}
+        onChange={phoneVal => {
+          setPhoneValue(phoneVal);
+        }}
+      ></CosmosPhone>
+    );
 
-<%={{ }}=%>     {{! revert delimiteres for mustache }}
+<%={{ }}=%>     {{! revert delimiters for mustache }}
 
   if (variant === 'inline') {
-    val = value || <span aria-hidden='true'>&ndash;&ndash;</span>;
+    val = value || (
+      <span
+        aria-hidden='true'
+        key={key}
+        onChange={e => {
+          setInputValue(e.target.value);
+        }}
+      >
+        &ndash;&ndash;
+      </span>
+    );
   } else {
     val = (
-      <Text variant='h1' as='span'>
+      <Text
+        variant='h1'
+        as='span'
+        key={key}
+        onChange={e => {
+          setInputValue(e.target.value);
+        }}
+      >
         {val}
       </Text>
     );
   }
-  return <FieldValueList variant={variant} fields={[{ name: label, value: val }]} />;
+  return (
+    <FieldValueList
+      variant={variant}
+      fields={[{ name: label, value: val }]}
+      key={key}
+      onChange={() => {
+        /* nothing */
+      }}
+    />
+  );
 };
 
-
 export const base{{COMPONENT_CLASS_NAME}} = () => {
   const props = {
     template: 'DefaultForm',

package/src/tasks/create/templates/Constellation/template/FORM-region/index.jsx.mustache

@@ -24,7 +24,7 @@ export default function {{COMPONENT_CLASS_NAME}}(props) {
 
   return (
     <Styled{{COMPONENT_CLASS_NAME}}Wrapper>
-    {{! pick new delimiteres for mustache }}
+    {{! pick new delimiters for mustache }}
     {{=<% %>=}}
       <Grid container={gridContainer}>
        {children.map((child, i) => (
@@ -33,7 +33,7 @@ export default function {{COMPONENT_CLASS_NAME}}(props) {
         </Flex>
        ))}
       </Grid>
-    <%={{ }}=%>     {{! revert delimiteres for mustache }}
+    <%={{ }}=%>     {{! revert delimiters for mustache }}
     </Styled{{COMPONENT_CLASS_NAME}}Wrapper>
   );