@pega/dx-component-builder-sdk 25.1.14 → 25.1.16

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pega/dx-component-builder-sdk",
-  "version": "25.1.14",
+  "version": "25.1.16",
   "description": "Utility for building custom UI components",
   "bin": "./bin/index.js",
   "scripts": {

package/src/tasks/create/index.js

@@ -324,6 +324,13 @@ export const validateCompile = async (
 export default async options => {
   showVersion();
 
+  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.'
+    )
+  );
+  
   const framework = await getFramework();
 
   if (options.params.length >= 12) {

package/src/tasks/create/templates/SDK-Angular/template/FORM/form.component.html.mustache

@@ -4,7 +4,7 @@
   <div key="instructions" id="instruction-text" [innerHTML]="instructions"></div>
 </div>
 <div [className]="divClass$">
-  <div *ngFor="let kid of arChildren$" [ngClass]="{ 'grid-column': kid.getPConnect().getComponentName() === 'View' }">
+  <div *ngFor="let kid of arChildren$" [ngClass]="{ 'grid-column': kid.getPConnect().getComponentName() === 'reference' }">
     <component-mapper
       [name]="kid.getPConnect().getComponentName()"
       [props]="{

package/src/tasks/create/templates/SDK-Angular/template/FORM/form.component.ts.mustache

@@ -2,7 +2,6 @@ import { Component, OnInit, Input, forwardRef, OnChanges } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { FormGroup } from '@angular/forms';
 import { AngularPConnectData, AngularPConnectService } from '@pega/angular-sdk-components';
-import { ReferenceComponent } from '@pega/angular-sdk-components';
 import { ComponentMapperComponent } from '@pega/angular-sdk-components';
 import { TemplateUtils } from '@pega/angular-sdk-components';
 import { FormTemplateBase } from '@pega/angular-sdk-components';
@@ -91,7 +90,7 @@ export class {{COMPONENT_CLASS_NAME}}Component extends FormTemplateBase implemen
     // repoint children before getting templateArray
     // Children may contain 'reference' component, so we need to
     //  normalize them
-    const children = ReferenceComponent.normalizePConnArray(kids[0].getPConnect().getChildren());
+    const children = kids[0].getPConnect().getChildren();
 
     if (areViewsChanged(this.arChildren$, children)) {
       this.arChildren$ = children;

package/src/tasks/create/templates/SDK-Angular/widget/CASE/demo.stories.tsx.mustache

@@ -8,11 +8,23 @@ const meta: Meta<{{COMPONENT_CLASS_NAME}}Component> = {
   title: '{{COMPONENT_CLASS_NAME}}',
   component: {{COMPONENT_CLASS_NAME}}Component,
   excludeStories: /.*Data$/,
-  render: (args) => {
+  render: args => {
+    window.PCore.getConstants = (): any => {
+      return {
+        CASE_INFO: {
+          CASE_INFO_ID: 'caseInfo.ID',
+          INSTRUCTIONS: ''
+        }
+      };
+    };
     window.PCore.getDataApiUtils = (): any => {
       return {
         getData: () => {
-          return Promise.resolve(historyData);
+          return {
+            then: (callback: any) => {
+              callback(historyData);
+            }
+          };
         }
       };
     };

package/src/tasks/create/templates/SDK-React/field/Icon-Button-URL/index.tsx.mustache

@@ -99,7 +99,7 @@ export default function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}
           console.log(error);
         });
     }
-  }, [PConnect, countryCode, showTable]);
+  }, [countryCode, showTable]);
 
   // when DISPLAY_ONLY, in this example we will just show the URL.
   if (displayMode === 'DISPLAY_ONLY') {
@@ -118,7 +118,7 @@ export default function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}
       {{=<% %>=}}
       <div style={{ display: 'flex', alignItems: 'center' }} data-testid={testId}>
         <ArrowForwardIcon />
-        <TextContent displayAs='body' content={localLabel} />
+        <TextContent displayAs='Paragraph' content={localLabel} />
         <Tooltip title={PConnect.getLocalizedValue('Click to show/hide state list', '', '')}>
           <IconButton onClick={showHideTable} style={{ padding: '0 0.25rem' }}>
             <FormatListNumberedIcon />

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

@@ -422,6 +422,13 @@ export const validateCompile = async (
 export default async options => {
   showVersion();
 
+  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' });