@pega/react-sdk-components 0.25.1 → 0.25.3

package/lib/theme.js

@@ -1,7 +1,91 @@
+// @ts-nocheck
 import { createTheme } from '@mui/material';
-// eslint-disable-next-line import/prefer-default-export
-export const theme = createTheme({
+import { Theme } from '@mui/material/styles';
+import { getSdkConfig } from '@pega/auth/lib/sdk-auth-manager';
+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'
@@ -13,6 +97,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',
@@ -25,7 +132,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
     }
 });
+const sdkConfig = await getSdkConfig();
+export const theme = sdkConfig.theme === 'dark' ? darkTheme : lightTheme;
 //# sourceMappingURL=theme.js.map

package/lib/theme.js.map

@@ -1 +1 @@
-{"version":3,"file":"theme.js","sourceRoot":"","sources":["../src/theme.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAW5C,wDAAwD;AACxD,MAAM,CAAC,MAAM,KAAK,GAAG,WAAW,CAAC;IAC/B,UAAU,EAAE;QACV,YAAY,EAAE;YACZ,YAAY,EAAE;gBACZ,IAAI,EAAE,OAAO;aACd;YACD,cAAc,EAAE;gBACd,IAAI,EAAE;oBACJ,KAAK,EAAE,MAAM;iBACd;aACF;SACF;KACF;IACD,OAAO,EAAE;QACP,OAAO,EAAE;YACP,YAAY,EAAE,MAAM;YACpB,IAAI,EAAE,SAAS;YACf,KAAK,EAAE,SAAS;YAChB,IAAI,EAAE,SAAS;SAChB;QACD,SAAS,EAAE;YACT,YAAY,EAAE,MAAM;YACpB,IAAI,EAAE,SAAS;YACf,KAAK,EAAE,SAAS;YAChB,IAAI,EAAE,SAAS;SAChB;KACF;CACF,CAAC,CAAC","sourcesContent":["import { createTheme } from '@mui/material';\nimport { Theme } from '@mui/material/styles';\n\n/**\n * Since makeStyles is now exported from @mui/styles package which does not know about Theme in the core package.\n * you need to augment the DefaultTheme (empty object) in @mui/styles with Theme from the core.\n */\ndeclare module '@mui/styles/defaultTheme' {\n  interface DefaultTheme extends Theme {}\n}\n\n// eslint-disable-next-line import/prefer-default-export\nexport const theme = createTheme({\n  components: {\n    MuiTextField: {\n      defaultProps: {\n        size: 'small'\n      },\n      styleOverrides: {\n        root: {\n          width: '100%'\n        }\n      }\n    }\n  },\n  palette: {\n    primary: {\n      contrastText: '#fff',\n      dark: '#303f9f',\n      light: '#7986cb',\n      main: '#3f51b5'\n    },\n    secondary: {\n      contrastText: '#fff',\n      dark: '#c51162',\n      light: '#ff4081',\n      main: '#f50057'\n    }\n  }\n});\n"]}
+{"version":3,"file":"theme.js","sourceRoot":"","sources":["../src/theme.ts"],"names":[],"mappings":"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","sourcesContent":["// @ts-nocheck\nimport { createTheme } from '@mui/material';\nimport { Theme } from '@mui/material/styles';\n\nimport { getSdkConfig } from '@pega/auth/lib/sdk-auth-manager';\n\n/**\n * Since makeStyles is now exported from @mui/styles package which does not know about Theme in the core package.\n * you need to augment the DefaultTheme (empty object) in @mui/styles with Theme from the core.\n */\ndeclare module '@mui/styles/defaultTheme' {\n  interface DefaultTheme extends Theme {\n    backgroundColor: string;\n    card: {\n      backgroundColor: string;\n      borderLeft: string;\n      borderLeftColor: string;\n    };\n    modal: {\n      backgroundColor: string;\n      topColor: string;\n    };\n    embedded: {\n      resolutionTextColor: string;\n    };\n    actionButtons: {\n      primary: {\n        backgroundColor: string;\n        color: string;\n      };\n      secondary: {\n        backgroundColor: string;\n        color: string;\n      };\n    };\n  }\n}\n\nconst lightThemeColours = {\n  ':root': {\n    '--app-primary-color': '#007bff' /* was #673ab7; */,\n    '--app-primary-dark-color': '#0048cc' /* was #4527A0; */,\n    '--app-primary-light-color': '#33aeff' /* was #B499FC; */,\n    '--app-secondary-color': '#FFC400',\n    '--app-neutral-color': 'grey',\n    '--app-neutral-light-color': 'lightgrey',\n    '--app-neutral-dark-color': '#262626',\n    '--app-error-color': '#f44336',\n    '--app-error-light-color': '#e57373',\n    '--app-error-dark-color': '#d32f2f',\n    '--app-warning-color': '#ff9800',\n    '--app-warning-color-light': '#ffb74d',\n    '--app-warning-color-dark': '#f57c00',\n\n    '--app-background-color': 'whitesmoke',\n    '--app-form-color': 'white',\n\n    /* App Navigation */\n    '--app-nav-bg': '#262626' /*! default */,\n    '--app-nav-color': '#d9d9d9' /* invert( var(--app-nav-bg)) !default */,\n\n    /* Few custom colors */\n    '--modal-background-color': 'rgba(100, 100, 100, 0.4)',\n    '--modal-top-color': 'white',\n    '--modal-border-color': 'black',\n    '--modal-box-shadow-color': '#777',\n    '--utility-count-background-color': '#65b5f5',\n    '--utility-card-border-color': '#f5f5f5',\n    '--link-button-color': '#3f51b5',\n    '--banner-text-color': 'rgb(0, 0, 0)',\n    '--app-text-color': 'white',\n    '--utility-background-color': 'white',\n    '--table-header-background': '#f5f5f5',\n    '--step-line-color': 'rgba(0, 0, 0, 0.12)',\n    '--selected-step-label-color': 'rgba(0, 0, 0, 0.87)',\n    '--step-label-color': 'rgba(0, 0, 0, 0.54)',\n    '--svg-color': 'invert(0%)',\n    '--secondary-button-text-color': '#ffffff'\n  }\n};\nconst darkThemeColours = {\n  ':root': {\n    '--app-primary-color': '#f72585' /* accent pink */,\n    '--app-primary-dark-color': '#c2185b' /* darker pink */,\n    '--app-primary-light-color': '#ff5ca2' /* lighter pink */,\n    '--app-secondary-color': '#c0c0c0' /* accent silver */,\n    '--app-neutral-color': '#b0b0b0' /* light gray for text/icons */,\n    '--app-neutral-light-color': '#e0e0e0' /* lighter gray for highlights */,\n    '--app-neutral-dark-color': '#262626' /* dark gray for backgrounds */,\n    '--app-error-color': '#ff5370' /* vibrant error red */,\n    '--app-error-light-color': '#ffb4b4' /* soft error red */,\n    '--app-error-dark-color': '#b71c1c' /* deep error red */,\n    '--app-warning-color': '#ffb300' /* amber warning */,\n    '--app-warning-color-light': '#ffe082' /* light amber */,\n    '--app-warning-color-dark': '#c68400' /* dark amber */,\n\n    '--app-background-color': '#060326' /* main dark background */,\n    '--app-form-color': '#18132c' /* slightly lighter for forms */,\n\n    /* App Navigation */\n    '--app-nav-bg': '#18132c' /* navigation background */,\n    '--app-nav-color': '#c0c0c0',\n\n    '--modal-background-color': 'rgba(40, 30, 90, 0.85)' /* nearly matches #060326, slightly lighter and more opaque */,\n    '--modal-top-color': '#2a1f54' /* light pink accent for modal top */,\n    '--modal-border-color': '#2a1f54' /* matches card background */,\n    '--modal-box-shadow-color': '#777',\n\n    '--utility-count-background-color': '#f8aaf0',\n    '--utility-card-border-color': '#2a1f54',\n    '--link-button-color': '#f72585',\n    '--banner-text-color': '#e0e0e0',\n    '--app-text-color': '#e0e0e0',\n    '--utility-background-color': '#2a1f54',\n    '--table-header-background': '#18132c',\n    '--step-line-color': 'rgba(0, 0, 0, 0.12)',\n    '--selected-step-label-color': 'rgba(0, 0, 0, 0.87)',\n    '--step-label-color': 'rgba(0, 0, 0, 0.54)',\n    '--svg-color': 'invert(100%)',\n    '--secondary-button-text-color': '#1a103c'\n  }\n};\n\nconst lightTheme = createTheme({\n  components: {\n    MuiCssBaseline: {\n      styleOverrides: {\n        ...lightThemeColours\n      }\n    },\n    MuiTextField: {\n      defaultProps: {\n        size: 'small'\n      },\n      styleOverrides: {\n        root: {\n          width: '100%'\n        }\n      }\n    }\n  },\n  actionButtons: {\n    primary: {\n      backgroundColor: '#cc0f60',\n      color: '#FFFFFF'\n    },\n    secondary: {\n      backgroundColor: '#3F51B5',\n      color: '#FFFFFF'\n    }\n  },\n  modal: {\n    backgroundColor: 'rgba(100, 100, 100, 0.4)',\n    topColor: 'white'\n  },\n  embedded: {\n    resolutionTextColor: 'darkslategray'\n  },\n  backgroundColor: '#fff',\n  card: {\n    backgroundColor: '#fff',\n    borderLeft: '6px solid',\n    borderLeftColor: '#C70BB5'\n  },\n  palette: {\n    primary: {\n      contrastText: '#fff',\n      dark: '#303f9f',\n      light: '#7986cb',\n      main: '#3f51b5'\n    },\n    secondary: {\n      contrastText: '#fff',\n      dark: '#c51162',\n      light: '#ff4081',\n      main: '#f50057'\n    },\n    backgroundColor: '#fff'\n  }\n});\n\nconst darkTheme = createTheme({\n  components: {\n    MuiCssBaseline: {\n      styleOverrides: {\n        body: {\n          background: 'radial-gradient(178.62% 112% at 50% -12%, #0B0F2A 69.96%, #111951 89.19%)',\n          backgroundAttachment: 'fixed'\n        },\n        ...darkThemeColours\n      }\n    },\n    MuiPaper: {\n      styleOverrides: {\n        root: {}\n      }\n    },\n    MuiTextField: {\n      defaultProps: {\n        size: 'small'\n      },\n      styleOverrides: {\n        root: {\n          width: '100%'\n        }\n      }\n    }\n  },\n  actionButtons: {\n    primary: {\n      backgroundColor: '#C70BB5',\n      color: '#FFFFFF'\n    },\n    secondary: {\n      backgroundColor: '#FFFFFF',\n      color: '#C70BB5'\n    }\n  },\n  embedded: {\n    resolutionTextColor: 'darkslategray'\n  },\n  backgroundColor: '#060326',\n  card: {\n    backgroundColor: 'rgba(255, 255, 255, 0.3)',\n    borderLeft: '',\n    borderLeftColor: ''\n  },\n  palette: {\n    mode: 'dark',\n    primary: {\n      main: '#f72585', // accent pink\n      light: '#ff5ca2', // lighter shade of pink\n      dark: '#c2185b', // darker shade\n      contrastText: '#ffffff' // white text on pink buttons\n    },\n    secondary: {\n      main: '#c0c0c0', // accent silver\n      light: '#d9d9d9',\n      dark: '#8c8c8c',\n      contrastText: '#1a103c' // dark text on silver background\n    },\n    info: {\n      main: '#e91e63', // Pink\n      dark: '#ad1457', // Darker pink\n      light: '#f8bbd0', // Light pink for backgrounds\n      contrastText: '#fff'\n    },\n    background: {\n      // default: 'radial-gradient(178.62% 112% at 50% -12%, #0B0F2A 69.96%, #111951 89.19%)',\n      paper: 'rgba(255, 255, 255, 0.1)' // card-bg\n    },\n    text: {\n      primary: '#e0e0e0', // text-light\n      secondary: '#c0c0c0' // silver for muted text\n    },\n    divider: 'rgba(255, 255, 255, 0.1)' // border-color\n  }\n});\n\nconst sdkConfig = await getSdkConfig();\n\nexport const theme = sdkConfig.theme === 'dark' ? darkTheme : lightTheme;\n"]}

package/lib/types/PConnProps.d.ts

@@ -5,7 +5,7 @@
 //  that returns a PConnect object. (new/better way of doing .propTypes).
 //  This PConnProps can be extended to include other props that we know are in every component
 export interface PConnProps {
-  // getPConnect should exist for every C11n component. (add @ts-ignore in special cases where it isn't)
+  // getPConnect should exist for every C11n component. (add @ts-expect-error in special cases where it isn't)
   getPConnect: () => typeof PConnect;
 
   // Allow any/all other key/value pairs in the BaseProps for now

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pega/react-sdk-components",
-  "version": "0.25.1",
+  "version": "0.25.3",
   "description": "React SDK Infrastructure: bridge and components",
   "_filesComment": "During packing, npm ignores everything NOT in the files list",
   "files": [
@@ -14,32 +14,34 @@
   },
   "dependencies": {
     "@emotion/react": "^11.14.0",
-    "@emotion/styled": "^11.14.0",
-    "@mui/icons-material": "^5.16.7",
-    "@mui/lab": "^5.0.0-alpha.173",
-    "@mui/material": "^5.16.7",
-    "@mui/styles": "^5.16.7",
-    "@mui/x-date-pickers": "^7.20.0",
-    "@tinymce/tinymce-react": "^5.1.1",
+    "@emotion/styled": "^11.14.1",
+    "@mui/icons-material": "^6.5.0",
+    "@mui/lab": "^6.0.1-beta.36",
+    "@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",
     "downloadjs": "^1.4.7",
     "fast-deep-equal": "^3.1.3",
     "lodash.clonedeep": "^4.5.0",
     "lodash.difference": "^4.5.0",
-    "mui-tel-input": "^6.0.1",
-    "react-datepicker": "^4.25.0",
+    "mui-tel-input": "^8.0.1",
+    "react-datepicker": "^7.6.0",
     "react-number-format": "^5.4.4",
     "react-redux": "^8.1.3",
     "throttle-debounce": "^5.0.2"
   },
   "devDependencies": {
-    "@pega/pcore-pconnect-typedefs": "~3.2.2"
+    "@pega/pcore-pconnect-typedefs": "~3.2.2",
+    "tinymce": "^6.8.6"
   },
   "peerDependencies": {
-    "@pega/auth": "~0.2.30",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2"
+    "@pega/auth": "~0.2",
+    "react": "^17.0 || ^18.0",
+    "react-dom": "^17.0 || ^18.0"
   },
   "author": "Pegasystems",
   "license": "SEE LICENCE IN LICENSE"