@pega/dx-component-builder-sdk 0.24.7 → 0.25.6

package/README.md

@@ -8,13 +8,13 @@ This project provides you with an environment to extend SDK-R/SDK-A by giving yo
 
 Ensure you have access to the following in your system:
 
-- Pega Infinity Server version 24.1
+- Pega Infinity Server version 25.1 or later
 
 - Git version 2.30 or later
 
-- System node version 18, 20
+- System node version >= 24.4.1
 
-- System npm version 8, 10 (npm 9 not supported)
+- System npm version 11.4.2
 
 - Installed SDK-R or SDK-A, as the below commands live in the package.json of the SDK-R/SDK-A an NOT in this npm module
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pega/dx-component-builder-sdk",
-  "version": "0.24.7",
+  "version": "0.25.6",
   "description": "Utility for building custom UI components",
   "bin": "./bin/index.js",
   "scripts": {
@@ -52,7 +52,7 @@
     "sass-loader": "^13.3.3",
     "terser-webpack-plugin": "5.3.10",
     "ts-loader": "^9.5.1",
-    "typescript": "^4.9.5",
+    "typescript": "~5.2.2",
     "url-loader": "4.1.1",
     "webpack": "^5.89.0"
   },

package/src/cli.js

@@ -19,6 +19,7 @@ import {
   publishComponent,
   publishAllComponents,
   renameComponent,
+  quarantine,
   updateComponent,
   validate,
   upgrade
@@ -37,6 +38,7 @@ const TASKS = {
   PUBLISH: 'publish',
   PUBLISH_ALL: 'publishAll',
   RENAME: 'rename',
+  QUARANTINE: 'quarantine',
   LIST: 'list',
   VALIDATE_SCHEMA: 'validateSchema',
   UPDATE: 'update',
@@ -106,6 +108,10 @@ export default async (args = []) => {
       renameComponent(options);
       break;
     }
+    case TASKS.QUARANTINE: {
+      quarantine(options);
+      break;
+    }
     case TASKS.BUILD: {
       buildComponent(options);
       break;

package/src/constants.js

@@ -59,6 +59,9 @@ export const JEST_ASSETS_SDK_A = 'sdk-a/components';
 export const JEST_ASSETS_SDK_R = 'sdk-r/components';
 export const JEST_CREATE_PATH = 'create/';
 export const JEST_CREATE_ALL_PATH = 'createAll/';
+export const JEST_TESTS_FUNCTIONAL_PATH = 'node_modules/@pega/dx-component-builder-sdk/tests/functional/';
+
+
 
 /* dxcbConfig.componentDefaults LINT setting/value constants */
 export const LINT_SETTING_KEY = 'lintAction'; // LINT_SETTING_KEY is expected to be in sdk-config's dxcbConfig.componentDefaults
@@ -318,10 +321,18 @@ export const COMPONENT_SCHEMA = {
         name: 'Integer',
         value: 'Integer'
       },
+      {
+        name: 'Location',
+        value: 'Location'
+      },
       {
         name: 'Multi Select',
         value: 'Multiselect'
       },
+      { 
+        name: 'Object Reference',
+        value: 'ObjectReference'
+      },
       {
         name: 'Percentage',
         value: 'Percentage'
@@ -346,6 +357,10 @@ export const COMPONENT_SCHEMA = {
         name: 'Semantic Link',
         value: 'SemanticLink'
       },
+      {
+        name: 'Selectable Card',
+        value: 'SelectableCard'
+      },
       {
         name: 'Text Area',
         value: 'TextArea'
@@ -442,6 +457,14 @@ export const COMPONENT_SCHEMA = {
         name: 'Error Boundary',
         value: 'ErrorBoundary'
       },
+      {
+        name: 'Flow Container',
+        value: 'Containers/FlowContainer'
+      },
+      {
+        name: 'Modal View Container',
+        value: 'Containers/ModalViewContainer'
+      },
       {
         name: 'Multi Step',
         value: 'MultiStep'
@@ -450,6 +473,22 @@ export const COMPONENT_SCHEMA = {
         name: 'Nav Bar',
         value: 'NavBar'
       },
+      {
+        name: 'Reference',
+        value: 'Reference'
+      },
+      {
+        name: 'Region',
+        value: 'Region'
+      },
+      {
+        name: 'Root Container',
+        value: 'RootContainer'
+      },
+      {
+        name: 'Simple View',
+        value: 'Containers/SimpleView'
+      },
       {
         name: 'Stages',
         value: 'Stages'
@@ -465,13 +504,21 @@ export const COMPONENT_SCHEMA = {
       {
         name: 'View',
         value: 'View'
-      }
+      },
+      {
+        name: 'View Container',
+        value: 'Containers/ViewContainer'
+      },
     ],
     template: [
       {
         name: 'App Shell',
         value: 'AppShell'
       },
+      {
+        name: 'Advanced Search',
+        value: 'AdvancedSearch'
+      },
       {
         name: 'Banner Page',
         value: 'BannerPage'
@@ -517,7 +564,11 @@ export const COMPONENT_SCHEMA = {
         value: 'Details/DetailsThreeColumn'
       },
       {
-        name: 'Field Group',
+        name: 'Dynamic Tabs',
+        value: 'Details/DynamicTabs'
+      },
+      {
+        name: 'Field Group Template',
         value: 'FieldGroupTemplate'
       },
       {
@@ -572,6 +623,10 @@ export const COMPONENT_SCHEMA = {
         name: 'Promoted Filters',
         value: 'PromotedFilters'
       },
+      {
+        name: 'Search Groups',
+        value: 'AdvancedSearch/SearchGroups'
+      },
       {
         name: 'Simple Table',
         value: 'SimpleTable/SimpleTable'
@@ -626,6 +681,10 @@ export const COMPONENT_SCHEMA = {
       }
     ],
     widget: [
+      {
+        name: 'Action Buttons For File Util',
+        value: 'FileUtility/ActionButtonsForFileUtil'
+      },
       {
         name: 'App Announcement',
         value: 'AppAnnouncement'
@@ -642,10 +701,7 @@ export const COMPONENT_SCHEMA = {
         name: 'File Utility',
         value: 'FileUtility/FileUtility'
       },
-      {
-        name: 'Action Buttons For File Utility',
-        value: 'FileUtility/ActionButtonsForFileUtil'
-      },
+      
       {
         name: 'Followers',
         value: 'Followers'
@@ -714,6 +770,18 @@ export const COMPONENT_SCHEMA = {
         name: 'Integer',
         value: 'Integer'
       },
+      {
+        name: 'Location',
+        value: 'Location'
+      },
+      {
+        name: 'Multi Select',
+        value: 'Multiselect'
+      },
+      {
+        name: 'Object Reference',
+        value: 'ObjectReference'
+      },
       {
         name: 'Percentage',
         value: 'Percentage'
@@ -738,6 +806,10 @@ export const COMPONENT_SCHEMA = {
         name: 'Semantic Link',
         value: 'SemanticLink'
       },
+      {
+        name: 'Selectable Card',
+        value: 'SelectableCard'
+      },
       {
         name: 'Text',
         value: 'Text'
@@ -904,6 +976,10 @@ export const COMPONENT_SCHEMA = {
       },
     ],
     template: [
+      {
+        name: 'Advanced Search',
+        value: 'AdvancedSearch'
+      },
       {
         name: 'App Shell',
         value: 'AppShell'
@@ -1024,6 +1100,10 @@ export const COMPONENT_SCHEMA = {
         name: 'Repeating Structures',
         value: 'RepeatingStructures'
       },
+      {
+        name: 'Search Groups',
+        value: 'AdvancedSearch/SearchGroups'
+      },
       {
         name: 'Simple Table',
         value: 'SimpleTable'

package/src/tasks/authenticate/index.js

@@ -208,6 +208,6 @@ export default async options => {
     }
   }
 
-  process.exit(1);
+  process.exit();
 
 };

package/src/tasks/create/index.js

@@ -72,7 +72,7 @@ export const compileMustacheTemplates = async (
     description,
     organization,
     allowedApplications
-  }
+  }, componentType
 ) => {
   const files = fs.readdirSync(componentDirectory);
   const componentClassName = convertIntoPascalCase(componentKey);
@@ -158,8 +158,10 @@ export const compileMustacheTemplates = async (
         break;
       case "SDK-Angular":
         let newFilePath = filePath.replace('.mustache', '');
-        const typeAng = convertIntoKebabCase(convertIntoPascalCase(fileSubType)).concat(".component");
-        newFilePath = newFilePath.replace(typeAng, componentKeyKebab.concat(".component"));
+        if (componentType === "component") {
+          const typeAng = convertIntoKebabCase(convertIntoPascalCase(fileSubType)).concat(".component");
+          newFilePath = newFilePath.replace(typeAng, componentKeyKebab.concat(".component"));
+        }
 
         fs.renameSync(filePath, newFilePath);
         break;
@@ -285,7 +287,7 @@ export const validateCompile = async (
       description,
       organization,
       allowedApplications
-    });
+    }, "component");
   }
 
   // matching constellation
@@ -305,7 +307,7 @@ export const validateCompile = async (
     description,
     organization,
     allowedApplications
-  });
+  }, "associated");
 
   if (!onlyCompanion) {
     console.log(chalk.green(`created ${componentKey} component in ${targetDirectory}`));

package/src/tasks/create/templates/Constellation/field/Boolean/Boolean.ts.mustache

@@ -26,7 +26,7 @@ function Boolean(value: any, { allowEmpty = true, tick = '', cross = '' } = {})
 }
 
 export default {
-  TrueFalse: (value: any, options: Object) =>
+  TrueFalse: (value: any, options: object) =>
     Boolean(value, {
       ...options,
       tick: 'True',

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

@@ -87,7 +87,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}
@@ -98,15 +97,17 @@ function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}Props) {
 
   let displayComponent;
   if (displayMode) {
-    // @ts-ignore
     displayComponent = (
-      // @ts-ignore
       <BooleanDisplay value={value} trueLabel={trueLabel} falseLabel={falseLabel} />
     );
   }
 
   if (displayMode === 'DISPLAY_ONLY') {
-    return ( <Styled{{COMPONENT_CLASS_NAME}}Wrapper> {displayComponent} </Styled{{COMPONENT_CLASS_NAME}}Wrapper>);
+    return (
+      <Styled{{COMPONENT_CLASS_NAME}}Wrapper>
+       {displayComponent}
+      </Styled{{COMPONENT_CLASS_NAME}}Wrapper>
+    );
   }
 
   if (displayMode === "LABELS_LEFT") {

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/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 } from './mock';
 import {{COMPONENT_CLASS_NAME}} from './index';
@@ -14,21 +13,6 @@ const meta: Meta<typeof {{COMPONENT_CLASS_NAME}}> = {
 export default meta;
 type Story = StoryObj<typeof {{COMPONENT_CLASS_NAME}}>;
 
-if (!window.PCore) {
-  window.PCore = {};
-}
-
-window.PCore.getEnvironmentInfo = () => {
-  return {
-    getTimeZone: () => {
-      return '';
-    },
-    getLocale: () => {
-      return 'en-GB';
-    }
-  };
-};
-
 export const Base{{COMPONENT_CLASS_NAME}}: Story = args => {
   const props = {
     value: configProps.value,

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

@@ -104,8 +104,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(
@@ -161,7 +160,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;
@@ -225,8 +224,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';
@@ -13,22 +12,6 @@ const meta: Meta<typeof {{COMPONENT_CLASS_NAME}}> = {
 export default meta;
 type Story = StoryObj<typeof {{COMPONENT_CLASS_NAME}}>;
 
-
-if (!window.PCore) {
-  window.PCore = {};
-}
-
-window.PCore.getEnvironmentInfo = () => {
-  return {
-    getTimeZone: () => {
-      return '';
-    },
-    getLocale: () => {
-      return 'en-GB';
-    }
-  };
-};
-
 export const Base{{COMPONENT_CLASS_NAME}}: Story = args => {
   const props = {
     value: configProps.value,

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';

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

@@ -88,9 +88,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);
@@ -226,15 +225,13 @@ 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) : '');
+          handleEvent(actions, 'change', propName, enteredValue !== '' ? Number(enteredValue).toString() : '');
           hasValueChange.current = true;
         }
       }}
       onBlur={() => {
         if (!value || hasValueChange.current) {
-          // @ts-ignore
-          handleEvent(actions, 'blur', propName, decimalValue !== '' ? Number(decimalValue) : '');
+          handleEvent(actions, 'blur', propName, decimalValue !== '' ? Number(decimalValue).toString() : '');
           if (hasSuggestions) {
             pConn.ignoreSuggestion("");
           }

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';

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,
@@ -265,9 +264,8 @@ function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}Props) {
         });
       }}
       onBlur={(enteredValue) => {
-        const parsedValue = enteredValue !== '' ? Number(enteredValue) : enteredValue;
+        const parsedValue = enteredValue !== '' ? Number(enteredValue).toString() : 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-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';

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

@@ -94,9 +94,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;
   }
 
@@ -247,15 +246,13 @@ function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}Props) {
         }
         setPercentageValue(enteredValue);
         if (value !== enteredValue) {
-          // @ts-ignore
           handleEvent(actions, 'change', propName, enteredValue);
           hasValueChange.current = true;
         }
       }}
       onBlur={() => {
-        const parsedValue = percentageValue !== '' ? Number(percentageValue) : '';
+        const parsedValue = percentageValue !== '' ? Number(percentageValue).toString() : '';
         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

@@ -4,6 +4,7 @@ export const configProps = {
   value: '',
   label: 'Percentage Sample',
   showGroupSeparators: true,
+  placeholder: '',
   helperText: 'Percentage Helper Text',
   testId: 'percentage-12345678',
   hasSuggestions: false,

package/src/tasks/create/templates/Constellation/field/Icon-Button-URL/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 {{COMPONENT_CLASS_NAME}} from './index';
@@ -15,10 +14,6 @@ const meta: Meta<typeof {{COMPONENT_CLASS_NAME}}> = {
 export default meta;
 type Story = StoryObj<typeof {{COMPONENT_CLASS_NAME}}>;
 
-if (!window.PCore) {
-  window.PCore = {};
-}
-
 const statelistData = {
   data: [
     {
@@ -36,23 +31,17 @@ const statelistData = {
   ]
 };
 
-export const Base{{COMPONENT_CLASS_NAME}}: Story = args => {
-
-  window.PCore.getDataPageUtils = () => {
-    return {
-      getData: () => {
-        return new Promise(resolve => {
-          resolve(statelistData);
-        });
-      },
-      getDataAsync: () => {
-        return new Promise(resolve => {
-          resolve(statelistData);
-        });
-      }
-    };
+window.PCore.getDataPageUtils = (): any => {
+  return {
+    getDataAsync: () => {
+      return new Promise(resolve => {
+        resolve(statelistData);
+      });
+    }
   };
+};
 
+export const Base{{COMPONENT_CLASS_NAME}}: Story = args => {
   const props = {
     countryCode: configProps.countryCode,
     getPConnect: () => {

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);