@luxfi/ui 8.0.0 → 8.1.0

package/src/terminal.tsx

@@ -0,0 +1,399 @@
+"use client"
+
+import * as React from "react"
+import { Box, css } from '@hanzo/ui'
+import { Check, Copy } from "lucide-react"
+import { toast } from "sonner"
+
+import { cn } from "./utils"
+
+interface Command {
+  id: string
+  input: string
+  output: string | React.ReactNode
+  timestamp: Date
+  type?: "command" | "error" | "success" | "info"
+}
+
+interface TerminalProps extends React.HTMLAttributes<HTMLDivElement> {
+  prompt?: string
+  initialCommands?: Command[]
+  onCommand?: (
+    command: string
+  ) => Promise<string | React.ReactNode> | string | React.ReactNode
+  theme?: "dark" | "light" | "matrix" | "dracula"
+  enableHistory?: boolean
+  enableAutoComplete?: boolean
+  autoCompleteCommands?: string[]
+  maxHistorySize?: number
+}
+
+const themes = {
+  dark: {
+    background: "bg-[var(--color-bg-primary)]",
+    text: "text-[var(--color-text-disabled)]",
+    prompt: "text-[var(--lux-state-success)]",
+    input: "text-white",
+    output: "text-[var(--color-text-disabled)]",
+    error: "text-[var(--lux-state-error)]",
+    success: "text-[var(--lux-state-success)]",
+    info: "text-[var(--color-link-primary)]",
+    border: "border-[var(--color-border-divider)]",
+    selection: "selection:bg-[var(--color-bg-primary)]",
+  },
+  light: {
+    background: "bg-white",
+    text: "text-[var(--color-text-primary)]",
+    prompt: "text-[var(--color-link-primary)]",
+    input: "text-[var(--color-text-primary)]",
+    output: "text-[var(--color-text-primary)]",
+    error: "text-[var(--lux-state-error)]",
+    success: "text-[var(--lux-state-success)]",
+    info: "text-[var(--color-link-primary)]",
+    border: "border-[var(--color-border-divider)]",
+    selection: "selection:bg-[var(--color-link-primary)]",
+  },
+  matrix: {
+    background: "bg-black",
+    text: "text-[var(--lux-state-success)]",
+    prompt: "text-[var(--lux-state-success)]",
+    input: "text-[var(--lux-state-success)]",
+    output: "text-[var(--lux-state-success)]",
+    error: "text-[var(--lux-state-error)]",
+    success: "text-[var(--lux-state-success)]",
+    info: "text-[var(--color-link-primary)]",
+    border: "border-[var(--lux-state-success)]",
+    selection: "selection:bg-[var(--lux-state-success)]",
+  },
+  dracula: {
+    background: "bg-[#282a36]",
+    text: "text-[#f8f8f2]",
+    prompt: "text-[#50fa7b]",
+    input: "text-[#f8f8f2]",
+    output: "text-[#6272a4]",
+    error: "text-[#ff5555]",
+    success: "text-[#50fa7b]",
+    info: "text-[#8be9fd]",
+    border: "border-[#44475a]",
+    selection: "selection:bg-[#44475a]",
+  },
+}
+
+const highlightSyntax = (text: string): React.ReactNode => {
+  // Simple syntax highlighting for common patterns
+  const patterns = [
+    { regex: /(".*?"|'.*?')/g, className: "text-[var(--lux-state-notice)]" }, // strings
+    { regex: /\b(true|false|null|undefined)\b/g, className: "text-[var(--lux-state-notice)]" }, // keywords
+    { regex: /\b(\d+)\b/g, className: "text-[var(--color-link-primary)]" }, // numbers
+    {
+      regex: /\b(function|const|let|var|if|else|for|while|return)\b/g,
+      className: "text-[var(--color-link-primary)]",
+    }, // js keywords
+    { regex: /(--?\w+)/g, className: "text-[var(--color-link-primary)]" }, // flags
+  ]
+
+  let highlighted = text
+  patterns.forEach(({ regex, className }) => {
+    highlighted = highlighted.replace(
+      regex,
+      `<span class="${className}">$1</span>`
+    )
+  })
+
+  return <span dangerouslySetInnerHTML={{ __html: highlighted }} />
+}
+
+export function Terminal({
+  prompt = "$",
+  initialCommands = [],
+  onCommand,
+  theme = "dark",
+  enableHistory = true,
+  enableAutoComplete = true,
+  autoCompleteCommands = [
+    "help",
+    "clear",
+    "exit",
+    "ls",
+    "cd",
+    "pwd",
+    "echo",
+    "date",
+    "whoami",
+  ],
+  maxHistorySize = 50,
+  className,
+  ...props
+}: TerminalProps) {
+  const [commands, setCommands] = React.useState<Command[]>(initialCommands)
+  const [currentInput, setCurrentInput] = React.useState("")
+  const [historyIndex, setHistoryIndex] = React.useState(-1)
+  const [commandHistory, setCommandHistory] = React.useState<string[]>([])
+  const [suggestions, setSuggestions] = React.useState<string[]>([])
+  const [suggestionIndex, setSuggestionIndex] = React.useState(0)
+  const [copied, setCopied] = React.useState<string | null>(null)
+
+  const terminalRef = React.useRef<HTMLDivElement>(null)
+  const inputRef = React.useRef<HTMLInputElement>(null)
+  const currentTheme = themes[theme]
+
+  React.useEffect(() => {
+    if (terminalRef.current) {
+      terminalRef.current.scrollTop = terminalRef.current.scrollHeight
+    }
+  }, [commands])
+
+  React.useEffect(() => {
+    if (enableAutoComplete && currentInput) {
+      const matches = autoCompleteCommands.filter((cmd) =>
+        cmd.toLowerCase().startsWith(currentInput.toLowerCase())
+      )
+      setSuggestions(matches)
+      setSuggestionIndex(0)
+    } else {
+      setSuggestions([])
+    }
+  }, [currentInput, enableAutoComplete, autoCompleteCommands])
+
+  const handleCommand = async (input: string) => {
+    if (!input.trim()) return
+
+    const newCommand: Command = {
+      id: Date.now().toString(),
+      input,
+      output: "",
+      timestamp: new Date(),
+      type: "command",
+    }
+
+    // Built-in commands
+    if (input.toLowerCase() === "clear") {
+      setCommands([])
+      setCurrentInput("")
+      return
+    }
+
+    if (input.toLowerCase() === "help") {
+      newCommand.output = (
+        <Box className="space-y-1">
+          <div>Available commands:</div>
+          <Box className="ml-4 space-y-1">
+            <div>• clear - Clear the terminal</div>
+            <div>• help - Show this help message</div>
+            <div>• date - Show current date and time</div>
+            <div>• echo [text] - Print text to terminal</div>
+            {autoCompleteCommands.map((cmd) => (
+              <div key={cmd}>• {cmd}</div>
+            ))}
+          </Box>
+        </Box>
+      )
+      newCommand.type = "info"
+    } else if (input.toLowerCase() === "date") {
+      newCommand.output = new Date().toString()
+      newCommand.type = "success"
+    } else if (input.toLowerCase().startsWith("echo ")) {
+      newCommand.output = input.substring(5)
+      newCommand.type = "success"
+    } else if (onCommand) {
+      try {
+        const result = await onCommand(input)
+        newCommand.output = result
+        newCommand.type = "success"
+      } catch (error) {
+        newCommand.output = `Error: ${error instanceof Error ? error.message : String(error)}`
+        newCommand.type = "error"
+      }
+    } else {
+      newCommand.output = `Command not found: ${input}`
+      newCommand.type = "error"
+    }
+
+    setCommands((prev) => [...prev, newCommand])
+
+    if (enableHistory) {
+      setCommandHistory((prev) => {
+        const updated = [input, ...prev.filter((cmd) => cmd !== input)]
+        return updated.slice(0, maxHistorySize)
+      })
+    }
+
+    setCurrentInput("")
+    setHistoryIndex(-1)
+    setSuggestions([])
+  }
+
+  const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
+    if (e.key === "Enter") {
+      e.preventDefault()
+      handleCommand(currentInput)
+    } else if (e.key === "ArrowUp" && enableHistory) {
+      e.preventDefault()
+      if (historyIndex < commandHistory.length - 1) {
+        const newIndex = historyIndex + 1
+        setHistoryIndex(newIndex)
+        setCurrentInput(commandHistory[newIndex])
+      }
+    } else if (e.key === "ArrowDown" && enableHistory) {
+      e.preventDefault()
+      if (historyIndex > 0) {
+        const newIndex = historyIndex - 1
+        setHistoryIndex(newIndex)
+        setCurrentInput(commandHistory[newIndex])
+      } else if (historyIndex === 0) {
+        setHistoryIndex(-1)
+        setCurrentInput("")
+      }
+    } else if (e.key === "Tab" && suggestions.length > 0) {
+      e.preventDefault()
+      const suggestion = suggestions[suggestionIndex]
+      if (suggestion) {
+        setCurrentInput(suggestion)
+        setSuggestions([])
+      }
+    } else if (e.key === "Escape") {
+      setSuggestions([])
+      setSuggestionIndex(0)
+    }
+  }
+
+  const handleCopy = async (text: string) => {
+    try {
+      await navigator.clipboard.writeText(text)
+      setCopied(text)
+      setTimeout(() => setCopied(null), 2000)
+      toast.success("Command copied to clipboard")
+    } catch (err) {
+      console.error("Failed to copy:", err)
+      toast.error("Failed to copy command")
+    }
+  }
+
+  const handlePaste = async () => {
+    try {
+      const text = await navigator.clipboard.readText()
+      setCurrentInput((prev) => prev + text)
+      inputRef.current?.focus()
+    } catch (err) {
+      console.error("Failed to paste:", err)
+      toast.error("Failed to paste from clipboard")
+    }
+  }
+
+  return (
+    <Box
+      ref={terminalRef as never}
+      className={cn(
+        "relative rounded-lg border p-4 font-mono text-sm overflow-auto",
+        currentTheme.background,
+        currentTheme.text,
+        currentTheme.border,
+        currentTheme.selection,
+        className
+      )}
+      onClick={() => inputRef.current?.focus()}
+      onPaste={handlePaste}
+      {...props}
+    >
+      {/* Terminal header */}
+      <Box className="mb-4 flex items-center space-x-2">
+        <Box className="h-3 w-3 rounded-full bg-[var(--lux-state-error)]" />
+        <Box className="h-3 w-3 rounded-full bg-[var(--lux-state-notice)]" />
+        <Box className="h-3 w-3 rounded-full bg-[var(--lux-state-success)]" />
+        <Box tag="span" className="ml-2 text-xs opacity-50">terminal</Box>
+      </Box>
+
+      {/* Command history */}
+      <Box className="space-y-2">
+        {commands.map((cmd) => (
+          <Box key={cmd.id} className="group relative">
+            <Box className="flex items-start space-x-2">
+              <Box tag="span" className={currentTheme.prompt}>{prompt}</Box>
+              <Box tag="span" className={currentTheme.input}>
+                {highlightSyntax(cmd.input)}
+              </Box>
+              <Box tag="button"
+                onClick={() => handleCopy(cmd.input)}
+                className="invisible group-hover:visible ml-auto opacity-50 hover:opacity-100"
+                aria-label="Copy command"
+              >
+                {copied === cmd.input ? (
+                  <Check style={css('h-3 w-3')} />
+                ) : (
+                  <Copy style={css('h-3 w-3')} />
+                )}
+              </Box>
+            </Box>
+            {cmd.output && (
+              <Box
+                className={cn(
+                  "mt-1 pl-4",
+                  cmd.type === "error" && currentTheme.error,
+                  cmd.type === "success" && currentTheme.success,
+                  cmd.type === "info" && currentTheme.info,
+                  (!cmd.type || cmd.type === "command") && currentTheme.output
+                )}
+              >
+                {typeof cmd.output === "string"
+                  ? highlightSyntax(cmd.output)
+                  : cmd.output}
+              </Box>
+            )}
+          </Box>
+        ))}
+      </Box>
+
+      {/* Current input line */}
+      <Box className="relative mt-2">
+        <Box className="flex items-center space-x-2">
+          <Box tag="span" className={currentTheme.prompt}>{prompt}</Box>
+          <Box tag="input"
+            ref={inputRef}
+            type="text"
+            value={currentInput}
+            onChange={(e) => setCurrentInput(e.target.value)}
+            onKeyDown={handleKeyDown}
+            className={cn(
+              "flex-1 bg-transparent outline-none",
+              currentTheme.input
+            )}
+            spellCheck={false}
+            autoComplete="off"
+            aria-label="Terminal input"
+          />
+        </Box>
+
+        {/* Autocomplete suggestions */}
+        {suggestions.length > 0 && (
+          <Box
+            className={cn(
+              "absolute left-0 top-full mt-1 rounded-md border p-1 shadow-lg z-10",
+              currentTheme.background,
+              currentTheme.border
+            )}
+          >
+            {suggestions.map((suggestion, index) => (
+              <Box
+                key={suggestion}
+                className={cn(
+                  "rounded px-2 py-1 cursor-pointer",
+                  index === suggestionIndex
+                    ? "bg-[var(--color-bg-primary)]"
+                    : "hover:bg-[var(--color-bg-primary)]",
+                  currentTheme.text
+                )}
+                onClick={() => {
+                  setCurrentInput(suggestion)
+                  setSuggestions([])
+                  inputRef.current?.focus()
+                }}
+              >
+                {suggestion}
+              </Box>
+            ))}
+          </Box>
+        )}
+      </Box>
+    </Box>
+  )
+}

package/src/ticker-tape.tsx

@@ -0,0 +1,68 @@
+"use client"
+
+import { memo, useEffect, useRef } from "react"
+import { Box } from '@hanzo/ui'
+
+function TickerTape() {
+  const container = useRef<HTMLDivElement>(null)
+
+  useEffect(() => {
+    if (!container.current) return
+
+    // Check if widget is already initialized using data attribute
+    if (container.current.dataset.initialized === "true") {
+      return // Widget already initialized, skip
+    }
+
+    // Mark as initialized before adding script
+    container.current.dataset.initialized = "true"
+
+    const script = document.createElement("script")
+    script.src =
+      "https://s3.tradingview.com/external-embedding/embed-widget-ticker-tape.js"
+    script.type = "text/javascript"
+    script.async = true
+    script.innerHTML = JSON.stringify({
+      symbols: [
+        { proName: "FOREXCOM:SPXUSD", title: "S&P 500" },
+        { proName: "FOREXCOM:NSXUSD", title: "US 100" },
+        { proName: "FX_IDC:EURUSD", title: "EUR/USD" },
+        { proName: "BITSTAMP:BTCUSD", title: "Bitcoin" },
+        { proName: "BITSTAMP:ETHUSD", title: "Ethereum" },
+        { description: "Tesla", proName: "NASDAQ:TSLA" },
+        { description: "Apple", proName: "NASDAQ:AAPL" },
+        { description: "Amazon", proName: "NASDAQ:AMZN" },
+        { description: "NVIDIA", proName: "NASDAQ:NVDA" },
+        { description: "Microsoft", proName: "NASDAQ:MSFT" },
+        { description: "Google", proName: "NASDAQ:GOOGL" },
+        { description: "Meta", proName: "NASDAQ:META" },
+      ],
+      showSymbolLogo: true,
+      isTransparent: false,
+      displayMode: "adaptive",
+      colorTheme: "dark",
+      locale: "en",
+    })
+
+    container.current.appendChild(script)
+
+    // Cleanup function
+    return () => {
+      if (container.current) {
+        // Remove initialization flag on unmount
+        delete container.current.dataset.initialized
+        // Remove all scripts
+        const scripts = container.current.querySelectorAll("script")
+        scripts.forEach((s) => s.remove())
+      }
+    }
+  }, [])
+
+  return (
+    <Box className="tradingview-widget-container w-full" ref={container}>
+      <Box className="tradingview-widget-container__widget"></Box>
+    </Box>
+  )
+}
+
+export default memo(TickerTape)

package/src/ticker.tsx

@@ -0,0 +1,52 @@
+"use client"
+
+import * as React from "react"
+import { Box } from '@hanzo/ui'
+
+import { cn } from "./utils"
+
+export interface TickerProps extends React.HTMLAttributes<HTMLDivElement> {
+  children: React.ReactNode
+  speed?: number
+  direction?: "left" | "right"
+  pauseOnHover?: boolean
+}
+
+const Ticker = React.forwardRef<HTMLDivElement, TickerProps>(
+  (
+    {
+      className,
+      children,
+      speed = 50,
+      direction = "left",
+      pauseOnHover = true,
+      ...props
+    },
+    ref
+  ) => {
+    return (
+      <Box
+        ref={ref}
+        className={cn("group relative overflow-hidden", className)}
+        {...props}
+      >
+        <Box
+          className={cn(
+            "flex w-fit animate-scroll",
+            pauseOnHover && "group-hover:[animation-play-state:paused]"
+          )}
+          style={{
+            animationDuration: `${speed}s`,
+            animationDirection: direction === "right" ? "reverse" : "normal",
+          }}
+        >
+          {children}
+          {children}
+        </Box>
+      </Box>
+    )
+  }
+)
+Ticker.displayName = "Ticker"
+
+export { Ticker }