@pega/dx-component-builder-sdk 24.2.11 → 24.2.13

package/README.md

@@ -8,13 +8,13 @@ This project provides you with an environment to extend SDK-R/SDK-A by giving yo
 
 Ensure you have access to the following in your system:
 
-- Pega Infinity Server version 24.1
+- Pega Infinity Server version 24.2
 
 - Git version 2.30 or later
 
-- System node version 18, 20
+- System node version 20
 
-- System npm version 8, 10 (npm 9 not supported)
+- System npm version 10 
 
 - Installed SDK-R or SDK-A, as the below commands live in the package.json of the SDK-R/SDK-A an NOT in this npm module
 

package/package.json

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

package/src/constants.js

@@ -445,6 +445,14 @@ export const COMPONENT_SCHEMA = {
         name: 'Error Boundary',
         value: 'ErrorBoundary'
       },
+      {
+        name: 'Flow Container',
+        value: 'Containers/FlowContainer'
+      },
+      {
+        name: 'Modal View Container',
+        value: 'Containers/ModalViewContainer'
+      },
       {
         name: 'Multi Step',
         value: 'MultiStep'
@@ -453,6 +461,22 @@ export const COMPONENT_SCHEMA = {
         name: 'Nav Bar',
         value: 'NavBar'
       },
+      {
+        name: 'Reference',
+        value: 'Reference'
+      },
+      {
+        name: 'Region',
+        value: 'Region'
+      },
+      {
+        name: 'Root Container',
+        value: 'RootContainer'
+      },
+      {
+        name: 'Simple View',
+        value: 'Containers/SimpleView'
+      },
       {
         name: 'Stages',
         value: 'Stages'
@@ -468,7 +492,11 @@ export const COMPONENT_SCHEMA = {
       {
         name: 'View',
         value: 'View'
-      }
+      },
+      {
+        name: 'View Container',
+        value: 'Containers/ViewContainer'
+      },
     ],
     template: [
       {
@@ -520,7 +548,11 @@ export const COMPONENT_SCHEMA = {
         value: 'Details/DetailsThreeColumn'
       },
       {
-        name: 'Field Group',
+        name: 'Dynamic Tabs',
+        value: 'Details/DynamicTabs'
+      },
+      {
+        name: 'Field Group Template',
         value: 'FieldGroupTemplate'
       },
       {
@@ -629,6 +661,10 @@ export const COMPONENT_SCHEMA = {
       }
     ],
     widget: [
+      {
+        name: 'Action Buttons For File Util',
+        value: 'FileUtility/ActionButtonsForFileUtil'
+      },
       {
         name: 'App Announcement',
         value: 'AppAnnouncement'
@@ -645,10 +681,7 @@ export const COMPONENT_SCHEMA = {
         name: 'File Utility',
         value: 'FileUtility/FileUtility'
       },
-      {
-        name: 'Action Buttons For File Utility',
-        value: 'FileUtility/ActionButtonsForFileUtil'
-      },
+      
       {
         name: 'Followers',
         value: 'Followers'

package/src/tasks/create/templates/Constellation/field/Date/demo.stories.tsx.mustache

@@ -1,6 +1,5 @@
 
 /* eslint-disable react/jsx-no-useless-fragment */
-// @ts-nocheck
 import type { Meta, StoryObj } from '@storybook/react';
 import { configProps, stateProps } from './mock';
 import {{COMPONENT_CLASS_NAME}} from './index';
@@ -14,21 +13,6 @@ const meta: Meta<typeof {{COMPONENT_CLASS_NAME}}> = {
 export default meta;
 type Story = StoryObj<typeof {{COMPONENT_CLASS_NAME}}>;
 
-if (!window.PCore) {
-  window.PCore = {};
-}
-
-window.PCore.getEnvironmentInfo = () => {
-  return {
-    getTimeZone: () => {
-      return '';
-    },
-    getLocale: () => {
-      return 'en-GB';
-    }
-  };
-};
-
 export const Base{{COMPONENT_CLASS_NAME}}: Story = args => {
   const props = {
     value: configProps.value,

package/src/tasks/create/templates/Constellation/field/DateTime/demo.stories.tsx.mustache

@@ -1,5 +1,4 @@
 /* eslint-disable react/jsx-no-useless-fragment */
-// @ts-nocheck
 import type { Meta, StoryObj } from '@storybook/react';
 import { configProps, stateProps } from './mock';
 import {{COMPONENT_CLASS_NAME}} from './index';
@@ -13,22 +12,6 @@ const meta: Meta<typeof {{COMPONENT_CLASS_NAME}}> = {
 export default meta;
 type Story = StoryObj<typeof {{COMPONENT_CLASS_NAME}}>;
 
-
-if (!window.PCore) {
-  window.PCore = {};
-}
-
-window.PCore.getEnvironmentInfo = () => {
-  return {
-    getTimeZone: () => {
-      return '';
-    },
-    getLocale: () => {
-      return 'en-GB';
-    }
-  };
-};
-
 export const Base{{COMPONENT_CLASS_NAME}}: Story = args => {
   const props = {
     value: configProps.value,

package/src/tasks/create/templates/Constellation/field/Decimal/demo.stories.tsx.mustache

@@ -1,6 +1,5 @@
 
 /* eslint-disable react/jsx-no-useless-fragment */
-// @ts-nocheck
 import type { Meta, StoryObj } from '@storybook/react';
 
 import { configProps, fieldMetadata, stateProps } from './mock';

package/src/tasks/create/templates/Constellation/field/Decimal-Currency/demo.stories.tsx.mustache

@@ -1,6 +1,5 @@
 
 /* eslint-disable react/jsx-no-useless-fragment */
-// @ts-nocheck
 import type { Meta, StoryObj } from '@storybook/react';
 
 import { configProps, fieldMetadata, stateProps } from './mock';

package/src/tasks/create/templates/Constellation/field/Decimal-Percentage/demo.stories.tsx.mustache

@@ -1,6 +1,5 @@
 
 /* eslint-disable react/jsx-no-useless-fragment */
-// @ts-nocheck
 import type { Meta, StoryObj } from '@storybook/react';
 
 import { configProps, stateProps, fieldMetadata } from './mock';

package/src/tasks/create/templates/Constellation/field/Decimal-Percentage/mock.ts.mustache

@@ -4,6 +4,7 @@ export const configProps = {
   value: '',
   label: 'Percentage Sample',
   showGroupSeparators: true,
+  placeholder: '',
   helperText: 'Percentage Helper Text',
   testId: 'percentage-12345678',
   hasSuggestions: false,

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

@@ -1,6 +1,5 @@
 
 /* eslint-disable react/jsx-no-useless-fragment */
-// @ts-nocheck
 import type { Meta, StoryObj } from '@storybook/react';
 
 import {{COMPONENT_CLASS_NAME}} from './index';
@@ -15,10 +14,6 @@ const meta: Meta<typeof {{COMPONENT_CLASS_NAME}}> = {
 export default meta;
 type Story = StoryObj<typeof {{COMPONENT_CLASS_NAME}}>;
 
-if (!window.PCore) {
-  window.PCore = {};
-}
-
 const statelistData = {
   data: [
     {
@@ -36,23 +31,17 @@ const statelistData = {
   ]
 };
 
-export const Base{{COMPONENT_CLASS_NAME}}: Story = args => {
-
-  window.PCore.getDataPageUtils = () => {
-    return {
-      getData: () => {
-        return new Promise(resolve => {
-          resolve(statelistData);
-        });
-      },
-      getDataAsync: () => {
-        return new Promise(resolve => {
-          resolve(statelistData);
-        });
-      }
-    };
+window.PCore.getDataPageUtils = (): any => {
+  return {
+    getDataAsync: () => {
+      return new Promise(resolve => {
+        resolve(statelistData);
+      });
+    }
   };
+};
 
+export const Base{{COMPONENT_CLASS_NAME}}: Story = args => {
   const props = {
     countryCode: configProps.countryCode,
     getPConnect: () => {

package/src/tasks/create/templates/Constellation/field/Picklist/demo.stories.tsx.mustache

@@ -1,6 +1,5 @@
 
 /* eslint-disable react/jsx-no-useless-fragment */
-// @ts-nocheck
 import { useState } from 'react';
 import type { Meta, StoryObj } from '@storybook/react';
 

package/src/tasks/create/templates/Constellation/field/Picklist-Autocomplete/demo.stories.tsx.mustache

@@ -1,6 +1,5 @@
 
 /* eslint-disable react/jsx-no-useless-fragment */
-// @ts-nocheck
 import { useState } from 'react';
 import type { Meta, StoryObj } from '@storybook/react';
 

package/src/tasks/create/templates/Constellation/field/Picklist-RadioButtons/demo.stories.tsx.mustache

@@ -1,6 +1,5 @@
 
 /* eslint-disable react/jsx-no-useless-fragment */
-// @ts-nocheck
 import { useState } from 'react';
 import type { Meta, StoryObj } from '@storybook/react';
 

package/src/tasks/create/templates/Constellation/field/Picklist-RadioButtons/index.tsx.mustache

@@ -77,9 +77,7 @@ function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}Props) {
   const propName: string = stateProps.value;
   const configProps = pConn.getConfigProps();
   const className = pConn.getCaseInfo().getClassName();
-  // @ts-ignore
-  const { getLocaleRuleNameFromKeys, getLocalizedValue } = pConn;
-
+ 
   // @ts-ignore
   let configProperty = pConn.getRawMetadata()?.config?.value || '';
   configProperty = configProperty.startsWith('@P') ? configProperty.substring(3) : configProperty;
@@ -141,10 +139,10 @@ function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}Props) {
         id={`${fullReference}.${item.key}`}
         value={item.key}
         key={`${fullReference}.${item.key}`}
-        label={getLocalizedValue(
+        label={pConn.getLocalizedValue(
           isDatapage ? item.text : item.value,
           localePath,
-          getLocaleRuleNameFromKeys(localeClass, localeContext, localeName)
+          pConn.getLocaleRuleNameFromKeys(localeClass, localeContext, localeName)
         )}
         name={fullReference}
       />

package/src/tasks/create/templates/Constellation/field/Text/demo.stories.tsx.mustache

@@ -1,6 +1,5 @@
 
 /* eslint-disable react/jsx-no-useless-fragment */
-// @ts-nocheck
 import { useState } from 'react';
 import type { Meta, StoryObj } from '@storybook/react';
 

package/src/tasks/create/templates/Constellation/field/Text-Email/demo.stories.tsx.mustache

@@ -1,6 +1,5 @@
 
 /* eslint-disable react/jsx-no-useless-fragment */
-// @ts-nocheck
 import type { Meta, StoryObj } from '@storybook/react';
 
 import {{COMPONENT_CLASS_NAME}} from './index';

package/src/tasks/create/templates/Constellation/field/Text-Email/mock.ts.mustache

@@ -12,6 +12,7 @@ export const configProps = {
   readOnly: false,
   required: false,
   disabled: false,
+  variant: '',
   status: '',
   validatemessage: ''
 };

package/src/tasks/create/templates/Constellation/field/Text-Input/demo.stories.tsx.mustache

@@ -1,6 +1,5 @@
 
 /* eslint-disable react/jsx-no-useless-fragment */
-// @ts-nocheck
 import type { Meta, StoryObj } from '@storybook/react';
 
 import {{COMPONENT_CLASS_NAME}} from './index';

package/src/tasks/create/templates/Constellation/field/Text-Paragraph/demo.stories.tsx.mustache

@@ -1,6 +1,5 @@
 
 /* eslint-disable react/jsx-no-useless-fragment */
-// @ts-nocheck
 import type { Meta, StoryObj } from '@storybook/react';
 
 import {{COMPONENT_CLASS_NAME}} from './index';

package/src/tasks/create/templates/Constellation/field/Text-Phone/demo.stories.tsx.mustache

@@ -1,6 +1,5 @@
 
 /* eslint-disable react/jsx-no-useless-fragment */
-// @ts-nocheck
 import type { Meta, StoryObj } from '@storybook/react';
 
 import {{COMPONENT_CLASS_NAME}} from './index';
@@ -47,7 +46,7 @@ export const Base{{COMPONENT_CLASS_NAME}}: Story = args => {
 };
 
 Base{{COMPONENT_CLASS_NAME}}.args = {
-  datasource: configProps.datasource,
+  datasource: configProps.datasource as any,
   label: configProps.label,
   helperText: configProps.helperText,
   placeholder: configProps.placeholder,

package/src/tasks/create/templates/Constellation/field/Text-URL/demo.stories.tsx.mustache

@@ -1,6 +1,5 @@
 
 /* eslint-disable react/jsx-no-useless-fragment */
-// @ts-nocheck
 import type { Meta, StoryObj } from '@storybook/react';
 
 import {{COMPONENT_CLASS_NAME}} from './index';

package/src/tasks/create/templates/Constellation/field/TimeOfDay/demo.stories.tsx.mustache

@@ -1,5 +1,4 @@
 /* eslint-disable react/jsx-no-useless-fragment */
-// @ts-nocheck
 import type { Meta, StoryObj } from '@storybook/react';
 import { configProps, stateProps } from './mock';
 import {{COMPONENT_CLASS_NAME}} from './index';

package/src/tasks/create/templates/Constellation/template/DETAILS/demo.stories.tsx.mustache

@@ -8,6 +8,16 @@ import { pyReviewRaw, pyReviewResolved, regionChildrenResolved, operatorDetails,
 import StatusWorkRenderer from './StatusWork';
 import Operator from './Operator';
 
+window.PCore.getUserApi = (): any => {
+  return {
+    getOperatorDetails: () => {
+      return new Promise(resolve => {
+        resolve(operatorDetails);
+      });
+    }
+  };
+};
+
 const meta: Meta<typeof {{COMPONENT_CLASS_NAME}}> = {
   title: '{{COMPONENT_CLASS_NAME}}',
   component: {{COMPONENT_CLASS_NAME}},

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

@@ -1,7 +1,6 @@
 
 /* eslint-disable react/jsx-no-useless-fragment */
 /* eslint-disable react/no-unstable-nested-components */
-// @ts-nocheck
 import type { Meta, StoryObj } from '@storybook/react';
 
 import { AppAnnouncement as PegaAppAnnouncement } from '@pega/cosmos-react-work';
@@ -19,18 +18,6 @@ export default meta;
 type Story = StoryObj<typeof {{COMPONENT_CLASS_NAME}}>;
 
 export const Base{{COMPONENT_CLASS_NAME}}: Story = args => {
-  if (!window.PCore) {
-    window.PCore = {};
-  }
-
-  window.PCore.getLocaleUtils = () => {
-    return {
-      getLocaleValue: val => {
-        return val;
-      }
-    };
-  };
-
   const configProps = pyHome1Resolved.children[0].children[0].config;
 
   const props = {
@@ -86,6 +73,7 @@ export const Base{{COMPONENT_CLASS_NAME}}: Story = args => {
               />
             );
           }
+          return <></>;
         },
         ignoreSuggestion: () => {/* nothing */},
         acceptSuggestion: () => {/* nothing */},

package/src/tasks/create/templates/Constellation/widget/CASE/demo.stories.tsx.mustache

@@ -1,12 +1,21 @@
 
 /* eslint-disable react/jsx-no-useless-fragment */
-// @ts-nocheck
 import type { Meta, StoryObj } from '@storybook/react';
 
 import {{COMPONENT_CLASS_NAME}} from './index';
 
 import historyData from './mock';
 
+ window.PCore.getDataApiUtils = (): any => {
+    return {
+      getData: () => {
+        return new Promise(resolve => {
+          resolve(historyData);
+        });
+      }
+    };
+  };
+
 const meta: Meta<typeof {{COMPONENT_CLASS_NAME}}> = {
   title: '{{COMPONENT_CLASS_NAME}}',
   component: {{COMPONENT_CLASS_NAME}},
@@ -16,38 +25,7 @@ const meta: Meta<typeof {{COMPONENT_CLASS_NAME}}> = {
 export default meta;
 type Story = StoryObj<typeof {{COMPONENT_CLASS_NAME}}>;
 
-if (!window.PCore) {
-  window.PCore = {};
-}
-
 export const Base{{COMPONENT_CLASS_NAME}}: Story = args => {
-  
-  window.PCore.getConstants = () => {
-    return {
-      CASE_INFO: {
-        CASE_INFO_ID: 'caseInfo.ID'
-      }
-    };
-  };
-
-  window.PCore.getLocaleUtils = () => {
-    return {
-      getLocaleValue: value => {
-        return value;
-      }
-    };
-  };
-
-  window.PCore.getDataApiUtils = () => {
-    return {
-      getData: () => {
-        return new Promise(resolve => {
-          resolve(historyData);
-        });
-      }
-    };
-  };
-
   const props = {
 
     getPConnect: () => {

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

@@ -50,9 +50,9 @@ function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}Props) {
                 description: <Text style={{ wordBreak: 'break-word' }}>{entry.pyMessageKey}</Text>,
                 user: entry.pyPerformer,
                 id: index
-              };
+              } as any;
               <%={{ }}=%>     {{! revert delimiters for mustache }}
-            })
+            }) as any
           );
         } else {
           setHistory([]);

package/src/tasks/create/templates/Constellation/widget/PAGE/demo.stories.tsx.mustache

@@ -1,6 +1,5 @@
 
 /* eslint-disable react/jsx-no-useless-fragment */
-// @ts-nocheck
 import type { Meta, StoryObj } from '@storybook/react';
 
 import {{COMPONENT_CLASS_NAME}} from './index';
@@ -17,10 +16,6 @@ const meta: Meta<typeof {{COMPONENT_CLASS_NAME}}> = {
 export default meta;
 type Story = StoryObj<typeof {{COMPONENT_CLASS_NAME}}>;
 
-if (!window.PCore) {
-  window.PCore = {};
-}
-
 const worklistData = {
   data: {
     data: [
@@ -46,23 +41,17 @@ const worklistData = {
   }
 };
 
-export const Base{{COMPONENT_CLASS_NAME}}: Story = args => {
-
- window.PCore.getDataApiUtils = () => {
-    return {
-      getData: () => {
-        return new Promise(resolve => {
-          resolve(worklistData);
-        });
-      },
-      getDataAsync: () => {
-        return new Promise(resolve => {
-          resolve(worklistData);
-        });
-      }
-    };
+window.PCore.getDataApiUtils = (): any => {
+  return {
+    getData: () => {
+      return new Promise(resolve => {
+        resolve(worklistData);
+      });
+    }
   };
+};
 
+export const Base{{COMPONENT_CLASS_NAME}}: Story = args => {
   const props = {
     ...configProps,
     getPConnect: () => {
@@ -113,5 +102,5 @@ Base{{COMPONENT_CLASS_NAME}}.args = {
   header: configProps.header,
   description: configProps.description,
   whatsnewlink: configProps.whatsnewlink,
-  datasource: configProps.datasource,
+  datasource: configProps.datasource as any,
 };

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

@@ -1,11 +1,20 @@
 /* eslint-disable react/jsx-no-useless-fragment */
-// @ts-nocheck
 import type { Meta, StoryObj } from '@storybook/react';
 
 import {{COMPONENT_CLASS_NAME}} from './index';
 
 import { configProps, operatorDetails } from './mock';
 
+window.PCore.getUserApi = (): any => {
+  return {
+    getOperatorDetails: () => {
+      return new Promise(resolve => {
+        resolve(operatorDetails);
+      });
+    }
+  };
+};
+
 const meta: Meta<typeof {{COMPONENT_CLASS_NAME}}> = {
   title: '{{COMPONENT_CLASS_NAME}}',
   component: {{COMPONENT_CLASS_NAME}},
@@ -15,27 +24,6 @@ const meta: Meta<typeof {{COMPONENT_CLASS_NAME}}> = {
 export default meta;
 type Story = StoryObj<typeof {{COMPONENT_CLASS_NAME}}>;
 
-if (!window.PCore) {
-  window.PCore = {};
-}
-
-window.PCore.getLocaleUtils = () => {
-  return {
-    getLocaleValue: value => {
-      return value;
-    }
-  };
-};
-
-window.PCore.getUserApi = () => {
-  return {
-    getOperatorDetails: () => {
-      return new Promise(resolve => {
-        resolve(operatorDetails);
-      });
-    }
-  };
-};
 
 export const Base{{COMPONENT_CLASS_NAME}}: Story = args => {
 

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

@@ -20,6 +20,8 @@
           <mat-checkbox
             [labelPosition]="'after'"
             [checked]="item.selected"
+            [disabled]="bDisabled$ || bReadonly$"
+            [required]="bRequired$"
             [attr.data-test-id]="testId + ':' + item.value"
             (change)="handleChangeMultiMode($event, item)"
             (blur)="fieldOnBlur($event)"
@@ -31,6 +33,8 @@
         <mat-checkbox
           [labelPosition]="'after'"
           [checked]="isChecked$"
+          [disabled]="bDisabled$ || bReadonly$"
+          [required]="bRequired$"
           [attr.data-test-id]="testId"
           [formControl]="fieldControl"
           (change)="fieldOnChange($event)"

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

@@ -225,7 +225,6 @@ export class {{COMPONENT_CLASS_NAME}}Component implements OnInit, OnDestroy {
 
   fieldOnChange(event: any) {
     event.value = event.checked;
-
     handleEvent(this.actionsApi, 'changeNblur', this.propName, event.checked);
     this.pConn$.clearErrorMessages({
       property: this.propName

package/src/tasks/create/templates/SDK-Angular/field/Boolean/demo.stories.tsx.mustache

@@ -9,7 +9,7 @@ const meta: Meta<{{COMPONENT_CLASS_NAME}}Component> = {
   title: '{{COMPONENT_CLASS_NAME}}',
   component: {{COMPONENT_CLASS_NAME}}Component,
   excludeStories: /.*Data$/,
-  render: (args: {{COMPONENT_CLASS_NAME}}Component) => ({
+  render: (args) => ({
     props: {
       ...args,
       pConn$: {

package/src/tasks/create/templates/SDK-Angular/field/Date/date.component.html.mustache

@@ -17,10 +17,11 @@
           type="text"
           [value]="value$"
           [required]="bRequired$"
+          [disabled]="bDisabled$"
           [formControl]="fieldControl"
           (dateChange)="fieldOnDateChange($event)"
         />
-        <mat-datepicker-toggle matSuffix [for]="pegadate"></mat-datepicker-toggle>
+        <mat-datepicker-toggle matSuffix [for]="pegadate" [disabled]="bDisabled$"></mat-datepicker-toggle>
         <mat-datepicker #pegadate [startAt]="value$"></mat-datepicker>
         <mat-error *ngIf="fieldControl.invalid">{{ getErrorMessage() }}</mat-error>
       </mat-form-field>