@pega/custom-dx-components 2.0.24 → 2.0.25

package/src/tasks/create/templates/Constellation/Field/DateTime/index.jsx.mustache

@@ -1,4 +1,3 @@
-/* eslint-disable no-undef */
 import { useEffect, useState } from 'react';
 import { DateTimeInput, FieldValueList, DateTimeDisplay, Text } from "@pega/cosmos-react-core";
 import PropTypes from "prop-types";
@@ -247,7 +246,6 @@ const {{COMPONENT_CLASS_NAME}} = props => {
   displayMode: PropTypes.string,
   variant: PropTypes.string,
   formatter: PropTypes.string,
-  Format: PropTypes.string,
   hasSuggestions: PropTypes.bool
 };
 

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

@@ -1,6 +1,5 @@
-import { withKnobs } from '@storybook/addon-knobs';
-
-import { configProps, fieldMetadata, stateProps } from './mock.stories.js';
+import { useState } from 'react';
+import { withKnobs, text, boolean } from '@storybook/addon-knobs';
 
 import {{COMPONENT_CLASS_NAME}} from './index.jsx';
 
@@ -11,34 +10,30 @@ export default {
 };
 
 export const base{{COMPONENT_CLASS_NAME}} = () => {
+  const [value, setValue] = useState('test value');
 
   const props = {
-    value: configProps.value,
-    placeholder: configProps.placeholder,
-    label: configProps.label,
-    helperText: configProps.helperText,
-    showGroupSeparators: configProps.showGroupSeparators,
-    hasSuggestions: configProps.hasSuggestions,
-    testId: configProps.testId,
-    fieldMetadata,
-
     getPConnect: () => {
       return {
-        getStateProps: () => {
-          return stateProps;
-        },
         getActionsApi: () => {
           return {
-            updateFieldValue: () => {/* nothing */},
-            triggerFieldChange: () => {/* nothing */}
+            updateFieldValue: (propName, value) => {
+              setValue(value);
+            }
           };
         },
-        ignoreSuggestion: () => {/* nothing */},
-        acceptSuggestion: () => {/* nothing */},
-        setInheritedProps: () => {/* nothing */},
-        resolveConfigProps: () => {/* nothing */}
+        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')
   };
 
   return (

package/src/tasks/create/templates/Constellation/Field/Decimal/index.jsx.mustache

@@ -233,7 +233,7 @@ const {{COMPONENT_CLASS_NAME}} = props => {
   variant: 'inline',
   currencyISOCode: 'USD',
   formatter: 'defaultDecimal',
-  isoCodeSelection: 'constant',
+  isoCodeSelectiopn: 'constant',
   negative: 'minus-sign',
   notation: 'standard',
   currencyDisplay: 'symbol',
@@ -261,7 +261,6 @@ const {{COMPONENT_CLASS_NAME}} = props => {
   variant: PropTypes.string,
   currencyISOCode: PropTypes.string,
   formatter: PropTypes.string,
-  isoCodeSelection: PropTypes.string,
   negative: PropTypes.string,
   notation: PropTypes.string,
   currencyDisplay: PropTypes.string,

package/src/tasks/create/templates/Constellation/Field/Decimal-Currency/demo.stories.jsx.mustache

@@ -1,6 +1,5 @@
-import { withKnobs } from '@storybook/addon-knobs';
-
-import { configProps, fieldMetadata, stateProps } from './mock.stories.js';
+import { useState } from 'react';
+import { withKnobs, text, boolean } from '@storybook/addon-knobs';
 
 import {{COMPONENT_CLASS_NAME}} from './index.jsx';
 
@@ -11,38 +10,30 @@ export default {
 };
 
 export const base{{COMPONENT_CLASS_NAME}} = () => {
+  const [value, setValue] = useState('test value');
 
   const props = {
-    value: Number(configProps.value),
-    placeholder: configProps.placeholder,
-    label: configProps.label,
-    helperText: configProps.helperText,
-    showGroupSeparators: configProps.showGroupSeparators,
-    allowDecimals: configProps.allowDecimals,
-    currencyISOCode: configProps.currencyISOCode,
-    alwaysShowISOCode: configProps.alwaysShowISOCode,
-    hasSuggestions: configProps.hasSuggestions,
-    testId: configProps.testId,
-    fieldMetadata,
-
     getPConnect: () => {
       return {
-        getStateProps: () => {
-          return stateProps;
-        },
         getActionsApi: () => {
           return {
-            updateFieldValue: () => {/* nothing */},
-            triggerFieldChange: () => {/* nothing */}
+            updateFieldValue: (propName, value) => {
+              setValue(value);
+            }
           };
         },
-        ignoreSuggestion: () => {/* nothing */},
-        acceptSuggestion: () => {/* nothing */},
-        setInheritedProps: () => {/* nothing */},
-        resolveConfigProps: () => {/* nothing */},
-        clearErrorMessages: () => {/* nothing */}
+        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')
   };
 
   return (

package/src/tasks/create/templates/Constellation/Field/Decimal-Currency/index.jsx.mustache

@@ -5,6 +5,7 @@ import {
   NumberDisplay,
   FieldValueList,
   Text,
+  useConfiguration,
   useAfterInitialEffect
 } from '@pega/cosmos-react-core';
 import PropTypes from 'prop-types';
@@ -13,8 +14,6 @@ import PropTypes from 'prop-types';
 import handleEvent from './event-utils';
 import { suggestionsHandler } from './suggestions-handler';
 
-import Styled{{COMPONENT_CLASS_NAME}}Wrapper from './styles';
-
 const formatValue = (value) => {
   if (!value && value !== 0) return '';
   const [integer, decimal = ''] = value.toString().split('.');
@@ -22,6 +21,9 @@ const formatValue = (value) => {
 };
 
 
+
+import Styled{{COMPONENT_CLASS_NAME}}Wrapper from './styles';
+
 // Duplicated runtime code from Constellation Design System Component
 
 // props passed in combination of props from property panel (config.json) and run time props from Constellation
@@ -273,7 +275,6 @@ const {{COMPONENT_CLASS_NAME}} = props => {
   decimalPrecision: PropTypes.number,
   allowDecimals: PropTypes.bool,
   currencyISOCode: PropTypes.string,
-  isoCodeSelection: PropTypes.string,
   hideLabel: PropTypes.bool,
   getPConnect: PropTypes.func.isRequired,
   validatemessage: PropTypes.string,

package/src/tasks/create/templates/Constellation/Field/Decimal-Percentage/demo.stories.jsx.mustache

@@ -1,6 +1,5 @@
-import { withKnobs } from '@storybook/addon-knobs';
-
-import { configProps, stateProps, fieldMetadata } from './mock.stories.js';
+import { useState } from 'react';
+import { withKnobs, text, boolean } from '@storybook/addon-knobs';
 
 import {{COMPONENT_CLASS_NAME}} from './index.jsx';
 
@@ -11,34 +10,30 @@ export default {
 };
 
 export const base{{COMPONENT_CLASS_NAME}} = () => {
+  const [value, setValue] = useState('test value');
 
   const props = {
-    value: configProps.value,
-    placeholder: configProps.placeholder,
-    label: configProps.label,
-    helperText: configProps.helperText,
-    showGroupSeparators: configProps.showGroupSeparators,
-    hasSuggestions: configProps.hasSuggestions,
-    testId: configProps.testId,
-    fieldMetadata,
-
     getPConnect: () => {
       return {
-        getStateProps: () => {
-          return stateProps;
-        },
         getActionsApi: () => {
           return {
-            updateFieldValue: () => {/* nothing */},
-            triggerFieldChange: () => {/* nothing */}
+            updateFieldValue: (propName, value) => {
+              setValue(value);
+            }
           };
         },
-        ignoreSuggestion: () => {/* nothing */},
-        acceptSuggestion: () => {/* nothing */},
-        setInheritedProps: () => {/* nothing */},
-        resolveConfigProps: () => {/* nothing */}
+        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')
   };
 
   return (

package/src/tasks/create/templates/Constellation/Field/Decimal-Percentage/index.jsx.mustache

@@ -1,14 +1,8 @@
 import { useState, useEffect, useRef } from 'react';
-import {
-  NumberInput,
-  NumberDisplay,
-  CurrencyDisplay,
-  FieldValueList,
-  Text
-} from '@pega/cosmos-react-core';
+import { NumberInput, NumberDisplay, CurrencyDisplay, FieldValueList, Text } from '@pega/cosmos-react-core';
 import PropTypes from 'prop-types';
 
-// includes in bundle
+//inlcudes in bundle
 import handleEvent from './event-utils';
 import { suggestionsHandler } from './suggestions-handler';
 

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

@@ -1,6 +1,5 @@
-import { withKnobs } from '@storybook/addon-knobs';
-
-import { stateProps, configProps, fieldMetadata } from './mock.stories';
+import { useState } from 'react';
+import { withKnobs, text, boolean } from '@storybook/addon-knobs';
 
 import {{COMPONENT_CLASS_NAME}} from './index.jsx';
 
@@ -11,34 +10,30 @@ export default {
 };
 
 export const base{{COMPONENT_CLASS_NAME}} = () => {
+  const [value, setValue] = useState('test value');
 
   const props = {
-    value: configProps.value,
-    placeholder: configProps.placeholder,
-    label: configProps.label,
-    helperText: configProps.helperText,
-    showGroupSeparators: configProps.showGroupSeparators,
-    hasSuggestions: configProps.hasSuggestions,
-    testId: configProps.testId,
-    fieldMetadata,
-
     getPConnect: () => {
       return {
-        getStateProps: () => {
-          return stateProps;
-        },
         getActionsApi: () => {
           return {
-            updateFieldValue: () => {/* nothing */},
-            triggerFieldChange: () => {/* nothing */}
+            updateFieldValue: (propName, value) => {
+              setValue(value);
+            }
           };
         },
-        ignoreSuggestion: () => {/* nothing */},
-        acceptSuggestion: () => {/* nothing */},
-        setInheritedProps: () => {/* nothing */},
-        resolveConfigProps: () => {/* nothing */}
+        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')
   };
 
   return (

package/src/tasks/create/templates/Constellation/Field/Integer/index.jsx.mustache

@@ -323,10 +323,9 @@ const {{COMPONENT_CLASS_NAME}} = props => {
   variant: PropTypes.string,
   decimalPrecision: PropTypes.number,
   currencyISOCode: PropTypes.string,
-  isoCodeSelection: PropTypes.string,
   formatter: PropTypes.string,
   negative: PropTypes.string,
-  notation: PropTypes.string,
+  notations: PropTypes.string,
   currencyDisplay: PropTypes.string,
   currencyDecimalPrecision: PropTypes.string,
   isTableFormatter: PropTypes.bool,

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

@@ -1,7 +1,5 @@
 import { useState } from 'react';
-import { withKnobs } from '@storybook/addon-knobs';
-
-import { configProps, rawMetadata, fieldMetadata, stateProps } from './mock.stories.js';
+import { withKnobs, text, boolean } from '@storybook/addon-knobs';
 
 import {{COMPONENT_CLASS_NAME}} from './index.jsx';
 
@@ -12,62 +10,30 @@ export default {
 };
 
 export const base{{COMPONENT_CLASS_NAME}} = () => {
-  // eslint-disable-next-line react-hooks/rules-of-hooks
-  const [value, setValue] = useState(configProps.value);
+  const [value, setValue] = useState('test value');
 
   const props = {
-    value,
-    placeholder: configProps.placeholder,
-    label: configProps.label,
-    helperText: configProps.helperText,
-    datasource: configProps.datasource,
-    testId: configProps.testId,
-    hasSuggestions: configProps.hasSuggestions,
-    fieldMetadata,
-
     getPConnect: () => {
       return {
-        getConfigProps: () => {
-          return configProps;
-        },
-        getStateProps: () => {
-          return stateProps;
-        },
-        getLocalizedValue: val => {
-          return val;
-        },
-        getLocaleRuleNameFromKeys: (localeClass, localeContext, localeName) => {
-          return `${localeClass}!${localeContext}!${localeName}`;
-        },
-        getCaseInfo: () => {
-          return {
-            getClassName: () => {
-              return 'DIXL-MediaCo-Work-NewService';
-            }
-          };
-        },
-        getRawMetadata: () => {
-          return rawMetadata;
-        },
         getActionsApi: () => {
           return {
-            updateFieldValue: (propName, theValue) => {
-              setValue(theValue);
-            },
-            triggerFieldChange: () => {/* nothing */}
-          };
-        },
-        getValidationApi: () => {
-          return {
-            validate: () => {/* nothing */}
+            updateFieldValue: (propName, value) => {
+              setValue(value);
+            }
           };
         },
-        ignoreSuggestion: () => {/* nothing */},
-        acceptSuggestion: () => {/* nothing */},
-        setInheritedProps: () => {/* nothing */},
-        resolveConfigProps: () => {/* nothing */}
+        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')
   };
 
   return (

package/src/tasks/create/templates/Constellation/Field/Picklist/index.jsx.mustache

@@ -3,54 +3,11 @@ import { Select, Option, FieldValueList, Text } from '@pega/cosmos-react-core';
 import PropTypes from 'prop-types';
 
 // includes in bundle
+import {formatExists,textFormatter} from "./picklist";
 import handleEvent from "./event-utils";
 import { suggestionsHandler } from './suggestions-handler';
 
 import Styled{{COMPONENT_CLASS_NAME}}Wrapper from './styles';
-import {EmailDisplay, PhoneDisplay, URLDisplay } from "@pega/cosmos-react-core";
-
-export const formatExists = (formatterVal) => {
-    const formatterValues = [
-      "TextInput",
-      "WorkStatus",
-      "RichText",
-      "Email",
-      "Phone",
-      "URL",
-      "Operator"
-    ];
-    let isformatter = false;
-    if (formatterValues.includes(formatterVal)) {
-      isformatter = true;
-    }
-    return isformatter;
-  };
-
-
-export const textFormatter = (formatter,value) => {
-  let displayComponent = null;
-  switch(formatter){
-    case "TextInput" : {
-      displayComponent = value;
-      break;
-    }
-    case "Email" : {
-      displayComponent = (<EmailDisplay value={value} displayText={value} variant="link" />);
-      break;
-    }
-    case "Phone" : {
-      displayComponent = (<PhoneDisplay value={value} variant="link" />);
-      break;
-    }
-    case "URL" : {
-      displayComponent = (<URLDisplay target="_blank" value={value} displayText={value} variant="link" />);
-      break;
-    }
-    // no default
-  }
-  return displayComponent;
-};
-
 
 export const setDefaultValue = (dropdownOptions, pConnect, propName) => {
   // calculate the default option and set it to dropdown

package/src/tasks/create/templates/Constellation/Field/Picklist/picklist.js.mustache

@@ -0,0 +1,43 @@
+import {EmailDisplay, PhoneDisplay, URLDisplay } from "@pega/cosmos-react-core";
+
+export const formatExists = (formatterVal) => {
+    const formatterValues = [
+      "TextInput",
+      "WorkStatus",
+      "RichText",
+      "Email",
+      "Phone",
+      "URL",
+      "Operator"
+    ];
+    let isformatter = false;
+    if (formatterValues.includes(formatterVal)) {
+      isformatter = true;
+    }
+    return isformatter;
+  };
+
+
+export const textFormatter = (formatter,value) => {
+  let displayComponent = null;
+  switch(formatter){
+    case "TextInput" : {
+      displayComponent = value;
+      break;
+    }
+    case "Email" : {
+      displayComponent = (<EmailDisplay value={value} displayText={value} variant="link" />);
+      break;
+    }
+    case "Phone" : {
+      displayComponent = (<PhoneDisplay value={value} variant="link" />);
+      break;
+    }
+    case "URL" : {
+      displayComponent = (<URLDisplay target="_blank" value={value} displayText={value} variant="link" />);
+      break;
+    }
+    // no default
+  }
+  return displayComponent;
+};

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

@@ -1,7 +1,5 @@
 import { useState } from 'react';
-import { withKnobs } from '@storybook/addon-knobs';
-
-import { stateProps, configProps } from './mock.stories';
+import { withKnobs, text, boolean } from '@storybook/addon-knobs';
 
 import {{COMPONENT_CLASS_NAME}} from './index.jsx';
 
@@ -12,35 +10,30 @@ export default {
 };
 
 export const base{{COMPONENT_CLASS_NAME}} = () => {
-  // eslint-disable-next-line react-hooks/rules-of-hooks
-  const [value, setValue] = useState(configProps.value);
+  const [value, setValue] = useState('test value');
 
   const props = {
-    value,
-    placeholder: configProps.placeholder,
-    label: configProps.label,
-    testId: configProps.testId,
-    hasSuggestions: configProps.hasSuggestions,
-
     getPConnect: () => {
       return {
-        getStateProps: () => {
-          return stateProps;
-        },
         getActionsApi: () => {
           return {
-            updateFieldValue: (propName, theValue) => {
-              setValue(theValue);
-            },
-            triggerFieldChange: () => {/* nothing */}
+            updateFieldValue: (propName, value) => {
+              setValue(value);
+            }
           };
         },
-        ignoreSuggestion: () => {/* nothing */},
-        acceptSuggestion: () => {/* nothing */},
-        setInheritedProps: () => {/* nothing */},
-        resolveConfigProps: () => {/* nothing */}
+        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')
   };
 
   return (

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

@@ -1,9 +1,8 @@
-import { withKnobs } from '@storybook/addon-knobs';
+import { useState } from 'react';
+import { withKnobs, text, boolean } from '@storybook/addon-knobs';
 
 import {{COMPONENT_CLASS_NAME}} from './index.jsx';
 
-import { stateProps, configProps, fieldMetadata } from './mock.stories';
-
 export default {
   title: '{{COMPONENT_CLASS_NAME}}',
   decorators: [withKnobs],
@@ -11,33 +10,30 @@ export default {
 };
 
 export const base{{COMPONENT_CLASS_NAME}} = () => {
+  const [value, setValue] = useState('test value');
 
   const props = {
-    value: configProps.value,
-    label: configProps.label,
-    placeholder: configProps.placeholder,
-    helperText: configProps.helperText,
-    testId: configProps.testId,
-    hasSuggestions: configProps.hasSuggestions,
-    fieldMetadata,
-
     getPConnect: () => {
       return {
-        getStateProps: () => {
-          return stateProps;
-        },
         getActionsApi: () => {
           return {
-            updateFieldValue: () => {/* nothing */},
-            triggerFieldChange: () => {/* nothing */}
+            updateFieldValue: (propName, value) => {
+              setValue(value);
+            }
           };
         },
-        ignoreSuggestion: () => {/* nothing */},
-        acceptSuggestion: () => {/* nothing */},
-        setInheritedProps: () => {/* nothing */},
-        resolveConfigProps: () => {/* nothing */}
+        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')
   };
 
   return (