@pega/dx-component-builder-sdk 0.23.21 → 0.24.1

package/src/tasks/create/templates/SDK-Angular/field/Icon-Button-URL/text-url.component.spec.ts.mustache

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

package/src/tasks/create/templates/SDK-Angular/field/Icon-Button-URL/text-url.component.ts.mustache

@@ -0,0 +1,179 @@
+import { Component, OnInit, Input, ChangeDetectorRef, forwardRef, OnDestroy } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms';
+import { MatInputModule } from '@angular/material/input';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { interval } from 'rxjs';
+import { AngularPConnectData, AngularPConnectService } from '@pega/angular-sdk-components';
+import { Utils } from '@pega/angular-sdk-components';
+import { ComponentMapperComponent } from '@pega/angular-sdk-components';
+import { PConnFieldProps } from '@pega/angular-sdk-components';
+
+interface {{COMPONENT_CLASS_NAME}}Props extends PConnFieldProps {
+  // If any, enter additional props that only exist on URL here
+}
+
+@Component({
+  selector: 'app-{{COMPONENT_CLASS_NAME_KEBAB}}',
+  templateUrl: './{{COMPONENT_CLASS_NAME_KEBAB}}.component.html',
+  styleUrls: ['./{{COMPONENT_CLASS_NAME_KEBAB}}.component.scss'],
+  standalone: true,
+  imports: [CommonModule, ReactiveFormsModule, MatFormFieldModule, MatInputModule, forwardRef(() => ComponentMapperComponent)]
+})
+export class {{COMPONENT_CLASS_NAME}}Component implements OnInit, OnDestroy {
+  @Input() pConn$: typeof PConnect;
+  @Input() formGroup$: FormGroup;
+
+  // Used with AngularPConnect
+  angularPConnectData: AngularPConnectData = {};
+  configProps$: {{COMPONENT_CLASS_NAME}}Props;
+
+  label$ = '';
+  value$ = '';
+  bRequired$ = false;
+  bReadonly$ = false;
+  bDisabled$ = false;
+  bVisible$ = true;
+  displayMode$?: string = '';
+  controlName$: string;
+  bHasForm$ = true;
+  componentReference = '';
+  helperText: string;
+  placeholder: string;
+
+  fieldControl = new FormControl('', null);
+
+  constructor(
+    private angularPConnect: AngularPConnectService,
+    private cdRef: ChangeDetectorRef,
+    private utils: Utils
+  ) {}
+
+  ngOnInit(): void {
+    // First thing in initialization is registering and subscribing to the AngularPConnect service
+    this.angularPConnectData = this.angularPConnect.registerAndSubscribeComponent(this, this.onStateChange);
+    this.controlName$ = this.angularPConnect.getComponentID(this);
+
+    // Then, continue on with other initialization
+
+    // call updateSelf when initializing
+    // this.updateSelf();
+    this.checkAndUpdate();
+
+    if (this.formGroup$) {
+      // add control to formGroup
+      this.formGroup$.addControl(this.controlName$, this.fieldControl);
+      this.fieldControl.setValue(this.value$);
+      this.bHasForm$ = true;
+    } else {
+      this.bReadonly$ = true;
+      this.bHasForm$ = false;
+    }
+  }
+
+  ngOnDestroy(): void {
+    if (this.formGroup$) {
+      this.formGroup$.removeControl(this.controlName$);
+    }
+
+    if (this.angularPConnectData.unsubscribeFn) {
+      this.angularPConnectData.unsubscribeFn();
+    }
+  }
+
+  // Callback passed when subscribing to store change
+  onStateChange() {
+    this.checkAndUpdate();
+  }
+
+  checkAndUpdate() {
+    // Should always check the bridge to see if the component should
+    // update itself (re-render)
+    const bUpdateSelf = this.angularPConnect.shouldComponentUpdate(this);
+
+    // ONLY call updateSelf when the component should update
+    if (bUpdateSelf) {
+      this.updateSelf();
+    }
+  }
+
+  // updateSelf
+  updateSelf(): void {
+    // moved this from ngOnInit() and call this from there instead...
+    this.configProps$ = this.pConn$.resolveConfigProps(this.pConn$.getConfigProps()) as {{COMPONENT_CLASS_NAME}}Props;
+
+    if (this.configProps$.value != undefined) {
+      this.value$ = this.configProps$.value;
+    }
+
+    this.label$ = this.configProps$.label;
+    this.displayMode$ = this.configProps$.displayMode;
+    this.helperText = this.configProps$.helperText;
+    this.placeholder = this.configProps$.placeholder || '';
+
+    // timeout and detectChanges to avoid ExpressionChangedAfterItHasBeenCheckedError
+    setTimeout(() => {
+      if (this.configProps$.required != null) {
+        this.bRequired$ = this.utils.getBooleanValue(this.configProps$.required);
+      }
+      this.cdRef.detectChanges();
+    });
+
+    if (this.configProps$.visibility != null) {
+      this.bVisible$ = this.utils.getBooleanValue(this.configProps$.visibility);
+    }
+
+    // disabled
+    if (this.configProps$.disabled != undefined) {
+      this.bDisabled$ = this.utils.getBooleanValue(this.configProps$.disabled);
+    }
+
+    if (this.bDisabled$) {
+      this.fieldControl.disable();
+    } else {
+      this.fieldControl.enable();
+    }
+
+    if (this.configProps$.readOnly != null) {
+      this.bReadonly$ = this.utils.getBooleanValue(this.configProps$.readOnly);
+    }
+
+    this.componentReference = (this.pConn$.getStateProps() as any).value;
+
+    // trigger display of error message with field control
+    if (this.angularPConnectData.validateMessage != null && this.angularPConnectData.validateMessage != '') {
+      const timer = interval(100).subscribe(() => {
+        this.fieldControl.setErrors({ message: true });
+        this.fieldControl.markAsTouched();
+
+        timer.unsubscribe();
+      });
+    }
+  }
+
+  fieldOnChange(event: any) {
+    this.angularPConnectData.actions?.onChange(this, event);
+  }
+
+  fieldOnBlur(event: any) {
+    // PConnect wants to use eventHandler for onBlur
+    this.angularPConnectData.actions?.onBlur(this, event);
+  }
+
+  getErrorMessage() {
+    let errMessage = '';
+
+    // look for validation messages for json, pre-defined or just an error pushed from workitem (400)
+    if (this.fieldControl.hasError('message')) {
+      errMessage = this.angularPConnectData.validateMessage ?? '';
+      return errMessage;
+    }
+    if (this.fieldControl.hasError('required')) {
+      errMessage = 'You must enter a value';
+    } else if (this.fieldControl.errors) {
+      errMessage = this.fieldControl.errors.toString();
+    }
+
+    return errMessage;
+  }
+}

package/src/tasks/create/templates/SDK-React/field/Icon-Button-URL/config.json.mustache

@@ -0,0 +1,64 @@
+{
+  "name": "{{COMPONENT_KEY}}",
+  "label": "{{COMPONENT_LABEL}}",
+  "description": "{{DESCRIPTION}}",
+  "organization": "{{ORGANIZATION}}",
+  "version": "{{VERSION}}",
+  "library": "{{LIBRARY}}",
+  "allowedApplications": {{{ALLOWEDAPPS}}},
+  "componentKey": "{{COMPONENT_KEY}}",
+  "type": "{{TYPE}}",
+  "subtype": {{{SUB_TYPE}}},
+  "icon": "images/pz-url-active.svg",
+  "properties": [
+    {
+      "format": "SELECT",
+      "name": "countryCode",
+      "label": "Country code",
+      "defaultValue": "USA",
+      "source": [
+        {
+          "key": "USA",
+          "value": "United States"
+        },
+        {
+          "key": "CAN",
+          "value": "Canada"
+        },
+        {
+          "key": "AUS",
+          "value": "Australia"
+        },
+        {
+          "key": "JPN",
+          "value": "Japan"
+        },
+        {
+          "key": "IND",
+          "value": "India"
+        },
+        {
+          "key": "TUR",
+          "value": "Turkey"
+        }
+      ]
+    },
+    {
+      "label": "Advanced",
+      "format": "GROUP",
+      "collapsible": true,
+      "properties": [
+        {
+          "name": "testId",
+          "label": "Test ID",
+          "format": "TEXT",
+          "ignorePattern": "[^-_\\p{N}\\p{L}]",
+          "includeAnnotations": false
+        }
+      ]
+    }
+  ],
+  "defaultConfig": {
+    "label": "@L $this.label"
+  }
+}

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

@@ -0,0 +1,58 @@
+import { useState } from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
+
+import {{COMPONENT_CLASS_NAME}} from './index';
+import { configProps } from './mock';
+
+const meta: Meta<typeof {{COMPONENT_CLASS_NAME}}> = {
+  title: '{{COMPONENT_CLASS_NAME}}',
+  component: {{COMPONENT_CLASS_NAME}},
+  excludeStories: /.*Data$/
+};
+
+export default meta;
+type Story = StoryObj<typeof {{COMPONENT_CLASS_NAME}}>;
+
+export const Base{{COMPONENT_CLASS_NAME}}: Story = args => {
+  const [value, setValue] = useState(configProps.value);
+
+  const props = {
+    value,
+    placeholder: configProps.placeholder,
+    getPConnect: () => {
+      return {
+        getActionsApi: () => {
+          return {
+            updateFieldValue: (propName, theValue) => {
+              setValue(theValue);
+            }
+          };
+        },
+        getStateProps: () => {
+          return { value: '.name' };
+        }
+      };
+    },
+    onChange: event => {
+      setValue(event.target.value);
+    },
+    onBlur: () => {
+      return configProps.value;
+    }
+  };
+
+  return <{{COMPONENT_CLASS_NAME}} {...props} {...args} />;
+};
+
+Base{{COMPONENT_CLASS_NAME}}.args = {
+  label: configProps.label,
+  helperText: configProps.helperText,
+  testId: configProps.testId,
+  readOnly: configProps.readOnly,
+  disabled: configProps.disabled,
+  required: configProps.required,
+  status: configProps.status,
+  hideLabel: configProps.hideLabel,
+  displayMode: configProps.displayMode,
+  validatemessage: configProps.validatemessage
+};

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

@@ -0,0 +1,79 @@
+import { TextField } from '@material-ui/core';
+
+import { getComponentFromMap } from '@pega/react-sdk-components/lib/bridge/helpers/sdk_component_map';
+import { PConnFieldProps } from '@pega/react-sdk-components/lib/types/PConnProps';
+import Styled{{COMPONENT_CLASS_NAME}}Wrapper from './styles';
+
+interface {{COMPONENT_CLASS_NAME}}Props extends PConnFieldProps {
+  // If any, enter additional props that only exist on this componentName
+}
+
+// Duplicated runtime code from React SDK
+
+// props passed in combination of props from property panel (config.json) and run time props from Constellation
+export default function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}Props) {
+  // Get emitted components from map (so we can get any override that may exist)
+  const FieldValueList = getComponentFromMap('FieldValueList');
+  const TextInput = getComponentFromMap('TextInput');
+
+  const {
+    label,
+    required,
+    disabled,
+    value = '',
+    validatemessage,
+    status,
+    onChange,
+    onBlur,
+    readOnly,
+    testId,
+    helperText,
+    displayMode,
+    hideLabel,
+    placeholder
+  } = props;
+  const helperTextToDisplay = validatemessage || helperText;
+
+  if (displayMode === 'LABELS_LEFT') {
+    return <FieldValueList name={hideLabel ? '' : label} value={value} />;
+  }
+
+  if (displayMode === 'STACKED_LARGE_VAL') {
+    return <FieldValueList name={hideLabel ? '' : label} value={value} variant='stacked' />;
+  }
+
+  if (readOnly) {
+    return <TextInput {...props} />;
+  }
+
+  let testProp = {};
+
+  testProp = {
+    'data-test-id': testId
+  };
+
+  return (
+    <Styled{{COMPONENT_CLASS_NAME}}Wrapper>
+      <TextField
+        type='url'
+        fullWidth
+        variant='outlined'
+        helperText={helperTextToDisplay}
+        placeholder={placeholder ?? ''}
+        size='small'
+        required={required}
+        disabled={disabled}
+        onChange={onChange}
+        onBlur={!readOnly ? onBlur : undefined}
+        error={status === 'error'}
+        label={label}
+        value={value}
+        {{! pick new delimiters for mustache }}
+        {{=<% %>=}}
+        InputProps={{ inputProps: { ...testProp } }}
+        <%={{ }}=%>     {{! revert delimiters for mustache }}
+      />
+     </Styled{{COMPONENT_CLASS_NAME}}Wrapper>
+  );
+}
+

package/src/tasks/create/templates/SDK-React/field/Icon-Button-URL/mock.ts.mustache

@@ -0,0 +1,16 @@
+// eslint-disable-next-line import/prefer-default-export
+export const configProps = {
+  value: '',
+  label: 'URL Sample',
+  placeholder: 'URL Placeholder',
+  helperText: 'URL Helper Text',
+  testId: 'url-12345678',
+  hasSuggestions: false,
+  required: false,
+  disabled: false,
+  readOnly: false,
+  displayMode: '',
+  status: '',
+  hideLabel: false,
+  validatemessage: ''
+};

package/src/tasks/create/templates/SDK-React/field/Icon-Button-URL/styles.js.mustache

@@ -0,0 +1,7 @@
+import styled, { css } from 'styled-components';
+
+export default styled.div(() => {
+  return css`
+    margin: 0px 0;
+  `;
+});

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

@@ -70,9 +70,6 @@ export const Base{{COMPONENT_CLASS_NAME}}: Story = args => {
         },
         resolveConfigProps: () => {
           /* nothing */
-        },
-        createComponent: () => {
-          /* nothing */
         }
       };
     }

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

@@ -49,7 +49,7 @@ export default function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}
         field.config.displayAsStatus = true;
       }
 
-      return getPConnect().createComponent(field, '', '', {}); // 2nd, 3rd, and 4th args empty string/object/null until typedef marked correctly as optional
+      return getPConnect().createComponent(field, '', 0, {}); // 2nd, 3rd, and 4th args empty string/object/null until typedef marked correctly as optional
     });
   }
 

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

@@ -68,9 +68,6 @@ export const Base{{COMPONENT_CLASS_NAME}}: Story = args => {
         },
         resolveConfigProps: () => {
           /* nothing */
-        },
-        createComponent: () => {
-          /* nothing */
         }
       };
     }

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

@@ -49,7 +49,7 @@ export default function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}
         field.config.displayAsStatus = true;
       }
 
-      return getPConnect().createComponent(field, '', '', {}); // 2nd, 3rd, and 4th args empty string/object/null until typedef marked correctly as optional
+      return getPConnect().createComponent(field, '', 0, {}); // 2nd, 3rd, and 4th args empty string/object/null until typedef marked correctly as optional
     });
   }
 

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

@@ -108,6 +108,9 @@ export const compileMustacheTemplates = async (
       case 'Picklist-RadioButtons':
         mustacheSubType = 'Picklist';
         break;
+      case 'Icon-Button-URL':
+        mustacheSubType = 'Text-URL';
+        break;
     }
   }
 

package/src/tasks/publish/helper.js

@@ -141,6 +141,7 @@ export const zipComponent = async (componentKey, category = CATEGORY_CUSTOM) =>
 
   const configJson = `${srcDirectory}/config.json`;
   const configExtJson = `${srcDirectory}/config-ext.json`;
+  const localizationJson = `${srcDirectory}/localizations.json`;
 
   const zip = new AdmZip();
 
@@ -148,6 +149,9 @@ export const zipComponent = async (componentKey, category = CATEGORY_CUSTOM) =>
   if (category === CATEGORY_CUSTOM || category == CATEGORY_CONSTELLATION) {
     zip.addLocalFolder(srcDirectory, 'src/');
     zip.addLocalFile(configJson);
+    if (fs.existsSync(localizationJson)) {
+      zip.addLocalFile(localizationJson);
+    }
   }
   else {
     // check to see if have file

package/src/tasks/publish-all/helper.js

@@ -127,6 +127,7 @@ export const zipComponent = async (componentKey, category = CATEGORY_CUSTOM) =>
   const buildDirectory = await path.join(path.resolve(), 'dist/components', componentKey);
   const configJson = `${srcDirectory}/config.json`;
   const configExtJson = `${srcDirectory}/config-ext.json`;
+  const localizationJson = `${srcDirectory}/localizations.json`;
 
   const zip = new AdmZip();
 
@@ -134,6 +135,9 @@ export const zipComponent = async (componentKey, category = CATEGORY_CUSTOM) =>
   if (category === CATEGORY_CUSTOM || category == CATEGORY_CONSTELLATION) {
     zip.addLocalFolder(srcDirectory, 'src/');
     zip.addLocalFile(configJson);
+    if (fs.existsSync(localizationJson)) {
+      zip.addLocalFile(localizationJson);
+    }
   }
   else {
     // check to see if have file
@@ -151,7 +155,7 @@ export const zipComponent = async (componentKey, category = CATEGORY_CUSTOM) =>
   let configContent = "{ }";
   if (category === CATEGORY_CUSTOM || category === CATEGORY_CONSTELLATION) {
     configContent = Buffer.from(fs.readFileSync(`${srcDirectory}/config.json`)).toString();
-    
+
     // cleanup will remove this directory
 
   }
@@ -160,7 +164,7 @@ export const zipComponent = async (componentKey, category = CATEGORY_CUSTOM) =>
       configContent = Buffer.from(fs.readFileSync(`${srcDirectory}/config-ext.json`)).toString();
 
       // cleanup will remove this directory
-      
+
     }
     else {
       const tempConfig = { "componentKey" : ""};

package/src/tasks/validator/index.js

@@ -365,7 +365,13 @@ export default async (option, category = CATEGORY_CUSTOM) => {
   }
 
   // const data = JSON.parse(fs.readFileSync(path.resolve(configFile), 'utf8'));
-  const data = JSON.parse(configData);
+  let data;
+  try {
+    data = JSON.parse(configData);
+  }
+  catch (er) {
+    throw new Error(`Invalid schema json in config.json: ${er}`);
+  }
 
   // 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