@pega/custom-dx-components 0.23.21 → 0.23.22

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

@@ -0,0 +1,81 @@
+
+/* eslint-disable react/jsx-no-useless-fragment */
+// @ts-nocheck
+import { useState } from 'react';
+import { withKnobs } from '@storybook/addon-knobs';
+
+import { configProps, rawMetadata, fieldMetadata, stateProps } from './mock';
+
+import {{COMPONENT_CLASS_NAME}} from './index';
+
+export default {
+  title: '{{COMPONENT_CLASS_NAME}}',
+  decorators: [withKnobs],
+  component: {{COMPONENT_CLASS_NAME}}
+};
+
+export const Base{{COMPONENT_CLASS_NAME}} = () => {
+
+  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,
+
+    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 */}
+          };
+        },
+        ignoreSuggestion: () => {/* nothing */},
+        acceptSuggestion: () => {/* nothing */},
+        setInheritedProps: () => {/* nothing */},
+        resolveConfigProps: () => {/* nothing */}
+      };
+    }
+  };
+
+  return (
+    <>
+      <{{COMPONENT_CLASS_NAME}} {...props} />
+    </>
+  );
+};

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

@@ -1,4 +1,5 @@
 /* eslint-disable react-hooks/exhaustive-deps */
+// @ts-nocheck
 import { useState, useEffect, useRef } from 'react';
 import { Select, Option, FieldValueList, Text } from '@pega/cosmos-react-core';
 import PropTypes from 'prop-types';

package/src/tasks/create/templates/Constellation/Field/Picklist/mock.ts.mustache

@@ -0,0 +1,68 @@
+// @ts-nocheck
+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/Picklist-Autocomplete/demo.stories.tsx.mustache

@@ -0,0 +1,90 @@
+
+/* eslint-disable react/jsx-no-useless-fragment */
+// @ts-nocheck
+import { useState } from 'react';
+import { withKnobs } from '@storybook/addon-knobs';
+
+import { configProps, rawMetadata, fieldMetadata, stateProps } from './mock';
+
+import {{COMPONENT_CLASS_NAME}} from './index';
+
+export default {
+  title: '{{COMPONENT_CLASS_NAME}}',
+  decorators: [withKnobs],
+  component: {{COMPONENT_CLASS_NAME}}
+};
+
+export const Base{{COMPONENT_CLASS_NAME}} = () => {
+
+  const [value, setValue] = useState(configProps.value);
+  const datasourceMetadata = fieldMetadata;
+
+  const props = {
+    value,
+    placeholder: configProps.placeholder,
+    label: configProps.label,
+    helperText: configProps.helperText,
+    datasource: configProps.datasource,
+    testId: configProps.testId,
+    hasSuggestions: configProps.hasSuggestions,
+    columns: [],
+    isTableFormatter: false,
+    listType: 'associated',
+    parameters: {},
+    datasourceMetadata,
+    fieldMetadata,
+
+    getPConnect: () => {
+      return {
+        getConfigProps: () => {
+          return configProps;
+        },
+        getStateProps: () => {
+          return stateProps;
+        },
+        getContextName: () => {
+          return 'app/primary_1';
+        },
+        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 */}
+          };
+        },
+        ignoreSuggestion: () => {/* nothing */},
+        acceptSuggestion: () => {/* nothing */},
+        setInheritedProps: () => {/* nothing */},
+        resolveConfigProps: () => {/* nothing */}
+      };
+    }
+  };
+
+  return (
+    <>
+      <{{COMPONENT_CLASS_NAME}} {...props} />
+    </>
+  );
+};

package/src/tasks/create/templates/Constellation/Field/Picklist-Autocomplete/index.tsx.mustache

@@ -1,3 +1,4 @@
+
 /* eslint-disable react-hooks/exhaustive-deps */
 import { useEffect, useRef, useState, memo, useMemo, MutableRefObject, SetStateAction } from 'react';
 import { ComboBox, menuHelpers, debounce, throttle, Button, Icon, MenuGroupProps, MenuItemProps } from '@pega/cosmos-react-core';

package/src/tasks/create/templates/Constellation/Field/Picklist-Autocomplete/mock.js.mustache

@@ -1,5 +1,4 @@
-/* eslint-disable storybook/default-exports */
-/* eslint-disable storybook/prefer-pascal-case */
+// @ts-nocheck
 export const configProps = {
   value: '',
   label: 'Picklist Sample',

package/src/tasks/create/templates/Constellation/Field/Picklist-RadioButtons/demo.stories.tsx.mustache

@@ -0,0 +1,85 @@
+
+/* eslint-disable react/jsx-no-useless-fragment */
+// @ts-nocheck
+import { useState } from 'react';
+import { withKnobs } from '@storybook/addon-knobs';
+
+import { configProps, rawMetadata, fieldMetadata, stateProps } from './mock';
+
+import {{COMPONENT_CLASS_NAME}} from './index';
+
+export default {
+  title: '{{COMPONENT_CLASS_NAME}}',
+  decorators: [withKnobs],
+  component: {{COMPONENT_CLASS_NAME}}
+};
+
+export const Base{{COMPONENT_CLASS_NAME}} = () => {
+
+  const [value, setValue] = useState(configProps.value);
+
+  const props = {
+    value,
+    align: 'vertical',
+    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;
+        },
+        getPageReference: () => {
+          return 'caseInfo.content';
+        },
+        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 */}
+          };
+        },
+        ignoreSuggestion: () => {/* nothing */},
+        acceptSuggestion: () => {/* nothing */},
+        setInheritedProps: () => {/* nothing */},
+        resolveConfigProps: () => {/* nothing */}
+      };
+    }
+  };
+
+  return (
+    <>
+      <{{COMPONENT_CLASS_NAME}} {...props} />
+    </>
+  );
+};

package/src/tasks/create/templates/Constellation/Field/Picklist-RadioButtons/index.tsx.mustache

@@ -53,7 +53,7 @@ const getDisplayValue = (dataSource: any, value: any, isDatapage: boolean) => {
 
 // props passed in combination of props from property panel (config.json) and run time props from Constellation
 // any default values in config.pros should be set in defaultProps at bottom of this file
-export function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}Props) {
+export default function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}Props) {
   const {
     getPConnect,
     value,

package/src/tasks/create/templates/Constellation/Field/Picklist-RadioButtons/mock.ts.mustache

@@ -0,0 +1,69 @@
+
+// @ts-nocheck
+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.tsx.mustache

@@ -0,0 +1,54 @@
+
+/* eslint-disable react/jsx-no-useless-fragment */
+// @ts-nocheck
+import { useState } from 'react';
+import { withKnobs } from '@storybook/addon-knobs';
+
+import { stateProps, configProps } from './mock';
+
+import {{COMPONENT_CLASS_NAME}} from './index';
+
+export default {
+  title: '{{COMPONENT_CLASS_NAME}}',
+  decorators: [withKnobs],
+  component: {{COMPONENT_CLASS_NAME}}
+};
+
+export const Base{{COMPONENT_CLASS_NAME}} = () => {
+
+  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, theValue) => {
+              setValue(theValue);
+            },
+            triggerFieldChange: () => {/* nothing */}
+          };
+        },
+        ignoreSuggestion: () => {/* nothing */},
+        acceptSuggestion: () => {/* nothing */},
+        setInheritedProps: () => {/* nothing */},
+        resolveConfigProps: () => {/* nothing */}
+      };
+    }
+  };
+
+  return (
+    <>
+      <{{COMPONENT_CLASS_NAME}} {...props} />
+    </>
+  );
+};

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

@@ -0,0 +1,15 @@
+
+// @ts-nocheck
+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.tsx.mustache

@@ -0,0 +1,51 @@
+
+/* eslint-disable react/jsx-no-useless-fragment */
+// @ts-nocheck
+import { withKnobs } from '@storybook/addon-knobs';
+
+import {{COMPONENT_CLASS_NAME}} from './index';
+
+import { stateProps, configProps, fieldMetadata } from './mock';
+
+export default {
+  title: '{{COMPONENT_CLASS_NAME}}',
+  decorators: [withKnobs],
+  component: {{COMPONENT_CLASS_NAME}}
+};
+
+export const Base{{COMPONENT_CLASS_NAME}} = () => {
+
+  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 */}
+          };
+        },
+        ignoreSuggestion: () => {/* nothing */},
+        acceptSuggestion: () => {/* nothing */},
+        setInheritedProps: () => {/* nothing */},
+        resolveConfigProps: () => {/* nothing */}
+      };
+    }
+  };
+
+  return (
+    <>
+      <{{COMPONENT_CLASS_NAME}} {...props} />
+    </>
+  );
+};

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

@@ -0,0 +1,24 @@
+
+// @ts-nocheck
+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/demo.stories.tsx.mustache

@@ -0,0 +1,51 @@
+
+/* eslint-disable react/jsx-no-useless-fragment */
+// @ts-nocheck
+import { withKnobs } from '@storybook/addon-knobs';
+
+import {{COMPONENT_CLASS_NAME}} from './index';
+
+import { stateProps, fieldMetadata, configProps } from './mock';
+
+export default {
+  title: '{{COMPONENT_CLASS_NAME}}',
+  decorators: [withKnobs],
+  component: {{COMPONENT_CLASS_NAME}}
+};
+
+export const Base{{COMPONENT_CLASS_NAME}} = () => {
+
+  const props = {
+    value: configProps.value,
+    placeholder: configProps.placeholder,
+    label: configProps.label,
+    helperText: configProps.helperText,
+    testId: configProps.testId,
+    hasSuggestions: configProps.hasSuggestions,
+    fieldMetadata,
+
+    getPConnect: () => {
+      return {
+        getStateProps: () => {
+          return stateProps;
+        },
+        getActionsApi: () => {
+          return {
+            updateFieldValue: () => {/* nothing */},
+            triggerFieldChange: () => {/* nothing */}
+          };
+        },
+        ignoreSuggestion: () => {/* nothing */},
+        acceptSuggestion: () => {/* nothing */},
+        setInheritedProps: () => {/* nothing */},
+        resolveConfigProps: () => {/* nothing */}
+      };
+    }
+  };
+
+  return (
+    <>
+      <{{COMPONENT_CLASS_NAME}} {...props} />
+    </>
+  );
+};

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

@@ -0,0 +1,23 @@
+
+// @ts-nocheck
+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'
+};