veza/apps/web/docs/CUSTOM_COMPONENTS_AUDIT.md

# Custom Components Audit (Non-Button)

**Date**: 2025-01-27  
**Action**: 9.2.1.5 - Audit other custom components (not just buttons)  
**Purpose**: Identify all custom implementations of Card, Input, Select, and other components that should be replaced with design system components

## Summary

- **Design System Components Location**: `apps/web/src/components/ui/`
- **Legacy Components Location**: `apps/web/src/components/base/`
- **Total Card/Input imports**: 230 matches across 179 files

## Component Inventory

### 1. Card Component

#### Design System Card
- **Location**: `apps/web/src/components/ui/card.tsx`
- **Status**: ✅ Current design system component
- **API**: Simple className-based, no variants
- **Sub-components**: CardHeader, CardTitle, CardDescription, CardContent, CardFooter

#### Legacy Card Components
- **Location**: `apps/web/src/components/base/Card.tsx`
- **Status**: ⚠️ Legacy component using CSS classes
- **API**: Variant-based (`default`, `manga`, `neon`, `nature`, `elevated`, `glass`)
- **Usage**: 
  - `pages/DesignSystemDemo.tsx` (demo page only)
  - Exported in `components/index.ts` (type exports)

#### Custom Card-Like Components
1. **StatCard** (`components/dashboard/StatCard.tsx`)
   - ✅ Uses design system Card correctly
   - Custom styling for stats display (acceptable)

2. **UserCard** (`components/user/UserCard.tsx`)
   - ⚠️ Uses design system Card but with invalid `variant` prop
   - Line 22: `variant="default"` (doesn't exist in design system Card)
   - Custom gradient overlay (line 26)
   - **Recommendation**: Remove `variant` prop, use className only

3. **LicenceCard** (`components/marketplace/LicenceCard.tsx`)
   - ⚠️ Uses design system Card but with invalid `variant` prop
   - Line 22: `variant={selected ? 'gaming' : 'default'}` (doesn't exist)
   - **Recommendation**: Remove `variant` prop, use className for selected state

4. **ProductCard** (`components/marketplace/ProductCard.tsx`)
   - Needs verification

5. **AchievementCard** (`components/gamification/AchievementCard.tsx`)
   - Needs verification

6. **EquipmentCard** (`components/inventory/EquipmentCard.tsx`)
   - Needs verification

7. **CourseCard** (`components/education/CourseCard.tsx`)
   - Needs verification

8. **GroupCard** (`components/social/groups/GroupCard.tsx`)
   - Needs verification

#### Backup Card
- **Location**: `apps/web/src/components/ui.backup/card.tsx`
- **Status**: ⚠️ Old backup version (should be removed)

### 2. Input Component

#### Design System Input
- **Location**: `apps/web/src/components/ui/input.tsx`
- **Status**: ✅ Current design system component
- **API**: Standard HTML input props with Kodo design system styling

#### Legacy Input Components
1. **Base Input** (`components/base/Input.tsx`)
   - **Status**: ⚠️ Legacy component (no styling, just props wrapper)
   - **Usage**: Exported in `components/index.ts` (type exports)
   - **Note**: Minimal wrapper, may be acceptable

2. **FormField Input** (`components/ui/FormField.tsx`)
   - **Status**: ⚠️ Custom Input component with Tailwind default colors
   - Line 134-153: Custom Input with `border-gray-300`, `focus:ring-blue-500`, `border-red-500`
   - **Recommendation**: Replace with design system Input component

#### Custom Input Components
1. **AuthInput** (`features/auth/components/AuthInput.tsx`)
   - **Status**: ⚠️ Custom input wrapper
   - **Note**: May be acceptable if it wraps design system Input

2. **ChatInput** (`features/chat/components/ChatInput.tsx`)
   - **Status**: ⚠️ Custom chat input
   - **Note**: Specialized component, may need custom styling

#### Backup Input
- **Location**: `apps/web/src/components/ui.backup/input.tsx`
- **Status**: ⚠️ Old backup version (should be removed)

### 3. Select Component

#### Design System Select
- **Location**: `apps/web/src/components/ui/select.tsx`
- **Status**: ✅ Current design system component
- **API**: Advanced select with search, multi-select, groups
- **Dependencies**: Uses design system Button and Input internally

#### Legacy Select Components
1. **FormField Select** (`components/ui/FormField.tsx`)
   - **Status**: ⚠️ Custom Select component
   - Line 183-211: Custom Select with native HTML select
   - **Recommendation**: Replace with design system Select component

#### Backup Select
- **Location**: `apps/web/src/components/ui.backup/select.tsx`
- **Status**: ⚠️ Old backup version (should be removed)

### 4. Other Custom Components

#### Custom Components with Inline Styles
1. **Search Component** (`components/search/Search.tsx`)
   - Line 305: Custom dropdown with `className="absolute z-50 mt-2 w-full rounded-md border bg-popover shadow-lg"`
   - **Recommendation**: Use design system Dropdown component

## Statistics

### Card Component Usage
- **Design System Card**: Used in ~50+ files
- **Legacy Card**: Used in 1 file (demo page)
- **Custom Card-like**: ~8 specialized components
- **Issues**: 2 components using invalid `variant` prop

### Input Component Usage
- **Design System Input**: Used in ~100+ files
- **Legacy Input**: Minimal usage (type exports)
- **Custom Input**: 2 specialized components (AuthInput, ChatInput)
- **Issues**: 1 component (FormField) using Tailwind default colors

### Select Component Usage
- **Design System Select**: Used in ~30+ files
- **Custom Select**: 1 component (FormField) using native HTML select
- **Issues**: 1 component should use design system Select

## Migration Priority

### High Priority
1. **FormField Input** - Replace with design system Input (removes Tailwind defaults)
2. **FormField Select** - Replace with design system Select
3. **UserCard** - Remove invalid `variant` prop
4. **LicenceCard** - Remove invalid `variant` prop

### Medium Priority
1. **Legacy Card component** - Remove or migrate demo page
2. **Backup components** - Remove `ui.backup/` directory
3. **Custom card-like components** - Verify they use design system Card correctly

### Low Priority
1. **Specialized components** (AuthInput, ChatInput) - Review if custom styling is needed
2. **Base Input** - Review if wrapper is needed or can be removed

## Recommendations

### Immediate Actions
1. **Remove invalid variant props** from UserCard and LicenceCard
2. **Replace FormField Input** with design system Input
3. **Replace FormField Select** with design system Select
4. **Remove backup components** in `ui.backup/` directory

### Future Actions
1. **Audit all card-like components** to ensure they use design system Card
2. **Create ESLint rules** to prevent invalid props on design system components
3. **Document component usage** guidelines

## Files Requiring Changes

### High Priority
- `apps/web/src/components/ui/FormField.tsx` - Replace Input and Select
- `apps/web/src/components/user/UserCard.tsx` - Remove variant prop
- `apps/web/src/components/marketplace/LicenceCard.tsx` - Remove variant prop

### Medium Priority
- `apps/web/src/pages/DesignSystemDemo.tsx` - Migrate from legacy Card
- `apps/web/src/components/index.ts` - Remove legacy type exports

### Low Priority
- `apps/web/src/components/ui.backup/` - Remove entire directory
- `apps/web/src/components/base/Input.tsx` - Review and potentially remove

## Next Steps

1. ✅ Audit complete (Action 9.2.1.5)
2. ⏳ Replace custom components with design system components (Action 9.2.1.6)
3. ⏳ Create ESLint rules to enforce component usage
4. ⏳ Create component usage guide