refactor: styling changes and component imports

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pega/react-sdk-components",
-  "version": "0.25.4",
+  "version": "0.25.5",
   "description": "React SDK packaging: bridge and components, overrides",
   "main": "index.ts",
   "scripts": {
@@ -98,7 +98,6 @@
     "eslint-plugin-react": "^7.37.5",
     "eslint-plugin-react-hooks": "^5.2.0",
     "eslint-plugin-sonarjs": "^3.0.5",
-    "typescript-eslint": "^8.45.0",
     "html-webpack-plugin": "^5.6.4",
     "http-server": "^14.1.1",
     "istanbul": "^0.4.5",
@@ -119,6 +118,7 @@
     "ts-jest": "^29.4.1",
     "ts-loader": "^9.5.2",
     "typescript": "^5.9.2",
+    "typescript-eslint": "^8.45.0",
     "webpack": "^5.101.2",
     "webpack-cli": "^6.0.1",
     "webpack-dev-server": "^5.2.2"

packages/react-sdk-components/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pega/react-sdk-components",
-  "version": "0.25.4",
+  "version": "0.25.5",
   "description": "React SDK Infrastructure: bridge and components",
   "_filesComment": "During packing, npm ignores everything NOT in the files list",
   "files": [

packages/react-sdk-components/src/common.css

@@ -62,88 +62,3 @@
 [class*='MuiInputAdornment-positionStart'] {
   margin-right: 0 !important;
 }
-
-.tox .tox-toolbar {
-  background-color: var(--app-background-color) !important;
-}
-
-.tox .tox-toolbar__primary {
-  background-color: var(--app-background-color) !important;
-}
-
-.tox .tox-toolbar__button {
-  color: var(--app-text-color) !important;
-}
-
-.tox .tox-toolbar__button--enabled {
-  background: var(--app-primary-color) !important;
-  color: #fff !important;
-}
-
-.tox .tox-dialog {
-  background-color: var(--modal-top-color) !important;
-  color: var(--app-text-color) !important;
-  border: 1px solid var(--modal-border-color) !important;
-  padding: 20px !important;
-  box-shadow: 0 0 10px 3px var(--modal-box-shadow-color) !important;
-}
-
-.tox .tox-dialog__header {
-  background-color: var(--modal-top-color) !important;
-  color: var(--app-text-color) !important;
-  font-weight: 500;
-  border-bottom: 1px solid var(--modal-border-color);
-}
-
-.tox .tox-dialog__footer {
-  background: transparent !important;
-  border-top: 1px solid var(--modal-border-color);
-}
-
-.tox .tox-dialog-wrap__backdrop {
-  background-color: var(--modal-background-color) !important;
-}
-
-.tox .tox-dialog__body input,
-.tox .tox-dialog__body textarea,
-.tox .tox-dialog__body select {
-  background: initial !important;
-  color: var(--app-text-color) !important;
-  border: 1px solid var(--app-neutral-color) !important;
-  border-radius: 4px !important;
-  padding: 6px 10px !important;
-  font-size: 1em !important;
-  font-family: inherit !important;
-}
-
-.tox .tox-dialog__body button {
-  background: transparent;
-  color: #fff !important;
-  border: none !important;
-  border-radius: 4px !important;
-  padding: 8px 16px !important;
-  font-size: 1em !important;
-  cursor: pointer !important;
-}
-
-.tox .tox-dialog__footer .tox-button {
-  background: var(--app-primary-color) !important;
-  color: #fff !important;
-  border: none !important;
-  border-radius: 4px !important;
-  padding: 8px 16px !important;
-  font-size: 1em !important;
-  cursor: pointer !important;
-}
-
-.tox .tox-dialog__footer .tox-button--secondary {
-  background: var(--app-secondary-color) !important;
-  color: var(--secondary-button-text-color) !important;
-  font-size: 0.875rem !important;
-  cursor: pointer !important;
-}
-
-/* Support for google map autocomplete */
-.pac-container {
-  z-index: 2147483647;
-}

packages/react-sdk-components/src/components/field/Group/Group.tsx

@@ -1,6 +1,6 @@
 import { type ReactElement, useMemo } from 'react';
 import Grid2 from '@mui/material/Grid2';
-import FieldGroup from '../../designSystemExtension/FieldGroup';
+import { getComponentFromMap } from '../../../bridge/helpers/sdk_component_map';
 import type { PConnFieldProps } from '../../../types/PConnProps';
 
 interface GroupProps extends PConnFieldProps {
@@ -13,6 +13,8 @@ interface GroupProps extends PConnFieldProps {
 }
 
 export default function Group(props: GroupProps) {
+  const FieldGroup = getComponentFromMap('FieldGroup');
+
   const { children, heading, showHeading, instructions, collapsible, displayMode, type } = props;
 
   const isReadOnly = displayMode === 'DISPLAY_ONLY';

packages/react-sdk-components/src/components/field/Location/Location.css

@@ -0,0 +1,4 @@
+/* Support for google map autocomplete */
+.pac-container {
+  z-index: 2147483647;
+}

packages/react-sdk-components/src/components/field/Location/Location.tsx

@@ -8,6 +8,8 @@ import { getComponentFromMap } from '../../../bridge/helpers/sdk_component_map';
 import type { PConnFieldProps } from '../../../types/PConnProps';
 import handleEvent from '../../helpers/event-utils';
 
+import './Location.css';
+
 interface LocationProps extends PConnFieldProps {
   coordinates?: string;
   onlyCoordinates?: boolean;

packages/react-sdk-components/src/components/field/RichText/RichText.css

@@ -0,0 +1,79 @@
+.tox .tox-toolbar {
+  background-color: var(--app-background-color) !important;
+}
+
+.tox .tox-toolbar__primary {
+  background-color: var(--app-background-color) !important;
+}
+
+.tox .tox-toolbar__button {
+  color: var(--app-text-color) !important;
+}
+
+.tox .tox-toolbar__button--enabled {
+  background: var(--app-primary-color) !important;
+  color: #fff !important;
+}
+
+.tox .tox-dialog {
+  background-color: var(--modal-top-color) !important;
+  color: var(--app-text-color) !important;
+  border: 1px solid var(--modal-border-color) !important;
+  padding: 20px !important;
+  box-shadow: 0 0 10px 3px var(--modal-box-shadow-color) !important;
+}
+
+.tox .tox-dialog__header {
+  background-color: var(--modal-top-color) !important;
+  color: var(--app-text-color) !important;
+  font-weight: 500;
+  border-bottom: 1px solid var(--modal-border-color);
+}
+
+.tox .tox-dialog__footer {
+  background: transparent !important;
+  border-top: 1px solid var(--modal-border-color);
+}
+
+.tox .tox-dialog-wrap__backdrop {
+  background-color: var(--modal-background-color) !important;
+}
+
+.tox .tox-dialog__body input,
+.tox .tox-dialog__body textarea,
+.tox .tox-dialog__body select {
+  background: initial !important;
+  color: var(--app-text-color) !important;
+  border: 1px solid var(--app-neutral-color) !important;
+  border-radius: 4px !important;
+  padding: 6px 10px !important;
+  font-size: 1em !important;
+  font-family: inherit !important;
+}
+
+.tox .tox-dialog__body button {
+  background: transparent;
+  color: #fff !important;
+  border: none !important;
+  border-radius: 4px !important;
+  padding: 8px 16px !important;
+  font-size: 1em !important;
+  cursor: pointer !important;
+}
+
+.tox .tox-dialog__footer .tox-button {
+  background: var(--app-primary-color) !important;
+  color: #fff !important;
+  border: none !important;
+  border-radius: 4px !important;
+  padding: 8px 16px !important;
+  font-size: 1em !important;
+  cursor: pointer !important;
+}
+
+.tox .tox-dialog__footer .tox-button--secondary {
+  background: var(--app-secondary-color) !important;
+  color: var(--secondary-button-text-color) !important;
+  font-size: 0.875rem !important;
+  cursor: pointer !important;
+}

packages/react-sdk-components/src/components/field/RichText/RichText.tsx

@@ -4,6 +4,8 @@ import handleEvent from '../../helpers/event-utils';
 import { getComponentFromMap } from '../../../bridge/helpers/sdk_component_map';
 import type { PConnFieldProps } from '../../../types/PConnProps';
 
+import './RichText.css';
+
 interface RichTextProps extends PConnFieldProps {
   // If any, enter additional props that only exist on TextArea here
   additionalProps?: object;

packages/react-sdk-components/src/components/field/UserReference/UserReference.tsx

@@ -4,7 +4,6 @@ import { Typography } from '@mui/material';
 import { getComponentFromMap } from '../../../bridge/helpers/sdk_component_map';
 import type { PConnProps } from '../../../types/PConnProps';
 
-import FieldValueList from '../../designSystemExtension/FieldValueList';
 import { getUserId, isUserNameAvailable } from './UserReferenceUtils';
 
 const DROPDOWN_LIST = 'Drop-down list';
@@ -34,6 +33,7 @@ const UserReference = (props: UserReferenceProps) => {
   // Get emitted components from map (so we can get any override that may exist)
   const AutoComplete = getComponentFromMap('AutoComplete');
   const Dropdown = getComponentFromMap('Dropdown');
+  const FieldValueList = getComponentFromMap('FieldValueList');
 
   const {
     label = '',

packages/react-sdk-components/src/components/template/DefaultPage/DefaultPage.tsx

@@ -1,7 +1,7 @@
 import { useMemo, Children } from 'react';
 import type { ReactNode } from 'react';
 import { Grid2 } from '@mui/material';
-import Banner from '../../designSystemExtension/Banner';
+import { getComponentFromMap } from '../../../bridge/helpers/sdk_component_map';
 
 export interface CommonPageProps {
   /** Page title */
@@ -72,6 +72,8 @@ export default function DefaultPage({
   backgroundColor = '',
   tintImage
 }: DefaultPageProps) {
+  const Banner = getComponentFromMap('Banner');
+
   const childArray = useMemo(() => {
     return Children.toArray(children);
   }, [children]);

packages/react-sdk-components/src/samples/Embedded/MainScreen/index.tsx

@@ -1,6 +1,6 @@
 import { useEffect, useState } from 'react';
-import { getSdkConfig } from '@pega/auth/lib/sdk-auth-manager';
 import { makeStyles } from '@mui/styles';
+import { getSdkConfig } from '@pega/auth/lib/sdk-auth-manager';
 
 import { usePegaAuth } from '../context/PegaAuthProvider';
 import { usePega } from '../context/PegaReadyContext';

packages/react-sdk-components/src/theme.ts

@@ -278,8 +278,6 @@ const darkTheme = createTheme({
       contrastText: '#fff'
     },
     background: {
-      // default: 'radial-gradient(178.62% 112% at 50% -12%, #0B0F2A 69.96%, #111951 89.19%)',
-      // paper: '#18132c'
       paper: '#191b2c' // card-bg
     },
     text: {

packages/react-sdk-overrides/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pega/react-sdk-overrides",
-  "version": "0.25.4",
+  "version": "0.25.5",
   "description": "React SDK - Code for overriding components",
   "_filesComment": "During packing, npm ignores everything NOT in the files list",
   "files": [

sdk-config.json

@@ -2,7 +2,7 @@
   "comment_sdk_config": "This is the configuration file for the React SDK Components",
   "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",
+  "theme": "dark",
   "authConfig": {
     "authService": "pega",