@pega/dx-component-builder-sdk 24.2.14 → 25.1.11

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

@@ -32,7 +32,10 @@ import {
   getComponents,
   getComponentDefaults,
   sanitize,
-  validateSemver
+  validateSemver,
+  getStandaloneMaxPrefixCount,
+  getStandaloneMaxLibraryFromPrefixCount,
+  updateComponentDefaultLibrary
 } from '../../util.js';
 import { COMPONENT_SCHEMA } from '../../constants.js';
 
@@ -68,8 +71,7 @@ export const compileMustacheTemplates = async (
     type,
     subtype,
     description,
-    organization,
-    allowedApplications
+    organization
   }
 ) => {
   const files = fs.readdirSync(componentDirectory);
@@ -116,19 +118,19 @@ export const compileMustacheTemplates = async (
 
   const isPicklist = subtype === 'Picklist';
 
-  if (allowedApplications.trim() === '') {
-    allowedApplications = [];
-  } else {
-    if (allowedApplications.indexOf(',') !== -1) {
-      allowedApplications = allowedApplications.split(',');
-    }
-    allowedApplications = [].concat(allowedApplications);
-  }
+  // if (allowedApplications.trim() === '') {
+  //   allowedApplications = [];
+  // } else {
+  //   if (allowedApplications.indexOf(',') !== -1) {
+  //     allowedApplications = allowedApplications.split(',');
+  //   }
+  //   allowedApplications = [].concat(allowedApplications);
+  // }
 
   const componentKeyKebab = convertIntoKebabCase(convertIntoPascalCase(componentKey));
   const framework = await getFramework();
 
-  allowedApplications = allowedApplications.filter(el => !!el.trim()).map(el => el.trim());
+  // allowedApplications = allowedApplications.filter(el => !!el.trim()).map(el => el.trim());
   files.forEach(file => {
     const filePath = path.join(componentDirectory, file);
 
@@ -141,7 +143,6 @@ export const compileMustacheTemplates = async (
       ORGANIZATION: organization,
       VERSION: version,
       LIBRARY: library,
-      ALLOWEDAPPS: JSON.stringify(allowedApplications),
       TYPE: type,
       SUB_TYPE: JSON.stringify(mustacheSubType),
       DESCRIPTION: description || componentLabel,
@@ -176,7 +177,6 @@ export const validateCompileAll = async (
     prefix,
     library,
     version,
-    allowedApplications,
     organization
   },
   options,
@@ -184,6 +184,12 @@ export const validateCompileAll = async (
 
 ) => {
 
+  // update defaults when changes
+  const configDef = await getComponentDefaults();
+  if (configDef.library == null || configDef.library !== library) {
+    await updateComponentDefaultLibrary(library);
+  }
+
 
   for (let fieldIdx in COMPONENT_SCHEMA.subtype.field) {
     const type = "Field";
@@ -203,8 +209,7 @@ export const validateCompileAll = async (
         version,
         type,
         subtype,
-        description,
-        allowedApplications
+        description
       },
       options
     )
@@ -235,8 +240,7 @@ export const validateCompileAll = async (
         version,
         type,
         subtype,
-        description,
-        allowedApplications
+        description
       },
       options
     )
@@ -266,8 +270,7 @@ export const validateCompileAll = async (
         version,
         type,
         subtype,
-        description,
-        allowedApplications
+        description
       },
       options
     )
@@ -287,8 +290,7 @@ export const validateCompile = async (
     framework,
     type,
     subtype,
-    description,
-    allowedApplications
+    description
   },
   options,
   onlyCompanion = false
@@ -387,8 +389,7 @@ export const validateCompile = async (
       type,
       subtype,
       description,
-      organization,
-      allowedApplications
+      organization
     });
   }
 
@@ -407,8 +408,7 @@ export const validateCompile = async (
     type,
     subtype,
     description,
-    organization,
-    allowedApplications
+    organization
   });
 
   if (!onlyCompanion) {
@@ -445,7 +445,6 @@ export default async options => {
     const prefix = options.params[3];
     const version = options.params[4];
     const library = options.params[5];
-    const allowedApplications = options.params[6];
 
     // overwrite
     organization = options.params[7];
@@ -455,16 +454,30 @@ export default async options => {
         prefix,
         library,
         version,
-        allowedApplications,
         organization
       },
       options
     );
   } else {
+    const maxPrefixCount = await getStandaloneMaxPrefixCount();
     const questions = [
       {
         name: 'prefix',
-        message: 'Enter prefix label'
+        message: `Enter prefix label (${maxPrefixCount} max chars)`,
+          validate: value => {
+          /* value should not be empty
+          It should not start with a number
+          Only case-insensitive alphanumeric values are allowed
+        */
+          if (value && !/^\d/.test(value) ) {
+            if (value.length > maxPrefixCount) {
+              return `${value.length - maxPrefixCount} too many characters.`
+            }
+            return true;
+          }
+
+          return 'Only alphanumeric values are allowed, starting with alphabets';
+        }
       },
       {
         name: 'version',
@@ -476,10 +489,17 @@ export default async options => {
           }
           return 'Please provide semver compatible version e.g 0.0.1';
         }
-      },
+      }
+    ];
+
+    const answers = await inquirer.prompt(questions);
+    const maxLibChars = await getStandaloneMaxLibraryFromPrefixCount(answers.prefix);
+
+    const libQuestions = [
+
       {
         name: 'library',
-        message: 'Enter library name (required)',
+        message: `Enter library name (required) (${maxLibChars} max chars)`,
         default: componentDefaults.library,
         validate: value => {
           /* value should not be empty
@@ -488,37 +508,30 @@ export default async options => {
             Only case-insensitive alphanumeric values are allowed
           */
           if (value && !/^\d/.test(value) && value === sanitize(value)) {
+            if (value.length > maxLibChars) {
+              return `${value.length - maxLibChars} too many characters.`
+            }
             return true;
           }
           return 'Only alphanumeric values are allowed, starting with alphabets';
         }
-      },
-      {
-        name: 'allowedApplications',
-        message: 'Please enter the application names to be supported (comma-separated). ',
-        suffix: 'Keep empty for all applications'
       }
     ];
 
-    await inquirer.prompt(questions).then(async answers => {
-      const {
-        library,
-        version,
-        allowedApplications
-      } = answers;
-      let { prefix } = answers;
-      prefix = prefix.replace(/\W+/g, "");
-      await validateCompileAll(
-        {
-          prefix,
-          library,
-          version,
-          allowedApplications,
-          organization
-        },
-        options
-      );
-    });
+    const libAnswers = await inquirer.prompt(libQuestions);
+    let { prefix } = answers;
+    prefix = prefix.replace(/\W+/g, "");
+
+
+    await validateCompileAll(
+      {
+        prefix,
+        library : libAnswers.library,
+        version : answers.version,
+        organization
+      },
+      options
+    );
   }
 
 

package/src/tasks/validator/index.js

@@ -39,6 +39,8 @@ const allowedOverrideSubtypes = [
     ...COMPONENT_SCHEMA.subtype.template.map(({ value }) => value),
     ...COMPONENT_SCHEMA.subtype.widget.map(({ value }) => value)
   ]),
+  'Text-Location',
+  'SEARCH',
   'ACTION',
   'DATA_CAPTURE',
   'SUMMARY',
@@ -368,8 +370,7 @@ export default async (option, category = CATEGORY_CUSTOM) => {
   let data;
   try {
     data = JSON.parse(configData);
-  }
-  catch (er) {
+  } catch (er) {
     throw new Error(`Invalid schema json in config.json: ${er}`);
   }
 
@@ -415,8 +416,27 @@ export default async (option, category = CATEGORY_CUSTOM) => {
           throw new Error(`Invalid: Error occurred in validating ${componentToValidate}`);
         }
       }
+
+      if (data.description === "") {
+        throw new Error(`Invalid schema json in config.json: 'description' cannot be blank.`);
+        process.exit(1);
+      }
+
+      if (data.componentKey !== componentToValidate) {
+         throw new Error (`${chalk.redBright(`Error: Invalid folder name or componentKey in config.json for component '${data.name}'.\n --> Component folder name: '${componentToValidate}' must match component key '${data.componentKey}'.\n --> NOTE: Values are case sensitve.`)}`);
+      }
+
+      if (data.name !== componentToValidate) {
+         throw new Error (`${chalk.redBright(`Error: Invalid folder name or name in config.json for component '${data.name}'.\n --> Component folder name: '${componentToValidate}' must match name '${data.name}'.\n --> NOTE: Values are case sensitve.`)}`);
+      }
+
+
     }
 
+
+
+
+
     console.log(`${chalk.bold.green(componentToValidate)} schema is valid`);
   } else {
     // eslint-disable-next-line no-lonely-if

package/src/util.js

@@ -41,7 +41,8 @@ import {
   DXCB_COMPONENT_DEFAULTS,
   SERVER_CONFIG,
   SERVER_REST_URL,
-  JEST_TESTS_FUNCTIONAL_PATH
+  JEST_TESTS_FUNCTIONAL_PATH,
+  MAX_RFT_CHARS
 } from './constants.js';
 
 export const DXCB_CONFIG_INTERNAL_JSON_FILENAME = 'src/dxcb.config.json';
@@ -85,6 +86,23 @@ export const updateComponentsDirectoryPath = async () => {
 
 
 
+}
+
+export const updateComponentDefaultLibrary = async (library) => {
+  const currentDirectory = process.cwd();
+  const pegaConfigJsonPath = join(currentDirectory, SDK_CONFIG_JSON_FILENAME);
+
+  await checkPathAccess(pegaConfigJsonPath);
+
+  let data = fs.readFileSync(pegaConfigJsonPath, { encoding: 'utf8' });
+  data = JSON.parse(data);
+
+  let componentsDefault = data.dxcbConfig.componentDefaults;
+  componentsDefault.library = library;
+
+
+  fs.writeFileSync(pegaConfigJsonPath, JSON.stringify(data, null, 4),  { encoding: 'utf8',flag:'w' });
+
 }
 
 export const visualLCCategory = (category) => {
@@ -761,9 +779,30 @@ export const showVersion = () => {
 
     const nodeMajorVersion = parseInt(arNodeVersion[0]);
     const nodeMinorVersion = parseInt(arNodeVersion[1]);
-
-    if (nodeMajorVersion < 18) {
-      console.log(chalk.redBright("DX Component Builder - SDK requires node v18 or greater, current version: " + process.version));
+    const nodePatchVersion = parseInt(arNodeVersion[2]);
+
+    if (nodeMajorVersion < 24) {
+      console.log(
+        chalk.redBright(
+          `DX Component Builder SDK - requires node v24.4.1 or greater, current version: ${process.version}`
+        )
+      );
+      process.exit(1);
+    }
+    else if ( nodeMajorVersion == 24 && nodeMinorVersion < 4) {
+      console.log(
+        chalk.redBright(
+          `DX Component Builder SDK - requires node v24.4.1 or greater, current version: ${process.version}`
+        )
+      );
+      process.exit(1);
+    }
+    else if (nodeMajorVersion == 24 && nodeMinorVersion == 4 && nodePatchVersion < 1 ) {
+      console.log(
+        chalk.redBright(
+          `DX Component Builder SDK - requires node v24.4.1 or greater, current version: ${process.version}`
+        )
+      );
       process.exit(1);
     }
 };
@@ -795,6 +834,52 @@ export const getJestFunctionalTestList = async(whichTests) => {
 
 }
 
+export const getStandaloneMaxComponentNameCount = async() => {
+  let count = MAX_RFT_CHARS;
+  const configDef = await getComponentDefaults();
+  const currentOrgLib = `${configDef.organization}_${configDef.library}`;
+  const orgLibCount = currentOrgLib.length + 1;
+
+  count = count - orgLibCount; // 9 chars for trailing hash
+
+  return count;
+
+}
+
+export const getStandaloneMaxLibraryCount = async(componentName) => {
+
+  let count = MAX_RFT_CHARS;
+  const configDef = await getComponentDefaults();
+  const orgComp = `${configDef.organization}__${componentName}`;
+  const orgCompCount = orgComp.length + 1;
+
+  count = count - orgCompCount; // 9 chars for trailing hash
+
+  return count;
+
+}
+
+
+export const getStandaloneMaxPrefixCount = async() => {
+  // TwoColumnDetails is 16 chars
+  return (await getStandaloneMaxComponentNameCount() - 16);
+}
+
+export const getStandaloneMaxLibraryFromPrefixCount = async(componentName) => {
+  return (await getStandaloneMaxLibraryCount(componentName) - 16);
+}
+
+export const isComponentValidLength = (componentKey) => {
+
+  const configDef = getConfigDefaults();
+  const componentName = componentKey.replace(configDef.currentOrgLib + "_", "");
+  if (componentName.length <= getMaxComponentNameCount()) {
+    return true;
+  }
+
+  return false;
+}
+
 export const getOOTBComponents = async () => {
   return new Promise((resolve, reject) => {
     fs.readFile(OOTB_COMPONENTS, 'utf-8', async (err, data) => {

package/tests/assets/sdk-r/components/create/custom-constellation/field/Pega_DXIL_MyTestText/demo.stories.tsx

@@ -1,6 +1,5 @@
 
 /* eslint-disable react/jsx-no-useless-fragment */
-// @ts-nocheck
 import { useState } from 'react';
 import type { Meta, StoryObj } from '@storybook/react';
 

package/tests/assets/sdk-r/components/create/custom-sdk/field/Pega_DXIL_MyTestText/config.json

@@ -5,7 +5,6 @@
   "organization": "Pega",
   "version": "0.0.1",
   "library": "DXIL",
-  "allowedApplications": [],
   "componentKey": "Pega_DXIL_MyTestText",
   "type": "Field",
   "subtype": "Text",

package/tests/assets/sdk-r/components/create/custom-sdk/field/Pega_DXIL_MyTestText/mock.ts

@@ -1,4 +1,3 @@
-// eslint-disable-next-line import/prefer-default-export
 export const configProps = {
   value: '',
   label: 'Text Sample',

package/tests/assets/sdk-r/components/create/override-sdk/designSystemExtension/Banner/Banner.css

@@ -8,7 +8,7 @@
 
 .background-style {
   background-color: transparent;
-  color: rgb(0, 0, 0);
+  color: var(--banner-text-color);
   width: 100%;
   height: 100%;
   text-align: center;

package/tests/assets/sdk-r/components/create/override-sdk/designSystemExtension/Banner/Banner.tsx

@@ -1,4 +1,4 @@
-import Grid from '@mui/material/Grid';
+import Grid2 from '@mui/material/Grid2';
 import './Banner.css';
 
 // AlertBanner is one of the few components that does NOT have getPConnect.
@@ -37,14 +37,17 @@ export default function Banner(props: BannerProps) {
           </div>
         </div>
       </div>
-      <Grid container item xs={12} className='banner-layout' spacing={1}>
-        <Grid item xs={variantMap[variant][0]} style={{ padding: '1em' }}>
+      <Grid2 container size={12} className='banner-layout' spacing={1}>
+        <Grid2
+          size={{ xs: variantMap[variant][0] }}
+          style={{ padding: '1rem', backgroundColor: 'var(--app-form-bg-color)', borderRadius: '16px', height: 'fit-content' }}
+        >
           {a}
-        </Grid>
-        <Grid item xs={variantMap[variant][1]} style={{ padding: '1em' }}>
+        </Grid2>
+        <Grid2 size={{ xs: variantMap[variant][1] }} style={{ padding: '0rem 1rem' }}>
           {b}
-        </Grid>
-      </Grid>
+        </Grid2>
+      </Grid2>
     </div>
   );
 }

package/tests/assets/sdk-r/components/create/override-sdk/designSystemExtension/CaseSummaryFields/CaseSummaryFields.css

@@ -7,7 +7,6 @@
   font-weight: bold;
   line-height: calc(0.5rem * 2.5);
   height: calc(0.5rem * 2.5);
-  padding: 0 0.5rem;
   text-transform: uppercase;
 }
 

package/tests/assets/sdk-r/components/create/override-sdk/designSystemExtension/CaseSummaryFields/CaseSummaryFields.tsx

@@ -1,6 +1,6 @@
 import { useState, useEffect } from 'react';
 import isDeepEqual from 'fast-deep-equal/react';
-import Grid from '@mui/material/Grid';
+import Grid2 from '@mui/material/Grid2';
 import TextField from '@mui/material/TextField';
 
 import { getDateFormatInfo } from '@pega/react-sdk-components/lib/components/helpers/date-format-utils';
@@ -34,7 +34,7 @@ export default function CaseSummaryFields(props: CaseSummaryFieldsProps) {
 
     if (field.config.value === null || field.config.value === '') {
       // Special handling for missing value
-      // eslint-disable-next-line sonarjs/no-small-switch
+
       switch (fieldTypeLower) {
         case 'caseoperator':
           return <Operator {...field.config} />;
@@ -46,9 +46,11 @@ export default function CaseSummaryFields(props: CaseSummaryFieldsProps) {
               variant='standard'
               value='---'
               label={field.config.label}
-              InputProps={{
-                readOnly: true,
-                disableUnderline: true
+              slotProps={{
+                input: {
+                  readOnly: true,
+                  disableUnderline: true
+                }
               }}
             />
           );
@@ -65,9 +67,11 @@ export default function CaseSummaryFields(props: CaseSummaryFieldsProps) {
             variant='standard'
             value={field.config.value}
             label={field.config.label}
-            InputProps={{
-              readOnly: true,
-              disableUnderline: true
+            slotProps={{
+              input: {
+                readOnly: true,
+                disableUnderline: true
+              }
             }}
           />
         );
@@ -82,9 +86,11 @@ export default function CaseSummaryFields(props: CaseSummaryFieldsProps) {
             variant='standard'
             value={fieldValue}
             label={fieldLabel}
-            InputProps={{
-              readOnly: true,
-              disableUnderline: true
+            slotProps={{
+              input: {
+                readOnly: true,
+                disableUnderline: true
+              }
             }}
           />
         );
@@ -97,9 +103,11 @@ export default function CaseSummaryFields(props: CaseSummaryFieldsProps) {
             className='psdk-csf-status-style'
             value={field.config.value}
             label={field.config.label}
-            InputProps={{
-              readOnly: true,
-              disableUnderline: true
+            slotProps={{
+              input: {
+                readOnly: true,
+                disableUnderline: true
+              }
             }}
           />
         );
@@ -112,11 +120,11 @@ export default function CaseSummaryFields(props: CaseSummaryFieldsProps) {
               variant='standard'
               value={field.config.value}
               label={field.config.label}
-              InputProps={{
-                readOnly: true,
-                inputProps: {
-                  style: { cursor: 'pointer' },
-                  disableUnderline: true
+              slotProps={{
+                input: {
+                  readOnly: true,
+                  disableUnderline: true,
+                  inputProps: { style: { cursor: 'pointer' } }
                 }
               }}
             />
@@ -132,10 +140,12 @@ export default function CaseSummaryFields(props: CaseSummaryFieldsProps) {
               variant='standard'
               value={field.config.value}
               label={field.config.label}
-              InputProps={{
-                readOnly: true,
-                disableUnderline: true,
-                inputProps: { style: { cursor: 'pointer' } }
+              slotProps={{
+                input: {
+                  readOnly: true,
+                  disableUnderline: true,
+                  inputProps: { style: { cursor: 'pointer' } }
+                }
               }}
             />
           </a>
@@ -156,9 +166,11 @@ export default function CaseSummaryFields(props: CaseSummaryFieldsProps) {
               format: theFormat
             })}
             label={field.config.label}
-            InputProps={{
-              readOnly: true,
-              disableUnderline: true
+            slotProps={{
+              input: {
+                readOnly: true,
+                disableUnderline: true
+              }
             }}
           />
         );
@@ -171,9 +183,11 @@ export default function CaseSummaryFields(props: CaseSummaryFieldsProps) {
             variant='standard'
             value={format(field.config.value, field.type, theCurrencyOptions)}
             label={field.config.label}
-            InputProps={{
-              readOnly: true,
-              disableUnderline: true
+            slotProps={{
+              input: {
+                readOnly: true,
+                disableUnderline: true
+              }
             }}
           />
         );
@@ -186,9 +200,11 @@ export default function CaseSummaryFields(props: CaseSummaryFieldsProps) {
             variant='standard'
             value={format(field.config.value, field.type)}
             label={field.config.label}
-            InputProps={{
-              readOnly: true,
-              disableUnderline: true
+            slotProps={{
+              input: {
+                readOnly: true,
+                disableUnderline: true
+              }
             }}
           />
         );
@@ -207,13 +223,13 @@ export default function CaseSummaryFields(props: CaseSummaryFieldsProps) {
 
   // Whenever theFieldsToRender changes, update theFieldsAsGridItems that's used during render
   useEffect(() => {
-    const arGridItems = theFieldsToRender.map((field: any) => {
+    const arGridItems = theFieldsToRender?.map((field: any) => {
       // display the field when either visibility property doesn't exist or is true(if exists)
       if (field.config.visibility === undefined || field.config.visibility === true) {
         return (
-          <Grid item xs={6} key={field.config.label}>
+          <Grid2 size={{ xs: 6 }} key={field.config.label}>
             {getFieldValue(field)}
-          </Grid>
+          </Grid2>
         );
       }
 
@@ -247,8 +263,8 @@ export default function CaseSummaryFields(props: CaseSummaryFieldsProps) {
   }
 
   return (
-    <Grid container className='psdk-case-summary-fields'>
+    <Grid2 container className='psdk-case-summary-fields'>
       {theFieldsAsGridItems}
-    </Grid>
+    </Grid2>
   );
 }