wso2/oxygen-ui/oxygen-migrate

import { Box, Stack, Button } from '@mui/material';
import Typography from '@mui/material/Typography';
import { styled } from '@mui/material/styles';

import { Box, Stack, Button, Typography, styled } from '@wso2/oxygen-ui';

import SettingsIcon from '@mui/icons-material/Settings';
import HomeIcon from '@mui/icons-material/Home';
import DeleteIcon from '@mui/icons-material/Delete';

import { Settings, Home, Trash2 } from 'lucide-react';

import { SettingsIcon, HomeIcon, TrashIcon } from '@wso2/oxygen-ui-icons-react';

import { DataGrid } from '@mui/x-data-grid';
import { DatePicker } from '@mui/x-date-pickers';
import { BarChart } from '@mui/x-charts';
import { SimpleTreeView } from '@mui/x-tree-view';

import { DataGrid, DatePickers, TreeView } from '@wso2/oxygen-ui';
// Use as namespaces
<DataGrid.DataGrid rows={rows} columns={columns} />
<DatePickers.DatePicker value={date} onChange={setDate} />
<TreeView.SimpleTreeView items={items} />
// For Charts, use the separate package
import { BarChart } from '@wso2/oxygen-ui-charts-react';
<BarChart series={series} />

import { ThemeProvider, createTheme } from '@mui/material';
const theme = createTheme({
  palette: {
    primary: { main: '#1976d2' },
  },
});
<ThemeProvider theme={theme}>
  <App />
</ThemeProvider>

import { OxygenUIThemeProvider, OxygenTheme } from '@wso2/oxygen-ui';
// Use default theme
<OxygenUIThemeProvider theme={OxygenTheme}>
  <App />
</OxygenUIThemeProvider>
// Or with custom theme
import { extendTheme } from '@mui/material/styles';
import { OxygenThemeBase } from '@wso2/oxygen-ui';
const customTheme = extendTheme({
  ...OxygenThemeBase,
  colorSchemes: {
    light: {
      palette: { primary: { main: '#1976d2' } },
    },
  },
});
<OxygenUIThemeProvider theme={customTheme}>
  <App />
</OxygenUIThemeProvider>

import { AppBar, Toolbar, Drawer, Box } from '@mui/material';
<Box sx={{ display: 'flex' }}>
  <AppBar position="fixed">
    <Toolbar>
      <Typography>My App</Typography>
    </Toolbar>
  </AppBar>
  <Drawer variant="permanent">
    {/* Menu items */}
  </Drawer>
  <Box component="main" sx={{ flexGrow: 1, p: 3 }}>
    {/* Content */}
  </Box>
</Box>

import { AppShell, Header, Sidebar, Footer } from '@wso2/oxygen-ui';
<AppShell>
  <AppShell.Navbar>
    <Header>
      <Header.Brand>
        <Header.BrandTitle>My App</Header.BrandTitle>
      </Header.Brand>
    </Header>
  </AppShell.Navbar>
  <AppShell.Sidebar>
    <Sidebar>
      <Sidebar.Nav>
        {/* Menu items */}
      </Sidebar.Nav>
    </Sidebar>
  </AppShell.Sidebar>
  <AppShell.Main>
    {/* Content */}
  </AppShell.Main>
  <AppShell.Footer>
    <Footer companyName="WSO2 LLC" />
  </AppShell.Footer>
</AppShell>

import {
  Table,
  TableHead,
  TableBody,
  TableRow,
  TableCell,
  Paper,
} from '@mui/material';
<Paper>
  <Table>
    <TableHead>
      <TableRow>
        <TableCell>Name</TableCell>
        <TableCell>Status</TableCell>
      </TableRow>
    </TableHead>
    <TableBody>
      {data.map((row) => (
        <TableRow key={row.id}>
          <TableCell>{row.name}</TableCell>
          <TableCell>{row.status}</TableCell>
        </TableRow>
      ))}
    </TableBody>
  </Table>
</Paper>

import { ListingTable } from '@wso2/oxygen-ui';
<ListingTable.Container>
  <ListingTable.Toolbar showSearch />
  <ListingTable>
    <ListingTable.Head>
      <ListingTable.Row>
        <ListingTable.Cell>Name</ListingTable.Cell>
        <ListingTable.Cell>Status</ListingTable.Cell>
      </ListingTable.Row>
    </ListingTable.Head>
    <ListingTable.Body>
      {data.map((row) => (
        <ListingTable.Row key={row.id}>
          <ListingTable.Cell>{row.name}</ListingTable.Cell>
          <ListingTable.Cell>{row.status}</ListingTable.Cell>
        </ListingTable.Row>
      ))}
    </ListingTable.Body>
    <ListingTable.Footer />
  </ListingTable>
</ListingTable.Container>

import { useColorScheme } from '@mui/material';
const { mode, setMode } = useColorScheme();

import { ColorSchemeToggle, useTheme } from '@wso2/oxygen-ui';
// Simple toggle component
<ColorSchemeToggle />
// Check current mode
const theme = useTheme();
const isDark = theme.palette.mode === 'dark';

pnpm add -D @wso2/eslint-plugin-oxygen-ui

// eslint.config.js
import oxygenUIPlugin from '@wso2/eslint-plugin-oxygen-ui';
export default [
  oxygenUIPlugin.configs.recommended,
  // ... other configs
];