@wakastellar/ui 2.0.0 → 2.1.1

package/src/components/DataTable/templates/index.tsx

@@ -0,0 +1,803 @@
+"use client"
+
+/**
+ * Templates de colonnes prédéfinis pour le DataTable
+ * @module templates
+ */
+
+import * as React from "react"
+import { Check, X, Copy, ExternalLink, Mail, Phone, MoreHorizontal, Star, StarHalf } from "lucide-react"
+import { Badge } from "../../badge"
+import { Avatar, AvatarFallback, AvatarImage } from "../../avatar"
+import { Progress } from "../../progress"
+import { Button } from "../../button"
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "../../dropdown-menu"
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} from "../../alert-dialog"
+import { cn } from "../../../utils/cn"
+import { formatters } from "../formatters"
+import type { ColumnTemplate, ColumnTemplateOptions, ColumnTemplateAction } from "../types"
+
+// ============================================
+// HELPER COMPONENTS
+// ============================================
+
+/**
+ * Composant pour afficher une valeur vide
+ */
+const EmptyValue = ({ className }: { className?: string }) => (
+  <span className={cn("text-muted-foreground", className)}>—</span>
+)
+
+/**
+ * Composant pour copier une valeur
+ */
+const CopyButton = ({ value }: { value: string }) => {
+  const [copied, setCopied] = React.useState(false)
+
+  const handleCopy = async (e: React.MouseEvent) => {
+    e.stopPropagation()
+    try {
+      await navigator.clipboard.writeText(value)
+      setCopied(true)
+      setTimeout(() => setCopied(false), 2000)
+    } catch {
+      // Fallback silencieux
+    }
+  }
+
+  return (
+    <button
+      onClick={handleCopy}
+      className="ml-1 p-1 rounded hover:bg-muted transition-colors"
+      title={copied ? "Copié !" : "Copier"}
+    >
+      {copied ? (
+        <Check className="h-3 w-3 text-green-500" />
+      ) : (
+        <Copy className="h-3 w-3 text-muted-foreground" />
+      )}
+    </button>
+  )
+}
+
+/**
+ * Composant d'action avec confirmation
+ */
+function ActionWithConfirm<TData>({
+  action,
+  row,
+}: {
+  action: ColumnTemplateAction<TData>
+  row: TData
+}) {
+  const [open, setOpen] = React.useState(false)
+
+  const handleClick = () => {
+    if (action.requiresConfirm) {
+      setOpen(true)
+    } else {
+      action.onClick(row)
+    }
+  }
+
+  const handleConfirm = () => {
+    action.onClick(row)
+    setOpen(false)
+  }
+
+  const isDisabled = typeof action.disabled === "function"
+    ? action.disabled(row)
+    : action.disabled
+
+  return (
+    <>
+      <DropdownMenuItem
+        onClick={handleClick}
+        disabled={isDisabled}
+        className={action.variant === "destructive" ? "text-destructive focus:text-destructive" : ""}
+      >
+        {action.icon && <span className="mr-2">{action.icon}</span>}
+        {action.label}
+      </DropdownMenuItem>
+
+      <AlertDialog open={open} onOpenChange={setOpen}>
+        <AlertDialogContent>
+          <AlertDialogHeader>
+            <AlertDialogTitle>
+              {action.confirmTitle || "Confirmer l'action"}
+            </AlertDialogTitle>
+            <AlertDialogDescription>
+              {action.confirmMessage || "Êtes-vous sûr de vouloir effectuer cette action ?"}
+            </AlertDialogDescription>
+          </AlertDialogHeader>
+          <AlertDialogFooter>
+            <AlertDialogCancel>Annuler</AlertDialogCancel>
+            <AlertDialogAction
+              onClick={handleConfirm}
+              className={action.variant === "destructive" ? "bg-destructive hover:bg-destructive/90" : ""}
+            >
+              Confirmer
+            </AlertDialogAction>
+          </AlertDialogFooter>
+        </AlertDialogContent>
+      </AlertDialog>
+    </>
+  )
+}
+
+// ============================================
+// COLUMN TEMPLATES
+// ============================================
+
+/**
+ * Template Date
+ */
+export const dateTemplate: ColumnTemplate<unknown, unknown> = {
+  cell: (value, _row, options) => {
+    if (!value) return <EmptyValue />
+    const formatted = formatters.date(value, options?.format || "PP", options?.locale)
+    return formatted || <EmptyValue />
+  },
+  sortingFn: "datetime",
+  size: 120,
+  enableSorting: true,
+  enableFiltering: true,
+}
+
+/**
+ * Template DateTime
+ */
+export const datetimeTemplate: ColumnTemplate<unknown, unknown> = {
+  cell: (value, _row, options) => {
+    if (!value) return <EmptyValue />
+    const formatted = formatters.datetime(value, options?.format || "Pp", options?.locale)
+    return formatted || <EmptyValue />
+  },
+  sortingFn: "datetime",
+  size: 160,
+  enableSorting: true,
+  enableFiltering: true,
+}
+
+/**
+ * Template Time
+ */
+export const timeTemplate: ColumnTemplate<unknown, unknown> = {
+  cell: (value, _row, options) => {
+    if (!value) return <EmptyValue />
+    const formatted = formatters.time(value, options?.format || "HH:mm", options?.locale)
+    return formatted || <EmptyValue />
+  },
+  sortingFn: "datetime",
+  size: 80,
+  enableSorting: true,
+}
+
+/**
+ * Template Currency
+ */
+export const currencyTemplate: ColumnTemplate<unknown, unknown> = {
+  cell: (value, _row, options) => {
+    if (value == null || value === "") return <EmptyValue />
+    const formatted = formatters.currency(
+      value,
+      options?.currency || "EUR",
+      options?.locale || "fr-FR",
+      {
+        minimumFractionDigits: options?.minimumFractionDigits,
+        maximumFractionDigits: options?.maximumFractionDigits,
+      }
+    )
+    return <span className="font-mono tabular-nums">{formatted}</span>
+  },
+  sortingFn: "basic",
+  size: 120,
+  enableSorting: true,
+  meta: { align: "right" },
+}
+
+/**
+ * Template Percentage
+ */
+export const percentageTemplate: ColumnTemplate<unknown, unknown> = {
+  cell: (value, _row, options) => {
+    if (value == null) return <EmptyValue />
+    const numValue = typeof value === "number" ? value : parseFloat(String(value))
+    if (isNaN(numValue)) return <EmptyValue />
+
+    const displayValue = options?.showValue !== false ? formatters.percentage(numValue) : null
+
+    return (
+      <div className="flex items-center gap-2 min-w-[80px]">
+        <Progress
+          value={Math.min(100, Math.max(0, numValue))}
+          className={cn("h-2 flex-1", options?.trackColor)}
+          style={options?.progressColor ? { ['--progress-color' as string]: options.progressColor } : undefined}
+        />
+        {displayValue && <span className="text-sm tabular-nums w-10 text-right">{displayValue}</span>}
+      </div>
+    )
+  },
+  sortingFn: "basic",
+  size: 140,
+  enableSorting: true,
+  meta: { align: "right" },
+}
+
+/**
+ * Template Number
+ */
+export const numberTemplate: ColumnTemplate<unknown, unknown> = {
+  cell: (value, _row, options) => {
+    if (value == null || value === "") return <EmptyValue />
+    const formatted = formatters.number(value, options?.locale || "fr-FR", {
+      notation: options?.notation,
+      minimumFractionDigits: options?.minimumFractionDigits,
+      maximumFractionDigits: options?.maximumFractionDigits,
+    })
+    return <span className="font-mono tabular-nums">{formatted}</span>
+  },
+  sortingFn: "basic",
+  size: 100,
+  enableSorting: true,
+  meta: { align: "right" },
+}
+
+/**
+ * Template Status/Badge
+ */
+export const statusTemplate: ColumnTemplate<unknown, unknown> = {
+  cell: (value, _row, options) => {
+    if (!value) return <EmptyValue />
+    const strValue = String(value)
+
+    const colors = options?.statusColors || {}
+    const labels = options?.statusLabels || {}
+    const icons = options?.statusIcons || {}
+
+    const colorClass = colors[strValue] || "bg-gray-100 text-gray-800"
+    const label = labels[strValue] || strValue
+    const icon = icons[strValue]
+
+    return (
+      <Badge variant="outline" className={cn("capitalize gap-1", colorClass)}>
+        {icon && <span className="mr-1">{icon}</span>}
+        {label}
+      </Badge>
+    )
+  },
+  size: 120,
+  enableSorting: true,
+  enableFiltering: true,
+}
+
+/**
+ * Template Badge (alias de status)
+ */
+export const badgeTemplate = statusTemplate
+
+/**
+ * Template Email
+ */
+export const emailTemplate: ColumnTemplate<unknown, unknown> = {
+  cell: (value, _row, options) => {
+    if (!value) return <EmptyValue />
+    const strValue = String(value)
+
+    const displayValue = options?.truncate && options?.maxLength
+      ? formatters.truncate(strValue, options.maxLength)
+      : strValue
+
+    return (
+      <div className="flex items-center gap-1 group">
+        <a
+          href={`mailto:${strValue}`}
+          className="text-primary hover:underline flex items-center gap-1"
+          onClick={(e) => e.stopPropagation()}
+        >
+          <Mail className="h-3 w-3 flex-shrink-0" />
+          <span className="truncate max-w-[200px]">{displayValue}</span>
+        </a>
+        {options?.copyable && (
+          <span className="opacity-0 group-hover:opacity-100 transition-opacity">
+            <CopyButton value={strValue} />
+          </span>
+        )}
+      </div>
+    )
+  },
+  size: 200,
+  enableSorting: true,
+  enableFiltering: true,
+}
+
+/**
+ * Template Phone
+ */
+export const phoneTemplate: ColumnTemplate<unknown, unknown> = {
+  cell: (value, _row, options) => {
+    if (!value) return <EmptyValue />
+    const strValue = String(value)
+
+    const formatted = formatters.phone(strValue, options?.countryCode || "FR")
+
+    return (
+      <div className="flex items-center gap-1 group">
+        <a
+          href={`tel:${strValue}`}
+          className="text-primary hover:underline flex items-center gap-1"
+          onClick={(e) => e.stopPropagation()}
+        >
+          <Phone className="h-3 w-3 flex-shrink-0" />
+          <span className="font-mono">{formatted}</span>
+        </a>
+        {options?.copyable !== false && (
+          <span className="opacity-0 group-hover:opacity-100 transition-opacity">
+            <CopyButton value={strValue} />
+          </span>
+        )}
+      </div>
+    )
+  },
+  size: 150,
+  enableSorting: false,
+  enableFiltering: true,
+}
+
+/**
+ * Template URL
+ */
+export const urlTemplate: ColumnTemplate<unknown, unknown> = {
+  cell: (value, _row, options) => {
+    if (!value) return <EmptyValue />
+    const strValue = String(value)
+
+    const displayValue = options?.truncate && options?.maxLength
+      ? formatters.truncate(strValue, options.maxLength)
+      : strValue
+
+    return (
+      <a
+        href={strValue}
+        target={options?.target || "_blank"}
+        rel="noopener noreferrer"
+        className="text-primary hover:underline flex items-center gap-1"
+        onClick={(e) => e.stopPropagation()}
+      >
+        <span className="truncate max-w-[200px]">{displayValue}</span>
+        {options?.showIcon !== false && <ExternalLink className="h-3 w-3 flex-shrink-0" />}
+      </a>
+    )
+  },
+  size: 200,
+  enableSorting: false,
+  enableFiltering: true,
+}
+
+/**
+ * Template Avatar
+ */
+export const avatarTemplate: ColumnTemplate<unknown, unknown> = {
+  cell: (value, _row, options) => {
+    if (!value) return <EmptyValue />
+
+    let name: string | undefined
+    let image: string | undefined
+
+    if (typeof value === "string") {
+      name = value
+    } else if (typeof value === "object" && value !== null) {
+      const objValue = value as Record<string, unknown>
+      const nameKey = options?.nameKey || "name"
+      const imageKey = options?.imageKey || "image"
+      name = objValue[nameKey] as string
+      image = objValue[imageKey] as string
+    }
+
+    const sizeClasses = {
+      sm: "h-6 w-6 text-xs",
+      md: "h-8 w-8 text-sm",
+      lg: "h-10 w-10 text-base",
+    }
+    const size = options?.avatarSize || "md"
+
+    return (
+      <div className="flex items-center gap-2">
+        <Avatar className={sizeClasses[size]}>
+          <AvatarImage src={image} alt={name} />
+          <AvatarFallback>
+            {options?.fallbackInitials !== false && name ? formatters.initials(name) : "?"}
+          </AvatarFallback>
+        </Avatar>
+        {options?.showName && name && (
+          <span className="truncate max-w-[150px]">{name}</span>
+        )}
+      </div>
+    )
+  },
+  size: 60,
+  enableSorting: false,
+  enableFiltering: false,
+}
+
+/**
+ * Template Boolean
+ */
+export const booleanTemplate: ColumnTemplate<unknown, unknown> = {
+  cell: (value, _row, options) => {
+    if (value == null) return <EmptyValue />
+    const boolValue = Boolean(value)
+
+    const TrueIcon = options?.trueIcon || Check
+    const FalseIcon = options?.falseIcon || X
+    const trueLabel = options?.trueLabel
+    const falseLabel = options?.falseLabel
+    const trueColor = options?.trueColor || "text-green-600"
+    const falseColor = options?.falseColor || "text-gray-400"
+
+    const Icon = boolValue ? TrueIcon : FalseIcon
+    const label = boolValue ? trueLabel : falseLabel
+    const colorClass = boolValue ? trueColor : falseColor
+
+    return (
+      <div className={cn("flex items-center gap-1", colorClass)}>
+        {typeof Icon === "function" ? <Icon className="h-4 w-4" /> : Icon}
+        {label && <span className="text-sm">{label}</span>}
+      </div>
+    )
+  },
+  size: 80,
+  enableSorting: true,
+  enableFiltering: true,
+}
+
+/**
+ * Template Actions
+ */
+export function createActionsTemplate<TData>(): ColumnTemplate<TData, unknown> {
+  return {
+    cell: (_value, row, options) => {
+      const actions = (options?.actions || []) as ColumnTemplateAction<TData>[]
+
+      if (!actions.length) return null
+
+      return (
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild onClick={(e) => e.stopPropagation()}>
+            <Button variant="ghost" size="sm" className="h-8 w-8 p-0">
+              <span className="sr-only">Actions</span>
+              <MoreHorizontal className="h-4 w-4" />
+            </Button>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent align={options?.dropdownAlign || "end"}>
+            {actions.map((action) => (
+              <ActionWithConfirm key={action.id} action={action} row={row} />
+            ))}
+          </DropdownMenuContent>
+        </DropdownMenu>
+      )
+    },
+    size: 50,
+    enableSorting: false,
+    enableFiltering: false,
+    enableHiding: false,
+  }
+}
+
+/**
+ * Template Actions par défaut
+ */
+export const actionsTemplate: ColumnTemplate<unknown, unknown> = createActionsTemplate<unknown>()
+
+/**
+ * Template Index (numéro de ligne)
+ */
+export const indexTemplate: ColumnTemplate<unknown, unknown> = {
+  cell: (_value, _row, _options) => {
+    // Note: l'index sera passé via meta ou calculé côté hook
+    return <span className="text-muted-foreground tabular-nums">#</span>
+  },
+  size: 50,
+  enableSorting: false,
+  enableFiltering: false,
+  enableHiding: false,
+}
+
+/**
+ * Template ID
+ */
+export const idTemplate: ColumnTemplate<unknown, unknown> = {
+  cell: (value, _row, options) => {
+    if (!value) return <EmptyValue />
+    const strValue = String(value)
+
+    const displayValue = options?.truncate && options?.maxLength
+      ? formatters.truncate(strValue, options.maxLength)
+      : strValue
+
+    return (
+      <div className="flex items-center gap-1 group">
+        <code className="text-xs bg-muted px-1.5 py-0.5 rounded font-mono">
+          {displayValue}
+        </code>
+        {options?.copyable && (
+          <span className="opacity-0 group-hover:opacity-100 transition-opacity">
+            <CopyButton value={strValue} />
+          </span>
+        )}
+      </div>
+    )
+  },
+  size: 100,
+  enableSorting: true,
+  enableFiltering: true,
+}
+
+/**
+ * Template Rating (étoiles)
+ */
+export const ratingTemplate: ColumnTemplate<unknown, unknown> = {
+  cell: (value, _row, options) => {
+    if (value == null) return <EmptyValue />
+    const numValue = typeof value === "number" ? value : parseFloat(String(value))
+    if (isNaN(numValue)) return <EmptyValue />
+
+    const maxRating = options?.maxRating || 5
+    const allowHalf = options?.allowHalf || false
+    const color = options?.color || "text-yellow-400"
+
+    const fullStars = Math.floor(numValue)
+    const hasHalf = allowHalf && numValue % 1 >= 0.5
+    const emptyStars = maxRating - fullStars - (hasHalf ? 1 : 0)
+
+    return (
+      <div className="flex items-center gap-0.5">
+        {Array.from({ length: fullStars }).map((_, i) => (
+          <Star key={`full-${i}`} className={cn("h-4 w-4 fill-current", color)} />
+        ))}
+        {hasHalf && <StarHalf className={cn("h-4 w-4 fill-current", color)} />}
+        {Array.from({ length: emptyStars }).map((_, i) => (
+          <Star key={`empty-${i}`} className="h-4 w-4 text-muted-foreground" />
+        ))}
+        <span className="ml-1 text-sm text-muted-foreground">{numValue.toFixed(1)}</span>
+      </div>
+    )
+  },
+  sortingFn: "basic",
+  size: 140,
+  enableSorting: true,
+}
+
+/**
+ * Template Progress
+ */
+export const progressTemplate: ColumnTemplate<unknown, unknown> = {
+  cell: (value, _row, options) => {
+    if (value == null) return <EmptyValue />
+
+    const numValue = typeof value === "number" ? value : parseFloat(String(value))
+    if (isNaN(numValue)) return <EmptyValue />
+
+    const clampedValue = Math.min(100, Math.max(0, numValue))
+    const showLabel = options?.showLabel !== false
+
+    return (
+      <div className="flex items-center gap-2 min-w-[100px]">
+        <Progress
+          value={clampedValue}
+          className="h-2 flex-1"
+        />
+        {showLabel && (
+          <span className="text-sm tabular-nums w-10 text-right">{Math.round(clampedValue)}%</span>
+        )}
+      </div>
+    )
+  },
+  sortingFn: "basic",
+  size: 140,
+  enableSorting: true,
+}
+
+/**
+ * Template Tags
+ */
+export const tagsTemplate: ColumnTemplate<unknown, unknown> = {
+  cell: (value, _row, options) => {
+    if (!value) return <EmptyValue />
+
+    let tags: string[]
+    if (typeof value === "string") {
+      const separator = options?.separator || ","
+      tags = value.split(separator).map((t) => t.trim()).filter(Boolean)
+    } else if (Array.isArray(value)) {
+      tags = value.map(String)
+    } else {
+      return <EmptyValue />
+    }
+
+    if (!tags.length) return <EmptyValue />
+
+    const maxTags = options?.maxTags || 3
+    const displayTags = tags.slice(0, maxTags)
+    const remainingCount = tags.length - maxTags
+    const tagColors = options?.tagColors || {}
+
+    return (
+      <div className="flex flex-wrap gap-1">
+        {displayTags.map((tag, i) => (
+          <Badge
+            key={i}
+            variant="secondary"
+            className={cn("text-xs", tagColors[tag])}
+          >
+            {tag}
+          </Badge>
+        ))}
+        {remainingCount > 0 && (
+          <Badge variant="outline" className="text-xs">
+            +{remainingCount}
+          </Badge>
+        )}
+      </div>
+    )
+  },
+  size: 200,
+  enableSorting: false,
+  enableFiltering: true,
+}
+
+/**
+ * Template JSON
+ */
+export const jsonTemplate: ColumnTemplate<unknown, unknown> = {
+  cell: (value, _row, options) => {
+    if (value == null) return <EmptyValue />
+
+    const [expanded, setExpanded] = React.useState(false)
+    const formatted = formatters.json(value, 2)
+    const isExpandable = options?.expandable !== false && formatted.length > 50
+
+    if (!isExpandable) {
+      return (
+        <code className="text-xs bg-muted px-1.5 py-0.5 rounded font-mono whitespace-pre-wrap">
+          {formatted}
+        </code>
+      )
+    }
+
+    return (
+      <div className="relative">
+        <button
+          onClick={(e) => {
+            e.stopPropagation()
+            setExpanded(!expanded)
+          }}
+          className="text-left w-full"
+        >
+          <code className={cn(
+            "text-xs bg-muted px-1.5 py-0.5 rounded font-mono block",
+            expanded ? "whitespace-pre-wrap" : "truncate max-w-[200px]"
+          )}>
+            {formatted}
+          </code>
+        </button>
+      </div>
+    )
+  },
+  size: 200,
+  enableSorting: false,
+  enableFiltering: false,
+}
+
+/**
+ * Template Text (par défaut)
+ */
+export const textTemplate: ColumnTemplate<unknown, unknown> = {
+  cell: (value, _row, options) => {
+    if (value == null || value === "") return <EmptyValue />
+
+    const strValue = String(value)
+    const displayValue = options?.truncate && options?.maxLength
+      ? formatters.truncate(strValue, options.maxLength)
+      : strValue
+
+    // Highlight si spécifié
+    if (options?.highlight) {
+      const regex = new RegExp(`(${options.highlight})`, "gi")
+      const parts = displayValue.split(regex)
+
+      return (
+        <div className="flex items-center gap-1 group">
+          <span>
+            {parts.map((part, i) =>
+              regex.test(part) ? (
+                <mark key={i} className="bg-yellow-200 dark:bg-yellow-800">{part}</mark>
+              ) : (
+                <React.Fragment key={i}>{part}</React.Fragment>
+              )
+            )}
+          </span>
+          {options?.copyable && (
+            <span className="opacity-0 group-hover:opacity-100 transition-opacity">
+              <CopyButton value={strValue} />
+            </span>
+          )}
+        </div>
+      )
+    }
+
+    return (
+      <div className="flex items-center gap-1 group">
+        <span className={options?.truncate ? "truncate" : ""}>{displayValue}</span>
+        {options?.copyable && (
+          <span className="opacity-0 group-hover:opacity-100 transition-opacity">
+            <CopyButton value={strValue} />
+          </span>
+        )}
+      </div>
+    )
+  },
+  enableSorting: true,
+  enableFiltering: true,
+}
+
+// ============================================
+// TEMPLATES MAP
+// ============================================
+
+/**
+ * Map des templates par nom
+ * Note: Les templates sont typés avec `unknown` pour permettre l'accès dynamique par nom.
+ * Le typage précis est assuré lors de l'utilisation via useDataTableColumnTemplates.
+ */
+export const templatesMap: Record<string, ColumnTemplate<unknown, unknown>> = {
+  date: dateTemplate,
+  datetime: datetimeTemplate,
+  time: timeTemplate,
+  currency: currencyTemplate,
+  percentage: percentageTemplate,
+  number: numberTemplate,
+  status: statusTemplate,
+  badge: badgeTemplate,
+  email: emailTemplate,
+  phone: phoneTemplate,
+  url: urlTemplate,
+  avatar: avatarTemplate,
+  boolean: booleanTemplate,
+  actions: actionsTemplate,
+  index: indexTemplate,
+  id: idTemplate,
+  rating: ratingTemplate,
+  progress: progressTemplate,
+  tags: tagsTemplate,
+  json: jsonTemplate,
+  text: textTemplate,
+}
+
+/**
+ * Récupère un template par son nom
+ */
+export function getTemplate(name: string): ColumnTemplate<unknown, unknown> | undefined {
+  return templatesMap[name]
+}
+
+/**
+ * Liste des noms de templates disponibles
+ */
+export const availableTemplateNames = Object.keys(templatesMap)
+
+export default templatesMap