|
| 1 | +# Code Review Checklist |
| 2 | + |
| 3 | +Checklist for code reviews in the LDLS monorepo (`ui-react` and `ui-rnative`). |
| 4 | +Check the code diff from main |
| 5 | + |
| 6 | +--- |
| 7 | + |
| 8 | +Output summary in a table that's easy to understand and read. |
| 9 | +Show details of the errors if there are only fews, otherwise show the number of errors by category |
| 10 | + |
| 11 | +## General |
| 12 | + |
| 13 | +- [ ] Code works correctly and handles edge cases |
| 14 | +- [ ] No obvious bugs, security issues, or hardcoded secrets |
| 15 | +- [ ] Code is readable with descriptive names |
| 16 | +- [ ] No code duplication |
| 17 | + |
| 18 | +## TypeScript |
| 19 | + |
| 20 | +- [ ] Top-level functions are typesafe (except JSX components) |
| 21 | +- [ ] No `any` types |
| 22 | +- [ ] Typecheck for affected nx libs/apps passes |
| 23 | + |
| 24 | +## Lint |
| 25 | + |
| 26 | +- [ ] Lint for affected nx libs/apps passes |
| 27 | + |
| 28 | +## Components |
| 29 | + |
| 30 | +- [ ] Components use **PascalCase** folders (`Button/`) |
| 31 | +- [ ] Other files use **dash-case** (`use-controllable-state.ts`) |
| 32 | +- [ ] Files organized: `Component.tsx`, `Component.test.tsx`, `Component.stories.tsx`, `Component.mdx`, `index.ts` |
| 33 | +- [ ] Types are defined in a separate file `types.ts` of the component, with clear, consistent description and default if component props has a default |
| 34 | +- [ ] `index.ts` expose the component, compound components and types |
| 35 | +- [ ] Namings are explicit, makes sense and follow standards |
| 36 | + |
| 37 | +## Design System React |
| 38 | + |
| 39 | +- [ ] Uses design tokens from design-core tailwind preset for web |
| 40 | + - Typography: `body-1`, `heading-2` (not `font-bold`, `text-sm`) |
| 41 | + - Colors: `text-base`, `bg-accent` (not `text-gray-500`) |
| 42 | + - Sizes: token values only (no `w-[108px]`) |
| 43 | +- [ ] Uses `cn()` for conditional classes |
| 44 | +- [ ] Uses `cva` for variant composition |
| 45 | + |
| 46 | +## Design System React-Native |
| 47 | + |
| 48 | +- [ ] Uses design tokens from design-core theme js object preset for react-native |
| 49 | + - theme.colors.bg.accent |
| 50 | + - theme.spacings.s20 |
| 51 | + - ... |
| 52 | +- [ ] Uses `cn()` for conditional classes |
| 53 | +- [ ] Uses `sva` for variant composition |
| 54 | + |
| 55 | +## Storybook |
| 56 | + |
| 57 | +- [ ] Default story named `Base` (not `Default` or `Primary`) |
| 58 | +- [ ] Showcase stories use `{Property}Showcase` pattern if necessary |
| 59 | +- [ ] Stories have `layout: 'centered'` and `backgrounds: { default: 'light' }` |
| 60 | + |
| 61 | +--- |
| 62 | + |
| 63 | +## Platform-Specific |
| 64 | + |
| 65 | +| Check | React (`ui-react`) | React Native (`ui-rnative`) | |
| 66 | +|-------|-------------------|----------------------------| |
| 67 | +| Test ID | `data-testid` | `testID` | |
| 68 | +| Test framework | Vitest | Jest | |
| 69 | +| Test imports | `import { vi } from 'vitest'` | `import { jest } from '@jest/globals'` | |
| 70 | +| Click handler | `onClick` | `onPress` | |
| 71 | +| Mock function | `vi.fn()` | `jest.fn()` | |
| 72 | + |
| 73 | +--- |
| 74 | + |
0 commit comments