@wakastellar/ui 2.0.0 → 2.1.0

package/src/components/waka-command-bar/index.tsx

@@ -0,0 +1,403 @@
+"use client"
+
+import * as React from "react"
+import { cn } from "../../utils/cn"
+import { Command, Search, ArrowRight, CornerDownLeft, Hash, Settings, User, FileText, Zap } from "lucide-react"
+
+// ============================================================================
+// Types
+// ============================================================================
+
+export interface CommandItem {
+  id: string
+  label: string
+  description?: string
+  icon?: React.ReactNode
+  shortcut?: string[]
+  category?: string
+  action?: () => void
+  href?: string
+  keywords?: string[]
+}
+
+export interface CommandCategory {
+  id: string
+  label: string
+  items: CommandItem[]
+}
+
+export interface WakaCommandBarProps {
+  /** Whether the command bar is open */
+  open: boolean
+  /** Callback when open state changes */
+  onOpenChange: (open: boolean) => void
+  /** Command items or categories */
+  items: CommandItem[] | CommandCategory[]
+  /** Placeholder text */
+  placeholder?: string
+  /** Called when an item is selected */
+  onSelect?: (item: CommandItem) => void
+  /** Custom empty state */
+  emptyMessage?: string
+  /** Show recent items */
+  recentItems?: CommandItem[]
+  /** Custom footer content */
+  footer?: React.ReactNode
+  /** Keyboard shortcut to open (default: cmd+k) */
+  shortcut?: string[]
+}
+
+// ============================================================================
+// Fuzzy Search
+// ============================================================================
+
+function fuzzyMatch(text: string, query: string): { match: boolean; score: number } {
+  if (!query) return { match: true, score: 1 }
+
+  const textLower = text.toLowerCase()
+  const queryLower = query.toLowerCase()
+
+  // Exact match
+  if (textLower.includes(queryLower)) {
+    return { match: true, score: textLower.indexOf(queryLower) === 0 ? 1 : 0.8 }
+  }
+
+  // Fuzzy match
+  let queryIdx = 0
+  let score = 0
+  let consecutive = 0
+
+  for (let i = 0; i < textLower.length && queryIdx < queryLower.length; i++) {
+    if (textLower[i] === queryLower[queryIdx]) {
+      score += 1 + consecutive * 0.5
+      consecutive++
+      queryIdx++
+    } else {
+      consecutive = 0
+    }
+  }
+
+  const matched = queryIdx === queryLower.length
+  return { match: matched, score: matched ? score / queryLower.length : 0 }
+}
+
+function searchItems(items: CommandItem[], query: string): CommandItem[] {
+  if (!query) return items
+
+  const results = items
+    .map(item => {
+      const labelMatch = fuzzyMatch(item.label, query)
+      const descMatch = item.description ? fuzzyMatch(item.description, query) : { match: false, score: 0 }
+      const keywordMatch = item.keywords?.some(k => fuzzyMatch(k, query).match) ? { match: true, score: 0.5 } : { match: false, score: 0 }
+
+      const bestScore = Math.max(labelMatch.score, descMatch.score * 0.7, keywordMatch.score)
+      const matched = labelMatch.match || descMatch.match || keywordMatch.match
+
+      return { item, score: bestScore, matched }
+    })
+    .filter(r => r.matched)
+    .sort((a, b) => b.score - a.score)
+
+  return results.map(r => r.item)
+}
+
+// ============================================================================
+// Component
+// ============================================================================
+
+export function WakaCommandBar({
+  open,
+  onOpenChange,
+  items,
+  placeholder = "Type a command or search...",
+  onSelect,
+  emptyMessage = "No results found.",
+  recentItems,
+  footer,
+  shortcut = ["⌘", "K"],
+}: WakaCommandBarProps) {
+  const [query, setQuery] = React.useState("")
+  const [selectedIndex, setSelectedIndex] = React.useState(0)
+  const inputRef = React.useRef<HTMLInputElement>(null)
+  const listRef = React.useRef<HTMLDivElement>(null)
+
+  // Normalize items to flat list
+  const isCategories = items.length > 0 && "items" in items[0]
+  const allItems = React.useMemo(() => {
+    if (isCategories) {
+      return (items as CommandCategory[]).flatMap(cat =>
+        cat.items.map(item => ({ ...item, category: cat.label }))
+      )
+    }
+    return items as CommandItem[]
+  }, [items, isCategories])
+
+  // Filter items
+  const filteredItems = React.useMemo(() => {
+    return searchItems(allItems, query)
+  }, [allItems, query])
+
+  // Group by category for display
+  const groupedItems = React.useMemo(() => {
+    if (!isCategories || query) {
+      return [{ label: query ? "Results" : "Commands", items: filteredItems }]
+    }
+    return items as CommandCategory[]
+  }, [items, isCategories, filteredItems, query])
+
+  // Flatten for keyboard navigation
+  const flatItems = React.useMemo(() => {
+    return groupedItems.flatMap(g => g.items)
+  }, [groupedItems])
+
+  // Keyboard navigation
+  React.useEffect(() => {
+    if (!open) return
+
+    const handleKeyDown = (e: KeyboardEvent) => {
+      switch (e.key) {
+        case "ArrowDown":
+          e.preventDefault()
+          setSelectedIndex(i => Math.min(i + 1, flatItems.length - 1))
+          break
+        case "ArrowUp":
+          e.preventDefault()
+          setSelectedIndex(i => Math.max(i - 1, 0))
+          break
+        case "Enter":
+          e.preventDefault()
+          const selected = flatItems[selectedIndex]
+          if (selected) {
+            handleSelect(selected)
+          }
+          break
+        case "Escape":
+          e.preventDefault()
+          onOpenChange(false)
+          break
+      }
+    }
+
+    window.addEventListener("keydown", handleKeyDown)
+    return () => window.removeEventListener("keydown", handleKeyDown)
+  }, [open, selectedIndex, flatItems, onOpenChange])
+
+  // Reset on open
+  React.useEffect(() => {
+    if (open) {
+      setQuery("")
+      setSelectedIndex(0)
+      setTimeout(() => inputRef.current?.focus(), 0)
+    }
+  }, [open])
+
+  // Scroll selected into view
+  React.useEffect(() => {
+    const selected = listRef.current?.querySelector(`[data-index="${selectedIndex}"]`)
+    selected?.scrollIntoView({ block: "nearest" })
+  }, [selectedIndex])
+
+  // Global shortcut
+  React.useEffect(() => {
+    const handleGlobalKeyDown = (e: KeyboardEvent) => {
+      if ((e.metaKey || e.ctrlKey) && e.key === "k") {
+        e.preventDefault()
+        onOpenChange(!open)
+      }
+    }
+
+    window.addEventListener("keydown", handleGlobalKeyDown)
+    return () => window.removeEventListener("keydown", handleGlobalKeyDown)
+  }, [open, onOpenChange])
+
+  const handleSelect = (item: CommandItem) => {
+    onSelect?.(item)
+    item.action?.()
+    if (item.href) {
+      window.location.href = item.href
+    }
+    onOpenChange(false)
+  }
+
+  if (!open) return null
+
+  let itemIndex = -1
+
+  return (
+    <>
+      {/* Backdrop */}
+      <div
+        className="fixed inset-0 z-50 bg-black/50 backdrop-blur-sm animate-in fade-in-0"
+        onClick={() => onOpenChange(false)}
+      />
+
+      {/* Command Bar */}
+      <div className="fixed left-1/2 top-[20%] z-50 w-full max-w-xl -translate-x-1/2 animate-in fade-in-0 zoom-in-95 slide-in-from-top-2">
+        <div className="overflow-hidden rounded-xl border bg-popover shadow-2xl">
+          {/* Search Input */}
+          <div className="flex items-center border-b px-4">
+            <Search className="h-5 w-5 shrink-0 text-muted-foreground" />
+            <input
+              ref={inputRef}
+              type="text"
+              value={query}
+              onChange={(e) => {
+                setQuery(e.target.value)
+                setSelectedIndex(0)
+              }}
+              placeholder={placeholder}
+              className="flex-1 bg-transparent py-4 px-3 text-sm outline-none placeholder:text-muted-foreground"
+            />
+            <kbd className="hidden sm:inline-flex h-6 items-center gap-1 rounded border bg-muted px-2 text-xs text-muted-foreground">
+              ESC
+            </kbd>
+          </div>
+
+          {/* Results */}
+          <div ref={listRef} className="max-h-80 overflow-y-auto p-2">
+            {/* Recent Items */}
+            {!query && recentItems && recentItems.length > 0 && (
+              <div className="mb-2">
+                <div className="px-2 py-1.5 text-xs font-medium text-muted-foreground">
+                  Recent
+                </div>
+                {recentItems.map((item) => {
+                  itemIndex++
+                  const idx = itemIndex
+                  return (
+                    <CommandItemRow
+                      key={`recent-${item.id}`}
+                      item={item}
+                      selected={selectedIndex === idx}
+                      dataIndex={idx}
+                      onSelect={() => handleSelect(item)}
+                      onHover={() => setSelectedIndex(idx)}
+                    />
+                  )
+                })}
+              </div>
+            )}
+
+            {/* Grouped Items */}
+            {groupedItems.map((group) => (
+              <div key={group.label} className="mb-2">
+                <div className="px-2 py-1.5 text-xs font-medium text-muted-foreground">
+                  {group.label}
+                </div>
+                {group.items.length === 0 ? (
+                  <div className="px-2 py-8 text-center text-sm text-muted-foreground">
+                    {emptyMessage}
+                  </div>
+                ) : (
+                  group.items.map((item) => {
+                    itemIndex++
+                    const idx = itemIndex
+                    return (
+                      <CommandItemRow
+                        key={item.id}
+                        item={item}
+                        selected={selectedIndex === idx}
+                        dataIndex={idx}
+                        onSelect={() => handleSelect(item)}
+                        onHover={() => setSelectedIndex(idx)}
+                      />
+                    )
+                  })
+                )}
+              </div>
+            ))}
+          </div>
+
+          {/* Footer */}
+          <div className="flex items-center justify-between border-t bg-muted/50 px-4 py-2 text-xs text-muted-foreground">
+            {footer || (
+              <>
+                <div className="flex items-center gap-4">
+                  <span className="flex items-center gap-1">
+                    <kbd className="rounded border bg-background px-1.5 py-0.5">↑↓</kbd>
+                    Navigate
+                  </span>
+                  <span className="flex items-center gap-1">
+                    <kbd className="rounded border bg-background px-1.5 py-0.5">↵</kbd>
+                    Select
+                  </span>
+                </div>
+                <span className="flex items-center gap-1">
+                  <kbd className="rounded border bg-background px-1.5 py-0.5">ESC</kbd>
+                  Close
+                </span>
+              </>
+            )}
+          </div>
+        </div>
+      </div>
+    </>
+  )
+}
+
+// ============================================================================
+// Command Item Row
+// ============================================================================
+
+interface CommandItemRowProps {
+  item: CommandItem
+  selected: boolean
+  dataIndex: number
+  onSelect: () => void
+  onHover: () => void
+}
+
+function CommandItemRow({ item, selected, dataIndex, onSelect, onHover }: CommandItemRowProps) {
+  return (
+    <button
+      data-index={dataIndex}
+      onClick={onSelect}
+      onMouseEnter={onHover}
+      className={cn(
+        "flex w-full items-center gap-3 rounded-lg px-3 py-2.5 text-left text-sm transition-colors",
+        selected ? "bg-accent text-accent-foreground" : "hover:bg-accent/50"
+      )}
+    >
+      {item.icon && (
+        <span className="flex h-8 w-8 shrink-0 items-center justify-center rounded-md border bg-background">
+          {item.icon}
+        </span>
+      )}
+      <div className="flex-1 min-w-0">
+        <div className="font-medium truncate">{item.label}</div>
+        {item.description && (
+          <div className="text-xs text-muted-foreground truncate">{item.description}</div>
+        )}
+      </div>
+      {item.shortcut && (
+        <div className="flex items-center gap-1 shrink-0">
+          {item.shortcut.map((key, i) => (
+            <kbd key={i} className="rounded border bg-muted px-1.5 py-0.5 text-xs">
+              {key}
+            </kbd>
+          ))}
+        </div>
+      )}
+      {selected && !item.shortcut && (
+        <CornerDownLeft className="h-4 w-4 shrink-0 text-muted-foreground" />
+      )}
+    </button>
+  )
+}
+
+// ============================================================================
+// Hook
+// ============================================================================
+
+export function useCommandBar() {
+  const [open, setOpen] = React.useState(false)
+
+  return {
+    open,
+    onOpenChange: setOpen,
+    openCommandBar: () => setOpen(true),
+    closeCommandBar: () => setOpen(false),
+    toggleCommandBar: () => setOpen(o => !o),
+  }
+}
+