@wakastellar/ui 2.0.0 → 2.1.0

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

@@ -0,0 +1,186 @@
+import { useMemo, useCallback } from "react"
+import { ColumnDef, CellContext } from "@tanstack/react-table"
+import { templatesMap, createActionsTemplate } from "../templates"
+import { formatters } from "../formatters"
+import type {
+  ColumnTemplateName,
+  ColumnTemplateDefinition,
+  ColumnTemplatesConfig,
+  ColumnTemplatesResult,
+  ColumnTemplateOptions,
+  ColumnTemplate,
+} from "../types"
+
+/**
+ * Hook pour créer des colonnes DataTable à partir de templates prédéfinis
+ *
+ * @template TData - Type des données de la table
+ * @param config - Configuration des templates (locale, currency, etc.)
+ * @returns Fonctions pour créer des colonnes et accéder aux formatters
+ *
+ * @example
+ * ```tsx
+ * const { createColumns, getFormatter } = useDataTableColumnTemplates({
+ *   locale: 'fr-FR',
+ *   currency: 'EUR',
+ * })
+ *
+ * const columns = createColumns<User>([
+ *   { accessorKey: 'email', template: 'email' },
+ *   { accessorKey: 'salary', template: 'currency' },
+ *   { accessorKey: 'status', template: 'status', options: {
+ *     templateOptions: {
+ *       statusColors: { active: 'bg-green-100 text-green-800' }
+ *     }
+ *   }},
+ * ])
+ * ```
+ */
+export function useDataTableColumnTemplates<TData extends Record<string, unknown>>(
+  config?: ColumnTemplatesConfig
+): ColumnTemplatesResult<TData> {
+  // Configuration par défaut
+  const defaultConfig = useMemo(() => ({
+    locale: "fr-FR",
+    currency: "EUR",
+    dateFormat: "PP",
+    datetimeFormat: "PPpp",
+    timeFormat: "HH:mm",
+    ...config,
+  }), [config])
+
+  /**
+   * Récupère un template par son nom avec typage correct pour les actions
+   */
+  const getTemplateForData = useCallback(<T>(
+    template: ColumnTemplateName | ColumnTemplate<T, unknown>
+  ): ColumnTemplate<T, unknown> | undefined => {
+    // Si c'est déjà un objet template, le retourner directement
+    if (typeof template === "object" && template !== null) {
+      return template
+    }
+
+    // Sinon, chercher dans les templates prédéfinis
+    const templateName = template as ColumnTemplateName
+    if (templateName === "actions") {
+      return createActionsTemplate<T>() as ColumnTemplate<T, unknown>
+    }
+    return templatesMap[templateName] as ColumnTemplate<T, unknown> | undefined
+  }, [])
+
+  /**
+   * Crée une ColumnDef à partir d'une définition de template
+   */
+  const getColumnFromTemplate = useCallback(<T extends Record<string, unknown>>(
+    definition: ColumnTemplateDefinition<T>
+  ): ColumnDef<T, unknown> => {
+    const { template, accessorKey, header, options = {} } = definition
+    const templateConfig = getTemplateForData<T>(template)
+
+    if (!templateConfig) {
+      console.warn(`Template "${String(template)}" not found, falling back to text template`)
+      return {
+        accessorKey: accessorKey as string,
+        header: header || String(accessorKey),
+        cell: ({ getValue }) => String(getValue() ?? ""),
+      }
+    }
+
+    // Déterminer le nom du template pour les options par défaut
+    const templateName = typeof template === "string" ? template as ColumnTemplateName : undefined
+
+    // Merge des options globales avec les options locales
+    const mergedOptions: Record<string, unknown> = {
+      // Options globales
+      locale: defaultConfig.locale,
+      currency: defaultConfig.currency,
+      format: templateName === "datetime"
+        ? defaultConfig.datetimeFormat
+        : templateName === "time"
+          ? defaultConfig.timeFormat
+          : defaultConfig.dateFormat,
+      // Options du template par défaut
+      ...(templateName && config?.defaultTemplateOptions?.[templateName] ? config.defaultTemplateOptions[templateName] : {}),
+      // Options spécifiques à la colonne
+      ...(options.templateOptions || {}),
+    }
+
+    // Créer la cellule avec le renderer du template
+    const cell = (info: CellContext<T, unknown>) => {
+      const value = info.getValue()
+      return templateConfig.cell(value, info.row.original, mergedOptions as ColumnTemplateOptions["templateOptions"])
+    }
+
+    // Construire la ColumnDef
+    const columnDef: ColumnDef<T, unknown> = {
+      accessorKey: accessorKey as string,
+      header: header || String(accessorKey),
+      cell,
+      size: options.size || templateConfig.size,
+      minSize: options.minSize || templateConfig.minSize,
+      maxSize: options.maxSize || templateConfig.maxSize,
+      enableSorting: options.enableSorting ?? templateConfig.enableSorting,
+      enableColumnFilter: options.enableFiltering ?? templateConfig.enableFiltering,
+      enableHiding: options.enableHiding ?? templateConfig.enableHiding,
+      meta: {
+        ...templateConfig.meta,
+        templateName: templateName,
+      },
+    }
+
+    // Ajouter la fonction de tri si définie (en tant que string pour les built-in fns)
+    if (templateConfig.sortingFn) {
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      columnDef.sortingFn = templateConfig.sortingFn as any
+    }
+
+    // Ajouter la fonction de filtre si définie
+    if (templateConfig.filterFn) {
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      columnDef.filterFn = templateConfig.filterFn as any
+    }
+
+    return columnDef
+  }, [defaultConfig, config?.defaultTemplateOptions, getTemplateForData])
+
+  /**
+   * Crée plusieurs colonnes à partir de définitions de templates
+   */
+  const createColumns = useCallback(<T extends Record<string, unknown>>(
+    definitions: ColumnTemplateDefinition<T>[]
+  ): ColumnDef<T, unknown>[] => {
+    return definitions.map((def) => getColumnFromTemplate<T>(def))
+  }, [getColumnFromTemplate])
+
+  /**
+   * Récupère un formatter par son nom
+   */
+  const getFormatter = useCallback((name: keyof typeof formatters): ((...args: unknown[]) => string) => {
+    return formatters[name] as (...args: unknown[]) => string
+  }, [])
+
+  /**
+   * Vérifie si un template existe
+   */
+  const hasTemplate = useCallback((name: string): name is ColumnTemplateName => {
+    return name in templatesMap
+  }, [])
+
+  /**
+   * Liste des templates disponibles
+   */
+  const availableTemplates = useMemo(() => {
+    return Object.keys(templatesMap) as ColumnTemplateName[]
+  }, [])
+
+  return {
+    getColumnFromTemplate,
+    createColumns,
+    getFormatter,
+    hasTemplate,
+    availableTemplates,
+    formatters: formatters as unknown as Record<string, (...args: unknown[]) => string>,
+  }
+}
+
+export default useDataTableColumnTemplates

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

@@ -0,0 +1,167 @@
+"use client"
+
+import React, { useState, useCallback, useMemo } from "react"
+import { Table } from "@tanstack/react-table"
+
+export interface EditState<TData> {
+  editingRowId: string | null
+  editedData: Partial<TData>
+  hasChanges: boolean
+  isDirty: boolean
+}
+
+export interface EditActions<TData> {
+  startEdit: (rowId: string, initialData: TData) => void
+  cancelEdit: () => void
+  saveEdit: () => Promise<void>
+  updateField: (field: keyof TData, value: any) => void
+  resetEdit: () => void
+}
+
+export interface UseDataTableEditOptions<TData> {
+  onSave?: (rowId: string, data: Partial<TData>) => Promise<void>
+  onCancel?: (rowId: string, originalData: TData) => void
+  validateField?: (field: keyof TData, value: any) => string | null
+  autoSave?: boolean
+  autoSaveDelay?: number
+}
+
+export function useDataTableEdit<TData>(
+  table: Table<TData>,
+  options: UseDataTableEditOptions<TData> = {}
+): [EditState<TData>, EditActions<TData>] {
+  const {
+    onSave,
+    onCancel,
+    validateField,
+    autoSave = false,
+    autoSaveDelay = 2000,
+  } = options
+
+  const [editingRowId, setEditingRowId] = useState<string | null>(null)
+  const [editedData, setEditedData] = useState<Partial<TData>>({})
+  const [originalData, setOriginalData] = useState<TData | null>(null)
+  const [validationErrors, setValidationErrors] = useState<Record<string, string>>({})
+  const [isSaving, setIsSaving] = useState(false)
+
+  // Calculer si il y a des changements
+  const hasChanges = useMemo(() => {
+    if (!originalData || !editingRowId) return false
+    return Object.keys(editedData).some(key => {
+      const field = key as keyof TData
+      return editedData[field] !== originalData[field]
+    })
+  }, [editedData, originalData, editingRowId])
+
+  // Calculer si les données sont sales (modifiées mais pas sauvegardées)
+  const isDirty = hasChanges && editingRowId !== null
+
+  const startEdit = useCallback((rowId: string, initialData: TData) => {
+    setEditingRowId(rowId)
+    setEditedData({ ...initialData })
+    setOriginalData(initialData)
+    setValidationErrors({})
+  }, [])
+
+  const cancelEdit = useCallback(() => {
+    if (!editingRowId || !originalData) return
+
+    // Appeler le callback d'annulation si fourni
+    onCancel?.(editingRowId, originalData)
+
+    setEditingRowId(null)
+    setEditedData({})
+    setOriginalData(null)
+    setValidationErrors({})
+  }, [editingRowId, originalData, onCancel])
+
+  const updateField = useCallback((field: keyof TData, value: any) => {
+    if (!editingRowId) return
+
+    // Validation du champ si une fonction de validation est fournie
+    if (validateField) {
+      const error = validateField(field, value)
+      if (error) {
+        setValidationErrors(prev => ({ ...prev, [field as string]: error }))
+        return
+      } else {
+        setValidationErrors(prev => {
+          const newErrors = { ...prev }
+          delete newErrors[field as string]
+          return newErrors
+        })
+      }
+    }
+
+    setEditedData(prev => ({ ...prev, [field]: value }))
+  }, [editingRowId, validateField])
+
+  const saveEdit = useCallback(async () => {
+    if (!editingRowId || !onSave || isSaving) return
+
+    // Vérifier qu'il n'y a pas d'erreurs de validation
+    if (Object.keys(validationErrors).length > 0) {
+      throw new Error("Validation errors present")
+    }
+
+    setIsSaving(true)
+    try {
+      await onSave(editingRowId, editedData)
+      
+      // Réinitialiser l'état après sauvegarde réussie
+      setEditingRowId(null)
+      setEditedData({})
+      setOriginalData(null)
+      setValidationErrors({})
+    } catch (error) {
+      console.error("Error saving edit:", error)
+      throw error
+    } finally {
+      setIsSaving(false)
+    }
+  }, [editingRowId, onSave, editedData, validationErrors, isSaving])
+
+  const resetEdit = useCallback(() => {
+    if (originalData) {
+      setEditedData({ ...originalData })
+      setValidationErrors({})
+    }
+  }, [originalData])
+
+  // Auto-save si activé
+  const autoSaveTimeoutRef = useMemo(() => {
+    if (!autoSave || !isDirty) return null
+    
+    return setTimeout(() => {
+      if (isDirty && !isSaving) {
+        saveEdit().catch(console.error)
+      }
+    }, autoSaveDelay)
+  }, [autoSave, isDirty, isSaving, saveEdit, autoSaveDelay])
+
+  // Nettoyer le timeout à la destruction
+  React.useEffect(() => {
+    return () => {
+      if (autoSaveTimeoutRef) {
+        clearTimeout(autoSaveTimeoutRef)
+      }
+    }
+  }, [autoSaveTimeoutRef])
+
+  const editState: EditState<TData> = {
+    editingRowId,
+    editedData,
+    hasChanges,
+    isDirty,
+  }
+
+  const editActions: EditActions<TData> = {
+    startEdit,
+    cancelEdit,
+    saveEdit,
+    updateField,
+    resetEdit,
+  }
+
+  return [editState, editActions]
+}

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

@@ -0,0 +1,227 @@
+import { useCallback, useMemo } from "react"
+import { ExportConfig } from "../types"
+
+/**
+ * Hook pour gérer l'export des données du DataTable
+ */
+export function useDataTableExport<TData>({
+  data,
+  columns,
+  exportConfig,
+}: {
+  data: TData[]
+  columns: any[]
+  exportConfig?: ExportConfig
+}) {
+  // Configuration par défaut
+  const config = useMemo(() => ({
+    formats: ["csv", "xlsx", "json"] as const,
+    filename: "export",
+    includeHeaders: true,
+    ...exportConfig,
+  }), [exportConfig])
+
+  // Fonction d'export CSV
+  const exportToCSV = useCallback((data: TData[], filename?: string) => {
+    if (!data.length) return
+
+    const headers = columns
+      .filter(col => col.accessorKey || col.id)
+      .map(col => col.header || col.accessorKey || col.id)
+      .join(",")
+
+    const rows = data.map(row => {
+      return columns
+        .filter(col => col.accessorKey || col.id)
+        .map(col => {
+          const value = col.accessorKey ? (row as any)[col.accessorKey] : (row as any)[col.id]
+          const formattedValue = col.formatter ? col.formatter(value) : value
+          // Échapper les virgules et guillemets
+          const stringValue = String(formattedValue || "")
+          if (stringValue.includes(",") || stringValue.includes('"') || stringValue.includes("\n")) {
+            return `"${stringValue.replace(/"/g, '""')}"`
+          }
+          return stringValue
+        })
+        .join(",")
+    })
+
+    const csvContent = [headers, ...rows].join("\n")
+    const blob = new Blob([csvContent], { type: "text/csv;charset=utf-8;" })
+    const link = document.createElement("a")
+    link.href = URL.createObjectURL(blob)
+    link.download = `${filename || config.filename}.csv`
+    link.click()
+    URL.revokeObjectURL(link.href)
+  }, [columns, config.filename])
+
+  // Fonction d'export JSON
+  const exportToJSON = useCallback((data: TData[], filename?: string) => {
+    const jsonContent = JSON.stringify(data, null, 2)
+    const blob = new Blob([jsonContent], { type: "application/json" })
+    const link = document.createElement("a")
+    link.href = URL.createObjectURL(blob)
+    link.download = `${filename || config.filename}.json`
+    link.click()
+    URL.revokeObjectURL(link.href)
+  }, [config.filename])
+
+  // Fonction d'export XLSX (nécessite une librairie externe)
+  const exportToXLSX = useCallback(async (data: TData[], filename?: string) => {
+    try {
+      // Vérifier si la librairie xlsx est disponible
+      if (typeof window === 'undefined') {
+        throw new Error("XLSX export not available in server environment")
+      }
+      
+      // Import dynamique pour éviter d'augmenter la taille du bundle
+      // @ts-ignore - Module importé dynamiquement
+      const XLSX = await import("xlsx")
+      
+      const headers = columns
+        .filter(col => col.accessorKey || col.id)
+        .map(col => col.header || col.accessorKey || col.id)
+
+      const worksheetData = [
+        headers,
+        ...data.map(row => 
+          columns
+            .filter(col => col.accessorKey || col.id)
+            .map(col => {
+              const value = col.accessorKey ? (row as any)[col.accessorKey] : (row as any)[col.id]
+              return col.formatter ? col.formatter(value) : value
+            })
+        )
+      ]
+
+      const worksheet = XLSX.utils.aoa_to_sheet(worksheetData)
+      const workbook = XLSX.utils.book_new()
+      XLSX.utils.book_append_sheet(workbook, worksheet, "Sheet1")
+      
+      XLSX.writeFile(workbook, `${filename || config.filename}.xlsx`)
+    } catch (error) {
+      console.error("Erreur lors de l'export XLSX:", error)
+      throw new Error("La librairie xlsx n'est pas disponible")
+    }
+  }, [columns, config.filename])
+
+  // Fonction d'export PDF (nécessite une librairie externe)
+  const exportToPDF = useCallback(async (data: TData[], filename?: string) => {
+    try {
+      // Vérifier si on est côté client
+      if (typeof window === 'undefined') {
+        throw new Error("PDF export not available in server environment")
+      }
+      
+      // @ts-ignore - Module importé dynamiquement
+      const jsPDF = await import("jspdf")
+      // @ts-ignore - Module importé dynamiquement
+      const autoTable = await import("jspdf-autotable")
+      
+      const doc = new jsPDF.default()
+      
+      const headers = columns
+        .filter(col => col.accessorKey || col.id)
+        .map(col => col.header || col.accessorKey || col.id)
+
+      const rows = data.map(row => 
+        columns
+          .filter(col => col.accessorKey || col.id)
+          .map(col => {
+            const value = col.accessorKey ? (row as any)[col.accessorKey] : (row as any)[col.id]
+            return col.formatter ? col.formatter(value) : value
+          })
+      )
+
+      doc.autoTable({
+        head: [headers],
+        body: rows,
+        startY: 20,
+        styles: { fontSize: 8 },
+        headStyles: { fillColor: [66, 139, 202] },
+      })
+
+      doc.save(`${filename || config.filename}.pdf`)
+    } catch (error) {
+      console.error("Erreur lors de l'export PDF:", error)
+      throw new Error("Les librairies jsPDF et jspdf-autotable ne sont pas disponibles")
+    }
+  }, [columns, config.filename])
+
+  // Fonction d'export XML
+  const exportToXML = useCallback((data: TData[], filename?: string) => {
+    const headers = columns
+      .filter(col => col.accessorKey || col.id)
+      .map(col => col.accessorKey || col.id)
+
+    let xmlContent = '<?xml version="1.0" encoding="UTF-8"?>\n<data>\n'
+    
+    data.forEach((row, index) => {
+      xmlContent += `  <row id="${index}">\n`
+      headers.forEach(header => {
+        const value = (row as any)[header]
+        const stringValue = String(value || "").replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;")
+        xmlContent += `    <${header}>${stringValue}</${header}>\n`
+      })
+      xmlContent += "  </row>\n"
+    })
+    
+    xmlContent += "</data>"
+    
+    const blob = new Blob([xmlContent], { type: "application/xml" })
+    const link = document.createElement("a")
+    link.href = URL.createObjectURL(blob)
+    link.download = `${filename || config.filename}.xml`
+    link.click()
+    URL.revokeObjectURL(link.href)
+  }, [columns, config.filename])
+
+  // Fonction d'export principal
+  const exportData = useCallback(async (format: string, customData?: TData[], customFilename?: string) => {
+    const dataToExport = customData || data
+    const filename = customFilename || config.filename
+
+    if (config.onExport) {
+      config.onExport(dataToExport, format)
+      return
+    }
+
+    switch (format.toLowerCase()) {
+      case "csv":
+        exportToCSV(dataToExport, filename)
+        break
+      case "json":
+        exportToJSON(dataToExport, filename)
+        break
+      case "xlsx":
+        await exportToXLSX(dataToExport, filename)
+        break
+      case "pdf":
+        await exportToPDF(dataToExport, filename)
+        break
+      case "xml":
+        exportToXML(dataToExport, filename)
+        break
+      default:
+        throw new Error(`Format d'export non supporté: ${format}`)
+    }
+  }, [data, config, exportToCSV, exportToJSON, exportToXLSX, exportToPDF, exportToXML])
+
+  // Fonction d'export de toutes les données
+  const exportAll = useCallback(async (format: string) => {
+    return exportData(format)
+  }, [exportData])
+
+  // Fonction d'export des données sélectionnées
+  const exportSelected = useCallback(async (format: string, selectedData: TData[]) => {
+    return exportData(format, selectedData)
+  }, [exportData])
+
+  return {
+    exportData,
+    exportAll,
+    exportSelected,
+    supportedFormats: config.formats,
+    isExportSupported: (format: string) => config.formats.includes(format as any),
+  }
+}