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

package/src/tasks/create/templates/Constellation/template/FORM-region/demo.stories.jsx.mustache

@@ -1,3 +1,5 @@
+/* eslint-disable react-hooks/rules-of-hooks */
+import { useState } from 'react';
 import { withKnobs } from '@storybook/addon-knobs';
 
 import {{COMPONENT_CLASS_NAME}} from './index.jsx';
@@ -12,49 +14,125 @@ export default {
 };
 
 const renderField = resolvedProps => {
-  const { displayMode, value = '', label = '' } = resolvedProps;
+  const { displayMode, value = '', label = '', key } = resolvedProps;
+
+  const [inputValue, setInputValue] = useState(value);
+  const [phoneValue, setPhoneValue] = useState('+16397975093');
+
 
   const variant = displayMode === 'LABELS_LEFT' ? 'inline' : 'stacked';
 
   let val =
     value !== '' ? (
-      <Text variant='h1' as='span'>
-        {value}
+      <Text
+        variant='h1'
+        as='span'
+        key={key}
+        onChange={e => {
+          setInputValue(e.target.value);
+        }}
+      >
+        {inputValue}
       </Text>
     ) : (
       ''
     );
 
-{{! pick new delimiteres for mustache }}
+{{! pick new delimiters for mustache }}
 {{=<% %>=}}
 
   if (label === 'Service Date')
-    val = <DateInput value={value} style={{ fontSize: '14px' }}></DateInput>;
+    val = (
+      <DateInput
+        value={inputValue}
+        style={{ fontSize: '14px' }}
+        key={key}
+        onChange={dateVal => {
+          const { valueAsISOString: date } = dateVal;
+          const trimmedDate = date ? date.substring(0, date.indexOf('T')) : date;
+          setInputValue(trimmedDate);
+        }}
+      ></DateInput>
+    );
 
   if (label === 'Email')
-    val = <Input type='email' value={value} style={{ fontSize: '14px' }}></Input>;
+    val = (
+      <Input
+        type='email'
+        value={inputValue}
+        style={{ fontSize: '14px' }}
+        key={key}
+        onChange={e => {
+          setInputValue(e.target.value);
+        }}
+      ></Input>
+    );
 
   if (label === 'First Name' || label === 'Last Name' || label === 'Middle Name')
-    val = <Input value={value} style={{ fontSize: '14px' }}></Input>;
+    val = (
+      <Input
+        value={inputValue}
+        style={{ fontSize: '14px' }}
+        key={key}
+        onChange={e => {
+          setInputValue(e.target.value);
+        }}
+      ></Input>
+    );
 
   if (label === 'Phone Number')
-    val = <CosmosPhone value={value} style={{ fontSize: '14px' }}></CosmosPhone>;
+    val = (
+      <CosmosPhone
+        value={phoneValue}
+        showCountryCode
+        style={{ fontSize: '14px' }}
+        key={key}
+        onChange={phoneVal => {
+          setPhoneValue(phoneVal);
+        }}
+      ></CosmosPhone>
+    );
 
-<%={{ }}=%>     {{! revert delimiteres for mustache }}
+<%={{ }}=%>     {{! revert delimiters for mustache }}
 
   if (variant === 'inline') {
-    val = value || <span aria-hidden='true'>&ndash;&ndash;</span>;
+    val = value || (
+      <span
+        aria-hidden='true'
+        key={key}
+        onChange={e => {
+          setInputValue(e.target.value);
+        }}
+      >
+        &ndash;&ndash;
+      </span>
+    );
   } else {
     val = (
-      <Text variant='h1' as='span'>
+      <Text
+        variant='h1'
+        as='span'
+        key={key}
+        onChange={e => {
+          setInputValue(e.target.value);
+        }}
+      >
         {val}
       </Text>
     );
   }
-  return <FieldValueList variant={variant} fields={[{ name: label, value: val }]} />;
+  return (
+    <FieldValueList
+      variant={variant}
+      fields={[{ name: label, value: val }]}
+      key={key}
+      onChange={() => {
+        /* nothing */
+      }}
+    />
+  );
 };
 
-
 export const base{{COMPONENT_CLASS_NAME}} = () => {
   const props = {
     template: 'DefaultForm',

package/src/tasks/create/templates/Constellation/template/FORM-region/index.jsx.mustache

@@ -24,7 +24,7 @@ export default function {{COMPONENT_CLASS_NAME}}(props) {
 
   return (
     <Styled{{COMPONENT_CLASS_NAME}}Wrapper>
-    {{! pick new delimiteres for mustache }}
+    {{! pick new delimiters for mustache }}
     {{=<% %>=}}
       <Grid container={gridContainer}>
        {children.map((child, i) => (
@@ -33,7 +33,7 @@ export default function {{COMPONENT_CLASS_NAME}}(props) {
         </Flex>
        ))}
       </Grid>
-    <%={{ }}=%>     {{! revert delimiteres for mustache }}
+    <%={{ }}=%>     {{! revert delimiters for mustache }}
     </Styled{{COMPONENT_CLASS_NAME}}Wrapper>
   );
 

package/src/tasks/create/templates/Constellation/template/FORM-region/mock.stories.js.mustache

@@ -16,21 +16,24 @@ export const pyReviewRaw = {
           type: 'TextInput',
           config: {
             value: '@P .FirstName',
-            label: '@L First Name'
+            label: '@L First Name',
+            key: 'FirstName'
           }
         },
         {
           type: 'TextInput',
           config: {
             value: '@P .MiddleName',
-            label: '@L Middle Name'
+            label: '@L Middle Name',
+            key: 'MiddleName'
           }
         },
         {
           type: 'TextInput',
           config: {
             value: '@P .LastName',
-            label: '@L Last Name'
+            label: '@L Last Name',
+            key: 'LastName'
           }
         }
       ]
@@ -43,7 +46,8 @@ export const pyReviewRaw = {
           type: 'Email',
           config: {
             value: '@P .Email',
-            label: '@L Email'
+            label: '@L Email',
+            key: 'Email'
           }
         },
         {
@@ -56,14 +60,16 @@ export const pyReviewRaw = {
               fields: {
                 value: '@P .pyCallingCode'
               }
-            }
+            },
+            key: 'PhoneNumber'
           }
         },
         {
           type: 'Date',
           config: {
             value: '@P .ServiceDate',
-            label: '@L Service Date'
+            label: '@L Service Date',
+            key: 'ServiceDate'
           }
         }
       ]
@@ -77,25 +83,29 @@ export const regionChildrenResolved = [
     readOnly: undefined,
     value: 'John',
     label: 'First Name',
-    hasSuggestions: false
+    hasSuggestions: false,
+    key: 'First Name'
   },
   {
     readOnly: undefined,
     value: '',
     label: 'Middle Name',
-    hasSuggestions: false
+    hasSuggestions: false,
+    key: 'Middle Name'
   },
   {
     readOnly: undefined,
     value: 'Doe',
     label: 'Last Name',
-    hasSuggestions: false
+    hasSuggestions: false,
+    key: 'Last Name'
   },
   {
     readOnly: undefined,
     value: 'John@doe.com',
     label: 'Email',
-    hasSuggestions: false
+    hasSuggestions: false,
+    key: 'Email'
   },
   {
     readOnly: undefined,
@@ -120,12 +130,14 @@ export const regionChildrenResolved = [
         }
       ]
     },
-    hasSuggestions: false
+    hasSuggestions: false,
+    key: 'Phone Number'
   },
   {
     readOnly: undefined,
     value: '2023-01-25',
     label: 'Service Date',
-    hasSuggestions: false
+    hasSuggestions: false,
+    key: 'Service Date'
   }
 ];

package/src/tasks/create/templates/Constellation/template/FORM-region/styles.js.mustache

@@ -1,7 +1,14 @@
-import styled, { css } from 'styled-components';
+// utilizing theming, comment out, if want individual style
+import styled from 'styled-components';
+import { Configuration } from '@pega/cosmos-react-core';
 
-export default styled.div(() => {
-  return css`
-    margin: 0px 0px;
-  `;
-});
+export default styled(Configuration)``;
+
+// individual style, comment out above, and uncomment here and add styles
+// import styled, { css } from 'styled-components';
+//
+// export default styled.div(() => {
+//  return css`
+//    margin: 0px 0;
+//  `;
+// });

package/src/tasks/create/templates/Constellation/template/PAGE/demo.stories.jsx.mustache

@@ -64,6 +64,7 @@ export const base{{COMPONENT_CLASS_NAME}} = () => {
           if (config.type === 'AppAnnouncement') {
             return (
               <PegaAppAnnouncement
+                key='app-announcements'
                 heading='Announcements'
                 description={configProps.description}
                 whatsNewLink={configProps.whatsnewlink}

package/src/tasks/create/templates/Constellation/template/PAGE/styles.js.mustache

@@ -1,7 +1,14 @@
-import styled, { css } from 'styled-components';
+// utilizing theming, comment out, if want individual style
+import styled from 'styled-components';
+import { Configuration } from '@pega/cosmos-react-core';
 
-export default styled.div(() => {
-  return css`
-    margin: 0px 0px;
-  `;
-});
+export default styled(Configuration)``;
+
+// individual style, comment out above, and uncomment here and add styles
+// import styled, { css } from 'styled-components';
+//
+// export default styled.div(() => {
+//  return css`
+//    margin: 0px 0;
+//  `;
+// });

package/src/tasks/create/templates/Constellation/widget/CASE/index.jsx.mustache

@@ -33,7 +33,7 @@ export default function {{COMPONENT_CLASS_NAME}}(props) {
         if (response.data.data !== null) {
           setHistory(
             response.data.data.map((entry, index) => {
-              {{! pick new delimiteres for mustache }}
+              {{! pick new delimiters for mustache }}
               {{=<% %>=}}
               return {
                 date: new Date(entry.pxTimeCreated).toLocaleString(),
@@ -41,7 +41,7 @@ export default function {{COMPONENT_CLASS_NAME}}(props) {
                 user: entry.pyPerformer,
                 id: index
               };
-              <%={{ }}=%>     {{! revert delimiteres for mustache }}
+              <%={{ }}=%>     {{! revert delimiters for mustache }}
             })
           );
         } else {

package/src/tasks/create/templates/Constellation/widget/CASE/styles.js.mustache

@@ -1,7 +1,14 @@
-import styled, { css } from 'styled-components';
+// utilizing theming, comment out, if want individual style
+import styled from 'styled-components';
+import { Configuration } from '@pega/cosmos-react-core';
 
-export default styled.div(() => {
-  return css`
-    margin: 0px 0;
-  `;
-});
+export default styled(Configuration)``;
+
+// individual style, comment out above, and uncomment here and add styles
+// import styled, { css } from 'styled-components';
+//
+// export default styled.div(() => {
+//  return css`
+//    margin: 0px 0;
+//  `;
+// });

package/src/tasks/create/templates/Constellation/widget/PAGE/styles.js.mustache

@@ -1,7 +1,14 @@
-import styled, { css } from 'styled-components';
+// utilizing theming, comment out, if want individual style
+import styled from 'styled-components';
+import { Configuration } from '@pega/cosmos-react-core';
 
-export default styled.div(() => {
-  return css`
-    margin: 0px 0;
-  `;
-});
+export default styled(Configuration)``;
+
+// individual style, comment out above, and uncomment here and add styles
+// import styled, { css } from 'styled-components';
+//
+// export default styled.div(() => {
+//  return css`
+//    margin: 0px 0;
+//  `;
+// });

package/src/tasks/create/templates/Constellation/widget/PAGE-CASE/Operator.jsx.mustache

@@ -31,7 +31,7 @@ const Operator = (props) => {
   }, [id]);
 
 
-  {{! pick new delimiteres for mustache }}
+  {{! pick new delimiters for mustache }}
   {{=<% %>=}}
 
   const OperatorPreview = () => {
@@ -145,7 +145,7 @@ const Operator = (props) => {
     }
   };
 
-  <%={{ }}=%>     {{! revert delimiteres for mustache }}
+  <%={{ }}=%>     {{! revert delimiters for mustache }}
 
   const clickAction = (e) => {
     setPopoverTarget(e.currentTarget);

package/src/tasks/create/templates/Constellation/widget/PAGE-CASE/index.jsx.mustache

@@ -46,11 +46,11 @@ export default function {{COMPONENT_CLASS_NAME}}(props) {
       <Card>
       <CardHeader>{title}</CardHeader>
       <CardContent>
-{{! pick new delimiteres for mustache }} {{=<% %>=}}
+{{! pick new delimiters for mustache }} {{=<% %>=}}
       <Flex container={{ direction: 'row'}}>
       <Operator label={hideLabel ? null : _label} name={user.userName} id={user.userId} getPConnect={getPConnect} />
 
-<%={{ }}=%>     {{! revert delimiteres for mustache }}
+<%={{ }}=%>     {{! revert delimiters for mustache }}
       {dateTimeValue && (
         <Fragment>
           {' '}

package/src/tasks/create/templates/Constellation/widget/PAGE-CASE/styles.js.mustache

@@ -1,7 +1,14 @@
-import styled, { css } from 'styled-components';
+// utilizing theming, comment out, if want individual style
+import styled from 'styled-components';
+import { Configuration } from '@pega/cosmos-react-core';
 
-export default styled.div(() => {
-  return css`
-    margin: 0px 0;
-  `;
-});
+export default styled(Configuration)``;
+
+// individual style, comment out above, and uncomment here and add styles
+// import styled, { css } from 'styled-components';
+//
+// export default styled.div(() => {
+//  return css`
+//    margin: 0px 0;
+//  `;
+// });

package/src/tasks/create/templates/SDK-Angular/field/Boolean/boolean.component.html.mustache

@@ -0,0 +1,42 @@
+<div *ngIf="displayMode$; else noDisplayMode">
+  <app-field-value-list [label$]="label$" [value$]="value$" [displayMode$]="displayMode$"></app-field-value-list>
+</div>
+<ng-template #noDisplayMode>
+  <div *ngIf="!bReadonly$ && bHasForm$; else noEdit">
+    <div [formGroup]="formGroup$" *ngIf="bVisible$">
+      <div class="mat-form-field-infix" *ngIf="showLabel$">
+        <span>
+          <label class="mat-form-field-label psdk-label-readonly">{{ label$ }}</label>
+        </span>
+{{! pick new delimiters for mustache }}
+{{=<% %>=}}
+        <mat-checkbox
+          [labelPosition]="checkboxLabelPos$"
+          [checked]="isChecked$"
+          [disabled]="bDisabled$"
+          [attr.data-test-id]="testId"
+          (change)="fieldOnChange($event)"
+          (click)="fieldOnClick($event)"
+          (blur)="fieldOnBlur($event)"
+          >{{ caption$ }}</mat-checkbox
+        >
+      </div>
+      <div class="mat-form-field-infix" *ngIf="!bReadonly$ && !showLabel$">
+        <mat-checkbox
+          [labelPosition]="checkboxLabelPos$"
+          [checked]="isChecked$"
+          [disabled]="bDisabled$"
+          [attr.data-test-id]="testId"
+          (change)="fieldOnChange($event)"
+          (click)="fieldOnClick($event)"
+          (blur)="fieldOnBlur($event)"
+          >{{ caption$ }}</mat-checkbox
+        >
+<%={{ }}=%>     {{! revert delimiters for mustache }}
+      </div>
+    </div>
+  </div>
+</ng-template>
+<ng-template #noEdit>
+  <app-text [pConn$]="pConn$" [formatAs$]="'text'"></app-text>
+</ng-template>

package/src/tasks/create/templates/SDK-Angular/field/Boolean/boolean.component.scss.mustache

@@ -0,0 +1,24 @@
+.psdk-full-width {
+  min-width: 9.375rem;
+  width: 100%;
+  text-align: left;
+}
+
+.psdk-label-readonly {
+  top: 0rem;
+  margin-top: 0.625rem;
+  font-size: 0.875rem;
+  display: block;
+  transform: translateY(-1.28125em) scale(0.75) perspective(100px) translateZ(0.001px);
+  -ms-transform: translateY(-1.28125em) scale(0.75);
+  width: 133.33333%;
+}
+
+.psdk-data-readonly {
+  padding-top: 0.625rem;
+  width: 100%;
+}
+
+::ng-deep .mat-mdc-form-field-infix {
+  width: auto;
+}

package/src/tasks/create/templates/SDK-Angular/field/Boolean/boolean.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();
+  });
+});