@wakastellar/ui 1.0.12 → 2.1.0

package/src/blocks/empty-states/index.tsx

@@ -0,0 +1,452 @@
+"use client"
+
+import * as React from "react"
+import { cn } from "../../utils"
+import { Button } from "../../components/button"
+import {
+  FileQuestion,
+  Search,
+  Inbox,
+  FolderOpen,
+  Users,
+  ShoppingCart,
+  Bell,
+  Calendar,
+  MessageSquare,
+  Image,
+  FileText,
+  Settings,
+  Bookmark,
+  Heart,
+  Star,
+  Filter,
+  Plus,
+  RefreshCw,
+  Upload,
+  ArrowRight,
+} from "lucide-react"
+
+// ============================================
+// TYPES
+// ============================================
+
+export type EmptyStateType =
+  | "no-data"
+  | "no-results"
+  | "no-messages"
+  | "no-files"
+  | "no-users"
+  | "no-cart"
+  | "no-notifications"
+  | "no-events"
+  | "no-images"
+  | "no-bookmarks"
+  | "no-favorites"
+  | "error"
+  | "custom"
+
+export interface EmptyStateAction {
+  label: string
+  onClick?: () => void
+  href?: string
+  variant?: "default" | "outline" | "secondary" | "ghost"
+  icon?: React.ReactNode
+}
+
+export interface WakaEmptyStateProps {
+  /** Type d'état vide */
+  type?: EmptyStateType
+  /** Titre */
+  title?: string
+  /** Description */
+  description?: string
+  /** Icône personnalisée */
+  icon?: React.ReactNode
+  /** Actions */
+  actions?: EmptyStateAction[]
+  /** Illustration personnalisée */
+  illustration?: React.ReactNode
+  /** Afficher l'illustration par défaut */
+  showIllustration?: boolean
+  /** Taille */
+  size?: "sm" | "md" | "lg"
+  /** Layout */
+  layout?: "vertical" | "horizontal"
+  /** Centré */
+  centered?: boolean
+  /** Contenu additionnel */
+  children?: React.ReactNode
+  /** Classes CSS additionnelles */
+  className?: string
+}
+
+// ============================================
+// EMPTY STATE CONFIGS
+// ============================================
+
+interface EmptyStateConfig {
+  title: string
+  description: string
+  icon: React.ElementType
+  actionLabel?: string
+  actionIcon?: React.ElementType
+}
+
+const emptyStateConfigs: Record<EmptyStateType, EmptyStateConfig> = {
+  "no-data": {
+    title: "Aucune donnée",
+    description: "Il n'y a pas encore de données à afficher.",
+    icon: Inbox,
+    actionLabel: "Ajouter",
+    actionIcon: Plus,
+  },
+  "no-results": {
+    title: "Aucun résultat",
+    description: "Aucun élément ne correspond à votre recherche.",
+    icon: Search,
+    actionLabel: "Effacer les filtres",
+    actionIcon: Filter,
+  },
+  "no-messages": {
+    title: "Aucun message",
+    description: "Votre boîte de réception est vide.",
+    icon: MessageSquare,
+    actionLabel: "Nouveau message",
+    actionIcon: Plus,
+  },
+  "no-files": {
+    title: "Aucun fichier",
+    description: "Vous n'avez pas encore de fichiers.",
+    icon: FolderOpen,
+    actionLabel: "Importer un fichier",
+    actionIcon: Upload,
+  },
+  "no-users": {
+    title: "Aucun utilisateur",
+    description: "Il n'y a pas encore d'utilisateurs.",
+    icon: Users,
+    actionLabel: "Inviter des utilisateurs",
+    actionIcon: Plus,
+  },
+  "no-cart": {
+    title: "Panier vide",
+    description: "Votre panier est vide.",
+    icon: ShoppingCart,
+    actionLabel: "Parcourir les produits",
+    actionIcon: ArrowRight,
+  },
+  "no-notifications": {
+    title: "Aucune notification",
+    description: "Vous êtes à jour !",
+    icon: Bell,
+  },
+  "no-events": {
+    title: "Aucun événement",
+    description: "Aucun événement prévu.",
+    icon: Calendar,
+    actionLabel: "Créer un événement",
+    actionIcon: Plus,
+  },
+  "no-images": {
+    title: "Aucune image",
+    description: "Vous n'avez pas encore d'images.",
+    icon: Image,
+    actionLabel: "Importer des images",
+    actionIcon: Upload,
+  },
+  "no-bookmarks": {
+    title: "Aucun favori",
+    description: "Vous n'avez pas encore de favoris.",
+    icon: Bookmark,
+    actionLabel: "Parcourir",
+    actionIcon: ArrowRight,
+  },
+  "no-favorites": {
+    title: "Aucun favori",
+    description: "Vous n'avez pas encore aimé de contenu.",
+    icon: Heart,
+  },
+  error: {
+    title: "Une erreur est survenue",
+    description: "Impossible de charger les données.",
+    icon: FileQuestion,
+    actionLabel: "Réessayer",
+    actionIcon: RefreshCw,
+  },
+  custom: {
+    title: "Aucun élément",
+    description: "Il n'y a rien à afficher.",
+    icon: Inbox,
+  },
+}
+
+// ============================================
+// ILLUSTRATIONS
+// ============================================
+
+interface IllustrationProps {
+  type: EmptyStateType
+  size: "sm" | "md" | "lg"
+  className?: string
+}
+
+function EmptyStateIllustration({ type, size, className }: IllustrationProps) {
+  const config = emptyStateConfigs[type]
+  const Icon = config.icon
+
+  const sizeClasses = {
+    sm: { container: "h-24 w-24", icon: "h-8 w-8", circles: { outer: "h-20 w-20", inner: "h-14 w-14" } },
+    md: { container: "h-32 w-32", icon: "h-10 w-10", circles: { outer: "h-28 w-28", inner: "h-20 w-20" } },
+    lg: { container: "h-40 w-40", icon: "h-12 w-12", circles: { outer: "h-36 w-36", inner: "h-28 w-28" } },
+  }
+
+  const sizes = sizeClasses[size]
+
+  return (
+    <div className={cn("relative flex items-center justify-center", sizes.container, className)}>
+      {/* Background circles */}
+      <div className={cn("absolute rounded-full bg-muted/50", sizes.circles.outer)} />
+      <div className={cn("absolute rounded-full bg-muted", sizes.circles.inner)} />
+
+      {/* Icon container */}
+      <div className="relative z-10 flex items-center justify-center rounded-full bg-background p-4 shadow-sm">
+        <Icon className={cn(sizes.icon, "text-muted-foreground")} />
+      </div>
+
+      {/* Decorative dots */}
+      <div className="absolute -right-1 top-2 h-2 w-2 rounded-full bg-primary/20" />
+      <div className="absolute -left-1 bottom-4 h-1.5 w-1.5 rounded-full bg-primary/30" />
+      <div className="absolute right-4 bottom-0 h-2.5 w-2.5 rounded-full bg-primary/10" />
+    </div>
+  )
+}
+
+// ============================================
+// MAIN COMPONENT
+// ============================================
+
+export function WakaEmptyState({
+  type = "no-data",
+  title,
+  description,
+  icon,
+  actions,
+  illustration,
+  showIllustration = true,
+  size = "md",
+  layout = "vertical",
+  centered = true,
+  children,
+  className,
+}: WakaEmptyStateProps) {
+  const config = emptyStateConfigs[type]
+  const displayTitle = title ?? config.title
+  const displayDescription = description ?? config.description
+  const Icon = config.icon
+
+  const sizeClasses = {
+    sm: {
+      container: "py-8 px-4",
+      title: "text-base",
+      description: "text-sm",
+      icon: "h-8 w-8",
+    },
+    md: {
+      container: "py-12 px-6",
+      title: "text-lg",
+      description: "text-sm",
+      icon: "h-10 w-10",
+    },
+    lg: {
+      container: "py-16 px-8",
+      title: "text-xl",
+      description: "text-base",
+      icon: "h-12 w-12",
+    },
+  }
+
+  // Create default action if config has one
+  const defaultActions: EmptyStateAction[] = []
+  if (config.actionLabel && !actions) {
+    const ActionIcon = config.actionIcon
+    defaultActions.push({
+      label: config.actionLabel,
+      variant: "default",
+      icon: ActionIcon ? <ActionIcon className="h-4 w-4" /> : undefined,
+    })
+  }
+
+  const allActions = actions || (defaultActions.length > 0 ? defaultActions : undefined)
+
+  if (layout === "horizontal") {
+    return (
+      <div
+        className={cn(
+          "flex items-center gap-6",
+          sizeClasses[size].container,
+          centered && "justify-center",
+          className
+        )}
+      >
+        {/* Illustration or Icon */}
+        {showIllustration && (
+          <div className="flex-shrink-0">
+            {illustration || (
+              icon ? (
+                <div className="flex items-center justify-center rounded-full bg-muted p-4">
+                  {icon}
+                </div>
+              ) : (
+                <EmptyStateIllustration type={type} size={size} />
+              )
+            )}
+          </div>
+        )}
+
+        {/* Content */}
+        <div className="flex flex-col">
+          <h3 className={cn("font-semibold", sizeClasses[size].title)}>
+            {displayTitle}
+          </h3>
+          <p className={cn("text-muted-foreground mt-1", sizeClasses[size].description)}>
+            {displayDescription}
+          </p>
+
+          {children && <div className="mt-4">{children}</div>}
+
+          {allActions && allActions.length > 0 && (
+            <div className="flex gap-3 mt-4">
+              {allActions.map((action, index) => (
+                <Button
+                  key={index}
+                  variant={action.variant || "default"}
+                  size="sm"
+                  onClick={action.onClick}
+                  asChild={!!action.href}
+                >
+                  {action.href ? (
+                    <a href={action.href}>
+                      {action.icon && <span className="mr-2">{action.icon}</span>}
+                      {action.label}
+                    </a>
+                  ) : (
+                    <>
+                      {action.icon && <span className="mr-2">{action.icon}</span>}
+                      {action.label}
+                    </>
+                  )}
+                </Button>
+              ))}
+            </div>
+          )}
+        </div>
+      </div>
+    )
+  }
+
+  return (
+    <div
+      className={cn(
+        "flex flex-col items-center",
+        centered && "text-center",
+        sizeClasses[size].container,
+        className
+      )}
+    >
+      {/* Illustration or Icon */}
+      {showIllustration && (
+        <div className="mb-6">
+          {illustration || (
+            icon ? (
+              <div className="flex items-center justify-center rounded-full bg-muted p-6">
+                {React.cloneElement(icon as React.ReactElement, {
+                  className: cn(sizeClasses[size].icon, "text-muted-foreground"),
+                })}
+              </div>
+            ) : (
+              <EmptyStateIllustration type={type} size={size} />
+            )
+          )}
+        </div>
+      )}
+
+      {/* Title */}
+      <h3 className={cn("font-semibold", sizeClasses[size].title)}>
+        {displayTitle}
+      </h3>
+
+      {/* Description */}
+      <p
+        className={cn(
+          "text-muted-foreground mt-2 max-w-sm",
+          sizeClasses[size].description
+        )}
+      >
+        {displayDescription}
+      </p>
+
+      {/* Custom content */}
+      {children && <div className="mt-4">{children}</div>}
+
+      {/* Actions */}
+      {allActions && allActions.length > 0 && (
+        <div className="flex flex-wrap gap-3 mt-6 justify-center">
+          {allActions.map((action, index) => (
+            <Button
+              key={index}
+              variant={action.variant || "default"}
+              onClick={action.onClick}
+              asChild={!!action.href}
+            >
+              {action.href ? (
+                <a href={action.href}>
+                  {action.icon && <span className="mr-2">{action.icon}</span>}
+                  {action.label}
+                </a>
+              ) : (
+                <>
+                  {action.icon && <span className="mr-2">{action.icon}</span>}
+                  {action.label}
+                </>
+              )}
+            </Button>
+          ))}
+        </div>
+      )}
+    </div>
+  )
+}
+
+// ============================================
+// PRESET COMPONENTS
+// ============================================
+
+export function NoDataState(props: Omit<WakaEmptyStateProps, "type">) {
+  return <WakaEmptyState type="no-data" {...props} />
+}
+
+export function NoResultsState(props: Omit<WakaEmptyStateProps, "type">) {
+  return <WakaEmptyState type="no-results" {...props} />
+}
+
+export function NoMessagesState(props: Omit<WakaEmptyStateProps, "type">) {
+  return <WakaEmptyState type="no-messages" {...props} />
+}
+
+export function NoFilesState(props: Omit<WakaEmptyStateProps, "type">) {
+  return <WakaEmptyState type="no-files" {...props} />
+}
+
+export function EmptyCartState(props: Omit<WakaEmptyStateProps, "type">) {
+  return <WakaEmptyState type="no-cart" {...props} />
+}
+
+export function NoNotificationsState(props: Omit<WakaEmptyStateProps, "type">) {
+  return <WakaEmptyState type="no-notifications" {...props} />
+}
+
+export function ErrorState(props: Omit<WakaEmptyStateProps, "type">) {
+  return <WakaEmptyState type="error" {...props} />
+}
+
+export default WakaEmptyState