@luxfi/ui 8.0.0 → 8.1.0

package/src/code-editor.tsx

@@ -0,0 +1,250 @@
+"use client"
+
+import * as React from "react"
+import Editor, { OnChange, OnMount } from "@monaco-editor/react"
+import { Check, ChevronDown, Copy } from "lucide-react"
+import { useTheme } from "next-themes"
+import { toast } from "sonner"
+
+import { cn } from "./utils"
+import { Button } from "./button"
+import { Box, DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger, css, sx } from '@hanzo/ui'
+export interface CodeEditorProps {
+  value?: string
+  defaultValue?: string
+  language?: string
+  height?: string | number
+  theme?: "light" | "dark" | "auto"
+  onChange?: OnChange
+  onMount?: OnMount
+  readOnly?: boolean
+  lineNumbers?: boolean
+  minimap?: boolean
+  wordWrap?: "on" | "off" | "wordWrapColumn" | "bounded"
+  fontSize?: number
+  className?: string
+  showCopyButton?: boolean
+  showLanguageSelector?: boolean
+  availableLanguages?: string[]
+}
+
+const defaultLanguages = [
+  "javascript",
+  "typescript",
+  "python",
+  "java",
+  "csharp",
+  "cpp",
+  "c",
+  "go",
+  "rust",
+  "ruby",
+  "php",
+  "swift",
+  "kotlin",
+  "dart",
+  "html",
+  "css",
+  "scss",
+  "json",
+  "xml",
+  "yaml",
+  "sql",
+  "markdown",
+  "shell",
+  "plaintext",
+]
+
+const languageDisplayNames: Record<string, string> = {
+  javascript: "JavaScript",
+  typescript: "TypeScript",
+  python: "Python",
+  java: "Java",
+  csharp: "C#",
+  cpp: "C++",
+  c: "C",
+  go: "Go",
+  rust: "Rust",
+  ruby: "Ruby",
+  php: "PHP",
+  swift: "Swift",
+  kotlin: "Kotlin",
+  dart: "Dart",
+  html: "HTML",
+  css: "CSS",
+  scss: "SCSS",
+  json: "JSON",
+  xml: "XML",
+  yaml: "YAML",
+  sql: "SQL",
+  markdown: "Markdown",
+  shell: "Shell",
+  plaintext: "Plain Text",
+}
+
+const CodeEditor = React.forwardRef<HTMLDivElement, CodeEditorProps>(
+  (
+    {
+      value,
+      defaultValue = "",
+      language = "javascript",
+      height = "400px",
+      theme: themeProp = "auto",
+      onChange,
+      onMount,
+      readOnly = false,
+      lineNumbers = true,
+      minimap = false,
+      wordWrap = "on",
+      fontSize = 14,
+      className,
+      showCopyButton = true,
+      showLanguageSelector = true,
+      availableLanguages = defaultLanguages,
+    },
+    ref
+  ) => {
+    const { theme: systemTheme } = useTheme()
+    const [selectedLanguage, setSelectedLanguage] = React.useState(language)
+    const [copied, setCopied] = React.useState(false)
+    const [editorValue, setEditorValue] = React.useState(value || defaultValue)
+
+    React.useEffect(() => {
+      if (value !== undefined) {
+        setEditorValue(value)
+      }
+    }, [value])
+
+    const handleCopy = React.useCallback(async () => {
+      try {
+        await navigator.clipboard.writeText(editorValue)
+        setCopied(true)
+        setTimeout(() => setCopied(false), 2000)
+        toast.success("Code copied to clipboard")
+      } catch (err) {
+        console.error("Failed to copy:", err)
+        toast.error("Failed to copy code")
+      }
+    }, [editorValue])
+
+    const handleChange: OnChange = React.useCallback(
+      (newValue, ev) => {
+        setEditorValue(newValue || "")
+        if (onChange) {
+          onChange(newValue, ev)
+        }
+      },
+      [onChange]
+    )
+
+    const resolveTheme = React.useMemo(() => {
+      if (themeProp === "auto") {
+        return systemTheme === "dark" ? "vs-dark" : "light"
+      }
+      return themeProp === "dark" ? "vs-dark" : "light"
+    }, [themeProp, systemTheme])
+
+    return (
+      <Box
+        ref={ref}
+        className={cn(
+          "relative overflow-hidden rounded-md border bg-background",
+          className
+        )}
+      >
+        {(showLanguageSelector || showCopyButton) && (
+          <Box className="flex items-center justify-between border-b bg-muted/50 px-3 py-2">
+            {showLanguageSelector && (
+              <DropdownMenu>
+                <DropdownMenuTrigger asChild>
+                  <Button
+                    variant="ghost"
+                    size="sm"
+                    {...sx('h-8 gap-1 px-2 text-xs font-mono')}
+                  >
+                    {languageDisplayNames[selectedLanguage] || selectedLanguage}
+                    <ChevronDown style={css('h-3 w-3')} />
+                  </Button>
+                </DropdownMenuTrigger>
+                <DropdownMenuContent
+                  align="start"
+                  className="max-h-80 overflow-auto"
+                >
+                  {availableLanguages.map((lang) => (
+                    <DropdownMenuItem
+                      key={lang}
+                      onClick={() => setSelectedLanguage(lang)}
+                      className="font-mono text-xs"
+                    >
+                      {languageDisplayNames[lang] || lang}
+                    </DropdownMenuItem>
+                  ))}
+                </DropdownMenuContent>
+              </DropdownMenu>
+            )}
+            {showCopyButton && (
+              <Button
+                variant="ghost"
+                size="sm"
+                {...sx('h-8 gap-1.5 px-2 text-xs')}
+                onClick={handleCopy}
+                disabled={!editorValue}
+              >
+                {copied ? (
+                  <>
+                    <Check style={css('h-3 w-3')} />
+                    Copied!
+                  </>
+                ) : (
+                  <>
+                    <Copy style={css('h-3 w-3')} />
+                    Copy
+                  </>
+                )}
+              </Button>
+            )}
+          </Box>
+        )}
+        <Editor
+          height={height}
+          defaultLanguage={language}
+          language={selectedLanguage}
+          value={editorValue}
+          defaultValue={defaultValue}
+          theme={resolveTheme}
+          onChange={handleChange}
+          onMount={onMount}
+          options={{
+            readOnly,
+            lineNumbers: lineNumbers ? "on" : "off",
+            minimap: {
+              enabled: minimap,
+            },
+            wordWrap,
+            fontSize,
+            scrollBeyondLastLine: false,
+            automaticLayout: true,
+            tabSize: 2,
+            insertSpaces: true,
+            formatOnPaste: true,
+            formatOnType: true,
+            scrollbar: {
+              vertical: "auto",
+              horizontal: "auto",
+              verticalScrollbarSize: 10,
+              horizontalScrollbarSize: 10,
+            },
+            padding: {
+              top: 16,
+              bottom: 16,
+            },
+          }}
+        />
+      </Box>
+    )
+  }
+)
+
+CodeEditor.displayName = "CodeEditor"
+
+export { CodeEditor }

package/src/code-explorer.tsx

@@ -0,0 +1,403 @@
+"use client"
+
+import { VariantProps, variants } from '@hanzo/ui'
+import * as React from "react"
+import {
+  ChevronDown,
+  ChevronRight,
+  File,
+  FileCode,
+  FileImage,
+  FileText,
+  Folder,
+  FolderOpen,
+  Search,
+  X,
+} from "lucide-react"
+
+import { cn } from "./utils"
+import { Button } from "./button"
+import { Input } from "./input"
+import { Box, ScrollArea, css, sx } from '@hanzo/ui'
+const codeExplorerVariants = variants(
+  "relative flex flex-col overflow-hidden rounded-lg border bg-background",
+  {
+    variants: {
+      size: {
+        sm: "text-xs",
+        default: "text-sm",
+        lg: "text-base",
+      },
+    },
+    defaultVariants: {
+      size: "default",
+    },
+  }
+)
+
+export interface FileTreeNode {
+  id: string
+  name: string
+  type: "file" | "folder"
+  path: string
+  size?: number
+  modified?: Date
+  children?: FileTreeNode[]
+  content?: string
+  language?: string
+  isExpanded?: boolean
+}
+
+export interface CodeExplorerProps
+  extends React.HTMLAttributes<HTMLDivElement>,
+    VariantProps<typeof codeExplorerVariants> {
+  files: FileTreeNode[]
+  onFileSelect?: (file: FileTreeNode) => void
+  onFolderToggle?: (folder: FileTreeNode) => void
+  selectedFile?: string
+  showSearch?: boolean
+  showFileIcons?: boolean
+  showFileSize?: boolean
+  showModifiedDate?: boolean
+  height?: string
+  defaultExpanded?: string[]
+  searchPlaceholder?: string
+  emptyMessage?: string
+}
+
+// File type icons mapping
+const getFileIcon = (fileName: string, isFolder: boolean = false) => {
+  if (isFolder) return Folder
+
+  const ext = fileName.split(".").pop()?.toLowerCase()
+
+  switch (ext) {
+    case "js":
+    case "jsx":
+    case "ts":
+    case "tsx":
+    case "vue":
+    case "svelte":
+      return FileCode
+    case "json":
+    case "xml":
+    case "yaml":
+    case "yml":
+    case "toml":
+    case "ini":
+      return FileText
+    case "png":
+    case "jpg":
+    case "jpeg":
+    case "gif":
+    case "svg":
+    case "webp":
+    case "ico":
+      return FileImage
+    default:
+      return File
+  }
+}
+
+// Format file size
+const formatFileSize = (bytes?: number): string => {
+  if (!bytes) return ""
+
+  const units = ["B", "KB", "MB", "GB"]
+  let size = bytes
+  let unitIndex = 0
+
+  while (size >= 1024 && unitIndex < units.length - 1) {
+    size /= 1024
+    unitIndex++
+  }
+
+  return `${size.toFixed(1)} ${units[unitIndex]}`
+}
+
+// Format modified date
+const formatModifiedDate = (date?: Date): string => {
+  if (!date) return ""
+
+  const now = new Date()
+  const diff = now.getTime() - date.getTime()
+  const days = Math.floor(diff / (1000 * 60 * 60 * 24))
+
+  if (days === 0) return "Today"
+  if (days === 1) return "Yesterday"
+  if (days < 7) return `${days} days ago`
+  if (days < 30) return `${Math.floor(days / 7)} weeks ago`
+  if (days < 365) return `${Math.floor(days / 30)} months ago`
+  return `${Math.floor(days / 365)} years ago`
+}
+
+const CodeExplorer = React.forwardRef<HTMLDivElement, CodeExplorerProps>(
+  (
+    {
+      className,
+      size,
+      files,
+      onFileSelect,
+      onFolderToggle,
+      selectedFile,
+      showSearch = true,
+      showFileIcons = true,
+      showFileSize = false,
+      showModifiedDate = false,
+      height = "400px",
+      defaultExpanded = [],
+      searchPlaceholder = "Search files...",
+      emptyMessage = "No files found",
+      ...props
+    },
+    ref
+  ) => {
+    const [searchTerm, setSearchTerm] = React.useState("")
+    const [expandedFolders, setExpandedFolders] = React.useState<Set<string>>(
+      new Set(defaultExpanded)
+    )
+
+    // Build file tree with expansion state
+    const buildFileTree = React.useCallback(
+      (nodes: FileTreeNode[]): FileTreeNode[] => {
+        return nodes.map((node) => ({
+          ...node,
+          isExpanded: expandedFolders.has(node.id),
+          children: node.children ? buildFileTree(node.children) : undefined,
+        }))
+      },
+      [expandedFolders]
+    )
+
+    // Filter files based on search term
+    const filterFiles = React.useCallback(
+      (nodes: FileTreeNode[], term: string): FileTreeNode[] => {
+        if (!term) return nodes
+
+        const filtered: FileTreeNode[] = []
+
+        for (const node of nodes) {
+          if (node.name.toLowerCase().includes(term.toLowerCase())) {
+            filtered.push(node)
+          } else if (node.type === "folder" && node.children) {
+            const filteredChildren = filterFiles(node.children, term)
+            if (filteredChildren.length > 0) {
+              filtered.push({
+                ...node,
+                children: filteredChildren,
+                isExpanded: true, // Auto-expand folders with matches
+              })
+            }
+          }
+        }
+
+        return filtered
+      },
+      []
+    )
+
+    const processedFiles = React.useMemo(() => {
+      const withExpansion = buildFileTree(files)
+      return searchTerm ? filterFiles(withExpansion, searchTerm) : withExpansion
+    }, [files, searchTerm, buildFileTree, filterFiles])
+
+    const toggleFolder = React.useCallback(
+      (folder: FileTreeNode) => {
+        setExpandedFolders((prev) => {
+          const newSet = new Set(prev)
+          if (newSet.has(folder.id)) {
+            newSet.delete(folder.id)
+          } else {
+            newSet.add(folder.id)
+          }
+          return newSet
+        })
+
+        onFolderToggle?.(folder)
+      },
+      [onFolderToggle]
+    )
+
+    const renderFileNode = React.useCallback(
+      (node: FileTreeNode, depth: number = 0) => {
+        const Icon = showFileIcons
+          ? getFileIcon(node.name, node.type === "folder")
+          : null
+        const FolderIcon =
+          node.type === "folder" && node.isExpanded ? FolderOpen : Folder
+        const isSelected =
+          selectedFile === node.id || selectedFile === node.path
+
+        return (
+          <div key={node.id}>
+            <Box
+              className={cn(
+                "flex items-center gap-2 px-2 py-1 hover:bg-muted/50 cursor-pointer transition-colors",
+                isSelected && "bg-muted",
+                "rounded-sm"
+              )}
+              style={{ paddingLeft: `${depth * 16 + 8}px` }}
+              onClick={() => {
+                if (node.type === "folder") {
+                  toggleFolder(node)
+                } else {
+                  onFileSelect?.(node)
+                }
+              }}
+            >
+              {/* Folder chevron */}
+              {node.type === "folder" && (
+                <Box className="w-4 h-4 flex items-center justify-center">
+                  {node.isExpanded ? (
+                    <ChevronDown style={css('h-3 w-3')} />
+                  ) : (
+                    <ChevronRight style={css('h-3 w-3')} />
+                  )}
+                </Box>
+              )}
+
+              {/* File/Folder icon */}
+              {showFileIcons && (
+                <Box className="w-4 h-4 flex items-center justify-center flex-shrink-0">
+                  {node.type === "folder" ? (
+                    <FolderIcon style={css('h-4 w-4 text-[var(--color-link-primary)]')} />
+                  ) : Icon ? (
+                    <Icon style={css('h-4 w-4 text-muted-foreground')} />
+                  ) : null}
+                </Box>
+              )}
+
+              {/* File/Folder name */}
+              <Box tag="span" className="flex-1 truncate">{node.name}</Box>
+
+              {/* File size */}
+              {showFileSize && node.type === "file" && node.size && (
+                <Box tag="span" className="text-xs text-muted-foreground flex-shrink-0">
+                  {formatFileSize(node.size)}
+                </Box>
+              )}
+
+              {/* Modified date */}
+              {showModifiedDate && node.modified && (
+                <Box tag="span" className="text-xs text-muted-foreground flex-shrink-0">
+                  {formatModifiedDate(node.modified)}
+                </Box>
+              )}
+            </Box>
+
+            {/* Render children if folder is expanded */}
+            {node.type === "folder" && node.isExpanded && node.children && (
+              <div>
+                {node.children.map((child) => renderFileNode(child, depth + 1))}
+              </div>
+            )}
+          </div>
+        )
+      },
+      [
+        showFileIcons,
+        showFileSize,
+        showModifiedDate,
+        selectedFile,
+        toggleFolder,
+        onFileSelect,
+      ]
+    )
+
+    const clearSearch = () => {
+      setSearchTerm("")
+    }
+
+    return (
+      <Box
+        ref={ref}
+        className={cn(codeExplorerVariants({ size }), className)}
+        style={{ height }}
+        {...props}
+      >
+        {/* Header with search */}
+        {showSearch && (
+          <Box className="flex items-center gap-2 border-b px-4 py-2">
+            <Box className="relative flex-1">
+              <Search style={css('absolute left-2 top-1/2 transform -translate-y-1/2 h-4 w-4 text-muted-foreground')} />
+              <Input
+                value={searchTerm}
+                onChange={(e) => setSearchTerm(e.target.value)}
+                placeholder={searchPlaceholder}
+                {...sx('pl-8 pr-8 h-8')}
+              />
+              {searchTerm && (
+                <Button
+                  variant="ghost"
+                  size="sm"
+                  onClick={clearSearch}
+                  {...sx('absolute right-1 top-1/2 transform -translate-y-1/2 h-6 w-6 p-0')}
+                >
+                  <X style={css('h-3 w-3')} />
+                </Button>
+              )}
+            </Box>
+          </Box>
+        )}
+
+        {/* File tree */}
+        <ScrollArea {...sx('flex-1')}>
+          <Box className="p-2">
+            {processedFiles.length === 0 ? (
+              <Box className="flex items-center justify-center h-24 text-muted-foreground">
+                {searchTerm ? `No files match "${searchTerm}"` : emptyMessage}
+              </Box>
+            ) : (
+              <Box className="space-y-0.5">
+                {processedFiles.map((node) => renderFileNode(node, 0))}
+              </Box>
+            )}
+          </Box>
+        </ScrollArea>
+
+        {/* Footer with file count */}
+        <Box className="border-t px-4 py-2 text-xs text-muted-foreground">
+          {(() => {
+            const countFiles = (
+              nodes: FileTreeNode[]
+            ): { files: number; folders: number } => {
+              let files = 0
+              let folders = 0
+
+              for (const node of nodes) {
+                if (node.type === "file") {
+                  files++
+                } else {
+                  folders++
+                  if (node.children) {
+                    const childCounts = countFiles(node.children)
+                    files += childCounts.files
+                    folders += childCounts.folders
+                  }
+                }
+              }
+
+              return { files, folders }
+            }
+
+            const { files: fileCount, folders: folderCount } =
+              countFiles(processedFiles)
+            const parts = []
+
+            if (fileCount > 0)
+              parts.push(`${fileCount} file${fileCount === 1 ? "" : "s"}`)
+            if (folderCount > 0)
+              parts.push(`${folderCount} folder${folderCount === 1 ? "" : "s"}`)
+
+            return parts.join(", ") || "Empty"
+          })()}
+          {searchTerm && <span> (filtered)</span>}
+        </Box>
+      </Box>
+    )
+  }
+)
+
+CodeExplorer.displayName = "CodeExplorer"
+
+export { CodeExplorer, codeExplorerVariants }