@pega/custom-dx-components 24.2.16 → 25.1.10-alpha-0.1

package/src/tasks/import-comp/index.js

@@ -24,6 +24,8 @@ import { getFilePathQuestions, getFileNameQuestions, updateSavedFilePath  } from
 
 import buildComponent from '../build-comp/index.js';
 
+import inquirerFuzzyPath from '@pega/inquirer-fuzzy-path';
+
 export const DXCB_CONFIG_INTERNAL_JSON_FILENAME = 'src/dxcb.config.json';
 const currentDirectory = process.cwd();
 const pegaConfigJsonPath = join(currentDirectory, TASKS_CONFIG_JSON_FILENAME);
@@ -159,8 +161,6 @@ addDebugLog("renameComponent", `library: ${library}, componentKey: ${componentKe
 export const importComp = async(filePath, fileName, askValidate) => {
 addDebugLog("importComp", `filePath: ${filePath}, fileName: ${fileName}`, "");
 
-  const useInputConfig = getUseInputConfig();
-
   const currentDirectory = process.cwd();
   // const compDirectory = join(currentDirectory, "src", "components");
 
@@ -171,8 +171,6 @@ addDebugLog("importComp", `filePath: ${filePath}, fileName: ${fileName}`, "");
   let configData;
   let newName = "";
   let newLabel = "";
-  let proceedAs;
-
 
   if (fs.existsSync(copyDir)) {
     configData = fs.readFileSync(join(copyDir, "/config.json"), { encoding: 'utf8' });
@@ -185,96 +183,66 @@ addDebugLog("importComp", `filePath: ${filePath}, fileName: ${fileName}`, "");
 
     if (currentCompList && currentCompList.includes(potentialCompKey)) {
       console.log(`\nComponent ${chalk.yellow(`${potentialCompKey}`)} already exists.`);
+      const proceedAnswers = await inquirer.prompt([
 
-
-
-      if (useInputConfig) {
-        const inputConfig = await getInputConfigForCommand("importComponent");
-        proceedAs = inputConfig.proceedIfExists;
-
-        newName = inputConfig?.newComponentName;
-        newLabel = inputConfig?.newComponentLabel;
-
-
-        switch (proceedAs) {
-          case 'No import':
-            // removed copied
-            // fs.rmSync(copyDir, { recursive: true, force: true, maxRetries: 2 });
-            process.exit();
-            break;
-          case 'Overwrite':
-            // remove existing
-            const existingComp = await getComponentDirectoryPath(potentialCompKey);
-            fs.rmSync(existingComp, { recursive: true, force: true, maxRetries: 2 });
-            break;
-        }
-
-      }
-      else {
-        const proceedAnswers = await inquirer.prompt([
-
-          {
-            name: 'proceedAs',
-            type: 'rawlist',
-            message: `Proceed as ?`,
-            default: 'No import',
-            choices: ['No import', 'Overwrite', 'New name']
+        {
+          name: 'proceedAs',
+          type: 'rawlist',
+          message: `Proceed as ?`,
+          default: 'No import',
+          choices: ['No import', 'Overwrite', 'New name']
+        },
+        {
+          name: 'componentName',
+          message: 'Enter component name (required)',
+          when(answers) {
+            return answers.proceedAs === 'New name';
           },
-          {
-            name: 'componentName',
-            message: 'Enter component name (required)',
-            when(answers) {
-              return answers.proceedAs === 'New name';
-            },
-            validate: value => {
-              /* value should not be empty
-              It should not have spaces
-              It should not start with a number
-              Only case-insensitive alphanumeric values are allowed
-            */
-              if (value && !/^\d/.test(value) && value === sanitize(value)) {
-                return true;
-              }
-              return 'Only alphanumeric values are allowed, starting with alphabets, no spaces.';
+          validate: value => {
+            /* value should not be empty
+            It should not have spaces
+            It should not start with a number
+            Only case-insensitive alphanumeric values are allowed
+          */
+            if (value && !/^\d/.test(value) && value === sanitize(value)) {
+              return true;
             }
+            return 'Only alphanumeric values are allowed, starting with alphabets, no spaces.';
+          }
+        },
+        {
+          name: 'componentLabel',
+          message: 'Enter component label for display (required)',
+          when(answers) {
+            return answers.proceedAs === 'New name';
           },
-          {
-            name: 'componentLabel',
-            message: 'Enter component label for display (required)',
-            when(answers) {
-              return answers.proceedAs === 'New name';
-            },
-            validate: value => {
-              if (value) {
-                return true;
-              }
-              return 'Please provide value for label';
+          validate: value => {
+            if (value) {
+              return true;
             }
+            return 'Please provide value for label';
           }
-        ]);
-
-        proceedAs = proceedAnswers.proceedAs;
-
-        switch (proceedAs) {
-          case 'No import':
-            // removed copied
-            // fs.rmSync(copyDir, { recursive: true, force: true, maxRetries: 2 });
-            process.exit();
-            break;
-          case 'Overwrite':
-            // remove existing
-            const existingComp = await getComponentDirectoryPath(potentialCompKey);
-            fs.rmSync(existingComp, { recursive: true, force: true, maxRetries: 2 });
-            break;
-          case 'New name':
-            newName = proceedAnswers.componentName;
-            newLabel = proceedAnswers.componentLabel;
-            break;
         }
+      ]);
+
+
+      switch (proceedAnswers.proceedAs) {
+        case 'No import':
+          // removed copied
+          // fs.rmSync(copyDir, { recursive: true, force: true, maxRetries: 2 });
+          process.exit();
+          break;
+        case 'Overwrite':
+          // remove existing
+          const existingComp = await getComponentDirectoryPath(potentialCompKey);
+          fs.rmSync(existingComp, { recursive: true, force: true, maxRetries: 2 });
+          break;
+        case 'New name':
+          newName = proceedAnswers.componentName;
+          newLabel = proceedAnswers.componentLabel;
+          break;
       }
 
-
-
     }
   }
 
@@ -288,40 +256,31 @@ addDebugLog("importComp", `filePath: ${filePath}, fileName: ${fileName}`, "");
     console.log(`\n${chalk.green(`${fileName}`)} has been imported as ${chalk.green(`${newCompKey}`)}\n`);
 
     if (askValidate) {
+      const validateAnswers = await inquirer.prompt([
+        {
+          name: 'doValidate',
+          type: 'confirm',
+          message: `Validate ${chalk.yellow(`${newCompKey}`)}`,
+          default: true
+        }]);
+
+      if (validateAnswers.doValidate) {
+        const args  = [ '','', '', `${newCompKey}`];
+        let myOptions = {};
+        myOptions["params"] = args;
+
+        await buildComponent(myOptions);
+      }
+    }
 
-      if (useInputConfig) {
-        const inputConfig = await getInputConfigForCommand("importComponent");
-        if (convertYNToBoolean(inputConfig.doValidation)) {
-          const args  = [ '','', '', `${newCompKey}`];
-          let myOptions = {};
-          myOptions["params"] = args;
 
-          await buildComponent(myOptions);
-        }
 
-      }
-      else {
-        const validateAnswers = await inquirer.prompt([
-          {
-            name: 'doValidate',
-            type: 'confirm',
-            message: `Validate ${chalk.yellow(`${newCompKey}`)}`,
-            default: true
-          }]);
-
-        if (validateAnswers.doValidate) {
-          const args  = [ '','', '', `${newCompKey}`];
-          let myOptions = {};
-          myOptions["params"] = args;
-
-          await buildComponent(myOptions);
-        }
-      }
-
-    }
 
   }
 
+
+
+
 }
 
 
@@ -366,7 +325,6 @@ export default async options => {
   await showVersion();
   await checkLibraryAndArchives();
   await checkPathAccess(pegaConfigJsonPath);
-
   const useInputConfig = getUseInputConfig();
 
 addDebugLog("importComponent", "", "+");
@@ -396,11 +354,14 @@ addDebugLog("importComponent", "", "+");
       filePath = inputConfig.fileLocation;
       fileName = inputConfig.fileName;
 
+      await importComp( filePath, fileName, false);
     }
     else {
+      inquirer.registerPrompt('fuzzypath', inquirerFuzzyPath);
+
       const filePathQuestions = await getFilePathQuestions();
       const filePathAnswers = await inquirer.prompt(filePathQuestions);
-      ({ filePath } = filePathAnswers);
+      const { filePath } = filePathAnswers;
 
       const compFileList = await getComponentList(filePath);
 
@@ -413,13 +374,13 @@ addDebugLog("importComponent", "", "+");
 
       const fileNameQuestions = await getFileNameQuestions(compFileList);
       const fileNameAnswers = await inquirer.prompt(fileNameQuestions);
-      ({fileName} = fileNameAnswers);
+      const {fileName} = fileNameAnswers;
 
+      await importComp( filePath, fileName, true);
     }
 
 
 
-    await importComp( filePath, fileName, true);
 
   }
 

package/src/tasks/index.js

@@ -38,3 +38,4 @@ export { default as buildAllComponents } from './build-all/index.js';
 export { default as buildLibrary } from './build-lib/index.js';
 export { default as buildJestAssets } from './build-jest-assets/index.js';
 export { default as restoreConfig } from './restore-config/index.js';
+export { default as restore } from './restore/index.js';

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

@@ -193,7 +193,7 @@
       // rules for typescript (keeping old rules for js)
       "files": "*.@(ts|tsx)",
       "rules": {
-        "no-undef": "off",
+        "no-undef": "error",
         "no-console": "off",
         "import/prefer-default-export": "off",
         "import/no-relative-packages": "off",

package/src/tasks/init/template/.storybook/{main.js → main.ts}

@@ -1,9 +1,10 @@
-/** @type { import('@storybook/react-webpack5').StorybookConfig } */
-const config = {
+import type { StorybookConfig } from '@storybook/react-vite';
+const config: StorybookConfig = {
   stories: ['../src/**/*.stories.@(js|jsx|ts|tsx)'],
   addons: ['@storybook/addon-links', '@storybook/addon-essentials'],
   framework: {
-    name: '@storybook/react-webpack5'
+    name: '@storybook/react-vite',
+    options: {}
   },
   docs: {
     autodocs: 'tag'

package/src/tasks/init/template/.storybook/manager.ts

@@ -0,0 +1,6 @@
+import { addons } from '@storybook/manager-api';
+import Theme from './theme';
+
+addons.setConfig({
+  theme: Theme,
+});

package/src/tasks/init/template/.storybook/preview.tsx

@@ -1,4 +1,6 @@
 import type { Preview } from '@storybook/react';
+import Theme from './theme';
+
 import {
   Configuration,
   LiveLog,
@@ -18,7 +20,8 @@ const preview: Preview = {
       }
     },
     docs: {
-      source: { type: 'code' }
+      source: { type: 'code' },
+      theme: Theme
     }
   },
 

package/src/tasks/init/template/.storybook/theme.js

@@ -1,4 +1,4 @@
-import { create } from '@storybook/theming/create';
+import { create } from '@storybook/theming';
 
 import logo from './pega-logo.svg';
 

package/src/tasks/init/template/babel.config.cjs

@@ -1,13 +1,22 @@
-module.exports = {
-  presets: [
+module.exports = function (api) {
+  api.cache(true);
+  const presets = [
     [
-      '@babel/preset-typescript',
+      '@babel/preset-env',
       {
-        onlyRemoveTypeImports: true,
-        allExtensions: true,
-        isTSX: true
+        targets: {
+          esmodules: true,
+          node: true
+        }
       }
-    ]
-  ],
-  sourceType: 'unambiguous'
+    ],
+    '@babel/preset-typescript',
+    ['@babel/preset-react', { runtime: 'automatic' }]
+  ];
+  const plugins = [];
+
+  return {
+    presets,
+    plugins
+  };
 };

package/src/tasks/init/template/jest.config.cjs

@@ -1,15 +1,38 @@
+const packagesToTranspile = [
+  '@pega/cosmos-react-condition-builder',
+  '@pega/cosmos-react-core',
+  '@pega/cosmos-react-social',
+  '@pega/cosmos-react-rte',
+  '@pega/cosmos-react-work',
+  'shortcuts',
+  'preact'
+];
+const packagesToTranspileStr = packagesToTranspile.map(p => `${p}`).join('|');
+
 module.exports = {
   verbose: true,
+  // preset: 'ts-jest/presets/default-esm',
+  preset: 'ts-jest',
+  extensionsToTreatAsEsm: ['.ts', '.tsx'],
   moduleFileExtensions: ['js', 'jsx', 'ts', 'tsx'],
   transform: {
-    '^.+\\.[t|j]sx?$': 'babel-jest'
+    '^.+\\.(js|jsx|ts|tsx)?$': ['ts-jest', { useESM: true }]
   },
+  moduleNameMapper: {
+    shortcuts: '<rootDir>/node_modules/shortcuts/dist/index.js'
+  },
+  moduleDirectories: ['node_modules', 'src'],
   collectCoverage: true,
-  testPathIgnorePatterns: [],
+  testPathIgnorePatterns: ['./dist'],
   transformIgnorePatterns: [],
   modulePathIgnorePatterns: [],
   coveragePathIgnorePatterns: [],
-  collectCoverageFrom: ['./node_modules/@pega/custom-dx-components/src/*.js'],
+  setupFiles: ['./setupFiles.ts'],
+  setupFilesAfterEnv: ['./setupTests.ts'],
+  collectCoverageFrom: [
+    './node_modules/@pega/custom-dx-components/src/*.js',
+    '!**/*.(test|stories).{ts,tsx,js,jsx}'
+  ],
   coverageThreshold: {
     global: {
       statements: 79,
@@ -17,5 +40,7 @@ module.exports = {
       functions: 81,
       lines: 80
     }
-  }
+  },
+  testEnvironment: 'jsdom',
+  transformIgnorePatterns: [`node_modules/(?!(${packagesToTranspileStr}))`]
 };

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

@@ -7,6 +7,8 @@
   "type": "module",
   "scripts": {
     "_***Component_and_Library_mode***": "Component and library mode commands",
+    "test": "jest",
+    "coverage": "jest --coverage --coverageReporters=html",
     "startStorybook": "storybook dev --port 6040 --quiet",
     "lint": "eslint .",
     "authenticate": "custom-dx-components authenticate",
@@ -27,7 +29,7 @@
     "publishAll": "custom-dx-components publishAll",
     "promoteWebPack": "custom-dx-components promoteWebPack",
     "revertWebPack": "custom-dx-components revertWebPack",
-    "_***Library_mode_only***": "Library mode only commands, Beta capability and subject to change.  Developer experimental.  Do not use in a Production Deployment",
+    "_***Library_mode_only***": "Library CL mode only commands",
     "createLib": "custom-dx-components createLibrary",
     "switchLib": "custom-dx-components switchLibrary",
     "createLibVersion": "custom-dx-components createVersion",
@@ -39,6 +41,7 @@
     "deleteLibVersion": "custom-dx-components deleteVersion",
     "move": "custom-dx-components moveComponent",
     "publishLibVersion": "custom-dx-components publish",
+    "restoreLibVersion": "custom-dx-components restore",
     "storeLibVersion": "custom-dx-components storeComponents",
     "showStatus": "custom-dx-components showStatus",
     "setPermanent": "custom-dx-components setPermanent",
@@ -78,64 +81,80 @@
   "author": "",
   "license": "Enter License",
   "dependencies": {
-    "@pega/cosmos-react-condition-builder": "^7.1.2",
-    "@pega/cosmos-react-core": "^7.1.2",
-    "@pega/cosmos-react-work": "^7.1.2",
-    "@pega/eslint-config": "^0.10.2",
-    "@pega/tsconfig": "^0.15.1",
-    "babel-loader": "^9.1.3",
-    "dayjs": "^1.11.11",
+    "@pega/cosmos-react-condition-builder": "^8.0.0-build.39.7",
+    "@pega/cosmos-react-core": "^8.0.0-build.39.7",
+    "@pega/cosmos-react-work": "^8.0.0-build.39.7",
+    "@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": "^17.0.2",
+    "react": "^18.3.1",
     "react-autosuggest": "^10.1.0",
-    "react-dom": "^17.0.2",
+    "react-dom": "^18.3.1",
     "react-is": "^18.3.1",
     "react-redux": "^7.2.9",
-    "serve": "^14.2.3",
+    "serve": "^14.2.4",
     "shelljs": "^0.8.5",
     "styled-components": "^5.3.11",
-    "ts-loader": "^9.5.1"
+    "ts-loader": "^9.5.2"
   },
   "devDependencies": {
-    "@pega/configs": "^0.15.1",
-    "@pega/custom-dx-components": "~24.2.16",
-    "@pega/pcore-pconnect-typedefs": "3.2.1",
-    "@storybook/addon-actions": "^7.6.19",
-    "@storybook/addon-essentials": "^7.6.19",
-    "@storybook/addon-links": "^7.6.19",
-    "@storybook/addon-storysource": "^7.6.19",
-    "@storybook/react": "^7.6.19",
-    "@storybook/react-webpack5": "^7.6.19",
-    "@storybook/theming": "^7.6.19",
+    "@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": "~25.1.10-alpha-0.1",
+    "@pega/pcore-pconnect-typedefs": "^4.1.0-alpha.1",
+    "@storybook/addon-actions": "^8.6.12",
+    "@storybook/addon-essentials": "^8.6.12",
+    "@storybook/addon-links": "^8.6.12",
+    "@storybook/addon-storysource": "^8.6.12",
+    "@storybook/manager-api": "^8.6.12",
+    "@storybook/react": "^8.6.12",
+    "@storybook/react-vite": "^8.6.12",
+    "@storybook/react-webpack5": "^8.6.12",
+    "@storybook/test": "^8.6.12",
+    "@storybook/test-runner": "^0.22.0",
+    "@storybook/theming": "^8.6.12",
+    "@testing-library/dom": "^10.4.0",
+    "@testing-library/jest-dom": "^6.6.3",
+    "@testing-library/react": "^12.1.5",
     "@types/emoji-mart": "^3.0.14",
+    "@types/jest": "^29.5.14",
     "@types/lodash.get": "^4.4.9",
-    "@types/react": "^17.0.80",
-    "@types/react-color": "^3.0.12",
-    "@types/react-dom": "^17.0.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": "^5.62.0",
-    "babel-loader": "^9.1.3",
+    "core-js": "^3.42.0",
     "eslint": "^8.57.0",
     "eslint-plugin-import": "^2.31.0",
-    "eslint-plugin-jest": "^28.8.3",
-    "eslint-plugin-jsx-a11y": "^6.10.0",
-    "eslint-plugin-mdx": "^3.1.5",
-    "eslint-plugin-prettier": "^5.2.1",
-    "eslint-plugin-react": "^7.37.1",
+    "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": "^4.6.2",
     "eslint-plugin-sonarjs": "^0.23.0",
     "eslint-plugin-storybook": "^0.6.15",
+    "esm": "^3.2.25",
     "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.3.3",
-    "storybook": "^7.6.19",
-    "stylelint": "^16.10.0",
-    "typescript": "~5.3.3"
+    "prettier": "3.5.3",
+    "storybook": "^8.6.12",
+    "stylelint": "^16.19.1",
+    "ts-jest": "^29.3.2",
+    "typescript": "~5.5.4",
+    "vite": "^6.3.5"
   }
 }

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

@@ -0,0 +1,5 @@
+// setup.js (for jest)
+// import { setProjectAnnotations } from '@storybook/react';
+// import projectAnnotations from './.storybook/preview';
+
+// setProjectAnnotations(projectAnnotations);

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

@@ -0,0 +1,99 @@
+import { configure } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import 'jest-canvas-mock';
+
+// Wait time needed
+const TIMEOUT = 300000;
+
+// mocks open
+global.open = jest.fn();
+
+global.fetch = jest.fn(() =>
+  Promise.resolve({
+    json: () => Promise.resolve(() => 'xxx'),
+    arrayBuffer: () => Promise.resolve(() => 'yyy')
+  })
+) as jest.Mock;
+
+window.URL.createObjectURL = jest.fn();
+
+// mocks ResizeObserver
+window.ResizeObserver = jest.fn(() => ({
+  observe: () => {},
+  unobserve: () => {},
+  disconnect: () => {}
+}));
+
+// mocks IntersectionObserver
+window.IntersectionObserver = jest.fn(() => ({
+  root: null,
+  rootMargin: '0',
+  thresholds: [],
+  takeRecords: () => [],
+  observe: () => {},
+  unobserve: () => {},
+  disconnect: () => {}
+}));
+
+Object.defineProperty(window, 'matchMedia', {
+  writable: true,
+  value: jest.fn().mockImplementation(query => ({
+    matches: false,
+    media: query,
+    onchange: null,
+    addListener: jest.fn(), // Deprecated
+    removeListener: jest.fn(), // Deprecated
+    addEventListener: jest.fn(),
+    removeEventListener: jest.fn(),
+    dispatchEvent: jest.fn()
+  }))
+});
+
+// // mocks createSVGPoint
+// Object.defineProperty(global.SVGSVGElement.prototype, 'createSVGPoint', {
+//   writable: true,
+//   value: jest.fn().mockImplementation(() => ({
+//     x: 0,
+//     y: 0,
+//     matrixTransform: jest.fn().mockImplementation(() => ({
+//       x: 0,
+//       y: 0
+//     }))
+//   }))
+// });
+
+// // mocks getBBox on SVGTextElement
+// (global.SVGElement.prototype as any).getBBox = () => {
+//   return {
+//     x: 0,
+//     y: 0,
+//     width: 30,
+//     height: 15,
+//     bottom: 0,
+//     left: 0,
+//     right: 0,
+//     top: 0,
+//     toJSON: () => ''
+//   };
+// };
+
+// // Mocks the window.matchMedia function used in useBreakpoint hook
+// Object.defineProperty(window, 'matchMedia', {
+//   writable: true,
+//   value: jest.fn().mockImplementation(query => ({
+//     matches: false,
+//     media: query,
+//     onchange: null,
+//     addListener: jest.fn(),
+//     removeListener: jest.fn(),
+//     addEventListener: jest.fn(),
+//     removeEventListener: jest.fn(),
+//     dispatchEvent: jest.fn()
+//   }))
+// });
+
+// jest.setTimeout(TIMEOUT);
+
+// // speeds up *ByRole queries a bit
+// // https://github.com/testing-library/dom-testing-library/issues/552
+// configure({ defaultHidden: true });