@pega/custom-dx-components 2.0.23 → 2.0.25

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

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

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

@@ -1,5 +1,6 @@
-import { withKnobs } from '@storybook/addon-knobs';
-import { configProps, stateProps } from './mock.stories';
+import { useState } from 'react';
+import { withKnobs, text, boolean } from '@storybook/addon-knobs';
+
 import {{COMPONENT_CLASS_NAME}} from './index.jsx';
 
 export default {
@@ -9,44 +10,30 @@ export default {
 };
 
 export const base{{COMPONENT_CLASS_NAME}} = () => {
+  const [value, setValue] = useState('test value');
+
   const props = {
     getPConnect: () => {
       return {
         getActionsApi: () => {
           return {
-            updateFieldValue: () => {/* nothing */},
-            triggerFieldChange: () => {/* nothing */}
-          };
-        },
-        getValidationApi: () => {
-          return {
-            validate: () => {/* nothing */}
+            updateFieldValue: (propName, value) => {
+              setValue(value);
+            }
           };
         },
         getStateProps: () => {
-          return stateProps;
-        },
-        getConfigProps: () => {
-          return configProps;
-        },
-        ignoreSuggestion: () => {/* nothing */},
-        clearErrorMessages: () => {/* nothing */}
+          return { value: '.name' };
+        }
       };
     },
-    value: configProps.value,
-    validatemessage: configProps.validatemessage,
-    label: configProps.label,
-    hideLabel: configProps.hideLabel,
-    helperText: configProps.helperText,
-    withSeconds: configProps.withSeconds,
-    testId: configProps.testId,
-    additionalProps: configProps.additionalProps,
-    displayMode: configProps.displayMode,
-    variant: configProps.variant,
-    hasSuggestions: configProps.hasSuggestions,
-    disabled: configProps.disabled,
-    readOnly: configProps.readOnly,
-    required: configProps.required
+    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')
   };
 
   return (

package/src/tasks/create/templates/Constellation/Field/TimeofDay/time-of-day.js.mustache

@@ -1,4 +1,3 @@
-/* eslint-disable no-undef */
 import dayjs from "dayjs";
 
 const relativeTime = require("dayjs/plugin/relativeTime");

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

@@ -1,5 +1,5 @@
-import { Fragment } from 'react';
-import { Grid, Flex, FieldGroup } from '@pega/cosmos-react-core';
+import { useContext, Fragment } from 'react';
+import { Grid , Flex, FieldGroup } from '@pega/cosmos-react-core';
 import PropTypes from 'prop-types';
 
 import Styled{{COMPONENT_CLASS_NAME}}Wrapper from './styles';
@@ -13,19 +13,13 @@ import { getAllFields } from './utils';
 // any default values in config.pros should be set in defaultProps at bottom of this file
 export default function {{COMPONENT_CLASS_NAME}}(props) {
 
-  const { getPConnect, children, label, showLabel, showHighlightedData  } = props;
+
+  const { getPConnect, children, template, regionsMetadata = [], label, showLabel, showHighlightedData  } = props;
+
   const propsToUse = { label, showLabel, ...getPConnect().getInheritedProps() };
 
-  const numRegions = getAllFields(getPConnect)?.length;
-  const gridRepeat = "repeat(".concat(numRegions).concat(", 1fr)");
-  const gridContainer = { "colGap": 1};
-  gridContainer.cols = gridRepeat;
-  gridContainer.alignItems = 'start';
 
-  const gridHighlightContainer = { "gap": 2};
-  gridHighlightContainer.cols = gridRepeat;
-  gridHighlightContainer.alignItems = 'start';
-  gridHighlightContainer.pad = [0, 0, 2, 0];
+  const numRegions = regionsMetadata.length;
 
   // Set up highlighted data to pass in return if is set to show, need raw metadata to pass to createComponent
   let highlightedDataArr = [];
@@ -50,14 +44,14 @@ export default function {{COMPONENT_CLASS_NAME}}(props) {
     {{=<% %>=}}
     <FieldGroup name={propsToUse.showLabel ? propsToUse.label : ''}>
       {showHighlightedData && highlightedDataArr.length > 0 && (
-        <Grid container={gridHighlightContainer}
+        <Grid container={{ cols:'repeat(${numRegions}, 1fr)', gap: 2, alignItems: 'start',  pad: [0, 0, 2, 0] }}
           data-testid={`highlighted-column-count-${numRegions}`}>
           {highlightedDataArr.map((child, i) => (
             <Fragment key={`hf-${i + 1}`}>{child}</Fragment>
           ))}
         </Grid>
       )}
-      <Grid container={gridContainer} data-testid={`column-count-${numRegions}`} >
+      <Grid container={{ cols:'repeat(${numRegions}, 1fr)', alignItems: 'start', colGap: 1 }} data-testid={`column-count-${numRegions}`} >
        {children.map((child, i) => (
         <Flex container={{ direction: 'column'}} key={`r-${i + 1}`}>
         {child}
@@ -77,10 +71,31 @@ export default function {{COMPONENT_CLASS_NAME}}(props) {
   showHighlightedData: false
 };
 
+// Since the fields are not part of the 'config' in Details template metadata, they need to be subscribed with additionalprops
+const mapStateToProps = (_, ownProps) => {
+  const { getPConnect, showLabel, label } = ownProps;
+  const Allfields = getAllFields(getPConnect);
+
+  return {
+    regionsMetadata: Allfields,
+    label,
+    showLabel,
+    getPConnect
+  };
+};
 
 {{COMPONENT_CLASS_NAME}}.propTypes = {
+  regionsMetadata: PropTypes.arrayOf(
+    PropTypes.arrayOf(
+      PropTypes.shape({
+        value: PropTypes.oneOfType([PropTypes.bool, PropTypes.string, PropTypes.number]),
+        label: PropTypes.string
+      })
+    )
+  ).isRequired,
   showLabel: PropTypes.bool,
   label: PropTypes.string,
   getPConnect: PropTypes.func.isRequired,
+  template: PropTypes.string.isRequired,
   showHighlightedData: PropTypes.bool
 };

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

@@ -1,4 +1,8 @@
-/* eslint-disable no-undef */
+import { createUID } from '@pega/cosmos-react-core';
+
+//import { LazyMap as LazyComponentMap } from '../../components_map';
+
+const LazyComponentMap = {};
 
 /**
  * Given the PConnect object of a Template component, retrieve the children
@@ -39,7 +43,78 @@ 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;
@@ -137,9 +212,8 @@ 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;
+    return undefined;
   }
 
   // Custom instructions from the view

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

@@ -1,5 +1,5 @@
-import { Fragment } from 'react';
-import { Grid, Flex, FieldGroup } from '@pega/cosmos-react-core';
+import { useContext, Fragment } from 'react';
+import { Grid , Flex, FieldGroup } from '@pega/cosmos-react-core';
 import PropTypes from 'prop-types';
 
 import Styled{{COMPONENT_CLASS_NAME}}Wrapper from './styles';
@@ -13,19 +13,13 @@ import { getAllFields } from './utils';
 // any default values in config.pros should be set in defaultProps at bottom of this file
 export default function {{COMPONENT_CLASS_NAME}}(props) {
 
-  const { getPConnect, children, label, showLabel, showHighlightedData  } = props;
+
+  const { getPConnect, children, template, regionsMetadata = [], label, showLabel, showHighlightedData  } = props;
+
   const propsToUse = { label, showLabel, ...getPConnect().getInheritedProps() };
 
-  const numRegions = getAllFields(getPConnect)?.length;
-  const gridRepeat = "repeat(".concat(numRegions).concat(", 1fr)");
-  const gridContainer = { "colGap": 1};
-  gridContainer.cols = gridRepeat;
-  gridContainer.alignItems = 'start';
 
-  const gridHighlightContainer = { "gap": 2};
-  gridHighlightContainer.cols = gridRepeat;
-  gridHighlightContainer.alignItems = 'start';
-  gridHighlightContainer.pad = [0, 0, 2, 0];
+  const numRegions = regionsMetadata.length;
 
   // Set up highlighted data to pass in return if is set to show, need raw metadata to pass to createComponent
   let highlightedDataArr = [];
@@ -50,14 +44,14 @@ export default function {{COMPONENT_CLASS_NAME}}(props) {
     {{=<% %>=}}
     <FieldGroup name={propsToUse.showLabel ? propsToUse.label : ''}>
       {showHighlightedData && highlightedDataArr.length > 0 && (
-        <Grid container={gridHighlightContainer}
+        <Grid container={{ cols:'repeat(${numRegions}, 1fr)', gap: 2, alignItems: 'start',  pad: [0, 0, 2, 0] }}
           data-testid={`highlighted-column-count-${numRegions}`}>
           {highlightedDataArr.map((child, i) => (
             <Fragment key={`hf-${i + 1}`}>{child}</Fragment>
           ))}
         </Grid>
       )}
-      <Grid container={gridContainer} data-testid={`column-count-${numRegions}`} >
+      <Grid container={{ cols:'repeat(${numRegions}, 1fr)', alignItems: 'start', colGap: 1 }} data-testid={`column-count-${numRegions}`} >
        {children.map((child, i) => (
         <Flex container={{ direction: 'column'}} key={`r-${i + 1}`}>
         {child}
@@ -77,10 +71,31 @@ export default function {{COMPONENT_CLASS_NAME}}(props) {
   showHighlightedData: false
 };
 
+// Since the fields are not part of the 'config' in Details template metadata, they need to be subscribed with additionalprops
+const mapStateToProps = (_, ownProps) => {
+  const { getPConnect, showLabel, label } = ownProps;
+  const Allfields = getAllFields(getPConnect);
+
+  return {
+    regionsMetadata: Allfields,
+    label,
+    showLabel,
+    getPConnect
+  };
+};
 
 {{COMPONENT_CLASS_NAME}}.propTypes = {
+  regionsMetadata: PropTypes.arrayOf(
+    PropTypes.arrayOf(
+      PropTypes.shape({
+        value: PropTypes.oneOfType([PropTypes.bool, PropTypes.string, PropTypes.number]),
+        label: PropTypes.string
+      })
+    )
+  ).isRequired,
   showLabel: PropTypes.bool,
   label: PropTypes.string,
   getPConnect: PropTypes.func.isRequired,
+  template: PropTypes.string.isRequired,
   showHighlightedData: PropTypes.bool
 };

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

@@ -1,6 +1,8 @@
-/* eslint-disable no-undef */
+import { createUID } from '@pega/cosmos-react-core';
 
+//import { LazyMap as LazyComponentMap } from '../../components_map';
 
+const LazyComponentMap = {};
 
 /**
  * Given the PConnect object of a Template component, retrieve the children
@@ -41,7 +43,78 @@ 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;
@@ -139,9 +212,7 @@ 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/index.jsx.mustache

@@ -1,4 +1,5 @@
-import { Grid } from '@pega/cosmos-react-core';
+import { useContext } from 'react';
+import { Grid , Flex } from '@pega/cosmos-react-core';
 import PropTypes from 'prop-types';
 
 import Styled{{COMPONENT_CLASS_NAME}}Wrapper from './styles';
@@ -11,11 +12,11 @@ import Styled{{COMPONENT_CLASS_NAME}}Wrapper from './styles';
 export default function {{COMPONENT_CLASS_NAME}}(props) {
 
 
-  const { children, NumCols } = props;
+  const { getPConnect, children, template, label, NumCols } = props;
 
-  const nCols = parseInt(NumCols, 10);
+  let nCols = parseInt(NumCols);
 
-  // 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>
@@ -36,10 +37,13 @@ export default function {{COMPONENT_CLASS_NAME}}(props) {
 
 {{COMPONENT_CLASS_NAME}}.defaultProps = {
   NumCols: 1,
+  templateOverrideMode: 'USE_TEMPLATE',
   children: []
 };
 
 {{COMPONENT_CLASS_NAME}}.propTypes = {
-  NumCols: PropTypes.number,
-  children: PropTypes.arrayOf(PropTypes.node),
+  label: PropTypes.string,
+  getPConnect: PropTypes.func.isRequired,
+  children: PropTypes.arrayOf(PropTypes.node).isRequired,
+  template: PropTypes.string.isRequired
 };

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

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

package/src/tasks/create/templates/Constellation/Template/PAGE/{GetNextWork.jsx.mustache → GetNextWork.js.mustache}

@@ -1,4 +1,3 @@
-/* eslint-disable no-undef */
 import { Button, useToaster } from '@pega/cosmos-react-core';
 
 export default function GetNextWork(props) {
@@ -9,16 +8,11 @@ export default function GetNextWork(props) {
   const localizedVal = PCore.getLocaleUtils().getLocaleValue;
 
   const getNextWork = () => {
-
-    // alert('Get next work clicked');
-
     getPConnect()
       .getActionsApi()
       .getNextWork()
       .catch((err) => {
-        /* eslint-disable no-console */
         console.log(err);
-        /* eslint-enable no-console */
         if (err[0].status === 404) {
           toasterCtx.push({
             content: localizedVal('No task currently available')

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

@@ -1,19 +1,19 @@
 import { useMemo, Children } from 'react';
 import PropTypes from 'prop-types';
 import { OneColumnPage as OneColumn } from '@pega/cosmos-react-core';
+import { registerIcon } from '@pega/cosmos-react-core';
 import { ConfigurableLayout } from '@pega/cosmos-react-work'
-// import { registerIcon } from '@pega/cosmos-react-core';
 
 // temp
-// import * as headlineIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/headline.icon';
+//import * as headlineIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/headline.icon';
 
 import Styled{{COMPONENT_CLASS_NAME}}Wrapper from './styles';
 
-import GetNextWork from './GetNextWork.jsx';
+import GetNextWork from './GetNextWork';
 import { getLayoutDataFromRegion } from './utils';
 
 // temp
-// registerIcon(headlineIcon);
+//registerIcon(headlineIcon);
 
 // currently getting 'icon' from props is not supported with iconRegistry
 // have to manually get icon, so can't determine a runtime for now
@@ -27,9 +27,7 @@ import { getLayoutDataFromRegion } from './utils';
 // any default values in config.pros should be set in defaultProps at bottom of this file
 export default function {{COMPONENT_CLASS_NAME}}(props) {
 
-  // add back in icon when working
-  // const { children, title, icon, useConfigurableLayout, getPConnect, enableGetNextWork } = props;
-  const { children, title, useConfigurableLayout, getPConnect, enableGetNextWork } = props;
+  const { children, title, icon, useConfigurableLayout, getPConnect, enableGetNextWork } = props;
   const childArray = useMemo(() => {
     return Children.toArray(children);
   }, [children]);
@@ -58,13 +56,13 @@ export default function {{COMPONENT_CLASS_NAME}}(props) {
 }
 
 {{COMPONENT_CLASS_NAME}}.defaultProps = {
-  /* icon: '', */
+  icon: '',
   useConfigurableLayout: false
 };
 
 {{COMPONENT_CLASS_NAME}}.propTypes = {
   children: PropTypes.arrayOf(PropTypes.node).isRequired,
   title: PropTypes.string.isRequired,
-  /* icon: PropTypes.string, */
+  icon: PropTypes.string,
   useConfigurableLayout: PropTypes.bool
 };

package/src/tasks/create/templates/Constellation/Template/PAGE/utils.js.mustache

@@ -1,7 +1,6 @@
-/* eslint-disable no-undef */
 import { createUID } from '@pega/cosmos-react-core';
 
-// import { LazyMap as LazyComponentMap } from '../../components_map';
+//import { LazyMap as LazyComponentMap } from '../../components_map';
 
 const LazyComponentMap = {};
 
@@ -213,9 +212,7 @@ 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/Widget/CASE/index.jsx.mustache

@@ -1,4 +1,3 @@
-/* eslint-disable no-undef */
 import { useState, useEffect } from 'react';
 import PropTypes from 'prop-types';
 import { Table, Text } from '@pega/cosmos-react-core';

package/src/tasks/create/templates/Constellation/Widget/PAGE/index.jsx.mustache

@@ -32,17 +32,17 @@ export default function {{COMPONENT_CLASS_NAME}}(props) {
 }
 
 {{COMPONENT_CLASS_NAME}}.defaultProps = {
-  header: '',
-  description: '',
-  image: '',
-  datasource: [],
-  whatsnewlink: ''
-};
-
-{{COMPONENT_CLASS_NAME}}.propTypes = {
   header: PropTypes.string,
   description: PropTypes.string,
   datasource: PropTypes.instanceOf(Object),
   whatsnewlink: PropTypes.string,
   image: PropTypes.string
 };
+
+{{COMPONENT_CLASS_NAME}}.propTypes = {
+  header: '',
+  description: '',
+  image: '',
+  datasource: [],
+  whatsnewlink: ''
+};

package/src/tasks/create/templates/Constellation/Widget/PAGE-CASE/{Avatar.jsx.mustache → Avatar.js.mustache}

@@ -1,5 +1,3 @@
-/* eslint-disable no-undef */
-/* eslint-disable react-hooks/rules-of-hooks */
 import { useEffect, useState } from 'react';
 import PropTypes from 'prop-types';
 import { Avatar as CosmosAvatar } from '@pega/cosmos-react-core';

package/src/tasks/create/templates/Constellation/Widget/PAGE-CASE/{Operator.jsx.mustache → Operator.js.mustache}

@@ -1,4 +1,3 @@
-/* eslint-disable no-undef */
 import { useState, useEffect, Fragment } from 'react';
 import {
   Link,
@@ -14,7 +13,7 @@ import {
 import { Glimpse } from '@pega/cosmos-react-work';
 import PropTypes from 'prop-types';
 
-import Avatar from './Avatar.jsx';
+import Avatar from './Avatar';
 
 const Operator = (props) => {
   const { id, name, label, testId, helperText, externalUser, metaObj } = props;