From 87d8edbad8b50287e861b60ee45e16e96efe2492 Mon Sep 17 00:00:00 2001 From: Sharma Date: Thu, 9 Oct 2025 15:48:16 +0530 Subject: [PATCH 1/3] Fixed trailingComma and other formatting issues --- .prettierrc.js | 5 +++-- .storybook/main.ts | 2 +- __mocks__/DetailsFields.jsx | 2 +- __mocks__/state-utils.tsx | 2 +- scripts/copy-configs.js | 6 +++--- src/samples/Embedded/Header/index.tsx | 2 +- src/samples/Embedded/ResolutionScreen/index.tsx | 2 +- src/samples/Embedded/ShoppingOptionCard/index.tsx | 2 +- src/samples/Embedded/index.tsx | 4 ++-- src/samples/FullPortal/InvalidPortal.tsx | 2 +- src/samples/FullPortal/index.tsx | 6 +++--- tests/common.js | 8 ++++---- 12 files changed, 22 insertions(+), 21 deletions(-) diff --git a/.prettierrc.js b/.prettierrc.js index 9a4041344..4df611c8f 100644 --- a/.prettierrc.js +++ b/.prettierrc.js @@ -1,7 +1,8 @@ // Prettier config options: https://prettier.io/docs/en/options.html // Shared front-end config: https://git.pega.io/projects/FE/repos/configs/browse/packages/prettier-config/index.json -module.exports = import('@pega/prettier-config').then(pegaPrettierConfig => ({ +module.exports = import('@pega/prettier-config').then((pegaPrettierConfig) => ({ ...pegaPrettierConfig.default, - printWidth: 150 + printWidth: 150, + trailingComma: 'none' })); diff --git a/.storybook/main.ts b/.storybook/main.ts index 7e0e039d0..fa88aa01d 100644 --- a/.storybook/main.ts +++ b/.storybook/main.ts @@ -20,7 +20,7 @@ const config = { ], framework: '@storybook/react-webpack5', - webpackFinal: async config => { + webpackFinal: async (config) => { if (config.resolve?.alias) { config.resolve.alias['@pega/react-sdk-components/lib/bridge/react_pconnect'] = path.resolve(__dirname, '../__mocks__/react_pconnect.jsx'); config.resolve.alias['@pega/react-sdk-components/lib/components/designSystemExtension/DetailsFields'] = path.resolve( diff --git a/__mocks__/DetailsFields.jsx b/__mocks__/DetailsFields.jsx index b01a4ffe6..e0f52681b 100644 --- a/__mocks__/DetailsFields.jsx +++ b/__mocks__/DetailsFields.jsx @@ -7,7 +7,7 @@ import { format } from '@pega/react-sdk-components/lib/components/helpers/format import createPConnectComponent from './react_pconnect'; -const useStyles = makeStyles(theme => ({ +const useStyles = makeStyles((theme) => ({ root: { paddingRight: theme.spacing(1), paddingLeft: theme.spacing(1), diff --git a/__mocks__/state-utils.tsx b/__mocks__/state-utils.tsx index 89ce803d9..c633601de 100644 --- a/__mocks__/state-utils.tsx +++ b/__mocks__/state-utils.tsx @@ -1,7 +1,7 @@ import { connect, Provider, shallowEqual } from 'react-redux'; const connectToState = (mapStateToProps = () => {}) => { - return Component => { + return (Component) => { const ConnectedComponent = connect(mapStateToProps, null, null, { areStatePropsEqual: (next, prev: any) => { // Compare visibility diff --git a/scripts/copy-configs.js b/scripts/copy-configs.js index df74fb7f7..adc6e7d8a 100644 --- a/scripts/copy-configs.js +++ b/scripts/copy-configs.js @@ -59,7 +59,7 @@ function gatherConfigFiles() { // Look for an process any Custom component configs const jsFilesCustom = fg.sync(`${COMPONENTS_ROOT_SOURCE}/${COMPONENTS_CUSTOM_DIR}/**/${CONFIG_NAME}`); - jsFilesCustom.forEach(file => { + jsFilesCustom.forEach((file) => { // console.log(`${LOG_PRELUDE} found file: ${file}`); copyConfigRelatedFile(file); }); @@ -67,7 +67,7 @@ function gatherConfigFiles() { // Look for an process any override component configs const jsFilesOverride = fg.sync(`${COMPONENTS_ROOT_SOURCE}/${COMPONENTS_OVERRIDE_DIR}/**/${CONFIG_NAME}`); - jsFilesOverride.forEach(file => { + jsFilesOverride.forEach((file) => { // console.log(`${LOG_PRELUDE} found file: ${file}`); copyConfigRelatedFile(file); }); @@ -76,7 +76,7 @@ function gatherConfigFiles() { function gatherConfigExtFiles() { const jsFiles = fg.sync(`${COMPONENTS_ROOT_SOURCE}/**/${CONFIG_EXT_NAME}`); - jsFiles.forEach(file => { + jsFiles.forEach((file) => { // console.log(`${LOG_PRELUDE} found file: ${file}`); copyConfigRelatedFile(file); }); diff --git a/src/samples/Embedded/Header/index.tsx b/src/samples/Embedded/Header/index.tsx index 8ae1bda86..48ebd1a2b 100644 --- a/src/samples/Embedded/Header/index.tsx +++ b/src/samples/Embedded/Header/index.tsx @@ -1,7 +1,7 @@ import { Typography } from '@mui/material'; import { makeStyles } from '@mui/styles'; -const useStyles = makeStyles(theme => ({ +const useStyles = makeStyles((theme) => ({ embeddedHeader: { display: 'flex', alignItems: 'center', diff --git a/src/samples/Embedded/ResolutionScreen/index.tsx b/src/samples/Embedded/ResolutionScreen/index.tsx index c3517fa0b..f4226ce76 100644 --- a/src/samples/Embedded/ResolutionScreen/index.tsx +++ b/src/samples/Embedded/ResolutionScreen/index.tsx @@ -1,6 +1,6 @@ import makeStyles from '@mui/styles/makeStyles'; -const useStyles = makeStyles(theme => ({ +const useStyles = makeStyles((theme) => ({ resolutionPart: { display: 'flex', flexDirection: 'row' diff --git a/src/samples/Embedded/ShoppingOptionCard/index.tsx b/src/samples/Embedded/ShoppingOptionCard/index.tsx index e0e9c6057..7aba9e4ef 100644 --- a/src/samples/Embedded/ShoppingOptionCard/index.tsx +++ b/src/samples/Embedded/ShoppingOptionCard/index.tsx @@ -1,6 +1,6 @@ import makeStyles from '@mui/styles/makeStyles'; -const useStyles = makeStyles(theme => ({ +const useStyles = makeStyles((theme) => ({ swatchHeader: { display: 'flex', flexDirection: 'row', diff --git a/src/samples/Embedded/index.tsx b/src/samples/Embedded/index.tsx index a73f8eebc..a091fe239 100644 --- a/src/samples/Embedded/index.tsx +++ b/src/samples/Embedded/index.tsx @@ -36,14 +36,14 @@ export default function Embedded() { } }; - const initializeRootContainerProps = renderObj => { + const initializeRootContainerProps = (renderObj) => { const { props } = renderObj; setRootProps(props); }; const startMashup = () => { - PCore.onPCoreReady(async renderObj => { + PCore.onPCoreReady(async (renderObj) => { // Check that we're seeing the PCore version we expect compareSdkPCoreVersions(); diff --git a/src/samples/FullPortal/InvalidPortal.tsx b/src/samples/FullPortal/InvalidPortal.tsx index 03bf7b1b5..23273d193 100644 --- a/src/samples/FullPortal/InvalidPortal.tsx +++ b/src/samples/FullPortal/InvalidPortal.tsx @@ -16,7 +16,7 @@ export default function InvalidPortal({ defaultPortal, portals, onSelect }) { Please select one of the portals available to the operator's access group:
- {portals.map(portal => ( + {portals.map((portal) => (
onSelect(portal)}> {portal}
diff --git a/src/samples/FullPortal/index.tsx b/src/samples/FullPortal/index.tsx index 6f5e1fd23..0fab24cd6 100644 --- a/src/samples/FullPortal/index.tsx +++ b/src/samples/FullPortal/index.tsx @@ -67,13 +67,13 @@ export default function FullPortal() { */ function startPortal() { // NOTE: When loadMashup is complete, this will be called. - PCore.onPCoreReady(renderObj => { + PCore.onPCoreReady((renderObj) => { // Check that we're seeing the PCore version we expect compareSdkPCoreVersions(); // Initialize the SdkComponentMap (local and pega-provided) // eslint-disable-next-line @typescript-eslint/no-unused-vars - getSdkComponentMap(localSdkComponentMap).then(theComponentMap => { + getSdkComponentMap(localSdkComponentMap).then((theComponentMap) => { console.log(`SdkComponentMap initialized`); // Don't call initialRender until SdkComponentMap is fully initialized @@ -102,7 +102,7 @@ export default function FullPortal() { setPortalSelectionScreen(true); setDefaultPortalName(defaultPortal); // Getting current user's access group's available portals list other than excluded portals (relies on Traditional DX APIs) - getAvailablePortals().then(portals => { + getAvailablePortals().then((portals) => { setAvailablePortals(portals as string[]); }); } diff --git a/tests/common.js b/tests/common.js index d326a3713..d53e48e34 100644 --- a/tests/common.js +++ b/tests/common.js @@ -24,11 +24,11 @@ const login = async (username, password, page) => { await page.locator('#submit_row .loginButton').click(); }; -const getAttributes = async element => { - return element.evaluate(async ele => ele.getAttributeNames()); +const getAttributes = async (element) => { + return element.evaluate(async (ele) => ele.getAttributeNames()); }; -const getFormattedDate = date => { +const getFormattedDate = (date) => { if (!date) { return date; } @@ -46,7 +46,7 @@ const getFutureDate = () => { return getFormattedDate(futureDate); }; -const closePage = async page => { +const closePage = async (page) => { await page.close(); }; From 3206ec4420f0e27cf6d14ee9938ac9432ceff0f1 Mon Sep 17 00:00:00 2001 From: Siva Rama Krishna Date: Tue, 21 Oct 2025 18:34:52 +0530 Subject: [PATCH 2/3] feat: light / dark theme changes --- .prettierrc.js | 5 +- .storybook/main.ts | 2 +- __mocks__/DetailsFields.jsx | 2 +- __mocks__/state-utils.tsx | 2 +- package-lock.json | 107 +++++++-- package.json | 12 +- scripts/copy-configs.js | 6 +- sdk-config.json | 1 + src/samples/Embedded/Header/index.tsx | 2 +- .../Embedded/ResolutionScreen/index.tsx | 2 +- .../Embedded/ShoppingOptionCard/index.tsx | 2 +- src/samples/Embedded/index.tsx | 4 +- src/samples/FullPortal/InvalidPortal.tsx | 2 +- src/samples/FullPortal/index.tsx | 6 +- src/theme.ts | 227 +++++++++++++++++- tests/common.js | 8 +- 16 files changed, 342 insertions(+), 48 deletions(-) diff --git a/.prettierrc.js b/.prettierrc.js index 4df611c8f..1e23c6a6d 100644 --- a/.prettierrc.js +++ b/.prettierrc.js @@ -1,8 +1,9 @@ // Prettier config options: https://prettier.io/docs/en/options.html // Shared front-end config: https://git.pega.io/projects/FE/repos/configs/browse/packages/prettier-config/index.json -module.exports = import('@pega/prettier-config').then((pegaPrettierConfig) => ({ +module.exports = import('@pega/prettier-config').then(pegaPrettierConfig => ({ ...pegaPrettierConfig.default, printWidth: 150, - trailingComma: 'none' + trailingComma: 'none', + arrowParens: 'avoid' })); diff --git a/.storybook/main.ts b/.storybook/main.ts index fa88aa01d..7e0e039d0 100644 --- a/.storybook/main.ts +++ b/.storybook/main.ts @@ -20,7 +20,7 @@ const config = { ], framework: '@storybook/react-webpack5', - webpackFinal: async (config) => { + webpackFinal: async config => { if (config.resolve?.alias) { config.resolve.alias['@pega/react-sdk-components/lib/bridge/react_pconnect'] = path.resolve(__dirname, '../__mocks__/react_pconnect.jsx'); config.resolve.alias['@pega/react-sdk-components/lib/components/designSystemExtension/DetailsFields'] = path.resolve( diff --git a/__mocks__/DetailsFields.jsx b/__mocks__/DetailsFields.jsx index e0f52681b..b01a4ffe6 100644 --- a/__mocks__/DetailsFields.jsx +++ b/__mocks__/DetailsFields.jsx @@ -7,7 +7,7 @@ import { format } from '@pega/react-sdk-components/lib/components/helpers/format import createPConnectComponent from './react_pconnect'; -const useStyles = makeStyles((theme) => ({ +const useStyles = makeStyles(theme => ({ root: { paddingRight: theme.spacing(1), paddingLeft: theme.spacing(1), diff --git a/__mocks__/state-utils.tsx b/__mocks__/state-utils.tsx index c633601de..89ce803d9 100644 --- a/__mocks__/state-utils.tsx +++ b/__mocks__/state-utils.tsx @@ -1,7 +1,7 @@ import { connect, Provider, shallowEqual } from 'react-redux'; const connectToState = (mapStateToProps = () => {}) => { - return (Component) => { + return Component => { const ConnectedComponent = connect(mapStateToProps, null, null, { areStatePropsEqual: (next, prev: any) => { // Compare visibility diff --git a/package-lock.json b/package-lock.json index c9939e17c..3a10304fd 100644 --- a/package-lock.json +++ b/package-lock.json @@ -8,11 +8,11 @@ "name": "react-sdk", "version": "24.2.11", "dependencies": { - "@pega/auth": "^0.2.31", + "@pega/auth": "^0.2.34", "@pega/cosmos-react-condition-builder": "^8.4.1", "@pega/cosmos-react-core": "^8.4.1", "@pega/cosmos-react-work": "^8.4.1", - "@pega/react-sdk-components": "~0.25.2", + "@pega/react-sdk-components": "~0.25.4", "@storybook/react-webpack5": "^8.6.14", "@types/react-dom": "^18.3.7", "@types/styled-components": "^5.1.34", @@ -29,10 +29,10 @@ "@babel/preset-typescript": "^7.23.3", "@loadable/component": "^5.16.3", "@pega/configs": "^0.17.0", - "@pega/constellationjs": "~24.2.2", - "@pega/dx-component-builder-sdk": "~24.2.12", - "@pega/pcore-pconnect-typedefs": "~3.2.2", - "@pega/react-sdk-overrides": "~0.25.2", + "@pega/constellationjs": "~25.1.0", + "@pega/dx-component-builder-sdk": "~24.2.14", + "@pega/pcore-pconnect-typedefs": "~4.1.0", + "@pega/react-sdk-overrides": "~0.25.4", "@playwright/test": "^1.54.2", "@storybook/addon-essentials": "^8.6.14", "@storybook/addon-links": "^8.6.14", @@ -4519,6 +4519,16 @@ "integrity": "sha512-c2erv2k7P2ilYzMmtYcMgAR21AULosQuUHJbStnrvRk2dG93k5cqptDrh9A8p+ZNlyhiqEOgHW7N9PAizdUM7Q==", "license": "Apache-2.0" }, + "node_modules/@googlemaps/markerclusterer": { + "version": "2.5.3", + "resolved": "https://registry.npmjs.org/@googlemaps/markerclusterer/-/markerclusterer-2.5.3.tgz", + "integrity": "sha512-x7lX0R5yYOoiNectr10wLgCBasNcXFHiADIBdmn7jQllF2B5ENQw5XtZK+hIw4xnV0Df0xhN4LN98XqA5jaiOw==", + "license": "Apache-2.0", + "dependencies": { + "fast-deep-equal": "^3.1.3", + "supercluster": "^8.0.1" + } + }, "node_modules/@hapi/hoek": { "version": "9.3.0", "resolved": "https://registry.npmjs.org/@hapi/hoek/-/hoek-9.3.0.tgz", @@ -7467,9 +7477,9 @@ } }, "node_modules/@pega/constellationjs": { - "version": "24.2.2", - "resolved": "https://registry.npmjs.org/@pega/constellationjs/-/constellationjs-24.2.2.tgz", - "integrity": "sha512-TJB8eKrIs40t2CsO5D+qBGr5ByoYXnBGbNQPAVnSFiCyWdMF8NspW5PMos8ttYEI3yzfaYSmyvDWVU4ucd4Vbg==", + "version": "25.1.0", + "resolved": "https://registry.npmjs.org/@pega/constellationjs/-/constellationjs-25.1.0.tgz", + "integrity": "sha512-UVGT4sAMtnPNYmZb7KU+Lqt4mxBtlmxric0o1sgAt5g9t2X40Gj/HTNeki9+5bLrQ3Zri4JIC+StRphzFGCHqA==", "dev": true, "license": "See LICENSE in LICENSE file or 'ConstellationJS Engine License.pdf' in dist/", "dependencies": { @@ -8391,9 +8401,9 @@ } }, "node_modules/@pega/pcore-pconnect-typedefs": { - "version": "3.2.2", - "resolved": "https://registry.npmjs.org/@pega/pcore-pconnect-typedefs/-/pcore-pconnect-typedefs-3.2.2.tgz", - "integrity": "sha512-3Z+Tq5NZqhK+xPFWNPtr9NbcK63YkOLHeUgAjXOp8ugrA/xmyGpvaMbHK2jwGY0/d5T4Cv9mi34vojA/Slw0Ew==", + "version": "4.1.0", + "resolved": "https://registry.npmjs.org/@pega/pcore-pconnect-typedefs/-/pcore-pconnect-typedefs-4.1.0.tgz", + "integrity": "sha512-eMJ5M5H/oKnR22yH7pE5RAU3D/oLGNI0mJD2Dinqdyg9l2hUNVzifkRhy6kG58eyorcnnDAtmR11bY0FFNkezg==", "dev": true, "license": "See LICENSE in LICENSE file" }, @@ -8409,9 +8419,9 @@ } }, "node_modules/@pega/react-sdk-components": { - "version": "0.25.2", - "resolved": "https://registry.npmjs.org/@pega/react-sdk-components/-/react-sdk-components-0.25.2.tgz", - "integrity": "sha512-Y+Pi9b9IZGBGQQzha3xQWwdYVXkSADe1eShKV2W/zxR+Fu8QoMrND9Sv3/3bnvmWl5Lloc3uafA9yp28S1AScA==", + "version": "0.25.4", + "resolved": "https://registry.npmjs.org/@pega/react-sdk-components/-/react-sdk-components-0.25.4.tgz", + "integrity": "sha512-2xP9Sy/r8HGezwHpuPPVFbDAn9IqCBMSXLKfExfOGeXv0eUl0HFHXbmr8eT6Ij00D4s3DQziPd3sV2S9YGPCFw==", "license": "SEE LICENCE IN LICENSE", "dependencies": { "@emotion/react": "^11.14.0", @@ -8421,6 +8431,7 @@ "@mui/material": "^6.5.0", "@mui/styles": "^6.5.0", "@mui/x-date-pickers": "^7.29.4", + "@react-google-maps/api": "^2.20.7", "@tinymce/tinymce-react": "^6.3.0", "clsx": "^2.1.1", "dayjs": "^1.11.13", @@ -8441,9 +8452,9 @@ } }, "node_modules/@pega/react-sdk-overrides": { - "version": "0.25.2", - "resolved": "https://registry.npmjs.org/@pega/react-sdk-overrides/-/react-sdk-overrides-0.25.2.tgz", - "integrity": "sha512-GehxzcNJKkouNf+9hhqVO71W8J0JvOfxWgmoFUm6erHVGUVsvVOL5GHqk330tNL84H9BppYaDEG0Fxstig8Y+w==", + "version": "0.25.4", + "resolved": "https://registry.npmjs.org/@pega/react-sdk-overrides/-/react-sdk-overrides-0.25.4.tgz", + "integrity": "sha512-HSXmilo2RWkvSygICgTrEeXFfyeMHM5lFwazqPXEvBa+kqdMruzLYYN6jRli66g/qwq9xhkUE/ASabdn9prlhA==", "dev": true, "license": "SEE LICENCE IN LICENSE" }, @@ -8532,6 +8543,42 @@ "prettier": "^3.0.0" } }, + "node_modules/@react-google-maps/api": { + "version": "2.20.7", + "resolved": "https://registry.npmjs.org/@react-google-maps/api/-/api-2.20.7.tgz", + "integrity": "sha512-ys7uri3V6gjhYZUI43srHzSKDC6/jiKTwHNlwXFTvjeaJE3M3OaYBt9FZKvJs8qnOhL6i6nD1BKJoi1KrnkCkg==", + "license": "MIT", + "dependencies": { + "@googlemaps/js-api-loader": "1.16.8", + "@googlemaps/markerclusterer": "2.5.3", + "@react-google-maps/infobox": "2.20.0", + "@react-google-maps/marker-clusterer": "2.20.0", + "@types/google.maps": "3.58.1", + "invariant": "2.2.4" + }, + "peerDependencies": { + "react": "^16.8 || ^17 || ^18 || ^19", + "react-dom": "^16.8 || ^17 || ^18 || ^19" + } + }, + "node_modules/@react-google-maps/api/node_modules/@googlemaps/js-api-loader": { + "version": "1.16.8", + "resolved": "https://registry.npmjs.org/@googlemaps/js-api-loader/-/js-api-loader-1.16.8.tgz", + "integrity": "sha512-CROqqwfKotdO6EBjZO/gQGVTbeDps5V7Mt9+8+5Q+jTg5CRMi3Ii/L9PmV3USROrt2uWxtGzJHORmByxyo9pSQ==", + "license": "Apache-2.0" + }, + "node_modules/@react-google-maps/infobox": { + "version": "2.20.0", + "resolved": "https://registry.npmjs.org/@react-google-maps/infobox/-/infobox-2.20.0.tgz", + "integrity": "sha512-03PJHjohhaVLkX6+NHhlr8CIlvUxWaXhryqDjyaZ8iIqqix/nV8GFdz9O3m5OsjtxtNho09F/15j14yV0nuyLQ==", + "license": "MIT" + }, + "node_modules/@react-google-maps/marker-clusterer": { + "version": "2.20.0", + "resolved": "https://registry.npmjs.org/@react-google-maps/marker-clusterer/-/marker-clusterer-2.20.0.tgz", + "integrity": "sha512-tieX9Va5w1yP88vMgfH1pHTacDQ9TgDTjox3tLlisKDXRQWdjw+QeVVghhf5XqqIxXHgPdcGwBvKY6UP+SIvLw==", + "license": "MIT" + }, "node_modules/@rollup/pluginutils": { "version": "5.3.0", "resolved": "https://registry.npmjs.org/@rollup/pluginutils/-/pluginutils-5.3.0.tgz", @@ -19895,6 +19942,15 @@ "node": ">= 0.10" } }, + "node_modules/invariant": { + "version": "2.2.4", + "resolved": "https://registry.npmjs.org/invariant/-/invariant-2.2.4.tgz", + "integrity": "sha512-phJfQVBuaJM5raOpJjSfkiD6BpbCE4Ns//LaXl6wGYtUBY83nWS6Rf9tXm2e8VaK60JEjYldbPif/A2B1C2gNA==", + "license": "MIT", + "dependencies": { + "loose-envify": "^1.0.0" + } + }, "node_modules/ipaddr.js": { "version": "2.2.0", "resolved": "https://registry.npmjs.org/ipaddr.js/-/ipaddr.js-2.2.0.tgz", @@ -24440,6 +24496,12 @@ "node": ">=4.0" } }, + "node_modules/kdbush": { + "version": "4.0.2", + "resolved": "https://registry.npmjs.org/kdbush/-/kdbush-4.0.2.tgz", + "integrity": "sha512-WbCVYJ27Sz8zi9Q7Q0xHC+05iwkm3Znipc2XTlrnJbsHMYktW4hPhXUE8Ys1engBrvffoSCqbil1JQAa7clRpA==", + "license": "ISC" + }, "node_modules/kebab-case": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/kebab-case/-/kebab-case-1.0.2.tgz", @@ -32403,6 +32465,15 @@ "integrity": "sha512-yQ3rwFWRfwNUY7H5vpU0wfdkNSnvnJinhF9830Swlaxl03zsOjCfmX0ugac+3LtK0lYSgwL/KXc8oYL3mG4YFQ==", "license": "MIT" }, + "node_modules/supercluster": { + "version": "8.0.1", + "resolved": "https://registry.npmjs.org/supercluster/-/supercluster-8.0.1.tgz", + "integrity": "sha512-IiOea5kJ9iqzD2t7QJq/cREyLHTtSmUT6gQsweojg9WH2sYJqZK9SswTu6jrscO6D1G5v5vYZ9ru/eq85lXeZQ==", + "license": "ISC", + "dependencies": { + "kdbush": "^4.0.2" + } + }, "node_modules/supports-color": { "version": "7.2.0", "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz", diff --git a/package.json b/package.json index bd32e4127..d60c6a26b 100644 --- a/package.json +++ b/package.json @@ -53,11 +53,11 @@ "_internal-build-jest-assets": "dx-component-builder-sdk buildJestAssets" }, "dependencies": { - "@pega/auth": "^0.2.31", + "@pega/auth": "^0.2.34", "@pega/cosmos-react-condition-builder": "^8.4.1", "@pega/cosmos-react-core": "^8.4.1", "@pega/cosmos-react-work": "^8.4.1", - "@pega/react-sdk-components": "~0.25.2", + "@pega/react-sdk-components": "~0.25.4", "@storybook/react-webpack5": "^8.6.14", "@types/react-dom": "^18.3.7", "@types/styled-components": "^5.1.34", @@ -74,10 +74,10 @@ "@babel/preset-typescript": "^7.23.3", "@loadable/component": "^5.16.3", "@pega/configs": "^0.17.0", - "@pega/constellationjs": "~24.2.2", - "@pega/dx-component-builder-sdk": "~24.2.12", - "@pega/pcore-pconnect-typedefs": "~3.2.2", - "@pega/react-sdk-overrides": "~0.25.2", + "@pega/constellationjs": "~25.1.0", + "@pega/dx-component-builder-sdk": "~24.2.14", + "@pega/pcore-pconnect-typedefs": "~4.1.0", + "@pega/react-sdk-overrides": "~0.25.4", "@playwright/test": "^1.54.2", "@storybook/addon-essentials": "^8.6.14", "@storybook/addon-links": "^8.6.14", diff --git a/scripts/copy-configs.js b/scripts/copy-configs.js index adc6e7d8a..df74fb7f7 100644 --- a/scripts/copy-configs.js +++ b/scripts/copy-configs.js @@ -59,7 +59,7 @@ function gatherConfigFiles() { // Look for an process any Custom component configs const jsFilesCustom = fg.sync(`${COMPONENTS_ROOT_SOURCE}/${COMPONENTS_CUSTOM_DIR}/**/${CONFIG_NAME}`); - jsFilesCustom.forEach((file) => { + jsFilesCustom.forEach(file => { // console.log(`${LOG_PRELUDE} found file: ${file}`); copyConfigRelatedFile(file); }); @@ -67,7 +67,7 @@ function gatherConfigFiles() { // Look for an process any override component configs const jsFilesOverride = fg.sync(`${COMPONENTS_ROOT_SOURCE}/${COMPONENTS_OVERRIDE_DIR}/**/${CONFIG_NAME}`); - jsFilesOverride.forEach((file) => { + jsFilesOverride.forEach(file => { // console.log(`${LOG_PRELUDE} found file: ${file}`); copyConfigRelatedFile(file); }); @@ -76,7 +76,7 @@ function gatherConfigFiles() { function gatherConfigExtFiles() { const jsFiles = fg.sync(`${COMPONENTS_ROOT_SOURCE}/**/${CONFIG_EXT_NAME}`); - jsFiles.forEach((file) => { + jsFiles.forEach(file => { // console.log(`${LOG_PRELUDE} found file: ${file}`); copyConfigRelatedFile(file); }); diff --git a/sdk-config.json b/sdk-config.json index 4d82f5f44..c4026aeb7 100644 --- a/sdk-config.json +++ b/sdk-config.json @@ -2,6 +2,7 @@ "comment_sdk_config": "This is the configuration file for the React SDK", "sdk_optional_configs_doc_comment": "See the document(link below) for more details on all the available config settings", "sdk_optional_configs_doc": "https://docs.pega.com/bundle/constellation-sdk/page/constellation-sdks/sdks/configuring-sdk-config-json.html", + "theme": "light", "authConfig": { "authService": "pega", diff --git a/src/samples/Embedded/Header/index.tsx b/src/samples/Embedded/Header/index.tsx index 48ebd1a2b..8ae1bda86 100644 --- a/src/samples/Embedded/Header/index.tsx +++ b/src/samples/Embedded/Header/index.tsx @@ -1,7 +1,7 @@ import { Typography } from '@mui/material'; import { makeStyles } from '@mui/styles'; -const useStyles = makeStyles((theme) => ({ +const useStyles = makeStyles(theme => ({ embeddedHeader: { display: 'flex', alignItems: 'center', diff --git a/src/samples/Embedded/ResolutionScreen/index.tsx b/src/samples/Embedded/ResolutionScreen/index.tsx index f4226ce76..c3517fa0b 100644 --- a/src/samples/Embedded/ResolutionScreen/index.tsx +++ b/src/samples/Embedded/ResolutionScreen/index.tsx @@ -1,6 +1,6 @@ import makeStyles from '@mui/styles/makeStyles'; -const useStyles = makeStyles((theme) => ({ +const useStyles = makeStyles(theme => ({ resolutionPart: { display: 'flex', flexDirection: 'row' diff --git a/src/samples/Embedded/ShoppingOptionCard/index.tsx b/src/samples/Embedded/ShoppingOptionCard/index.tsx index 7aba9e4ef..e0e9c6057 100644 --- a/src/samples/Embedded/ShoppingOptionCard/index.tsx +++ b/src/samples/Embedded/ShoppingOptionCard/index.tsx @@ -1,6 +1,6 @@ import makeStyles from '@mui/styles/makeStyles'; -const useStyles = makeStyles((theme) => ({ +const useStyles = makeStyles(theme => ({ swatchHeader: { display: 'flex', flexDirection: 'row', diff --git a/src/samples/Embedded/index.tsx b/src/samples/Embedded/index.tsx index a091fe239..a73f8eebc 100644 --- a/src/samples/Embedded/index.tsx +++ b/src/samples/Embedded/index.tsx @@ -36,14 +36,14 @@ export default function Embedded() { } }; - const initializeRootContainerProps = (renderObj) => { + const initializeRootContainerProps = renderObj => { const { props } = renderObj; setRootProps(props); }; const startMashup = () => { - PCore.onPCoreReady(async (renderObj) => { + PCore.onPCoreReady(async renderObj => { // Check that we're seeing the PCore version we expect compareSdkPCoreVersions(); diff --git a/src/samples/FullPortal/InvalidPortal.tsx b/src/samples/FullPortal/InvalidPortal.tsx index 23273d193..03bf7b1b5 100644 --- a/src/samples/FullPortal/InvalidPortal.tsx +++ b/src/samples/FullPortal/InvalidPortal.tsx @@ -16,7 +16,7 @@ export default function InvalidPortal({ defaultPortal, portals, onSelect }) { Please select one of the portals available to the operator's access group:
- {portals.map((portal) => ( + {portals.map(portal => (
onSelect(portal)}> {portal}
diff --git a/src/samples/FullPortal/index.tsx b/src/samples/FullPortal/index.tsx index 0fab24cd6..6f5e1fd23 100644 --- a/src/samples/FullPortal/index.tsx +++ b/src/samples/FullPortal/index.tsx @@ -67,13 +67,13 @@ export default function FullPortal() { */ function startPortal() { // NOTE: When loadMashup is complete, this will be called. - PCore.onPCoreReady((renderObj) => { + PCore.onPCoreReady(renderObj => { // Check that we're seeing the PCore version we expect compareSdkPCoreVersions(); // Initialize the SdkComponentMap (local and pega-provided) // eslint-disable-next-line @typescript-eslint/no-unused-vars - getSdkComponentMap(localSdkComponentMap).then((theComponentMap) => { + getSdkComponentMap(localSdkComponentMap).then(theComponentMap => { console.log(`SdkComponentMap initialized`); // Don't call initialRender until SdkComponentMap is fully initialized @@ -102,7 +102,7 @@ export default function FullPortal() { setPortalSelectionScreen(true); setDefaultPortalName(defaultPortal); // Getting current user's access group's available portals list other than excluded portals (relies on Traditional DX APIs) - getAvailablePortals().then((portals) => { + getAvailablePortals().then(portals => { setAvailablePortals(portals as string[]); }); } diff --git a/src/theme.ts b/src/theme.ts index 35e0cc6c9..1ea4bda55 100644 --- a/src/theme.ts +++ b/src/theme.ts @@ -1,16 +1,133 @@ +// @ts-nocheck import { createTheme } from '@mui/material'; -import { Theme } from '@mui/material/styles'; +import type { Theme } from '@mui/material/styles'; + +import sdkConfig from '../sdk-config.json'; /** * Since makeStyles is now exported from @mui/styles package which does not know about Theme in the core package. * you need to augment the DefaultTheme (empty object) in @mui/styles with Theme from the core. */ declare module '@mui/styles/defaultTheme' { - interface DefaultTheme extends Theme {} + interface DefaultTheme extends Theme { + backgroundColor: string; + card: { + backgroundColor: string; + borderLeft: string; + borderLeftColor: string; + }; + modal: { + backgroundColor: string; + topColor: string; + }; + embedded: { + resolutionTextColor: string; + }; + actionButtons: { + primary: { + backgroundColor: string; + color: string; + }; + secondary: { + backgroundColor: string; + color: string; + }; + }; + } } -export const theme = createTheme({ +const lightThemeColours = { + ':root': { + '--app-primary-color': '#007bff' /* was #673ab7; */, + '--app-primary-dark-color': '#0048cc' /* was #4527A0; */, + '--app-primary-light-color': '#33aeff' /* was #B499FC; */, + '--app-secondary-color': '#FFC400', + '--app-neutral-color': 'grey', + '--app-neutral-light-color': 'lightgrey', + '--app-neutral-dark-color': '#262626', + '--app-error-color': '#f44336', + '--app-error-light-color': '#e57373', + '--app-error-dark-color': '#d32f2f', + '--app-warning-color': '#ff9800', + '--app-warning-color-light': '#ffb74d', + '--app-warning-color-dark': '#f57c00', + + '--app-background-color': 'whitesmoke', + '--app-form-color': 'white', + + /* App Navigation */ + '--app-nav-bg': '#262626' /*! default */, + '--app-nav-color': '#d9d9d9' /* invert( var(--app-nav-bg)) !default */, + + /* Few custom colors */ + '--modal-background-color': 'rgba(100, 100, 100, 0.4)', + '--modal-top-color': 'white', + '--modal-border-color': 'black', + '--modal-box-shadow-color': '#777', + '--utility-count-background-color': '#65b5f5', + '--utility-card-border-color': '#f5f5f5', + '--link-button-color': '#3f51b5', + '--banner-text-color': 'rgb(0, 0, 0)', + '--app-text-color': 'white', + '--utility-background-color': 'white', + '--table-header-background': '#f5f5f5', + '--step-line-color': 'rgba(0, 0, 0, 0.12)', + '--selected-step-label-color': 'rgba(0, 0, 0, 0.87)', + '--step-label-color': 'rgba(0, 0, 0, 0.54)', + '--svg-color': 'invert(0%)', + '--secondary-button-text-color': '#ffffff' + } +}; +const darkThemeColours = { + ':root': { + '--app-primary-color': '#f72585' /* accent pink */, + '--app-primary-dark-color': '#c2185b' /* darker pink */, + '--app-primary-light-color': '#ff5ca2' /* lighter pink */, + '--app-secondary-color': '#c0c0c0' /* accent silver */, + '--app-neutral-color': '#b0b0b0' /* light gray for text/icons */, + '--app-neutral-light-color': '#e0e0e0' /* lighter gray for highlights */, + '--app-neutral-dark-color': '#262626' /* dark gray for backgrounds */, + '--app-error-color': '#ff5370' /* vibrant error red */, + '--app-error-light-color': '#ffb4b4' /* soft error red */, + '--app-error-dark-color': '#b71c1c' /* deep error red */, + '--app-warning-color': '#ffb300' /* amber warning */, + '--app-warning-color-light': '#ffe082' /* light amber */, + '--app-warning-color-dark': '#c68400' /* dark amber */, + + '--app-background-color': '#060326' /* main dark background */, + '--app-form-color': '#18132c' /* slightly lighter for forms */, + + /* App Navigation */ + '--app-nav-bg': '#18132c' /* navigation background */, + '--app-nav-color': '#c0c0c0', + + '--modal-background-color': 'rgba(40, 30, 90, 0.85)' /* nearly matches #060326, slightly lighter and more opaque */, + '--modal-top-color': '#2a1f54' /* light pink accent for modal top */, + '--modal-border-color': '#2a1f54' /* matches card background */, + '--modal-box-shadow-color': '#777', + + '--utility-count-background-color': '#f8aaf0', + '--utility-card-border-color': '#2a1f54', + '--link-button-color': '#f72585', + '--banner-text-color': '#e0e0e0', + '--app-text-color': '#e0e0e0', + '--utility-background-color': '#2a1f54', + '--table-header-background': '#18132c', + '--step-line-color': 'rgba(0, 0, 0, 0.12)', + '--selected-step-label-color': 'rgba(0, 0, 0, 0.87)', + '--step-label-color': 'rgba(0, 0, 0, 0.54)', + '--svg-color': 'invert(100%)', + '--secondary-button-text-color': '#1a103c' + } +}; + +const lightTheme = createTheme({ components: { + MuiCssBaseline: { + styleOverrides: { + ...lightThemeColours + } + }, MuiTextField: { defaultProps: { size: 'small' @@ -22,6 +139,29 @@ export const theme = createTheme({ } } }, + actionButtons: { + primary: { + backgroundColor: '#cc0f60', + color: '#FFFFFF' + }, + secondary: { + backgroundColor: '#3F51B5', + color: '#FFFFFF' + } + }, + modal: { + backgroundColor: 'rgba(100, 100, 100, 0.4)', + topColor: 'white' + }, + embedded: { + resolutionTextColor: 'darkslategray' + }, + backgroundColor: '#fff', + card: { + backgroundColor: '#fff', + borderLeft: '6px solid', + borderLeftColor: '#C70BB5' + }, palette: { primary: { contrastText: '#fff', @@ -34,6 +174,87 @@ export const theme = createTheme({ dark: '#c51162', light: '#ff4081', main: '#f50057' + }, + backgroundColor: '#fff' + } +}); + +const darkTheme = createTheme({ + components: { + MuiCssBaseline: { + styleOverrides: { + body: { + background: 'radial-gradient(178.62% 112% at 50% -12%, #0B0F2A 69.96%, #111951 89.19%)', + backgroundAttachment: 'fixed' + }, + ...darkThemeColours + } + }, + MuiPaper: { + styleOverrides: { + root: {} + } + }, + MuiTextField: { + defaultProps: { + size: 'small' + }, + styleOverrides: { + root: { + width: '100%' + } + } + } + }, + actionButtons: { + primary: { + backgroundColor: '#C70BB5', + color: '#FFFFFF' + }, + secondary: { + backgroundColor: '#FFFFFF', + color: '#C70BB5' } + }, + embedded: { + resolutionTextColor: 'darkslategray' + }, + backgroundColor: '#060326', + card: { + backgroundColor: 'rgba(255, 255, 255, 0.3)', + borderLeft: '', + borderLeftColor: '' + }, + palette: { + mode: 'dark', + primary: { + main: '#f72585', // accent pink + light: '#ff5ca2', // lighter shade of pink + dark: '#c2185b', // darker shade + contrastText: '#ffffff' // white text on pink buttons + }, + secondary: { + main: '#c0c0c0', // accent silver + light: '#d9d9d9', + dark: '#8c8c8c', + contrastText: '#1a103c' // dark text on silver background + }, + info: { + main: '#e91e63', // Pink + dark: '#ad1457', // Darker pink + light: '#f8bbd0', // Light pink for backgrounds + contrastText: '#fff' + }, + background: { + // default: 'radial-gradient(178.62% 112% at 50% -12%, #0B0F2A 69.96%, #111951 89.19%)', + paper: 'rgba(255, 255, 255, 0.1)' // card-bg + }, + text: { + primary: '#e0e0e0', // text-light + secondary: '#c0c0c0' // silver for muted text + }, + divider: 'rgba(255, 255, 255, 0.1)' // border-color } }); + +export const theme = sdkConfig.theme === 'dark' ? darkTheme : lightTheme; diff --git a/tests/common.js b/tests/common.js index d53e48e34..d326a3713 100644 --- a/tests/common.js +++ b/tests/common.js @@ -24,11 +24,11 @@ const login = async (username, password, page) => { await page.locator('#submit_row .loginButton').click(); }; -const getAttributes = async (element) => { - return element.evaluate(async (ele) => ele.getAttributeNames()); +const getAttributes = async element => { + return element.evaluate(async ele => ele.getAttributeNames()); }; -const getFormattedDate = (date) => { +const getFormattedDate = date => { if (!date) { return date; } @@ -46,7 +46,7 @@ const getFutureDate = () => { return getFormattedDate(futureDate); }; -const closePage = async (page) => { +const closePage = async page => { await page.close(); }; From 365e80da709e3487867d597d2cdbbf87ae616df6 Mon Sep 17 00:00:00 2001 From: Siva Rama Krishna Date: Tue, 21 Oct 2025 18:46:54 +0530 Subject: [PATCH 3/3] fix: prod build --- webpack.config.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/webpack.config.js b/webpack.config.js index f41640ba2..20e42f243 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -95,7 +95,7 @@ module.exports = (env, argv) => { filename: '[path][base].gz', algorithm: 'gzip', test: /\.js$|\.ts$|\.css$|\.html$/, - exclude: /constellation-core.*.js|bootstrap-shell.js|531.*.js/, + exclude: /constellation-core.*.js|bootstrap-shell.js|libphonenumber.*.js/, threshold: 10240, minRatio: 0.8 }) @@ -105,7 +105,7 @@ module.exports = (env, argv) => { filename: '[path][base].br', algorithm: 'brotliCompress', test: /\.(js|ts|css|html|svg)$/, - exclude: /constellation-core.*.js|bootstrap-shell.js|531.*.js/, + exclude: /constellation-core.*.js|bootstrap-shell.js|libphonenumber.*.js/, compressionOptions: { params: { [zlib.constants.BROTLI_PARAM_QUALITY]: 11