@pega/custom-dx-components 2.0.11 → 2.0.12

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 (

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

@@ -0,0 +1,13 @@
+export const configProps = {
+  value: '',
+  label: 'Text Sample',
+  placeholder: 'Text Placeholder',
+  helperText: 'Text Helper Text',
+  testId: 'Text-12345678',
+  hasSuggestions: false
+};
+
+export const stateProps = {
+  value: '.TextSample',
+  hasSuggestions: false
+};

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

@@ -1,8 +1,9 @@
-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],
@@ -10,30 +11,33 @@ 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: 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/Text-Email/index.jsx.mustache

@@ -1,14 +1,56 @@
 import { useState, useEffect, useRef } from 'react';
-import { Input, EmailDisplay, FieldValueList, Text } from '@pega/cosmos-react-core';
+import { Input, EmailDisplay, FieldValueList, Text, URLDisplay, PhoneDisplay } from '@pega/cosmos-react-core';
 import PropTypes from 'prop-types';
 
 // includes in bundle
-import {formatExists,textFormatter} from "./text-email";
 import { suggestionsHandler } from './suggestions-handler';
 import handleEvent from "./event-utils";
 
 import Styled{{COMPONENT_CLASS_NAME}}Wrapper from './styles';
 
+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;
+};
+
+
 
 // Duplicated runtime code from Constellation Design System Component
 

package/src/tasks/create/templates/Constellation/Field/Text-Email/mock.stories.js.mustache

@@ -0,0 +1,22 @@
+export const configProps = {
+  value: '',
+  label: 'Email Sample',
+  placeholder: 'Email Placeholder',
+  helperText: 'Email Helper Text',
+  testId: 'email-12345678',
+  hasSuggestions: false
+};
+
+export const stateProps = {
+  value: '.EmailSample',
+  hasSuggestions: false
+};
+
+export const fieldMetadata = {
+  classID: 'DIXL-MediaCo-Work-NewService',
+  type: 'Text',
+  maxLength: 256,
+  displayAs: 'pxEmail',
+  label: 'Email sample',
+  validateAs: 'ValidEmailAddress'
+};

package/src/tasks/create/templates/Constellation/Field/Text-Input/{StatusWork.js → StatusWork.jsx}

@@ -1,4 +1,3 @@
-/* eslint-disable react/prop-types */
 import { Status } from "@pega/cosmos-react-core";
 
 export default function StatusWorkRenderer({ value }) {

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

@@ -1,8 +1,9 @@
-import { useState } from 'react';
-import { withKnobs, text, boolean } from '@storybook/addon-knobs';
+import { withKnobs } from '@storybook/addon-knobs';
 
 import {{COMPONENT_CLASS_NAME}} from './index.jsx';
 
+import { stateProps, fieldMetadata, configProps } from './mock.stories';
+
 export default {
   title: '{{COMPONENT_CLASS_NAME}}',
   decorators: [withKnobs],
@@ -10,30 +11,33 @@ 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,
+    testId: configProps.testId,
+    hasSuggestions: configProps.hasSuggestions,
+    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/Text-Input/index.jsx.mustache

@@ -1,16 +1,59 @@
 import { useEffect, useState, useRef } from 'react';
-import { Input, FieldValueList, Text } from '@pega/cosmos-react-core';
+import { Input, FieldValueList, Text, EmailDisplay, PhoneDisplay, URLDisplay } from '@pega/cosmos-react-core';
 import PropTypes from 'prop-types';
 
 // include in bundle
 import handleEvent from "./event-utils";
-import StatusWorkRenderer from "./StatusWork";
-import {formatExists,textFormatter} from "./text-input";
+import StatusWorkRenderer from "./StatusWork.jsx";
 import { suggestionsHandler } from './suggestions-handler';
 
 import Styled{{COMPONENT_CLASS_NAME}}Wrapper from './styles';
 
 
+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;
+};
+
+
+
 // 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

package/src/tasks/create/templates/Constellation/Field/Text-Input/mock.stories.js.mustache

@@ -0,0 +1,21 @@
+export const configProps = {
+  value: '',
+  label: 'TextInput Sample',
+  placeholder: 'TextInput Placeholder',
+  helperText: 'TextInput Helper Text',
+  testId: 'TextInput-12345678',
+  hasSuggestions: false
+};
+
+export const stateProps = {
+  value: '.TextInputSample',
+  hasSuggestions: false
+};
+
+export const fieldMetadata = {
+  classID: 'DIXL-MediaCo-Work-NewService',
+  type: 'Text',
+  maxLength: 256,
+  displayAs: 'pxTextInput',
+  label: 'TextInput Sample'
+};

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

@@ -1,8 +1,9 @@
-import { useState } from 'react';
-import { withKnobs, text, boolean } from '@storybook/addon-knobs';
+import { withKnobs } from '@storybook/addon-knobs';
 
 import {{COMPONENT_CLASS_NAME}} from './index.jsx';
 
+import { stateProps, configProps } from './mock.stories';
+
 export default {
   title: '{{COMPONENT_CLASS_NAME}}',
   decorators: [withKnobs],
@@ -10,30 +11,33 @@ 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,
+    testId: configProps.testId,
+    hasSuggestions: configProps.hasSuggestions,
+    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/Text-Paragraph/index.jsx.mustache

@@ -1,14 +1,56 @@
 import { useState, useEffect, useRef } from 'react';
-import { TextArea as CosmosTextArea, FieldValueList, ParagraphDisplay, Text } from '@pega/cosmos-react-core';
+import { TextArea as CosmosTextArea, FieldValueList, ParagraphDisplay, Text, EmailDisplay, PhoneDisplay, URLDisplay } from '@pega/cosmos-react-core';
 import PropTypes from 'prop-types';
 
 // includes in bundle
-import {formatExists,textFormatter} from "./text-paragraph";
 import { suggestionsHandler } from './suggestions-handler';
 import handleEvent from "./event-utils";
 
 import Styled{{COMPONENT_CLASS_NAME}}Wrapper from './styles';
 
+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;
+};
+
+
 
 // Duplicated runtime code from Constellation Design System Component
 

package/src/tasks/create/templates/Constellation/Field/Text-Paragraph/mock.stories.js.mustache

@@ -0,0 +1,20 @@
+export const configProps = {
+  value: '',
+  label: 'Paragraph Sample',
+  placeholder: 'Paragraph Placeholder',
+  helperText: 'Paragraph Helper Text',
+  testId: 'paragraph-12345678',
+  hasSuggestions: false
+};
+
+export const fieldMetadata = {
+  classID: 'DIXL-MediaCo-Work-NewService',
+  type: 'Text',
+  displayAs: 'pxTextArea',
+  label: 'Paragraph sample'
+};
+
+export const stateProps = {
+  value: '.ParagraphSample',
+  hasSuggestions: false
+};

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

@@ -1,7 +1,7 @@
-import { useState } from 'react';
-import { withKnobs, text, boolean } from '@storybook/addon-knobs';
+import { withKnobs } from '@storybook/addon-knobs';
 
 import {{COMPONENT_CLASS_NAME}} from './index.jsx';
+import { stateProps, configProps } from './mock.stories';
 
 export default {
   title: '{{COMPONENT_CLASS_NAME}}',
@@ -10,30 +10,32 @@ 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,
+    testId: configProps.testId,
+    hasSuggestions: configProps.hasSuggestions,
+    datasource: configProps.datasource,
+
     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 (