@etus/ui 0.1.0

package/src/components/advanced/FilePreview/FilePreview.tsx

@@ -0,0 +1,385 @@
+"use client"
+
+import type { FilePreviewProps, FileTypeCategory } from "./FilePreview.types"
+
+import {
+  ArchiveIcon,
+  AudioLinesIcon,
+  CodeIcon,
+  DownloadIcon,
+  FileIcon,
+  FileSpreadsheetIcon,
+  FileTextIcon,
+  FileVideoIcon,
+  ImageIcon,
+  Loader2Icon,
+  XIcon,
+} from "lucide-react"
+import * as React from "react"
+
+import { cn } from "../../../lib/utils"
+import {
+  filePreviewActionButtonVariants,
+  filePreviewActionsVariants,
+  filePreviewContentVariants,
+  filePreviewFallbackVariants,
+  filePreviewInfoVariants,
+  filePreviewVariants,
+} from "./FilePreview.variants"
+
+// ============================================
+// UTILITIES
+// ============================================
+
+/**
+ * Format file size to human-readable string
+ */
+function formatFileSize(bytes: number): string {
+  if (bytes === 0) return "0 B"
+  const k = 1024
+  const sizes = ["B", "KB", "MB", "GB"]
+  const i = Math.floor(Math.log(bytes) / Math.log(k))
+  return `${String(Number.parseFloat((bytes / Math.pow(k, i)).toFixed(1)))} ${sizes[i] ?? ""}`
+}
+
+/**
+ * Get file type category from MIME type
+ */
+function getFileTypeCategory(mimeType: string): FileTypeCategory {
+  if (mimeType.startsWith("image/")) return "image"
+  if (mimeType.startsWith("video/")) return "video"
+  if (mimeType.startsWith("audio/")) return "audio"
+  if (mimeType === "application/pdf") return "pdf"
+  if (
+    mimeType.includes("spreadsheet") ||
+    mimeType.includes("excel") ||
+    mimeType === "text/csv"
+  ) {
+    return "spreadsheet"
+  }
+  if (
+    mimeType.includes("document") ||
+    mimeType.includes("word") ||
+    mimeType === "text/plain" ||
+    mimeType === "text/rtf"
+  ) {
+    return "document"
+  }
+  if (
+    mimeType.includes("zip") ||
+    mimeType.includes("rar") ||
+    mimeType.includes("tar") ||
+    mimeType.includes("gzip") ||
+    mimeType.includes("7z")
+  ) {
+    return "archive"
+  }
+  if (
+    mimeType.includes("javascript") ||
+    mimeType.includes("json") ||
+    mimeType.includes("xml") ||
+    mimeType.includes("html") ||
+    mimeType.includes("css") ||
+    mimeType === "text/x-python" ||
+    mimeType === "text/x-java"
+  ) {
+    return "code"
+  }
+  return "unknown"
+}
+
+/**
+ * Get icon component for file type
+ */
+function getFileTypeIcon(category: FileTypeCategory): React.ReactNode {
+  switch (category) {
+    case "image":
+      return <ImageIcon />
+    case "video":
+      return <FileVideoIcon />
+    case "audio":
+      return <AudioLinesIcon />
+    case "pdf":
+    case "document":
+      return <FileTextIcon />
+    case "spreadsheet":
+      return <FileSpreadsheetIcon />
+    case "archive":
+      return <ArchiveIcon />
+    case "code":
+      return <CodeIcon />
+    default:
+      return <FileIcon />
+  }
+}
+
+/**
+ * Check if file type is previewable (image or video)
+ */
+function isPreviewable(mimeType: string): boolean {
+  return mimeType.startsWith("image/") || mimeType.startsWith("video/")
+}
+
+// ============================================
+// MAIN COMPONENT
+// ============================================
+
+/**
+ * FilePreview - Component for displaying file previews
+ *
+ * @example
+ * ```tsx
+ * // Basic usage with File object
+ * <FilePreview file={file} onRemove={() => handleRemove()} />
+ *
+ * // With remote file info
+ * <FilePreview
+ *   fileInfo={{
+ *     name: "photo.jpg",
+ *     size: 1024000,
+ *     type: "image/jpeg",
+ *     url: "https://example.com/photo.jpg",
+ *   }}
+ *   variant="card"
+ * />
+ *
+ * // Inline variant with actions
+ * <FilePreview
+ *   file={file}
+ *   variant="inline"
+ *   showActions
+ *   onDownload={() => downloadFile(file)}
+ *   onRemove={() => removeFile(file)}
+ * />
+ * ```
+ */
+function FilePreview({
+  alt,
+  aspectRatio = 1,
+  className,
+  file,
+  fileInfo,
+  onDownload,
+  onRemove,
+  showActions = true,
+  showInfo = true,
+  size = "md",
+  url: urlProp,
+  variant = "thumbnail",
+  ...props
+}: FilePreviewProps) {
+  const [preview, setPreview] = React.useState<null | string>(null)
+  const [state, setState] = React.useState<"error" | "fallback" | "loading" | "ready">(
+    "loading"
+  )
+
+  // Derive file metadata
+  const fileName = file?.name ?? fileInfo?.name ?? "Unknown"
+  const fileSize = file?.size ?? fileInfo?.size ?? 0
+  const fileType = file?.type ?? fileInfo?.type ?? "application/octet-stream"
+  const fileUrl = urlProp ?? fileInfo?.url ?? fileInfo?.thumbnailUrl
+
+  const fileCategory = getFileTypeCategory(fileType)
+  const canPreview = isPreviewable(fileType)
+
+  // Generate preview URL for local files - requires useEffect for object URL lifecycle management
+  /* eslint-disable react-you-might-not-need-an-effect/no-derived-state, @eslint-react/hooks-extra/no-direct-set-state-in-use-effect, react-you-might-not-need-an-effect/no-adjust-state-on-prop-change */
+  React.useEffect(() => {
+    // If we have a URL prop or fileInfo URL, use that
+    if (fileUrl) {
+      setPreview(fileUrl)
+      setState(canPreview ? "ready" : "fallback")
+      return
+    }
+
+    // If we have a local File and it's previewable, generate object URL
+    if (file && canPreview) {
+      setState("loading")
+      const objectUrl = URL.createObjectURL(file)
+      setPreview(objectUrl)
+      setState("ready")
+      return () => {
+        URL.revokeObjectURL(objectUrl)
+      }
+    }
+
+    // Non-previewable file type
+    setState("fallback")
+    setPreview(null)
+    return
+  }, [file, fileUrl, canPreview])
+  /* eslint-enable react-you-might-not-need-an-effect/no-derived-state, @eslint-react/hooks-extra/no-direct-set-state-in-use-effect, react-you-might-not-need-an-effect/no-adjust-state-on-prop-change */
+
+  // Handle image load error
+  const handleImageError = React.useCallback(() => {
+    setState("error")
+  }, [])
+
+  // Handle image load success
+  const handleImageLoad = React.useCallback(() => {
+    setState("ready")
+  }, [])
+
+  // Render preview content
+  const renderContent = () => {
+    const isLoading = state === "loading"
+    const showFallback = state === "fallback" || state === "error"
+
+    if (isLoading) {
+      return (
+        <div
+          className={cn(
+            filePreviewFallbackVariants({ size, variant }),
+            "animate-pulse"
+          )}
+          data-slot="file-preview-loading"
+        >
+          <Loader2Icon className="animate-spin" />
+        </div>
+      )
+    }
+
+    if (showFallback || !preview) {
+      return (
+        <div
+          className={cn(filePreviewFallbackVariants({ size, variant }))}
+          data-slot="file-preview-fallback"
+        >
+          {getFileTypeIcon(fileCategory)}
+        </div>
+      )
+    }
+
+    // Image preview
+    if (fileType.startsWith("image/")) {
+      return (
+        <div
+          style={
+            variant === "full" || variant === "card"
+              ? { aspectRatio }
+              : undefined
+          }
+          className={cn(filePreviewContentVariants({ variant }))}
+          data-slot="file-preview-content"
+        >
+          <img
+            alt={alt ?? fileName}
+            className="size-full object-cover"
+            data-slot="file-preview-image"
+            src={preview}
+            onError={handleImageError}
+            onLoad={handleImageLoad}
+          />
+        </div>
+      )
+    }
+
+    // Video preview
+    if (fileType.startsWith("video/")) {
+      return (
+        <div
+          style={
+            variant === "full" || variant === "card"
+              ? { aspectRatio }
+              : undefined
+          }
+          className={cn(filePreviewContentVariants({ variant }))}
+          data-slot="file-preview-content"
+        >
+          <video
+            muted
+            playsInline
+            className="size-full object-cover"
+            data-slot="file-preview-video"
+            src={preview}
+          />
+        </div>
+      )
+    }
+
+    // Fallback for other types
+    return (
+      <div
+        className={cn(filePreviewFallbackVariants({ size, variant }))}
+        data-slot="file-preview-fallback"
+      >
+        {getFileTypeIcon(fileCategory)}
+      </div>
+    )
+  }
+
+  // Render file info
+  const renderInfo = () => {
+    if (!showInfo) return null
+    if (variant === "thumbnail" || variant === "full") return null
+
+    return (
+      <div
+        className={cn(filePreviewInfoVariants({ variant }))}
+        data-slot="file-preview-info"
+      >
+        <span className="truncate text-sm font-medium">{fileName}</span>
+        <span className="text-xs text-muted-foreground">
+          {formatFileSize(fileSize)}
+        </span>
+      </div>
+    )
+  }
+
+  // Render action buttons
+  const renderActions = () => {
+    if (!showActions) return null
+    if (!onRemove && !onDownload) return null
+
+    const isInline = variant === "inline"
+
+    return (
+      <div
+        className={cn(filePreviewActionsVariants({ variant }))}
+        data-slot="file-preview-actions"
+      >
+        {onDownload && (
+          <button
+            aria-label={`Download ${fileName}`}
+            className={cn(filePreviewActionButtonVariants({ variant }))}
+            type="button"
+            onClick={onDownload}
+          >
+            <DownloadIcon className={isInline ? "size-4" : "size-5"} />
+          </button>
+        )}
+        {onRemove && (
+          <button
+            aria-label={`Remove ${fileName}`}
+            className={cn(filePreviewActionButtonVariants({ variant }))}
+            type="button"
+            onClick={onRemove}
+          >
+            <XIcon className={isInline ? "size-4" : "size-5"} />
+          </button>
+        )}
+      </div>
+    )
+  }
+
+  return (
+    <div
+      aria-label={`Preview of ${fileName}`}
+      className={cn(filePreviewVariants({ size, variant }), className)}
+      data-slot="file-preview"
+      data-state={state}
+      data-type={fileCategory}
+      data-variant={variant}
+      role="img"
+      {...props}
+    >
+      {renderContent()}
+      {renderInfo()}
+      {renderActions()}
+    </div>
+  )
+}
+
+FilePreview.displayName = "FilePreview"
+
+export { FilePreview }

package/src/components/advanced/FilePreview/FilePreview.types.ts

@@ -0,0 +1,90 @@
+// FilePreview/FilePreview.types.ts
+import type { filePreviewVariants } from "./FilePreview.variants"
+import type { VariantProps } from "class-variance-authority"
+import type { ComponentProps } from "react"
+
+// ============================================
+// DATA TYPES
+// ============================================
+
+/**
+ * File information for remote/uploaded files
+ */
+export interface FileInfo {
+  /** File name */
+  name: string
+  /** File size in bytes */
+  size: number
+  /** Thumbnail URL for preview */
+  thumbnailUrl?: string
+  /** MIME type of the file */
+  type: string
+  /** URL of the file (if already uploaded) */
+  url?: string
+}
+
+/**
+ * Preview state for the component
+ */
+export type FilePreviewState = "error" | "fallback" | "loading" | "ready"
+
+// ============================================
+// COMPONENT PROPS
+// ============================================
+
+/**
+ * Props for FilePreview component
+ */
+export interface FilePreviewProps
+  extends Omit<ComponentProps<"div">, "children">,
+    VariantProps<typeof filePreviewVariants> {
+  /** Alt text for image preview */
+  alt?: string
+  /** Aspect ratio for the preview */
+  aspectRatio?: number
+  /** Additional CSS classes */
+  className?: string
+  /** Local File object (before upload) */
+  file?: File
+  /** File information (for remote/uploaded files) */
+  fileInfo?: FileInfo
+  /** Callback when download button is clicked */
+  onDownload?: () => void
+  /** Callback when remove button is clicked */
+  onRemove?: () => void
+  /** Show action buttons (remove/download) */
+  showActions?: boolean
+  /** Show file name and size */
+  showInfo?: boolean
+  /** Direct URL to the file */
+  url?: string
+}
+
+// ============================================
+// UTILITY TYPES
+// ============================================
+
+/**
+ * Supported file type categories
+ */
+export type FileTypeCategory =
+  | "archive"
+  | "audio"
+  | "code"
+  | "document"
+  | "image"
+  | "pdf"
+  | "spreadsheet"
+  | "unknown"
+  | "video"
+
+/**
+ * Data slot names used by FilePreview components
+ */
+export type FilePreviewDataSlot =
+  | "file-preview"
+  | "file-preview-actions"
+  | "file-preview-content"
+  | "file-preview-fallback"
+  | "file-preview-image"
+  | "file-preview-info"

package/src/components/advanced/FilePreview/FilePreview.variants.ts

@@ -0,0 +1,234 @@
+// FilePreview/FilePreview.variants.ts
+/* eslint-disable sonarjs/no-duplicate-string -- CSS class names are intentionally repeated for CVA readability */
+import { cva, type VariantProps } from "class-variance-authority"
+
+/**
+ * FilePreview root container variants
+ */
+export const filePreviewVariants = cva(
+  // Base styles
+  [
+    "relative",
+    "overflow-hidden",
+    "bg-muted",
+    "border border-border",
+    "rounded-md",
+  ],
+  {
+    variants: {
+      variant: {
+        thumbnail: ["inline-flex", "items-center", "justify-center"],
+        card: ["flex", "flex-col"],
+        inline: ["flex", "flex-row", "items-center", "gap-3", "p-2"],
+        full: ["flex", "items-center", "justify-center"],
+      },
+      size: {
+        sm: "",
+        md: "",
+        lg: "",
+        xl: "",
+      },
+    },
+    compoundVariants: [
+      // Thumbnail sizes
+      { variant: "thumbnail", size: "sm", class: "size-16" },
+      { variant: "thumbnail", size: "md", class: "size-24" },
+      { variant: "thumbnail", size: "lg", class: "size-32" },
+      { variant: "thumbnail", size: "xl", class: "size-48" },
+      // Card sizes
+      { variant: "card", size: "sm", class: "w-32" },
+      { variant: "card", size: "md", class: "w-40" },
+      { variant: "card", size: "lg", class: "w-48" },
+      { variant: "card", size: "xl", class: "w-64" },
+      // Inline heights
+      { variant: "inline", size: "sm", class: "h-12" },
+      { variant: "inline", size: "md", class: "h-16" },
+      { variant: "inline", size: "lg", class: "h-20" },
+      { variant: "inline", size: "xl", class: "h-24" },
+      // Full sizes
+      { variant: "full", size: "sm", class: "h-48" },
+      { variant: "full", size: "md", class: "h-64" },
+      { variant: "full", size: "lg", class: "h-80" },
+      { variant: "full", size: "xl", class: "h-96" },
+    ],
+    defaultVariants: {
+      variant: "thumbnail",
+      size: "md",
+    },
+  }
+)
+
+/**
+ * FilePreview content area variants (for image/video preview)
+ */
+export const filePreviewContentVariants = cva(
+  // Base styles
+  ["flex", "items-center", "justify-center", "overflow-hidden"],
+  {
+    variants: {
+      variant: {
+        thumbnail: ["size-full"],
+        card: ["aspect-square", "w-full"],
+        inline: ["size-10", "shrink-0", "rounded"],
+        full: ["size-full"],
+      },
+    },
+    defaultVariants: {
+      variant: "thumbnail",
+    },
+  }
+)
+
+/**
+ * FilePreview fallback icon container variants
+ */
+export const filePreviewFallbackVariants = cva(
+  // Base styles
+  [
+    "flex",
+    "items-center",
+    "justify-center",
+    "bg-muted",
+    "text-muted-foreground",
+  ],
+  {
+    variants: {
+      variant: {
+        thumbnail: ["size-full"],
+        card: ["aspect-square", "w-full"],
+        inline: ["size-10", "shrink-0", "rounded"],
+        full: ["size-full"],
+      },
+      size: {
+        sm: "",
+        md: "",
+        lg: "",
+        xl: "",
+      },
+    },
+    compoundVariants: [
+      // Icon sizes by component size
+      { size: "sm", class: "[&>svg]:size-6" },
+      { size: "md", class: "[&>svg]:size-8" },
+      { size: "lg", class: "[&>svg]:size-10" },
+      { size: "xl", class: "[&>svg]:size-12" },
+    ],
+    defaultVariants: {
+      variant: "thumbnail",
+      size: "md",
+    },
+  }
+)
+
+/**
+ * FilePreview info section variants
+ */
+export const filePreviewInfoVariants = cva(
+  // Base styles
+  ["flex", "flex-col", "gap-0.5"],
+  {
+    variants: {
+      variant: {
+        thumbnail: ["hidden"],
+        card: ["p-2", "border-t", "border-border"],
+        inline: ["min-w-0", "flex-1"],
+        full: ["hidden"],
+      },
+    },
+    defaultVariants: {
+      variant: "thumbnail",
+    },
+  }
+)
+
+/**
+ * FilePreview actions overlay variants
+ */
+export const filePreviewActionsVariants = cva(
+  // Base styles
+  [
+    "absolute",
+    "inset-0",
+    "flex",
+    "items-center",
+    "justify-center",
+    "gap-1",
+    "bg-black/50",
+    "opacity-0",
+    "transition-opacity",
+    "hover:opacity-100",
+    "focus-within:opacity-100",
+  ],
+  {
+    variants: {
+      variant: {
+        thumbnail: [],
+        card: ["rounded-t-md"],
+        inline: [
+          "relative",
+          "inset-auto",
+          "bg-transparent",
+          "opacity-100",
+          "shrink-0",
+        ],
+        full: [],
+      },
+    },
+    defaultVariants: {
+      variant: "thumbnail",
+    },
+  }
+)
+
+/**
+ * FilePreview action button variants
+ */
+export const filePreviewActionButtonVariants = cva(
+  // Base styles
+  [
+    "inline-flex",
+    "items-center",
+    "justify-center",
+    "rounded-sm",
+    "p-1.5",
+    "transition-colors",
+    "focus-visible:outline-none",
+    "focus-visible:ring-2",
+    "focus-visible:ring-ring",
+  ],
+  {
+    variants: {
+      variant: {
+        thumbnail: ["text-white", "hover:bg-white/20"],
+        card: ["text-white", "hover:bg-white/20"],
+        inline: [
+          "text-muted-foreground",
+          "hover:text-foreground",
+          "hover:bg-muted",
+        ],
+        full: ["text-white", "hover:bg-white/20"],
+      },
+    },
+    defaultVariants: {
+      variant: "thumbnail",
+    },
+  }
+)
+
+// Export variant types
+export type FilePreviewVariantProps = VariantProps<typeof filePreviewVariants>
+export type FilePreviewContentVariantProps = VariantProps<
+  typeof filePreviewContentVariants
+>
+export type FilePreviewFallbackVariantProps = VariantProps<
+  typeof filePreviewFallbackVariants
+>
+export type FilePreviewInfoVariantProps = VariantProps<
+  typeof filePreviewInfoVariants
+>
+export type FilePreviewActionsVariantProps = VariantProps<
+  typeof filePreviewActionsVariants
+>
+export type FilePreviewActionButtonVariantProps = VariantProps<
+  typeof filePreviewActionButtonVariants
+>