@axproo/ui

Bibliothèque de composants UI réutilisables pour les projets Axproo.

Elle fournit un ensemble de composants Vue 3 modernes, typés en TypeScript, conçus pour être :

• ⚡ rapides à intégrer
• 🎨 personnalisables
• ♻️ réutilisables
• 🧩 cohérents (design system unifié)

Installation

npm install @axproo/ui

🧠 Philosophie

Chaque composant suit ces principes :

• Props claires et typées
• Comportement prévisible
• Design cohérent (variants centralisés)
• Utilisation simple sans surconfiguration
• Extensible si besoin

📁 Structure des composants

@axproo/ui/
│
├── ui/
│   ├── button/
│   ├── alert/
│   ├── form/
│   ├── spinner/
│   └── ...
│
├── types/
├── utils/
└── index.ts

🧩 Liste des composants

| Composant | Description | | ------------ | ------------------------ | | ui/button | Boutons avec variantes | | ui/alert | Messages d’alerte | | ui/form | Champs et formulaires | | ui/spinner | Indicateur de chargement |

🔄 ui/spinner

Composant d’indicateur de chargement.

✨ Fonctionnalités

• Affichage conditionnel
• Mode inline ou overlay
• Texte personnalisable
• Variantes de couleur
• Animation fluide

⚙️ Props

| Nom | Type | Défaut | Description | | ----------- | --------- | ----------------- | -------------------- | | isLoading | boolean | false | Active le spinner | | overlay | boolean | false | Affichage en overlay | | spinTitle | string | "Chargement..." | Texte affiché | | variant | string | "primary" | Couleur du spinner |

🎨 Variantes disponibles

primary
success
danger
warning

💻 Utilisation

<Spinner :isLoading="true" />

🔹 Avec texte

<Spinner 
  :isLoading="true" 
  spinTitle="Chargement en cours..." 
/>

🔹 Mode overlay

<Spinner 
  :isLoading="true" 
  :overlay="true" 
/>

🔹 Variante couleur

<Spinner 
  :isLoading="true" 
  variant="success" 
/>

🧠 Comportement

• Si isLoading = false → rien n’est affiché
• Si overlay = true → le spinner couvre le parent
• Sinon → affichage inline

🧱 Intégration recommandée

Cas 1 : Chargement page entière

<div class="relative">
  <Spinner :isLoading="loading" overlay />
</div>

Cas 2 : Chargement local (table, card…)

<Spinner :isLoading="loading" />

🧪 Typage

export interface SpinnerProps {
  isLoading?: boolean;
  overlay?: boolean;
  spinTitle?: string;
  variant?: 'primary' | 'success' | 'danger' | 'warning';
}

🎯 Bonnes pratiques (@axproo/ui)

✅ À faire

• Utiliser les variants fournis
• Centraliser les styles
• Garder les composants simples

❌ À éviter

• Hardcoder les couleurs
• Modifier directement les composants
• Ajouter de la logique métier dans les UI

🧩 Pattern de création d’un composant

Chaque composant doit respecter :

1. Props typées (types/)
2. Variantes centralisées
3. computed pour la logique UI
4. Template simple et lisible

🔧 Roadmap

[] Dark mode [] Design tokens [] Composants avancés (modal, table, dropdown) [] Storybook

📌 Conclusion

@axproo/ui est conçu pour accélérer le développement tout en garantissant :

• cohérence visuelle
• maintenabilité
• productivité équipe