Le design system de BackTo vise à garantir la cohérence, l'efficacité et la qualité des interfaces utilisateur à travers tous les produits digitaux de l'entreprise. Il doit :

1. Uniformiser l'expérience utilisateur sur toutes les plateformes.
2. Améliorer la collaboration entre designers et développeurs.
3. Réduire les délais de production en fournissant des composants réutilisables.
4. Faciliter l'évolution du système grâce à une documentation claire et un modèle extensible.

1. Atomic Design : Atomes & Molécules
2. Exemples de composants Atomes
3. Exemples de composants Molécules
4. Foundations
5. Décorateurs & Utilitaires
6. Processus de contribution
7. Outils et frameworks
8. Ressources
9. Qualité du code & conventions PSR

Ce design system s'inspire de la méthodologie Atomic Design de Brad Frost :

• Atomes : Les plus petits dénominateurs communs de l'interface (ex : bouton, image, titre, etc.). Ils sont autonomes et servent de base à la construction de composants plus complexes.
• Molécules : Assemblages d'atomes qui forment des groupes fonctionnels cohérents (ex : bloc média + texte, groupe de boutons, carte, etc.).

Pour chaque catégorie, seuls quelques exemples sont listés ci-dessous. Pour la liste exhaustive et la documentation détaillée, consultez les dossiers :

• Tous les atomes
• Toutes les molécules

Voici quelques atomes représentatifs du design system. Retrouvez la liste complète dans le dossier src/Atoms/.

• Button : Bouton principal, avec décorateurs et comportements personnalisables.
• Image : Gestion avancée des images.
• Heading : Titres de différents niveaux.
• Link : Lien hypertexte stylisé.
• Paragraph : Paragraphe de texte.
• ...

Voir tous les atomes →

Les molécules sont des assemblages d'atomes pour des usages plus riches. Retrouvez la liste complète dans le dossier src/Molecules/.

• MediaText : Bloc média + texte.
• Gallery : Galerie d'images.
• Table : Tableaux de données.
• Cover : Bloc image de couverture.
• Header : En-tête de page (à venir ou à compléter)
• Footer : Pied de page (à venir ou à compléter)
• Slider : Carrousel/slider (à venir)
• Onglet : Système d'onglets (à venir)
• Colonnes : Mise en page en colonnes (à venir)
• Breadcrumb : Fil d'Ariane (à venir)
• Pagination : Pagination (à venir)
• ...

Voir toutes les molécules →

Les décorateurs et utilitaires permettent d'enrichir, personnaliser ou étendre le style et le comportement des composants sans dupliquer le code. Ils offrent une approche modulaire pour appliquer des styles, des effets ou des comportements récurrents sur plusieurs composants du design system.

src/Foundations/. Consultez ce dossier pour la liste exhaustive, la documentation et des exemples d'utilisation.

• Espacement :
  • Marges : MarginTop, MarginBottom, MarginLeft, MarginRight
  • Paddings : PaddingTop, PaddingBottom, PaddingLeft, PaddingRight
  • Grilles et gaps : BlockGap, BlockGapHorizontal, BlockGapVertical
• Couleurs :
  • TextColor, BackgroundColor, BorderColor, etc.
• Typographie :
  • FontFamily, FontWeight, TextAlign, TextDecoration, TextFontSize, TextTransform
• Effets :
  • Ombres : ShadowDecorator
  • Bordures : BorderRadius, BorderRadiusTopLeft, BorderRadiusTopRight, BorderRadiusBottomLeft, BorderRadiusBottomRight, BorderColor, etc.
• Flex & Alignement :
  • FlexDecorator, VerticalAlignDecorator, AlignDecorator
• Icônes :
  • IconDecorator, MarkThemeDecorator
• Interactions :
  • FocusDecorator, FocusLinkDecorator, LinkColorHoverDecorator, etc.
• Autres :
  • HasGlobalPaddingDecorator, etc.

Pour les décorateurs spécifiques à un composant, consultez le dossier du composant concerné.

Pour garantir la qualité et la cohérence du design system, suivez ce workflow :

1. Workflow de validation :
   • Design → Développement → Documentation
2. Tests requis :
   • Couverture des tests unitaires et visuels avant intégration.
3. Documentation :
   • Toute nouvelle contribution doit être documentée (README, exemples, etc.)

• Storybook (à intégrer dans le futur) : Pour la documentation interactive des composants.
• Figma : Pour la conception et la validation des maquettes.
• PHP : Composants développés en PHP.
• Tests : Méthodes à définir pour tester et itérer sur les composants.

• FAQ : À compléter pour les utilisateurs internes.
• Liens utiles :
  • Maquettes Figma
  • Dépôt Git principal

Ce projet respecte les standards de codage PSR (notamment PSR-12 et PSR-4 pour les namespaces). Un hook Git pre-commit est automatiquement installé lors de l'installation des dépendances (voir scripts Composer) :

• Il vérifie que le code du dossier src/ respecte les conventions PSR-12.
• Il valide la configuration de l'autoload PSR-4 via Composer.
• Si ces règles ne sont pas respectées, le commit est bloqué et un message d'erreur s'affiche.

Pour installer ou réinstaller les hooks manuellement :

sh git-hooks/install-hooks.sh

Le dossier src/Foundations/ regroupe tous les décorateurs génériques du design system, organisés par fonctionnalité :

• Color : Décorateurs de couleurs (fond, bordure, texte, etc.)
• Effect : Décorateurs d'effets visuels (ombres, bordures, radius, etc.)
• Icon : Décorateurs pour la gestion des icônes
• Interaction : Décorateurs liés aux interactions (focus, hover, etc.)
• Layout : Décorateurs de mise en page (grille, flex, alignements, etc.)
• Spacing : Décorateurs de marges, paddings, gaps, etc.
• Typography : Décorateurs de typographie (polices, tailles, alignements, etc.)

• Les décorateurs de ce dossier sont génériques et peuvent être utilisés par tous les composants du design system.
• Les décorateurs spécifiques à un composant doivent rester dans le dossier du composant concerné.
• Tous les décorateurs respectent la convention PSR-4 : BackTo\DesignSystem\Foundations\...

Voir le README du dossier Foundations pour des exemples concrets d'utilisation directe ou dans un composant.

Ce design system est en évolution. Merci de contribuer à son amélioration !