@pega/custom-dx-components 0.242.16 → 0.242.18

package/package.json

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

package/src/constants.js

@@ -43,7 +43,8 @@ export const CATEGORY_CONSTELLATION = 'constellation';
 
 export const BOOTSTRAP_CONFIG = 'PRRestService/api/application/v2/data_views/D_pxBootstrapConfig';
 
-export const JEST_ASSETS_PATH = 'node_modules/@pega/custom-dx-components/tests/assets/components/';
+export const JEST_ASSETS_ORIGINAL_PATH = 'node_modules/@pega/custom-dx-components/tests/assets/original/components/';
+export const JEST_ASSETS_LIBRARY_PATH = 'node_modules/@pega/custom-dx-components/tests/assets/library/components/';
 export const JEST_CREATE_PATH = 'create/';
 export const JEST_CREATE_ALL_CONSTELLATION_PATH = 'createAll/Constellation/';
 export const JEST_CREATE_ALL_LAUNCHPAD_PATH = 'createAll/Launchpad';

package/src/tasks/build-jest-assets/index.js

@@ -5,11 +5,11 @@ import inquirer from 'inquirer';
 import { Listr } from 'listr2';
 import chalk from 'chalk';
 
-import { showVersion, getServerType, setServerType, getSubComponents, deleteLocalComponent, checkPathAccess, getComponents } from '../../util.js';
+import { showVersion, getServerType, setServerType, getSubComponents, deleteLocalComponent, checkPathAccess, getComponents, getLibraryBased, setLibraryBased } from '../../util.js';
 import createAll from '../create-all/index.js';
 import create from '../create/index.js';
 
-import { JEST_ASSETS_PATH, JEST_CREATE_PATH, JEST_CREATE_ALL_CONSTELLATION_PATH, JEST_CREATE_ALL_LAUNCHPAD_PATH, TASKS_CONFIG_JSON_FILENAME, COMPONENTS_DIRECTORY_PATH } from '../../constants.js';
+import { JEST_ASSETS_ORIGINAL_PATH, JEST_ASSETS_LIBRARY_PATH, JEST_CREATE_PATH, JEST_CREATE_ALL_CONSTELLATION_PATH, JEST_CREATE_ALL_LAUNCHPAD_PATH, TASKS_CONFIG_JSON_FILENAME, COMPONENTS_DIRECTORY_PATH } from '../../constants.js';
 
 
 const getBuildAssetsQuestions = async ()  => {
@@ -92,7 +92,7 @@ const deleteAssets = async() => {
   }
 }
 
-const createJestAssets = async(isLaunchPad = false) => {
+const createJestOriginalAssets = async(isLaunchPad = false) => {
 
   // initially delete local assets
   await deleteAssets();
@@ -108,7 +108,7 @@ const createJestAssets = async(isLaunchPad = false) => {
 
   // goto Constellation
   // get current test assets and delete them
-  let createAllPath = path.join(path.resolve(), JEST_ASSETS_PATH, jestCreateAllPath);
+  let createAllPath = path.join(path.resolve(), JEST_ASSETS_ORIGINAL_PATH, jestCreateAllPath);
   const fileList = await getSubComponents(createAllPath, '');
 
   for (const index in fileList) {
@@ -127,7 +127,56 @@ const createJestAssets = async(isLaunchPad = false) => {
 
   await create(myOptions);
 
-  let createPath = path.join(path.resolve(), JEST_ASSETS_PATH, JEST_CREATE_PATH);
+  let createPath = path.join(path.resolve(), JEST_ASSETS_ORIGINAL_PATH, JEST_CREATE_PATH);
+  const myFileList = await getSubComponents(createPath, '');
+
+  for (const index in myFileList) {
+    const componentToDelete = myFileList[index];
+    // console.log(chalk.bold.green("Deleting: " + componentToDelete));
+    // eslint-disable-next-line no-await-in-loop
+    await deleteTestComponent(createPath, componentToDelete);
+  }
+
+  await copyAssets(createPath);
+  await deleteAssets();
+}
+
+const createJestLibraryAssets = async(isLaunchPad = false) => {
+
+  // initially delete local assets
+  await deleteAssets();
+
+  // const framework = await getFramework();
+  let args  = [ '','', '', 'My', '0.0.1', 'DXIL', '', 'Pega'];
+  let myOptions = {};
+  myOptions["params"] = args;
+
+  await createAll(myOptions);
+
+  const jestCreateAllPath = isLaunchPad ? JEST_CREATE_ALL_LAUNCHPAD_PATH : JEST_CREATE_ALL_CONSTELLATION_PATH;
+
+  // goto Constellation
+  // get current test assets and delete them
+  let createAllPath = path.join(path.resolve(), JEST_ASSETS_LIBRARY_PATH, jestCreateAllPath);
+  const fileList = await getSubComponents(createAllPath, '');
+
+  for (const index in fileList) {
+    const componentToDelete = fileList[index];
+    // console.log(chalk.bold.green("Deleting: " + componentToDelete));
+    // eslint-disable-next-line no-await-in-loop
+    await deleteTestComponent(createAllPath, componentToDelete);
+  }
+
+  await copyAssets(createAllPath);
+  await deleteAssets();
+
+  args  = [ '','', '', 'Field', 'Text', 'MyTestText', 'My Test Text', '0.0.1','DXIL', '', 'My Test Text Description', 'Pega'];
+  myOptions = {};
+  myOptions["params"] = args;
+
+  await create(myOptions);
+
+  let createPath = path.join(path.resolve(), JEST_ASSETS_LIBRARY_PATH, JEST_CREATE_PATH);
   const myFileList = await getSubComponents(createPath, '');
 
   for (const index in myFileList) {
@@ -152,18 +201,32 @@ export default async options => {
   if (buildAssets) {
     // get current server type
     const savedServerType = await getServerType();
+    const savedLibraryBased = await getLibraryBased();
+
+    await setLibraryBased(false);
 
     // Constellation
     await setServerType("infinity");
-    await createJestAssets(false);
+    await createJestOriginalAssets(false);
 
     //Launchpad
     await setServerType("launchpad");
-    await createJestAssets(true);
+    await createJestOriginalAssets(true);
+
+    // Constellation Library
+    await setLibraryBased(true);
+    await setServerType("infinity");
+    await createJestLibraryAssets(false);
+
+    //Launchpad
+    // await setServerType("launchpad");
+    // await createJestLibraryAssets(true);
 
 
     // restore serverType
     await setServerType(savedServerType);
+    await setLibraryBased(savedLibraryBased);
+
   }
 
 

package/src/tasks/build-lib/index.js

@@ -104,11 +104,10 @@ export default async (options) => {
     dBuild === 'y' ||
     dBuild === true ||
     dBuild === 'true') ? true : false;
+
   }
   else {
 
-
-
     console.log(`\nLibrary ${chalk.bold.green(currentOrgLib)} `)
     const questions = await getBuildComponentQuestions(compDef.version);
     const answers = await inquirer.prompt(questions);

package/src/tasks/create/index.js

@@ -32,7 +32,7 @@ const copyComponentTemplate = async options => {
   });
 };
 
-const isLibraryBased = await getLibraryBased();
+let isLibraryBased = await getLibraryBased();
 
 const compileMustacheTemplates = async (
   componentDirectory,
@@ -186,6 +186,7 @@ const validateCompile = async (
     framework = "Constellation";
   }
 
+  isLibraryBased = await getLibraryBased();
 
   // check of library or version has changed from default, if so, update componentDefaults
   const componentDefaults = await getComponentDefaults();

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 */}