@wakastellar/ui 2.4.0 → 3.1.0

package/src/blocks/signature-database-manager/index.tsx

@@ -0,0 +1,470 @@
+"use client"
+
+import { Badge } from "../../components/badge"
+import { Button } from "../../components/button"
+import { Card } from "../../components/card"
+import { Progress } from "../../components/progress"
+import { ScrollArea } from "../../components/scroll-area"
+import {
+  Database,
+  RefreshCw,
+  Calendar,
+  FileText,
+  HardDrive,
+  Clock,
+  Download,
+  CheckCircle2,
+  XCircle,
+  Loader2,
+  AlertCircle,
+  Globe,
+} from "lucide-react"
+import { cn } from "../../utils/cn"
+
+export type UpdateStatus = "success" | "failed" | "in_progress" | "scheduled"
+
+export interface SignatureDatabase {
+  name: string
+  version: string
+  signatureCount: number
+  size: number
+  lastUpdated: Date
+  buildTime: Date
+}
+
+export interface SignatureUpdate {
+  id: string
+  date: Date
+  fromVersion: string
+  toVersion: string
+  newSignatures: number
+  removedSignatures: number
+  duration: number
+  status: UpdateStatus
+  source: string
+}
+
+export interface FreshclamConfig {
+  updateFrequency: number // hours
+  mirror: string
+  lastCheck: Date
+  checksToday: number
+  proxyEnabled: boolean
+}
+
+export interface SignatureDatabaseManagerProps {
+  databases?: SignatureDatabase[]
+  updates?: SignatureUpdate[]
+  freshclamConfig?: FreshclamConfig
+  totalSignatures?: number
+  isUpdating?: boolean
+  onUpdateNow?: () => void
+  onScheduleUpdate?: (frequency: number) => void
+  onViewChangelog?: (updateId: string) => void
+  className?: string
+}
+
+const defaultDatabases: SignatureDatabase[] = [
+  {
+    name: "main.cvd",
+    version: "62",
+    signatureCount: 6647427,
+    size: 162.5 * 1024 * 1024,
+    lastUpdated: new Date("2024-12-15T10:30:00"),
+    buildTime: new Date("2024-12-15T08:00:00"),
+  },
+  {
+    name: "daily.cvd",
+    version: "27458",
+    signatureCount: 2145789,
+    size: 89.3 * 1024 * 1024,
+    lastUpdated: new Date("2025-01-15T14:20:00"),
+    buildTime: new Date("2025-01-15T12:00:00"),
+  },
+  {
+    name: "bytecode.cvd",
+    version: "334",
+    signatureCount: 52438,
+    size: 2.8 * 1024 * 1024,
+    lastUpdated: new Date("2025-01-10T09:15:00"),
+    buildTime: new Date("2025-01-10T06:00:00"),
+  },
+]
+
+const defaultUpdates: SignatureUpdate[] = [
+  {
+    id: "upd-1",
+    date: new Date("2025-01-15T14:20:00"),
+    fromVersion: "27457",
+    toVersion: "27458",
+    newSignatures: 1247,
+    removedSignatures: 89,
+    duration: 45,
+    status: "success",
+    source: "daily.cvd",
+  },
+  {
+    id: "upd-2",
+    date: new Date("2025-01-14T14:15:00"),
+    fromVersion: "27456",
+    toVersion: "27457",
+    newSignatures: 2134,
+    removedSignatures: 156,
+    duration: 52,
+    status: "success",
+    source: "daily.cvd",
+  },
+  {
+    id: "upd-3",
+    date: new Date("2025-01-13T14:10:00"),
+    fromVersion: "27455",
+    toVersion: "27456",
+    newSignatures: 1876,
+    removedSignatures: 203,
+    duration: 48,
+    status: "success",
+    source: "daily.cvd",
+  },
+  {
+    id: "upd-4",
+    date: new Date("2025-01-12T14:05:00"),
+    fromVersion: "27454",
+    toVersion: "27455",
+    newSignatures: 0,
+    removedSignatures: 0,
+    duration: 12,
+    status: "failed",
+    source: "daily.cvd",
+  },
+  {
+    id: "upd-5",
+    date: new Date("2025-01-11T14:00:00"),
+    fromVersion: "27453",
+    toVersion: "27454",
+    newSignatures: 3245,
+    removedSignatures: 178,
+    duration: 67,
+    status: "success",
+    source: "daily.cvd",
+  },
+]
+
+const defaultFreshclamConfig: FreshclamConfig = {
+  updateFrequency: 24,
+  mirror: "database.clamav.net",
+  lastCheck: new Date("2025-01-15T14:20:00"),
+  checksToday: 12,
+  proxyEnabled: false,
+}
+
+const formatBytes = (bytes: number): string => {
+  if (bytes < 1024) return bytes + " B"
+  if (bytes < 1024 * 1024) return (bytes / 1024).toFixed(2) + " KB"
+  return (bytes / (1024 * 1024)).toFixed(2) + " MB"
+}
+
+const formatDate = (date: Date): string => {
+  return new Intl.DateTimeFormat("fr-FR", {
+    year: "numeric",
+    month: "short",
+    day: "numeric",
+    hour: "2-digit",
+    minute: "2-digit",
+  }).format(date)
+}
+
+const formatNumber = (num: number): string => {
+  return new Intl.NumberFormat("fr-FR").format(num)
+}
+
+const getStatusIcon = (status: UpdateStatus) => {
+  switch (status) {
+    case "success":
+      return <CheckCircle2 className="size-4 text-green-600 dark:text-green-400" />
+    case "failed":
+      return <XCircle className="size-4 text-red-600 dark:text-red-400" />
+    case "in_progress":
+      return <Loader2 className="size-4 text-blue-600 dark:text-blue-400 animate-spin" />
+    case "scheduled":
+      return <Clock className="size-4 text-amber-600 dark:text-amber-400" />
+  }
+}
+
+const getStatusBadge = (status: UpdateStatus) => {
+  switch (status) {
+    case "success":
+      return <Badge variant="secondary" className="bg-green-500/10 text-green-600 border-green-500/20">Réussie</Badge>
+    case "failed":
+      return <Badge variant="destructive">Échouée</Badge>
+    case "in_progress":
+      return <Badge variant="default">En cours</Badge>
+    case "scheduled":
+      return <Badge variant="secondary" className="bg-yellow-500/10 text-yellow-600 border-yellow-500/20">Planifiée</Badge>
+  }
+}
+
+export function SignatureDatabaseManager({
+  databases = defaultDatabases,
+  updates = defaultUpdates,
+  freshclamConfig = defaultFreshclamConfig,
+  totalSignatures = databases.reduce((sum, db) => sum + db.signatureCount, 0),
+  isUpdating = false,
+  onUpdateNow,
+  onScheduleUpdate,
+  onViewChangelog,
+  className,
+}: SignatureDatabaseManagerProps) {
+  const latestUpdate = updates[0]
+
+  return (
+    <div className={cn("space-y-6", className)}>
+      {/* Status actuel */}
+      <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-4">
+        <Card className="p-6">
+          <div className="flex items-center justify-between">
+            <div>
+              <p className="text-sm font-medium text-muted-foreground">Version DB</p>
+              <h3 className="text-2xl font-bold">{latestUpdate?.toVersion || "N/A"}</h3>
+            </div>
+            <Database className="size-8 text-blue-600 dark:text-blue-400" />
+          </div>
+        </Card>
+
+        <Card className="p-6">
+          <div className="flex items-center justify-between">
+            <div>
+              <p className="text-sm font-medium text-muted-foreground">Total Signatures</p>
+              <h3 className="text-2xl font-bold">{formatNumber(totalSignatures)}</h3>
+            </div>
+            <FileText className="size-8 text-purple-600 dark:text-purple-400" />
+          </div>
+        </Card>
+
+        <Card className="p-6">
+          <div className="flex items-center justify-between">
+            <div>
+              <p className="text-sm font-medium text-muted-foreground">Dernière MAJ</p>
+              <h3 className="text-sm font-bold">
+                {latestUpdate ? formatDate(latestUpdate.date) : "N/A"}
+              </h3>
+            </div>
+            <Clock className="size-8 text-green-600 dark:text-green-400" />
+          </div>
+        </Card>
+
+        <Card className="p-6">
+          <div className="flex items-center justify-between">
+            <div>
+              <p className="text-sm font-medium text-muted-foreground">Taille Totale</p>
+              <h3 className="text-2xl font-bold">
+                {formatBytes(databases.reduce((sum, db) => sum + db.size, 0))}
+              </h3>
+            </div>
+            <HardDrive className="size-8 text-amber-600 dark:text-amber-400" />
+          </div>
+        </Card>
+      </div>
+
+      <div className="grid gap-6 lg:grid-cols-2">
+        {/* Bases de données */}
+        <Card className="p-6">
+          <div className="mb-4 flex items-center justify-between">
+            <h3 className="text-lg font-semibold">Bases de données</h3>
+            <Badge variant="outline">{databases.length} bases</Badge>
+          </div>
+
+          <div className="space-y-4">
+            {databases.map((db) => (
+              <div
+                key={db.name}
+                className="rounded-lg border border-border bg-muted/50 p-4 space-y-2"
+              >
+                <div className="flex items-center justify-between">
+                  <div className="flex items-center gap-2">
+                    <Database className="size-4 text-muted-foreground" />
+                    <span className="font-medium">{db.name}</span>
+                  </div>
+                  <Badge variant="secondary">v{db.version}</Badge>
+                </div>
+
+                <div className="grid grid-cols-2 gap-2 text-sm">
+                  <div>
+                    <p className="text-muted-foreground">Signatures</p>
+                    <p className="font-medium">{formatNumber(db.signatureCount)}</p>
+                  </div>
+                  <div>
+                    <p className="text-muted-foreground">Taille</p>
+                    <p className="font-medium">{formatBytes(db.size)}</p>
+                  </div>
+                  <div className="col-span-2">
+                    <p className="text-muted-foreground">Dernière mise à jour</p>
+                    <p className="font-medium">{formatDate(db.lastUpdated)}</p>
+                  </div>
+                </div>
+              </div>
+            ))}
+          </div>
+        </Card>
+
+        {/* Freshclam Config */}
+        <Card className="p-6">
+          <div className="mb-4 flex items-center justify-between">
+            <h3 className="text-lg font-semibold">Configuration Freshclam</h3>
+            <Button
+              size="sm"
+              variant="outline"
+              onClick={() => onScheduleUpdate?.(freshclamConfig.updateFrequency)}
+            >
+              <Calendar className="mr-2 size-4" />
+              Planifier
+            </Button>
+          </div>
+
+          <div className="space-y-4">
+            <div className="flex items-center justify-between rounded-lg border border-border bg-muted/50 p-4">
+              <div>
+                <p className="text-sm text-muted-foreground">Fréquence de MAJ</p>
+                <p className="text-lg font-semibold">
+                  Toutes les {freshclamConfig.updateFrequency}h
+                </p>
+              </div>
+              <Clock className="size-6 text-blue-600 dark:text-blue-400" />
+            </div>
+
+            <div className="flex items-center justify-between rounded-lg border border-border bg-muted/50 p-4">
+              <div>
+                <p className="text-sm text-muted-foreground">Mirror utilisé</p>
+                <p className="text-lg font-semibold">{freshclamConfig.mirror}</p>
+              </div>
+              <Globe className="size-6 text-purple-600 dark:text-purple-400" />
+            </div>
+
+            <div className="flex items-center justify-between rounded-lg border border-border bg-muted/50 p-4">
+              <div>
+                <p className="text-sm text-muted-foreground">Dernier check</p>
+                <p className="text-lg font-semibold">{formatDate(freshclamConfig.lastCheck)}</p>
+              </div>
+              <RefreshCw className="size-6 text-green-600 dark:text-green-400" />
+            </div>
+
+            <div className="flex items-center justify-between rounded-lg border border-border bg-muted/50 p-4">
+              <div>
+                <p className="text-sm text-muted-foreground">Checks aujourd'hui</p>
+                <p className="text-lg font-semibold">{freshclamConfig.checksToday}</p>
+              </div>
+              <AlertCircle className="size-6 text-amber-600 dark:text-amber-400" />
+            </div>
+
+            {freshclamConfig.proxyEnabled && (
+              <div className="rounded-lg border border-amber-200 bg-amber-50 dark:border-amber-800 dark:bg-amber-950/50 p-3">
+                <div className="flex items-center gap-2 text-sm text-amber-800 dark:text-amber-200">
+                  <AlertCircle className="size-4" />
+                  <span>Proxy activé</span>
+                </div>
+              </div>
+            )}
+
+            <Button
+              className="w-full"
+              onClick={onUpdateNow}
+              disabled={isUpdating}
+            >
+              {isUpdating ? (
+                <>
+                  <Loader2 className="mr-2 size-4 animate-spin" />
+                  Mise à jour en cours...
+                </>
+              ) : (
+                <>
+                  <Download className="mr-2 size-4" />
+                  Mettre à jour maintenant
+                </>
+              )}
+            </Button>
+          </div>
+        </Card>
+      </div>
+
+      {/* Historique des MAJ */}
+      <Card className="p-6">
+        <div className="mb-4 flex items-center justify-between">
+          <h3 className="text-lg font-semibold">Historique des mises à jour</h3>
+          <Badge variant="outline">{updates.length} mises à jour</Badge>
+        </div>
+
+        <ScrollArea className="h-[400px]">
+          <div className="space-y-3">
+            {updates.map((update, index) => (
+              <div
+                key={update.id}
+                className="relative rounded-lg border border-border bg-muted/50 p-4"
+              >
+                {index < updates.length - 1 && (
+                  <div className="absolute left-6 top-12 h-full w-px bg-border" />
+                )}
+
+                <div className="flex items-start gap-3">
+                  <div className="flex size-8 shrink-0 items-center justify-center rounded-full border border-border bg-background">
+                    {getStatusIcon(update.status)}
+                  </div>
+
+                  <div className="flex-1 space-y-2">
+                    <div className="flex items-center justify-between">
+                      <div>
+                        <p className="font-medium">
+                          {update.source} - v{update.fromVersion} → v{update.toVersion}
+                        </p>
+                        <p className="text-sm text-muted-foreground">
+                          {formatDate(update.date)}
+                        </p>
+                      </div>
+                      {getStatusBadge(update.status)}
+                    </div>
+
+                    {update.status === "success" && (
+                      <div className="grid grid-cols-3 gap-3 text-sm">
+                        <div>
+                          <p className="text-muted-foreground">Ajoutées</p>
+                          <p className="font-medium text-green-600 dark:text-green-400">
+                            +{formatNumber(update.newSignatures)}
+                          </p>
+                        </div>
+                        <div>
+                          <p className="text-muted-foreground">Supprimées</p>
+                          <p className="font-medium text-red-600 dark:text-red-400">
+                            -{formatNumber(update.removedSignatures)}
+                          </p>
+                        </div>
+                        <div>
+                          <p className="text-muted-foreground">Durée</p>
+                          <p className="font-medium">{update.duration}s</p>
+                        </div>
+                      </div>
+                    )}
+
+                    {update.status === "failed" && (
+                      <div className="rounded-lg border border-red-200 bg-red-50 dark:border-red-800 dark:bg-red-950/50 p-2">
+                        <p className="text-sm text-red-800 dark:text-red-200">
+                          Échec de la mise à jour
+                        </p>
+                      </div>
+                    )}
+
+                    <Button
+                      size="sm"
+                      variant="ghost"
+                      onClick={() => onViewChangelog?.(update.id)}
+                    >
+                      <FileText className="mr-2 size-3" />
+                      Voir le changelog
+                    </Button>
+                  </div>
+                </div>
+              </div>
+            ))}
+          </div>
+        </ScrollArea>
+      </Card>
+    </div>
+  )
+}

package/src/blocks/theme-creator-block/index.tsx

@@ -8,8 +8,22 @@ import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from ".
 import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "../../components/collapsible"
 import { ScrollArea } from "../../components/scroll-area"
 import { useToast } from "../../hooks/useToast"
-import { useTheme, ShadcnRegistryItem } from "../../context/theme-provider"
+import { useTheme, type ShadcnRegistryItem } from "../../context/theme-provider"
 import { Login, type LoginConfig } from "../login"
+
+// Hook sécurisé pour gérer le contexte de thème (optionnel)
+function useThemeSafe() {
+  try {
+    return useTheme()
+  } catch {
+    // Le contexte n'est pas disponible, retourner des valeurs par défaut
+    return {
+      loadThemeFromJSON: async () => {},
+      isDarkMode: false,
+      toggleDarkMode: () => {},
+    }
+  }
+}
 import { WakaDashboard, defaultDashboardStats } from "../dashboard"
 import { WakaChat, defaultChatUser, defaultChatConversations, defaultChatMessages } from "../chat"
 import {
@@ -513,7 +527,7 @@ export function WakaThemeCreatorBlock({
   className,
 }: WakaThemeCreatorBlockProps) {
   const { toast } = useToast()
-  const { loadThemeFromJSON, isDarkMode, toggleDarkMode } = useTheme()
+  const { loadThemeFromJSON, isDarkMode, toggleDarkMode } = useThemeSafe()
 
   // Theme state
   const [currentTheme, setCurrentTheme] = React.useState<ThemeCreatorBlockTheme>(

package/src/blocks/threat-alert-banner/ThreatAlertBanner.stories.tsx

@@ -0,0 +1,152 @@
+import type { Meta, StoryObj } from "@storybook/react"
+import { ThreatAlertBanner, ThreatAlert } from "./index"
+
+const meta = {
+  title: "Blocks/Antivirus/ThreatAlertBanner",
+  component: ThreatAlertBanner,
+  parameters: {
+    layout: "padded",
+  },
+  tags: ["autodocs"],
+} satisfies Meta<typeof ThreatAlertBanner>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+const criticalAlert: ThreatAlert = {
+  id: "1",
+  threatName: "Ransomware.WannaCry.Variant",
+  filename: "important_document.pdf.exe",
+  filePath: "/home/user/Documents/important_document.pdf.exe",
+  severity: "critical",
+  action: "quarantined",
+  detectedAt: new Date(Date.now() - 2 * 60000),
+  userId: "john.doe@company.com",
+  engineVersion: "ClamAV 1.4.1 / 2024-02-12",
+  dismissed: false,
+}
+
+const highAlert: ThreatAlert = {
+  id: "2",
+  threatName: "Trojan.GenericKD.87654321",
+  filename: "update.exe",
+  filePath: "/var/www/uploads/suspicious/update.exe",
+  severity: "high",
+  action: "blocked",
+  detectedAt: new Date(Date.now() - 10 * 60000),
+  userId: "admin@company.com",
+  engineVersion: "ClamAV 1.4.1 / 2024-02-12",
+  dismissed: false,
+}
+
+const mediumAlert: ThreatAlert = {
+  id: "3",
+  threatName: "PUA.Win.Adware.BundleInstaller",
+  filename: "freeware_installer.exe",
+  filePath: "/tmp/downloads/freeware_installer.exe",
+  severity: "medium",
+  action: "deleted",
+  detectedAt: new Date(Date.now() - 30 * 60000),
+  userId: "user@company.com",
+  engineVersion: "ClamAV 1.4.1 / 2024-02-12",
+  dismissed: false,
+}
+
+const lowAlert: ThreatAlert = {
+  id: "4",
+  threatName: "Test.EICAR.Signature",
+  filename: "eicar.com",
+  filePath: "/home/user/test/eicar.com",
+  severity: "low",
+  action: "allowed",
+  detectedAt: new Date(Date.now() - 60 * 60000),
+  userId: "security-team@company.com",
+  engineVersion: "ClamAV 1.4.1 / 2024-02-12",
+  dismissed: false,
+}
+
+export const Critical: Story = {
+  args: {
+    alerts: [criticalAlert],
+    onDismiss: (alertId: string) => {
+      console.log("Dismiss alert:", alertId)
+    },
+    onViewDetails: (alertId: string) => {
+      console.log("View details:", alertId)
+    },
+    onViewQuarantine: () => {
+      console.log("View quarantine")
+    },
+  },
+}
+
+export const MultipleAlerts: Story = {
+  args: {
+    alerts: [criticalAlert, highAlert, mediumAlert, lowAlert],
+    maxVisible: 3,
+    onDismiss: (alertId: string) => {
+      console.log("Dismiss alert:", alertId)
+    },
+    onDismissAll: () => {
+      console.log("Dismiss all alerts")
+    },
+    onViewDetails: (alertId: string) => {
+      console.log("View details:", alertId)
+    },
+    onViewQuarantine: () => {
+      console.log("View quarantine")
+    },
+  },
+}
+
+export const LowSeverity: Story = {
+  args: {
+    alerts: [lowAlert],
+    onDismiss: (alertId: string) => {
+      console.log("Dismiss alert:", alertId)
+    },
+    onViewDetails: (alertId: string) => {
+      console.log("View details:", alertId)
+    },
+  },
+}
+
+export const AllDismissed: Story = {
+  args: {
+    alerts: [
+      { ...criticalAlert, dismissed: true },
+      { ...highAlert, dismissed: true },
+      { ...mediumAlert, dismissed: true },
+      { ...lowAlert, dismissed: true },
+    ],
+    onDismiss: (alertId: string) => {
+      console.log("Dismiss alert:", alertId)
+    },
+  },
+}
+
+export const ManyAlerts: Story = {
+  args: {
+    alerts: [
+      criticalAlert,
+      { ...highAlert, id: "5", detectedAt: new Date(Date.now() - 5 * 60000) },
+      { ...highAlert, id: "6", filename: "malware.zip", detectedAt: new Date(Date.now() - 8 * 60000) },
+      mediumAlert,
+      { ...mediumAlert, id: "7", filename: "suspicious.js", detectedAt: new Date(Date.now() - 45 * 60000) },
+      lowAlert,
+    ],
+    maxVisible: 3,
+    onDismiss: (alertId: string) => {
+      console.log("Dismiss alert:", alertId)
+    },
+    onDismissAll: () => {
+      console.log("Dismiss all alerts")
+    },
+    onViewDetails: (alertId: string) => {
+      console.log("View details:", alertId)
+    },
+    onViewQuarantine: () => {
+      console.log("View quarantine")
+    },
+  },
+}