@wakastellar/ui 0.1.8 → 0.1.10
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/dist/blocks/index.d.ts +2 -0
- package/dist/blocks/sidebar/index.d.ts +149 -0
- package/dist/components/DataTable/DataTable.d.ts +1 -1
- package/dist/components/DataTable/DataTableAdvanced.d.ts +1 -1
- package/dist/components/DataTable/DataTableBody.d.ts +68 -0
- package/dist/components/DataTable/DataTableCell.d.ts +34 -0
- package/dist/components/DataTable/DataTableConflictResolver.d.ts +45 -0
- package/dist/components/DataTable/DataTableFilterBuilder.d.ts +14 -0
- package/dist/components/DataTable/DataTableFilters.d.ts +3 -3
- package/dist/components/DataTable/DataTableHeader.d.ts +48 -0
- package/dist/components/DataTable/DataTableSelection.d.ts +17 -12
- package/dist/components/DataTable/DataTableSyncStatus.d.ts +31 -0
- package/dist/components/DataTable/formatters/index.d.ts +127 -0
- package/dist/components/DataTable/hooks/useDataTable.d.ts +1 -1
- package/dist/components/DataTable/hooks/useDataTableAdvanced.d.ts +1 -1
- package/dist/components/DataTable/hooks/useDataTableAdvancedFilters.d.ts +18 -0
- package/dist/components/DataTable/hooks/useDataTableColumnTemplates.d.ts +28 -0
- package/dist/components/DataTable/hooks/useDataTableExport.d.ts +7 -3
- package/dist/components/DataTable/hooks/useDataTableImport.d.ts +4 -2
- package/dist/components/DataTable/hooks/useDataTableOffline.d.ts +80 -0
- package/dist/components/DataTable/hooks/useDataTableVirtualization.d.ts +1 -1
- package/dist/components/DataTable/index.d.ts +48 -2
- package/dist/components/DataTable/services/IndexedDBService.d.ts +117 -0
- package/dist/components/DataTable/templates/index.d.ts +104 -0
- package/dist/components/DataTable/types.d.ts +417 -25
- package/dist/components/command/index.d.ts +1 -1
- package/dist/components/error-boundary/ErrorBoundary.d.ts +102 -0
- package/dist/components/error-boundary/index.d.ts +2 -0
- package/dist/components/index.d.ts +6 -0
- package/dist/components/typography/index.d.ts +1 -1
- package/dist/components/waka-autocomplete/index.d.ts +59 -0
- package/dist/components/waka-charts/WakaAreaChart.d.ts +12 -0
- package/dist/components/waka-charts/WakaBarChart.d.ts +12 -0
- package/dist/components/waka-charts/WakaChart.d.ts +17 -0
- package/dist/components/waka-charts/WakaLineChart.d.ts +12 -0
- package/dist/components/waka-charts/WakaMiniChart.d.ts +13 -0
- package/dist/components/waka-charts/WakaPieChart.d.ts +12 -0
- package/dist/components/waka-charts/WakaSparkline.d.ts +13 -0
- package/dist/components/waka-charts/dataTableHelpers.d.ts +34 -0
- package/dist/components/waka-charts/hooks/useChartTheme.d.ts +23 -0
- package/dist/components/waka-charts/hooks/useRechartsLoader.d.ts +161 -0
- package/dist/components/waka-charts/index.d.ts +57 -0
- package/dist/components/waka-charts/types.d.ts +298 -0
- package/dist/components/waka-color-picker/index.d.ts +40 -0
- package/dist/components/waka-file-upload/index.d.ts +49 -0
- package/dist/components/waka-rich-text-editor/index.d.ts +36 -0
- package/dist/context/admincrumb-context.d.ts +118 -1
- package/dist/context/language-context.d.ts +160 -22
- package/dist/context/theme-provider.d.ts +39 -1
- package/dist/context/waka-provider.d.ts +50 -7
- package/dist/hooks/use-toast.d.ts +116 -0
- package/dist/hooks/use-translation.d.ts +24 -1
- package/dist/hooks/useToast.d.ts +82 -0
- package/dist/index.cjs.js +32 -26
- package/dist/index.d.ts +9 -3
- package/dist/index.es.js +11356 -5724
- package/dist/types/provider.d.ts +30 -0
- package/dist/ui.css +1 -1
- package/dist/utils/cn.d.ts +15 -1
- package/dist/utils/datetime-helpers.d.ts +241 -33
- package/dist/utils/error-handling.d.ts +190 -0
- package/dist/utils/index.d.ts +2 -0
- package/dist/utils/logger.d.ts +4 -4
- package/dist/utils/theme-loader.d.ts +140 -30
- package/dist/utils/tweak.d.ts +14 -1
- package/package.json +63 -52
package/dist/blocks/index.d.ts
CHANGED
|
@@ -4,3 +4,5 @@ export { LanguageSelector as BlockLanguageSelector } from './language-selector';
|
|
|
4
4
|
export { Layout } from './layout';
|
|
5
5
|
export { Login } from './login';
|
|
6
6
|
export type { LoginConfig, LoginColorConfig, LoginThemeConfig, LoginAssetsConfig, LoginSignupOptions, LoginFormData } from './login';
|
|
7
|
+
export { WakaSidebar, SidebarLayout, useSidebar } from './sidebar';
|
|
8
|
+
export type { WakaSidebarProps, SidebarLayoutProps, SidebarMenuItem, SidebarUserConfig, SidebarLogoConfig, } from './sidebar';
|
|
@@ -0,0 +1,149 @@
|
|
|
1
|
+
import * as React from "react";
|
|
2
|
+
export interface SidebarMenuItem {
|
|
3
|
+
/** Identifiant unique */
|
|
4
|
+
id: string;
|
|
5
|
+
/** Label du menu */
|
|
6
|
+
label: string;
|
|
7
|
+
/** Icône (composant React) */
|
|
8
|
+
icon?: React.ReactNode;
|
|
9
|
+
/** URL de navigation */
|
|
10
|
+
href?: string;
|
|
11
|
+
/** Callback au clic */
|
|
12
|
+
onClick?: () => void;
|
|
13
|
+
/** Sous-menus */
|
|
14
|
+
children?: SidebarMenuItem[];
|
|
15
|
+
/** Menu actif */
|
|
16
|
+
active?: boolean;
|
|
17
|
+
/** Badge/compteur */
|
|
18
|
+
badge?: string | number;
|
|
19
|
+
/** Désactivé */
|
|
20
|
+
disabled?: boolean;
|
|
21
|
+
}
|
|
22
|
+
export interface SidebarUserConfig {
|
|
23
|
+
/** Nom de l'utilisateur */
|
|
24
|
+
name: string;
|
|
25
|
+
/** Email ou sous-titre */
|
|
26
|
+
email?: string;
|
|
27
|
+
/** URL de l'avatar */
|
|
28
|
+
avatarUrl?: string;
|
|
29
|
+
/** Initiales pour le fallback */
|
|
30
|
+
initials?: string;
|
|
31
|
+
/** Actions du menu utilisateur */
|
|
32
|
+
actions?: {
|
|
33
|
+
id: string;
|
|
34
|
+
label: string;
|
|
35
|
+
icon?: React.ReactNode;
|
|
36
|
+
onClick?: () => void;
|
|
37
|
+
href?: string;
|
|
38
|
+
variant?: "default" | "destructive";
|
|
39
|
+
}[];
|
|
40
|
+
}
|
|
41
|
+
export interface SidebarLogoConfig {
|
|
42
|
+
/** Image du logo */
|
|
43
|
+
src?: string;
|
|
44
|
+
/** Texte alternatif */
|
|
45
|
+
alt?: string;
|
|
46
|
+
/** Texte à côté du logo */
|
|
47
|
+
title?: string;
|
|
48
|
+
/** URL au clic sur le logo */
|
|
49
|
+
href?: string;
|
|
50
|
+
/** Callback au clic */
|
|
51
|
+
onClick?: () => void;
|
|
52
|
+
/** Composant logo personnalisé */
|
|
53
|
+
component?: React.ReactNode;
|
|
54
|
+
}
|
|
55
|
+
export interface WakaSidebarProps {
|
|
56
|
+
/** Configuration du logo */
|
|
57
|
+
logo?: SidebarLogoConfig;
|
|
58
|
+
/** Éléments du menu */
|
|
59
|
+
menu: SidebarMenuItem[];
|
|
60
|
+
/** Configuration utilisateur */
|
|
61
|
+
user?: SidebarUserConfig;
|
|
62
|
+
/** Largeur de la sidebar (desktop) */
|
|
63
|
+
width?: number;
|
|
64
|
+
/** Breakpoint pour le mode mobile (en px) */
|
|
65
|
+
mobileBreakpoint?: number;
|
|
66
|
+
/** Sidebar ouverte (mode mobile) */
|
|
67
|
+
open?: boolean;
|
|
68
|
+
/** Callback changement d'état (mode mobile) */
|
|
69
|
+
onOpenChange?: (open: boolean) => void;
|
|
70
|
+
/** Classes CSS additionnelles */
|
|
71
|
+
className?: string;
|
|
72
|
+
/** Classes CSS du contenu */
|
|
73
|
+
contentClassName?: string;
|
|
74
|
+
/** Couleur de fond */
|
|
75
|
+
backgroundColor?: string;
|
|
76
|
+
/** Couleur du texte */
|
|
77
|
+
textColor?: string;
|
|
78
|
+
/** Couleur de l'élément actif */
|
|
79
|
+
activeColor?: string;
|
|
80
|
+
/** Couleur de survol */
|
|
81
|
+
hoverColor?: string;
|
|
82
|
+
/** Position du menu utilisateur */
|
|
83
|
+
userPosition?: "top" | "bottom";
|
|
84
|
+
/** Afficher le bouton hamburger */
|
|
85
|
+
showHamburger?: boolean;
|
|
86
|
+
/** Position du bouton hamburger (pour usage externe) */
|
|
87
|
+
hamburgerPosition?: "left" | "right";
|
|
88
|
+
/** Rendu personnalisé d'un item */
|
|
89
|
+
renderItem?: (item: SidebarMenuItem, isChild: boolean) => React.ReactNode;
|
|
90
|
+
/** Footer personnalisé */
|
|
91
|
+
footer?: React.ReactNode;
|
|
92
|
+
/** Header personnalisé (après le logo) */
|
|
93
|
+
header?: React.ReactNode;
|
|
94
|
+
}
|
|
95
|
+
/**
|
|
96
|
+
* WakaSidebar - Sidebar personnalisable avec menu hamburger responsive
|
|
97
|
+
*
|
|
98
|
+
* @example
|
|
99
|
+
* ```tsx
|
|
100
|
+
* <WakaSidebar
|
|
101
|
+
* logo={{ src: "/logo.svg", title: "WAKASTART" }}
|
|
102
|
+
* menu={[
|
|
103
|
+
* { id: "dashboard", label: "Tableau de bord", icon: <Home /> },
|
|
104
|
+
* {
|
|
105
|
+
* id: "admin",
|
|
106
|
+
* label: "Administration",
|
|
107
|
+
* icon: <Settings />,
|
|
108
|
+
* children: [
|
|
109
|
+
* { id: "users", label: "Utilisateurs" },
|
|
110
|
+
* { id: "roles", label: "Rôles" },
|
|
111
|
+
* ],
|
|
112
|
+
* },
|
|
113
|
+
* ]}
|
|
114
|
+
* user={{
|
|
115
|
+
* name: "John Doe",
|
|
116
|
+
* email: "john@example.com",
|
|
117
|
+
* avatarUrl: "/avatar.jpg",
|
|
118
|
+
* }}
|
|
119
|
+
* />
|
|
120
|
+
* ```
|
|
121
|
+
*/
|
|
122
|
+
export declare function WakaSidebar({ logo, menu, user, width, mobileBreakpoint, open, onOpenChange, className, contentClassName, backgroundColor, textColor, activeColor, hoverColor, userPosition, showHamburger, hamburgerPosition, renderItem, footer, header, }: WakaSidebarProps): import("react/jsx-runtime").JSX.Element;
|
|
123
|
+
/**
|
|
124
|
+
* Hook pour gérer l'état de la sidebar externalement
|
|
125
|
+
*/
|
|
126
|
+
export declare function useSidebar(): {
|
|
127
|
+
isOpen: boolean;
|
|
128
|
+
setIsOpen: React.Dispatch<React.SetStateAction<boolean>>;
|
|
129
|
+
open: () => void;
|
|
130
|
+
close: () => void;
|
|
131
|
+
toggle: () => void;
|
|
132
|
+
};
|
|
133
|
+
export interface SidebarLayoutProps {
|
|
134
|
+
/** Configuration de la sidebar */
|
|
135
|
+
sidebar: WakaSidebarProps;
|
|
136
|
+
/** Contenu principal */
|
|
137
|
+
children: React.ReactNode;
|
|
138
|
+
/** Largeur de la sidebar (override) */
|
|
139
|
+
sidebarWidth?: number;
|
|
140
|
+
/** Classes CSS du conteneur */
|
|
141
|
+
className?: string;
|
|
142
|
+
/** Classes CSS du contenu principal */
|
|
143
|
+
contentClassName?: string;
|
|
144
|
+
}
|
|
145
|
+
/**
|
|
146
|
+
* Layout avec sidebar intégrée
|
|
147
|
+
*/
|
|
148
|
+
export declare function SidebarLayout({ sidebar, children, sidebarWidth, className, contentClassName, }: SidebarLayoutProps): import("react/jsx-runtime").JSX.Element;
|
|
149
|
+
export default WakaSidebar;
|
|
@@ -14,4 +14,4 @@ import { DataTableProps } from './types';
|
|
|
14
14
|
* />
|
|
15
15
|
* ```
|
|
16
16
|
*/
|
|
17
|
-
export declare function DataTable<TData
|
|
17
|
+
export declare function DataTable<TData extends Record<string, unknown>>({ data, columns: initialColumns, layout: layoutProp, variant, density: densityProp, filters, filterPosition, toolbar, pagination: paginationConfig, selection, actions, i18nNamespace, loading, error, emptyState, headerSticky, columnVisibilityToggle, columnResize, enableExport, enableImport, enableReorder, enableContextMenu, onRowClick, onRowDoubleClick, onSortingChange, onFiltersChange, onSelectionChange, className, tableId, virtualization, edit, }: DataTableProps<TData>): import("react/jsx-runtime").JSX.Element;
|
|
@@ -24,4 +24,4 @@ import { DataTableProps } from './types';
|
|
|
24
24
|
* />
|
|
25
25
|
* ```
|
|
26
26
|
*/
|
|
27
|
-
export declare function DataTableAdvanced<TData
|
|
27
|
+
export declare function DataTableAdvanced<TData extends Record<string, unknown>>({ data, columns: initialColumns, layout: layoutProp, variant, density: densityProp, filters, filterPosition, toolbar, pagination: paginationConfig, selection, actions, i18nNamespace, loading, error, emptyState, headerSticky, columnVisibilityToggle, columnResize, columnOrder: columnOrderConfig, grouping, rowExpansion, virtualization, sortMode, enableExport, enableImport, enableReorder, enableContextMenu, onRowClick, onRowDoubleClick, onSortingChange, onFiltersChange, onSelectionChange, onColumnOrderChange, onExpandedChange, onGroupingChange, className, tableId, edit, theme, performance, }: DataTableProps<TData>): import("react/jsx-runtime").JSX.Element;
|
|
@@ -0,0 +1,68 @@
|
|
|
1
|
+
import { Table, Row } from '@tanstack/react-table';
|
|
2
|
+
import { ColumnEditConfig, EditableCellValue, RowExpansionConfig } from './types';
|
|
3
|
+
/**
|
|
4
|
+
* Props pour le composant DataTableBody
|
|
5
|
+
*/
|
|
6
|
+
export interface DataTableBodyProps<TData extends Record<string, unknown>> {
|
|
7
|
+
/** Instance de la table TanStack */
|
|
8
|
+
table: Table<TData>;
|
|
9
|
+
/** Configuration d'expansion des lignes */
|
|
10
|
+
rowExpansion?: RowExpansionConfig<TData>;
|
|
11
|
+
/** Classes CSS pour la densité */
|
|
12
|
+
densityClasses?: {
|
|
13
|
+
header?: string;
|
|
14
|
+
table?: string;
|
|
15
|
+
cell?: string;
|
|
16
|
+
};
|
|
17
|
+
/** Callback de clic sur ligne */
|
|
18
|
+
onRowClick?: (row: TData) => void;
|
|
19
|
+
/** Callback de double-clic */
|
|
20
|
+
onRowDoubleClick?: (row: TData) => void;
|
|
21
|
+
/** ID de la ligne en cours d'édition */
|
|
22
|
+
editingRowId?: string | null;
|
|
23
|
+
/** Configuration d'édition des colonnes */
|
|
24
|
+
editableColumns?: ColumnEditConfig<TData>[];
|
|
25
|
+
/** Callback pour mettre à jour un champ */
|
|
26
|
+
onUpdateField?: (field: keyof TData, value: EditableCellValue) => void;
|
|
27
|
+
/** Callback pour démarrer l'édition */
|
|
28
|
+
onStartEdit?: (rowId: string, originalData: TData) => void;
|
|
29
|
+
/** Callback pour sauvegarder */
|
|
30
|
+
onSaveEdit?: () => void;
|
|
31
|
+
/** Callback pour annuler */
|
|
32
|
+
onCancelEdit?: () => void;
|
|
33
|
+
}
|
|
34
|
+
/**
|
|
35
|
+
* Composant Body réutilisable pour DataTable
|
|
36
|
+
*
|
|
37
|
+
* Gère :
|
|
38
|
+
* - Le rendu des lignes
|
|
39
|
+
* - L'expansion des lignes
|
|
40
|
+
* - Le groupement
|
|
41
|
+
* - L'édition inline
|
|
42
|
+
*/
|
|
43
|
+
export declare function DataTableBody<TData extends Record<string, unknown>>({ table, rowExpansion, densityClasses, onRowClick, onRowDoubleClick, editingRowId, editableColumns, onUpdateField, onStartEdit, onSaveEdit, onCancelEdit, }: DataTableBodyProps<TData>): import("react/jsx-runtime").JSX.Element;
|
|
44
|
+
/**
|
|
45
|
+
* Props pour DataTableBodyRow
|
|
46
|
+
*/
|
|
47
|
+
interface DataTableBodyRowProps<TData extends Record<string, unknown>> {
|
|
48
|
+
row: Row<TData>;
|
|
49
|
+
rowExpansion?: RowExpansionConfig<TData>;
|
|
50
|
+
densityClasses: {
|
|
51
|
+
header?: string;
|
|
52
|
+
table?: string;
|
|
53
|
+
cell?: string;
|
|
54
|
+
};
|
|
55
|
+
onRowClick?: (row: TData) => void;
|
|
56
|
+
onRowDoubleClick?: (row: TData) => void;
|
|
57
|
+
editingRowId?: string | null;
|
|
58
|
+
editableColumns?: ColumnEditConfig<TData>[];
|
|
59
|
+
onUpdateField?: (field: keyof TData, value: EditableCellValue) => void;
|
|
60
|
+
onStartEdit?: (rowId: string, originalData: TData) => void;
|
|
61
|
+
onSaveEdit?: () => void;
|
|
62
|
+
onCancelEdit?: () => void;
|
|
63
|
+
}
|
|
64
|
+
/**
|
|
65
|
+
* Ligne individuelle du body
|
|
66
|
+
*/
|
|
67
|
+
declare function DataTableBodyRow<TData extends Record<string, unknown>>({ row, rowExpansion, densityClasses, onRowClick, onRowDoubleClick, editingRowId, editableColumns, onUpdateField, onStartEdit, onSaveEdit, onCancelEdit, }: DataTableBodyRowProps<TData>): import("react/jsx-runtime").JSX.Element;
|
|
68
|
+
export { DataTableBodyRow };
|
|
@@ -0,0 +1,34 @@
|
|
|
1
|
+
import { Cell, Row } from '@tanstack/react-table';
|
|
2
|
+
import { ColumnEditConfig, EditableCellValue } from './types';
|
|
3
|
+
/**
|
|
4
|
+
* Props pour le composant DataTableCell
|
|
5
|
+
*/
|
|
6
|
+
export interface DataTableCellProps<TData extends Record<string, unknown>> {
|
|
7
|
+
/** Cellule TanStack Table */
|
|
8
|
+
cell: Cell<TData, unknown>;
|
|
9
|
+
/** Ligne parente */
|
|
10
|
+
row: Row<TData>;
|
|
11
|
+
/** ID de la ligne en cours d'édition */
|
|
12
|
+
editingRowId?: string | null;
|
|
13
|
+
/** Configuration d'édition des colonnes */
|
|
14
|
+
editableColumns?: ColumnEditConfig<TData>[];
|
|
15
|
+
/** Callback pour mettre à jour un champ */
|
|
16
|
+
onUpdateField?: (field: keyof TData, value: EditableCellValue) => void;
|
|
17
|
+
/** Callback pour démarrer l'édition */
|
|
18
|
+
onStartEdit?: (rowId: string, originalData: TData) => void;
|
|
19
|
+
/** Callback pour sauvegarder */
|
|
20
|
+
onSaveEdit?: () => void;
|
|
21
|
+
/** Callback pour annuler */
|
|
22
|
+
onCancelEdit?: () => void;
|
|
23
|
+
}
|
|
24
|
+
/**
|
|
25
|
+
* Composant de cellule réutilisable pour DataTable
|
|
26
|
+
*
|
|
27
|
+
* Gère tous les types de cellules :
|
|
28
|
+
* - Cellules normales
|
|
29
|
+
* - Cellules éditables
|
|
30
|
+
* - Cellules groupées
|
|
31
|
+
* - Cellules agrégées
|
|
32
|
+
* - Cellules placeholder
|
|
33
|
+
*/
|
|
34
|
+
export declare function DataTableCell<TData extends Record<string, unknown>>({ cell, row, editingRowId, editableColumns, onUpdateField, onStartEdit, onSaveEdit, onCancelEdit, }: DataTableCellProps<TData>): import("react/jsx-runtime").JSX.Element | null;
|
|
@@ -0,0 +1,45 @@
|
|
|
1
|
+
import { ConflictEntry } from './services/IndexedDBService';
|
|
2
|
+
/**
|
|
3
|
+
* DataTableConflictResolver - Interface de résolution des conflits
|
|
4
|
+
*/
|
|
5
|
+
import * as React from "react";
|
|
6
|
+
export interface DataTableConflictResolverProps<TData> {
|
|
7
|
+
/** Liste des conflits */
|
|
8
|
+
conflicts: ConflictEntry<TData>[];
|
|
9
|
+
/** Callback de résolution */
|
|
10
|
+
onResolve: (conflictId: string, resolution: "local" | "server" | "merge", mergedData?: Partial<TData>) => Promise<void>;
|
|
11
|
+
/** Ouvert */
|
|
12
|
+
open?: boolean;
|
|
13
|
+
/** Callback de fermeture */
|
|
14
|
+
onOpenChange?: (open: boolean) => void;
|
|
15
|
+
/** Afficher en mode sheet (sidebar) ou dialog */
|
|
16
|
+
mode?: "dialog" | "sheet";
|
|
17
|
+
/** Labels personnalisés */
|
|
18
|
+
labels?: {
|
|
19
|
+
title?: string;
|
|
20
|
+
description?: string;
|
|
21
|
+
localVersion?: string;
|
|
22
|
+
serverVersion?: string;
|
|
23
|
+
keepLocal?: string;
|
|
24
|
+
keepServer?: string;
|
|
25
|
+
merge?: string;
|
|
26
|
+
resolve?: string;
|
|
27
|
+
skip?: string;
|
|
28
|
+
noConflicts?: string;
|
|
29
|
+
conflictType?: Record<"create" | "update" | "delete", string>;
|
|
30
|
+
};
|
|
31
|
+
/** Fonction de rendu personnalisé pour les données */
|
|
32
|
+
renderData?: (data: Partial<TData> | null, type: "local" | "server") => React.ReactNode;
|
|
33
|
+
/** Clés à afficher dans la comparaison */
|
|
34
|
+
displayKeys?: (keyof TData)[];
|
|
35
|
+
/** Labels des clés */
|
|
36
|
+
keyLabels?: Record<string, string>;
|
|
37
|
+
}
|
|
38
|
+
/**
|
|
39
|
+
* Interface de résolution des conflits de synchronisation
|
|
40
|
+
*/
|
|
41
|
+
export declare function DataTableConflictResolver<TData extends Record<string, unknown>>({ conflicts, onResolve, open, onOpenChange, mode, labels: customLabels, renderData, displayKeys, keyLabels, }: DataTableConflictResolverProps<TData>): import("react/jsx-runtime").JSX.Element;
|
|
42
|
+
export declare namespace DataTableConflictResolver {
|
|
43
|
+
var displayName: string;
|
|
44
|
+
}
|
|
45
|
+
export default DataTableConflictResolver;
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
import { FilterOperator, FilterableColumn, AdvancedFiltersState, AdvancedFiltersActions } from './types';
|
|
2
|
+
interface DataTableFilterBuilderProps<TData> {
|
|
3
|
+
state: AdvancedFiltersState<TData>;
|
|
4
|
+
actions: AdvancedFiltersActions<TData>;
|
|
5
|
+
columns: FilterableColumn<TData>[];
|
|
6
|
+
getOperatorsForColumn: (column: keyof TData | string) => FilterOperator[];
|
|
7
|
+
className?: string;
|
|
8
|
+
maxNestingDepth?: number;
|
|
9
|
+
}
|
|
10
|
+
/**
|
|
11
|
+
* Composant de construction de filtres avancés
|
|
12
|
+
*/
|
|
13
|
+
export declare function DataTableFilterBuilder<TData>({ state, actions, columns, getOperatorsForColumn, className, maxNestingDepth, }: DataTableFilterBuilderProps<TData>): import("react/jsx-runtime").JSX.Element;
|
|
14
|
+
export default DataTableFilterBuilder;
|
|
@@ -1,10 +1,10 @@
|
|
|
1
|
-
import { Table } from '@tanstack/react-table';
|
|
1
|
+
import { Table, ColumnFiltersState } from '@tanstack/react-table';
|
|
2
2
|
import { FilterConfig, FilterPosition } from './types';
|
|
3
3
|
interface DataTableFiltersProps<TData> {
|
|
4
4
|
table: Table<TData>;
|
|
5
|
-
filters?: FilterConfig[];
|
|
5
|
+
filters?: FilterConfig<TData>[];
|
|
6
6
|
position?: FilterPosition;
|
|
7
|
-
onFiltersChange?: (filters:
|
|
7
|
+
onFiltersChange?: (filters: ColumnFiltersState) => void;
|
|
8
8
|
}
|
|
9
9
|
/**
|
|
10
10
|
* Composant de filtrage avancé pour DataTable
|
|
@@ -0,0 +1,48 @@
|
|
|
1
|
+
import { Table, HeaderGroup } from '@tanstack/react-table';
|
|
2
|
+
/**
|
|
3
|
+
* Props pour le composant DataTableHeader
|
|
4
|
+
*/
|
|
5
|
+
export interface DataTableHeaderProps<TData> {
|
|
6
|
+
/** Instance de la table TanStack */
|
|
7
|
+
table: Table<TData>;
|
|
8
|
+
/** Header sticky */
|
|
9
|
+
headerSticky?: boolean;
|
|
10
|
+
/** Classes CSS pour la densité */
|
|
11
|
+
densityClasses?: {
|
|
12
|
+
header?: string;
|
|
13
|
+
table?: string;
|
|
14
|
+
cell?: string;
|
|
15
|
+
};
|
|
16
|
+
/** Activer le redimensionnement des colonnes */
|
|
17
|
+
enableColumnResize?: boolean;
|
|
18
|
+
/** Mode de redimensionnement */
|
|
19
|
+
columnResizeMode?: "onChange" | "onEnd";
|
|
20
|
+
}
|
|
21
|
+
/**
|
|
22
|
+
* Composant Header réutilisable pour DataTable
|
|
23
|
+
*
|
|
24
|
+
* Gère :
|
|
25
|
+
* - Le tri des colonnes
|
|
26
|
+
* - Le redimensionnement
|
|
27
|
+
* - Le sticky header
|
|
28
|
+
*/
|
|
29
|
+
export declare function DataTableHeader<TData>({ table, headerSticky, densityClasses, enableColumnResize, columnResizeMode, }: DataTableHeaderProps<TData>): import("react/jsx-runtime").JSX.Element;
|
|
30
|
+
/**
|
|
31
|
+
* Props pour DataTableHeaderRow
|
|
32
|
+
*/
|
|
33
|
+
interface DataTableHeaderRowProps<TData> {
|
|
34
|
+
headerGroup: HeaderGroup<TData>;
|
|
35
|
+
densityClasses: {
|
|
36
|
+
header?: string;
|
|
37
|
+
table?: string;
|
|
38
|
+
cell?: string;
|
|
39
|
+
};
|
|
40
|
+
enableColumnResize: boolean;
|
|
41
|
+
columnResizeMode: "onChange" | "onEnd";
|
|
42
|
+
table: Table<TData>;
|
|
43
|
+
}
|
|
44
|
+
/**
|
|
45
|
+
* Ligne d'en-tête individuelle
|
|
46
|
+
*/
|
|
47
|
+
declare function DataTableHeaderRow<TData>({ headerGroup, densityClasses, enableColumnResize, columnResizeMode, table, }: DataTableHeaderRowProps<TData>): import("react/jsx-runtime").JSX.Element;
|
|
48
|
+
export { DataTableHeaderRow };
|
|
@@ -1,10 +1,22 @@
|
|
|
1
|
+
import { Table } from '@tanstack/react-table';
|
|
1
2
|
import * as React from "react";
|
|
3
|
+
/**
|
|
4
|
+
* Type pour une action de sélection
|
|
5
|
+
*/
|
|
6
|
+
export interface SelectionAction<TData> {
|
|
7
|
+
id: string;
|
|
8
|
+
label: string;
|
|
9
|
+
icon?: React.ReactNode;
|
|
10
|
+
onClick: (selectedRows: TData[]) => void;
|
|
11
|
+
disabled?: boolean;
|
|
12
|
+
destructive?: boolean;
|
|
13
|
+
}
|
|
2
14
|
/**
|
|
3
15
|
* Props pour la sélection avancée du DataTable
|
|
4
16
|
*/
|
|
5
17
|
export interface DataTableSelectionProps<TData> {
|
|
6
18
|
/** Table instance */
|
|
7
|
-
table:
|
|
19
|
+
table: Table<TData>;
|
|
8
20
|
/** Mode de sélection */
|
|
9
21
|
selectionMode?: "single" | "multiple" | "range";
|
|
10
22
|
/** Données sélectionnées */
|
|
@@ -12,14 +24,7 @@ export interface DataTableSelectionProps<TData> {
|
|
|
12
24
|
/** Callback de changement de sélection */
|
|
13
25
|
onSelectionChange?: (selectedRows: TData[]) => void;
|
|
14
26
|
/** Actions sur la sélection */
|
|
15
|
-
selectionActions?:
|
|
16
|
-
id: string;
|
|
17
|
-
label: string;
|
|
18
|
-
icon?: React.ReactNode;
|
|
19
|
-
onClick: (selectedRows: TData[]) => void;
|
|
20
|
-
disabled?: boolean;
|
|
21
|
-
destructive?: boolean;
|
|
22
|
-
}>;
|
|
27
|
+
selectionActions?: SelectionAction<TData>[];
|
|
23
28
|
/** Classe CSS personnalisée */
|
|
24
29
|
className?: string;
|
|
25
30
|
}
|
|
@@ -31,7 +36,7 @@ export declare function DataTableSelection<TData>({ table, selectionMode, select
|
|
|
31
36
|
* Hook pour la sélection avancée
|
|
32
37
|
*/
|
|
33
38
|
export declare function useDataTableSelection<TData>({ table, selectionMode, onSelectionChange, }: {
|
|
34
|
-
table:
|
|
39
|
+
table: Table<TData>;
|
|
35
40
|
selectionMode?: "single" | "multiple" | "range";
|
|
36
41
|
onSelectionChange?: (selectedRows: TData[]) => void;
|
|
37
42
|
}): {
|
|
@@ -41,6 +46,6 @@ export declare function useDataTableSelection<TData>({ table, selectionMode, onS
|
|
|
41
46
|
selectRange: (start: number, end: number, selected?: boolean) => void;
|
|
42
47
|
selectByCriteria: (criteria: (row: TData) => boolean) => void;
|
|
43
48
|
clearSelection: () => void;
|
|
44
|
-
isAllSelected:
|
|
45
|
-
isSomeSelected:
|
|
49
|
+
isAllSelected: boolean;
|
|
50
|
+
isSomeSelected: boolean;
|
|
46
51
|
};
|
|
@@ -0,0 +1,31 @@
|
|
|
1
|
+
import { OfflineState } from './hooks/useDataTableOffline';
|
|
2
|
+
export interface DataTableSyncStatusProps<TData> {
|
|
3
|
+
/** État offline */
|
|
4
|
+
state: OfflineState<TData>;
|
|
5
|
+
/** Callback de synchronisation */
|
|
6
|
+
onSync?: () => void;
|
|
7
|
+
/** Afficher les détails */
|
|
8
|
+
showDetails?: boolean;
|
|
9
|
+
/** Classes CSS additionnelles */
|
|
10
|
+
className?: string;
|
|
11
|
+
/** Variante d'affichage */
|
|
12
|
+
variant?: "default" | "compact" | "badge";
|
|
13
|
+
/** Labels personnalisés */
|
|
14
|
+
labels?: {
|
|
15
|
+
online?: string;
|
|
16
|
+
offline?: string;
|
|
17
|
+
syncing?: string;
|
|
18
|
+
pending?: string;
|
|
19
|
+
conflicts?: string;
|
|
20
|
+
sync?: string;
|
|
21
|
+
lastSync?: string;
|
|
22
|
+
};
|
|
23
|
+
}
|
|
24
|
+
/**
|
|
25
|
+
* Indicateur de statut de synchronisation pour le mode offline
|
|
26
|
+
*/
|
|
27
|
+
export declare function DataTableSyncStatus<TData>({ state, onSync, showDetails, className, variant, labels: customLabels, }: DataTableSyncStatusProps<TData>): import("react/jsx-runtime").JSX.Element | null;
|
|
28
|
+
export declare namespace DataTableSyncStatus {
|
|
29
|
+
var displayName: string;
|
|
30
|
+
}
|
|
31
|
+
export default DataTableSyncStatus;
|
|
@@ -0,0 +1,127 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Formatters utilitaires pour le DataTable
|
|
3
|
+
* @module formatters
|
|
4
|
+
*/
|
|
5
|
+
/**
|
|
6
|
+
* Formate une date
|
|
7
|
+
* @param value - Valeur à formater (Date, string ISO, timestamp)
|
|
8
|
+
* @param formatStr - Format de sortie (default: 'PP' = 16 déc. 2025)
|
|
9
|
+
* @param locale - Locale (default: 'fr')
|
|
10
|
+
* @returns Date formatée ou chaîne vide
|
|
11
|
+
* @example formatters.date(new Date(), 'PP', 'fr') // "16 déc. 2025"
|
|
12
|
+
*/
|
|
13
|
+
export declare function date(value: unknown, formatStr?: string, locale?: string): string;
|
|
14
|
+
/**
|
|
15
|
+
* Formate une date avec heure
|
|
16
|
+
* @param value - Valeur à formater
|
|
17
|
+
* @param formatStr - Format de sortie (default: 'PPpp')
|
|
18
|
+
* @param locale - Locale
|
|
19
|
+
* @returns Date/heure formatée
|
|
20
|
+
* @example formatters.datetime(new Date()) // "16 déc. 2025, 14:30"
|
|
21
|
+
*/
|
|
22
|
+
export declare function datetime(value: unknown, formatStr?: string, locale?: string): string;
|
|
23
|
+
/**
|
|
24
|
+
* Formate une heure
|
|
25
|
+
* @param value - Valeur à formater
|
|
26
|
+
* @param formatStr - Format de sortie (default: 'HH:mm')
|
|
27
|
+
* @param locale - Locale
|
|
28
|
+
* @returns Heure formatée
|
|
29
|
+
* @example formatters.time(new Date()) // "14:30"
|
|
30
|
+
*/
|
|
31
|
+
export declare function time(value: unknown, formatStr?: string, locale?: string): string;
|
|
32
|
+
/**
|
|
33
|
+
* Formate une valeur monétaire
|
|
34
|
+
* @param value - Valeur numérique
|
|
35
|
+
* @param currencyCode - Code devise (default: 'EUR')
|
|
36
|
+
* @param locale - Locale (default: 'fr-FR')
|
|
37
|
+
* @param options - Options Intl.NumberFormat additionnelles
|
|
38
|
+
* @returns Valeur formatée
|
|
39
|
+
* @example formatters.currency(1234.56, 'EUR', 'fr-FR') // "1 234,56 €"
|
|
40
|
+
*/
|
|
41
|
+
export declare function currency(value: unknown, currencyCode?: string, locale?: string, options?: Partial<Intl.NumberFormatOptions>): string;
|
|
42
|
+
/**
|
|
43
|
+
* Formate un pourcentage
|
|
44
|
+
* @param value - Valeur (0-100 ou 0-1)
|
|
45
|
+
* @param decimals - Nombre de décimales (default: 0)
|
|
46
|
+
* @param isDecimal - Si true, value est entre 0 et 1
|
|
47
|
+
* @returns Pourcentage formaté
|
|
48
|
+
* @example formatters.percentage(42.5) // "42.5%"
|
|
49
|
+
* @example formatters.percentage(0.425, 1, true) // "42.5%"
|
|
50
|
+
*/
|
|
51
|
+
export declare function percentage(value: unknown, decimals?: number, isDecimal?: boolean): string;
|
|
52
|
+
/**
|
|
53
|
+
* Formate un nombre
|
|
54
|
+
* @param value - Valeur numérique
|
|
55
|
+
* @param locale - Locale (default: 'fr-FR')
|
|
56
|
+
* @param options - Options Intl.NumberFormat
|
|
57
|
+
* @returns Nombre formaté
|
|
58
|
+
* @example formatters.number(1234567.89, 'fr-FR') // "1 234 567,89"
|
|
59
|
+
*/
|
|
60
|
+
export declare function number(value: unknown, locale?: string, options?: Intl.NumberFormatOptions): string;
|
|
61
|
+
/**
|
|
62
|
+
* Formate un numéro de téléphone
|
|
63
|
+
* @param value - Numéro de téléphone
|
|
64
|
+
* @param countryCode - Code pays (default: 'FR')
|
|
65
|
+
* @returns Numéro formaté
|
|
66
|
+
* @example formatters.phone('+33612345678') // "+33 6 12 34 56 78"
|
|
67
|
+
* @example formatters.phone('0612345678', 'FR') // "06 12 34 56 78"
|
|
68
|
+
*/
|
|
69
|
+
export declare function phone(value: unknown, countryCode?: string): string;
|
|
70
|
+
/**
|
|
71
|
+
* Formate une taille en bytes
|
|
72
|
+
* @param value - Taille en bytes
|
|
73
|
+
* @param decimals - Nombre de décimales (default: 2)
|
|
74
|
+
* @returns Taille formatée (KB, MB, GB, etc.)
|
|
75
|
+
* @example formatters.bytes(1048576) // "1 MB"
|
|
76
|
+
* @example formatters.bytes(1536, 1) // "1.5 KB"
|
|
77
|
+
*/
|
|
78
|
+
export declare function bytes(value: unknown, decimals?: number): string;
|
|
79
|
+
/**
|
|
80
|
+
* Formate un texte tronqué
|
|
81
|
+
* @param value - Texte
|
|
82
|
+
* @param maxLength - Longueur max (default: 50)
|
|
83
|
+
* @param suffix - Suffixe de troncature (default: '...')
|
|
84
|
+
* @returns Texte tronqué
|
|
85
|
+
*/
|
|
86
|
+
export declare function truncate(value: unknown, maxLength?: number, suffix?: string): string;
|
|
87
|
+
/**
|
|
88
|
+
* Récupère les initiales d'un nom
|
|
89
|
+
* @param value - Nom complet
|
|
90
|
+
* @param maxInitials - Nombre max d'initiales (default: 2)
|
|
91
|
+
* @returns Initiales
|
|
92
|
+
* @example formatters.initials("Jean Dupont") // "JD"
|
|
93
|
+
*/
|
|
94
|
+
export declare function initials(value: unknown, maxInitials?: number): string;
|
|
95
|
+
/**
|
|
96
|
+
* Formate un booléen
|
|
97
|
+
* @param value - Valeur booléenne
|
|
98
|
+
* @param trueLabel - Label pour true (default: 'Oui')
|
|
99
|
+
* @param falseLabel - Label pour false (default: 'Non')
|
|
100
|
+
* @returns Label correspondant
|
|
101
|
+
*/
|
|
102
|
+
export declare function boolean(value: unknown, trueLabel?: string, falseLabel?: string): string;
|
|
103
|
+
/**
|
|
104
|
+
* Formate du JSON
|
|
105
|
+
* @param value - Valeur à sérialiser
|
|
106
|
+
* @param indent - Indentation (default: 2)
|
|
107
|
+
* @returns JSON formaté
|
|
108
|
+
*/
|
|
109
|
+
export declare function json(value: unknown, indent?: number): string;
|
|
110
|
+
/**
|
|
111
|
+
* Objet contenant tous les formatters
|
|
112
|
+
*/
|
|
113
|
+
export declare const formatters: {
|
|
114
|
+
date: typeof date;
|
|
115
|
+
datetime: typeof datetime;
|
|
116
|
+
time: typeof time;
|
|
117
|
+
currency: typeof currency;
|
|
118
|
+
percentage: typeof percentage;
|
|
119
|
+
number: typeof number;
|
|
120
|
+
phone: typeof phone;
|
|
121
|
+
bytes: typeof bytes;
|
|
122
|
+
truncate: typeof truncate;
|
|
123
|
+
initials: typeof initials;
|
|
124
|
+
boolean: typeof boolean;
|
|
125
|
+
json: typeof json;
|
|
126
|
+
};
|
|
127
|
+
export default formatters;
|
|
@@ -3,7 +3,7 @@ import { DataTableProps } from '../types';
|
|
|
3
3
|
/**
|
|
4
4
|
* Hook principal pour gérer l'état et la logique du DataTable
|
|
5
5
|
*/
|
|
6
|
-
export declare function useDataTable<TData
|
|
6
|
+
export declare function useDataTable<TData extends Record<string, unknown>>({ data, columns, pagination: paginationConfig, tableId, onSortingChange, onFiltersChange, onSelectionChange, }: Pick<DataTableProps<TData>, "data" | "columns" | "pagination" | "tableId" | "onSortingChange" | "onFiltersChange" | "onSelectionChange">): {
|
|
7
7
|
table: import('@tanstack/react-table').Table<TData>;
|
|
8
8
|
sorting: SortingState;
|
|
9
9
|
setSorting: import('react').Dispatch<import('react').SetStateAction<SortingState>>;
|
|
@@ -3,7 +3,7 @@ import { DataTableProps } from '../types';
|
|
|
3
3
|
/**
|
|
4
4
|
* Hook avancé pour gérer toutes les fonctionnalités du DataTable
|
|
5
5
|
*/
|
|
6
|
-
export declare function useDataTableAdvanced<TData
|
|
6
|
+
export declare function useDataTableAdvanced<TData extends Record<string, unknown>>({ data, columns, pagination: paginationConfig, tableId, onSortingChange, onFiltersChange, onSelectionChange, onColumnOrderChange, onExpandedChange, onGroupingChange, grouping, virtualization, sortMode, performance, }: Pick<DataTableProps<TData>, "data" | "columns" | "pagination" | "tableId" | "onSortingChange" | "onFiltersChange" | "onSelectionChange" | "onColumnOrderChange" | "onExpandedChange" | "onGroupingChange" | "grouping" | "virtualization" | "sortMode" | "performance">): {
|
|
7
7
|
table: import('@tanstack/react-table').Table<any>;
|
|
8
8
|
sorting: SortingState;
|
|
9
9
|
setSorting: import('react').Dispatch<import('react').SetStateAction<SortingState>>;
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
import { FilterOperator, FilterColumnType, AdvancedFiltersConfig, AdvancedFiltersResult } from '../types';
|
|
2
|
+
/**
|
|
3
|
+
* Opérateurs par type de colonne
|
|
4
|
+
*/
|
|
5
|
+
declare const OPERATORS_BY_TYPE: Record<FilterColumnType, FilterOperator[]>;
|
|
6
|
+
/**
|
|
7
|
+
* Labels des opérateurs pour l'affichage
|
|
8
|
+
*/
|
|
9
|
+
export declare const OPERATOR_LABELS: Record<FilterOperator, string>;
|
|
10
|
+
/**
|
|
11
|
+
* Hook pour gérer les filtres avancés du DataTable
|
|
12
|
+
*/
|
|
13
|
+
export declare function useDataTableAdvancedFilters<TData extends Record<string, unknown>>({ data, config, }: {
|
|
14
|
+
data: TData[];
|
|
15
|
+
config: AdvancedFiltersConfig<TData>;
|
|
16
|
+
}): AdvancedFiltersResult<TData>;
|
|
17
|
+
export { OPERATORS_BY_TYPE };
|
|
18
|
+
export default useDataTableAdvancedFilters;
|