MIGRATION-MUI.md

# Migration vers Material-UI (MUI)

## Changements Effectués

### 1. Installation des Dépendances
```bash
npm install @mui/material @mui/icons-material @emotion/react @emotion/styled
```

Packages installés:
- `@mui/material` - Composants Material-UI
- `@mui/icons-material` - Icônes Material Design
- `@emotion/react` - Styling engine requis
- `@emotion/styled` - Styled components

### 2. Configuration du Thème

**Fichier**: `apps/web/src/theme.ts`

Thème personnalisé créé avec:
- Palette de couleurs (primary: bleu, secondary: violet)
- Typography (Roboto font family)
- Components overrides (buttons, cards, paper)
- Border radius: 8px

### 3. Point d'Entrée Principal

**Fichier**: `apps/web/src/main.tsx`

Ajout du ThemeProvider et CssBaseline:
```typescript
import { ThemeProvider } from '@mui/material/styles'
import CssBaseline from '@mui/material/CssBaseline'
import { theme } from './theme'

<ThemeProvider theme={theme}>
  <CssBaseline />
  <App />
</ThemeProvider>
```

### 4. Dashboard Refactorisé

**Fichier**: `apps/web/src/components/Dashboard.tsx`

Remplacement complet avec MUI:
- **AppBar** + **Toolbar** au lieu du header Tailwind
- **Container** pour le layout responsive
- **Paper** pour les cartes (remplace les divs avec shadow)
- **Typography** pour tout le texte
- **Alert** pour les notifications d'erreur
- **Stack** pour l'espacement vertical
- **Box** avec flexbox pour le layout

Composants MUI utilisés:
- `AppBar` - Barre de navigation en haut
- `Toolbar` - Contenu de l'AppBar
- `Container` - Conteneur responsive (maxWidth="xl")
- `Paper` - Cartes avec elevation (ombres)
- `Typography` - Tous les textes (variant: h6, caption, body2)
- `Alert` - Notifications d'erreur
- `IconButton` - Boutons avec icônes
- `Divider` - Séparateurs horizontaux
- `Stack` - Layout vertical avec spacing
- `Box` - Conteneur flex personnalisé

Icons utilisés:
- `ScienceIcon` - Icône science dans l'AppBar
- `CloseIcon` - Fermer les alertes

## État Actuel

### ✅ Migré vers MUI:
1. Dashboard (layout principal)
2. Thème configuré
3. Point d'entrée avec ThemeProvider

### ⏳ Encore en Tailwind CSS:
Les composants suivants utilisent encore Tailwind et doivent être convertis:

1. **ScenarioSelector** (`apps/web/src/components/simulation/ScenarioSelector.tsx`)
   - À convertir: `<select>` → MUI `<Select>` + `<MenuItem>`
   - Classes Tailwind → sx props

2. **ParameterPanel** (`apps/web/src/components/simulation/ParameterPanel.tsx`)
   - À convertir: `<input>` → MUI `<TextField>`
   - Boutons → MUI `<Button>`

3. **SimulationControl** (`apps/web/src/components/simulation/SimulationControl.tsx`)
   - À convertir: boutons → MUI `<Button>` avec variant et color
   - Status indicator → MUI `<Chip>` ou `<CircularProgress>`

4. **ResultsDisplay** (`apps/web/src/components/results/ResultsDisplay.tsx`)
   - À convertir: tabs → MUI `<Tabs>` + `<Tab>`
   - Alert stability → MUI `<Alert>` avec severity

5. **MetricsCard** (`apps/web/src/components/results/MetricsCard.tsx`)
   - À convertir: divs → MUI `<Card>` + `<CardContent>`

6. **ComparisonTable** (`apps/web/src/components/results/ComparisonTable.tsx`)
   - À convertir: `<table>` → MUI `<Table>` + composants associés

7. **ExportButton** (`apps/web/src/components/results/ExportButton.tsx`)
   - À convertir: boutons → MUI `<Button>` avec startIcon

## Avantages de MUI

### Design Professionnel
- ✅ Cohérence visuelle Material Design
- ✅ Composants accessibles (ARIA)
- ✅ Animations et transitions fluides
- ✅ Thème personnalisable
- ✅ Dark mode support (facilement activable)

### Composants Riches
- ✅ Plus de 50+ composants prêts à l'emploi
- ✅ Formulaires validés
- ✅ Tables avancées avec tri/filtre
- ✅ Dialogs, Snackbars, Tooltips
- ✅ Responsive par défaut

### Maintenance
- ✅ Documentation excellente
- ✅ Large communauté
- ✅ Updates régulières
- ✅ TypeScript first-class support

## Guide de Conversion Rapide

### Tailwind → MUI Mapping

| Tailwind Class | MUI Equivalent |
|---------------|---------------|
| `bg-white` | `<Paper>` ou `sx={{ bgcolor: 'background.paper' }}` |
| `shadow` | `<Paper elevation={3}>` |
| `rounded` | `sx={{ borderRadius: 1 }}` (ou theme.shape.borderRadius) |
| `p-4` | `sx={{ p: 3 }}` (1 unit = 8px) |
| `mb-4` | `sx={{ mb: 3 }}` |
| `text-gray-900` | `color="text.primary"` ou `variant="h6"` |
| `text-sm` | `variant="body2"` |
| `font-semibold` | `fontWeight={600}` ou `variant="h6"` |
| `flex items-center` | `sx={{ display: 'flex', alignItems: 'center' }}` |
| `gap-4` | `<Stack spacing={3}>` |

### Composants Communs

**Bouton:**
```tsx
// Tailwind
<button className="bg-blue-600 text-white px-4 py-2 rounded">Text</button>

// MUI
<Button variant="contained" color="primary">Text</Button>
```

**Champ de texte:**
```tsx
// Tailwind
<input type="number" className="border rounded px-3 py-2" />

// MUI
<TextField type="number" variant="outlined" fullWidth />
```

**Sélecteur:**
```tsx
// Tailwind
<select className="border rounded px-3 py-2">...</select>

// MUI
<Select variant="outlined" fullWidth>
  <MenuItem value="1">Option 1</MenuItem>
</Select>
```

## Prochaines Étapes

Pour compléter la migration:

1. Convertir les composants de simulation (ScenarioSelector, ParameterPanel, SimulationControl)
2. Convertir les composants de résultats (ResultsDisplay, MetricsCard, ComparisonTable)
3. Convertir ExportButton
4. Supprimer Tailwind CSS:
   - Désinstaller: `npm uninstall tailwindcss postcss autoprefixer`
   - Supprimer `tailwind.config.js`
   - Supprimer `postcss.config.js`
   - Supprimer `src/index.css` (ou garder seulement reset CSS minimal)

## Build Status

✅ **Build réussi** avec MUI
- Bundle size: 600KB (gzip: 198KB)
- TypeScript: OK
- Vite: OK

## Notes

- Le Dashboard est maintenant 100% MUI
- L'application fonctionne et s'affiche correctement
- Les autres composants continuent à fonctionner avec Tailwind (rétrocompatibilité)
- Migration progressive possible (pas besoin de tout convertir en une fois)