npm package: @kpt_odelf/shared-front
Description: Bibliothèque de composants React réutilisables avec design system cohérent
Author: KPT Team
Latest version: 1.0.1

# @kpt/shared-front

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

## 🚀 Installation

```bash
npm install @kpt/shared-front
```

## 📦 Utilisation

### Import des styles

```tsx
import '@kpt/shared-front/styles'
```

### Import des composants

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

### Import des hooks

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

### Import des utilitaires

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

### Exemple d'utilisation

```tsx
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

```bash
# 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 :

```bash
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
```tsx
// 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
```tsx
// 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>
  </CardContent>
</Card>
```

## 🔧 Configuration requise

- React 19+
- TypeScript
- Tailwind CSS