@wakastellar/ui 1.0.12 → 2.1.0

package/src/blocks/sidebar/index.tsx

@@ -0,0 +1,713 @@
+"use client"
+
+import * as React from "react"
+import { cn } from "../../utils"
+import { Button } from "../../components/button"
+import { Sheet, SheetContent, SheetTitle, SheetDescription } from "../../components/sheet"
+import { Avatar, AvatarFallback, AvatarImage } from "../../components/avatar"
+import { ScrollArea } from "../../components/scroll-area"
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+} from "../../components/collapsible"
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "../../components/dropdown-menu"
+import { Menu, ChevronDown, LogOut, Settings, User } from "lucide-react"
+
+// ============ TYPES ============
+
+export interface SidebarMenuItem {
+  /** Identifiant unique */
+  id: string
+  /** Label du menu */
+  label: string
+  /** Icône (composant React) */
+  icon?: React.ReactNode
+  /** URL de navigation */
+  href?: string
+  /** Callback au clic */
+  onClick?: () => void
+  /** Sous-menus */
+  children?: SidebarMenuItem[]
+  /** Menu actif */
+  active?: boolean
+  /** Badge/compteur */
+  badge?: string | number
+  /** Désactivé */
+  disabled?: boolean
+}
+
+export interface SidebarUserConfig {
+  /** Nom de l'utilisateur */
+  name: string
+  /** Email ou sous-titre */
+  email?: string
+  /** URL de l'avatar */
+  avatarUrl?: string
+  /** Initiales pour le fallback */
+  initials?: string
+  /** Actions du menu utilisateur */
+  actions?: {
+    id: string
+    label: string
+    icon?: React.ReactNode
+    onClick?: () => void
+    href?: string
+    variant?: "default" | "destructive"
+  }[]
+}
+
+export interface SidebarLogoConfig {
+  /** Image du logo */
+  src?: string
+  /** Texte alternatif */
+  alt?: string
+  /** Texte à côté du logo */
+  title?: string
+  /** URL au clic sur le logo */
+  href?: string
+  /** Callback au clic */
+  onClick?: () => void
+  /** Composant logo personnalisé */
+  component?: React.ReactNode
+}
+
+export interface WakaSidebarProps {
+  /** Configuration du logo */
+  logo?: SidebarLogoConfig
+  /** Éléments du menu */
+  menu: SidebarMenuItem[]
+  /** Configuration utilisateur */
+  user?: SidebarUserConfig
+  /** Largeur de la sidebar (desktop) */
+  width?: number
+  /** Breakpoint pour le mode mobile (en px) */
+  mobileBreakpoint?: number
+  /** Sidebar ouverte (mode mobile) */
+  open?: boolean
+  /** Callback changement d'état (mode mobile) */
+  onOpenChange?: (open: boolean) => void
+  /** Classes CSS additionnelles */
+  className?: string
+  /** Classes CSS du contenu */
+  contentClassName?: string
+  /** Couleur de fond */
+  backgroundColor?: string
+  /** Couleur du texte */
+  textColor?: string
+  /** Couleur de l'élément actif */
+  activeColor?: string
+  /** Couleur de survol */
+  hoverColor?: string
+  /** Position du menu utilisateur */
+  userPosition?: "top" | "bottom"
+  /** Afficher le bouton hamburger */
+  showHamburger?: boolean
+  /** Position du bouton hamburger (pour usage externe) */
+  hamburgerPosition?: "left" | "right"
+  /** Rendu personnalisé d'un item */
+  renderItem?: (item: SidebarMenuItem, isChild: boolean) => React.ReactNode
+  /** Footer personnalisé */
+  footer?: React.ReactNode
+  /** Header personnalisé (après le logo) */
+  header?: React.ReactNode
+  /** Mode de positionnement : "fixed" pour app layout, "relative" pour preview/demo */
+  position?: "fixed" | "relative"
+}
+
+// ============ CONTEXT ============
+
+interface SidebarContextValue {
+  activeId: string | null
+  setActiveId: (id: string | null) => void
+  expandedIds: string[]
+  toggleExpanded: (id: string) => void
+  isMobile: boolean
+  closeOnNavigate: boolean
+  onClose: () => void
+}
+
+const SidebarContext = React.createContext<SidebarContextValue | null>(null)
+
+function useSidebarContext() {
+  const context = React.useContext(SidebarContext)
+  if (!context) {
+    throw new Error("Sidebar components must be used within WakaSidebar")
+  }
+  return context
+}
+
+// ============ COMPOSANTS INTERNES ============
+
+/**
+ * Logo de la sidebar
+ */
+function SidebarLogo({ config }: { config: SidebarLogoConfig }) {
+  const content = config.component ? (
+    config.component
+  ) : (
+    <div className="flex items-center gap-3">
+      {config.src && (
+        <img
+          src={config.src}
+          alt={config.alt || "Logo"}
+          className="h-8 w-auto object-contain"
+        />
+      )}
+      {config.title && (
+        <span className="text-lg font-bold tracking-wide">{config.title}</span>
+      )}
+    </div>
+  )
+
+  if (config.href) {
+    return (
+      <a href={config.href} className="block" onClick={config.onClick}>
+        {content}
+      </a>
+    )
+  }
+
+  if (config.onClick) {
+    return (
+      <button type="button" onClick={config.onClick} className="block text-left">
+        {content}
+      </button>
+    )
+  }
+
+  return <div>{content}</div>
+}
+
+/**
+ * Item de menu avec sous-menus collapsibles
+ */
+function SidebarMenuItemComponent({
+  item,
+  isChild = false,
+  renderItem,
+}: {
+  item: SidebarMenuItem
+  isChild?: boolean
+  renderItem?: (item: SidebarMenuItem, isChild: boolean) => React.ReactNode
+}) {
+  const { activeId, setActiveId, expandedIds, toggleExpanded, isMobile, closeOnNavigate, onClose } =
+    useSidebarContext()
+
+  const hasChildren = item.children && item.children.length > 0
+  const isExpanded = expandedIds.includes(item.id)
+  const isActive = activeId === item.id || item.active
+
+  const handleClick = () => {
+    if (item.disabled) return
+
+    if (hasChildren) {
+      toggleExpanded(item.id)
+    } else {
+      setActiveId(item.id)
+      item.onClick?.()
+      if (isMobile && closeOnNavigate) {
+        onClose()
+      }
+    }
+  }
+
+  // Rendu personnalisé
+  if (renderItem) {
+    return <>{renderItem(item, isChild)}</>
+  }
+
+  const itemContent = (
+    <div
+      className={cn(
+        "flex items-center gap-3 rounded-lg px-3 py-2.5 text-sm font-medium transition-all duration-200",
+        "hover:bg-white/10",
+        isActive && !hasChildren && "bg-sidebar-active text-sidebar-active-foreground",
+        isChild && "ml-6 text-[13px]",
+        item.disabled && "opacity-50 cursor-not-allowed"
+      )}
+    >
+      {item.icon && (
+        <span className={cn("flex-shrink-0", isChild ? "h-4 w-4" : "h-5 w-5")}>
+          {item.icon}
+        </span>
+      )}
+      <span className="flex-1 truncate">{item.label}</span>
+      {item.badge !== undefined && (
+        <span className="ml-auto flex h-5 min-w-[20px] items-center justify-center rounded-full bg-primary px-1.5 text-[10px] font-semibold text-primary-foreground">
+          {item.badge}
+        </span>
+      )}
+      {hasChildren && (
+        <ChevronDown
+          className={cn(
+            "h-4 w-4 transition-transform duration-200",
+            isExpanded && "rotate-180"
+          )}
+        />
+      )}
+    </div>
+  )
+
+  // Avec sous-menus
+  if (hasChildren) {
+    return (
+      <Collapsible open={isExpanded} onOpenChange={() => toggleExpanded(item.id)}>
+        <CollapsibleTrigger asChild>
+          <button
+            type="button"
+            className="w-full text-left"
+            disabled={item.disabled}
+          >
+            {itemContent}
+          </button>
+        </CollapsibleTrigger>
+        <CollapsibleContent className="space-y-1 pt-1">
+          {item.children?.map((child) => (
+            <SidebarMenuItemComponent
+              key={child.id}
+              item={child}
+              isChild
+              renderItem={renderItem}
+            />
+          ))}
+        </CollapsibleContent>
+      </Collapsible>
+    )
+  }
+
+  // Lien ou bouton simple
+  if (item.href) {
+    return (
+      <a
+        href={item.href}
+        onClick={(e) => {
+          if (item.disabled) {
+            e.preventDefault()
+            return
+          }
+          handleClick()
+        }}
+        className="block"
+      >
+        {itemContent}
+      </a>
+    )
+  }
+
+  return (
+    <button
+      type="button"
+      className="w-full text-left"
+      disabled={item.disabled}
+      onClick={handleClick}
+    >
+      {itemContent}
+    </button>
+  )
+}
+
+/**
+ * Menu utilisateur
+ */
+function SidebarUser({ config }: { config: SidebarUserConfig }) {
+  const initials =
+    config.initials ||
+    config.name
+      .split(" ")
+      .map((n) => n[0])
+      .join("")
+      .slice(0, 2)
+      .toUpperCase()
+
+  const defaultActions: SidebarUserConfig["actions"] = [
+    { id: "profile", label: "Profil", icon: <User className="h-4 w-4" /> },
+    { id: "settings", label: "Paramètres", icon: <Settings className="h-4 w-4" /> },
+    { id: "logout", label: "Déconnexion", icon: <LogOut className="h-4 w-4" />, variant: "destructive" },
+  ]
+
+  const actions = config.actions ?? defaultActions
+
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <button
+          type="button"
+          className="flex w-full items-center gap-3 rounded-lg p-2 text-left transition-colors hover:bg-white/10"
+        >
+          <Avatar className="h-10 w-10 border-2 border-sidebar-active">
+            <AvatarImage src={config.avatarUrl} alt={config.name} />
+            <AvatarFallback className="bg-sidebar-active text-sidebar-active-foreground text-sm font-medium">
+              {initials}
+            </AvatarFallback>
+          </Avatar>
+          <div className="flex-1 min-w-0">
+            <p className="text-sm font-medium truncate">{config.name}</p>
+            {config.email && (
+              <p className="text-xs text-sidebar-foreground/70 truncate">{config.email}</p>
+            )}
+          </div>
+          <ChevronDown className="h-4 w-4 flex-shrink-0 opacity-70" />
+        </button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align="end" className="w-56">
+        {actions.map((action, index) => (
+          <React.Fragment key={action.id}>
+            {action.variant === "destructive" && index > 0 && <DropdownMenuSeparator />}
+            <DropdownMenuItem
+              onClick={action.onClick}
+              className={cn(action.variant === "destructive" && "text-destructive focus:text-destructive")}
+              asChild={!!action.href}
+            >
+              {action.href ? (
+                <a href={action.href} className="flex items-center gap-2">
+                  {action.icon}
+                  {action.label}
+                </a>
+              ) : (
+                <span className="flex items-center gap-2">
+                  {action.icon}
+                  {action.label}
+                </span>
+              )}
+            </DropdownMenuItem>
+          </React.Fragment>
+        ))}
+      </DropdownMenuContent>
+    </DropdownMenu>
+  )
+}
+
+/**
+ * Contenu de la sidebar
+ */
+function SidebarContent({
+  logo,
+  menu,
+  user,
+  userPosition = "bottom",
+  header,
+  footer,
+  renderItem,
+}: Pick<WakaSidebarProps, "logo" | "menu" | "user" | "userPosition" | "header" | "footer" | "renderItem">) {
+  return (
+    <div className="flex h-full flex-col">
+      {/* Logo */}
+      {logo && (
+        <div className="flex-shrink-0 p-4 pb-2">
+          <SidebarLogo config={logo} />
+        </div>
+      )}
+
+      {/* Header personnalisé */}
+      {header && <div className="flex-shrink-0 px-4 py-2">{header}</div>}
+
+      {/* User en haut */}
+      {user && userPosition === "top" && (
+        <div className="flex-shrink-0 px-3 py-2 border-b border-white/10">
+          <SidebarUser config={user} />
+        </div>
+      )}
+
+      {/* Menu scrollable */}
+      <ScrollArea className="flex-1 px-3 py-4">
+        <nav className="space-y-1">
+          {menu.map((item) => (
+            <SidebarMenuItemComponent key={item.id} item={item} renderItem={renderItem} />
+          ))}
+        </nav>
+      </ScrollArea>
+
+      {/* Footer personnalisé */}
+      {footer && <div className="flex-shrink-0 px-4 py-2 border-t border-white/10">{footer}</div>}
+
+      {/* User en bas */}
+      {user && userPosition === "bottom" && (
+        <div className="flex-shrink-0 p-3 border-t border-white/10">
+          <SidebarUser config={user} />
+        </div>
+      )}
+    </div>
+  )
+}
+
+// ============ COMPOSANT PRINCIPAL ============
+
+/**
+ * WakaSidebar - Sidebar personnalisable avec menu hamburger responsive
+ *
+ * @example
+ * ```tsx
+ * <WakaSidebar
+ *   logo={{ src: "/logo.svg", title: "WAKASTART" }}
+ *   menu={[
+ *     { id: "dashboard", label: "Tableau de bord", icon: <Home /> },
+ *     {
+ *       id: "admin",
+ *       label: "Administration",
+ *       icon: <Settings />,
+ *       children: [
+ *         { id: "users", label: "Utilisateurs" },
+ *         { id: "roles", label: "Rôles" },
+ *       ],
+ *     },
+ *   ]}
+ *   user={{
+ *     name: "John Doe",
+ *     email: "john@example.com",
+ *     avatarUrl: "/avatar.jpg",
+ *   }}
+ * />
+ * ```
+ */
+export function WakaSidebar({
+  logo,
+  menu,
+  user,
+  width = 260,
+  mobileBreakpoint = 768,
+  open,
+  onOpenChange,
+  className,
+  contentClassName,
+  backgroundColor,
+  textColor,
+  activeColor,
+  hoverColor,
+  userPosition = "bottom",
+  showHamburger = true,
+  hamburgerPosition = "left",
+  renderItem,
+  footer,
+  header,
+  position = "fixed",
+}: WakaSidebarProps) {
+  // État interne pour mobile si non contrôlé
+  const [internalOpen, setInternalOpen] = React.useState(false)
+  const isControlled = open !== undefined
+  const isOpen = isControlled ? open : internalOpen
+  const setIsOpen = isControlled ? onOpenChange! : setInternalOpen
+
+  // Détection mobile
+  const [isMobile, setIsMobile] = React.useState(false)
+
+  React.useEffect(() => {
+    const checkMobile = () => {
+      setIsMobile(window.innerWidth < mobileBreakpoint)
+    }
+
+    checkMobile()
+    window.addEventListener("resize", checkMobile)
+    return () => window.removeEventListener("resize", checkMobile)
+  }, [mobileBreakpoint])
+
+  // État des menus
+  const [activeId, setActiveId] = React.useState<string | null>(() => {
+    // Trouver l'élément actif par défaut
+    const findActive = (items: SidebarMenuItem[]): string | null => {
+      for (const item of items) {
+        if (item.active) return item.id
+        if (item.children) {
+          const childActive = findActive(item.children)
+          if (childActive) return childActive
+        }
+      }
+      return null
+    }
+    return findActive(menu)
+  })
+
+  const [expandedIds, setExpandedIds] = React.useState<string[]>(() => {
+    // Ouvrir les parents des éléments actifs
+    const findParentsOfActive = (items: SidebarMenuItem[], parentIds: string[] = []): string[] => {
+      for (const item of items) {
+        if (item.active) return parentIds
+        if (item.children) {
+          const result = findParentsOfActive(item.children, [...parentIds, item.id])
+          if (result.length > parentIds.length) return result
+        }
+      }
+      return []
+    }
+    return findParentsOfActive(menu)
+  })
+
+  const toggleExpanded = React.useCallback((id: string) => {
+    setExpandedIds((prev) =>
+      prev.includes(id) ? prev.filter((i) => i !== id) : [...prev, id]
+    )
+  }, [])
+
+  const contextValue: SidebarContextValue = {
+    activeId,
+    setActiveId,
+    expandedIds,
+    toggleExpanded,
+    isMobile,
+    closeOnNavigate: true,
+    onClose: () => setIsOpen(false),
+  }
+
+  // Styles personnalisés
+  const customStyles = {
+    "--sidebar-bg": backgroundColor || "hsl(222 47% 11%)",
+    "--sidebar-text": textColor || "hsl(210 40% 96%)",
+    "--sidebar-active": activeColor || "hsl(187 85% 43%)",
+    "--sidebar-active-foreground": "hsl(222 47% 11%)",
+    "--sidebar-hover": hoverColor || "rgba(255, 255, 255, 0.1)",
+  } as React.CSSProperties
+
+  const sidebarClasses = cn(
+    "bg-[var(--sidebar-bg)] text-[var(--sidebar-text)]",
+    "[&_.bg-sidebar-active]:bg-[var(--sidebar-active)]",
+    "[&_.text-sidebar-active-foreground]:text-[var(--sidebar-active-foreground)]",
+    "[&_.text-sidebar-foreground\\/70]:text-[var(--sidebar-text)]/70",
+    "[&_.border-sidebar-active]:border-[var(--sidebar-active)]",
+    contentClassName
+  )
+
+  // Contenu de la sidebar
+  const sidebarContent = (
+    <SidebarContext.Provider value={contextValue}>
+      <div className={cn("h-full", sidebarClasses)} style={customStyles}>
+        <SidebarContent
+          logo={logo}
+          menu={menu}
+          user={user}
+          userPosition={userPosition}
+          header={header}
+          footer={footer}
+          renderItem={renderItem}
+        />
+      </div>
+    </SidebarContext.Provider>
+  )
+
+  return (
+    <>
+      {/* Bouton hamburger (pour mobile) */}
+      {showHamburger && isMobile && (
+        <Button
+          variant="ghost"
+          size="icon"
+          className={cn(
+            "fixed top-3 z-50",
+            hamburgerPosition === "left" ? "left-3" : "right-3"
+          )}
+          onClick={() => setIsOpen(true)}
+        >
+          <Menu className="h-6 w-6" />
+          <span className="sr-only">Ouvrir le menu</span>
+        </Button>
+      )}
+
+      {/* Mode Desktop */}
+      {!isMobile && (
+        <aside
+          className={cn(
+            position === "fixed" ? "fixed left-0 top-0 h-screen z-40" : "relative h-full",
+            className
+          )}
+          style={{ width }}
+        >
+          {sidebarContent}
+        </aside>
+      )}
+
+      {/* Mode Mobile (Sheet) */}
+      {isMobile && (
+        <Sheet open={isOpen} onOpenChange={setIsOpen}>
+          <SheetContent
+            side="left"
+            className={cn("w-[280px] p-0 border-0", className)}
+            style={customStyles}
+            aria-describedby="sidebar-description"
+          >
+            <SheetTitle className="sr-only">Menu de navigation</SheetTitle>
+            <SheetDescription id="sidebar-description" className="sr-only">
+              Menu principal de l&apos;application
+            </SheetDescription>
+            {sidebarContent}
+          </SheetContent>
+        </Sheet>
+      )}
+    </>
+  )
+}
+
+// ============ HOOK UTILITAIRE ============
+
+/**
+ * Hook pour gérer l'état de la sidebar externalement
+ */
+export function useSidebar() {
+  const [isOpen, setIsOpen] = React.useState(false)
+
+  const open = React.useCallback(() => setIsOpen(true), [])
+  const close = React.useCallback(() => setIsOpen(false), [])
+  const toggle = React.useCallback(() => setIsOpen((prev) => !prev), [])
+
+  return {
+    isOpen,
+    setIsOpen,
+    open,
+    close,
+    toggle,
+  }
+}
+
+// ============ COMPOSANT LAYOUT AVEC SIDEBAR ============
+
+export interface SidebarLayoutProps {
+  /** Configuration de la sidebar */
+  sidebar: WakaSidebarProps
+  /** Contenu principal */
+  children: React.ReactNode
+  /** Largeur de la sidebar (override) */
+  sidebarWidth?: number
+  /** Classes CSS du conteneur */
+  className?: string
+  /** Classes CSS du contenu principal */
+  contentClassName?: string
+}
+
+/**
+ * Layout avec sidebar intégrée
+ */
+export function SidebarLayout({
+  sidebar,
+  children,
+  sidebarWidth = 260,
+  className,
+  contentClassName,
+}: SidebarLayoutProps) {
+  const [isMobile, setIsMobile] = React.useState(false)
+  const breakpoint = sidebar.mobileBreakpoint || 768
+
+  React.useEffect(() => {
+    const checkMobile = () => setIsMobile(window.innerWidth < breakpoint)
+    checkMobile()
+    window.addEventListener("resize", checkMobile)
+    return () => window.removeEventListener("resize", checkMobile)
+  }, [breakpoint])
+
+  return (
+    <div className={cn("min-h-screen bg-background", className)}>
+      <WakaSidebar {...sidebar} width={sidebarWidth} />
+      <main
+        className={cn("min-h-screen transition-all duration-300", contentClassName)}
+        style={{ marginLeft: isMobile ? 0 : sidebarWidth }}
+      >
+        {children}
+      </main>
+    </div>
+  )
+}
+
+export default WakaSidebar