refact: unify js and css
This commit is contained in:
@@ -1,13 +1,15 @@
|
||||
# 📚 Documentation Frontend - Notytex
|
||||
|
||||
> **Design System & Composants UI**
|
||||
> **Version**: 2.0
|
||||
> **Dernière mise à jour**: 7 août 2025
|
||||
> **Version**: 2.1
|
||||
> **Dernière mise à jour**: 16 août 2025
|
||||
|
||||
## 🎯 **Vue d'Ensemble**
|
||||
|
||||
Cette documentation couvre l'ensemble du **design system Notytex**, ses composants UI, et les bonnes pratiques pour maintenir une interface cohérente et moderne.
|
||||
|
||||
**Notytex 2.1** intègre désormais une **architecture JavaScript moderne unifiée** avec des modules ES6+, un système de gestion d'état réactif, et des composants optimisés pour les performances.
|
||||
|
||||
---
|
||||
|
||||
## 📁 **Organisation de la Documentation**
|
||||
@@ -41,13 +43,16 @@ Cette documentation couvre l'ensemble du **design system Notytex**, ses composan
|
||||
| Common Macros | Macros réutilisables (hero_section, buttons...) | 📋 |
|
||||
| **Form Components** | **Champs de formulaire standardisés (voir CLASS_FORM.md)** | ✅ |
|
||||
|
||||
### ⚡ **Performance & Outils**
|
||||
### ⚡ **JavaScript & Architecture**
|
||||
|
||||
| Document | Description | Statut |
|
||||
| ---------------------- | ------------------------------------------- | ------ |
|
||||
| **Architecture JavaScript** | **Système unifié ES6+ avec NotytexCore & modules** | ✅ |
|
||||
| **Class Dashboard JS** | **Module dashboard moderne avec gestion d'état** | ✅ |
|
||||
| **Council Preparation JS** | **Module conseil de classe avec mode focus** | ✅ |
|
||||
| **Filter System JS** | **Gestionnaire de filtres réactif** | ✅ |
|
||||
| Performance Guidelines | Optimisation frontend & best practices | 📋 |
|
||||
| Testing Strategy | Tests visuels, accessibilité, cross-browser | 📋 |
|
||||
| Build & Deploy | Process de build frontend | 📋 |
|
||||
|
||||
---
|
||||
|
||||
@@ -75,6 +80,50 @@ Cette documentation couvre l'ensemble du **design system Notytex**, ses composan
|
||||
|
||||
---
|
||||
|
||||
## ⚡ **Architecture JavaScript Moderne**
|
||||
|
||||
### **Système Unifié NotytexCore**
|
||||
|
||||
```javascript
|
||||
// Architecture ES6+ avec modules dynamiques
|
||||
NotytexCore.getInstance() // Singleton pattern
|
||||
├── Modules dynamiques (loadPageModule())
|
||||
├── Gestion d'état réactif (Proxy-based)
|
||||
├── Système d'événements unifié
|
||||
└── Utilitaires performance (debounce, throttle)
|
||||
```
|
||||
|
||||
### **Modules Principaux**
|
||||
|
||||
| Module | Description | Fonctionnalités |
|
||||
|--------|-------------|-----------------|
|
||||
| **NotytexCore** | Cœur du système JS | État réactif, événements, modules |
|
||||
| **ClassDashboard** | Dashboard classe | Stats temps réel, graphiques, filtres |
|
||||
| **CouncilPreparation** | Conseil de classe | Mode focus, auto-save, navigation |
|
||||
| **FilterManager** | Gestionnaire filtres | Filtres dynamiques, URL sync |
|
||||
| **NotificationSystem** | Notifications | Toasts, alertes, confirmations |
|
||||
| **ModalManager** | Modales | Overlay, gestion focus, accessible |
|
||||
|
||||
### **Patterns Utilisés**
|
||||
|
||||
```javascript
|
||||
// Gestion d'état réactif
|
||||
const state = new Proxy({}, {
|
||||
set(target, property, value) {
|
||||
// Auto-notification des observers
|
||||
this.notifyObservers(property, value);
|
||||
}
|
||||
});
|
||||
|
||||
// Chargement dynamique
|
||||
const module = await NotytexCore.loadModule('ClassDashboard', './ClassDashboard.js');
|
||||
|
||||
// Événements unifiés
|
||||
NotytexCore.emit('stats:updated', { trimester: 2, data: stats });
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 🎨 **Design System en Bref**
|
||||
|
||||
### **Couleurs Principales**
|
||||
@@ -117,6 +166,7 @@ xl: 1280px // Large desktop
|
||||
|
||||
### **✅ Complété (100%)**
|
||||
|
||||
**Interface & Composants UI :**
|
||||
- Guide des bonnes pratiques générales
|
||||
- Page des classes (refonte complète)
|
||||
- **Formulaire de classe (création/modification complet)**
|
||||
@@ -125,19 +175,38 @@ xl: 1280px // Large desktop
|
||||
- Filtres des évaluations
|
||||
- Cartes d'évaluation
|
||||
|
||||
**Architecture JavaScript :**
|
||||
- **Système NotytexCore unifié (ES6+)**
|
||||
- **ClassDashboard.js - Module dashboard avancé**
|
||||
- **CouncilPreparation.js - Module conseil avec mode focus**
|
||||
- **Gestionnaire de filtres réactif**
|
||||
- **Système de notifications moderne**
|
||||
- **Gestionnaire de modales accessible**
|
||||
|
||||
### **🔄 En cours (0-80%)**
|
||||
|
||||
- Design tokens centralisés
|
||||
- Guidelines d'accessibilité
|
||||
- Guidelines d'accessibilité
|
||||
- Tests automatisés frontend
|
||||
- **Documentation technique des modules JS** (architecture interne)
|
||||
|
||||
### **📋 À faire**
|
||||
|
||||
- Documentation page Dashboard
|
||||
**Interface & Pages :**
|
||||
- Documentation page Dashboard principal
|
||||
- Documentation gestion des élèves
|
||||
- Composants de formulaire
|
||||
- Guide de performance
|
||||
- Process de build/deploy
|
||||
- Composants de formulaire (documentation complète)
|
||||
|
||||
**JavaScript & Performance :**
|
||||
- Guide de performance frontend
|
||||
- Optimisations Webpack/Vite
|
||||
- Service Workers & Cache Strategy
|
||||
- Bundle analysis & Tree shaking
|
||||
|
||||
**DevOps & Build :**
|
||||
- Process de build/deploy automatisé
|
||||
- Tests end-to-end avec Playwright
|
||||
- Monitoring des métriques Web Vitals
|
||||
|
||||
---
|
||||
|
||||
@@ -145,6 +214,7 @@ xl: 1280px // Large desktop
|
||||
|
||||
### **Tests Rapides**
|
||||
|
||||
**Templates Jinja2 :**
|
||||
```bash
|
||||
# Validation syntaxe tous les templates
|
||||
find templates/ -name "*.html" -exec echo "Testing {}" \;
|
||||
@@ -164,13 +234,39 @@ with app.app_context():
|
||||
"
|
||||
```
|
||||
|
||||
**Modules JavaScript :**
|
||||
```bash
|
||||
# Validation syntaxe ES6+
|
||||
node --check static/js/notytex-core.js
|
||||
node --check static/js/ClassDashboard.js
|
||||
node --check static/js/CouncilPreparation.js
|
||||
|
||||
# Test d'importation des modules
|
||||
node -e "
|
||||
import('./static/js/notytex-core.js')
|
||||
.then(() => console.log('✅ NotytexCore module OK'))
|
||||
.catch(err => console.log('❌ NotytexCore error:', err.message))
|
||||
"
|
||||
```
|
||||
|
||||
### **Tests Complets**
|
||||
|
||||
- **Syntaxe** : Tous templates Jinja2 valides
|
||||
- **Responsive** : Tests sur tous breakpoints
|
||||
**Frontend Statique :**
|
||||
- **Syntaxe** : Tous templates Jinja2 valides ✅
|
||||
- **Responsive** : Tests sur tous breakpoints ✅
|
||||
- **Accessibilité** : Tests axe-core + validation manuelle
|
||||
- **Cross-browser** : Chrome, Firefox, Safari, Edge
|
||||
|
||||
**JavaScript Modules :**
|
||||
- **Syntaxe ES6+** : Tous modules validés sans erreurs ✅
|
||||
- **Imports/Exports** : Résolution correcte des dépendances ✅
|
||||
- **Gestion d'erreur** : Try/catch pour modules critiques ✅
|
||||
- **Performance** : Lazy loading & debouncing implémentés ✅
|
||||
|
||||
**Intégration :**
|
||||
- **Performance** : Métriques Lighthouse > 90
|
||||
- **Functional Testing** : Tests E2E des flows critiques
|
||||
- **Error Handling** : Fallbacks gracieux en cas d'échec JS
|
||||
|
||||
---
|
||||
|
||||
|
||||
Reference in New Issue
Block a user