@pega/dx-component-builder-sdk 0.1.7 → 0.1.8

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

@@ -1,6 +1,5 @@
-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,31 +8,56 @@ export default {
   component: {{COMPONENT_CLASS_NAME}}
 };
 
-export const base{{COMPONENT_CLASS_NAME}} = () => {
-  const [value, setValue] = useState('test value');
+if (!window.PCore) {
+  window.PCore = {};
+}
+
+window.PCore.getEnvironmentInfo = () => {
+  return {
+    getLocale: () => {
+      return 'en-GB';
+    }
+  };
+};
 
+export const base{{COMPONENT_CLASS_NAME}} = () => {
   const props = {
     getPConnect: () => {
       return {
         getActionsApi: () => {
           return {
-            updateFieldValue: (propName, value) => {
-              setValue(value);
-            }
+            updateFieldValue: () => {},
+            triggerFieldChange: () => {}
           };
         },
         getStateProps: () => {
-          return { value: '.name' };
-        }
+          return stateProps;
+        },
+        getConfigProps: () => {
+          return configProps;
+        },
+        ignoreSuggestion: () => {},
+        acceptSuggestion: () => {},
+        clearErrorMessages: () => {}
       };
     },
-    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')
+    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
   };
 
   return (

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

@@ -1,6 +1,8 @@
+/* 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/Date/mock.stories.js.mustache

@@ -0,0 +1,23 @@
+export const configProps = {
+  value: '2023-01-31T12:23:00.000Z',
+  validatemessage: '',
+  label: 'Date Label',
+  hideLabel: false,
+  helperText: 'Date helper text',
+  nextYearRange: '10',
+  previousYearRange: '10',
+  showWeekNumber: true,
+  testId: '12345678',
+  showAsFormattedText: true,
+  additionalProps: {},
+  displayMode: '',
+  variant: '',
+  hasSuggestions: false,
+  readOnly: false,
+  required: false,
+  disabled: false
+};
+
+export const stateProps = {
+  value: '.DateLabel'
+};

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

@@ -47,7 +47,6 @@ 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 → date-utils.js.mustache}

@@ -1,3 +1,4 @@
+/* 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,3 +1,4 @@
+/* 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,31 +9,56 @@ export default {
   component: {{COMPONENT_CLASS_NAME}}
 };
 
-export const base{{COMPONENT_CLASS_NAME}} = () => {
-  const [value, setValue] = useState('test value');
+if (!window.PCore) {
+  window.PCore = {};
+}
+
+window.PCore.getEnvironmentInfo = () => {
+  return {
+    getTimeZone: () => {
+      return '';
+    }
+  };
+};
 
+export const base{{COMPONENT_CLASS_NAME}} = () => {
   const props = {
     getPConnect: () => {
       return {
         getActionsApi: () => {
           return {
-            updateFieldValue: (propName, value) => {
-              setValue(value);
-            }
+            updateFieldValue: () => {},
+            triggerFieldChange: () => {}
           };
         },
         getStateProps: () => {
-          return { value: '.name' };
-        }
+          return stateProps;
+        },
+        getConfigProps: () => {
+          return configProps;
+        },
+        ignoreSuggestion: () => {},
+        acceptSuggestion: () => {},
+        clearErrorMessages: () => {}
       };
     },
-    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')
+    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
   };
 
   return (

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

@@ -1,3 +1,4 @@
+/* eslint-disable no-undef */
 import { useEffect, useState } from 'react';
 import { DateTimeInput, FieldValueList, DateTimeDisplay, Text } from "@pega/cosmos-react-core";
 import PropTypes from "prop-types";
@@ -246,6 +247,7 @@ 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/DateTime/mock.stories.js.mustache

@@ -0,0 +1,23 @@
+export const configProps = {
+  value: '2023-01-24T16:45:00.000Z',
+  validatemessage: '',
+  label: 'DateTime Label',
+  hideLabel: false,
+  helperText: 'DateTime helper text',
+  withSeconds: false,
+  nextYearRange: '10',
+  previousYearRange: '5',
+  showWeekNumber: false,
+  testId: '12345678',
+  additionalProps: {},
+  displayMode: '',
+  variant: '',
+  hasSuggestions: false,
+  readOnly: false,
+  required: false,
+  disabled: false
+};
+
+export const stateProps = {
+  value: '.DateTimeLabel'
+};

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

@@ -1,5 +1,6 @@
-import { useState } from 'react';
-import { withKnobs, text, boolean } from '@storybook/addon-knobs';
+import { withKnobs } from '@storybook/addon-knobs';
+
+import { configProps, fieldMetadata, stateProps } from './mock.stories.js';
 
 import {{COMPONENT_CLASS_NAME}} from './index.jsx';
 
@@ -10,30 +11,34 @@ 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: (propName, value) => {
-              setValue(value);
-            }
+            updateFieldValue: () => {},
+            triggerFieldChange: () => {}
           };
         },
-        getStateProps: () => {
-          return { value: '.name' };
-        }
+        ignoreSuggestion: () => {},
+        acceptSuggestion: () => {},
+        setInheritedProps: () => {},
+        resolveConfigProps: () => {}
       };
-    },
-    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',
-  isoCodeSelectiopn: 'constant',
+  isoCodeSelection: 'constant',
   negative: 'minus-sign',
   notation: 'standard',
   currencyDisplay: 'symbol',
@@ -261,6 +261,7 @@ 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/mock.stories.js.mustache

@@ -0,0 +1,21 @@
+export const configProps = {
+  value: '',
+  label: 'Decimal Sample',
+  showGroupSeparators: true,
+  placeholder: 'Decimal Placeholder',
+  helperText: 'Decimal Helper Text',
+  testId: 'decimal-12345678',
+  hasSuggestions: false
+};
+
+export const stateProps = {
+  value: '.DecimalSample',
+  hasSuggestions: false
+};
+
+export const fieldMetadata = {
+  classID: 'DIXL-MediaCo-Work-NewService',
+  type: 'Decimal',
+  displayAs: 'pxNumber',
+  label: 'Decimal sample'
+};

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

@@ -1,5 +1,6 @@
-import { useState } from 'react';
-import { withKnobs, text, boolean } from '@storybook/addon-knobs';
+import { withKnobs } from '@storybook/addon-knobs';
+
+import { configProps, fieldMetadata, stateProps } from './mock.stories.js';
 
 import {{COMPONENT_CLASS_NAME}} from './index.jsx';
 
@@ -10,30 +11,37 @@ 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: (propName, value) => {
-              setValue(value);
-            }
+            updateFieldValue: () => {},
+            triggerFieldChange: () => {}
           };
         },
-        getStateProps: () => {
-          return { value: '.name' };
-        }
+        ignoreSuggestion: () => {},
+        acceptSuggestion: () => {},
+        setInheritedProps: () => {},
+        resolveConfigProps: () => {}
       };
-    },
-    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,7 +5,6 @@ import {
   NumberDisplay,
   FieldValueList,
   Text,
-  useConfiguration,
   useAfterInitialEffect
 } from '@pega/cosmos-react-core';
 import PropTypes from 'prop-types';
@@ -14,6 +13,8 @@ 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('.');
@@ -21,9 +22,6 @@ 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
@@ -275,6 +273,7 @@ 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-Currency/mock.stories.js.mustache

@@ -0,0 +1,23 @@
+export const configProps = {
+  value: '',
+  label: 'Currency Sample',
+  currencyISOCode: 'USD',
+  allowDecimals: true,
+  alwaysShowISOCode: true,
+  placeholder: 'Currency Placeholder',
+  helperText: 'Currency Helper Text',
+  testId: 'currency-12345678',
+  hasSuggestions: false
+};
+
+export const stateProps = {
+  value: '.CurrencySample',
+  hasSuggestions: false
+};
+
+export const fieldMetadata = {
+  classID: 'DIXL-MediaCo-Work-NewService',
+  type: 'Decimal',
+  displayAs: 'pxCurrency',
+  label: 'Currency sample'
+};

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

@@ -1,5 +1,6 @@
-import { useState } from 'react';
-import { withKnobs, text, boolean } from '@storybook/addon-knobs';
+import { withKnobs } from '@storybook/addon-knobs';
+
+import { configProps, stateProps, fieldMetadata } from './mock.stories.js';
 
 import {{COMPONENT_CLASS_NAME}} from './index.jsx';
 
@@ -10,30 +11,34 @@ 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: (propName, value) => {
-              setValue(value);
-            }
+            updateFieldValue: () => {},
+            triggerFieldChange: () => {}
           };
         },
-        getStateProps: () => {
-          return { value: '.name' };
-        }
+        ignoreSuggestion: () => {},
+        acceptSuggestion: () => {},
+        setInheritedProps: () => {},
+        resolveConfigProps: () => {}
       };
-    },
-    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,8 +1,14 @@
 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';
 
-//inlcudes in bundle
+// includes in bundle
 import handleEvent from './event-utils';
 import { suggestionsHandler } from './suggestions-handler';
 

package/src/tasks/create/templates/Constellation/Field/Decimal-Percentage/mock.stories.js.mustache

@@ -0,0 +1,21 @@
+export const configProps = {
+  value: '',
+  label: 'Percentage Sample',
+  showGroupSeparators: true,
+  placeholder: 'Percentage Placeholder',
+  helperText: 'Percentage Helper Text',
+  testId: 'percentage-12345678',
+  hasSuggestions: false
+};
+
+export const stateProps = {
+  value: '.PercentageSample',
+  hasSuggestions: false
+};
+
+export const fieldMetadata = {
+  classID: 'DIXL-MediaCo-Work-NewService',
+  type: 'Decimal',
+  displayAs: 'pxPercentage',
+  label: 'Percentage sample'
+};

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

@@ -1,5 +1,6 @@
-import { useState } from 'react';
-import { withKnobs, text, boolean } from '@storybook/addon-knobs';
+import { withKnobs } from '@storybook/addon-knobs';
+
+import { stateProps, configProps, fieldMetadata } from './mock.stories';
 
 import {{COMPONENT_CLASS_NAME}} from './index.jsx';
 
@@ -10,30 +11,34 @@ 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: (propName, value) => {
-              setValue(value);
-            }
+            updateFieldValue: () => {},
+            triggerFieldChange: () => {}
           };
         },
-        getStateProps: () => {
-          return { value: '.name' };
-        }
+        ignoreSuggestion: () => {},
+        acceptSuggestion: () => {},
+        setInheritedProps: () => {},
+        resolveConfigProps: () => {}
       };
-    },
-    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,9 +323,10 @@ const {{COMPONENT_CLASS_NAME}} = props => {
   variant: PropTypes.string,
   decimalPrecision: PropTypes.number,
   currencyISOCode: PropTypes.string,
+  isoCodeSelection: PropTypes.string,
   formatter: PropTypes.string,
   negative: PropTypes.string,
-  notations: PropTypes.string,
+  notation: PropTypes.string,
   currencyDisplay: PropTypes.string,
   currencyDecimalPrecision: PropTypes.string,
   isTableFormatter: PropTypes.bool,

package/src/tasks/create/templates/Constellation/Field/Integer/mock.stories.js.mustache

@@ -0,0 +1,21 @@
+export const configProps = {
+  value: '',
+  label: 'Integer Sample',
+  showGroupSeparators: true,
+  placeholder: 'Integer Placeholder',
+  helperText: 'Integer Helper Text',
+  testId: 'integer-12345678',
+  hasSuggestions: false
+};
+
+export const stateProps = {
+  value: '.IntegerSample',
+  hasSuggestions: false
+};
+
+export const fieldMetadata = {
+  classID: 'DIXL-MediaCo-Work-NewService',
+  type: 'Integer',
+  displayAs: 'pxInteger',
+  label: 'Integer sample'
+};