@pega/dx-component-builder-sdk 0.25.6 → 0.26.1

package/src/tasks/create/templates/SDK-React/widget/PAGE-CASE/index.tsx.mustache

@@ -4,7 +4,6 @@ import Popover from '@mui/material/Popover';
 import Grid2 from '@mui/material/Grid2';
 import Typography from '@mui/material/Typography';
 import makeStyles from '@mui/styles/makeStyles';
-import { Theme as MuiTheme } from "@mui/material/styles";
 
 import Utils from '@pega/react-sdk-components/lib/components/helpers/utils';
 
@@ -12,12 +11,6 @@ import Styled{{COMPONENT_CLASS_NAME}}Wrapper from './styles';
 
 import { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
 
-declare module "@mui/private-theming" {
-  interface DefaultTheme extends MuiTheme {
-    spacing: (spacing: number) => string;
-  }
-}
-
 interface {{COMPONENT_CLASS_NAME}}Props extends PConnProps {
   // If any, enter additional props that only exist on this component
   label: string;
@@ -28,6 +21,7 @@ interface {{COMPONENT_CLASS_NAME}}Props extends PConnProps {
   updateLabel: string;
   updateOperator: { userName: string; userId: string };
   displayLabel?: any;
+  displayMode?: string;
 }
 
 const useStyles = makeStyles(myTheme => ({
@@ -38,6 +32,13 @@ const useStyles = makeStyles(myTheme => ({
   popover: {
     padding: myTheme.spacing(1),
     margin: myTheme.spacing(1)
+  },
+  fieldLabel: {
+    fontWeight: 400,
+    color: myTheme.palette.text.secondary
+  },
+  fieldValue: {
+    color: myTheme.palette.text.primary
   }
 }));
 
@@ -85,7 +86,8 @@ export default function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}
     const localizedVal = PCore.getLocaleUtils().getLocaleValue;
     const localeCategory = 'Operator';
 
-    operatorPreviewPromise.then((res: any) => {
+    operatorPreviewPromise
+      .then((res: any) => {
       const fillerString = '---';
       let fields: any = [];
       if (res.data && res.data.pyOperatorInfo && res.data.pyOperatorInfo.pyUserName) {
@@ -125,7 +127,6 @@ export default function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}
           }
         ];
       } else {
-        // eslint-disable-next-line no-console
         console.log(
           `Operator: PCore.getUserApi().getOperatorDetails(${caseOpId}); returned empty res.data.pyOperatorInfo.pyUserName - adding default`
         );
@@ -159,7 +160,10 @@ export default function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}
       }
       // Whatever the fields are, update the component's popoverFields
       setPopoverFields(fields);
-    });
+      })
+      .catch(e => {
+        console.error(e);
+      });
 
     setPopoverAnchorEl(event.currentTarget);
   }
@@ -185,7 +189,7 @@ export default function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}
           return (
             <React.Fragment key={field.id}>
               <Grid2 container size={{ xs: 12 }} spacing={1}>
-                <Grid2 size={{ xs: 12 }}>
+                <Grid2 size={{ xs: 6 }}>
                   <Typography variant='caption'>{field.name}</Typography>
                 </Grid2>
                 <Grid2 size={{ xs: 6 }}>
@@ -202,19 +206,69 @@ export default function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}
 
   // End of popover-related
 
+  const { displayMode } = props;
+
+  if (displayMode === 'DISPLAY_ONLY') {
+    return (
+      <Styled{{COMPONENT_CLASS_NAME}}Wrapper>
+        <>
+          {{! pick new delimiters for mustache }}
+          {{=<% %>=}}
+          <Grid2 container spacing={4} justifyContent='space-between'>
+            <Grid2 size={{ xs: 4 }}>
+              <Typography variant='body2' component='span' className={classes.fieldLabel}>
+                {caseOpLabel}
+              </Typography>
+            </Grid2>
+            <Grid2 size={{ xs: 8 }}>
+              <div style={{ display: 'flex', flexWrap: 'wrap', gap: '0.5rem', alignItems: 'baseline' }}>
+                <Typography variant='body2' component='span' className={classes.fieldValue} onClick={showOperatorDetails} sx={{ cursor: 'pointer' }}>
+                  {caseOpName}
+                </Typography>
+                <Typography variant='caption' component='span' sx={{ color: 'text.secondary' }}>
+                  {Utils.generateDateTime(caseTime, 'DateTime-Since')}
+                </Typography>
+              </div>
+            </Grid2>
+          </Grid2>
+          <%={{ }}=%>     {{! revert delimiters for mustache }}
+          <Popover
+            id={popoverId}
+            open={popoverOpen}
+            anchorEl={popoverAnchorEl}
+            onClose={handlePopoverClose}
+            {{! pick new delimiters for mustache }}
+            {{=<% %>=}}
+            anchorOrigin={{ vertical: 'bottom', horizontal: 'center' }}
+            transformOrigin={{ vertical: 'top', horizontal: 'center' }}
+            slotProps={{
+              paper: { style: { maxWidth: '45ch' } }
+            }}
+            <%={{ }}=%>     {{! revert delimiters for mustache }}
+          >
+            {getPopoverGrid()}
+          </Popover>
+        </>
+      </Styled{{COMPONENT_CLASS_NAME}}Wrapper>
+    );
+  }
+
   return (
     <Styled{{COMPONENT_CLASS_NAME}}Wrapper>
       <>
         {{! pick new delimiters for mustache }}
         {{=<% %>=}}
         <TextField
+          variant='standard'
           defaultValue={caseOpName}
           label={caseOpLabel}
           onClick={showOperatorDetails}
-          InputProps={{
-            readOnly: true,
-            disableUnderline: true,
-            inputProps: { style: { cursor: 'pointer' } }
+          slotProps={{
+            input: {
+              readOnly: true,
+              disableUnderline: true,
+              inputProps: { style: { cursor: 'pointer' } }
+            }
           }}
         />
         <br />
@@ -229,7 +283,9 @@ export default function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}
           {{=<% %>=}}
           anchorOrigin={{ vertical: 'bottom', horizontal: 'center' }}
           transformOrigin={{ vertical: 'top', horizontal: 'center' }}
-          PaperProps={{ style: { maxWidth: '45ch' } }}
+          slotProps={{
+            paper: { style: { maxWidth: '45ch' } }
+          }}
           <%={{ }}=%>     {{! revert delimiters for mustache }}
         >
           {getPopoverGrid()}

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

@@ -32,9 +32,13 @@ import {
   getComponents,
   getComponentDefaults,
   sanitize,
-  validateSemver
+  validateSemver,
+  getStandaloneMaxPrefixCount,
+  getStandaloneMaxLibraryFromPrefixCount,
+  updateComponentDefaultLibrary
 } from '../../util.js';
 import { COMPONENT_SCHEMA } from '../../constants.js';
+import { getPrettierFormattedString } from '../map/map.js';
 
 const copy = promisify(ncp);
 
@@ -68,8 +72,7 @@ export const compileMustacheTemplates = async (
     type,
     subtype,
     description,
-    organization,
-    allowedApplications
+    organization
   }
 ) => {
   const files = fs.readdirSync(componentDirectory);
@@ -116,20 +119,20 @@ 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());
-  files.forEach(file => {
+  // allowedApplications = allowedApplications.filter(el => !!el.trim()).map(el => el.trim());
+  for (const file of files) {
     const filePath = path.join(componentDirectory, file);
 
     const output = compileMustacheTemplate(filePath, {
@@ -141,7 +144,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,
@@ -150,7 +152,10 @@ export const compileMustacheTemplates = async (
       IS_BOOLEAN: isBool,
       IS_PHONE: isPhone
     });
-    fs.writeFileSync(filePath, output);
+
+    const formattedOutput = await getPrettierFormattedString(output, filePath.replace(/\.mustache$/, ''));
+
+    fs.writeFileSync(filePath, formattedOutput);
 
     switch (framework) {
       case "SDK-React":
@@ -167,7 +172,7 @@ export const compileMustacheTemplates = async (
         fs.renameSync(filePath, filePath.replace('.mustache', ''));
         break;
     }
-  });
+  }
 };
 
 
@@ -176,7 +181,6 @@ export const validateCompileAll = async (
     prefix,
     library,
     version,
-    allowedApplications,
     organization
   },
   options,
@@ -184,6 +188,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 +213,7 @@ export const validateCompileAll = async (
         version,
         type,
         subtype,
-        description,
-        allowedApplications
+        description
       },
       options
     )
@@ -235,8 +244,7 @@ export const validateCompileAll = async (
         version,
         type,
         subtype,
-        description,
-        allowedApplications
+        description
       },
       options
     )
@@ -266,8 +274,7 @@ export const validateCompileAll = async (
         version,
         type,
         subtype,
-        description,
-        allowedApplications
+        description
       },
       options
     )
@@ -287,8 +294,7 @@ export const validateCompile = async (
     framework,
     type,
     subtype,
-    description,
-    allowedApplications
+    description
   },
   options,
   onlyCompanion = false
@@ -387,8 +393,7 @@ export const validateCompile = async (
       type,
       subtype,
       description,
-      organization,
-      allowedApplications
+      organization
     });
   }
 
@@ -407,8 +412,7 @@ export const validateCompile = async (
     type,
     subtype,
     description,
-    organization,
-    allowedApplications
+    organization
   });
 
   if (!onlyCompanion) {
@@ -422,6 +426,17 @@ export const validateCompile = async (
 export default async options => {
   showVersion();
 
+  const framework = await getFramework();
+
+  if (framework === 'SDK-React') {
+    console.log(
+      chalk.red(
+        'Custom-constellation are aligned with Pega constellation which is still on react 18.\n' +
+        'Please make sure any changes to custom-constellation should be aligned with React 18 development.'
+      )
+    );
+  }
+
   await checkPathAccess(pegaConfigJsonPath);
 
   let data = fs.readFileSync(pegaConfigJsonPath, { encoding: 'utf8' });
@@ -445,7 +460,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 +469,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 +504,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 +523,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/map/map.js

@@ -38,13 +38,20 @@ const pegaLocalReactComponentMapPath = path.join(path.resolve(), SDK_LOCAL_REACT
 const pegaLocalAngularComponentMapPath = path.join(path.resolve(),  SDK_LOCAL_ANGULAR_COMPONENT_MAP_FILENAME);
 const prettierConfigJsonPath = path.join(path.resolve(), PRETTIER_CONFIG_FILENAME);
 
-export const getPrettierFormattedString = async (content) => {
+export const getPrettierFormattedString = async (content, filepath) => {
   const options = await prettier.resolveConfig(prettierConfigJsonPath);
 
   // format the contents
   if (options) {
-    options.parser = 'babel';
-    return  prettier.format(content, options);
+    let parser = 'babel';
+    if (filepath) {
+      const { inferredParser } = await prettier.getFileInfo(filepath);
+      if (!inferredParser) return content;
+      parser = inferredParser;
+    }
+
+    const formatOptions = { ...options, parser };
+    return prettier.format(content, formatOptions);
   }
   else {
     return content;

package/src/tasks/override/index.js

@@ -6,7 +6,7 @@ import { join } from 'path';
 import inquirer from 'inquirer';
 import ncp from 'ncp';
 import chalk from 'chalk';
-import { updateComponentMap  } from '../map/map.js';
+import { getPrettierFormattedString, updateComponentMap  } from '../map/map.js';
 
 import {
   checkPathAccess,
@@ -65,8 +65,10 @@ const checkAndCreateConfigComponentKey = async (targetDirectory) => {
       // stringify "4", makes the json string look like JSON in the file, formated instead of a single line
       const configContent = JSON.stringify(configObj, null, 4);
 
+      const configContentFormatted = await getPrettierFormattedString(configContent);
+
       // update file
-      fs.writeFileSync(configFile, configContent, { encoding: 'utf8' });
+      fs.writeFileSync(configFile, configContentFormatted, { encoding: 'utf8' });
     }
 
   }

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

@@ -6,7 +6,7 @@ import { join } from 'path';
 import inquirer from 'inquirer';
 import ncp from 'ncp';
 import chalk from 'chalk';
-import { updateComponentMap  } from '../map/map.js';
+import { getPrettierFormattedString, updateComponentMap  } from '../map/map.js';
 
 import {
   checkPathAccess, 
@@ -66,8 +66,10 @@ const checkAndCreateConfigComponentKey = async (targetDirectory) => {
       // stringify "4", makes the json string look like JSON in the file, formated instead of a single line
       const configContent = JSON.stringify(configObj, null, 4);
 
+      const configContentFormatted = await getPrettierFormattedString(configContent);
+
       // update file
-      fs.writeFileSync(configFile, configContent, { encoding: 'utf8' });
+      fs.writeFileSync(configFile, configContentFormatted, { encoding: 'utf8' });
     }
 
   }

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,8 +41,10 @@ import {
   DXCB_COMPONENT_DEFAULTS,
   SERVER_CONFIG,
   SERVER_REST_URL,
-  JEST_TESTS_FUNCTIONAL_PATH
+  JEST_TESTS_FUNCTIONAL_PATH,
+  MAX_RFT_CHARS
 } from './constants.js';
+import { getPrettierFormattedString } from './tasks/map/map.js';
 
 export const DXCB_CONFIG_INTERNAL_JSON_FILENAME = 'src/dxcb.config.json';
 
@@ -85,6 +87,24 @@ 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);
+
+  const componentsDefault = data.dxcbConfig.componentDefaults;
+  componentsDefault.library = library;
+
+  const configJSON = await getPrettierFormattedString(JSON.stringify(data, null, 4))
+
+  fs.writeFileSync(pegaConfigJsonPath, configJSON,  { encoding: 'utf8',flag:'w' });
+
 }
 
 export const visualLCCategory = (category) => {
@@ -766,7 +786,7 @@ export const showVersion = () => {
     if (nodeMajorVersion < 24) {
       console.log(
         chalk.redBright(
-          `DX Component Builder SDK - requires node v24.14.1 or greater, current version: ${process.version}`
+          `DX Component Builder SDK - requires node v24.4.1 or greater, current version: ${process.version}`
         )
       );
       process.exit(1);
@@ -774,7 +794,7 @@ export const showVersion = () => {
     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}`
+          `DX Component Builder SDK - requires node v24.4.1 or greater, current version: ${process.version}`
         )
       );
       process.exit(1);
@@ -782,7 +802,7 @@ export const showVersion = () => {
     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}`
+          `DX Component Builder SDK - requires node v24.4.1 or greater, current version: ${process.version}`
         )
       );
       process.exit(1);
@@ -816,6 +836,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) => {