@pega/custom-dx-components 0.23.21 → 0.23.23

package/tests/assets/components/create/Pega_DXIL_MyTestText/{index.jsx → index.tsx}

@@ -1,21 +1,35 @@
 import PropTypes from 'prop-types';
 import { Input } from '@pega/cosmos-react-core';
 
+import type { PConnFieldProps } from './PConnProps';
+
 import StyledPegaDxilMyTestTextWrapper from './styles';
 
+// interface for props
+interface PegaDxilMyTestTextProps extends PConnFieldProps {
+  // If any, enter additional props that only exist on TextInput here
+
+}
+
+// interface for StateProps object
+interface StateProps {
+  value: string;
+  hasSuggestions: boolean;
+}
 
 // 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
 // any default values in config.pros should be set in defaultProps at bottom of this file
-const PegaDxilMyTestText = props => {
+export default function PegaDxilMyTestText(props: PegaDxilMyTestTextProps) {
   const { getPConnect, value, placeholder, disabled, readOnly, required, label, hideLabel, testId } = props;
 
   const pConn = getPConnect();
   const actions = pConn.getActionsApi();
-  const propName = pConn?.getStateProps()?.value;
+  const stateProps = pConn.getStateProps() as StateProps;
+  let propName: string = stateProps.value;
 
-  const handleOnChange = event => {
+  const handleOnChange = (event: any) => {
     const { value: updatedValue } = event.target;
     actions.updateFieldValue(propName, updatedValue);
   };
@@ -57,5 +71,3 @@ PegaDxilMyTestText.propTypes = {
   required: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),
   testId: PropTypes.string
 };
-
-export default PegaDxilMyTestText;

package/tests/assets/components/{createAll/Constellation/Pega_DXIL_MyText/mock.js → create/Pega_DXIL_MyTestText/mock.ts}

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

package/tests/assets/components/createAll/Constellation/Pega_DXIL_MyAutocomplete/PConnProps.d.ts

@@ -0,0 +1,46 @@
+import  {PConnect } from '@pega/pcore-pconnect-typedefs';
+
+// PConnProps.d.ts
+// This gives us a place to have each component (which is most DX Components) that is
+//  expected to have a getPConnect extend its props (from BaseProps)
+//  such that every component will be expected to have a getPConnect() function
+//  that returns a PConnect object. (new/better way of doing .propTypes).
+//  This PConnProps can be extended to include other props that we know are in every component
+export interface PConnProps {
+  // getPConnect should exist for every C11n component. (add @ts-ignore in special cases where it isn't)
+  getPConnect: () => typeof PConnect;
+
+  // Allow any/all other key/value pairs in the BaseProps for now
+  //  TODO: refine which other props are always expected for various component
+  //    types and consider further interface "subclassing". For example, we may
+  //    want to create a "BasePropsForm" that gives guidance on required, readonly, etc.
+  //    and any other props that every Form component expects.
+  //    For example, see the PConnFieldProps below.
+  // NOTE: if you uncomment the line below, the PConnProps type will allow
+  //  otherwise undefined types to appear. This can be helpful for debugging
+  //  or when adding new components whose types aren't yet known.
+  // [key: string]: any;
+}
+
+
+// PConnFieldProps extends PConnProps to bring in the common properties that are
+// associated with most field components (ex: Dropdown, TextInput, etc.) in the
+//  components/field directory
+export interface PConnFieldProps extends PConnProps {
+  label: string,
+  required: boolean,
+  disabled: boolean,
+  value: any,
+  validatemessage: string,
+  status?: string,
+  onChange?: any,
+  onBlur?: any,
+  readOnly: boolean,
+  testId: string,
+  helperText: string,
+  displayMode?: string,
+  hideLabel: boolean,
+  placeholder?: string,
+  fieldMetadata?: any,
+  additionalProps?: any
+}

package/tests/assets/components/createAll/Constellation/Pega_DXIL_MyAutocomplete/{demo.stories.jsx → demo.stories.tsx}

@@ -1,10 +1,12 @@
-/* eslint-disable storybook/prefer-pascal-case */
+
 /* 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.js';
-import PegaDxilMyAutocomplete from './index.jsx';
+import { configProps, rawMetadata, fieldMetadata, stateProps } from './mock';
+
+import PegaDxilMyAutocomplete from './index';
 
 export default {
   title: 'PegaDxilMyAutocomplete',
@@ -13,8 +15,9 @@ export default {
 };
 
 export const BasePegaDxilMyAutocomplete = () => {
-  // eslint-disable-next-line react-hooks/rules-of-hooks
+
   const [value, setValue] = useState(configProps.value);
+  const datasourceMetadata = fieldMetadata;
 
   const props = {
     value,
@@ -24,6 +27,11 @@ export const BasePegaDxilMyAutocomplete = () => {
     datasource: configProps.datasource,
     testId: configProps.testId,
     hasSuggestions: configProps.hasSuggestions,
+    columns: [],
+    isTableFormatter: false,
+    listType: 'associated',
+    parameters: {},
+    datasourceMetadata,
     fieldMetadata,
 
     getPConnect: () => {
@@ -34,6 +42,9 @@ export const BasePegaDxilMyAutocomplete = () => {
         getStateProps: () => {
           return stateProps;
         },
+        getContextName: () => {
+          return 'app/primary_1';
+        },
         getLocalizedValue: val => {
           return val;
         },
@@ -55,30 +66,18 @@ export const BasePegaDxilMyAutocomplete = () => {
             updateFieldValue: (propName, theValue) => {
               setValue(theValue);
             },
-            triggerFieldChange: () => {
-              /* nothing */
-            }
+            triggerFieldChange: () => {/* nothing */}
           };
         },
         getValidationApi: () => {
           return {
-            validate: () => {
-              /* nothing */
-            }
+            validate: () => {/* nothing */}
           };
         },
-        ignoreSuggestion: () => {
-          /* nothing */
-        },
-        acceptSuggestion: () => {
-          /* nothing */
-        },
-        setInheritedProps: () => {
-          /* nothing */
-        },
-        resolveConfigProps: () => {
-          /* nothing */
-        }
+        ignoreSuggestion: () => {/* nothing */},
+        acceptSuggestion: () => {/* nothing */},
+        setInheritedProps: () => {/* nothing */},
+        resolveConfigProps: () => {/* nothing */}
       };
     }
   };

package/tests/assets/components/createAll/Constellation/{Pega_DXIL_MyBoolean/event-utils.js → Pega_DXIL_MyAutocomplete/event-utils.ts}

@@ -1,12 +1,12 @@
-const handleEvent = (actions, eventType, propName, value) => {
+const handleEvent = (actions: any, eventType: string, propName: string, value: string) => {
   switch (eventType) {
-    case "change":
+    case 'change':
       actions.updateFieldValue(propName, value);
       break;
-    case "blur":
+    case 'blur':
       actions.triggerFieldChange(propName, value);
       break;
-    case "changeNblur":
+    case 'changeNblur':
       actions.updateFieldValue(propName, value);
       actions.triggerFieldChange(propName, value);
       break;