@wakastellar/ui 2.1.2 → 2.3.0

package/src/components/waka-dependency-tree/index.tsx

@@ -0,0 +1,542 @@
+"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,
+  ChevronDown,
+  ChevronRight,
+  Search,
+  AlertTriangle,
+  AlertCircle,
+  Shield,
+  ShieldAlert,
+  ExternalLink,
+  GitBranch,
+  ArrowUpCircle,
+} from "lucide-react"
+
+export type DependencyType = "direct" | "transitive" | "dev" | "peer" | "optional"
+export type VulnSeverity = "critical" | "high" | "medium" | "low" | "none"
+
+export interface Dependency {
+  id: string
+  name: string
+  version: string
+  latestVersion?: string
+  type: DependencyType
+  license?: string
+  vulnerabilities?: {
+    critical: number
+    high: number
+    medium: number
+    low: number
+  }
+  outdated?: boolean
+  children?: Dependency[]
+  size?: number // in bytes
+  repository?: string
+}
+
+export interface WakaDependencyTreeProps {
+  /** Root dependencies */
+  dependencies: Dependency[]
+  /** Callback when clicking on a dependency */
+  onDependencyClick?: (dep: Dependency) => void
+  /** Callback when upgrading a dependency */
+  onUpgrade?: (dep: Dependency) => void
+  /** Title */
+  title?: string
+  /** Show dev dependencies */
+  showDevDeps?: boolean
+  /** Show only vulnerable */
+  showVulnerableOnly?: boolean
+  /** Custom class name */
+  className?: string
+}
+
+const typeConfig: Record<DependencyType, { label: string; color: string }> = {
+  direct: { label: "Direct", color: "bg-blue-500" },
+  transitive: { label: "Transitive", color: "bg-gray-500" },
+  dev: { label: "Dev", color: "bg-purple-500" },
+  peer: { label: "Peer", color: "bg-orange-500" },
+  optional: { label: "Optional", color: "bg-cyan-500" },
+}
+
+const vulnColors: Record<VulnSeverity, string> = {
+  critical: "text-red-600",
+  high: "text-orange-500",
+  medium: "text-yellow-500",
+  low: "text-blue-500",
+  none: "text-green-500",
+}
+
+function getHighestSeverity(vuln?: Dependency["vulnerabilities"]): VulnSeverity {
+  if (!vuln) return "none"
+  if (vuln.critical > 0) return "critical"
+  if (vuln.high > 0) return "high"
+  if (vuln.medium > 0) return "medium"
+  if (vuln.low > 0) return "low"
+  return "none"
+}
+
+function getTotalVulns(vuln?: Dependency["vulnerabilities"]): number {
+  if (!vuln) return 0
+  return vuln.critical + vuln.high + vuln.medium + vuln.low
+}
+
+function formatBytes(bytes?: number): string {
+  if (!bytes) return ""
+  if (bytes < 1024) return `${bytes} B`
+  const k = 1024
+  const sizes = ["B", "KB", "MB"]
+  const i = Math.floor(Math.log(bytes) / Math.log(k))
+  return parseFloat((bytes / Math.pow(k, i)).toFixed(1)) + " " + sizes[i]
+}
+
+function DependencyNode({
+  dependency,
+  depth,
+  isExpanded,
+  onToggle,
+  onDependencyClick,
+  onUpgrade,
+}: {
+  dependency: Dependency
+  depth: number
+  isExpanded: boolean
+  onToggle: () => void
+  onDependencyClick?: (dep: Dependency) => void
+  onUpgrade?: (dep: Dependency) => void
+}) {
+  const hasChildren = dependency.children && dependency.children.length > 0
+  const severity = getHighestSeverity(dependency.vulnerabilities)
+  const totalVulns = getTotalVulns(dependency.vulnerabilities)
+  const typeConf = typeConfig[dependency.type]
+
+  return (
+    <div
+      className={cn(
+        "flex items-center gap-2 px-2 py-1.5 hover:bg-muted/50 transition-colors rounded",
+        severity === "critical" && "bg-red-500/5",
+        severity === "high" && "bg-orange-500/5"
+      )}
+      style={{ paddingLeft: `${depth * 20 + 8}px` }}
+    >
+      {/* Expand button */}
+      <button
+        className="w-5 h-5 flex items-center justify-center text-muted-foreground"
+        onClick={onToggle}
+        disabled={!hasChildren}
+      >
+        {hasChildren ? (
+          isExpanded ? (
+            <ChevronDown className="h-4 w-4" />
+          ) : (
+            <ChevronRight className="h-4 w-4" />
+          )
+        ) : (
+          <span className="w-4" />
+        )}
+      </button>
+
+      {/* Package icon with severity indicator */}
+      <div className="relative">
+        <Package className="h-4 w-4 text-muted-foreground" />
+        {severity !== "none" && (
+          <div className={cn("absolute -top-1 -right-1 w-2 h-2 rounded-full",
+            severity === "critical" ? "bg-red-500" :
+            severity === "high" ? "bg-orange-500" :
+            severity === "medium" ? "bg-yellow-500" : "bg-blue-500"
+          )} />
+        )}
+      </div>
+
+      {/* Package name */}
+      <button
+        className="font-medium text-sm hover:text-primary hover:underline"
+        onClick={() => onDependencyClick?.(dependency)}
+      >
+        {dependency.name}
+      </button>
+
+      {/* Version */}
+      <code className="text-xs bg-muted px-1.5 py-0.5 rounded">
+        {dependency.version}
+      </code>
+
+      {/* Type badge */}
+      <Badge variant="outline" className="text-xs">
+        {typeConf.label}
+      </Badge>
+
+      {/* Vulnerabilities */}
+      {totalVulns > 0 && (
+        <TooltipProvider>
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <Badge className={cn("text-xs text-white",
+                severity === "critical" ? "bg-red-500" :
+                severity === "high" ? "bg-orange-500" :
+                severity === "medium" ? "bg-yellow-500" : "bg-blue-500"
+              )}>
+                <ShieldAlert className="h-3 w-3 mr-1" />
+                {totalVulns}
+              </Badge>
+            </TooltipTrigger>
+            <TooltipContent>
+              <div className="space-y-1 text-xs">
+                {dependency.vulnerabilities?.critical! > 0 && (
+                  <div className="text-red-500">{dependency.vulnerabilities?.critical} critical</div>
+                )}
+                {dependency.vulnerabilities?.high! > 0 && (
+                  <div className="text-orange-500">{dependency.vulnerabilities?.high} high</div>
+                )}
+                {dependency.vulnerabilities?.medium! > 0 && (
+                  <div className="text-yellow-500">{dependency.vulnerabilities?.medium} medium</div>
+                )}
+                {dependency.vulnerabilities?.low! > 0 && (
+                  <div className="text-blue-500">{dependency.vulnerabilities?.low} low</div>
+                )}
+              </div>
+            </TooltipContent>
+          </Tooltip>
+        </TooltipProvider>
+      )}
+
+      {/* Outdated indicator */}
+      {dependency.outdated && dependency.latestVersion && (
+        <TooltipProvider>
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <Button
+                variant="ghost"
+                size="sm"
+                className="h-6 px-2 text-xs text-yellow-500"
+                onClick={(e) => {
+                  e.stopPropagation()
+                  onUpgrade?.(dependency)
+                }}
+              >
+                <ArrowUpCircle className="h-3 w-3 mr-1" />
+                {dependency.latestVersion}
+              </Button>
+            </TooltipTrigger>
+            <TooltipContent>Upgrade to {dependency.latestVersion}</TooltipContent>
+          </Tooltip>
+        </TooltipProvider>
+      )}
+
+      {/* License */}
+      {dependency.license && (
+        <span className="text-xs text-muted-foreground ml-auto">
+          {dependency.license}
+        </span>
+      )}
+
+      {/* Size */}
+      {dependency.size && (
+        <span className="text-xs text-muted-foreground">
+          {formatBytes(dependency.size)}
+        </span>
+      )}
+    </div>
+  )
+}
+
+function DependencyTree({
+  dependencies,
+  depth,
+  expandedIds,
+  onToggle,
+  onDependencyClick,
+  onUpgrade,
+  searchQuery,
+}: {
+  dependencies: Dependency[]
+  depth: number
+  expandedIds: Set<string>
+  onToggle: (id: string) => void
+  onDependencyClick?: (dep: Dependency) => void
+  onUpgrade?: (dep: Dependency) => void
+  searchQuery: string
+}) {
+  return (
+    <>
+      {dependencies.map((dep) => {
+        const isExpanded = expandedIds.has(dep.id)
+        const matchesSearch = !searchQuery || dep.name.toLowerCase().includes(searchQuery.toLowerCase())
+
+        if (!matchesSearch && !dep.children?.some(c => c.name.toLowerCase().includes(searchQuery.toLowerCase()))) {
+          return null
+        }
+
+        return (
+          <React.Fragment key={dep.id}>
+            <DependencyNode
+              dependency={dep}
+              depth={depth}
+              isExpanded={isExpanded}
+              onToggle={() => onToggle(dep.id)}
+              onDependencyClick={onDependencyClick}
+              onUpgrade={onUpgrade}
+            />
+            {isExpanded && dep.children && (
+              <DependencyTree
+                dependencies={dep.children}
+                depth={depth + 1}
+                expandedIds={expandedIds}
+                onToggle={onToggle}
+                onDependencyClick={onDependencyClick}
+                onUpgrade={onUpgrade}
+                searchQuery={searchQuery}
+              />
+            )}
+          </React.Fragment>
+        )
+      })}
+    </>
+  )
+}
+
+export function WakaDependencyTree({
+  dependencies,
+  onDependencyClick,
+  onUpgrade,
+  title = "Dependencies",
+  showDevDeps = true,
+  showVulnerableOnly = false,
+  className,
+}: WakaDependencyTreeProps) {
+  const [searchQuery, setSearchQuery] = React.useState("")
+  const [expandedIds, setExpandedIds] = React.useState<Set<string>>(new Set())
+  const [filterVulnerable, setFilterVulnerable] = React.useState(showVulnerableOnly)
+
+  const toggleExpand = (id: string) => {
+    setExpandedIds((prev) => {
+      const next = new Set(prev)
+      if (next.has(id)) {
+        next.delete(id)
+      } else {
+        next.add(id)
+      }
+      return next
+    })
+  }
+
+  const expandAll = () => {
+    const allIds = new Set<string>()
+    const collectIds = (deps: Dependency[]) => {
+      deps.forEach((dep) => {
+        allIds.add(dep.id)
+        if (dep.children) collectIds(dep.children)
+      })
+    }
+    collectIds(dependencies)
+    setExpandedIds(allIds)
+  }
+
+  const collapseAll = () => {
+    setExpandedIds(new Set())
+  }
+
+  // Filter dependencies
+  const filteredDeps = React.useMemo(() => {
+    let filtered = dependencies
+    if (!showDevDeps) {
+      filtered = filtered.filter((d) => d.type !== "dev")
+    }
+    if (filterVulnerable) {
+      const hasVulns = (dep: Dependency): boolean => {
+        if (getTotalVulns(dep.vulnerabilities) > 0) return true
+        return dep.children?.some(hasVulns) || false
+      }
+      filtered = filtered.filter(hasVulns)
+    }
+    return filtered
+  }, [dependencies, showDevDeps, filterVulnerable])
+
+  // Calculate stats
+  const stats = React.useMemo(() => {
+    let total = 0
+    let vulnerable = 0
+    let outdated = 0
+    let criticalVulns = 0
+
+    const count = (deps: Dependency[]) => {
+      deps.forEach((dep) => {
+        total++
+        if (getTotalVulns(dep.vulnerabilities) > 0) vulnerable++
+        if (dep.vulnerabilities?.critical) criticalVulns += dep.vulnerabilities.critical
+        if (dep.outdated) outdated++
+        if (dep.children) count(dep.children)
+      })
+    }
+    count(dependencies)
+
+    return { total, vulnerable, outdated, criticalVulns }
+  }, [dependencies])
+
+  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">
+          <GitBranch className="h-5 w-5" />
+          <h3 className="font-semibold">{title}</h3>
+          <Badge variant="secondary">{stats.total}</Badge>
+        </div>
+
+        <div className="flex items-center gap-2">
+          {stats.criticalVulns > 0 && (
+            <Badge className="bg-red-500">{stats.criticalVulns} critical</Badge>
+          )}
+          {stats.vulnerable > 0 && (
+            <Badge variant="secondary" className="text-orange-500">
+              {stats.vulnerable} vulnerable
+            </Badge>
+          )}
+          {stats.outdated > 0 && (
+            <Badge variant="outline">{stats.outdated} outdated</Badge>
+          )}
+        </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 packages..."
+            value={searchQuery}
+            onChange={(e) => setSearchQuery(e.target.value)}
+            className="pl-8 h-8"
+          />
+        </div>
+
+        <Button
+          variant={filterVulnerable ? "default" : "outline"}
+          size="sm"
+          className="h-8"
+          onClick={() => setFilterVulnerable(!filterVulnerable)}
+        >
+          <ShieldAlert className="h-4 w-4 mr-1" />
+          Vulnerable only
+        </Button>
+
+        <div className="flex items-center gap-1">
+          <Button variant="ghost" size="sm" className="h-8" onClick={expandAll}>
+            Expand All
+          </Button>
+          <Button variant="ghost" size="sm" className="h-8" onClick={collapseAll}>
+            Collapse All
+          </Button>
+        </div>
+      </div>
+
+      {/* Tree */}
+      <ScrollArea className="flex-1 max-h-[500px]">
+        <div className="py-2">
+          {filteredDeps.length === 0 ? (
+            <div className="flex flex-col items-center justify-center h-32 text-muted-foreground">
+              <Package className="h-8 w-8 mb-2" />
+              <span>No dependencies found</span>
+            </div>
+          ) : (
+            <DependencyTree
+              dependencies={filteredDeps}
+              depth={0}
+              expandedIds={expandedIds}
+              onToggle={toggleExpand}
+              onDependencyClick={onDependencyClick}
+              onUpgrade={onUpgrade}
+              searchQuery={searchQuery}
+            />
+          )}
+        </div>
+      </ScrollArea>
+    </div>
+  )
+}
+
+// Default sample dependencies for demo
+export const defaultDependencies: Dependency[] = [
+  {
+    id: "1",
+    name: "react",
+    version: "18.2.0",
+    latestVersion: "18.2.0",
+    type: "direct",
+    license: "MIT",
+    size: 2.5 * 1024 * 1024,
+    children: [
+      {
+        id: "1-1",
+        name: "loose-envify",
+        version: "1.4.0",
+        type: "transitive",
+        license: "MIT",
+      },
+    ],
+  },
+  {
+    id: "2",
+    name: "lodash",
+    version: "4.17.19",
+    latestVersion: "4.17.21",
+    type: "direct",
+    license: "MIT",
+    outdated: true,
+    vulnerabilities: { critical: 0, high: 1, medium: 1, low: 0 },
+    size: 530 * 1024,
+  },
+  {
+    id: "3",
+    name: "axios",
+    version: "0.21.1",
+    latestVersion: "1.6.0",
+    type: "direct",
+    license: "MIT",
+    outdated: true,
+    vulnerabilities: { critical: 1, high: 0, medium: 0, low: 0 },
+    size: 450 * 1024,
+    children: [
+      {
+        id: "3-1",
+        name: "follow-redirects",
+        version: "1.14.0",
+        type: "transitive",
+        license: "MIT",
+        vulnerabilities: { critical: 0, high: 1, medium: 0, low: 0 },
+      },
+    ],
+  },
+  {
+    id: "4",
+    name: "typescript",
+    version: "5.0.0",
+    latestVersion: "5.3.0",
+    type: "dev",
+    license: "Apache-2.0",
+    outdated: true,
+    size: 15 * 1024 * 1024,
+  },
+  {
+    id: "5",
+    name: "eslint",
+    version: "8.50.0",
+    type: "dev",
+    license: "MIT",
+    size: 3 * 1024 * 1024,
+  },
+]