@wakastellar/ui 2.1.2 → 2.3.2

package/src/components/waka-artifact-list/index.tsx

@@ -0,0 +1,416 @@
+"use client"
+
+import * as React from "react"
+import { cn } from "../../utils/cn"
+import { Badge } from "../badge"
+import { Button } from "../button"
+import { Input } from "../input"
+import { ScrollArea } from "../scroll-area"
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "../tooltip"
+import {
+  Package,
+  Download,
+  Trash2,
+  Search,
+  FileArchive,
+  FileText,
+  Image,
+  File,
+  Folder,
+  Clock,
+  HardDrive,
+  ExternalLink,
+  Copy,
+  CheckCircle2,
+} from "lucide-react"
+
+export interface Artifact {
+  id: string
+  name: string
+  type: "archive" | "binary" | "log" | "report" | "image" | "other"
+  size: number // in bytes
+  createdAt: Date
+  expiresAt?: Date
+  downloadUrl?: string
+  sha256?: string
+  buildId?: string
+  metadata?: Record<string, string>
+}
+
+export interface WakaArtifactListProps {
+  /** List of artifacts */
+  artifacts: Artifact[]
+  /** Callback when downloading an artifact */
+  onDownload?: (artifact: Artifact) => void
+  /** Callback when deleting an artifact */
+  onDelete?: (artifact: Artifact) => void
+  /** Callback when viewing artifact details */
+  onView?: (artifact: Artifact) => void
+  /** Title */
+  title?: string
+  /** Show expiration */
+  showExpiration?: boolean
+  /** Allow deletion */
+  allowDelete?: boolean
+  /** Custom class name */
+  className?: string
+}
+
+const typeConfig: Record<Artifact["type"], { icon: React.ElementType; color: string }> = {
+  archive: { icon: FileArchive, color: "text-orange-500" },
+  binary: { icon: Package, color: "text-blue-500" },
+  log: { icon: FileText, color: "text-gray-500" },
+  report: { icon: FileText, color: "text-green-500" },
+  image: { icon: Image, color: "text-purple-500" },
+  other: { icon: File, color: "text-muted-foreground" },
+}
+
+function formatBytes(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 parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + " " + sizes[i]
+}
+
+function formatDate(date: Date): string {
+  return date.toLocaleDateString("fr-FR", {
+    day: "2-digit",
+    month: "short",
+    hour: "2-digit",
+    minute: "2-digit",
+  })
+}
+
+function isExpiringSoon(date?: Date): boolean {
+  if (!date) return false
+  const diff = date.getTime() - Date.now()
+  return diff > 0 && diff < 24 * 60 * 60 * 1000 // Less than 24h
+}
+
+function ArtifactRow({
+  artifact,
+  onDownload,
+  onDelete,
+  onView,
+  showExpiration,
+  allowDelete,
+}: {
+  artifact: Artifact
+  onDownload?: (artifact: Artifact) => void
+  onDelete?: (artifact: Artifact) => void
+  onView?: (artifact: Artifact) => void
+  showExpiration: boolean
+  allowDelete: boolean
+}) {
+  const [copied, setCopied] = React.useState(false)
+  const config = typeConfig[artifact.type]
+  const Icon = config.icon
+  const expiringSoon = isExpiringSoon(artifact.expiresAt)
+
+  const copyHash = () => {
+    if (artifact.sha256) {
+      navigator.clipboard.writeText(artifact.sha256)
+      setCopied(true)
+      setTimeout(() => setCopied(false), 2000)
+    }
+  }
+
+  return (
+    <div className="flex items-center gap-4 p-3 border-b hover:bg-muted/30 transition-colors">
+      {/* Icon */}
+      <Icon className={cn("h-8 w-8 shrink-0", config.color)} />
+
+      {/* Info */}
+      <div className="flex-1 min-w-0">
+        <div className="flex items-center gap-2">
+          <span
+            className="font-medium truncate cursor-pointer hover:text-primary"
+            onClick={() => onView?.(artifact)}
+          >
+            {artifact.name}
+          </span>
+          <Badge variant="outline" className="text-xs capitalize">
+            {artifact.type}
+          </Badge>
+        </div>
+        <div className="flex items-center gap-3 text-xs text-muted-foreground mt-1">
+          <span className="flex items-center gap-1">
+            <HardDrive className="h-3 w-3" />
+            {formatBytes(artifact.size)}
+          </span>
+          <span className="flex items-center gap-1">
+            <Clock className="h-3 w-3" />
+            {formatDate(artifact.createdAt)}
+          </span>
+          {showExpiration && artifact.expiresAt && (
+            <span className={cn("flex items-center gap-1", expiringSoon && "text-yellow-500")}>
+              Expires: {formatDate(artifact.expiresAt)}
+            </span>
+          )}
+        </div>
+      </div>
+
+      {/* SHA256 */}
+      {artifact.sha256 && (
+        <TooltipProvider>
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <button
+                className="hidden md:flex items-center gap-1 text-xs text-muted-foreground hover:text-foreground"
+                onClick={copyHash}
+              >
+                {copied ? (
+                  <CheckCircle2 className="h-3 w-3 text-green-500" />
+                ) : (
+                  <Copy className="h-3 w-3" />
+                )}
+                <code className="truncate max-w-[100px]">{artifact.sha256.slice(0, 12)}...</code>
+              </button>
+            </TooltipTrigger>
+            <TooltipContent>
+              <div className="space-y-1">
+                <div className="text-xs font-medium">SHA256</div>
+                <code className="text-xs break-all">{artifact.sha256}</code>
+              </div>
+            </TooltipContent>
+          </Tooltip>
+        </TooltipProvider>
+      )}
+
+      {/* Actions */}
+      <div className="flex items-center gap-1 shrink-0">
+        {artifact.downloadUrl && (
+          <TooltipProvider>
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <Button
+                  variant="ghost"
+                  size="sm"
+                  className="h-8 w-8 p-0"
+                  onClick={() => onDownload?.(artifact)}
+                >
+                  <Download className="h-4 w-4" />
+                </Button>
+              </TooltipTrigger>
+              <TooltipContent>Download</TooltipContent>
+            </Tooltip>
+          </TooltipProvider>
+        )}
+
+        <TooltipProvider>
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <Button
+                variant="ghost"
+                size="sm"
+                className="h-8 w-8 p-0"
+                onClick={() => onView?.(artifact)}
+              >
+                <ExternalLink className="h-4 w-4" />
+              </Button>
+            </TooltipTrigger>
+            <TooltipContent>View Details</TooltipContent>
+          </Tooltip>
+        </TooltipProvider>
+
+        {allowDelete && (
+          <TooltipProvider>
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <Button
+                  variant="ghost"
+                  size="sm"
+                  className="h-8 w-8 p-0 text-destructive hover:text-destructive"
+                  onClick={() => onDelete?.(artifact)}
+                >
+                  <Trash2 className="h-4 w-4" />
+                </Button>
+              </TooltipTrigger>
+              <TooltipContent>Delete</TooltipContent>
+            </Tooltip>
+          </TooltipProvider>
+        )}
+      </div>
+    </div>
+  )
+}
+
+export function WakaArtifactList({
+  artifacts,
+  onDownload,
+  onDelete,
+  onView,
+  title = "Artifacts",
+  showExpiration = true,
+  allowDelete = false,
+  className,
+}: WakaArtifactListProps) {
+  const [searchQuery, setSearchQuery] = React.useState("")
+  const [typeFilter, setTypeFilter] = React.useState<Artifact["type"] | "all">("all")
+
+  // Filter artifacts
+  const filteredArtifacts = React.useMemo(() => {
+    return artifacts.filter((artifact) => {
+      if (typeFilter !== "all" && artifact.type !== typeFilter) return false
+      if (searchQuery) {
+        return artifact.name.toLowerCase().includes(searchQuery.toLowerCase())
+      }
+      return true
+    })
+  }, [artifacts, typeFilter, searchQuery])
+
+  // Calculate total size
+  const totalSize = artifacts.reduce((acc, a) => acc + a.size, 0)
+
+  // Count by type
+  const typeCounts = React.useMemo(() => {
+    return artifacts.reduce((acc, a) => {
+      acc[a.type] = (acc[a.type] || 0) + 1
+      return acc
+    }, {} as Record<string, number>)
+  }, [artifacts])
+
+  return (
+    <div className={cn("flex flex-col 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-3">
+          <Package className="h-5 w-5" />
+          <h3 className="font-semibold">{title}</h3>
+          <Badge variant="secondary">{artifacts.length}</Badge>
+        </div>
+
+        <div className="flex items-center gap-2 text-sm text-muted-foreground">
+          <HardDrive className="h-4 w-4" />
+          Total: {formatBytes(totalSize)}
+        </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="Search artifacts..."
+            value={searchQuery}
+            onChange={(e) => setSearchQuery(e.target.value)}
+            className="pl-8 h-8"
+          />
+        </div>
+
+        <div className="flex items-center gap-1 flex-wrap">
+          <Button
+            variant={typeFilter === "all" ? "default" : "ghost"}
+            size="sm"
+            className="h-7 text-xs"
+            onClick={() => setTypeFilter("all")}
+          >
+            All
+          </Button>
+          {Object.entries(typeCounts).map(([type, count]) => {
+            const config = typeConfig[type as Artifact["type"]]
+            const Icon = config.icon
+            return (
+              <Button
+                key={type}
+                variant={typeFilter === type ? "default" : "ghost"}
+                size="sm"
+                className="h-7 text-xs"
+                onClick={() => setTypeFilter(type as Artifact["type"])}
+              >
+                <Icon className={cn("h-3 w-3 mr-1", config.color)} />
+                {type} ({count})
+              </Button>
+            )
+          })}
+        </div>
+      </div>
+
+      {/* Artifact list */}
+      <ScrollArea className="flex-1 max-h-[400px]">
+        {filteredArtifacts.length === 0 ? (
+          <div className="flex flex-col items-center justify-center h-32 text-muted-foreground">
+            <Folder className="h-8 w-8 mb-2" />
+            <span>No artifacts found</span>
+          </div>
+        ) : (
+          filteredArtifacts.map((artifact) => (
+            <ArtifactRow
+              key={artifact.id}
+              artifact={artifact}
+              onDownload={onDownload}
+              onDelete={onDelete}
+              onView={onView}
+              showExpiration={showExpiration}
+              allowDelete={allowDelete}
+            />
+          ))
+        )}
+      </ScrollArea>
+    </div>
+  )
+}
+
+// Default sample artifacts for demo
+export const defaultArtifacts: Artifact[] = [
+  {
+    id: "1",
+    name: "build-linux-x64.tar.gz",
+    type: "archive",
+    size: 45 * 1024 * 1024,
+    createdAt: new Date(Date.now() - 2 * 3600000),
+    expiresAt: new Date(Date.now() + 7 * 24 * 3600000),
+    downloadUrl: "#",
+    sha256: "a1b2c3d4e5f6g7h8i9j0k1l2m3n4o5p6q7r8s9t0u1v2w3x4y5z6",
+  },
+  {
+    id: "2",
+    name: "build-darwin-arm64.tar.gz",
+    type: "archive",
+    size: 42 * 1024 * 1024,
+    createdAt: new Date(Date.now() - 2 * 3600000),
+    expiresAt: new Date(Date.now() + 7 * 24 * 3600000),
+    downloadUrl: "#",
+    sha256: "b2c3d4e5f6g7h8i9j0k1l2m3n4o5p6q7r8s9t0u1v2w3x4y5z6a1",
+  },
+  {
+    id: "3",
+    name: "test-results.xml",
+    type: "report",
+    size: 256 * 1024,
+    createdAt: new Date(Date.now() - 2 * 3600000),
+    downloadUrl: "#",
+  },
+  {
+    id: "4",
+    name: "coverage-report.html",
+    type: "report",
+    size: 1.2 * 1024 * 1024,
+    createdAt: new Date(Date.now() - 2 * 3600000),
+    downloadUrl: "#",
+  },
+  {
+    id: "5",
+    name: "build.log",
+    type: "log",
+    size: 512 * 1024,
+    createdAt: new Date(Date.now() - 2 * 3600000),
+    downloadUrl: "#",
+  },
+  {
+    id: "6",
+    name: "docker-image.tar",
+    type: "image",
+    size: 250 * 1024 * 1024,
+    createdAt: new Date(Date.now() - 2 * 3600000),
+    expiresAt: new Date(Date.now() + 12 * 3600000), // Expiring soon
+    downloadUrl: "#",
+    sha256: "c3d4e5f6g7h8i9j0k1l2m3n4o5p6q7r8s9t0u1v2w3x4y5z6a1b2",
+  },
+]

package/src/components/waka-badge-showcase/index.tsx

@@ -55,41 +55,42 @@ export interface WakaBadgeShowcaseProps {
 // Rarity Configuration
 // ============================================================================
 
+// Rarity configuration using CSS variables for theme support
 const rarityConfig = {
   common: {
     gradient: "from-slate-400 to-slate-500",
-    glow: "#94a3b8",
+    glow: "hsl(var(--muted-foreground))",
     border: "border-slate-400",
     bg: "bg-slate-100 dark:bg-slate-800",
     text: "text-slate-600 dark:text-slate-300",
-    shine: "rgba(148, 163, 184, 0.6)",
+    shine: "hsl(var(--muted-foreground) / 0.6)",
     label: "Common",
   },
   rare: {
     gradient: "from-blue-400 to-blue-600",
-    glow: "#3b82f6",
+    glow: "hsl(var(--info))",
     border: "border-blue-400",
     bg: "bg-blue-100 dark:bg-blue-900",
     text: "text-blue-600 dark:text-blue-300",
-    shine: "rgba(59, 130, 246, 0.6)",
+    shine: "hsl(var(--info) / 0.6)",
     label: "Rare",
   },
   epic: {
     gradient: "from-purple-400 to-purple-600",
-    glow: "#a855f7",
+    glow: "hsl(var(--chart-3))",
     border: "border-purple-400",
     bg: "bg-purple-100 dark:bg-purple-900",
     text: "text-purple-600 dark:text-purple-300",
-    shine: "rgba(168, 85, 247, 0.6)",
+    shine: "hsl(var(--chart-3) / 0.6)",
     label: "Epic",
   },
   legendary: {
     gradient: "from-amber-400 via-orange-500 to-red-500",
-    glow: "#f59e0b",
+    glow: "hsl(var(--warning))",
     border: "border-amber-400",
     bg: "bg-amber-100 dark:bg-amber-900",
     text: "text-amber-600 dark:text-amber-300",
-    shine: "rgba(245, 158, 11, 0.8)",
+    shine: "hsl(var(--warning) / 0.8)",
     label: "Legendary",
   },
 }
@@ -195,9 +196,9 @@ function NewBadgeIndicator() {
     <>
       <div className="absolute -top-1 -right-1 z-20">
         <span className="relative flex h-4 w-4">
-          <span className="animate-badge-ping absolute inline-flex h-full w-full rounded-full bg-green-400 opacity-75" />
-          <span className="relative inline-flex rounded-full h-4 w-4 bg-green-500 items-center justify-center">
-            <span className="text-[8px] font-bold text-white">!</span>
+          <span className="animate-badge-ping absolute inline-flex h-full w-full rounded-full bg-success opacity-75" />
+          <span className="relative inline-flex rounded-full h-4 w-4 bg-success items-center justify-center">
+            <span className="text-[8px] font-bold text-success-foreground">!</span>
           </span>
         </span>
       </div>