@wakastellar/ui 1.0.12 → 2.1.0

package/src/blocks/footer/index.tsx

@@ -0,0 +1,133 @@
+"use client"
+
+import * as React from "react"
+import { cn } from "../../utils"
+import { Button } from "../../components/button"
+import { Separator } from "../../components/separator"
+import { Github, Twitter, Linkedin, Mail } from "lucide-react"
+
+export interface FooterLink {
+  label: string
+  href: string
+}
+
+export interface FooterColumn {
+  title: string
+  links: FooterLink[]
+}
+
+export interface SocialLink {
+  platform: "github" | "twitter" | "linkedin" | "email"
+  url: string
+}
+
+export interface FooterProps {
+  columns?: FooterColumn[]
+  socialLinks?: SocialLink[]
+  copyright?: string
+  className?: string
+}
+
+const socialIcons = {
+  github: Github,
+  twitter: Twitter,
+  linkedin: Linkedin,
+  email: Mail,
+}
+
+export function Footer({
+  columns = [],
+  socialLinks = [],
+  copyright = "© 2024 Tous droits réservés.",
+  className,
+}: FooterProps) {
+  return (
+    <footer className={cn("bg-muted/40", className)}>
+      <div className="container mx-auto px-4 py-12">
+        <div className="grid grid-cols-1 gap-8 md:grid-cols-2 lg:grid-cols-4">
+          {/* Colonnes de liens */}
+          {columns.map((column, index) => (
+            <div key={index} className="space-y-4">
+              <h3 className="text-sm font-semibold text-foreground">
+                {column.title}
+              </h3>
+              <ul className="space-y-2">
+                {column.links.map((link, linkIndex) => (
+                  <li key={linkIndex}>
+                    <a
+                      href={link.href}
+                      className="text-sm text-muted-foreground hover:text-foreground transition-colors"
+                    >
+                      {link.label}
+                    </a>
+                  </li>
+                ))}
+              </ul>
+            </div>
+          ))}
+
+          {/* Liens sociaux */}
+          {socialLinks.length > 0 && (
+            <div className="space-y-4">
+              <h3 className="text-sm font-semibold text-foreground">
+                Suivez-nous
+              </h3>
+              <div className="flex space-x-4">
+                {socialLinks.map((social, index) => {
+                  const Icon = socialIcons[social.platform]
+                  return (
+                    <Button
+                      key={index}
+                      variant="ghost"
+                      size="icon"
+                      asChild
+                      className="h-8 w-8"
+                    >
+                      <a
+                        href={social.url}
+                        target="_blank"
+                        rel="noopener noreferrer"
+                        aria-label={social.platform}
+                      >
+                        <Icon className="h-4 w-4" />
+                      </a>
+                    </Button>
+                  )
+                })}
+              </div>
+            </div>
+          )}
+        </div>
+
+        <Separator className="my-8" />
+
+        <div className="flex flex-col items-center justify-between space-y-4 md:flex-row md:space-y-0">
+          <p className="text-sm text-muted-foreground">
+            {copyright}
+          </p>
+          <div className="flex space-x-6">
+            <a
+              href="/privacy"
+              className="text-sm text-muted-foreground hover:text-foreground transition-colors"
+            >
+              Politique de confidentialité
+            </a>
+            <a
+              href="/terms"
+              className="text-sm text-muted-foreground hover:text-foreground transition-colors"
+            >
+              Conditions d'utilisation
+            </a>
+          </div>
+        </div>
+      </div>
+    </footer>
+  )
+}
+
+
+
+
+
+
+

package/src/blocks/header/index.tsx

@@ -0,0 +1,357 @@
+"use client"
+
+import * as React from "react"
+import { Button } from "../../components/button"
+import { Input } from "../../components/input"
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+  DropdownMenuSeparator,
+} from "../../components/dropdown-menu"
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "../../components/select"
+import { Avatar, AvatarFallback, AvatarImage } from "../../components/avatar"
+import { Badge } from "../../components/badge"
+import { cn } from "../../utils/cn"
+import { Search, Bell, ChevronDown, Plus, X } from "lucide-react"
+
+// Types
+export interface HeaderAction {
+  id: string
+  label: string
+  icon?: React.ReactNode
+  onClick?: () => void
+  variant?: "default" | "destructive" | "outline" | "secondary" | "ghost" | "link"
+}
+
+export interface HeaderFilter {
+  id: string
+  label: string
+  icon?: React.ReactNode
+  options: { value: string; label: string }[]
+  value?: string
+  onChange?: (value: string) => void
+  placeholder?: string
+}
+
+export interface HeaderNotification {
+  id: string
+  title: string
+  description?: string
+  time?: string
+  read?: boolean
+  onClick?: () => void
+}
+
+export interface HeaderUserMenu {
+  name: string
+  email?: string
+  avatar?: string
+  initials?: string
+  items: {
+    label: string
+    icon?: React.ReactNode
+    onClick?: () => void
+    separator?: boolean
+  }[]
+}
+
+export interface WakaHeaderProps {
+  /** Titre principal affiché au centre */
+  title?: string
+  /** Sous-titre optionnel */
+  subtitle?: string
+  /** Afficher le champ de recherche */
+  showSearch?: boolean
+  /** Placeholder du champ de recherche */
+  searchPlaceholder?: string
+  /** Valeur du champ de recherche */
+  searchValue?: string
+  /** Callback lors de la recherche */
+  onSearchChange?: (value: string) => void
+  /** Callback lors de la soumission de recherche */
+  onSearchSubmit?: (value: string) => void
+  /** Bouton d'action principal (ex: "Création rapide") */
+  primaryAction?: HeaderAction
+  /** Actions secondaires (boutons) */
+  secondaryActions?: HeaderAction[]
+  /** Filtres affichés sous le header */
+  filters?: HeaderFilter[]
+  /** Notifications */
+  notifications?: HeaderNotification[]
+  /** Nombre de notifications non lues */
+  unreadCount?: number
+  /** Callback lors du clic sur les notifications */
+  onNotificationsClick?: () => void
+  /** Menu utilisateur */
+  userMenu?: HeaderUserMenu
+  /** Éléments personnalisés à gauche */
+  leftContent?: React.ReactNode
+  /** Éléments personnalisés à droite */
+  rightContent?: React.ReactNode
+  /** Éléments personnalisés dans la barre de filtres */
+  filterContent?: React.ReactNode
+  /** Classes CSS additionnelles */
+  className?: string
+  /** Classes CSS pour la barre principale */
+  mainBarClassName?: string
+  /** Classes CSS pour la barre de filtres */
+  filterBarClassName?: string
+  /** Sticky header */
+  sticky?: boolean
+}
+
+export function WakaHeader({
+  title,
+  subtitle,
+  showSearch = true,
+  searchPlaceholder = "Rechercher...",
+  searchValue,
+  onSearchChange,
+  onSearchSubmit,
+  primaryAction,
+  secondaryActions,
+  filters,
+  notifications,
+  unreadCount = 0,
+  onNotificationsClick,
+  userMenu,
+  leftContent,
+  rightContent,
+  filterContent,
+  className,
+  mainBarClassName,
+  filterBarClassName,
+  sticky = true,
+}: WakaHeaderProps) {
+  const [internalSearchValue, setInternalSearchValue] = React.useState(searchValue || "")
+
+  const handleSearchChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const value = e.target.value
+    setInternalSearchValue(value)
+    onSearchChange?.(value)
+  }
+
+  const handleSearchKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
+    if (e.key === "Enter") {
+      onSearchSubmit?.(internalSearchValue)
+    }
+  }
+
+  const hasFilters = (filters && filters.length > 0) || filterContent
+
+  return (
+    <header
+      className={cn(
+        "w-full bg-background border-b",
+        sticky && "sticky top-0 z-50",
+        className
+      )}
+    >
+      {/* Main Bar */}
+      <div
+        className={cn(
+          "flex items-center gap-4 px-4 py-2 min-h-[56px]",
+          mainBarClassName
+        )}
+      >
+        {/* Left Section */}
+        <div className="flex items-center gap-3 flex-shrink-0">
+          {/* Primary Action */}
+          {primaryAction && (
+            <Button
+              variant={primaryAction.variant || "default"}
+              size="sm"
+              onClick={primaryAction.onClick}
+              className="gap-2"
+            >
+              {primaryAction.icon || <Plus className="h-4 w-4" />}
+              {primaryAction.label}
+            </Button>
+          )}
+
+          {/* Search */}
+          {showSearch && (
+            <div className="relative">
+              <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
+              <Input
+                type="search"
+                placeholder={searchPlaceholder}
+                value={internalSearchValue}
+                onChange={handleSearchChange}
+                onKeyDown={handleSearchKeyDown}
+                className="pl-9 w-[200px] h-9 bg-muted/50"
+              />
+            </div>
+          )}
+
+          {/* Custom Left Content */}
+          {leftContent}
+        </div>
+
+        {/* Center Section - Title */}
+        {(title || subtitle) && (
+          <div className="flex-1 text-center">
+            {title && (
+              <h1 className="text-lg font-semibold leading-none">{title}</h1>
+            )}
+            {subtitle && (
+              <p className="text-sm text-muted-foreground mt-0.5">{subtitle}</p>
+            )}
+          </div>
+        )}
+
+        {/* Right Section */}
+        <div className="flex items-center gap-2 flex-shrink-0 ml-auto">
+          {/* Secondary Actions */}
+          {secondaryActions?.map((action) => (
+            <Button
+              key={action.id}
+              variant={action.variant || "ghost"}
+              size="sm"
+              onClick={action.onClick}
+              className="gap-2"
+            >
+              {action.icon}
+              {action.label}
+            </Button>
+          ))}
+
+          {/* Custom Right Content */}
+          {rightContent}
+
+          {/* Notifications */}
+          {(notifications || onNotificationsClick) && (
+            <DropdownMenu>
+              <DropdownMenuTrigger asChild>
+                <Button
+                  variant="ghost"
+                  size="icon"
+                  className="relative"
+                  onClick={notifications ? undefined : onNotificationsClick}
+                >
+                  <Bell className="h-5 w-5" />
+                  {unreadCount > 0 && (
+                    <Badge
+                      variant="destructive"
+                      className="absolute -top-1 -right-1 h-5 w-5 p-0 flex items-center justify-center text-xs"
+                    >
+                      {unreadCount > 9 ? "9+" : unreadCount}
+                    </Badge>
+                  )}
+                </Button>
+              </DropdownMenuTrigger>
+              {notifications && notifications.length > 0 && (
+                <DropdownMenuContent align="end" className="w-80">
+                  <div className="p-2 font-semibold border-b">Notifications</div>
+                  {notifications.slice(0, 5).map((notification) => (
+                    <DropdownMenuItem
+                      key={notification.id}
+                      onClick={notification.onClick}
+                      className={cn(
+                        "flex flex-col items-start gap-1 p-3",
+                        !notification.read && "bg-muted/50"
+                      )}
+                    >
+                      <div className="font-medium">{notification.title}</div>
+                      {notification.description && (
+                        <div className="text-sm text-muted-foreground">
+                          {notification.description}
+                        </div>
+                      )}
+                      {notification.time && (
+                        <div className="text-xs text-muted-foreground">
+                          {notification.time}
+                        </div>
+                      )}
+                    </DropdownMenuItem>
+                  ))}
+                </DropdownMenuContent>
+              )}
+            </DropdownMenu>
+          )}
+
+          {/* User Menu */}
+          {userMenu && (
+            <DropdownMenu>
+              <DropdownMenuTrigger asChild>
+                <Button variant="ghost" size="sm" className="gap-2">
+                  <Avatar className="h-7 w-7">
+                    {userMenu.avatar && (
+                      <AvatarImage src={userMenu.avatar} alt={userMenu.name} />
+                    )}
+                    <AvatarFallback className="text-xs">
+                      {userMenu.initials || userMenu.name.slice(0, 2).toUpperCase()}
+                    </AvatarFallback>
+                  </Avatar>
+                  <ChevronDown className="h-4 w-4" />
+                </Button>
+              </DropdownMenuTrigger>
+              <DropdownMenuContent align="end" className="w-56">
+                <div className="p-2">
+                  <p className="font-medium">{userMenu.name}</p>
+                  {userMenu.email && (
+                    <p className="text-sm text-muted-foreground">{userMenu.email}</p>
+                  )}
+                </div>
+                <DropdownMenuSeparator />
+                {userMenu.items.map((item, index) =>
+                  item.separator ? (
+                    <DropdownMenuSeparator key={index} />
+                  ) : (
+                    <DropdownMenuItem key={index} onClick={item.onClick}>
+                      {item.icon && <span className="mr-2">{item.icon}</span>}
+                      {item.label}
+                    </DropdownMenuItem>
+                  )
+                )}
+              </DropdownMenuContent>
+            </DropdownMenu>
+          )}
+        </div>
+      </div>
+
+      {/* Filter Bar */}
+      {hasFilters && (
+        <div
+          className={cn(
+            "flex items-center gap-2 px-4 py-2 border-t bg-muted/30",
+            filterBarClassName
+          )}
+        >
+          {filters?.map((filter) => (
+            <Select
+              key={filter.id}
+              value={filter.value}
+              onValueChange={filter.onChange}
+            >
+              <SelectTrigger className="w-auto h-8 gap-2 bg-muted/50 border-0">
+                {filter.icon}
+                <SelectValue placeholder={filter.placeholder || filter.label} />
+              </SelectTrigger>
+              <SelectContent>
+                {filter.options.map((option) => (
+                  <SelectItem key={option.value} value={option.value}>
+                    {option.label}
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+          ))}
+
+          {/* Custom Filter Content */}
+          {filterContent}
+        </div>
+      )}
+    </header>
+  )
+}
+
+export default WakaHeader

package/src/blocks/headtab/index.tsx

@@ -0,0 +1,139 @@
+"use client"
+
+import * as React from "react"
+import { cn } from "../../utils"
+import { Button } from "../../components/button"
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "../../components/tabs"
+
+export interface HeadtabItem {
+  id: string
+  label: string
+  href?: string
+  content?: React.ReactNode
+  disabled?: boolean
+}
+
+export interface HeadtabProps {
+  items: HeadtabItem[]
+  defaultActiveId?: string
+  variant?: "default" | "pills" | "underline"
+  size?: "sm" | "md" | "lg"
+  className?: string
+  onTabChange?: (activeId: string) => void
+}
+
+export function Headtab({
+  items,
+  defaultActiveId,
+  variant = "default",
+  size = "md",
+  className,
+  onTabChange,
+}: HeadtabProps) {
+  const [activeId, setActiveId] = React.useState(
+    defaultActiveId || items[0]?.id || ""
+  )
+
+  const handleTabChange = (newActiveId: string) => {
+    setActiveId(newActiveId)
+    onTabChange?.(newActiveId)
+  }
+
+  const sizeClasses = {
+    sm: "h-8 px-3 text-sm",
+    md: "h-10 px-4 text-sm",
+    lg: "h-12 px-6 text-base",
+  }
+
+  const variantClasses = {
+    default: "bg-background",
+    pills: "bg-muted rounded-full",
+    underline: "bg-transparent border-b-2 border-transparent data-[state=active]:border-primary",
+  }
+
+  return (
+    <div className={cn("w-full", className)}>
+      <Tabs value={activeId} onValueChange={handleTabChange}>
+        <TabsList 
+          className={cn(
+            "grid w-full",
+            variant === "pills" && "grid-cols-auto",
+            variant !== "pills" && `grid-cols-${items.length}`,
+            variantClasses[variant]
+          )}
+        >
+          {items.map((item) => (
+            <TabsTrigger
+              key={item.id}
+              value={item.id}
+              disabled={item.disabled}
+              className={cn(
+                sizeClasses[size],
+                variant === "underline" && "rounded-none border-b-2 border-transparent data-[state=active]:border-primary",
+                variant === "pills" && "rounded-full"
+              )}
+            >
+              {item.label}
+            </TabsTrigger>
+          ))}
+        </TabsList>
+
+        {items.map((item) => (
+          <TabsContent key={item.id} value={item.id} className="mt-6">
+            {item.content}
+          </TabsContent>
+        ))}
+      </Tabs>
+    </div>
+  )
+}
+
+export interface BreadcrumbItem {
+  label: string
+  href?: string
+}
+
+export interface BreadcrumbProps {
+  items: BreadcrumbItem[]
+  separator?: React.ReactNode
+  className?: string
+}
+
+export function Breadcrumb({
+  items,
+  separator = "/",
+  className,
+}: BreadcrumbProps) {
+  return (
+    <nav className={cn("flex items-center space-x-1 text-sm text-muted-foreground", className)}>
+      {items.map((item, index) => (
+        <React.Fragment key={index}>
+          {index > 0 && (
+            <span className="mx-2 text-muted-foreground">
+              {separator}
+            </span>
+          )}
+          {item.href ? (
+            <a
+              href={item.href}
+              className="hover:text-foreground transition-colors"
+            >
+              {item.label}
+            </a>
+          ) : (
+            <span className="text-foreground font-medium">
+              {item.label}
+            </span>
+          )}
+        </React.Fragment>
+      ))}
+    </nav>
+  )
+}
+
+
+
+
+
+
+