@wakastellar/ui 2.0.0 → 2.1.1

package/src/components/DataTable/DataTableHeader.tsx

@@ -0,0 +1,172 @@
+"use client"
+
+import * as React from "react"
+import { flexRender, Table, HeaderGroup } from "@tanstack/react-table"
+import { cn } from "./utils"
+
+/**
+ * Props pour le composant DataTableHeader
+ */
+export interface DataTableHeaderProps<TData> {
+  /** Instance de la table TanStack */
+  table: Table<TData>
+  /** Header sticky */
+  headerSticky?: boolean
+  /** Classes CSS pour la densité */
+  densityClasses?: {
+    header?: string
+    table?: string
+    cell?: string
+  }
+  /** Activer le redimensionnement des colonnes */
+  enableColumnResize?: boolean
+  /** Mode de redimensionnement */
+  columnResizeMode?: "onChange" | "onEnd"
+}
+
+/**
+ * Composant Header réutilisable pour DataTable
+ *
+ * Gère :
+ * - Le tri des colonnes
+ * - Le redimensionnement
+ * - Le sticky header
+ */
+export function DataTableHeader<TData>({
+  table,
+  headerSticky = false,
+  densityClasses = {},
+  enableColumnResize = false,
+  columnResizeMode = "onEnd",
+}: DataTableHeaderProps<TData>) {
+  return (
+    <thead className={cn(headerSticky && "sticky top-0 bg-background z-10")}>
+      {table.getHeaderGroups().map((headerGroup) => (
+        <DataTableHeaderRow
+          key={headerGroup.id}
+          headerGroup={headerGroup}
+          densityClasses={densityClasses}
+          enableColumnResize={enableColumnResize}
+          columnResizeMode={columnResizeMode}
+          table={table}
+        />
+      ))}
+    </thead>
+  )
+}
+
+/**
+ * Props pour DataTableHeaderRow
+ */
+interface DataTableHeaderRowProps<TData> {
+  headerGroup: HeaderGroup<TData>
+  densityClasses: {
+    header?: string
+    table?: string
+    cell?: string
+  }
+  enableColumnResize: boolean
+  columnResizeMode: "onChange" | "onEnd"
+  table: Table<TData>
+}
+
+/**
+ * Ligne d'en-tête individuelle
+ * Optimisé avec React.memo pour éviter les re-renders inutiles
+ */
+function DataTableHeaderRowInner<TData>({
+  headerGroup,
+  densityClasses,
+  enableColumnResize,
+  columnResizeMode,
+  table,
+}: DataTableHeaderRowProps<TData>) {
+  return (
+    <tr className="border-b">
+      {headerGroup.headers.map((header) => {
+        const canSort = header.column.getCanSort()
+        const isSorted = header.column.getIsSorted()
+        const canResize = enableColumnResize && header.column.getCanResize()
+
+        return (
+          <th
+            key={header.id}
+            className={cn(
+              "text-left font-medium text-muted-foreground relative",
+              densityClasses.header,
+              canSort && "cursor-pointer select-none hover:text-foreground"
+            )}
+            onClick={header.column.getToggleSortingHandler()}
+            style={{
+              width: header.getSize(),
+              minWidth: header.column.columnDef.minSize,
+              maxWidth: header.column.columnDef.maxSize,
+            }}
+          >
+            <div className="flex items-center">
+              {header.isPlaceholder
+                ? null
+                : flexRender(header.column.columnDef.header, header.getContext())}
+
+              {/* Indicateur de tri */}
+              {isSorted && (
+                <span className="ml-2">
+                  {isSorted === "asc" ? "↑" : "↓"}
+                </span>
+              )}
+            </div>
+
+            {/* Handle de redimensionnement */}
+            {canResize && (
+              <div
+                onMouseDown={header.getResizeHandler()}
+                onTouchStart={header.getResizeHandler()}
+                className={cn(
+                  "absolute right-0 top-0 h-full w-1 cursor-col-resize select-none touch-none",
+                  "hover:bg-primary/50",
+                  header.column.getIsResizing() && "bg-primary"
+                )}
+              />
+            )}
+          </th>
+        )
+      })}
+    </tr>
+  )
+}
+
+/**
+ * Fonction de comparaison personnalisée pour React.memo
+ */
+function areHeaderRowPropsEqual<TData>(
+  prevProps: DataTableHeaderRowProps<TData>,
+  nextProps: DataTableHeaderRowProps<TData>
+): boolean {
+  // Comparer l'ID du groupe de headers
+  if (prevProps.headerGroup.id !== nextProps.headerGroup.id) return false
+
+  // Comparer les classes de densité
+  if (prevProps.densityClasses.header !== nextProps.densityClasses.header) return false
+
+  // Comparer les options de redimensionnement
+  if (prevProps.enableColumnResize !== nextProps.enableColumnResize) return false
+  if (prevProps.columnResizeMode !== nextProps.columnResizeMode) return false
+
+  // Vérifier si le tri a changé sur une colonne
+  const prevHeaders = prevProps.headerGroup.headers
+  const nextHeaders = nextProps.headerGroup.headers
+  if (prevHeaders.length !== nextHeaders.length) return false
+
+  for (let i = 0; i < prevHeaders.length; i++) {
+    if (prevHeaders[i].column.getIsSorted() !== nextHeaders[i].column.getIsSorted()) return false
+    if (prevHeaders[i].column.getIsResizing() !== nextHeaders[i].column.getIsResizing()) return false
+    if (prevHeaders[i].getSize() !== nextHeaders[i].getSize()) return false
+  }
+
+  return true
+}
+
+// Export avec React.memo pour optimiser les re-renders
+const DataTableHeaderRow = React.memo(DataTableHeaderRowInner, areHeaderRowPropsEqual) as typeof DataTableHeaderRowInner
+
+export { DataTableHeaderRow }

package/src/components/DataTable/DataTablePagination.tsx

@@ -0,0 +1,125 @@
+"use client"
+
+import * as React from "react"
+import { Table } from "@tanstack/react-table"
+import { ChevronLeft, ChevronRight, ChevronsLeft, ChevronsRight } from "lucide-react"
+import { Button } from "../button"
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "../select"
+import { useTranslation } from "react-i18next"
+
+interface DataTablePaginationProps<TData> {
+  table: Table<TData>
+  pageSizeOptions?: number[]
+  showInfo?: boolean
+}
+
+export function DataTablePagination<TData>({
+  table,
+  pageSizeOptions = [25, 50, 100, 500],
+  showInfo = true,
+}: DataTablePaginationProps<TData>) {
+  const { t } = useTranslation()
+  
+  const pageIndex = table.getState().pagination.pageIndex
+  const pageSize = table.getState().pagination.pageSize
+  const pageCount = table.getPageCount()
+  const totalRows = table.getFilteredRowModel().rows.length
+  
+  const startRow = pageIndex * pageSize + 1
+  const endRow = Math.min((pageIndex + 1) * pageSize, totalRows)
+
+  return (
+    <div className="flex flex-col sm:flex-row items-center justify-between gap-4 px-4 py-3 border-t">
+      {/* Info de pagination */}
+      {showInfo && (
+        <div className="text-sm text-muted-foreground">
+          {totalRows > 0 ? (
+            <>
+              {t("datatable.pagination.showing", { defaultValue: "Showing" })} {startRow} {t("datatable.pagination.to", { defaultValue: "to" })} {endRow} {t("datatable.pagination.of", { defaultValue: "of" })} {totalRows} {t("datatable.pagination.results", { defaultValue: "results" })}
+            </>
+          ) : (
+            t("datatable.pagination.noResults", { defaultValue: "No results" })
+          )}
+        </div>
+      )}
+
+      <div className="flex items-center gap-6">
+        {/* Taille de page */}
+        <div className="flex items-center gap-2">
+          <span className="text-sm text-muted-foreground whitespace-nowrap">
+            {t("datatable.pagination.rowsPerPage", { defaultValue: "Rows per page" })}
+          </span>
+          <Select
+            value={`${pageSize}`}
+            onValueChange={(value) => {
+              table.setPageSize(Number(value))
+            }}
+          >
+            <SelectTrigger className="h-8 w-[70px]">
+              <SelectValue placeholder={pageSize} />
+            </SelectTrigger>
+            <SelectContent side="top">
+              {pageSizeOptions.map((size) => (
+                <SelectItem key={size} value={`${size}`}>
+                  {size}
+                </SelectItem>
+              ))}
+            </SelectContent>
+          </Select>
+        </div>
+
+        {/* Navigation */}
+        <div className="flex items-center gap-1">
+          <span className="text-sm text-muted-foreground mr-2">
+            {t("datatable.pagination.page", { defaultValue: "Page" })} {pageIndex + 1} {t("datatable.pagination.of", { defaultValue: "of" })} {pageCount}
+          </span>
+          
+          <Button
+            variant="outline"
+            size="icon"
+            className="h-8 w-8"
+            onClick={() => table.setPageIndex(0)}
+            disabled={!table.getCanPreviousPage()}
+          >
+            <ChevronsLeft className="h-4 w-4" />
+            <span className="sr-only">{t("datatable.pagination.firstPage", { defaultValue: "First page" })}</span>
+          </Button>
+          
+          <Button
+            variant="outline"
+            size="icon"
+            className="h-8 w-8"
+            onClick={() => table.previousPage()}
+            disabled={!table.getCanPreviousPage()}
+          >
+            <ChevronLeft className="h-4 w-4" />
+            <span className="sr-only">{t("datatable.pagination.previousPage", { defaultValue: "Previous page" })}</span>
+          </Button>
+          
+          <Button
+            variant="outline"
+            size="icon"
+            className="h-8 w-8"
+            onClick={() => table.nextPage()}
+            disabled={!table.getCanNextPage()}
+          >
+            <ChevronRight className="h-4 w-4" />
+            <span className="sr-only">{t("datatable.pagination.nextPage", { defaultValue: "Next page" })}</span>
+          </Button>
+          
+          <Button
+            variant="outline"
+            size="icon"
+            className="h-8 w-8"
+            onClick={() => table.setPageIndex(pageCount - 1)}
+            disabled={!table.getCanNextPage()}
+          >
+            <ChevronsRight className="h-4 w-4" />
+            <span className="sr-only">{t("datatable.pagination.lastPage", { defaultValue: "Last page" })}</span>
+          </Button>
+        </div>
+      </div>
+    </div>
+  )
+}
+

package/src/components/DataTable/DataTableSelection.tsx

@@ -0,0 +1,269 @@
+"use client"
+
+import * as React from "react"
+import { Checkbox } from "../checkbox"
+import { Button } from "../button"
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "../select"
+import { cn } from "./utils"
+
+/**
+ * Props pour la sélection avancée du DataTable
+ */
+export interface DataTableSelectionProps<TData> {
+  /** Table instance */
+  table: any
+  /** Mode de sélection */
+  selectionMode?: "single" | "multiple" | "range"
+  /** Données sélectionnées */
+  selectedRows: TData[]
+  /** Callback de changement de sélection */
+  onSelectionChange?: (selectedRows: TData[]) => void
+  /** Actions sur la sélection */
+  selectionActions?: Array<{
+    id: string
+    label: string
+    icon?: React.ReactNode
+    onClick: (selectedRows: TData[]) => void
+    disabled?: boolean
+    destructive?: boolean
+  }>
+  /** Classe CSS personnalisée */
+  className?: string
+}
+
+/**
+ * Composant pour la sélection avancée du DataTable
+ */
+export function DataTableSelection<TData>({
+  table,
+  selectionMode = "multiple",
+  selectedRows,
+  onSelectionChange,
+  selectionActions = [],
+  className,
+}: DataTableSelectionProps<TData>) {
+  const [lastSelectedIndex, setLastSelectedIndex] = React.useState<number | null>(null)
+
+  // Gestion de la sélection par plage (Shift+Click)
+  const handleRowSelection = React.useCallback((rowIndex: number, checked: boolean) => {
+    if (selectionMode === "single") {
+      table.setRowSelection({ [rowIndex]: checked })
+      return
+    }
+
+    if (selectionMode === "range" && lastSelectedIndex !== null) {
+      const start = Math.min(lastSelectedIndex, rowIndex)
+      const end = Math.max(lastSelectedIndex, rowIndex)
+      const newSelection = { ...table.getState().rowSelection }
+      
+      for (let i = start; i <= end; i++) {
+        newSelection[i] = checked
+      }
+      
+      table.setRowSelection(newSelection)
+    } else {
+      table.setRowSelection((prev: any) => ({
+        ...prev,
+        [rowIndex]: checked
+      }))
+    }
+
+    setLastSelectedIndex(rowIndex)
+  }, [table, selectionMode, lastSelectedIndex])
+
+  // Sélection de toutes les lignes
+  const handleSelectAll = React.useCallback((checked: boolean) => {
+    if (checked) {
+      const allRowIds = table.getRowModel().rows.reduce((acc: any, row: any, index: number) => {
+        acc[index] = true
+        return acc
+      }, {})
+      table.setRowSelection(allRowIds)
+    } else {
+      table.setRowSelection({})
+    }
+  }, [table])
+
+  // Sélection par plage
+  const handleRangeSelection = React.useCallback((start: number, end: number, checked: boolean) => {
+    const newSelection = { ...table.getState().rowSelection }
+    
+    for (let i = start; i <= end; i++) {
+      newSelection[i] = checked
+    }
+    
+    table.setRowSelection(newSelection)
+  }, [table])
+
+  // Sélection par critères
+  const handleSelectByCriteria = React.useCallback((criteria: (row: TData) => boolean) => {
+    const newSelection = { ...table.getState().rowSelection }
+    
+    table.getRowModel().rows.forEach((row: any, index: number) => {
+      if (criteria(row.original)) {
+        newSelection[index] = true
+      }
+    })
+    
+    table.setRowSelection(newSelection)
+  }, [table])
+
+  // Actions de sélection
+  const handleSelectionAction = React.useCallback((action: any) => {
+    action.onClick(selectedRows)
+  }, [selectedRows])
+
+  const isAllSelected = table.getIsAllPageRowsSelected()
+  const isSomeSelected = table.getIsSomePageRowsSelected()
+
+  return (
+    <div className={cn("flex items-center gap-2", className)}>
+      {/* Checkbox principal */}
+      <Checkbox
+        checked={isAllSelected}
+        onCheckedChange={handleSelectAll}
+        ref={(el) => {
+          if (el && 'indeterminate' in el) {
+            (el as any).indeterminate = isSomeSelected && !isAllSelected
+          }
+        }}
+        aria-label="Select all rows"
+      />
+
+      {/* Informations de sélection */}
+      {selectedRows.length > 0 && (
+        <div className="flex items-center gap-2 text-sm text-muted-foreground">
+          <span>{selectedRows.length} selected</span>
+          
+          {/* Actions rapides */}
+          <div className="flex items-center gap-1">
+            {selectionActions.map((action) => (
+              <Button
+                key={action.id}
+                variant="ghost"
+                size="sm"
+                onClick={() => handleSelectionAction(action)}
+                disabled={action.disabled}
+                className={cn(
+                  action.destructive && "text-destructive hover:text-destructive"
+                )}
+              >
+                {action.icon && <span className="mr-1">{action.icon}</span>}
+                {action.label}
+              </Button>
+            ))}
+          </div>
+        </div>
+      )}
+
+      {/* Sélection par critères */}
+      <Select onValueChange={(value) => {
+        switch (value) {
+          case "all":
+            handleSelectAll(true)
+            break
+          case "none":
+            handleSelectAll(false)
+            break
+          case "invert":
+            table.getRowModel().rows.forEach((row: any, index: number) => {
+              const isSelected = table.getState().rowSelection[index]
+              table.setRowSelection((prev: any) => ({
+                ...prev,
+                [index]: !isSelected
+              }))
+            })
+            break
+        }
+      }}>
+        <SelectTrigger className="w-32">
+          <SelectValue placeholder="Select" />
+        </SelectTrigger>
+        <SelectContent>
+          <SelectItem value="all">Select All</SelectItem>
+          <SelectItem value="none">Select None</SelectItem>
+          <SelectItem value="invert">Invert Selection</SelectItem>
+        </SelectContent>
+      </Select>
+    </div>
+  )
+}
+
+/**
+ * Hook pour la sélection avancée
+ */
+export function useDataTableSelection<TData>({
+  table,
+  selectionMode = "multiple",
+  onSelectionChange,
+}: {
+  table: any
+  selectionMode?: "single" | "multiple" | "range"
+  onSelectionChange?: (selectedRows: TData[]) => void
+}) {
+  const [selectedRows, setSelectedRows] = React.useState<TData[]>([])
+
+  // Mise à jour des lignes sélectionnées
+  React.useEffect(() => {
+    const selected = table.getFilteredSelectedRowModel().rows.map((row: any) => row.original)
+    setSelectedRows(selected)
+    onSelectionChange?.(selected)
+  }, [table, onSelectionChange])
+
+  // Fonctions utilitaires
+  const selectRow = React.useCallback((rowIndex: number, selected: boolean = true) => {
+    table.setRowSelection((prev: any) => ({
+      ...prev,
+      [rowIndex]: selected
+    }))
+  }, [table])
+
+  const selectAll = React.useCallback((selected: boolean = true) => {
+    if (selected) {
+      const allRowIds = table.getRowModel().rows.reduce((acc: any, row: any, index: number) => {
+        acc[index] = true
+        return acc
+      }, {})
+      table.setRowSelection(allRowIds)
+    } else {
+      table.setRowSelection({})
+    }
+  }, [table])
+
+  const selectRange = React.useCallback((start: number, end: number, selected: boolean = true) => {
+    const newSelection = { ...table.getState().rowSelection }
+    
+    for (let i = start; i <= end; i++) {
+      newSelection[i] = selected
+    }
+    
+    table.setRowSelection(newSelection)
+  }, [table])
+
+  const selectByCriteria = React.useCallback((criteria: (row: TData) => boolean) => {
+    const newSelection = { ...table.getState().rowSelection }
+    
+    table.getRowModel().rows.forEach((row: any, index: number) => {
+      if (criteria(row.original)) {
+        newSelection[index] = true
+      }
+    })
+    
+    table.setRowSelection(newSelection)
+  }, [table])
+
+  const clearSelection = React.useCallback(() => {
+    table.setRowSelection({})
+  }, [table])
+
+  return {
+    selectedRows,
+    selectRow,
+    selectAll,
+    selectRange,
+    selectByCriteria,
+    clearSelection,
+    isAllSelected: table.getIsAllPageRowsSelected(),
+    isSomeSelected: table.getIsSomePageRowsSelected(),
+  }
+}