@pega/custom-dx-components 2.0.11 → 2.0.12

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

@@ -0,0 +1,215 @@
+export const pyReviewRaw = {
+  name: 'pyReview',
+  type: 'View',
+  config: {
+    template: 'Details',
+    ruleClass: 'MyCo-MyCompon-Work-MyComponents',
+    showLabel: true,
+    label: '@L Details',
+    localeReference: '@LR MYCO-MYCOMPON-WORK-MYCOMPONENTS!VIEW!PYREVIEW',
+    showHighlightedData: true,
+    highlightedData: [
+      {
+        type: 'TextInput',
+        config: {
+          value: '@P .pyStatusWork',
+          label: '@L Work Status',
+          displayMode: 'STACKED_LARGE_VAL',
+          displayAsStatus: true
+        }
+      },
+      {
+        type: 'TextInput',
+        config: {
+          value: '@P .pyID',
+          label: '@L Case ID',
+          displayMode: 'STACKED_LARGE_VAL'
+        }
+      },
+      {
+        type: 'DateTime',
+        config: {
+          value: '@P .pxCreateDateTime',
+          label: '@L Create date/time',
+          displayMode: 'STACKED_LARGE_VAL'
+        }
+      },
+      {
+        type: 'UserReference',
+        config: {
+          label: '@L Create Operator',
+          value: '@USER .pxCreateOperator',
+          placeholder: 'Select...',
+          displayMode: 'STACKED_LARGE_VAL'
+        }
+      }
+    ],
+    inheritedProps: [
+      {
+        prop: 'label',
+        value: '@L Details'
+      },
+      {
+        prop: 'showLabel',
+        value: true
+      }
+    ]
+  },
+  children: [
+    {
+      name: 'A',
+      type: 'Region',
+      getPConnect: () => {
+        return {
+          getRawMetadata: () => {
+            return pyReviewRaw.children[0];
+          }
+        };
+      },
+      children: [
+        {
+          type: 'DateTime',
+          config: {
+            value: '@P .pySLADeadline',
+            label: '@L SLA Deadline'
+          }
+        },
+        {
+          type: 'DateTime',
+          config: {
+            value: '@P .pySLAGoal',
+            label: '@L SLA Goal'
+          }
+        },
+        {
+          type: 'RadioButtons',
+          config: {
+            value: '@P .pySLAStartTime',
+            label: '@L SLA Start Time',
+            listType: 'associated',
+            datasource: '@ASSOCIATED .pySLAStartTime'
+          }
+        }
+      ]
+    },
+    {
+      name: 'B',
+      type: 'Region',
+      getPConnect: () => {
+        return {
+          getRawMetadata: () => {
+            return pyReviewRaw.children[0];
+          }
+        };
+      },
+      children: [
+        {
+          type: 'DateTime',
+          config: {
+            value: '@P .pySLADeadline',
+            label: '@L SLA Deadline'
+          }
+        },
+        {
+          type: 'DateTime',
+          config: {
+            value: '@P .pySLAGoal',
+            label: '@L SLA Goal'
+          }
+        },
+        {
+          type: 'RadioButtons',
+          config: {
+            value: '@P .pySLAStartTime',
+            label: '@L SLA Start Time',
+            listType: 'associated',
+            datasource: '@ASSOCIATED .pySLAStartTime'
+          }
+        }
+      ]
+    }
+  ],
+  classID: 'MyCo-MyCompon-Work-MyComponents'
+};
+
+export const pyReviewResolved = {
+  readOnly: true,
+  template: 'Details',
+  ruleClass: 'MyCo-MyCompon-Work-MyComponents',
+  showLabel: true,
+  label: 'Details',
+  localeReference: 'MYCO-MYCOMPON-WORK-MYCOMPONENTS!VIEW!PYREVIEW',
+  showHighlightedData: true,
+  highlightedData: [
+    {
+      type: 'TextInput',
+      config: {
+        value: 'New',
+        label: 'Work Status',
+        displayMode: 'STACKED_LARGE_VAL',
+        displayAsStatus: true
+      }
+    },
+    {
+      type: 'TextInput',
+      config: {
+        value: 'M-1002',
+        label: 'Case ID',
+        displayMode: 'STACKED_LARGE_VAL'
+      }
+    },
+    {
+      type: 'DateTime',
+      config: {
+        value: '2022-12-11T20:06:27.232Z',
+        label: 'Create date/time',
+        displayMode: 'STACKED_LARGE_VAL'
+      }
+    },
+    {
+      type: 'UserReference',
+      config: {
+        label: 'Create Operator',
+        value: {
+          userId: 'riddn',
+          userName: 'Niall Riddell'
+        },
+        placeholder: 'Select...',
+        displayMode: 'STACKED_LARGE_VAL'
+      }
+    }
+  ],
+  displayMode: 'LABELS_LEFT'
+};
+
+export const regionChildrenResolved = [
+  {
+    readOnly: true,
+    value: '',
+    label: 'SLA Deadline',
+    displayMode: 'LABELS_LEFT'
+  },
+  {
+    readOnly: true,
+    value: '',
+    label: 'SLA Goal',
+    displayMode: 'LABELS_LEFT'
+  },
+  {
+    readOnly: true,
+    value: '',
+    label: 'SLA Start Time',
+    listType: 'associated',
+    datasource: [
+      {
+        key: 'AssignmentCreation',
+        value: 'The creation time of the Assignment'
+      },
+      {
+        key: 'CurrentTime',
+        value: 'Current Date Time'
+      }
+    ],
+    displayMode: 'LABELS_LEFT'
+  }
+];

package/src/tasks/create/templates/Constellation/Template/DETAILS-region/utils.js.mustache

@@ -1,8 +1,6 @@
-import { createUID } from '@pega/cosmos-react-core';
+/* eslint-disable no-undef */
 
-//import { LazyMap as LazyComponentMap } from '../../components_map';
 
-const LazyComponentMap = {};
 
 /**
  * Given the PConnect object of a Template component, retrieve the children
@@ -43,78 +41,7 @@ export function getAllFields(pConnect) {
   return allFields;
 }
 
-/**
- * A helper function to create an object consisting react component as per the type.
- * This is used by CaseSummary template.
- * @param {object} configObject Object containing meta information for the particular field authored
- * @param {Function} getPConnect PConnect function passed along to other components.
- * @param {string} displayMode displayMode string contains information about the layout of component in review mode.
- */
-export function prepareComponentInCaseSummary(configObject, getPConnect, displayMode) {
-  const { config, children } = configObject;
-  let { type } = configObject;
-  const caseSummaryComponentObject = {};
-  let showAddressLabel = true;
-  if (config && config.value === '@P .pyStatusWork') {
-    config.displayAsStatus = true;
-    type = 'TextInput'; // force the type to be TextInput for status field.
-    // As TextInput is loaded forcefully sometimes, TextInput component might not be available in lazy map.
-    // Load TextInput if it is not available.
-    if (!LazyComponentMap[type]) {
-      PCore.getAssetLoader().getLoader('component-loader')([type]);
-    }
-  }
 
-  caseSummaryComponentObject.name = getPConnect().resolveConfigProps({
-    label: config.label
-  }).label;
-  if (type === 'CaseOperator') {
-    switch (caseSummaryComponentObject.name) {
-      case 'Create operator':
-        caseSummaryComponentObject.name = getPConnect().resolveConfigProps({
-          createLabel: config.createLabel
-        }).createLabel;
-        break;
-      case 'Update operator':
-        caseSummaryComponentObject.name = getPConnect().resolveConfigProps({
-          updateLabel: config.updateLabel
-        }).updateLabel;
-        break;
-      default:
-        caseSummaryComponentObject.name = getPConnect().resolveConfigProps({
-          resolveLabel: config.resolveLabel
-        }).resolveLabel;
-        break;
-    }
-  } else if (type === 'Checkbox') {
-    caseSummaryComponentObject.name = getPConnect().resolveConfigProps({
-      label: config.caption
-    }).label;
-  } else if (type === 'Address') {
-    showAddressLabel = false;
-  }
-  const createdComponent = getPConnect().createComponent({
-    type,
-    children: children ? [...children] : [],
-    showAddressLabel,
-    config: {
-      ...config,
-      hideLabel: true,
-      key: createUID() // Need a unique key on render of the summary so that the component is recreated each time
-    }
-  });
-  createdComponent.props.getPConnect().setInheritedProp('displayMode', displayMode);
-  if (type === 'Address') {
-    createdComponent.props.getPConnect().setInheritedProp('showAddressLabel', showAddressLabel);
-  }
-  // createdComponent.props.getPConnect().setInheritedProp("hideLabel", true);
-  caseSummaryComponentObject.value = createdComponent;
-  if (type === 'reference') {
-    caseSummaryComponentObject.name = createdComponent.props.getPConnect().getInheritedProps().label;
-  }
-
-  return caseSummaryComponentObject;
-}
 
 export function getFilteredFields(getPConnect) {
   let primaryFieldsRaw;
@@ -212,7 +139,9 @@ export function getInstructions(pConnect, instructions = 'casestep') {
 
   // If the annotation wasn't processed correctly, don't return any instruction text
   if (instructions?.startsWith('@PARAGRAPH')) {
+     /* eslint-disable no-console */
     console.error('@PARAGRAPH annotation was not processed. Hiding custom instructions.');
+     /* eslint-enable no-console */
     return undefined;
   }
 

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

@@ -0,0 +1,89 @@
+import { withKnobs } from '@storybook/addon-knobs';
+
+import {{COMPONENT_CLASS_NAME}} from './index.jsx';
+import { DateInput, Input, FieldValueList, Text } from '@pega/cosmos-react-core';
+import { PhoneInput as CosmosPhone } from '@pega/cosmos-react-core';
+import { pyReviewRaw, regionChildrenResolved } from './mock.stories';
+
+export default {
+  title: '{{COMPONENT_CLASS_NAME}}',
+  decorators: [withKnobs],
+  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 != '' ? (
+      <Text variant='h1' as='span'>
+        {value}
+      </Text>
+    ) : (
+      ''
+    );
+
+{{! pick new delimiteres for mustache }}
+{{=<% %>=}}
+
+  if (label === 'Service Date') val = <DateInput value={value} style={{ fontSize: '14px' }}></DateInput>;
+
+  if (label === 'Email') val = <Input type='email' value={value} style={{ fontSize: '14px' }}></Input>;
+
+  if (label === 'First Name' || label === 'Last Name' || label === 'Middle Name')
+    val = <Input value={value} style={{ fontSize: '14px' }}></Input>;
+
+  if (label === 'Phone Number') val = <CosmosPhone value={value} style={{ fontSize: '14px' }}></CosmosPhone>;
+<%={{ }}=%>     {{! revert delimiteres for mustache }}
+
+  if (variant === 'inline') {
+    val = value || <span aria-hidden='true'>&ndash;&ndash;</span>;
+  } else {
+    val = (
+      <Text variant='h1' as='span'>
+        {val}
+      </Text>
+    );
+  }
+  return <FieldValueList variant={variant} fields={[{ name: label, value: val }]} />;
+};

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

@@ -1,5 +1,4 @@
-import { useContext } from 'react';
-import { Grid , Flex } from '@pega/cosmos-react-core';
+import { Grid } from '@pega/cosmos-react-core';
 import PropTypes from 'prop-types';
 
 import Styled{{COMPONENT_CLASS_NAME}}Wrapper from './styles';
@@ -12,11 +11,11 @@ import Styled{{COMPONENT_CLASS_NAME}}Wrapper from './styles';
 export default function {{COMPONENT_CLASS_NAME}}(props) {
 
 
-  const { getPConnect, children, template, label, NumCols } = props;
+  const { children, NumCols } = props;
 
-  let nCols = parseInt(NumCols);
+  const nCols = parseInt(NumCols, 10);
 
-  //console.log(`Rendering ${getPConnect()?.getComponentName()} with ${template} with ${children?.length} Region(s)`);
+  // console.log(`Rendering ${getPConnect()?.getComponentName()} with ${template} with ${children?.length} Region(s)`);
 
   return (
     <Styled{{COMPONENT_CLASS_NAME}}Wrapper>
@@ -37,13 +36,10 @@ export default function {{COMPONENT_CLASS_NAME}}(props) {
 
 {{COMPONENT_CLASS_NAME}}.defaultProps = {
   NumCols: 1,
-  templateOverrideMode: 'USE_TEMPLATE',
   children: []
 };
 
 {{COMPONENT_CLASS_NAME}}.propTypes = {
-  label: PropTypes.string,
-  getPConnect: PropTypes.func.isRequired,
-  children: PropTypes.arrayOf(PropTypes.node).isRequired,
-  template: PropTypes.string.isRequired
+  NumCols: PropTypes.number,
+  children: PropTypes.arrayOf(PropTypes.node),
 };

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

@@ -0,0 +1,125 @@
+export const pyReviewRaw = {
+  name: 'CollectInformation',
+  type: 'View',
+  config: {
+    template: 'DefaultForm',
+    ruleClass: 'OM5W9U-SampleApp-Work-Test',
+    localeReference: '@LR OM5W9U-SAMPLEAPP-WORK-TEST!VIEW!COLLECTINFORMATION',
+    context: '@P .pyViewContext'
+  },
+  children: [
+    {
+      name: 'Fields',
+      type: 'Region',
+      children: [
+        {
+          type: 'TextInput',
+          config: {
+            value: '@P .FirstName',
+            label: '@L First Name'
+          }
+        },
+        {
+          type: 'TextInput',
+          config: {
+            value: '@P .MiddleName',
+            label: '@L Middle Name'
+          }
+        },
+        {
+          type: 'TextInput',
+          config: {
+            value: '@P .LastName',
+            label: '@L Last Name'
+          }
+        },
+        {
+          type: 'Email',
+          config: {
+            value: '@P .Email',
+            label: '@L Email'
+          }
+        },
+        {
+          type: 'Phone',
+          config: {
+            value: '@P .PhoneNumber',
+            label: '@L Phone Number',
+            datasource: {
+              source: '@DATASOURCE D_pyCountryCallingCodeList.pxResults',
+              fields: {
+                value: '@P .pyCallingCode'
+              }
+            }
+          }
+        },
+        {
+          type: 'Date',
+          config: {
+            value: '@P .ServiceDate',
+            label: '@L Service Date'
+          }
+        }
+      ]
+    }
+  ],
+  classID: 'OM5W9U-SampleApp-Work-Test'
+};
+
+export const regionChildrenResolved = [
+  {
+    readOnly: undefined,
+    value: 'John',
+    label: 'First Name',
+    hasSuggestions: false
+  },
+  {
+    readOnly: undefined,
+    value: '',
+    label: 'Middle Name',
+    hasSuggestions: false
+  },
+  {
+    readOnly: undefined,
+    value: 'Doe',
+    label: 'Last Name',
+    hasSuggestions: false
+  },
+  {
+    readOnly: undefined,
+    value: 'John@doe.com',
+    label: 'Email',
+    hasSuggestions: false
+  },
+  {
+    readOnly: undefined,
+    value: '+16397975093',
+    label: 'Phone Number',
+    datasource: {
+      fields: {
+        value: undefined
+      },
+      source: [
+        {
+          value: '+1'
+        },
+        {
+          value: '+91'
+        },
+        {
+          value: '+48'
+        },
+        {
+          value: '+44'
+        }
+      ]
+    },
+    hasSuggestions: false
+  },
+  {
+    readOnly: undefined,
+    value: '2023-01-25',
+    label: 'Service Date',
+    hasSuggestions: false
+  }
+];

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

@@ -0,0 +1,92 @@
+import { withKnobs } from '@storybook/addon-knobs';
+
+import {{COMPONENT_CLASS_NAME}} from './index.jsx';
+import { DateInput, Input, FieldValueList, Text } from '@pega/cosmos-react-core';
+import { PhoneInput as CosmosPhone } from '@pega/cosmos-react-core';
+import { pyReviewRaw, regionChildrenResolved } from './mock.stories';
+
+export default {
+  title: '{{COMPONENT_CLASS_NAME}}',
+  decorators: [withKnobs],
+  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: '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 != '' ? (
+      <Text variant='h1' as='span'>
+        {value}
+      </Text>
+    ) : (
+      ''
+    );
+
+{{! pick new delimiteres for mustache }}
+{{=<% %>=}}
+
+  if (label === 'Service Date')
+    val = <DateInput value={value} style={{ fontSize: '14px' }}></DateInput>;
+
+  if (label === 'Email')
+    val = <Input type='email' value={value} style={{ fontSize: '14px' }}></Input>;
+
+  if (label === 'First Name' || label === 'Last Name' || label === 'Middle Name')
+    val = <Input value={value} style={{ fontSize: '14px' }}></Input>;
+
+  if (label === 'Phone Number')
+    val = <CosmosPhone value={value} style={{ fontSize: '14px' }}></CosmosPhone>;
+
+<%={{ }}=%>     {{! revert delimiteres for mustache }}
+
+  if (variant === 'inline') {
+    val = value || <span aria-hidden='true'>&ndash;&ndash;</span>;
+  } else {
+    val = (
+      <Text variant='h1' as='span'>
+        {val}
+      </Text>
+    );
+  }
+  return <FieldValueList variant={variant} fields={[{ name: label, value: val }]} />;
+};

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

@@ -1,5 +1,4 @@
-import { useContext } from 'react';
-import { Grid , Flex } from '@pega/cosmos-react-core';
+import { Grid, Flex } from '@pega/cosmos-react-core';
 import PropTypes from 'prop-types';
 
 import Styled{{COMPONENT_CLASS_NAME}}Wrapper from './styles';
@@ -12,13 +11,19 @@ import Styled{{COMPONENT_CLASS_NAME}}Wrapper from './styles';
 export default function {{COMPONENT_CLASS_NAME}}(props) {
 
 
-  const { getPConnect, children, template, label } = props;
+  const { children } = props;
+
+  const numRegions = children?.length;
+  const gridRepeat = "repeat(".concat(numRegions).concat(", 1fr)");
+  const gridContainer = {"colGap" : 1};
+  gridContainer.cols = gridRepeat;
+  gridContainer.alignItems = 'start';
 
   return (
     <Styled{{COMPONENT_CLASS_NAME}}Wrapper>
     {{! pick new delimiteres for mustache }}
     {{=<% %>=}}
-      <Grid container={{ cols:'repeat(2, 1fr)', alignItems: 'start', colGap: 1 }}>
+      <Grid container={gridContainer}>
        {children.map((child, i) => (
         <Flex container={{ direction: 'column'}} key={`r-${i + 1}`}>
         {child}
@@ -36,8 +41,5 @@ export default function {{COMPONENT_CLASS_NAME}}(props) {
 };
 
 {{COMPONENT_CLASS_NAME}}.propTypes = {
-  label: PropTypes.string,
-  getPConnect: PropTypes.func.isRequired,
-  children: PropTypes.arrayOf(PropTypes.node).isRequired,
-  template: PropTypes.string.isRequired
+  children: PropTypes.arrayOf(PropTypes.node),
 };