src/components/FontMap/README.md

FontMap Component

Structure

src/components/FontMap/
├── index.js                    # Point d'entrée principal
├── FontMap.js                  # Composant principal unifié
├── hooks/
│   ├── useFontData.js         # Gestion des données de polices
│   ├── useD3Visualization.js  # Logique D3 unifiée
│   └── useTooltip.js          # Gestion des tooltips
├── components/
│   └── controls/
│       ├── DarkModeToggle.js
│       ├── DatasetSelector.js
│       ├── FilterControls.js
│       ├── SearchBar.js
│       └── ZoomControls.js
├── utils/
│   └── fontUtils.js          # Utilitaires pour les polices
└── styles/
    └── FontMap.css           # Styles principaux

Utilisation

import { FontMap } from './components/FontMap';

function App() {
  return <FontMap />;
}

Composants

FontMap (Principal)

Composant principal qui orchestre tous les autres composants et hooks.

Hooks

useFontData

• Gère le chargement des données de polices
• Supporte les datasets 'original' et 'extended'
• Retourne : { fonts, loading, fontMapping, error }

useD3Visualization

• Gère toute la logique D3 pour la visualisation
• Inclut le zoom, la magnification, les interactions
• Retourne : svgRef

useTooltip

• Gère l'affichage et le positionnement des tooltips
• Gère les tooltips hover et sélection avec positionnement intelligent
• Retourne : { handleFontSelect, handleFontHover, handleFontUnhover, updateTransform, updatePositions }

Contrôles

Tous les composants de contrôles suivent le même pattern :

• Props : { value, onChange, darkMode? }
• Styles cohérents avec le système de design

Utilitaires

fontUtils.js

• getFontSymbolId() : Obtient l'ID du symbole SVG
• matchesSearch() : Vérifie si une police correspond à une recherche
• filterFonts() : Filtre les polices selon les critères
• calculatePositions() : Calcule les positions avec simulation Voronoi
• applyVoronoiRelaxation() : Applique la relaxation de Voronoi

Améliorations apportées

1. Structure claire : Séparation logique des responsabilités
2. Pas de duplication : Un seul composant principal
3. Hooks réutilisables : Logique métier extraite
4. Composants modulaires : Contrôles indépendants
5. Utilitaires centralisés : Fonctions communes dans un module
6. Exports cohérents : API claire et prévisible