@wakastellar/ui 0.1.3 → 0.1.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (81) hide show
  1. package/README.md +403 -199
  2. package/dist/blocks/activity-timeline/index.d.ts +73 -0
  3. package/dist/blocks/calendar-view/index.d.ts +56 -0
  4. package/dist/blocks/chat/index.d.ts +87 -0
  5. package/dist/blocks/dashboard/index.d.ts +92 -0
  6. package/dist/blocks/empty-states/index.d.ts +44 -0
  7. package/dist/blocks/error-pages/index.d.ts +52 -0
  8. package/dist/blocks/faq/index.d.ts +54 -0
  9. package/dist/blocks/file-manager/index.d.ts +81 -0
  10. package/dist/blocks/header/index.d.ts +86 -0
  11. package/dist/blocks/i18n-editor/index.d.ts +63 -0
  12. package/dist/blocks/kanban-board/index.d.ts +77 -0
  13. package/dist/blocks/landing/index.d.ts +101 -0
  14. package/dist/blocks/login/index.d.ts +12 -1
  15. package/dist/blocks/login/types.d.ts +46 -7
  16. package/dist/blocks/pricing/index.d.ts +60 -0
  17. package/dist/blocks/profile/index.d.ts +98 -0
  18. package/dist/blocks/settings/index.d.ts +62 -0
  19. package/dist/blocks/sidebar/index.d.ts +151 -0
  20. package/dist/blocks/theme-creator-block/index.d.ts +86 -0
  21. package/dist/blocks/user-management/index.d.ts +95 -0
  22. package/dist/blocks/wizard/index.d.ts +88 -0
  23. package/dist/charts.d.ts +17 -0
  24. package/dist/components/DataTable/DataTableBody.d.ts +70 -0
  25. package/dist/components/DataTable/DataTableCell.d.ts +38 -0
  26. package/dist/components/DataTable/DataTableConflictResolver.d.ts +45 -0
  27. package/dist/components/DataTable/DataTableFilterBuilder.d.ts +14 -0
  28. package/dist/components/DataTable/DataTableHeader.d.ts +50 -0
  29. package/dist/components/DataTable/DataTableSyncStatus.d.ts +31 -0
  30. package/dist/components/DataTable/formatters/index.d.ts +127 -0
  31. package/dist/components/DataTable/hooks/useDataTableAdvancedFilters.d.ts +18 -0
  32. package/dist/components/DataTable/hooks/useDataTableColumnTemplates.d.ts +28 -0
  33. package/dist/components/DataTable/hooks/useDataTableExport.d.ts +1 -1
  34. package/dist/components/DataTable/hooks/useDataTableOffline.d.ts +80 -0
  35. package/dist/components/DataTable/services/IndexedDBService.d.ts +117 -0
  36. package/dist/components/DataTable/templates/index.d.ts +104 -0
  37. package/dist/components/DataTable/workers/exportWorker.d.ts +29 -0
  38. package/dist/components/error-boundary/ErrorBoundary.d.ts +102 -0
  39. package/dist/components/error-boundary/index.d.ts +2 -0
  40. package/dist/components/waka-autocomplete/index.d.ts +59 -0
  41. package/dist/components/waka-barcode/index.d.ts +27 -0
  42. package/dist/components/waka-breadcrumb/index.d.ts +43 -0
  43. package/dist/components/waka-charts/WakaAreaChart.d.ts +12 -0
  44. package/dist/components/waka-charts/WakaBarChart.d.ts +12 -0
  45. package/dist/components/waka-charts/WakaChart.d.ts +17 -0
  46. package/dist/components/waka-charts/WakaLineChart.d.ts +12 -0
  47. package/dist/components/waka-charts/WakaMiniChart.d.ts +13 -0
  48. package/dist/components/waka-charts/WakaPieChart.d.ts +12 -0
  49. package/dist/components/waka-charts/WakaSparkline.d.ts +13 -0
  50. package/dist/components/waka-charts/dataTableHelpers.d.ts +34 -0
  51. package/dist/components/waka-charts/hooks/useChartTheme.d.ts +23 -0
  52. package/dist/components/waka-charts/hooks/useRechartsLoader.d.ts +161 -0
  53. package/dist/components/waka-charts/index.d.ts +57 -0
  54. package/dist/components/waka-charts/types.d.ts +298 -0
  55. package/dist/components/waka-color-picker/index.d.ts +40 -0
  56. package/dist/components/waka-combobox/index.d.ts +81 -0
  57. package/dist/components/waka-date-range-picker/index.d.ts +68 -0
  58. package/dist/components/waka-drawer/index.d.ts +59 -0
  59. package/dist/components/waka-file-upload/index.d.ts +49 -0
  60. package/dist/components/waka-image/index.d.ts +59 -0
  61. package/dist/components/waka-kanban/index.d.ts +68 -0
  62. package/dist/components/waka-modal/index.d.ts +82 -0
  63. package/dist/components/waka-number-input/index.d.ts +60 -0
  64. package/dist/components/waka-pagination/index.d.ts +67 -0
  65. package/dist/components/waka-qrcode/index.d.ts +32 -0
  66. package/dist/components/waka-rich-text-editor/index.d.ts +36 -0
  67. package/dist/components/waka-segmented-control/index.d.ts +42 -0
  68. package/dist/components/waka-stat/index.d.ts +57 -0
  69. package/dist/components/waka-stepper/index.d.ts +76 -0
  70. package/dist/components/waka-time-picker/index.d.ts +51 -0
  71. package/dist/components/waka-timeline/index.d.ts +46 -0
  72. package/dist/components/waka-tree/index.d.ts +67 -0
  73. package/dist/components/waka-video/index.d.ts +66 -0
  74. package/dist/components/waka-virtual-list/index.d.ts +54 -0
  75. package/dist/export.d.ts +28 -0
  76. package/dist/index.cjs.js +25 -23
  77. package/dist/index.es.js +5665 -5527
  78. package/dist/rich-text.d.ts +21 -0
  79. package/dist/ui.css +1 -1
  80. package/dist/utils/error-handling.d.ts +190 -0
  81. package/package.json +5 -2
package/README.md CHANGED
@@ -4,283 +4,485 @@
4
4
 
5
5
  ![npm version](https://img.shields.io/npm/v/@wakastellar/ui?style=for-the-badge&color=blue)
6
6
  ![npm license](https://img.shields.io/npm/l/@wakastellar/ui?style=for-the-badge)
7
- ![TypeScript](https://img.shields.io/badge/TypeScript-5.5.0-blue?style=for-the-badge&logo=typescript)
8
- ![React](https://img.shields.io/badge/React-19.1.0+-61dafb?style=for-the-badge&logo=react)
9
- ![Next.js](https://img.shields.io/badge/Next.js-15.5.4+-000000?style=for-the-badge&logo=next.js)
7
+ ![TypeScript](https://img.shields.io/badge/TypeScript-5.5+-blue?style=for-the-badge&logo=typescript)
8
+ ![React](https://img.shields.io/badge/React-19+-61dafb?style=for-the-badge&logo=react)
10
9
 
11
- **Librairie de composants React professionnelle et modulaire pour applications Next.js modernes**
10
+ **Bibliothèque de composants React professionnelle pour applications Next.js modernes**
12
11
 
13
- [Installation](#installation) • [Composants](#composants) • [Technologies](#technologies) • [Licence](#licence)
12
+ [Quick Start](#quick-start) • [Composants](#composants) • [Thèmes](#système-de-thèmes) • [i18n](#internationalisation) • [Documentation](./DOCUMENTATION.md)
14
13
 
15
14
  </div>
16
15
 
17
16
  ---
18
17
 
19
- ## Description
18
+ ## Caractéristiques
20
19
 
21
- `@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.
22
-
23
- ### Caractéristiques principales
24
-
25
- - ✅ **TypeScript strict** - Typage complet et API type-safe
26
- - ✅ **SSR/SSG Ready** - Compatible React 18/19 et Next.js 15+
27
- - ✅ **Production-ready** - Builds ESM + CJS optimisés avec tree-shaking
28
- - ✅ **Accessible** - Conforme ARIA et navigation clavier complète
29
- - ✅ **Performant** - Virtualisation, debouncing, memoization
30
- - ✅ **Themable** - Système de thèmes dynamique et variantes multiples
31
- - ✅ **i18n Ready** - Support i18next / react-i18next
32
- - ✅ **Headless UI** - Basé sur Radix UI primitives
20
+ - **60+ composants** - UI complète basée sur Radix UI
21
+ - **DataTable avancé** - TanStack Table v8 avec tri, filtres, pagination, édition inline, export
22
+ - **Système de thèmes** - Format shadcn/ui registry-item, chargement dynamique JSON
23
+ - **Internationalisation** - i18next intégré avec chargement JSON à la volée
24
+ - **TypeScript strict** - API 100% typée
25
+ - **SSR/Next.js 15+** - Compatible App Router et React 19
26
+ - **Accessible** - WCAG compliant via Radix UI
33
27
 
34
28
  ---
35
29
 
36
- ## Installation
30
+ ## Quick Start
31
+
32
+ ### 1. Installation
37
33
 
38
34
  ```bash
39
- npm install @wakastellar/ui
40
- # ou
41
35
  pnpm add @wakastellar/ui
42
36
  # ou
43
- yarn add @wakastellar/ui
37
+ npm install @wakastellar/ui
44
38
  ```
45
39
 
46
- ### Styles CSS
47
-
48
- ```ts
49
- import "@wakastellar/ui/dist/ui.css"
40
+ ### 2. Configuration Tailwind
41
+
42
+ ```javascript
43
+ // tailwind.config.js
44
+ module.exports = {
45
+ content: [
46
+ "./app/**/*.{js,ts,jsx,tsx}",
47
+ "./node_modules/@wakastellar/ui/**/*.{js,ts,jsx,tsx}",
48
+ ],
49
+ // ... votre configuration
50
+ }
50
51
  ```
51
52
 
52
- ### Peer Dependencies
53
+ ### 3. Import du CSS et Provider
53
54
 
54
- La librairie nécessite les dépendances suivantes (à installer si ce n'est pas déjà fait) :
55
+ ```tsx
56
+ // app/layout.tsx
57
+ import "@wakastellar/ui/dist/ui.css"
58
+ import { WakaProvider } from "@wakastellar/ui"
59
+
60
+ export default function RootLayout({ children }: { children: React.ReactNode }) {
61
+ return (
62
+ <html lang="fr">
63
+ <body>
64
+ <WakaProvider
65
+ config={{
66
+ theme: {
67
+ defaultTheme: "light",
68
+ themes: [
69
+ { id: "light", label: "Clair", previewColor: "#3b82f6" },
70
+ { id: "dark", label: "Sombre", previewColor: "#1e293b" },
71
+ ],
72
+ },
73
+ language: {
74
+ defaultLanguage: "fr",
75
+ supportedLanguages: ["fr", "en"],
76
+ languages: [
77
+ { code: "fr", label: "Français", flagEmoji: "🇫🇷" },
78
+ { code: "en", label: "English", flagEmoji: "🇬🇧" },
79
+ ],
80
+ },
81
+ }}
82
+ >
83
+ {children}
84
+ </WakaProvider>
85
+ </body>
86
+ </html>
87
+ )
88
+ }
89
+ ```
55
90
 
56
- - `react` >= 19.1.0
57
- - `react-dom` >= 18.0.0
58
- - `next` >= 15.5.4 (pour Next.js)
59
- - `react-hook-form` >= 7.0.0 (optionnel, pour certains composants)
91
+ ### 4. Utilisation
92
+
93
+ ```tsx
94
+ import { Button, Card, CardHeader, CardTitle, CardContent } from "@wakastellar/ui"
95
+
96
+ export default function Page() {
97
+ return (
98
+ <Card>
99
+ <CardHeader>
100
+ <CardTitle>Hello World</CardTitle>
101
+ </CardHeader>
102
+ <CardContent>
103
+ <Button>Click me</Button>
104
+ </CardContent>
105
+ </Card>
106
+ )
107
+ }
108
+ ```
60
109
 
61
110
  ---
62
111
 
63
- ## Technologies
64
-
65
- ### Core
112
+ ## Composants
66
113
 
67
- - **React** 19.1.0+
68
- - **TypeScript** 5.5.0
69
- - **Next.js** 15.5.4+
70
- - **Tailwind CSS** 3.4.0
114
+ ### Formulaires
71
115
 
72
- ### Build & Tooling
116
+ | Composant | Description |
117
+ |-----------|-------------|
118
+ | `Button` | Boutons avec variantes et tailles |
119
+ | `Input` | Champs de saisie texte |
120
+ | `Textarea` | Zones de texte multilignes |
121
+ | `Checkbox` | Cases à cocher |
122
+ | `RadioGroup` | Groupes de boutons radio |
123
+ | `Switch` | Interrupteurs toggle |
124
+ | `Select` | Listes déroulantes |
125
+ | `Slider` | Curseurs de sélection |
126
+ | `WakaDateTimePicker` | Sélecteur date/heure complet |
127
+ | `WakaAutocomplete` | Autocomplete avec recherche |
128
+ | `WakaColorPicker` | Sélecteur de couleurs |
129
+ | `WakaFileUpload` | Upload de fichiers avec preview |
130
+ | `WakaRichTextEditor` | Éditeur WYSIWYG (TipTap) |
73
131
 
74
- - **Vite** 7.1.9 - Build tool
75
- - **vitest** 3.2.4 - Testing framework
76
- - **eslint** - Linting
77
- - **prettier** - Code formatting
132
+ ### Data & Tables
78
133
 
79
- ### Principales dépendances
134
+ | Composant | Description |
135
+ |-----------|-------------|
136
+ | `DataTable` | Table de données basique |
137
+ | `DataTableAdvanced` | Table avancée avec tri, filtres, pagination, édition, export |
138
+ | `Table` | Table HTML stylisée |
139
+ | `Card` | Conteneur avec header/content/footer |
140
+ | `Badge` | Étiquettes et badges |
80
141
 
81
- - **@radix-ui/react-*** - Composants headless UI
82
- - `@radix-ui/react-dialog` ^1.0.5
83
- - `@radix-ui/react-select` ^2.0.0
84
- - `@radix-ui/react-dropdown-menu` ^2.0.6
85
- - `@radix-ui/react-tabs` ^1.0.4
86
- - `@radix-ui/react-toast` ^1.1.5
87
- - Et 20+ autres primitives Radix UI
142
+ ### Navigation
88
143
 
89
- - **@tanstack/react-table** ^8.21.3 - Moteur DataTable
90
- - **@tanstack/react-virtual** ^3.13.12 - Virtualisation
91
- - **i18next** ^23.7.0 - Internationalisation
92
- - **date-fns** ^4.1.0 - Gestion des dates
93
- - **lucide-react** ^0.293.0 - Icônes
94
- - **class-variance-authority** ^0.7.1 - Variants
95
- - **tailwind-merge** ^3.3.1 - Fusion de classes Tailwind
96
- - **tailwind-variants** ^0.1.18 - Variants Tailwind
144
+ | Composant | Description |
145
+ |-----------|-------------|
146
+ | `Tabs` | Onglets |
147
+ | `NavigationMenu` | Menu de navigation |
148
+ | `DropdownMenu` | Menus déroulants |
149
+ | `Command` | Palette de commandes (cmd+k) |
150
+ | `WakaAdmincrumb` | Fil d'Ariane |
151
+ | `WakaSidebar` | Sidebar responsive |
152
+
153
+ ### Overlays & Feedback
154
+
155
+ | Composant | Description |
156
+ |-----------|-------------|
157
+ | `Dialog` | Modales |
158
+ | `AlertDialog` | Dialogues de confirmation |
159
+ | `Sheet` | Panneaux latéraux |
160
+ | `Popover` | Popovers |
161
+ | `Tooltip` | Info-bulles |
162
+ | `Toast` | Notifications toast |
163
+ | `Alert` | Alertes inline |
164
+
165
+ ### Charts (optionnel, nécessite recharts)
166
+
167
+ | Composant | Description |
168
+ |-----------|-------------|
169
+ | `WakaBarChart` | Graphiques en barres |
170
+ | `WakaLineChart` | Graphiques en lignes |
171
+ | `WakaAreaChart` | Graphiques en aires |
172
+ | `WakaPieChart` | Graphiques circulaires |
173
+
174
+ ### Blocks (layouts pré-construits)
175
+
176
+ | Block | Description |
177
+ |-------|-------------|
178
+ | `Layout` | Layout admin avec sidebar |
179
+ | `Login` | Page de connexion complète |
180
+ | `Footer` | Pied de page |
181
+ | `Headtab` | Header avec onglets |
97
182
 
98
183
  ---
99
184
 
100
- ## Composants
101
-
102
- ### Data & Tables
103
-
104
- - **DataTable** - Table de données basique
105
- - **DataTableAdvanced** - Table de données avancée avec :
106
- - Tri multi-colonnes
107
- - Filtrage et recherche globale
108
- - Pagination client/serveur
109
- - Sélection simple/multiple
110
- - Groupement et agrégation
111
- - Expansion des lignes
112
- - Édition inline avec validation
113
- - Export/Import (CSV, XLSX, JSON, PDF)
114
- - Virtualisation pour grandes quantités de données
115
-
116
- ### Formulaires
185
+ ## Système de Thèmes
186
+
187
+ ### Format shadcn/ui registry-item
188
+
189
+ Le ThemeProvider supporte le format standard shadcn/ui pour les thèmes :
190
+
191
+ ```tsx
192
+ import { ThemeProvider, useTheme } from "@wakastellar/ui"
193
+
194
+ // Configuration avec thèmes inline
195
+ <ThemeProvider
196
+ themes={[
197
+ {
198
+ id: "custom",
199
+ label: "Mon Thème",
200
+ previewColor: "#8b5cf6",
201
+ registryItem: {
202
+ name: "custom",
203
+ type: "registry:style",
204
+ cssVars: {
205
+ light: {
206
+ background: "0 0% 100%",
207
+ foreground: "240 10% 3.9%",
208
+ primary: "262 83% 58%",
209
+ "primary-foreground": "0 0% 100%",
210
+ },
211
+ dark: {
212
+ background: "240 10% 3.9%",
213
+ foreground: "0 0% 98%",
214
+ primary: "263 70% 50%",
215
+ "primary-foreground": "0 0% 100%",
216
+ },
217
+ },
218
+ },
219
+ },
220
+ ]}
221
+ defaultTheme="custom"
222
+ >
223
+ <App />
224
+ </ThemeProvider>
225
+ ```
117
226
 
118
- - **Button** - Boutons avec variantes et tailles
119
- - **Input** - Champs de saisie texte
120
- - **Textarea** - Zones de texte multilignes
121
- - **Checkbox** - Cases à cocher
122
- - **RadioGroup** - Groupes de boutons radio
123
- - **Switch** - Interrupteurs toggle
124
- - **Select** - Listes déroulantes
125
- - **Slider** - Curseurs de sélection
126
- - **InputOTP** - Champs OTP
127
- - **Label** - Labels de formulaire
128
- - **Form** - Intégration React Hook Form
129
-
130
- ### DateTime
131
-
132
- - **Calendar** - Calendrier de sélection de date
133
- - **WakaDateTimePicker** - Sélecteur de date/heure complet avec :
134
- - Variants : date, time, datetime, range, multiple
135
- - Presets configurables
136
- - Validation avancée
137
- - Support multi-langues
138
- - Intégration React Hook Form
227
+ ### Chargement dynamique de thèmes JSON
139
228
 
140
- ### Navigation
229
+ ```tsx
230
+ import { useTheme } from "@wakastellar/ui"
141
231
 
142
- - **Tabs** - Onglets
143
- - **Menubar** - Barre de menu
144
- - **NavigationMenu** - Menu de navigation
145
- - **DropdownMenu** - Menus déroulants
146
- - **ContextMenu** - Menus contextuels
147
- - **Command** - Palette de commandes (cmd+k)
148
- - **WakaAdmincrumb** - Fil d'Ariane admin
232
+ function ThemeLoader() {
233
+ const { loadThemeFromJSON } = useTheme()
149
234
 
150
- ### Overlays
235
+ const loadCustomTheme = async () => {
236
+ // Charger un thème depuis une API ou un fichier
237
+ const response = await fetch("/api/themes/custom.json")
238
+ const themeData = await response.json()
151
239
 
152
- - **Dialog** - Modales
153
- - **AlertDialog** - Dialogues d'alerte
154
- - **Popover** - Popovers
155
- - **Tooltip** - Info-bulles
156
- - **HoverCard** - Cartes au survol
157
- - **Sheet** - Panneaux latéraux
240
+ await loadThemeFromJSON("custom", themeData)
241
+ }
158
242
 
159
- ### Feedback
243
+ return <Button onClick={loadCustomTheme}>Charger thème</Button>
244
+ }
245
+ ```
160
246
 
161
- - **Toast** / **Toaster** - Notifications toast
162
- - **Alert** - Alertes
163
- - **Progress** - Barres de progression
164
- - **Skeleton** - Placeholders de chargement
165
- - **WakaNotifications** - Système de notifications
166
- - **WakaSpinner** - Indicateurs de chargement
247
+ ### ThemeSelector
167
248
 
168
- ### Layout
249
+ ```tsx
250
+ import { ThemeSelector } from "@wakastellar/ui"
169
251
 
170
- - **Card** - Cartes
171
- - **Separator** - Séparateurs
172
- - **ScrollArea** - Zones de défilement
173
- - **AspectRatio** - Ratios d'aspect
174
- - **Collapsible** - Éléments repliables
175
- - **Accordion** - Accordéons
252
+ // Variante compacte (icône)
253
+ <ThemeSelector variant="compact" />
176
254
 
177
- ### Media
255
+ // Variante select (dropdown)
256
+ <ThemeSelector variant="select" />
178
257
 
179
- - **Avatar** - Avatars utilisateurs
180
- - **WakaCarousel** - Carrousel d'images avec :
181
- - Navigation clavier/tactile
182
- - Mode plein écran
183
- - Téléchargement et partage
184
- - Autoplay avec contrôles
185
- - Miniatures et indicateurs
258
+ // Variante complète (grille)
259
+ <ThemeSelector variant="full" />
260
+ ```
186
261
 
187
- ### Typography
262
+ ---
188
263
 
189
- - **Typography** - Composants typographiques
190
- - **Code** - Affichage de code avec coloration syntaxique
191
- - **Heading** - Titres sémantiques h1-h6
192
- - **Text** - Textes avec variantes
264
+ ## Internationalisation
265
+
266
+ ### Configuration avec traductions inline
267
+
268
+ ```tsx
269
+ <WakaProvider
270
+ config={{
271
+ language: {
272
+ defaultLanguage: "fr",
273
+ supportedLanguages: ["fr", "en"],
274
+ languages: [
275
+ {
276
+ code: "fr",
277
+ label: "Français",
278
+ flagEmoji: "🇫🇷",
279
+ translations: {
280
+ common: {
281
+ save: "Enregistrer",
282
+ cancel: "Annuler",
283
+ confirm: "Confirmer",
284
+ },
285
+ errors: {
286
+ required: "Ce champ est requis",
287
+ },
288
+ },
289
+ },
290
+ {
291
+ code: "en",
292
+ label: "English",
293
+ flagEmoji: "🇬🇧",
294
+ // Chargement depuis URL
295
+ jsonUrl: "https://cdn.example.com/i18n/en.json",
296
+ },
297
+ ],
298
+ },
299
+ // ... theme config
300
+ }}
301
+ >
302
+ {children}
303
+ </WakaProvider>
304
+ ```
193
305
 
194
- ### Affichage
306
+ ### Chargement dynamique de traductions
307
+
308
+ ```tsx
309
+ import { useLanguage, useTranslation } from "@wakastellar/ui"
310
+
311
+ function MyComponent() {
312
+ const { t } = useTranslation()
313
+ const { loadLanguageFromJSON, changeLanguage, currentLanguage } = useLanguage()
314
+
315
+ // Charger des traductions à la volée
316
+ const loadCustomTranslations = async () => {
317
+ await loadLanguageFromJSON("es", {
318
+ common: { save: "Guardar", cancel: "Cancelar" },
319
+ })
320
+ }
321
+
322
+ return (
323
+ <div>
324
+ <p>{t("common.save")}</p>
325
+ <Button onClick={() => changeLanguage("en")}>English</Button>
326
+ <Button onClick={loadCustomTranslations}>Load Spanish</Button>
327
+ </div>
328
+ )
329
+ }
330
+ ```
195
331
 
196
- - **Badge** - Badges et étiquettes
197
- - **Table** - Tables HTML de base
198
- - **Tabs** - Onglets
332
+ ### LanguageSelector
199
333
 
200
- ### Configuration
334
+ ```tsx
335
+ import { LanguageSelector } from "@wakastellar/ui"
201
336
 
202
- - **LanguageSelector** - Sélecteur de langue avec i18n
203
- - **ThemeSelector** - Sélecteur de thème
204
- - **WakaThemeManager** - Gestionnaire de thèmes TweakCN
205
- - **WakaThemeCreator** - Créateur de thèmes interactif
337
+ <LanguageSelector variant="default" />
338
+ <LanguageSelector variant="compact" />
339
+ ```
206
340
 
207
341
  ---
208
342
 
209
- ## API
210
-
211
- 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.
212
-
213
- ### Entry Points
214
-
215
- - **Import principal** : `import { Component } from "@wakastellar/ui"`
216
- - **Styles** : `import "@wakastellar/ui/dist/ui.css"`
217
- - **Exports** : ESM (`dist/index.es.js`) et CJS (`dist/index.cjs.js`)
343
+ ## DataTable Avancé
344
+
345
+ ```tsx
346
+ import { DataTableAdvanced } from "@wakastellar/ui"
347
+ import { ColumnDef } from "@tanstack/react-table"
348
+
349
+ interface User {
350
+ id: string
351
+ name: string
352
+ email: string
353
+ role: "admin" | "user"
354
+ createdAt: Date
355
+ }
356
+
357
+ const columns: ColumnDef<User>[] = [
358
+ { accessorKey: "name", header: "Nom" },
359
+ { accessorKey: "email", header: "Email" },
360
+ { accessorKey: "role", header: "Rôle" },
361
+ ]
362
+
363
+ <DataTableAdvanced
364
+ data={users}
365
+ columns={columns}
366
+ // Pagination
367
+ pagination={{
368
+ mode: "client", // ou "server"
369
+ pageSize: 10,
370
+ pageSizeOptions: [5, 10, 20, 50],
371
+ }}
372
+ // Filtres
373
+ filters={[
374
+ { id: "name", label: "Nom", type: "text", column: "name" },
375
+ {
376
+ id: "role",
377
+ label: "Rôle",
378
+ type: "select",
379
+ column: "role",
380
+ options: [
381
+ { label: "Admin", value: "admin" },
382
+ { label: "User", value: "user" },
383
+ ],
384
+ },
385
+ ]}
386
+ // Sélection
387
+ selection={{ mode: "multiple" }}
388
+ // Export
389
+ export={{
390
+ enabled: true,
391
+ formats: ["csv", "json", "excel"],
392
+ }}
393
+ // Édition inline
394
+ edit={{
395
+ editableColumns: [
396
+ { field: "name", config: { type: "text", required: true } },
397
+ ],
398
+ onSave: async (rowId, data) => await updateUser(rowId, data),
399
+ }}
400
+ // Virtualisation (grandes quantités)
401
+ virtualization={{ enabled: true }}
402
+ />
403
+ ```
218
404
 
219
405
  ---
220
406
 
221
- ## Bonnes pratiques
222
-
223
- ### Performance
407
+ ## Hooks Utiles
224
408
 
225
- - Utilisez la virtualisation pour les grandes quantités de données (DataTable)
226
- - Debouncez les filtres et recherches
227
- - Mémoïsez les colonnes et callbacks dans les DataTables
409
+ ```tsx
410
+ // Thème
411
+ const { currentTheme, changeTheme, themes, isDarkMode, toggleDarkMode, loadThemeFromJSON } = useTheme()
228
412
 
229
- ### Accessibilité
413
+ // Langue
414
+ const { currentLanguage, changeLanguage, languages, loadLanguageFromJSON } = useLanguage()
230
415
 
231
- - Fournissez des labels descriptifs pour tous les champs
232
- - Validez la navigation clavier
233
- - Respectez les standards ARIA
416
+ // Traductions (i18next)
417
+ const { t, i18n } = useTranslation()
234
418
 
235
- ### Sécurité
419
+ // Provider combiné
420
+ const { currentTheme, currentLanguage, changeTheme, changeLanguage, t } = useWaka()
236
421
 
237
- - Validez et sanitisez tout contenu injecté dans les cellules (XSS)
238
- - Ne loggez pas d'informations sensibles
239
- - Utilisez des validations côté serveur en complément
422
+ // Toast
423
+ const { toast } = useToast()
424
+ toast({ title: "Succès", description: "Action réussie", variant: "default" })
425
+ ```
240
426
 
241
- ### SSR/Next.js
427
+ ---
242
428
 
243
- - Évitez l'accès direct à `window` côté serveur
244
- - Initialisez les données côté client si nécessaire
245
- - Utilisez les composants avec `"use client"` pour l'interactivité
429
+ ## Peer Dependencies
430
+
431
+ ```json
432
+ {
433
+ "react": ">=19.2.0",
434
+ "react-dom": ">=19.2.0",
435
+ "next": ">=15.5.4",
436
+ "react-hook-form": "^7.0.0", // optionnel
437
+ "recharts": ">=2.0.0", // optionnel (charts)
438
+ "xlsx": ">=0.18.0", // optionnel (export Excel)
439
+ "jspdf": ">=2.5.0", // optionnel (export PDF)
440
+ "@tiptap/*": ">=2.0.0" // optionnel (rich text editor)
441
+ }
442
+ ```
246
443
 
247
444
  ---
248
445
 
249
- ## Tests & Qualité
446
+ ## Structure du Package
447
+
448
+ ```
449
+ @wakastellar/ui
450
+ ├── dist/
451
+ │ ├── index.es.js # ESM bundle
452
+ │ ├── index.cjs.js # CommonJS bundle
453
+ │ ├── index.d.ts # TypeScript definitions
454
+ │ └── ui.css # Styles compilés
455
+ └── src/styles/
456
+ └── globals.css # Variables CSS source
457
+ ```
250
458
 
251
- La librairie est testée avec :
459
+ ### Entry Points
252
460
 
253
- - **vitest** 3.2.4 - Tests unitaires
254
- - **@testing-library/react** - Tests de composants
255
- - **@vitest/coverage-v8** - Couverture de code
256
- - **TypeScript strict mode** - Validation de types
257
- - **eslint** - Linting
258
- - **prettier** - Formatage
461
+ ```typescript
462
+ // Import principal
463
+ import { Button, Card, DataTableAdvanced } from "@wakastellar/ui"
259
464
 
260
- **Recommandations pour l'intégration** :
465
+ // Styles
466
+ import "@wakastellar/ui/dist/ui.css"
261
467
 
262
- - Testez les cas critiques (tri, filtres, pagination, sélection)
263
- - Validez l'accessibilité (navigation clavier, lecteurs d'écran)
264
- - Vérifiez le tree-shaking (ESM) et la taille des bundles
265
- - Exécutez `tsc --noEmit` en CI pour valider les types
468
+ // Types
469
+ import type { ColumnDef } from "@tanstack/react-table"
470
+ import type { ThemeConfig, LanguageConfig } from "@wakastellar/ui"
471
+ ```
266
472
 
267
473
  ---
268
474
 
269
- ## Distribution
475
+ ## Documentation
476
+
477
+ Pour une documentation complète avec tous les exemples de code, consultez :
270
478
 
271
- - **Format** : ESM + CJS
272
- - **TypeScript** : Définitions de types incluses
273
- - **Sourcemaps** : Incluses pour le debugging
274
- - **Tree-shaking** : Supporté via ESM
275
- - **Versioning** : SemVer (major.minor.patch)
479
+ - [**DOCUMENTATION.md**](./DOCUMENTATION.md) - Documentation détaillée
276
480
 
277
481
  ---
278
482
 
279
483
  ## Licence
280
484
 
281
- Ce projet est publié sous licence **AGPL-3.0**.
282
-
283
- Voir le fichier [LICENSE](./LICENSE) pour plus de détails.
485
+ Ce projet est publié sous licence **AGPL-3.0**. Voir [LICENSE](./LICENSE).
284
486
 
285
487
  ---
286
488
 
@@ -288,4 +490,6 @@ Voir le fichier [LICENSE](./LICENSE) pour plus de détails.
288
490
 
289
491
  **Fait avec ❤️ par Wakastellar**
290
492
 
291
- </div>
493
+ [Documentation](./DOCUMENTATION.md) • [Issues](https://github.com/wakastellar/ui/issues)
494
+
495
+ </div>