Merge pull request #647 from jeradrutnam/main

Improve UI theming by onboarding oxygen-ui dependency

Author: jeradrutnam

.gitignore

@@ -76,6 +76,8 @@ yarn-error.log*
 # NX artifacts
 frontend/.nx/cache
 frontend/.nx/workspace-data
+frontend/packages/**/.nx/cache
+frontend/packages/**/.nx/workspace-data
 
 # typescript
 *.tsbuildinfo

frontend/apps/thunder-develop/package.json

@@ -43,6 +43,7 @@
     "@mui/x-tree-view": "catalog:",
     "@thunder/commons-contexts": "workspace:^",
     "@thunder/ui": "workspace:^",
+    "@wso2/oxygen-ui": "workspace:^",
     "clsx": "catalog:",
     "dayjs": "catalog:",
     "lucide-react": "catalog:",

frontend/apps/thunder-develop/src/AppWithConfig.test.tsx

@@ -60,11 +60,6 @@ vi.mock('./App', () => ({
   default: () => <div data-testid="app">App Component</div>,
 }));
 
-// Mock CssBaseline
-vi.mock('@mui/material/CssBaseline', () => ({
-  default: () => <div data-testid="css-baseline">CssBaseline</div>,
-}));
-
 // Mock theme
 vi.mock('@thunder/ui', () => ({
   theme: {
@@ -193,14 +188,4 @@ describe('AppWithConfig', () => {
     expect(provider).toHaveAttribute('data-client-id', 'config-client-id');
     expect(provider).toHaveAttribute('data-after-sign-in-url', 'https://default-signin.example.com');
   });
-
-  it('renders CssBaseline component', () => {
-    mockGetClientId.mockReturnValue('test-client-id');
-    mockGetServerUrl.mockReturnValue('https://test-server.example.com');
-    mockGetClientUrl.mockReturnValue('https://test-client.example.com');
-
-    render(<AppWithConfig />);
-
-    expect(screen.getByTestId('css-baseline')).toBeInTheDocument();
-  });
 });

frontend/apps/thunder-develop/src/AppWithConfig.tsx

@@ -17,9 +17,7 @@
  */
 
 import type {JSX} from 'react';
-import {StyledEngineProvider, ThemeProvider} from '@mui/material/styles';
-import {theme} from '@thunder/ui';
-import CssBaseline from '@mui/material/CssBaseline';
+import OxygenUIThemeProvider from '@wso2/oxygen-ui/OxygenUIThemeProvider';
 import {AsgardeoProvider} from '@asgardeo/react';
 import {useConfig} from '@thunder/commons-contexts';
 import App from './App';
@@ -34,12 +32,9 @@ export default function AppWithConfig(): JSX.Element {
       afterSignInUrl={getClientUrl() ?? (import.meta.env.VITE_ASGARDEO_AFTER_SIGN_IN_URL as string)}
       platform="AsgardeoV2"
     >
-      <StyledEngineProvider injectFirst>
-        <ThemeProvider theme={theme}>
-          <CssBaseline enableColorScheme />
-          <App />
-        </ThemeProvider>
-      </StyledEngineProvider>
+      <OxygenUIThemeProvider>
+        <App />
+      </OxygenUIThemeProvider>
     </AsgardeoProvider>
   );
 }

frontend/apps/thunder-develop/src/components/Header/Header.tsx

@@ -16,11 +16,10 @@
  * under the License.
  */
 
-import Stack from '@mui/material/Stack';
-import Tooltip from '@mui/material/Tooltip';
-import {ColorModeIconDropdown} from '@thunder/ui';
+import {Stack, Tooltip} from '@wso2/oxygen-ui';
+import {ColorModeToggle} from '@wso2/oxygen-ui/ColorModeToggle';
 import type {JSX} from 'react';
-import {Bell} from 'lucide-react';
+import {Bell, Monitor, Moon, Sun} from 'lucide-react';
 import NavbarBreadcrumbs from '../Navbar/NavbarBreadcrumbs';
 import MenuButton from '../Sidebar/MenuButton';
 import Search from './Search';
@@ -45,10 +44,15 @@ export default function Header(): JSX.Element {
         <Search />
         <Tooltip title="Coming soon">
           <MenuButton showBadge aria-label="Open notifications">
-            <Bell size={16} />
+            <Bell strokeWidth={1} />
           </MenuButton>
         </Tooltip>
-        <ColorModeIconDropdown />
+        <ColorModeToggle
+          data-testid="theme-toggle"
+          darkModeIcon={<Moon strokeWidth={1} />}
+          lightModeIcon={<Sun strokeWidth={1} />}
+          systemModeIcon={<Monitor strokeWidth={1} />}
+        />
       </Stack>
     </Stack>
   );

frontend/apps/thunder-develop/src/components/Header/Search.tsx

@@ -16,9 +16,7 @@
  * under the License.
  */
 
-import FormControl from '@mui/material/FormControl';
-import InputAdornment from '@mui/material/InputAdornment';
-import OutlinedInput from '@mui/material/OutlinedInput';
+import {FormControl, InputAdornment, OutlinedInput} from '@wso2/oxygen-ui';
 import {SearchIcon} from 'lucide-react';
 import type {JSX} from 'react';
 

frontend/apps/thunder-develop/src/components/Navbar/AppNavbar.tsx

@@ -17,13 +17,7 @@
  */
 
 import * as React from 'react';
-import {styled} from '@mui/material/styles';
-import AppBar from '@mui/material/AppBar';
-import Box from '@mui/material/Box';
-import Stack from '@mui/material/Stack';
-import MuiToolbar from '@mui/material/Toolbar';
-import {tabsClasses} from '@mui/material/Tabs';
-import Typography from '@mui/material/Typography';
+import {AppBar, styled, Box, Stack, Toolbar as MuiToolbar, tabsClasses, Typography} from '@wso2/oxygen-ui';
 import {ColorModeIconDropdown} from '@thunder/ui';
 import {LayoutDashboard, Menu} from 'lucide-react';
 import type {JSX} from 'react';

frontend/apps/thunder-develop/src/components/Navbar/NavbarBreadcrumbs.tsx

@@ -16,11 +16,8 @@
  * under the License.
  */
 
-import {styled} from '@mui/material/styles';
-import Typography from '@mui/material/Typography';
-import Breadcrumbs, {breadcrumbsClasses} from '@mui/material/Breadcrumbs';
+import {styled, Typography, Breadcrumbs, breadcrumbsClasses, Box} from '@wso2/oxygen-ui';
 import {ChevronRightIcon} from 'lucide-react';
-import Box from '@mui/material/Box';
 import type {JSX} from 'react';
 import useNavigation from '@/layouts/contexts/useNavigation';
 

frontend/apps/thunder-develop/src/components/Sidebar/MenuButton.tsx

@@ -16,8 +16,7 @@
  * under the License.
  */
 
-import Badge, {badgeClasses} from '@mui/material/Badge';
-import IconButton, {type IconButtonProps} from '@mui/material/IconButton';
+import {Badge, badgeClasses, IconButton, type IconButtonProps} from '@wso2/oxygen-ui';
 import type {JSX} from 'react';
 
 export interface MenuButtonProps extends IconButtonProps {
@@ -27,7 +26,7 @@ export interface MenuButtonProps extends IconButtonProps {
 export default function MenuButton({showBadge = false, ...props}: MenuButtonProps): JSX.Element {
   return (
     <Badge color="error" variant="dot" invisible={!showBadge} sx={{[`& .${badgeClasses.badge}`]: {right: 2, top: 2}}}>
-      <IconButton size="small" {...props} />
+      <IconButton {...props} />
     </Badge>
   );
 }

frontend/apps/thunder-develop/src/components/Sidebar/MenuContent.tsx

@@ -17,12 +17,7 @@
  */
 
 import {NavLink} from 'react-router';
-import List from '@mui/material/List';
-import ListItem from '@mui/material/ListItem';
-import ListItemButton from '@mui/material/ListItemButton';
-import ListItemIcon from '@mui/material/ListItemIcon';
-import ListItemText from '@mui/material/ListItemText';
-import Stack from '@mui/material/Stack';
+import {List, ListItem, ListItemButton, ListItemIcon, ListItemText, Stack} from '@wso2/oxygen-ui';
 import {Blocks, LayoutGrid, User, UsersRound} from 'lucide-react';
 import type {JSX} from 'react';
 import useNavigation from '@/layouts/contexts/useNavigation';