@wakastellar/ui 2.0.0 → 2.1.1

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

@@ -0,0 +1,376 @@
+"use client"
+
+import * as React from "react"
+import { cn } from "../../utils/cn"
+import { ChevronRight, Home, MoreHorizontal } from "lucide-react"
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "../dropdown-menu"
+
+// ============================================
+// TYPES
+// ============================================
+
+export interface BreadcrumbItem {
+  /** Libellé de l'élément */
+  label: string
+  /** URL de destination (optionnel pour le dernier élément) */
+  href?: string
+  /** Icône personnalisée */
+  icon?: React.ReactNode
+  /** Désactiver le lien */
+  disabled?: boolean
+  /** Données additionnelles */
+  data?: Record<string, unknown>
+}
+
+export interface WakaBreadcrumbProps {
+  /** Liste des éléments du fil d'Ariane */
+  items: BreadcrumbItem[]
+  /** Séparateur entre les éléments */
+  separator?: React.ReactNode
+  /** Afficher l'icône Home pour le premier élément */
+  showHomeIcon?: boolean
+  /** Nombre maximum d'éléments visibles (collapse les autres) */
+  maxItems?: number
+  /** Fonction de rendu personnalisée pour les liens */
+  renderLink?: (item: BreadcrumbItem, children: React.ReactNode) => React.ReactNode
+  /** Callback lors du clic sur un élément */
+  onItemClick?: (item: BreadcrumbItem, index: number) => void
+  /** Taille */
+  size?: "sm" | "md" | "lg"
+  /** Variante visuelle */
+  variant?: "default" | "ghost" | "outline"
+  /** Classes CSS additionnelles */
+  className?: string
+}
+
+// ============================================
+// SUB-COMPONENTS
+// ============================================
+
+interface BreadcrumbLinkProps {
+  item: BreadcrumbItem
+  index: number
+  isLast: boolean
+  size: "sm" | "md" | "lg"
+  variant: "default" | "ghost" | "outline"
+  showHomeIcon: boolean
+  renderLink?: (item: BreadcrumbItem, children: React.ReactNode) => React.ReactNode
+  onItemClick?: (item: BreadcrumbItem, index: number) => void
+}
+
+function BreadcrumbLink({
+  item,
+  index,
+  isLast,
+  size,
+  variant,
+  showHomeIcon,
+  renderLink,
+  onItemClick,
+}: BreadcrumbLinkProps) {
+  const sizeClasses = {
+    sm: "text-xs py-0.5 px-1.5",
+    md: "text-sm py-1 px-2",
+    lg: "text-base py-1.5 px-3",
+  }
+
+  const iconSizes = {
+    sm: "h-3 w-3",
+    md: "h-4 w-4",
+    lg: "h-5 w-5",
+  }
+
+  const variantClasses = {
+    default: isLast
+      ? "text-foreground font-medium"
+      : "text-muted-foreground hover:text-foreground",
+    ghost: isLast
+      ? "text-foreground font-medium bg-muted rounded-md"
+      : "text-muted-foreground hover:text-foreground hover:bg-muted rounded-md",
+    outline: isLast
+      ? "text-foreground font-medium border rounded-md"
+      : "text-muted-foreground hover:text-foreground hover:border-foreground border border-transparent rounded-md",
+  }
+
+  const content = (
+    <span className="flex items-center gap-1.5">
+      {index === 0 && showHomeIcon && !item.icon && (
+        <Home className={iconSizes[size]} />
+      )}
+      {item.icon && <span className={iconSizes[size]}>{item.icon}</span>}
+      <span className="truncate max-w-[150px]">{item.label}</span>
+    </span>
+  )
+
+  const baseClasses = cn(
+    "inline-flex items-center transition-colors",
+    sizeClasses[size],
+    variantClasses[variant],
+    item.disabled && "opacity-50 pointer-events-none"
+  )
+
+  const handleClick = (e: React.MouseEvent) => {
+    if (onItemClick) {
+      e.preventDefault()
+      onItemClick(item, index)
+    }
+  }
+
+  // Si c'est le dernier élément ou pas de href, on affiche un span
+  if (isLast || !item.href) {
+    return (
+      <span
+        className={cn(baseClasses, "cursor-default")}
+        aria-current={isLast ? "page" : undefined}
+      >
+        {content}
+      </span>
+    )
+  }
+
+  // Si une fonction de rendu personnalisée est fournie
+  if (renderLink) {
+    return renderLink(item, (
+      <span className={baseClasses} onClick={handleClick}>
+        {content}
+      </span>
+    ))
+  }
+
+  // Lien par défaut
+  return (
+    <a
+      href={item.href}
+      className={baseClasses}
+      onClick={handleClick}
+    >
+      {content}
+    </a>
+  )
+}
+
+interface CollapsedItemsProps {
+  items: BreadcrumbItem[]
+  startIndex: number
+  size: "sm" | "md" | "lg"
+  renderLink?: (item: BreadcrumbItem, children: React.ReactNode) => React.ReactNode
+  onItemClick?: (item: BreadcrumbItem, index: number) => void
+}
+
+function CollapsedItems({
+  items,
+  startIndex,
+  size,
+  renderLink,
+  onItemClick,
+}: CollapsedItemsProps) {
+  const iconSizes = {
+    sm: "h-3 w-3",
+    md: "h-4 w-4",
+    lg: "h-5 w-5",
+  }
+
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <button
+          type="button"
+          className="inline-flex items-center justify-center p-1 rounded-md text-muted-foreground hover:text-foreground hover:bg-muted transition-colors"
+          aria-label="Afficher les éléments masqués"
+        >
+          <MoreHorizontal className={iconSizes[size]} />
+        </button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align="start">
+        {items.map((item, idx) => {
+          const actualIndex = startIndex + idx
+          const handleClick = () => {
+            onItemClick?.(item, actualIndex)
+          }
+
+          if (renderLink && item.href) {
+            return (
+              <DropdownMenuItem key={actualIndex} asChild>
+                {renderLink(item, (
+                  <span className="flex items-center gap-2 w-full">
+                    {item.icon}
+                    {item.label}
+                  </span>
+                ))}
+              </DropdownMenuItem>
+            )
+          }
+
+          return (
+            <DropdownMenuItem
+              key={actualIndex}
+              onClick={handleClick}
+              disabled={item.disabled}
+            >
+              {item.icon && <span className="mr-2">{item.icon}</span>}
+              {item.label}
+            </DropdownMenuItem>
+          )
+        })}
+      </DropdownMenuContent>
+    </DropdownMenu>
+  )
+}
+
+// ============================================
+// MAIN COMPONENT
+// ============================================
+
+export function WakaBreadcrumb({
+  items,
+  separator,
+  showHomeIcon = false,
+  maxItems,
+  renderLink,
+  onItemClick,
+  size = "md",
+  variant = "default",
+  className,
+}: WakaBreadcrumbProps) {
+  const separatorSizes = {
+    sm: "h-3 w-3",
+    md: "h-4 w-4",
+    lg: "h-5 w-5",
+  }
+
+  const defaultSeparator = (
+    <ChevronRight className={cn(separatorSizes[size], "text-muted-foreground")} />
+  )
+
+  const renderSeparator = () => separator ?? defaultSeparator
+
+  // Calculer les éléments à afficher
+  const shouldCollapse = maxItems && items.length > maxItems
+
+  let visibleItems: BreadcrumbItem[]
+  let collapsedItems: BreadcrumbItem[] = []
+  let collapsedStartIndex = 0
+
+  if (shouldCollapse && maxItems) {
+    // Garder le premier et les (maxItems - 2) derniers éléments
+    const keepEnd = Math.max(maxItems - 2, 1)
+    visibleItems = [items[0], ...items.slice(-keepEnd)]
+    collapsedItems = items.slice(1, -keepEnd)
+    collapsedStartIndex = 1
+  } else {
+    visibleItems = items
+  }
+
+  return (
+    <nav aria-label="Fil d'Ariane" className={cn("flex items-center", className)}>
+      <ol className="flex items-center flex-wrap gap-1">
+        {/* Premier élément */}
+        {visibleItems.length > 0 && (
+          <li className="flex items-center">
+            <BreadcrumbLink
+              item={visibleItems[0]}
+              index={0}
+              isLast={visibleItems.length === 1 && !shouldCollapse}
+              size={size}
+              variant={variant}
+              showHomeIcon={showHomeIcon}
+              renderLink={renderLink}
+              onItemClick={onItemClick}
+            />
+          </li>
+        )}
+
+        {/* Éléments collapsés */}
+        {shouldCollapse && collapsedItems.length > 0 && (
+          <>
+            <li className="flex items-center" aria-hidden="true">
+              {renderSeparator()}
+            </li>
+            <li className="flex items-center">
+              <CollapsedItems
+                items={collapsedItems}
+                startIndex={collapsedStartIndex}
+                size={size}
+                renderLink={renderLink}
+                onItemClick={onItemClick}
+              />
+            </li>
+          </>
+        )}
+
+        {/* Éléments restants */}
+        {visibleItems.slice(1).map((item, idx) => {
+          const actualIndex = shouldCollapse
+            ? items.length - (visibleItems.length - 1 - idx)
+            : idx + 1
+
+          return (
+            <React.Fragment key={actualIndex}>
+              <li className="flex items-center" aria-hidden="true">
+                {renderSeparator()}
+              </li>
+              <li className="flex items-center">
+                <BreadcrumbLink
+                  item={item}
+                  index={actualIndex}
+                  isLast={actualIndex === items.length - 1}
+                  size={size}
+                  variant={variant}
+                  showHomeIcon={false}
+                  renderLink={renderLink}
+                  onItemClick={onItemClick}
+                />
+              </li>
+            </React.Fragment>
+          )
+        })}
+      </ol>
+    </nav>
+  )
+}
+
+// ============================================
+// UTILITY HOOK
+// ============================================
+
+/**
+ * Hook pour générer un fil d'Ariane à partir d'un chemin URL
+ */
+export function useBreadcrumbFromPath(
+  pathname: string,
+  options?: {
+    homeLabel?: string
+    labelMap?: Record<string, string>
+    excludePaths?: string[]
+  }
+): BreadcrumbItem[] {
+  const { homeLabel = "Accueil", labelMap = {}, excludePaths = [] } = options || {}
+
+  return React.useMemo(() => {
+    const segments = pathname.split("/").filter(Boolean)
+    const filteredSegments = segments.filter(seg => !excludePaths.includes(seg))
+
+    const items: BreadcrumbItem[] = [
+      { label: homeLabel, href: "/" }
+    ]
+
+    let currentPath = ""
+    filteredSegments.forEach((segment) => {
+      currentPath += `/${segment}`
+      const label = labelMap[segment] || segment.charAt(0).toUpperCase() + segment.slice(1).replace(/-/g, " ")
+      items.push({
+        label,
+        href: currentPath,
+      })
+    })
+
+    return items
+  }, [pathname, homeLabel, labelMap, excludePaths])
+}
+
+export default WakaBreadcrumb