@matteoaliano/forest-ui 0.4.0 → 0.4.1

package/guidelines/FOREST_UI_GUIDELINES.md

@@ -1,408 +0,0 @@
-# Forest UI — AI Development Guidelines
-
-> **forest-ui v0.4.0**
-
-> **This file is auto-generated from the `forest-ui` package.**
-> Run `npx forest-ui sync` to update it.
-
----
-
-## 1. Golden Rules
-
-1. **NEVER import from `@mui/material` directly.** Always import from `forest-ui`.
-2. **ALWAYS wrap your app root with `<ForestProvider>`** — it applies the theme and CSS baseline.
-3. **NEVER use inline colors or spacing values.** Use the exported design tokens or MUI's `sx` prop with theme values.
-4. **NEVER create custom component wrappers** for things Forest UI already provides.
-5. **TypeScript is required.** All components export their prop types.
-6. **ALWAYS use the Outlined variant of MUI icons.** Import from `@mui/icons-material/*Outlined` (e.g. `CloseOutlined`, `MailOutlined`). Never use the default (filled), Rounded, Sharp, or TwoTone variants.
-
----
-
-## 2. Installation & Setup
-
-```bash
-npm install @matteoaliano/forest-ui @mui/material @mui/x-data-grid @mui/x-date-pickers @mui/x-charts dayjs @emotion/react @emotion/styled
-```
-
-```tsx
-// App root — REQUIRED
-import { ForestProvider } from "@matteoaliano/forest-ui";
-
-function App() {
-  return (
-    <ForestProvider>
-      {/* All app content here */}
-    </ForestProvider>
-  );
-}
-```
-
----
-
-## 3. Component Reference
-
-### Import Pattern
-
-```tsx
-// ✅ CORRECT — import from forest-ui
-import { Button, TextField, Alert } from "@matteoaliano/forest-ui";
-
-// ❌ WRONG — never import from @mui/material
-import Button from "@mui/material/Button";
-```
-
-### Available Components
-
-#### Inputs
-
-| Component | Import | Variants / Key Props | Default Props |
-|-----------|--------|----------------------|---------------|
-| `Button` | `import { Button } from "forest-ui"` | `variant: "contained" \| "outlined" \| "text"`, `color`, `disabled`, `startIcon`, `endIcon`, `loading`, `fullWidth`, `href` | `variant="contained"`, `size` prop removed |
-| `ButtonGroup` | `import { ButtonGroup } from "forest-ui"` | `variant: "contained" \| "outlined" \| "text"`, `size: "small" \| "medium" \| "large"`, `orientation: "horizontal" \| "vertical"`, `color`, `disabled`, `fullWidth` | `variant="contained"` |
-| `TextField` | `import { TextField } from "forest-ui"` | `variant: "outlined" \| "filled" \| "standard"`, `size: "small" \| "medium"`, `label`, `error`, `helperText`, `fullWidth`, `multiline`, `rows`, `type`, `placeholder`, `required`, `disabled` | — |
-| `Select` + `MenuItem` | `import { Select, MenuItem } from "forest-ui"` | `variant: "outlined" \| "filled" \| "standard"`, `size: "small" \| "medium"`, `multiple`, `displayEmpty`, `label`, `labelId`, `renderValue`, `native`, `error`, `disabled` | — |
-| `MultiSelect` | `import { MultiSelect } from "forest-ui"` | `options: { label, value }[]`, `value: string[]`, `onChange: (values) => void`, `selectAll: boolean`, `selectAllLabel: string`, `label` + all SelectProps | `selectAll={true}`, `selectAllLabel="Select All"` |
-| `Checkbox` | `import { Checkbox } from "forest-ui"` | `color: "default" \| "primary" \| "secondary" \| "error" \| "info" \| "success" \| "warning"`, `size: "small" \| "medium"`, `checked`, `indeterminate`, `disabled` | — |
-| `RadioGroup` + `Radio` | `import { RadioGroup, Radio } from "forest-ui"` | `row`, `value`, `onChange`; Radio: `color`, `size: "small" \| "medium" \| "large"`, `disabled` | — |
-| `Switch` | `import { Switch } from "forest-ui"` | `color: "default" \| "primary" \| "secondary" \| "error" \| "info" \| "success" \| "warning"`, `size: "small" \| "medium"`, `checked`, `disabled` | — |
-| `ToggleButton` + `ToggleButtonGroup` | `import { ToggleButton, ToggleButtonGroup } from "forest-ui"` | `value`, `exclusive`, `onChange`, `orientation: "horizontal" \| "vertical"`, `size: "small" \| "medium" \| "large"`, `color`, `fullWidth` | — |
-| `Fab` | `import { Fab } from "forest-ui"` | `variant: "circular" \| "extended"`, `size: "small" \| "medium" \| "large"`, `color`, `disabled`, `href` | `color="primary"` |
-| `IconButton` | `import { IconButton } from "forest-ui"` | `color: "inherit" \| "primary" \| "secondary" \| "error" \| "info" \| "success" \| "warning" \| "default"`, `size: "small" \| "medium" \| "large"`, `disabled`, `disableRipple` | — |
-| `Autocomplete` | `import { Autocomplete } from "forest-ui"` | `options`, `renderInput` (required), `multiple`, `freeSolo`, `disableClearable`, `loading`, `groupBy`, `limitTags`, `filterOptions` | — |
-| `Search` | `import { Search } from "forest-ui"` | `onClear`, `placeholder`, all TextField props (except `variant`) | `variant="outlined"`, `placeholder="Search…"`, built-in search icon and clear button |
-| `DatePicker` | `import { DatePicker } from "forest-ui"` | All MUI X DatePicker props (`value`, `onChange`, `label`, `format`, `minDate`, `maxDate`, `disabled`, `readOnly`) | Wraps with `LocalizationProvider` + `AdapterDayjs` automatically |
-
-#### Data Display
-
-| Component | Import | Variants / Key Props | Default Props |
-|-----------|--------|----------------------|---------------|
-| `Badge` | `import { Badge } from "forest-ui"` | `variant: "standard" \| "dot"`, `color: "default" \| "primary" \| "secondary" \| "error" \| "info" \| "success" \| "warning"`, `badgeContent`, `max`, `invisible`, `showZero`, `overlap: "rectangular" \| "circular"`, `anchorOrigin` | — |
-| `Chip` | `import { Chip } from "forest-ui"` | `variant: "filled" \| "outlined"`, `color: "default" \| "primary" \| "secondary" \| "error" \| "info" \| "success" \| "warning"`, `size: "small" \| "medium"`, `label`, `onDelete`, `clickable`, `avatar`, `icon` | `deleteIcon={<CloseOutlined />}` |
-| `Divider` | `import { Divider } from "forest-ui"` | `orientation: "horizontal" \| "vertical"`, `variant: "fullWidth" \| "inset" \| "middle"`, `textAlign: "center" \| "left" \| "right"`, `flexItem` | — |
-| `Typography` | `import { Typography } from "forest-ui"` | `variant: "h1" \| "h2" \| "h3" \| "h4" \| "h5" \| "h6" \| "subtitle1" \| "subtitle2" \| "body1" \| "body2" \| "caption" \| "overline" \| "button"`, `align: "inherit" \| "left" \| "center" \| "right" \| "justify"`, `gutterBottom`, `noWrap` | — |
-| `Tooltip` | `import { Tooltip } from "forest-ui"` | `title` (required), `placement` (12 positions: top/bottom/left/right + -start/-end), `arrow`, `followCursor`, `enterDelay`, `leaveDelay` | `arrow={true}` |
-| `Table` family | `import { Table, TableHead, TableBody, TableRow, TableCell, TableContainer } from "forest-ui"` | Table: `size: "small" \| "medium"`, `stickyHeader`; TableCell: `align`, `padding`, `sortDirection`, `variant: "head" \| "body" \| "footer"`; TableRow: `hover`, `selected` | — |
-| `DataGrid` | `import { DataGrid, type GridColDef } from "forest-ui"` | `rows`, `columns`, `paginationModel`, `sortModel`, `filterModel`, `checkboxSelection`, `loading`, `density: "compact" \| "standard" \| "comfortable"`. Requires `@mui/x-data-grid` peer dep | — |
-| `List` family | `import { List, ListItem, ListItemButton, ListItemIcon, ListItemText, ListItemAvatar, ListSubheader } from "forest-ui"` | `dense`, `disablePadding`; ListItemButton: `selected`, `disabled`; ListItemText: `primary`, `secondary` | — |
-
-#### Surfaces
-
-| Component | Import | Variants / Key Props | Default Props |
-|-----------|--------|----------------------|---------------|
-| `Accordion` family | `import { Accordion, AccordionSummary, AccordionDetails, AccordionActions } from "forest-ui"` | `expanded`, `defaultExpanded`, `onChange`, `disabled`, `disableGutters`, `square` | — |
-| `AppBar` + `Toolbar` + `AppBarNavItem` | `import { AppBar, Toolbar, AppBarNavItem } from "forest-ui"` | `position: "fixed" \| "absolute" \| "sticky" \| "static" \| "relative"`, `color: "default" \| "primary" \| "secondary" \| "transparent"`, `elevation`; Toolbar: `variant: "dense" \| "regular"`; AppBarNavItem: `label` (required), `icon`, `selected`, `href` | — |
-| `Card` family | `import { Card, CardContent, CardHeader, CardActions, CardMedia } from "forest-ui"` | `color: "primary" \| "secondary"`, `variant: "elevation" \| "outlined"`, `elevation`, `raised`; CardHeader: `title`, `subheader`, `avatar`, `action` | `color: "primary"` |
-| `Paper` | `import { Paper } from "forest-ui"` | `variant: "elevation" \| "outlined"`, `elevation` (0–24), `square` | — |
-
-#### Feedback
-
-| Component | Import | Variants / Key Props | Default Props |
-|-----------|--------|----------------------|---------------|
-| `Alert` + `AlertTitle` | `import { Alert, AlertTitle } from "forest-ui"` | `severity: "success" \| "info" \| "warning" \| "error"`, `variant: "filled" \| "outlined" \| "standard"`, `color`, `icon`, `action`, `onClose` | — |
-| `Dialog` family | `import { Dialog, DialogTitle, DialogContent, DialogActions, DialogContentText } from "forest-ui"` | `open` (required), `onClose`, `fullWidth`, `maxWidth: "xs" \| "sm" \| "md" \| "lg" \| "xl" \| false`, `fullScreen`, `scroll: "paper" \| "body"` | — |
-| `Backdrop` | `import { Backdrop } from "forest-ui"` | `open` (required), `invisible`, `onClick` | — |
-| `LinearProgress` | `import { LinearProgress } from "forest-ui"` | `variant: "indeterminate" \| "determinate" \| "buffer" \| "query"`, `value` (0–100), `color` | — |
-| `CircularProgress` | `import { CircularProgress } from "forest-ui"` | `variant: "indeterminate" \| "determinate"`, `value` (0–100), `color`, `size`, `thickness` | — |
-| `Skeleton` | `import { Skeleton } from "forest-ui"` | `variant: "text" \| "circular" \| "rectangular" \| "rounded"`, `animation: "pulse" \| "wave" \| false`, `width`, `height` | — |
-| `Modal` | `import { Modal } from "forest-ui"` | `open` (required), `onClose`, `children`, `keepMounted`, `disableAutoFocus`, `disableEnforceFocus`, `disableEscapeKeyDown`, `disablePortal`, `disableScrollLock` | — |
-| `Popover` | `import { Popover } from "forest-ui"` | `open` (required), `anchorEl`, `onClose`, `anchorOrigin`, `transformOrigin`, `elevation` | — |
-| `Snackbar` | `import { Snackbar } from "forest-ui"` | `open`, `message`, `autoHideDuration`, `onClose`, `action`, `anchorOrigin: { vertical, horizontal }` | — |
-
-#### Navigation
-
-| Component | Import | Variants / Key Props | Default Props |
-|-----------|--------|----------------------|---------------|
-| `Breadcrumbs` | `import { Breadcrumbs } from "forest-ui"` | `separator`, `maxItems`, `itemsAfterCollapse`, `itemsBeforeCollapse` | — |
-| `Link` | `import { Link } from "forest-ui"` | `href`, `underline: "none" \| "hover" \| "always"`, `color`, `variant` | — |
-| `Menu` + `MenuList` | `import { Menu, MenuList } from "forest-ui"` | Menu: `open` (required), `anchorEl`, `onClose`; use with `MenuItem` from Select | — |
-| `Pagination` | `import { Pagination } from "forest-ui"` | `count`, `page`, `onChange`, `variant: "text" \| "outlined"`, `shape: "circular" \| "rounded"`, `size: "small" \| "medium" \| "large"`, `color`, `showFirstButton`, `showLastButton` | — |
-| `Stepper` family | `import { Stepper, Step, StepLabel } from "forest-ui"` | `activeStep`, `orientation: "horizontal" \| "vertical"`, `alternativeLabel`, `nonLinear`; Step: `completed`, `disabled`; StepLabel: `optional`, `error` | — |
-| `Tabs` + `Tab` | `import { Tabs, Tab } from "forest-ui"` | Tabs: `value`, `onChange`, `variant: "standard" \| "scrollable" \| "fullWidth"`, `orientation`, `centered`; Tab: `label`, `icon`, `iconPosition`, `disabled`, `value` | — |
-| `SidebarNav` | `import { SidebarNav, SidebarItem, useSidebar } from "forest-ui"` | `open`, `onOpenChange`, `behavior: "permanent" \| "hover"`, `expandedWidth`, `collapsedWidth`, `showToggle`, `header`, `footer` | `expandedWidth=240`, `collapsedWidth=48`, `behavior="permanent"` |
-| `SidebarItem` | (same import) | `icon` (required), `label` (required), `endAdornment`, `selected`, `onClick`, `disabled` | — |
-
-#### Charts
-
-Requires `@mui/x-charts` peer dependency. Chart colors are automatically applied from the theme's 12-color series palette — no manual color assignment needed.
-
-| Component | Import | Variants / Key Props | Default Props |
-|-----------|--------|----------------------|---------------|
-| `BarChart` | `import { BarChart } from "forest-ui"` | `series` (supports `variant: "solid" \| "striped"` per series), `colors`, `xAxis`, `yAxis`, `width`, `height` | `grid horizontal`, `borderRadius=4`, highlight/fade on hover |
-| `LineChart` | `import { LineChart } from "forest-ui"` | `series`, `colors`, `xAxis`, `yAxis`, `width`, `height` | `curve="linear"`, `strokeWidth=3`, `grid horizontal`, highlight/fade on hover |
-| `PieChart` | `import { PieChart } from "forest-ui"` | `series` (data: `{ id, value, label, color? }[]`), `colors`, `width`, `height` | highlight/fade on hover |
-| `useChartColors` | `import { useChartColors } from "forest-ui"` | `useChartColors(count)` — returns `string[]` of theme chart series colors, sliced to the requested count (max 12) | — |
-
----
-
-## 4. Code Patterns
-
-### Form Layout
-
-```tsx
-import { TextField, Button, Select, MenuItem, Checkbox } from "@matteoaliano/forest-ui";
-import Box from "@mui/material/Box"; // Box, Stack, Grid are OK from MUI
-
-function ContactForm() {
-  return (
-    <Box sx={{ display: "flex", flexDirection: "column", gap: 3 }}>
-      <TextField label="Name" fullWidth />
-      <TextField label="Email" type="email" fullWidth />
-      <Select label="Subject" fullWidth>
-        <MenuItem value="support">Support</MenuItem>
-        <MenuItem value="sales">Sales</MenuItem>
-      </Select>
-      <Button variant="contained" type="submit">
-        Send
-      </Button>
-    </Box>
-  );
-}
-```
-
-### MultiSelect with Select All
-
-```tsx
-import { useState } from "react";
-import { MultiSelect } from "@matteoaliano/forest-ui";
-
-const options = [
-  { label: "Bug", value: "bug" },
-  { label: "Enhancement", value: "enhancement" },
-  { label: "New Feature", value: "feature" },
-];
-
-function CategoryFilter() {
-  const [selected, setSelected] = useState<string[]>([]);
-  return (
-    <MultiSelect
-      label="Category"
-      options={options}
-      value={selected}
-      onChange={setSelected}
-    />
-  );
-}
-```
-
-### Data Table
-
-```tsx
-import {
-  Table, TableContainer, TableHead, TableBody, TableRow, TableCell,
-} from "@matteoaliano/forest-ui";
-
-function UsersTable({ users }) {
-  return (
-    <TableContainer>
-      <Table>
-        <TableHead>
-          <TableRow>
-            <TableCell>Name</TableCell>
-            <TableCell>Email</TableCell>
-          </TableRow>
-        </TableHead>
-        <TableBody>
-          {users.map((u) => (
-            <TableRow key={u.id}>
-              <TableCell>{u.name}</TableCell>
-              <TableCell>{u.email}</TableCell>
-            </TableRow>
-          ))}
-        </TableBody>
-      </Table>
-    </TableContainer>
-  );
-}
-```
-
-### DataGrid
-
-```tsx
-import { DataGrid, type GridColDef } from "@matteoaliano/forest-ui";
-
-const columns: GridColDef[] = [
-  { field: "id", headerName: "ID", width: 70 },
-  { field: "name", headerName: "Name", flex: 1 },
-  { field: "email", headerName: "Email", flex: 1 },
-];
-
-function UsersGrid({ rows }) {
-  return <DataGrid rows={rows} columns={columns} />;
-}
-```
-
-### Feedback Pattern
-
-```tsx
-import { Alert, AlertTitle, Snackbar } from "@matteoaliano/forest-ui";
-
-// Inline feedback
-<Alert severity="error">
-  <AlertTitle>Error</AlertTitle>
-  Something went wrong.
-</Alert>
-
-// Toast notification
-<Snackbar open={open} autoHideDuration={4000} onClose={handleClose}>
-  <Alert severity="success" variant="filled">Saved!</Alert>
-</Snackbar>
-```
-
-### Confirmation Dialog
-
-```tsx
-import { Dialog, DialogTitle, DialogContent, DialogActions, DialogContentText, Button } from "@matteoaliano/forest-ui";
-
-function ConfirmDialog({ open, onClose, onConfirm }) {
-  return (
-    <Dialog open={open} onClose={onClose}>
-      <DialogTitle>Confirm</DialogTitle>
-      <DialogContent>
-        <DialogContentText>Are you sure?</DialogContentText>
-      </DialogContent>
-      <DialogActions>
-        <Button variant="outlined" onClick={onClose}>Cancel</Button>
-        <Button onClick={onConfirm}>Confirm</Button>
-      </DialogActions>
-    </Dialog>
-  );
-}
-```
-
-### Sidebar Navigation
-
-```tsx
-import { SidebarNav, SidebarItem } from "@matteoaliano/forest-ui";
-import DashboardOutlined from "@mui/icons-material/DashboardOutlined";
-import SettingsOutlined from "@mui/icons-material/SettingsOutlined";
-
-function AppShell() {
-  const [open, setOpen] = useState(true);
-  return (
-    <SidebarNav open={open} onOpenChange={setOpen}>
-      <SidebarItem icon={<DashboardOutlined />} label="Dashboard" selected />
-      <SidebarItem icon={<SettingsOutlined />} label="Settings" />
-    </SidebarNav>
-  );
-}
-```
-
-### Charts
-
-Colors are automatically assigned from the theme's 12-series palette. Override with the `colors` prop if needed.
-
-```tsx
-import { BarChart, LineChart, PieChart, useChartColors } from "@matteoaliano/forest-ui";
-
-// Bar chart with striped variant
-<BarChart
-  series={[
-    { data: [10, 20, 30], label: "Current", variant: "solid" },
-    { data: [8, 15, 25], label: "Previous", variant: "striped" },
-  ]}
-  xAxis={[{ data: ["Jan", "Feb", "Mar"], scaleType: "band" }]}
-  height={300}
-/>
-
-// Line chart
-<LineChart
-  series={[{ data: [10, 20, 30], label: "Revenue" }]}
-  xAxis={[{ data: ["Jan", "Feb", "Mar"], scaleType: "band" }]}
-  height={300}
-/>
-
-// Pie chart
-<PieChart
-  series={[{ data: [
-    { id: 0, value: 40, label: "Desktop" },
-    { id: 1, value: 30, label: "Mobile" },
-    { id: 2, value: 30, label: "Tablet" },
-  ]}]}
-  height={300}
-/>
-
-// Access chart colors programmatically
-const colors = useChartColors(3); // ["#7c3aed", "#e36c09", "#5fe0d0"]
-```
-
----
-
-## 5. Storybook
-
-All component stories include interactive argTypes controls for testing props in Storybook. Use the Controls panel to test different variants.
-
-### Adding Controls to Stories
-
-When adding argTypes to new stories, follow this pattern:
-
-```tsx
-const meta: Meta<typeof Button> = {
-  component: Button,
-  argTypes: {
-    variant: {
-      control: "select",
-      options: ["contained", "outlined", "text"],
-    },
-    color: {
-      control: "select",
-      options: ["primary", "secondary", "error", "warning", "success", "info"],
-    },
-    disabled: { control: "boolean" },
-  },
-};
-```
-
-**Control types:**
-- `control: "select"` with `options: [...]` — for enum values
-- `control: "boolean"` — for boolean flags
-- `control: "number"` — for numeric values
-- `control: "text"` — for string values
-
-See `Button.stories.tsx` for the full reference pattern.
-
----
-
-## 6. Anti-Patterns
-
-```tsx
-// ❌ WRONG: importing from @mui/material
-import Button from "@mui/material/Button";
-
-// ❌ WRONG: hardcoded colors
-<Box sx={{ backgroundColor: "#7f56d9" }} />
-
-// ❌ WRONG: hardcoded spacing
-<Box sx={{ padding: "16px" }} />
-
-// ❌ WRONG: forgetting ForestProvider
-ReactDOM.render(<App />, root); // theme won't apply
-
-// ❌ WRONG: using filled (default) icons
-import CloseIcon from "@mui/icons-material/Close";
-
-// ✅ CORRECT: always use Outlined variant
-import CloseIcon from "@mui/icons-material/CloseOutlined";
-
-// ✅ CORRECT: use theme tokens
-<Box sx={{ backgroundColor: "primary.main", p: 4 }} />
-
-// ❌ WRONG: manually building multi-select with Select + Checkbox
-// ✅ CORRECT: use the MultiSelect component
-<MultiSelect options={options} value={value} onChange={setValue} />
-```
-
-> **Note:** Layout primitives like `Box`, `Stack`, `Grid`, and `Container` should still be imported from `@mui/material` — Forest UI does not re-export these because they have no custom styling.
-
----
-
-## 6. TypeScript Props
-
-Every component exports its props type:
-
-```tsx
-import { Button, type ButtonProps } from "@matteoaliano/forest-ui";
-
-interface MyButtonProps extends ButtonProps {
-  analyticsId: string;
-}
-```