Story 1.1: initialisation projet

2026-02-04 02:14:17 +01:00
parent c9f95d39a0
commit e3f062249b
38 changed files with 10300 additions and 0 deletions
--- a/docs/stories/1.2.configuration-tailwind.md
+++ b/docs/stories/1.2.configuration-tailwind.md
@@ -0,0 +1,445 @@
+# Story 1.2: Configuration de Tailwind CSS avec CLI
+
+## Status
+
+Ready for Dev
+
+## Story
+
+**As a** développeur,
+**I want** configurer Tailwind CSS avec le CLI et le build optimisé,
+**so that** je bénéficie d'un CSS performant avec purge automatique.
+
+## Acceptance Criteria
+
+1. Node.js et npm sont utilisés uniquement pour le build (pas en production)
+2. `tailwind.config.js` est créé avec les chemins des fichiers PHP à scanner
+3. Le fichier `assets/css/input.css` contient les directives Tailwind (@tailwind base, components, utilities)
+4. La commande `npm run build` génère `assets/css/output.css` minifié
+5. Une commande `npm run dev` permet le développement en temps réel (watch)
+6. Le fichier CSS généré fait moins de 50kb après purge
+7. La palette de couleurs personnalisée est configurée (thème sombre)
+
+## Tasks / Subtasks
+
+- [] **Task 1 : Initialiser npm et installer les dépendances** (AC: 1)
+  - [] Créer `package.json` avec `npm init -y`
+  - [] Installer Tailwind CSS : `npm install -D tailwindcss postcss autoprefixer`
+  - [] Vérifier que `node_modules/` est dans `.gitignore`
+
+- [] **Task 2 : Créer la configuration Tailwind** (AC: 2, 7)
+  - [] Créer `tailwind.config.js` avec les chemins PHP à scanner
+  - [] Configurer la palette de couleurs personnalisée (primary, background, surface, text, etc.)
+  - [] Configurer les polices (Inter, JetBrains Mono)
+  - [] Configurer les tailles de texte personnalisées
+  - [] Configurer les ombres personnalisées
+
+- [] **Task 3 : Créer le fichier CSS source** (AC: 3)
+  - [] Créer `assets/css/input.css`
+  - [] Ajouter les directives `@tailwind base`, `@tailwind components`, `@tailwind utilities`
+  - [] Ajouter les styles de base dans `@layer base`
+  - [] Ajouter les composants réutilisables dans `@layer components` (btn, card, input, badge, etc.)
+  - [] Ajouter les animations dans `@layer utilities`
+
+- [] **Task 4 : Configurer PostCSS** (AC: 1)
+  - [] Créer `postcss.config.js` avec tailwindcss et autoprefixer
+
+- [] **Task 5 : Configurer les scripts npm** (AC: 4, 5)
+  - [] Ajouter le script `build` dans package.json
+  - [] Ajouter le script `dev` (watch) dans package.json
+  - [] Tester les deux scripts
+
+- [] **Task 6 : Valider la taille du CSS** (AC: 6)
+  - [] Exécuter `npm run build`
+  - [] Vérifier que `output.css` < 50kb (6,4 Ko)
+  - [] Vérifier que le purge fonctionne correctement
+
+## Dev Notes
+
+### Dépendances npm (devDependencies uniquement)
+
+```json
+{
+  "devDependencies": {
+    "tailwindcss": "^3.4.0",
+    "postcss": "^8.4.0",
+    "autoprefixer": "^10.4.0"
+  }
+}
+```
+
+### Configuration tailwind.config.js Complète
+
+```javascript
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: [
+    './*.php',
+    './pages/**/*.php',
+    './templates/**/*.php',
+    './assets/js/**/*.js'
+  ],
+  theme: {
+    extend: {
+      colors: {
+        primary: {
+          DEFAULT: '#FA784F',
+          light: '#FB9570',
+          dark: '#E5623A',
+        },
+        background: '#17171F',
+        surface: {
+          DEFAULT: '#1E1E28',
+          light: '#2A2A36',
+        },
+        border: '#3A3A48',
+        text: {
+          primary: '#F5F5F7',
+          secondary: '#A1A1AA',
+          muted: '#71717A',
+        },
+        success: '#34D399',
+        warning: '#FBBF24',
+        error: '#F87171',
+        info: '#60A5FA',
+      },
+      fontFamily: {
+        sans: ['Inter', 'system-ui', 'sans-serif'],
+        mono: ['JetBrains Mono', 'monospace'],
+      },
+      fontSize: {
+        'display': ['2.5rem', { lineHeight: '1.2', fontWeight: '700' }],
+        'heading': ['2rem', { lineHeight: '1.3', fontWeight: '600' }],
+        'subheading': ['1.5rem', { lineHeight: '1.4', fontWeight: '600' }],
+        'body': ['1rem', { lineHeight: '1.6', fontWeight: '400' }],
+        'small': ['0.875rem', { lineHeight: '1.5', fontWeight: '400' }],
+      },
+      maxWidth: {
+        'content': '1280px',
+      },
+      boxShadow: {
+        'card': '0 4px 20px rgba(0, 0, 0, 0.25)',
+        'card-hover': '0 10px 40px rgba(0, 0, 0, 0.3)',
+        'input-focus': '0 0 0 3px rgba(250, 120, 79, 0.2)',
+      },
+    },
+  },
+  plugins: [],
+}
+```
+
+### Configuration postcss.config.js
+
+```javascript
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  }
+}
+```
+
+### Contenu assets/css/input.css
+
+```css
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+  html {
+    @apply scroll-smooth;
+  }
+
+  body {
+    @apply bg-background text-text-primary font-sans antialiased;
+  }
+
+  h1 { @apply text-display text-text-primary; }
+  h2 { @apply text-heading text-text-primary; }
+  h3 { @apply text-subheading text-text-primary; }
+  p { @apply text-body text-text-secondary; }
+
+  a {
+    @apply text-primary hover:text-primary-light transition-colors duration-150;
+  }
+
+  :focus-visible {
+    @apply outline-none ring-2 ring-primary ring-offset-2 ring-offset-background;
+  }
+
+  ::selection {
+    @apply bg-primary/30 text-text-primary;
+  }
+}
+
+@layer components {
+  /* Container */
+  .container-content {
+    @apply max-w-content mx-auto px-4 sm:px-6 lg:px-8;
+  }
+
+  /* Boutons */
+  .btn {
+    @apply inline-flex items-center justify-center gap-2
+           px-6 py-3 font-medium rounded-lg
+           transition-all duration-150
+           focus:outline-none focus:ring-2 focus:ring-offset-2
+           focus:ring-offset-background
+           disabled:opacity-50 disabled:cursor-not-allowed;
+  }
+
+  .btn-primary {
+    @apply btn bg-primary text-background
+           hover:bg-primary-light active:bg-primary-dark
+           focus:ring-primary;
+  }
+
+  .btn-secondary {
+    @apply btn border-2 border-primary text-primary bg-transparent
+           hover:bg-primary hover:text-background
+           focus:ring-primary;
+  }
+
+  .btn-ghost {
+    @apply btn text-primary bg-transparent
+           hover:text-primary-light hover:bg-surface-light
+           focus:ring-primary;
+  }
+
+  /* Badges */
+  .badge {
+    @apply inline-flex items-center px-2.5 py-1
+           text-xs font-medium rounded
+           bg-surface-light text-text-secondary;
+  }
+
+  .badge-primary {
+    @apply bg-primary/20 text-primary;
+  }
+
+  .badge-muted {
+    @apply bg-border text-text-muted;
+  }
+
+  /* Cartes */
+  .card {
+    @apply bg-surface rounded-lg overflow-hidden
+           border border-border/50
+           transition-all duration-200;
+  }
+
+  .card-interactive {
+    @apply card cursor-pointer
+           hover:-translate-y-1 hover:shadow-card-hover
+           hover:border-border;
+  }
+
+  .card-body {
+    @apply p-4 sm:p-6;
+  }
+
+  /* Inputs */
+  .input {
+    @apply w-full px-4 py-3
+           bg-surface border border-border rounded-lg
+           text-text-primary placeholder-text-muted
+           transition-all duration-150
+           focus:outline-none focus:border-primary focus:shadow-input-focus;
+  }
+
+  .input-error {
+    @apply border-error focus:border-error
+           focus:shadow-[0_0_0_3px_rgba(248,113,113,0.2)];
+  }
+
+  .textarea {
+    @apply input min-h-[150px] resize-y;
+  }
+
+  .label {
+    @apply block text-sm font-medium text-text-secondary mb-2;
+  }
+
+  .label-required::after {
+    content: '*';
+    @apply text-error ml-1;
+  }
+
+  .error-message {
+    @apply text-sm text-error mt-1.5 flex items-center gap-1;
+  }
+
+  /* Sections */
+  .section {
+    @apply py-16 sm:py-24;
+  }
+
+  .section-header {
+    @apply text-center mb-12;
+  }
+
+  .section-title {
+    @apply text-heading mb-4;
+  }
+
+  .section-subtitle {
+    @apply text-body text-text-secondary max-w-2xl mx-auto;
+  }
+
+  /* Témoignage */
+  .testimonial {
+    @apply bg-surface-light rounded-lg p-6 border-l-4 border-primary;
+  }
+
+  /* Breadcrumb */
+  .breadcrumb {
+    @apply flex items-center gap-2 text-sm text-text-muted;
+  }
+
+  .breadcrumb-link {
+    @apply text-text-secondary hover:text-primary transition-colors;
+  }
+
+  .breadcrumb-current {
+    @apply text-text-primary;
+  }
+}
+
+@layer utilities {
+  .animate-fade-in {
+    animation: fadeIn 0.6s ease-out forwards;
+  }
+
+  .animate-fade-in-up {
+    animation: fadeInUp 0.6s ease-out forwards;
+  }
+
+  .animation-delay-100 { animation-delay: 100ms; }
+  .animation-delay-200 { animation-delay: 200ms; }
+  .animation-delay-300 { animation-delay: 300ms; }
+
+  .aspect-thumbnail {
+    aspect-ratio: 16 / 9;
+  }
+}
+
+@keyframes fadeIn {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+
+@keyframes fadeInUp {
+  from { opacity: 0; transform: translateY(20px); }
+  to { opacity: 1; transform: translateY(0); }
+}
+
+/* Accessibilité - Réduction de mouvement */
+@media (prefers-reduced-motion: reduce) {
+  *, *::before, *::after {
+    animation-duration: 0.01ms !important;
+    transition-duration: 0.01ms !important;
+  }
+}
+```
+
+### Scripts package.json
+
+```json
+{
+  "scripts": {
+    "dev": "tailwindcss -i ./assets/css/input.css -o ./assets/css/output.css --watch",
+    "build": "tailwindcss -i ./assets/css/input.css -o ./assets/css/output.css --minify"
+  }
+}
+```
+
+### Palette de Couleurs (Thème Sombre)
+
+| Couleur | Hex | Usage |
+|---------|-----|-------|
+| Primary | `#FA784F` | CTA, liens, accents |
+| Primary Light | `#FB9570` | Hover |
+| Primary Dark | `#E5623A` | Active/pressed |
+| Background | `#17171F` | Fond de page |
+| Surface | `#1E1E28` | Cartes, navbar |
+| Surface Light | `#2A2A36` | Hover cartes |
+| Border | `#3A3A48` | Bordures |
+| Text Primary | `#F5F5F7` | Titres |
+| Text Secondary | `#A1A1AA` | Texte secondaire |
+| Text Muted | `#71717A` | Placeholders |
+
+## Testing
+
+### Validation Manuelle
+
+- [ ] `npm install` s'exécute sans erreur
+- [ ] `npm run build` génère `output.css`
+- [ ] `npm run dev` lance le watch mode
+- [ ] Le fichier `output.css` < 50kb
+- [ ] Les classes Tailwind fonctionnent dans le navigateur
+
+### Commandes de Test
+
+```bash
+# Installer les dépendances
+npm install
+
+# Build production
+npm run build
+
+# Vérifier la taille du CSS
+ls -lh assets/css/output.css
+
+# Lancer le watch pour le dev
+npm run dev
+```
+
+### Test Visuel
+
+Créer un fichier HTML temporaire pour tester les classes :
+- `.btn-primary` → bouton orange
+- `.bg-background` → fond sombre #17171F
+- `.text-primary` → texte orange
+- `.card` → carte avec fond surface
+
+## Change Log
+
+| Date | Version | Description | Author |
+|------|---------|-------------|--------|
+| 2026-01-22 | 0.1 | Création initiale de la story | Sarah (PO) |
+
+## Dev Agent Record
+
+### Agent Model Used
+
+Claude Opus 4.5 (claude-opus-4-5-20251101)
+
+### Debug Log References
+
+_À compléter par le dev agent_
+
+### Completion Notes List
+
+- Package.json mis à jour (v2.0.0) avec scripts dev/build Tailwind
+- Dépendances installées : tailwindcss ^3.4.0, postcss ^8.4.0, autoprefixer ^10.4.0
+- tailwind.config.js créé avec palette couleurs sombre, polices Inter/JetBrains Mono
+- input.css complet avec @layer base, components (btn, card, input, badge, etc.), utilities (animations)
+- postcss.config.js configuré
+- Build validé : output.css = 6,4 Ko (< 50 Ko requis)
+- Warning normal : pas encore de fichiers PHP utilisant les classes
+
+### File List
+
+| Fichier | Action |
+|---------|--------|
+| `package.json` | Modifié |
+| `package-lock.json` | Modifié |
+| `tailwind.config.js` | Créé |
+| `postcss.config.js` | Créé |
+| `assets/css/input.css` | Créé |
+| `assets/css/output.css` | Généré |
+
+## QA Results
+
+_À compléter par le QA agent_