@wakastellar/ui 2.0.0 → 2.1.0

package/src/blocks/error-pages/index.tsx

@@ -0,0 +1,426 @@
+"use client"
+
+import * as React from "react"
+import { cn } from "../../utils"
+import { Button } from "../../components/button"
+import {
+  Home,
+  ArrowLeft,
+  RefreshCw,
+  Search,
+  ShieldX,
+  ServerCrash,
+  FileQuestion,
+  Construction,
+  Wifi,
+  Lock,
+} from "lucide-react"
+
+// ============================================
+// TYPES
+// ============================================
+
+export type ErrorType = "404" | "500" | "403" | "503" | "offline" | "maintenance" | "custom"
+
+export interface ErrorAction {
+  label: string
+  onClick?: () => void
+  href?: string
+  variant?: "default" | "outline" | "secondary" | "ghost"
+  icon?: React.ReactNode
+}
+
+export interface WakaErrorPageProps {
+  /** Type d'erreur */
+  type?: ErrorType
+  /** Code d'erreur personnalisé */
+  code?: string | number
+  /** Titre */
+  title?: string
+  /** Description */
+  description?: string
+  /** Actions disponibles */
+  actions?: ErrorAction[]
+  /** Illustration personnalisée */
+  illustration?: React.ReactNode
+  /** Afficher le code d'erreur */
+  showCode?: boolean
+  /** Afficher l'illustration par défaut */
+  showIllustration?: boolean
+  /** Afficher le bouton retour */
+  showBackButton?: boolean
+  /** Callback retour */
+  onBack?: () => void
+  /** Afficher le bouton accueil */
+  showHomeButton?: boolean
+  /** URL de la page d'accueil */
+  homeUrl?: string
+  /** Afficher le bouton rafraîchir */
+  showRefreshButton?: boolean
+  /** Contenu additionnel */
+  children?: React.ReactNode
+  /** Layout */
+  layout?: "centered" | "split"
+  /** Taille */
+  size?: "sm" | "md" | "lg"
+  /** Classes CSS additionnelles */
+  className?: string
+}
+
+// ============================================
+// ERROR CONFIGS
+// ============================================
+
+interface ErrorConfig {
+  code: string
+  title: string
+  description: string
+  icon: React.ElementType
+}
+
+const errorConfigs: Record<ErrorType, ErrorConfig> = {
+  "404": {
+    code: "404",
+    title: "Page non trouvée",
+    description: "Désolé, la page que vous recherchez n'existe pas ou a été déplacée.",
+    icon: FileQuestion,
+  },
+  "500": {
+    code: "500",
+    title: "Erreur serveur",
+    description: "Une erreur inattendue s'est produite. Notre équipe a été notifiée.",
+    icon: ServerCrash,
+  },
+  "403": {
+    code: "403",
+    title: "Accès refusé",
+    description: "Vous n'avez pas les permissions nécessaires pour accéder à cette page.",
+    icon: ShieldX,
+  },
+  "503": {
+    code: "503",
+    title: "Service indisponible",
+    description: "Le service est temporairement indisponible. Veuillez réessayer plus tard.",
+    icon: ServerCrash,
+  },
+  offline: {
+    code: "Hors ligne",
+    title: "Vous êtes hors ligne",
+    description: "Vérifiez votre connexion internet et réessayez.",
+    icon: Wifi,
+  },
+  maintenance: {
+    code: "Maintenance",
+    title: "Maintenance en cours",
+    description: "Nous effectuons une maintenance. Nous serons bientôt de retour.",
+    icon: Construction,
+  },
+  custom: {
+    code: "",
+    title: "Erreur",
+    description: "Une erreur s'est produite.",
+    icon: FileQuestion,
+  },
+}
+
+// ============================================
+// ILLUSTRATIONS
+// ============================================
+
+interface IllustrationProps {
+  type: ErrorType
+  className?: string
+}
+
+function ErrorIllustration({ type, className }: IllustrationProps) {
+  const config = errorConfigs[type]
+  const Icon = config.icon
+
+  return (
+    <div
+      className={cn(
+        "relative flex items-center justify-center",
+        className
+      )}
+    >
+      {/* Background circle */}
+      <div className="absolute inset-0 flex items-center justify-center">
+        <div className="h-48 w-48 rounded-full bg-muted/50" />
+      </div>
+      <div className="absolute inset-0 flex items-center justify-center">
+        <div className="h-32 w-32 rounded-full bg-muted" />
+      </div>
+
+      {/* Icon */}
+      <div className="relative z-10 flex h-20 w-20 items-center justify-center rounded-full bg-background shadow-lg">
+        <Icon className="h-10 w-10 text-muted-foreground" />
+      </div>
+
+      {/* Decorative elements */}
+      <div className="absolute -right-4 top-4 h-3 w-3 rounded-full bg-primary/20" />
+      <div className="absolute -left-2 bottom-8 h-2 w-2 rounded-full bg-primary/30" />
+      <div className="absolute right-8 bottom-2 h-4 w-4 rounded-full bg-primary/10" />
+    </div>
+  )
+}
+
+// ============================================
+// MAIN COMPONENT
+// ============================================
+
+export function WakaErrorPage({
+  type = "404",
+  code,
+  title,
+  description,
+  actions,
+  illustration,
+  showCode = true,
+  showIllustration = true,
+  showBackButton = true,
+  onBack,
+  showHomeButton = true,
+  homeUrl = "/",
+  showRefreshButton = false,
+  children,
+  layout = "centered",
+  size = "md",
+  className,
+}: WakaErrorPageProps) {
+  const config = errorConfigs[type]
+  const displayCode = code ?? config.code
+  const displayTitle = title ?? config.title
+  const displayDescription = description ?? config.description
+
+  const sizeClasses = {
+    sm: {
+      container: "py-12 px-4",
+      code: "text-6xl",
+      title: "text-xl",
+      description: "text-sm",
+      illustration: "h-32 w-32",
+    },
+    md: {
+      container: "py-16 px-6",
+      code: "text-8xl",
+      title: "text-2xl",
+      description: "text-base",
+      illustration: "h-48 w-48",
+    },
+    lg: {
+      container: "py-24 px-8",
+      code: "text-9xl",
+      title: "text-3xl",
+      description: "text-lg",
+      illustration: "h-64 w-64",
+    },
+  }
+
+  const defaultActions: ErrorAction[] = []
+
+  if (showBackButton) {
+    defaultActions.push({
+      label: "Retour",
+      onClick: onBack || (() => window.history.back()),
+      variant: "outline",
+      icon: <ArrowLeft className="h-4 w-4" />,
+    })
+  }
+
+  if (showHomeButton) {
+    defaultActions.push({
+      label: "Accueil",
+      href: homeUrl,
+      variant: "default",
+      icon: <Home className="h-4 w-4" />,
+    })
+  }
+
+  if (showRefreshButton) {
+    defaultActions.push({
+      label: "Réessayer",
+      onClick: () => window.location.reload(),
+      variant: "secondary",
+      icon: <RefreshCw className="h-4 w-4" />,
+    })
+  }
+
+  const allActions = actions || defaultActions
+
+  const renderContent = () => (
+    <div className="flex flex-col items-center text-center">
+      {/* Illustration */}
+      {showIllustration && (
+        <div className={cn("mb-8", sizeClasses[size].illustration)}>
+          {illustration || <ErrorIllustration type={type} />}
+        </div>
+      )}
+
+      {/* Code */}
+      {showCode && displayCode && (
+        <div
+          className={cn(
+            "font-bold text-muted-foreground/20 mb-4",
+            sizeClasses[size].code
+          )}
+        >
+          {displayCode}
+        </div>
+      )}
+
+      {/* Title */}
+      <h1 className={cn("font-bold tracking-tight mb-4", sizeClasses[size].title)}>
+        {displayTitle}
+      </h1>
+
+      {/* Description */}
+      <p
+        className={cn(
+          "text-muted-foreground max-w-md mb-8",
+          sizeClasses[size].description
+        )}
+      >
+        {displayDescription}
+      </p>
+
+      {/* Custom content */}
+      {children && <div className="mb-8">{children}</div>}
+
+      {/* Actions */}
+      {allActions.length > 0 && (
+        <div className="flex flex-wrap gap-3 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>
+  )
+
+  if (layout === "split") {
+    return (
+      <div
+        className={cn(
+          "min-h-screen flex flex-col lg:flex-row",
+          className
+        )}
+      >
+        {/* Left side - Illustration */}
+        <div className="flex-1 bg-muted/30 flex items-center justify-center p-8 lg:p-16">
+          <div className={sizeClasses[size].illustration}>
+            {illustration || <ErrorIllustration type={type} />}
+          </div>
+        </div>
+
+        {/* Right side - Content */}
+        <div className="flex-1 flex items-center justify-center p-8 lg:p-16">
+          <div className="max-w-md">
+            {showCode && displayCode && (
+              <div
+                className={cn(
+                  "font-bold text-primary mb-4",
+                  size === "sm" ? "text-4xl" : size === "md" ? "text-5xl" : "text-6xl"
+                )}
+              >
+                {displayCode}
+              </div>
+            )}
+            <h1 className={cn("font-bold tracking-tight mb-4", sizeClasses[size].title)}>
+              {displayTitle}
+            </h1>
+            <p className={cn("text-muted-foreground mb-8", sizeClasses[size].description)}>
+              {displayDescription}
+            </p>
+            {children && <div className="mb-8">{children}</div>}
+            {allActions.length > 0 && (
+              <div className="flex flex-wrap gap-3">
+                {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>
+        </div>
+      </div>
+    )
+  }
+
+  return (
+    <div
+      className={cn(
+        "min-h-screen flex items-center justify-center",
+        sizeClasses[size].container,
+        className
+      )}
+    >
+      {renderContent()}
+    </div>
+  )
+}
+
+// ============================================
+// PRESET COMPONENTS
+// ============================================
+
+export function Error404Page(props: Omit<WakaErrorPageProps, "type">) {
+  return <WakaErrorPage type="404" {...props} />
+}
+
+export function Error500Page(props: Omit<WakaErrorPageProps, "type">) {
+  return <WakaErrorPage type="500" showRefreshButton {...props} />
+}
+
+export function Error403Page(props: Omit<WakaErrorPageProps, "type">) {
+  return <WakaErrorPage type="403" {...props} />
+}
+
+export function MaintenancePage(props: Omit<WakaErrorPageProps, "type">) {
+  return (
+    <WakaErrorPage
+      type="maintenance"
+      showBackButton={false}
+      showHomeButton={false}
+      {...props}
+    />
+  )
+}
+
+export function OfflinePage(props: Omit<WakaErrorPageProps, "type">) {
+  return <WakaErrorPage type="offline" showRefreshButton {...props} />
+}
+
+export default WakaErrorPage