@pega/custom-dx-components 0.23.21 → 0.23.23

package/tests/assets/components/createAll/Launchpad/Pega_DXIL_MyURL/event-utils.ts

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

package/tests/assets/components/createAll/Launchpad/Pega_DXIL_MyURL/{index.jsx → index.tsx}

@@ -1,6 +1,7 @@
 import { useState, useEffect, useRef} from "react";
 import { Input, FieldValueList, Text } from "@pega/cosmos-react-core";
 import PropTypes from "prop-types";
+import type { PConnFieldProps } from './PConnProps';
 
 // includes in bundle
 import {formatExists,textFormatter, urlFormatter} from "./text-url.jsx";
@@ -9,12 +10,38 @@ import { suggestionsHandler } from './suggestions-handler';
 
 import StyledPegaDxilMyUrlWrapper from './styles';
 
+// interface for props
+interface PegaDxilMyUrlProps extends PConnFieldProps {
+  // If any, enter additional props that only exist on TextInput here
+  displayAsStatus?: boolean;
+  displayAs: string;
+  isTableFormatter?: boolean;
+  hasSuggestions?: boolean;
+  variant?: any;
+  formatter: string;
+  datasource: Array<any>;
+  widthSel: string;
+  customWidth: number;
+  altText: string;
+  altTextOfImage: string;
+  propaltTextOfImage: string;
+  urlLabel: string;
+  propUrlLabel: string;
+  urlLabelSelection: string;
+  tableDisplayAs: string;
+}
+
+// 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 PegaDxilMyUrl = props => {
+export default function PegaDxilMyUrl(props: PegaDxilMyUrlProps) {
   const {
     getPConnect,
     value,
@@ -43,7 +70,8 @@ const PegaDxilMyUrl = props => {
   const { formatter } = 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 hasValueChange = useRef(false);
 
 
@@ -126,7 +154,7 @@ const PegaDxilMyUrl = props => {
     );
   }
 
-  const onResolveSuggestionHandler = (accepted) => {
+  const onResolveSuggestionHandler = (accepted: boolean) => {
     suggestionsHandler(accepted, pConn, setStatus);
   };
 
@@ -145,25 +173,28 @@ const PegaDxilMyUrl = props => {
       readOnly={readOnly}
       required={required}
       data-testid={testId}
-      onChange={(event) => {
+      onChange={(event: any) => {
         if (hasSuggestions) {
-          setStatus(undefined);
+          setStatus('');
         }
         setInputValue(event.target.value);
         if (value !== event.target.value) {
+          // @ts-ignore
           handleEvent(actions, 'change', propName, event.target.value);
           hasValueChange.current = true;
         }
       }}
-      onBlur={(event) => {
+      onBlur={(event: any) => {
         if (!value || hasValueChange.current) {
+          // @ts-ignore
           handleEvent(actions, 'blur', propName, event.target.value);
           if (hasSuggestions) {
-            pConn.ignoreSuggestion();
+            pConn.ignoreSuggestion('');
           }
           hasValueChange.current = false;
         }
       }}
+      // @ts-ignore
       onFocus={actions.onFocus}
       onResolveSuggestion={onResolveSuggestionHandler}
     />
@@ -228,5 +259,3 @@ PegaDxilMyUrl.propTypes = {
   tableDisplayAs: PropTypes.string,
   hasSuggestions: PropTypes.bool
 };
-
-export default PegaDxilMyUrl;

package/{src/tasks/create/templates/Constellation/Field/Text-URL/mock.js.mustache → tests/assets/components/createAll/Launchpad/Pega_DXIL_MyURL/mock.ts}

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

package/tests/assets/components/createAll/Launchpad/Pega_DXIL_MyURL/suggestions-handler.ts

@@ -0,0 +1,9 @@
+export const suggestionsHandler = (accepted: boolean, pConn: any, setStatus: any) => {
+  if (accepted) {
+    pConn.acceptSuggestion();
+    setStatus('success');
+  } else {
+    pConn.ignoreSuggestion();
+    setStatus(undefined);
+  }
+};

package/tests/functional/localCreateAllListDeleteAll.test.js

@@ -34,7 +34,7 @@ describe('createAll list and deleteAll local', () => {
     const newFileName = 'Pega_DXIL_MyBoolean';
 
     // const fileDir = path.resolve(`src/components/${newFileName}`);
-    const createFile = path.resolve('../../..', path.join(`src/components/${newFileName}`, 'index.jsx'));
+    const createFile = path.resolve('../../..', path.join(`src/components/${newFileName}`, 'index.tsx'));
     const doesExist = fs.existsSync(createFile);
     expect(doesExist).toBeTruthy();
 
@@ -156,7 +156,7 @@ describe('createAll list and deleteAll local', () => {
     // I think run through a map of them here
 
     // const fileDir = path.resolve(`src/components/${newFileName}`);
-    // const createFile = path.resolve(path.join(`src/components/${newFileName}`, 'index.jsx'));
+    // const createFile = path.resolve(path.join(`src/components/${newFileName}`, 'index.tsx'));
     // const doesExist = fs.existsSync(createFile);
     // expect(doesExist).not.toBeTruthy();
   }, 10000);

package/tests/functional/localCreateBuildAllDeleteAll.test.js

@@ -35,7 +35,7 @@ describe('create buildAll and deleteAll local', () => {
     // const fileDir = path.resolve(`src/components/${newFileName}`);
     const createFile = path.resolve(
       '../../..',
-      path.join(`src/components/${newFileName}`, 'index.jsx')
+      path.join(`src/components/${newFileName}`, 'index.tsx')
     );
     const doesExist = fs.existsSync(createFile);
     expect(doesExist).toBeTruthy();
@@ -67,7 +67,7 @@ describe('create buildAll and deleteAll local', () => {
     // const fileDir = path.resolve(`src/components/${newFileName}`);
     const createFile = path.resolve(
       '../../..',
-      path.join(`src/components/${newFileName}`, 'index.jsx')
+      path.join(`src/components/${newFileName}`, 'index.tsx')
     );
     const doesExist = fs.existsSync(createFile);
     expect(doesExist).toBeTruthy();
@@ -99,7 +99,7 @@ describe('create buildAll and deleteAll local', () => {
     // const fileDir = path.resolve(`src/components/${newFileName}`);
     const createFile = path.resolve(
       '../../..',
-      path.join(`src/components/${newFileName}`, 'index.jsx')
+      path.join(`src/components/${newFileName}`, 'index.tsx')
     );
     const doesExist = fs.existsSync(createFile);
     expect(doesExist).toBeTruthy();
@@ -150,7 +150,7 @@ describe('create buildAll and deleteAll local', () => {
     // I think run through a map of them here
 
     // const fileDir = path.resolve(`src/components/${newFileName}`);
-    // const createFile = path.resolve(path.join(`src/components/${newFileName}`, 'index.jsx'));
+    // const createFile = path.resolve(path.join(`src/components/${newFileName}`, 'index.tsx'));
     // const doesExist = fs.existsSync(createFile);
     // expect(doesExist).not.toBeTruthy();
   }, 20000);

package/tests/functional/localCreateBuildDelete.test.js

@@ -33,7 +33,7 @@ describe('create build and delete local', () => {
     // check to see file exists
 
     // const fileDir = path.resolve(`src/components/${newFileName}`);
-    const createFile = path.resolve('../../..', path.join(`src/components/${newFileName}`, 'index.jsx'));
+    const createFile = path.resolve('../../..', path.join(`src/components/${newFileName}`, 'index.tsx'));
     const doesExist = fs.existsSync(createFile);
     expect(doesExist).toBeTruthy();
 
@@ -77,7 +77,7 @@ describe('create build and delete local', () => {
     // check to see file exists
 
     // const fileDir = path.resolve(`src/components/${newFileName}`);
-    const createFile = path.resolve('../../..', path.join(`src/components/${newFileName}`, 'index.jsx'));
+    const createFile = path.resolve('../../..', path.join(`src/components/${newFileName}`, 'index.tsx'));
     const doesExist = fs.existsSync(createFile);
     expect(doesExist).not.toBeTruthy();
   }, 10000);

package/tests/functional/localCreateListDelete.test.js

@@ -33,7 +33,7 @@ describe('create list and delete local', () => {
     // check to see file exists
 
     // const fileDir = path.resolve(`src/components/${newFileName}`);
-    const createFile = path.resolve(path.join('../../..', `src/components/${newFileName}`, 'index.jsx'));
+    const createFile = path.resolve(path.join('../../..', `src/components/${newFileName}`, 'index.tsx'));
     const doesExist = fs.existsSync(createFile);
     expect(doesExist).toBeTruthy();
 
@@ -101,7 +101,7 @@ describe('create list and delete local', () => {
     // check to see file exists
 
     // const fileDir = path.resolve(`src/components/${newFileName}`);
-    const createFile = path.resolve(path.join('../../..', `src/components/${newFileName}`, 'index.jsx'));
+    const createFile = path.resolve(path.join('../../..', `src/components/${newFileName}`, 'index.tsx'));
     const doesExist = fs.existsSync(createFile);
     expect(doesExist).not.toBeTruthy();
   }, 10000);

package/tests/functional/localCreatePublishAllDeleteAll.test.js

@@ -35,7 +35,7 @@ describe('create publish and deleteAll local', () => {
     // const fileDir = path.resolve(`src/components/${newFileName}`);
     const createFile = path.resolve(
       '../../..',
-      path.join(`src/components/${newFileName}`, 'index.jsx')
+      path.join(`src/components/${newFileName}`, 'index.tsx')
     );
     const doesExist = fs.existsSync(createFile);
     expect(doesExist).toBeTruthy();
@@ -67,7 +67,7 @@ describe('create publish and deleteAll local', () => {
     // const fileDir = path.resolve(`src/components/${newFileName}`);
     const createFile = path.resolve(
       '../../..',
-      path.join(`src/components/${newFileName}`, 'index.jsx')
+      path.join(`src/components/${newFileName}`, 'index.tsx')
     );
     const doesExist = fs.existsSync(createFile);
     expect(doesExist).toBeTruthy();
@@ -99,7 +99,7 @@ describe('create publish and deleteAll local', () => {
     // const fileDir = path.resolve(`src/components/${newFileName}`);
     const createFile = path.resolve(
       '../../..',
-      path.join(`src/components/${newFileName}`, 'index.jsx')
+      path.join(`src/components/${newFileName}`, 'index.tsx')
     );
     const doesExist = fs.existsSync(createFile);
     expect(doesExist).toBeTruthy();
@@ -150,7 +150,7 @@ describe('create publish and deleteAll local', () => {
     // I think run through a map of them here
 
     // const fileDir = path.resolve(`src/components/${newFileName}`);
-    // const createFile = path.resolve(path.join(`src/components/${newFileName}`, 'index.jsx'));
+    // const createFile = path.resolve(path.join(`src/components/${newFileName}`, 'index.tsx'));
     // const doesExist = fs.existsSync(createFile);
     // expect(doesExist).not.toBeTruthy();
   }, 10000);

package/tests/functional/localCreatePublishDelete.test.js

@@ -33,7 +33,7 @@ describe('create publish and delete local', () => {
     // check to see file exists
 
     // const fileDir = path.resolve(`src/components/${newFileName}`);
-    const createFile = path.resolve('../../..', path.join(`src/components/${newFileName}`, 'index.jsx'));
+    const createFile = path.resolve('../../..', path.join(`src/components/${newFileName}`, 'index.tsx'));
     const doesExist = fs.existsSync(createFile);
     expect(doesExist).toBeTruthy();
 
@@ -78,7 +78,7 @@ describe('create publish and delete local', () => {
     // check to see file exists
 
     // const fileDir = path.resolve(`src/components/${newFileName}`);
-    const createFile = path.resolve('../../..', path.join(`src/components/${newFileName}`, 'index.jsx'));
+    const createFile = path.resolve('../../..', path.join(`src/components/${newFileName}`, 'index.tsx'));
     const doesExist = fs.existsSync(createFile);
     expect(doesExist).not.toBeTruthy();
   }, 10000);

package/tests/functional/localCreateRenameDelete.test.js

@@ -33,7 +33,7 @@ describe('create rename and delete local', () => {
     // check to see file exists
 
     // const fileDir = path.resolve(`src/components/${newFileName}`);
-    const createFile = path.resolve('../../..', path.join(`src/components/${newFileName}`, 'index.jsx'));
+    const createFile = path.resolve('../../..', path.join(`src/components/${newFileName}`, 'index.tsx'));
     const doesExist = fs.existsSync(createFile);
     expect(doesExist).toBeTruthy();
 
@@ -77,7 +77,7 @@ describe('create rename and delete local', () => {
     // check to see file exists
 
     // const fileDir = path.resolve(`src/components/${newFileName}`);
-    const createFile = path.resolve('../../..', path.join(`src/components/${newFileName}`, 'index.jsx'));
+    const createFile = path.resolve('../../..', path.join(`src/components/${newFileName}`, 'index.tsx'));
     const doesExist = fs.existsSync(createFile);
     expect(doesExist).not.toBeTruthy();
   }, 10000);

package/tests/assets/components/createAll/Constellation/Pega_DXIL_MyCurrency/demo.stories.jsx

@@ -1,67 +0,0 @@
-/* eslint-disable storybook/prefer-pascal-case */
-/* eslint-disable react/jsx-no-useless-fragment */
-import { withKnobs } from '@storybook/addon-knobs';
-
-import { configProps, fieldMetadata, stateProps } from './mock.js';
-import PegaDxilMyCurrency from './index.jsx';
-
-export default {
-  title: 'PegaDxilMyCurrency',
-  decorators: [withKnobs],
-  component: PegaDxilMyCurrency
-};
-
-export const BasePegaDxilMyCurrency = () => {
-  const props = {
-    value: Number(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,
-
-    getPConnect: () => {
-      return {
-        getStateProps: () => {
-          return stateProps;
-        },
-        getActionsApi: () => {
-          return {
-            updateFieldValue: () => {
-              /* nothing */
-            },
-            triggerFieldChange: () => {
-              /* nothing */
-            }
-          };
-        },
-        ignoreSuggestion: () => {
-          /* nothing */
-        },
-        acceptSuggestion: () => {
-          /* nothing */
-        },
-        setInheritedProps: () => {
-          /* nothing */
-        },
-        resolveConfigProps: () => {
-          /* nothing */
-        },
-        clearErrorMessages: () => {
-          /* nothing */
-        }
-      };
-    }
-  };
-
-  return (
-    <>
-      <PegaDxilMyCurrency {...props} />
-    </>
-  );
-};

package/tests/assets/components/createAll/Constellation/Pega_DXIL_MyDecimal/demo.stories.jsx

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

package/tests/assets/components/createAll/Constellation/Pega_DXIL_MyDecimal/suggestions-handler.js

@@ -1,9 +0,0 @@
-export const suggestionsHandler = (accepted, pConn, setStatus) => {
-  if (accepted) {
-    pConn.acceptSuggestion();
-    setStatus('success');
-  } else {
-    pConn.ignoreSuggestion();
-    setStatus(undefined);
-  }
-};

package/tests/assets/components/createAll/Constellation/Pega_DXIL_MyEmail/demo.stories.jsx

@@ -1,59 +0,0 @@
-/* eslint-disable react/jsx-no-useless-fragment */
-import { withKnobs } from '@storybook/addon-knobs';
-
-import PegaDxilMyEmail from './index.jsx';
-import { stateProps, configProps, fieldMetadata } from './mock';
-
-export default {
-  title: 'PegaDxilMyEmail',
-  decorators: [withKnobs],
-  component: PegaDxilMyEmail
-};
-
-export const BasePegaDxilMyEmail = () => {
-  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 (
-    <>
-      <PegaDxilMyEmail {...props} />
-    </>
-  );
-};

package/tests/assets/components/createAll/Constellation/Pega_DXIL_MyEmail/event-utils.js

@@ -1,18 +0,0 @@
-const handleEvent = (actions, eventType, propName, value) => {
-  switch (eventType) {
-    case "change":
-      actions.updateFieldValue(propName, value);
-      break;
-    case "blur":
-      actions.triggerFieldChange(propName, value);
-      break;
-    case "changeNblur":
-      actions.updateFieldValue(propName, value);
-      actions.triggerFieldChange(propName, value);
-      break;
-    default:
-      break;
-  }
-};
-
-export default handleEvent;

package/tests/assets/components/createAll/Constellation/Pega_DXIL_MyEmail/suggestions-handler.js

@@ -1,9 +0,0 @@
-export const suggestionsHandler = (accepted, pConn, setStatus) => {
-  if (accepted) {
-    pConn.acceptSuggestion();
-    setStatus('success');
-  } else {
-    pConn.ignoreSuggestion();
-    setStatus(undefined);
-  }
-};

package/tests/assets/components/createAll/Constellation/Pega_DXIL_MyInteger/demo.stories.jsx

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

package/tests/assets/components/createAll/Constellation/Pega_DXIL_MyInteger/event-utils.js

@@ -1,18 +0,0 @@
-const handleEvent = (actions, eventType, propName, value) => {
-  switch (eventType) {
-    case "change":
-      actions.updateFieldValue(propName, value);
-      break;
-    case "blur":
-      actions.triggerFieldChange(propName, value);
-      break;
-    case "changeNblur":
-      actions.updateFieldValue(propName, value);
-      actions.triggerFieldChange(propName, value);
-      break;
-    default:
-      break;
-  }
-};
-
-export default handleEvent;

package/tests/assets/components/createAll/Constellation/Pega_DXIL_MyInteger/suggestions-handler.js

@@ -1,9 +0,0 @@
-export const suggestionsHandler = (accepted, pConn, setStatus) => {
-  if (accepted) {
-    pConn.acceptSuggestion();
-    setStatus('success');
-  } else {
-    pConn.ignoreSuggestion();
-    setStatus(undefined);
-  }
-};