diff --git a/docs/app/guide-page-equipe.md b/docs/app/guide-page-equipe.md index 57d8cb7..58e6705 100644 --- a/docs/app/guide-page-equipe.md +++ b/docs/app/guide-page-equipe.md @@ -8,24 +8,25 @@ Cette page est accessible depuis le radar via le lien **"👥 Équipe"** dans le ## Architecture Technique -La page utilise une architecture hybride : -- **Page Next.js** : `/team` (route Next.js générée automatiquement par `Dockerfile.business`) -- **Contenu HTML** : Chargé via iframe depuis `/team.html` (fichier statique) +La page utilise une architecture pure React/Next.js : +- **Page Next.js** : `/team` (vraie page React avec hooks et états) +- **Import dynamique** : Cytoscape.js et ECharts chargés côté client seulement (évite erreurs SSR) +- **État React** : Gestion des onglets, données et erreurs via useState/useEffect +- **Refs React** : Containers pour les graphiques gérés proprement - **Navigation** : Lien intégré directement dans le composant React `Navigation.tsx` (modifié par script Python) -Cette approche combine les avantages de Next.js (routing, intégration native) avec la flexibilité d'un HTML statique autonome. +Cette approche moderne utilise pleinement les capacités de React tout en évitant les problèmes SSR avec les bibliothèques de visualisation. ### Fichiers impliqués -- **Page Next.js** : `.techradar/src/pages/team.tsx` (créée par `Dockerfile.business`) -- **Page HTML** : `public/team.html` (fichier statique avec visualisations) +- **Page Next.js** : `.techradar/src/pages/team.tsx` (vraie page React créée par `Dockerfile.business`) - **Données JSON** : `public/team-visualization-data.json` (généré par `scripts/generate-team-visualization-data.js`) - **Navigation** : `.techradar/src/components/Navigation/Navigation.tsx` (modifiée par script Python) +- **Bibliothèques** : `cytoscape`, `cytoscape-cose-bilkent`, `echarts-for-react` (installées automatiquement) ## Accès -- **URL** : `/team` (route Next.js) -- **Fichier HTML source** : `/team.html` (servi statiquement) +- **URL** : `/team` (route Next.js avec vraie page React) - **Lien de navigation** : Disponible dans le header du radar (bouton "👥 Équipe") - **Authentification** : Même protection que le radar (mot de passe `laplank-radar`) @@ -178,11 +179,11 @@ Description du membre de l'équipe. ### Dans le Dockerfile -1. **Création de la page Next.js** : Génère `.techradar/src/pages/team.tsx` -2. **Modification de Navigation** : Ajoute le lien "👥 Équipe" dans `.techradar/src/components/Navigation/Navigation.tsx` via script Python -3. **Copie des fichiers** : Copie `public/team.html` et `public/team-visualization-data.json` vers `.techradar/public/` -4. **Build Next.js** : Génère les fichiers statiques dans `out/` -5. **Vérification** : Le script `start-business.sh` vérifie que les fichiers sont dans `out/` et les copie si nécessaire +1. **Installation dépendances** : Installe `cytoscape`, `cytoscape-cose-bilkent`, `echarts-for-react` +2. **Création de la page Next.js** : Génère `.techradar/src/pages/team.tsx` (vraie page React) +3. **Modification de Navigation** : Ajoute le lien "👥 Équipe" dans `.techradar/src/components/Navigation/Navigation.tsx` via script Python +4. **Copie des données** : Copie `public/team-visualization-data.json` vers `.techradar/public/` +5. **Build Next.js** : Génère les fichiers statiques dans `out/` avec la page React complète ### Script Python pour Navigation.tsx @@ -198,10 +199,11 @@ Le script `/tmp/add_team_link.py` dans le Dockerfile : ### Bibliothèques JavaScript -- **Cytoscape.js** : Graphique réseau interactif -- **Cytoscape CoSE-Bilkent** : Layout algorithm pour le graphique -- **ECharts** : Matrice de congestion (heatmap) -- **Vanilla JavaScript** : Logique de l'équipe de genèse MVP +- **Cytoscape.js** : Graphique réseau interactif (import dynamique) +- **Cytoscape CoSE-Bilkent** : Layout algorithm pour le graphique (import dynamique) +- **ECharts pour React** : Matrice de congestion (composant React) +- **React Hooks** : Gestion d'état (useState, useEffect, useRef) +- **Next.js dynamic import** : Chargement côté client seulement (évite erreurs SSR) ### Chargement des données @@ -251,10 +253,11 @@ Pour l'équipe de genèse MVP, le seuil est fixé à **50%**. Pour le modifier : ### Ajouter de nouvelles visualisations -1. Modifier `public/team.html` -2. Ajouter un nouvel onglet dans la section `.tabs` -3. Ajouter le contenu dans une nouvelle section `.tab-content` -4. Implémenter la logique JavaScript pour charger et afficher les données +1. Modifier `.techradar/src/pages/team.tsx` (généré par le Dockerfile) +2. Ajouter un nouvel état dans `useState` pour l'onglet +3. Ajouter un bouton dans la section des onglets +4. Implémenter la logique React pour charger et afficher les données +5. Utiliser des refs React pour les containers des nouvelles visualisations ## Maintenance @@ -323,13 +326,13 @@ node scripts/generate-team-visualization-data.js ## Fichiers associés -- **Page HTML** : `public/team.html` (interface utilisateur) +- **Page React** : `.techradar/src/pages/team.tsx` (vraie page React avec hooks et états) - **Données JSON** : `public/team-visualization-data.json` (généré) - **Script de génération** : `scripts/generate-team-visualization-data.js` - **Profils équipe** : `docs/data/team/*.md` (fichiers Markdown avec métadonnées YAML) - **Technologies** : `radar-business/2025-01-15/*.md` (blips avec métadonnées) -- **Page Next.js** : `.techradar/src/pages/team.tsx` (générée par le Dockerfile) -- **Navigation modifiée** : `.techradar/src/components/Navigation/Navigation.tsx` (modifiée par le Dockerfile) +- **Navigation modifiée** : `.techradar/src/components/Navigation/Navigation.tsx` (modifiée par script Python) +- **Bibliothèques** : `cytoscape`, `cytoscape-cose-bilkent`, `echarts-for-react` (installées automatiquement) ## Ressources