@pega/custom-dx-components 8.8.20 → 23.1.10

package/src/tasks/create/templates/Constellation/Widget/PAGE-CASE/index.jsx.mustache

@@ -46,11 +46,11 @@ export default function {{COMPONENT_CLASS_NAME}}(props) {
       <Card>
       <CardHeader>{title}</CardHeader>
       <CardContent>
-{{! pick new delimiteres for mustache }} {{=<% %>=}}
+{{! pick new delimiters for mustache }} {{=<% %>=}}
       <Flex container={{ direction: 'row'}}>
       <Operator label={hideLabel ? null : _label} name={user.userName} id={user.userId} getPConnect={getPConnect} />
 
-<%={{ }}=%>     {{! revert delimiteres for mustache }}
+<%={{ }}=%>     {{! revert delimiters for mustache }}
       {dateTimeValue && (
         <Fragment>
           {' '}

package/src/tasks/create/templates/Launchpad/Widget/CASE/config.json.mustache

@@ -18,6 +18,6 @@
     }
   ],
   "defaultConfig": {
-     "label": "@L $this.label"
+     "label": "@L {{COMPONENT_LABEL}}"
   }
 }

package/src/tasks/create/templates/Launchpad/Widget/CASE/index.jsx.mustache

@@ -33,7 +33,7 @@ export default function {{COMPONENT_CLASS_NAME}}(props) {
         if (response.data.data !== null) {
           setHistory(
             response.data.data.map((entry, index) => {
-              {{! pick new delimiteres for mustache }}
+              {{! pick new delimiters for mustache }}
               {{=<% %>=}}
               return {
                 date: new Date(entry.CreateDateTime).toLocaleString(),
@@ -41,7 +41,7 @@ export default function {{COMPONENT_CLASS_NAME}}(props) {
                 user: entry.PerformerID,
                 id: index
               };
-              <%={{ }}=%>     {{! revert delimiteres for mustache }}
+              <%={{ }}=%>     {{! revert delimiters for mustache }}
             })
           );
         } else {

package/src/tasks/create/templates/Launchpad/Widget/PAGE-CASE/Operator.jsx.mustache

@@ -31,7 +31,7 @@ const Operator = (props) => {
   }, [id]);
 
 
-  {{! pick new delimiteres for mustache }}
+  {{! pick new delimiters for mustache }}
   {{=<% %>=}}
 
   const OperatorPreview = () => {
@@ -187,7 +187,7 @@ const Operator = (props) => {
     }
   };
 
-  <%={{ }}=%>     {{! revert delimiteres for mustache }}
+  <%={{ }}=%>     {{! revert delimiters for mustache }}
 
   const clickAction = (e) => {
     setPopoverTarget(e.currentTarget);

package/src/tasks/create/templates/Launchpad/Widget/PAGE-CASE/index.jsx.mustache

@@ -38,11 +38,11 @@ export default function {{COMPONENT_CLASS_NAME}}(props) {
       <Card>
       <CardHeader>{title}</CardHeader>
       <CardContent>
-{{! pick new delimiteres for mustache }} {{=<% %>=}}
+{{! pick new delimiters for mustache }} {{=<% %>=}}
       <Flex container={{ direction: 'row'}}>
       <Operator label={_label} name={user} id={user} getPConnect={getPConnect} />
 
-<%={{ }}=%>     {{! revert delimiteres for mustache }}
+<%={{ }}=%>     {{! revert delimiters for mustache }}
       {dateTimeValue && (
         <Fragment>
           {' '}

package/src/tasks/create-all/index.js

@@ -2,29 +2,28 @@ import path from 'path';
 import { URL, fileURLToPath } from 'url';
 import fs from 'fs';
 import { promisify } from 'util';
-import { join } from 'path';
+
 
 import inquirer from 'inquirer';
 import ncp from 'ncp';
 import chalk from 'chalk';
 
-import { checkPathAccess, showVersion } from '../../util.js';
-
-export const DXCB_CONFIG_INTERNAL_JSON_FILENAME = 'src/dxcb.config.json';
-
-import {
+// eslint-disable-next-line import/order
+import { checkPathAccess, showVersion ,
   convertIntoPascalCase,
   compileMustacheTemplate,
   getComponentDirectoryPath,
   getPegaServerConfig,
-  getPegaConfig,
   getComponents,
   getComponentDefaults,
   sanitize,
   validateSemver
 } from '../../util.js';
+
 import { COMPONENT_SCHEMA, COMPONENTS_DIRECTORY_PATH, TASKS_CONFIG_JSON_FILENAME, COMPONENTS_PATH, CATEGORY_CONSTELLATION } from '../../constants.js';
 
+export const DXCB_CONFIG_INTERNAL_JSON_FILENAME = 'src/dxcb.config.json';
+
 const pegaConfigJsonPath = path.join(path.resolve(), TASKS_CONFIG_JSON_FILENAME);
 
 const copy = promisify(ncp);
@@ -65,7 +64,8 @@ export const compileMustacheTemplates = async (
   let mustacheSubType = subtype;
 
   // overrides
-  if (typeof mustacheSubType == 'string') {
+  if (typeof mustacheSubType === 'string') {
+    // eslint-disable-next-line default-case
     switch (mustacheSubType) {
       case 'FORM-region':
         mustacheSubType = 'FORM';
@@ -114,8 +114,87 @@ export const compileMustacheTemplates = async (
   });
 };
 
+export const validateCompile = async (
+  { library, organization, componentName, componentLabel, version, framework, type, subtype, description, allowedApplications },
+  options
+) => {
+  let sSubType = subtype;
+  if (Array.isArray(subtype)) {
+    sSubType = subtype.join('-');
+  }
+
+  // await checkPathAccess(pegaConfigInternalJsonPath);
+
+  framework = convertIntoPascalCase(CATEGORY_CONSTELLATION);
+
+  const templateParentDir = `./templates/${framework}`;
+
+  let templateDir = `${templateParentDir}/${type}/${sSubType}`;
+  let templateDirectory = fileURLToPath(new URL(templateDir, import.meta.url));
+  templateDirectory = templateDirectory.replace(`${path.sep  }create-all`, `${path.sep  }create`);
+
+  const defaultPegaServerConfig = await getPegaServerConfig();
+  const isLaunchpad = defaultPegaServerConfig.serverType === 'launchpad';
+  const originalFramework = framework;
+
+  if (isLaunchpad) {
+    framework = "Launchpad";
+
+    templateDir = `./templates/${framework}/${type}/${sSubType}`;
+    templateDirectory = fileURLToPath(new URL(templateDir, import.meta.url));
+    templateDirectory = templateDirectory.replace(`${path.sep  }create-all`, `${path.sep  }create`);
+
+    // if doesn't exist, revert
+    if (!fs.existsSync(templateDirectory)) {
+      framework = originalFramework;
+
+      templateDir = `./templates/${framework}/${type}/${sSubType}`;
+      templateDirectory = fileURLToPath(new URL(templateDir, import.meta.url));
+      templateDirectory = templateDirectory.replace(`${path.sep  }create-all`, `${path.sep  }create`);
+
+    }
+
+  }
+
+
+
+  const componentKey = `${organization}_${library}_${componentName}`;
+
+  const targetDirectory = await getComponentDirectoryPath(componentKey);
+
+  const components = await getComponents(false);
+
+  if (components.includes(componentKey)) {
+    console.log(chalk.red(`${componentKey} component already exists in ${targetDirectory}`));
+
+    return;
+  }
+
+  // component
+  await copyComponentTemplate({
+    ...options,
+    targetDirectory,
+    templateDirectory
+  });
+  await compileMustacheTemplates(targetDirectory, {
+    componentKey,
+    componentName,
+    componentLabel,
+    library,
+    version,
+    type,
+    subtype,
+    description,
+    organization,
+    allowedApplications
+  });
+
+  console.log(chalk.green(`created ${componentKey} component in ${targetDirectory}`));
+};
+
 export const validateCompileAll = async ({ prefix, library, version, allowedApplications, organization }, options) => {
-  for (let fieldIdx in COMPONENT_SCHEMA.subtype.field) {
+  // eslint-disable-next-line no-restricted-syntax, guard-for-in
+  for (const fieldIdx in COMPONENT_SCHEMA.subtype.field) {
     const type = 'Field';
     const subtype = COMPONENT_SCHEMA.subtype.field[fieldIdx].value;
     const prefixNoSpace = prefix.replace(/\s+/g, '');
@@ -124,6 +203,7 @@ export const validateCompileAll = async ({ prefix, library, version, allowedAppl
     const componentLabel = ''.concat(prefix).concat(' ').concat(COMPONENT_SCHEMA.subtype.field[fieldIdx].name);
     const description = componentLabel;
 
+    // eslint-disable-next-line no-await-in-loop
     await validateCompile(
       {
         library,
@@ -140,15 +220,16 @@ export const validateCompileAll = async ({ prefix, library, version, allowedAppl
     );
   }
 
-  for (let templateIdx in COMPONENT_SCHEMA.subtype.template) {
+  // eslint-disable-next-line no-restricted-syntax, guard-for-in
+  for (const templateIdx in COMPONENT_SCHEMA.subtype.template) {
     const type = 'Template';
     const subtype = COMPONENT_SCHEMA.subtype.template[templateIdx].value;
     const prefixNoSpace = prefix.replace(/\s+/g, '');
-    let templateNameOriginal = COMPONENT_SCHEMA.subtype.template[templateIdx].name;
+    const templateNameOriginal = COMPONENT_SCHEMA.subtype.template[templateIdx].name;
     let templateName = convertIntoPascalCase(COMPONENT_SCHEMA.subtype.template[templateIdx].name);
     let templateLabel = convertIntoPascalCase(COMPONENT_SCHEMA.subtype.template[templateIdx].name);
     if (templateNameOriginal.indexOf('region') >= 0) {
-      let templateNameBase = convertIntoPascalCase(templateNameOriginal.replace(' region', ''));
+      const templateNameBase = convertIntoPascalCase(templateNameOriginal.replace(' region', ''));
       templateName = 'TwoColumn'.concat(templateNameBase);
       templateLabel = 'Two Column '.concat(templateNameBase);
     }
@@ -156,6 +237,7 @@ export const validateCompileAll = async ({ prefix, library, version, allowedAppl
     const componentLabel = ''.concat(prefix).concat(' ').concat(templateLabel);
     const description = componentLabel;
 
+    // eslint-disable-next-line no-await-in-loop
     await validateCompile(
       {
         library,
@@ -172,13 +254,14 @@ export const validateCompileAll = async ({ prefix, library, version, allowedAppl
     );
   }
 
-  for (let widgetIdx in COMPONENT_SCHEMA.subtype.widget) {
+  // eslint-disable-next-line no-restricted-syntax, guard-for-in
+  for (const widgetIdx in COMPONENT_SCHEMA.subtype.widget) {
     const type = 'Widget';
     const subtype = COMPONENT_SCHEMA.subtype.widget[widgetIdx].value;
     const prefixNoSpace = prefix.replace(/\s+/g, '');
-    let widgetNameOriginal = COMPONENT_SCHEMA.subtype.widget[widgetIdx].name;
+    const widgetNameOriginal = COMPONENT_SCHEMA.subtype.widget[widgetIdx].name;
     let widgetName = convertIntoPascalCase(COMPONENT_SCHEMA.subtype.widget[widgetIdx].name).concat('Widget');
-    let widgetLabel = convertIntoPascalCase(COMPONENT_SCHEMA.subtype.widget[widgetIdx].name).concat(' Widget');
+    const widgetLabel = convertIntoPascalCase(COMPONENT_SCHEMA.subtype.widget[widgetIdx].name).concat(' Widget');
     if (widgetName.indexOf('&') >= 0) {
       widgetName = convertIntoPascalCase(widgetNameOriginal.replace(' & ', ''));
     }
@@ -186,6 +269,7 @@ export const validateCompileAll = async ({ prefix, library, version, allowedAppl
     const componentLabel = ''.concat(prefix).concat(' ').concat(widgetLabel);
     const description = componentLabel;
 
+    // eslint-disable-next-line no-await-in-loop
     await validateCompile(
       {
         library,
@@ -203,86 +287,7 @@ export const validateCompileAll = async ({ prefix, library, version, allowedAppl
   }
 };
 
-export const validateCompile = async (
-  { library, organization, componentName, componentLabel, version, framework, type, subtype, description, allowedApplications },
-  options
-) => {
-  let sSubType = subtype;
-  if (Array.isArray(subtype)) {
-    sSubType = subtype.join('-');
-  }
-
-  const typeLC = type.toLowerCase();
-
-  //await checkPathAccess(pegaConfigInternalJsonPath);
-
-  framework = convertIntoPascalCase(CATEGORY_CONSTELLATION);
-
-  let pegaConfig = await getPegaConfig();
-  let templateParentDir = `./templates/${framework}`;
-
-  let templateDir = `${templateParentDir}/${type}/${sSubType}`;
-  let templateDirectory = fileURLToPath(new URL(templateDir, import.meta.url));
-  templateDirectory = templateDirectory.replace(path.sep + 'create-all', path.sep + 'create');
-
-  const defaultPegaServerConfig = await getPegaServerConfig();
-  const isLaunchpad = defaultPegaServerConfig.serverType === 'launchpad';
-  let originalFramework = framework;
-
-  if (isLaunchpad) {
-    framework = "Launchpad";
-
-    templateDir = `./templates/${framework}/${type}/${sSubType}`;
-    templateDirectory = fileURLToPath(new URL(templateDir, import.meta.url));
-    templateDirectory = templateDirectory.replace(path.sep + 'create-all', path.sep + 'create');
-
-    // if doesn't exist, revert
-    if (!fs.existsSync(templateDirectory)) {
-      framework = originalFramework;
-
-      templateDir = `./templates/${framework}/${type}/${sSubType}`;
-      templateDirectory = fileURLToPath(new URL(templateDir, import.meta.url));
-      templateDirectory = templateDirectory.replace(path.sep + 'create-all', path.sep + 'create');
-
-    }
 
-  }
-
-
-
-  const componentKey = `${organization}_${library}_${componentName}`;
-
-  const targetDirectory = await getComponentDirectoryPath(componentKey);
-
-  const components = await getComponents(false);
-
-  if (components.includes(componentKey)) {
-    console.log(chalk.red(`${componentKey} component already exists in ${targetDirectory}`));
-
-    return;
-  }
-
-  // component
-  await copyComponentTemplate({
-    ...options,
-    targetDirectory,
-    templateDirectory
-  });
-  await compileMustacheTemplates(targetDirectory, {
-    componentKey,
-    componentName,
-    componentLabel,
-    library,
-    version,
-    type,
-    subtype,
-    description,
-    organization,
-    allowedApplications
-  });
-
-  console.log(chalk.green(`created ${componentKey} component in ${targetDirectory}`));
-};
 
 export default async (options) => {
   showVersion();
@@ -299,16 +304,17 @@ export default async (options) => {
 
   const componentData = data[COMPONENTS_PATH];
 
-  const { library } = componentData;
+  let library;
+  ({ library } = componentData);
   let { organization } = JSON.parse(fs.readFileSync(path.resolve('package.json'), 'utf8'));
 
-  let componentDefaults = await getComponentDefaults();
+  const componentDefaults = await getComponentDefaults();
   componentDefaults.library = library;
 
   if (options.params.length >= 8) {
     const prefix = options.params[3];
     const version = options.params[4];
-    const library = options.params[5];
+    library = options.params[5];
     const allowedApplications = options.params[6];
 
     // overwrite
@@ -365,7 +371,8 @@ export default async (options) => {
     ];
 
     await inquirer.prompt(questions).then(async (answers) => {
-      const { library, version, allowedApplications } = answers;
+      ({library} = answers);
+      const { version, allowedApplications } = answers;
       let { prefix } = answers;
       prefix = prefix.replace(/[^a-zA-Z0-9 ]/g, '');
       await validateCompileAll(

package/src/tasks/delete/helper.js

@@ -27,6 +27,7 @@ export const SOURCE_OF_COMPONENT_TYPES = {
 let library;
 let organization;
 
+
 export const getDeleteComponentsQuestions = async (options) => {
   const defaultPegaServerConfig = await getPegaServerConfig();
 
@@ -54,40 +55,42 @@ export const getLaunchPadFilterQuestions = async () => {
   data = data && JSON.parse(data);
 
   if (!data[COMPONENTS_DIRECTORY_PATH]) {
-    console.error(`${chalk.red.bold('ERROR')} Could not able find components directory path in config.json`);
+    console.error(
+      `${chalk.red.bold('ERROR')} Could not able find components directory path in config.json`
+    );
     process.exit(1);
   }
 
   const componentData = data[COMPONENTS_PATH];
 
-  ({ library } = componentData);
-  ({ organization } = JSON.parse(fs.readFileSync(path.resolve('package.json'), 'utf8')));
+   ({ library } = componentData);
+   ({ organization } = JSON.parse(fs.readFileSync(path.resolve('package.json'), 'utf8')));
 
   return [
-    {
-      name: 'organization',
-      message: 'Enter component organization (required)',
-      default: organization,
-      validate: (value) => {
-        if (value) {
-          return true;
-        }
-        return 'Please provide value for organization';
+  {
+    name: 'organization',
+    message: 'Enter component organization (required)',
+    default: organization,
+    validate: value => {
+      if (value) {
+        return true;
       }
-    },
-    {
-      name: 'library',
-      message: 'Enter library name (required)',
-      default: library,
-      validate: (value) => {
-        if (value) {
-          return true;
-        }
-        return 'Please provide value for library';
+      return 'Please provide value for organization';
+    }
+  },
+  {
+    name: 'library',
+    message: 'Enter library name (required)',
+    default: library,
+    validate: value => {
+      if (value) {
+        return true;
       }
+      return 'Please provide value for library';
     }
+  }
   ];
-};
+}
 
 export const deleteLocalComponents = async (sourceOfComponents, options) => {
   const localComponents = await getComponents();
@@ -125,23 +128,27 @@ export const deleteLocalComponents = async (sourceOfComponents, options) => {
 };
 
 export const deleteServerComponents = async (sourceOfComponents, answers) => {
+
   const defaultPegaServerConfig = await getPegaServerConfig();
   const isLaunchpad = defaultPegaServerConfig.serverType === 'launchpad';
 
+
   if (isLaunchpad) {
     const questions = await getLaunchPadFilterQuestions();
     const lpAnswers = await inquirer.prompt(questions);
 
-    ({ library, organization } = lpAnswers);
+    ({library, organization} = lpAnswers);
   }
 
   const spinner = ora('Fetching components from server').start();
   const data = await getComponentsFromServer(library, organization);
   spinner.stop();
 
+
   let serverComponents;
   if (isLaunchpad) {
     serverComponents = data;
+
   } else {
     try {
       if (typeof data === 'object') {
@@ -154,6 +161,7 @@ export const deleteServerComponents = async (sourceOfComponents, answers) => {
     }
   }
 
+
   if (serverComponents && serverComponents?.length > 0) {
     if (isLaunchpad) {
       const choicesArr = serverComponents.map(({ name: componentName, type, version }) => {

package/src/tasks/delete-all/helper.js

@@ -1,11 +1,10 @@
 import fs from 'fs';
+import path, {join} from 'path';
+
 import chalk from 'chalk';
 import inquirer from 'inquirer';
 import ora from 'ora';
 
-import path from 'path';
-import { join } from 'path';
-
 import {
   deleteInfinityServerComponent,
   deleteLaunchpadServerComponent,
@@ -13,11 +12,9 @@ import {
   getComponents,
   getPegaServerConfig,
   standardizeStr,
-  validateRulesetVersion,
-  sanitize
+  validateRulesetVersion
 } from '../../util.js';
 import { getComponentsFromServer } from '../list/helper.js';
-
 import { TASKS_CONFIG_JSON_FILENAME, COMPONENTS_DIRECTORY_PATH, COMPONENTS_PATH } from '../../constants.js';
 
 export const SOURCE_OF_COMPONENT_TYPES = {
@@ -28,6 +25,7 @@ export const SOURCE_OF_COMPONENT_TYPES = {
 let library;
 let organization;
 
+
 export const getDeleteComponentsQuestions = async (options) => {
   const defaultPegaServerConfig = await getPegaServerConfig();
 
@@ -46,7 +44,6 @@ export const getDeleteComponentsQuestions = async (options) => {
 };
 
 export const getLaunchPadFilterQuestions = async () => {
-  const defaultPegaServerConfig = await getPegaServerConfig();
   const currentDirectory = process.cwd();
   const pegaConfigJsonPath = join(currentDirectory, TASKS_CONFIG_JSON_FILENAME);
 
@@ -54,7 +51,9 @@ export const getLaunchPadFilterQuestions = async () => {
   data = data && JSON.parse(data);
 
   if (!data[COMPONENTS_DIRECTORY_PATH]) {
-    console.error(`${chalk.red.bold('ERROR')} Could not able find components directory path in config.json`);
+    console.error(
+      `${chalk.red.bold('ERROR')} Could not able find components directory path in config.json`
+    );
     process.exit(1);
   }
 
@@ -68,7 +67,7 @@ export const getLaunchPadFilterQuestions = async () => {
       name: 'organization',
       message: 'Enter component organization (required)',
       default: organization,
-      validate: (value) => {
+      validate: value => {
         if (value) {
           return true;
         }
@@ -79,7 +78,7 @@ export const getLaunchPadFilterQuestions = async () => {
       name: 'library',
       message: 'Enter library name (required)',
       default: library,
-      validate: (value) => {
+      validate: value => {
         if (value) {
           return true;
         }
@@ -87,7 +86,7 @@ export const getLaunchPadFilterQuestions = async () => {
       }
     }
   ];
-};
+}
 
 export const deleteLocalComponents = async (sourceOfComponents, options) => {
   const localComponents = await getComponents();
@@ -133,6 +132,7 @@ export const deleteLocalComponents = async (sourceOfComponents, options) => {
 };
 
 export const deleteServerComponents = async (sourceOfComponents, answers) => {
+
   const defaultPegaServerConfig = await getPegaServerConfig();
   const isLaunchpad = defaultPegaServerConfig.serverType === 'launchpad';
 
@@ -140,13 +140,14 @@ export const deleteServerComponents = async (sourceOfComponents, answers) => {
     const questions = await getLaunchPadFilterQuestions();
     const lpAnswers = await inquirer.prompt(questions);
 
-    ({ library, organization } = lpAnswers);
+    ({library, organization} = lpAnswers);
   }
 
   const spinner = ora('Fetching components from server').start();
   const data = await getComponentsFromServer(library, organization);
   spinner.stop();
 
+
   // const serverComponents = isLaunchpad ? data : data.pxResults;
   let serverComponents;
   if (isLaunchpad) {
@@ -163,6 +164,8 @@ export const deleteServerComponents = async (sourceOfComponents, answers) => {
     }
   }
 
+
+
   if (serverComponents && serverComponents?.length > 0) {
     if (isLaunchpad) {
       serverComponents.forEach((component) => {

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

@@ -0,0 +1,21 @@
+module.exports = {
+  verbose: true,
+  moduleFileExtensions: ['js', 'jsx', 'ts', 'tsx'],
+  transform: {
+    '^.+\\.[t|j]sx?$': 'babel-jest'
+  },
+  collectCoverage: true,
+  testPathIgnorePatterns: [],
+  transformIgnorePatterns: [],
+  modulePathIgnorePatterns: [],
+  coveragePathIgnorePatterns: [],
+  collectCoverageFrom: ['./node_modules/@pega/custom-dx-components/src/*.js'],
+  coverageThreshold: {
+    global: {
+      statements: 79,
+      branches: 74,
+      functions: 81,
+      lines: 80
+    }
+  }
+};

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

@@ -27,7 +27,12 @@
     "lint:es": "eslint .",
     "lint:styles": "stylelint \"./**/*.@(js|jsx|ts|tsx)\"",
     "lint:format": "prettier -c .",
-    "lint:spelling": "cspell --no-progress **/*"
+    "lint:spelling": "cspell --no-progress **/*",
+    "test": "echo 'Running functional and unit tests will DELETE existing local components, proceed (y/n)?' && read proceed && if test \"$proceed\" = \"y\"; then npm run test:full; fi ",
+    "test:full": "npm run test:functional && npm run test:unit",
+    "test:functional": "npm run test:functional:local --prefix node_modules/@pega/custom-dx-components",
+    "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",
+    "test:unit": "npm run test:unit:local --prefix node_modules/@pega/custom-dx-components"
   },
     "scriptsComments": {
     "build": "tsc -b tsconfig.build.json",
@@ -46,8 +51,8 @@
   "license": "Enter License",
   "sideEffects": false,
   "dependencies": {
-    "@pega/cosmos-react-core": "^3.2.2",
-    "@pega/cosmos-react-work": "3.2.2",
+    "@pega/cosmos-react-core": "^4.0.1",
+    "@pega/cosmos-react-work": "4.0.1",
     "dayjs": "^1.11.5",
     "polished": "^4.2.2",
     "prop-types": "^15.8.1",
@@ -61,7 +66,7 @@
   },
   "devDependencies": {
     "@pega/configs": "^0.5.3",
-    "@pega/custom-dx-components": "^8.8.20",
+    "@pega/custom-dx-components": "^23.1.10",
     "@pega/eslint-config": "^0.3.2",
     "@storybook/addon-actions": "^6.5.12",
     "@storybook/addon-essentials": "^6.5.12",