@luxfi/ui 8.0.0 → 8.1.0

package/src/code-snippet.tsx

@@ -0,0 +1,336 @@
+"use client"
+
+import * as React from "react"
+import { Box, VariantProps, css, sx, variants } from '@hanzo/ui'
+import { Check, Copy, FileText, Maximize2, Minimize2 } from "lucide-react"
+import { bundledLanguages, codeToHtml } from "shiki"
+
+import { cn } from "./utils"
+import { Badge } from "./badge"
+import { Button } from "./button"
+import { Skeleton } from "./skeleton"
+
+const codeSnippetVariants = variants("relative group", {
+  variants: {
+    variant: {
+      default: "rounded-lg border bg-muted/50",
+      inline: "inline-block rounded-md bg-muted px-2 py-1",
+      minimal: "bg-transparent",
+    },
+    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)]",
+      terminal: "bg-black border-[var(--lux-state-success)]/30 text-[var(--lux-state-success)]",
+      retro: "bg-[var(--lux-state-notice)] border-[var(--lux-state-notice)] text-[var(--lux-state-notice)]",
+    },
+    size: {
+      xs: "text-xs",
+      sm: "text-sm",
+      default: "text-sm",
+      lg: "text-base",
+    },
+  },
+  defaultVariants: {
+    variant: "default",
+    theme: "dark",
+    size: "default",
+  },
+})
+
+export interface CodeSnippetProps
+  extends React.HTMLAttributes<HTMLDivElement>,
+    VariantProps<typeof codeSnippetVariants> {
+  code: string
+  language?: string
+  filename?: string
+  showLineNumbers?: boolean
+  highlightLines?: number[]
+  showCopyButton?: boolean
+  showLanguageBadge?: boolean
+  showHeader?: boolean
+  maxHeight?: string
+  expandable?: boolean
+  collapsedHeight?: string
+  wrapLines?: boolean
+  startLineNumber?: number
+}
+
+const CodeSnippet = React.forwardRef<HTMLDivElement, CodeSnippetProps>(
+  (
+    {
+      className,
+      variant,
+      theme,
+      size,
+      code,
+      language = "text",
+      filename,
+      showLineNumbers = false,
+      highlightLines = [],
+      showCopyButton = true,
+      showLanguageBadge = true,
+      showHeader = true,
+      maxHeight,
+      expandable = false,
+      collapsedHeight = "200px",
+      wrapLines = false,
+      startLineNumber = 1,
+      ...props
+    },
+    ref
+  ) => {
+    const [highlightedCode, setHighlightedCode] = React.useState<string>("")
+    const [copied, setCopied] = React.useState(false)
+    const [isLoading, setIsLoading] = React.useState(true)
+    const [isExpanded, setIsExpanded] = React.useState(!expandable)
+
+    const themeMap = {
+      dark: "github-dark",
+      light: "github-light",
+      github: "github-light",
+      "github-dark": "github-dark",
+      terminal: "github-dark",
+      retro: "github-light",
+    }
+
+    React.useEffect(() => {
+      const highlightCode = async () => {
+        setIsLoading(true)
+        try {
+          // Check if language is supported
+          const supportedLang = Object.keys(bundledLanguages).includes(language)
+
+          const highlighted = await codeToHtml(code, {
+            lang: supportedLang ? language : "text",
+            theme: themeMap[theme || "dark"],
+          })
+
+          // Extract just the inner HTML content
+          const tempDiv = document.createElement("div")
+          tempDiv.innerHTML = highlighted
+          const codeElement = tempDiv.querySelector("code")
+          setHighlightedCode(codeElement?.innerHTML || highlighted)
+        } catch (error) {
+          console.error("Failed to highlight code:", error)
+          // Fallback to plain text with basic HTML escaping
+          const escaped = code
+            .replace(/&/g, "&amp;")
+            .replace(/</g, "&lt;")
+            .replace(/>/g, "&gt;")
+          setHighlightedCode(escaped)
+        } finally {
+          setIsLoading(false)
+        }
+      }
+
+      highlightCode()
+    }, [code, language, theme])
+
+    const copyToClipboard = React.useCallback(async () => {
+      try {
+        await navigator.clipboard.writeText(code)
+        setCopied(true)
+        setTimeout(() => setCopied(false), 2000)
+      } catch (error) {
+        console.error("Failed to copy code:", error)
+      }
+    }, [code])
+
+    const lines = highlightedCode.split("\n").filter((line, index, array) => {
+      // Keep empty lines except for the last one if it's empty
+      return line.trim() !== "" || index < array.length - 1
+    })
+
+    const renderInline = () => (
+      <Box tag="code"
+        className={cn(
+          codeSnippetVariants({ variant, theme, size }),
+          "font-mono",
+          className
+        )}
+        dangerouslySetInnerHTML={{ __html: highlightedCode }}
+      />
+    )
+
+    const renderBlock = () => (
+      <Box
+        ref={ref as never}
+        className={cn(
+          codeSnippetVariants({ variant, theme, size }),
+          "overflow-hidden",
+          className
+        )}
+        {...props}
+      >
+        {/* Header */}
+        {showHeader &&
+          (filename || language || showCopyButton || expandable) && (
+            <Box className="flex items-center justify-between border-b px-4 py-2 bg-muted/30">
+              <Box className="flex items-center gap-2">
+                {filename && (
+                  <Box className="flex items-center gap-1.5">
+                    <FileText style={css('h-3.5 w-3.5 text-muted-foreground')} />
+                    <Box tag="span" className="text-sm font-medium">{filename}</Box>
+                  </Box>
+                )}
+                {showLanguageBadge && language && (
+                  <Badge colorPalette="gray" {...sx('text-xs')}>
+                    {language}
+                  </Badge>
+                )}
+              </Box>
+              <Box className="flex items-center gap-1">
+                {expandable && (
+                  <Button
+                    variant="ghost"
+                    size="sm"
+                    onClick={() => setIsExpanded(!isExpanded)}
+                    {...sx('h-8 w-8 p-0')}
+                  >
+                    {isExpanded ? (
+                      <Minimize2 style={css('h-3.5 w-3.5')} />
+                    ) : (
+                      <Maximize2 style={css('h-3.5 w-3.5')} />
+                    )}
+                    <Box tag="span" className="sr-only">
+                      {isExpanded ? "Collapse" : "Expand"}
+                    </Box>
+                  </Button>
+                )}
+                {showCopyButton && (
+                  <Button
+                    variant="ghost"
+                    size="sm"
+                    onClick={copyToClipboard}
+                    {...sx('h-8 w-8 p-0 opacity-0 group-hover:opacity-100 transition-opacity')}
+                  >
+                    {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 code"}
+                    </Box>
+                  </Button>
+                )}
+              </Box>
+            </Box>
+          )}
+
+        {/* Content */}
+        <Box
+          className={cn("overflow-auto", !wrapLines && "overflow-x-auto")}
+          style={{
+            maxHeight: isExpanded ? maxHeight : collapsedHeight,
+          }}
+        >
+          {isLoading ? (
+            <Box className="p-4 space-y-2">
+              {Array.from({ length: Math.min(lines.length || 5, 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>
+          ) : (
+            <Box className="font-mono">
+              {lines.map((line, index) => {
+                const lineNumber = index + startLineNumber
+                const isHighlighted = highlightLines.includes(lineNumber)
+
+                return (
+                  <Box
+                    key={index}
+                    className={cn(
+                      "group relative flex min-h-[1.5rem] items-center px-4 py-0.5",
+                      isHighlighted &&
+                        "bg-[var(--color-link-primary)]/10 border-l-2 border-l-blue-500",
+                      !wrapLines && "whitespace-nowrap"
+                    )}
+                  >
+                    {showLineNumbers && (
+                      <Box tag="span" className="mr-4 inline-block w-8 select-none text-right text-xs text-muted-foreground">
+                        {lineNumber}
+                      </Box>
+                    )}
+                    <Box
+                      className={cn(
+                        "flex-1",
+                        wrapLines
+                          ? "whitespace-pre-wrap break-words"
+                          : "overflow-x-auto"
+                      )}
+                      dangerouslySetInnerHTML={{ __html: line }}
+                    />
+                  </Box>
+                )
+              })}
+            </Box>
+          )}
+        </Box>
+
+        {/* Expand indicator */}
+        {expandable && !isExpanded && (
+          <Box className="absolute bottom-0 left-0 right-0 h-8 bg-gradient-to-t from-background to-transparent pointer-events-none" />
+        )}
+
+        {/* Copy button for minimal variant */}
+        {variant === "minimal" && showCopyButton && (
+          <Button
+            variant="ghost"
+            size="sm"
+            onClick={copyToClipboard}
+            {...sx('absolute top-2 right-2 h-8 w-8 p-0 opacity-0 group-hover:opacity-100 transition-opacity')}
+          >
+            {copied ? (
+              <Check style={css('h-3.5 w-3.5 text-[var(--lux-state-success)]')} />
+            ) : (
+              <Copy style={css('h-3.5 w-3.5')} />
+            )}
+          </Button>
+        )}
+      </Box>
+    )
+
+    if (variant === "inline") {
+      return renderInline()
+    }
+
+    return renderBlock()
+  }
+)
+
+CodeSnippet.displayName = "CodeSnippet"
+
+// Helper component for inline code
+const InlineCode = React.forwardRef<
+  HTMLElement,
+  React.HTMLAttributes<HTMLElement> & {
+    children: string
+    language?: string
+  }
+>(({ children, language, className, ...props }, ref) => {
+  return (
+    <CodeSnippet
+      ref={ref as any}
+      code={children}
+      language={language}
+      variant="inline"
+      showCopyButton={false}
+      showLanguageBadge={false}
+      showHeader={false}
+      className={className}
+      {...props}
+    />
+  )
+})
+
+InlineCode.displayName = "InlineCode"
+
+export { CodeSnippet, InlineCode, codeSnippetVariants }

package/src/code-tabs.tsx

@@ -0,0 +1,78 @@
+"use client"
+
+import * as React from "react"
+import { Box } from '@hanzo/ui'
+
+import { cn } from "./utils"
+
+export interface CodeTabsProps extends React.HTMLAttributes<HTMLDivElement> {
+  tabs?: Array<{
+    label: string
+    language: string
+    code: string
+  }>
+  defaultTab?: number
+}
+
+const CodeTabs = React.forwardRef<HTMLDivElement, CodeTabsProps>(
+  ({ className, tabs = [], defaultTab = 0, ...props }, ref) => {
+    const [activeTab, setActiveTab] = React.useState(defaultTab)
+
+    if (tabs.length === 0) {
+      return (
+        <Box
+          ref={ref}
+          className={cn(
+            "rounded-lg border bg-card p-6 text-card-foreground shadow-sm",
+            className
+          )}
+          {...props}
+        >
+          <Box tag="p" className="text-sm text-muted-foreground">
+            No code tabs available. Add tabs to display code snippets.
+          </Box>
+        </Box>
+      )
+    }
+
+    return (
+      <Box
+        ref={ref}
+        className={cn(
+          "rounded-lg border bg-card text-card-foreground shadow-sm",
+          className
+        )}
+        {...props}
+      >
+        <Box className="border-b">
+          <Box className="flex gap-1 p-2">
+            {tabs.map((tab, index) => (
+              <Box tag="button"
+                key={index}
+                onClick={() => setActiveTab(index)}
+                className={cn(
+                  "rounded-md px-4 py-2 text-sm font-medium transition-colors",
+                  activeTab === index
+                    ? "bg-primary text-primary-foreground"
+                    : "hover:bg-muted"
+                )}
+              >
+                {tab.label}
+              </Box>
+            ))}
+          </Box>
+        </Box>
+
+        <Box className="p-4">
+          <Box tag="pre" className="overflow-x-auto rounded-md bg-muted p-4">
+            <Box tag="code" className="text-sm">{tabs[activeTab]?.code}</Box>
+          </Box>
+        </Box>
+      </Box>
+    )
+  }
+)
+
+CodeTabs.displayName = "CodeTabs"
+
+export { CodeTabs }