diff --git a/App.tsx b/App.tsx index 3e412c1..34efac5 100644 --- a/App.tsx +++ b/App.tsx @@ -19,6 +19,7 @@ import Resources from './pages/Resources'; import Podcast from './pages/Podcast'; import ArticleDetail from './pages/ArticleDetail'; import WebinarDetail from './pages/WebinarDetail'; +import DesignSystem from './pages/design-system'; const ScrollToTop = () => { const { pathname } = useLocation(); @@ -53,6 +54,7 @@ const App: React.FC = () => { } /> } /> } /> + } /> } /> diff --git a/_bmad-output/analysis/action-plan.md b/_bmad-output/analysis/action-plan.md new file mode 100644 index 0000000..e53e3c9 --- /dev/null +++ b/_bmad-output/analysis/action-plan.md @@ -0,0 +1,198 @@ +# Plan d'Action - Rationalisation Design System Ocobo + +**Date:** 2026-01-12 +**Projet:** Prototype Ocobo → Design System +**Statut:** Planifié + +--- + +## Vue d'ensemble + +| Métrique | Valeur | +|----------|--------| +| Décisions prises | 22 | +| Phases | 4 | +| Composants à créer | ~15-20 | +| Pages à refactorer | 15 | + +--- + +## Contraintes Projet + +| Contrainte | Statut | +|------------|--------| +| Ne pas modifier la stack (React 19 + Vite + TS) | ✅ Accepté | +| Ne pas migrer vers Panda CSS | ✅ Hors scope | +| Conserver toutes les animations | ✅ Accepté | +| Garder Tailwind inline (pas de recipes) | ✅ Accepté | +| Pas de tests automatisés | ⚠️ Validation visuelle manuelle | +| Refactoring progressif | ✅ Une étape à la fois | + +--- + +## PHASE 1: FONDATIONS + +**Objectif:** Centraliser tous les tokens dans `tailwind.config.js` + +### Tâches + +| # | Tâche | Priorité | Dépendance | Statut | +|---|-------|----------|------------|--------| +| 1.1 | Installer Tailwind CSS localement (`npm install -D tailwindcss postcss autoprefixer`) | 🔴 Critique | - | ⬜ | +| 1.2 | Créer `tailwind.config.js` | 🔴 Critique | 1.1 | ⬜ | +| 1.3 | Créer `postcss.config.js` | 🔴 Critique | 1.1 | ⬜ | +| 1.4 | Définir tokens couleurs (primitifs + sémantiques) | 🔴 Critique | 1.2 | ⬜ | +| 1.5 | Définir tokens radius (sm, md, lg, xl) | 🔴 Critique | 1.2 | ⬜ | +| 1.6 | Définir tokens shadows (sm, md, lg, hero) | 🔴 Critique | 1.2 | ⬜ | +| 1.7 | Définir tokens typography (12 tailles) | 🔴 Critique | 1.2 | ⬜ | +| 1.8 | Mettre à jour `index.css` avec directives Tailwind | 🔴 Critique | 1.3 | ⬜ | +| 1.9 | Supprimer CDN Tailwind de `index.html` | 🔴 Critique | 1.8 | ⬜ | +| 1.10 | Validation visuelle globale | 🟡 Important | 1.9 | ⬜ | + +### Livrable Phase 1 + +``` +/tailwind.config.js +├── theme.extend.colors +│ ├── ocobo (dark, yellow, mint, sky, coral, gray) +│ └── semantic tokens +├── theme.extend.borderRadius (sm, md, lg, xl, full) +├── theme.extend.boxShadow (sm, md, lg, hero) +├── theme.extend.fontSize (12 tailles) +└── theme.extend.fontFamily (sans, display) + +/postcss.config.js +└── plugins: [tailwindcss, autoprefixer] +``` + +--- + +## PHASE 2: CORE COMPONENTS + +**Objectif:** Créer les 5 composants essentiels avec architecture Park UI + +### Tâches + +| # | Composant | Priorité | Fichier(s) | Statut | +|---|-----------|----------|------------|--------| +| 2.1 | Container | 🔴 Critique | `components/Container.tsx` | ⬜ | +| 2.2 | Button (refacto) | 🔴 Critique | `components/Button.tsx` | ⬜ | +| 2.3 | Badge | 🟠 Haute | `components/Badge.tsx` | ⬜ | +| 2.4 | Input | 🟠 Haute | `components/Input.tsx` | ⬜ | +| 2.5 | Card (primitives) | 🔴 Critique | `components/Card/*.tsx` | ⬜ | + +### Structure Card + +``` +components/Card/ +├── index.ts (exports) +├── CardRoot.tsx +├── CardHeader.tsx +├── CardTitle.tsx +├── CardDescription.tsx +├── CardBody.tsx +├── CardFooter.tsx +├── CardMedia.tsx +├── CardBadge.tsx +└── CardAvatar.tsx +``` + +### Props Uniformes (tous composants) + +```typescript +interface CommonProps { + variant?: 'default' | 'outlined' | 'ghost' | 'filled' | 'elevated' + size?: 'sm' | 'md' | 'lg' + colorPalette?: 'yellow' | 'mint' | 'sky' | 'coral' | 'dark' +} +``` + +--- + +## PHASE 3: SECTION COMPONENTS + +**Objectif:** Créer les composants de section réutilisables + +### Tâches + +| # | Composant | Priorité | Usage (pages) | Statut | +|---|-----------|----------|---------------|--------| +| 3.1 | Section (base) | 🔴 Critique | Toutes | ⬜ | +| 3.2 | HeroSection | 🟠 Haute | 15 pages | ⬜ | +| 3.3 | CtaSection | 🟠 Haute | ~8 pages | ⬜ | +| 3.4 | FeatureSection | 🟡 Moyenne | ~10 pages | ⬜ | +| 3.5 | GridSection | 🟡 Moyenne | ~12 pages | ⬜ | +| 3.6 | TestimonialSection | 🟢 Basse | ~5 pages | ⬜ | +| 3.7 | StatsSection | 🟢 Basse | ~4 pages | ⬜ | +| 3.8 | DecorativeBlob | 🟢 Basse | ~10 pages | ⬜ | + +--- + +## PHASE 4: PAGES REFACTORING + +**Objectif:** Remplacer les patterns inline par les nouveaux composants + +### Ordre de priorité + +| # | Page | Taille | Priorité | Statut | +|---|------|--------|----------|--------| +| 4.1 | Home.tsx | Grande | 🔴 Critique | ⬜ | +| 4.2 | Services.tsx | Grande | 🟠 Haute | ⬜ | +| 4.3 | Stories.tsx | Grande | 🟠 Haute | ⬜ | +| 4.4 | About.tsx | Grande | 🟡 Moyenne | ⬜ | +| 4.5 | Jobs.tsx | Moyenne | 🟡 Moyenne | ⬜ | +| 4.6 | Partners.tsx | Moyenne | 🟡 Moyenne | ⬜ | +| 4.7 | Method.tsx | Moyenne | 🟡 Moyenne | ⬜ | +| 4.8 | Studio.tsx | Moyenne | 🟢 Basse | ⬜ | +| 4.9 | Contact.tsx | Petite | 🟢 Basse | ⬜ | +| 4.10 | Resources.tsx | Moyenne | 🟢 Basse | ⬜ | +| 4.11 | Podcast.tsx | Moyenne | 🟢 Basse | ⬜ | +| 4.12 | ArticleDetail.tsx | Petite | 🟢 Basse | ⬜ | +| 4.13 | JobDetail.tsx | Petite | 🟢 Basse | ⬜ | +| 4.14 | StoryDetail.tsx | Petite | 🟢 Basse | ⬜ | +| 4.15 | WebinarDetail.tsx | Petite | 🟢 Basse | ⬜ | + +### Process par page + +1. **Analyser** - Identifier les patterns à remplacer +2. **Remplacer** - Utiliser les composants Design System +3. **Valider** - Vérification visuelle avant/après +4. **Commit** - Un commit par page + +--- + +## Checklist Validation Visuelle + +Pour chaque étape de refactoring : + +- [ ] Layout intact (spacing, alignment) +- [ ] Couleurs correctes +- [ ] Typography correcte +- [ ] Responsive fonctionne (mobile, tablet, desktop) +- [ ] Hover states fonctionnent +- [ ] Animations préservées +- [ ] Pas de régression visuelle + +--- + +## Risques et Mitigations + +| Risque | Probabilité | Impact | Mitigation | +|--------|-------------|--------|------------| +| Régression visuelle | Moyenne | Élevé | Refactoring progressif + validation | +| Tokens mal mappés | Faible | Moyen | Tests sur page Home d'abord | +| Composants incomplets | Moyenne | Moyen | Itérations progressives | +| Navbar complexe (17KB) | Élevée | Moyen | Refactoring séparé en Phase 5 | + +--- + +## Notes + +- **Scope:** Rationalisation Tailwind uniquement, migration Panda CSS = projet séparé +- **Approche:** Progressive, une étape à la fois +- **Validation:** Manuelle (pas de tests automatisés) +- **Architecture:** Pattern Park UI (composition) pour faciliter migration future + +--- + +*Plan généré automatiquement - Session brainstorming 2026-01-12* diff --git a/_bmad-output/analysis/brainstorming-session-2026-01-12.md b/_bmad-output/analysis/brainstorming-session-2026-01-12.md new file mode 100644 index 0000000..a275457 --- /dev/null +++ b/_bmad-output/analysis/brainstorming-session-2026-01-12.md @@ -0,0 +1,153 @@ +--- +stepsCompleted: [1, 2] +inputDocuments: [] +session_topic: 'Rationalisation du prototype Ocobo pour extraction Design System' +session_goals: 'Extraction tokens, inventaire composants, consolidation, architecture claire, migration-readiness Panda CSS/Park UI' +selected_approach: 'ai-recommended' +techniques_used: ['SCAMPER Method', 'Morphological Analysis', 'Constraint Mapping', 'First Principles Thinking'] +ideas_generated: [] +context_file: '_bmad/bmm/data/project-context-template.md' +--- + +# Brainstorming Session Results + +**Facilitator:** jerome +**Date:** 2026-01-12 + +## Session Overview + +**Topic:** Rationalisation du prototype Ocobo pour extraction Design System + +**Goals:** +- Extraction des design tokens (couleurs, typographies, espacements) +- Inventaire exhaustif des composants existants +- Consolidation des composants similaires (ex: variantes de cards) +- Architecture et hiérarchie claire des composants +- Préparation migration Tailwind → Panda CSS/Park UI + +### Context Guidance + +Session orientée développement produit/logiciel avec focus sur: +- Architecture technique et patterns de composants +- Expérience développeur pour la migration +- Maintenabilité et scalabilité du Design System + +### Session Setup + +**Contexte projet:** +- Prototype généré par Google AI Studio (résultat visuel validé) +- Stack actuelle: React 19 + TypeScript + Vite + Tailwind CSS +- Stack cible production: Panda CSS + Park UI +- Contrainte: Ne pas modifier la stack du prototype + +**Approche sélectionnée:** Techniques recommandées par l'IA + +## Technique Selection + +**Approach:** AI-Recommended Techniques +**Selected Techniques:** + +1. **SCAMPER Method** - Examiner chaque composant via 7 lenses systématiques pour consolidation +2. **Morphological Analysis** - Mapper tous les paramètres de composants pour identification des tokens +3. **Constraint Mapping** - Visualiser les contraintes de migration Tailwind → Panda CSS/Park UI +4. **First Principles Thinking** - Déconstruire jusqu'aux fondamentaux pour architecture claire + +**Selection Rationale:** Combinaison optimisée pour un projet de rationalisation Design System nécessitant analyse systématique, extraction de patterns, et préparation migration. + +## Technique 1: SCAMPER Method - Results + +### S - Substitute +- **#1** 7 types de cards identifiés (Article, Profile, Job, Callout, Section Item, Tool, Contact Form) +- **#2** Architecture Composition choisie vs Monolithique vs Spécialisé +- **#3** Pattern Composition validé: primitives + composants assemblés +- **#4** CardContainer variants: `default`, `outlined`, `ghost`, `filled`, `elevated` + +### C - Combine +- **#5** Border-radius: 12+ valeurs → 4 tokens (`radius-sm`, `radius-md`, `radius-lg`, `radius-xl`) +- **#6** Architecture Tokens 2 niveaux: Primitifs + Sémantiques +- **#7** Scope séparé: Rationalisation Tailwind ≠ Migration Panda CSS +- **#8** Audit Tailwind réalisé: inventaire incohérences (radius, shadows, couleurs inline) +- **#9** Scale Border-Radius validée: 4 tokens +- **#10** Scale Shadows validée: 4 tokens (`shadow-sm`, `shadow-md`, `shadow-lg`, `shadow-hero`) + +### A - Adapt +- **#11** Nomenclature Park UI adoptée: `ComponentRoot`, `ComponentHeader`, `ComponentBody`, etc. +- **#12** Système de props unifié: `variant`, `size`, `colorPalette` + +### M - Modify +- **#13** Tailwind inline préservé - pas de recipes/abstractions +- **#14** 6 types de sections identifiés: Hero, CTA, Feature, Grid, Testimonial, Stats +- **#15** Composants Section validés + primitives `Container`, `Section` + +### P - Put to Other Uses +- **#16** DecorativeBlob: composant réutilisable pour éléments décoratifs flous + +### E - Eliminate +- **#17** Typography chaos identifié: 15 tailles différentes +- **#18** Scale Typography validée: 12 tailles harmonieuses + +### R - Reverse +- **#19** Core 5 identifiés: `Button`, `Card`, `Badge`, `Input/Form`, `Container` = 80% des besoins + +**SCAMPER Total: 19 idées/décisions générées** + +## Technique 2: Constraint Mapping - Results + +### Contraintes Levées +- **#20** Tailwind Config Local possible → débloque centralisation tokens +- **#21** Mapping Migration hors scope → simplifie livrable + +### Contraintes Actives +- Stack React 19 + TS + Vite (compatible Park UI) +- Scope: ne pas modifier stack, ne pas migrer Panda CSS, conserver animations, Tailwind inline +- Code: Navbar 17KB, pages monolithiques +- Tests: aucun → validation visuelle requise + +### Décisions +- **#22** Refactoring progressif: une page/composant à la fois avec validation visuelle + +### Phases de Travail Validées +1. **Phase 1**: Fondations (tokens + config) +2. **Phase 2**: Core Components (5 essentiels) +3. **Phase 3**: Section Components +4. **Phase 4**: Pages Refactoring + +**Constraint Mapping Total: 3 décisions + 4 phases définies** + +--- + +## PLAN D'ACTION PRIORISÉ + +### Phase 1: Fondations (Tokens + Config) +| # | Tâche | Priorité | Statut | +|---|-------|----------|--------| +| 1.1 | Créer `tailwind.config.js` | 🔴 Critique | ⏳ | +| 1.2 | Définir tokens couleurs (primitifs + sémantiques) | 🔴 Critique | ⏳ | +| 1.3 | Définir tokens radius (sm, md, lg, xl) | 🔴 Critique | ⏳ | +| 1.4 | Définir tokens shadows (sm, md, lg, hero) | 🔴 Critique | ⏳ | +| 1.5 | Définir tokens typography (12 tailles) | 🔴 Critique | ⏳ | +| 1.6 | Migrer config CDN → config locale | 🔴 Critique | ⏳ | +| 1.7 | Validation visuelle globale | 🟡 Important | ⏳ | + +### Phase 2: Core Components (5 essentiels) +- Container, Button (refacto), Badge, Input/Form, Card (primitives) +- Props uniformes: `variant`, `size`, `colorPalette` +- Architecture Park UI: `ComponentRoot`, `ComponentHeader`, etc. + +### Phase 3: Section Components +- Section, HeroSection, CtaSection, FeatureSection, GridSection +- TestimonialSection, StatsSection, DecorativeBlob + +### Phase 4: Pages Refactoring +- Ordre: Home → Services → Stories → About → Jobs → Partners → Method → autres +- Process: identifier patterns → remplacer → validation visuelle → commit + +--- + +## Session Summary + +**Date:** 2026-01-12 +**Techniques utilisées:** SCAMPER, Constraint Mapping +**Total décisions:** 22 +**Phases définies:** 4 +**Statut:** Plan validé, Phase 1 en cours diff --git a/_bmad-output/analysis/design-system-spec.md b/_bmad-output/analysis/design-system-spec.md new file mode 100644 index 0000000..dd93a18 --- /dev/null +++ b/_bmad-output/analysis/design-system-spec.md @@ -0,0 +1,316 @@ +# Ocobo Design System Specification + +**Date:** 2026-01-12 +**Source:** Brainstorming Session - Rationalisation Prototype + +--- + +## 1. Design Tokens + +### 1.1 Couleurs + +#### Primitifs + +``` +colors: + ocobo: + dark: '#212323' + yellow: + DEFAULT: '#F1CF25' + light: '#FFFCEE' + mint: + DEFAULT: '#9ADBBA' + light: '#EBFDF5' + sky: + DEFAULT: '#99D1DF' + light: '#F0F9FB' + coral: + DEFAULT: '#FE9C87' + light: '#FFF5F2' + gray: + 50: '#FAFAFA' + 100: '#F5F5F5' + 200: '#E5E5E5' + 300: '#D4D4D4' + 400: '#A3A3A3' + 500: '#737373' + 600: '#525252' + 700: '#404040' + 800: '#262626' + 900: '#171717' + white: '#FFFFFF' + black: '#000000' +``` + +#### Sémantiques + +``` +semantic: + color-primary: '{colors.ocobo.yellow.DEFAULT}' + color-primary-light: '{colors.ocobo.yellow.light}' + color-accent: '{colors.ocobo.coral.DEFAULT}' + color-success: '{colors.ocobo.mint.DEFAULT}' + color-info: '{colors.ocobo.sky.DEFAULT}' + color-surface: '{colors.gray.50}' + color-background: '{colors.white}' + color-text: '{colors.ocobo.dark}' + color-text-muted: '{colors.gray.600}' + color-border: '{colors.gray.200}' +``` + +--- + +### 1.2 Border Radius + +| Token | Valeur | Usage | +|-------|--------|-------| +| `radius-sm` | `0.5rem` (8px) | Petits éléments, badges, inputs | +| `radius-md` | `1rem` (16px) | Cards standard, boutons | +| `radius-lg` | `1.5rem` (24px) | Cards hero, sections | +| `radius-xl` | `2.5rem` (40px) | Cards premium, modals | +| `radius-full` | `9999px` | Pills, avatars | + +--- + +### 1.3 Shadows + +| Token | Valeur | Usage | +|-------|--------|-------| +| `shadow-sm` | `0 1px 2px 0 rgb(0 0 0 / 0.05)` | Cards au repos | +| `shadow-md` | `0 4px 6px -1px rgb(0 0 0 / 0.1)` | Cards hover | +| `shadow-lg` | `0 10px 15px -3px rgb(0 0 0 / 0.1)` | Modals, dropdowns | +| `shadow-hero` | `0 40px 100px -20px rgb(0 0 0 / 0.08)` | Hero sections, CTAs majeurs | + +--- + +### 1.4 Typography + +| Token | Taille | Line Height | Usage | +|-------|--------|-------------|-------| +| `text-micro` | 10px | 1.4 | Badges, labels uppercase | +| `text-xs` | 12px | 1.4 | Captions, metadata | +| `text-sm` | 14px | 1.5 | Body small, UI elements | +| `text-base` | 16px | 1.5 | Body default | +| `text-lg` | 18px | 1.6 | Body large, lead | +| `text-xl` | 20px | 1.5 | Subheadings | +| `text-2xl` | 24px | 1.4 | H4 | +| `text-3xl` | 30px | 1.3 | H3 | +| `text-4xl` | 36px | 1.2 | H2 | +| `text-5xl` | 48px | 1.1 | H1 | +| `text-6xl` | 60px | 1.1 | Hero mobile | +| `text-7xl` | 72px | 1.0 | Hero desktop | + +#### Font Families + +``` +fontFamily: + sans: ['Bornia', 'Inter', 'sans-serif'] + display: ['Bermia', 'Inter', 'sans-serif'] +``` + +--- + +## 2. Architecture Composants + +### 2.1 Pattern Composition (Style Park UI) + +Tous les composants suivent le pattern de composition : + +```tsx + + + + + + + +``` + +### 2.2 Props Uniformes + +| Prop | Valeurs | Description | +|------|---------|-------------| +| `variant` | `default`, `outlined`, `ghost`, `filled`, `elevated` | Style visuel | +| `size` | `sm`, `md`, `lg` | Dimensions (padding, fonts) | +| `colorPalette` | `yellow`, `mint`, `sky`, `coral`, `dark` | Thème couleur | + +--- + +## 3. Composants Core (5 essentiels) + +### 3.1 Container + +```tsx +interface ContainerProps { + size?: 'sm' | 'md' | 'lg' | 'full' + children: React.ReactNode +} + +// Sizes +sm: max-w-3xl +md: max-w-5xl +lg: max-w-7xl +full: max-w-full +``` + +### 3.2 Button + +```tsx +interface ButtonProps { + variant?: 'primary' | 'secondary' | 'outline' | 'ghost' + size?: 'sm' | 'md' | 'lg' + colorPalette?: 'yellow' | 'mint' | 'sky' | 'coral' | 'dark' +} +``` + +### 3.3 Badge + +```tsx +interface BadgeProps { + variant?: 'solid' | 'outline' | 'subtle' + size?: 'sm' | 'md' + colorPalette?: 'yellow' | 'mint' | 'sky' | 'coral' | 'dark' +} +``` + +### 3.4 Input / Form + +```tsx +interface InputProps { + variant?: 'outline' | 'filled' | 'flushed' + size?: 'sm' | 'md' | 'lg' +} +``` + +### 3.5 Card (Primitives) + +``` +components/Card/ +├── index.ts +├── CardRoot.tsx +├── CardHeader.tsx +├── CardTitle.tsx +├── CardDescription.tsx +├── CardBody.tsx +├── CardFooter.tsx +├── CardMedia.tsx +├── CardBadge.tsx +└── CardAvatar.tsx +``` + +```tsx +interface CardRootProps { + variant?: 'default' | 'outlined' | 'ghost' | 'filled' | 'elevated' + size?: 'sm' | 'md' | 'lg' + colorPalette?: 'yellow' | 'mint' | 'sky' | 'coral' | 'dark' +} +``` + +--- + +## 4. Composants Section + +### 4.1 Section (Base) + +```tsx +interface SectionProps { + spacing?: 'sm' | 'md' | 'lg' // py-16, py-24, py-32 + background?: 'white' | 'gray' | 'dark' | 'yellow' | 'mint' | 'sky' +} +``` + +### 4.2 HeroSection + +```tsx +interface HeroSectionProps { + variant?: 'centered' | 'split' | 'animated' + background?: 'white' | 'dark' +} +``` + +### 4.3 CtaSection + +```tsx +interface CtaSectionProps { + colorPalette?: 'yellow' | 'dark' | 'mint' | 'sky' + variant?: 'simple' | 'with-form' +} +``` + +### 4.4 FeatureSection + +```tsx +interface FeatureSectionProps { + background?: 'dark' | 'light' + withBlobs?: boolean +} +``` + +### 4.5 GridSection + +```tsx +interface GridSectionProps { + columns?: 2 | 3 | 4 + gap?: 'md' | 'lg' +} +``` + +### 4.6 TestimonialSection + +```tsx +interface TestimonialSectionProps { + variant?: 'single' | 'carousel' +} +``` + +### 4.7 StatsSection + +```tsx +interface StatsSectionProps { + columns?: 3 | 4 +} +``` + +### 4.8 DecorativeBlob + +```tsx +interface DecorativeBlobProps { + position?: 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left' | 'center' + colorPalette?: 'yellow' | 'mint' | 'sky' | 'coral' + size?: 'sm' | 'md' | 'lg' + opacity?: 10 | 20 | 30 +} +``` + +--- + +## 5. Inventaire Cards Existantes + +| Type | Usage | Composant cible | +|------|-------|-----------------| +| Article cards | Blog, Podcast, Stories | `CardRoot variant="default"` + `CardMedia` | +| Profile cards | Team, Authors | `CardRoot` + `CardAvatar` | +| Job cards | Offres emploi | `CardRoot variant="outlined"` | +| Callouts | Mise en valeur | `CardRoot variant="filled"` | +| Section items | Grilles 3-4 cols | `CardRoot variant="ghost"` | +| Tool cards | Outils/Features | `CardRoot variant="elevated"` | +| Contact form | Formulaires | `CardRoot` + Form components | + +--- + +## 6. Migration Notes (Panda CSS / Park UI) + +### Compatibilité confirmée +- React 19 ✅ +- TypeScript ✅ +- Nomenclature Park UI adoptée ✅ +- Props système aligné ✅ + +### À faire lors migration +- Mapping tokens Tailwind → Panda CSS +- Conversion classes inline → CSS-in-JS +- Adoption recipes `cva()` + +--- + +*Document généré automatiquement - Session brainstorming 2026-01-12* diff --git a/_bmad-output/analysis/tailwind-config-example.js b/_bmad-output/analysis/tailwind-config-example.js new file mode 100644 index 0000000..7e5c0ca --- /dev/null +++ b/_bmad-output/analysis/tailwind-config-example.js @@ -0,0 +1,106 @@ +/** @type {import('tailwindcss').Config} */ +// EXEMPLE DE CONFIGURATION - À adapter lors de l'implémentation Phase 1 + +export default { + content: [ + "./index.html", + "./**/*.{js,ts,jsx,tsx}", + ], + theme: { + extend: { + // ============================================ + // FONT FAMILIES + // ============================================ + fontFamily: { + sans: ['Bornia', 'Inter', 'sans-serif'], + display: ['Bermia', 'Inter', 'sans-serif'], + }, + + // ============================================ + // COLORS - PRIMITIFS + // ============================================ + colors: { + ocobo: { + dark: '#212323', + yellow: { + DEFAULT: '#F1CF25', + light: '#FFFCEE', + }, + mint: { + DEFAULT: '#9ADBBA', + light: '#EBFDF5', + }, + sky: { + DEFAULT: '#99D1DF', + light: '#F0F9FB', + }, + coral: { + DEFAULT: '#FE9C87', + light: '#FFF5F2', + }, + }, + // Gray scale pour complément + gray: { + 50: '#FAFAFA', + 100: '#F5F5F5', + 200: '#E5E5E5', + 300: '#D4D4D4', + 400: '#A3A3A3', + 500: '#737373', + 600: '#525252', + 700: '#404040', + 800: '#262626', + 900: '#171717', + }, + }, + + // ============================================ + // BORDER RADIUS - 4 TOKENS + // ============================================ + borderRadius: { + 'sm': '0.5rem', // 8px - Petits éléments, badges + 'md': '1rem', // 16px - Cards standard + 'lg': '1.5rem', // 24px - Cards hero + 'xl': '2.5rem', // 40px - Cards premium + 'full': '9999px', // Pills, avatars + }, + + // ============================================ + // SHADOWS - 4 TOKENS + // ============================================ + boxShadow: { + 'sm': '0 1px 2px 0 rgb(0 0 0 / 0.05)', + 'md': '0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)', + 'lg': '0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)', + 'hero': '0 40px 100px -20px rgb(0 0 0 / 0.08)', + }, + + // ============================================ + // TYPOGRAPHY - 12 TAILLES + // ============================================ + fontSize: { + 'micro': ['0.625rem', { lineHeight: '1.4' }], // 10px + 'xs': ['0.75rem', { lineHeight: '1.4' }], // 12px + 'sm': ['0.875rem', { lineHeight: '1.5' }], // 14px + 'base': ['1rem', { lineHeight: '1.5' }], // 16px + 'lg': ['1.125rem', { lineHeight: '1.6' }], // 18px + 'xl': ['1.25rem', { lineHeight: '1.5' }], // 20px + '2xl': ['1.5rem', { lineHeight: '1.4' }], // 24px + '3xl': ['1.875rem', { lineHeight: '1.3' }], // 30px + '4xl': ['2.25rem', { lineHeight: '1.2' }], // 36px + '5xl': ['3rem', { lineHeight: '1.1' }], // 48px + '6xl': ['3.75rem', { lineHeight: '1.1' }], // 60px + '7xl': ['4.5rem', { lineHeight: '1' }], // 72px + }, + + // ============================================ + // SPACING (optionnel - pour standardiser) + // ============================================ + spacing: { + // Utiliser les valeurs Tailwind par défaut + // ou ajouter des tokens custom si nécessaire + }, + }, + }, + plugins: [], +} diff --git a/_bmad-output/implementation-artifacts/1-1-migrate-tailwind-configuration-from-cdn-to-local.md b/_bmad-output/implementation-artifacts/1-1-migrate-tailwind-configuration-from-cdn-to-local.md new file mode 100644 index 0000000..a70a5e2 --- /dev/null +++ b/_bmad-output/implementation-artifacts/1-1-migrate-tailwind-configuration-from-cdn-to-local.md @@ -0,0 +1,494 @@ +# Story 1.1: Migrate Tailwind Configuration from CDN to Local + +**Status:** ready-for-dev +**Epic:** 1 - Design Tokens Foundation +**Story ID:** 1.1 +**Story Key:** 1-1-migrate-tailwind-configuration-from-cdn-to-local + +--- + +## Story + +As an **AI Agent**, +I want the Tailwind configuration to be local in `tailwind.config.js`, +so that I can read and understand all design tokens from a single file. + +--- + +## Acceptance Criteria + +**AC1:** Given the project uses Tailwind via CDN in index.html +**When** I create a local tailwind.config.js with PostCSS configuration +**Then** all existing styles continue to work identically +**And** the CDN script is removed from index.html +**And** `npm run dev` and `npm run build` work without errors + +--- + +## Business Context + +This story is the **foundation** of the entire Design System Rationalization project. It enables: +- Centralized design token management in `tailwind.config.js` +- AI agents to read and understand all tokens from a single source +- Future stories to reference tokens instead of hardcoded values +- Migration path to Panda CSS / Park UI (future project) + +**Epic Objective:** Enable AI Agent to access all design tokens from a single source of truth (`tailwind.config.js`). + +**Dependencies:** This is Story 1.1 - no dependencies on previous stories. + +--- + +## Technical Context + +### Current State Analysis + +**Current Tailwind Setup (CDN-based):** +- Location: `index.html` lines 8-37 +- CDN script: `` +- Inline configuration in ` +``` + +**REMOVE:** +```html + +``` + +**PRESERVE (DO NOT MODIFY):** +- All `@font-face` declarations (lines 42-66) +- `:root` CSS variables (lines 68-71) +- `body` and heading styles (lines 73-84) +- `::selection` style (lines 90-93) +- All other `
{/* Illustration Container */} -
+
{/* Background Bars (Grey/Black) - Following the image structure */} @@ -109,7 +109,7 @@ const DataIllustration = () => {
-

Transformer le bruit en signal.

+

Transformer le bruit en signal.

L'architecture n'est pas qu'une question de structure, c'est une question de vision. Savoir où regarder pour trouver la croissance.

@@ -121,7 +121,7 @@ const IconSeparator = () => { return (
{/* Left Star/Sparkle - Exactly like provided image */} - + {/* Horizontal & Vertical lines */} @@ -132,7 +132,7 @@ const IconSeparator = () => { {/* Smiley Face - Exactly like provided image */} - + {/* Eyes: Vertical Ovals */} @@ -145,7 +145,7 @@ const IconSeparator = () => { {/* Right Star/Sparkle - Exactly like provided image */} - + @@ -163,8 +163,8 @@ const About: React.FC = () => { {/* BLOC 1 - HERO & MISSION */}
-

- Notre mission :
démocratiser la science du revenu. +

+ Notre mission :
démocratiser la science du revenu.

Rendre accessible à toutes les organisations B2B une discipline réservée, jusqu’ici, aux scale-ups les plus avancées. @@ -179,15 +179,15 @@ const About: React.FC = () => { {/* BLOC 2 - MANIFESTE (STYLE POÉTIQUE & IMPACTANT - VERSION NOIRE) */} -

+
-
+
- + Manifeste
@@ -206,7 +206,7 @@ const About: React.FC = () => {

Chez Ocobo, nous refusons la confusion, le bruit, les mirages technologiques.

Pour nous, le RevOps n’est pas un métier technique.

-

C’est une discipline stratégique : l’architecture de votre revenu.

+

C’est une discipline stratégique : l’architecture de votre revenu.

{/* Stanza 3 */} @@ -221,11 +221,11 @@ const About: React.FC = () => {

Nous existons pour appeler les choses par leur nom,

ramener de la clarté dans un monde de jargon

et offrir aux organisations un privilège rare :

-

l’expérience d’une croissance simple, saine et maîtrisée.

+

l’expérience d’une croissance simple, saine et maîtrisée.

{/* Stanza 5 - The Invitation */} -
+
{/* Top multi-color line */}
@@ -233,26 +233,26 @@ const About: React.FC = () => {
-
- +
+

à regarder votre machine revenue en face,

-
- +
+

à préférer la vérité opérationnelle aux illusions de performance,

-
- +
+

à faire primer la stratégie sur l’urgence,

-
- +
+

à construire votre revenu non comme un empilement,
@@ -276,7 +276,7 @@ const About: React.FC = () => { alt="Ocobo Logo" className="h-16 md:h-20 w-auto mb-8 object-contain" /> -

La clarté au service du revenu.

+

La clarté au service du revenu.

@@ -291,7 +291,7 @@ const About: React.FC = () => {

L’équipe fondatrice

-

Une équipe 100% senior. Issue des meilleures scale-ups. Construite pour l’impact.

+

Une équipe 100% senior. Issue des meilleures scale-ups. Construite pour l’impact.

Nous ne sommes ni des juniors, ni des exécutants externes. Nous opérons comme une direction Revenue embarquée : exigeante, stratégique, opérationnelle.

@@ -301,12 +301,12 @@ const About: React.FC = () => {
Benjamin Boileux
-

Benjamin Boileux

+

Benjamin Boileux

Architecte RevOps & Associé

12+ ans en Ops, CRM, Product et Revenue Operations (TheFork, Tripadvisor, Yousign). Spécialiste des systèmes et du pilotage opérationnel.

- +
{/* Aude */} @@ -314,12 +314,12 @@ const About: React.FC = () => {
Aude Cadiot
-

Aude Cadiot

+

Aude Cadiot

Architecte RevOps & Associée

Référence française du Revenue Operations (TheFork, Spendesk). Experte du customer journey, des organisations GTM, du scaling d’équipes RevOps.

- +
{/* Corentin */} @@ -327,17 +327,17 @@ const About: React.FC = () => {
Corentin Guérin
-

Corentin Guérin

+

Corentin Guérin

Analyste & Stratège Revenue, Associé

Finance, Deloitte, Business Ops (TheFork). Spécialiste du forecasting, de la performance, des rémunérations variables et du pricing.

- +
-

Trois parcours, une même conviction : la croissance a besoin d’architectes, pas de techniciens.

+

Trois parcours, une même conviction : la croissance a besoin d’architectes, pas de techniciens.

@@ -346,28 +346,28 @@ const About: React.FC = () => {
{/* BLOC 4 - VALEURS */} -
+

Ce qui nous lie

-

Clarté radicale

+

Clarté radicale

Nommer les problèmes. Rendre simple ce qui était obscur.

→ Dire la vérité sur le revenu

-

Simplicité pragmatique

+

Simplicité pragmatique

Moins de complexité. Moins d’outils. Moins de bruit.

→ Une mécanique de précision, pas une usine à gaz

-

Exigence senior

+

Exigence senior

Des profils qui ont vécu les enjeux, les crises, les restructurations.

→ Parler C-level, agir opérationnel

-

Architecture avant la maçonnerie

+

Architecture avant la maçonnerie

Pas d’outil sans intention. Pas d’automatisation sans vision. Il ne suffit pas de connecter les tuyaux, encore faut-il que l'eau circule.

→ La tech suit la stratégie, jamais l’inverse

@@ -386,11 +386,11 @@ const About: React.FC = () => {
{/* BLOC 6 - CTA FINAL */} -
+
-

Parlons de votre machine revenue.

+

Parlons de votre machine revenue.

30 minutes pour éclairer, diagnostiquer, orienter.

-

Zéro détour. Zéro jargon. Rien que la vérité sur votre croissance et vos options.

+

Zéro détour. Zéro jargon. Rien que la vérité sur votre croissance et vos options.

diff --git a/pages/ArticleDetail.tsx b/pages/ArticleDetail.tsx index 2a20e82..0250550 100644 --- a/pages/ArticleDetail.tsx +++ b/pages/ArticleDetail.tsx @@ -2,7 +2,7 @@ import React, { useState, useEffect } from 'react'; import { useParams, Link } from 'react-router'; // Added missing 'Layout' icon to imports from 'lucide-react' import { ArrowLeft, Clock, Calendar, Share2, Linkedin, Twitter, MessageSquare, ArrowRight, CheckCircle2, Layout } from 'lucide-react'; -import Button from '../components/Button'; +import Button from '../components/button-legacy'; const ArticleDetail: React.FC = () => { const { slug } = useParams(); @@ -73,32 +73,32 @@ const ArticleDetail: React.FC = () => { {/* BREADCRUMBS & TOP NAV */}
- + Retour au blog
- - + +
{/* HERO ARTICLE */}
- + {article.category} -

+

{article.title}

- + {article.date}
- + {article.readTime} de lecture
@@ -110,7 +110,7 @@ const ArticleDetail: React.FC = () => { {/* SIDEBAR : SOMMAIRE */}