@wakastellar/ui 2.0.0 → 2.1.1

package/src/components/DataTable/DataTableConflictResolver.tsx

@@ -0,0 +1,478 @@
+"use client"
+
+/**
+ * DataTableConflictResolver - Interface de résolution des conflits
+ */
+
+import * as React from "react"
+import { AlertTriangle, Check, X, GitMerge, ArrowRight } from "lucide-react"
+import { cn } from "../../utils/cn"
+import { Button } from "../button"
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "../dialog"
+import {
+  Sheet,
+  SheetContent,
+  SheetDescription,
+  SheetHeader,
+  SheetTitle,
+} from "../sheet"
+import { Badge } from "../badge"
+import { Separator } from "../separator"
+import { ScrollArea } from "../scroll-area"
+import type { ConflictEntry } from "./services/IndexedDBService"
+
+export interface DataTableConflictResolverProps<TData> {
+  /** Liste des conflits */
+  conflicts: ConflictEntry<TData>[]
+  /** Callback de résolution */
+  onResolve: (conflictId: string, resolution: "local" | "server" | "merge", mergedData?: Partial<TData>) => Promise<void>
+  /** Ouvert */
+  open?: boolean
+  /** Callback de fermeture */
+  onOpenChange?: (open: boolean) => void
+  /** Afficher en mode sheet (sidebar) ou dialog */
+  mode?: "dialog" | "sheet"
+  /** Labels personnalisés */
+  labels?: {
+    title?: string
+    description?: string
+    localVersion?: string
+    serverVersion?: string
+    keepLocal?: string
+    keepServer?: string
+    merge?: string
+    resolve?: string
+    skip?: string
+    noConflicts?: string
+    conflictType?: Record<"create" | "update" | "delete", string>
+  }
+  /** Fonction de rendu personnalisé pour les données */
+  renderData?: (data: Partial<TData> | null, type: "local" | "server") => React.ReactNode
+  /** Clés à afficher dans la comparaison */
+  displayKeys?: (keyof TData)[]
+  /** Labels des clés */
+  keyLabels?: Record<string, string>
+}
+
+const DEFAULT_LABELS = {
+  title: "Résolution des conflits",
+  description: "Des modifications ont été effectuées à la fois localement et sur le serveur. Choisissez quelle version conserver.",
+  localVersion: "Version locale",
+  serverVersion: "Version serveur",
+  keepLocal: "Garder local",
+  keepServer: "Garder serveur",
+  merge: "Fusionner",
+  resolve: "Résoudre",
+  skip: "Ignorer",
+  noConflicts: "Aucun conflit à résoudre",
+  conflictType: {
+    create: "Création",
+    update: "Modification",
+    delete: "Suppression",
+  },
+}
+
+/**
+ * Interface de résolution des conflits de synchronisation
+ */
+export function DataTableConflictResolver<TData extends Record<string, unknown>>({
+  conflicts,
+  onResolve,
+  open = false,
+  onOpenChange,
+  mode = "dialog",
+  labels: customLabels,
+  renderData,
+  displayKeys,
+  keyLabels,
+}: DataTableConflictResolverProps<TData>) {
+  const labels = { ...DEFAULT_LABELS, ...customLabels }
+  const [currentIndex, setCurrentIndex] = React.useState(0)
+  const [isResolving, setIsResolving] = React.useState(false)
+  const [mergeMode, setMergeMode] = React.useState(false)
+  const [mergedData, setMergedData] = React.useState<Partial<TData>>({})
+
+  const currentConflict = conflicts[currentIndex]
+  const totalConflicts = conflicts.length
+
+  // Reset quand les conflits changent
+  React.useEffect(() => {
+    if (conflicts.length === 0) {
+      setCurrentIndex(0)
+    } else if (currentIndex >= conflicts.length) {
+      setCurrentIndex(Math.max(0, conflicts.length - 1))
+    }
+  }, [conflicts, currentIndex])
+
+  // Reset merge mode quand le conflit change
+  React.useEffect(() => {
+    setMergeMode(false)
+    if (currentConflict) {
+      setMergedData({
+        ...(currentConflict.serverData || {}),
+        ...(currentConflict.localData || {}),
+      } as Partial<TData>)
+    }
+  }, [currentConflict])
+
+  const handleResolve = async (resolution: "local" | "server" | "merge") => {
+    if (!currentConflict) return
+
+    setIsResolving(true)
+    try {
+      await onResolve(
+        currentConflict.id,
+        resolution,
+        resolution === "merge" ? mergedData : undefined
+      )
+
+      // Passer au conflit suivant
+      if (currentIndex < totalConflicts - 1) {
+        setCurrentIndex((prev) => prev + 1)
+      }
+    } finally {
+      setIsResolving(false)
+    }
+  }
+
+  const handleSkip = () => {
+    if (currentIndex < totalConflicts - 1) {
+      setCurrentIndex((prev) => prev + 1)
+    }
+  }
+
+  // Contenu commun
+  const content = (
+    <>
+      {totalConflicts === 0 ? (
+        <div className="flex flex-col items-center justify-center py-8 text-center text-muted-foreground">
+          <Check className="h-12 w-12 text-green-500 mb-4" />
+          <p>{labels.noConflicts}</p>
+        </div>
+      ) : currentConflict ? (
+        <div className="space-y-4">
+          {/* Header avec navigation */}
+          <div className="flex items-center justify-between">
+            <Badge variant="outline" className="gap-1">
+              <AlertTriangle className="h-3 w-3" />
+              {labels.conflictType?.[currentConflict.type] || currentConflict.type}
+            </Badge>
+            <span className="text-sm text-muted-foreground">
+              {currentIndex + 1} / {totalConflicts}
+            </span>
+          </div>
+
+          {/* Info sur la ligne */}
+          <div className="text-sm text-muted-foreground">
+            ID: <code className="bg-muted px-1 rounded">{currentConflict.rowId}</code>
+          </div>
+
+          {mergeMode ? (
+            /* Mode fusion */
+            <MergeEditor
+              localData={currentConflict.localData}
+              serverData={currentConflict.serverData}
+              mergedData={mergedData}
+              onChange={setMergedData}
+              displayKeys={displayKeys as string[]}
+              keyLabels={keyLabels}
+            />
+          ) : (
+            /* Comparaison côte à côte */
+            <div className="grid grid-cols-2 gap-4">
+              {/* Version locale */}
+              <DataVersion
+                title={labels.localVersion}
+                data={currentConflict.localData}
+                timestamp={currentConflict.localTimestamp}
+                variant="local"
+                renderData={renderData}
+                displayKeys={displayKeys as string[]}
+                keyLabels={keyLabels}
+              />
+
+              {/* Version serveur */}
+              <DataVersion
+                title={labels.serverVersion}
+                data={currentConflict.serverData}
+                timestamp={currentConflict.serverTimestamp}
+                variant="server"
+                renderData={renderData}
+                displayKeys={displayKeys as string[]}
+                keyLabels={keyLabels}
+              />
+            </div>
+          )}
+
+          <Separator />
+
+          {/* Actions */}
+          <div className="flex items-center justify-between gap-2">
+            <Button variant="ghost" size="sm" onClick={handleSkip}>
+              {labels.skip}
+            </Button>
+
+            <div className="flex items-center gap-2">
+              {mergeMode ? (
+                <>
+                  <Button variant="outline" size="sm" onClick={() => setMergeMode(false)}>
+                    <X className="mr-1.5 h-3.5 w-3.5" />
+                    Annuler
+                  </Button>
+                  <Button
+                    size="sm"
+                    onClick={() => handleResolve("merge")}
+                    disabled={isResolving}
+                  >
+                    <Check className="mr-1.5 h-3.5 w-3.5" />
+                    Appliquer fusion
+                  </Button>
+                </>
+              ) : (
+                <>
+                  <Button
+                    variant="outline"
+                    size="sm"
+                    onClick={() => handleResolve("local")}
+                    disabled={isResolving}
+                  >
+                    {labels.keepLocal}
+                  </Button>
+                  <Button
+                    variant="outline"
+                    size="sm"
+                    onClick={() => setMergeMode(true)}
+                  >
+                    <GitMerge className="mr-1.5 h-3.5 w-3.5" />
+                    {labels.merge}
+                  </Button>
+                  <Button
+                    size="sm"
+                    onClick={() => handleResolve("server")}
+                    disabled={isResolving}
+                  >
+                    {labels.keepServer}
+                  </Button>
+                </>
+              )}
+            </div>
+          </div>
+        </div>
+      ) : null}
+    </>
+  )
+
+  // Rendu en mode sheet
+  if (mode === "sheet") {
+    return (
+      <Sheet open={open} onOpenChange={onOpenChange}>
+        <SheetContent className="sm:max-w-xl">
+          <SheetHeader>
+            <SheetTitle className="flex items-center gap-2">
+              <AlertTriangle className="h-5 w-5 text-yellow-500" />
+              {labels.title}
+            </SheetTitle>
+            <SheetDescription>{labels.description}</SheetDescription>
+          </SheetHeader>
+          <div className="mt-6">{content}</div>
+        </SheetContent>
+      </Sheet>
+    )
+  }
+
+  // Rendu en mode dialog
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="max-w-2xl">
+        <DialogHeader>
+          <DialogTitle className="flex items-center gap-2">
+            <AlertTriangle className="h-5 w-5 text-yellow-500" />
+            {labels.title}
+          </DialogTitle>
+          <DialogDescription>{labels.description}</DialogDescription>
+        </DialogHeader>
+        {content}
+      </DialogContent>
+    </Dialog>
+  )
+}
+
+/**
+ * Affichage d'une version des données
+ */
+function DataVersion<TData>({
+  title,
+  data,
+  timestamp,
+  variant,
+  renderData,
+  displayKeys,
+  keyLabels,
+}: {
+  title: string
+  data: Partial<TData> | null
+  timestamp: Date
+  variant: "local" | "server"
+  renderData?: (data: Partial<TData> | null, type: "local" | "server") => React.ReactNode
+  displayKeys?: string[]
+  keyLabels?: Record<string, string>
+}) {
+  return (
+    <div
+      className={cn(
+        "rounded-lg border p-3",
+        variant === "local" ? "border-blue-200 bg-blue-50/50 dark:border-blue-800 dark:bg-blue-950/20" : "border-green-200 bg-green-50/50 dark:border-green-800 dark:bg-green-950/20"
+      )}
+    >
+      <div className="flex items-center justify-between mb-2">
+        <span className="font-medium text-sm">{title}</span>
+        <span className="text-xs text-muted-foreground">
+          {new Date(timestamp).toLocaleString()}
+        </span>
+      </div>
+
+      <ScrollArea className="h-32">
+        {renderData ? (
+          renderData(data, variant)
+        ) : data ? (
+          <div className="space-y-1 text-sm">
+            {(displayKeys || Object.keys(data)).map((key) => {
+              const value = (data as Record<string, unknown>)[key]
+              if (value === undefined) return null
+              return (
+                <div key={key} className="flex justify-between gap-2">
+                  <span className="text-muted-foreground">
+                    {keyLabels?.[key] || key}:
+                  </span>
+                  <span className="font-mono truncate max-w-[150px]">
+                    {formatValue(value)}
+                  </span>
+                </div>
+              )
+            })}
+          </div>
+        ) : (
+          <span className="text-muted-foreground italic">Aucune donnée</span>
+        )}
+      </ScrollArea>
+    </div>
+  )
+}
+
+/**
+ * Éditeur de fusion
+ */
+function MergeEditor<TData>({
+  localData,
+  serverData,
+  mergedData,
+  onChange,
+  displayKeys,
+  keyLabels,
+}: {
+  localData: Partial<TData> | null
+  serverData: Partial<TData> | null
+  mergedData: Partial<TData>
+  onChange: (data: Partial<TData>) => void
+  displayKeys?: string[]
+  keyLabels?: Record<string, string>
+}) {
+  const allKeys = displayKeys || [
+    ...new Set([
+      ...Object.keys(localData || {}),
+      ...Object.keys(serverData || {}),
+    ]),
+  ]
+
+  const handleFieldChange = (key: string, source: "local" | "server") => {
+    const value = source === "local"
+      ? (localData as Record<string, unknown>)?.[key]
+      : (serverData as Record<string, unknown>)?.[key]
+
+    onChange({
+      ...mergedData,
+      [key]: value,
+    })
+  }
+
+  return (
+    <div className="rounded-lg border p-4 bg-muted/30">
+      <div className="text-sm font-medium mb-3 flex items-center gap-2">
+        <GitMerge className="h-4 w-4" />
+        Choisissez les valeurs pour chaque champ
+      </div>
+
+      <div className="space-y-3">
+        {allKeys.map((key) => {
+          const localValue = (localData as Record<string, unknown>)?.[key]
+          const serverValue = (serverData as Record<string, unknown>)?.[key]
+          const currentValue = (mergedData as Record<string, unknown>)?.[key]
+          const isLocalSelected = currentValue === localValue && localValue !== serverValue
+          const isServerSelected = currentValue === serverValue && localValue !== serverValue
+
+          return (
+            <div key={key} className="space-y-1">
+              <div className="text-xs font-medium text-muted-foreground">
+                {keyLabels?.[key] || key}
+              </div>
+              <div className="grid grid-cols-[1fr_auto_1fr] gap-2 items-center">
+                <button
+                  type="button"
+                  onClick={() => handleFieldChange(key, "local")}
+                  className={cn(
+                    "p-2 rounded border text-left text-sm truncate",
+                    isLocalSelected
+                      ? "border-blue-500 bg-blue-50 dark:bg-blue-950/50"
+                      : "border-border hover:border-blue-300"
+                  )}
+                >
+                  {formatValue(localValue)}
+                </button>
+                <ArrowRight className="h-4 w-4 text-muted-foreground" />
+                <button
+                  type="button"
+                  onClick={() => handleFieldChange(key, "server")}
+                  className={cn(
+                    "p-2 rounded border text-left text-sm truncate",
+                    isServerSelected
+                      ? "border-green-500 bg-green-50 dark:bg-green-950/50"
+                      : "border-border hover:border-green-300"
+                  )}
+                >
+                  {formatValue(serverValue)}
+                </button>
+              </div>
+            </div>
+          )
+        })}
+      </div>
+    </div>
+  )
+}
+
+/**
+ * Formate une valeur pour l'affichage
+ */
+function formatValue(value: unknown): string {
+  if (value === null) return "null"
+  if (value === undefined) return "undefined"
+  if (typeof value === "object") {
+    try {
+      return JSON.stringify(value)
+    } catch {
+      return "[Object]"
+    }
+  }
+  return String(value)
+}
+
+DataTableConflictResolver.displayName = "DataTableConflictResolver"
+
+export default DataTableConflictResolver

package/src/components/DataTable/DataTableContextMenu.tsx

@@ -0,0 +1,219 @@
+"use client"
+
+import * as React from "react"
+import {
+  ContextMenu,
+  ContextMenuContent,
+  ContextMenuItem,
+  ContextMenuSeparator,
+  ContextMenuTrigger,
+} from "../context-menu"
+import { Copy, Download, Edit, Trash2, Eye, EyeOff } from "lucide-react"
+import { cn } from "./utils"
+
+/**
+ * Props pour le menu contextuel du DataTable
+ */
+export interface DataTableContextMenuProps<TData> {
+  /** Données de la ligne */
+  row: TData
+  /** Index de la ligne */
+  rowIndex: number
+  /** Actions disponibles */
+  actions?: Array<{
+    id: string
+    label: string
+    icon?: React.ReactNode
+    onClick: (row: TData) => void
+    disabled?: boolean
+    destructive?: boolean
+  }>
+  /** Actions de colonnes */
+  columnActions?: Array<{
+    id: string
+    label: string
+    icon?: React.ReactNode
+    onClick: (columnId: string) => void
+    disabled?: boolean
+  }>
+  /** Callback de copie */
+  onCopy?: (row: TData) => void
+  /** Callback d'export */
+  onExport?: (row: TData) => void
+  /** Callback d'édition */
+  onEdit?: (row: TData) => void
+  /** Callback de suppression */
+  onDelete?: (row: TData) => void
+  /** Callback de visibilité des colonnes */
+  onToggleColumnVisibility?: (columnId: string) => void
+  /** Colonnes visibles */
+  visibleColumns?: string[]
+  /** Classe CSS personnalisée */
+  className?: string
+  /** Enfants à wrapper */
+  children: React.ReactNode
+}
+
+/**
+ * Composant de menu contextuel pour le DataTable
+ */
+export function DataTableContextMenu<TData>({
+  row,
+  rowIndex,
+  actions = [],
+  columnActions = [],
+  onCopy,
+  onExport,
+  onEdit,
+  onDelete,
+  onToggleColumnVisibility,
+  visibleColumns = [],
+  className,
+  children,
+}: DataTableContextMenuProps<TData>) {
+  const [isOpen, setIsOpen] = React.useState(false)
+
+  const handleAction = React.useCallback((action: any) => {
+    action.onClick(row)
+    setIsOpen(false)
+  }, [row])
+
+  const handleCopy = React.useCallback(() => {
+    if (onCopy) {
+      onCopy(row)
+    } else {
+      // Copie par défaut des données de la ligne
+      const text = Object.entries(row as any)
+        .map(([key, value]) => `${key}: ${value}`)
+        .join("\n")
+      navigator.clipboard.writeText(text)
+    }
+    setIsOpen(false)
+  }, [row, onCopy])
+
+  const handleExport = React.useCallback(() => {
+    if (onExport) {
+      onExport(row)
+    }
+    setIsOpen(false)
+  }, [row, onExport])
+
+  const handleEdit = React.useCallback(() => {
+    if (onEdit) {
+      onEdit(row)
+    }
+    setIsOpen(false)
+  }, [row, onEdit])
+
+  const handleDelete = React.useCallback(() => {
+    if (onDelete) {
+      onDelete(row)
+    }
+    setIsOpen(false)
+  }, [row, onDelete])
+
+  const handleToggleColumn = React.useCallback((columnId: string) => {
+    if (onToggleColumnVisibility) {
+      onToggleColumnVisibility(columnId)
+    }
+    setIsOpen(false)
+  }, [onToggleColumnVisibility])
+
+  return (
+    <ContextMenu onOpenChange={setIsOpen}>
+      <ContextMenuTrigger asChild>
+        {children}
+      </ContextMenuTrigger>
+      <ContextMenuContent className={cn("w-64", className)}>
+        {/* Actions de ligne */}
+        {actions.length > 0 && (
+          <>
+            {actions.map((action) => (
+              <ContextMenuItem
+                key={action.id}
+                onClick={() => handleAction(action)}
+                disabled={action.disabled}
+                className={cn(
+                  action.destructive && "text-destructive focus:text-destructive"
+                )}
+              >
+                {action.icon && <span className="mr-2">{action.icon}</span>}
+                {action.label}
+              </ContextMenuItem>
+            ))}
+            <ContextMenuSeparator />
+          </>
+        )}
+
+        {/* Actions par défaut */}
+        <ContextMenuItem onClick={handleCopy}>
+          <Copy className="mr-2 h-4 w-4" />
+          Copy row
+        </ContextMenuItem>
+        
+        {onExport && (
+          <ContextMenuItem onClick={handleExport}>
+            <Download className="mr-2 h-4 w-4" />
+            Export row
+          </ContextMenuItem>
+        )}
+        
+        {onEdit && (
+          <ContextMenuItem onClick={handleEdit}>
+            <Edit className="mr-2 h-4 w-4" />
+            Edit row
+          </ContextMenuItem>
+        )}
+        
+        {onDelete && (
+          <ContextMenuItem 
+            onClick={handleDelete}
+            className="text-destructive focus:text-destructive"
+          >
+            <Trash2 className="mr-2 h-4 w-4" />
+            Delete row
+          </ContextMenuItem>
+        )}
+
+        {/* Actions de colonnes */}
+        {columnActions.length > 0 && (
+          <>
+            <ContextMenuSeparator />
+            <div className="px-2 py-1.5 text-sm font-semibold text-muted-foreground">
+              Columns
+            </div>
+            {columnActions.map((action) => (
+              <ContextMenuItem
+                key={action.id}
+                onClick={() => handleToggleColumn(action.id)}
+                disabled={action.disabled}
+              >
+                {action.icon && <span className="mr-2">{action.icon}</span>}
+                {action.label}
+              </ContextMenuItem>
+            ))}
+          </>
+        )}
+
+        {/* Toggle de visibilité des colonnes */}
+        {onToggleColumnVisibility && visibleColumns.length > 0 && (
+          <>
+            <ContextMenuSeparator />
+            <div className="px-2 py-1.5 text-sm font-semibold text-muted-foreground">
+              Toggle Columns
+            </div>
+            {visibleColumns.map((columnId) => (
+              <ContextMenuItem
+                key={columnId}
+                onClick={() => handleToggleColumn(columnId)}
+              >
+                <Eye className="mr-2 h-4 w-4" />
+                {columnId}
+              </ContextMenuItem>
+            ))}
+          </>
+        )}
+      </ContextMenuContent>
+    </ContextMenu>
+  )
+}