@pega/dx-component-builder-sdk 0.1.47 → 0.1.48

package/src/tasks/create/templates/SDK-Angular/template/DETAILS-region/mock.stories.js.mustache

@@ -0,0 +1,290 @@
+const operatorDetails = {
+  data: {
+    pzLoadTime: "January 18, 2023 10:33:19 AM EST",
+    pzPageNameHash: "_pa1519192551088960pz",
+    pyOperatorInfo: {
+      pyUserName: "french DigV2",
+      pyPosition: "",
+      pyImageInsKey: "",
+      pySkills: [
+        {
+          pySkillName: "",
+          pzIndexOwnerKey: "DATA-ADMIN-OPERATOR-ID FRENCHTEST.DIGV2",
+          pySkillRating: 0,
+        },
+      ],
+      pyReportToUserName: "",
+      pyReportTo: "",
+      pyOrganization: "DXIL",
+      pyTitle: "",
+      pyLabel: "frenchTest.DigV2",
+      pyEmailAddress: "User@DigV2",
+      pyTelephone: "",
+    },
+  },
+  status: 200,
+  statusText: "",
+  headers: {
+    "content-length": "435",
+    "content-type": "application/json;charset=UTF-8",
+  },
+  request: {},
+};
+
+export default operatorDetails;
+
+export const pyReviewRaw = {
+  name: "pyReview",
+  type: "View",
+  config: {
+    template: "Details",
+    ruleClass: "MyCo-MyCompon-Work-MyComponents",
+    showLabel: true,
+    label: "@L Details",
+    localeReference: "@LR MYCO-MYCOMPON-WORK-MYCOMPONENTS!VIEW!PYREVIEW",
+    showHighlightedData: true,
+    highlightedData: [
+      {
+        type: "TextInput",
+        config: {
+          value: "@P .pyStatusWork",
+          label: "@L Work Status",
+          displayMode: "STACKED_LARGE_VAL",
+          displayAsStatus: true,
+        },
+      },
+      {
+        type: "TextInput",
+        config: {
+          value: "@P .pyID",
+          label: "@L Case ID",
+          displayMode: "STACKED_LARGE_VAL",
+        },
+      },
+      {
+        type: "DateTime",
+        config: {
+          value: "@P .pxCreateDateTime",
+          label: "@L Create date/time",
+          displayMode: "STACKED_LARGE_VAL",
+        },
+      },
+      {
+        type: "UserReference",
+        config: {
+          label: "@L Create Operator",
+          value: "@USER .pxCreateOperator",
+          placeholder: "Select...",
+          displayMode: "STACKED_LARGE_VAL",
+        },
+      },
+    ],
+    inheritedProps: [
+      {
+        prop: "label",
+        value: "@L Details",
+      },
+      {
+        prop: "showLabel",
+        value: true,
+      },
+    ],
+  },
+  children: [
+    {
+      name: "A",
+      type: "Region",
+      getPConnect: () => {
+        return {
+          getRawMetadata: () => {
+            return pyReviewRaw.children[0];
+          },
+        };
+      },
+      children: [
+        {
+          readOnly: undefined,
+          placeholder: "First Name",
+          value: "John",
+          label: "First Name",
+          hasSuggestions: false,
+          displayMode: "LABELS_LEFT",
+        },
+        {
+          readOnly: undefined,
+          placeholder: "Middle Name",
+          value: "",
+          label: "Middle Name",
+          hasSuggestions: false,
+          displayMode: "LABELS_LEFT",
+        },
+        {
+          readOnly: undefined,
+          placeholder: "Last Name",
+          value: "Doe",
+          label: "Last Name",
+          hasSuggestions: false,
+          displayMode: "LABELS_LEFT",
+        },
+        {
+          value: "john@doe.com",
+          label: "Email",
+          required: true,
+          testId: "CE8AE9DA5B7CD6C3DF2929543A9AF92D",
+          hasSuggestions: false,
+          displayMode: "LABELS_LEFT",
+        },
+        {
+          readOnly: undefined,
+          value: "+16397975093",
+          label: "Phone",
+          displayMode: "LABELS_LEFT",
+          hasSuggestions: false,
+        },
+        {
+          readOnly: undefined,
+          placeholder: "Price",
+          value: "90.99",
+          label: "Price",
+          hasSuggestions: false,
+          displayMode: "LABELS_LEFT",
+          getPConnect: () => {
+            return {
+              getActionsApi: () => {/* nothing */},
+              getStateProps: () => {
+                return {
+                  value: "",
+                };
+              },
+              getComponentName: () => {
+                return "currency";
+              },
+            };
+          },
+        },
+        {
+          readOnly: undefined,
+          value: "100 Mbps",
+          label: "Internet Plan",
+          hasSuggestions: false,
+          displayMode: "LABELS_LEFT",
+          getPConnect: () => {
+            return {
+              getActionsApi: () => {/* nothing */},
+              getStateProps: () => {
+                return {
+                  value: "",
+                };
+              },
+              getComponentName: () => {
+                return "radio";
+              },
+              getConfigProps: () => {
+                return {};
+              },
+              getDataObject: () => {
+                return {};
+              },
+            };
+          },
+        },
+        {
+          readOnly: undefined,
+          placeholder: "Middle Name",
+          value: "",
+          label: "Middle Name",
+          hasSuggestions: false,
+          displayMode: "LABELS_LEFT",
+        },
+        {
+          readOnly: undefined,
+          placeholder: "Last Name",
+          value: "Doe",
+          label: "Last Name",
+          hasSuggestions: false,
+          displayMode: "LABELS_LEFT",
+        },
+        {
+          value: "john@doe.com",
+          label: "Email",
+          required: true,
+          testId: "CE8AE9DA5B7CD6C3DF2929543A9AF92D",
+          hasSuggestions: false,
+          displayMode: "LABELS_LEFT",
+        },
+        {
+          readOnly: undefined,
+          value: "+16397975093",
+          label: "Phone",
+          displayMode: "LABELS_LEFT",
+          hasSuggestions: false,
+        },
+        {
+          readOnly: undefined,
+          placeholder: "Price",
+          value: "90.89",
+          label: "Price",
+          hasSuggestions: false,
+          displayMode: "LABELS_LEFT",
+          getPConnect: () => {
+            return {
+              getActionsApi: () => {/* nothing */},
+              getStateProps: () => {
+                return {
+                  value: "",
+                };
+              },
+              getComponentName: () => {
+                return "currency";
+              },
+            };
+          },
+        },
+        {
+          readOnly: undefined,
+          value: "100 Mbps",
+          label: "Internet Plan",
+          hasSuggestions: false,
+          displayMode: "LABELS_LEFT",
+          getPConnect: () => {
+            return {
+              getActionsApi: () => {/* nothing */},
+              getStateProps: () => {
+                return {
+                  value: "",
+                };
+              },
+              getComponentName: () => {
+                return "radio";
+              },
+              getConfigProps: () => {
+                return {};
+              },
+              getDataObject: () => {
+                return {};
+              },
+            };
+          },
+        },
+        {
+          caseOpConfig: {
+            label: "Create operator",
+            createLabel: "Created",
+            updateLabel: "Updated",
+            updateDateTime: "2023-03-10T15:45:56.919Z",
+            createDateTime: "2023-03-10T15:45:40.154Z",
+            updateOperator: {
+              userId: "rep@mediaco",
+              userName: "representative",
+            },
+            createOperator: {
+              userId: "rep@mediaco",
+              userName: "representative",
+            },
+          },
+        },
+      ],
+    },
+  ],
+  classID: "MyCo-MyCompon-Work-MyComponents",
+};

package/src/tasks/create/templates/SDK-Angular/template/FORM/DefaultForm.svg

@@ -0,0 +1,29 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="100px" height="70px" viewBox="0 0 100 70" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>2 col  copy</title>
+    <g id="Views" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Template-icons" transform="translate(-320.000000, -925.000000)">
+            <g id="2-col--copy" transform="translate(320.000000, 925.000000)">
+                <rect id="bg" stroke="#A5A8BC" stroke-width="0.5" fill="#E7E9EB" x="0.25" y="0.25" width="99.5" height="69.5"></rect>
+                <g id="white" transform="translate(3.000000, 3.000000)" fill="#FFFFFF">
+                    <rect id="Rectangle" x="0" y="0" width="94" height="66.5"></rect>
+                </g>
+                <g id="gray-copy-2" transform="translate(6.000000, 6.000000)" fill="#8084A7">
+                    <rect id="Rectangle" x="0" y="-2.84217094e-14" width="42" height="11.8"></rect>
+                    <rect id="Rectangle" x="46" y="-2.84217094e-14" width="42" height="11.8"></rect>
+                    <rect id="Rectangle-Copy-5" x="0" y="16" width="42" height="11.8"></rect>
+                    <rect id="Rectangle-Copy-3" x="46" y="16" width="42" height="11.8"></rect>
+                    <rect id="Rectangle-Copy-15" x="0" y="32" width="42" height="11.8"></rect>
+                    <rect id="Rectangle-Copy-14" x="46" y="32" width="42" height="11.8"></rect>
+                    <rect id="Rectangle-Copy-17" x="0" y="48" width="42" height="11.8"></rect>
+                    <rect id="Rectangle-Copy-16" x="46" y="48" width="42" height="11.8"></rect>
+                </g>
+                <g id="Group-7" transform="translate(28.000000, 11.000000)">
+                    <path id="Line-12-Copy" d="M35.1666667,42.75 L47.1666667,48.5 L35.1666667,54.25 L35.166,49.25 L-0.25,49.25 L-0.25,47.75 L35.166,47.75 L35.1666667,42.75 Z" fill="#1E1F27" fill-rule="nonzero"></path>
+                    <line x1="0.5" y1="48.5" x2="43.5" y2="32.5" id="Line" stroke="#1E1F27" stroke-width="1.5" stroke-linecap="square"></line>
+                    <line x1="43.5" y1="32.5" x2="1.5" y2="32.5" id="Line-2" stroke="#1E1F27" stroke-width="1.5" stroke-linecap="square"></line>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

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

@@ -0,0 +1,45 @@
+{
+  "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": "DefaultForm.svg",
+    "properties": [
+    {
+      "format": "SELECT",
+      "name": "NumCols",
+      "label": "Number of columns",
+      "defaultValue": "1",
+      "source": [
+        { "key": "1", "value": "One" },
+        { "key": "2", "value": "Two" },
+        { "key": "3", "value": "Three" }
+      ]
+    },
+    {
+      "format": "SELECT",
+      "name": "templateOverrideMode",
+      "label": "Template for embedded views",
+      "defaultValue": "USE_TEMPLATE",
+      "source": [
+        { "key": "USE_TEMPLATE", "value": "Use template" },
+        { "key": "IGNORE_TEMPLATE", "value": "Ignore template" }
+      ]
+    },
+    {
+      "format": "INSTRUCTIONS"
+    },
+    {
+      "name": "Fields",
+      "label": "Fields",
+      "format": "CONTENTPICKER",
+      "allowCreatingGroup": true
+    }
+  ]
+}

package/src/tasks/create/templates/SDK-Angular/template/FORM/demo.stories.jsx.mustache

@@ -0,0 +1,215 @@
+import { useState } from 'react';
+
+import { withKnobs } from '@storybook/addon-knobs';
+
+import {{COMPONENT_CLASS_NAME}} from './index.tsx';
+
+export default {
+  title: '{{COMPONENT_CLASS_NAME}}',
+  decorators: [withKnobs],
+  component: {{COMPONENT_CLASS_NAME}}
+};
+
+if (!window.PCore) {
+  window.PCore = {};
+}
+
+window.PCore.getErrorHandler = () => {
+    return {
+      getGenericFailedMessage() {
+        /* nothing */
+      }
+    };
+};
+
+window.PCore.getConstants = () => {
+  return {
+    CASE_INFO: {
+      INSTRUCTIONS: ""
+    }
+  }
+};
+
+export const Base{{COMPONENT_CLASS_NAME}} = () => {
+
+  const [firstName, setFirstName] = useState('John');
+  const [middleName, setMiddleName] = useState('');
+  const [lastName, setLastName] = useState('Joe');
+  const [phone, setPhone] = useState('+16397975093');
+  const [suffix, setSuffix] = useState('');
+  const [email, setEmail] = useState('john@doe.com');
+
+  const props = {
+    NumCols: "1",
+    template: 'DefaultForm',
+
+    getPConnect: () => {
+      return {
+        getChildren: () => {
+          return [
+            {
+              getPConnect: () => {
+                return {
+                  getChildren: () => {
+                    return [
+                      {
+                        readOnly: undefined,
+                        placeholder: 'First Name',
+                        value: firstName,
+                        label: 'First Name',
+                        hasSuggestions: false,
+                        onChange: val => {
+                          setFirstName(val.target.value);
+                        }
+                      },
+                      {
+                        readOnly: undefined,
+                        placeholder: 'Middle Name',
+                        value: middleName,
+                        label: 'Middle Name',
+                        hasSuggestions: false,
+                        onChange: val => {
+                          setMiddleName(val.target.value);
+                        }
+                      },
+
+                      {
+                        value: lastName,
+                        label: 'Last Name',
+                        required: true,
+                        placeholder: 'Last Name',
+                        testId: '77587239BF4C54EA493C7033E1DBF636',
+                        hasSuggestions: false,
+                        onChange: val => {
+                          setLastName(val.target.value);
+                        }
+                      },
+
+                      {
+                        readOnly: undefined,
+                        value: phone,
+                        label: 'Phone Number',
+                        datasource: {
+                          fields: {
+                            value: undefined
+                          },
+                          source: [
+                            {
+                              value: '+1'
+                            },
+                            {
+                              value: '+91'
+                            },
+                            {
+                              value: '+48'
+                            },
+                            {
+                              value: '+44'
+                            }
+                          ]
+                        },
+                        hasSuggestions: false,
+                        onChange: val => {
+                          setPhone(val.value);
+                        },
+                        onBlur: () => {
+                          /* nothing */
+                        }
+                      },
+
+                      {
+                        value: suffix,
+                        label: 'Suffix',
+                        placeholder: 'Select...',
+                        listType: 'associated',
+                        datasource: [
+                          {
+                            key: 'Sr',
+                            value: 'Sr'
+                          },
+                          {
+                            key: 'Jr',
+                            value: 'Jr'
+                          },
+                          {
+                            key: 'III',
+                            value: 'III'
+                          },
+                          {
+                            key: 'IV',
+                            value: 'IV'
+                          },
+                          {
+                            key: 'V',
+                            value: 'V'
+                          }
+                        ],
+                        testId: '56E6DDD1CB6CEC596B433440DFB21C17',
+                        hasSuggestions: false,
+                        deferDatasource: false,
+                        getPConnect: () => {
+                          return {
+                            getContextName: () => {
+                              return null;
+                            },
+                            getDataObject: () => {
+                              return null;
+                            },
+                            getActionsApi: () => {
+                              return {
+                                updateFieldValue: (propName, value) => {
+                                  setSuffix(value);
+                                },
+                                triggerFieldChange: () => {
+                                  /* nothing */
+                                }
+                              };
+                            },
+                            getStateProps: () => {
+                              return {
+                                value: ''
+                              };
+                            }
+                          };
+                        },
+                        onChange: val => {
+                          setSuffix(val.target.value);
+                        }
+                      },
+
+                      {
+                        value: email,
+                        label: 'Email',
+                        required: true,
+                        testId: 'CE8AE9DA5B7CD6C3DF2929543A9AF92D',
+                        hasSuggestions: false,
+                        onChange: val => {
+                          setEmail(val.target.value);
+                        }
+                      }
+                    ];
+                  }
+                };
+              }
+            }
+          ];
+        },
+        getValue: (val) => {
+          return val;
+        },
+        getCurrentView: () => {
+          return "";
+        },
+        getCurrentClassID: () => {
+          return "";
+        }
+      };
+    }
+  };
+
+  return (
+    <>
+      <{{COMPONENT_CLASS_NAME}} {...props}></{{COMPONENT_CLASS_NAME}}>
+    </>
+  );
+};

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

@@ -0,0 +1,23 @@
+<!-- When adding a component here, add the same component in 'region' template as well -->
+{{! pick new delimiters for mustache }}
+{{=<% %>=}}
+<div *ngIf="!NO_HEADER_TEMPLATES.includes(template) && showLabel">
+  <div class="template-title-container">{{label}}</div>
+</div>
+<div *ngIf="instructions" class='psdk-default-form-instruction-text'>
+  <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' }">
+    <component-mapper
+      [name]="kid.getPConnect().getComponentName()"
+      [props]="{
+        pConn$: kid.getPConnect(),
+        formGroup$: formGroup$
+      }"
+      errorMsg="<%COMPONENT_CLASS_NAME%> wants component not yet available: {{ kid.getPConnect().getComponentName() }}"
+    ></component-mapper>
+  </div>
+</div>
+<%={{ }}=%>     {{! revert delimiters for mustache }}

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

@@ -0,0 +1,33 @@
+@import '@pega/angular-sdk-library/_shared/styles.scss';
+
+.psdk-default-form-one-column {
+  display: grid;
+  grid-template-columns: repeat(1, minmax(0, 1fr));
+  gap: calc(1rem);
+}
+
+.psdk-default-form-two-column {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: calc(1rem);
+}
+
+.psdk-default-form-three-column {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: calc(1rem);
+}
+
+.psdk-default-form-two-column .grid-column {
+  grid-column: 1 / span 2;
+}
+
+.psdk-default-form-three-column .grid-column {
+  grid-column: 1 / span 3;
+}
+
+.template-title-container {
+  font-size: calc(0.9375rem);
+  font-weight: 600;
+  margin: 10px 0px;
+}

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

@@ -0,0 +1,25 @@
+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();
+  });
+});