@wakastellar/ui 2.4.0 → 3.1.0

package/src/blocks/threat-alert-banner/index.tsx

@@ -0,0 +1,320 @@
+"use client"
+
+import { useState } from "react"
+import { Badge } from "../../components/badge"
+import { Button } from "../../components/button"
+import { Card } from "../../components/card"
+import { ShieldAlert, AlertTriangle, AlertCircle, Info, X, ChevronDown, ChevronUp, Eye, Archive } from "lucide-react"
+import { cn } from "../../utils/cn"
+
+export type AlertSeverity = "critical" | "high" | "medium" | "low"
+export type ThreatAction = "quarantined" | "deleted" | "blocked" | "allowed"
+
+export interface ThreatAlert {
+  id: string
+  threatName: string
+  filename: string
+  filePath: string
+  severity: AlertSeverity
+  action: ThreatAction
+  detectedAt: Date
+  userId?: string
+  engineVersion: string
+  dismissed: boolean
+}
+
+export interface ThreatAlertBannerProps {
+  alerts?: ThreatAlert[]
+  maxVisible?: number
+  autoHideAfter?: number // ms, 0 = never
+  onDismiss?: (alertId: string) => void
+  onDismissAll?: () => void
+  onViewDetails?: (alertId: string) => void
+  onViewQuarantine?: () => void
+  className?: string
+}
+
+const severityConfig = {
+  critical: {
+    icon: ShieldAlert,
+    bgColor: "bg-red-950/50 border-red-800",
+    iconColor: "text-red-400",
+    badgeVariant: "destructive" as const,
+  },
+  high: {
+    icon: AlertTriangle,
+    bgColor: "bg-orange-950/50 border-orange-800",
+    iconColor: "text-orange-400",
+    badgeVariant: "destructive" as const,
+  },
+  medium: {
+    icon: AlertCircle,
+    bgColor: "bg-yellow-950/50 border-yellow-800",
+    iconColor: "text-yellow-400",
+    badgeVariant: "secondary" as const,
+  },
+  low: {
+    icon: Info,
+    bgColor: "bg-blue-950/50 border-blue-800",
+    iconColor: "text-blue-400",
+    badgeVariant: "default" as const,
+  },
+}
+
+const actionLabels: Record<ThreatAction, string> = {
+  quarantined: "Mis en quarantaine",
+  deleted: "Supprimé",
+  blocked: "Bloqué",
+  allowed: "Autorisé",
+}
+
+const actionColors: Record<ThreatAction, string> = {
+  quarantined: "text-orange-400",
+  deleted: "text-red-400",
+  blocked: "text-red-400",
+  allowed: "text-green-400",
+}
+
+export const ThreatAlertBanner = ({
+  alerts = [],
+  maxVisible = 3,
+  autoHideAfter = 0,
+  onDismiss,
+  onDismissAll,
+  onViewDetails,
+  onViewQuarantine,
+  className,
+}: ThreatAlertBannerProps) => {
+  const [expandedAlertIds, setExpandedAlertIds] = useState<Set<string>>(new Set())
+
+  const activeAlerts = alerts.filter((alert) => !alert.dismissed)
+
+  if (activeAlerts.length === 0) {
+    return null
+  }
+
+  const toggleExpanded = (alertId: string) => {
+    setExpandedAlertIds((prev) => {
+      const next = new Set(prev)
+      if (next.has(alertId)) {
+        next.delete(alertId)
+      } else {
+        next.add(alertId)
+      }
+      return next
+    })
+  }
+
+  const visibleAlerts = activeAlerts.slice(0, maxVisible)
+  const remainingCount = activeAlerts.length - maxVisible
+
+  const formatTimestamp = (date: Date) => {
+    const now = new Date()
+    const diff = now.getTime() - date.getTime()
+    const minutes = Math.floor(diff / 60000)
+    const hours = Math.floor(diff / 3600000)
+
+    if (minutes < 1) return "À l'instant"
+    if (minutes < 60) return `Il y a ${minutes}m`
+    if (hours < 24) return `Il y a ${hours}h`
+    return date.toLocaleDateString("fr-FR", { month: "short", day: "numeric", hour: "2-digit", minute: "2-digit" })
+  }
+
+  return (
+    <div className={cn("space-y-2", className)}>
+      {activeAlerts.length > 1 && (
+        <div className="flex items-center justify-between bg-red-950/30 border border-red-800/50 rounded-lg px-4 py-2">
+          <div className="flex items-center gap-2">
+            <ShieldAlert className="h-4 w-4 text-red-400" />
+            <span className="text-sm font-medium text-red-200">
+              {activeAlerts.length} alerte{activeAlerts.length > 1 ? "s" : ""} active{activeAlerts.length > 1 ? "s" : ""}
+            </span>
+          </div>
+          {onDismissAll && (
+            <Button variant="ghost" size="sm" onClick={onDismissAll} className="text-red-300 hover:text-red-200">
+              Tout ignorer
+            </Button>
+          )}
+        </div>
+      )}
+
+      {visibleAlerts.map((alert) => {
+        const config = severityConfig[alert.severity]
+        const Icon = config.icon
+        const isExpanded = expandedAlertIds.has(alert.id)
+
+        return (
+          <Card
+            key={alert.id}
+            className={cn(
+              "border-2 backdrop-blur-sm transition-all duration-200",
+              config.bgColor,
+              isExpanded && "shadow-lg"
+            )}
+          >
+            <div className="p-4">
+              <div className="flex items-start gap-3">
+                <div className={cn("mt-0.5 flex-shrink-0", config.iconColor)}>
+                  <Icon className="h-5 w-5" />
+                </div>
+
+                <div className="flex-1 min-w-0">
+                  <div className="flex items-start justify-between gap-3">
+                    <div className="flex-1 min-w-0">
+                      <div className="flex items-center gap-2 flex-wrap">
+                        <h4 className="text-sm font-semibold text-white truncate">{alert.threatName}</h4>
+                        <Badge variant={config.badgeVariant} className="text-xs">
+                          {alert.severity.toUpperCase()}
+                        </Badge>
+                      </div>
+
+                      <div className="mt-1 flex items-center gap-2 text-xs text-gray-400">
+                        <span className="truncate" title={alert.filePath}>
+                          {alert.filename}
+                        </span>
+                        <span>•</span>
+                        <span className={actionColors[alert.action]}>{actionLabels[alert.action]}</span>
+                        <span>•</span>
+                        <span>{formatTimestamp(alert.detectedAt)}</span>
+                      </div>
+                    </div>
+
+                    <Button
+                      variant="ghost"
+                      size="sm"
+                      onClick={() => onDismiss?.(alert.id)}
+                      className="flex-shrink-0 h-8 w-8 p-0 text-gray-400 hover:text-white"
+                    >
+                      <X className="h-4 w-4" />
+                    </Button>
+                  </div>
+
+                  {isExpanded && (
+                    <div className="mt-3 pt-3 border-t border-white/10 space-y-2 text-xs text-gray-300">
+                      <div className="grid grid-cols-2 gap-2">
+                        <div>
+                          <span className="text-gray-500">Chemin complet:</span>
+                          <p className="font-mono break-all">{alert.filePath}</p>
+                        </div>
+                        <div>
+                          <span className="text-gray-500">Moteur antivirus:</span>
+                          <p className="font-mono">{alert.engineVersion}</p>
+                        </div>
+                        {alert.userId && (
+                          <div>
+                            <span className="text-gray-500">Utilisateur:</span>
+                            <p className="font-mono">{alert.userId}</p>
+                          </div>
+                        )}
+                        <div>
+                          <span className="text-gray-500">Détecté le:</span>
+                          <p>
+                            {alert.detectedAt.toLocaleString("fr-FR", {
+                              dateStyle: "medium",
+                              timeStyle: "short",
+                            })}
+                          </p>
+                        </div>
+                      </div>
+                    </div>
+                  )}
+
+                  <div className="mt-3 flex items-center gap-2">
+                    <Button
+                      variant="outline"
+                      size="sm"
+                      onClick={() => toggleExpanded(alert.id)}
+                      className="text-xs"
+                    >
+                      {isExpanded ? (
+                        <>
+                          <ChevronUp className="h-3 w-3 mr-1" />
+                          Masquer
+                        </>
+                      ) : (
+                        <>
+                          <ChevronDown className="h-3 w-3 mr-1" />
+                          Détails
+                        </>
+                      )}
+                    </Button>
+
+                    {onViewDetails && (
+                      <Button
+                        variant="outline"
+                        size="sm"
+                        onClick={() => onViewDetails(alert.id)}
+                        className="text-xs"
+                      >
+                        <Eye className="h-3 w-3 mr-1" />
+                        Analyse complète
+                      </Button>
+                    )}
+
+                    {alert.action === "quarantined" && onViewQuarantine && (
+                      <Button
+                        variant="outline"
+                        size="sm"
+                        onClick={onViewQuarantine}
+                        className="text-xs"
+                      >
+                        <Archive className="h-3 w-3 mr-1" />
+                        Quarantaine
+                      </Button>
+                    )}
+                  </div>
+                </div>
+              </div>
+            </div>
+          </Card>
+        )
+      })}
+
+      {remainingCount > 0 && (
+        <div className="text-center">
+          <Button variant="ghost" size="sm" className="text-xs text-gray-400 hover:text-white">
+            + {remainingCount} autre{remainingCount > 1 ? "s" : ""} alerte{remainingCount > 1 ? "s" : ""}
+          </Button>
+        </div>
+      )}
+    </div>
+  )
+}
+
+export const defaultThreatAlerts: ThreatAlert[] = [
+  {
+    id: "1",
+    threatName: "Trojan.GenericKD.12345678",
+    filename: "invoice_2024.pdf.exe",
+    filePath: "/home/user/Downloads/invoice_2024.pdf.exe",
+    severity: "critical",
+    action: "quarantined",
+    detectedAt: new Date(Date.now() - 5 * 60000),
+    userId: "user@example.com",
+    engineVersion: "ClamAV 1.4.1",
+    dismissed: false,
+  },
+  {
+    id: "2",
+    threatName: "Malware.Suspicious.Archive",
+    filename: "files.zip",
+    filePath: "/var/www/uploads/files.zip",
+    severity: "high",
+    action: "blocked",
+    detectedAt: new Date(Date.now() - 15 * 60000),
+    engineVersion: "ClamAV 1.4.1",
+    dismissed: false,
+  },
+  {
+    id: "3",
+    threatName: "PUA.Win.Adware.Generic",
+    filename: "installer.exe",
+    filePath: "/tmp/installer.exe",
+    severity: "medium",
+    action: "deleted",
+    detectedAt: new Date(Date.now() - 3600000),
+    userId: "admin@example.com",
+    engineVersion: "ClamAV 1.4.1",
+    dismissed: false,
+  },
+]

package/src/components/DataTable/DataTable.stories.tsx

@@ -0,0 +1,203 @@
+import type { Meta, StoryObj } from "@storybook/react"
+import { DataTable } from "./index"
+import { ColumnDef } from "@tanstack/react-table"
+
+interface User {
+  id: string
+  name: string
+  email: string
+  role: string
+  status: "active" | "inactive" | "pending"
+}
+
+const sampleData: User[] = [
+  { id: "1", name: "John Doe", email: "john@example.com", role: "Admin", status: "active" },
+  { id: "2", name: "Jane Smith", email: "jane@example.com", role: "Editor", status: "active" },
+  { id: "3", name: "Bob Johnson", email: "bob@example.com", role: "Viewer", status: "inactive" },
+  { id: "4", name: "Alice Brown", email: "alice@example.com", role: "Editor", status: "pending" },
+  { id: "5", name: "Charlie Wilson", email: "charlie@example.com", role: "Admin", status: "active" },
+  { id: "6", name: "Diana Miller", email: "diana@example.com", role: "Viewer", status: "active" },
+  { id: "7", name: "Edward Davis", email: "edward@example.com", role: "Editor", status: "inactive" },
+  { id: "8", name: "Fiona Garcia", email: "fiona@example.com", role: "Admin", status: "active" },
+]
+
+const columns: ColumnDef<User>[] = [
+  {
+    accessorKey: "name",
+    header: "Name",
+  },
+  {
+    accessorKey: "email",
+    header: "Email",
+  },
+  {
+    accessorKey: "role",
+    header: "Role",
+  },
+  {
+    accessorKey: "status",
+    header: "Status",
+    cell: ({ row }) => {
+      const status = row.getValue("status") as string
+      const colors = {
+        active: "bg-green-100 text-green-800",
+        inactive: "bg-gray-100 text-gray-800",
+        pending: "bg-yellow-100 text-yellow-800",
+      }
+      return (
+        <span className={`px-2 py-1 rounded-full text-xs font-medium ${colors[status as keyof typeof colors]}`}>
+          {status}
+        </span>
+      )
+    },
+  },
+]
+
+const meta: Meta<typeof DataTable<User>> = {
+  title: "Components/Data/DataTable",
+  component: DataTable,
+  parameters: {
+    layout: "padded",
+  },
+  tags: ["autodocs"],
+  argTypes: {
+    layout: {
+      control: "select",
+      options: ["standard", "card", "compact", "split", "infinite"],
+      description: "Table layout style",
+    },
+    variant: {
+      control: "select",
+      options: ["bordered", "minimal", "striped", "glass"],
+      description: "Table visual variant",
+    },
+    density: {
+      control: "select",
+      options: ["compact", "comfortable", "spacious"],
+      description: "Row density",
+    },
+    selection: {
+      control: "boolean",
+      description: "Enable row selection",
+    },
+    loading: {
+      control: "boolean",
+      description: "Loading state",
+    },
+    headerSticky: {
+      control: "boolean",
+      description: "Sticky header",
+    },
+    columnVisibilityToggle: {
+      control: "boolean",
+      description: "Enable column visibility toggle",
+    },
+    enableExport: {
+      control: "boolean",
+      description: "Enable export functionality",
+    },
+    enableImport: {
+      control: "boolean",
+      description: "Enable import functionality",
+    },
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof DataTable<User>>
+
+export const Default: Story = {
+  args: {
+    data: sampleData,
+    columns: columns,
+    layout: "standard",
+    variant: "bordered",
+    density: "comfortable",
+  },
+  render: (args) => <DataTable {...args} />,
+}
+
+export const WithSelection: Story = {
+  args: {
+    data: sampleData,
+    columns: columns,
+    selection: true,
+    variant: "bordered",
+  },
+  render: (args) => <DataTable {...args} />,
+}
+
+export const WithPagination: Story = {
+  args: {
+    data: sampleData,
+    columns: columns,
+    pagination: {
+      mode: "client",
+      pageSize: 5,
+      pageSizeOptions: [5, 10, 20],
+    },
+    variant: "bordered",
+  },
+  render: (args) => <DataTable {...args} />,
+}
+
+export const Striped: Story = {
+  args: {
+    data: sampleData,
+    columns: columns,
+    variant: "striped",
+  },
+  render: (args) => <DataTable {...args} />,
+}
+
+export const Compact: Story = {
+  args: {
+    data: sampleData,
+    columns: columns,
+    density: "compact",
+    variant: "bordered",
+  },
+  render: (args) => <DataTable {...args} />,
+}
+
+export const Loading: Story = {
+  args: {
+    data: [],
+    columns: columns,
+    loading: true,
+  },
+  render: (args) => <DataTable {...args} />,
+}
+
+export const Empty: Story = {
+  args: {
+    data: [],
+    columns: columns,
+  },
+  render: (args) => <DataTable {...args} />,
+}
+
+export const WithError: Story = {
+  args: {
+    data: [],
+    columns: columns,
+    error: "Failed to load data. Please try again.",
+  },
+  render: (args) => <DataTable {...args} />,
+}
+
+export const WithToolbar: Story = {
+  args: {
+    data: sampleData,
+    columns: columns,
+    toolbar: {
+      showGlobalSearch: true,
+      showColumnVisibility: true,
+      showDensityToggle: true,
+    },
+    enableExport: true,
+    variant: "bordered",
+  },
+  render: (args) => <DataTable {...args} />,
+}
+

package/src/components/DataTable/hooks/useDataTableExport.ts

@@ -66,44 +66,47 @@ export function useDataTableExport<TData>({
     URL.revokeObjectURL(link.href)
   }, [config.filename])
 
-  // Fonction d'export XLSX (nécessite une librairie externe)
+  // Fonction d'export XLSX (nécessite exceljs)
   const exportToXLSX = useCallback(async (data: TData[], filename?: string) => {
     try {
-      // Vérifier si la librairie xlsx est disponible
       if (typeof window === 'undefined') {
         throw new Error("XLSX export not available in server environment")
       }
-      
-      // Import dynamique pour éviter d'augmenter la taille du bundle
+
       // @ts-ignore - Module importé dynamiquement
-      const XLSX = await import("xlsx")
-      
+      const ExcelJS = await import("exceljs")
+
+      const workbook = new ExcelJS.Workbook()
+      const worksheet = workbook.addWorksheet(config.options?.xlsx?.sheetName || "Sheet1")
+
       const headers = columns
         .filter(col => col.accessorKey || col.id)
         .map(col => col.header || col.accessorKey || col.id)
 
-      const worksheetData = [
-        headers,
-        ...data.map(row => 
-          columns
-            .filter(col => col.accessorKey || col.id)
-            .map(col => {
-              const value = col.accessorKey ? (row as any)[col.accessorKey] : (row as any)[col.id]
-              return col.formatter ? col.formatter(value) : value
-            })
-        )
-      ]
-
-      const worksheet = XLSX.utils.aoa_to_sheet(worksheetData)
-      const workbook = XLSX.utils.book_new()
-      XLSX.utils.book_append_sheet(workbook, worksheet, "Sheet1")
-      
-      XLSX.writeFile(workbook, `${filename || config.filename}.xlsx`)
+      worksheet.addRow(headers)
+
+      data.forEach(row => {
+        const values = columns
+          .filter(col => col.accessorKey || col.id)
+          .map(col => {
+            const value = col.accessorKey ? (row as any)[col.accessorKey] : (row as any)[col.id]
+            return col.formatter ? col.formatter(value) : value
+          })
+        worksheet.addRow(values)
+      })
+
+      const buffer = await workbook.xlsx.writeBuffer()
+      const blob = new Blob([buffer], { type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet" })
+      const link = document.createElement("a")
+      link.href = URL.createObjectURL(blob)
+      link.download = `${filename || config.filename}.xlsx`
+      link.click()
+      URL.revokeObjectURL(link.href)
     } catch (error) {
       console.error("Erreur lors de l'export XLSX:", error)
-      throw new Error("La librairie xlsx n'est pas disponible")
+      throw new Error("La librairie exceljs n'est pas disponible. Installez-la avec: pnpm add exceljs")
     }
-  }, [columns, config.filename])
+  }, [columns, config.filename, config.options?.xlsx?.sheetName])
 
   // Fonction d'export PDF (nécessite une librairie externe)
   const exportToPDF = useCallback(async (data: TData[], filename?: string) => {
@@ -113,12 +116,15 @@ export function useDataTableExport<TData>({
         throw new Error("PDF export not available in server environment")
       }
       
-      // @ts-ignore - Module importé dynamiquement
-      const jsPDF = await import("jspdf")
-      // @ts-ignore - Module importé dynamiquement
-      const autoTable = await import("jspdf-autotable")
+      // Import dynamique des modules PDF
+      const jsPDFModule = await import("jspdf")
+      const autoTableModule = await import("jspdf-autotable")
+      
+      const jsPDF = jsPDFModule.default || jsPDFModule.jsPDF
+      const doc = new jsPDF()
       
-      const doc = new jsPDF.default()
+      // Appliquer le plugin autoTable au document
+      const autoTable = autoTableModule.default || autoTableModule.autoTable
       
       const headers = columns
         .filter(col => col.accessorKey || col.id)
@@ -133,7 +139,8 @@ export function useDataTableExport<TData>({
           })
       )
 
-      doc.autoTable({
+      // Appeler autoTable comme fonction avec le document
+      autoTable(doc, {
         head: [headers],
         body: rows,
         startY: 20,

package/src/components/DataTable/hooks/useDataTableImport.ts

@@ -62,36 +62,47 @@ export function useDataTableImport<TData>({
     }
   }, [])
 
-  // Fonction de parsing XLSX
+  // Fonction de parsing XLSX (nécessite exceljs)
   const parseXLSX = useCallback(async (file: File) => {
     try {
-      // Vérifier si on est côté client
       if (typeof window === 'undefined') {
         throw new Error("XLSX parsing not available in server environment")
       }
-      
+
       // @ts-ignore - Module importé dynamiquement
-      const XLSX = await import("xlsx")
-      const data = await file.arrayBuffer()
-      const workbook = XLSX.read(data, { type: "array" })
-      const sheetName = workbook.SheetNames[0]
-      const worksheet = workbook.Sheets[sheetName]
-      const jsonData = XLSX.utils.sheet_to_json(worksheet, { header: 1 })
-      
-      if (jsonData.length === 0) return []
-      
-      const headers = jsonData[0] as string[]
-      return jsonData.slice(1).map((row: any[]) => {
-        const obj: any = {}
+      const ExcelJS = await import("exceljs")
+      const buffer = await file.arrayBuffer()
+
+      const workbook = new ExcelJS.Workbook()
+      await workbook.xlsx.load(buffer)
+
+      const sheetIndex = config.parseOptions?.xlsx?.sheetIndex ?? 0
+      const headerRow = config.parseOptions?.xlsx?.headerRow ?? 1
+      const worksheet = workbook.worksheets[sheetIndex]
+
+      if (!worksheet || worksheet.rowCount === 0) return []
+
+      const headers: string[] = []
+      worksheet.getRow(headerRow).eachCell((cell, colNumber) => {
+        headers[colNumber - 1] = String(cell.value || "")
+      })
+
+      const data: Record<string, unknown>[] = []
+      for (let i = headerRow + 1; i <= worksheet.rowCount; i++) {
+        const row = worksheet.getRow(i)
+        const obj: Record<string, unknown> = {}
         headers.forEach((header, index) => {
-          obj[header] = row[index] || ""
+          const cell = row.getCell(index + 1)
+          obj[header] = cell.value ?? ""
         })
-        return obj
-      })
+        data.push(obj)
+      }
+
+      return data
     } catch (error) {
-      throw new Error("Erreur lors du parsing du fichier XLSX")
+      throw new Error("Erreur lors du parsing du fichier XLSX. Verifiez que exceljs est installe: pnpm add exceljs")
     }
-  }, [])
+  }, [config.parseOptions?.xlsx?.sheetIndex, config.parseOptions?.xlsx?.headerRow])
 
   // Fonction de validation des données
   const validateData = useCallback((data: any[]) => {