|
| 1 | +# AGENTS.md |
| 2 | + |
| 3 | +## Quick ref |
| 4 | + |
| 5 | +```shell |
| 6 | +npm install # setup (requires Node.js ≥ 22 for `node --run`) |
| 7 | +node --run build # library → lib/ |
| 8 | +node --run typecheck # tsc --build |
| 9 | +node --run check # biome check (warnings are errors) |
| 10 | +node --run eslint # eslint --max-warnings 0 |
| 11 | +node --run eslint:fix # eslint --fix |
| 12 | +node --run format # oxfmt |
| 13 | +node --run test # vitest (browser + node) |
| 14 | +node --run test -- <path> # single test, e.g. test/browser/rowHeight.test.ts |
| 15 | +``` |
| 16 | + |
| 17 | +## Architecture |
| 18 | + |
| 19 | +react-data-grid is a data grid with **zero `dependencies`** (peer dependency: React 19.2+). It uses CSS Grid for layout and implements row/column virtualization in JS. |
| 20 | + |
| 21 | +```text |
| 22 | +src/ |
| 23 | + index.ts # public API surface; all exports go through here |
| 24 | + DataGrid.tsx # main <DataGrid> component (generic: <R, SR, K>) |
| 25 | + TreeDataGrid.tsx # wraps DataGrid, adds row grouping (role="treegrid") |
| 26 | + types.ts # shared type definitions (e.g. Column, CalculatedColumn, render props, events) |
| 27 | + hooks/ # shared custom React hooks |
| 28 | + utils/ # pure utilities (e.g. keyboard, DOM, events, colSpan, style) |
| 29 | + style/ # build-time CSS via ecij tagged templates; layers.css declares @layer order |
| 30 | + cellRenderers/ # default cell renderers (e.g. checkbox, toggleGroup, value) |
| 31 | + editors/ # default editors (renderTextEditor) |
| 32 | +test/ |
| 33 | + browser/ # vitest browser-mode tests (Playwright, Chromium + Firefox) |
| 34 | + node/ # vitest SSR tests (Node.js) |
| 35 | + visual/ # vitest visual regression tests (CI-only — never run locally) |
| 36 | +website/ # demo site (Vite + TanStack Router) |
| 37 | +``` |
| 38 | + |
| 39 | +## Conventions |
| 40 | + |
| 41 | +- **Public API** — all exports flow through `src/index.ts`. Keep `README.md` in sync with user-facing changes. |
| 42 | +- **Docs** — keep `AGENTS.md` in sync with tooling, conventions, or architectural changes. |
| 43 | +- **Default renderers** — `DataGridDefaultRenderersContext` allows overriding default renderers (`renderCheckbox`, `renderSortStatus`, `renderRow`, `renderCell`, `noRowsFallback`) without prop-drilling. |
| 44 | +- **TypeScript strict** with `exactOptionalPropertyTypes`, `verbatimModuleSyntax`, `erasableSyntaxOnly`. Distinguish missing properties from `undefined` values. |
| 45 | +- **`Maybe<T>`** (`T | undefined | null`) — used for all nullable column/render props. Do not use bare `T | undefined`. |
| 46 | +- **`NoInfer<>`** — wrap callback parameters to prevent reverse type inference into component generics. |
| 47 | +- **CSS layers** — all styles live in nested `@layer rdg.<Name>` sub-layers (e.g. `rdg.Cell`, `rdg.Row`; declared in `src/style/layers.css`). Use `ecij` `css` tagged templates (build-time extraction, not runtime CSS-in-JS). Co-locate styles in component files; `src/style/` is for shared styles. |
| 48 | +- **Dual classnames** — components apply both a semantic class (`rdg-cell`) and a generated hash. Preserve both. |
| 49 | +- **Light/dark mode** — handled via CSS `light-dark()` + `color-scheme`, not JS. |
| 50 | +- **Accessibility first** — ARIA attributes (e.g. `aria-colindex`, `aria-rowindex`, `aria-selected`, roles) are required. Tests query by role. |
| 51 | +- **Formatting** — oxfmt (not Prettier). **Linting** — Biome + ESLint (both must pass with zero warnings). |
| 52 | +- **Build** — Rolldown bundles library to `lib/`; `ecij` plugin prefixes classes with `rdg-{version}-` (dots→dashes) to avoid cross-version conflicts. |
| 53 | + |
| 54 | +## Testing |
| 55 | + |
| 56 | +- Browser tests use `vitest/browser` + Playwright. `test/setupBrowser.ts` configures `page.render()` via `vitest-browser-react` and registers custom locators via `locators.extend()` — prefer `page.getGrid()`, `page.getCell({ name })`, `page.getRow()`, `page.getHeaderCell()`, `page.getSelectedCell()`, etc. over raw `page.getByRole()`. |
| 57 | +- Test helpers in `test/browser/utils.tsx`: `setup()`, `getRowWithCell()`, `getCellsAtRowIndex()`, `validateCellPosition()`, `scrollGrid()`, `tabIntoGrid()`, `testCount()`, `testRowCount()`. |
| 58 | +- `test/failOnConsole.ts` fails tests on unexpected console warnings/errors. |
| 59 | +- **Never run visual regression tests locally** — screenshots are CI-only and environment-dependent. |
| 60 | + |
| 61 | +## Validation |
| 62 | + |
| 63 | +Run before submitting changes: `node --run typecheck`, `node --run check`, `node --run eslint`, `node --run format`, `node --run test`. |
0 commit comments