veza/apps/web/PLAN_DOCUMENTATION_UI.md

Plan de Documentation des Composants UI

🎯 Objectif

Documenter tous les composants UI avec JSDoc pour améliorer la maintenabilité et l'expérience développeur.

📋 Composants à Documenter (54 composants)

Phase 1 : Composants de Base (✅ Complétée)

1. ✅ Button - Documenté avec JSDoc complet (variants, sizes, exemples)
2. ✅ Input - Documenté avec JSDoc complet (label, icon, exemples)
3. ✅ Card - Documenté avec JSDoc complet (variants, sous-composants, exemples)
4. ✅ Checkbox - Documenté avec JSDoc complet (label, onCheckedChange, exemples)
5. ✅ Alert - Documenté avec JSDoc complet (variants, title, onClose, exemples)
6. ✅ Textarea - Documenté avec JSDoc complet (label, error, exemples)
7. ✅ Progress - Documenté avec JSDoc complet (variants, colors, labels, exemples)
8. ✅ Tabs - Documenté avec JSDoc complet (Tabs, TabsList, TabsTrigger, TabsContent)
9. ✅ Label - Documenté avec JSDoc complet
10. ✅ Switch - Documenté avec JSDoc complet (checked, onCheckedChange, exemples)
11. ✅ RadioGroup - Documenté avec JSDoc complet (RadioGroup, RadioGroupItem)
12. ✅ EmptyState - Documenté avec JSDoc complet (icon, title, description, action, size)
13. ✅ Table - Documenté avec JSDoc complet (Table, TableHeader, TableBody, TableRow, TableCell, etc.)
14. ✅ ScrollArea - Documenté avec JSDoc complet (ScrollArea, ScrollBar)
15. ✅ Slider - Documenté avec JSDoc complet (value, min, max, step, exemples)
16. ✅ Toast - Documenté avec JSDoc complet (type, message, onClose, exemples)
17. ✅ FormField - Documenté avec JSDoc complet (label, error, required, helpText)
18. ✅ HelpText - Documenté avec JSDoc complet (text, position, exemples)
19. ✅ ConfirmationDialog - Documenté avec JSDoc complet (open, onConfirm, variant, isLoading)
20. ✅ ButtonLoading - Documenté avec JSDoc complet (isLoading, loadingText, exemples)

Phase 2 : Composants Avancés (✅ Complétée)

21. ✅ DataList - Documenté avec JSDoc complet (items, renderItem, keyExtractor, états)
22. ✅ FocusTrap - Documenté avec JSDoc complet (active, onEscape, exemples)
23. ✅ DropdownMenu - Documenté avec JSDoc complet (DropdownMenu, DropdownMenuTrigger, DropdownMenuContent)
24. ✅ ImageCropper - Documenté avec JSDoc complet (aspectRatio, circularCrop, contrôles)
25. ✅ ImageViewerModal - Documenté avec JSDoc complet (navigation, téléchargement)
26. ✅ LazyComponent - Documenté avec JSDoc complet (createLazyComponent factory)
27. ✅ OptimizedImage - Documenté avec JSDoc complet (lazy loading, formats multiples, blur)
28. ✅ VirtualizedList - Documenté avec JSDoc complet (virtualisation, callbacks)
29. ✅ WaveformVisualizer - Documenté avec JSDoc complet (waveformData, progress, onSeek)
30. ✅ AvatarUpload - Documenté avec JSDoc complet (drag-drop, preview, validation)
31. ✅ Dialog - Documenté avec JSDoc complet (variants, actions, tailles)
32. ✅ Modal - Documenté avec JSDoc complet (backdrop, header, footer)
33. ✅ Select - Documenté avec JSDoc complet (multi-select, recherche, groupes)
34. ✅ Dropdown - Documenté avec JSDoc complet (trigger, align, backdrop)
35. ✅ Tooltip - Documenté avec JSDoc complet (positionnement, triggers, délai)
36. ✅ Badge - Documenté avec JSDoc complet (variants, tailles, count, dot)
37. ✅ Avatar - Documenté avec JSDoc complet (tailles, statuts, initiales)
38. ✅ Skeleton - Documenté avec JSDoc complet (variants, dimensions)
39. ✅ LoadingSpinner - Documenté avec JSDoc complet (tailles, texte)
40. ✅ DatePicker - Documenté avec JSDoc complet (single/range, validation)

Phase 3 : Composants Spécialisés (✅ Complétée)

41. ✅ FileUpload - Documenté avec JSDoc complet (drag-drop, preview, validation, multi-fichiers)
42. ⏳ ViewToggle - À documenter (composant de navigation)
43. ⏳ Tabs (navigation) - À documenter (composant de navigation)

📝 Format de Documentation JSDoc

Chaque composant doit avoir :

• Description du composant
• Description de chaque prop
• Exemples d'utilisation
• Notes sur les variants disponibles
• Notes sur l'accessibilité si applicable

🔧 Template JSDoc

/**
 * [Nom du composant] - [Description courte]
 * 
 * [Description détaillée du composant et de son usage]
 * 
 * @example
 * ```tsx
 * <Component prop1="value" prop2={value} />
 * ```
 * 
 * @example
 * ```tsx
 * // Exemple avec variant
 * <Component variant="primary" />
 * ```
 */