diff --git a/.prettierrc.js b/.prettierrc.js index 9a404134..1e23c6a6 100644 --- a/.prettierrc.js +++ b/.prettierrc.js @@ -3,5 +3,7 @@ module.exports = import('@pega/prettier-config').then(pegaPrettierConfig => ({ ...pegaPrettierConfig.default, - printWidth: 150 + printWidth: 150, + trailingComma: 'none', + arrowParens: 'avoid' })); diff --git a/package-lock.json b/package-lock.json index c9939e17..3a10304f 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 bd32e412..d60c6a26 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/sdk-config.json b/sdk-config.json index 4d82f5f4..c4026aeb 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/theme.ts b/src/theme.ts index 35e0cc6c..1ea4bda5 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/webpack.config.js b/webpack.config.js index f41640ba..20e42f24 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