Constellation DX Components UI Gallery

Constellation's flexible architecture empowers advanced users (professional front-end developers with ReactJS and web technology expertise) to extend the platform. You can achieve this by programmatically combining core Constellation presentational components and leveraging the Constellation DX API to build custom components, known as "Constellation DX components."

This gallery provides a collection of ready-to-use and customizable component. Explore them directly or delve into the source code 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.1 and might not run on other versions of the Pega Platform - For other versions, the recommendation is to download the supported version of the Constellation DX Component builder package @pega/custom-dx-components@XXXX supported by your Pega Platform version and create new components using the command line utility 'npm run create' and then copy the code. You will likely need to modify / update the code, especially if there are CSS selectors. At some point, the project will support new version of the gallery using branches and versions.

A complete demonstration of these Constellation DX components is available at pegasystems.github.io/constellation-ui-gallery

Pre-build versions of these components is available as a RAP file that you can import into your Pega application - see github.com/pegasystems/constellation-ui-gallery/releases

For developers

To build and compile the application - use the following commands:

Tools to install

Install npm from nodejs.org

You should have the following versions installed: System node version 18.x and npm version 8.x.

If you already have VS Code and Docker installed, you can click here to get started. Clicking these links will cause VS Code to automatically install the Dev Containers extension if needed, clone the source code into a container volume, and spin up a dev container for use.

For more details, see docs.pega.com

Note: Make sure to use git clone git@github.com:pegasystems/constellation-ui-gallery.git to download the source code of this repository instead of using the download option. If you download the code, you will not be able to publish the components and you will see the error 'Git needs to be installed' even if you have the git executable installed. This error is generated because you are missing the .git folder. If you face this issue, you can type git init to create the missing folder.

Project setup

npm install

Storybook

npm run start

Linting

Make sure to install the recommended VS Code extensions. Before checking code, make sure that no error are reported:

npm run lint

To fix some of the issues:

npm run fix

Unit testing

For unit test results, you can run:

npm run test

For unit test coverage, you can run:

npm run coverage

The coverage report index.html will be in the 'coverage' folder

Compiles and minifies for production

npm run buildAllComponents

Publish to a Pega Platform

Install the 'keys' folder provided by the Constellation DX Component builder package and edit the tasks.config.json file with your rulesetName, rulesetVersion, server URL, clientID, user and password

npm run authenticate

Once the authentication is completed - you can publish by running

npm run publishAll

If you are having issues deploying the changes, review the documentation docs.pega.com constellation DX component CLI references

esride-nik/pega_constellation-ui-gallery