@wakastellar/ui 4.0.0 → 4.0.1

package/src/components/DataTable/DataTableFilterBuilder.tsx

@@ -1,519 +0,0 @@
-"use client"
-
-import * as React from "react"
-import { Plus, Trash2, GripVertical, Save, Download, Upload, RotateCcw } from "lucide-react"
-import { Button } from "../button"
-import { Input } from "../input"
-import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "../select"
-import { Popover, PopoverContent, PopoverTrigger } from "../popover"
-import { Badge } from "../badge"
-import { Separator } from "../separator"
-import { Switch } from "../switch"
-import { cn } from "../../utils/cn"
-import { OPERATOR_LABELS } from "./hooks/useDataTableAdvancedFilters"
-import type {
-  FilterOperator,
-  FilterRule,
-  FilterGroup,
-  FilterPreset,
-  FilterableColumn,
-  AdvancedFiltersState,
-  AdvancedFiltersActions,
-} from "./types"
-
-interface DataTableFilterBuilderProps<TData> {
-  state: AdvancedFiltersState<TData>
-  actions: AdvancedFiltersActions<TData>
-  columns: FilterableColumn<TData>[]
-  getOperatorsForColumn: (column: keyof TData | string) => FilterOperator[]
-  className?: string
-  maxNestingDepth?: number
-}
-
-/**
- * Composant de construction de filtres avancés
- */
-export function DataTableFilterBuilder<TData>({
-  state,
-  actions,
-  columns,
-  getOperatorsForColumn,
-  className,
-  maxNestingDepth = 3,
-}: DataTableFilterBuilderProps<TData>) {
-  const [presetName, setPresetName] = React.useState("")
-  const [showPresetInput, setShowPresetInput] = React.useState(false)
-
-  const handleSavePreset = () => {
-    if (presetName.trim()) {
-      actions.saveAsPreset(presetName.trim())
-      setPresetName("")
-      setShowPresetInput(false)
-    }
-  }
-
-  const handleExport = () => {
-    const json = actions.exportFilters()
-    const blob = new Blob([json], { type: "application/json" })
-    const url = URL.createObjectURL(blob)
-    const a = document.createElement("a")
-    a.href = url
-    a.download = "filters.json"
-    a.click()
-    URL.revokeObjectURL(url)
-  }
-
-  const handleImport = () => {
-    const input = document.createElement("input")
-    input.type = "file"
-    input.accept = ".json"
-    input.onchange = async (e) => {
-      const file = (e.target as HTMLInputElement).files?.[0]
-      if (file) {
-        const text = await file.text()
-        actions.importFilters(text)
-      }
-    }
-    input.click()
-  }
-
-  return (
-    <div className={cn("space-y-4", className)}>
-      {/* Header avec presets */}
-      <div className="flex items-center justify-between gap-2">
-        <div className="flex items-center gap-2">
-          <span className="text-sm font-medium">Filtres avancés</span>
-          {state.isDirty && (
-            <Badge variant="secondary" className="text-xs">
-              Modifié
-            </Badge>
-          )}
-        </div>
-        <div className="flex items-center gap-1">
-          {/* Presets dropdown */}
-          {state.presets.length > 0 && (
-            <Popover>
-              <PopoverTrigger asChild>
-                <Button variant="outline" size="sm">
-                  {state.activePresetId
-                    ? state.presets.find((p) => p.id === state.activePresetId)?.name || "Presets"
-                    : "Presets"}
-                </Button>
-              </PopoverTrigger>
-              <PopoverContent className="w-64 p-2" align="end">
-                <div className="space-y-1">
-                  {state.presets.map((preset) => (
-                    <div
-                      key={preset.id}
-                      className={cn(
-                        "flex items-center justify-between p-2 rounded hover:bg-muted cursor-pointer",
-                        state.activePresetId === preset.id && "bg-muted"
-                      )}
-                      onClick={() => actions.applyPreset(preset.id)}
-                    >
-                      <div>
-                        <div className="text-sm font-medium">{preset.name}</div>
-                        {preset.description && (
-                          <div className="text-xs text-muted-foreground">{preset.description}</div>
-                        )}
-                      </div>
-                      <Button
-                        variant="ghost"
-                        size="icon"
-                        className="h-6 w-6"
-                        onClick={(e) => {
-                          e.stopPropagation()
-                          actions.deletePreset(preset.id)
-                        }}
-                      >
-                        <Trash2 className="h-3 w-3" />
-                      </Button>
-                    </div>
-                  ))}
-                </div>
-              </PopoverContent>
-            </Popover>
-          )}
-
-          {/* Actions */}
-          <Button variant="ghost" size="icon" onClick={handleImport} title="Importer">
-            <Upload className="h-4 w-4" />
-          </Button>
-          <Button variant="ghost" size="icon" onClick={handleExport} title="Exporter">
-            <Download className="h-4 w-4" />
-          </Button>
-          <Button variant="ghost" size="icon" onClick={actions.resetFilters} title="Réinitialiser">
-            <RotateCcw className="h-4 w-4" />
-          </Button>
-        </div>
-      </div>
-
-      <Separator />
-
-      {/* Filter groups */}
-      <FilterGroupComponent
-        group={state.currentFilter}
-        actions={actions}
-        columns={columns}
-        getOperatorsForColumn={getOperatorsForColumn}
-        depth={0}
-        maxNestingDepth={maxNestingDepth}
-        isRoot
-      />
-
-      <Separator />
-
-      {/* Footer avec actions */}
-      <div className="flex items-center justify-between">
-        <div className="flex items-center gap-2">
-          {showPresetInput ? (
-            <>
-              <Input
-                value={presetName}
-                onChange={(e) => setPresetName(e.target.value)}
-                placeholder="Nom du preset..."
-                className="w-40 h-8"
-                onKeyDown={(e) => {
-                  if (e.key === "Enter") handleSavePreset()
-                  if (e.key === "Escape") setShowPresetInput(false)
-                }}
-              />
-              <Button size="sm" onClick={handleSavePreset}>
-                <Save className="h-3 w-3 mr-1" />
-                Sauvegarder
-              </Button>
-              <Button size="sm" variant="ghost" onClick={() => setShowPresetInput(false)}>
-                Annuler
-              </Button>
-            </>
-          ) : (
-            <Button size="sm" variant="outline" onClick={() => setShowPresetInput(true)}>
-              <Save className="h-3 w-3 mr-1" />
-              Sauvegarder comme preset
-            </Button>
-          )}
-        </div>
-        <Button size="sm" onClick={actions.applyFilters}>
-          Appliquer
-        </Button>
-      </div>
-    </div>
-  )
-}
-
-/**
- * Composant de groupe de filtres (récursif)
- */
-function FilterGroupComponent<TData>({
-  group,
-  actions,
-  columns,
-  getOperatorsForColumn,
-  depth,
-  maxNestingDepth,
-  isRoot = false,
-}: {
-  group: FilterGroup<TData>
-  actions: AdvancedFiltersActions<TData>
-  columns: FilterableColumn<TData>[]
-  getOperatorsForColumn: (column: keyof TData | string) => FilterOperator[]
-  depth: number
-  maxNestingDepth: number
-  isRoot?: boolean
-}) {
-  const canAddGroup = depth < maxNestingDepth
-
-  return (
-    <div
-      className={cn(
-        "space-y-2",
-        !isRoot && "pl-4 ml-2 border-l-2 border-muted"
-      )}
-    >
-      {/* Connecteur du groupe */}
-      {!isRoot && (
-        <div className="flex items-center gap-2">
-          <div className="flex items-center gap-1 bg-muted rounded-md p-1">
-            <Button
-              variant={group.connector === "AND" ? "default" : "ghost"}
-              size="sm"
-              className="h-6 px-2"
-              onClick={() => actions.setGroupConnector(group.id, "AND")}
-            >
-              ET
-            </Button>
-            <Button
-              variant={group.connector === "OR" ? "default" : "ghost"}
-              size="sm"
-              className="h-6 px-2"
-              onClick={() => actions.setGroupConnector(group.id, "OR")}
-            >
-              OU
-            </Button>
-          </div>
-          <Button
-            variant="ghost"
-            size="icon"
-            className="h-6 w-6 text-muted-foreground hover:text-destructive"
-            onClick={() => actions.removeGroup(group.id)}
-          >
-            <Trash2 className="h-3 w-3" />
-          </Button>
-        </div>
-      )}
-
-      {/* Règles */}
-      {group.rules.map((rule) => (
-        <FilterRuleComponent
-          key={rule.id}
-          rule={rule}
-          actions={actions}
-          columns={columns}
-          getOperatorsForColumn={getOperatorsForColumn}
-        />
-      ))}
-
-      {/* Sous-groupes */}
-      {group.groups.map((subGroup) => (
-        <FilterGroupComponent
-          key={subGroup.id}
-          group={subGroup}
-          actions={actions}
-          columns={columns}
-          getOperatorsForColumn={getOperatorsForColumn}
-          depth={depth + 1}
-          maxNestingDepth={maxNestingDepth}
-        />
-      ))}
-
-      {/* Boutons d'ajout */}
-      <div className="flex items-center gap-2">
-        <Button
-          variant="outline"
-          size="sm"
-          onClick={() =>
-            actions.addRule(group.id, {
-              column: columns[0]?.key || "",
-              operator: "equals",
-              value: "",
-            })
-          }
-        >
-          <Plus className="h-3 w-3 mr-1" />
-          Ajouter une règle
-        </Button>
-        {canAddGroup && (
-          <Button
-            variant="outline"
-            size="sm"
-            onClick={() => actions.addGroup(group.id, "AND")}
-          >
-            <Plus className="h-3 w-3 mr-1" />
-            Ajouter un groupe
-          </Button>
-        )}
-      </div>
-    </div>
-  )
-}
-
-/**
- * Composant de règle de filtre
- */
-function FilterRuleComponent<TData>({
-  rule,
-  actions,
-  columns,
-  getOperatorsForColumn,
-}: {
-  rule: FilterRule<TData>
-  actions: AdvancedFiltersActions<TData>
-  columns: FilterableColumn<TData>[]
-  getOperatorsForColumn: (column: keyof TData | string) => FilterOperator[]
-}) {
-  const column = columns.find((c) => c.key === rule.column)
-  const operators = getOperatorsForColumn(rule.column)
-  const needsValue = !["isEmpty", "isNotEmpty", "isNull", "isNotNull"].includes(rule.operator)
-  const needsSecondValue = rule.operator === "between"
-
-  return (
-    <div className="flex items-center gap-2 group">
-      <GripVertical className="h-4 w-4 text-muted-foreground opacity-0 group-hover:opacity-100 cursor-grab" />
-
-      {/* Colonne */}
-      <Select
-        value={rule.column as string}
-        onValueChange={(value) => actions.updateRule(rule.id, { column: value })}
-      >
-        <SelectTrigger className="w-40 h-8">
-          <SelectValue placeholder="Colonne" />
-        </SelectTrigger>
-        <SelectContent>
-          {columns.map((col) => (
-            <SelectItem key={col.key as string} value={col.key as string}>
-              {col.label}
-            </SelectItem>
-          ))}
-        </SelectContent>
-      </Select>
-
-      {/* Opérateur */}
-      <Select
-        value={rule.operator}
-        onValueChange={(value) => actions.updateRule(rule.id, { operator: value as FilterOperator })}
-      >
-        <SelectTrigger className="w-44 h-8">
-          <SelectValue placeholder="Opérateur" />
-        </SelectTrigger>
-        <SelectContent>
-          {operators.map((op) => (
-            <SelectItem key={op} value={op}>
-              {OPERATOR_LABELS[op]}
-            </SelectItem>
-          ))}
-        </SelectContent>
-      </Select>
-
-      {/* Valeur */}
-      {needsValue && (
-        <>
-          {column?.type === "enum" && column.enumOptions ? (
-            rule.operator === "in" || rule.operator === "notIn" ? (
-              // Multi-select pour in/notIn
-              <Popover>
-                <PopoverTrigger asChild>
-                  <Button variant="outline" className="w-40 h-8 justify-start">
-                    {Array.isArray(rule.value) && rule.value.length > 0
-                      ? `${rule.value.length} sélectionné(s)`
-                      : "Sélectionner..."}
-                  </Button>
-                </PopoverTrigger>
-                <PopoverContent className="w-56 p-2">
-                  <div className="space-y-1 max-h-48 overflow-auto">
-                    {column.enumOptions.map((opt) => (
-                      <label
-                        key={opt.value}
-                        className="flex items-center gap-2 p-1 hover:bg-muted rounded cursor-pointer"
-                      >
-                        <input
-                          type="checkbox"
-                          checked={(rule.value as string[])?.includes(opt.value) || false}
-                          onChange={(e) => {
-                            const current = (rule.value as string[]) || []
-                            const newValue = e.target.checked
-                              ? [...current, opt.value]
-                              : current.filter((v) => v !== opt.value)
-                            actions.updateRule(rule.id, { value: newValue })
-                          }}
-                          className="rounded"
-                        />
-                        <span className="text-sm">{opt.label}</span>
-                      </label>
-                    ))}
-                  </div>
-                </PopoverContent>
-              </Popover>
-            ) : (
-              <Select
-                value={rule.value as string}
-                onValueChange={(value) => actions.updateRule(rule.id, { value })}
-              >
-                <SelectTrigger className="w-40 h-8">
-                  <SelectValue placeholder="Valeur" />
-                </SelectTrigger>
-                <SelectContent>
-                  {column.enumOptions.map((opt) => (
-                    <SelectItem key={opt.value} value={opt.value}>
-                      {opt.label}
-                    </SelectItem>
-                  ))}
-                </SelectContent>
-              </Select>
-            )
-          ) : column?.type === "boolean" ? (
-            <Select
-              value={String(rule.value)}
-              onValueChange={(value) => actions.updateRule(rule.id, { value: value === "true" })}
-            >
-              <SelectTrigger className="w-32 h-8">
-                <SelectValue placeholder="Valeur" />
-              </SelectTrigger>
-              <SelectContent>
-                <SelectItem value="true">Oui</SelectItem>
-                <SelectItem value="false">Non</SelectItem>
-              </SelectContent>
-            </Select>
-          ) : column?.type === "number" ? (
-            <>
-              <Input
-                type="number"
-                value={rule.value as string}
-                onChange={(e) => actions.updateRule(rule.id, { value: e.target.valueAsNumber })}
-                placeholder="Valeur"
-                className="w-32 h-8"
-              />
-              {needsSecondValue && (
-                <>
-                  <span className="text-sm text-muted-foreground">et</span>
-                  <Input
-                    type="number"
-                    value={rule.valueTo as string}
-                    onChange={(e) => actions.updateRule(rule.id, { valueTo: e.target.valueAsNumber })}
-                    placeholder="Valeur max"
-                    className="w-32 h-8"
-                  />
-                </>
-              )}
-            </>
-          ) : column?.type === "date" || column?.type === "datetime" ? (
-            <>
-              <Input
-                type={column.type === "datetime" ? "datetime-local" : "date"}
-                value={rule.value as string}
-                onChange={(e) => actions.updateRule(rule.id, { value: e.target.value })}
-                className="w-40 h-8"
-              />
-              {needsSecondValue && (
-                <>
-                  <span className="text-sm text-muted-foreground">et</span>
-                  <Input
-                    type={column.type === "datetime" ? "datetime-local" : "date"}
-                    value={rule.valueTo as string}
-                    onChange={(e) => actions.updateRule(rule.id, { valueTo: e.target.value })}
-                    className="w-40 h-8"
-                  />
-                </>
-              )}
-            </>
-          ) : (
-            <Input
-              value={rule.value as string}
-              onChange={(e) => actions.updateRule(rule.id, { value: e.target.value })}
-              placeholder="Valeur"
-              className="w-40 h-8"
-            />
-          )}
-        </>
-      )}
-
-      {/* Toggle enabled */}
-      <Switch
-        checked={rule.enabled !== false}
-        onCheckedChange={(checked) => actions.updateRule(rule.id, { enabled: checked })}
-        className="h-4 w-7"
-      />
-
-      {/* Delete */}
-      <Button
-        variant="ghost"
-        size="icon"
-        className="h-6 w-6 text-muted-foreground hover:text-destructive opacity-0 group-hover:opacity-100"
-        onClick={() => actions.removeRule(rule.id)}
-      >
-        <Trash2 className="h-3 w-3" />
-      </Button>
-    </div>
-  )
-}
-
-export default DataTableFilterBuilder

package/src/components/DataTable/DataTableHeader.tsx

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