Overview

Migrate the most frequently used MUI components (Button, TextField, Tooltip) to shadcn/ui equivalents.

Parent Issue: #18993
Estimated Duration: 3-4 days
Priority: High
Depends on: #18994 (Setup)

Component Usage Analysis

• Button: 30 usages across the codebase
• TextField: 47 usages (most used component)
• Tooltip: 37 usages
• Total: 107 component instances to migrate

Tasks

Button Migration

• Generate shadcn Button component
• Create variant mappings (primary, secondary, outlined, text)
• Update size mappings (small, medium, large)
• Migrate loading state handling
• Update icon button patterns
• Replace 30 Button instances across codebase

TextField Migration

• Generate shadcn Input and Textarea components
• Create form field wrapper component
• Migrate validation state styling
• Update error message handling
• Handle multiline text fields
• Replace 47 TextField instances across codebase

Tooltip Migration

• Generate shadcn Tooltip component
• Migrate placement/positioning logic
• Update trigger event handling
• Ensure accessibility compliance
• Replace 37 Tooltip instances across codebase

Files to Update

High Priority Files (>5 usages)

• src/components/Filter/Filter.tsx - Multiple components
• src/components/OrganizationAutocomplete/OrganizationAutocomplete.tsx - TextField, CircularProgress
• src/components/InputGroup/InputGroup.stories.tsx - Button, TextField
• Form-related components throughout src/pages/

Component Stories

• Update Storybook stories for migrated components
• Create new component documentation
• Test all variants and states

Implementation Strategy

1. Generate Components: Use shadcn CLI to generate base components
2. Create Wrappers: Build compatibility wrappers for existing APIs
3. Gradual Migration: Replace components file by file
4. Test Coverage: Ensure all variants work correctly
5. Remove Imports: Clean up MUI imports after migration

Acceptance Criteria

• All Button instances use shadcn Button component
• All TextField instances use shadcn Input/Textarea
• All Tooltip instances use shadcn Tooltip
• No visual regressions in component appearance
• All interactive states work correctly (hover, focus, disabled)
• Accessibility features maintained or improved
• Storybook stories updated and functional
• TypeScript types are correct
• All tests pass

Component API Compatibility

Button Props Mapping

// MUI -> shadcn
variant: "contained" | "outlined" | "text" -> variant: "default" | "outline" | "ghost"
size: "small" | "medium" | "large" -> size: "sm" | "default" | "lg"
color: "primary" | "secondary" -> className with appropriate colors

TextField Props Mapping

// MUI -> shadcn
variant: "outlined" | "filled" | "standard" -> consistent Input styling
multiline -> Textarea component
error -> error state styling
helperText -> separate helper text component

Tooltip Props Mapping

// MUI -> shadcn
placement -> side prop with Radix positioning
arrow -> built into shadcn Tooltip

Testing Requirements

• Unit tests for new components
• Integration tests for form interactions
• Visual regression tests
• Accessibility testing
• Cross-browser compatibility

Documentation Updates

• Component usage guidelines
• Migration notes for team
• Storybook documentation
• TypeScript interface documentation