@wakastellar/ui 0.1.0 → 0.1.1
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/README.md +398 -0
- package/package.json +5 -2
package/README.md
ADDED
|
@@ -0,0 +1,398 @@
|
|
|
1
|
+
# 🎨 @wakastellar/ui
|
|
2
|
+
|
|
3
|
+
**Librairie UI étendue de ShadCN compatible TweakCN + i18n pour Next.js avec DataTable ultra-complet**
|
|
4
|
+
|
|
5
|
+
[](https://github.com/wakastellar/wakastellar-ui)
|
|
6
|
+
[](LICENSE)
|
|
7
|
+
[](https://nextjs.org/)
|
|
8
|
+
[](https://reactjs.org/)
|
|
9
|
+
|
|
10
|
+
## 🚀 Fonctionnalités principales
|
|
11
|
+
|
|
12
|
+
### 📊 **DataTable Ultra-Complet**
|
|
13
|
+
- **Virtualisation** : Performance optimisée pour de gros volumes de données
|
|
14
|
+
- **Groupement et agrégation** : Regroupement intelligent des lignes
|
|
15
|
+
- **Expansion des lignes** : Affichage de contenu détaillé
|
|
16
|
+
- **Redimensionnement des colonnes** : Ajustement dynamique de la largeur
|
|
17
|
+
- **Réordonnancement** : Glisser-déposer des colonnes
|
|
18
|
+
- **Export/Import multi-formats** : CSV, XLSX, JSON, PDF, XML
|
|
19
|
+
- **Édition inline** : Modification directe des cellules
|
|
20
|
+
- **Sélection avancée** : Single, multiple, range
|
|
21
|
+
- **Filtrage intelligent** : Filtres par type de données
|
|
22
|
+
- **Tri multi-colonnes** : Tri complexe et personnalisé
|
|
23
|
+
- **Pagination avancée** : Navigation optimisée
|
|
24
|
+
- **Thèmes personnalisés** : Personnalisation complète de l'apparence
|
|
25
|
+
- **Menu contextuel** : Actions rapides sur les lignes
|
|
26
|
+
- **Performance optimisée** : Debouncing et lazy loading
|
|
27
|
+
|
|
28
|
+
### 🎨 **Composants UI**
|
|
29
|
+
- **Composants ShadCN étendus** : Button, Card, Input, Dialog, etc.
|
|
30
|
+
- **Composants personnalisés** : WakaButton, WakaCard, WakaInput, etc.
|
|
31
|
+
- **Thèmes dynamiques** : Basculement entre thèmes en temps réel
|
|
32
|
+
- **Internationalisation** : Support multi-langues avec i18next
|
|
33
|
+
- **Responsive design** : Adaptation mobile et desktop
|
|
34
|
+
- **Accessibilité** : Conformité WCAG 2.1
|
|
35
|
+
|
|
36
|
+
### 🔧 **Architecture**
|
|
37
|
+
- **TypeScript strict** : Typage complet et sécurisé
|
|
38
|
+
- **Modularité** : Architecture modulaire et réutilisable
|
|
39
|
+
- **Performance** : Optimisations pour la production
|
|
40
|
+
- **Tests** : Tests unitaires et d'intégration
|
|
41
|
+
- **Documentation** : Documentation complète et exemples
|
|
42
|
+
|
|
43
|
+
## 📦 Installation
|
|
44
|
+
|
|
45
|
+
```bash
|
|
46
|
+
# Installation via pnpm (recommandé)
|
|
47
|
+
pnpm add @wakastellar/ui
|
|
48
|
+
|
|
49
|
+
# Ou via npm
|
|
50
|
+
npm install @wakastellar/ui
|
|
51
|
+
|
|
52
|
+
# Ou via yarn
|
|
53
|
+
yarn add @wakastellar/ui
|
|
54
|
+
```
|
|
55
|
+
|
|
56
|
+
## 🚀 Utilisation rapide
|
|
57
|
+
|
|
58
|
+
### Configuration de base
|
|
59
|
+
|
|
60
|
+
```tsx
|
|
61
|
+
// app/layout.tsx
|
|
62
|
+
import { ThemeProvider, I18nProvider } from '@wakastellar/ui'
|
|
63
|
+
import '@wakastellar/ui/styles'
|
|
64
|
+
|
|
65
|
+
export default function RootLayout({ children }) {
|
|
66
|
+
return (
|
|
67
|
+
<html lang="fr">
|
|
68
|
+
<body>
|
|
69
|
+
<ThemeProvider>
|
|
70
|
+
<I18nProvider>
|
|
71
|
+
{children}
|
|
72
|
+
</I18nProvider>
|
|
73
|
+
</ThemeProvider>
|
|
74
|
+
</body>
|
|
75
|
+
</html>
|
|
76
|
+
)
|
|
77
|
+
}
|
|
78
|
+
```
|
|
79
|
+
|
|
80
|
+
### DataTable basique
|
|
81
|
+
|
|
82
|
+
```tsx
|
|
83
|
+
import { DataTable, ColumnDef } from '@wakastellar/ui'
|
|
84
|
+
|
|
85
|
+
interface User {
|
|
86
|
+
id: string
|
|
87
|
+
name: string
|
|
88
|
+
email: string
|
|
89
|
+
status: 'active' | 'inactive'
|
|
90
|
+
}
|
|
91
|
+
|
|
92
|
+
const columns: ColumnDef<User>[] = [
|
|
93
|
+
{
|
|
94
|
+
accessorKey: 'name',
|
|
95
|
+
header: 'Nom',
|
|
96
|
+
},
|
|
97
|
+
{
|
|
98
|
+
accessorKey: 'email',
|
|
99
|
+
header: 'Email',
|
|
100
|
+
},
|
|
101
|
+
{
|
|
102
|
+
accessorKey: 'status',
|
|
103
|
+
header: 'Statut',
|
|
104
|
+
},
|
|
105
|
+
]
|
|
106
|
+
|
|
107
|
+
export default function UsersTable() {
|
|
108
|
+
const data: User[] = [
|
|
109
|
+
{ id: '1', name: 'John Doe', email: 'john@example.com', status: 'active' },
|
|
110
|
+
{ id: '2', name: 'Jane Smith', email: 'jane@example.com', status: 'inactive' },
|
|
111
|
+
]
|
|
112
|
+
|
|
113
|
+
return (
|
|
114
|
+
<DataTable
|
|
115
|
+
data={data}
|
|
116
|
+
columns={columns}
|
|
117
|
+
searchable
|
|
118
|
+
pagination
|
|
119
|
+
/>
|
|
120
|
+
)
|
|
121
|
+
}
|
|
122
|
+
```
|
|
123
|
+
|
|
124
|
+
### DataTable avancé
|
|
125
|
+
|
|
126
|
+
```tsx
|
|
127
|
+
import { DataTableAdvanced, ColumnDef } from '@wakastellar/ui'
|
|
128
|
+
|
|
129
|
+
export default function AdvancedTable() {
|
|
130
|
+
return (
|
|
131
|
+
<DataTableAdvanced
|
|
132
|
+
data={data}
|
|
133
|
+
columns={columns}
|
|
134
|
+
// Virtualisation pour de gros volumes
|
|
135
|
+
virtualization={{
|
|
136
|
+
type: 'dynamic',
|
|
137
|
+
itemHeight: 50,
|
|
138
|
+
overscan: 5
|
|
139
|
+
}}
|
|
140
|
+
// Groupement des données
|
|
141
|
+
grouping={{
|
|
142
|
+
enabled: true,
|
|
143
|
+
defaultGrouping: ['status']
|
|
144
|
+
}}
|
|
145
|
+
// Expansion des lignes
|
|
146
|
+
rowExpansion={{
|
|
147
|
+
enabled: true,
|
|
148
|
+
render: ({ row }) => <UserDetails user={row.original} />
|
|
149
|
+
}}
|
|
150
|
+
// Export/Import
|
|
151
|
+
enableExport={{
|
|
152
|
+
formats: ['csv', 'xlsx', 'pdf'],
|
|
153
|
+
filename: 'users-export'
|
|
154
|
+
}}
|
|
155
|
+
enableImport={{
|
|
156
|
+
formats: ['csv', 'xlsx'],
|
|
157
|
+
onImport: (data) => console.log('Données importées:', data)
|
|
158
|
+
}}
|
|
159
|
+
// Édition inline
|
|
160
|
+
edit={{
|
|
161
|
+
enabled: true,
|
|
162
|
+
mode: 'cell',
|
|
163
|
+
onSave: (row, values) => console.log('Sauvegardé:', values)
|
|
164
|
+
}}
|
|
165
|
+
// Thème personnalisé
|
|
166
|
+
theme={{
|
|
167
|
+
colors: {
|
|
168
|
+
primary: '#3b82f6',
|
|
169
|
+
secondary: '#64748b'
|
|
170
|
+
},
|
|
171
|
+
spacing: {
|
|
172
|
+
sm: '0.5rem',
|
|
173
|
+
md: '1rem'
|
|
174
|
+
}
|
|
175
|
+
}}
|
|
176
|
+
// Performance
|
|
177
|
+
performance={{
|
|
178
|
+
disableAnimations: false,
|
|
179
|
+
renderLimit: 100,
|
|
180
|
+
filterDebounceMs: 300
|
|
181
|
+
}}
|
|
182
|
+
/>
|
|
183
|
+
)
|
|
184
|
+
}
|
|
185
|
+
```
|
|
186
|
+
|
|
187
|
+
## 🎨 Thèmes
|
|
188
|
+
|
|
189
|
+
### Thème par défaut
|
|
190
|
+
|
|
191
|
+
```tsx
|
|
192
|
+
import { ThemeProvider } from '@wakastellar/ui'
|
|
193
|
+
|
|
194
|
+
export default function App() {
|
|
195
|
+
return (
|
|
196
|
+
<ThemeProvider theme="default">
|
|
197
|
+
<YourApp />
|
|
198
|
+
</ThemeProvider>
|
|
199
|
+
)
|
|
200
|
+
}
|
|
201
|
+
```
|
|
202
|
+
|
|
203
|
+
### Thème personnalisé
|
|
204
|
+
|
|
205
|
+
```tsx
|
|
206
|
+
const customTheme = {
|
|
207
|
+
colors: {
|
|
208
|
+
primary: '#3b82f6',
|
|
209
|
+
secondary: '#64748b',
|
|
210
|
+
accent: '#f59e0b'
|
|
211
|
+
},
|
|
212
|
+
spacing: {
|
|
213
|
+
sm: '0.5rem',
|
|
214
|
+
md: '1rem',
|
|
215
|
+
lg: '1.5rem'
|
|
216
|
+
},
|
|
217
|
+
typography: {
|
|
218
|
+
fontFamily: 'Inter, sans-serif',
|
|
219
|
+
fontSize: {
|
|
220
|
+
sm: '0.875rem',
|
|
221
|
+
md: '1rem',
|
|
222
|
+
lg: '1.125rem'
|
|
223
|
+
}
|
|
224
|
+
}
|
|
225
|
+
}
|
|
226
|
+
|
|
227
|
+
<ThemeProvider theme={customTheme}>
|
|
228
|
+
<YourApp />
|
|
229
|
+
</ThemeProvider>
|
|
230
|
+
```
|
|
231
|
+
|
|
232
|
+
## 🌍 Internationalisation
|
|
233
|
+
|
|
234
|
+
```tsx
|
|
235
|
+
import { I18nProvider } from '@wakastellar/ui'
|
|
236
|
+
|
|
237
|
+
const translations = {
|
|
238
|
+
fr: {
|
|
239
|
+
'table.search': 'Rechercher...',
|
|
240
|
+
'table.noData': 'Aucune donnée',
|
|
241
|
+
'table.loading': 'Chargement...'
|
|
242
|
+
},
|
|
243
|
+
en: {
|
|
244
|
+
'table.search': 'Search...',
|
|
245
|
+
'table.noData': 'No data',
|
|
246
|
+
'table.loading': 'Loading...'
|
|
247
|
+
}
|
|
248
|
+
}
|
|
249
|
+
|
|
250
|
+
<I18nProvider translations={translations} defaultLanguage="fr">
|
|
251
|
+
<YourApp />
|
|
252
|
+
</I18nProvider>
|
|
253
|
+
```
|
|
254
|
+
|
|
255
|
+
## 📊 Composants DataTable
|
|
256
|
+
|
|
257
|
+
### DataTable (Basique)
|
|
258
|
+
- Pagination
|
|
259
|
+
- Tri
|
|
260
|
+
- Recherche
|
|
261
|
+
- Filtres
|
|
262
|
+
- Sélection
|
|
263
|
+
|
|
264
|
+
### DataTableAdvanced (Complet)
|
|
265
|
+
- Toutes les fonctionnalités du DataTable basique
|
|
266
|
+
- Virtualisation
|
|
267
|
+
- Groupement
|
|
268
|
+
- Expansion des lignes
|
|
269
|
+
- Redimensionnement des colonnes
|
|
270
|
+
- Réordonnancement
|
|
271
|
+
- Export/Import
|
|
272
|
+
- Édition inline
|
|
273
|
+
- Thèmes personnalisés
|
|
274
|
+
- Performance optimisée
|
|
275
|
+
|
|
276
|
+
## 🧪 Tests
|
|
277
|
+
|
|
278
|
+
```bash
|
|
279
|
+
# Tests unitaires
|
|
280
|
+
pnpm test
|
|
281
|
+
|
|
282
|
+
# Tests en mode watch
|
|
283
|
+
pnpm test:watch
|
|
284
|
+
|
|
285
|
+
# Tests avec couverture
|
|
286
|
+
pnpm test:coverage
|
|
287
|
+
|
|
288
|
+
# Interface de tests
|
|
289
|
+
pnpm test:ui
|
|
290
|
+
```
|
|
291
|
+
|
|
292
|
+
## 🚀 Développement
|
|
293
|
+
|
|
294
|
+
```bash
|
|
295
|
+
# Installation des dépendances
|
|
296
|
+
pnpm install
|
|
297
|
+
|
|
298
|
+
# Développement en mode watch
|
|
299
|
+
pnpm dev
|
|
300
|
+
|
|
301
|
+
# Build de production
|
|
302
|
+
pnpm build
|
|
303
|
+
|
|
304
|
+
# Démo locale
|
|
305
|
+
pnpm demo
|
|
306
|
+
```
|
|
307
|
+
|
|
308
|
+
## 📁 Structure du projet
|
|
309
|
+
|
|
310
|
+
```
|
|
311
|
+
@wakastart/ui/
|
|
312
|
+
├── src/
|
|
313
|
+
│ ├── components/ # Composants UI
|
|
314
|
+
│ │ ├── DataTable/ # DataTable et composants avancés
|
|
315
|
+
│ │ ├── ui/ # Composants de base
|
|
316
|
+
│ │ └── ...
|
|
317
|
+
│ ├── contexts/ # Providers (Theme, I18n, Config)
|
|
318
|
+
│ ├── hooks/ # Hooks personnalisés
|
|
319
|
+
│ ├── utils/ # Fonctions utilitaires
|
|
320
|
+
│ ├── styles/ # Styles CSS/Tailwind
|
|
321
|
+
│ └── types/ # Types TypeScript
|
|
322
|
+
├── demo/ # Application de démonstration
|
|
323
|
+
├── tests/ # Tests unitaires
|
|
324
|
+
└── dist/ # Build de production
|
|
325
|
+
```
|
|
326
|
+
|
|
327
|
+
## 🔧 Configuration
|
|
328
|
+
|
|
329
|
+
### Tailwind CSS
|
|
330
|
+
|
|
331
|
+
```js
|
|
332
|
+
// tailwind.config.js
|
|
333
|
+
module.exports = {
|
|
334
|
+
content: [
|
|
335
|
+
'./src/**/*.{js,ts,jsx,tsx}',
|
|
336
|
+
'./node_modules/@wakastellar/ui/**/*.{js,ts,jsx,tsx}'
|
|
337
|
+
],
|
|
338
|
+
theme: {
|
|
339
|
+
extend: {
|
|
340
|
+
// Configuration personnalisée
|
|
341
|
+
}
|
|
342
|
+
},
|
|
343
|
+
plugins: [
|
|
344
|
+
require('@wakastellar/ui/tailwind-plugin')
|
|
345
|
+
]
|
|
346
|
+
}
|
|
347
|
+
```
|
|
348
|
+
|
|
349
|
+
### TypeScript
|
|
350
|
+
|
|
351
|
+
```json
|
|
352
|
+
// tsconfig.json
|
|
353
|
+
{
|
|
354
|
+
"compilerOptions": {
|
|
355
|
+
"strict": true,
|
|
356
|
+
"esModuleInterop": true,
|
|
357
|
+
"skipLibCheck": true
|
|
358
|
+
}
|
|
359
|
+
}
|
|
360
|
+
```
|
|
361
|
+
|
|
362
|
+
## 📚 Documentation
|
|
363
|
+
|
|
364
|
+
- [Guide d'installation](docs/installation.md)
|
|
365
|
+
- [Composants DataTable](docs/datatable.md)
|
|
366
|
+
- [Thèmes et personnalisation](docs/themes.md)
|
|
367
|
+
- [Internationalisation](docs/i18n.md)
|
|
368
|
+
- [API Reference](docs/api.md)
|
|
369
|
+
- [Exemples](demo/)
|
|
370
|
+
|
|
371
|
+
## 🤝 Contribution
|
|
372
|
+
|
|
373
|
+
1. Fork le projet
|
|
374
|
+
2. Créer une branche feature (`git checkout -b feature/AmazingFeature`)
|
|
375
|
+
3. Commit les changements (`git commit -m 'Add some AmazingFeature'`)
|
|
376
|
+
4. Push vers la branche (`git push origin feature/AmazingFeature`)
|
|
377
|
+
5. Ouvrir une Pull Request
|
|
378
|
+
|
|
379
|
+
## 📄 Licence
|
|
380
|
+
|
|
381
|
+
Ce projet est sous licence AGPL3. Voir le fichier [LICENSE](LICENSE) pour plus de détails.
|
|
382
|
+
|
|
383
|
+
## 🆘 Support
|
|
384
|
+
|
|
385
|
+
|
|
386
|
+
## 🎯 Roadmap
|
|
387
|
+
|
|
388
|
+
- [ ] Composants de formulaires avancés
|
|
389
|
+
- [ ] Graphiques et visualisations
|
|
390
|
+
- [ ] Composants de navigation
|
|
391
|
+
- [ ] Système de notifications
|
|
392
|
+
- [ ] Composants de calendrier
|
|
393
|
+
- [ ] Intégration avec des APIs externes
|
|
394
|
+
|
|
395
|
+
---
|
|
396
|
+
|
|
397
|
+
**Développé avec ❤️ par [WakaStellar](https://wakastellar.com)**
|
|
398
|
+
|
package/package.json
CHANGED
|
@@ -1,8 +1,11 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@wakastellar/ui",
|
|
3
|
-
"version": "0.1.
|
|
3
|
+
"version": "0.1.1",
|
|
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",
|