@wakastellar/ui 4.0.0 → 4.0.1

package/src/components/DataTable/DataTableCell.tsx

@@ -1,172 +0,0 @@
-"use client"
-
-import * as React from "react"
-import { flexRender, Cell, Row } from "@tanstack/react-table"
-import { DataTableEditCell, EditCellConfig } from "./DataTableEditCell"
-import { ColumnEditConfig, EditableCellValue } from "./types"
-
-/**
- * Props pour le composant DataTableCell
- */
-export interface DataTableCellProps<TData extends Record<string, unknown>> {
-  /** Cellule TanStack Table */
-  cell: Cell<TData, unknown>
-  /** Ligne parente */
-  row: Row<TData>
-  /** ID de la ligne en cours d'édition */
-  editingRowId?: string | null
-  /** Configuration d'édition des colonnes */
-  editableColumns?: ColumnEditConfig<TData>[]
-  /** Callback pour mettre à jour un champ */
-  onUpdateField?: (field: keyof TData, value: EditableCellValue) => void
-  /** Callback pour démarrer l'édition */
-  onStartEdit?: (rowId: string, originalData: TData) => void
-  /** Callback pour sauvegarder */
-  onSaveEdit?: () => void
-  /** Callback pour annuler */
-  onCancelEdit?: () => void
-}
-
-/**
- * Composant de cellule réutilisable pour DataTable
- *
- * Gère tous les types de cellules :
- * - Cellules normales
- * - Cellules éditables
- * - Cellules groupées
- * - Cellules agrégées
- * - Cellules placeholder
- *
- * Optimisé avec React.memo pour éviter les re-renders inutiles
- */
-function DataTableCellInner<TData extends Record<string, unknown>>({
-  cell,
-  row,
-  editingRowId,
-  editableColumns,
-  onUpdateField,
-  onStartEdit,
-  onSaveEdit,
-  onCancelEdit,
-}: DataTableCellProps<TData>) {
-  const cellValue = cell.getValue()
-  const columnId = cell.column.id
-  const rowId = row.id
-  const isEditing = editingRowId === rowId
-
-  // Mémoïser la recherche de colonne éditable
-  const editableColumn = React.useMemo(() => {
-    return editableColumns?.find(col => col.field === columnId)
-  }, [editableColumns, columnId])
-
-  // Mémoïser les handlers
-  const handleUpdateField = React.useCallback(
-    (value: EditableCellValue) => onUpdateField?.(columnId as keyof TData, value),
-    [onUpdateField, columnId]
-  )
-
-  const handleStartEdit = React.useCallback(
-    () => onStartEdit?.(rowId, row.original),
-    [onStartEdit, rowId, row.original]
-  )
-
-  const handleToggleExpanded = React.useCallback(
-    (e: React.MouseEvent) => {
-      e.stopPropagation()
-      row.toggleExpanded()
-    },
-    [row]
-  )
-
-  // Cellule en édition
-  if (editableColumn && isEditing) {
-    return (
-      <DataTableEditCell
-        value={cellValue as EditableCellValue}
-        field={columnId as keyof TData}
-        config={editableColumn.config}
-        isEditing={isEditing}
-        onChange={handleUpdateField}
-        onStartEdit={handleStartEdit}
-        onSave={onSaveEdit ?? (() => {})}
-        onCancel={onCancelEdit ?? (() => {})}
-      />
-    )
-  }
-
-  // Cellule groupée (avec bouton d'expansion)
-  if (cell.getIsGrouped()) {
-    return (
-      <div className="flex items-center gap-2">
-        <button
-          onClick={handleToggleExpanded}
-          className="p-1 hover:bg-muted rounded"
-        >
-          {row.getIsExpanded() ? "▼" : "▶"}
-        </button>
-        <span className="font-medium">
-          {flexRender(cell.column.columnDef.cell, cell.getContext())}
-        </span>
-        <span className="text-muted-foreground">
-          ({row.subRows.length})
-        </span>
-      </div>
-    )
-  }
-
-  // Cellule agrégée
-  if (cell.getIsAggregated()) {
-    return (
-      <>
-        {flexRender(
-          cell.column.columnDef.aggregatedCell ?? cell.column.columnDef.cell,
-          cell.getContext()
-        )}
-      </>
-    )
-  }
-
-  // Cellule placeholder (dans les lignes groupées)
-  if (cell.getIsPlaceholder()) {
-    return null
-  }
-
-  // Cellule normale
-  return (
-    <>
-      {flexRender(cell.column.columnDef.cell, cell.getContext())}
-    </>
-  )
-}
-
-/**
- * Fonction de comparaison personnalisée pour React.memo
- */
-function areCellPropsEqual<TData extends Record<string, unknown>>(
-  prevProps: DataTableCellProps<TData>,
-  nextProps: DataTableCellProps<TData>
-): boolean {
-  // Comparer l'ID de la cellule
-  if (prevProps.cell.id !== nextProps.cell.id) return false
-
-  // Comparer la valeur de la cellule
-  if (prevProps.cell.getValue() !== nextProps.cell.getValue()) return false
-
-  // Comparer si la ligne est en cours d'édition
-  const prevIsEditing = prevProps.editingRowId === prevProps.row.id
-  const nextIsEditing = nextProps.editingRowId === nextProps.row.id
-  if (prevIsEditing !== nextIsEditing) return false
-
-  // Comparer l'état d'expansion pour les cellules groupées
-  if (prevProps.row.getIsExpanded() !== nextProps.row.getIsExpanded()) return false
-
-  // Comparer l'état groupé/agrégé/placeholder
-  if (prevProps.cell.getIsGrouped() !== nextProps.cell.getIsGrouped()) return false
-  if (prevProps.cell.getIsAggregated() !== nextProps.cell.getIsAggregated()) return false
-  if (prevProps.cell.getIsPlaceholder() !== nextProps.cell.getIsPlaceholder()) return false
-
-  return true
-}
-
-// Export avec React.memo pour optimiser les re-renders
-export const DataTableCell = React.memo(DataTableCellInner, areCellPropsEqual) as typeof DataTableCellInner

package/src/components/DataTable/DataTableConflictResolver.tsx

@@ -1,478 +0,0 @@
-"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