@wakastellar/ui 2.3.4 → 2.4.0

package/src/blocks/error-pages/ErrorPages.stories.tsx

@@ -0,0 +1,401 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import {
+  WakaErrorPage,
+  Error404Page,
+  Error500Page,
+  Error403Page,
+  MaintenancePage,
+  OfflinePage,
+} from './index'
+import type { ErrorType } from './index'
+import * as React from 'react'
+import { Home, ArrowLeft, Search, Mail } from 'lucide-react'
+
+const MockLink = ({ href, children, ...props }: any) => (
+  <a href={href} {...props} onClick={(e) => e.preventDefault()}>
+    {children}
+  </a>
+)
+
+const meta: Meta<typeof WakaErrorPage> = {
+  title: 'Blocks/ErrorPages',
+  component: WakaErrorPage,
+  parameters: {
+    layout: 'fullscreen',
+    docs: {
+      description: {
+        component:
+          'Error page components for 404, 500, 403, 503, offline, and maintenance states with customizable actions and illustrations.',
+      },
+    },
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    type: {
+      control: 'select',
+      options: ['404', '500', '403', '503', 'offline', 'maintenance', 'custom'],
+    },
+    layout: {
+      control: 'select',
+      options: ['centered', 'split'],
+    },
+    size: {
+      control: 'select',
+      options: ['sm', 'md', 'lg'],
+    },
+    showCode: {
+      control: 'boolean',
+    },
+    showIllustration: {
+      control: 'boolean',
+    },
+    showBackButton: {
+      control: 'boolean',
+    },
+    showHomeButton: {
+      control: 'boolean',
+    },
+    showRefreshButton: {
+      control: 'boolean',
+    },
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof WakaErrorPage>
+
+export const Default404: Story = {
+  render: () => (
+    <Error404Page
+      LinkComponent={MockLink}
+    />
+  ),
+}
+
+export const Error500: Story = {
+  render: () => (
+    <Error500Page
+      LinkComponent={MockLink}
+    />
+  ),
+}
+
+export const Error403: Story = {
+  render: () => (
+    <Error403Page
+      LinkComponent={MockLink}
+    />
+  ),
+}
+
+export const Maintenance: Story = {
+  render: () => (
+    <MaintenancePage
+      description="Nous effectuons une maintenance planifiée. Nous serons de retour dans environ 2 heures."
+    />
+  ),
+}
+
+export const Offline: Story = {
+  render: () => (
+    <OfflinePage />
+  ),
+}
+
+export const AllErrorTypes: Story = {
+  render: () => {
+    const types: ErrorType[] = ['404', '500', '403', '503', 'offline', 'maintenance']
+
+    return (
+      <div className="grid grid-cols-2 gap-4 p-4">
+        {types.map((type) => (
+          <div key={type} className="border rounded-lg overflow-hidden">
+            <WakaErrorPage
+              type={type}
+              size="sm"
+              showBackButton={false}
+              showHomeButton={false}
+              LinkComponent={MockLink}
+            />
+          </div>
+        ))}
+      </div>
+    )
+  },
+}
+
+export const SplitLayout: Story = {
+  render: () => (
+    <WakaErrorPage
+      type="404"
+      layout="split"
+      LinkComponent={MockLink}
+    />
+  ),
+}
+
+export const SplitLayout500: Story = {
+  render: () => (
+    <WakaErrorPage
+      type="500"
+      layout="split"
+      showRefreshButton
+      LinkComponent={MockLink}
+    />
+  ),
+}
+
+export const SmallSize: Story = {
+  render: () => (
+    <div className="h-[400px]">
+      <WakaErrorPage
+        type="404"
+        size="sm"
+        LinkComponent={MockLink}
+      />
+    </div>
+  ),
+}
+
+export const LargeSize: Story = {
+  render: () => (
+    <WakaErrorPage
+      type="404"
+      size="lg"
+      LinkComponent={MockLink}
+    />
+  ),
+}
+
+export const NoCode: Story = {
+  render: () => (
+    <WakaErrorPage
+      type="404"
+      showCode={false}
+      LinkComponent={MockLink}
+    />
+  ),
+}
+
+export const NoIllustration: Story = {
+  render: () => (
+    <WakaErrorPage
+      type="404"
+      showIllustration={false}
+      LinkComponent={MockLink}
+    />
+  ),
+}
+
+export const CustomActions: Story = {
+  render: () => (
+    <WakaErrorPage
+      type="404"
+      actions={[
+        {
+          label: 'Rechercher',
+          icon: <Search className="h-4 w-4" />,
+          variant: 'default',
+          onClick: () => console.log('Search'),
+        },
+        {
+          label: 'Accueil',
+          icon: <Home className="h-4 w-4" />,
+          variant: 'outline',
+          href: '/',
+        },
+        {
+          label: 'Contact',
+          icon: <Mail className="h-4 w-4" />,
+          variant: 'ghost',
+          href: '/contact',
+        },
+      ]}
+      LinkComponent={MockLink}
+    />
+  ),
+}
+
+export const CustomContent: Story = {
+  render: () => (
+    <WakaErrorPage
+      type="custom"
+      code="OOPS"
+      title="Something went wrong"
+      description="We're working on fixing this issue. Please try again later."
+      showRefreshButton
+      LinkComponent={MockLink}
+    >
+      <div className="bg-muted p-4 rounded-lg text-sm">
+        <p className="font-medium mb-2">Error Details:</p>
+        <code className="text-xs text-muted-foreground">
+          Error ID: abc123def456
+        </code>
+      </div>
+    </WakaErrorPage>
+  ),
+}
+
+export const CustomIllustration: Story = {
+  render: () => (
+    <WakaErrorPage
+      type="404"
+      illustration={
+        <div className="w-48 h-48 flex items-center justify-center text-8xl">
+          🤷‍♂️
+        </div>
+      }
+      LinkComponent={MockLink}
+    />
+  ),
+}
+
+export const WithSearchForm: Story = {
+  render: () => (
+    <WakaErrorPage
+      type="404"
+      title="Page not found"
+      description="The page you're looking for doesn't exist or has been moved."
+      showBackButton={false}
+      showHomeButton={false}
+      LinkComponent={MockLink}
+    >
+      <div className="w-full max-w-md space-y-4">
+        <div className="flex gap-2">
+          <input
+            type="text"
+            placeholder="Search for content..."
+            className="flex-1 px-3 py-2 border rounded-md text-sm"
+          />
+          <button className="px-4 py-2 bg-primary text-primary-foreground rounded-md text-sm">
+            Search
+          </button>
+        </div>
+        <p className="text-xs text-muted-foreground text-center">
+          Or try one of these popular pages:
+        </p>
+        <div className="flex flex-wrap gap-2 justify-center">
+          {['Documentation', 'Pricing', 'Blog', 'Contact'].map((link) => (
+            <a
+              key={link}
+              href="#"
+              className="px-3 py-1 text-sm bg-muted rounded-full hover:bg-muted/80"
+            >
+              {link}
+            </a>
+          ))}
+        </div>
+      </div>
+    </WakaErrorPage>
+  ),
+}
+
+export const MaintenanceWithCountdown: Story = {
+  render: () => {
+    const [countdown, setCountdown] = React.useState(7200) // 2 hours in seconds
+
+    React.useEffect(() => {
+      const timer = setInterval(() => {
+        setCountdown((prev) => Math.max(0, prev - 1))
+      }, 1000)
+      return () => clearInterval(timer)
+    }, [])
+
+    const hours = Math.floor(countdown / 3600)
+    const minutes = Math.floor((countdown % 3600) / 60)
+    const seconds = countdown % 60
+
+    return (
+      <WakaErrorPage
+        type="maintenance"
+        title="Scheduled Maintenance"
+        description="We're performing routine maintenance to improve your experience."
+        showBackButton={false}
+        showHomeButton={false}
+      >
+        <div className="text-center space-y-4">
+          <p className="text-sm text-muted-foreground">Estimated time remaining:</p>
+          <div className="flex justify-center gap-4">
+            {[
+              { value: hours, label: 'Hours' },
+              { value: minutes, label: 'Minutes' },
+              { value: seconds, label: 'Seconds' },
+            ].map(({ value, label }) => (
+              <div key={label} className="text-center">
+                <div className="text-3xl font-bold bg-muted rounded-lg px-4 py-2 w-16">
+                  {String(value).padStart(2, '0')}
+                </div>
+                <div className="text-xs text-muted-foreground mt-1">{label}</div>
+              </div>
+            ))}
+          </div>
+          <p className="text-xs text-muted-foreground">
+            Follow us on Twitter for updates
+          </p>
+        </div>
+      </WakaErrorPage>
+    )
+  },
+}
+
+export const EmbeddedInPage: Story = {
+  render: () => (
+    <div className="min-h-screen">
+      <header className="border-b py-4 px-6">
+        <div className="flex items-center justify-between">
+          <span className="font-bold text-xl">MyApp</span>
+          <nav className="flex gap-4 text-sm">
+            <a href="#" className="text-muted-foreground hover:text-foreground">Home</a>
+            <a href="#" className="text-muted-foreground hover:text-foreground">Products</a>
+            <a href="#" className="text-muted-foreground hover:text-foreground">About</a>
+          </nav>
+        </div>
+      </header>
+      <Error404Page
+        size="md"
+        LinkComponent={MockLink}
+      />
+      <footer className="border-t py-4 px-6 text-center text-sm text-muted-foreground">
+        © 2024 MyApp Inc.
+      </footer>
+    </div>
+  ),
+}
+
+export const CustomErrorCode: Story = {
+  render: () => (
+    <WakaErrorPage
+      type="custom"
+      code="418"
+      title="I'm a teapot"
+      description="The server refuses to brew coffee because it is, permanently, a teapot."
+      actions={[
+        {
+          label: 'Make Tea Instead',
+          variant: 'default',
+          onClick: () => alert('☕ Here is your tea!'),
+        },
+      ]}
+    />
+  ),
+}
+
+export const ServiceUnavailable: Story = {
+  render: () => (
+    <WakaErrorPage
+      type="503"
+      title="Service Temporarily Unavailable"
+      description="Our servers are currently experiencing high traffic. Please try again in a few minutes."
+      showRefreshButton
+      showBackButton={false}
+      actions={[
+        {
+          label: 'Check Status',
+          variant: 'outline',
+          href: '/status',
+        },
+      ]}
+      LinkComponent={MockLink}
+    />
+  ),
+}

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

@@ -2,6 +2,7 @@
 
 import * as React from "react"
 import { cn } from "../../utils"
+import type { LinkComponentProps } from "../../types/link"
 import { Button } from "../../components/button"
 import {
   Home,
@@ -65,6 +66,8 @@ export interface WakaErrorPageProps {
   size?: "sm" | "md" | "lg"
   /** Classes CSS additionnelles */
   className?: string
+  /** Composant de lien personnalisé (ex: next/link) pour navigation SPA */
+  LinkComponent?: React.ComponentType<LinkComponentProps>
 }
 
 // ============================================
@@ -186,6 +189,7 @@ export function WakaErrorPage({
   layout = "centered",
   size = "md",
   className,
+  LinkComponent,
 }: WakaErrorPageProps) {
   const config = errorConfigs[type]
   const displayCode = code ?? config.code
@@ -297,10 +301,17 @@ export function WakaErrorPage({
               asChild={!!action.href}
             >
               {action.href ? (
-                <a href={action.href}>
-                  {action.icon && <span className="mr-2">{action.icon}</span>}
-                  {action.label}
-                </a>
+                LinkComponent ? (
+                  <LinkComponent href={action.href}>
+                    {action.icon && <span className="mr-2">{action.icon}</span>}
+                    {action.label}
+                  </LinkComponent>
+                ) : (
+                  <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>}
@@ -359,10 +370,17 @@ export function WakaErrorPage({
                     asChild={!!action.href}
                   >
                     {action.href ? (
-                      <a href={action.href}>
-                        {action.icon && <span className="mr-2">{action.icon}</span>}
-                        {action.label}
-                      </a>
+                      LinkComponent ? (
+                        <LinkComponent href={action.href}>
+                          {action.icon && <span className="mr-2">{action.icon}</span>}
+                          {action.label}
+                        </LinkComponent>
+                      ) : (
+                        <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>}