feat: switch from @kyper/mui to @mxenabled/mxui

* replaced kyper/mui with mxui

* feat: switch from Kyper MUI to MXUI

* bump mxui version

* fixed client overrides

* fixed the test

* added a comment

* fixed the test

* fixed misaligned styles

---------

Co-authored-by: Clement Mwimo <clement.mwimo@mx.com>

Author: mwclemy

package-lock.json

@@ -35,7 +35,6 @@
     "@kyper/input": "^6.1.0",
     "@kyper/institutionlogo": "^3.1.0",
     "@kyper/messagebox": "^3.1.0",
-    "@kyper/mui": "^4.5.0",
     "@kyper/progressindicators": "^3.1.0",
     "@kyper/select": "^2.0.0",
     "@kyper/selectionbox": "^2.1.0",

package.json

@@ -1,15 +1,14 @@
 import React from 'react'
 import { RootState } from 'src/redux/Store'
-import _isEmpty from 'lodash/isEmpty'
 import { useSelector } from 'react-redux'
 
 import { Theme, ThemeProvider } from '@mui/material'
 import { deepmerge } from '@mui/utils'
 
-import { createMXTheme, Icon, IconWeight } from '@kyper/mui'
+import { createMXTheme, Icon, IconWeight } from '@mxenabled/mxui'
 import { TokenProvider, THEMES } from '@kyper/tokenprovider'
 
-import { getTokenProviderValues } from 'src/redux/selectors/ClientColorScheme'
+import { getPrimarySeedColor } from 'src/redux/selectors/ClientColorScheme'
 
 declare module '@mui/material/styles' {
   interface PaletteColor {
@@ -23,30 +22,6 @@ declare module '@mui/material/styles' {
   }
 }
 
-interface ColorScheme {
-  Brand100?: string
-  Brand200?: string
-  Brand300?: string
-  Brand400?: string
-  Brand500?: string
-}
-
-export const clientThemeOverrides = (colorScheme: ColorScheme) => {
-  if (!_isEmpty(colorScheme)) {
-    return {
-      palette: {
-        primary: {
-          lighter: colorScheme.Brand100,
-          light: colorScheme.Brand200,
-          main: colorScheme.Brand300,
-          dark: colorScheme.Brand400,
-          darker: colorScheme.Brand500,
-        },
-      },
-    }
-  }
-  return {}
-}
 const connectThemeOverrides = (palette: Theme['palette']) => ({
   components: {
     MuiTypography: {
@@ -55,11 +30,6 @@ const connectThemeOverrides = (palette: Theme['palette']) => ({
           // Sets the default color of text. Can override singluar usage with color prop.
           color: palette?.text?.primary,
         },
-        // TODO: Remove once we fully migrate to @mxenabled/mxui as it would apply the right theme styles automatically.
-        subtitle2: {
-          fontSize: '13px',
-          lineHeight: '20px',
-        },
       },
     },
     MuiAccordion: {
@@ -111,12 +81,6 @@ const connectThemeOverrides = (palette: Theme['palette']) => ({
     },
     MuiFormLabel: {
       styleOverrides: {
-        root: {
-          '&.MuiFormLabel-root': {
-            fontSize: '13px',
-            lineHeight: '20px',
-          },
-        },
         asterisk: {
           color: '#E32727',
           '&$error': {
@@ -149,6 +113,20 @@ const connectThemeOverrides = (palette: Theme['palette']) => ({
         },
       },
     },
+    MuiLink: {
+      defaultProps: {
+        sx: {
+          display: 'inline-flex',
+          alignItems: 'center',
+          '&:hover': {
+            textDecoration: 'underline',
+          },
+          '&:focus': {
+            textDecoration: 'underline',
+          },
+        },
+      },
+    },
   },
 })
 
@@ -157,27 +135,45 @@ interface Props {
 }
 
 export const ConnectedTokenProvider = ({ children }: Props): React.ReactNode => {
-  // Client custom tokens from batcave
-  const clientCustomTokens = useSelector(getTokenProviderValues)
+  // Client primary seed color from batcave
+  const clientPrimarySeedColor = useSelector(getPrimarySeedColor)
   // "Light" or "Dark"
   const colorScheme = useSelector((state: RootState) => state.config.color_scheme)
   // Dark mode: true or false
   const isDarkModeEnabled: boolean = colorScheme === THEMES.DARK
   // Theme object with MX overrides
-  const mxTheme = createMXTheme(isDarkModeEnabled ? 'dark' : 'light')
+  const mxTheme = createMXTheme(isDarkModeEnabled ? 'dark' : 'light', {
+    paletteOptions: {
+      // Override primary color with widget_brand_color from batcave if it exists or use primary_300 from batcave and
+      // let the rest of the palette colors be generated by MXUI.
+      primary: clientPrimarySeedColor,
+    },
+  })
 
   const combinedTheme = deepmerge(
     mxTheme,
-    deepmerge(
-      clientThemeOverrides(clientCustomTokens.tokenOverrides.Color), // Theme object with client custom overrides
-      connectThemeOverrides(mxTheme.palette as Theme['palette']), // Theme object with connect overrides
-    ),
+    connectThemeOverrides(mxTheme.palette as Theme['palette']), // Theme object with connect overrides
   )
 
+  const kyperTokenOverrides = {
+    Color: {
+      Brand100: isDarkModeEnabled ? mxTheme.palette.primary[800] : mxTheme.palette.primary[100],
+      Brand200: mxTheme.palette.primary.light,
+      Brand300: mxTheme.palette.primary.main,
+      Brand400: mxTheme.palette.primary.dark,
+      Brand500: isDarkModeEnabled ? mxTheme.palette.primary[50] : mxTheme.palette.primary[900],
+      Primary100: isDarkModeEnabled ? mxTheme.palette.primary[800] : mxTheme.palette.primary[100],
+      Primary200: mxTheme.palette.primary.light,
+      Primary300: mxTheme.palette.primary.main,
+      Primary400: mxTheme.palette.primary.dark,
+      Primary500: isDarkModeEnabled ? mxTheme.palette.primary[50] : mxTheme.palette.primary[900],
+    },
+  }
+
   return (
     <TokenProvider
       theme={isDarkModeEnabled ? THEMES.DARK : colorScheme}
-      tokenOverrides={clientCustomTokens.tokenOverrides}
+      tokenOverrides={kyperTokenOverrides}
     >
       <ThemeProvider theme={combinedTheme}>{children}</ThemeProvider>
     </TokenProvider>

src/ConnectedTokenProvider.tsx

@@ -2,8 +2,8 @@ import React from 'react'
 import PropTypes from 'prop-types'
 
 import { useTokens } from '@kyper/tokenprovider'
-import { Text } from '@kyper/mui'
-import { ChevronRightIcon } from '@kyper/mui'
+import { Text } from '@mxenabled/mxui'
+import { ChevronRightIcon } from '@mxenabled/mxui'
 import { Button } from '@mui/material'
 
 export const ActionTile = (props) => {

src/components/ActionTile.js

@@ -1,7 +1,7 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import React from 'react'
 
-import { Text } from '@kyper/mui'
+import { Text } from '@mxenabled/mxui'
 import { useTokens } from '@kyper/tokenprovider'
 import { Button } from '@mui/material'
 

src/components/ActionableUtilityRow.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { Text } from '@kyper/mui'
+import { Text } from '@mxenabled/mxui'
 import { useTokens } from '@kyper/tokenprovider'
 import { Container } from 'src/components/Container'
 import { AttentionFilled } from '@kyper/icon/AttentionFilled'

src/components/ConfigError.tsx

@@ -1,7 +1,7 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import React from 'react'
 import { useSelector } from 'react-redux'
-import { InstitutionLogo } from '@kyper/mui'
+import { InstitutionLogo } from '@mxenabled/mxui'
 import { useTokens } from '@kyper/tokenprovider'
 
 import { selectColorScheme } from 'src/redux/reducers/configSlice'

src/components/ConnectLogoHeader.tsx

@@ -1,5 +1,5 @@
 import React, { useState, useImperativeHandle, useContext } from 'react'
-import { Text } from '@kyper/mui'
+import { Text } from '@mxenabled/mxui'
 import { Button, TextField } from '@mui/material'
 import ToggleButton from '@mui/material/ToggleButton'
 import ToggleButtonGroup from '@mui/material/ToggleButtonGroup'

src/components/ConnectSuccessSurvey.tsx

@@ -1,7 +1,7 @@
 import React, { Fragment } from 'react'
 import PropTypes from 'prop-types'
 import { useTokens } from '@kyper/tokenprovider'
-import { Text } from '@kyper/mui'
+import { Text } from '@mxenabled/mxui'
 
 export const DataCluster = (props) => {
   const tokens = useTokens()

src/components/DataCluster.js

@@ -1,6 +1,6 @@
 import React from 'react'
 
-import { useTokens } from '@kyper/mui'
+import { useTokens } from '@mxenabled/mxui'
 import {
   Accordion,
   AccordionSummary,
@@ -10,7 +10,7 @@ import {
   Icon,
   Stack,
 } from '@mui/material'
-import { Text } from '@kyper/mui'
+import { Text } from '@mxenabled/mxui'
 
 import { __ } from 'src/utilities/Intl'