@wakastellar/ui 2.4.0 → 3.1.0

package/src/blocks/file-scan-uploader/FileScanUploader.stories.tsx

@@ -0,0 +1,257 @@
+import React from "react"
+import type { Meta, StoryObj } from "@storybook/react"
+import { FileScanUploader, type ScannedFile } from "./index"
+
+const meta = {
+  title: "Blocks/Antivirus/FileScanUploader",
+  component: FileScanUploader,
+  parameters: {
+    layout: "centered",
+  },
+  tags: ["autodocs"],
+  args: {
+    onFilesAdded: (files: File[]) => console.log("Files added:", files),
+    onScanStart: (fileId: string) => console.log("Scan start:", fileId),
+    onScanComplete: (fileId: string, result: string, threatName?: string) => console.log("Scan complete:", fileId, result, threatName),
+    onFileRemove: (fileId: string) => console.log("File remove:", fileId),
+    onScanAll: () => console.log("Scan all"),
+  },
+  decorators: [
+    (Story: React.ComponentType) => (
+      <div className="w-[800px]">
+        <Story />
+      </div>
+    ),
+  ],
+} satisfies Meta<typeof FileScanUploader>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Empty: Story = {
+  args: {
+    files: [],
+  },
+}
+
+export const WithFiles: Story = {
+  args: {
+    files: [
+      {
+        id: "1",
+        file: { name: "document.pdf", size: 2500000, type: "application/pdf" },
+        status: "pending",
+        progress: 0,
+      },
+      {
+        id: "2",
+        file: { name: "image.jpg", size: 1200000, type: "image/jpeg" },
+        status: "scanning",
+        progress: 45,
+      },
+      {
+        id: "3",
+        file: { name: "report.xlsx", size: 850000, type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet" },
+        status: "clean",
+        progress: 100,
+        scanDuration: 1247,
+        scannedAt: new Date(),
+      },
+      {
+        id: "4",
+        file: { name: "suspicious.exe", size: 450000, type: "application/x-msdownload" },
+        status: "infected",
+        progress: 100,
+        threatName: "Trojan.GenericKD.46542395",
+        scanDuration: 892,
+        scannedAt: new Date(),
+      },
+    ],
+  },
+}
+
+export const AllClean: Story = {
+  args: {
+    files: [
+      {
+        id: "1",
+        file: { name: "document1.pdf", size: 2500000, type: "application/pdf" },
+        status: "clean",
+        progress: 100,
+        scanDuration: 1150,
+        scannedAt: new Date(),
+      },
+      {
+        id: "2",
+        file: { name: "document2.pdf", size: 1800000, type: "application/pdf" },
+        status: "clean",
+        progress: 100,
+        scanDuration: 980,
+        scannedAt: new Date(),
+      },
+      {
+        id: "3",
+        file: { name: "image.png", size: 950000, type: "image/png" },
+        status: "clean",
+        progress: 100,
+        scanDuration: 750,
+        scannedAt: new Date(),
+      },
+    ],
+  },
+}
+
+export const MultipleInfected: Story = {
+  args: {
+    files: [
+      {
+        id: "1",
+        file: { name: "malware1.exe", size: 650000, type: "application/x-msdownload" },
+        status: "infected",
+        progress: 100,
+        threatName: "Trojan.GenericKD.46542395",
+        scanDuration: 1200,
+        scannedAt: new Date(),
+      },
+      {
+        id: "2",
+        file: { name: "virus.zip", size: 3200000, type: "application/zip" },
+        status: "infected",
+        progress: 100,
+        threatName: "Win32.Worm.Generic",
+        scanDuration: 2100,
+        scannedAt: new Date(),
+      },
+      {
+        id: "3",
+        file: { name: "clean-document.pdf", size: 1200000, type: "application/pdf" },
+        status: "clean",
+        progress: 100,
+        scanDuration: 890,
+        scannedAt: new Date(),
+      },
+    ],
+  },
+}
+
+export const Scanning: Story = {
+  args: {
+    files: [
+      {
+        id: "1",
+        file: { name: "large-file.zip", size: 95000000, type: "application/zip" },
+        status: "scanning",
+        progress: 23,
+      },
+      {
+        id: "2",
+        file: { name: "video.mp4", size: 45000000, type: "video/mp4" },
+        status: "scanning",
+        progress: 67,
+      },
+      {
+        id: "3",
+        file: { name: "presentation.pptx", size: 8500000, type: "application/vnd.openxmlformats-officedocument.presentationml.presentation" },
+        status: "scanning",
+        progress: 89,
+      },
+    ],
+  },
+}
+
+export const WithErrors: Story = {
+  args: {
+    files: [
+      {
+        id: "1",
+        file: { name: "corrupted-file.dat", size: 2500000, type: "application/octet-stream" },
+        status: "error",
+        progress: 0,
+      },
+      {
+        id: "2",
+        file: { name: "timeout-file.bin", size: 150000000, type: "application/octet-stream" },
+        status: "error",
+        progress: 45,
+      },
+      {
+        id: "3",
+        file: { name: "valid-file.pdf", size: 1200000, type: "application/pdf" },
+        status: "clean",
+        progress: 100,
+        scanDuration: 1100,
+        scannedAt: new Date(),
+      },
+    ],
+  },
+}
+
+export const MixedStatuses: Story = {
+  args: {
+    files: [
+      {
+        id: "1",
+        file: { name: "waiting.pdf", size: 1500000, type: "application/pdf" },
+        status: "pending",
+        progress: 0,
+      },
+      {
+        id: "2",
+        file: { name: "processing.docx", size: 2200000, type: "application/vnd.openxmlformats-officedocument.wordprocessingml.document" },
+        status: "scanning",
+        progress: 52,
+      },
+      {
+        id: "3",
+        file: { name: "safe-image.jpg", size: 1800000, type: "image/jpeg" },
+        status: "clean",
+        progress: 100,
+        scanDuration: 980,
+        scannedAt: new Date(),
+      },
+      {
+        id: "4",
+        file: { name: "dangerous.scr", size: 350000, type: "application/x-msdownload" },
+        status: "infected",
+        progress: 100,
+        threatName: "Backdoor.Win32.Agent",
+        scanDuration: 750,
+        scannedAt: new Date(),
+      },
+      {
+        id: "5",
+        file: { name: "failed-scan.bin", size: 5000000, type: "application/octet-stream" },
+        status: "error",
+        progress: 15,
+      },
+    ],
+  },
+}
+
+export const LargeFiles: Story = {
+  args: {
+    files: [
+      {
+        id: "1",
+        file: { name: "large-video.mkv", size: 98500000, type: "video/x-matroska" },
+        status: "scanning",
+        progress: 12,
+      },
+      {
+        id: "2",
+        file: { name: "database-backup.sql", size: 87300000, type: "application/sql" },
+        status: "pending",
+        progress: 0,
+      },
+    ],
+    maxFileSize: 100 * 1024 * 1024, // 100MB
+  },
+}
+
+export const CustomMaxSize: Story = {
+  args: {
+    files: [],
+    maxFileSize: 50 * 1024 * 1024, // 50MB
+    acceptedTypes: [".pdf", ".docx", ".xlsx", ".jpg", ".png"],
+  },
+}

package/src/blocks/file-scan-uploader/index.tsx

@@ -0,0 +1,311 @@
+"use client"
+
+import { useState, useCallback, useRef } from "react"
+import { Upload, X, Shield, ShieldAlert, CheckCircle2, AlertCircle, Scan } from "lucide-react"
+import { Button } from "../../components/button"
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "../../components/card"
+import { Badge } from "../../components/badge"
+import { Progress } from "../../components/progress"
+import { cn } from "../../utils/cn"
+
+export type FileScanStatus = "pending" | "scanning" | "clean" | "infected" | "error"
+
+export interface ScannedFile {
+  id: string
+  file: { name: string; size: number; type: string }
+  status: FileScanStatus
+  progress: number
+  threatName?: string
+  scanDuration?: number
+  scannedAt?: Date
+}
+
+export interface FileScanUploaderProps {
+  files?: ScannedFile[]
+  maxFileSize?: number // bytes, default 100MB
+  acceptedTypes?: string[] // e.g. ["*/*"]
+  maxConcurrentScans?: number
+  onFilesAdded?: (files: File[]) => void
+  onScanStart?: (fileId: string) => void
+  onScanComplete?: (fileId: string, result: FileScanStatus, threatName?: string) => void
+  onFileRemove?: (fileId: string) => void
+  onScanAll?: () => void
+  className?: string
+}
+
+const formatFileSize = (bytes: number): string => {
+  if (bytes === 0) return "0 Bytes"
+  const k = 1024
+  const sizes = ["Bytes", "KB", "MB", "GB"]
+  const i = Math.floor(Math.log(bytes) / Math.log(k))
+  return Math.round((bytes / Math.pow(k, i)) * 100) / 100 + " " + sizes[i]
+}
+
+const getStatusIcon = (status: FileScanStatus) => {
+  switch (status) {
+    case "pending":
+      return <Shield className="h-4 w-4 text-muted-foreground" />
+    case "scanning":
+      return <Scan className="h-4 w-4 text-blue-500 animate-pulse" />
+    case "clean":
+      return <CheckCircle2 className="h-4 w-4 text-green-500" />
+    case "infected":
+      return <ShieldAlert className="h-4 w-4 text-red-500" />
+    case "error":
+      return <AlertCircle className="h-4 w-4 text-orange-500" />
+  }
+}
+
+const getStatusBadge = (status: FileScanStatus) => {
+  switch (status) {
+    case "pending":
+      return <Badge variant="outline">En attente</Badge>
+    case "scanning":
+      return <Badge variant="outline" className="border-blue-500 text-blue-500">Scan en cours</Badge>
+    case "clean":
+      return <Badge variant="outline" className="border-green-500 text-green-500">Sain</Badge>
+    case "infected":
+      return <Badge variant="destructive">Infecté</Badge>
+    case "error":
+      return <Badge variant="outline" className="border-orange-500 text-orange-500">Erreur</Badge>
+  }
+}
+
+export function FileScanUploader({
+  files = [],
+  maxFileSize = 100 * 1024 * 1024, // 100MB default
+  acceptedTypes = ["*/*"],
+  maxConcurrentScans = 3,
+  onFilesAdded,
+  onScanStart,
+  onScanComplete,
+  onFileRemove,
+  onScanAll,
+  className,
+}: FileScanUploaderProps) {
+  const [isDragging, setIsDragging] = useState(false)
+  const fileInputRef = useRef<HTMLInputElement>(null)
+
+  const handleDragOver = useCallback((e: React.DragEvent) => {
+    e.preventDefault()
+    e.stopPropagation()
+    setIsDragging(true)
+  }, [])
+
+  const handleDragLeave = useCallback((e: React.DragEvent) => {
+    e.preventDefault()
+    e.stopPropagation()
+    setIsDragging(false)
+  }, [])
+
+  const handleDrop = useCallback(
+    (e: React.DragEvent) => {
+      e.preventDefault()
+      e.stopPropagation()
+      setIsDragging(false)
+
+      const droppedFiles = Array.from(e.dataTransfer.files)
+      if (onFilesAdded) {
+        onFilesAdded(droppedFiles)
+      }
+    },
+    [onFilesAdded]
+  )
+
+  const handleFileSelect = useCallback(
+    (e: React.ChangeEvent<HTMLInputElement>) => {
+      const selectedFiles = e.target.files ? Array.from(e.target.files) : []
+      if (onFilesAdded) {
+        onFilesAdded(selectedFiles)
+      }
+    },
+    [onFilesAdded]
+  )
+
+  const handleClick = () => {
+    fileInputRef.current?.click()
+  }
+
+  const pendingCount = files.filter((f) => f.status === "pending").length
+  const scanningCount = files.filter((f) => f.status === "scanning").length
+  const cleanCount = files.filter((f) => f.status === "clean").length
+  const infectedCount = files.filter((f) => f.status === "infected").length
+  const errorCount = files.filter((f) => f.status === "error").length
+
+  return (
+    <Card className={cn("w-full", className)}>
+      <CardHeader>
+        <div className="flex items-center justify-between">
+          <div>
+            <CardTitle>Scan Antivirus (ClamAV)</CardTitle>
+            <CardDescription>
+              Uploadez vos fichiers pour analyse de sécurité
+            </CardDescription>
+          </div>
+          {files.length > 0 && (
+            <div className="flex items-center gap-2">
+              <span className="text-sm text-muted-foreground">
+                {files.length} fichier{files.length > 1 ? "s" : ""}
+              </span>
+              {pendingCount > 0 && (
+                <Button
+                  size="sm"
+                  variant="outline"
+                  onClick={onScanAll}
+                  className="gap-2"
+                >
+                  <Scan className="h-4 w-4" />
+                  Scanner tout
+                </Button>
+              )}
+              <Button
+                size="sm"
+                variant="ghost"
+                onClick={() => files.forEach((f) => onFileRemove?.(f.id))}
+              >
+                Tout supprimer
+              </Button>
+            </div>
+          )}
+        </div>
+      </CardHeader>
+      <CardContent className="space-y-4">
+        {/* Drop zone */}
+        <div
+          onDragOver={handleDragOver}
+          onDragLeave={handleDragLeave}
+          onDrop={handleDrop}
+          onClick={handleClick}
+          className={cn(
+            "relative flex min-h-[200px] cursor-pointer flex-col items-center justify-center gap-2 rounded-lg border-2 border-dashed p-8 transition-colors",
+            isDragging
+              ? "border-primary bg-primary/5"
+              : "border-muted-foreground/25 hover:border-primary/50 hover:bg-muted/50"
+          )}
+        >
+          <Upload className="h-10 w-10 text-muted-foreground" />
+          <div className="text-center">
+            <p className="text-sm font-medium">
+              Glissez vos fichiers ici ou cliquez pour parcourir
+            </p>
+            <p className="mt-1 text-xs text-muted-foreground">
+              Taille max: {formatFileSize(maxFileSize)}
+            </p>
+          </div>
+          <input
+            ref={fileInputRef}
+            type="file"
+            multiple
+            accept={acceptedTypes.join(",")}
+            onChange={handleFileSelect}
+            className="hidden"
+          />
+        </div>
+
+        {/* Stats badges */}
+        {files.length > 0 && (
+          <div className="flex flex-wrap gap-2">
+            {cleanCount > 0 && (
+              <Badge variant="outline" className="border-green-500 text-green-500">
+                <CheckCircle2 className="mr-1 h-3 w-3" />
+                {cleanCount} sain{cleanCount > 1 ? "s" : ""}
+              </Badge>
+            )}
+            {infectedCount > 0 && (
+              <Badge variant="destructive">
+                <ShieldAlert className="mr-1 h-3 w-3" />
+                {infectedCount} infecté{infectedCount > 1 ? "s" : ""}
+              </Badge>
+            )}
+            {scanningCount > 0 && (
+              <Badge variant="outline" className="border-blue-500 text-blue-500">
+                <Scan className="mr-1 h-3 w-3" />
+                {scanningCount} en cours
+              </Badge>
+            )}
+            {pendingCount > 0 && (
+              <Badge variant="outline">
+                <Shield className="mr-1 h-3 w-3" />
+                {pendingCount} en attente
+              </Badge>
+            )}
+            {errorCount > 0 && (
+              <Badge variant="outline" className="border-orange-500 text-orange-500">
+                <AlertCircle className="mr-1 h-3 w-3" />
+                {errorCount} erreur{errorCount > 1 ? "s" : ""}
+              </Badge>
+            )}
+          </div>
+        )}
+
+        {/* Files list */}
+        {files.length > 0 && (
+          <div className="space-y-2">
+            {files.map((scannedFile) => (
+              <div
+                key={scannedFile.id}
+                className={cn(
+                  "rounded-lg border p-4 transition-colors",
+                  scannedFile.status === "infected" && "border-red-500/50 bg-red-50/50 dark:bg-red-950/20",
+                  scannedFile.status === "clean" && "border-green-500/50 bg-green-50/50 dark:bg-green-950/20"
+                )}
+              >
+                <div className="flex items-start justify-between gap-4">
+                  <div className="flex flex-1 items-start gap-3">
+                    <div className="mt-1">{getStatusIcon(scannedFile.status)}</div>
+                    <div className="flex-1 space-y-1">
+                      <div className="flex items-center gap-2">
+                        <span className="font-medium text-sm">{scannedFile.file.name}</span>
+                        {getStatusBadge(scannedFile.status)}
+                      </div>
+                      <p className="text-xs text-muted-foreground">
+                        {formatFileSize(scannedFile.file.size)}
+                        {scannedFile.scanDuration && (
+                          <> • Scanné en {scannedFile.scanDuration}ms</>
+                        )}
+                      </p>
+                      {scannedFile.status === "scanning" && (
+                        <div className="mt-2">
+                          <Progress value={scannedFile.progress} className="h-1.5" />
+                          <p className="mt-1 text-xs text-muted-foreground">
+                            Scan en cours... {scannedFile.progress}%
+                          </p>
+                        </div>
+                      )}
+                      {scannedFile.status === "infected" && scannedFile.threatName && (
+                        <div className="mt-2 flex items-center gap-2 rounded-md bg-red-100 px-2 py-1 dark:bg-red-950/50">
+                          <ShieldAlert className="h-3 w-3 text-red-600 dark:text-red-400" />
+                          <span className="text-xs font-medium text-red-600 dark:text-red-400">
+                            Menace détectée: {scannedFile.threatName}
+                          </span>
+                        </div>
+                      )}
+                      {scannedFile.status === "clean" && scannedFile.scannedAt && (
+                        <div className="mt-2 flex items-center gap-2">
+                          <CheckCircle2 className="h-3 w-3 text-green-600 dark:text-green-400" />
+                          <span className="text-xs text-green-600 dark:text-green-400">
+                            Fichier sain, aucune menace détectée
+                          </span>
+                        </div>
+                      )}
+                    </div>
+                  </div>
+                  <Button
+                    size="sm"
+                    variant="ghost"
+                    onClick={() => onFileRemove?.(scannedFile.id)}
+                    className="h-8 w-8 p-0"
+                  >
+                    <X className="h-4 w-4" />
+                  </Button>
+                </div>
+              </div>
+            ))}
+          </div>
+        )}
+      </CardContent>
+    </Card>
+  )
+}
+
+export default FileScanUploader