feat: light / dark theme changes

Author: tumms2021389

.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'
 }));

.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(

__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),

__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

package-lock.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",

package.json

@@ -59,15 +59,15 @@ 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);
   });
 
   // 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);
   });

scripts/copy-configs.js

@@ -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",
 

sdk-config.json

@@ -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',

src/samples/Embedded/Header/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'