Merge pull request #110 from pegasystems/pega24.2

Pega24.2

.gitignore

@@ -137,3 +137,8 @@ dist
 
 # Devcontainer certs
 .devcontainer/root_ca.crt
+
+# library mode DXCB
+.store/
+Pega_ConstellationUIGallery/
+Pega_ConstellationUIGallery.zip

.stylelintrc.json

@@ -2,7 +2,9 @@
   "extends": ["@pega/stylelint-config"],
   "rules": {
     "no-descending-specificity": null,
-    "selector-max-class": null
+    "selector-max-class": null,
+    "selector-max-combinators": null,
+    "selector-max-compound-selectors": null
   },
   "ignoreFiles": ["node_modules/**", "lib/**", "!.storybook", ".storybook/public"]
 }

README.md

@@ -4,10 +4,11 @@ Constellation's flexible architecture empowers advanced users (professional fron
 
 This gallery provides a collection of ready-to-use and customizable component. Explore them directly or [delve into the source code](https://github.com/pegasystems/constellation-ui-gallery/tree/master/src/components) for deeper understanding. Use this resource to gain inspiration, best practices, and a solid foundation for implementing custom components.
 
-These components have been tested on Pega '23 and '24 and might not run older other versions of the Pega Platform
+These components have been tested on Pega '23.1, '24.1, '24.2 and might not run older other versions of the Pega Platform
 
 - Version 1.x and branch release/1.x.x should be used for Pega '23
-- Version 2.x and branch master should be used for Pega '24.1
+- Version 2.x and branch release/2.0 should be used for Pega '24.1
+- Version 3.x and branch master should be used for Pega '24.2
 
 Older versions of the Pega Platform have not been tested and are not supported.
 

package.json

@@ -11,6 +11,7 @@
   },
   "license": "Apache-2.0",
   "author": "Pegasystems",
+  "main": "src/index.js",
   "scripts": {
     "start": "storybook dev --port 6006",
     "build-storybook": "storybook build --docs",
@@ -35,7 +36,26 @@
     "fix:es": "eslint --color --fix --cache --cache-location=node_modules/.cache/eslint/ ./src",
     "fix:styles": "stylelint --fix \"./**/*.@(js|jsx|ts|tsx)\"",
     "fix:format": "prettier --color --loglevel warn -w .",
-    "fix:pkg": "sort-package-json package.json packages/*/package.json"
+    "fix:pkg": "sort-package-json package.json packages/*/package.json",
+    "createLib": "custom-dx-components createLibrary",
+    "switchLib": "custom-dx-components switchLibrary",
+    "createLibVersion": "custom-dx-components createVersion",
+    "switchLibVersion": "custom-dx-components switchVersion",
+    "listLib": "custom-dx-components listLibrary",
+    "listPublishedLib": "custom-dx-components listPublished",
+    "deleteLib": "custom-dx-components deleteLibrary",
+    "deletePublishedLib": "custom-dx-components deletePublished",
+    "deleteLibVersion": "custom-dx-components deleteVersion",
+    "move": "custom-dx-components moveComponent",
+    "publishLibVersion": "custom-dx-components publish",
+    "storeLibVersion": "custom-dx-components storeComponents",
+    "showStatus": "custom-dx-components showStatus",
+    "setPermanent": "custom-dx-components setPermanent",
+    "importLibVersion": "custom-dx-components importArchive",
+    "exportLibVersion": "custom-dx-components exportArchive",
+    "validate": "custom-dx-components buildComponent",
+    "validateAll": "custom-dx-components buildAllComponents",
+    "help": "custom-dx-components showHelp"
   },
   "dependencies": {
     "@arcgis/core": "^4.31.6",
@@ -45,10 +65,10 @@
     "@fullcalendar/react": "^6.1.15",
     "@fullcalendar/timegrid": "^6.1.15",
     "@hello-pangea/dnd": "^16.6.0",
-    "@pega/cosmos-react-core": "^6.0.10",
-    "@pega/cosmos-react-rte": "^6.0.10",
-    "@pega/cosmos-react-social": "^6.0.10",
-    "@pega/cosmos-react-work": "^6.0.10",
+    "@pega/cosmos-react-core": "^7.2.3",
+    "@pega/cosmos-react-rte": "^7.2.3",
+    "@pega/cosmos-react-social": "^7.2.3",
+    "@pega/cosmos-react-work": "^7.2.3",
     "gantt-task-react": "^0.3.9",
     "imask": "^7.6.1",
     "jsbarcode": "^3.11.6",
@@ -58,14 +78,14 @@
     "react-image-magnifiers": "^1.4.0",
     "reactflow": "^11.11.4",
     "signature_pad": "^5.0.4",
-    "styled-components": "5.3.6"
+    "styled-components": "^5.3.11"
   },
   "devDependencies": {
     "@babel/preset-env": "^7.26.0",
-    "@babel/preset-react": "^7.25.9",
+    "@babel/preset-react": "^7.26.3",
     "@babel/preset-typescript": "^7.26.0",
     "@pega/configs": "^0.16.2",
-    "@pega/custom-dx-components": "~24.1",
+    "@pega/custom-dx-components": "^24.2.11",
     "@pega/eslint-config": "^0.16.2",
     "@pega/pcore-pconnect-typedefs": "^3.2.1",
     "@pega/tsconfig": "^0.16.2",
@@ -78,33 +98,32 @@
     "@storybook/theming": "^7.6.19",
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^12.1.5",
-    "@types/dagre": "^0.7.52",
     "@types/jest": "^29.5.14",
     "@types/react": "^17.0.80",
     "@types/react-dom": "^17.0.25",
     "@types/react-image-magnifiers": "^1.3.5",
     "@types/styled-components": "^5.1.34",
     "axe-playwright": "^2.0.3",
-    "cspell": "^8.16.1",
+    "cspell": "^8.17.1",
     "cspell-dict-lorem-ipsum": "^1.1.2",
     "eslint": "^8.57.0",
     "eslint-plugin-import": "^2.31.0",
-    "eslint-plugin-jest": "^28.9.0",
+    "eslint-plugin-jest": "^28.10.0",
     "eslint-plugin-jsx-a11y": "^6.10.2",
     "eslint-plugin-mdx": "^3.1.5",
     "eslint-plugin-prettier": "^5.2.1",
-    "eslint-plugin-react": "^7.37.2",
+    "eslint-plugin-react": "^7.37.3",
     "eslint-plugin-react-hooks": "^4.6.2",
     "jest": "^29.7.0",
     "jest-canvas-mock": "^2.5.2",
     "jest-environment-jsdom": "^29.7.0",
     "jest-junit": "^16.0.0",
     "npm-quick-run": "^1.18.0",
     "npm-run-all": "^4.1.5",
-    "prettier": "^3.4.1",
+    "prettier": "^3.4.2",
     "sort-package-json": "^2.12.0",
     "storybook": "^7.6.19",
-    "stylelint": "^16.11.0",
+    "stylelint": "^16.12.0",
     "ts-jest": "^29.2.5",
     "typescript": "^5.7.2"
   },

src/GettingStarted.mdx

@@ -24,7 +24,8 @@ Each Constellation UI Gallery release offers two RAP files:
 These components are confirmed to work with Pega Platform versions 23 and 24. To ensure compatibility, follow these guidelines:
 
 - **Pega '23**: Use version 1.x and the release/1.x.x branch.
-- **Pega '24.1**: Use version 2.x and the master branch.
+- **Pega '24.1**: Use version 2.x and the release/2.0 branch.
+- **Pega '24.2**: Use version 3.x and the master branch.
 
 ### Important Note:
 

src/Libraries.mdx

@@ -6,7 +6,7 @@ The following libraries are used in the Constellation DX Components UI Gallery:
 
 # Core Constellation libraries
 
-- **@pega/cosmos-xx** version 6.x for Pega 24.1
+- **@pega/cosmos-xx** version 7.x for Pega 24.2
 
 The following libraries must be in sync with the Constellation DX Components UI Gallery to avoid dependency and side effect issues.
 

src/Support.mdx

@@ -10,7 +10,7 @@ Here is an extract of the license: "software distributed under the License is di
 
 In term of support and maintenance, this project follows the same approach as any other open source libraries - code is delivered as IS and since you are importing the components in your application ruleset, you are responsible for this code inside your application including support for any accessibility issues or issues after upgrade. The source code is provided and you can fork the code and make any change you want.
 
-The project provides released version of the components for Pega Infinity 23.1 and 24.1 but only the latest Pega Platform version will be actively worked on.
+The project provides released version of the components for Pega Infinity 23.1, 24.1 and 24.2 releases but only the latest Pega Platform version (24.2) will be actively worked on.
 
 # Contributing
 

src/components/Pega_Extensions_CardGallery/demo.stories.tsx

@@ -1,6 +1,6 @@
 import type { StoryObj } from '@storybook/react';
 import { FieldValueItem, DateTimeDisplay } from '@pega/cosmos-react-core';
-import { Details } from '@pega/cosmos-react-work';
+import { Details, DetailsList } from '@pega/cosmos-react-work';
 import { PegaExtensionsCardGallery } from './index';
 
 export default {
@@ -203,23 +203,34 @@ const setPCore = (args: any) => {
             <FieldValueItem key='CaseID' variant='stacked' name='CaseID' value={id} />
           ];
           return (
-            <Details highlightedData={highlightedData}>
-              <FieldValueItem
-                key='Description'
-                name='Description'
-                value={tasks[id].pyDescription}
-              />
-              <FieldValueItem
-                key='Assigned To'
-                name='Assigned To'
-                value={tasks[id].pxCreateOpName}
-              />
-              <FieldValueItem
-                key='Due date'
-                name='Due date'
-                value={<DateTimeDisplay variant='date' value={tasks[id].pyDueDate} />}
-              />
-            </Details>
+            <Details
+              name={''}
+              highlightedData={highlightedData}
+              collapsible={false}
+              columns={{
+                a: (
+                  <DetailsList
+                    items={[
+                      {
+                        id: 'Description',
+                        name: 'Description',
+                        value: tasks[id].pyDescription
+                      },
+                      {
+                        id: 'Assigned To',
+                        name: 'Assigned To',
+                        value: tasks[id].pxCreateOpName
+                      },
+                      {
+                        id: 'Due date',
+                        name: 'Due date',
+                        value: <DateTimeDisplay variant='date' value={tasks[id].pyDueDate} />
+                      }
+                    ]}
+                  />
+                )
+              }}
+            />
           );
         }
       })

src/components/Pega_Extensions_CompareTableLayout/index.tsx

@@ -4,7 +4,6 @@ import {
   withConfiguration,
   FieldGroup,
   FieldValueList,
-  type FieldValueListItem,
   RadioButtonGroup,
   Progress,
   RadioButton,
@@ -131,7 +130,7 @@ export const PegaExtensionsCompareTableLayout = (props: TableLayoutProps) => {
       <StyledPegaExtensionsCompareTableLayoutWrapper displayFormat={displayFormat}>
         <RadioButtonGroup variant='card' label={heading} inline>
           {fields[0].value.map((val: any, i: number) => {
-            const fvl: Array<FieldValueListItem> = [];
+            const fvl: Array<{ id: string; name: string; value: JSX.Element | string }> = [];
             let objectId = '';
             fields.forEach((child: any, j: number) => {
               if (j > 0) {

src/components/Pega_Extensions_CompareTableLayout/styles.ts

@@ -9,6 +9,7 @@ export default styled.div(({ displayFormat }: { displayFormat: string }) => {
           grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr));
           grid-gap: 0.5rem;
           overflow: hidden;
+          padding: 0.2rem;
         }
         & > fieldset > div > label {
           display: block;

src/components/Pega_Extensions_DynamicHierarchicalForm/demo.stories.tsx

@@ -73,6 +73,11 @@ const setPCore = (numProducts: number) => {
   }
 
   (window as any).PCore = {
+    getContextTreeManager: () => {
+      return {
+        addPageListNode: () => {}
+      };
+    },
     createPConnect: () => ({
       getPConnect: () => ({
         createComponent: (meta: any) => {
@@ -237,6 +242,12 @@ export const Default: Story = {
       ...args,
       getPConnect: () => {
         return {
+          meta: {
+            name: ''
+          },
+          options: {
+            viewName: ''
+          },
           getListActions: () => {
             return {
               update: () => {}

src/components/Pega_Extensions_DynamicHierarchicalForm/index.tsx

@@ -172,6 +172,14 @@ export const PegaExtensionsDynamicHierarchicalForm = (props: DynamicHierarchical
   }, [validatemessage, status]);
 
   useEffect(() => {
+    /* In 24.2, we need to initialize the context tree manager */
+    (window as any).PCore.getContextTreeManager().addPageListNode(
+      getPConnect().getContextName(),
+      'caseInfo.content',
+      getPConnect().meta.name,
+      productRef.current
+    );
+
     const SelectedProducts: any = getAllFields(0, getPConnect);
     const tmpFields: any = getAllFields(1, getPConnect);
     if (

src/components/Pega_Extensions_EditableTableLayout/Docs.mdx

@@ -0,0 +1,22 @@
+import { Meta, Primary, Controls, Story } from '@storybook/blocks';
+import * as DemoStories from './demo.stories';
+
+<Meta of={DemoStories} />
+
+# Overview
+
+Render an embedded data list as an editable table - While the recommendation is to use the OOB component to edit an embedded data list, this example showcase how to implement the same functionality using a Constellation DX component.
+
+The component supports the following functionality:
+
+- add, delete rows, update fields
+- 1st column is frozen
+- cell rendering is delegated to Constellation using createComponent.
+
+<Primary />
+
+# Configuration
+
+To use this component, create a new view - use this layout template and in the region fields, drill down and select all the fields in your embedded data list
+
+![Configuration](EditableTableLayout.jpg)

src/components/Pega_Extensions_EditableTableLayout/config.json

@@ -0,0 +1,21 @@
+{
+  "name": "Pega_Extensions_EditableTableLayout",
+  "label": "Editable Table Layout",
+  "description": "Editable Table Layout",
+  "organization": "Pega",
+  "version": "1.0.0",
+  "library": "Extensions",
+  "allowedApplications": [],
+  "componentKey": "Pega_Extensions_EditableTableLayout",
+  "type": "Template",
+  "subtype": "DETAILS",
+  "properties": [
+    {
+      "name": "A",
+      "label": "Region A",
+      "format": "CONTENTPICKER",
+      "addTypeList": ["Fields"],
+      "allowCreatingGroup": false
+    }
+  ]
+}