@pega/custom-dx-components 26.1.11 → 26.1.12-alpha.0.2

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

@@ -26,6 +26,8 @@
     "deleteAll": "custom-dx-components deleteAll",
     "importComponent": "custom-dx-components importComponent",
     "help": "custom-dx-components showHelp",
+    "enableAi": "custom-dx-components enableAi",
+    "disableAi": "custom-dx-components disableAi",
     "publish": "custom-dx-components publish",
     "_***Component_mode_only***": "Component only commands",
     "publishAll": "custom-dx-components publishAll",
@@ -53,27 +55,8 @@
     "exportLibVersion": "custom-dx-components exportArchive",
     "validate": "custom-dx-components buildComponent",
     "validateAll": "custom-dx-components buildAllComponents",
-    "_***Internal_only***": "Internal usage only",
-    "_internal-test-coverage": "node --input-type=module  --experimental-vm-modules node_modules/jest/bin/jest.js --runInBand node_modules/@pega/custom-dx-component --ci --testResultsProcessor='jest-junit' --coverage",
-    "_internal-test": "echo 'Running functional and unit tests will DELETE existing local components, proceed (y/n)?' && read proceed && if test \"$proceed\" = \"y\"; then npm run _internal-test-full; fi ",
-    "_internal-test-full": "npm run _internal-test-functional && npm run _internal-test-unit",
-    "_internal-test-functional": "echo 'Make sure you authenticate!!' && npm run test:functional:local --prefix node_modules/@pega/custom-dx-components",
-    "_internal-test-unit": "npm run test:unit:local --prefix node_modules/@pega/custom-dx-components",
-    "_internal-build-jest-assets": "custom-dx-components buildJestAssets",
-    "_internal-buildLibrary": "custom-dx-components buildLibrary",
-    "_internal-publishLibrary": "custom-dx-components publishLibrary",
-    "_internal-restoreConfig": "custom-dx-components restoreConfig",
-    "_internal-test-quarantine": "custom-dx-components quarantine",
-    "_lint:styles": "stylelint \"./**/*.@(js|jsx|ts|tsx)\"",
     "_lint:format": "prettier -c .",
-    "_lint:spelling": "cspell --no-progress **/*",
     "_lint:types": "tsc --noEmit"
-  },
-    "scriptsComments": {
-    "build": "tsc -b tsconfig.build.json",
-    "fix": "run-p -cl fix:*",
-    "fix:es": "eslint --fix .",
-    "fix:format": "prettier -w ."
   },
   "repository": {
     "type": "git",
@@ -87,78 +70,40 @@
     "@pega/cosmos-react-core": "~9.5.5-8",
     "@pega/cosmos-react-work": "~9.5.5-8",
     "@pega/cosmos-react-wss": "~9.5.5-8",
-    "@pega/eslint-config": "^0.16.3",
-    "@pega/tsconfig": "^0.16.3",
-    "babel-loader": "^10.0.0",
     "dayjs": "^1.11.13",
-    "fast-deep-equal": "3.1.3",
     "lodash": "^4.17.21",
-    "lodash.get": "^4.4.2",
-    "npm": "^10.8.1",
     "react": "^18.3.1",
-    "react-autosuggest": "^10.1.0",
     "react-dom": "^18.3.1",
-    "react-is": "^18.3.1",
-    "react-redux": "^7.2.9",
-    "serve": "^14.2.4",
-    "styled-components": "^5.3.11",
-    "ts-loader": "^9.5.2"
+    "styled-components": "~6.3.12"
+  },
+  "overrides": {
+    "glob": "^13.0.0",
+    "postcss": "^8.5.23"
   },
   "devDependencies": {
-    "@babel/preset-env": "^7.27.2",
-    "@babel/preset-react": "^7.27.1",
-    "@babel/preset-typescript": "^7.27.1",
-    "@pega/configs": "^0.16.3",
-    "@pega/custom-dx-components": "~26.1.11",
+    "@eslint-react/eslint-plugin": "^5.22.1",
+    "@eslint/js": "^10.0.1",
+    "@pega/custom-dx-components": "~26.1.12-alpha.0.2",
     "@pega/pcore-pconnect-typedefs": "^5.1.0",
-    "@storybook/addon-docs": "^9.1.7",
-    "@storybook/addon-essentials": "^9.0.0-alpha.12",
-    "@storybook/addon-links": "^9.1.7",
-    "@storybook/addon-storysource": "^9.0.0-alpha.14",
-    "@storybook/manager-api": "^9.0.0-alpha.1",
-    "@storybook/react": "^9.1.7",
-    "@storybook/react-vite": "^9.1.7",
-    "@storybook/react-webpack5": "^9.1.7",
-    "@storybook/test": "^9.0.0-alpha.2",
-    "@storybook/test-runner": "^0.22.0",
-    "@storybook/theming": "^9.0.0-alpha.1",
+    "@storybook/addon-links": "^10.6.0",
+    "@storybook/react": "^10.6.0",
+    "@storybook/react-vite": "^10.6.0",
     "@testing-library/dom": "^10.4.0",
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.3.0",
-    "@types/emoji-mart": "^3.0.14",
     "@types/jest": "^29.5.14",
-    "@types/lodash.get": "^4.4.9",
+    "@types/lodash": "^4.17.25",
     "@types/react": "^18.3.21",
-    "@types/react-color": "^3.0.13",
     "@types/react-dom": "^18.3.7",
-    "@types/styled-components": "^5.1.34",
-    "@typescript-eslint/eslint-plugin": "^8.44.1",
-    "@typescript-eslint/parser": "^8.44.1",
-    "core-js": "^3.42.0",
-    "eslint": "^9.27.0",
-    "eslint-plugin-import": "^2.31.0",
-    "eslint-plugin-jest": "^28.11.0",
-    "eslint-plugin-jsx-a11y": "^6.10.2",
-    "eslint-plugin-mdx": "^3.4.1",
-    "eslint-plugin-prettier": "^5.4.0",
-    "eslint-plugin-react": "^7.37.5",
-    "eslint-plugin-react-hooks": "^5.2.0",
-    "eslint-plugin-sonarjs": "^0.23.0",
-    "eslint-plugin-storybook": "^0.6.15",
-    "esm": "^3.2.25",
+    "eslint": "^10.11.0",
     "jest": "^29.7.0",
     "jest-canvas-mock": "^2.5.2",
     "jest-environment-jsdom": "^29.7.0",
-    "jest-junit": "^16.0.0",
-    "jwt-decode": "^4.0.0",
-    "node-stream-zip": "^1.15.0",
-    "npm-run-all": "^4.1.5",
-    "prettier": "3.5.3",
-    "storybook": "^9.1.7",
-    "stylelint": "^16.19.1",
+    "prettier": "3.9.9",
+    "storybook": "^10.6.0",
     "ts-jest": "^29.3.2",
-    "typescript": "~5.5.4",
-    "typescript-eslint": "^8.44.1",
+    "typescript": "~5.9.3",
+    "typescript-eslint": "^8.70.1",
     "vite": "^6.3.5"
   }
 }

package/src/tasks/init/template/setupTests.ts

@@ -5,6 +5,12 @@ import 'jest-canvas-mock';
 // Wait time needed
 const TIMEOUT = 300000;
 
+// jsdom has no CSS Custom Highlight API, which @pega/cosmos-react-core references at import time
+const TestHighlight = function TestHighlight() {};
+TestHighlight.prototype.add = () => undefined;
+TestHighlight.prototype.delete = () => undefined;
+Object.assign(globalThis, { Highlight: TestHighlight });
+
 // mocks open
 global.open = jest.fn();
 
@@ -92,8 +98,8 @@ Object.defineProperty(window, 'matchMedia', {
 //   }))
 // });
 
-// jest.setTimeout(TIMEOUT);
+jest.setTimeout(TIMEOUT);
 
-// // speeds up *ByRole queries a bit
-// // https://github.com/testing-library/dom-testing-library/issues/552
-// configure({ defaultHidden: true });
+// speeds up *ByRole queries a bit
+// https://github.com/testing-library/dom-testing-library/issues/552
+configure({ defaultHidden: true });

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

@@ -1,18 +1,26 @@
 {
-  "extends": "@pega/tsconfig/index.json",
   "include": ["./**/*", ".storybook/**/*"],
   "exclude": ["**/*.mjs"],
   "compilerOptions": {
+    "strict": true,
+    "noImplicitOverride": true,
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "declaration": true,
+    "declarationMap": true,
+    "sourceMap": true,
+    "newLine": "lf",
+    "isolatedModules": true,
+    "jsx": "react-jsx",
+    "lib": ["ES2024", "DOM", "DOM.Iterable"],
+    "target": "ES2024",
     "noEmit": true,
     "allowJs": true,
-    "importsNotUsedAsValues": "remove",
     "skipLibCheck": true,
-    "baseUrl": "./",
     "paths": {
-      "@pega/pcore-pconnect-typedefs/*": ["node_modules/@pega/pcore-pconnect-typedefs/*"]
+      "@pega/pcore-pconnect-typedefs/*": ["./node_modules/@pega/pcore-pconnect-typedefs/*"]
     },
     "esModuleInterop": true,
-    "types": ["jest", "node", "@types/jest"],
-    "verbatimModuleSyntax": false
+    "types": ["jest", "node"]
   }
 }

package/src/tasks/internal-test/index.js

@@ -0,0 +1,21 @@
+import chalk from 'chalk';
+import inquirer from 'inquirer';
+
+import { addDebugLog } from '../../util.js';
+import { assertInternalTestsAvailable } from '../../internal-tests.js';
+import internalTestFull from '../internal-test-full/index.js';
+
+export default async () => {
+  addDebugLog('internalTest', '', '+');
+
+  assertInternalTestsAvailable();
+
+  console.log(chalk.yellow('Running functional and unit tests will DELETE existing local components.'));
+  const { proceed } = await inquirer.prompt([{ name: 'proceed', type: 'confirm', message: 'Proceed?', default: false }]);
+
+  if (proceed) {
+    await internalTestFull();
+  }
+
+  addDebugLog('internalTest', 'END', '-');
+};

package/src/tasks/internal-test-full/index.js

@@ -0,0 +1,15 @@
+import { addDebugLog } from '../../util.js';
+import { assertInternalTestsAvailable } from '../../internal-tests.js';
+import internalTestFunctional from '../internal-test-functional/index.js';
+import internalTestUnit from '../internal-test-unit/index.js';
+
+export default async () => {
+  addDebugLog('internalTestFull', '', '+');
+
+  assertInternalTestsAvailable();
+
+  await internalTestFunctional();
+  await internalTestUnit();
+
+  addDebugLog('internalTestFull', 'END', '-');
+};

package/src/tasks/internal-test-functional/index.js

@@ -0,0 +1,15 @@
+import chalk from 'chalk';
+import { execa } from 'execa';
+
+import { addDebugLog } from '../../util.js';
+import { assertInternalTestsAvailable } from '../../internal-tests.js';
+
+export default async () => {
+  addDebugLog('internalTestFunctional', '', '+');
+
+  const cwd = assertInternalTestsAvailable();
+  console.log(chalk.yellow('Make sure you authenticate!!'));
+  await execa('npm', ['run', 'test:functional:local'], { cwd, stdio: 'inherit' });
+
+  addDebugLog('internalTestFunctional', 'END', '-');
+};

package/src/tasks/internal-test-unit/index.js

@@ -0,0 +1,13 @@
+import { execa } from 'execa';
+
+import { addDebugLog } from '../../util.js';
+import { assertInternalTestsAvailable } from '../../internal-tests.js';
+
+export default async () => {
+  addDebugLog('internalTestUnit', '', '+');
+
+  const cwd = assertInternalTestsAvailable();
+  await execa('npm', ['run', 'test:unit:local'], { cwd, stdio: 'inherit' });
+
+  addDebugLog('internalTestUnit', 'END', '-');
+};

package/src/tasks/linter/index.js

@@ -2,7 +2,7 @@ import { ESLint } from 'eslint';
 import chalk from 'chalk';
 // import { addDebugLog } from '../../util.js';
 
-export const lintComponent = async dirToLint => {
+export const lintComponent = async (dirToLint) => {
   // addDebugLog("lintComponent", `dirToLint: ${dirToLint}`);
 
   // console.log("in dx-component-builder-sdk: lintComponent - dirToLint: " + dirToLint);
@@ -21,7 +21,7 @@ export const lintComponent = async dirToLint => {
   // Indicate linting is complete
   console.log(chalk.green(` linting complete...`));
 
-  if (resultText.length > 0 && resultText.indexOf('error') >= 0) {
+  if (results.some((result) => result.errorCount > 0)) {
     throw new Error(`Lint:\n${resultText}`);
   } else {
     console.log(resultText);

package/src/tasks/list/helper.js

@@ -11,7 +11,7 @@ import {
   COMPONENT_SCHEMA,
   TASKS_CONFIG_JSON_FILENAME,
   COMPONENTS_DIRECTORY_PATH,
-  COMPONENTS_PATH
+  COMPONENTS_PATH,
 } from '../../constants.js';
 import {
   constructCompleteUrl,
@@ -23,15 +23,15 @@ import {
   getComponentsConfigs,
   getConfigDefaults,
   checkAccessTokenExpiration,
-  isLaunchpadVanity
+  isLaunchpadVanity,
 } from '../../util.js';
 
 export const SOURCE_OF_COMPONENT_TYPES = {
   SERVER: 'Server',
-  LOCAL: 'Local'
+  LOCAL: 'Local',
 };
 
-export const getListComponentsQuestions = async options => {
+export const getListComponentsQuestions = async (options) => {
   addDebugLog('getListComponentsQuestions', '', '');
   const defaultPegaServerConfig = await getPegaServerConfig();
 
@@ -44,8 +44,8 @@ export const getListComponentsQuestions = async options => {
       default: defaultPegaServerConfig.sourceOfComponents,
       when() {
         return !options.params[3];
-      }
-    }
+      },
+    },
   ];
 };
 
@@ -73,28 +73,28 @@ export const getLaunchPadFilterQuestions = async () => {
       name: 'organization',
       message: 'Enter component organization (required)',
       default: organization,
-      validate: value => {
+      validate: (value) => {
         if (value) {
           return true;
         }
         return 'Please provide value for organization';
-      }
+      },
     },
     {
       name: 'library',
       message: 'Enter library name (required)',
       default: library,
-      validate: value => {
+      validate: (value) => {
         if (value) {
           return true;
         }
         return 'Please provide value for library';
-      }
-    }
+      },
+    },
   ];
 };
 
-export const listLocalComponents = async sourceOfComponents => {
+export const listLocalComponents = async (sourceOfComponents) => {
   addDebugLog('listLocalComponents', `sourceOfComponents: ${sourceOfComponents}`, '');
 
   const isLibraryBased = getLibraryBased();
@@ -113,18 +113,18 @@ export const listLocalComponents = async sourceOfComponents => {
       process.exit();
     }
 
-    let libData = data.map(component => ({
+    let libData = data.map((component) => ({
       Component: component.name,
       Label: component.label,
       Version: component.version,
       Type: component.type,
-      'Sub Type': component.subtype
+      'Sub Type': component.subtype,
     }));
     console.log(chalk.bold.blueBright(`\nList of ${defConfig.library}:${defConfig.buildVersion} components.`));
     console.table(libData, ['Component', 'Label', 'Version', 'Type', 'Sub Type']);
   } else {
     let localComponents = await getComponents();
-    localComponents = localComponents.map(name => ({ 'Rule name': name }));
+    localComponents = localComponents.map((name) => ({ 'Rule name': name }));
     if (localComponents.length > 0) {
       console.log(chalk.bold.blueBright(`List of custom components in ${sourceOfComponents}`));
       console.table(localComponents, ['Rule name']);
@@ -142,9 +142,9 @@ async function fetchComponentsFromInfinity(apiUrl, headers) {
     fetch(apiUrl, {
       method: 'GET',
       dispatcher: getFetchAgent(serverConfig),
-      headers
+      headers,
     })
-      .then(response => {
+      .then((response) => {
         status = response.status;
         if (status === 401) {
           throw new Error('Error occurred in authentication. Please regenerate using authenticate');
@@ -157,7 +157,7 @@ async function fetchComponentsFromInfinity(apiUrl, headers) {
         }
         return response.json();
       })
-      .then(resp => {
+      .then((resp) => {
         // const respData = JSON.parse(resp);
         if (status === 401) {
           throw new Error('Error occurred in authentication. Please regenerate using authenticate');
@@ -170,7 +170,7 @@ async function fetchComponentsFromInfinity(apiUrl, headers) {
         }
       })
 
-      .catch(e => reject(`${chalk.bold.red(e)}`));
+      .catch((e) => reject(`${chalk.bold.red(e)}`));
   });
 }
 
@@ -178,22 +178,22 @@ async function fetchComponentsFromLaunchpad(apiUrl, headers) {
   addDebugLog('fetchComponentsFromLaunchpad', `apiUrl: ${apiUrl}`, '');
   const serverConfig = await getPegaServerConfig();
   // constructing urls for all type of components
-  const urls = COMPONENT_SCHEMA.type.map(type => apiUrl.replace('{type}', type.value));
+  const urls = COMPONENT_SCHEMA.type.map((type) => apiUrl.replace('{type}', type.value));
   const statuses = [];
 
   return new Promise((resolve, reject) => {
     Promise.all(
-      urls.map(async url => {
+      urls.map(async (url) => {
         return fetch(url, {
           method: 'GET',
           dispatcher: getFetchAgent(serverConfig),
-          headers
+          headers,
         });
-      })
+      }),
     )
-      .then(responses => {
+      .then((responses) => {
         return Promise.all(
-          responses.map(res => {
+          responses.map((res) => {
             statuses.push(res.status);
             if (res.status === 401 || res.status === 503) {
               // Finding a 503 response is sometimes being returned from Launchpad in expired authentication scenario
@@ -203,15 +203,15 @@ async function fetchComponentsFromLaunchpad(apiUrl, headers) {
             } else {
               throw new Error(`Unexpected Error ${res.status} encountered. ${res.message}`);
             }
-          })
+          }),
         );
       })
-      .then(data => {
-        const components = data.map(res => res.components).flat();
+      .then((data) => {
+        const components = data.map((res) => res.components).flat();
         resolve(components);
       })
 
-      .catch(e => reject(`${chalk.bold.red(e)}`));
+      .catch((e) => reject(`${chalk.bold.red(e)}`));
   });
 }
 
@@ -226,11 +226,11 @@ export const getComponentsFromServer = async (library, organization) => {
       ? LP_VANITY_LIST_COMPONENT_SERVICE_REST_ENDPOINT
       : isLaunchpad
         ? LP_LIST_COMPONENT_SERVICE_REST_ENDPOINT
-        : LIST_COMPONENT_SERVICE_REST_ENDPOINT
+        : LIST_COMPONENT_SERVICE_REST_ENDPOINT,
   );
 
   if (!isLaunchpad) {
-    await checkAccessTokenExpiration;
+    await checkAccessTokenExpiration();
   }
 
   return new Promise((resolve, reject) => {
@@ -248,25 +248,26 @@ export const getComponentsFromServer = async (library, organization) => {
             headers.cookie = `Pega-AAT=${accessToken}`;
 
             fetchComponentsFromLaunchpad(url, headers)
-              .then(response => {
+              .then((response) => {
                 response = response.filter(
-                  component => (component.library === library || library === '*') && (component.organization === organization || organization === '*')
+                  (component) =>
+                    (component.library === library || library === '*') && (component.organization === organization || organization === '*'),
                 );
                 resolve(response);
               })
-              .catch(e => reject(e));
+              .catch((e) => reject(e));
           } else {
             headers.Authorization = `${tokenType} ${accessToken}`;
 
             fetchComponentsFromInfinity(url, headers)
-              .then(response => {
+              .then((response) => {
                 // filter and only return non managed rules
                 response.pxResults = response.pxResults.filter(
-                  component => component.pyManagedRule === false || component.pyManagedRule === undefined
+                  (component) => component.pyManagedRule === false || component.pyManagedRule === undefined,
                 );
                 resolve(response);
               })
-              .catch(e => reject(e));
+              .catch((e) => reject(e));
           }
         }
       });
@@ -278,7 +279,7 @@ export const getComponentsFromServer = async (library, organization) => {
   });
 };
 
-export const displayServerComponents = async data => {
+export const displayServerComponents = async (data) => {
   addDebugLog('displayServerComponents', '', '');
   const defaultPegaServerConfig = await getPegaServerConfig();
   const isLaunchpad = defaultPegaServerConfig.serverType === 'launchpad';
@@ -304,14 +305,14 @@ export const displayServerComponents = async data => {
     if (isLaunchpad) {
       return {
         'Component Name': label,
-        Type: type
+        Type: type,
       };
     }
 
     return {
       'Rule name': label,
       'Ruleset name': pyRuleSet,
-      'Ruleset version': pyRuleSetVersion
+      'Ruleset version': pyRuleSetVersion,
     };
   });
 

package/src/tasks/list/index.js

@@ -10,7 +10,7 @@ import {
   getComponentsFromServer,
   getLaunchPadFilterQuestions,
   displayServerComponents,
-  getListComponentsQuestions
+  getListComponentsQuestions,
 } from './helper.js';
 
 const getList = async (sourceOfComponents, answers) => {
@@ -60,14 +60,14 @@ const getList = async (sourceOfComponents, answers) => {
   }
 };
 
-export default async options => {
+export default async (options) => {
   await showVersion();
   await checkLibraryAndArchives();
   const isLibraryBased = getLibraryBased();
 
   addDebugLog('list', '', '+');
 
-  let sourceOfComponentsOption = SOURCE_OF_COMPONENT_TYPES.LOCAL;
+  let sourceOfComponentsOption;
   if (isLibraryBased) {
     sourceOfComponentsOption = SOURCE_OF_COMPONENT_TYPES.LOCAL;
     await getList(sourceOfComponentsOption);

package/src/tasks/list-lib/helper.js

@@ -4,7 +4,7 @@ import { addDebugLog, getConfigDefaults, getLibraryArchiveDirectories } from '..
 
 export const SOURCE_OF_COMPONENT_TYPES = {
   SERVER: 'Server',
-  LOCAL: 'Local'
+  LOCAL: 'Local',
 };
 
 export const getArchiveLibraryQuestions = async () => {
@@ -17,8 +17,8 @@ export const getArchiveLibraryQuestions = async () => {
       name: 'libraryName',
       type: 'rawlist',
       message: 'Select library',
-      choices: archLibs
-    }
+      choices: archLibs,
+    },
   ];
 };
 
@@ -29,7 +29,7 @@ export const getLibraryVersionQuestion = async (libraryName, libVersions) => {
       name: 'version',
       type: 'rawlist',
       message: `Select ${chalk.green.bold(`${libraryName}`)} library version`,
-      choices: libVersions
-    }
+      choices: libVersions,
+    },
   ];
 };

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

@@ -10,11 +10,11 @@ import {
   getConfigDefaults,
   getLocalArchivedLibraryVersionData,
   getComponentsConfigs,
-  cleanUpTemp
+  cleanUpTemp,
 } from '../../util.js';
 import { getArchiveLibraryQuestions } from './helper.js';
 
-export default async options => {
+export default async (options) => {
   const isLibraryBased = getLibraryBased();
 
   if (!isLibraryBased) {
@@ -66,8 +66,8 @@ export default async options => {
             name: 'libVersion',
             type: 'rawlist',
             message: 'Enter version',
-            choices: libVersions
-          }
+            choices: libVersions,
+          },
         ]);
 
         selectedVersion = libAnswers.libVersion;
@@ -91,8 +91,8 @@ export default async options => {
             type: 'rawlist',
             message: 'Select current or store',
             default: 'Current',
-            choices: ['Current', 'Store']
-          }
+            choices: ['Current', 'Store'],
+          },
         ]);
 
         currentOrStore = archAnswers.currentOrStore;
@@ -123,12 +123,12 @@ export default async options => {
       process.exit();
     }
 
-    let libData = data.map(component => ({
+    let libData = data.map((component) => ({
       Component: component.name,
       Label: component.label,
       Version: component.version,
       Type: component.type,
-      'Sub Type': component.subtype
+      'Sub Type': component.subtype,
     }));
     console.log(chalk.bold.blueBright(`\nList of ${libraryName}:${selectedVersion} components built on ${builtOn}.`));
     console.table(libData, ['Component', 'Label', 'Version', 'Type', 'Sub Type']);