@turk.net/mui 3.0.7 → 3.0.8

package/COMPONENT_GLOSSARY.md

@@ -0,0 +1,500 @@
+# OneHub Component Glossary
+
+> **Purpose:** Exhaustive catalog of ALL usable Material UI components with their valid prop combinations. Any component or prop combination NOT listed here has NO theme override and MUST NOT be used.
+>
+> **Format:** RFC 2119 keywords (MUST, MUST NOT, ONLY).
+
+---
+
+## Button
+
+**Import:** `import { Button } from '@mui/material'`
+
+| Prop | Valid Values |
+|------|-------------|
+| `variant` | `contained`, `outlined`, `text` |
+| `size` | `extra-small`, `small`, `medium`, `large`, `extra-large` |
+| `color` | `primary`, `secondary`, `error` |
+| `disabled` | `boolean` |
+| `fullWidth` | `boolean` |
+| `startIcon` | `ReactNode` |
+| `endIcon` | `ReactNode` |
+
+**Default props:** `disableElevation: true`
+
+### ButtonGroup
+
+**Import:** `import { ButtonGroup } from '@mui/material'`
+
+| Prop | Valid Values |
+|------|-------------|
+| `variant` | `contained`, `outlined`, `text` |
+| `size` | `small`, `medium`, `large` |
+| `color` | `primary`, `secondary`, `error` |
+
+---
+
+## TextField
+
+**Import:** `import { TextField } from '@mui/material'`
+
+| Prop | Valid Values |
+|------|-------------|
+| `variant` | `outlined`, `filled`, `standard` |
+| `size` | `small`, `medium`, `large` |
+| `color` | `neutral`, `brand`, `danger` |
+| `disabled` | `boolean` |
+| `error` | `boolean` |
+| `fullWidth` | `boolean` |
+| `label` | `string` |
+| `helperText` | `string` |
+| `multiline` | `boolean` |
+| `rows` | `number` |
+| `InputProps` | `InputProps` (startAdornment, endAdornment) |
+
+### InputLabel
+
+**Import:** `import { InputLabel } from '@mui/material'`
+
+| Prop | Valid Values |
+|------|-------------|
+| `size` | `small`, `medium`, `larger` |
+
+### FormHelperText
+
+**Import:** `import { FormHelperText } from '@mui/material'`
+
+Standard MUI FormHelperText. Typography: `text.xs.regular`.
+
+---
+
+## Select
+
+**Import:** `import { Select } from '@mui/material'`
+
+| Prop | Valid Values |
+|------|-------------|
+| `variant` | `outlined`, `filled`, `standard` |
+| `size` | `small`, `medium`, `large` |
+| `color` | `neutral`, `brand`, `danger` |
+| `fullWidth` | `boolean` |
+
+### MenuItem
+
+**Import:** `import { MenuItem } from '@mui/material'`
+
+Standard MUI MenuItem. Typography: `text.sm.regular` to `text.md.regular`.
+
+---
+
+## Autocomplete
+
+**Import:** `import { Autocomplete } from '@mui/material'`
+
+| Prop | Valid Values |
+|------|-------------|
+| `size` | `small`, `medium` |
+| `color` | `neutral`, `brand`, `danger` |
+| `options` | `T[]` |
+| `renderInput` | `(params) => ReactNode` |
+| `renderOption` | `(props, option) => ReactNode` (custom render by theme) |
+
+---
+
+## Checkbox
+
+**Import:** `import { Checkbox } from '@mui/material'`
+
+| Prop | Valid Values |
+|------|-------------|
+| `size` | `small`, `medium` |
+| `color` | `primary`, `error` |
+| `checked` | `boolean` |
+| `indeterminate` | `boolean` |
+| `disabled` | `boolean` |
+
+**Note:** `size="large"` is DISABLED in type overrides.
+
+---
+
+## Radio
+
+**Import:** `import { Radio } from '@mui/material'`
+
+| Prop | Valid Values |
+|------|-------------|
+| `size` | `small`, `medium` |
+| `color` | `primary`, `error` |
+| `checked` | `boolean` |
+| `disabled` | `boolean` |
+
+### RadioGroup
+
+**Import:** `import { RadioGroup } from '@mui/material'`
+
+Standard MUI RadioGroup. Wraps Radio components.
+
+---
+
+## Switch
+
+**Import:** `import { Switch } from '@mui/material'`
+
+| Prop | Valid Values |
+|------|-------------|
+| `size` | `small`, `medium` |
+| `color` | `primary`, `error` |
+| `checked` | `boolean` |
+| `disabled` | `boolean` |
+
+---
+
+## Chip
+
+**Import:** `import { Chip } from '@mui/material'`
+
+| Prop | Valid Values |
+|------|-------------|
+| `variant` | `filled`, `tint`, `outline`, `ghost` |
+| `size` | `small`, `medium` |
+| `color` | `primary`, `secondary`, `error` |
+| `label` | `string` |
+| `icon` | `ReactNode` |
+| `onDelete` | `() => void` |
+| `clickable` | `boolean` |
+
+**Note:** `size="large"` is available via type augmentation. `variant` values are custom (different from MUI default).
+
+**Typography:**
+- `small`: `text.xs.medium` (12px, 500)
+- `medium`: `text.sm.medium` (14px, 500)
+
+---
+
+## Badge
+
+**Import:** `import { Badge } from '@mui/material'`
+
+| Prop | Valid Values |
+|------|-------------|
+| `size` | `dot`, `extra-small`, `small`, `medium`, `large`, `extra-large` |
+| `color` | `default`, `brand`, `success`, `danger`, `severewarning`, `warning`, `important` |
+| `badgeContent` | `ReactNode` |
+| `invisible` | `boolean` |
+| `variant` | `standard`, `dot` |
+
+**Note:** MUI default `primary`, `secondary`, `error` colors are DISABLED for Badge. Use `brand`, `danger` instead.
+
+---
+
+## Avatar
+
+**Import:** `import { Avatar } from '@mui/material'`
+
+| Prop | Valid Values |
+|------|-------------|
+| `size` | `dot`, `extra-small`, `small`, `medium`, `large`, `extra-large` |
+| `src` | `string` |
+| `alt` | `string` |
+
+### AvatarGroup
+
+**Import:** `import { AvatarGroup } from '@mui/material'`
+
+Standard MUI AvatarGroup.
+
+---
+
+## Typography
+
+**Import:** `import { Typography } from '@mui/material'`
+
+| Prop | Valid Values |
+|------|-------------|
+| `variant` | See typography variants below |
+
+### Display Variants
+
+```
+display.xl2.{regular|medium|semibold|bold}  → 72px / 90px
+display.xl.{regular|medium|semibold|bold}   → 60px / 72px
+display.lg.{regular|medium|semibold|bold}   → 48px / 60px
+display.md.{regular|medium|semibold|bold}   → 36px / 38px
+display.sm.{regular|medium|semibold|bold}   → 30px / 38px
+display.xs.{regular|medium|semibold|bold}   → 24px / 32px
+```
+
+### Text Variants
+
+```
+text.xl.{regular|medium|semibold|bold}      → 20px / 30px
+text.lg.{regular|medium|semibold|bold}      → 18px / 28px
+text.md.{regular|medium|semibold|bold}      → 16px / 28px
+text.sm.{regular|medium|semibold|bold}      → 14px / 20px
+text.xs.{regular|medium|semibold|bold}      → 12px / 18px
+```
+
+**MUST NOT use:** `h1`-`h6`, `body1`, `body2`, `subtitle1`, `subtitle2`, `caption`, `button` — these are DISABLED.
+
+---
+
+## Paper
+
+**Import:** `import { Paper } from '@mui/material'`
+
+| Prop | Valid Values |
+|------|-------------|
+| `elevation` | `0` – `24` |
+| `variant` | `elevation`, `outlined` |
+| `square` | `boolean` |
+
+**Default border radius:** `8px` (`theme.shape.borderRadius`).
+**Default border:** `1px solid var(--neutral-stroke-3-rest)`.
+
+---
+
+## Card
+
+**Import:** `import { Card } from '@mui/material'`
+
+Standard MUI Card. Uses Paper styling.
+
+**Sub-components:** `CardContent`, `CardHeader`, `CardActions`, `CardMedia`.
+
+---
+
+## Dialog
+
+**Import:** `import { Dialog } from '@mui/material'`
+
+Standard MUI Dialog.
+
+**Sub-components:**
+- `DialogTitle` — Typography: `text.lg.medium`
+- `DialogContent` + `DialogContentText` — Typography: `text.md.regular`
+- `DialogActions` — Contains Button components
+
+**Default props:** Paper uses `theme.shadows[6]` (28px blur).
+
+---
+
+## Menu
+
+**Import:** `import { Menu } from '@mui/material'`
+
+| Prop | Valid Values |
+|------|-------------|
+| `anchorEl` | `HTMLElement | null` |
+| `open` | `boolean` |
+| `onClose` | `() => void` |
+
+**MenuList** and **MenuItem** are standard sub-components.
+
+---
+
+## List
+
+**Import:** `import { List } from '@mui/material'`
+
+| Prop | Valid Values |
+|------|-------------|
+| `dense` | `boolean` |
+
+### Sub-components
+
+| Component | Typography |
+|-----------|-----------|
+| `ListItem` | — |
+| `ListItemButton` | — |
+| `ListItemText` | `text.sm.regular` (primary), `text.xs.regular` (secondary) |
+| `ListItemIcon` | 24px icon |
+
+---
+
+## Table
+
+**Import:** `import { Table } from '@mui/material'`
+
+| Prop | Valid Values |
+|------|-------------|
+| `size` | `small`, `medium` |
+
+### Sub-components
+
+| Component | Typography |
+|-----------|-----------|
+| `TableHead` | — |
+| `TableBody` | — |
+| `TableRow` | — |
+| `TableCell` | `text.sm.regular` |
+
+**Table header:** `text.xs.semibold` or `text.sm.semibold`.
+
+**Note:** For OneHub-specific data tables (task lists, customer lists), custom styled Box-based tables from Figma patterns are preferred over MUI Table. See `COMPONENT_MAP.md#table-data-grid`.
+
+---
+
+## Alert
+
+**Import:** `import { Alert } from '@mui/material'`
+
+| Prop | Valid Values |
+|------|-------------|
+| `severity` | `success`, `warning`, `error`, `info` |
+| `variant` | `standard`, `outlined`, `filled` |
+| `onClose` | `() => void` |
+
+**Typography:** `text.sm.regular` to `text.md.regular`.
+
+---
+
+## Snackbar
+
+**Import:** `import { Snackbar } from '@mui/material'`
+
+Standard MUI Snackbar. Typically wraps an Alert component.
+
+```typescript
+<Snackbar open={open} autoHideDuration={6000} onClose={handleClose}>
+  <Alert severity="success" onClose={handleClose}>Message</Alert>
+</Snackbar>
+```
+
+---
+
+## Tooltip
+
+**Import:** `import { Tooltip } from '@mui/material'`
+
+Standard MUI Tooltip. Styling handled by theme overrides.
+
+---
+
+## Slider
+
+**Import:** `import { Slider } from '@mui/material'`
+
+| Prop | Valid Values |
+|------|-------------|
+| `size` | `small`, `medium` |
+| `color` | `primary`, `error` |
+
+---
+
+## Pagination
+
+**Import:** `import { Pagination } from '@mui/material'`
+
+| Prop | Valid Values |
+|------|-------------|
+| `size` | `small`, `medium` |
+| `color` | `primary` |
+
+### PaginationItem
+
+**Import:** `import { PaginationItem } from '@mui/material'`
+
+| Prop | Valid Values |
+|------|-------------|
+| `size` | `small`, `medium` |
+| `color` | `primary` |
+
+---
+
+## Tabs
+
+**Import:** `import { Tabs } from '@mui/material'`
+
+Standard MUI Tabs. Styling handled by theme overrides.
+
+### Tab
+
+**Import:** `import { Tab } from '@mui/material'`
+
+Standard MUI Tab. Active text: `text.sm.semibold`, `brand.foreground[1].rest`.
+
+---
+
+## Link
+
+**Import:** `import { Link } from '@mui/material'`
+
+| Prop | Valid Values |
+|------|-------------|
+| `href` | `string` |
+| `underline` | `none`, `hover`, `always` |
+
+**Color:** `brand.foreground.compound.rest`.
+
+---
+
+## FormControl / FormLabel / FormControlLabel
+
+**Import:** `import { FormControl, FormLabel, FormControlLabel } from '@mui/material'`
+
+Standard MUI form components. Used to wrap Checkbox, Radio, Switch.
+
+---
+
+## CssBaseline
+
+**Import:** `import { CssBaseline } from '@mui/material'`
+
+Standard MUI CssBaseline. Includes custom scrollbar styles from theme.
+
+---
+
+## DatePicker
+
+**Import:** `import { DatePicker } from '@mui/x-date-pickers'`
+
+Uses `dayjs` adapter. Styling handled by theme overrides.
+
+---
+
+## InputBase / OutlinedInput / FilledInput / Input
+
+**Import:** from `@mui/material`
+
+These are base input components used internally by TextField and Select. Direct usage is rare but supported:
+
+| Component | Valid Sizes |
+|-----------|------------|
+| `InputBase` | `small`, `medium` |
+| `OutlinedInput` | `small`, `medium` |
+| `FilledInput` | `small`, `medium` |
+| `Input` | `small`, `medium` |
+
+---
+
+## Components with NO Theme Override (MUST NOT Use)
+
+These MUI components have no theme customization and MUST NOT be used:
+
+| Component | Alternative |
+|-----------|------------|
+| `ToggleButton` / `ToggleButtonGroup` | Use `Chip` or `Button` group |
+| `Rating` | Not applicable |
+| `SpeedDial` | Custom solution |
+| `BottomNavigation` | Custom solution |
+| `MobileStepper` | Custom solution |
+| `ImageList` | CSS Grid/Flex |
+| `Timeline` | Custom component |
+| `Accordion` | Custom component |
+| `Breadcrumbs` | Custom component |
+| `Drawer` | Use `WithSidebarLayout` |
+| `AppBar` | Use `TabBasedLayout.AppBar` |
+
+---
+
+## Quick Validation Checklist
+
+When writing a component, verify:
+
+- [ ] Component is in this glossary? If not → STOP, do not use it.
+- [ ] All props (variant, size, color) match valid values?
+- [ ] Typography variant is NOT an MUI default (h1-h6, body1, etc.)?
+- [ ] Colors use CSS custom properties or theme.vars.palette?
+- [ ] Spacing uses theme.spacing(n)?
+- [ ] No inline styles?
+- [ ] No custom component duplicating MUI functionality?