@wakastellar/ui 2.3.4 → 2.4.0

package/src/blocks/empty-states/EmptyStates.stories.tsx

@@ -0,0 +1,467 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import {
+  WakaEmptyState,
+  NoDataState,
+  NoResultsState,
+  NoMessagesState,
+  NoFilesState,
+  EmptyCartState,
+  NoNotificationsState,
+  ErrorState,
+} from './index'
+import type { EmptyStateType } from './index'
+import * as React from 'react'
+import { Plus, Upload, Search, RefreshCw, Rocket, FileText } from 'lucide-react'
+
+const MockLink = ({ href, children, ...props }: any) => (
+  <a href={href} {...props} onClick={(e) => e.preventDefault()}>
+    {children}
+  </a>
+)
+
+const meta: Meta<typeof WakaEmptyState> = {
+  title: 'Blocks/EmptyStates',
+  component: WakaEmptyState,
+  parameters: {
+    layout: 'centered',
+    docs: {
+      description: {
+        component:
+          'Empty state components for various scenarios: no data, no results, no messages, no files, empty cart, no notifications, and error states.',
+      },
+    },
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    type: {
+      control: 'select',
+      options: [
+        'no-data',
+        'no-results',
+        'no-messages',
+        'no-files',
+        'no-users',
+        'no-cart',
+        'no-notifications',
+        'no-events',
+        'no-images',
+        'no-bookmarks',
+        'no-favorites',
+        'error',
+        'custom',
+      ],
+    },
+    size: {
+      control: 'select',
+      options: ['sm', 'md', 'lg'],
+    },
+    layout: {
+      control: 'select',
+      options: ['vertical', 'horizontal'],
+    },
+    showIllustration: {
+      control: 'boolean',
+    },
+    centered: {
+      control: 'boolean',
+    },
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof WakaEmptyState>
+
+export const Default: Story = {
+  render: () => (
+    <div className="w-[500px]">
+      <WakaEmptyState
+        type="no-data"
+        actions={[
+          {
+            label: 'Ajouter',
+            icon: <Plus className="h-4 w-4" />,
+            onClick: () => console.log('Add'),
+          },
+        ]}
+      />
+    </div>
+  ),
+}
+
+export const NoData: Story = {
+  render: () => (
+    <div className="w-[500px]">
+      <NoDataState
+        actions={[
+          {
+            label: 'Ajouter un élément',
+            icon: <Plus className="h-4 w-4" />,
+            onClick: () => console.log('Add'),
+          },
+        ]}
+      />
+    </div>
+  ),
+}
+
+export const NoResults: Story = {
+  render: () => (
+    <div className="w-[500px]">
+      <NoResultsState
+        description='Aucun résultat pour "recherche exemple"'
+        actions={[
+          {
+            label: 'Effacer la recherche',
+            variant: 'outline',
+            onClick: () => console.log('Clear'),
+          },
+        ]}
+      />
+    </div>
+  ),
+}
+
+export const NoMessages: Story = {
+  render: () => (
+    <div className="w-[500px]">
+      <NoMessagesState
+        actions={[
+          {
+            label: 'Nouveau message',
+            icon: <Plus className="h-4 w-4" />,
+            onClick: () => console.log('New message'),
+          },
+        ]}
+      />
+    </div>
+  ),
+}
+
+export const NoFiles: Story = {
+  render: () => (
+    <div className="w-[500px]">
+      <NoFilesState
+        actions={[
+          {
+            label: 'Importer un fichier',
+            icon: <Upload className="h-4 w-4" />,
+            onClick: () => console.log('Upload'),
+          },
+        ]}
+      />
+    </div>
+  ),
+}
+
+export const EmptyCart: Story = {
+  render: () => (
+    <div className="w-[500px]">
+      <EmptyCartState
+        actions={[
+          {
+            label: 'Parcourir les produits',
+            onClick: () => console.log('Browse'),
+          },
+        ]}
+      />
+    </div>
+  ),
+}
+
+export const NoNotifications: Story = {
+  render: () => (
+    <div className="w-[500px]">
+      <NoNotificationsState />
+    </div>
+  ),
+}
+
+export const Error: Story = {
+  render: () => (
+    <div className="w-[500px]">
+      <ErrorState
+        actions={[
+          {
+            label: 'Réessayer',
+            icon: <RefreshCw className="h-4 w-4" />,
+            onClick: () => console.log('Retry'),
+          },
+        ]}
+      />
+    </div>
+  ),
+}
+
+export const AllTypes: Story = {
+  render: () => {
+    const types: EmptyStateType[] = [
+      'no-data',
+      'no-results',
+      'no-messages',
+      'no-files',
+      'no-users',
+      'no-cart',
+      'no-notifications',
+      'no-events',
+      'no-images',
+      'no-bookmarks',
+      'no-favorites',
+      'error',
+    ]
+
+    return (
+      <div className="grid grid-cols-3 gap-6">
+        {types.map((type) => (
+          <div key={type} className="border rounded-lg p-4">
+            <WakaEmptyState type={type} size="sm" />
+          </div>
+        ))}
+      </div>
+    )
+  },
+}
+
+export const SmallSize: Story = {
+  render: () => (
+    <div className="w-[400px] border rounded-lg">
+      <WakaEmptyState
+        type="no-data"
+        size="sm"
+        actions={[
+          {
+            label: 'Ajouter',
+            onClick: () => console.log('Add'),
+          },
+        ]}
+      />
+    </div>
+  ),
+}
+
+export const LargeSize: Story = {
+  render: () => (
+    <div className="w-[600px]">
+      <WakaEmptyState
+        type="no-data"
+        size="lg"
+        actions={[
+          {
+            label: 'Commencer',
+            onClick: () => console.log('Start'),
+          },
+        ]}
+      />
+    </div>
+  ),
+}
+
+export const HorizontalLayout: Story = {
+  render: () => (
+    <div className="w-[600px] border rounded-lg">
+      <WakaEmptyState
+        type="no-files"
+        layout="horizontal"
+        actions={[
+          {
+            label: 'Importer',
+            icon: <Upload className="h-4 w-4" />,
+            onClick: () => console.log('Upload'),
+          },
+        ]}
+      />
+    </div>
+  ),
+}
+
+export const CustomContent: Story = {
+  render: () => (
+    <div className="w-[500px]">
+      <WakaEmptyState
+        type="custom"
+        title="Bienvenue !"
+        description="Commencez par créer votre premier projet."
+        icon={<Rocket className="h-10 w-10" />}
+        actions={[
+          {
+            label: 'Créer un projet',
+            icon: <Plus className="h-4 w-4" />,
+            onClick: () => console.log('Create'),
+          },
+          {
+            label: 'Voir la documentation',
+            variant: 'outline',
+            href: '/docs',
+          },
+        ]}
+        LinkComponent={MockLink}
+      />
+    </div>
+  ),
+}
+
+export const CustomIllustration: Story = {
+  render: () => (
+    <div className="w-[500px]">
+      <WakaEmptyState
+        type="custom"
+        title="Aucun projet"
+        description="Créez votre premier projet pour commencer."
+        illustration={
+          <div className="w-32 h-32 bg-gradient-to-br from-primary/20 to-primary/5 rounded-full flex items-center justify-center">
+            <span className="text-5xl">📁</span>
+          </div>
+        }
+        actions={[
+          {
+            label: 'Nouveau projet',
+            onClick: () => console.log('New project'),
+          },
+        ]}
+      />
+    </div>
+  ),
+}
+
+export const WithChildren: Story = {
+  render: () => (
+    <div className="w-[500px]">
+      <WakaEmptyState
+        type="no-results"
+        title="Aucun résultat"
+        description="Essayez d'ajuster vos critères de recherche."
+      >
+        <div className="flex flex-wrap gap-2 justify-center">
+          <span className="text-sm text-muted-foreground">Suggestions:</span>
+          {['React', 'TypeScript', 'Tailwind', 'Next.js'].map((tag) => (
+            <button
+              key={tag}
+              className="px-2 py-1 text-sm bg-muted rounded hover:bg-muted/80"
+              onClick={() => console.log('Search:', tag)}
+            >
+              {tag}
+            </button>
+          ))}
+        </div>
+      </WakaEmptyState>
+    </div>
+  ),
+}
+
+export const NoIllustration: Story = {
+  render: () => (
+    <div className="w-[500px]">
+      <WakaEmptyState
+        type="no-data"
+        showIllustration={false}
+        actions={[
+          {
+            label: 'Ajouter',
+            onClick: () => console.log('Add'),
+          },
+        ]}
+      />
+    </div>
+  ),
+}
+
+export const MultipleActions: Story = {
+  render: () => (
+    <div className="w-[500px]">
+      <WakaEmptyState
+        type="no-files"
+        actions={[
+          {
+            label: 'Importer',
+            icon: <Upload className="h-4 w-4" />,
+            variant: 'default',
+            onClick: () => console.log('Upload'),
+          },
+          {
+            label: 'Créer',
+            icon: <Plus className="h-4 w-4" />,
+            variant: 'outline',
+            onClick: () => console.log('Create'),
+          },
+          {
+            label: 'Modèles',
+            icon: <FileText className="h-4 w-4" />,
+            variant: 'ghost',
+            href: '/templates',
+          },
+        ]}
+        LinkComponent={MockLink}
+      />
+    </div>
+  ),
+}
+
+export const InTableContext: Story = {
+  render: () => (
+    <div className="w-[800px] border rounded-lg overflow-hidden">
+      <div className="bg-muted/50 px-4 py-3 border-b">
+        <div className="flex items-center justify-between">
+          <h3 className="font-semibold">Documents</h3>
+          <div className="flex gap-2">
+            <input
+              type="text"
+              placeholder="Rechercher..."
+              className="px-3 py-1.5 text-sm border rounded-md"
+            />
+            <button className="px-3 py-1.5 text-sm bg-primary text-primary-foreground rounded-md">
+              Nouveau
+            </button>
+          </div>
+        </div>
+      </div>
+      <WakaEmptyState
+        type="no-data"
+        size="md"
+        actions={[
+          {
+            label: 'Créer un document',
+            icon: <Plus className="h-4 w-4" />,
+            onClick: () => console.log('Create'),
+          },
+        ]}
+      />
+    </div>
+  ),
+}
+
+export const InCardContext: Story = {
+  render: () => (
+    <div className="w-[400px] border rounded-lg overflow-hidden">
+      <div className="px-4 py-3 border-b">
+        <h3 className="font-semibold">Favoris</h3>
+      </div>
+      <WakaEmptyState
+        type="no-favorites"
+        size="sm"
+        showIllustration={true}
+      />
+    </div>
+  ),
+}
+
+export const InSidebarContext: Story = {
+  render: () => (
+    <div className="w-[280px] h-[400px] border rounded-lg flex flex-col">
+      <div className="px-4 py-3 border-b">
+        <h3 className="font-semibold text-sm">Messages récents</h3>
+      </div>
+      <div className="flex-1 flex">
+        <WakaEmptyState
+          type="no-messages"
+          size="sm"
+          layout="vertical"
+          actions={[
+            {
+              label: 'Nouveau',
+              onClick: () => console.log('New'),
+            },
+          ]}
+        />
+      </div>
+    </div>
+  ),
+}

package/src/blocks/empty-states/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 {
   FileQuestion,
@@ -78,6 +79,8 @@ export interface WakaEmptyStateProps {
   children?: React.ReactNode
   /** Classes CSS additionnelles */
   className?: string
+  /** Composant de lien personnalisé (ex: next/link) pour navigation SPA */
+  LinkComponent?: React.ComponentType<LinkComponentProps>
 }
 
 // ============================================
@@ -238,6 +241,7 @@ export function WakaEmptyState({
   centered = true,
   children,
   className,
+  LinkComponent,
 }: WakaEmptyStateProps) {
   const config = emptyStateConfigs[type]
   const displayTitle = title ?? config.title
@@ -325,10 +329,17 @@ export function WakaEmptyState({
                   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>}
@@ -399,10 +410,17 @@ export function WakaEmptyState({
               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>}