@pega/dx-component-builder-sdk 24.2.10 → 24.2.12

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 24.2
 
 - Git version 2.30 or later
 
-- System node version 18, 20
+- System node version 20
 
-- System npm version 8, 10 (npm 9 not supported)
+- System npm version 10 
 
 - 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": "24.2.10",
+  "version": "24.2.12",
   "description": "Utility for building custom UI components",
   "bin": "./bin/index.js",
   "scripts": {

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
@@ -442,6 +445,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 +461,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,7 +492,11 @@ export const COMPONENT_SCHEMA = {
       {
         name: 'View',
         value: 'View'
-      }
+      },
+      {
+        name: 'View Container',
+        value: 'Containers/ViewContainer'
+      },
     ],
     template: [
       {
@@ -517,7 +548,11 @@ export const COMPONENT_SCHEMA = {
         value: 'Details/DetailsThreeColumn'
       },
       {
-        name: 'Field Group',
+        name: 'Dynamic Tabs',
+        value: 'Details/DynamicTabs'
+      },
+      {
+        name: 'Field Group Template',
         value: 'FieldGroupTemplate'
       },
       {
@@ -626,6 +661,10 @@ export const COMPONENT_SCHEMA = {
       }
     ],
     widget: [
+      {
+        name: 'Action Buttons For File Util',
+        value: 'FileUtility/ActionButtonsForFileUtil'
+      },
       {
         name: 'App Announcement',
         value: 'AppAnnouncement'
@@ -642,10 +681,7 @@ export const COMPONENT_SCHEMA = {
         name: 'File Utility',
         value: 'FileUtility/FileUtility'
       },
-      {
-        name: 'Action Buttons For File Utility',
-        value: 'FileUtility/ActionButtonsForFileUtil'
-      },
+      
       {
         name: 'Followers',
         value: 'Followers'

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

package/src/tasks/create/templates/Constellation/field/Picklist-Autocomplete/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';