@wakastellar/ui 2.1.2 → 2.3.2

package/src/components/waka-config-comparator/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 { ScrollArea } from "../scroll-area"
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "../select"
+import {
+  Settings,
+  ArrowLeftRight,
+  Plus,
+  Minus,
+  Equal,
+  RefreshCw,
+  Copy,
+  CheckCircle2,
+  ChevronDown,
+  ChevronRight,
+} from "lucide-react"
+
+export interface ConfigValue {
+  key: string
+  value: string | number | boolean | null
+  type?: "string" | "number" | "boolean" | "null"
+}
+
+export interface ConfigEnvironment {
+  id: string
+  name: string
+  values: ConfigValue[]
+}
+
+export type DiffType = "added" | "removed" | "modified" | "unchanged"
+
+export interface ConfigDiff {
+  key: string
+  leftValue?: string | number | boolean | null
+  rightValue?: string | number | boolean | null
+  diffType: DiffType
+}
+
+export interface WakaConfigComparatorProps {
+  /** List of environments to compare */
+  environments: ConfigEnvironment[]
+  /** Left environment ID */
+  leftEnvId?: string
+  /** Right environment ID */
+  rightEnvId?: string
+  /** Callback when environment selection changes */
+  onEnvironmentChange?: (left: string, right: string) => void
+  /** Callback when copying value */
+  onCopyValue?: (key: string, value: unknown, fromEnv: string, toEnv: string) => void
+  /** Show only differences */
+  showDiffsOnly?: boolean
+  /** Title */
+  title?: string
+  /** Custom class name */
+  className?: string
+}
+
+const diffTypeConfig: Record<DiffType, { icon: React.ElementType; color: string; bgColor: string; label: string }> = {
+  added: { icon: Plus, color: "text-green-500", bgColor: "bg-green-500/10", label: "Added" },
+  removed: { icon: Minus, color: "text-red-500", bgColor: "bg-red-500/10", label: "Removed" },
+  modified: { icon: ArrowLeftRight, color: "text-yellow-500", bgColor: "bg-yellow-500/10", label: "Modified" },
+  unchanged: { icon: Equal, color: "text-muted-foreground", bgColor: "", label: "Unchanged" },
+}
+
+function formatValue(value: unknown): string {
+  if (value === null) return "null"
+  if (value === undefined) return "undefined"
+  if (typeof value === "boolean") return value ? "true" : "false"
+  if (typeof value === "string") return `"${value}"`
+  return String(value)
+}
+
+function DiffRow({
+  diff,
+  leftEnvName,
+  rightEnvName,
+  onCopyLeft,
+  onCopyRight,
+}: {
+  diff: ConfigDiff
+  leftEnvName: string
+  rightEnvName: string
+  onCopyLeft?: () => void
+  onCopyRight?: () => void
+}) {
+  const [copiedLeft, setCopiedLeft] = React.useState(false)
+  const [copiedRight, setCopiedRight] = React.useState(false)
+  const config = diffTypeConfig[diff.diffType]
+  const Icon = config.icon
+
+  const handleCopyLeft = () => {
+    onCopyLeft?.()
+    setCopiedLeft(true)
+    setTimeout(() => setCopiedLeft(false), 2000)
+  }
+
+  const handleCopyRight = () => {
+    onCopyRight?.()
+    setCopiedRight(true)
+    setTimeout(() => setCopiedRight(false), 2000)
+  }
+
+  return (
+    <div className={cn(
+      "grid grid-cols-[minmax(150px,1fr)_minmax(200px,2fr)_minmax(200px,2fr)] gap-2 p-2 border-b items-center",
+      config.bgColor
+    )}>
+      {/* Key */}
+      <div className="flex items-center gap-2">
+        <Icon className={cn("h-4 w-4 shrink-0", config.color)} />
+        <span className="font-mono text-sm truncate">{diff.key}</span>
+      </div>
+
+      {/* Left value */}
+      <div className="flex items-center gap-2">
+        {diff.leftValue !== undefined ? (
+          <>
+            <code className={cn(
+              "flex-1 text-xs bg-muted px-2 py-1 rounded truncate",
+              diff.diffType === "removed" && "line-through opacity-50"
+            )}>
+              {formatValue(diff.leftValue)}
+            </code>
+            {diff.diffType !== "unchanged" && onCopyRight && (
+              <Button
+                variant="ghost"
+                size="sm"
+                className="h-6 w-6 p-0 shrink-0"
+                onClick={handleCopyRight}
+                title={`Copy to ${rightEnvName}`}
+              >
+                {copiedRight ? (
+                  <CheckCircle2 className="h-3 w-3 text-green-500" />
+                ) : (
+                  <Copy className="h-3 w-3" />
+                )}
+              </Button>
+            )}
+          </>
+        ) : (
+          <span className="text-xs text-muted-foreground italic">Not set</span>
+        )}
+      </div>
+
+      {/* Right value */}
+      <div className="flex items-center gap-2">
+        {diff.rightValue !== undefined ? (
+          <>
+            <code className={cn(
+              "flex-1 text-xs bg-muted px-2 py-1 rounded truncate",
+              diff.diffType === "added" && "bg-green-500/20"
+            )}>
+              {formatValue(diff.rightValue)}
+            </code>
+            {diff.diffType !== "unchanged" && onCopyLeft && (
+              <Button
+                variant="ghost"
+                size="sm"
+                className="h-6 w-6 p-0 shrink-0"
+                onClick={handleCopyLeft}
+                title={`Copy to ${leftEnvName}`}
+              >
+                {copiedLeft ? (
+                  <CheckCircle2 className="h-3 w-3 text-green-500" />
+                ) : (
+                  <Copy className="h-3 w-3" />
+                )}
+              </Button>
+            )}
+          </>
+        ) : (
+          <span className="text-xs text-muted-foreground italic">Not set</span>
+        )}
+      </div>
+    </div>
+  )
+}
+
+export function WakaConfigComparator({
+  environments,
+  leftEnvId: initialLeftId,
+  rightEnvId: initialRightId,
+  onEnvironmentChange,
+  onCopyValue,
+  showDiffsOnly: initialShowDiffsOnly = false,
+  title = "Configuration Comparison",
+  className,
+}: WakaConfigComparatorProps) {
+  const [leftEnvId, setLeftEnvId] = React.useState(initialLeftId || environments[0]?.id)
+  const [rightEnvId, setRightEnvId] = React.useState(initialRightId || environments[1]?.id)
+  const [showDiffsOnly, setShowDiffsOnly] = React.useState(initialShowDiffsOnly)
+
+  const leftEnv = environments.find((e) => e.id === leftEnvId)
+  const rightEnv = environments.find((e) => e.id === rightEnvId)
+
+  // Calculate diffs
+  const diffs = React.useMemo<ConfigDiff[]>(() => {
+    if (!leftEnv || !rightEnv) return []
+
+    const leftMap = new Map(leftEnv.values.map((v) => [v.key, v.value]))
+    const rightMap = new Map(rightEnv.values.map((v) => [v.key, v.value]))
+    const allKeys = new Set([...leftMap.keys(), ...rightMap.keys()])
+
+    return Array.from(allKeys)
+      .map((key) => {
+        const leftValue = leftMap.get(key)
+        const rightValue = rightMap.get(key)
+
+        let diffType: DiffType
+        if (leftValue === undefined) {
+          diffType = "added"
+        } else if (rightValue === undefined) {
+          diffType = "removed"
+        } else if (leftValue !== rightValue) {
+          diffType = "modified"
+        } else {
+          diffType = "unchanged"
+        }
+
+        return { key, leftValue, rightValue, diffType }
+      })
+      .sort((a, b) => {
+        // Sort by diff type priority, then by key
+        const priority: Record<DiffType, number> = { removed: 0, added: 1, modified: 2, unchanged: 3 }
+        const pDiff = priority[a.diffType] - priority[b.diffType]
+        if (pDiff !== 0) return pDiff
+        return a.key.localeCompare(b.key)
+      })
+  }, [leftEnv, rightEnv])
+
+  const filteredDiffs = showDiffsOnly
+    ? diffs.filter((d) => d.diffType !== "unchanged")
+    : diffs
+
+  // Count by diff type
+  const diffCounts = React.useMemo(() => {
+    return diffs.reduce((acc, d) => {
+      acc[d.diffType] = (acc[d.diffType] || 0) + 1
+      return acc
+    }, {} as Record<DiffType, number>)
+  }, [diffs])
+
+  const handleLeftChange = (id: string) => {
+    setLeftEnvId(id)
+    onEnvironmentChange?.(id, rightEnvId!)
+  }
+
+  const handleRightChange = (id: string) => {
+    setRightEnvId(id)
+    onEnvironmentChange?.(leftEnvId!, id)
+  }
+
+  const swapEnvironments = () => {
+    const temp = leftEnvId
+    setLeftEnvId(rightEnvId)
+    setRightEnvId(temp)
+    onEnvironmentChange?.(rightEnvId!, temp!)
+  }
+
+  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">
+          <Settings className="h-5 w-5" />
+          <h3 className="font-semibold">{title}</h3>
+        </div>
+
+        <div className="flex items-center gap-2">
+          {diffCounts.modified > 0 && (
+            <Badge className="bg-yellow-500">{diffCounts.modified} modified</Badge>
+          )}
+          {diffCounts.added > 0 && (
+            <Badge className="bg-green-500">{diffCounts.added} added</Badge>
+          )}
+          {diffCounts.removed > 0 && (
+            <Badge className="bg-red-500">{diffCounts.removed} removed</Badge>
+          )}
+        </div>
+      </div>
+
+      {/* Environment selectors */}
+      <div className="flex items-center gap-4 p-3 border-b bg-muted/30">
+        <div className="flex-1">
+          <div className="text-xs text-muted-foreground mb-1">Left Environment</div>
+          <Select value={leftEnvId} onValueChange={handleLeftChange}>
+            <SelectTrigger>
+              <SelectValue />
+            </SelectTrigger>
+            <SelectContent>
+              {environments.map((env) => (
+                <SelectItem key={env.id} value={env.id} disabled={env.id === rightEnvId}>
+                  {env.name}
+                </SelectItem>
+              ))}
+            </SelectContent>
+          </Select>
+        </div>
+
+        <Button variant="outline" size="sm" className="shrink-0" onClick={swapEnvironments}>
+          <ArrowLeftRight className="h-4 w-4" />
+        </Button>
+
+        <div className="flex-1">
+          <div className="text-xs text-muted-foreground mb-1">Right Environment</div>
+          <Select value={rightEnvId} onValueChange={handleRightChange}>
+            <SelectTrigger>
+              <SelectValue />
+            </SelectTrigger>
+            <SelectContent>
+              {environments.map((env) => (
+                <SelectItem key={env.id} value={env.id} disabled={env.id === leftEnvId}>
+                  {env.name}
+                </SelectItem>
+              ))}
+            </SelectContent>
+          </Select>
+        </div>
+      </div>
+
+      {/* Toolbar */}
+      <div className="flex items-center gap-2 px-3 py-2 border-b">
+        <Button
+          variant={showDiffsOnly ? "default" : "outline"}
+          size="sm"
+          onClick={() => setShowDiffsOnly(!showDiffsOnly)}
+        >
+          Show differences only
+        </Button>
+        <span className="text-xs text-muted-foreground ml-auto">
+          {filteredDiffs.length} of {diffs.length} entries
+        </span>
+      </div>
+
+      {/* Column headers */}
+      <div className="grid grid-cols-[minmax(150px,1fr)_minmax(200px,2fr)_minmax(200px,2fr)] gap-2 px-2 py-2 border-b bg-muted/50 text-xs font-medium text-muted-foreground">
+        <div>Key</div>
+        <div>{leftEnv?.name || "Left"}</div>
+        <div>{rightEnv?.name || "Right"}</div>
+      </div>
+
+      {/* Diff list */}
+      <ScrollArea className="flex-1 max-h-[400px]">
+        {filteredDiffs.length === 0 ? (
+          <div className="flex flex-col items-center justify-center h-32 text-muted-foreground">
+            <CheckCircle2 className="h-8 w-8 mb-2 text-green-500" />
+            <span>No differences found</span>
+          </div>
+        ) : (
+          filteredDiffs.map((diff) => (
+            <DiffRow
+              key={diff.key}
+              diff={diff}
+              leftEnvName={leftEnv?.name || "Left"}
+              rightEnvName={rightEnv?.name || "Right"}
+              onCopyLeft={() => onCopyValue?.(diff.key, diff.rightValue, rightEnvId!, leftEnvId!)}
+              onCopyRight={() => onCopyValue?.(diff.key, diff.leftValue, leftEnvId!, rightEnvId!)}
+            />
+          ))
+        )}
+      </ScrollArea>
+    </div>
+  )
+}
+
+// Default sample environments for demo
+export const defaultConfigEnvironments: ConfigEnvironment[] = [
+  {
+    id: "production",
+    name: "Production",
+    values: [
+      { key: "API_URL", value: "https://api.example.com" },
+      { key: "DEBUG", value: false },
+      { key: "LOG_LEVEL", value: "error" },
+      { key: "MAX_CONNECTIONS", value: 100 },
+      { key: "CACHE_TTL", value: 3600 },
+      { key: "FEATURE_NEW_UI", value: false },
+    ],
+  },
+  {
+    id: "staging",
+    name: "Staging",
+    values: [
+      { key: "API_URL", value: "https://staging-api.example.com" },
+      { key: "DEBUG", value: true },
+      { key: "LOG_LEVEL", value: "debug" },
+      { key: "MAX_CONNECTIONS", value: 50 },
+      { key: "CACHE_TTL", value: 300 },
+      { key: "FEATURE_NEW_UI", value: true },
+      { key: "TEST_MODE", value: true },
+    ],
+  },
+  {
+    id: "development",
+    name: "Development",
+    values: [
+      { key: "API_URL", value: "http://localhost:3000" },
+      { key: "DEBUG", value: true },
+      { key: "LOG_LEVEL", value: "trace" },
+      { key: "MAX_CONNECTIONS", value: 10 },
+      { key: "FEATURE_NEW_UI", value: true },
+      { key: "TEST_MODE", value: true },
+      { key: "HOT_RELOAD", value: true },
+    ],
+  },
+]