@traky-app/ui 1.6.7 → 1.6.8

package/registry/traky/ui/file-manager.tsx

@@ -0,0 +1,646 @@
+"use client"
+
+/**
+ * FileManager — CRUD de archivos con almacenamiento inyectado.
+ * El host pasa `uploadFile` / `deleteFile`.
+ */
+import { useCallback, useEffect, useId, useRef, useState } from "react"
+import {
+  IconDownload,
+  IconFileTypePdf,
+  IconLoader2,
+  IconPhoto,
+  IconPlus,
+  IconRefresh,
+  IconUpload,
+  IconVideo,
+  IconX,
+} from "@tabler/icons-react"
+import { toast } from "sonner"
+
+import {
+  fileListSignature,
+  normalizeFileItems,
+  type FileItem,
+  type FileStorageProvider,
+} from "@/lib/file-items"
+import { cn } from "@/lib/utils"
+import {
+  ACCEPTED_TYPES,
+  ACCEPTED_TYPES_WITH_VIDEO,
+  downloadFile,
+  getFileDisplayName,
+  getFileFullName,
+  isAcceptedFile,
+  isImageFile,
+  isPdfFile,
+  isVideoFile,
+  toFileItem,
+} from "@/lib/file-manager-utils"
+import { Button } from "@/components/ui/button"
+import { Card, CardContent } from "@/components/ui/card"
+import {
+  AlertDialog,
+  AlertDialogContent,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} from "@/components/ui/alert-dialog"
+
+export type { FileItem, FileStorageProvider } from "@/lib/file-items"
+export {
+  normalizeFileItem,
+  normalizeFileItems,
+  fileListSignature,
+} from "@/lib/file-items"
+
+export type FileManagerUploadResult = {
+  url: string
+  message?: string
+  provider?: FileStorageProvider
+}
+
+export type FileManagerDeleteResult = {
+  ok: boolean
+  message?: string
+}
+
+export type FileManagerProps = {
+  value?: FileItem[]
+  defaultValue?: FileItem[] | unknown[]
+  onChange?: (value: FileItem[]) => void
+  /** Create / replace: sube y devuelve URL pública. */
+  uploadFile?: (file: File) => Promise<FileManagerUploadResult>
+  /** Delete: borra el objeto remoto. URLs externas pueden devolver ok. */
+  deleteFile?: (url: string) => Promise<FileManagerDeleteResult>
+  className?: string
+  acceptVideos?: boolean
+  readOnly?: boolean
+  /** Cuadrícula más chica: el alta no ocupa todo el ancho. */
+  compact?: boolean
+}
+
+function AddFileCard({
+  disabled,
+  dragActive,
+  onBrowse,
+  fullWidth = false,
+}: {
+  disabled: boolean
+  dragActive: boolean
+  onBrowse: () => void
+  fullWidth?: boolean
+}) {
+  return (
+    <button
+      type="button"
+      disabled={disabled}
+      onClick={onBrowse}
+      className={cn(
+        "flex w-full flex-col items-center justify-center gap-2 rounded-lg border-2 border-dashed text-center transition-colors",
+        "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+        fullWidth ? "min-h-[148px] gap-2.5 px-4 py-8" : "aspect-square gap-2 p-3",
+        dragActive
+          ? "border-primary bg-primary/10"
+          : "border-border bg-muted/30 hover:border-primary/50 hover:bg-muted/50",
+        disabled && "cursor-not-allowed opacity-60",
+      )}
+      aria-label="Agregar imágenes o PDF"
+    >
+      {disabled ? (
+        <IconLoader2
+          className={cn(
+            "animate-spin text-primary",
+            fullWidth ? "size-8" : "size-7",
+          )}
+          aria-hidden
+        />
+      ) : (
+        <div
+          className={cn(
+            "flex items-center justify-center rounded-xl",
+            fullWidth ? "size-12" : "size-10",
+            dragActive
+              ? "bg-primary/20 text-primary"
+              : "bg-muted text-muted-foreground",
+          )}
+        >
+          <IconPlus
+            className={fullWidth ? "size-6" : "size-5"}
+            stroke={1.75}
+            aria-hidden
+          />
+        </div>
+      )}
+      <div className="space-y-0.5 px-1">
+        <p
+          className={cn(
+            "font-semibold text-foreground",
+            fullWidth ? "text-sm" : "text-xs",
+          )}
+        >
+          {disabled ? "Subiendo…" : "Agregar"}
+        </p>
+        <p
+          className={cn(
+            "leading-snug text-muted-foreground",
+            fullWidth ? "text-xs" : "text-[10px]",
+          )}
+        >
+          Arrastra o haz clic para subir
+        </p>
+      </div>
+      <span
+        className={cn(
+          "inline-flex items-center gap-1 rounded-full border border-border bg-background/80 font-medium text-muted-foreground",
+          fullWidth ? "px-2.5 py-1 text-[10px]" : "px-2 py-0.5 text-[9px]",
+        )}
+      >
+        <IconUpload className={fullWidth ? "size-3" : "size-2.5"} aria-hidden />
+        IMG · PDF
+      </span>
+    </button>
+  )
+}
+
+const EMPTY_FILES: FileItem[] = []
+
+function FileManager({
+  value,
+  defaultValue = EMPTY_FILES,
+  onChange,
+  uploadFile,
+  deleteFile,
+  className,
+  acceptVideos = false,
+  readOnly = false,
+  compact = false,
+}: FileManagerProps) {
+  const inputId = useId()
+  const inputRef = useRef<HTMLInputElement>(null)
+  const replaceInputRef = useRef<HTMLInputElement>(null)
+  const replaceIndexRef = useRef<number | null>(null)
+  const onChangeRef = useRef(onChange)
+  const uploadFileRef = useRef(uploadFile)
+  const deleteFileRef = useRef(deleteFile)
+  const [internalFiles, setInternalFiles] = useState<FileItem[]>(() =>
+    normalizeFileItems(defaultValue),
+  )
+  const [previewImage, setPreviewImage] = useState<FileItem | null>(null)
+  const [uploading, setUploading] = useState(false)
+  const [busyIndex, setBusyIndex] = useState<number | null>(null)
+  const [dragActive, setDragActive] = useState(false)
+  const dragCounter = useRef(0)
+  const filesSignatureRef = useRef(fileListSignature(value ?? defaultValue))
+
+  const isControlled = value !== undefined
+  const files = isControlled ? normalizeFileItems(value) : internalFiles
+
+  onChangeRef.current = onChange
+  uploadFileRef.current = uploadFile
+  deleteFileRef.current = deleteFile
+
+  useEffect(() => {
+    if (isControlled) return
+    const next = normalizeFileItems(defaultValue)
+    const nextSignature = fileListSignature(next)
+    if (nextSignature === filesSignatureRef.current) return
+    filesSignatureRef.current = nextSignature
+    setInternalFiles(next)
+  }, [defaultValue, isControlled])
+
+  const commit = useCallback(
+    (next: FileItem[]) => {
+      filesSignatureRef.current = fileListSignature(next)
+      if (!isControlled) setInternalFiles(next)
+      if (!readOnly) onChangeRef.current?.(next)
+    },
+    [isControlled, readOnly],
+  )
+
+  const openFilePicker = useCallback(() => {
+    if (uploading || busyIndex !== null) return
+    inputRef.current?.click()
+  }, [uploading, busyIndex])
+
+  const processFiles = useCallback(
+    async (fileList: FileList | File[]) => {
+      const selected = Array.from(fileList).filter((file) =>
+        isAcceptedFile(file, acceptVideos),
+      )
+      if (selected.length === 0) {
+        toast.error(
+          acceptVideos
+            ? "Solo se permiten imágenes, PDF o videos (MP4, WEBM)"
+            : "Solo se permiten imágenes (PNG, JPG, WEBP) o PDF",
+        )
+        return
+      }
+
+      const runUpload = uploadFileRef.current
+      if (!runUpload) {
+        toast.error("La subida de archivos no está configurada")
+        return
+      }
+
+      setUploading(true)
+      const uploaded: FileItem[] = []
+
+      try {
+        for (const file of selected) {
+          const res = await runUpload(file)
+          if (res.url) {
+            uploaded.push(toFileItem(file, res.url, res.provider))
+          } else {
+            toast.error(res.message || `No se pudo subir ${file.name}`)
+          }
+        }
+
+        if (uploaded.length > 0) {
+          commit([...files, ...uploaded])
+          toast.success(
+            uploaded.length === 1
+              ? "Archivo agregado"
+              : `${uploaded.length} archivos agregados`,
+          )
+        }
+      } catch {
+        toast.error("Error al subir archivos")
+      } finally {
+        setUploading(false)
+      }
+    },
+    [acceptVideos, commit, files],
+  )
+
+  const handleInputChange = async (
+    event: React.ChangeEvent<HTMLInputElement>,
+  ) => {
+    const inputFiles = event.target.files
+    if (!inputFiles?.length) return
+    await processFiles(inputFiles)
+    event.target.value = ""
+  }
+
+  const handleReplaceChange = async (
+    event: React.ChangeEvent<HTMLInputElement>,
+  ) => {
+    const nextFile = event.target.files?.[0]
+    const index = replaceIndexRef.current
+    event.target.value = ""
+    replaceIndexRef.current = null
+    if (!nextFile || index == null) return
+    if (!isAcceptedFile(nextFile, acceptVideos)) {
+      toast.error(
+        acceptVideos
+          ? "Solo se permiten imágenes, PDF o videos (MP4, WEBM)"
+          : "Solo se permiten imágenes (PNG, JPG, WEBP) o PDF",
+      )
+      return
+    }
+
+    const runUpload = uploadFileRef.current
+    if (!runUpload) {
+      toast.error("La subida de archivos no está configurada")
+      return
+    }
+
+    const previous = files[index]
+    setBusyIndex(index)
+    try {
+      const res = await runUpload(nextFile)
+      if (!res.url) {
+        toast.error(res.message || `No se pudo reemplazar ${nextFile.name}`)
+        return
+      }
+
+      const next = files.map((item, i) =>
+        i === index ? toFileItem(nextFile, res.url, res.provider) : item,
+      )
+      commit(next)
+
+      if (previous?.url && previous.url !== res.url && deleteFileRef.current) {
+        const removed = await deleteFileRef.current(previous.url)
+        if (!removed.ok) {
+          toast.error(
+            removed.message ||
+              "El archivo nuevo se subió, pero el anterior no se borró",
+          )
+        }
+      }
+      toast.success("Archivo actualizado")
+    } catch {
+      toast.error("Error al actualizar el archivo")
+    } finally {
+      setBusyIndex(null)
+    }
+  }
+
+  const handleDragEnter = (event: React.DragEvent) => {
+    event.preventDefault()
+    event.stopPropagation()
+    dragCounter.current += 1
+    setDragActive(true)
+  }
+
+  const handleDragLeave = (event: React.DragEvent) => {
+    event.preventDefault()
+    event.stopPropagation()
+    dragCounter.current -= 1
+    if (dragCounter.current <= 0) {
+      dragCounter.current = 0
+      setDragActive(false)
+    }
+  }
+
+  const handleDragOver = (event: React.DragEvent) => {
+    event.preventDefault()
+    event.stopPropagation()
+  }
+
+  const handleDrop = async (event: React.DragEvent) => {
+    event.preventDefault()
+    event.stopPropagation()
+    dragCounter.current = 0
+    setDragActive(false)
+    if (uploading || busyIndex !== null) return
+    const dropped = event.dataTransfer.files
+    if (!dropped?.length) return
+    await processFiles(dropped)
+  }
+
+  const handleRemove = async (index: number) => {
+    const target = files[index]
+    if (!target) return
+    setBusyIndex(index)
+    try {
+      if (target.url && deleteFileRef.current) {
+        const removed = await deleteFileRef.current(target.url)
+        if (!removed.ok) {
+          toast.error(removed.message || "No se pudo borrar el archivo")
+          return
+        }
+      }
+      commit(files.filter((_, i) => i !== index))
+      toast.success("Archivo eliminado")
+    } catch {
+      toast.error("Error al borrar el archivo")
+    } finally {
+      setBusyIndex(null)
+    }
+  }
+
+  const handleOpenFile = (file: FileItem) => {
+    if (isImageFile(file)) {
+      setPreviewImage(file)
+      return
+    }
+    if (isPdfFile(file)) {
+      downloadFile(file)
+      return
+    }
+    window.open(file.url, "_blank", "noopener,noreferrer")
+  }
+
+  const locked = uploading || busyIndex !== null
+
+  return (
+    <div data-slot="file-manager" className={cn("space-y-3", className)}>
+      {!readOnly ? (
+        <>
+          <input
+            ref={inputRef}
+            id={inputId}
+            type="file"
+            accept={acceptVideos ? ACCEPTED_TYPES_WITH_VIDEO : ACCEPTED_TYPES}
+            className="sr-only"
+            multiple
+            disabled={locked}
+            onChange={(e) => void handleInputChange(e)}
+          />
+          <input
+            ref={replaceInputRef}
+            type="file"
+            accept={acceptVideos ? ACCEPTED_TYPES_WITH_VIDEO : ACCEPTED_TYPES}
+            className="sr-only"
+            disabled={locked}
+            onChange={(e) => void handleReplaceChange(e)}
+          />
+        </>
+      ) : null}
+
+      <div
+        className={cn(
+          "rounded-xl transition-shadow",
+          !readOnly &&
+            dragActive &&
+            "ring-2 ring-primary ring-offset-2 ring-offset-background",
+        )}
+        onDragEnter={readOnly ? undefined : handleDragEnter}
+        onDragLeave={readOnly ? undefined : handleDragLeave}
+        onDragOver={readOnly ? undefined : handleDragOver}
+        onDrop={readOnly ? undefined : (e) => void handleDrop(e)}
+      >
+        {!readOnly && files.length === 0 ? (
+          compact ? (
+            <div className="grid max-w-sm grid-cols-4 gap-2">
+              <AddFileCard
+                disabled={locked}
+                dragActive={dragActive}
+                onBrowse={openFilePicker}
+              />
+            </div>
+          ) : (
+            <AddFileCard
+              fullWidth
+              disabled={locked}
+              dragActive={dragActive}
+              onBrowse={openFilePicker}
+            />
+          )
+        ) : null}
+
+        {files.length > 0 || readOnly ? (
+          <div
+            className={cn(
+              "grid gap-2",
+              compact
+                ? "max-w-lg grid-cols-4 sm:grid-cols-6"
+                : "grid-cols-2 gap-3 sm:grid-cols-3",
+            )}
+          >
+            {!readOnly ? (
+              <AddFileCard
+                disabled={locked}
+                dragActive={dragActive}
+                onBrowse={openFilePicker}
+              />
+            ) : null}
+
+            {files.map((file, index) => {
+              const image = isImageFile(file)
+              const pdf = isPdfFile(file)
+              const video = isVideoFile(file)
+              const displayName = getFileDisplayName(file)
+              const itemBusy = busyIndex === index
+
+              return (
+                <Card
+                  key={`${file.url}-${index}`}
+                  className="group relative cursor-pointer overflow-hidden border-border bg-card py-0 shadow-sm transition-colors hover:border-primary/40"
+                  onClick={() => handleOpenFile(file)}
+                >
+                  {!readOnly ? (
+                    <div className="absolute top-2 right-2 z-10 flex gap-1 opacity-0 transition-opacity group-hover:opacity-100 focus-within:opacity-100">
+                      <button
+                        type="button"
+                        className="flex size-6 items-center justify-center rounded-full bg-background/90 text-foreground shadow-sm"
+                        aria-label={`Reemplazar ${file.name}`}
+                        disabled={locked}
+                        onClick={(e) => {
+                          e.stopPropagation()
+                          if (locked) return
+                          replaceIndexRef.current = index
+                          replaceInputRef.current?.click()
+                        }}
+                      >
+                        {itemBusy ? (
+                          <IconLoader2 className="size-3.5 animate-spin" />
+                        ) : (
+                          <IconRefresh className="size-3.5" />
+                        )}
+                      </button>
+                      <button
+                        type="button"
+                        className="flex size-6 items-center justify-center rounded-full bg-destructive text-destructive-foreground shadow-sm"
+                        aria-label={`Eliminar ${file.name}`}
+                        disabled={locked}
+                        onClick={(e) => {
+                          e.stopPropagation()
+                          void handleRemove(index)
+                        }}
+                      >
+                        {itemBusy ? (
+                          <IconLoader2 className="size-3.5 animate-spin" />
+                        ) : (
+                          <IconX className="size-3.5" />
+                        )}
+                      </button>
+                    </div>
+                  ) : null}
+
+                  <div className="relative aspect-square w-full overflow-hidden bg-muted/40">
+                    {image ? (
+                      <img
+                        src={file.url}
+                        alt={file.name}
+                        className="size-full object-cover transition-transform duration-300 group-hover:scale-[1.03]"
+                      />
+                    ) : pdf ? (
+                      <div className="flex h-full flex-col items-center justify-center gap-1.5 bg-gradient-to-b from-muted/30 to-muted/60">
+                        <IconFileTypePdf
+                          className="size-12 text-red-600 dark:text-red-400"
+                          stroke={1.1}
+                        />
+                        <span className="text-[10px] font-semibold uppercase tracking-wide text-muted-foreground">
+                          PDF
+                        </span>
+                      </div>
+                    ) : video ? (
+                      <div className="flex h-full flex-col items-center justify-center gap-1.5 bg-gradient-to-b from-muted/30 to-muted/60">
+                        <IconVideo
+                          className="size-12 text-primary"
+                          stroke={1.1}
+                        />
+                        <span className="text-[10px] font-semibold uppercase tracking-wide text-muted-foreground">
+                          Video
+                        </span>
+                      </div>
+                    ) : (
+                      <div className="flex h-full flex-col items-center justify-center gap-1 text-muted-foreground">
+                        <IconPhoto className="size-8" stroke={1.25} />
+                        <span className="text-xs uppercase">
+                          {(file.name ?? "").split(".").pop() || "file"}
+                        </span>
+                      </div>
+                    )}
+
+                    <div className="absolute inset-x-0 bottom-0 bg-gradient-to-t from-black/75 via-black/25 to-transparent px-2 pt-8 pb-2">
+                      <p
+                        className="line-clamp-2 text-[11px] leading-tight font-medium text-white"
+                        title={getFileFullName(file)}
+                      >
+                        {displayName}
+                      </p>
+                      <p className="mt-0.5 text-[9px] text-white/75">
+                        {image
+                          ? "Clic para ampliar"
+                          : pdf
+                            ? "Clic para descargar"
+                            : video
+                              ? "Clic para reproducir"
+                              : "Clic para abrir"}
+                      </p>
+                    </div>
+                  </div>
+
+                  <CardContent className="sr-only">
+                    <span>{file.name}</span>
+                  </CardContent>
+                </Card>
+              )
+            })}
+          </div>
+        ) : null}
+      </div>
+
+      <AlertDialog
+        open={!!previewImage}
+        onOpenChange={(open) => !open && setPreviewImage(null)}
+      >
+        <AlertDialogContent className="flex max-h-[min(88vh,720px)] w-[min(92vw,640px)] max-w-[min(92vw,640px)] flex-col gap-0 overflow-hidden border-border p-0">
+          <AlertDialogHeader className="shrink-0 border-b border-border px-4 py-3 text-left">
+            <AlertDialogTitle
+              className="block max-w-full truncate pr-8 text-base"
+              title={previewImage ? getFileFullName(previewImage) : undefined}
+            >
+              {previewImage ? getFileDisplayName(previewImage, 56) : ""}
+            </AlertDialogTitle>
+          </AlertDialogHeader>
+
+          <div className="flex min-h-0 flex-1 items-center justify-center overflow-auto bg-muted/30 px-4 py-3">
+            {previewImage ? (
+              <img
+                src={previewImage.url}
+                alt={getFileDisplayName(previewImage, 80)}
+                className="max-h-[min(55vh,480px)] w-auto max-w-full rounded-lg object-contain"
+              />
+            ) : null}
+          </div>
+
+          <AlertDialogFooter className="shrink-0 border-t border-border px-4 py-3 sm:justify-between">
+            {previewImage ? (
+              <Button
+                type="button"
+                variant="outline"
+                className="gap-2"
+                onClick={() => downloadFile(previewImage)}
+              >
+                <IconDownload className="size-4" />
+                Descargar
+              </Button>
+            ) : (
+              <span />
+            )}
+            <Button type="button" onClick={() => setPreviewImage(null)}>
+              Cerrar
+            </Button>
+          </AlertDialogFooter>
+        </AlertDialogContent>
+      </AlertDialog>
+    </div>
+  )
+}
+
+export { FileManager }
+export default FileManager