🎨 Steerfox UI Library

Bibliothèque graphique moderne et réutilisable basée sur React et TypeScript, conçue pour les projets Steerfox avec un design glassmorphique élégant.

⚠️ ATTENTION : Cette bibliothèque est sous licence propriétaire Steerfox. Usage exclusivement réservé à Steerfox et ses partenaires autorisés.

✨ Caractéristiques

• 🎯 Composants TypeScript - Typage complet pour une meilleure DX
• 🎨 Design Glassmorphique - Effets visuels modernes et élégants
• 🌙 Mode Sombre - Support natif du thème sombre
• 📱 Responsive - Optimisé pour tous les écrans
• 🎭 Variants - Multiples variantes pour chaque composant
• 🔧 Personnalisable - Variables CSS facilement modifiables
• 📦 Tree-shakable - Import sélectif des composants

📦 Installation

npm install @steerfox/ui-library
# ou
yarn add @steerfox/ui-library
# ou
pnpm add @steerfox/ui-library

🚀 Utilisation Rapide

import { Button, Card, Badge } from '@steerfox/ui-library'
import '@steerfox/ui-library/dist/index.css'

function App() {
  return (
    <Card variant="glass">
      <h1>Bienvenue dans Steerfox UI</h1>
      <Button variant="glass-primary">
        Commencer
      </Button>
      <Badge variant="success">Nouveau</Badge>
    </Card>
  )
}

📚 Composants Disponibles

🔘 Composants UI de Base

• Button - Boutons avec variants glassmorphiques
• Card - Cartes avec effets de verre
• Input - Champs de saisie stylisés
• Badge - Badges colorés pour les statuts

📊 Composants de Graphiques

• GaugeBar - Barres de progression pour métriques

🧭 Composants de Layout

• Navbar - Barre de navigation responsive

💫 Composants de Feedback

• LoadingSpinner - Indicateurs de chargement

🎨 Système de Design

Palette de Couleurs

La bibliothèque utilise un système de couleurs cohérent :

• Primaire : #df6535 (Orange Steerfox)
• Secondaire : #262d6f (Bleu Steerfox)
• Succès : #1bee30
• Avertissement : #f39427
• Erreur : #dc2626

Effets Glassmorphiques

/* Classes disponibles */
.glass          /* Effet standard */
.glass-subtle   /* Effet subtil */
.glass-card     /* Pour les cartes */
.glass-btn      /* Pour les boutons */

📖 Documentation des Composants

Button

import { Button } from '@steerfox/ui-library'

// Variants disponibles
<Button variant="default">Défaut</Button>
<Button variant="glass">Glass</Button>
<Button variant="glass-primary">Glass Primary</Button>
<Button variant="outline">Outline</Button>
<Button variant="ghost">Ghost</Button>

// Tailles disponibles
<Button size="sm">Petit</Button>
<Button size="default">Normal</Button>
<Button size="lg">Grand</Button>
<Button size="xl">Très Grand</Button>

Card

import { Card, CardHeader, CardTitle, CardContent } from '@steerfox/ui-library'

<Card variant="glass">
  <CardHeader>
    <CardTitle>Titre de la carte</CardTitle>
  </CardHeader>
  <CardContent>
    Contenu de la carte
  </CardContent>
</Card>

Badge

import { Badge } from '@steerfox/ui-library'

<Badge variant="success">Succès</Badge>
<Badge variant="warning">Avertissement</Badge>
<Badge variant="good">Bon</Badge>
<Badge variant="bad">Mauvais</Badge>

GaugeBar

import { GaugeBar } from '@steerfox/ui-library'

<GaugeBar
  value={75}
  max={100}
  label="Performance"
  variant="success"
  size="md"
/>

🛠️ Développement

Prérequis

• Node.js 18+
• npm/yarn/pnpm

Installation des dépendances

npm install

Scripts disponibles

npm run build      # Build de production
npm run dev        # Mode développement avec watch
npm run test       # Lancer les tests

Structure du projet

src/
├── components/
│   ├── ui/           # Composants UI de base
│   ├── charts/       # Composants de graphiques
│   ├── layout/       # Composants de layout
│   └── feedback/     # Composants de feedback
├── styles/
│   ├── variables.css    # Variables CSS
│   ├── base.css        # Styles de base
│   ├── glassmorphism.css # Effets glassmorphiques
│   ├── components.css   # Styles des composants
│   └── index.css       # Point d'entrée des styles
└── utils/
    └── cn.ts           # Utilitaire de classes CSS

🤝 Contribution

1. Fork le projet
2. Créer une branche feature (git checkout -b feature/AmazingFeature)
3. Commit les changements (git commit -m 'Add some AmazingFeature')
4. Push vers la branche (git push origin feature/AmazingFeature)
5. Ouvrir une Pull Request

📄 Licence

⚠️ LICENCE PROPRIÉTAIRE STEERFOX

Ce projet est sous licence propriétaire exclusive à Steerfox.

🔒 Restrictions d'utilisation :

• ✅ Usage autorisé : Steerfox et ses filiales, employés et contractants autorisés uniquement
• ❌ Usage interdit : Toute utilisation par des tiers sans autorisation écrite explicite
• ❌ Redistribution interdite : Aucune reproduction, distribution ou publication autorisée
• ❌ Modification interdite : Reverse engineering, décompilation ou désassemblage strictement prohibés

📞 Contact pour licences

Pour toute demande de licence ou d'autorisation d'utilisation, contactez : [email protected]

Voir le fichier LICENSE pour les détails complets des termes et conditions.

🏢 Steerfox

Développé avec ❤️ par l'équipe Steerfox pour créer des interfaces utilisateur modernes et élégantes.