@wakastellar/ui 1.0.12 → 2.1.0

package/src/components/waka-breadcrumb-path/index.tsx

@@ -0,0 +1,513 @@
+"use client"
+
+import * as React from "react"
+import { cn } from "../../utils/cn"
+import { ChevronRight, MoreHorizontal } from "lucide-react"
+
+// ============================================================================
+// Types
+// ============================================================================
+
+export interface BreadcrumbPathItem {
+  /** Unique identifier */
+  id: string
+  /** Label for the item */
+  label: string
+  /** Icon element */
+  icon?: React.ReactNode
+  /** URL or href */
+  href?: string
+  /** Click handler */
+  onClick?: () => void
+  /** Additional data */
+  data?: Record<string, unknown>
+}
+
+export interface WakaBreadcrumbPathProps {
+  /** Breadcrumb items */
+  items: BreadcrumbPathItem[]
+  /** Maximum visible items (will collapse middle items) */
+  maxItems?: number
+  /** Show SVG path connecting items */
+  showPath?: boolean
+  /** Path color */
+  pathColor?: string
+  /** Path stroke width */
+  pathStrokeWidth?: number
+  /** Animation duration in ms */
+  animationDuration?: number
+  /** Size variant */
+  size?: "sm" | "md" | "lg"
+  /** Custom render for items */
+  renderItem?: (item: BreadcrumbPathItem, isLast: boolean) => React.ReactNode
+  /** Custom className */
+  className?: string
+}
+
+// ============================================================================
+// Path SVG Component
+// ============================================================================
+
+interface PathConnectorProps {
+  width: number
+  height: number
+  color: string
+  strokeWidth: number
+  animationDuration: number
+  isAnimating: boolean
+}
+
+function PathConnector({
+  width,
+  height,
+  color,
+  strokeWidth,
+  animationDuration,
+  isAnimating,
+}: PathConnectorProps) {
+  const pathRef = React.useRef<SVGPathElement>(null)
+  const [pathLength, setPathLength] = React.useState(0)
+
+  React.useEffect(() => {
+    if (pathRef.current) {
+      setPathLength(pathRef.current.getTotalLength())
+    }
+  }, [width, height])
+
+  // Create a curved path
+  const midY = height / 2
+  const curveAmount = 8
+  const d = `M 0 ${midY} Q ${width / 4} ${midY - curveAmount} ${width / 2} ${midY} Q ${
+    (3 * width) / 4
+  } ${midY + curveAmount} ${width} ${midY}`
+
+  return (
+    <svg
+      width={width}
+      height={height}
+      className="absolute left-0 top-0 pointer-events-none overflow-visible"
+      style={{ zIndex: -1 }}
+    >
+      {/* Background path */}
+      <path
+        d={d}
+        fill="none"
+        stroke={color}
+        strokeWidth={strokeWidth}
+        opacity={0.2}
+        strokeLinecap="round"
+      />
+      {/* Animated path */}
+      <path
+        ref={pathRef}
+        d={d}
+        fill="none"
+        stroke={color}
+        strokeWidth={strokeWidth}
+        strokeLinecap="round"
+        strokeDasharray={pathLength}
+        strokeDashoffset={isAnimating ? pathLength : 0}
+        style={{
+          transition: `stroke-dashoffset ${animationDuration}ms ease-out`,
+        }}
+      />
+      {/* Dot at the end */}
+      <circle
+        cx={width}
+        cy={midY}
+        r={strokeWidth + 1}
+        fill={color}
+        className={cn(
+          "transition-all",
+          isAnimating ? "opacity-0 scale-0" : "opacity-100 scale-100"
+        )}
+        style={{
+          transitionDuration: `${animationDuration / 2}ms`,
+          transitionDelay: isAnimating ? "0ms" : `${animationDuration / 2}ms`,
+          transformOrigin: "center",
+        }}
+      />
+    </svg>
+  )
+}
+
+// ============================================================================
+// Collapsed Items Popover
+// ============================================================================
+
+interface CollapsedItemsProps {
+  items: BreadcrumbPathItem[]
+  size: "sm" | "md" | "lg"
+  renderItem?: (item: BreadcrumbPathItem, isLast: boolean) => React.ReactNode
+}
+
+function CollapsedItems({ items, size, renderItem }: CollapsedItemsProps) {
+  const [isOpen, setIsOpen] = React.useState(false)
+  const buttonRef = React.useRef<HTMLButtonElement>(null)
+  const menuRef = React.useRef<HTMLDivElement>(null)
+
+  // Close on click outside
+  React.useEffect(() => {
+    const handleClickOutside = (e: MouseEvent) => {
+      if (
+        menuRef.current &&
+        buttonRef.current &&
+        !menuRef.current.contains(e.target as Node) &&
+        !buttonRef.current.contains(e.target as Node)
+      ) {
+        setIsOpen(false)
+      }
+    }
+
+    if (isOpen) {
+      document.addEventListener("mousedown", handleClickOutside)
+      return () => document.removeEventListener("mousedown", handleClickOutside)
+    }
+  }, [isOpen])
+
+  const iconSizes = {
+    sm: "h-3 w-3",
+    md: "h-4 w-4",
+    lg: "h-5 w-5",
+  }
+
+  const buttonSizes = {
+    sm: "p-1",
+    md: "p-1.5",
+    lg: "p-2",
+  }
+
+  return (
+    <div className="relative">
+      <button
+        ref={buttonRef}
+        type="button"
+        onClick={() => setIsOpen(!isOpen)}
+        className={cn(
+          "flex items-center justify-center rounded-md",
+          "text-muted-foreground hover:text-foreground hover:bg-muted",
+          "transition-colors duration-200",
+          buttonSizes[size]
+        )}
+        aria-label="Show hidden items"
+        aria-expanded={isOpen}
+      >
+        <MoreHorizontal className={iconSizes[size]} />
+      </button>
+
+      {/* Dropdown */}
+      <div
+        ref={menuRef}
+        className={cn(
+          "absolute top-full left-0 mt-2 z-50",
+          "min-w-[160px] py-1 rounded-lg",
+          "bg-popover border shadow-lg",
+          "transition-all duration-200",
+          isOpen
+            ? "opacity-100 translate-y-0 visible"
+            : "opacity-0 -translate-y-2 invisible"
+        )}
+      >
+        {items.map((item) => {
+          if (renderItem) {
+            return (
+              <div key={item.id} className="px-1">
+                {renderItem(item, false)}
+              </div>
+            )
+          }
+
+          const Element = item.href ? "a" : "button"
+          return (
+            <Element
+              key={item.id}
+              href={item.href}
+              onClick={() => {
+                item.onClick?.()
+                setIsOpen(false)
+              }}
+              className={cn(
+                "w-full flex items-center gap-2 px-3 py-2 text-sm",
+                "text-foreground hover:bg-muted",
+                "transition-colors duration-150"
+              )}
+            >
+              {item.icon && <span className="h-4 w-4 opacity-70">{item.icon}</span>}
+              <span className="truncate">{item.label}</span>
+            </Element>
+          )
+        })}
+      </div>
+    </div>
+  )
+}
+
+// ============================================================================
+// Breadcrumb Item Component
+// ============================================================================
+
+interface BreadcrumbItemProps {
+  item: BreadcrumbPathItem
+  isLast: boolean
+  size: "sm" | "md" | "lg"
+  renderItem?: (item: BreadcrumbPathItem, isLast: boolean) => React.ReactNode
+  isNew?: boolean
+  animationDuration: number
+}
+
+function BreadcrumbItem({
+  item,
+  isLast,
+  size,
+  renderItem,
+  isNew,
+  animationDuration,
+}: BreadcrumbItemProps) {
+  const sizeClasses = {
+    sm: "text-xs px-2 py-1",
+    md: "text-sm px-3 py-1.5",
+    lg: "text-base px-4 py-2",
+  }
+
+  const iconSizes = {
+    sm: "h-3 w-3",
+    md: "h-4 w-4",
+    lg: "h-5 w-5",
+  }
+
+  if (renderItem) {
+    return <>{renderItem(item, isLast)}</>
+  }
+
+  const Element = item.href && !isLast ? "a" : "span"
+  const isClickable = !isLast && (item.href || item.onClick)
+
+  return (
+    <Element
+      href={item.href}
+      onClick={isClickable ? item.onClick : undefined}
+      className={cn(
+        "inline-flex items-center gap-1.5 rounded-md font-medium",
+        "transition-all",
+        sizeClasses[size],
+        isLast
+          ? "text-foreground bg-muted"
+          : "text-muted-foreground hover:text-foreground hover:bg-muted/50",
+        isClickable && "cursor-pointer",
+        isNew && "animate-in fade-in-0 slide-in-from-left-2"
+      )}
+      style={{
+        animationDuration: isNew ? `${animationDuration}ms` : undefined,
+      }}
+      aria-current={isLast ? "page" : undefined}
+    >
+      {item.icon && <span className={iconSizes[size]}>{item.icon}</span>}
+      <span className="truncate max-w-[120px]">{item.label}</span>
+    </Element>
+  )
+}
+
+// ============================================================================
+// Main Component
+// ============================================================================
+
+export function WakaBreadcrumbPath({
+  items,
+  maxItems = 4,
+  showPath = true,
+  pathColor = "hsl(var(--primary))",
+  pathStrokeWidth = 2,
+  animationDuration = 400,
+  size = "md",
+  renderItem,
+  className,
+}: WakaBreadcrumbPathProps) {
+  const containerRef = React.useRef<HTMLDivElement>(null)
+  const [isAnimating, setIsAnimating] = React.useState(false)
+  const [prevItemsLength, setPrevItemsLength] = React.useState(items.length)
+  const [containerWidth, setContainerWidth] = React.useState(0)
+
+  // Detect path changes and trigger animation
+  React.useEffect(() => {
+    if (items.length !== prevItemsLength) {
+      setIsAnimating(true)
+      const timer = setTimeout(() => {
+        setIsAnimating(false)
+        setPrevItemsLength(items.length)
+      }, animationDuration)
+      return () => clearTimeout(timer)
+    }
+  }, [items.length, prevItemsLength, animationDuration])
+
+  // Measure container width for path
+  React.useEffect(() => {
+    if (!containerRef.current || !showPath) return
+
+    const resizeObserver = new ResizeObserver((entries) => {
+      for (const entry of entries) {
+        setContainerWidth(entry.contentRect.width)
+      }
+    })
+
+    resizeObserver.observe(containerRef.current)
+    return () => resizeObserver.disconnect()
+  }, [showPath])
+
+  const separatorSizes = {
+    sm: "h-3 w-3",
+    md: "h-4 w-4",
+    lg: "h-5 w-5",
+  }
+
+  // Calculate visible and collapsed items
+  const shouldCollapse = items.length > maxItems
+  let visibleItems: BreadcrumbPathItem[]
+  let collapsedItems: BreadcrumbPathItem[] = []
+
+  if (shouldCollapse) {
+    // Keep first and last (maxItems - 2) items
+    const keepEnd = Math.max(maxItems - 2, 1)
+    visibleItems = [items[0], ...items.slice(-keepEnd)]
+    collapsedItems = items.slice(1, -keepEnd)
+  } else {
+    visibleItems = items
+  }
+
+  const containerHeight = size === "sm" ? 28 : size === "lg" ? 44 : 36
+
+  return (
+    <nav
+      ref={containerRef}
+      aria-label="Breadcrumb"
+      className={cn("relative inline-flex items-center", className)}
+    >
+      {/* SVG Path Background */}
+      {showPath && containerWidth > 0 && (
+        <PathConnector
+          width={containerWidth}
+          height={containerHeight}
+          color={pathColor}
+          strokeWidth={pathStrokeWidth}
+          animationDuration={animationDuration}
+          isAnimating={isAnimating}
+        />
+      )}
+
+      <ol className="relative flex items-center flex-wrap gap-1">
+        {/* First item */}
+        {visibleItems.length > 0 && (
+          <li className="flex items-center">
+            <BreadcrumbItem
+              item={visibleItems[0]}
+              isLast={visibleItems.length === 1 && !shouldCollapse}
+              size={size}
+              renderItem={renderItem}
+              animationDuration={animationDuration}
+            />
+          </li>
+        )}
+
+        {/* Collapsed items */}
+        {shouldCollapse && collapsedItems.length > 0 && (
+          <>
+            <li className="flex items-center text-muted-foreground" aria-hidden="true">
+              <ChevronRight className={separatorSizes[size]} />
+            </li>
+            <li className="flex items-center">
+              <CollapsedItems
+                items={collapsedItems}
+                size={size}
+                renderItem={renderItem}
+              />
+            </li>
+          </>
+        )}
+
+        {/* Remaining visible items */}
+        {visibleItems.slice(1).map((item, idx) => {
+          const actualIndex = shouldCollapse
+            ? items.length - (visibleItems.length - 1 - idx)
+            : idx + 1
+          const isLast = actualIndex === items.length - 1
+          const isNewItem = actualIndex === items.length - 1 && items.length > prevItemsLength
+
+          return (
+            <React.Fragment key={item.id}>
+              <li className="flex items-center text-muted-foreground" aria-hidden="true">
+                <ChevronRight
+                  className={cn(
+                    separatorSizes[size],
+                    "transition-all",
+                    isNewItem && "animate-in fade-in-0"
+                  )}
+                  style={{
+                    animationDuration: isNewItem ? `${animationDuration}ms` : undefined,
+                  }}
+                />
+              </li>
+              <li className="flex items-center">
+                <BreadcrumbItem
+                  item={item}
+                  isLast={isLast}
+                  size={size}
+                  renderItem={renderItem}
+                  isNew={isNewItem}
+                  animationDuration={animationDuration}
+                />
+              </li>
+            </React.Fragment>
+          )
+        })}
+      </ol>
+    </nav>
+  )
+}
+
+// ============================================================================
+// Utility Hook
+// ============================================================================
+
+export function useBreadcrumbPath(initialItems: BreadcrumbPathItem[] = []) {
+  const [items, setItems] = React.useState(initialItems)
+
+  const push = React.useCallback((item: BreadcrumbPathItem) => {
+    setItems((prev) => [...prev, item])
+  }, [])
+
+  const pop = React.useCallback(() => {
+    setItems((prev) => prev.slice(0, -1))
+  }, [])
+
+  const goTo = React.useCallback((id: string) => {
+    setItems((prev) => {
+      const index = prev.findIndex((item) => item.id === id)
+      if (index === -1) return prev
+      return prev.slice(0, index + 1)
+    })
+  }, [])
+
+  const reset = React.useCallback((newItems: BreadcrumbPathItem[] = []) => {
+    setItems(newItems)
+  }, [])
+
+  const replace = React.useCallback(
+    (id: string, newItem: BreadcrumbPathItem) => {
+      setItems((prev) =>
+        prev.map((item) => (item.id === id ? newItem : item))
+      )
+    },
+    []
+  )
+
+  return {
+    items,
+    push,
+    pop,
+    goTo,
+    reset,
+    replace,
+    setItems,
+  }
+}
+
+export default WakaBreadcrumbPath