zui/docs/CODE_REVIEW_CHECKLIST.md

Code Review Checklist

Use this checklist during code reviews to ensure high standards of readability, maintainability, and performance.

1. Readability

• Naming: Variables, functions, and components use descriptive, consistent names (camelCase for functions/variables, PascalCase for components).
• JSDoc: All public APIs have complete JSDoc comments with @param, @returns, and @example tags.
• Line Length: No line exceeds 120 characters; wrap long lines for readability.
• Comments: Explain why something is done, not just what is done. Avoid redundant comments.
• Whitespace: Consistent spacing and indentation (2 spaces for TypeScript/JSX).

2. Maintainability

• Component Structure: Large components are split into smaller, focused sub‑components.
• Hooks: Custom hooks encapsulate reusable logic and are named with use prefix.
• Utility Functions: Pure functions live in src/lib/ and are exported for reuse.
• Type Safety: All function signatures include explicit TypeScript types; no any usage.
• Import Order: Core → Library → Project → Relative imports; alphabetical within groups.

3. Performance

• Memoization: Expensive calculations use useMemo; event handlers use useCallback.
• Lazy Loading: Heavy modules are loaded via import(); code splitting is configured in Vite.
• Virtualization: Large lists use react-window or similar for efficient rendering.
• State Granularity: State updates target only the minimal portion of state; avoid unnecessary re‑renders.
• Bundle Size: No unused dependencies; assets are compressed (gzip/brotli) in production.

4. Accessibility & Security

• ARIA: Semantic HTML and ARIA attributes are present for interactive elements.
• Input Validation: User inputs are validated before processing; no hard‑coded secrets.
• Error Handling: Errors are caught and logged appropriately; user‑friendly messages are shown.

5. Testing

• Unit Tests: Cover all new logic with tests; aim for ≥ 80 % coverage on critical paths.
• Integration Tests: Verify that components interact correctly with state/store.
• Test Naming: Test files end with .test.tsx and describe the behavior being tested.

6. Documentation Links

• Architecture Overview: [ARCHITECTURE.md]
• Performance Plan: [PERFORMANCE_IMPROVEMENTS.md]
• Junior Developer Quickstart: [QUICKSTART_FOR_JUNIORS.md]
• Contribution Guide: [CONTRIBUTING.md]

Reviewers should mark any failing items as [ ] and request changes before approving.