@wakastellar/ui 2.0.0 → 2.1.1

package/src/components/DataTable/types.ts

@@ -0,0 +1,504 @@
+import { ColumnDef, PaginationState, SortingState, ColumnFiltersState, VisibilityState, ColumnOrderState, ExpandedState, GroupingState } from "@tanstack/react-table"
+import { ReactNode } from "react"
+import { EditCellConfig } from "./DataTableEditCell"
+
+/**
+ * Layout variants pour le DataTable
+ */
+export type DataTableLayout = "standard" | "card" | "compact" | "split" | "infinite"
+
+/**
+ * Variantes visuelles
+ */
+export type DataTableVariant = "bordered" | "minimal" | "striped" | "glass"
+
+/**
+ * Densité d'affichage
+ */
+export type DataTableDensity = "comfortable" | "compact" | "spacious"
+
+/**
+ * Mode de sélection
+ */
+export type SelectionMode = "single" | "multiple" | "range"
+
+/**
+ * Mode de tri
+ */
+export type SortMode = "single" | "multiple"
+
+/**
+ * Type de virtualisation
+ */
+export type VirtualizationType = "none" | "fixed" | "dynamic"
+
+/**
+ * Position des filtres
+ */
+export type FilterPosition = "top" | "bottom" | "left" | "right" | "modal"
+
+/**
+ * Configuration de pagination
+ */
+export interface PaginationConfig {
+  /** Mode de pagination */
+  mode?: "client" | "server"
+  /** Taille de page par défaut */
+  pageSize?: number
+  /** Options de tailles de page */
+  pageSizeOptions?: number[]
+  /** Page courante (mode serveur) */
+  currentPage?: number
+  /** Total d'items (mode serveur) */
+  totalItems?: number
+  /** Callback de changement de page */
+  onPageChange?: (page: number) => void
+  /** Callback de changement de taille */
+  onPageSizeChange?: (size: number) => void
+}
+
+/**
+ * Configuration d'un filtre
+ */
+export interface FilterConfig {
+  /** ID unique du filtre */
+  id: string
+  /** Libellé du filtre */
+  label: string
+  /** Type de filtre */
+  type: "text" | "select" | "range" | "date" | "daterange" | "multiselect" | "checkbox" | "number" | "boolean"
+  /** Options pour select/multiselect */
+  options?: Array<{ label: string; value: string | number }>
+  /** Placeholder */
+  placeholder?: string
+  /** Valeur par défaut */
+  defaultValue?: any
+  /** Colonne associée */
+  column?: string
+  /** Fonction de filtrage personnalisée */
+  filterFn?: (row: any, columnId: string, filterValue: any) => boolean
+  /** Validation du filtre */
+  validate?: (value: any) => string | null
+}
+
+/**
+ * Configuration de groupement
+ */
+export interface GroupingConfig {
+  /** Colonnes de groupement */
+  columns?: string[]
+  /** Fonction d'agrégation personnalisée */
+  aggregations?: Record<string, (values: any[]) => any>
+  /** Affichage des totaux */
+  showTotals?: boolean
+  /** Position des totaux */
+  totalsPosition?: "top" | "bottom" | "both"
+}
+
+/**
+ * Configuration de virtualisation
+ */
+export interface VirtualizationConfig {
+  /** Type de virtualisation */
+  type: VirtualizationType
+  /** Hauteur fixe des lignes */
+  itemHeight?: number
+  /** Hauteur estimée pour la virtualisation dynamique */
+  estimatedItemHeight?: number
+  /** Nombre d'éléments à pré-rendre */
+  overscan?: number
+  /** Hauteur du conteneur */
+  containerHeight?: number
+}
+
+/**
+ * Configuration de redimensionnement des colonnes
+ */
+export interface ColumnResizeConfig {
+  /** Mode de redimensionnement */
+  mode?: "onChange" | "onEnd"
+  /** Colonnes redimensionnables */
+  resizable?: boolean
+  /** Largeur minimale */
+  minSize?: number
+  /** Largeur maximale */
+  maxSize?: number
+  /** Largeur par défaut */
+  defaultSize?: number
+}
+
+/**
+ * Configuration de réordonnancement
+ */
+export interface ColumnOrderConfig {
+  /** Activer le réordonnancement */
+  enabled?: boolean
+  /** Colonnes non réordonnables */
+  disabled?: string[]
+  /** Callback de changement d'ordre */
+  onOrderChange?: (newOrder: string[]) => void
+}
+
+/**
+ * Configuration d'expansion des lignes
+ */
+export interface RowExpansionConfig {
+  /** Activer l'expansion */
+  enabled?: boolean
+  /** Colonne d'expansion */
+  columnId?: string
+  /** Fonction de rendu du contenu étendu */
+  renderExpanded?: (row: any) => ReactNode
+  /** État d'expansion initial */
+  initialExpanded?: Record<string, boolean>
+}
+
+/**
+ * Action de la toolbar
+ */
+export interface TableAction {
+  /** ID unique */
+  id: string
+  /** Libellé */
+  label: string
+  /** Icône (composant React) */
+  icon?: ReactNode
+  /** Callback */
+  onClick: (selectedRows: any[]) => void
+  /** Visible seulement si sélection */
+  requiresSelection?: boolean
+  /** Variant du bouton */
+  variant?: "default" | "destructive" | "outline" | "ghost"
+  /** Désactivé */
+  disabled?: boolean
+}
+
+/**
+ * Configuration de la toolbar
+ */
+export interface ToolbarConfig {
+  /** Actions personnalisées */
+  actions?: TableAction[]
+  /** Afficher la recherche globale */
+  showSearch?: boolean
+  /** Afficher le sélecteur de colonnes */
+  showColumnToggle?: boolean
+  /** Afficher le changement de densité */
+  showDensity?: boolean
+  /** Afficher le bouton de refresh */
+  showRefresh?: boolean
+  /** Callback de refresh */
+  onRefresh?: () => void
+}
+
+/**
+ * Configuration d'export
+ */
+export interface ExportConfig {
+  /** Formats supportés */
+  formats?: Array<"csv" | "xlsx" | "json" | "pdf" | "xml">
+  /** Nom du fichier */
+  filename?: string
+  /** Callback personnalisé */
+  onExport?: (data: any[], format: string) => void
+  /** Colonnes à exporter */
+  columns?: string[]
+  /** Inclure les en-têtes */
+  includeHeaders?: boolean
+  /** Formatage personnalisé */
+  formatters?: Record<string, (value: any) => string>
+  /** Options spécifiques par format */
+  options?: {
+    csv?: { delimiter?: string; encoding?: string }
+    xlsx?: { sheetName?: string; includeStyles?: boolean }
+    pdf?: { orientation?: "portrait" | "landscape"; pageSize?: string }
+  }
+}
+
+/**
+ * Configuration d'import
+ */
+export interface ImportConfig {
+  /** Formats acceptés */
+  accept?: string
+  /** Callback de traitement */
+  onImport?: (data: any[]) => void
+  /** Validation des données */
+  validate?: (data: any[]) => { valid: boolean; errors: string[] }
+  /** Mapping des colonnes */
+  columnMapping?: Record<string, string>
+  /** Options de parsing */
+  parseOptions?: {
+    csv?: { delimiter?: string; skipEmptyLines?: boolean }
+    xlsx?: { sheetIndex?: number; headerRow?: number }
+  }
+}
+
+/**
+ * État de sélection
+ */
+export interface SelectionState {
+  /** IDs sélectionnés */
+  selectedIds: Set<string>
+  /** Tout sélectionné */
+  selectAll: boolean
+}
+
+/**
+ * Props principales du DataTable
+ */
+export interface DataTableProps<TData> {
+  /** Données à afficher */
+  data: TData[]
+  
+  /** Définition des colonnes */
+  columns: ColumnDef<TData, any>[]
+  
+  /** Layout d'affichage */
+  layout?: DataTableLayout
+  
+  /** Variant visuel */
+  variant?: DataTableVariant
+  
+  /** Densité */
+  density?: DataTableDensity
+  
+  /** Configuration des filtres */
+  filters?: FilterConfig[]
+  
+  /** Position des filtres */
+  filterPosition?: FilterPosition
+  
+  /** Configuration de la toolbar */
+  toolbar?: ToolbarConfig
+  
+  /** Configuration de la pagination */
+  pagination?: PaginationConfig
+  
+  /** Mode de sélection */
+  selection?: SelectionMode | boolean
+  
+  /** Actions sur les lignes */
+  actions?: TableAction[]
+  
+  /** Namespace i18n */
+  i18nNamespace?: string
+  
+  /** État de chargement */
+  loading?: boolean
+  
+  /** Message d'erreur */
+  error?: string | null
+  
+  /** État vide personnalisé */
+  emptyState?: ReactNode
+  
+  /** Header sticky */
+  headerSticky?: boolean
+  
+  /** Toggle de visibilité des colonnes */
+  columnVisibilityToggle?: boolean
+  
+  /** Configuration de redimensionnement des colonnes */
+  columnResize?: boolean | ColumnResizeConfig
+  
+  /** Configuration de réordonnancement */
+  columnOrder?: ColumnOrderConfig
+  
+  /** Configuration de groupement */
+  grouping?: GroupingConfig
+  
+  /** Configuration d'expansion des lignes */
+  rowExpansion?: RowExpansionConfig
+  
+  /** Configuration de virtualisation */
+  virtualization?: VirtualizationConfig
+  
+  /** Mode de tri */
+  sortMode?: SortMode
+  
+  /** Activer l'export */
+  enableExport?: boolean | ExportConfig
+  
+  /** Activer l'import */
+  enableImport?: boolean | ImportConfig
+  
+  /** Activer le réordonnancement */
+  enableReorder?: boolean
+  
+  /** Menu contextuel */
+  enableContextMenu?: boolean
+  
+  /** Callback de clic sur ligne */
+  onRowClick?: (row: TData) => void
+  
+  /** Callback de double-clic */
+  onRowDoubleClick?: (row: TData) => void
+  
+  /** Callback de changement de tri */
+  onSortingChange?: (sorting: SortingState) => void
+  
+  /** Callback de changement de filtres */
+  onFiltersChange?: (filters: ColumnFiltersState) => void
+  
+  /** Callback de changement de sélection */
+  onSelectionChange?: (selectedRows: TData[]) => void
+  
+  /** Callback de changement d'ordre des colonnes */
+  onColumnOrderChange?: (order: ColumnOrderState) => void
+  
+  /** Callback de changement d'expansion */
+  onExpandedChange?: (expanded: ExpandedState) => void
+  
+  /** Callback de changement de groupement */
+  onGroupingChange?: (grouping: GroupingState) => void
+  
+  /** Classe CSS personnalisée */
+  className?: string
+  
+  /** ID unique pour la persistance */
+  tableId?: string
+  
+  /** Configuration d'édition */
+  edit?: EditConfig<TData>
+  
+  /** Thème personnalisé */
+  theme?: {
+    colors?: Record<string, string>
+    spacing?: Record<string, string>
+    typography?: Record<string, any>
+  }
+  
+  /** Options de performance */
+  performance?: {
+    /** Désactiver les animations */
+    disableAnimations?: boolean
+    /** Limite de rendu */
+    renderLimit?: number
+    /** Délai de debounce pour les filtres */
+    filterDebounceMs?: number
+  }
+}
+
+/**
+ * Configuration d'édition pour une colonne
+ */
+export interface ColumnEditConfig<TData> {
+  /** Champ éditable */
+  field: keyof TData
+  /** Configuration de la cellule d'édition */
+  config: EditCellConfig
+  /** Validation personnalisée */
+  validate?: (value: any, row: TData) => string | null
+  /** Callback de changement */
+  onChange?: (value: any, row: TData) => void
+}
+
+/**
+ * Configuration d'édition du DataTable
+ */
+export interface EditConfig<TData> {
+  /** Colonnes éditables */
+  editableColumns?: ColumnEditConfig<TData>[]
+  /** Mode d'édition */
+  mode?: "inline" | "modal" | "row"
+  /** Auto-save */
+  autoSave?: boolean
+  /** Délai d'auto-save en ms */
+  autoSaveDelay?: number
+  /** Callback de sauvegarde */
+  onSave?: (rowId: string, data: Partial<TData>) => Promise<void>
+  /** Callback d'annulation */
+  onCancel?: (rowId: string, originalData: TData) => void
+  /** Validation globale */
+  validate?: (data: Partial<TData>, row: TData) => Record<string, string>
+  /** Boutons d'action personnalisés */
+  actionButtons?: {
+    save?: ReactNode
+    cancel?: ReactNode
+    edit?: ReactNode
+  }
+}
+
+/**
+ * État interne du DataTable
+ */
+export interface DataTableState {
+  sorting: SortingState
+  columnFilters: ColumnFiltersState
+  columnVisibility: VisibilityState
+  columnOrder: ColumnOrderState
+  expanded: ExpandedState
+  grouping: GroupingState
+  pagination: PaginationState
+  globalFilter: string
+  density: DataTableDensity
+  layout: DataTableLayout
+  rowSelection: Record<string, boolean>
+}
+
+/**
+ * Configuration de thème personnalisé
+ */
+export interface DataTableTheme {
+  /** Couleurs personnalisées */
+  colors?: {
+    primary?: string
+    secondary?: string
+    accent?: string
+    background?: string
+    surface?: string
+    text?: string
+    textSecondary?: string
+    border?: string
+    hover?: string
+    selected?: string
+    disabled?: string
+  }
+  /** Espacement personnalisé */
+  spacing?: {
+    xs?: string
+    sm?: string
+    md?: string
+    lg?: string
+    xl?: string
+  }
+  /** Typographie personnalisée */
+  typography?: {
+    fontFamily?: string
+    fontSize?: {
+      xs?: string
+      sm?: string
+      md?: string
+      lg?: string
+      xl?: string
+    }
+    fontWeight?: {
+      normal?: string
+      medium?: string
+      semibold?: string
+      bold?: string
+    }
+  }
+  /** Bordures personnalisées */
+  borders?: {
+    radius?: {
+      sm?: string
+      md?: string
+      lg?: string
+    }
+    width?: {
+      thin?: string
+      medium?: string
+      thick?: string
+    }
+  }
+  /** Ombres personnalisées */
+  shadows?: {
+    sm?: string
+    md?: string
+    lg?: string
+    xl?: string
+  }
+}
+

package/src/components/DataTable/utils.ts

@@ -0,0 +1,164 @@
+import { clsx, type ClassValue } from "clsx"
+
+/**
+ * Utilitaire pour merger les classes CSS
+ */
+export function cn(...inputs: ClassValue[]) {
+  return clsx(inputs)
+}
+
+/**
+ * Export des données en CSV
+ */
+export function exportToCSV<T extends Record<string, any>>(
+  data: T[],
+  filename: string = "export.csv"
+): void {
+  if (!data || data.length === 0) return
+
+  // Extraire les en-têtes
+  const headers = Object.keys(data[0])
+  
+  // Créer les lignes CSV
+  const csvContent = [
+    headers.join(","),
+    ...data.map((row) =>
+      headers
+        .map((header) => {
+          const value = row[header]
+          // Échapper les guillemets et entourer de guillemets si nécessaire
+          if (typeof value === "string" && (value.includes(",") || value.includes('"') || value.includes("\n"))) {
+            return `"${value.replace(/"/g, '""')}"`
+          }
+          return value
+        })
+        .join(",")
+    ),
+  ].join("\n")
+
+  // Télécharger le fichier
+  const blob = new Blob([csvContent], { type: "text/csv;charset=utf-8;" })
+  const link = document.createElement("a")
+  link.href = URL.createObjectURL(blob)
+  link.download = filename
+  link.click()
+  URL.revokeObjectURL(link.href)
+}
+
+/**
+ * Export des données en JSON
+ */
+export function exportToJSON<T>(data: T[], filename: string = "export.json"): void {
+  const jsonContent = JSON.stringify(data, null, 2)
+  const blob = new Blob([jsonContent], { type: "application/json;charset=utf-8;" })
+  const link = document.createElement("a")
+  link.href = URL.createObjectURL(blob)
+  link.download = filename
+  link.click()
+  URL.revokeObjectURL(link.href)
+}
+
+/**
+ * Parse un fichier CSV
+ */
+export async function parseCSV(file: File): Promise<any[]> {
+  return new Promise((resolve, reject) => {
+    const reader = new FileReader()
+    
+    reader.onload = (e) => {
+      try {
+        const text = e.target?.result as string
+        const lines = text.split("\n").filter((line) => line.trim())
+        
+        if (lines.length === 0) {
+          resolve([])
+          return
+        }
+
+        // Première ligne = en-têtes
+        const headers = lines[0].split(",").map((h) => h.trim().replace(/^"|"$/g, ""))
+        
+        // Lignes suivantes = données
+        const data = lines.slice(1).map((line) => {
+          const values = line.split(",").map((v) => v.trim().replace(/^"|"$/g, ""))
+          const row: any = {}
+          headers.forEach((header, index) => {
+            row[header] = values[index] || ""
+          })
+          return row
+        })
+
+        resolve(data)
+      } catch (error) {
+        reject(error)
+      }
+    }
+
+    reader.onerror = () => reject(reader.error)
+    reader.readAsText(file)
+  })
+}
+
+/**
+ * Sauvegarde de l'état dans localStorage
+ */
+export function saveTableState(tableId: string, state: any): void {
+  try {
+    localStorage.setItem(`datatable_${tableId}`, JSON.stringify(state))
+  } catch (error) {
+    console.warn("[DataTable] Failed to save state:", error)
+  }
+}
+
+/**
+ * Chargement de l'état depuis localStorage
+ */
+export function loadTableState(tableId: string): any | null {
+  try {
+    const saved = localStorage.getItem(`datatable_${tableId}`)
+    return saved ? JSON.parse(saved) : null
+  } catch (error) {
+    console.warn("[DataTable] Failed to load state:", error)
+    return null
+  }
+}
+
+/**
+ * Génère un ID unique
+ */
+export function generateId(): string {
+  return `${Date.now()}-${Math.random().toString(36).substr(2, 9)}`
+}
+
+/**
+ * Debounce une fonction
+ */
+export function debounce<T extends (...args: any[]) => any>(
+  func: T,
+  wait: number
+): (...args: Parameters<T>) => void {
+  let timeout: NodeJS.Timeout | null = null
+  
+  return function (...args: Parameters<T>) {
+    if (timeout) clearTimeout(timeout)
+    timeout = setTimeout(() => func(...args), wait)
+  }
+}
+
+/**
+ * Filtre global sur les données
+ */
+export function globalFilterFn<T extends Record<string, any>>(
+  row: T,
+  columnId: string,
+  filterValue: string
+): boolean {
+  const searchValue = filterValue.toLowerCase()
+  
+  // Rechercher dans toutes les valeurs de la ligne
+  return Object.values(row).some((value) => {
+    if (value == null) return false
+    return String(value).toLowerCase().includes(searchValue)
+  })
+}
+