@wakastellar/ui 2.0.0 → 2.1.1

package/src/components/DataTable/hooks/useDataTableTheme.ts

@@ -0,0 +1,213 @@
+import { useMemo, useCallback } from "react"
+import { DataTableTheme } from "../types"
+
+/**
+ * Hook pour gérer les thèmes personnalisés du DataTable
+ */
+export function useDataTableTheme({
+  theme,
+  variant = "bordered",
+  density = "comfortable",
+}: {
+  theme?: DataTableTheme
+  variant?: "bordered" | "minimal" | "striped" | "glass"
+  density?: "comfortable" | "compact" | "spacious"
+}): {
+  theme: DataTableTheme
+  variantClasses: string
+  densityClasses: Record<string, string>
+  customStyles: Record<string, string>
+  getThemedClass: (baseClass: string, themeKey?: string) => string
+  getThemedStyles: (baseStyles?: React.CSSProperties) => React.CSSProperties
+} {
+  // Thème par défaut
+  const defaultTheme: DataTableTheme = {
+    colors: {
+      primary: "hsl(var(--primary))",
+      secondary: "hsl(var(--secondary))",
+      accent: "hsl(var(--accent))",
+      background: "hsl(var(--background))",
+      surface: "hsl(var(--card))",
+      text: "hsl(var(--foreground))",
+      textSecondary: "hsl(var(--muted-foreground))",
+      border: "hsl(var(--border))",
+      hover: "hsl(var(--muted))",
+      selected: "hsl(var(--accent))",
+      disabled: "hsl(var(--muted))",
+    },
+    spacing: {
+      xs: "0.25rem",
+      sm: "0.5rem",
+      md: "1rem",
+      lg: "1.5rem",
+      xl: "2rem",
+    },
+    typography: {
+      fontFamily: "inherit",
+      fontSize: {
+        xs: "0.75rem",
+        sm: "0.875rem",
+        md: "1rem",
+        lg: "1.125rem",
+        xl: "1.25rem",
+      },
+      fontWeight: {
+        normal: "400",
+        medium: "500",
+        semibold: "600",
+        bold: "700",
+      },
+    },
+    borders: {
+      radius: {
+        sm: "0.25rem",
+        md: "0.5rem",
+        lg: "0.75rem",
+      },
+      width: {
+        thin: "1px",
+        medium: "2px",
+        thick: "4px",
+      },
+    },
+    shadows: {
+      sm: "0 1px 2px 0 rgb(0 0 0 / 0.05)",
+      md: "0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)",
+      lg: "0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)",
+      xl: "0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1)",
+    },
+  }
+
+  // Fusion du thème personnalisé avec le thème par défaut
+  const mergedTheme = useMemo(() => {
+    if (!theme) return defaultTheme
+
+    return {
+      colors: { ...defaultTheme.colors, ...theme.colors },
+      spacing: { ...defaultTheme.spacing, ...theme.spacing },
+      typography: { ...defaultTheme.typography, ...theme.typography },
+      borders: { ...defaultTheme.borders, ...theme.borders },
+      shadows: { ...defaultTheme.shadows, ...theme.shadows },
+    }
+  }, [theme, defaultTheme])
+
+  // Classes CSS pour les variants
+  const variantClasses = useMemo(() => {
+    const baseClasses = "w-full"
+    
+    switch (variant) {
+      case "bordered":
+        return `${baseClasses} border rounded-lg`
+      case "minimal":
+        return baseClasses
+      case "striped":
+        return `${baseClasses} [&_tbody_tr:nth-child(even)]:bg-muted/50`
+      case "glass":
+        return `${baseClasses} backdrop-blur-sm bg-background/80 border rounded-lg`
+      default:
+        return baseClasses
+    }
+  }, [variant])
+
+  // Classes CSS pour la densité
+  const densityClasses = useMemo(() => {
+    switch (density) {
+      case "spacious":
+        return {
+          table: "text-base",
+          header: "px-6 py-4",
+          cell: "px-6 py-4",
+          row: "h-16",
+        }
+      case "compact":
+        return {
+          table: "text-sm",
+          header: "px-3 py-2",
+          cell: "px-3 py-2",
+          row: "h-8",
+        }
+      case "comfortable":
+      default:
+        return {
+          table: "text-sm",
+          header: "px-4 py-3",
+          cell: "px-4 py-3",
+          row: "h-12",
+        }
+    }
+  }, [density])
+
+  // Styles CSS personnalisés
+  const customStyles = useMemo(() => {
+    const styles: Record<string, string> = {}
+    
+    if (mergedTheme.colors) {
+      Object.entries(mergedTheme.colors).forEach(([key, value]) => {
+        styles[`--datatable-color-${key}`] = value
+      })
+    }
+    
+    if (mergedTheme.spacing) {
+      Object.entries(mergedTheme.spacing).forEach(([key, value]) => {
+        styles[`--datatable-spacing-${key}`] = value
+      })
+    }
+    
+    if (mergedTheme.typography) {
+      if (mergedTheme.typography.fontFamily) {
+        styles["--datatable-font-family"] = mergedTheme.typography.fontFamily
+      }
+      if (mergedTheme.typography.fontSize) {
+        Object.entries(mergedTheme.typography.fontSize).forEach(([key, value]) => {
+          styles[`--datatable-font-size-${key}`] = value
+        })
+      }
+      if (mergedTheme.typography.fontWeight) {
+        Object.entries(mergedTheme.typography.fontWeight).forEach(([key, value]) => {
+          styles[`--datatable-font-weight-${key}`] = value
+        })
+      }
+    }
+    
+    if (mergedTheme.borders) {
+      if (mergedTheme.borders.radius) {
+        Object.entries(mergedTheme.borders.radius).forEach(([key, value]) => {
+          styles[`--datatable-radius-${key}`] = value
+        })
+      }
+      if (mergedTheme.borders.width) {
+        Object.entries(mergedTheme.borders.width).forEach(([key, value]) => {
+          styles[`--datatable-border-width-${key}`] = value
+        })
+      }
+    }
+    
+    if (mergedTheme.shadows) {
+      Object.entries(mergedTheme.shadows).forEach(([key, value]) => {
+        styles[`--datatable-shadow-${key}`] = value
+      })
+    }
+    
+    return styles
+  }, [mergedTheme])
+
+  // Fonction pour obtenir une classe CSS avec le thème
+  const getThemedClass = useCallback((baseClass: string, themeKey?: string) => {
+    if (!themeKey) return baseClass
+    return `${baseClass} [--datatable-theme-key:${themeKey}]`
+  }, [])
+
+  // Fonction pour obtenir des styles inline avec le thème
+  const getThemedStyles = useCallback((baseStyles: React.CSSProperties = {}) => {
+    return { ...baseStyles, ...customStyles }
+  }, [customStyles])
+
+  return {
+    theme: mergedTheme,
+    variantClasses,
+    densityClasses,
+    customStyles,
+    getThemedClass,
+    getThemedStyles,
+  }
+}

package/src/components/DataTable/hooks/useDataTableVirtualization.ts

@@ -0,0 +1,99 @@
+import { useMemo, useCallback, useState, useEffect } from "react"
+import { useVirtualizer } from "@tanstack/react-virtual"
+import { VirtualizationConfig } from "../types"
+
+/**
+ * Hook pour gérer la virtualisation du DataTable
+ */
+export function useDataTableVirtualization<TData>({
+  data,
+  virtualization,
+  containerRef,
+}: {
+  data: TData[]
+  virtualization?: VirtualizationConfig
+  containerRef: React.RefObject<HTMLElement>
+}) {
+  const [containerHeight, setContainerHeight] = useState(
+    virtualization?.containerHeight || 600
+  )
+
+  // Observer pour détecter les changements de taille du conteneur
+  useEffect(() => {
+    if (!containerRef.current || !virtualization) return
+
+    const resizeObserver = new ResizeObserver((entries) => {
+      for (const entry of entries) {
+        setContainerHeight(entry.contentRect.height)
+      }
+    })
+
+    resizeObserver.observe(containerRef.current)
+
+    return () => {
+      resizeObserver.disconnect()
+    }
+  }, [containerRef, virtualization])
+
+  // Configuration de la virtualisation
+  const virtualizerConfig = useMemo(() => {
+    if (!virtualization || virtualization.type === "none") {
+      return null
+    }
+
+    const config = {
+      count: data.length,
+      getScrollElement: () => containerRef.current,
+      estimateSize: () => virtualization.itemHeight || 50,
+      overscan: virtualization.overscan || 5,
+    }
+
+    // Configuration pour la virtualisation dynamique
+    if (virtualization.type === "dynamic") {
+      return {
+        ...config,
+        estimateSize: () => virtualization.estimatedItemHeight || 50,
+      }
+    }
+
+    return config
+  }, [data.length, virtualization, containerRef])
+
+  // Création du virtualizer seulement si la virtualisation est activée
+  const virtualizer = virtualizerConfig ? useVirtualizer(virtualizerConfig) : null
+
+  // Fonctions utilitaires
+  const scrollToIndex = useCallback((index: number, align: "start" | "center" | "end" = "start") => {
+    if (virtualizer) {
+      virtualizer.scrollToIndex(index, { align })
+    }
+  }, [virtualizer])
+
+  const scrollToOffset = useCallback((offset: number) => {
+    if (virtualizer) {
+      virtualizer.scrollToOffset(offset)
+    }
+  }, [virtualizer])
+
+  const getVirtualItems = useCallback(() => {
+    return virtualizer ? virtualizer.getVirtualItems() : []
+  }, [virtualizer])
+
+  const getTotalSize = useCallback(() => {
+    return virtualizer ? virtualizer.getTotalSize() : 0
+  }, [virtualizer])
+
+  const isVirtualized = virtualization?.type !== "none" && virtualizerConfig !== null
+
+  return {
+    virtualizer,
+    isVirtualized,
+    containerHeight,
+    scrollToIndex,
+    scrollToOffset,
+    getVirtualItems,
+    getTotalSize,
+    virtualItems: virtualizer ? virtualizer.getVirtualItems() : [],
+    totalSize: virtualizer ? virtualizer.getTotalSize() : 0,
+  }
+}

package/src/components/DataTable/hooks/useTableLayout.ts

@@ -0,0 +1,85 @@
+import { useState, useEffect, useCallback } from "react"
+import { DataTableLayout, DataTableDensity } from "../types"
+
+/**
+ * Hook pour gérer le layout et la densité du DataTable
+ */
+export function useTableLayout(
+  initialLayout: DataTableLayout = "standard",
+  initialDensity: DataTableDensity = "comfortable"
+) {
+  const [layout, setLayout] = useState<DataTableLayout>(initialLayout)
+  const [density, setDensity] = useState<DataTableDensity>(initialDensity)
+  const [isMobile, setIsMobile] = useState(false)
+
+  // Détection mobile
+  useEffect(() => {
+    const checkMobile = () => {
+      setIsMobile(window.innerWidth < 768)
+    }
+
+    checkMobile()
+    window.addEventListener("resize", checkMobile)
+    
+    return () => window.removeEventListener("resize", checkMobile)
+  }, [])
+
+  // Basculer automatiquement en mode card sur mobile si en mode standard
+  useEffect(() => {
+    if (isMobile && layout === "standard") {
+      setLayout("card")
+    }
+  }, [isMobile, layout])
+
+  // Toggle de layout
+  const toggleLayout = useCallback(() => {
+    setLayout((prev) => {
+      switch (prev) {
+        case "standard":
+          return "card"
+        case "card":
+          return "compact"
+        case "compact":
+          return "standard"
+        default:
+          return "standard"
+      }
+    })
+  }, [])
+
+  // Toggle de densité
+  const toggleDensity = useCallback(() => {
+    setDensity((prev) => (prev === "comfortable" ? "compact" : "comfortable"))
+  }, [])
+
+  // Classes CSS selon la densité
+  const densityClasses = {
+    comfortable: {
+      table: "text-sm",
+      cell: "px-4 py-3",
+      header: "px-4 py-3",
+    },
+    compact: {
+      table: "text-xs",
+      cell: "px-2 py-1.5",
+      header: "px-2 py-2",
+    },
+    spacious: {
+      table: "text-base",
+      cell: "px-6 py-4",
+      header: "px-6 py-4",
+    },
+  }
+
+  return {
+    layout,
+    setLayout,
+    density,
+    setDensity,
+    toggleLayout,
+    toggleDensity,
+    isMobile,
+    densityClasses: densityClasses[density],
+  }
+}
+

package/src/components/DataTable/index.ts

@@ -0,0 +1,81 @@
+/**
+ * DataTable - Composant ultra-complet basé sur TanStack Table v8
+ * 
+ * @module DataTable
+ * @description
+ * Composant de table de données hautement configurable avec support de :
+ * - Tri, filtrage, pagination
+ * - Sélection multiple
+ * - Export/Import (CSV, JSON)
+ * - Layouts multiples (standard, card, compact, split, infinite)
+ * - Thème clair/sombre via TweakCN
+ * - i18n complet
+ * - Virtualisation pour grandes données
+ * - Toolbar customisable
+ * - Actions par ligne et groupées
+ */
+
+// Composant principal
+export { DataTable } from "./DataTable"
+export { DataTableAdvanced } from "./DataTableAdvanced"
+
+// Sous-composants
+export { DataTableToolbar } from "./DataTableToolbar"
+export { DataTablePagination } from "./DataTablePagination"
+export { DataTableFilters } from "./DataTableFilters"
+export { DataTableEditCell } from "./DataTableEditCell"
+export { DataTableColumnResizer } from "./DataTableColumnResizer"
+export { DataTableGrouping, DataTableGroupTotals, DataTableGroupingControls } from "./DataTableGrouping"
+export { DataTableContextMenu } from "./DataTableContextMenu"
+export { DataTableSelection, useDataTableSelection } from "./DataTableSelection"
+
+// Hooks
+export { useDataTable } from "./hooks/useDataTable"
+export { useDataTableAdvanced } from "./hooks/useDataTableAdvanced"
+export { useDataTableVirtualization } from "./hooks/useDataTableVirtualization"
+export { useDataTableExport } from "./hooks/useDataTableExport"
+export { useDataTableImport } from "./hooks/useDataTableImport"
+export { useDataTableTheme } from "./hooks/useDataTableTheme"
+export { useTableLayout } from "./hooks/useTableLayout"
+export { useDataTableEdit } from "./hooks/useDataTableEdit"
+
+// Types
+export type {
+  DataTableProps,
+  DataTableLayout,
+  DataTableVariant,
+  DataTableDensity,
+  DataTableState,
+  FilterConfig,
+  FilterPosition,
+  PaginationConfig,
+  ToolbarConfig,
+  TableAction,
+  ExportConfig,
+  ImportConfig,
+  SelectionState,
+  EditConfig,
+  ColumnEditConfig,
+  SelectionMode,
+  SortMode,
+  VirtualizationType,
+  GroupingConfig,
+  VirtualizationConfig,
+  ColumnResizeConfig,
+  ColumnOrderConfig,
+  RowExpansionConfig,
+  DataTableTheme,
+} from "./types"
+
+// Types d'édition
+export type { EditCellConfig } from "./DataTableEditCell"
+
+// Utilitaires
+export {
+  exportToCSV,
+  exportToJSON,
+  parseCSV,
+  saveTableState,
+  loadTableState,
+} from "./utils"
+