@wakastellar/ui 0.1.0 → 0.1.2
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.
- package/LICENSE +17 -0
- package/README.md +291 -0
- package/package.json +5 -2
package/LICENSE
ADDED
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
GNU AFFERO GENERAL PUBLIC LICENSE
|
|
2
|
+
Version 3, 19 November 2007
|
|
3
|
+
|
|
4
|
+
Copyright (C) 2025 Wakastellar
|
|
5
|
+
|
|
6
|
+
This program is free software: you can redistribute it and/or modify
|
|
7
|
+
it under the terms of the GNU Affero General Public License as published by
|
|
8
|
+
the Free Software Foundation, either version 3 of the License, or
|
|
9
|
+
(at your option) any later version.
|
|
10
|
+
|
|
11
|
+
This program is distributed in the hope that it will be useful,
|
|
12
|
+
but WITHOUT ANY WARRANTY; without even the implied warranty of
|
|
13
|
+
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
|
14
|
+
GNU Affero General Public License for more details.
|
|
15
|
+
|
|
16
|
+
You should have received a copy of the GNU Affero General Public License
|
|
17
|
+
along with this program. If not, see <https://www.gnu.org/licenses/>.
|
package/README.md
ADDED
|
@@ -0,0 +1,291 @@
|
|
|
1
|
+
# @wakastellar/ui
|
|
2
|
+
|
|
3
|
+
<div align="center">
|
|
4
|
+
|
|
5
|
+

|
|
6
|
+

|
|
7
|
+

|
|
8
|
+

|
|
9
|
+

|
|
10
|
+
|
|
11
|
+
**Librairie de composants React professionnelle et modulaire pour applications Next.js modernes**
|
|
12
|
+
|
|
13
|
+
[Installation](#installation) • [Composants](#composants) • [Technologies](#technologies) • [Licence](#licence)
|
|
14
|
+
|
|
15
|
+
</div>
|
|
16
|
+
|
|
17
|
+
---
|
|
18
|
+
|
|
19
|
+
## Description
|
|
20
|
+
|
|
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
|
|
33
|
+
|
|
34
|
+
---
|
|
35
|
+
|
|
36
|
+
## Installation
|
|
37
|
+
|
|
38
|
+
```bash
|
|
39
|
+
npm install @wakastellar/ui
|
|
40
|
+
# ou
|
|
41
|
+
pnpm add @wakastellar/ui
|
|
42
|
+
# ou
|
|
43
|
+
yarn add @wakastellar/ui
|
|
44
|
+
```
|
|
45
|
+
|
|
46
|
+
### Styles CSS
|
|
47
|
+
|
|
48
|
+
```ts
|
|
49
|
+
import "@wakastellar/ui/dist/ui.css"
|
|
50
|
+
```
|
|
51
|
+
|
|
52
|
+
### Peer Dependencies
|
|
53
|
+
|
|
54
|
+
La librairie nécessite les dépendances suivantes (à installer si ce n'est pas déjà fait) :
|
|
55
|
+
|
|
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)
|
|
60
|
+
|
|
61
|
+
---
|
|
62
|
+
|
|
63
|
+
## Technologies
|
|
64
|
+
|
|
65
|
+
### Core
|
|
66
|
+
|
|
67
|
+
- **React** 19.1.0+
|
|
68
|
+
- **TypeScript** 5.5.0
|
|
69
|
+
- **Next.js** 15.5.4+
|
|
70
|
+
- **Tailwind CSS** 3.4.0
|
|
71
|
+
|
|
72
|
+
### Build & Tooling
|
|
73
|
+
|
|
74
|
+
- **Vite** 7.1.9 - Build tool
|
|
75
|
+
- **vitest** 3.2.4 - Testing framework
|
|
76
|
+
- **eslint** - Linting
|
|
77
|
+
- **prettier** - Code formatting
|
|
78
|
+
|
|
79
|
+
### Principales dépendances
|
|
80
|
+
|
|
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
|
|
88
|
+
|
|
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
|
|
97
|
+
|
|
98
|
+
---
|
|
99
|
+
|
|
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
|
|
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
|
+
- **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
|
|
139
|
+
|
|
140
|
+
### Navigation
|
|
141
|
+
|
|
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
|
|
149
|
+
|
|
150
|
+
### Overlays
|
|
151
|
+
|
|
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
|
|
158
|
+
|
|
159
|
+
### Feedback
|
|
160
|
+
|
|
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
|
|
167
|
+
|
|
168
|
+
### Layout
|
|
169
|
+
|
|
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
|
|
176
|
+
|
|
177
|
+
### Media
|
|
178
|
+
|
|
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
|
|
186
|
+
|
|
187
|
+
### Typography
|
|
188
|
+
|
|
189
|
+
- **Typography** - Composants typographiques
|
|
190
|
+
- **Code** - Affichage de code avec coloration syntaxique
|
|
191
|
+
- **Heading** - Titres sémantiques h1-h6
|
|
192
|
+
- **Text** - Textes avec variantes
|
|
193
|
+
|
|
194
|
+
### Affichage
|
|
195
|
+
|
|
196
|
+
- **Badge** - Badges et étiquettes
|
|
197
|
+
- **Table** - Tables HTML de base
|
|
198
|
+
- **Tabs** - Onglets
|
|
199
|
+
|
|
200
|
+
### Configuration
|
|
201
|
+
|
|
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
|
|
206
|
+
|
|
207
|
+
---
|
|
208
|
+
|
|
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`)
|
|
218
|
+
|
|
219
|
+
---
|
|
220
|
+
|
|
221
|
+
## Bonnes pratiques
|
|
222
|
+
|
|
223
|
+
### Performance
|
|
224
|
+
|
|
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
|
|
228
|
+
|
|
229
|
+
### Accessibilité
|
|
230
|
+
|
|
231
|
+
- Fournissez des labels descriptifs pour tous les champs
|
|
232
|
+
- Validez la navigation clavier
|
|
233
|
+
- Respectez les standards ARIA
|
|
234
|
+
|
|
235
|
+
### Sécurité
|
|
236
|
+
|
|
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
|
|
240
|
+
|
|
241
|
+
### SSR/Next.js
|
|
242
|
+
|
|
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é
|
|
246
|
+
|
|
247
|
+
---
|
|
248
|
+
|
|
249
|
+
## Tests & Qualité
|
|
250
|
+
|
|
251
|
+
La librairie est testée avec :
|
|
252
|
+
|
|
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
|
|
259
|
+
|
|
260
|
+
**Recommandations pour l'intégration** :
|
|
261
|
+
|
|
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
|
|
266
|
+
|
|
267
|
+
---
|
|
268
|
+
|
|
269
|
+
## Distribution
|
|
270
|
+
|
|
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)
|
|
276
|
+
|
|
277
|
+
---
|
|
278
|
+
|
|
279
|
+
## Licence
|
|
280
|
+
|
|
281
|
+
Ce projet est publié sous licence **AGPL-3.0**.
|
|
282
|
+
|
|
283
|
+
Voir le fichier [LICENSE](./LICENSE) pour plus de détails.
|
|
284
|
+
|
|
285
|
+
---
|
|
286
|
+
|
|
287
|
+
<div align="center">
|
|
288
|
+
|
|
289
|
+
**Fait avec ❤️ par Wakastellar**
|
|
290
|
+
|
|
291
|
+
</div>
|
package/package.json
CHANGED
|
@@ -1,8 +1,11 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@wakastellar/ui",
|
|
3
|
-
"version": "0.1.
|
|
3
|
+
"version": "0.1.2",
|
|
4
4
|
"description": "UI Library compatible TweakCN + i18n pour Next.js",
|
|
5
|
-
"keywords": [
|
|
5
|
+
"keywords": [
|
|
6
|
+
"ui",
|
|
7
|
+
"interfaces"
|
|
8
|
+
],
|
|
6
9
|
"publisher": "wakastellar",
|
|
7
10
|
"displayName": "Wakastellar - UI",
|
|
8
11
|
"main": "./dist/index.cjs.js",
|