@kpt/shared-front

Bibliothèque de composants React réutilisables avec design system cohérent.

🚀 Installation

npm install @kpt/shared-front

📦 Utilisation

Import des styles

import '@kpt/shared-front/styles'

Import des composants

import { Button, Card, Input, Badge, Avatar } from '@kpt/shared-front'

Import des hooks

import { useIsMobile, useTheme } from '@kpt/shared-front'

Import des utilitaires

import { cn } from '@kpt/shared-front'

Exemple d'utilisation

import React from 'react'
import { 
  Button, 
  Card, 
  CardContent, 
  CardHeader, 
  CardTitle,
  useTheme 
} from '@kpt/shared-front'

function MyComponent() {
  const { theme, setTheme } = useTheme()

  return (
    <Card>
      <CardHeader>
        <CardTitle>Mon Application</CardTitle>
      </CardHeader>
      <CardContent>
        <Button onClick={() => setTheme('dark')}>
          Passer en mode sombre
        </Button>
      </CardContent>
    </Card>
  )
}

🎨 Design System

Cette bibliothèque utilise :

• Tailwind CSS pour le styling
• shadcn/ui comme base de composants
• Variables CSS pour le thème (clair/sombre)
• TypeScript pour la sécurité des types

🛠️ Développement

# Installer les dépendances
npm install

# Démarrer le serveur de développement
npm run dev

# Aperçu des composants (Storybook-like)
npm run storybook

# Build de la bibliothèque
npm run build

# Vérification des types
npm run type-check

🎨 Aperçu des composants

Pour visualiser tous les composants disponibles :

npm run storybook

Puis ouvrez votre navigateur sur http://localhost:6006

L'aperçu inclut :

• 🎨 Composants UI - Aperçu complet de tous les composants avec exemples d'usage
• Boutons - Toutes les variantes et tailles
• Cartes - Différents layouts et utilisations
• Formulaires - Inputs, labels, états
• Feedback - Badges, avatars, alertes, skeletons
• Layout - Headers, navigation, grilles, responsive

📁 Structure

src/
├── components/          # Composants réutilisables
│   ├── ui/             # Composants UI de base (shadcn/ui)
│   ├── layout/         # Composants de mise en page
│   ├── navigation/     # Composants de navigation
│   └── data/           # Composants de données
├── styles/             # Styles globaux
├── lib/                # Utilitaires
└── types/              # Types TypeScript

🎯 Composants disponibles

UI de base (shadcn/ui)

• Button - Boutons avec variantes (default, secondary, outline, destructive, ghost, link)
• Card - Cartes avec hiérarchie de niveaux (0-4) utilisant les couleurs shadcn
• NestedCard - Cartes avec hiérarchie automatique
• Input - Champs de saisie
• Label - Labels pour les formulaires
• Textarea - Zones de texte multi-lignes
• Badge - Badges avec variantes
• Avatar - Avatars avec image et fallback
• Alert - Alertes avec title et description
• Separator - Séparateurs visuels
• Skeleton - Composants de chargement
• ThemeToggle - Basculement thème clair/sombre
• Calendar - Calendrier de base pour sélection de dates
• DatePicker - Sélecteur de date unique avec popover
• DateRangePicker - Sélecteur de plage de dates avec popover
• Checkbox - Cases à cocher
• Select - Sélecteurs déroulants
• DropdownMenu - Menus contextuels
• Tabs - Navigation par onglets
• Tooltip - Infobulles d'aide
• Popover - Panneaux contextuels
• Toggle - Boutons de basculement
• ToggleGroup - Groupes de boutons de basculement
• Breadcrumb - Navigation hiérarchique
• Table - Affichage de données tabulaires
• Drawer - Panneaux latéraux mobiles
• Sheet - Panneaux latéraux
• Sonner - Notifications toast

Business Components

• WalletLinkingManager - Interface for linking copy wallets to source wallets
• WalletForm - Form component for creating and editing wallets (copy/source)
• WalletManager - Complete wallet management system with CRUD operations

Hooks utilitaires

• useIsMobile - Détection responsive
• useTheme - Gestion du thème

Utilitaires

• cn - Fonction pour fusionner les classes CSS

🎨 Hiérarchie des cartes

Le système de cartes utilise une hiérarchie de 5 niveaux basée sur les couleurs shadcn/ui :

Niveaux disponibles

• Niveau 0 - bg-muted/20 - Progression de 0% (légèrement différencié du background)
• Niveau 1 - bg-muted/40 - Progression de 20% (progression logique)
• Niveau 2 - bg-muted/60 - Progression de 40% (teinte marquée)
• Niveau 3 - bg-muted/80 - Progression de 60% (teinte très marquée)
• Niveau 4 - bg-muted - Progression de 100% (teinte complète)

Bordures

Toutes les cartes utilisent des bordures plus marquées (border-2) avec une opacité croissante selon le niveau :

• Niveau 0 - border-border/60
• Niveau 1 - border-border/70
• Niveau 2 - border-border/80
• Niveau 3 - border-border/90
• Niveau 4 - border-border

Utilisation

Hiérarchie des cartes

// Cartes avec niveaux manuels
<Card level={0}>Carte niveau 0</Card>
<Card level={1}>Carte niveau 1 (défaut)</Card>
<Card level={2}>Carte niveau 2</Card>

// Hiérarchie automatique avec NestedCard
<Card level={0}>
  <CardContent>

Sélecteurs de date

// DatePicker - Sélection de date unique
<DatePicker
  date={selectedDate}
  onDateChange={setSelectedDate}
  placeholder="Choisir une date"
/>

// DateRangePicker - Sélection de plage
<DateRangePicker
  dateRange={dateRange}
  onDateRangeChange={setDateRange}
  placeholder="Du... au..."
/>

// Calendrier simple
<Calendar
  mode="single"
  selected={date}
  onSelect={setDate}
/>

#### Gestion des wallets
```tsx
// WalletManager - Gestion complète des wallets
<WalletManager
  wallets={wallets}
  onCreateWallet={handleCreateWallet}
  onUpdateWallet={handleUpdateWallet}
  onDeleteWallet={handleDeleteWallet}
  onToggleWalletStatus={handleToggleStatus}
/>

// WalletForm - Formulaire de création/édition
<WalletForm
  wallet={editingWallet}
  onSave={handleSaveWallet}
  onCancel={handleCancel}
/>

// WalletLinkingManager - Liaison des wallets
<WalletLinkingManager
  copyWallets={copyWallets}
  sourceWallets={sourceWallets}
  walletLinks={walletLinks}
  onLinkWallets={handleLinkWallets}
  onUnlinkWallets={handleUnlinkWallets}
  onUpdateLinkSettings={handleUpdateLinkSettings}
/>

<NestedCard>Niveau 1 automatique</NestedCard>
<NestedCard>Niveau 2 automatique</NestedCard>

🔧 Configuration requise

• React 19+
• TypeScript
• Tailwind CSS