@pega/custom-dx-components 2.0.14 → 2.0.16

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

@@ -1,5 +1,6 @@
+import { useState } from 'react';
 import { withKnobs, text, boolean } from '@storybook/addon-knobs';
-import { configProps, stateProps } from './mock.stories';
+
 import {{COMPONENT_CLASS_NAME}} from './index.jsx';
 
 export default {
@@ -8,55 +9,31 @@ export default {
   component: {{COMPONENT_CLASS_NAME}}
 };
 
-if (!window.PCore) {
-  window.PCore = {};
-}
-
-window.PCore.getEnvironmentInfo = () => {
-  return {
-    getLocale: () => {
-      return 'en-GB';
-    }
-  };
-};
-
 export const base{{COMPONENT_CLASS_NAME}} = () => {
+  const [value, setValue] = useState('test value');
+
   const props = {
     getPConnect: () => {
       return {
         getActionsApi: () => {
           return {
-            updateFieldValue: () => {},
-            triggerFieldChange: () => {}
+            updateFieldValue: (propName, value) => {
+              setValue(value);
+            }
           };
         },
         getStateProps: () => {
-          return stateProps;
-        },
-        getConfigProps: () => {
-          return configProps;
-        },
-        ignoreSuggestion: () => {},
-        clearErrorMessages: () => {}
+          return { value: '.name' };
+        }
       };
     },
-    value: configProps.value,
-    validatemessage: configProps.validatemessage,
-    label: configProps.label,
-    hideLabel: configProps.hideLabel,
-    helperText: configProps.helperText,
-    nextYearRange: configProps.nextYearRange,
-    previousYearRange: configProps.previousYearRange,
-    showWeekNumber: configProps.showWeekNumber,
-    testId: configProps.testId,
-    showAsFormattedText: configProps.showAsFormattedText,
-    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/Date/index.jsx.mustache

@@ -1,8 +1,6 @@
-/* eslint-disable no-undef */
 import { useEffect, useState } from 'react';
-import { DateInput, FieldValueList, DateTimeDisplay, Text,  } from '@pega/cosmos-react-core';
+import { DateInput, FieldValueList, DateTimeDisplay, Text } from '@pega/cosmos-react-core';
 import PropTypes from 'prop-types';
-import FormattedText from "./FormattedText.jsx";
 
 import Styled{{COMPONENT_CLASS_NAME}}Wrapper from './styles';
 

package/src/tasks/create/templates/Constellation/Field/DateTime/date-time.js.mustache

@@ -47,6 +47,7 @@ function TimeFormatter(value, options) {
 }
 
 export const DateTimeShortFormatter = (value, options) => {
+//export function DateTimeShortFormatter(value, options) {
   return DateFormatter(value, {
     ...options,
     type: "customFormat",

package/src/tasks/create/templates/Constellation/Field/DateTime/{date-utils.js.mustache → date-utils.js}

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

package/src/tasks/create/templates/Constellation/Field/DateTime/date.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/Field/DateTime/demo.stories.jsx.mustache

@@ -1,6 +1,6 @@
 import { useState } from 'react';
 import { withKnobs, text, boolean } from '@storybook/addon-knobs';
-import { configProps, stateProps } from './mock.stories';
+
 import {{COMPONENT_CLASS_NAME}} from './index.jsx';
 
 export default {
@@ -9,55 +9,31 @@ export default {
   component: {{COMPONENT_CLASS_NAME}}
 };
 
-if (!window.PCore) {
-  window.PCore = {};
-}
-
-window.PCore.getEnvironmentInfo = () => {
-  return {
-    getTimeZone: () => {
-      return '';
-    }
-  };
-};
-
 export const base{{COMPONENT_CLASS_NAME}} = () => {
+  const [value, setValue] = useState('test value');
+
   const props = {
     getPConnect: () => {
       return {
         getActionsApi: () => {
           return {
-            updateFieldValue: () => {},
-            triggerFieldChange: () => {}
+            updateFieldValue: (propName, value) => {
+              setValue(value);
+            }
           };
         },
         getStateProps: () => {
-          return stateProps;
-        },
-        getConfigProps: () => {
-          return configProps;
-        },
-        ignoreSuggestion: () => {},
-        clearErrorMessages: () => {}
+          return { value: '.name' };
+        }
       };
     },
-    value: configProps.value,
-    validatemessage: configProps.validatemessage,
-    label: configProps.label,
-    hideLabel: configProps.hideLabel,
-    helperText: configProps.helperText,
-    withSeconds: configProps.withSeconds,
-    nextYearRange: configProps.nextYearRange,
-    previousYearRange: configProps.previousYearRange,
-    showWeekNumber: configProps.showWeekNumber,
-    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/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: PropType.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: fieldMetadata,
-
     getPConnect: () => {
       return {
-        getStateProps: () => {
-          return stateProps;
-        },
         getActionsApi: () => {
           return {
-            updateFieldValue: () => {},
-            triggerFieldChange: () => {}
+            updateFieldValue: (propName, value) => {
+              setValue(value);
+            }
           };
         },
-        ignoreSuggestion: () => {},
-        acceptSuggestion: () => {},
-        setInheritedProps: () => {},
-        resolveConfigProps: () => {}
+        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,37 +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,
-    allowDecimals: configProps.allowDecimals,
-    currencyISOCode: configProps.currencyISOCode,
-    alwaysShowISOCode: configProps.alwaysShowISOCode,
-    hasSuggestions: configProps.hasSuggestions,
-    testId: configProps.testId,
-    fieldMetadata: fieldMetadata,
-
     getPConnect: () => {
       return {
-        getStateProps: () => {
-          return stateProps;
-        },
         getActionsApi: () => {
           return {
-            updateFieldValue: () => {},
-            triggerFieldChange: () => {}
+            updateFieldValue: (propName, value) => {
+              setValue(value);
+            }
           };
         },
-        ignoreSuggestion: () => {},
-        acceptSuggestion: () => {},
-        setInheritedProps: () => {},
-        resolveConfigProps: () => {}
+        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: fieldMetadata,
-
     getPConnect: () => {
       return {
-        getStateProps: () => {
-          return stateProps;
-        },
         getActionsApi: () => {
           return {
-            updateFieldValue: () => {},
-            triggerFieldChange: () => {}
+            updateFieldValue: (propName, value) => {
+              setValue(value);
+            }
           };
         },
-        ignoreSuggestion: () => {},
-        acceptSuggestion: () => {},
-        setInheritedProps: () => {},
-        resolveConfigProps: () => {}
+        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: fieldMetadata,
-
     getPConnect: () => {
       return {
-        getStateProps: () => {
-          return stateProps;
-        },
         getActionsApi: () => {
           return {
-            updateFieldValue: () => {},
-            triggerFieldChange: () => {}
+            updateFieldValue: (propName, value) => {
+              setValue(value);
+            }
           };
         },
-        ignoreSuggestion: () => {},
-        acceptSuggestion: () => {},
-        setInheritedProps: () => {},
-        resolveConfigProps: () => {}
+        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,56 +10,30 @@ export default {
 };
 
 export const base{{COMPONENT_CLASS_NAME}} = () => {
-  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: fieldMetadata,
-
     getPConnect: () => {
       return {
-        getConfigProps: () => {
-          return configProps;
-        },
-        getStateProps: () => {
-          return stateProps;
-        },
-        getLocalizedValue: value => {
-          return value;
-        },
-        getLocaleRuleNameFromKeys: (localeClass, localeContext, localeName) => {
-          return `${localeClass}!${localeContext}!${localeName}`;
-        },
-        getCaseInfo: () => {
-          return {
-            getClassName: () => {
-              return 'DIXL-MediaCo-Work-NewService';
-            }
-          };
-        },
-        getRawMetadata: () => {
-          return rawMetadata;
-        },
         getActionsApi: () => {
           return {
             updateFieldValue: (propName, value) => {
               setValue(value);
-            },
-            triggerFieldChange: () => {}
+            }
           };
         },
-        ignoreSuggestion: () => {},
-        acceptSuggestion: () => {},
-        setInheritedProps: () => {},
-        resolveConfigProps: () => {}
+        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