@wakastellar/ui 2.1.2 → 2.3.2

package/src/components/waka-build-matrix/index.tsx

@@ -0,0 +1,396 @@
+"use client"
+
+import * as React from "react"
+import { cn } from "../../utils/cn"
+import { Badge } from "../badge"
+import { Button } from "../button"
+import { ScrollArea } from "../scroll-area"
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "../tooltip"
+import {
+  CheckCircle2,
+  XCircle,
+  Loader2,
+  Clock,
+  SkipForward,
+  RefreshCw,
+  Grid3X3,
+  ChevronDown,
+  ChevronRight,
+  ExternalLink,
+} from "lucide-react"
+
+export type BuildStatus = "success" | "failed" | "running" | "pending" | "skipped" | "cancelled"
+
+export interface BuildCell {
+  id: string
+  status: BuildStatus
+  duration?: number // in seconds
+  startedAt?: Date
+  finishedAt?: Date
+  url?: string
+  logs?: string
+}
+
+export interface BuildMatrixRow {
+  label: string
+  description?: string
+  cells: BuildCell[]
+}
+
+export interface WakaBuildMatrixProps {
+  /** Column headers (e.g., OS names or versions) */
+  columns: string[]
+  /** Row data with cells */
+  rows: BuildMatrixRow[]
+  /** Callback when clicking on a cell */
+  onCellClick?: (rowIndex: number, colIndex: number, cell: BuildCell) => void
+  /** Callback when retrying a build */
+  onRetry?: (rowIndex: number, colIndex: number) => void
+  /** Callback when viewing logs */
+  onViewLogs?: (cell: BuildCell) => void
+  /** Title of the matrix */
+  title?: string
+  /** Show duration in cells */
+  showDuration?: boolean
+  /** Custom class name */
+  className?: string
+}
+
+const statusConfig: Record<BuildStatus, { icon: React.ElementType; color: string; bgColor: string; label: string }> = {
+  success: { icon: CheckCircle2, color: "text-green-500", bgColor: "bg-green-500", label: "Success" },
+  failed: { icon: XCircle, color: "text-red-500", bgColor: "bg-red-500", label: "Failed" },
+  running: { icon: Loader2, color: "text-blue-500", bgColor: "bg-blue-500", label: "Running" },
+  pending: { icon: Clock, color: "text-gray-400", bgColor: "bg-gray-400", label: "Pending" },
+  skipped: { icon: SkipForward, color: "text-gray-500", bgColor: "bg-gray-500", label: "Skipped" },
+  cancelled: { icon: XCircle, color: "text-orange-500", bgColor: "bg-orange-500", label: "Cancelled" },
+}
+
+function formatDuration(seconds: number): string {
+  if (seconds < 60) return `${seconds}s`
+  const minutes = Math.floor(seconds / 60)
+  const secs = seconds % 60
+  if (minutes < 60) return `${minutes}m ${secs}s`
+  const hours = Math.floor(minutes / 60)
+  return `${hours}h ${minutes % 60}m`
+}
+
+function BuildCellComponent({
+  cell,
+  onClick,
+  showDuration,
+}: {
+  cell: BuildCell
+  onClick?: () => void
+  showDuration: boolean
+}) {
+  const config = statusConfig[cell.status]
+  const Icon = config.icon
+
+  return (
+    <TooltipProvider>
+      <Tooltip>
+        <TooltipTrigger asChild>
+          <button
+            className={cn(
+              "w-12 h-12 rounded-lg flex flex-col items-center justify-center gap-0.5 transition-all",
+              "hover:scale-105 hover:shadow-md cursor-pointer",
+              "border border-transparent",
+              cell.status === "success" && "bg-green-500/10 hover:border-green-500/50",
+              cell.status === "failed" && "bg-red-500/10 hover:border-red-500/50",
+              cell.status === "running" && "bg-blue-500/10 hover:border-blue-500/50",
+              cell.status === "pending" && "bg-gray-500/10 hover:border-gray-500/50",
+              cell.status === "skipped" && "bg-gray-500/5 hover:border-gray-500/30",
+              cell.status === "cancelled" && "bg-orange-500/10 hover:border-orange-500/50"
+            )}
+            onClick={onClick}
+          >
+            <Icon
+              className={cn(
+                "h-5 w-5",
+                config.color,
+                cell.status === "running" && "animate-spin"
+              )}
+            />
+            {showDuration && cell.duration && (
+              <span className="text-[10px] text-muted-foreground">
+                {formatDuration(cell.duration)}
+              </span>
+            )}
+          </button>
+        </TooltipTrigger>
+        <TooltipContent>
+          <div className="space-y-1">
+            <div className="font-medium">{config.label}</div>
+            {cell.duration && <div className="text-xs">Duration: {formatDuration(cell.duration)}</div>}
+            {cell.startedAt && (
+              <div className="text-xs">Started: {cell.startedAt.toLocaleString()}</div>
+            )}
+          </div>
+        </TooltipContent>
+      </Tooltip>
+    </TooltipProvider>
+  )
+}
+
+export function WakaBuildMatrix({
+  columns,
+  rows,
+  onCellClick,
+  onRetry,
+  onViewLogs,
+  title = "Build Matrix",
+  showDuration = true,
+  className,
+}: WakaBuildMatrixProps) {
+  const [expandedRows, setExpandedRows] = React.useState<Set<number>>(new Set())
+
+  const toggleRow = (index: number) => {
+    setExpandedRows((prev) => {
+      const next = new Set(prev)
+      if (next.has(index)) {
+        next.delete(index)
+      } else {
+        next.add(index)
+      }
+      return next
+    })
+  }
+
+  // Calculate summary stats
+  const stats = React.useMemo(() => {
+    let total = 0
+    let success = 0
+    let failed = 0
+    let running = 0
+
+    rows.forEach((row) => {
+      row.cells.forEach((cell) => {
+        total++
+        if (cell.status === "success") success++
+        if (cell.status === "failed") failed++
+        if (cell.status === "running") running++
+      })
+    })
+
+    return { total, success, failed, running, passRate: total > 0 ? (success / total) * 100 : 0 }
+  }, [rows])
+
+  return (
+    <div className={cn("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">
+          <Grid3X3 className="h-5 w-5" />
+          <h3 className="font-semibold">{title}</h3>
+        </div>
+
+        <div className="flex items-center gap-2">
+          <Badge variant="secondary" className="text-xs">
+            {stats.total} jobs
+          </Badge>
+          {stats.success > 0 && (
+            <Badge className="bg-green-500 text-xs">{stats.success} passed</Badge>
+          )}
+          {stats.failed > 0 && (
+            <Badge className="bg-red-500 text-xs">{stats.failed} failed</Badge>
+          )}
+          {stats.running > 0 && (
+            <Badge className="bg-blue-500 text-xs">{stats.running} running</Badge>
+          )}
+        </div>
+      </div>
+
+      {/* Legend */}
+      <div className="flex items-center gap-4 px-3 py-2 border-b bg-muted/30 text-xs flex-wrap">
+        {Object.entries(statusConfig).map(([status, config]) => {
+          const Icon = config.icon
+          return (
+            <div key={status} className="flex items-center gap-1.5">
+              <Icon className={cn("h-3 w-3", config.color)} />
+              <span>{config.label}</span>
+            </div>
+          )
+        })}
+      </div>
+
+      {/* Matrix */}
+      <ScrollArea className="max-h-[500px]">
+        <div className="p-3">
+          <table className="w-full">
+            <thead>
+              <tr>
+                <th className="text-left p-2 text-sm font-medium text-muted-foreground w-48">
+                  Configuration
+                </th>
+                {columns.map((col, i) => (
+                  <th key={i} className="p-2 text-center text-sm font-medium text-muted-foreground">
+                    {col}
+                  </th>
+                ))}
+              </tr>
+            </thead>
+            <tbody>
+              {rows.map((row, rowIndex) => {
+                const isExpanded = expandedRows.has(rowIndex)
+                const rowStats = {
+                  success: row.cells.filter((c) => c.status === "success").length,
+                  failed: row.cells.filter((c) => c.status === "failed").length,
+                  total: row.cells.length,
+                }
+
+                return (
+                  <React.Fragment key={rowIndex}>
+                    <tr className="border-t hover:bg-muted/30">
+                      <td className="p-2">
+                        <button
+                          className="flex items-center gap-2 text-left w-full"
+                          onClick={() => toggleRow(rowIndex)}
+                        >
+                          {isExpanded ? (
+                            <ChevronDown className="h-4 w-4 text-muted-foreground" />
+                          ) : (
+                            <ChevronRight className="h-4 w-4 text-muted-foreground" />
+                          )}
+                          <div>
+                            <div className="font-medium text-sm">{row.label}</div>
+                            {row.description && (
+                              <div className="text-xs text-muted-foreground">{row.description}</div>
+                            )}
+                          </div>
+                        </button>
+                      </td>
+                      {row.cells.map((cell, colIndex) => (
+                        <td key={colIndex} className="p-2">
+                          <div className="flex justify-center">
+                            <BuildCellComponent
+                              cell={cell}
+                              onClick={() => onCellClick?.(rowIndex, colIndex, cell)}
+                              showDuration={showDuration}
+                            />
+                          </div>
+                        </td>
+                      ))}
+                    </tr>
+
+                    {/* Expanded row details */}
+                    {isExpanded && (
+                      <tr className="bg-muted/20">
+                        <td colSpan={columns.length + 1} className="p-4">
+                          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+                            {row.cells.map((cell, colIndex) => {
+                              const config = statusConfig[cell.status]
+                              const Icon = config.icon
+                              return (
+                                <div
+                                  key={colIndex}
+                                  className="border rounded-lg p-3 bg-background"
+                                >
+                                  <div className="flex items-center justify-between mb-2">
+                                    <div className="flex items-center gap-2">
+                                      <Icon className={cn("h-4 w-4", config.color)} />
+                                      <span className="font-medium text-sm">{columns[colIndex]}</span>
+                                    </div>
+                                    <Badge variant="outline" className={config.color}>
+                                      {config.label}
+                                    </Badge>
+                                  </div>
+                                  <div className="text-xs text-muted-foreground space-y-1">
+                                    {cell.duration && (
+                                      <div>Duration: {formatDuration(cell.duration)}</div>
+                                    )}
+                                    {cell.startedAt && (
+                                      <div>Started: {cell.startedAt.toLocaleTimeString()}</div>
+                                    )}
+                                  </div>
+                                  <div className="flex items-center gap-2 mt-3">
+                                    {cell.url && (
+                                      <Button
+                                        variant="outline"
+                                        size="sm"
+                                        className="h-7 text-xs"
+                                        onClick={() => window.open(cell.url, "_blank")}
+                                      >
+                                        <ExternalLink className="h-3 w-3 mr-1" />
+                                        View
+                                      </Button>
+                                    )}
+                                    {cell.status === "failed" && onRetry && (
+                                      <Button
+                                        variant="outline"
+                                        size="sm"
+                                        className="h-7 text-xs"
+                                        onClick={() => onRetry(rowIndex, colIndex)}
+                                      >
+                                        <RefreshCw className="h-3 w-3 mr-1" />
+                                        Retry
+                                      </Button>
+                                    )}
+                                  </div>
+                                </div>
+                              )
+                            })}
+                          </div>
+                        </td>
+                      </tr>
+                    )}
+                  </React.Fragment>
+                )
+              })}
+            </tbody>
+          </table>
+        </div>
+      </ScrollArea>
+
+      {/* Footer with pass rate */}
+      <div className="flex items-center justify-between px-3 py-2 border-t bg-muted/30 text-sm">
+        <span className="text-muted-foreground">
+          Pass Rate: <span className="font-medium text-foreground">{stats.passRate.toFixed(1)}%</span>
+        </span>
+        <span className="text-muted-foreground">
+          {stats.success}/{stats.total} jobs passed
+        </span>
+      </div>
+    </div>
+  )
+}
+
+// Default sample data for demo
+export const defaultBuildMatrixColumns = ["Ubuntu 22.04", "Ubuntu 20.04", "macOS 13", "Windows 2022"]
+
+export const defaultBuildMatrixRows: BuildMatrixRow[] = [
+  {
+    label: "Node.js 20",
+    description: "LTS version",
+    cells: [
+      { id: "1", status: "success", duration: 125 },
+      { id: "2", status: "success", duration: 142 },
+      { id: "3", status: "success", duration: 98 },
+      { id: "4", status: "success", duration: 156 },
+    ],
+  },
+  {
+    label: "Node.js 18",
+    description: "Previous LTS",
+    cells: [
+      { id: "5", status: "success", duration: 118 },
+      { id: "6", status: "success", duration: 135 },
+      { id: "7", status: "failed", duration: 45 },
+      { id: "8", status: "success", duration: 162 },
+    ],
+  },
+  {
+    label: "Node.js 21",
+    description: "Current",
+    cells: [
+      { id: "9", status: "running", startedAt: new Date() },
+      { id: "10", status: "pending" },
+      { id: "11", status: "pending" },
+      { id: "12", status: "pending" },
+    ],
+  },
+]

package/src/components/waka-command-bar/index.tsx

@@ -2,6 +2,7 @@
 
 import * as React from "react"
 import { cn } from "../../utils/cn"
+import { safeNavigate } from "../../utils/security"
 import { Command, Search, ArrowRight, CornerDownLeft, Hash, Settings, User, FileText, Zap } from "lucide-react"
 
 // ============================================================================
@@ -214,7 +215,7 @@ export function WakaCommandBar({
     onSelect?.(item)
     item.action?.()
     if (item.href) {
-      window.location.href = item.href
+      safeNavigate(item.href)
     }
     onOpenChange(false)
   }