@wakastellar/ui 2.0.0 → 2.1.0

package/src/components/DataTable/DataTableSyncStatus.tsx

@@ -0,0 +1,281 @@
+"use client"
+
+/**
+ * DataTableSyncStatus - Indicateur de statut de synchronisation
+ */
+
+import * as React from "react"
+import {
+  Cloud,
+  CloudOff,
+  RefreshCw,
+  AlertCircle,
+  Check,
+  Upload,
+} from "lucide-react"
+import { cn } from "../../utils/cn"
+import { Button } from "../button"
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "../tooltip"
+import { Badge } from "../badge"
+import type { OfflineState } from "./hooks/useDataTableOffline"
+
+export interface DataTableSyncStatusProps<TData> {
+  /** État offline */
+  state: OfflineState<TData>
+  /** Callback de synchronisation */
+  onSync?: () => void
+  /** Afficher les détails */
+  showDetails?: boolean
+  /** Classes CSS additionnelles */
+  className?: string
+  /** Variante d'affichage */
+  variant?: "default" | "compact" | "badge"
+  /** Labels personnalisés */
+  labels?: {
+    online?: string
+    offline?: string
+    syncing?: string
+    pending?: string
+    conflicts?: string
+    sync?: string
+    lastSync?: string
+  }
+}
+
+const DEFAULT_LABELS = {
+  online: "En ligne",
+  offline: "Hors ligne",
+  syncing: "Synchronisation...",
+  pending: "en attente",
+  conflicts: "conflits",
+  sync: "Synchroniser",
+  lastSync: "Dernière sync",
+}
+
+/**
+ * Indicateur de statut de synchronisation pour le mode offline
+ */
+export function DataTableSyncStatus<TData>({
+  state,
+  onSync,
+  showDetails = true,
+  className,
+  variant = "default",
+  labels: customLabels,
+}: DataTableSyncStatusProps<TData>) {
+  const labels = { ...DEFAULT_LABELS, ...customLabels }
+
+  const {
+    isOnline,
+    isSyncing,
+    pendingChangesCount,
+    conflicts,
+    syncError,
+    lastSyncTime,
+    isAvailable,
+  } = state
+
+  // Si IndexedDB n'est pas disponible, ne rien afficher
+  if (!isAvailable) {
+    return null
+  }
+
+  // Variante badge (très compact)
+  if (variant === "badge") {
+    return (
+      <TooltipProvider>
+        <Tooltip>
+          <TooltipTrigger asChild>
+            <Badge
+              variant={isOnline ? "outline" : "secondary"}
+              className={cn(
+                "gap-1",
+                !isOnline && "bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-200",
+                className
+              )}
+            >
+              {isOnline ? (
+                <Cloud className="h-3 w-3" />
+              ) : (
+                <CloudOff className="h-3 w-3" />
+              )}
+              {pendingChangesCount > 0 && (
+                <span className="ml-1">{pendingChangesCount}</span>
+              )}
+            </Badge>
+          </TooltipTrigger>
+          <TooltipContent>
+            <p>{isOnline ? labels.online : labels.offline}</p>
+            {pendingChangesCount > 0 && (
+              <p className="text-xs text-muted-foreground">
+                {pendingChangesCount} {labels.pending}
+              </p>
+            )}
+          </TooltipContent>
+        </Tooltip>
+      </TooltipProvider>
+    )
+  }
+
+  // Variante compact
+  if (variant === "compact") {
+    return (
+      <div className={cn("flex items-center gap-2", className)}>
+        <div
+          className={cn(
+            "flex items-center gap-1 text-sm",
+            isOnline ? "text-green-600 dark:text-green-400" : "text-yellow-600 dark:text-yellow-400"
+          )}
+        >
+          {isOnline ? (
+            <Cloud className="h-4 w-4" />
+          ) : (
+            <CloudOff className="h-4 w-4" />
+          )}
+        </div>
+
+        {pendingChangesCount > 0 && (
+          <Badge variant="secondary" className="h-5 px-1.5 text-xs">
+            {pendingChangesCount}
+          </Badge>
+        )}
+
+        {conflicts.length > 0 && (
+          <Badge variant="destructive" className="h-5 px-1.5 text-xs">
+            {conflicts.length}!
+          </Badge>
+        )}
+
+        {onSync && pendingChangesCount > 0 && isOnline && (
+          <Button
+            variant="ghost"
+            size="icon"
+            className="h-6 w-6"
+            onClick={onSync}
+            disabled={isSyncing}
+          >
+            <RefreshCw className={cn("h-3 w-3", isSyncing && "animate-spin")} />
+          </Button>
+        )}
+      </div>
+    )
+  }
+
+  // Variante default (complète)
+  return (
+    <div
+      className={cn(
+        "flex items-center gap-3 rounded-lg border p-2 text-sm",
+        isOnline ? "bg-green-50 dark:bg-green-950/20" : "bg-yellow-50 dark:bg-yellow-950/20",
+        className
+      )}
+    >
+      {/* Status icon */}
+      <div
+        className={cn(
+          "flex items-center gap-1.5",
+          isOnline ? "text-green-600 dark:text-green-400" : "text-yellow-600 dark:text-yellow-400"
+        )}
+      >
+        {isSyncing ? (
+          <RefreshCw className="h-4 w-4 animate-spin" />
+        ) : isOnline ? (
+          <Cloud className="h-4 w-4" />
+        ) : (
+          <CloudOff className="h-4 w-4" />
+        )}
+        <span className="font-medium">
+          {isSyncing ? labels.syncing : isOnline ? labels.online : labels.offline}
+        </span>
+      </div>
+
+      {/* Details */}
+      {showDetails && (
+        <>
+          {/* Pending changes */}
+          {pendingChangesCount > 0 && (
+            <div className="flex items-center gap-1 text-muted-foreground">
+              <Upload className="h-3.5 w-3.5" />
+              <span>
+                {pendingChangesCount} {labels.pending}
+              </span>
+            </div>
+          )}
+
+          {/* Conflicts */}
+          {conflicts.length > 0 && (
+            <div className="flex items-center gap-1 text-destructive">
+              <AlertCircle className="h-3.5 w-3.5" />
+              <span>
+                {conflicts.length} {labels.conflicts}
+              </span>
+            </div>
+          )}
+
+          {/* Last sync */}
+          {lastSyncTime && pendingChangesCount === 0 && (
+            <div className="flex items-center gap-1 text-muted-foreground">
+              <Check className="h-3.5 w-3.5 text-green-600" />
+              <span className="text-xs">
+                {labels.lastSync}: {formatRelativeTime(lastSyncTime)}
+              </span>
+            </div>
+          )}
+
+          {/* Error */}
+          {syncError && (
+            <div className="flex items-center gap-1 text-destructive text-xs">
+              <AlertCircle className="h-3.5 w-3.5" />
+              <span>{syncError}</span>
+            </div>
+          )}
+        </>
+      )}
+
+      {/* Sync button */}
+      {onSync && pendingChangesCount > 0 && isOnline && (
+        <Button
+          variant="outline"
+          size="sm"
+          className="ml-auto h-7"
+          onClick={onSync}
+          disabled={isSyncing}
+        >
+          <RefreshCw className={cn("mr-1.5 h-3.5 w-3.5", isSyncing && "animate-spin")} />
+          {labels.sync}
+        </Button>
+      )}
+    </div>
+  )
+}
+
+/**
+ * Formate un temps relatif (ex: "il y a 5 min")
+ */
+function formatRelativeTime(date: Date): string {
+  const now = new Date()
+  const diffMs = now.getTime() - date.getTime()
+  const diffSeconds = Math.floor(diffMs / 1000)
+  const diffMinutes = Math.floor(diffSeconds / 60)
+  const diffHours = Math.floor(diffMinutes / 60)
+  const diffDays = Math.floor(diffHours / 24)
+
+  if (diffSeconds < 60) {
+    return "à l'instant"
+  } else if (diffMinutes < 60) {
+    return `il y a ${diffMinutes} min`
+  } else if (diffHours < 24) {
+    return `il y a ${diffHours}h`
+  } else {
+    return `il y a ${diffDays}j`
+  }
+}
+
+DataTableSyncStatus.displayName = "DataTableSyncStatus"
+
+export default DataTableSyncStatus

package/src/components/DataTable/DataTableToolbar.tsx

@@ -0,0 +1,262 @@
+"use client"
+
+import * as React from "react"
+import { Table } from "@tanstack/react-table"
+import { X, Search, RefreshCw, Download, Upload, Columns, SlidersHorizontal } from "lucide-react"
+import { Button } from "../button"
+import { Input } from "../input"
+import {
+  DropdownMenu,
+  DropdownMenuCheckboxItem,
+  DropdownMenuContent,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "../dropdown-menu"
+import { useTranslation } from "react-i18next"
+import { ToolbarConfig, TableAction, DataTableDensity } from "./types"
+import { exportToCSV, exportToJSON } from "./utils"
+
+interface DataTableToolbarProps<TData> {
+  table: Table<TData>
+  config?: ToolbarConfig
+  globalFilter: string
+  onGlobalFilterChange: (value: string) => void
+  density?: DataTableDensity
+  onDensityChange?: (density: DataTableDensity) => void
+  onExport?: (format: string) => void
+  onImport?: (file: File) => void
+}
+
+export function DataTableToolbar<TData>({
+  table,
+  config,
+  globalFilter,
+  onGlobalFilterChange,
+  density,
+  onDensityChange,
+  onExport,
+  onImport,
+}: DataTableToolbarProps<TData>) {
+  const { t } = useTranslation()
+  const fileInputRef = React.useRef<HTMLInputElement>(null)
+  
+  const selectedRows = table.getFilteredSelectedRowModel().rows
+  const hasSelection = selectedRows.length > 0
+
+  // Actions filtrées selon sélection
+  const visibleActions = React.useMemo(() => {
+    if (!config?.actions) return []
+    return config.actions.filter((action) => {
+      if (action.requiresSelection && !hasSelection) return false
+      return true
+    })
+  }, [config?.actions, hasSelection])
+
+  // Handler d'export
+  const handleExport = (format: "csv" | "json") => {
+    const data = hasSelection 
+      ? selectedRows.map((row) => row.original)
+      : table.getFilteredRowModel().rows.map((row) => row.original)
+    
+    if (onExport) {
+      onExport(format)
+    } else {
+      if (format === "csv") {
+        exportToCSV(data as any, "export.csv")
+      } else {
+        exportToJSON(data, "export.json")
+      }
+    }
+  }
+
+  // Handler d'import
+  const handleImport = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const file = e.target.files?.[0]
+    if (file && onImport) {
+      onImport(file)
+    }
+    // Reset input
+    if (fileInputRef.current) {
+      fileInputRef.current.value = ""
+    }
+  }
+
+  return (
+    <div className="flex flex-col sm:flex-row items-start sm:items-center justify-between gap-4 p-4 border-b">
+      <div className="flex flex-1 flex-col sm:flex-row items-start sm:items-center gap-2 w-full sm:w-auto">
+        {/* Recherche globale */}
+        {config?.showSearch !== false && (
+          <div className="relative w-full sm:w-64">
+            <Search className="absolute left-2 top-2.5 h-4 w-4 text-muted-foreground" />
+            <Input
+              placeholder={t("datatable.toolbar.search", { defaultValue: "Search..." })}
+              value={globalFilter ?? ""}
+              onChange={(e) => onGlobalFilterChange(e.target.value)}
+              className="pl-8 h-9"
+            />
+            {globalFilter && (
+              <button
+                onClick={() => onGlobalFilterChange("")}
+                className="absolute right-2 top-2.5 text-muted-foreground hover:text-foreground"
+              >
+                <X className="h-4 w-4" />
+              </button>
+            )}
+          </div>
+        )}
+
+        {/* Info de sélection */}
+        {hasSelection && (
+          <div className="flex items-center gap-2 text-sm text-muted-foreground">
+            <span>
+              {selectedRows.length} {t("datatable.toolbar.selected", { defaultValue: "selected" })}
+            </span>
+            <Button
+              variant="ghost"
+              size="sm"
+              onClick={() => table.resetRowSelection()}
+              className="h-7 px-2"
+            >
+              {t("datatable.toolbar.clear", { defaultValue: "Clear" })}
+            </Button>
+          </div>
+        )}
+      </div>
+
+      <div className="flex items-center gap-2">
+        {/* Actions personnalisées */}
+        {visibleActions.map((action) => (
+          <Button
+            key={action.id}
+            variant={action.variant || "outline"}
+            size="sm"
+            onClick={() => action.onClick(selectedRows.map((r) => r.original))}
+            disabled={action.disabled}
+            className="h-9"
+          >
+            {action.icon}
+            <span className="ml-2">{action.label}</span>
+          </Button>
+        ))}
+
+        {/* Bouton refresh */}
+        {config?.showRefresh && (
+          <Button
+            variant="outline"
+            size="icon"
+            onClick={config.onRefresh}
+            className="h-9 w-9"
+          >
+            <RefreshCw className="h-4 w-4" />
+            <span className="sr-only">{t("datatable.toolbar.refresh", { defaultValue: "Refresh" })}</span>
+          </Button>
+        )}
+
+        {/* Export */}
+        {onExport && (
+          <DropdownMenu>
+            <DropdownMenuTrigger asChild>
+              <Button variant="outline" size="icon" className="h-9 w-9">
+                <Download className="h-4 w-4" />
+                <span className="sr-only">{t("datatable.toolbar.export", { defaultValue: "Export" })}</span>
+              </Button>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent align="end">
+              <DropdownMenuLabel>{t("datatable.toolbar.exportAs", { defaultValue: "Export as" })}</DropdownMenuLabel>
+              <DropdownMenuSeparator />
+              <DropdownMenuCheckboxItem onClick={() => handleExport("csv")}>
+                CSV
+              </DropdownMenuCheckboxItem>
+              <DropdownMenuCheckboxItem onClick={() => handleExport("json")}>
+                JSON
+              </DropdownMenuCheckboxItem>
+            </DropdownMenuContent>
+          </DropdownMenu>
+        )}
+
+        {/* Import */}
+        {onImport && (
+          <>
+            <input
+              ref={fileInputRef}
+              type="file"
+              accept=".csv,.json"
+              onChange={handleImport}
+              className="hidden"
+            />
+            <Button
+              variant="outline"
+              size="icon"
+              onClick={() => fileInputRef.current?.click()}
+              className="h-9 w-9"
+            >
+              <Upload className="h-4 w-4" />
+              <span className="sr-only">{t("datatable.toolbar.import", { defaultValue: "Import" })}</span>
+            </Button>
+          </>
+        )}
+
+        {/* Sélecteur de colonnes */}
+        {config?.showColumnToggle !== false && (
+          <DropdownMenu>
+            <DropdownMenuTrigger asChild>
+              <Button variant="outline" size="icon" className="h-9 w-9">
+                <Columns className="h-4 w-4" />
+                <span className="sr-only">{t("datatable.toolbar.columns", { defaultValue: "Columns" })}</span>
+              </Button>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent align="end" className="w-48">
+              <DropdownMenuLabel>{t("datatable.toolbar.toggleColumns", { defaultValue: "Toggle columns" })}</DropdownMenuLabel>
+              <DropdownMenuSeparator />
+              {table
+                .getAllColumns()
+                .filter((column) => column.getCanHide())
+                .map((column) => {
+                  return (
+                    <DropdownMenuCheckboxItem
+                      key={column.id}
+                      className="capitalize"
+                      checked={column.getIsVisible()}
+                      onCheckedChange={(value) => column.toggleVisibility(!!value)}
+                    >
+                      {column.id}
+                    </DropdownMenuCheckboxItem>
+                  )
+                })}
+            </DropdownMenuContent>
+          </DropdownMenu>
+        )}
+
+        {/* Densité */}
+        {config?.showDensity && onDensityChange && (
+          <DropdownMenu>
+            <DropdownMenuTrigger asChild>
+              <Button variant="outline" size="icon" className="h-9 w-9">
+                <SlidersHorizontal className="h-4 w-4" />
+                <span className="sr-only">{t("datatable.toolbar.density", { defaultValue: "Density" })}</span>
+              </Button>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent align="end">
+              <DropdownMenuLabel>{t("datatable.toolbar.tableDensity", { defaultValue: "Table density" })}</DropdownMenuLabel>
+              <DropdownMenuSeparator />
+              <DropdownMenuCheckboxItem
+                checked={density === "comfortable"}
+                onCheckedChange={() => onDensityChange("comfortable")}
+              >
+                {t("datatable.toolbar.comfortable", { defaultValue: "Comfortable" })}
+              </DropdownMenuCheckboxItem>
+              <DropdownMenuCheckboxItem
+                checked={density === "compact"}
+                onCheckedChange={() => onDensityChange("compact")}
+              >
+                {t("datatable.toolbar.compact", { defaultValue: "Compact" })}
+              </DropdownMenuCheckboxItem>
+            </DropdownMenuContent>
+          </DropdownMenu>
+        )}
+      </div>
+    </div>
+  )
+}
+