@wakastellar/ui 4.0.0-dev.0 → 4.0.1

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

@@ -1,804 +0,0 @@
-"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 { createHighlightRegex } from "../../../utils/security"
-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é (with escaped regex for security)
-    if (options?.highlight) {
-      const regex = createHighlightRegex(options.highlight)
-      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