@pega/custom-dx-components 0.23.24 → 0.23.25

package/src/tasks/create/templates/Constellation/Widget/CASE/index.tsx.mustache

@@ -1,3 +1,5 @@
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+import React from 'react';
 import { useState, useEffect } from 'react';
 import PropTypes from 'prop-types';
 import { Table, Text } from '@pega/cosmos-react-core';

package/src/tasks/create/templates/Constellation/Widget/PAGE/index.tsx.mustache

@@ -1,3 +1,5 @@
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+import React from 'react';
 import PropTypes from 'prop-types';
 import { AppAnnouncement as PegaAppAnnouncement } from '@pega/cosmos-react-work';
 import type { PConnFieldProps } from './PConnProps';

package/src/tasks/create/templates/Constellation/Widget/PAGE-CASE/Avatar.tsx.mustache

@@ -1,4 +1,5 @@
 /* eslint-disable react-hooks/rules-of-hooks */
+import type React from 'react';
 import { useEffect, useState } from 'react';
 import PropTypes from 'prop-types';
 import { Avatar as CosmosAvatar } from '@pega/cosmos-react-core';
@@ -44,7 +45,7 @@ function Avatar(props: {{COMPONENT_CLASS_NAME}}AvatarProps) {
 
   if (showStatus) {
     const currentState = PCore.getMessagingServiceManager().getUserPresence().getUserState(userIdentifier);
-    const [userState, setUserState] = useState(currentState === 'online' ? 'active' : 'inactive');
+    const [userState, setUserState]: any  = useState(currentState === 'online' ? 'active' : 'inactive');
 
     // @ts-ignore
     const handleUserStateChange = ({ state }) => {

package/src/tasks/create/templates/Constellation/Widget/PAGE-CASE/Operator.tsx.mustache

@@ -1,4 +1,6 @@
 /* eslint-disable react/jsx-fragments */
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+import React from 'react';
 import { useState, useEffect, Fragment } from 'react';
 import {
   Link,
@@ -37,7 +39,7 @@ export default function Operator(props: {{COMPONENT_CLASS_NAME}}OperatorProps) {
   const [popoverTarget, setPopoverTarget] = useState(null);
   const [popoverEl, setPopoverEl] = useElement(null);
   const [popoverContent, setpopoverContent] = useState(null);
-  const theme = useTheme();
+  const theme: any = useTheme();
 
   /* If the id has changed, we need to reset the popover */
   useEffect(() => {

package/src/tasks/create/templates/Constellation/Widget/PAGE-CASE/index.tsx.mustache

@@ -1,4 +1,6 @@
 
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+import React from 'react';
 /* eslint-disable no-nested-ternary */
 /* eslint-disable react/jsx-fragments */
 import { Fragment } from 'react';

package/src/tasks/create/templates/Launchpad/Widget/PAGE-CASE/Avatar.tsx.mustache

@@ -1,9 +1,11 @@
 /* eslint-disable react-hooks/rules-of-hooks */
+import type React from 'react';
 import { useEffect, useState } from 'react';
 import PropTypes from 'prop-types';
 import { Avatar as CosmosAvatar } from '@pega/cosmos-react-core';
 import type { PConnFieldProps } from './PConnProps';
 
+
 // interface for props
 interface {{COMPONENT_CLASS_NAME}}AvatarProps extends PConnFieldProps {
   // If any, enter additional props that only exist on TextInput here
@@ -43,7 +45,7 @@ function Avatar(props: {{COMPONENT_CLASS_NAME}}AvatarProps) {
 
   if (showStatus) {
     const currentState = PCore.getMessagingServiceManager().getUserPresence().getUserState(userIdentifier);
-    const [userState, setUserState] = useState(currentState === 'online' ? 'active' : 'inactive');
+    const [userState, setUserState]: any  = useState(currentState === 'online' ? 'active' : 'inactive');
 
     // @ts-ignore
     const handleUserStateChange = ({ state }) => {
@@ -59,9 +61,9 @@ function Avatar(props: {{COMPONENT_CLASS_NAME}}AvatarProps) {
       return function cleanup() {
         PCore.getMessagingServiceManager().getUserPresence().unsubscribe(userIdentifier, subId);
       };
-    }, [handleUserStateChange, userIdentifier]);
+    }, [userIdentifier, handleUserStateChange]);
     // @ts-ignore
-    return <CosmosAvatar name={userName} imageSrc={imageBlobUrl} status={userState} />;
+    return <CosmosAvatar name={userName} imageSrc={imageBlobUrl as React.SetStateAction<any>} status={userState} />;
   }
 
   // Do not render when userName does not exists

package/src/tasks/init/template/.eslintrc.json

@@ -23,14 +23,14 @@
     "prettier/prettier": "off",
 
     // Disable rules from shared configs we're not ready for yet.
-    "sonarjs/cognitive-complexity": "off",
+    "sonarjs/cognitive-complexity": ["warn", 45],
     "sonarjs/no-identical-functions": "off",
     "sonarjs/no-duplicate-string": "off",
     "sonarjs/no-nested-template-literals": "off",
 
     //
     // JA - Override some default lint handling here
-    "@typescript-eslint/array-type": ["error", { "default": "generic" }],
+    "@typescript-eslint/array-type": "off",
     // "import/extensions": ["warn", "never"],    // Turning off for now (see below)
 
     //
@@ -80,7 +80,6 @@
     "no-undef": "off",
     "no-unused-vars": "off",
     "no-var": "off",
-    "prefer-const": "off",
     "yoda": "error",
     "no-irregular-whitespace": "off",
     "no-empty": "off",
@@ -103,7 +102,6 @@
     "react/static-property-placement": "error",
     "array-callback-return": "error",
     "camelcase": "error",
-    "default-case": "off",
     "func-names": "error",
     "no-case-declarations": "error",
     "no-lonely-if": "error",

package/src/tasks/init/template/package.json.mustache

@@ -59,13 +59,16 @@
     "polished": "^4.2.2",
     "prop-types": "^15.8.1",
     "react": "^17.0.2",
+    "react-autosuggest": "^10.1.0",
     "react-dom": "^17.0.2",
     "react-is": "^18.2.0",
+    "react-player": "^2.10.1",
+    "react-redux": "^7.2.6",
     "styled-components": "^5.3.5"
   },
   "devDependencies": {
-    "@pega/configs": "^0.6.0",
-    "@pega/custom-dx-components": "0.23.24",
+    "@pega/configs": "^0.7.1",
+    "@pega/custom-dx-components": "0.23.25",
     "@pega/pcore-pconnect-typedefs": "2.0.0",
     "@storybook/addon-actions": "^7.6.7",
     "@storybook/addon-essentials": "^7.6.7",

package/src/tasks/publish-all/index.js

@@ -7,7 +7,12 @@ import bundleComponent from '../bundle/index.js';
 import { lintComponent } from '../linter/index.js';
 import { getComponents, getComponentDirectoryPath, showVersion } from '../../util.js';
 
-import { getPublishComponentQuestions, publishComponentToServer, zipComponent, cleanUp } from './helper.js';
+import {
+  getPublishComponentQuestions,
+  publishComponentToServer,
+  zipComponent,
+  cleanUp
+} from './helper.js';
 
 export function getCustomTasks(componentKey, sourceMap, devBuild, content, options) {
   const sDevBuild = devBuild ? '(dev build)' : '';
@@ -56,7 +61,7 @@ export function getCustomTasks(componentKey, sourceMap, devBuild, content, optio
   );
 }
 
-export default async (options) => {
+export default async options => {
   showVersion();
 
   const components = await getComponents();
@@ -95,8 +100,9 @@ export default async (options) => {
     const myCustomTasks = getCustomTasks(componentKey, sourceMap, devBuild, content, options);
 
     // eslint-disable-next-line no-await-in-loop
-    await myCustomTasks.run().catch((err) => {
+    await myCustomTasks.run().catch(err => {
       console.log(chalk.bold.red(err.toString()));
+      process.exit(1);
     });
   }
 

package/tests/assets/components/create/Pega_DXIL_MyTestText/index.tsx

@@ -1,3 +1,5 @@
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+import React from 'react';
 import PropTypes from 'prop-types';
 import { Input } from '@pega/cosmos-react-core';
 
@@ -27,7 +29,7 @@ export default function PegaDxilMyTestText(props: PegaDxilMyTestTextProps) {
   const pConn = getPConnect();
   const actions = pConn.getActionsApi();
   const stateProps = pConn.getStateProps() as StateProps;
-  let propName: string = stateProps.value;
+  const propName: string = stateProps.value;
 
   const handleOnChange = (event: any) => {
     const { value: updatedValue } = event.target;

package/tests/assets/components/createAll/Constellation/Pega_DXIL_MyAutocomplete/date.js

@@ -1,4 +1,3 @@
-/* eslint-disable @typescript-eslint/no-shadow */
 import dayjs from 'dayjs';
 import relativeTime from 'dayjs/plugin/relativeTime.js';
 import localizedFormat from 'dayjs/plugin/localizedFormat.js';
@@ -83,8 +82,10 @@ const constellationToCosmosFormatterMap = new Map([
 const types = ['fromNow', 'customFormat'];
 
 // value should be in ISO 8601 format.
-// eslint-disable-next-line no-shadow
-function DateFormatter(value, { type = types[1], format = 'DD/MM/YYYY', timezone, fieldType } = {}) {
+function DateFormatter(
+  value,
+  // eslint-disable-next-line no-shadow, @typescript-eslint/no-shadow
+  { type = types[1], format = 'DD/MM/YYYY', timezone, fieldType } = {}) {
   if (!value) return value;
   switch (type) {
     case types[1]:
@@ -127,7 +128,7 @@ function DateFormatter(value, { type = types[1], format = 'DD/MM/YYYY', timezone
 export function format(value, options) {
   if (!value) return null;
   const { type, locale, timezone, formatter, translate } = options;
-  // eslint-disable-next-line no-shadow
+  // eslint-disable-next-line no-shadow, @typescript-eslint/no-shadow
   const { format, variant } = constellationToCosmosFormatterMap.get(type).get(formatter);
   return formatDateTime(parseToDate(value), {
     t: translate,

package/tests/assets/components/createAll/Constellation/Pega_DXIL_MyAutocomplete/index.tsx

@@ -1,7 +1,9 @@
-
 /* 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';
+/* eslint-disable sonarjs/cognitive-complexity */
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+import React from 'react';
+import { useEffect, useRef, useState, memo, useMemo, type MutableRefObject, type SetStateAction } from 'react';
+import { ComboBox, menuHelpers, debounce, throttle, Button, Icon, type MenuGroupProps, type MenuItemProps } from '@pega/cosmos-react-core';
 import PropTypes from 'prop-types';
 import get from 'lodash.get';
 import type { PConnFieldProps } from './PConnProps';
@@ -206,7 +208,7 @@ export const doSearch = (
             const updatedItems = menuHelpers.selectItem(searchedItems, value, AC_TYPE);
             const selectedItem = menuHelpers.getSelected(updatedItems)[0];
             if (!selectedItem) {
-              let searchedItem = [];
+              let searchedItem: any = [];
               if (fetchDisplayValue) {
                 dataApiObj.matchPosition = 'equals';
                 buildColumnForDisplayValue(dataApiObj);
@@ -330,8 +332,8 @@ export const setValueToAssocProp = (
   actions: any,
   columns: Array<any>
 ) => {
-  let searchedEntry = null;
-  let retValue;
+  let searchedEntry: any = null;
+  let retValue: any;
   if (listSource && listSource.length > 0 && listSource[0]) {
     searchedEntry = listSource.filter(
       item =>
@@ -734,7 +736,7 @@ export function PegaDxilMyAutocomplete(props: PegaDxilMyAutocompleteProps) {
 
   useEffect(() => {
     if (listType === 'datapage' && displayMode && displayMode?.length > 0 && value !== '') {
-      let displayItem = null;
+      let displayItem: any = null;
       if (referenceType === 'Case' || referenceType === 'Data') {
         displayItem =
           referenceType === 'Case'

package/tests/assets/components/createAll/Constellation/Pega_DXIL_MyAutocomplete/picklist-utils.js

@@ -1,5 +1,4 @@
-/* eslint-disable @typescript-eslint/no-unused-vars */
-import { object } from 'prop-types';
+// import { object } from 'prop-types';
 
 export const flattenParameters = (parameters = {}) => {
   const flatParams = {};

package/tests/assets/components/createAll/Constellation/Pega_DXIL_MyAutocomplete/repeat-utils.js

@@ -1,6 +1,7 @@
 /* eslint-disable sonarjs/no-collapsible-if */
 /* eslint-disable default-param-last */
 /* eslint-disable func-names */
+/* eslint-disable sonarjs/cognitive-complexity */
 import { splitConditionTree } from '@pega/cosmos-react-condition-builder';
 import cloneDeep from 'lodash/cloneDeep.js';
 

package/tests/assets/components/createAll/Constellation/Pega_DXIL_MyBoolean/event-utils.ts

@@ -1,4 +1,4 @@
-const handleEvent = (actions: any, eventType: string, propName: string, value: string) => {
+const handleEvent = (actions: any, eventType: string, propName: string, value: any) => {
   switch (eventType) {
     case 'change':
       actions.updateFieldValue(propName, value);

package/tests/assets/components/createAll/Constellation/Pega_DXIL_MyBoolean/index.tsx

@@ -1,3 +1,5 @@
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+import React from 'react';
 import {
   Checkbox as CosmosCheckbox,
   CheckboxGroup,
@@ -6,6 +8,7 @@ import {
 } from "@pega/cosmos-react-core";
 import PropTypes from "prop-types";
 
+
 import type { PConnFieldProps } from './PConnProps';
 
 // includes in bundle
@@ -59,7 +62,7 @@ export default function PegaDxilMyBoolean(props: PegaDxilMyBooleanProps) {
   const actions = pConn.getActionsApi();
   const actionsProps = pConn.getActionsApi() as unknown as ActionsProps;
   const stateProps = pConn.getStateProps() as StateProps;
-  let propName: string = stateProps.value;
+  const propName: string = stateProps.value;
 
   let { readOnly, required, disabled } = props;
   [readOnly, required, disabled] = [readOnly, required, disabled].map(
@@ -82,7 +85,7 @@ export default function PegaDxilMyBoolean(props: PegaDxilMyBooleanProps) {
       required={required}
       onClick={actionsProps.onClick}
       onChange={(event) => {
-        handleEvent(actions, "changeNblur", propName, (event.target.checked).toString());
+        handleEvent(actions, "changeNblur", propName, event.target.checked);
       }}
       onBlur={(event: { target: { checked: any; }; }) => {
         // @ts-ignore
@@ -97,7 +100,10 @@ export default function PegaDxilMyBoolean(props: PegaDxilMyBooleanProps) {
   let displayComponent;
   if (displayMode) {
     // @ts-ignore
-    displayComponent = <PegaDxilMyBoolean  value={value} trueLabel={trueLabel} falseLabel={falseLabel} />;
+    displayComponent = (
+      // @ts-ignore
+      <PegaDxilMyBoolean value={value} trueLabel={trueLabel} falseLabel={falseLabel} />
+    );
   }
 
   if (displayMode === 'DISPLAY_ONLY') {

package/tests/assets/components/createAll/Constellation/Pega_DXIL_MyCaseWidget/index.tsx

@@ -1,3 +1,5 @@
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+import React from 'react';
 import { useState, useEffect } from 'react';
 import PropTypes from 'prop-types';
 import { Table, Text } from '@pega/cosmos-react-core';

package/tests/assets/components/createAll/Constellation/Pega_DXIL_MyCurrency/index.tsx

@@ -1,4 +1,6 @@
 
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+import React from 'react';
 import { useState, useEffect } from 'react';
 import {
   CurrencyInput as CosmosCurrency,

package/tests/assets/components/createAll/Constellation/Pega_DXIL_MyDate/index.tsx

@@ -1,3 +1,5 @@
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+import React from 'react';
 import { useEffect, useState } from 'react';
 import { DateInput, FieldValueList, DateTimeDisplay, Text,  } from '@pega/cosmos-react-core';
 import PropTypes from 'prop-types';
@@ -88,6 +90,7 @@ export default function PegaDxilMyDate (props: PegaDxilMyDateProps)  {
 
   // cast status
   let myStatus: 'success' | 'warning' | 'error' | 'pending';
+  // eslint-disable-next-line prefer-const
   myStatus = status as 'success' | 'warning' | 'error' | 'pending';
 
   useEffect(() => {

package/tests/assets/components/createAll/Constellation/Pega_DXIL_MyDateTime/index.tsx

@@ -1,3 +1,5 @@
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+import React from 'react';
 import { useEffect, useState } from 'react';
 import { DateTimeInput, FieldValueList, DateTimeDisplay, Text } from "@pega/cosmos-react-core";
 import PropTypes from "prop-types";
@@ -80,7 +82,7 @@ export default function PegaDxilMyDateTime (props: PegaDxilMyDateTimeProps)  {
   const actions = pConn.getActionsApi();
   const actionsProps = pConn.getActionsApi() as unknown as ActionsProps;
   const stateProps = pConn.getStateProps() as StateProps;
-  let propName: string = stateProps.value;
+  const propName: string = stateProps.value;
 
   const environmentInfo = PCore.getEnvironmentInfo();
   const timezone = environmentInfo && environmentInfo.getTimeZone();
@@ -94,6 +96,7 @@ export default function PegaDxilMyDateTime (props: PegaDxilMyDateTimeProps)  {
 
   // cast status
   let myStatus: 'success' | 'warning' | 'error' | 'pending';
+  // eslint-disable-next-line prefer-const
   myStatus = status as 'success' | 'warning' | 'error' | 'pending';
 
   useEffect(() => {

package/tests/assets/components/createAll/Constellation/Pega_DXIL_MyDecimal/index.tsx

@@ -1,3 +1,5 @@
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+import React from 'react';
 import { useState, useEffect, useRef } from 'react';
 import { NumberInput, NumberDisplay, CurrencyDisplay, FieldValueList, Text } from '@pega/cosmos-react-core';
 import PropTypes from 'prop-types';

package/tests/assets/components/createAll/Constellation/Pega_DXIL_MyDetails/StatusWork.tsx

@@ -1,3 +1,5 @@
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+import React from 'react';
 import { Status } from "@pega/cosmos-react-core";
 
 export default function StatusWorkRenderer({ value }: any) {

package/tests/assets/components/createAll/Constellation/Pega_DXIL_MyDetails/demo.stories.tsx

@@ -98,6 +98,7 @@ export const BasePegaDxilMyDetails = () => {
           return pyReviewRaw.config.inheritedProps;
         },
         createComponent: config => {
+          // eslint-disable-next-line default-case
           switch (config.config.value) {
             case '@P .pyStatusWork':
               return renderField(pyReviewResolved.highlightedData[0].config);

package/tests/assets/components/createAll/Constellation/Pega_DXIL_MyDetails/index.tsx

@@ -1,3 +1,5 @@
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+import React from 'react';
 import { Fragment } from 'react';
 import { Grid, Flex, FieldGroup } from '@pega/cosmos-react-core';
 import PropTypes from 'prop-types';

package/tests/assets/components/createAll/Constellation/Pega_DXIL_MyEmail/index.tsx

@@ -1,3 +1,5 @@
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+import React from 'react';
 import { useState, useEffect, useRef } from 'react';
 import { Input, EmailDisplay, FieldValueList, Text, URLDisplay, PhoneDisplay } from '@pega/cosmos-react-core';
 import PropTypes from 'prop-types';
@@ -44,7 +46,7 @@ export const formatExists = (formatterVal: string) => {
 
 
 export const textFormatter = (formatter: string, value: any) => {
-  let displayComponent = null;
+  let displayComponent: any = null;
   switch(formatter){
     case "TextInput" : {
       displayComponent = value;
@@ -93,7 +95,7 @@ export default function PegaDxilMyEmail(props: PegaDxilMyEmailProps) {
   const pConn = getPConnect();
   const actions = pConn.getActionsApi();
   const stateProps = pConn.getStateProps() as StateProps;
-  let propName: string = stateProps.value;
+  const propName: string = stateProps.value;
 
   const hasValueChange = useRef(false);
 
@@ -118,7 +120,7 @@ export default function PegaDxilMyEmail(props: PegaDxilMyEmailProps) {
     }
   }, [validatemessage, hasSuggestions, status]);
 
-  let displayComp = null;
+  let displayComp: any = null;
   if (displayMode) {
     displayComp = <EmailDisplay value={value} displayText={inputValue} variant='link' />;
   }

package/tests/assets/components/createAll/Constellation/Pega_DXIL_MyForm/demo.stories.tsx

@@ -144,6 +144,7 @@ export const BasePegaDxilMyForm = () => {
           return pyReviewRaw.config.inheritedProps;
         },
         createComponent: config => {
+          // eslint-disable-next-line default-case
           switch (config.config.value) {
             case '@P .FirstName':
               return renderField(regionChildrenResolved[0]);

package/tests/assets/components/createAll/Constellation/Pega_DXIL_MyForm/index.tsx

@@ -1,3 +1,5 @@
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+import React from 'react';
 import { Grid, FieldGroup } from '@pega/cosmos-react-core';
 import PropTypes from 'prop-types';
 

package/tests/assets/components/createAll/Constellation/Pega_DXIL_MyInteger/index.tsx

@@ -1,3 +1,5 @@
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+import React from 'react';
 import { useState, useEffect, useRef } from 'react';
 import { NumberInput, NumberDisplay, Slider, FieldValueList, CurrencyDisplay, Text } from '@pega/cosmos-react-core';
 import PropTypes from 'prop-types';

package/tests/assets/components/createAll/Constellation/Pega_DXIL_MyPage/GetNextWork.tsx

@@ -1,4 +1,5 @@
-
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+import React from 'react';
 import { Button, useToaster } from '@pega/cosmos-react-core';
 
 import type { PConnFieldProps } from './PConnProps';

package/tests/assets/components/createAll/Constellation/Pega_DXIL_MyPage/index.tsx

@@ -1,3 +1,5 @@
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+import React from 'react';
 import { useMemo, Children } from 'react';
 import PropTypes from 'prop-types';
 import { OneColumnPage as OneColumn } from '@pega/cosmos-react-core';

package/tests/assets/components/createAll/Constellation/Pega_DXIL_MyPageCaseWidget/Avatar.tsx

@@ -1,4 +1,5 @@
 /* eslint-disable react-hooks/rules-of-hooks */
+import type React from 'react';
 import { useEffect, useState } from 'react';
 import PropTypes from 'prop-types';
 import { Avatar as CosmosAvatar } from '@pega/cosmos-react-core';
@@ -44,7 +45,7 @@ function Avatar(props: PegaDxilMyPageCaseWidgetAvatarProps) {
 
   if (showStatus) {
     const currentState = PCore.getMessagingServiceManager().getUserPresence().getUserState(userIdentifier);
-    const [userState, setUserState] = useState(currentState === 'online' ? 'active' : 'inactive');
+    const [userState, setUserState]: any  = useState(currentState === 'online' ? 'active' : 'inactive');
 
     // @ts-ignore
     const handleUserStateChange = ({ state }) => {

package/tests/assets/components/createAll/Constellation/Pega_DXIL_MyPageCaseWidget/Operator.tsx

@@ -1,4 +1,6 @@
 /* eslint-disable react/jsx-fragments */
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+import React from 'react';
 import { useState, useEffect, Fragment } from 'react';
 import {
   Link,
@@ -37,7 +39,7 @@ export default function Operator(props: PegaDxilMyPageCaseWidgetOperatorProps) {
   const [popoverTarget, setPopoverTarget] = useState(null);
   const [popoverEl, setPopoverEl] = useElement(null);
   const [popoverContent, setpopoverContent] = useState(null);
-  const theme = useTheme();
+  const theme: any = useTheme();
 
   /* If the id has changed, we need to reset the popover */
   useEffect(() => {

package/tests/assets/components/createAll/Constellation/Pega_DXIL_MyPageCaseWidget/index.tsx

@@ -1,4 +1,6 @@
 
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+import React from 'react';
 /* eslint-disable no-nested-ternary */
 /* eslint-disable react/jsx-fragments */
 import { Fragment } from 'react';

package/tests/assets/components/createAll/Constellation/Pega_DXIL_MyPageWidget/index.tsx

@@ -1,3 +1,5 @@
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+import React from 'react';
 import PropTypes from 'prop-types';
 import { AppAnnouncement as PegaAppAnnouncement } from '@pega/cosmos-react-work';
 import type { PConnFieldProps } from './PConnProps';

package/tests/assets/components/createAll/Constellation/Pega_DXIL_MyParagraph/index.tsx

@@ -1,3 +1,5 @@
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+import React from 'react';
 import { useState, useEffect, useRef } from 'react';
 import { TextArea as CosmosTextArea, FieldValueList, ParagraphDisplay, Text, EmailDisplay, PhoneDisplay, URLDisplay } from '@pega/cosmos-react-core';
 import PropTypes from 'prop-types';
@@ -44,7 +46,7 @@ export const formatExists = (formatterVal: string) => {
 
 
 export const textFormatter = (formatter: string, value: any) => {
-  let displayComponent = null;
+  let displayComponent:any = null;
   switch(formatter){
     case "TextInput" : {
       displayComponent = value;
@@ -94,7 +96,7 @@ export default function PegaDxilMyParagraph(props: PegaDxilMyParagraphProps) {
   const pConn = getPConnect();
   const actions = pConn.getActionsApi();
   const stateProps = pConn.getStateProps() as StateProps;
-  let propName: string = stateProps.value;
+  const propName: string = stateProps.value;
   const maxLength = fieldMetadata?.maxLength;
   const hasValueChange = useRef(false);
 

package/tests/assets/components/createAll/Constellation/Pega_DXIL_MyPercentage/index.tsx

@@ -1,3 +1,5 @@
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+import React from 'react';
 import { useState, useEffect, useRef } from 'react';
 import {
   NumberInput,
@@ -104,7 +106,7 @@ export default function PegaDxilMyPercentage(props: PegaDxilMyPercentageProps) {
 
   if (displayMode === 'LABELS_LEFT' || displayMode === 'DISPLAY_ONLY') {
     let unit = 'percent';
-    let displayComp = null;
+    let displayComp:any = null;
 
     if (isTableFormatter) {
       switch (formatter) {

package/tests/assets/components/createAll/Constellation/Pega_DXIL_MyPhone/index.tsx

@@ -1,3 +1,5 @@
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+import React from 'react';
 import { useState, useEffect, useRef } from 'react';
 import {
   PhoneInput as CosmosPhone,
@@ -53,7 +55,7 @@ export const formatExists = (formatterVal: string) => {
 
 
 export const textFormatter = (formatter: string, value: any) => {
-  let displayComponent = null;
+  let displayComponent:any = null;
   switch(formatter){
     case "TextInput" : {
       displayComponent = value;
@@ -104,7 +106,7 @@ export default function PegaDxilMyPhone(props: PegaDxilMyPhoneProps) {
   const pConn = getPConnect();
   const actions = pConn.getActionsApi();
   const stateProps = pConn.getStateProps() as StateProps;
-  let propName: string = stateProps.value;
+  const propName: string = stateProps.value;
   const hasValueChange = useRef(false);
 
   let callingCodesList: Array<any>  = [];
@@ -139,7 +141,7 @@ export default function PegaDxilMyPhone(props: PegaDxilMyPhoneProps) {
     }
   }, [validatemessage, hasSuggestions, status]);
 
-  // funtion to exclude country code from phone number
+  // function to exclude country code from phone number
   function getPhoneNumberAlone(phoneNumber: string) {
     const phoneNumberParts = getPhoneNumberParts(phoneNumber, callingCodesList);
     return phoneNumberParts && phoneNumberParts[1];
@@ -152,7 +154,7 @@ export default function PegaDxilMyPhone(props: PegaDxilMyPhoneProps) {
     handleEvent(actions, eventType, propName, enteredValue);
   }
 
-  let displayComp = null;
+  let displayComp: any = null;
   if (displayMode) {
     displayComp = <PhoneDisplay value={value} variant='link' />;
   }

package/tests/assets/components/createAll/Constellation/Pega_DXIL_MyPicklist/index.tsx

@@ -1,4 +1,6 @@
 /* eslint-disable react-hooks/exhaustive-deps */
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+import React from 'react';
 // @ts-nocheck
 import { useState, useEffect, useRef } from 'react';
 import { Select, Option, FieldValueList, Text } from '@pega/cosmos-react-core';
@@ -60,7 +62,7 @@ export const formatExists = (formatterVal: string) => {
 
 
 export const textFormatter = (formatter: string,value: any) => {
-  let displayComponent = null;
+  let displayComponent: any = null;
   switch(formatter){
     case "TextInput" : {
       displayComponent = value;