@pega/custom-dx-components 0.242.16 → 0.242.17

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pega/custom-dx-components",
-  "version": "0.242.16",
+  "version": "0.242.17",
   "description": "Utility for building custom UI components",
   "bin": "./bin/index.js",
   "scripts": {

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

@@ -1,6 +1,5 @@
 
 /* eslint-disable react/jsx-no-useless-fragment */
-// @ts-nocheck
 import { useState } from 'react';
 import type { Meta, StoryObj } from '@storybook/react';
 
@@ -17,7 +16,7 @@ const meta: Meta<typeof {{COMPONENT_CLASS_NAME}}> = {
 export default meta;
 type Story = StoryObj<typeof {{COMPONENT_CLASS_NAME}}>;
 
-export const Base{{COMPONENT_CLASS_NAME}}: Story = args => {
+export const Base{{COMPONENT_CLASS_NAME}}: Story = (args: any) => {
 
   const [value, setValue] = useState(configProps.value);
 
@@ -31,7 +30,7 @@ export const Base{{COMPONENT_CLASS_NAME}}: Story = args => {
         },
         getActionsApi: () => {
           return {
-            updateFieldValue: (propName, theValue) => {
+            updateFieldValue: (propName: string, theValue: any) => {
               setValue(theValue);
             },
             triggerFieldChange: () => { /* nothing */}

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

@@ -86,7 +86,6 @@ function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}Props) {
         handleEvent(actions, "changeNblur", propName, event.target.checked);
       }}
       onBlur={(event: { target: { checked: any; }; }) => {
-        // @ts-ignore
         pConn.getValidationApi().validate(event.target.checked);
       }}
       data-testid={testId}

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

@@ -1,4 +1,3 @@
-// @ts-nocheck
 export const configProps = {
   value: true,
   label: 'Boolean label',

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

@@ -103,8 +103,7 @@ function {{COMPONENT_CLASS_NAME}} (props: {{COMPONENT_CLASS_NAME}}Props)  {
   }, [validatemessage, hasSuggestions, myStatus]);
 
   // calculate min and max range of calendar
-  // @ts-ignore
-  const currentYear = getFullYear();
+  const currentYear = getFullYear(null);
 
   const yearFromValue = getFullYear(value);
   const maxDate = getMaxDate(
@@ -160,7 +159,7 @@ function {{COMPONENT_CLASS_NAME}} (props: {{COMPONENT_CLASS_NAME}}Props)  {
      }
 
 
-    if (formatter !== "" && formatExists(formatter)){
+    if (formatter !== "" && formatExists(formatter)) {
         // @ts-ignore
         const {variantVal, formatVal} = datetimedisplayformatter(formatter);
         variantValue = variantVal;
@@ -224,8 +223,7 @@ function {{COMPONENT_CLASS_NAME}} (props: {{COMPONENT_CLASS_NAME}}Props)  {
           hideLabel={hideLabel}
           testId={testId}
           additionalProps={textAdditionalProps}
-          // @ts-ignore
-          customFormat={getDateFormat(locale)}
+          customFormat={getDateFormat(locale, null)}
         />
       </Styled{{COMPONENT_CLASS_NAME}}Wrapper>
     );

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

@@ -1,5 +1,4 @@
 /* eslint-disable react/jsx-no-useless-fragment */
-// @ts-nocheck
 import type { Meta, StoryObj } from '@storybook/react';
 import { configProps, stateProps } from './mock';
 import {{COMPONENT_CLASS_NAME}} from './index';
@@ -29,7 +28,7 @@ window.PCore.getEnvironmentInfo = () => {
   };
 };
 
-export const Base{{COMPONENT_CLASS_NAME}}: Story = args => {
+export const Base{{COMPONENT_CLASS_NAME}}: Story = (args: any) => {
   const props = {
     value: configProps.value,
     additionalProps: configProps.additionalProps,

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

@@ -1,6 +1,5 @@
 
 /* eslint-disable react/jsx-no-useless-fragment */
-// @ts-nocheck
 import type { Meta, StoryObj } from '@storybook/react';
 
 import { configProps, fieldMetadata, stateProps } from './mock';
@@ -16,7 +15,7 @@ const meta: Meta<typeof {{COMPONENT_CLASS_NAME}}> = {
 export default meta;
 type Story = StoryObj<typeof {{COMPONENT_CLASS_NAME}}>;
 
-export const Base{{COMPONENT_CLASS_NAME}}: Story = args => {
+export const Base{{COMPONENT_CLASS_NAME}}: Story = (args: any) => {
 
   const props = {
     value: configProps.value,

package/src/tasks/create/templates/Constellation/Field/Decimal/event-utils.ts.mustache

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

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

@@ -87,9 +87,8 @@ function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}Props) {
   }, [validatemessage, hasSuggestions, status]);
 
   const { decimalPrecision, currencyDecimalPrecision } = props;
-  let numberOfDecimals = parseInt(decimalPrecision, 10);
+  let numberOfDecimals: number | undefined = parseInt(decimalPrecision, 10);
   if (Number.isNaN(numberOfDecimals)) {
-    // @ts-ignore
     numberOfDecimals = decimalPrecision === '' ? undefined : 2;
   }
   let noOfFractionDigits = currencyDecimalPrecision === 'auto' ? undefined : parseInt(currencyDecimalPrecision, 10);
@@ -225,14 +224,12 @@ function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}Props) {
         }
         setDecimalValue(enteredValue);
         if (value !== (enteredValue !== '' ? Number(enteredValue) : '')) {
-          // @ts-ignore
           handleEvent(actions, 'change', propName, enteredValue !== '' ? Number(enteredValue) : '');
           hasValueChange.current = true;
         }
       }}
       onBlur={() => {
         if (!value || hasValueChange.current) {
-          // @ts-ignore
           handleEvent(actions, 'blur', propName, decimalValue !== '' ? Number(decimalValue) : '');
           if (hasSuggestions) {
             pConn.ignoreSuggestion("");

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

@@ -1,5 +1,4 @@
 
-// @ts-nocheck
 export const configProps = {
   value: '',
   label: 'Decimal Sample',

package/src/tasks/create/templates/Constellation/Field/Decimal-Currency/demo.stories.tsx.mustache

@@ -1,6 +1,5 @@
 
 /* eslint-disable react/jsx-no-useless-fragment */
-// @ts-nocheck
 import type { Meta, StoryObj } from '@storybook/react';
 
 import { configProps, fieldMetadata, stateProps } from './mock';
@@ -16,7 +15,7 @@ const meta: Meta<typeof {{COMPONENT_CLASS_NAME}}> = {
 export default meta;
 type Story = StoryObj<typeof {{COMPONENT_CLASS_NAME}}>;
 
-export const Base{{COMPONENT_CLASS_NAME}}: Story = args => {
+export const Base{{COMPONENT_CLASS_NAME}}: Story = (args: any) => {
 
   const props = {
     value: Number(configProps.value),

package/src/tasks/create/templates/Constellation/Field/Decimal-Currency/event-utils.ts.mustache

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

package/src/tasks/create/templates/Constellation/Field/Decimal-Currency/index.tsx.mustache

@@ -1,4 +1,3 @@
-
 import { useState, useEffect } from 'react';
 import {
   CurrencyInput as CosmosCurrency,
@@ -266,7 +265,6 @@ function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}Props) {
       onBlur={(enteredValue) => {
         const parsedValue = enteredValue !== '' ? Number(enteredValue) : enteredValue;
         if (!readOnly && (!value || value !== parsedValue)) {
-           // @ts-ignore
           handleEvent(actions, 'changeNblur', propName, parsedValue);
           if (hasSuggestions) {
             pConn.ignoreSuggestion('');

package/src/tasks/create/templates/Constellation/Field/Decimal-Currency/mock.ts.mustache

@@ -1,5 +1,4 @@
 
-// @ts-nocheck
 export const configProps = {
   value: '',
   label: 'Currency Sample',
@@ -8,7 +7,6 @@ export const configProps = {
   allowDecimals: true,
   showGroupSeparators: true,
   alwaysShowISOCode: true,
-  placeholder: 'Currency Placeholder',
   helperText: 'Currency Helper Text',
   testId: 'currency-12345678',
   hasSuggestions: false,

package/src/tasks/create/templates/Constellation/Field/Decimal-Percentage/demo.stories.tsx.mustache

@@ -1,6 +1,5 @@
 
 /* eslint-disable react/jsx-no-useless-fragment */
-// @ts-nocheck
 import type { Meta, StoryObj } from '@storybook/react';
 
 import { configProps, stateProps, fieldMetadata } from './mock';
@@ -16,7 +15,7 @@ const meta: Meta<typeof {{COMPONENT_CLASS_NAME}}> = {
 export default meta;
 type Story = StoryObj<typeof {{COMPONENT_CLASS_NAME}}>;
 
-export const Base{{COMPONENT_CLASS_NAME}}: Story = args => {
+export const Base{{COMPONENT_CLASS_NAME}}: Story = (args: any) => {
 
   const props = {
     value: configProps.value,

package/src/tasks/create/templates/Constellation/Field/Decimal-Percentage/event-utils.ts.mustache

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

package/src/tasks/create/templates/Constellation/Field/Decimal-Percentage/index.tsx.mustache

@@ -93,9 +93,8 @@ function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}Props) {
     }
   }, [validatemessage, hasSuggestions, status]);
 
-  let numberOfDecimals = parseInt(decimalPrecision, 10);
+  let numberOfDecimals : number | undefined = parseInt(decimalPrecision, 10);
   if (Number.isNaN(numberOfDecimals)) {
-    // @ts-ignore
     numberOfDecimals = decimalPrecision === '' ? undefined : 2;
   }
 
@@ -246,7 +245,6 @@ function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}Props) {
         }
         setPercentageValue(enteredValue);
         if (value !== enteredValue) {
-          // @ts-ignore
           handleEvent(actions, 'change', propName, enteredValue);
           hasValueChange.current = true;
         }
@@ -254,7 +252,6 @@ function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}Props) {
       onBlur={() => {
         const parsedValue = percentageValue !== '' ? Number(percentageValue) : '';
         if (!value || hasValueChange.current) {
-          // @ts-ignore
           handleEvent(actions, 'blur', propName, parsedValue);
           if (hasSuggestions) {
             pConn.ignoreSuggestion("");

package/src/tasks/create/templates/Constellation/Field/Decimal-Percentage/mock.ts.mustache

@@ -1,5 +1,3 @@
-
-// @ts-nocheck
 export const configProps = {
   value: '',
   label: 'Percentage Sample',
@@ -14,7 +12,8 @@ export const configProps = {
   required: false,
   disabled: false,
   status: '',
-  validatemessage: ''
+  validatemessage: '',
+  placeholder: ''
 };
 
 export const stateProps = {

package/src/tasks/create/templates/Constellation/Field/Icon-Button-URL/demo.stories.tsx.mustache

@@ -1,10 +1,9 @@
 
 /* eslint-disable react/jsx-no-useless-fragment */
-// @ts-nocheck
 import type { Meta, StoryObj } from '@storybook/react';
 
 import {{COMPONENT_CLASS_NAME}} from './index';
-import { stateProps, configProps } from './mock';
+import { configProps } from './mock';
 
 const meta: Meta<typeof {{COMPONENT_CLASS_NAME}}> = {
   title: '{{COMPONENT_CLASS_NAME}}',
@@ -51,19 +50,19 @@ window.PCore.getDataPageUtils = () => {
   };
 };
 
-export const Base{{COMPONENT_CLASS_NAME}}: Story = args => {
+export const Base{{COMPONENT_CLASS_NAME}}: Story = (args: any) => {
 
   const props = {
     countryCode: configProps.countryCode,
     getPConnect: () => {
       return {
-        getValue: value => {
+        getValue: (value: any) => {
           return value;
         },
         getContextName: () => {
           return 'app/primary_1';
         },
-        getLocalizedValue: value => {
+        getLocalizedValue: (value: any) => {
           return value;
         },
         getActionsApi: () => {

package/src/tasks/create/templates/Constellation/Field/Icon-Button-URL/index.tsx.mustache

@@ -119,9 +119,7 @@ function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}Props) {
     // only retrieve table data if table is shown
     if (showTable) {
       PCore.getDataPageUtils()
-        // @ts-ignore
         .getDataAsync(dataViewName, context, params, null, null)
-        // @ts-ignore
         .then((response: any) => {
           setIsLoading(false);
           // table requires an index or will get setExtraStackFrame error

package/src/tasks/create/templates/Constellation/Field/Icon-Button-URL/mock.ts.mustache

@@ -1,5 +1,4 @@
 
-// @ts-nocheck
 export const configProps = {
   countryCode: 'USA'
 };

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

@@ -1,5 +1,4 @@
 /* eslint-disable react/jsx-no-useless-fragment */
-// @ts-nocheck
 import type { Meta, StoryObj } from '@storybook/react';
 
 import { stateProps, configProps, fieldMetadata } from './mock';
@@ -15,7 +14,7 @@ const meta: Meta<typeof {{COMPONENT_CLASS_NAME}}> = {
 export default meta;
 type Story = StoryObj<typeof {{COMPONENT_CLASS_NAME}}>;
 
-export const Base{{COMPONENT_CLASS_NAME}}: Story = args => {
+export const Base{{COMPONENT_CLASS_NAME}}: Story = (args: any) => {
 
   const props = {
     value: configProps.value,

package/src/tasks/create/templates/Constellation/Field/Integer/event-utils.ts.mustache

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

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

@@ -111,21 +111,18 @@ function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}Props) {
 
   useEffect(() => {
     if (displayAs === 'slider' && value === '') {
-      // @ts-ignore
       handleEvent(actions, 'change', propName, sliderDefaultValue);
     }
   }, [actions, displayAs, propName, sliderDefaultValue, value]);
 
   const { decimalPrecision, currencyDecimalPrecision = 'auto', currencyISOCode = 'USD' } = props;
-  let noOfDecimals = parseInt(decimalPrecision, 10);
-  // @ts-ignore
+  let noOfDecimals : number | undefined = parseInt(decimalPrecision, 10);
   if (Number.isNaN(noOfDecimals)) noOfDecimals = undefined;
   let noOfFractionDigits = currencyDecimalPrecision === 'auto' ? undefined : parseInt(currencyDecimalPrecision, 10);
   let unit;
   let unitPlacement;
 
-  // @ts-ignore
-  if (['LABELS_LEFT', 'STACKED_LARGE_VAL', 'DISPLAY_ONLY'].includes(displayMode)) {
+  if (['LABELS_LEFT', 'STACKED_LARGE_VAL', 'DISPLAY_ONLY'].includes(displayMode as string)) {
     switch (formatter) {
       case 'Decimal': {
         break;
@@ -232,13 +229,11 @@ function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}Props) {
     setIntegerValue(enteredValue);
     // const parsedValue = integerValue !== '' ? Number(integerValue) : '';
     if (value !== (enteredValue !== '' ? Number(enteredValue) : '')) {
-      // @ts-ignore
       handleEvent(actions, 'change', propName, enteredValue !== '' ? Number(enteredValue) : '');
       hasValueChange.current = true;
     }
     // In case of stepper variation there is no blur event as component is never focussed unless forced. Need to update redux on change.
     if (displayAs === 'stepper') {
-      // @ts-ignore
       handleEvent(actions, 'changeNblur', propName, enteredValue !== '' ? Number(enteredValue) : '');
     }
   }
@@ -270,7 +265,6 @@ function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}Props) {
       ticks={showTicks && { [min]: `${min}`, [max]: `${max}` }}
       onChange={(selectedValue) => {
         onChangeHandler(selectedValue.toString());
-        // @ts-ignore
         handleEvent(actions, 'changeNblur', propName, selectedValue);
       }}
     />
@@ -297,7 +291,6 @@ function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}Props) {
       }}
       onBlur={() => {
         if (!readOnly && (hasValueChange.current || !value)) {
-          // @ts-ignore
           handleEvent(actions, 'blur', propName, integerValue !== '' ? Number(integerValue) : '');
           if (hasSuggestions) {
             pConn.ignoreSuggestion('');

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

@@ -1,4 +1,3 @@
-// @ts-nocheck
 export const configProps = {
   value: '',
   label: 'Integer Sample',
@@ -12,7 +11,9 @@ export const configProps = {
   required: false,
   disabled: false,
   status: '',
-  validatemessage: ''
+  validatemessage: '',
+  placeholder: '',
+  variant: ''
 };
 
 export const stateProps = {

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

@@ -1,6 +1,4 @@
-
 /* eslint-disable react/jsx-no-useless-fragment */
-// @ts-nocheck
 import { useState } from 'react';
 import type { Meta, StoryObj } from '@storybook/react';
 
@@ -17,7 +15,7 @@ const meta: Meta<typeof {{COMPONENT_CLASS_NAME}}> = {
 export default meta;
 type Story = StoryObj<typeof {{COMPONENT_CLASS_NAME}}>;
 
-export const Base{{COMPONENT_CLASS_NAME}}: Story = args => {
+export const Base{{COMPONENT_CLASS_NAME}}: Story = (args: any) => {
 
   const [value, setValue] = useState(configProps.value);
 
@@ -33,10 +31,10 @@ export const Base{{COMPONENT_CLASS_NAME}}: Story = args => {
         getStateProps: () => {
           return stateProps;
         },
-        getLocalizedValue: val => {
+        getLocalizedValue: (val: any) => {
           return val;
         },
-        getLocaleRuleNameFromKeys: (localeClass, localeContext, localeName) => {
+        getLocaleRuleNameFromKeys: (localeClass: string, localeContext: string, localeName: string) => {
           return `${localeClass}!${localeContext}!${localeName}`;
         },
         getCaseInfo: () => {
@@ -51,7 +49,7 @@ export const Base{{COMPONENT_CLASS_NAME}}: Story = args => {
         },
         getActionsApi: () => {
           return {
-            updateFieldValue: (propName, theValue) => {
+            updateFieldValue: (propName: string, theValue: any) => {
               setValue(theValue);
             },
             triggerFieldChange: () => {/* nothing */}

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

@@ -1,6 +1,5 @@
 /* eslint-disable react-hooks/exhaustive-deps */
-// @ts-nocheck
-import { useState, useEffect, useRef } from 'react';
+import { useState, useEffect, useRef, type Key } from 'react';
 import { Select, Option, FieldValueList, Text, withConfiguration } from '@pega/cosmos-react-core';
 
 import type { PConnFieldProps } from './PConnProps';
@@ -27,7 +26,7 @@ interface {{COMPONENT_CLASS_NAME}}Props extends PConnFieldProps {
   alwaysShowISOCode: boolean;
   isoCodeSelection: string;
   additionalProps: any;
-  datasource:Array<any>;
+  datasource:any;
   listType: string;
   fieldMetadata: any;
   onRecordChange: Function;
@@ -117,7 +116,7 @@ function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}Props) {
     label,
     hideLabel = false,
     placeholder,
-    datasource = [],
+    datasource = {},
     listType,
     validatemessage,
     testId,
@@ -168,11 +167,9 @@ function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}Props) {
   const configProps = pConnect.getConfigProps();
   const items: Array<any> = [];
   const isDatapage = listType === 'datapage';
-  // @ts-ignore
   let listSourceItems = isDatapage ? configProps.listOutput : datasource;
 
   if (isDatapage && typeof datasource === 'object' && !Array.isArray(listSourceItems)) {
-    // @ts-ignore
     listSourceItems = datasource.source ? datasource.source : [];
   }
 
@@ -192,8 +189,8 @@ function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}Props) {
   // Loop through all of our list source items that make up the values of the dropdown
 
   let selectedLabel = '';
-  // @ts-ignore
-  (listSourceItems || []).forEach((item) => {
+  (listSourceItems || []).forEach(
+    (item: { key: Key | null | undefined; text: string; value: string }) => {
     selectedLabel =
       value !== undefined &&
       value !== null &&
@@ -203,18 +200,17 @@ function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}Props) {
         ? item.text || item.value
         : selectedLabel;
     items.push(
+      // @ts-ignore
       <Option key={item.key} value={item.key}>
         {isDatapage
           ? pConnect.getLocalizedValue(
               item.text,
               localePath,
-              // @ts-ignore
               pConnect.getLocaleRuleNameFromKeys(localeClass, localeContext, localeName)
             )
           : pConnect.getLocalizedValue(
               item.value,
               localePath,
-              // @ts-ignore
               pConnect.getLocaleRuleNameFromKeys(localeClass, localeContext, localeName)
             )}
       </Option>
@@ -317,7 +313,6 @@ function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}Props) {
       required={required}
       readOnly={readOnly}
       onChange={(event) => {
-        // @ts-ignore
         handleEvent(actions, 'changeNblur', propName, event.target.value);
         if (hasSuggestions) {
           pConnect.ignoreSuggestion('');
@@ -327,9 +322,7 @@ function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}Props) {
           onRecordChange(event);
         }
       }}
-      // @ts-ignore
-      onBlur={(event) => {
-        // @ts-ignore
+      onBlur={(event: any) => {
         pConnect.getValidationApi().validate(event.target.value);
       }}
       onResolveSuggestion={onResolveSuggestionHandler}

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

@@ -1,6 +1,4 @@
-
 /* eslint-disable react/jsx-no-useless-fragment */
-// @ts-nocheck
 import { useState } from 'react';
 import type { Meta, StoryObj } from '@storybook/react';
 
@@ -17,7 +15,7 @@ const meta: Meta<typeof {{COMPONENT_CLASS_NAME}}> = {
 export default meta;
 type Story = StoryObj<typeof {{COMPONENT_CLASS_NAME}}>;
 
-export const Base{{COMPONENT_CLASS_NAME}}: Story = args => {
+export const Base{{COMPONENT_CLASS_NAME}}: Story = (args: any) => {
 
   const [value, setValue] = useState(configProps.value);
   const datasourceMetadata = fieldMetadata;
@@ -40,10 +38,10 @@ export const Base{{COMPONENT_CLASS_NAME}}: Story = args => {
         getContextName: () => {
           return 'app/primary_1';
         },
-        getLocalizedValue: val => {
+        getLocalizedValue: (val: any) => {
           return val;
         },
-        getLocaleRuleNameFromKeys: (localeClass, localeContext, localeName) => {
+        getLocaleRuleNameFromKeys: (localeClass: string, localeContext: string, localeName: string) => {
           return `${localeClass}!${localeContext}!${localeName}`;
         },
         getCaseInfo: () => {
@@ -58,7 +56,7 @@ export const Base{{COMPONENT_CLASS_NAME}}: Story = args => {
         },
         getActionsApi: () => {
           return {
-            updateFieldValue: (propName, theValue) => {
+            updateFieldValue: (propName: string, theValue: any) => {
               setValue(theValue);
             },
             triggerFieldChange: () => {/* nothing */}