update 3rd party libs - fix fields to show labels in details

README.md

@@ -73,6 +73,34 @@ npm run coverage
 
 The coverage report index.html will be in the 'coverage' folder
 
+### End to End testing
+
+End to end testing is done by loading each stories using playwright as well as running some accessibility testing on these stories. The results of accessibility is similar to the panel in storybook.
+
+To execute the end to end test locally, you need to first build the storybook as static:
+
+```shell
+npm run build-storybook
+```
+
+Install Playwright (only needed once)
+
+```shell
+npx playwright install
+```
+
+Serve the site though an http server on port 6006
+
+```shell
+serve -port 6006 storybook-static
+```
+
+In a separate terminal, run the suite of tests
+
+```shell
+npm run test-storybook
+```
+
 ### Compiles and minifies for production
 
 ```shell

cspell.json

@@ -16,12 +16,14 @@
   "words": [
     "arcgis",
     "camelcase",
+    "dagrejs",
     "daygrid",
     "ESRI",
     "fullcalendar",
     "Gantt",
     "IBAN",
     "imask",
+    "imaskjs",
     "isday",
     "jsbarcode",
     "Leanez",

package.json

@@ -39,6 +39,7 @@
   },
   "dependencies": {
     "@arcgis/core": "^4.30.9",
+    "@dagrejs/dagre": "^1.1.4",
     "@fullcalendar/core": "^6.1.15",
     "@fullcalendar/daygrid": "^6.1.15",
     "@fullcalendar/react": "^6.1.15",
@@ -47,7 +48,6 @@
     "@pega/cosmos-react-core": "^6.0.10",
     "@pega/cosmos-react-social": "^6.0.10",
     "@pega/cosmos-react-work": "^6.0.10",
-    "dagre": "^0.8.5",
     "gantt-task-react": "^0.3.9",
     "imask": "^7.6.1",
     "jsbarcode": "^3.11.6",
@@ -56,47 +56,44 @@
     "react-dom": "^17.0.2",
     "react-image-magnifiers": "^1.4.0",
     "reactflow": "^11.11.4",
-    "signature_pad": "^5.0.3",
+    "signature_pad": "^5.0.4",
     "styled-components": "5.3.6"
   },
   "devDependencies": {
-    "@babel/preset-env": "^7.25.4",
-    "@babel/preset-react": "^7.24.7",
-    "@babel/preset-typescript": "^7.24.7",
-    "@pega/configs": "^0.15.0",
+    "@babel/preset-env": "^7.25.8",
+    "@babel/preset-react": "^7.25.7",
+    "@babel/preset-typescript": "^7.25.7",
+    "@pega/configs": "^0.15.1",
     "@pega/custom-dx-components": "~24.1",
-    "@pega/eslint-config": "^0.15.0",
+    "@pega/eslint-config": "^0.15.1",
     "@pega/pcore-pconnect-typedefs": "^3.2.0-alpha.1",
-    "@pega/tsconfig": "^0.15.0",
+    "@pega/tsconfig": "^0.15.1",
     "@storybook/addon-a11y": "^7.6.19",
     "@storybook/addon-essentials": "^7.6.19",
     "@storybook/manager-api": "^7.6.19",
     "@storybook/react": "^7.6.19",
     "@storybook/react-webpack5": "^7.6.19",
     "@storybook/test-runner": "0.16.0",
     "@storybook/theming": "^7.6.19",
-    "@testing-library/jest-dom": "^6.5.0",
+    "@testing-library/jest-dom": "^6.6.2",
     "@testing-library/react": "^12.1.5",
     "@types/dagre": "^0.7.52",
     "@types/jest": "^29.5.13",
     "@types/react": "^17.0.80",
     "@types/react-dom": "^17.0.25",
     "@types/react-image-magnifiers": "^1.3.5",
     "@types/styled-components": "^5.1.34",
-    "@typescript-eslint/eslint-plugin": "^7.12.0",
     "axe-playwright": "^2.0.3",
-    "cspell": "^8.14.4",
+    "cspell": "^8.15.4",
     "cspell-dict-lorem-ipsum": "^1.1.2",
     "eslint": "^8.57.0",
-    "eslint-plugin-import": "^2.30.0",
+    "eslint-plugin-import": "^2.31.0",
     "eslint-plugin-jest": "^28.8.3",
     "eslint-plugin-jsx-a11y": "^6.10.0",
     "eslint-plugin-mdx": "^3.1.5",
     "eslint-plugin-prettier": "^5.2.1",
-    "eslint-plugin-react": "^7.37.0",
+    "eslint-plugin-react": "^7.37.1",
     "eslint-plugin-react-hooks": "^4.6.2",
-    "eslint-plugin-sonarjs": "^0.25.1",
-    "eslint-plugin-storybook": "^0.9.0",
     "jest": "^29.7.0",
     "jest-canvas-mock": "^2.5.2",
     "jest-environment-jsdom": "^29.7.0",
@@ -106,9 +103,9 @@
     "prettier": "^3.3.3",
     "sort-package-json": "^2.10.1",
     "storybook": "^7.6.19",
-    "stylelint": "^16.9.0",
+    "stylelint": "^16.10.0",
     "ts-jest": "^29.2.5",
-    "typescript": "^5.6.2"
+    "typescript": "^5.6.3"
   },
   "organization": "Pega"
 }

src/Libraries.mdx

@@ -0,0 +1,55 @@
+import { Meta } from '@storybook/blocks';
+
+<Meta title='Libraries' />
+
+The following libraries are used in the Constellation Component Library:
+
+# Core Constellation libraries
+
+- **@pega/cosmos-xx** version 6.x for Pega 24.1
+
+The following libraries must be in sync with the Constellation component library to avoid dependency and side effect issues.
+
+- **React** 17.x
+- **Styled Components** 5.3.6 (exact version)
+
+There has been issues with the Styled Components library using different versions within the same document (especially different major versions) as well as incompatibilities with libraries using React 17 and React 18.
+
+# 3rd party libraries used at runtime
+
+When selecting a 3rd party lib, it is critical to select one that is compatible with React 17 and the Constellation Component library.
+
+The **fullcalendar** library is used for the Calendar component - [MIT License](https://github.com/fullcalendar/fullcalendar). Some components in this library require a commercial license but these components are not used in this project.
+
+The **hello-pangea/dnd** library is used to deliver the drag and drop functionality in the Kanban board - the version 16.x is compatible with React 17 but 17.x is not compatible - [Apache License](https://github.com/hello-pangea/dnd)
+
+The **ArcGIS Maps SDK** for JavaScript is used for the Map control - [Commercial License required](https://developers.arcgis.com/javascript/latest/licensing/)
+
+The **Dagre JS** is used for the Network Diagram component - There are 2 npm packages of this library but only one is maintained and updated called [@dagrejs/dagre](https://www.npmjs.com/package/@dagrejs/dagre) - [MIT License](https://github.com/dagrejs/dagre)
+
+The **gantt-task-react** library is used to render the Gantt component - [MIT License](https://github.com/MaTeMaTuK/gantt-task-react)
+
+The **imaskjs** library is used for the Input mask component - [MIT License](https://github.com/uNmAnNeR/imaskjs)
+
+The **jsbarcode** library is used for the barcode component - [MIT License](https://github.com/lindell/JsBarcode)
+
+The [transparentize](https://polished.js.org/docs/#transparentize) function from the **polished** library is used in the Gantt and CaseHierarchy component to descrease the opacity of a color - [MIT License](https://github.com/styled-components/polished)
+
+The image magnifier component uses the library **react-image-magnifiers** - [MIT License](https://github.com/adamrisberg/react-image-magnifiers)
+
+The network diagram component used the **reactflow** library - [MIT license](https://github.com/xyflow/xyflow)
+
+The signature component uses the **signature_pad** JavaScript library - [MIT License](https://github.com/szimek/signature_pad)
+
+# Development libraries
+
+For standard configurations (CSS, JS...), the **@pega/configs** library is used to provide standardized configuration for eslint, stylelint, prettier and cspell.
+
+For the documentation and developer experience, the **Storybook** library version 7.x is used.
+Each component provides a story that is used to run unit tests and accessibility tests. While Storybook 8 is available, this version has a strong dependency on React 18 and cannot be used with the Constellation component library.
+
+**ESlint** is used for linting and needs to be in sync with **@pega/configs** - As such version 8.x is used even if ESLint 9.x is available.
+
+For unit testing, the **@testing-library/react** is used and due to React 17 compatibility, the version 12.x is used.
+
+For accessibility testing, the libraries **axe-playwright** and **@storybook/addon-a11y** are used.

src/components/Pega_Extensions_BarCode/config.json

@@ -112,5 +112,8 @@
       ]
     }
   ],
-  "defaultConfig": {}
+  "defaultConfig": {
+    "isFormWidth": true,
+    "detailFVLItem": true
+  }
 }

src/components/Pega_Extensions_BarCode/index.tsx

@@ -4,7 +4,9 @@ import {
   Flex,
   FormControl,
   FormField,
-  ErrorState
+  ErrorState,
+  FieldValueList,
+  Text
 } from '@pega/cosmos-react-core';
 import { useEffect, useRef, useState } from 'react';
 import StyledWrapper from './styles';
@@ -32,6 +34,8 @@ type BarCodeExtProps = {
   hideLabel: boolean;
   readOnly?: boolean;
   testId?: string;
+  displayMode?: string;
+  variant?: any;
   getPConnect: any;
 };
 
@@ -47,6 +51,8 @@ export const PegaExtensionsBarCode = (props: BarCodeExtProps) => {
     readOnly,
     helperText,
     testId,
+    displayMode,
+    variant,
     getPConnect
   } = props;
   const BarcodeRef = useRef<any>(null);
@@ -111,6 +117,27 @@ export const PegaExtensionsBarCode = (props: BarCodeExtProps) => {
     actions
   ]);
 
+  const displayComp = value || '';
+  if (displayMode === 'DISPLAY_ONLY') {
+    return <Text>{displayComp}</Text>;
+  }
+  if (displayMode === 'LABELS_LEFT') {
+    return (
+      <FieldValueList
+        variant={hideLabel ? 'stacked' : variant}
+        data-testid={testId}
+        fields={[{ id: '1', name: hideLabel ? '' : label, value: displayComp }]}
+      />
+    );
+  }
+  if (displayMode === 'STACKED_LARGE_VAL') {
+    return (
+      <Text variant='h1' as='span'>
+        {displayComp}
+      </Text>
+    );
+  }
+
   return (
     <Flex container={{ direction: 'column', justify: 'center', alignItems: 'center' }}>
       <FormField label={label} labelHidden={hideLabel} info={info} status={status} testId={testId}>

src/components/Pega_Extensions_CaseReference/config.json

@@ -29,5 +29,7 @@
       "format": "VISIBILITY"
     }
   ],
-  "defaultConfig": {}
+  "defaultConfig": {
+    "detailFVLItem": true
+  }
 }

src/components/Pega_Extensions_CheckboxTrigger/config.json

@@ -82,5 +82,8 @@
         }
       ]
     }
-  ]
+  ],
+  "defaultConfig": {
+    "detailFVLItem": true
+  }
 }

src/components/Pega_Extensions_CompareTableLayout/Docs.mdx

@@ -6,7 +6,9 @@ import * as DemoStories from './demo.stories';
 # Overview
 
 The CompareTableLayout component is a template component that let you compare side-by-side different objects. It will present different instances of an object for comparison and will present the ability to select one of this instance.
-To support selection, you need to have a field called ID in one of the properties to render and you need to set a field name that will be used to store the selected value. In the demo, only the 'spreadsheet' format allows to turn on/off the ability to select an object.
+To support selection, you need to have a field with a label set to 'ID' in one of the properties to render and you need to set a field name that will be used to store the selected value. In the demo, only the 'spreadsheet' format allows to turn on/off the ability to select an object.
+
+Note: When using this component in 'select' mode, the object is expected to be a case reference. This component has not been tested for other use cases like data references (either sourced in Pega or externally).
 
 For more details on how to use this component, see [How to implement the compare and select pattern](https://support.pega.com/discussion/how-implement-compare-and-select-pattern-constellation-ui)
 
@@ -15,6 +17,6 @@ For more details on how to use this component, see [How to implement the compare
 ## Properties
 
 Setting a field in the 'selectionProperty' parameter in authoring will let you select one of the objects presented in the table.
-You can also change some of the display to look more like a financial report as well as customize how currency values are rendered.
+The selection is expected to be a case reference. You can also change some of the display to look more like a financial report as well as customize how currency values are rendered.
 
 <Controls />

src/components/Pega_Extensions_ImageMagnify/config.json

@@ -289,6 +289,8 @@
     "zoomHeight": 100,
     "zoomWidth": 300,
     "previewRightOffset": 0,
-    "zoomZIndex": 999
+    "zoomZIndex": 999,
+    "detailFVLItem": true,
+    "isFormWidth": true
   }
 }

src/components/Pega_Extensions_MaskedInput/config.json

@@ -82,5 +82,8 @@
         }
       ]
     }
-  ]
+  ],
+  "defaultConfig": {
+    "detailFVLItem": true
+  }
 }

src/components/Pega_Extensions_NetworkDiagram/index.tsx

@@ -22,7 +22,7 @@ import ReactFlow, {
   type Node,
   type Edge
 } from 'reactflow';
-import dagre from 'dagre';
+import dagre from '@dagrejs/dagre';
 
 import StyledPegaExtensionsNetworkDiagram from './styles';
 

src/components/Pega_Extensions_PasswordInput/config.json

@@ -78,6 +78,7 @@
     }
   ],
   "defaultConfig": {
-    "label": "@L $this.label"
+    "label": "@L $this.label",
+    "detailFVLItem": true
   }
 }

src/components/Pega_Extensions_QRCode/config.json

@@ -66,5 +66,8 @@
       ]
     }
   ],
-  "defaultConfig": {}
+  "defaultConfig": {
+    "isFormWidth": true,
+    "detailFVLItem": true
+  }
 }