oxygen-component

Instructions

1. Read .claude/oxygen-ui/CLAUDE.md for critical rules
2. Read .claude/oxygen-ui/components.md for API reference
3. Generate component using Oxygen UI patterns

Critical Rules

• Import ALL components from @wso2/oxygen-ui (never from @mui/material)
• Import icons from @wso2/oxygen-ui-icons-react
• Use theme tokens via sx prop (e.g., p: 2, bgcolor: 'background.paper')
• Never hardcode colors or spacing values
• For data tables, prefer ListingTable over MUI's Table
• For layouts, use AppShell, Header, Sidebar

Component Template

import { Box, Typography, Button } from '@wso2/oxygen-ui';
import { IconName } from '@wso2/oxygen-ui-icons-react';

interface MyComponentProps {
  // Define props
}

function MyComponent({ ...props }: MyComponentProps) {
  return (
    <Box sx={{ p: 2, bgcolor: 'background.paper' }}>
      {/* Component content */}
    </Box>
  );
}

export default MyComponent;

Common Patterns

Data Table Component

import { ListingTable, Chip, IconButton } from '@wso2/oxygen-ui';
import { EditIcon, TrashIcon } from '@wso2/oxygen-ui-icons-react';

<ListingTable.Container>
  <ListingTable.Toolbar showSearch actions={<Button>Add Item</Button>} />
  <ListingTable variant="card">
    <ListingTable.Head>
      <ListingTable.Row>
        <ListingTable.Cell>Name</ListingTable.Cell>
        <ListingTable.Cell>Status</ListingTable.Cell>
        <ListingTable.Cell align="right">Actions</ListingTable.Cell>
      </ListingTable.Row>
    </ListingTable.Head>
    <ListingTable.Body>
      {data.map((item) => (
        <ListingTable.Row key={item.id}>
          <ListingTable.Cell>{item.name}</ListingTable.Cell>
          <ListingTable.Cell>
            <Chip label={item.status} color="success" size="small" />
          </ListingTable.Cell>
          <ListingTable.Cell align="right">
            <IconButton size="small"><EditIcon size={18} /></IconButton>
            <IconButton size="small" color="error"><TrashIcon size={18} /></IconButton>
          </ListingTable.Cell>
        </ListingTable.Row>
      ))}
    </ListingTable.Body>
  </ListingTable>
</ListingTable.Container>

Card Component

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

<Paper sx={{ p: 3 }}>
  <Typography variant="h6" gutterBottom>Card Title</Typography>
  <Typography color="text.secondary" sx={{ mb: 2 }}>
    Card description text
  </Typography>
  <Box sx={{ display: 'flex', gap: 1 }}>
    <Button variant="contained">Primary</Button>
    <Button variant="outlined">Secondary</Button>
  </Box>
</Paper>

Dialog Component

import {
  Dialog,
  DialogTitle,
  DialogContent,
  DialogContentText,
  DialogActions,
  Button,
} from '@wso2/oxygen-ui';

<Dialog open={open} onClose={onClose} maxWidth="sm" fullWidth>
  <DialogTitle>Dialog Title</DialogTitle>
  <DialogContent>
    <DialogContentText>Dialog content goes here.</DialogContentText>
  </DialogContent>
  <DialogActions>
    <Button onClick={onClose}>Cancel</Button>
    <Button variant="contained" onClick={onConfirm}>Confirm</Button>
  </DialogActions>
</Dialog>

MUI X Components (Use Namespaces)

import { DataGrid, DatePickers, TreeView } from '@wso2/oxygen-ui';

// DataGrid
<DataGrid.DataGrid rows={rows} columns={columns} />

// DatePickers
<DatePickers.DatePicker value={date} onChange={setDate} />

// TreeView
<TreeView.SimpleTreeView>
  <TreeView.TreeItem itemId="1" label="Item 1" />
</TreeView.SimpleTreeView>

Charts (Separate Package)

// Charts are in a separate package built on Recharts
import { LineChart, BarChart, PieChart } from '@wso2/oxygen-ui-charts-react';

<LineChart series={series} />
<BarChart series={series} />
<PieChart series={series} />