@wakastellar/ui 2.1.2 → 2.3.2

package/src/components/waka-log-viewer/index.tsx

@@ -0,0 +1,386 @@
+"use client"
+
+import * as React from "react"
+import { cn } from "../../utils/cn"
+import { Button } from "../button"
+import { Input } from "../input"
+import { Badge } from "../badge"
+import { ScrollArea } from "../scroll-area"
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "../select"
+import {
+  Search,
+  Filter,
+  Download,
+  Pause,
+  Play,
+  Trash2,
+  ChevronDown,
+  ChevronRight,
+  AlertCircle,
+  AlertTriangle,
+  Info,
+  Bug,
+  Clock,
+  RefreshCw,
+} from "lucide-react"
+
+export type LogLevel = "error" | "warn" | "info" | "debug" | "trace"
+
+export interface LogEntry {
+  id: string
+  timestamp: Date
+  level: LogLevel
+  message: string
+  source?: string
+  metadata?: Record<string, unknown>
+  stackTrace?: string
+}
+
+export interface WakaLogViewerProps {
+  /** Log entries to display */
+  logs: LogEntry[]
+  /** Callback when requesting more logs */
+  onLoadMore?: () => void
+  /** Callback when clearing logs */
+  onClear?: () => void
+  /** Callback when exporting logs */
+  onExport?: (logs: LogEntry[]) => void
+  /** Whether streaming is active */
+  isStreaming?: boolean
+  /** Callback to toggle streaming */
+  onToggleStreaming?: () => void
+  /** Maximum number of logs to display */
+  maxLogs?: number
+  /** Show timestamp */
+  showTimestamp?: boolean
+  /** Show source */
+  showSource?: boolean
+  /** Enable auto-scroll to bottom */
+  autoScroll?: boolean
+  /** Custom class name */
+  className?: string
+  /** Title */
+  title?: string
+}
+
+const levelConfig: Record<LogLevel, { icon: React.ElementType; color: string; bgColor: string }> = {
+  error: { icon: AlertCircle, color: "text-red-500", bgColor: "bg-red-500/10" },
+  warn: { icon: AlertTriangle, color: "text-yellow-500", bgColor: "bg-yellow-500/10" },
+  info: { icon: Info, color: "text-blue-500", bgColor: "bg-blue-500/10" },
+  debug: { icon: Bug, color: "text-purple-500", bgColor: "bg-purple-500/10" },
+  trace: { icon: Clock, color: "text-gray-500", bgColor: "bg-gray-500/10" },
+}
+
+function LogEntryRow({
+  entry,
+  showTimestamp,
+  showSource,
+  isExpanded,
+  onToggleExpand,
+}: {
+  entry: LogEntry
+  showTimestamp: boolean
+  showSource: boolean
+  isExpanded: boolean
+  onToggleExpand: () => void
+}) {
+  const config = levelConfig[entry.level]
+  const Icon = config.icon
+  const hasDetails = entry.metadata || entry.stackTrace
+
+  return (
+    <div className={cn("border-b border-border/50 hover:bg-muted/30 transition-colors", config.bgColor)}>
+      <div
+        className={cn(
+          "flex items-start gap-2 px-3 py-2 font-mono text-sm",
+          hasDetails && "cursor-pointer"
+        )}
+        onClick={hasDetails ? onToggleExpand : undefined}
+      >
+        {hasDetails && (
+          <button className="mt-0.5 text-muted-foreground hover:text-foreground">
+            {isExpanded ? <ChevronDown className="h-4 w-4" /> : <ChevronRight className="h-4 w-4" />}
+          </button>
+        )}
+
+        <Icon className={cn("h-4 w-4 mt-0.5 shrink-0", config.color)} />
+
+        {showTimestamp && (
+          <span className="text-muted-foreground shrink-0 text-xs">
+            {entry.timestamp.toLocaleTimeString("fr-FR", {
+              hour: "2-digit",
+              minute: "2-digit",
+              second: "2-digit",
+            })}.{entry.timestamp.getMilliseconds().toString().padStart(3, '0')}
+          </span>
+        )}
+
+        <Badge variant="outline" className={cn("shrink-0 uppercase text-xs", config.color)}>
+          {entry.level}
+        </Badge>
+
+        {showSource && entry.source && (
+          <span className="text-muted-foreground shrink-0">[{entry.source}]</span>
+        )}
+
+        <span className="flex-1 break-all whitespace-pre-wrap">{entry.message}</span>
+      </div>
+
+      {isExpanded && hasDetails && (
+        <div className="px-3 pb-3 pl-10 space-y-2">
+          {entry.metadata && (
+            <div className="bg-muted/50 rounded p-2 font-mono text-xs">
+              <pre className="overflow-x-auto">
+                {JSON.stringify(entry.metadata, null, 2)}
+              </pre>
+            </div>
+          )}
+          {entry.stackTrace && (
+            <div className="bg-red-500/5 border border-red-500/20 rounded p-2 font-mono text-xs text-red-400">
+              <pre className="overflow-x-auto whitespace-pre-wrap">{entry.stackTrace}</pre>
+            </div>
+          )}
+        </div>
+      )}
+    </div>
+  )
+}
+
+export function WakaLogViewer({
+  logs,
+  onLoadMore,
+  onClear,
+  onExport,
+  isStreaming = false,
+  onToggleStreaming,
+  maxLogs = 1000,
+  showTimestamp = true,
+  showSource = true,
+  autoScroll = true,
+  className,
+  title = "Logs",
+}: WakaLogViewerProps) {
+  const [searchQuery, setSearchQuery] = React.useState("")
+  const [levelFilter, setLevelFilter] = React.useState<LogLevel | "all">("all")
+  const [expandedIds, setExpandedIds] = React.useState<Set<string>>(new Set())
+  const scrollRef = React.useRef<HTMLDivElement>(null)
+
+  // Filter logs
+  const filteredLogs = React.useMemo(() => {
+    return logs
+      .filter(log => {
+        if (levelFilter !== "all" && log.level !== levelFilter) return false
+        if (searchQuery) {
+          const query = searchQuery.toLowerCase()
+          return (
+            log.message.toLowerCase().includes(query) ||
+            log.source?.toLowerCase().includes(query) ||
+            JSON.stringify(log.metadata).toLowerCase().includes(query)
+          )
+        }
+        return true
+      })
+      .slice(-maxLogs)
+  }, [logs, levelFilter, searchQuery, maxLogs])
+
+  // Auto-scroll to bottom
+  React.useEffect(() => {
+    if (autoScroll && scrollRef.current) {
+      scrollRef.current.scrollTop = scrollRef.current.scrollHeight
+    }
+  }, [filteredLogs, autoScroll])
+
+  const toggleExpand = (id: string) => {
+    setExpandedIds(prev => {
+      const next = new Set(prev)
+      if (next.has(id)) {
+        next.delete(id)
+      } else {
+        next.add(id)
+      }
+      return next
+    })
+  }
+
+  // Count by level
+  const levelCounts = React.useMemo(() => {
+    return logs.reduce((acc, log) => {
+      acc[log.level] = (acc[log.level] || 0) + 1
+      return acc
+    }, {} as Record<LogLevel, number>)
+  }, [logs])
+
+  return (
+    <div className={cn("flex flex-col h-full border rounded-lg bg-background", className)}>
+      {/* Header */}
+      <div className="flex items-center justify-between gap-4 p-3 border-b">
+        <div className="flex items-center gap-2">
+          <h3 className="font-semibold">{title}</h3>
+          <Badge variant="secondary">{filteredLogs.length}</Badge>
+          {isStreaming && (
+            <Badge variant="default" className="bg-green-500 animate-pulse">
+              Live
+            </Badge>
+          )}
+        </div>
+
+        <div className="flex items-center gap-2">
+          {/* Level counts */}
+          <div className="hidden md:flex items-center gap-1">
+            {(["error", "warn", "info", "debug"] as LogLevel[]).map(level => {
+              const config = levelConfig[level]
+              const count = levelCounts[level] || 0
+              return (
+                <Badge
+                  key={level}
+                  variant="outline"
+                  className={cn("text-xs cursor-pointer", config.color)}
+                  onClick={() => setLevelFilter(levelFilter === level ? "all" : level)}
+                >
+                  {level}: {count}
+                </Badge>
+              )
+            })}
+          </div>
+        </div>
+      </div>
+
+      {/* Toolbar */}
+      <div className="flex items-center gap-2 p-2 border-b bg-muted/30">
+        <div className="relative flex-1 max-w-sm">
+          <Search className="absolute left-2.5 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
+          <Input
+            placeholder="Rechercher..."
+            value={searchQuery}
+            onChange={(e) => setSearchQuery(e.target.value)}
+            className="pl-8 h-8"
+          />
+        </div>
+
+        <Select value={levelFilter} onValueChange={(v) => setLevelFilter(v as LogLevel | "all")}>
+          <SelectTrigger className="w-[120px] h-8">
+            <Filter className="h-4 w-4 mr-2" />
+            <SelectValue placeholder="Niveau" />
+          </SelectTrigger>
+          <SelectContent>
+            <SelectItem value="all">Tous</SelectItem>
+            <SelectItem value="error">Error</SelectItem>
+            <SelectItem value="warn">Warn</SelectItem>
+            <SelectItem value="info">Info</SelectItem>
+            <SelectItem value="debug">Debug</SelectItem>
+            <SelectItem value="trace">Trace</SelectItem>
+          </SelectContent>
+        </Select>
+
+        <div className="flex items-center gap-1">
+          {onToggleStreaming && (
+            <Button
+              variant="ghost"
+              size="sm"
+              onClick={onToggleStreaming}
+              className="h-8"
+            >
+              {isStreaming ? <Pause className="h-4 w-4" /> : <Play className="h-4 w-4" />}
+            </Button>
+          )}
+
+          {onLoadMore && (
+            <Button variant="ghost" size="sm" onClick={onLoadMore} className="h-8">
+              <RefreshCw className="h-4 w-4" />
+            </Button>
+          )}
+
+          {onExport && (
+            <Button
+              variant="ghost"
+              size="sm"
+              onClick={() => onExport(filteredLogs)}
+              className="h-8"
+            >
+              <Download className="h-4 w-4" />
+            </Button>
+          )}
+
+          {onClear && (
+            <Button variant="ghost" size="sm" onClick={onClear} className="h-8 text-destructive">
+              <Trash2 className="h-4 w-4" />
+            </Button>
+          )}
+        </div>
+      </div>
+
+      {/* Log entries */}
+      <ScrollArea ref={scrollRef} className="flex-1">
+        <div className="min-w-max">
+          {filteredLogs.length === 0 ? (
+            <div className="flex items-center justify-center h-32 text-muted-foreground">
+              Aucun log à afficher
+            </div>
+          ) : (
+            filteredLogs.map(entry => (
+              <LogEntryRow
+                key={entry.id}
+                entry={entry}
+                showTimestamp={showTimestamp}
+                showSource={showSource}
+                isExpanded={expandedIds.has(entry.id)}
+                onToggleExpand={() => toggleExpand(entry.id)}
+              />
+            ))
+          )}
+        </div>
+      </ScrollArea>
+    </div>
+  )
+}
+
+// Default sample logs for demo
+export const defaultLogs: LogEntry[] = [
+  {
+    id: "1",
+    timestamp: new Date(),
+    level: "info",
+    message: "Application started successfully",
+    source: "main",
+  },
+  {
+    id: "2",
+    timestamp: new Date(),
+    level: "debug",
+    message: "Loading configuration from /etc/app/config.yaml",
+    source: "config",
+    metadata: { path: "/etc/app/config.yaml", format: "yaml" },
+  },
+  {
+    id: "3",
+    timestamp: new Date(),
+    level: "warn",
+    message: "Deprecated API version detected, please upgrade to v2",
+    source: "api",
+  },
+  {
+    id: "4",
+    timestamp: new Date(),
+    level: "error",
+    message: "Failed to connect to database",
+    source: "db",
+    metadata: { host: "localhost", port: 5432 },
+    stackTrace: `Error: Connection refused
+    at PostgresClient.connect (/app/node_modules/pg/lib/client.js:123:15)
+    at async DatabaseService.init (/app/src/services/database.ts:45:5)
+    at async bootstrap (/app/src/main.ts:12:3)`,
+  },
+  {
+    id: "5",
+    timestamp: new Date(),
+    level: "info",
+    message: "Retry connection attempt 1/3",
+    source: "db",
+  },
+]

package/src/components/waka-loot-box/index.tsx

@@ -102,46 +102,46 @@ const rarityConfig = {
   common: {
     gradient: "from-slate-400 to-slate-600",
     glow: "shadow-slate-400/50",
-    glowColor: "#94a3b8",
+    glowColor: "hsl(var(--muted-foreground))",
     borderColor: "border-slate-400",
-    bgColor: "bg-slate-100",
-    textColor: "text-slate-600",
-    particleColors: ["#94a3b8", "#cbd5e1", "#64748b"],
+    bgColor: "bg-slate-100 dark:bg-slate-900",
+    textColor: "text-slate-600 dark:text-slate-400",
+    particleColors: ["hsl(var(--muted-foreground))", "hsl(var(--muted))", "hsl(var(--border))"],
     label: "Common",
-    beamColor: "rgba(148, 163, 184, 0.8)",
+    beamColor: "hsl(var(--muted-foreground) / 0.8)",
   },
   rare: {
     gradient: "from-blue-400 to-blue-600",
     glow: "shadow-blue-400/50",
-    glowColor: "#60a5fa",
+    glowColor: "hsl(var(--info))",
     borderColor: "border-blue-400",
-    bgColor: "bg-blue-100",
-    textColor: "text-blue-600",
-    particleColors: ["#60a5fa", "#93c5fd", "#3b82f6"],
+    bgColor: "bg-blue-100 dark:bg-blue-950",
+    textColor: "text-blue-600 dark:text-blue-400",
+    particleColors: ["hsl(var(--info))", "hsl(var(--chart-1))", "hsl(var(--primary))"],
     label: "Rare",
-    beamColor: "rgba(96, 165, 250, 0.8)",
+    beamColor: "hsl(var(--info) / 0.8)",
   },
   epic: {
     gradient: "from-purple-400 to-purple-600",
     glow: "shadow-purple-400/50",
-    glowColor: "#a855f7",
+    glowColor: "hsl(var(--chart-2))",
     borderColor: "border-purple-400",
-    bgColor: "bg-purple-100",
-    textColor: "text-purple-600",
-    particleColors: ["#a855f7", "#c084fc", "#9333ea"],
+    bgColor: "bg-purple-100 dark:bg-purple-950",
+    textColor: "text-purple-600 dark:text-purple-400",
+    particleColors: ["hsl(var(--chart-2))", "hsl(var(--chart-3))", "hsl(var(--primary))"],
     label: "Epic",
-    beamColor: "rgba(168, 85, 247, 0.8)",
+    beamColor: "hsl(var(--chart-2) / 0.8)",
   },
   legendary: {
     gradient: "from-amber-400 via-orange-500 to-red-500",
     glow: "shadow-amber-400/50",
-    glowColor: "#fbbf24",
+    glowColor: "hsl(var(--warning))",
     borderColor: "border-amber-400",
-    bgColor: "bg-amber-100",
-    textColor: "text-amber-600",
-    particleColors: ["#fbbf24", "#f59e0b", "#ef4444", "#fcd34d"],
+    bgColor: "bg-amber-100 dark:bg-amber-950",
+    textColor: "text-amber-600 dark:text-amber-400",
+    particleColors: ["hsl(var(--warning))", "hsl(var(--chart-4))", "hsl(var(--destructive))", "hsl(var(--chart-5))"],
     label: "Legendary",
-    beamColor: "rgba(251, 191, 36, 0.9)",
+    beamColor: "hsl(var(--warning) / 0.9)",
   },
 }