@pega/dx-component-builder-sdk 24.2.13 → 25.1.10

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.14.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.14.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.14.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>
   );
 }

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

@@ -1,6 +1,5 @@
-/* eslint-disable react/no-array-index-key */
 import React, { createElement, isValidElement } from 'react';
-import Grid from '@mui/material/Grid';
+import Grid2 from '@mui/material/Grid2';
 import Typography from '@mui/material/Typography';
 import makeStyles from '@mui/styles/makeStyles';
 
@@ -62,11 +61,11 @@ export default function DetailsFields(props: DetailsFieldsProps) {
     const dispValue = field.label;
 
     return (
-      <Grid item xs={6} key={keyVal}>
+      <Grid2 size={{ xs: 6 }} key={keyVal}>
         <Typography variant='body2' component='span' className={`${classes.fieldLabel}`}>
           {dispValue}
         </Typography>
-      </Grid>
+      </Grid2>
     );
   }
 
@@ -74,7 +73,6 @@ export default function DetailsFields(props: DetailsFieldsProps) {
     const { type, value } = inField;
     let formattedVal = value;
 
-    // eslint-disable-next-line sonarjs/no-small-switch
     switch (type) {
       case 'date':
         formattedVal = format(value, type);
@@ -97,21 +95,21 @@ export default function DetailsFields(props: DetailsFieldsProps) {
     const formattedValue = formatItemValue(field);
 
     return (
-      <Grid item xs={6} key={keyVal}>
+      <Grid2 size={{ xs: 6 }} key={keyVal}>
         <Typography variant='body2' component='span' className={classes.fieldValue}>
           {formattedValue}
         </Typography>
-      </Grid>
+      </Grid2>
     );
   }
 
   function getGridItem(field: any, keyVal: string) {
     return (
-      <Grid item xs={12} key={keyVal}>
+      <Grid2 size={{ xs: 12 }} key={keyVal}>
         <Typography variant='body2' component='span' className={classes.fieldValue}>
           {field?.value}
         </Typography>
-      </Grid>
+      </Grid2>
     );
   }
 
@@ -122,16 +120,16 @@ export default function DetailsFields(props: DetailsFieldsProps) {
       }
       if (isValidElement(field?.value)) {
         return (
-          <Grid container spacing={1} style={{ padding: '4px 0px' }} key={index}>
+          <Grid2 container spacing={1} style={{ padding: '4px 0px' }} key={index}>
             {getGridItem(field, `${index}-item`)}
-          </Grid>
+          </Grid2>
         );
       }
       return (
-        <Grid container spacing={1} style={{ padding: '4px 0px' }} key={index}>
+        <Grid2 container spacing={1} style={{ padding: '4px 0px' }} key={index}>
           {getGridItemLabel(field, `${index}-label`)}
           {getGridItemValue(field, `${index}-value`)}
-        </Grid>
+        </Grid2>
       );
     });
     return gridItems;

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

@@ -1,5 +1,5 @@
-import { PropsWithChildren, useState } from 'react';
-import Grid from '@mui/material/Grid';
+import { type PropsWithChildren, useState } from 'react';
+import Grid2 from '@mui/material/Grid2';
 import makeStyles from '@mui/styles/makeStyles';
 import KeyboardArrowRightIcon from '@mui/icons-material/KeyboardArrowRight';
 import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown';
@@ -45,9 +45,9 @@ export default function FieldGroup(props: PropsWithChildren<FieldGroupProps>) {
   const [collapsed, setCollapsed] = useState(false);
 
   const descAndChildren = (
-    <Grid container>
+    <Grid2 container>
       <div className={classes.fullWidth}>{children}</div>
-    </Grid>
+    </Grid2>
   );
 
   const headerClickHandler = () => {
@@ -55,8 +55,8 @@ export default function FieldGroup(props: PropsWithChildren<FieldGroupProps>) {
   };
 
   return (
-    <Grid container spacing={4} justifyContent='space-between'>
-      <Grid item style={{ width: '100%' }}>
+    <Grid2 container spacing={4} justifyContent='space-between'>
+      <Grid2 style={{ width: '100%' }}>
         {name && (
           <div className={classes.fieldMargin}>
             {collapsible ? (
@@ -70,11 +70,10 @@ export default function FieldGroup(props: PropsWithChildren<FieldGroupProps>) {
           </div>
         )}
         {instructions && instructions !== 'none' && (
-          // eslint-disable-next-line react/no-danger
           <div key='instructions' className={classes.instructionText} dangerouslySetInnerHTML={{ __html: instructions }} />
         )}
         {!collapsed && descAndChildren}
-      </Grid>
-    </Grid>
+      </Grid2>
+    </Grid2>
   );
 }

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

@@ -1,4 +1,4 @@
-import Grid from '@mui/material/Grid';
+import Grid2 from '@mui/material/Grid2';
 import Divider from '@mui/material/Divider';
 import Link from '@mui/material/Link';
 
@@ -20,11 +20,11 @@ export default function FieldGroupList(props: FieldGroupListProps) {
   }
 
   return (
-    <Grid container spacing={4} justifyContent='space-between'>
-      <Grid item style={{ width: '100%' }}>
-        <Grid container spacing={1}>
+    <Grid2 container spacing={4} justifyContent='space-between'>
+      <Grid2 style={{ width: '100%' }}>
+        <Grid2 container spacing={1}>
           {props.items.map(item => (
-            <Grid item style={{ width: '100%' }}>
+            <Grid2 style={{ width: '100%' }}>
               <b>{item.name}</b>
               {props.onDelete && (
                 <button
@@ -44,15 +44,15 @@ export default function FieldGroupList(props: FieldGroupListProps) {
               <br />
               {props.onAdd && <Divider />}
               <br />
-            </Grid>
+            </Grid2>
           ))}
           {props.onAdd && (
             <Link onClick={props.onAdd} style={{ cursor: 'pointer' }} underline='hover'>
               +Add
             </Link>
           )}
-        </Grid>
-      </Grid>
-    </Grid>
+        </Grid2>
+      </Grid2>
+    </Grid2>
   );
 }

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

@@ -1,4 +1,4 @@
-import Grid from '@mui/material/Grid';
+import Grid2 from '@mui/material/Grid2';
 import Typography from '@mui/material/Typography';
 import makeStyles from '@mui/styles/makeStyles';
 
@@ -51,11 +51,11 @@ export default function FieldValueList(props: FieldValueListProps) {
 
   function getGridItemLabel() {
     return (
-      <Grid item xs={variant === 'stacked' ? 12 : 4} className={variant === 'stacked' ? classes.noPaddingBottom : ''}>
+      <Grid2 size={{ xs: variant === 'stacked' ? 12 : 4 }} className={variant === 'stacked' ? classes.noPaddingBottom : ''}>
         <Typography variant='body2' component='span' className={`${classes.fieldLabel}`}>
           {name}
         </Typography>
-      </Grid>
+      </Grid2>
     );
   }
 
@@ -63,23 +63,22 @@ export default function FieldValueList(props: FieldValueListProps) {
     const formattedValue = formatItemValue(value);
 
     return (
-      <Grid item xs={variant === 'stacked' ? 12 : 8} className={variant === 'stacked' ? classes.noPaddingTop : ''}>
+      <Grid2 size={{ xs: variant === 'stacked' || !name ? 12 : 8 }} className={variant === 'stacked' ? classes.noPaddingTop : ''}>
         {isHtml ? (
-          // eslint-disable-next-line react/no-danger
           <div dangerouslySetInnerHTML={{ __html: formattedValue }} />
         ) : (
           <Typography variant={variant === 'stacked' ? 'h6' : 'body2'} component='span' className={classes.fieldValue}>
             {formattedValue}
           </Typography>
         )}
-      </Grid>
+      </Grid2>
     );
   }
 
   return (
-    <Grid container spacing={4} justifyContent='space-between'>
-      {getGridItemLabel()}
+    <Grid2 container spacing={4} justifyContent='space-between'>
+      {name ? getGridItemLabel() : null}
       {getGridItemValue()}
-    </Grid>
+    </Grid2>
   );
 }