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

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'
+};

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

@@ -1,5 +1,7 @@
 import { useState } from 'react';
-import { withKnobs, text, boolean } from '@storybook/addon-knobs';
+import { withKnobs } from '@storybook/addon-knobs';
+
+import { configProps, rawMetadata, fieldMetadata, stateProps } from './mock.stories.js';
 
 import {{COMPONENT_CLASS_NAME}} from './index.jsx';
 
@@ -10,30 +12,56 @@ export default {
 };
 
 export const base{{COMPONENT_CLASS_NAME}} = () => {
-  const [value, setValue] = useState('test value');
+  const [value, setValue] = useState(configProps.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: () => {}
           };
         },
-        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/Picklist/index.jsx.mustache

@@ -3,11 +3,54 @@ 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/mock.stories.js.mustache

@@ -0,0 +1,67 @@
+export const configProps = {
+  value: '',
+  label: 'Picklist Sample',
+  placeholder: 'Select...',
+  listType: 'associated',
+  datasource: [
+    {
+      key: 'Option 1',
+      value: 'Option 1'
+    },
+    {
+      key: 'Option 2',
+      value: 'Option 2'
+    },
+    {
+      key: 'Option 3',
+      value: 'Option 3'
+    }
+  ],
+  helperText: 'Picklist Helper Text',
+  testId: 'picklist-12345678',
+  hasSuggestions: false
+};
+
+export const stateProps = {
+  value: '.PicklistSample',
+  placeholder: 'Select...',
+  datasource: '.PicklistSample',
+  hasSuggestions: false
+};
+
+export const rawMetadata = {
+  type: 'Dropdown',
+  config: {
+    value: '@P .PicklistSample',
+    label: '@L Picklist Sample',
+    placeholder: '@L Select...',
+    listType: 'associated',
+    datasource: '@ASSOCIATED .PicklistSample',
+    helperText: '@L Picklist Helper Text',
+    testId: 'picklist-12345678'
+  }
+};
+
+export const fieldMetadata = {
+  classID: 'DIXL-MediaCo-Work-NewService',
+  type: 'Text',
+  displayAs: 'pxDropdown',
+  label: 'Picklist sample',
+  datasource: {
+    tableType: 'PromptList',
+    records: [
+      {
+        key: 'Option 1',
+        value: 'Option 1'
+      },
+      {
+        key: 'Option 2',
+        value: 'Option 2'
+      },
+      {
+        key: 'Option 3',
+        value: 'Option 3'
+      }
+    ]
+  }
+};

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

@@ -1,5 +1,7 @@
 import { useState } from 'react';
-import { withKnobs, text, boolean } from '@storybook/addon-knobs';
+import { withKnobs } from '@storybook/addon-knobs';
+
+import { stateProps, configProps } from './mock.stories';
 
 import {{COMPONENT_CLASS_NAME}} from './index.jsx';
 
@@ -10,30 +12,33 @@ export default {
 };
 
 export const base{{COMPONENT_CLASS_NAME}} = () => {
-  const [value, setValue] = useState('test value');
+
+  const [value, setValue] = useState(configProps.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, 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 (