@pega/custom-dx-components 0.24.15 → 0.242.1

package/src/tasks/create/templates/Constellation/Template/DETAILS-region/demo.stories.tsx.mustache

@@ -4,8 +4,9 @@
 import type { Meta, StoryObj } from '@storybook/react';
 import { Text, FieldValueList, Button, DateTimeDisplay, useTheme } from '@pega/cosmos-react-core';
 import {{COMPONENT_CLASS_NAME}} from './index';
-import { pyReviewRaw, pyReviewResolved, regionChildrenResolved } from './mock';
+import { pyReviewRaw, pyReviewResolved, regionChildrenResolved, operatorDetails, configProps } from './mock';
 import StatusWorkRenderer from './StatusWork';
+import Operator from './Operator';
 
 const meta: Meta<typeof {{COMPONENT_CLASS_NAME}}> = {
   title: '{{COMPONENT_CLASS_NAME}}',
@@ -19,6 +20,28 @@ const meta: Meta<typeof {{COMPONENT_CLASS_NAME}}> = {
 export default meta;
 type Story = StoryObj<typeof {{COMPONENT_CLASS_NAME}}>;
 
+if (!window.PCore) {
+  window.PCore = {};
+}
+
+window.PCore.getLocaleUtils = () => {
+  return {
+    getLocaleValue: value => {
+      return value;
+    }
+  };
+};
+
+window.PCore.getUserApi = () => {
+  return {
+    getOperatorDetails: () => {
+      return new Promise(resolve => {
+        resolve(operatorDetails);
+      });
+    }
+  };
+};
+
 const Region = props => {
   return <></>;
 };
@@ -58,19 +81,30 @@ const renderField = resolvedProps => {
 
   if (displayAsStatus === true) val = <StatusWorkRenderer value={value} key={key} />;
 
+  const [_label] =
+    label === 'Create operator'
+      ? [configProps.createLabel, configProps.createOperator, configProps.createDateTime]
+      : label === 'Update operator'
+        ? [configProps.updateLabel, configProps.updateOperator, configProps.updateDateTime]
+        : [configProps.resolveLabel, configProps.resolveOperator, configProps.resolveDateTime];
+
   if (label === 'Create Operator')
     val = (
-      <Button
-        variant='link'
-        style={
-          label !== null
-            ? { width: 'max-content', height: theme.components.input.height }
-            : undefined
-        }
-        key={key}
-      >
-        {value.userName}
-      </Button>
+      <Operator
+        label={configProps.hideLabel ? '' : _label}
+        name={configProps.createOperator.userName}
+        id={configProps.createOperator.userId}
+        value={undefined}
+        validatemessage=''
+        hideLabel={false}
+        readOnly={false}
+        required={false}
+        disabled={false}
+        externalUser={undefined}
+        metaObj={undefined}
+        testId=''
+        helperText=''
+      />
     );
 
   if (variant === 'inline') {

package/src/tasks/create/templates/Constellation/Template/DETAILS-region/index.tsx.mustache

@@ -35,7 +35,7 @@ function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}Props) {
   const numRegions = getAllFields(getPConnect)?.length;
   const gridRepeat = "repeat(".concat(numRegions).concat(", 1fr)");
 
-  const gridContainer: GridContainerProps = { colGap: 0 };
+  const gridContainer: GridContainerProps = { colGap: 6 };
   gridContainer.cols = gridRepeat;
   gridContainer.alignItems = 'start';
 
@@ -75,7 +75,7 @@ function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}Props) {
        {children.map((child: any, i: number) => (
         <Flex
           // @ts-ignore
-          container={{ direction: 'column', alignItems: 'normal', colGap: 0, rowGap: 1.5 }}
+          container={{ direction: 'column', alignItems: 'normal', colGap: 1, rowGap: 1.5 }}
           key={`r-${i + 1}`}
         >
           <DetailsRender child={child} />

package/src/tasks/create/templates/Constellation/Template/DETAILS-region/mock.ts.mustache

@@ -233,3 +233,58 @@ export const regionChildrenResolved = [
     key: 'SLA Start Time'
   }
 ];
+
+export const operatorDetails = {
+  data: {
+    pzLoadTime: 'January 18, 2023 10:33:19 AM EST',
+    pzPageNameHash: '_pa1519192551088960pz',
+    pyOperatorInfo: {
+      pyUserName: 'french DigV2',
+      pyPosition: '',
+      pyImageInsKey: '',
+      pySkills: [
+        {
+          pySkillName: '',
+          pzIndexOwnerKey: 'DATA-ADMIN-OPERATOR-ID FRENCHTEST.DIGV2',
+          pySkillRating: 0
+        }
+      ],
+      pyReportToUserName: '',
+      pyReportTo: '',
+      pyOrganization: 'DXIL',
+      pyTitle: '',
+      pyLabel: 'frenchTest.DigV2',
+      pyEmailAddress: 'User@DigV2',
+      pyTelephone: ''
+    }
+  },
+  status: 200,
+  statusText: '',
+  headers: {
+    'content-length': '435',
+    'content-type': 'application/json;charset=UTF-8'
+  },
+  request: {}
+};
+
+export const configProps = {
+  label: 'Create operator',
+  createLabel: 'Created',
+  updateLabel: 'Updated',
+  updateDateTime: '2023-01-16T14:53:33.280Z',
+  createDateTime: '2023-01-16T14:53:33.198Z',
+  updateOperator: {
+    userId: 'admin@mediaco',
+    userName: 'admin'
+  },
+  createOperator: {
+    userId: 'admin@mediaco',
+    userName: 'admin'
+  },
+  resolveLabel: '',
+  resolveOperator: '',
+  resolveDateTime: '',
+  hideLabel: true,
+  key: '_532zx1dah',
+  displayMode: 'LABELS_LEFT'
+};

package/src/tasks/create/templates/Constellation/Template/FORM/index.tsx.mustache

@@ -40,7 +40,7 @@ function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}Props) {
             {children.map((child: any, i: number) => (
               <Flex
                 // @ts-ignore
-                container={{ direction: 'column', alignItems: 'normal', colGap: 0, rowGap: 1.5 }}
+                container={{ direction: 'column', alignItems: 'normal', colGap: 1, rowGap: 1.5 }}
                 key={`r-${i + 1}`}
               >
                 <DetailsRender child={child} />

package/src/tasks/create/templates/Constellation/Template/FORM-region/index.tsx.mustache

@@ -22,7 +22,7 @@ function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}Props) {
 
   const numRegions = children?.length;
   const gridRepeat = "repeat(".concat(numRegions).concat(", 1fr)");
-  const gridContainer = {"colGap" : 1};
+  const gridContainer = {"colGap" : 6};
   // @ts-ignore
   gridContainer.cols = gridRepeat;
   // @ts-ignore
@@ -42,7 +42,7 @@ function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}Props) {
             {children.map((child: any, i: number) => (
               <Flex
                 // @ts-ignore
-                container={{ direction: 'column', alignItems: 'normal', colGap: 0, rowGap: 1.5 }}
+                container={{ direction: 'column', alignItems: 'normal', colGap: 1, rowGap: 1.5 }}
                 key={`r-${i + 1}`}
               >
                 <DetailsRender child={child} />

package/src/tasks/create/templates/Constellation/Widget/PAGE/index.tsx.mustache

@@ -50,6 +50,7 @@ function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}Props) {
   useEffect(() => {
 
     PCore.getDataApiUtils()
+      // @ts-ignore
       .getData(dataViewName, {}, context)
       // @ts-ignore
       .then((response: any) => {

package/src/tasks/create/templates/Launchpad/Field/Icon-Button-URL/index.tsx.mustache

@@ -116,6 +116,7 @@ function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}Props) {
     // only retrieve table data if table is shown
     if (showTable) {
       PCore.getDataPageUtils()
+        // @ts-ignore
         .getDataAsync(dataViewName, context, params, null, null)
         // @ts-ignore
         .then((response: any) => {

package/src/tasks/create/templates/Launchpad/Widget/PAGE/index.tsx.mustache

@@ -50,6 +50,7 @@ function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}Props) {
   useEffect(() => {
 
     PCore.getDataApiUtils()
+      // @ts-ignore
       .getData(dataViewName, {}, context)
       // @ts-ignore
       .then((response: any) => {

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

@@ -17,10 +17,14 @@ import { checkPathAccess, showVersion ,
   getComponents,
   getComponentDefaults,
   sanitize,
-  validateSemver
+  validateSemver,
+  updateComponentDefaultLibrary,
+  updateComponentDefaultVersion,
+  copyFileToShared,
+  getLibraryBased
 } from '../../util.js';
 
-import { COMPONENT_SCHEMA, COMPONENTS_DIRECTORY_PATH, TASKS_CONFIG_JSON_FILENAME, COMPONENTS_PATH, CATEGORY_CONSTELLATION } from '../../constants.js';
+import { COMPONENT_SCHEMA, COMPONENTS_DIRECTORY_PATH, TASKS_CONFIG_JSON_FILENAME, COMPONENTS_PATH, CATEGORY_CONSTELLATION, SHARED_FILE_NAMES } from '../../constants.js';
 
 export const DXCB_CONFIG_INTERNAL_JSON_FILENAME = 'src/dxcb.config.json';
 
@@ -28,6 +32,8 @@ const pegaConfigJsonPath = path.join(path.resolve(), TASKS_CONFIG_JSON_FILENAME)
 
 const copy = promisify(ncp);
 
+const isLibraryBased = await getLibraryBased();
+
 const copyComponentTemplate = async (options) => {
   if (options.targetDirectory) {
     return copy(options.templateDirectory, options.targetDirectory, {
@@ -99,6 +105,10 @@ export const compileMustacheTemplates = async (
     allowedApplications = [].concat(allowedApplications);
   }
 
+  const orgLib = organization.concat("_").concat(library);
+  const componentLabelOrgLib = componentLabel.concat(` (${orgLib})`);
+  const desciptionOrgLib = description == null || description === "" ? componentLabelOrgLib : description.concat(` (${orgLib})`);
+
   allowedApplications = allowedApplications.filter((el) => !!el.trim()).map((el) => el.trim());
   files.forEach((file) => {
     const filePath = path.join(componentDirectory, file);
@@ -106,7 +116,7 @@ export const compileMustacheTemplates = async (
     const output = compileMustacheTemplate(filePath, {
       COMPONENT_KEY: componentKey,
       COMPONENT_NAME: componentName,
-      COMPONENT_LABEL: componentLabel,
+      COMPONENT_LABEL: isLibraryBased ? componentLabelOrgLib : componentLabel,
       COMPONENT_CLASS_NAME: componentClassName,
       ORGANIZATION: organization,
       VERSION: version,
@@ -114,14 +124,46 @@ export const compileMustacheTemplates = async (
       ALLOWEDAPPS: JSON.stringify(allowedApplications),
       TYPE: type,
       SUB_TYPE: JSON.stringify(mustacheSubType),
-      DESCRIPTION: description || componentLabel,
+      DESCRIPTION: isLibraryBased ? desciptionOrgLib : description,
       IS_TEMPLATE: isTemplate,
       IS_PICKLIST: isPicklist,
       IS_BOOLEAN: isBool,
       IS_PHONE: isPhone
     });
-    fs.writeFileSync(filePath, output);
-    fs.renameSync(filePath, filePath.replace('.mustache', ''));
+
+    const realFileName = file.replace('.mustache', '');
+    if ( isLibraryBased) {
+      if (SHARED_FILE_NAMES.includes(realFileName)) {
+        // write to shared
+        copyFileToShared(realFileName, output);
+
+        // delete file from main components
+        fs.rmSync(filePath);
+      }
+      else if (realFileName === "index.tsx" || realFileName === "index.ts" ) {
+        // going to search for shared file names an change the import path
+        let newOutput = output;
+        for (const index in SHARED_FILE_NAMES) {
+          const sFileName = SHARED_FILE_NAMES[index].split(".")[0];
+          const orgPath = "./".concat(sFileName);
+          const newPath = "../shared/".concat(sFileName);
+
+          newOutput = newOutput.replaceAll(orgPath, newPath);
+        }
+        fs.writeFileSync(filePath, newOutput);
+        fs.renameSync(filePath, filePath.replace('.mustache', ''));
+      }
+      else {
+        fs.writeFileSync(filePath, output);
+        fs.renameSync(filePath, filePath.replace('.mustache', ''));
+      }
+
+    }
+    else {
+      fs.writeFileSync(filePath, output);
+      fs.renameSync(filePath, filePath.replace('.mustache', ''));
+    }
+
   });
 };
 
@@ -148,6 +190,15 @@ export const validateCompile = async (
   const isLaunchpad = defaultPegaServerConfig.serverType === 'launchpad';
   const originalFramework = framework;
 
+  // check of library or version has changed from default, if so, update componentDefaults
+  const componentDefaults = await getComponentDefaults();
+  if (componentDefaults.library == null || componentDefaults.library !== library) {
+    await updateComponentDefaultLibrary(library);
+  }
+  if (componentDefaults.version == null || componentDefaults.version !== version) {
+    await updateComponentDefaultVersion(version);
+  }
+
   if (isLaunchpad) {
     framework = "Launchpad";
 

package/src/tasks/delete/index.js

@@ -1,9 +1,11 @@
 import inquirer from 'inquirer';
 
-import { showVersion } from '../../util.js';
+import { showVersion, getLibraryBased } from '../../util.js';
 
 import { deleteLocalComponents, SOURCE_OF_COMPONENT_TYPES, deleteServerComponents, getDeleteComponentsQuestions } from './helper.js';
 
+const isLibraryBased = await getLibraryBased();
+
 const deleteComponentsFn = async (sourceOfComponents, answers, options) => {
   switch (sourceOfComponents) {
     case SOURCE_OF_COMPONENT_TYPES.LOCAL: {
@@ -25,7 +27,11 @@ export default async (options) => {
   showVersion();
 
   let sourceOfComponentsOption = SOURCE_OF_COMPONENT_TYPES.LOCAL;
-  if (options.params[3] === SOURCE_OF_COMPONENT_TYPES.LOCAL) {
+  if (isLibraryBased) {
+    sourceOfComponentsOption = SOURCE_OF_COMPONENT_TYPES.LOCAL;
+    await deleteComponentsFn(sourceOfComponentsOption, null, options);
+  }
+  else if (options.params[3] === SOURCE_OF_COMPONENT_TYPES.LOCAL) {
     sourceOfComponentsOption = options.params[3];
     await deleteComponentsFn(sourceOfComponentsOption, null, options);
   } else if (options.params[3] === SOURCE_OF_COMPONENT_TYPES.SERVER) {

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

@@ -1,9 +1,11 @@
 import inquirer from 'inquirer';
 
-import { showVersion } from '../../util.js';
+import { showVersion, getLibraryBased } from '../../util.js';
 
 import { deleteLocalComponents, SOURCE_OF_COMPONENT_TYPES, deleteServerComponents, getDeleteComponentsQuestions } from './helper.js';
 
+const isLibraryBased = await getLibraryBased();
+
 const deleteComponentsFn = async (sourceOfComponents, answers, options) => {
   switch (sourceOfComponents) {
     case SOURCE_OF_COMPONENT_TYPES.LOCAL: {
@@ -25,7 +27,11 @@ export default async (options) => {
   showVersion();
 
   let sourceOfComponentsOption = SOURCE_OF_COMPONENT_TYPES.LOCAL;
-  if (options.params[3] === SOURCE_OF_COMPONENT_TYPES.LOCAL) {
+  if (isLibraryBased) {
+    sourceOfComponentsOption = SOURCE_OF_COMPONENT_TYPES.LOCAL;
+    await deleteComponentsFn(sourceOfComponentsOption, null, options);
+  }
+  else if (options.params[3] === SOURCE_OF_COMPONENT_TYPES.LOCAL) {
     sourceOfComponentsOption = options.params[3];
     await deleteComponentsFn(sourceOfComponentsOption, null, options);
   } else if (options.params[3] === SOURCE_OF_COMPONENT_TYPES.SERVER) {

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

@@ -0,0 +1,75 @@
+import fs from 'fs';
+import path from 'path';
+
+import AdmZip from 'adm-zip';
+import chalk from 'chalk';
+
+import {
+  getPegaServerConfig,
+  checkPathAccess,
+  getComponentDefaults,
+} from '../../util.js';
+import { TASKS_CONFIG_JSON_FILENAME, COMPONENTS_DIRECTORY_PATH, COMPONENTS_PATH } from '../../constants.js';
+
+export const SOURCE_OF_COMPONENT_TYPES = {
+  SERVER: 'Server',
+  LOCAL: 'Local'
+};
+
+
+const pegaConfigJsonPath = path.join(path.resolve(), TASKS_CONFIG_JSON_FILENAME);
+
+export const getOrgLib = async () => {
+  const defaultPegaConfig = await getPegaServerConfig();
+
+  await checkPathAccess(pegaConfigJsonPath);
+
+  let data = fs.readFileSync(pegaConfigJsonPath, { encoding: 'utf8' });
+  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`);
+    process.exit(1);
+  }
+
+  const componentData = data[COMPONENTS_PATH];
+
+  let library;
+  ({ library } = componentData);
+  let { organization } = JSON.parse(fs.readFileSync(path.resolve('package.json'), 'utf8'));
+
+  const componentDefaults = await getComponentDefaults();
+  componentDefaults.library = library;
+  componentDefaults.organization = organization;
+
+  return componentDefaults;
+}
+
+export const getDeleteLibraryQuestions = async ()  => {
+  const defaultPegaConfig = await getPegaServerConfig();
+
+
+  return [
+    {
+      name: 'sourceOfLibrary',
+      type: 'rawlist',
+      message: 'Delete library from Server or Local ?',
+      choices: Object.values(SOURCE_OF_COMPONENT_TYPES),
+      default: defaultPegaConfig.sourceOfComponents,
+    }
+  ];
+};
+
+
+export const getLibraryVersionQuestion = async(libraryName, libVersions) => {
+
+    return [
+      {
+        name: 'version',
+        type: 'rawlist',
+        message: `Select ${chalk.green.bold(`${libraryName}`)} library version (or ALL) to delete`,
+        choices: libVersions
+      }
+    ];
+
+}

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

@@ -0,0 +1,97 @@
+import inquirer from 'inquirer';
+
+import chalk from 'chalk';
+
+import { showVersion, getC11NB2STokenAndStaticServer, getLibraryVersions, getLibraryBased, deleteLocalLibrary, deleteLocalLibraryVersion } from '../../util.js';
+
+
+import { deleteLib } from '@pega/constellation-dx-components-build-utils/index.js';
+
+import { getDeleteLibraryQuestions, getLibraryVersionQuestion, getOrgLib, SOURCE_OF_COMPONENT_TYPES } from './helper.js';
+
+const isLibraryBased = await getLibraryBased();
+
+export default async (options) => {
+  if (!isLibraryBased) {
+    console.log(`Command only supported for ${chalk.bold.green('library based')} components.`)
+    process.exit();
+  }
+
+  showVersion();
+
+  let sourceOfLibrary;
+  let organization;
+  let library;
+  let version;
+  let devBuild;
+
+  const compDef = await getOrgLib();
+  organization = compDef.organization;
+  library = compDef.library;
+  const libraryName = organization.concat("_").concat(library);
+
+  if (options.params.length >= 5) {
+    sourceOfLibrary = options.param[3];
+    version = options.params[4];
+
+  }
+  else {
+
+    const questions = await getDeleteLibraryQuestions();
+    const answers = await inquirer.prompt(questions);
+    ({ sourceOfLibrary } = answers);
+
+    if (sourceOfLibrary === SOURCE_OF_COMPONENT_TYPES.LOCAL ) {
+      // local
+
+      let libVersions = await getLibraryVersions(libraryName);
+
+      if (libVersions.length > 0) {
+        // ALL option
+        libVersions.unshift('ALL');
+
+        const versionQuestions = await getLibraryVersionQuestion(libraryName, libVersions);
+        const versionAnswers = await inquirer.prompt(versionQuestions);
+
+        ({version} = versionAnswers);
+
+      }
+      else {
+        // No library with that name
+        console.log(chalk.redBright(`No local library named: ${libraryName} exists.`));
+        process.exit(1);
+
+      }
+
+    }
+
+  }
+
+
+  if (sourceOfLibrary === SOURCE_OF_COMPONENT_TYPES.LOCAL ) {
+    if (version === 'ALL') {
+      await deleteLocalLibrary(libraryName);
+    }
+    else {
+      await deleteLocalLibraryVersion(libraryName, version);
+    }
+
+  }
+  else {
+    // server
+    const tokenAndStaticServer = await getC11NB2STokenAndStaticServer();
+
+    if (tokenAndStaticServer.C11NB2S === undefined) {
+      console.log(chalk.redBright("Need to authenticate, missing services token.\nDeleting a library requires authentication to acquire a token to delete."));
+      process.exit(1);
+    }
+    await deleteLib(tokenAndStaticServer.C11NB2S, tokenAndStaticServer.appStaticContentServer);
+
+  }
+
+
+
+
+
+  return true;
+};

package/src/tasks/index.js

@@ -2,17 +2,22 @@ export { default as createComponent } from './create/index.js';
 export { default as createAllComponents } from './create-all/index.js';
 export { default as deleteComponent } from './delete/index.js';
 export { default as deleteAllComponents } from './delete-all/index.js';
+export { default as deleteLibrary } from './delete-lib/index.js';
 export { default as initProject } from './init/index.js';
 export { default as promoteWebPack } from './promote-webpack/index.js';
 export { default as publishComponent } from './publish/index.js';
 export { default as publishAllComponents } from './publish-all/index.js';
+export { default as publishLibrary } from './publish-lib/index.js';
 export { default as renameComponent } from './rename/index.js';
+export { default as renameLibrary } from './rename-lib/index.js';
 export { default as revertWebPack } from './revert-webpack/index.js';
 export { default as listComponents } from './list/index.js';
+export { default as listLibrary } from './list-lib/index.js';
 export { default as updateComponent } from './update/index.js';
 export { default as validate } from './validator/index.js';
 export { default as authenticate } from './authenticate/index.js';
 export { default as upgrade } from './upgrade/index.js';
 export { default as buildComponent } from './build-comp/index.js';
 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';

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

@@ -11,16 +11,21 @@
     "authenticate": "custom-dx-components authenticate",
     "buildComponent": "custom-dx-components buildComponent",
     "buildAllComponents": "custom-dx-components buildAllComponents",
+    "buildLibrary": "custom-dx-components buildLibrary",
     "create": "custom-dx-components create",
     "createAll": "custom-dx-components createAll",
     "publish": "custom-dx-components publish",
     "publishAll": "custom-dx-components publishAll",
+    "publishLibrary": "custom-dx-components publishLibrary",
     "rename": "custom-dx-components rename",
+    "renameLibrary": "custom-dx-components renameLibrary",
     "list": "custom-dx-components list",
+    "listLibrary": "custom-dx-components listLibrary",
     "validate-schema": "custom-dx-components validateSchema",
     "update": "custom-dx-components update",
     "delete": "custom-dx-components delete",
     "deleteAll": "custom-dx-components deleteAll",
+    "deleteLibrary": "custom-dx-components deleteLibrary",
     "promoteWebPack": "custom-dx-components promoteWebPack",
     "revertWebPack": "custom-dx-components revertWebPack",
     "_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",
@@ -49,30 +54,47 @@
   ],
   "author": "",
   "license": "Enter License",
-  "sideEffects": false,
- "dependencies": {
-    "@pega/cosmos-react-condition-builder": "^6.0.3",
-    "@pega/cosmos-react-core": "^6.0.3",
-    "@pega/cosmos-react-work": "^6.0.3",
+  "dependencies": {
+    "@babel/cli": "^7.23.0",
+    "@babel/core": "^7.23.3",
+    "@babel/preset-env": "^7.23.3",
+    "@babel/preset-react": "^7.23.3",
+    "@material-ui/core": "^4.12.4",
+    "@pega/constellation-dx-components-build-utils": "^1.0.1-dev-0.10",
+    "@pega/cosmos-react-condition-builder": "7.0.0-build.6.0",
+    "@pega/cosmos-react-core": "7.0.0-build.6.0",
+    "@pega/cosmos-react-work": "7.0.0-build.6.0",
+    "babel-loader": "^9.1.3",
     "dayjs": "^1.11.10",
+    "lodash": "^4.17.21",
     "lodash.get": "^4.4.2",
+    "npm": "^10.5.0",
     "polished": "^4.2.2",
     "prop-types": "^15.8.1",
     "react": "^17.0.2",
     "react-autosuggest": "^10.1.0",
     "react-dom": "^17.0.2",
-    "react-is": "^17.0.2",
+    "react-is": "^18.2.0",
     "react-player": "^2.10.1",
     "react-redux": "^7.2.6",
+    "serve": "^14.2.1",
+    "shelljs": "^0.8.5",
     "styled-components": "^5.3.5",
-    "ts-loader": "^9.5.1"
+    "ts-loader": "^9.5.1",
+    "webpack": "5.74.0",
+    "webpack-cli": "^5.1.4"
   },
   "devDependencies": {
+    "@babel/cli": "^7.23.0",
+    "@babel/core": "^7.23.3",
+    "@babel/preset-env": "^7.23.3",
+    "@babel/preset-react": "^7.23.3",
     "@pega/configs": "^0.6.0",
-    "@pega/custom-dx-components": "0.24.15",
-    "@pega/pcore-pconnect-typedefs": "~3.0.0",
+    "@pega/custom-dx-components": "0.242.1",
+    "@pega/pcore-pconnect-typedefs": "2.0.0",
     "@storybook/addon-actions": "^7.6.7",
     "@storybook/addon-essentials": "^7.6.7",
+    "@storybook/addon-knobs": "^7.0.2",
     "@storybook/addon-links": "^7.6.7",
     "@storybook/addon-storysource": "^7.6.7",
     "@storybook/react": "^7.6.7",
@@ -84,6 +106,7 @@
     "@types/react-dom": "^17.0.11",
     "@types/styled-components": "^5.1.34",
     "@typescript-eslint/eslint-plugin": "^5.6.0",
+    "babel-loader": "^9.1.3",
     "eslint": "^8.56.0",
     "eslint-plugin-import": "^2.29.1",
     "eslint-plugin-jest": "^27.6.1",