senke/veza
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions
veza/apps/web/docs/CUSTOM_COMPONENTS_AUDIT.md
senke d16f9ed1c5 consistency: audit custom components (Card, Input, Select) (Action 9.2.1.5) 
- Audited Card, Input, and Select component implementations
- Identified design system, legacy, and custom components
- Found 4 high-priority issues:
  - UserCard and LicenceCard using invalid variant prop
  - FormField Input using Tailwind default colors
  - FormField Select using native HTML select
- Documented ~8 custom card-like components
- Created comprehensive audit report: apps/web/docs/CUSTOM_COMPONENTS_AUDIT.md
- Includes migration priorities and specific files requiring changes
2026-01-16 01:30:54 +01:00

7.3 KiB
Raw Blame History

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