Twig Components Library

Une bibliothèque de composants Twig headless (sans style) inspirée de Radix UI et Headless UI, avec interactivité via Stimulus.

🎯 Objectif

Créer des composants UI réutilisables pour Symfony/Twig qui :

• Ne forcent aucun style (headless)
• Sont accessibles par défaut (ARIA, navigation clavier)
• Fonctionnent avec n'importe quel framework CSS (Tailwind, Bootstrap, etc.)
• Utilisent Stimulus pour l'interactivité légère

🚀 Installation

# Installer les dépendances
composer install

# Démarrer le serveur
symfony server:start

# Ou avec PHP
php -S localhost:8000 -t public/

📦 Composants disponibles

✅ Alert

Affiche des messages importants (info, success, warning, error)

<twig:Alert:Alert variant="success" dismissible>
  Votre action a réussi !
</twig:Alert:Alert>

✅ Accordion

Sections collapsibles avec modes single/multiple

<twig:Accordion:Accordion type="single">
  <twig:Accordion:AccordionItem value="item1" title="Section 1">
    Contenu...
  </twig:Accordion:AccordionItem>
</twig:Accordion:Accordion>

🎨 Démos

Accédez aux démos après avoir démarré le serveur :

• Index : http://localhost:8000/demo
• Alert : http://localhost:8000/demo/alert
• Accordion : http://localhost:8000/demo/accordion

📚 Documentation

Consultez COMPONENTS.md pour la documentation complète de chaque composant.

🏗️ Architecture

src/
├── Twig/
│   └── Components/          # Classes PHP des composants
│       ├── Alert.php
│       ├── Accordion.php
│       └── AccordionItem.php
templates/
└── components/              # Templates Twig
    ├── Alert.html.twig
    ├── Accordion.html.twig
    └── AccordionItem.html.twig
assets/
└── controllers/             # Controllers Stimulus
    ├── alert_controller.js
    └── accordion_controller.js

💡 Philosophie

Headless

Les composants ne contiennent aucun style par défaut. Vous gardez le contrôle total :

<twig:Alert:Alert class="bg-blue-100 border border-blue-500 p-4">
  Stylisez comme vous voulez
</twig:Alert:Alert>

Accessible

ARIA attributes et navigation clavier automatiques :

• role, aria-expanded, aria-controls, etc.
• Navigation avec ↑↓, Home/End, Enter/Space

Composable

Les composants s'imbriquent naturellement :

<twig:Accordion:Accordion>
  <twig:Accordion:AccordionItem title="Contient une alerte">
    <twig:Alert:Alert variant="info">Imbrication naturelle</twig:Alert:Alert>
  </twig:Accordion:AccordionItem>
</twig:Accordion:Accordion>

🔮 Prochains composants

• Dialog / Modal
• Dropdown Menu
• Tabs
• Tooltip
• Badge
• Card
• Toast/Notifications
• Select

🤝 Pourquoi ce projet ?

React dispose de nombreuses bibliothèques de composants headless (Radix UI, Headless UI, etc.) qui fournissent la logique et l'accessibilité sans imposer de style.

Cette bibliothèque apporte le même concept à l'écosystème Symfony/Twig :

• Markup sémantique et accessible
• Interactivité via Stimulus (léger et performant)
• Freedom totale sur le design
• Réutilisabilité entre projets

📝 Licence

Propriétaire (à définir)