@wakastellar/ui 0.1.1 → 0.1.2

package/LICENSE

@@ -0,0 +1,17 @@
+GNU AFFERO GENERAL PUBLIC LICENSE
+Version 3, 19 November 2007
+
+Copyright (C) 2025 Wakastellar
+
+This program is free software: you can redistribute it and/or modify
+it under the terms of the GNU Affero General Public License as published by
+the Free Software Foundation, either version 3 of the License, or
+(at your option) any later version.
+
+This program is distributed in the hope that it will be useful,
+but WITHOUT ANY WARRANTY; without even the implied warranty of
+MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+GNU Affero General Public License for more details.
+
+You should have received a copy of the GNU Affero General Public License
+along with this program.  If not, see <https://www.gnu.org/licenses/>.

package/README.md

@@ -1,398 +1,291 @@
-# 🎨 @wakastellar/ui
-
-**Librairie UI étendue de ShadCN compatible TweakCN + i18n pour Next.js avec DataTable ultra-complet**
-
-[![Version](https://img.shields.io/badge/version-0.1.0-blue.svg)](https://github.com/wakastellar/wakastellar-ui)
-[![License](https://img.shields.io/badge/license-MIT-green.svg)](LICENSE)
-[![Next.js](https://img.shields.io/badge/Next.js-15.5.4-black.svg)](https://nextjs.org/)
-[![React](https://img.shields.io/badge/React-19.2.0-blue.svg)](https://reactjs.org/)
-
-## 🚀 Fonctionnalités principales
-
-### 📊 **DataTable Ultra-Complet**
-- **Virtualisation** : Performance optimisée pour de gros volumes de données
-- **Groupement et agrégation** : Regroupement intelligent des lignes
-- **Expansion des lignes** : Affichage de contenu détaillé
-- **Redimensionnement des colonnes** : Ajustement dynamique de la largeur
-- **Réordonnancement** : Glisser-déposer des colonnes
-- **Export/Import multi-formats** : CSV, XLSX, JSON, PDF, XML
-- **Édition inline** : Modification directe des cellules
-- **Sélection avancée** : Single, multiple, range
-- **Filtrage intelligent** : Filtres par type de données
-- **Tri multi-colonnes** : Tri complexe et personnalisé
-- **Pagination avancée** : Navigation optimisée
-- **Thèmes personnalisés** : Personnalisation complète de l'apparence
-- **Menu contextuel** : Actions rapides sur les lignes
-- **Performance optimisée** : Debouncing et lazy loading
-
-### 🎨 **Composants UI**
-- **Composants ShadCN étendus** : Button, Card, Input, Dialog, etc.
-- **Composants personnalisés** : WakaButton, WakaCard, WakaInput, etc.
-- **Thèmes dynamiques** : Basculement entre thèmes en temps réel
-- **Internationalisation** : Support multi-langues avec i18next
-- **Responsive design** : Adaptation mobile et desktop
-- **Accessibilité** : Conformité WCAG 2.1
-
-### 🔧 **Architecture**
-- **TypeScript strict** : Typage complet et sécurisé
-- **Modularité** : Architecture modulaire et réutilisable
-- **Performance** : Optimisations pour la production
-- **Tests** : Tests unitaires et d'intégration
-- **Documentation** : Documentation complète et exemples
-
-## 📦 Installation
+# @wakastellar/ui
 
-```bash
-# Installation via pnpm (recommandé)
-pnpm add @wakastellar/ui
+<div align="center">
 
-# Ou via npm
-npm install @wakastellar/ui
+![npm version](https://img.shields.io/npm/v/@wakastellar/ui?style=for-the-badge&color=blue)
+![npm license](https://img.shields.io/npm/l/@wakastellar/ui?style=for-the-badge)
+![TypeScript](https://img.shields.io/badge/TypeScript-5.5.0-blue?style=for-the-badge&logo=typescript)
+![React](https://img.shields.io/badge/React-19.1.0+-61dafb?style=for-the-badge&logo=react)
+![Next.js](https://img.shields.io/badge/Next.js-15.5.4+-000000?style=for-the-badge&logo=next.js)
+
+**Librairie de composants React professionnelle et modulaire pour applications Next.js modernes**
 
-# Ou via yarn
+[Installation](#installation) • [Composants](#composants) • [Technologies](#technologies) • [Licence](#licence)
+
+</div>
+
+---
+
+## Description
+
+`@wakastellar/ui` est une librairie de composants React complète, typée avec TypeScript strict, conçue pour les applications Next.js modernes. Elle inclut un DataTable avancé basé sur TanStack Table v8, un système de theming dynamique compatible Tailwind CSS et TweakCN, ainsi qu'une collection complète de composants UI prêts pour la production.
+
+### Caractéristiques principales
+
+- ✅ **TypeScript strict** - Typage complet et API type-safe
+- ✅ **SSR/SSG Ready** - Compatible React 18/19 et Next.js 15+
+- ✅ **Production-ready** - Builds ESM + CJS optimisés avec tree-shaking
+- ✅ **Accessible** - Conforme ARIA et navigation clavier complète
+- ✅ **Performant** - Virtualisation, debouncing, memoization
+- ✅ **Themable** - Système de thèmes dynamique et variantes multiples
+- ✅ **i18n Ready** - Support i18next / react-i18next
+- ✅ **Headless UI** - Basé sur Radix UI primitives
+
+---
+
+## Installation
+
+```bash
+npm install @wakastellar/ui
+# ou
+pnpm add @wakastellar/ui
+# ou
 yarn add @wakastellar/ui
 ```
 
-## 🚀 Utilisation rapide
-
-### Configuration de base
-
-```tsx
-// app/layout.tsx
-import { ThemeProvider, I18nProvider } from '@wakastellar/ui'
-import '@wakastellar/ui/styles'
-
-export default function RootLayout({ children }) {
-  return (
-    <html lang="fr">
-      <body>
-        <ThemeProvider>
-          <I18nProvider>
-            {children}
-          </I18nProvider>
-        </ThemeProvider>
-      </body>
-    </html>
-  )
-}
-```
+### Styles CSS
 
-### DataTable basique
-
-```tsx
-import { DataTable, ColumnDef } from '@wakastellar/ui'
-
-interface User {
-  id: string
-  name: string
-  email: string
-  status: 'active' | 'inactive'
-}
-
-const columns: ColumnDef<User>[] = [
-  {
-    accessorKey: 'name',
-    header: 'Nom',
-  },
-  {
-    accessorKey: 'email',
-    header: 'Email',
-  },
-  {
-    accessorKey: 'status',
-    header: 'Statut',
-  },
-]
-
-export default function UsersTable() {
-  const data: User[] = [
-    { id: '1', name: 'John Doe', email: 'john@example.com', status: 'active' },
-    { id: '2', name: 'Jane Smith', email: 'jane@example.com', status: 'inactive' },
-  ]
-
-  return (
-    <DataTable
-      data={data}
-      columns={columns}
-      searchable
-      pagination
-    />
-  )
-}
+```ts
+import "@wakastellar/ui/dist/ui.css"
 ```
 
-### DataTable avancé
-
-```tsx
-import { DataTableAdvanced, ColumnDef } from '@wakastellar/ui'
-
-export default function AdvancedTable() {
-  return (
-    <DataTableAdvanced
-      data={data}
-      columns={columns}
-      // Virtualisation pour de gros volumes
-      virtualization={{
-        type: 'dynamic',
-        itemHeight: 50,
-        overscan: 5
-      }}
-      // Groupement des données
-      grouping={{
-        enabled: true,
-        defaultGrouping: ['status']
-      }}
-      // Expansion des lignes
-      rowExpansion={{
-        enabled: true,
-        render: ({ row }) => <UserDetails user={row.original} />
-      }}
-      // Export/Import
-      enableExport={{
-        formats: ['csv', 'xlsx', 'pdf'],
-        filename: 'users-export'
-      }}
-      enableImport={{
-        formats: ['csv', 'xlsx'],
-        onImport: (data) => console.log('Données importées:', data)
-      }}
-      // Édition inline
-      edit={{
-        enabled: true,
-        mode: 'cell',
-        onSave: (row, values) => console.log('Sauvegardé:', values)
-      }}
-      // Thème personnalisé
-      theme={{
-        colors: {
-          primary: '#3b82f6',
-          secondary: '#64748b'
-        },
-        spacing: {
-          sm: '0.5rem',
-          md: '1rem'
-        }
-      }}
-      // Performance
-      performance={{
-        disableAnimations: false,
-        renderLimit: 100,
-        filterDebounceMs: 300
-      }}
-    />
-  )
-}
-```
+### Peer Dependencies
 
-## 🎨 Thèmes
+La librairie nécessite les dépendances suivantes (à installer si ce n'est pas déjà fait) :
 
-### Thème par défaut
+- `react` >= 19.1.0
+- `react-dom` >= 18.0.0
+- `next` >= 15.5.4 (pour Next.js)
+- `react-hook-form` >= 7.0.0 (optionnel, pour certains composants)
 
-```tsx
-import { ThemeProvider } from '@wakastellar/ui'
+---
 
-export default function App() {
-  return (
-    <ThemeProvider theme="default">
-      <YourApp />
-    </ThemeProvider>
-  )
-}
-```
+## Technologies
 
-### Thème personnalisé
-
-```tsx
-const customTheme = {
-  colors: {
-    primary: '#3b82f6',
-    secondary: '#64748b',
-    accent: '#f59e0b'
-  },
-  spacing: {
-    sm: '0.5rem',
-    md: '1rem',
-    lg: '1.5rem'
-  },
-  typography: {
-    fontFamily: 'Inter, sans-serif',
-    fontSize: {
-      sm: '0.875rem',
-      md: '1rem',
-      lg: '1.125rem'
-    }
-  }
-}
-
-<ThemeProvider theme={customTheme}>
-  <YourApp />
-</ThemeProvider>
-```
+### Core
 
-## 🌍 Internationalisation
-
-```tsx
-import { I18nProvider } from '@wakastellar/ui'
-
-const translations = {
-  fr: {
-    'table.search': 'Rechercher...',
-    'table.noData': 'Aucune donnée',
-    'table.loading': 'Chargement...'
-  },
-  en: {
-    'table.search': 'Search...',
-    'table.noData': 'No data',
-    'table.loading': 'Loading...'
-  }
-}
-
-<I18nProvider translations={translations} defaultLanguage="fr">
-  <YourApp />
-</I18nProvider>
-```
+- **React** 19.1.0+
+- **TypeScript** 5.5.0
+- **Next.js** 15.5.4+
+- **Tailwind CSS** 3.4.0
 
-## 📊 Composants DataTable
-
-### DataTable (Basique)
-- Pagination
-- Tri
-- Recherche
-- Filtres
-- Sélection
-
-### DataTableAdvanced (Complet)
-- Toutes les fonctionnalités du DataTable basique
-- Virtualisation
-- Groupement
-- Expansion des lignes
-- Redimensionnement des colonnes
-- Réordonnancement
-- Export/Import
-- Édition inline
-- Thèmes personnalisés
-- Performance optimisée
-
-## 🧪 Tests
+### Build & Tooling
 
-```bash
-# Tests unitaires
-pnpm test
+- **Vite** 7.1.9 - Build tool
+- **vitest** 3.2.4 - Testing framework
+- **eslint** - Linting
+- **prettier** - Code formatting
 
-# Tests en mode watch
-pnpm test:watch
+### Principales dépendances
 
-# Tests avec couverture
-pnpm test:coverage
+- **@radix-ui/react-*** - Composants headless UI
+  - `@radix-ui/react-dialog` ^1.0.5
+  - `@radix-ui/react-select` ^2.0.0
+  - `@radix-ui/react-dropdown-menu` ^2.0.6
+  - `@radix-ui/react-tabs` ^1.0.4
+  - `@radix-ui/react-toast` ^1.1.5
+  - Et 20+ autres primitives Radix UI
 
-# Interface de tests
-pnpm test:ui
-```
+- **@tanstack/react-table** ^8.21.3 - Moteur DataTable
+- **@tanstack/react-virtual** ^3.13.12 - Virtualisation
+- **i18next** ^23.7.0 - Internationalisation
+- **date-fns** ^4.1.0 - Gestion des dates
+- **lucide-react** ^0.293.0 - Icônes
+- **class-variance-authority** ^0.7.1 - Variants
+- **tailwind-merge** ^3.3.1 - Fusion de classes Tailwind
+- **tailwind-variants** ^0.1.18 - Variants Tailwind
 
-## 🚀 Développement
+---
 
-```bash
-# Installation des dépendances
-pnpm install
+## Composants
+
+### Data & Tables
+
+- **DataTable** - Table de données basique
+- **DataTableAdvanced** - Table de données avancée avec :
+  - Tri multi-colonnes
+  - Filtrage et recherche globale
+  - Pagination client/serveur
+  - Sélection simple/multiple
+  - Groupement et agrégation
+  - Expansion des lignes
+  - Édition inline avec validation
+  - Export/Import (CSV, XLSX, JSON, PDF)
+  - Virtualisation pour grandes quantités de données
+
+### Formulaires
+
+- **Button** - Boutons avec variantes et tailles
+- **Input** - Champs de saisie texte
+- **Textarea** - Zones de texte multilignes
+- **Checkbox** - Cases à cocher
+- **RadioGroup** - Groupes de boutons radio
+- **Switch** - Interrupteurs toggle
+- **Select** - Listes déroulantes
+- **Slider** - Curseurs de sélection
+- **InputOTP** - Champs OTP
+- **Label** - Labels de formulaire
+- **Form** - Intégration React Hook Form
+
+### DateTime
+
+- **Calendar** - Calendrier de sélection de date
+- **WakaDateTimePicker** - Sélecteur de date/heure complet avec :
+  - Variants : date, time, datetime, range, multiple
+  - Presets configurables
+  - Validation avancée
+  - Support multi-langues
+  - Intégration React Hook Form
+
+### Navigation
+
+- **Tabs** - Onglets
+- **Menubar** - Barre de menu
+- **NavigationMenu** - Menu de navigation
+- **DropdownMenu** - Menus déroulants
+- **ContextMenu** - Menus contextuels
+- **Command** - Palette de commandes (cmd+k)
+- **WakaAdmincrumb** - Fil d'Ariane admin
+
+### Overlays
+
+- **Dialog** - Modales
+- **AlertDialog** - Dialogues d'alerte
+- **Popover** - Popovers
+- **Tooltip** - Info-bulles
+- **HoverCard** - Cartes au survol
+- **Sheet** - Panneaux latéraux
+
+### Feedback
+
+- **Toast** / **Toaster** - Notifications toast
+- **Alert** - Alertes
+- **Progress** - Barres de progression
+- **Skeleton** - Placeholders de chargement
+- **WakaNotifications** - Système de notifications
+- **WakaSpinner** - Indicateurs de chargement
+
+### Layout
+
+- **Card** - Cartes
+- **Separator** - Séparateurs
+- **ScrollArea** - Zones de défilement
+- **AspectRatio** - Ratios d'aspect
+- **Collapsible** - Éléments repliables
+- **Accordion** - Accordéons
+
+### Media
+
+- **Avatar** - Avatars utilisateurs
+- **WakaCarousel** - Carrousel d'images avec :
+  - Navigation clavier/tactile
+  - Mode plein écran
+  - Téléchargement et partage
+  - Autoplay avec contrôles
+  - Miniatures et indicateurs
+
+### Typography
+
+- **Typography** - Composants typographiques
+- **Code** - Affichage de code avec coloration syntaxique
+- **Heading** - Titres sémantiques h1-h6
+- **Text** - Textes avec variantes
+
+### Affichage
+
+- **Badge** - Badges et étiquettes
+- **Table** - Tables HTML de base
+- **Tabs** - Onglets
+
+### Configuration
+
+- **LanguageSelector** - Sélecteur de langue avec i18n
+- **ThemeSelector** - Sélecteur de thème
+- **WakaThemeManager** - Gestionnaire de thèmes TweakCN
+- **WakaThemeCreator** - Créateur de thèmes interactif
 
-# Développement en mode watch
-pnpm dev
+---
 
-# Build de production
-pnpm build
+## API
 
-# Démo locale
-pnpm demo
-```
+Tous les composants sont typés avec TypeScript. Consultez les définitions de types dans `dist/index.d.ts` pour la documentation complète de l'API.
 
-## 📁 Structure du projet
+### Entry Points
 
-```
-@wakastart/ui/
-├── src/
-│   ├── components/          # Composants UI
-│   │   ├── DataTable/       # DataTable et composants avancés
-│   │   ├── ui/              # Composants de base
-│   │   └── ...
-│   ├── contexts/           # Providers (Theme, I18n, Config)
-│   ├── hooks/              # Hooks personnalisés
-│   ├── utils/              # Fonctions utilitaires
-│   ├── styles/             # Styles CSS/Tailwind
-│   └── types/              # Types TypeScript
-├── demo/                   # Application de démonstration
-├── tests/                  # Tests unitaires
-└── dist/                   # Build de production
-```
+- **Import principal** : `import { Component } from "@wakastellar/ui"`
+- **Styles** : `import "@wakastellar/ui/dist/ui.css"`
+- **Exports** : ESM (`dist/index.es.js`) et CJS (`dist/index.cjs.js`)
 
-## 🔧 Configuration
-
-### Tailwind CSS
-
-```js
-// tailwind.config.js
-module.exports = {
-  content: [
-    './src/**/*.{js,ts,jsx,tsx}',
-    './node_modules/@wakastellar/ui/**/*.{js,ts,jsx,tsx}'
-  ],
-  theme: {
-    extend: {
-      // Configuration personnalisée
-    }
-  },
-  plugins: [
-    require('@wakastellar/ui/tailwind-plugin')
-  ]
-}
-```
+---
 
-### TypeScript
-
-```json
-// tsconfig.json
-{
-  "compilerOptions": {
-    "strict": true,
-    "esModuleInterop": true,
-    "skipLibCheck": true
-  }
-}
-```
+## Bonnes pratiques
 
-## 📚 Documentation
+### Performance
 
-- [Guide d'installation](docs/installation.md)
-- [Composants DataTable](docs/datatable.md)
-- [Thèmes et personnalisation](docs/themes.md)
-- [Internationalisation](docs/i18n.md)
-- [API Reference](docs/api.md)
-- [Exemples](demo/)
+- Utilisez la virtualisation pour les grandes quantités de données (DataTable)
+- Debouncez les filtres et recherches
+- Mémoïsez les colonnes et callbacks dans les DataTables
 
-## 🤝 Contribution
+### Accessibilité
 
-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
+- Fournissez des labels descriptifs pour tous les champs
+- Validez la navigation clavier
+- Respectez les standards ARIA
 
-## 📄 Licence
+### Sécurité
 
-Ce projet est sous licence AGPL3. Voir le fichier [LICENSE](LICENSE) pour plus de détails.
+- Validez et sanitisez tout contenu injecté dans les cellules (XSS)
+- Ne loggez pas d'informations sensibles
+- Utilisez des validations côté serveur en complément
 
-## 🆘 Support
+### SSR/Next.js
+
+- Évitez l'accès direct à `window` côté serveur
+- Initialisez les données côté client si nécessaire
+- Utilisez les composants avec `"use client"` pour l'interactivité
+
+---
 
+## Tests & Qualité
 
-## 🎯 Roadmap
+La librairie est testée avec :
 
-- [ ] Composants de formulaires avancés
-- [ ] Graphiques et visualisations
-- [ ] Composants de navigation
-- [ ] Système de notifications
-- [ ] Composants de calendrier
-- [ ] Intégration avec des APIs externes
+- **vitest** 3.2.4 - Tests unitaires
+- **@testing-library/react** - Tests de composants
+- **@vitest/coverage-v8** - Couverture de code
+- **TypeScript strict mode** - Validation de types
+- **eslint** - Linting
+- **prettier** - Formatage
+
+**Recommandations pour l'intégration** :
+
+- Testez les cas critiques (tri, filtres, pagination, sélection)
+- Validez l'accessibilité (navigation clavier, lecteurs d'écran)
+- Vérifiez le tree-shaking (ESM) et la taille des bundles
+- Exécutez `tsc --noEmit` en CI pour valider les types
+
+---
+
+## Distribution
+
+- **Format** : ESM + CJS
+- **TypeScript** : Définitions de types incluses
+- **Sourcemaps** : Incluses pour le debugging
+- **Tree-shaking** : Supporté via ESM
+- **Versioning** : SemVer (major.minor.patch)
 
 ---
 
-**Développé avec ❤️ par [WakaStellar](https://wakastellar.com)**
+## Licence
+
+Ce projet est publié sous licence **AGPL-3.0**.
+
+Voir le fichier [LICENSE](./LICENSE) pour plus de détails.
+
+---
+
+<div align="center">
+
+**Fait avec ❤️ par Wakastellar**
 
+</div>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wakastellar/ui",
-  "version": "0.1.1",
+  "version": "0.1.2",
   "description": "UI Library compatible TweakCN + i18n pour Next.js",
   "keywords": [
     "ui",