diff --git a/package.json b/package.json index 7bcb8abc..ccc2d192 100644 --- a/package.json +++ b/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" diff --git a/packages/react-sdk-components/package.json b/packages/react-sdk-components/package.json index 730c5047..596348ec 100644 --- a/packages/react-sdk-components/package.json +++ b/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": [ diff --git a/packages/react-sdk-components/src/common.css b/packages/react-sdk-components/src/common.css index b6fd9e2c..a577f980 100644 --- a/packages/react-sdk-components/src/common.css +++ b/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; -} diff --git a/packages/react-sdk-components/src/components/field/Group/Group.tsx b/packages/react-sdk-components/src/components/field/Group/Group.tsx index af3f739c..6c5edf75 100644 --- a/packages/react-sdk-components/src/components/field/Group/Group.tsx +++ b/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'; diff --git a/packages/react-sdk-components/src/components/field/Location/Location.css b/packages/react-sdk-components/src/components/field/Location/Location.css new file mode 100644 index 00000000..53953c71 --- /dev/null +++ b/packages/react-sdk-components/src/components/field/Location/Location.css @@ -0,0 +1,4 @@ +/* Support for google map autocomplete */ +.pac-container { + z-index: 2147483647; +} diff --git a/packages/react-sdk-components/src/components/field/Location/Location.tsx b/packages/react-sdk-components/src/components/field/Location/Location.tsx index eaf730b3..28c3bb9c 100755 --- a/packages/react-sdk-components/src/components/field/Location/Location.tsx +++ b/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; diff --git a/packages/react-sdk-components/src/components/field/RichText/RichText.css b/packages/react-sdk-components/src/components/field/RichText/RichText.css new file mode 100644 index 00000000..e04216d9 --- /dev/null +++ b/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; +} diff --git a/packages/react-sdk-components/src/components/field/RichText/RichText.tsx b/packages/react-sdk-components/src/components/field/RichText/RichText.tsx index 8ad32411..aa629315 100644 --- a/packages/react-sdk-components/src/components/field/RichText/RichText.tsx +++ b/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; diff --git a/packages/react-sdk-components/src/components/field/UserReference/UserReference.tsx b/packages/react-sdk-components/src/components/field/UserReference/UserReference.tsx index b3166b07..5280e3c8 100644 --- a/packages/react-sdk-components/src/components/field/UserReference/UserReference.tsx +++ b/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 = '', diff --git a/packages/react-sdk-components/src/components/template/DefaultPage/DefaultPage.tsx b/packages/react-sdk-components/src/components/template/DefaultPage/DefaultPage.tsx index 528850ec..5115fd5b 100644 --- a/packages/react-sdk-components/src/components/template/DefaultPage/DefaultPage.tsx +++ b/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]); diff --git a/packages/react-sdk-components/src/samples/Embedded/MainScreen/index.tsx b/packages/react-sdk-components/src/samples/Embedded/MainScreen/index.tsx index 3ed8c5f6..4ba68e24 100644 --- a/packages/react-sdk-components/src/samples/Embedded/MainScreen/index.tsx +++ b/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'; diff --git a/packages/react-sdk-components/src/theme.ts b/packages/react-sdk-components/src/theme.ts index b110a30c..00fc146b 100644 --- a/packages/react-sdk-components/src/theme.ts +++ b/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: { diff --git a/packages/react-sdk-overrides/package.json b/packages/react-sdk-overrides/package.json index 8f908c33..0a3f1484 100644 --- a/packages/react-sdk-overrides/package.json +++ b/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": [ diff --git a/sdk-config.json b/sdk-config.json index d46208e6..9462d93e 100644 --- a/sdk-config.json +++ b/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",