@luxfi/ui 8.0.0 → 8.2.0

package/src/code-preview.tsx

@@ -0,0 +1,488 @@
+"use client"
+
+import * as React from "react"
+import { Box, VariantProps, css, sx, variants } from '@hanzo/ui'
+import {
+  AlertTriangle,
+  Check,
+  Copy,
+  Eye,
+  EyeOff,
+  Play,
+  RefreshCw,
+  Settings,
+  Square,
+  Terminal,
+  X,
+} from "lucide-react"
+
+import { cn } from "./utils"
+import { Badge } from "./badge"
+import { Button } from "./button"
+import { CodeSnippet } from "./code-snippet"
+import { Separator } from "./separator"
+import {
+  Tabs,
+  TabsContent,
+  TabsList,
+  TabsTrigger,
+} from "@hanzo/ui"
+import { Toggle } from "./toggle"
+
+const codePreviewVariants = variants(
+  "relative overflow-hidden rounded-lg border bg-background",
+  {
+    variants: {
+      size: {
+        sm: "text-xs",
+        default: "text-sm",
+        lg: "text-base",
+      },
+    },
+    defaultVariants: {
+      size: "default",
+    },
+  }
+)
+
+export interface PreviewFile {
+  filename: string
+  content: string
+  language: string
+  type: "html" | "css" | "js" | "jsx" | "ts" | "tsx"
+}
+
+export interface PreviewResult {
+  type: "output" | "error" | "log"
+  content: string
+  timestamp: number
+}
+
+export interface CodePreviewProps
+  extends React.HTMLAttributes<HTMLDivElement>,
+    VariantProps<typeof codePreviewVariants> {
+  files: PreviewFile[]
+  defaultFile?: string
+  showPreview?: boolean
+  showConsole?: boolean
+  autoRun?: boolean
+  maxHeight?: string
+  previewHeight?: string
+  consoleHeight?: string
+  allowFullscreen?: boolean
+  customRunner?: (files: PreviewFile[]) => Promise<string>
+}
+
+// Simple HTML/CSS/JS runner
+const runHTMLCode = (files: PreviewFile[]): string => {
+  const htmlFile = files.find((f) => f.type === "html")
+  const cssFiles = files.filter((f) => f.type === "css")
+  const jsFiles = files.filter((f) => f.type === "js")
+
+  let html = htmlFile?.content || "<div>No HTML file provided</div>"
+
+  // Inject CSS
+  if (cssFiles.length > 0) {
+    const cssContent = cssFiles.map((f) => f.content).join("\n")
+    html = `<style>${cssContent}</style>\n${html}`
+  }
+
+  // Inject JS
+  if (jsFiles.length > 0) {
+    const jsContent = jsFiles.map((f) => f.content).join("\n")
+    html = `${html}\n<script>${jsContent}</script>`
+  }
+
+  return html
+}
+
+// Console capture script
+const consoleScript = `
+<script>
+  const originalConsole = window.console;
+  const logs = [];
+
+  ['log', 'warn', 'error', 'info'].forEach(method => {
+    window.console[method] = function(...args) {
+      logs.push({
+        type: method,
+        content: args.map(arg =>
+          typeof arg === 'object' ? JSON.stringify(arg, null, 2) : String(arg)
+        ).join(' '),
+        timestamp: Date.now()
+      });
+
+      // Also call original console method
+      originalConsole[method].apply(originalConsole, arguments);
+
+      // Send to parent
+      window.parent.postMessage({
+        type: 'console',
+        data: logs[logs.length - 1]
+      }, '*');
+    };
+  });
+
+  window.addEventListener('error', (e) => {
+    window.parent.postMessage({
+      type: 'error',
+      data: {
+        type: 'error',
+        content: e.message + ' at ' + e.filename + ':' + e.lineno,
+        timestamp: Date.now()
+      }
+    }, '*');
+  });
+</script>
+`
+
+const CodePreview = React.forwardRef<HTMLDivElement, CodePreviewProps>(
+  (
+    {
+      className,
+      size,
+      files,
+      defaultFile,
+      showPreview = true,
+      showConsole = true,
+      autoRun = false,
+      maxHeight = "600px",
+      previewHeight = "300px",
+      consoleHeight = "150px",
+      allowFullscreen = true,
+      customRunner,
+      ...props
+    },
+    ref
+  ) => {
+    const [activeFile, setActiveFile] = React.useState(
+      defaultFile || files[0]?.filename || ""
+    )
+    const [previewContent, setPreviewContent] = React.useState("")
+    const [isRunning, setIsRunning] = React.useState(false)
+    const [results, setResults] = React.useState<PreviewResult[]>([])
+    const [isPreviewVisible, setIsPreviewVisible] = React.useState(showPreview)
+    const [isConsoleVisible, setIsConsoleVisible] = React.useState(showConsole)
+    const [isFullscreen, setIsFullscreen] = React.useState(false)
+    const [copied, setCopied] = React.useState<Record<string, boolean>>({})
+
+    const iframeRef = React.useRef<HTMLIFrameElement>(null)
+
+    const currentFile = files.find((f) => f.filename === activeFile) || files[0]
+
+    // Handle messages from iframe
+    React.useEffect(() => {
+      const handleMessage = (event: MessageEvent) => {
+        if (event.data?.type === "console" || event.data?.type === "error") {
+          setResults((prev) => [...prev, event.data.data])
+        }
+      }
+
+      window.addEventListener("message", handleMessage)
+      return () => window.removeEventListener("message", handleMessage)
+    }, [])
+
+    const runCode = React.useCallback(async () => {
+      setIsRunning(true)
+      setResults([])
+
+      try {
+        let output: string
+
+        if (customRunner) {
+          output = await customRunner(files)
+        } else {
+          output = runHTMLCode(files)
+        }
+
+        // Add console capture
+        output = consoleScript + output
+
+        setPreviewContent(output)
+
+        // Update iframe
+        if (iframeRef.current) {
+          const doc = iframeRef.current.contentDocument
+          if (doc) {
+            doc.open()
+            doc.write(output)
+            doc.close()
+          }
+        }
+      } catch (error) {
+        setResults([
+          {
+            type: "error",
+            content: error instanceof Error ? error.message : String(error),
+            timestamp: Date.now(),
+          },
+        ])
+      } finally {
+        setIsRunning(false)
+      }
+    }, [files, customRunner])
+
+    // Auto-run on file changes
+    React.useEffect(() => {
+      if (autoRun) {
+        const timer = setTimeout(runCode, 1000)
+        return () => clearTimeout(timer)
+      }
+    }, [files, autoRun, runCode])
+
+    const copyFileContent = React.useCallback(
+      async (filename: string) => {
+        const file = files.find((f) => f.filename === filename)
+        if (!file) return
+
+        try {
+          await navigator.clipboard.writeText(file.content)
+          setCopied((prev) => ({ ...prev, [filename]: true }))
+          setTimeout(() => {
+            setCopied((prev) => ({ ...prev, [filename]: false }))
+          }, 2000)
+        } catch (error) {
+          console.error("Failed to copy code:", error)
+        }
+      },
+      [files]
+    )
+
+    const clearConsole = () => {
+      setResults([])
+    }
+
+    const renderConsole = () => (
+      <Box className="flex flex-col h-full">
+        <Box className="flex items-center justify-between border-b px-4 py-2 bg-muted/30">
+          <Box className="flex items-center gap-2">
+            <Terminal style={css('h-4 w-4')} />
+            <Box tag="span" className="text-sm font-medium">Console</Box>
+            {results.length > 0 && (
+              <Badge colorPalette="gray" {...sx('text-xs')}>
+                {results.length}
+              </Badge>
+            )}
+          </Box>
+          <Button
+            variant="ghost"
+            size="sm"
+            onClick={clearConsole}
+            {...sx('h-8 w-8 p-0')}
+          >
+            <X style={css('h-3.5 w-3.5')} />
+          </Button>
+        </Box>
+        <Box className="flex-1 overflow-auto p-2 space-y-1 font-mono text-xs">
+          {results.length === 0 ? (
+            <Box className="text-muted-foreground italic">No output</Box>
+          ) : (
+            results.map((result, index) => (
+              <Box
+                key={index}
+                className={cn(
+                  "flex items-start gap-2 p-2 rounded",
+                  result.type === "error" &&
+                    "bg-[var(--lux-state-error)]/10 text-[var(--lux-state-error)] dark:text-[var(--lux-state-error)]",
+                  result.type === "log" &&
+                    "bg-[var(--color-link-primary)]/10 text-[var(--color-link-primary)] dark:text-[var(--color-link-primary)]",
+                  result.type === "output" &&
+                    "bg-[var(--lux-state-success)]/10 text-[var(--lux-state-success)] dark:text-[var(--lux-state-success)]"
+                )}
+              >
+                <Box tag="span" className="text-xs text-muted-foreground">
+                  {new Date(result.timestamp).toLocaleTimeString()}
+                </Box>
+                <Box tag="pre" className="flex-1 whitespace-pre-wrap break-words">
+                  {result.content}
+                </Box>
+              </Box>
+            ))
+          )}
+        </Box>
+      </Box>
+    )
+
+    const layout = isFullscreen ? "fixed inset-0 z-50 bg-background" : ""
+
+    return (
+      <Box
+        ref={ref}
+        className={cn(codePreviewVariants({ size }), layout, className)}
+        style={{ maxHeight: isFullscreen ? "100vh" : maxHeight }}
+        {...props}
+      >
+        {/* Header */}
+        <Box className="flex items-center justify-between border-b px-4 py-2">
+          <Tabs
+            value={activeFile}
+            onValueChange={setActiveFile}
+            {...sx('flex-1')}
+          >
+            <TabsList {...sx('h-auto p-0 bg-transparent')}>
+              {files.map((file) => (
+                <TabsTrigger
+                  key={file.filename}
+                  value={file.filename}
+                  {...sx('relative flex items-center gap-2 data-[state=active]:bg-muted')}
+                >
+                  <span>{file.filename}</span>
+                  <Badge variant="outline" {...sx('text-xs')}>
+                    {file.language}
+                  </Badge>
+                  <Button
+                    variant="ghost"
+                    size="sm"
+                    onClick={(e) => {
+                      e.stopPropagation()
+                      copyFileContent(file.filename)
+                    }}
+                    {...sx('h-6 w-6 p-0 opacity-0 group-hover:opacity-100')}
+                  >
+                    {copied[file.filename] ? (
+                      <Check style={css('h-3 w-3 text-[var(--lux-state-success)]')} />
+                    ) : (
+                      <Copy style={css('h-3 w-3')} />
+                    )}
+                  </Button>
+                </TabsTrigger>
+              ))}
+            </TabsList>
+          </Tabs>
+
+          <Box className="flex items-center gap-2">
+            <Toggle
+              pressed={isPreviewVisible}
+              onPressedChange={setIsPreviewVisible}
+              aria-label="Toggle preview"
+              size="sm"
+            >
+              {isPreviewVisible ? (
+                <Eye style={css('h-4 w-4')} />
+              ) : (
+                <EyeOff style={css('h-4 w-4')} />
+              )}
+            </Toggle>
+
+            <Toggle
+              pressed={isConsoleVisible}
+              onPressedChange={setIsConsoleVisible}
+              aria-label="Toggle console"
+              size="sm"
+            >
+              <Terminal style={css('h-4 w-4')} />
+            </Toggle>
+
+            <Button
+              variant="outline"
+              size="sm"
+              onClick={runCode}
+              disabled={isRunning}
+              {...sx('gap-2')}
+            >
+              {isRunning ? (
+                <RefreshCw style={css('h-4 w-4 animate-spin')} />
+              ) : (
+                <Play style={css('h-4 w-4')} />
+              )}
+              Run
+            </Button>
+
+            {allowFullscreen && (
+              <Button
+                variant="ghost"
+                size="sm"
+                onClick={() => setIsFullscreen(!isFullscreen)}
+                {...sx('h-8 w-8 p-0')}
+              >
+                {isFullscreen ? (
+                  <Square style={css('h-4 w-4')} />
+                ) : (
+                  <Settings style={css('h-4 w-4')} />
+                )}
+              </Button>
+            )}
+          </Box>
+        </Box>
+
+        {/* Content */}
+        <Box className="flex flex-col h-full">
+          {/* Code Editor */}
+          <Box className="flex-1 min-h-0">
+            <Tabs value={activeFile} onValueChange={setActiveFile}>
+              {files.map((file) => (
+                <TabsContent
+                  key={file.filename}
+                  value={file.filename}
+                  {...sx('m-0 h-full')}
+                >
+                  <CodeSnippet
+                    code={file.content}
+                    language={file.language}
+                    showLineNumbers
+                    showCopyButton={false}
+                    showHeader={false}
+                    maxHeight="100%"
+                    className="border-0 rounded-none"
+                  />
+                </TabsContent>
+              ))}
+            </Tabs>
+          </Box>
+
+          {/* Preview and Console */}
+          {(isPreviewVisible || isConsoleVisible) && (
+            <>
+              <Separator />
+              <Box className="flex flex-col lg:flex-row min-h-0">
+                {/* Preview */}
+                {isPreviewVisible && (
+                  <Box
+                    className="flex-1 min-h-0 border-r last:border-r-0"
+                    style={{ height: previewHeight }}
+                  >
+                    <Box className="flex items-center gap-2 border-b px-4 py-2 bg-muted/30">
+                      <Eye style={css('h-4 w-4')} />
+                      <Box tag="span" className="text-sm font-medium">Preview</Box>
+                      {results.filter((r) => r.type === "error").length > 0 && (
+                        <AlertTriangle style={css('h-4 w-4 text-[var(--lux-state-error)]')} />
+                      )}
+                    </Box>
+                    <Box tag="iframe"
+                      ref={iframeRef}
+                      className="w-full h-full bg-white"
+                      sandbox="allow-scripts allow-same-origin"
+                      srcDoc={previewContent}
+                    />
+                  </Box>
+                )}
+
+                {/* Console */}
+                {isConsoleVisible && (
+                  <Box
+                    className="flex-1 min-h-0"
+                    style={{ height: consoleHeight }}
+                  >
+                    {renderConsole()}
+                  </Box>
+                )}
+              </Box>
+            </>
+          )}
+        </Box>
+
+        {/* Fullscreen overlay */}
+        {isFullscreen && (
+          <Box
+            className="absolute inset-0 bg-black/50"
+            onClick={() => setIsFullscreen(false)}
+          />
+        )}
+      </Box>
+    )
+  }
+)
+
+CodePreview.displayName = "CodePreview"
+
+export { CodePreview, codePreviewVariants }