Standardize Path Aliases

Overview

The codebase uses inconsistent path aliases (@/ vs @components/), which can lead to confusion and import errors.

Problem

Some files use @components/ alias:

// src/components/ui/button.tsx
import { cn } from "@components/lib/utils"

While others use @/ alias:

// src/lib/monthly.ts
import { supabase } from "@/lib/supabase";

Configuration Check

Looking at tsconfig.json, both aliases are likely configured:

{
  "compilerOptions": {
    "paths": {
      "@/*": ["src/*"],
      "@components/*": ["src/*"]
    }
  }
}

Issues

1. Inconsistency: Different developers may use different patterns
2. Redundancy: Both aliases point to the same location
3. Confusion: New team members don’t know which to use
4. Refactoring Difficulty: Search/replace is harder with multiple patterns

Solution

Standardize on a single path alias (@/) and update all files to use it consistently.

1. Verify tsconfig.json

Ensure the configuration supports @/ for all imports:

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"]
    }
  }
}

2. Update Affected Files

Files currently using @components/:

• src/components/ui/button.tsx
• src/components/ui/avatar.tsx
• src/components/ui/badge.tsx
• src/components/ui/card.tsx
• All other UI components

Change from:

import { cn } from "@components/lib/utils"

To:

import { cn } from "@/lib/utils"

3. Migration Script

A simple find/replace script to update all files:

# Find all TypeScript/TSX files and replace @components/ with @/
find src -type f \( -name "*.ts" -o -name "*.tsx" \) -exec sed -i '' 's/@components\//@\//g' {} +

4. Component-Specific Aliases (Optional)

If desired, add specific aliases for common import patterns:

{
  "compilerOptions": {
    "paths": {
      "@/*": ["src/*"],
      "@ui/*": ["src/components/ui/*"],
      "@lib/*": ["src/lib/*"],
      "@types/*": ["src/types/*"]
    }
  }
}

Benefits

• ✅ Consistency: All imports use the same pattern
• ✅ Simplicity: One alias to remember
• ✅ Tooling: Better IDE autocomplete support
• ✅ Maintainability: Easier to search and replace

Implementation Checklist

• Verify tsconfig.json path configuration
• Update all UI components to use @/ instead of @components/
• Search for any other non-standard aliases
• Update documentation (if any) to reflect the standard
• Consider adding ESLint rule to enforce alias usage

Related Files

• tsconfig.json
• src/components/ui/*.tsx
• Any files importing from lib/utils.ts