@wakastellar/ui 2.3.4 → 2.4.0

package/src/blocks/dashboard/Dashboard.stories.tsx

@@ -0,0 +1,559 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { WakaDashboard, defaultDashboardStats } from './index'
+import type { DashboardStatConfig, DashboardChartConfig, DashboardTableConfig, DashboardActivityItem, DashboardQuickAction } from './index'
+import * as React from 'react'
+import { Plus, Download, Users, DollarSign, ShoppingCart, Activity } from 'lucide-react'
+
+const MockLink = ({ href, children, ...props }: any) => (
+  <a href={href} {...props} onClick={(e) => e.preventDefault()}>
+    {children}
+  </a>
+)
+
+const meta: Meta<typeof WakaDashboard> = {
+  title: 'Blocks/Dashboard',
+  component: WakaDashboard,
+  parameters: {
+    layout: 'fullscreen',
+    docs: {
+      description: {
+        component:
+          'A comprehensive dashboard component with stats, charts, tables, activity feed, and quick actions. Supports period filtering and refresh.',
+      },
+    },
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    statsLayout: {
+      control: 'select',
+      options: ['row', 'grid'],
+    },
+    statsColumns: {
+      control: 'select',
+      options: [2, 3, 4],
+    },
+    showHeader: {
+      control: 'boolean',
+    },
+    loading: {
+      control: 'boolean',
+    },
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof WakaDashboard>
+
+// Mock chart component
+const MockChart = ({ height = 200, title }: { height?: number; title: string }) => (
+  <div
+    className="bg-muted/30 rounded-lg flex items-center justify-center"
+    style={{ height }}
+  >
+    <span className="text-muted-foreground text-sm">{title}</span>
+  </div>
+)
+
+// Mock table component
+const MockTable = () => (
+  <div className="space-y-2">
+    {[1, 2, 3, 4, 5].map((i) => (
+      <div key={i} className="flex justify-between py-2 border-b last:border-0">
+        <span className="text-sm">Item {i}</span>
+        <span className="text-sm text-muted-foreground">Value {i * 100}</span>
+      </div>
+    ))}
+  </div>
+)
+
+export const Default: Story = {
+  render: () => (
+    <div className="p-6">
+      <WakaDashboard
+        title="Tableau de bord"
+        description="Vue d'ensemble de votre activité"
+        stats={defaultDashboardStats}
+        period="month"
+        onPeriodChange={(period) => console.log('Period:', period)}
+        onRefresh={() => console.log('Refresh')}
+        LinkComponent={MockLink}
+      />
+    </div>
+  ),
+}
+
+export const WithCharts: Story = {
+  render: () => {
+    const charts: DashboardChartConfig[] = [
+      {
+        id: 'revenue-chart',
+        title: 'Revenus',
+        description: 'Évolution des revenus sur la période',
+        chart: <MockChart title="Line Chart - Revenus" />,
+        actions: [
+          { label: 'Exporter', onClick: () => console.log('Export') },
+        ],
+      },
+      {
+        id: 'users-chart',
+        title: 'Utilisateurs',
+        description: 'Nouveaux utilisateurs par jour',
+        chart: <MockChart title="Bar Chart - Utilisateurs" />,
+        actions: [
+          { label: 'Voir détails', onClick: () => console.log('Details') },
+        ],
+      },
+    ]
+
+    return (
+      <div className="p-6">
+        <WakaDashboard
+          title="Dashboard avec graphiques"
+          stats={defaultDashboardStats}
+          charts={charts}
+          period="month"
+          onPeriodChange={(period) => console.log('Period:', period)}
+          LinkComponent={MockLink}
+        />
+      </div>
+    )
+  },
+}
+
+export const WithTables: Story = {
+  render: () => {
+    const tables: DashboardTableConfig[] = [
+      {
+        id: 'recent-orders',
+        title: 'Commandes récentes',
+        description: 'Les 5 dernières commandes',
+        table: <MockTable />,
+        actions: [
+          { label: 'Voir tout', href: '/orders' },
+        ],
+      },
+    ]
+
+    return (
+      <div className="p-6">
+        <WakaDashboard
+          title="Dashboard avec tableau"
+          stats={defaultDashboardStats}
+          tables={tables}
+          period="month"
+          onPeriodChange={(period) => console.log('Period:', period)}
+          LinkComponent={MockLink}
+        />
+      </div>
+    )
+  },
+}
+
+export const WithActivity: Story = {
+  render: () => {
+    const activities: DashboardActivityItem[] = [
+      {
+        id: '1',
+        title: 'Nouvelle commande #1234',
+        description: 'Jean Dupont a passé une commande de €150',
+        timestamp: new Date(Date.now() - 1000 * 60 * 5),
+        type: 'success',
+      },
+      {
+        id: '2',
+        title: 'Nouvel utilisateur',
+        description: 'Marie Martin s\'est inscrite',
+        timestamp: new Date(Date.now() - 1000 * 60 * 30),
+        type: 'info',
+      },
+      {
+        id: '3',
+        title: 'Paiement échoué',
+        description: 'Le paiement de la commande #1233 a échoué',
+        timestamp: new Date(Date.now() - 1000 * 60 * 60 * 2),
+        type: 'error',
+      },
+      {
+        id: '4',
+        title: 'Stock faible',
+        description: 'Le produit "Widget Pro" est presque en rupture',
+        timestamp: new Date(Date.now() - 1000 * 60 * 60 * 5),
+        type: 'warning',
+      },
+    ]
+
+    return (
+      <div className="p-6">
+        <WakaDashboard
+          title="Dashboard avec activité"
+          stats={defaultDashboardStats}
+          activities={activities}
+          period="month"
+          onPeriodChange={(period) => console.log('Period:', period)}
+          LinkComponent={MockLink}
+        />
+      </div>
+    )
+  },
+}
+
+export const WithQuickActions: Story = {
+  render: () => {
+    const quickActions: DashboardQuickAction[] = [
+      {
+        id: 'add-product',
+        label: 'Ajouter produit',
+        icon: <Plus className="h-4 w-4" />,
+        onClick: () => console.log('Add product'),
+      },
+      {
+        id: 'export',
+        label: 'Exporter',
+        icon: <Download className="h-4 w-4" />,
+        variant: 'outline',
+        onClick: () => console.log('Export'),
+      },
+    ]
+
+    return (
+      <div className="p-6">
+        <WakaDashboard
+          title="Dashboard avec actions rapides"
+          stats={defaultDashboardStats}
+          quickActions={quickActions}
+          period="month"
+          onPeriodChange={(period) => console.log('Period:', period)}
+          onRefresh={() => console.log('Refresh')}
+          LinkComponent={MockLink}
+        />
+      </div>
+    )
+  },
+}
+
+export const Complete: Story = {
+  render: () => {
+    const charts: DashboardChartConfig[] = [
+      {
+        id: 'revenue-chart',
+        title: 'Revenus',
+        description: 'Évolution des revenus',
+        chart: <MockChart title="Line Chart" height={250} />,
+      },
+      {
+        id: 'orders-chart',
+        title: 'Commandes',
+        description: 'Commandes par catégorie',
+        chart: <MockChart title="Pie Chart" height={250} />,
+      },
+    ]
+
+    const tables: DashboardTableConfig[] = [
+      {
+        id: 'top-products',
+        title: 'Produits populaires',
+        description: 'Les plus vendus ce mois',
+        table: <MockTable />,
+        actions: [{ label: 'Voir tout', href: '/products' }],
+      },
+    ]
+
+    const activities: DashboardActivityItem[] = [
+      {
+        id: '1',
+        title: 'Commande #1234 expédiée',
+        timestamp: new Date(Date.now() - 1000 * 60 * 10),
+        type: 'success',
+      },
+      {
+        id: '2',
+        title: 'Nouveau client enregistré',
+        timestamp: new Date(Date.now() - 1000 * 60 * 45),
+        type: 'info',
+      },
+      {
+        id: '3',
+        title: 'Stock mis à jour',
+        timestamp: new Date(Date.now() - 1000 * 60 * 120),
+        type: 'info',
+      },
+    ]
+
+    const quickActions: DashboardQuickAction[] = [
+      {
+        id: 'new-order',
+        label: 'Nouvelle commande',
+        icon: <Plus className="h-4 w-4" />,
+        href: '/orders/new',
+      },
+    ]
+
+    return (
+      <div className="p-6">
+        <WakaDashboard
+          title="Dashboard complet"
+          description="Vue d'ensemble de votre activité commerciale"
+          stats={defaultDashboardStats}
+          charts={charts}
+          tables={tables}
+          activities={activities}
+          quickActions={quickActions}
+          period="month"
+          onPeriodChange={(period) => console.log('Period:', period)}
+          onRefresh={() => console.log('Refresh')}
+          LinkComponent={MockLink}
+        />
+      </div>
+    )
+  },
+}
+
+export const StatsOnly: Story = {
+  render: () => (
+    <div className="p-6">
+      <WakaDashboard
+        title="Statistiques"
+        stats={defaultDashboardStats}
+        showHeader
+        LinkComponent={MockLink}
+      />
+    </div>
+  ),
+}
+
+export const GridStats: Story = {
+  render: () => (
+    <div className="p-6">
+      <WakaDashboard
+        title="Stats en grille"
+        stats={defaultDashboardStats}
+        statsLayout="grid"
+        statsColumns={4}
+        LinkComponent={MockLink}
+      />
+    </div>
+  ),
+}
+
+export const TwoColumnStats: Story = {
+  render: () => (
+    <div className="p-6">
+      <WakaDashboard
+        title="Stats 2 colonnes"
+        stats={defaultDashboardStats.slice(0, 2)}
+        statsLayout="grid"
+        statsColumns={2}
+        LinkComponent={MockLink}
+      />
+    </div>
+  ),
+}
+
+export const Loading: Story = {
+  render: () => (
+    <div className="p-6">
+      <WakaDashboard
+        title="Chargement..."
+        stats={defaultDashboardStats}
+        loading
+        period="month"
+        onPeriodChange={(period) => console.log('Period:', period)}
+        onRefresh={() => console.log('Refresh')}
+        LinkComponent={MockLink}
+      />
+    </div>
+  ),
+}
+
+export const NoHeader: Story = {
+  render: () => (
+    <div className="p-6">
+      <WakaDashboard
+        stats={defaultDashboardStats}
+        showHeader={false}
+        LinkComponent={MockLink}
+      />
+    </div>
+  ),
+}
+
+export const CustomStats: Story = {
+  render: () => {
+    const customStats: DashboardStatConfig[] = [
+      {
+        id: 'visitors',
+        label: 'Visiteurs',
+        value: '12,345',
+        trend: 'up',
+        trendValue: '+15%',
+        trendText: 'vs semaine dernière',
+        icon: <Users className="h-5 w-5" />,
+        color: 'blue',
+      },
+      {
+        id: 'revenue',
+        label: 'Revenus',
+        value: '€89,432',
+        trend: 'up',
+        trendValue: '+8.2%',
+        icon: <DollarSign className="h-5 w-5" />,
+        color: 'success',
+      },
+      {
+        id: 'orders',
+        label: 'Commandes',
+        value: '432',
+        trend: 'down',
+        trendValue: '-3%',
+        icon: <ShoppingCart className="h-5 w-5" />,
+        color: 'warning',
+      },
+      {
+        id: 'conversion',
+        label: 'Taux de conversion',
+        value: '3.5%',
+        trend: 'neutral',
+        icon: <Activity className="h-5 w-5" />,
+        color: 'purple',
+      },
+    ]
+
+    return (
+      <div className="p-6">
+        <WakaDashboard
+          title="Dashboard personnalisé"
+          stats={customStats}
+          period="week"
+          onPeriodChange={(period) => console.log('Period:', period)}
+          LinkComponent={MockLink}
+        />
+      </div>
+    )
+  },
+}
+
+export const Interactive: Story = {
+  render: () => {
+    const [period, setPeriod] = React.useState('month')
+    const [loading, setLoading] = React.useState(false)
+
+    const handleRefresh = () => {
+      setLoading(true)
+      setTimeout(() => setLoading(false), 1500)
+    }
+
+    return (
+      <div className="p-6">
+        <WakaDashboard
+          title="Dashboard interactif"
+          description={`Période sélectionnée: ${period}`}
+          stats={defaultDashboardStats}
+          period={period}
+          onPeriodChange={setPeriod}
+          onRefresh={handleRefresh}
+          loading={loading}
+          LinkComponent={MockLink}
+        />
+      </div>
+    )
+  },
+}
+
+export const EcommerceDashboard: Story = {
+  render: () => {
+    const ecommerceStats: DashboardStatConfig[] = [
+      {
+        id: 'sales',
+        label: 'Ventes du jour',
+        value: '€3,421',
+        trend: 'up',
+        trendValue: '+12%',
+        icon: <DollarSign className="h-5 w-5" />,
+        color: 'success',
+      },
+      {
+        id: 'orders',
+        label: 'Commandes',
+        value: '48',
+        trend: 'up',
+        trendValue: '+5',
+        icon: <ShoppingCart className="h-5 w-5" />,
+        color: 'blue',
+      },
+      {
+        id: 'customers',
+        label: 'Nouveaux clients',
+        value: '12',
+        trend: 'down',
+        trendValue: '-2',
+        icon: <Users className="h-5 w-5" />,
+        color: 'purple',
+      },
+      {
+        id: 'aov',
+        label: 'Panier moyen',
+        value: '€71.27',
+        trend: 'up',
+        trendValue: '+€5.30',
+        icon: <Activity className="h-5 w-5" />,
+        color: 'primary',
+      },
+    ]
+
+    const charts: DashboardChartConfig[] = [
+      {
+        id: 'sales-chart',
+        title: 'Ventes',
+        description: 'Ventes des 7 derniers jours',
+        chart: <MockChart title="Sales Chart" height={300} />,
+      },
+      {
+        id: 'categories',
+        title: 'Par catégorie',
+        description: 'Répartition des ventes',
+        chart: <MockChart title="Category Pie Chart" height={300} />,
+      },
+    ]
+
+    return (
+      <div className="min-h-screen bg-muted/30">
+        <header className="bg-background border-b px-6 py-4">
+          <div className="flex items-center justify-between">
+            <span className="font-bold text-xl">MyShop Admin</span>
+            <nav className="flex gap-4 text-sm">
+              <a href="#" className="text-foreground font-medium">Dashboard</a>
+              <a href="#" className="text-muted-foreground hover:text-foreground">Produits</a>
+              <a href="#" className="text-muted-foreground hover:text-foreground">Commandes</a>
+              <a href="#" className="text-muted-foreground hover:text-foreground">Clients</a>
+            </nav>
+          </div>
+        </header>
+        <main className="p-6">
+          <WakaDashboard
+            title="Tableau de bord"
+            description="Bienvenue ! Voici un aperçu de votre boutique."
+            stats={ecommerceStats}
+            charts={charts}
+            period="today"
+            periods={[
+              { value: 'today', label: "Aujourd'hui" },
+              { value: 'week', label: 'Cette semaine' },
+              { value: 'month', label: 'Ce mois' },
+            ]}
+            onPeriodChange={(period) => console.log('Period:', period)}
+            onRefresh={() => console.log('Refresh')}
+            quickActions={[
+              {
+                id: 'add-product',
+                label: 'Ajouter produit',
+                icon: <Plus className="h-4 w-4" />,
+                href: '/products/new',
+              },
+            ]}
+            LinkComponent={MockLink}
+          />
+        </main>
+      </div>
+    )
+  },
+}

package/src/blocks/dashboard/index.tsx

@@ -2,6 +2,7 @@
 
 import * as React from "react"
 import { cn } from "../../utils"
+import type { LinkComponentProps } from "../../types/link"
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "../../components/card"
 import { Button } from "../../components/button"
 import { Badge } from "../../components/badge"
@@ -119,6 +120,22 @@ export interface WakaDashboardProps {
   statsColumns?: 2 | 3 | 4
   /** Classes CSS additionnelles */
   className?: string
+  /** Composant de lien personnalisé (ex: next/link) pour navigation SPA */
+  LinkComponent?: React.ComponentType<LinkComponentProps>
+}
+
+// ============================================
+// CONTEXT
+// ============================================
+
+interface DashboardContextValue {
+  LinkComponent?: React.ComponentType<LinkComponentProps>
+}
+
+const DashboardContext = React.createContext<DashboardContextValue>({})
+
+function useDashboardContext() {
+  return React.useContext(DashboardContext)
 }
 
 // ============================================
@@ -196,27 +213,37 @@ function DashboardHeader({
         )}
 
         {/* Actions rapides */}
-        {quickActions?.map((action) => (
-          <Button
-            key={action.id}
-            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>
-        ))}
+        {quickActions?.map((action) => {
+          const { LinkComponent } = useDashboardContext()
+          return (
+            <Button
+              key={action.id}
+              variant={action.variant || "default"}
+              size="sm"
+              onClick={action.onClick}
+              asChild={!!action.href}
+            >
+              {action.href ? (
+                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>}
+                  {action.label}
+                </>
+              )}
+            </Button>
+          )
+        })}
       </div>
     </div>
   )
@@ -296,6 +323,8 @@ interface DashboardTableCardProps {
 }
 
 function DashboardTableCard({ config }: DashboardTableCardProps) {
+  const { LinkComponent } = useDashboardContext()
+
   return (
     <Card>
       <CardHeader className="flex flex-row items-center justify-between pb-2">
@@ -316,10 +345,17 @@ function DashboardTableCard({ config }: DashboardTableCardProps) {
                 asChild={!!action.href}
               >
                 {action.href ? (
-                  <a href={action.href}>
-                    {action.label}
-                    <ArrowUpRight className="ml-1 h-3 w-3" />
-                  </a>
+                  LinkComponent ? (
+                    <LinkComponent href={action.href}>
+                      {action.label}
+                      <ArrowUpRight className="ml-1 h-3 w-3" />
+                    </LinkComponent>
+                  ) : (
+                    <a href={action.href}>
+                      {action.label}
+                      <ArrowUpRight className="ml-1 h-3 w-3" />
+                    </a>
+                  )
                 ) : (
                   action.label
                 )}
@@ -415,9 +451,13 @@ export function WakaDashboard({
   statsLayout = "grid",
   statsColumns = 4,
   className,
+  LinkComponent,
 }: WakaDashboardProps) {
+  const contextValue = React.useMemo(() => ({ LinkComponent }), [LinkComponent])
+
   return (
-    <div className={cn("space-y-6", className)}>
+    <DashboardContext.Provider value={contextValue}>
+      <div className={cn("space-y-6", className)}>
       {/* Header */}
       {showHeader && (
         <DashboardHeader
@@ -469,7 +509,8 @@ export function WakaDashboard({
           </div>
         )}
       </div>
-    </div>
+      </div>
+    </DashboardContext.Provider>
   )
 }