@luxfi/ui 8.0.0 → 8.1.0

package/src/code-diff.tsx

@@ -0,0 +1,573 @@
+"use client"
+
+import { VariantProps, variants } from '@hanzo/ui'
+import * as React from "react"
+import {
+  Check,
+  Copy,
+  GitCompare,
+  Minus,
+  Plus,
+  SplitSquareHorizontal,
+  Square,
+} from "lucide-react"
+import { codeToHtml } from "shiki"
+
+import { cn } from "./utils"
+import { Badge } from "./badge"
+import { Button } from "./button"
+import { Separator } from "./separator"
+import { Skeleton } from "./skeleton"
+import { Box, ToggleGroup, ToggleGroupItem, css, sx } from '@hanzo/ui'
+const codeDiffVariants = variants(
+  "relative overflow-hidden rounded-lg border bg-muted/50",
+  {
+    variants: {
+      theme: {
+        dark: "bg-[var(--color-bg-primary)] border-[var(--color-border-divider)]",
+        light: "bg-[var(--color-bg-body)] border-[var(--color-border-divider)]",
+        github: "bg-white border-[var(--color-border-divider)]",
+        "github-dark": "bg-[var(--color-bg-primary)] border-[var(--color-border-divider)]",
+      },
+      size: {
+        sm: "text-xs",
+        default: "text-sm",
+        lg: "text-base",
+      },
+    },
+    defaultVariants: {
+      theme: "dark",
+      size: "default",
+    },
+  }
+)
+
+export interface DiffChange {
+  type: "add" | "remove" | "unchanged"
+  lineNumber: number
+  content: string
+  oldLineNumber?: number
+  newLineNumber?: number
+}
+
+export interface CodeDiffProps
+  extends React.HTMLAttributes<HTMLDivElement>,
+    VariantProps<typeof codeDiffVariants> {
+  oldCode: string
+  newCode: string
+  language?: string
+  filename?: string
+  oldFilename?: string
+  newFilename?: string
+  showLineNumbers?: boolean
+  showCopyButton?: boolean
+  maxHeight?: string
+  defaultView?: "unified" | "split"
+  collapseUnchanged?: boolean
+  contextLines?: number
+}
+
+interface DiffLineProps {
+  change: DiffChange
+  showLineNumbers: boolean
+  isUnified?: boolean
+  highlightedContent?: string
+}
+
+const DiffLine = React.memo(
+  ({
+    change,
+    showLineNumbers,
+    isUnified = false,
+    highlightedContent,
+  }: DiffLineProps) => {
+    const getLineClasses = () => {
+      const base = "group relative flex min-h-[1.5rem] items-center py-0.5"
+
+      if (isUnified) {
+        switch (change.type) {
+          case "add":
+            return cn(base, "bg-[var(--lux-state-success)]/10 border-l-2 border-l-green-500")
+          case "remove":
+            return cn(base, "bg-[var(--lux-state-error)]/10 border-l-2 border-l-red-500")
+          default:
+            return cn(base, "hover:bg-muted/50")
+        }
+      }
+
+      return cn(base, "hover:bg-muted/50")
+    }
+
+    const getLinePrefix = () => {
+      if (!isUnified) return null
+
+      switch (change.type) {
+        case "add":
+          return <Plus style={css('h-3 w-3 text-[var(--lux-state-success)] mr-2 flex-shrink-0')} />
+        case "remove":
+          return <Minus style={css('h-3 w-3 text-[var(--lux-state-error)] mr-2 flex-shrink-0')} />
+        default:
+          return <Box tag="span" className="w-3 mr-2 flex-shrink-0" />
+      }
+    }
+
+    return (
+      <Box className={getLineClasses()}>
+        <Box className="flex items-center px-4 w-full">
+          {showLineNumbers && (
+            <Box className="flex items-center gap-2 mr-4">
+              {!isUnified ? (
+                <>
+                  <Box tag="span" className="inline-block w-8 select-none text-right text-xs text-muted-foreground">
+                    {change.oldLineNumber || ""}
+                  </Box>
+                  <Box tag="span" className="inline-block w-8 select-none text-right text-xs text-muted-foreground">
+                    {change.newLineNumber || ""}
+                  </Box>
+                </>
+              ) : (
+                <Box tag="span" className="inline-block w-8 select-none text-right text-xs text-muted-foreground">
+                  {change.lineNumber}
+                </Box>
+              )}
+            </Box>
+          )}
+          {getLinePrefix()}
+          <Box
+            className="flex-1 overflow-x-auto font-mono"
+            dangerouslySetInnerHTML={{
+              __html: highlightedContent || change.content,
+            }}
+          />
+        </Box>
+      </Box>
+    )
+  }
+)
+
+DiffLine.displayName = "DiffLine"
+
+// Simple diff algorithm to generate changes
+function generateDiff(oldCode: string, newCode: string): DiffChange[] {
+  const oldLines = oldCode.split("\n")
+  const newLines = newCode.split("\n")
+  const changes: DiffChange[] = []
+
+  let oldIndex = 0
+  let newIndex = 0
+  let lineNumber = 1
+
+  while (oldIndex < oldLines.length || newIndex < newLines.length) {
+    const oldLine = oldLines[oldIndex]
+    const newLine = newLines[newIndex]
+
+    if (oldIndex >= oldLines.length) {
+      // Only new lines left
+      changes.push({
+        type: "add",
+        lineNumber: lineNumber++,
+        content: newLine,
+        newLineNumber: newIndex + 1,
+      })
+      newIndex++
+    } else if (newIndex >= newLines.length) {
+      // Only old lines left
+      changes.push({
+        type: "remove",
+        lineNumber: lineNumber++,
+        content: oldLine,
+        oldLineNumber: oldIndex + 1,
+      })
+      oldIndex++
+    } else if (oldLine === newLine) {
+      // Lines are the same
+      changes.push({
+        type: "unchanged",
+        lineNumber: lineNumber++,
+        content: oldLine,
+        oldLineNumber: oldIndex + 1,
+        newLineNumber: newIndex + 1,
+      })
+      oldIndex++
+      newIndex++
+    } else {
+      // Lines are different - for simplicity, treat as remove + add
+      changes.push({
+        type: "remove",
+        lineNumber: lineNumber++,
+        content: oldLine,
+        oldLineNumber: oldIndex + 1,
+      })
+      changes.push({
+        type: "add",
+        lineNumber: lineNumber++,
+        content: newLine,
+        newLineNumber: newIndex + 1,
+      })
+      oldIndex++
+      newIndex++
+    }
+  }
+
+  return changes
+}
+
+const CodeDiff = React.forwardRef<HTMLDivElement, CodeDiffProps>(
+  (
+    {
+      className,
+      theme,
+      size,
+      oldCode,
+      newCode,
+      language = "text",
+      filename,
+      oldFilename,
+      newFilename,
+      showLineNumbers = true,
+      showCopyButton = true,
+      maxHeight = "500px",
+      defaultView = "unified",
+      collapseUnchanged = false,
+      contextLines = 3,
+      ...props
+    },
+    ref
+  ) => {
+    const [view, setView] = React.useState<"unified" | "split">(defaultView)
+    const [copied, setCopied] = React.useState(false)
+    const [isLoading, setIsLoading] = React.useState(true)
+    const [highlightedOldCode, setHighlightedOldCode] =
+      React.useState<string>("")
+    const [highlightedNewCode, setHighlightedNewCode] =
+      React.useState<string>("")
+    const [changes, setChanges] = React.useState<DiffChange[]>([])
+
+    const themeMap = {
+      dark: "github-dark",
+      light: "github-light",
+      github: "github-light",
+      "github-dark": "github-dark",
+    }
+
+    React.useEffect(() => {
+      const highlightCode = async () => {
+        setIsLoading(true)
+        try {
+          const [oldHighlighted, newHighlighted] = await Promise.all([
+            codeToHtml(oldCode, {
+              lang: language,
+              theme: themeMap[theme || "dark"],
+            }),
+            codeToHtml(newCode, {
+              lang: language,
+              theme: themeMap[theme || "dark"],
+            }),
+          ])
+
+          // Extract just the inner HTML content
+          const extractContent = (html: string) => {
+            const tempDiv = document.createElement("div")
+            tempDiv.innerHTML = html
+            const codeElement = tempDiv.querySelector("code")
+            return codeElement?.innerHTML || html
+          }
+
+          setHighlightedOldCode(extractContent(oldHighlighted))
+          setHighlightedNewCode(extractContent(newHighlighted))
+
+          // Generate diff changes
+          const diffChanges = generateDiff(oldCode, newCode)
+          setChanges(diffChanges)
+        } catch (error) {
+          console.error("Failed to highlight code:", error)
+          setHighlightedOldCode(oldCode)
+          setHighlightedNewCode(newCode)
+          setChanges(generateDiff(oldCode, newCode))
+        } finally {
+          setIsLoading(false)
+        }
+      }
+
+      highlightCode()
+    }, [oldCode, newCode, language, theme])
+
+    const copyToClipboard = React.useCallback(async () => {
+      try {
+        const diffText =
+          view === "unified"
+            ? changes
+                .map((change) => {
+                  const prefix =
+                    change.type === "add"
+                      ? "+"
+                      : change.type === "remove"
+                        ? "-"
+                        : " "
+                  return `${prefix}${change.content}`
+                })
+                .join("\n")
+            : `--- ${oldFilename || "old"}\n+++ ${newFilename || "new"}\n${oldCode}\n\n${newCode}`
+
+        await navigator.clipboard.writeText(diffText)
+        setCopied(true)
+        setTimeout(() => setCopied(false), 2000)
+      } catch (error) {
+        console.error("Failed to copy diff:", error)
+      }
+    }, [changes, view, oldCode, newCode, oldFilename, newFilename])
+
+    const filteredChanges = React.useMemo(() => {
+      if (!collapseUnchanged) return changes
+
+      const result: DiffChange[] = []
+      let i = 0
+
+      while (i < changes.length) {
+        const change = changes[i]
+
+        if (change.type !== "unchanged") {
+          result.push(change)
+          i++
+          continue
+        }
+
+        // Find consecutive unchanged lines
+        const unchangedStart = i
+        while (i < changes.length && changes[i].type === "unchanged") {
+          i++
+        }
+
+        const unchangedCount = i - unchangedStart
+
+        if (unchangedCount <= contextLines * 2) {
+          // Include all unchanged lines if there aren't many
+          for (let j = unchangedStart; j < i; j++) {
+            result.push(changes[j])
+          }
+        } else {
+          // Include context lines at the beginning
+          for (let j = unchangedStart; j < unchangedStart + contextLines; j++) {
+            result.push(changes[j])
+          }
+
+          // Add collapse indicator
+          result.push({
+            type: "unchanged",
+            lineNumber: -1,
+            content: `... ${unchangedCount - contextLines * 2} unchanged lines ...`,
+          })
+
+          // Include context lines at the end
+          for (let j = i - contextLines; j < i; j++) {
+            result.push(changes[j])
+          }
+        }
+      }
+
+      return result
+    }, [changes, collapseUnchanged, contextLines])
+
+    const stats = React.useMemo(() => {
+      const additions = changes.filter((c) => c.type === "add").length
+      const deletions = changes.filter((c) => c.type === "remove").length
+      return { additions, deletions }
+    }, [changes])
+
+    const renderUnifiedView = () => {
+      const oldLines = highlightedOldCode.split("\n")
+      const newLines = highlightedNewCode.split("\n")
+
+      return (
+        <Box className="font-mono">
+          {filteredChanges.map((change, index) => {
+            if (change.lineNumber === -1) {
+              // Collapse indicator
+              return (
+                <Box
+                  key={index}
+                  className="flex items-center justify-center py-2 text-muted-foreground bg-muted/30"
+                >
+                  <Box tag="span" className="text-xs">{change.content}</Box>
+                </Box>
+              )
+            }
+
+            let highlightedContent = change.content
+            if (change.type === "add" && change.newLineNumber) {
+              highlightedContent =
+                newLines[change.newLineNumber - 1] || change.content
+            } else if (change.type === "remove" && change.oldLineNumber) {
+              highlightedContent =
+                oldLines[change.oldLineNumber - 1] || change.content
+            } else if (change.type === "unchanged" && change.oldLineNumber) {
+              highlightedContent =
+                oldLines[change.oldLineNumber - 1] || change.content
+            }
+
+            return (
+              <DiffLine
+                key={index}
+                change={change}
+                showLineNumbers={showLineNumbers}
+                isUnified={true}
+                highlightedContent={highlightedContent}
+              />
+            )
+          })}
+        </Box>
+      )
+    }
+
+    const renderSplitView = () => {
+      const oldLines = highlightedOldCode.split("\n")
+      const newLines = highlightedNewCode.split("\n")
+
+      return (
+        <Box className="grid grid-cols-2 gap-0">
+          {/* Old Code */}
+          <Box className="border-r">
+            <Box className="border-b px-4 py-2 bg-[var(--lux-state-error)]/10">
+              <Box tag="span" className="text-sm font-medium text-[var(--lux-state-error)] dark:text-[var(--lux-state-error)]">
+                {oldFilename || filename || "Old"}
+              </Box>
+            </Box>
+            <Box className="font-mono">
+              {oldLines.map((line, index) => (
+                <DiffLine
+                  key={`old-${index}`}
+                  change={{
+                    type: "remove",
+                    lineNumber: index + 1,
+                    content: line,
+                    oldLineNumber: index + 1,
+                  }}
+                  showLineNumbers={showLineNumbers}
+                  highlightedContent={line}
+                />
+              ))}
+            </Box>
+          </Box>
+
+          {/* New Code */}
+          <div>
+            <Box className="border-b px-4 py-2 bg-[var(--lux-state-success)]/10">
+              <Box tag="span" className="text-sm font-medium text-[var(--lux-state-success)] dark:text-[var(--lux-state-success)]">
+                {newFilename || filename || "New"}
+              </Box>
+            </Box>
+            <Box className="font-mono">
+              {newLines.map((line, index) => (
+                <DiffLine
+                  key={`new-${index}`}
+                  change={{
+                    type: "add",
+                    lineNumber: index + 1,
+                    content: line,
+                    newLineNumber: index + 1,
+                  }}
+                  showLineNumbers={showLineNumbers}
+                  highlightedContent={line}
+                />
+              ))}
+            </Box>
+          </div>
+        </Box>
+      )
+    }
+
+    return (
+      <Box
+        ref={ref as never}
+        className={cn(codeDiffVariants({ theme, size, className }))}
+        {...props}
+      >
+        {/* Header */}
+        <Box className="flex items-center justify-between border-b px-4 py-2">
+          <Box className="flex items-center gap-4">
+            <Box className="flex items-center gap-2">
+              <GitCompare style={css('h-4 w-4 text-muted-foreground')} />
+              {filename && (
+                <Box tag="span" className="text-sm font-medium">{filename}</Box>
+              )}
+              {language && (
+                <Badge colorPalette="gray" {...sx('text-xs')}>
+                  {language}
+                </Badge>
+              )}
+            </Box>
+
+            <Box className="flex items-center gap-2 text-xs text-muted-foreground">
+              <Box tag="span" className="flex items-center gap-1">
+                <Plus style={css('h-3 w-3 text-[var(--lux-state-success)]')} />
+                {stats.additions}
+              </Box>
+              <Box tag="span" className="flex items-center gap-1">
+                <Minus style={css('h-3 w-3 text-[var(--lux-state-error)]')} />
+                {stats.deletions}
+              </Box>
+            </Box>
+          </Box>
+
+          <Box className="flex items-center gap-2">
+            <ToggleGroup
+              type="single"
+              value={view}
+              onValueChange={(value) =>
+                value && setView(value as "unified" | "split")
+              }
+              size="sm"
+            >
+              <ToggleGroupItem value="unified" aria-label="Unified view">
+                <Square style={css('h-3 w-3')} />
+              </ToggleGroupItem>
+              <ToggleGroupItem value="split" aria-label="Split view">
+                <SplitSquareHorizontal style={css('h-3 w-3')} />
+              </ToggleGroupItem>
+            </ToggleGroup>
+
+            {showCopyButton && (
+              <Button
+                variant="ghost"
+                size="sm"
+                onClick={copyToClipboard}
+                {...sx('h-8 w-8 p-0')}
+              >
+                {copied ? (
+                  <Check style={css('h-3.5 w-3.5 text-[var(--lux-state-success)]')} />
+                ) : (
+                  <Copy style={css('h-3.5 w-3.5')} />
+                )}
+                <Box tag="span" className="sr-only">
+                  {copied ? "Copied" : "Copy diff"}
+                </Box>
+              </Button>
+            )}
+          </Box>
+        </Box>
+
+        {/* Content */}
+        <Box className="overflow-auto" style={{ maxHeight }}>
+          {isLoading ? (
+            <Box className="p-4 space-y-2">
+              {Array.from({ length: 10 }).map((_, i) => (
+                <Box key={i} className="flex items-center gap-4">
+                  {showLineNumbers && <Skeleton {...sx('h-4 w-8')} />}
+                  <Skeleton {...sx('h-4 flex-1')} />
+                </Box>
+              ))}
+            </Box>
+          ) : view === "unified" ? (
+            renderUnifiedView()
+          ) : (
+            renderSplitView()
+          )}
+        </Box>
+      </Box>
+    )
+  }
+)
+
+CodeDiff.displayName = "CodeDiff"
+
+export { CodeDiff, codeDiffVariants }