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

package/src/tasks/create/templates/SDK-React/template/DETAILS/index.tsx.mustache

@@ -1,5 +1,5 @@
 import { createElement } from 'react';
-import Grid from '@mui/material/Grid';
+import Grid2 from '@mui/material/Grid2';
 
 import createPConnectComponent from '@pega/react-sdk-components/lib/bridge/react_pconnect';
 import { getComponentFromMap } from '@pega/react-sdk-components/lib/bridge/helpers/sdk_component_map';
@@ -23,7 +23,7 @@ export default function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}
 
   // Get the inherited props from the parent to determine label settings
   const propsToUse = { label, showLabel, ...getPConnect().getInheritedProps() };
-  
+
   // Set display mode prop and re-create the children so this part of the dom tree renders
   // in a readonly (display) mode instead of a editable
   getPConnect().setInheritedProp('displayMode', 'DISPLAY_ONLY');
@@ -31,7 +31,6 @@ export default function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}
   const children = (getPConnect().getChildren() as any[]).map((configObject, index) =>
     createElement(createPConnectComponent(), {
       ...configObject,
-      // eslint-disable-next-line react/no-array-index-key
       key: index.toString()
     })
   );
@@ -59,21 +58,21 @@ export default function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}
       {{=<% %>=}}
       <FieldGroup name={propsToUse.showLabel ? propsToUse.label : ''}>
         {showHighlightedData && highlightedDataArr.length > 0 && (
-          <Grid container spacing={1} style={{ padding: '0 0 1em' }}>
+          <Grid2 container spacing={1} style={{ padding: '0 0 1em' }}>
             {highlightedDataArr.map((child, i) => (
-              <Grid item xs={12} key={`hf-${i + 1}`}>
+              <Grid2 size={{ xs: 12 }} key={`hf-${i + 1}`}>
                 {child}
-              </Grid>
+              </Grid2>
             ))}
-          </Grid>
+          </Grid2>
         )}
-        <Grid container spacing={1}>
+        <Grid2 container spacing={1}>
           {children.map((child, i) => (
-            <Grid item xs={12} key={`r-${i + 1}`}>
+            <Grid2 size={{ xs: 12 }} key={`r-${i + 1}`}>
               {child}
-            </Grid>
+            </Grid2>
           ))}
-        </Grid>
+        </Grid2>
       </FieldGroup>
       <%={{ }}=%>     {{! revert delimiters for mustache }}
     </Styled{{COMPONENT_CLASS_NAME}}Wrapper>

package/src/tasks/create/templates/SDK-React/template/DETAILS-region/config.json.mustache

@@ -5,7 +5,6 @@
   "organization": "{{ORGANIZATION}}",
   "version": "{{VERSION}}",
   "library": "{{LIBRARY}}",
-  "allowedApplications": {{{ALLOWEDAPPS}}},
   "componentKey": "{{COMPONENT_KEY}}",
   "type": "{{TYPE}}",
   "subtype": {{{SUB_TYPE}}},

package/src/tasks/create/templates/SDK-React/template/DETAILS-region/index.tsx.mustache

@@ -1,5 +1,5 @@
 import { createElement } from 'react';
-import Grid from '@mui/material/Grid';
+import Grid2 from '@mui/material/Grid2';
 
 import createPConnectComponent from '@pega/react-sdk-components/lib/bridge/react_pconnect';
 import { getComponentFromMap } from '@pega/react-sdk-components/lib/bridge/helpers/sdk_component_map';
@@ -31,7 +31,6 @@ export default function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}
   const children = (getPConnect().getChildren() as any[]).map((configObject, index) =>
     createElement(createPConnectComponent(), {
       ...configObject,
-      // eslint-disable-next-line react/no-array-index-key
       key: index.toString()
     })
   );
@@ -59,21 +58,21 @@ export default function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}
       {{=<% %>=}}
       <FieldGroup name={propsToUse.showLabel ? propsToUse.label : ''}>
         {showHighlightedData && highlightedDataArr.length > 0 && (
-          <Grid container spacing={1} style={{ padding: '0 0 1em' }}>
+          <Grid2 container spacing={1} style={{ padding: '0 0 1em' }}>
             {highlightedDataArr.map((child, i) => (
-              <Grid item xs={6} key={`hf-${i + 1}`}>
+              <Grid2 size={{ xs: 6 }} key={`hf-${i + 1}`}>
                 {child}
-              </Grid>
+              </Grid2>
             ))}
-          </Grid>
+          </Grid2>
         )}
-        <Grid container spacing={1}>
+        <Grid2 container spacing={1}>
           {children.map((child, i) => (
-            <Grid item xs={6} key={`r-${i + 1}`}>
+            <Grid2 size={{ xs: 6 }} key={`r-${i + 1}`}>
               {child}
-            </Grid>
+            </Grid2>
           ))}
-        </Grid>
+        </Grid2>
       </FieldGroup>
       <%={{ }}=%>     {{! revert delimiters for mustache }}
     </Styled{{COMPONENT_CLASS_NAME}}Wrapper>

package/src/tasks/create/templates/SDK-React/template/FORM/config.json.mustache

@@ -5,7 +5,6 @@
   "organization": "{{ORGANIZATION}}",
   "version": "{{VERSION}}",
   "library": "{{LIBRARY}}",
-  "allowedApplications": {{{ALLOWEDAPPS}}},
   "componentKey": "{{COMPONENT_KEY}}",
   "type": "{{TYPE}}",
   "subtype": {{{SUB_TYPE}}},

package/src/tasks/create/templates/SDK-React/template/FORM/index.tsx.mustache

@@ -61,7 +61,6 @@ export default function {{COMPONENT_CLASS_NAME}}(props: PropsWithChildren<{{COMP
         {instructions && (
           <div className='psdk-default-form-instruction-text'>
             {/* server performs sanitization method for instructions html content */}
-            {/* eslint-disable react/no-danger */}
             {{! pick new delimiters for mustache }}
             {{=<% %>=}}
             <div key='instructions' id='instruction-text' dangerouslySetInnerHTML={{ __html: instructions }} />

package/src/tasks/create/templates/SDK-React/template/FORM-region/config.json.mustache

@@ -5,7 +5,6 @@
   "organization": "{{ORGANIZATION}}",
   "version": "{{VERSION}}",
   "library": "{{LIBRARY}}",
-  "allowedApplications": {{{ALLOWEDAPPS}}},
   "componentKey": "{{COMPONENT_KEY}}",
   "type": "{{TYPE}}",
   "subtype": {{{SUB_TYPE}}},

package/src/tasks/create/templates/SDK-React/template/FORM-region/demo.stories.tsx.mustache

@@ -87,9 +87,11 @@ const renderField = resolvedProps => {
       error={status === 'error'}
       label={label}
       value={value}
-      InputProps={{
-        readOnly: true,
-        inputProps: { ...testProp }
+      slotProps={{
+        input: {
+          readOnly: true,
+          ...testProp,
+        },
       }}
       disableDropdown={disableDropdown}
     />

package/src/tasks/create/templates/SDK-React/template/FORM-region/index.tsx.mustache

@@ -1,5 +1,5 @@
 import { PropsWithChildren, ReactElement } from 'react';
-import { Grid, GridSize } from '@mui/material';
+import Grid2, { type GridSize } from '@mui/material/Grid2';
 import makeStyles from '@mui/styles/makeStyles';
 
 import Styled{{COMPONENT_CLASS_NAME}}Wrapper from './styles';
@@ -28,7 +28,6 @@ export default function {{COMPONENT_CLASS_NAME}}(props: PropsWithChildren<{{COMP
   const childrenToRender = children as ReactElement[];
 
   if (childrenToRender.length !== 2) {
-    // eslint-disable-next-line no-console
     console.error(`TwoColumn template sees more than 2 columns: ${childrenToRender.length}`);
   }
 
@@ -49,14 +48,17 @@ export default function {{COMPONENT_CLASS_NAME}}(props: PropsWithChildren<{{COMP
 
   return (
     <Styled{{COMPONENT_CLASS_NAME}}Wrapper>
-      <Grid container spacing={1}>
-        <Grid item xs={12} md={aSize} className={classes.colStyles}>
+      {{! pick new delimiters for mustache }}
+      {{=<% %>=}}
+      <Grid2 container spacing={1}>
+        <Grid2 size={{ xs: 12, md: aSize }} className={classes.colStyles}>
           {childrenToRender[0]}
-        </Grid>
-        <Grid item xs={12} md={bSize} className={classes.colStyles}>
+        </Grid2>
+        <Grid2 size={{ xs: 12, md: bSize }} className={classes.colStyles}>
           {childrenToRender[1]}
-        </Grid>
-      </Grid>
+        </Grid2>
+      </Grid2>
+      <%={{ }}=%>     {{! revert delimiters for mustache }}
     </Styled{{COMPONENT_CLASS_NAME}}Wrapper>
   );
 }

package/src/tasks/create/templates/SDK-React/template/PAGE/OneColumn.tsx.mustache

@@ -1,4 +1,4 @@
-import Grid from '@mui/material/Grid';
+import Grid2 from '@mui/material/Grid2';
 import makeStyles from '@mui/styles/makeStyles';
 
 interface OneColumnProps {
@@ -20,12 +20,15 @@ export default function OneColumn(props: OneColumnProps) {
   const { children } = props;
 
   return (
-    <Grid container spacing={2}>
-      <Grid item xs={12} className={classes.colStyles}>
+    <Grid2 container spacing={2}>
+      {{! pick new delimiters for mustache }}
+      {{=<% %>=}}
+      <Grid2 size={{ xs: 12 }} className={classes.colStyles}>
         {children.map(child => {
           return child;
         })}
-      </Grid>
-    </Grid>
+      </Grid2>
+      <%={{ }}=%>     {{! revert delimiters for mustache }}
+    </Grid2>
   );
 }

package/src/tasks/create/templates/SDK-React/template/PAGE/config.json.mustache

@@ -5,7 +5,6 @@
   "organization": "{{ORGANIZATION}}",
   "version": "{{VERSION}}",
   "library": "{{LIBRARY}}",
-  "allowedApplications": {{{ALLOWEDAPPS}}},
   "componentKey": "{{COMPONENT_KEY}}",
   "type": "{{TYPE}}",
   "subtype": {{{SUB_TYPE}}},

package/src/tasks/create/templates/SDK-React/widget/CASE/config.json.mustache

@@ -5,7 +5,6 @@
   "organization": "{{ORGANIZATION}}",
   "version": "{{VERSION}}",
   "library": "{{LIBRARY}}",
-  "allowedApplications": {{{ALLOWEDAPPS}}},
   "componentKey": "{{COMPONENT_KEY}}",
   "type": "{{TYPE}}",
   "subtype": {{{SUB_TYPE}}},

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

@@ -73,8 +73,8 @@ export default function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}
   const dataViewName = 'D_pyWorkHistory';
   const context = thePConn.getContextName();
 
-  function computeRowData(rows: Object[]): void {
-    const theRowData: Object[] = [];
+  function computeRowData(rows: object[]): void {
+    const theRowData: object[] = [];
 
     rows.forEach((row: any, rowIndex: number) => {
       // Now, for each property in the index of row properties (displayedColumns), add an object
@@ -149,7 +149,7 @@ export default function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}
     // Note: using rowData.current since we're using useRef as a mutatable
     //  value that's only updated when it changes.
     if (rowData.current.length > 0) {
-      rowData.current.forEach((dataRow: Object[], index) => {
+      rowData.current.forEach((dataRow: object[], index) => {
         // using dataRow[0]-dataRow[1] as the array key since it's a unique value
         const theKey = `CaseHistory-${index}`;
         theDataRows.push(

package/src/tasks/create/templates/SDK-React/widget/CASE/mock.ts.mustache

@@ -1,4 +1,3 @@
-// eslint-disable-next-line import/prefer-default-export
 export const historyData = {
   data: {
     fetchDateTime: '2023-01-18T12:04:56.517Z',

package/src/tasks/create/templates/SDK-React/widget/PAGE/config.json.mustache

@@ -5,7 +5,6 @@
   "organization": "{{ORGANIZATION}}",
   "version": "{{VERSION}}",
   "library": "{{LIBRARY}}",
-  "allowedApplications": {{{ALLOWEDAPPS}}},
   "componentKey": "{{COMPONENT_KEY}}",
   "type": "{{TYPE}}",
   "subtype": {{{SUB_TYPE}}},

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

@@ -109,8 +109,8 @@ export default function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}
     } // 2nd and 3rd args empty string until typedef marked correctly
   ];
 
-  function computeRowData(rows: Object[]): void {
-    const theRowData: Object[] = [];
+  function computeRowData(rows: object[]): void {
+    const theRowData: object[] = [];
 
     rows?.forEach((row: any, rowIndex: number) => {
       // Now, for each property in the index of row properties (displayedColumns), add an object
@@ -189,7 +189,7 @@ export default function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}
     // Note: using rowData.current since we're using useRef as a mutatable
     //  value that's only updated when it changes.
     if (rowData.current.length > 0) {
-      rowData.current.forEach((dataRow: Object[], index) => {
+      rowData.current.forEach((dataRow: object[], index) => {
         // using dataRow[0]-dataRow[1] as the array key since it's a unique value
         const theKey = `CaseHistory-${index}`;
         theDataRows.push(

package/src/tasks/create/templates/SDK-React/widget/PAGE-CASE/config.json.mustache

@@ -5,7 +5,6 @@
   "organization": "{{ORGANIZATION}}",
   "version": "{{VERSION}}",
   "library": "{{LIBRARY}}",
-  "allowedApplications": {{{ALLOWEDAPPS}}},
   "componentKey": "{{COMPONENT_KEY}}",
   "type": "{{TYPE}}",
   "subtype": {{{SUB_TYPE}}},

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

@@ -1,7 +1,7 @@
 import React, { useState } from 'react';
 import TextField from '@mui/material/TextField';
 import Popover from '@mui/material/Popover';
-import Grid from '@mui/material/Grid';
+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";
@@ -125,7 +125,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`
         );
@@ -175,25 +174,28 @@ export default function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}
 
     // There are fields, so build the grid.
     return (
-      <Grid container className={classes.popover} spacing={1}>
-        <Grid item xs={12}>
+      <Grid2 container className={classes.popover} spacing={1}>
+        {{! pick new delimiters for mustache }}
+        {{=<% %>=}}
+        <Grid2 size={{ xs: 12 }}>
           <Typography variant='h6'>{caseOpName}</Typography>
-        </Grid>
+        </Grid2>
         {popoverFields.map(field => {
           return (
             <React.Fragment key={field.id}>
-              <Grid container item xs={12} spacing={1}>
-                <Grid item xs={6}>
+              <Grid2 container size={{ xs: 12 }} spacing={1}>
+                <Grid2 size={{ xs: 12 }}>
                   <Typography variant='caption'>{field.name}</Typography>
-                </Grid>
-                <Grid item xs={6}>
+                </Grid2>
+                <Grid2 size={{ xs: 6 }}>
                   <Typography variant='subtitle2'>{field.value}</Typography>
-                </Grid>
-              </Grid>
+                </Grid2>
+              </Grid2>
             </React.Fragment>
           );
         })}
-      </Grid>
+        <%={{ }}=%>     {{! revert delimiters for mustache }}
+      </Grid2>
     );
   }
 

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

@@ -415,8 +415,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