@pega/dx-component-builder-sdk 0.23.13 → 0.23.15

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

@@ -14,7 +14,7 @@ window.PCore = {
       }
     };
   }
-}
+};
 
 const meta: Meta<typeof {{COMPONENT_CLASS_NAME}}> = {
   title: '{{COMPONENT_CLASS_NAME}}',
@@ -25,21 +25,33 @@ const meta: Meta<typeof {{COMPONENT_CLASS_NAME}}> = {
 export default meta;
 type Story = StoryObj<typeof {{COMPONENT_CLASS_NAME}}>;
 
-export const Base{{COMPONENT_CLASS_NAME}}: Story = (args) => {
+export const Base{{COMPONENT_CLASS_NAME}}: Story = args => {
 
   const props = {
     getPConnect: () => {
       return {
         getActionsApi: () => {
           return {
-            updateFieldValue: () => {/* nothing */},
-            triggerFieldChange: () => {/* nothing */}
+            updateFieldValue: () => {
+              /* nothing */
+            },
+            triggerFieldChange: () => {
+              /* nothing */
+            }
           };
         },
-        ignoreSuggestion: () => {/* nothing */},
-        acceptSuggestion: () => {/* nothing */},
-        setInheritedProps: () => {/* nothing */},
-        resolveConfigProps: () => {/* nothing */}
+        ignoreSuggestion: () => {
+          /* nothing */
+        },
+        acceptSuggestion: () => {
+          /* nothing */
+        },
+        setInheritedProps: () => {
+          /* nothing */
+        },
+        resolveConfigProps: () => {
+          /* nothing */
+        }
       };
     }
   };
@@ -49,4 +61,4 @@ export const Base{{COMPONENT_CLASS_NAME}}: Story = (args) => {
 
 Base{{COMPONENT_CLASS_NAME}}.args = {
   ...caseOpConfig
-}
+};

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

@@ -13,13 +13,13 @@ import { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
 
 interface {{COMPONENT_CLASS_NAME}}Props extends PConnProps {
   // If any, enter additional props that only exist on this component
-    label: string;
-    createDateTime: string;
-    createLabel: string;
-    createOperator: { userName: string; userId: string };
-    updateDateTime: string;
-    updateLabel: string;
-    updateOperator: { userName: string; userId: string };
+  label: string;
+  createDateTime: string;
+  createLabel: string;
+  createOperator: { userName: string; userId: string };
+  updateDateTime: string;
+  updateLabel: string;
+  updateOperator: { userName: string; userId: string };
 }
 
 const useStyles = makeStyles(theme => ({
@@ -38,7 +38,6 @@ const useStyles = makeStyles(theme => ({
 // Page Case Widget example
 
 // props passed in combination of props from property panel (config.json) and run time props from Constellation
-// any default values in config.pros should be set in defaultProps at bottom of this file
 export default function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}Props) {
   // const componentName = "Operator";
   const classes = useStyles();
@@ -192,37 +191,38 @@ export default function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}
   // End of popover-related
 
   return (
-  <Styled{{COMPONENT_CLASS_NAME}}Wrapper><>
-{{! pick new delimiters for mustache }}
-{{=<% %>=}}
-      <TextField
-        defaultValue={caseOpName}
-        label={caseOpLabel}
-        onClick={showOperatorDetails}
-        InputProps={{
-          readOnly: true,
-          disableUnderline: true,
-          inputProps: { style: { cursor: 'pointer' } }
-        }}
-      />
-      <br />
-      {Utils.generateDateTime(caseTime, 'DateTime-Since')}
-<%={{ }}=%>     {{! revert delimiters for mustache }}
-      <Popover
-        id={popoverId}
-        open={popoverOpen}
-        anchorEl={popoverAnchorEl}
-        onClose={handlePopoverClose}
+    <Styled{{COMPONENT_CLASS_NAME}}Wrapper>
+      <>
         {{! pick new delimiters for mustache }}
         {{=<% %>=}}
-        anchorOrigin={{ vertical: 'bottom', horizontal: 'center' }}
-        transformOrigin={{ vertical: 'top', horizontal: 'center' }}
-        PaperProps={{ style: { maxWidth: '45ch' } }}
+        <TextField
+          defaultValue={caseOpName}
+          label={caseOpLabel}
+          onClick={showOperatorDetails}
+          InputProps={{
+            readOnly: true,
+            disableUnderline: true,
+            inputProps: { style: { cursor: 'pointer' } }
+          }}
+        />
+        <br />
+        {Utils.generateDateTime(caseTime, 'DateTime-Since')}
         <%={{ }}=%>     {{! revert delimiters for mustache }}
-      >
-        {getPopoverGrid()}
-      </Popover>
-    </>
+        <Popover
+          id={popoverId}
+          open={popoverOpen}
+          anchorEl={popoverAnchorEl}
+          onClose={handlePopoverClose}
+          {{! pick new delimiters for mustache }}
+          {{=<% %>=}}
+          anchorOrigin={{ vertical: 'bottom', horizontal: 'center' }}
+          transformOrigin={{ vertical: 'top', horizontal: 'center' }}
+          PaperProps={{ style: { maxWidth: '45ch' } }}
+          <%={{ }}=%>     {{! revert delimiters for mustache }}
+        >
+          {getPopoverGrid()}
+        </Popover>
+      </>
     </Styled{{COMPONENT_CLASS_NAME}}Wrapper>
   );
-}
+}

package/src/tasks/validator/index.js

@@ -5,22 +5,19 @@ import chalk from 'chalk';
 import inquirer from 'inquirer';
 import Ajv from 'ajv';
 
-import {
-  COMPONENT_SCHEMA,
-  CATEGORY_CUSTOM,
-  CATEGORY_OVERRIDE } from '../../constants.js';
-
+import { COMPONENT_SCHEMA, CATEGORY_CUSTOM, CATEGORY_OVERRIDE } from '../../constants.js';
 import {
   getComponentDirectoryPath,
   getComponents,
   getOOTBComponents,
   removeComponentPrefix,
-  getFramework, 
-  getLocalComponentKeyFromConfig} from '../../util.js';
+  getFramework,
+  getLocalComponentKeyFromConfig
+} from '../../util.js';
 
 const ajv = new Ajv({ allErrors: true });
 
-const combinationTypes = ['PAGE', 'CASE'];
+// const combinationTypes = ['PAGE', 'CASE'];
 
 const allowedSubtypes = [
   ...new Set([
@@ -30,13 +27,25 @@ const allowedSubtypes = [
   ])
 ];
 
+const allowedOverrideTypes = [
+  ...new Set([...COMPONENT_SCHEMA.type.map(({ value }) => value)]),
+  'Group'
+];
+
 // additional subtypes are manually added below
 const allowedOverrideSubtypes = [
   ...new Set([
     ...COMPONENT_SCHEMA.subtype.field.map(({ value }) => value),
     ...COMPONENT_SCHEMA.subtype.template.map(({ value }) => value),
     ...COMPONENT_SCHEMA.subtype.widget.map(({ value }) => value)
-  ]), "ACTION", "DATA_CAPTURE", "SUMMARY", "CASEVIEW", "DATAVIEW", "LIST", "TAB"
+  ]),
+  'ACTION',
+  'DATA_CAPTURE',
+  'SUMMARY',
+  'CASEVIEW',
+  'DATAVIEW',
+  'LIST',
+  'TAB'
 ];
 
 const schema = {
@@ -93,16 +102,16 @@ const schema = {
                     {
                       type: 'object',
                       properties: {
-                        key: { type: 'string'},
+                        key: { type: 'string' },
                         name: { type: 'string' },
                         label: { type: 'string' },
                         format: { type: 'string' }
                       },
-                      required: ['key','name', 'label', 'format']
+                      required: ['key', 'name', 'label', 'format']
                     }
                   ]
                 }
-              },
+              }
             },
             required: ['format']
           },
@@ -159,13 +168,12 @@ const schema = {
                         }
                       },
                       required: ['format', 'elements']
-                    },
+                    }
                   ]
                 }
               }
-
             },
-            required: ['label', 'format'],
+            required: ['label', 'format']
           }
         ]
       }
@@ -188,7 +196,7 @@ const overrideSchema = {
     version: { type: 'string' },
     library: { type: 'string' },
     allowedApplications: { type: 'array' },
-    type: { type: 'string', enum: COMPONENT_SCHEMA.type.map(({ value }) => value) },
+    type: { type: 'string', enum: allowedOverrideTypes },
     subtype: {
       anyOf: [{ type: 'string' }, { type: 'array' }],
 
@@ -230,16 +238,16 @@ const overrideSchema = {
                     {
                       type: 'object',
                       properties: {
-                        key: { type: 'string'},
+                        key: { type: 'string' },
                         name: { type: 'string' },
                         label: { type: 'string' },
                         format: { type: 'string' }
                       },
-                      required: ['key','name', 'label', 'format']
+                      required: ['key', 'name', 'label', 'format']
                     }
                   ]
                 }
-              },
+              }
             },
             required: ['format']
           },
@@ -296,13 +304,12 @@ const overrideSchema = {
                         }
                       },
                       required: ['format', 'elements']
-                    },
+                    }
                   ]
                 }
               }
-
             },
-            required: ['label', 'format'],
+            required: ['label', 'format']
           }
         ]
       }
@@ -316,8 +323,6 @@ const overrideSchema = {
 const validateSchema = ajv.compile(schema);
 const validateOverrideSchema = ajv.compile(overrideSchema);
 
-
-
 export default async (option, category = CATEGORY_CUSTOM) => {
   let componentToValidate = null;
   const framework = await getFramework();
@@ -341,55 +346,57 @@ export default async (option, category = CATEGORY_CUSTOM) => {
   }
 
   const componentDirectory = await getComponentDirectoryPath(componentToValidate, category);
-  let configFileName = "config.json";
+  let configFileName = 'config.json';
   if (category === CATEGORY_OVERRIDE) {
-    configFileName = "config-ext.json";
+    configFileName = 'config-ext.json';
   }
   const configFile = path.join(componentDirectory, configFileName);
   let configData;
   try {
     configData = fs.readFileSync(path.resolve(configFile), 'utf8');
-  }
-  catch (err) {
+  } catch (err) {
     if (category === CATEGORY_CUSTOM) {
       throw new Error(`Missing config file for: ${componentToValidate}`);
-    }
-    else if (category === CATEGORY_OVERRIDE) {
+    } else if (category === CATEGORY_OVERRIDE) {
       // for now, if now file just end
-      console.log(`${chalk.bold.yellow('Config file not available for: ' + componentToValidate)}`);
+      console.log(`${chalk.bold.yellow(`Config file not available for: ${componentToValidate}`)}`);
       return;
     }
   }
 
-  //const data = JSON.parse(fs.readFileSync(path.resolve(configFile), 'utf8'));
+  // const data = JSON.parse(fs.readFileSync(path.resolve(configFile), 'utf8'));
   const data = JSON.parse(configData);
 
-  // for now a special case for ScalarList, it doesn't have a "subtype", so for now manualy
+  // for now a special case for ScalarList & Group, those doesn't have a "subtype", so for now manualy
   // add one in here, just to pass validation
-  if (data["name"] === "ScalarList") {
-    data["subtype"] = "LIST";
+  if (data.name === 'ScalarList') {
+    data.subtype = 'LIST';
+  }
+  if (data.name === 'Group') {
+    data.subtype = 'DATA_CAPTURE';
   }
 
-  const valid = (category === CATEGORY_OVERRIDE) ? validateOverrideSchema(data) : validateSchema(data);
+  const valid =
+    category === CATEGORY_OVERRIDE ? validateOverrideSchema(data) : validateSchema(data);
 
   if (valid) {
-
     // need to remove path
     const originalComponentToValidate = componentToValidate;
     componentToValidate = removeComponentPrefix(componentToValidate);
 
     // don't check for out the box if override
-    if (category != CATEGORY_OVERRIDE) {
-
+    if (category !== CATEGORY_OVERRIDE) {
       // we are validating the component name, not the actual component
       // so need to get the component name (or key) from config.json
-      switch(framework) {
-        case "SDK-Angular":
+      switch (framework) {
+        case 'SDK-Angular':
           componentToValidate = await getLocalComponentKeyFromConfig(originalComponentToValidate);
           break;
-        case "SDK-React":
+        case 'SDK-React':
+          break;
+        case 'SDK-WebComponents':
           break;
-        case "SDK-WebComponents":
+        default:
           break;
       }
 
@@ -404,15 +411,13 @@ export default async (option, category = CATEGORY_CUSTOM) => {
       }
     }
 
-
     console.log(`${chalk.bold.green(componentToValidate)} schema is valid`);
   } else {
+    // eslint-disable-next-line no-lonely-if
     if (category === CATEGORY_OVERRIDE) {
       throw new Error(`Invalid: ${ajv.errorsText(validateOverrideSchema.errors)}`);
-    }
-    else {
+    } else {
       throw new Error(`Invalid: ${ajv.errorsText(validateSchema.errors)}`);
     }
-
   }
 };

package/tests/assets/sdk-a/components/create/override-sdk/designSystemExtension/field-group/field-group.component.html

@@ -0,0 +1,21 @@
+<div class="field-group-container">
+  <div *ngIf="name" class="field-group-heading">
+    <span *ngIf="collapsible; else no_collapse" id="field-group-header" class="field-group-header" (click)="headerClickHandler()">
+      <mat-icon *ngIf="collapsed; else down_arrow" aria-hidden="false" aria-label="Arrow Right" fontIcon="keyboard_arrow_right"></mat-icon>
+      <ng-template #down_arrow>
+        <mat-icon aria-hidden="false" aria-label="Arrow Down" fontIcon="keyboard_arrow_down"></mat-icon>
+      </ng-template>
+      <b>{{ name }}</b>
+    </span>
+    <ng-template #no_collapse>
+      <span>{{ name }}</span>
+    </ng-template>
+  </div>
+
+  <div *ngIf="instructions && instructions !== 'none'" class="field-group-instructions">
+    <div key="instructions" id="instruction-text" [innerHTML]="instructions"></div>
+  </div>
+  <div *ngIf="!collapsed" class="field-group-content">
+    <ng-container [ngTemplateOutlet]="childrenTemplate"></ng-container>
+  </div>
+</div>

package/tests/assets/sdk-a/components/create/override-sdk/designSystemExtension/field-group/field-group.component.scss

@@ -0,0 +1,18 @@
+.field-group-container {
+  .field-group-heading {
+    padding-top: 8px;
+    padding-bottom: 8px;
+    font-weight: bold;
+
+    .field-group-header {
+      gap: 5px;
+      display: flex;
+      align-items: center;
+      cursor: pointer;
+    }
+  }
+
+  .field-group-instructions {
+    padding: 5px 0;
+  }
+}

package/tests/assets/sdk-a/components/create/override-sdk/designSystemExtension/field-group/field-group.component.spec.ts

@@ -0,0 +1,21 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { FieldGroupComponent } from './field-group.component';
+
+describe('FieldGroupComponent', () => {
+  let component: FieldGroupComponent;
+  let fixture: ComponentFixture<FieldGroupComponent>;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      declarations: [FieldGroupComponent]
+    });
+    fixture = TestBed.createComponent(FieldGroupComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

package/tests/assets/sdk-a/components/create/override-sdk/designSystemExtension/field-group/field-group.component.ts

@@ -0,0 +1,24 @@
+import { CommonModule } from '@angular/common';
+import { Component, Input, TemplateRef } from '@angular/core';
+import { MatGridListModule } from '@angular/material/grid-list';
+import { MatIconModule } from '@angular/material/icon';
+
+@Component({
+  selector: 'app-field-group',
+  templateUrl: './field-group.component.html',
+  styleUrls: ['./field-group.component.scss'],
+  standalone: true,
+  imports: [CommonModule, MatGridListModule, MatIconModule]
+})
+export class FieldGroupComponent {
+  @Input() name?: string;
+  @Input() collapsible = false;
+  @Input() instructions: string;
+  @Input() childrenTemplate: TemplateRef<any>;
+
+  collapsed = false;
+
+  headerClickHandler() {
+    this.collapsed = !this.collapsed;
+  }
+}

package/tests/assets/sdk-a/components/create/override-sdk/designSystemExtension/material-details-fields/material-details-fields.component.html

@@ -1,8 +1,14 @@
 <div id="details-fields-list">
   <div *ngFor="let field of arFields$">
-    <div *ngIf="field.type === 'reference'; else showDetails">
-      <component-mapper name="View" [props]="{ pConn$: field.pConn }"></component-mapper>
+    <div *ngIf="field.type === 'group'; else noGroup">
+      <component-mapper name="Group" [props]="{ pConn$: field.pConn }"></component-mapper>
     </div>
+    <ng-template #noGroup>
+      <div *ngIf="field.type === 'reference'; else showDetails">
+        <component-mapper name="View" [props]="{ pConn$: field.pConn }"></component-mapper>
+      </div>
+    </ng-template>
+
     <ng-template #showDetails>
       <div class="psdk-grid-filter" *ngIf="field.config.label">
         <div class="psdk-details-fields-label">

package/tests/assets/sdk-a/components/create/override-sdk/designSystemExtension/rich-text-editor/rich-text-editor.component.html

@@ -0,0 +1,33 @@
+<div [attr.data-test-id]="testId">
+  <label [ngClass]="{ 'label-required': required === true }" class="rich-text-label">{{ label }}</label>
+  <div class="rich-text-editor" *ngIf="!readonly">
+    <editor
+      [formControl]="richText"
+      [attr.disabled]="disabled"
+      [initialValue]="value"
+      [init]="{
+        base_url: '/tinymce',
+        suffix: '.min',
+        menubar: false,
+        placeholder,
+        statusbar: false,
+        min_height: 130,
+        plugins: ['lists', 'advlist', 'autolink', 'image', 'link', 'autoresize'],
+        autoresize_bottom_margin: 0,
+        toolbar: disabled ? false : 'blocks | bold italic strikethrough | bullist numlist outdent indent | link image',
+        toolbar_location: 'bottom',
+        content_style: 'body { font-family:Helvetica, Arial,sans-serif; font-size:14px }',
+        branding: false,
+        paste_data_images: true,
+        file_picker_types: 'image',
+        file_picker_callback: filePickerCallback
+      }"
+      (onBlur)="blur()"
+      (onChange)="change($event)"
+    ></editor>
+    <p *ngIf="richText.invalid" [ngClass]="'text-editor-error'">{{ info }}</p>
+  </div>
+  <div *ngIf="readonly">
+    <div class="readonly-richtext-editor" style="margin: 10px 5px" [innerHTML]="value || '--'"></div>
+  </div>
+</div>

package/tests/assets/sdk-a/components/create/override-sdk/designSystemExtension/rich-text-editor/rich-text-editor.component.scss

@@ -0,0 +1,19 @@
+.rich-text-label {
+  margin: 5px;
+  font-size: 16px;
+}
+
+.rich-text-editor {
+  margin: 10px 0px;
+}
+
+.label-required::after {
+  display: inline;
+  content: ' *';
+  vertical-align: top;
+  color: var(--app-neutral-dark-color);
+}
+
+.text-editor-error {
+  color: var(--app-error-light-color);
+}

package/tests/assets/sdk-a/components/create/override-sdk/designSystemExtension/rich-text-editor/rich-text-editor.component.spec.ts

@@ -0,0 +1,24 @@
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
+
+import { RichTextEditorComponent } from './rich-text-editor.component';
+
+describe('RichTextComponent', () => {
+  let component: RichTextEditorComponent;
+  let fixture: ComponentFixture<RichTextEditorComponent>;
+
+  beforeEach(waitForAsync(() => {
+    TestBed.configureTestingModule({
+      declarations: [RichTextEditorComponent]
+    }).compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(RichTextEditorComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

package/tests/assets/sdk-a/components/create/override-sdk/designSystemExtension/rich-text-editor/rich-text-editor.component.ts

@@ -0,0 +1,89 @@
+import { Component, Input, Output, EventEmitter, OnChanges } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormControl, ReactiveFormsModule, Validators } from '@angular/forms';
+import { EditorModule, TINYMCE_SCRIPT_SRC } from '@tinymce/tinymce-angular';
+
+declare let tinymce: any;
+
+@Component({
+  selector: 'app-rich-text-editor',
+  templateUrl: './rich-text-editor.component.html',
+  styleUrls: ['./rich-text-editor.component.scss'],
+  standalone: true,
+  imports: [CommonModule, EditorModule, ReactiveFormsModule],
+  providers: [{ provide: TINYMCE_SCRIPT_SRC, useValue: 'tinymce/tinymce.min.js' }]
+})
+export class RichTextEditorComponent implements OnChanges {
+  @Input() placeholder;
+  @Input() disabled;
+  @Input() readonly;
+  @Input() value;
+  @Input() label;
+  @Input() required;
+  @Input() info;
+  @Input() error;
+  @Input() testId;
+
+  @Output() onBlur: EventEmitter<any> = new EventEmitter();
+  @Output() onChange: EventEmitter<any> = new EventEmitter();
+
+  richText = new FormControl();
+
+  ngOnChanges() {
+    if (this.required) {
+      this.richText.addValidators(Validators.required);
+    }
+
+    if (this.disabled) {
+      this.richText.disable();
+    } else {
+      this.richText.enable();
+    }
+
+    if (this.value) {
+      this.richText.setValue(this.value);
+    }
+  }
+
+  filePickerCallback = cb => {
+    const input = document.createElement('input');
+    input.setAttribute('type', 'file');
+    input.setAttribute('accept', 'image/*');
+
+    input.addEventListener('change', (e: any) => {
+      const file = e.target.files[0];
+
+      const reader: any = new FileReader();
+      reader.addEventListener('load', () => {
+        /*
+            Note: Now we need to register the blob in TinyMCEs image blob
+            registry. In the next release this part hopefully won't be
+            necessary, as we are looking to handle it internally.
+        */
+        const blobId = `blobid${new Date().getTime()}`;
+        console.log('editorRef', tinymce.activeEditor);
+        const blobCache = tinymce.activeEditor.editorUpload.blobCache;
+        const base64 = reader.result.split(',')[1];
+        const blobInfo = blobCache.create(blobId, file, base64);
+        blobCache.add(blobInfo);
+
+        /* call the callback and populate the Title field with the file name */
+        cb(blobInfo.blobUri(), { title: file.name });
+      });
+      reader.readAsDataURL(file);
+    });
+
+    input.click();
+  };
+
+  blur() {
+    if (tinymce.activeEditor) {
+      const editorValue = tinymce.activeEditor.getContent({ format: 'html' });
+      this.onBlur.emit(editorValue);
+    }
+  }
+
+  change(event) {
+    this.onChange.emit(event);
+  }
+}

package/tests/assets/sdk-a/components/create/override-sdk/field/check-box/check-box.component.html

@@ -1,5 +1,9 @@
 <div *ngIf="displayMode$; else noDisplayMode">
-  <component-mapper *ngIf="bVisible$ !== false" name="FieldValueList" [props]="{ label$, value$, displayMode$ }"></component-mapper>
+  <component-mapper
+    *ngIf="bVisible$ !== false"
+    name="FieldValueList"
+    [props]="{ label$: caption$, value$: value$ ? trueLabel$ : falseLabel$, displayMode$ }"
+  ></component-mapper>
 </div>
 <ng-template #noDisplayMode>
   <div *ngIf="!bReadonly$ && bHasForm$; else noEdit">