Cal Design System Component Audit Codemod
This codemod classifies React components in TypeScript/TSX files as either:
- design-system-component: Components in packages/ui/components (standard design system components)
- custom-ui-component: Domain-specific UI components with custom styling
- other: Route files, providers, or non-UI components (no comment added)
What It Does
The codemod scans .tsx and .ts files, detects React components, and inserts classification comments above component declarations:
typescript
Configuration
Design System Hints
Edit constants in scripts/codemod.ts:
- DS_FOLDER_HINTS: Folder patterns for design system components
- DS_IMPORT_HINTS: Import patterns from design system packages
- DS_PRIMITIVE_NAMES: Primitive component names (Button, Card, etc.)
- DOMAIN_KEYWORDS: Domain-specific keywords (booking, event, etc.)
Usage
Run on Target Files
bash
Example:
bash
Run Tests
bash
Or:
bash
Update Test Snapshots
bash
Classification Rules
Design System Component
A component is classified as design-system-component if:
- File path contains packages/ui/components/ (+5 points)
- Component name in DS_PRIMITIVE_NAMES (+3 points)
- Imports from @calcom/ui/components/ (+3 points)
- Uses forwardRef (+2 points)
- Has presentational props (variant, size, etc.) (+2 points)
Subtracted if:
- Has domain imports (-4 points)
- Has data fetching (-3 points)
- Has domain props (-3 points)
Classify if score >= 6
Custom UI Component
A component is classified as custom-ui-component if:
- Has domain props (booking, event, etc.) (+3 points)
- File path in modules/ or features/ (+2 points)
- Uses 4+ raw DOM tags (+2 points)
- Uses zero DS primitives (+3 points)
- Has styling (className/style) (+1 point)
Classify if score >= 5
Excluded (No Comment)
- Route files (page.tsx, layout.tsx, route.ts)
- Provider/Container components with data fetching
- Barrel export files (index.ts with only exports)
- Type-only files
- Pure utility functions
- Pure lazy wrappers
Features
- Pre-filtering: Skips non-UI files early (barrel exports, type-only, utilities)
- Idempotent: Won't add duplicate comments if already present
- Preserves formatting: Maintains existing code style
- Comprehensive detection: Handles function, const, forwardRef, and class components
Test Cases
See tests/fixtures/ for test cases covering:
- Design system components
- Custom UI components
- Barrel exports (skipped)
- Type-only files (skipped)