@wakastellar/ui 2.4.0 → 3.1.0

package/src/components/waka-invoice-preview/WakaInvoicePreview.stories.tsx

@@ -0,0 +1,169 @@
+import type { Meta, StoryObj } from "@storybook/react"
+import { WakaInvoicePreview, type Address, type CompanyInfo, type InvoiceStatus } from "./index"
+
+const meta: Meta<typeof WakaInvoicePreview> = {
+  title: "E-commerce/WakaInvoicePreview",
+  component: WakaInvoicePreview,
+  parameters: {
+    layout: "padded",
+  },
+  tags: ["autodocs"],
+  argTypes: {
+    status: {
+      control: "select",
+      options: ["paid", "pending", "overdue", "draft"],
+      description: "Statut de la facture",
+    },
+    showDownload: {
+      control: "boolean",
+      description: "Afficher le bouton télécharger",
+    },
+    showPrint: {
+      control: "boolean",
+      description: "Afficher le bouton imprimer",
+    },
+    currency: {
+      control: "select",
+      options: ["EUR", "USD", "GBP"],
+      description: "Devise",
+    },
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof WakaInvoicePreview>
+
+const companyInfo: CompanyInfo = {
+  name: "WakaStart SAS",
+  logo: "https://via.placeholder.com/150x50?text=Logo",
+  address: {
+    name: "WakaStart SAS",
+    street1: "123 Avenue de la Tech",
+    city: "Paris",
+    postalCode: "75001",
+    country: "France",
+  },
+  email: "contact@wakastart.com",
+}
+
+const customerAddress: Address = {
+  name: "Client Entreprise",
+  street1: "456 Rue du Commerce",
+  city: "Lyon",
+  postalCode: "69001",
+  country: "France",
+}
+
+const invoiceItems = [
+  { description: "Licence Pro - Annuel", quantity: 1, unitPrice: 599, total: 599 },
+  { description: "Support Premium", quantity: 1, unitPrice: 199, total: 199 },
+  { description: "Formation (heures)", quantity: 4, unitPrice: 100, total: 400 },
+]
+
+export const Default: Story = {
+  args: {
+    invoiceNumber: "INV-2024-001",
+    date: new Date("2024-01-15"),
+    dueDate: new Date("2024-02-15"),
+    status: "pending",
+    company: companyInfo,
+    customer: customerAddress,
+    items: invoiceItems,
+    subtotal: 1198,
+    tax: 239.6,
+    total: 1437.6,
+    currency: "EUR",
+    showDownload: true,
+    showPrint: true,
+  },
+  render: (args) => (
+    <div style={{ maxWidth: 800 }}>
+      <WakaInvoicePreview {...args} />
+    </div>
+  ),
+}
+
+export const Paid: Story = {
+  args: {
+    invoiceNumber: "INV-2024-002",
+    date: new Date("2024-01-01"),
+    dueDate: new Date("2024-01-31"),
+    paidDate: new Date("2024-01-25"),
+    status: "paid",
+    company: companyInfo,
+    customer: customerAddress,
+    items: invoiceItems,
+    subtotal: 1198,
+    tax: 239.6,
+    total: 1437.6,
+    currency: "EUR",
+  },
+  render: (args) => (
+    <div style={{ maxWidth: 800 }}>
+      <WakaInvoicePreview {...args} />
+    </div>
+  ),
+}
+
+export const Overdue: Story = {
+  args: {
+    invoiceNumber: "INV-2023-099",
+    date: new Date("2023-11-01"),
+    dueDate: new Date("2023-12-01"),
+    status: "overdue",
+    company: companyInfo,
+    customer: customerAddress,
+    items: invoiceItems,
+    subtotal: 1198,
+    tax: 239.6,
+    total: 1437.6,
+    currency: "EUR",
+  },
+  render: (args) => (
+    <div style={{ maxWidth: 800 }}>
+      <WakaInvoicePreview {...args} />
+    </div>
+  ),
+}
+
+export const Draft: Story = {
+  args: {
+    invoiceNumber: "DRAFT-001",
+    date: new Date(),
+    status: "draft",
+    company: companyInfo,
+    customer: customerAddress,
+    items: invoiceItems.slice(0, 2),
+    subtotal: 798,
+    tax: 159.6,
+    total: 957.6,
+    currency: "EUR",
+  },
+  render: (args) => (
+    <div style={{ maxWidth: 800 }}>
+      <WakaInvoicePreview {...args} />
+    </div>
+  ),
+}
+
+export const USDCurrency: Story = {
+  args: {
+    invoiceNumber: "INV-US-001",
+    date: new Date(),
+    dueDate: new Date(Date.now() + 30 * 24 * 60 * 60 * 1000),
+    status: "pending",
+    company: { ...companyInfo, name: "WakaStart Inc." },
+    customer: { ...customerAddress, country: "United States" },
+    items: invoiceItems.map(i => ({ ...i, unitPrice: i.unitPrice * 1.1, total: i.total * 1.1 })),
+    subtotal: 1317.8,
+    tax: 0,
+    total: 1317.8,
+    currency: "USD",
+  },
+  render: (args) => (
+    <div style={{ maxWidth: 800 }}>
+      <WakaInvoicePreview {...args} />
+    </div>
+  ),
+}
+

package/src/components/waka-kpi-dashboard/WakaKpiDashboard.stories.tsx

@@ -0,0 +1,46 @@
+import type { Meta, StoryObj } from "@storybook/react"
+import { WakaKPIDashboard, type KPIData } from "./index"
+
+const meta: Meta<typeof WakaKPIDashboard> = {
+  title: "DevOps/WakaKpiDashboard",
+  component: WakaKPIDashboard,
+  parameters: { layout: "padded" },
+  tags: ["autodocs"],
+  argTypes: {
+    columns: { control: { type: "number", min: 1, max: 6 }, description: "Nombre de colonnes" },
+    showSparklines: { control: "boolean", description: "Afficher les sparklines" },
+    draggable: { control: "boolean", description: "KPIs réorganisables" },
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof WakaKPIDashboard>
+
+const kpis: KPIData[] = [
+  { id: "revenue", title: "Revenu", value: "€45,231", trend: "up", trendValue: "+12.5%", sparkline: [30, 40, 35, 50, 49, 60, 70] },
+  { id: "users", title: "Utilisateurs actifs", value: "2,350", trend: "up", trendValue: "+5.2%", sparkline: [100, 120, 110, 130, 140, 145, 150] },
+  { id: "conversion", title: "Taux de conversion", value: "3.2%", previousValue: "2.8%", trend: "up", trendValue: "+0.4%" },
+  { id: "bounce", title: "Taux de rebond", value: "42%", trend: "down", trendValue: "-3.1%", sparkline: [50, 48, 46, 45, 44, 43, 42] },
+  { id: "latency", title: "Latence moyenne", value: "45ms", trend: "down", trendValue: "-15ms" },
+  { id: "uptime", title: "Uptime", value: "99.98%", trend: "stable", trendValue: "0%" },
+]
+
+export const Default: Story = {
+  args: { kpis, columns: 3, showSparklines: true },
+  render: (args) => <WakaKPIDashboard {...args} />,
+}
+
+export const TwoColumns: Story = {
+  args: { kpis: kpis.slice(0, 4), columns: 2, showSparklines: true },
+  render: (args) => <WakaKPIDashboard {...args} />,
+}
+
+export const Draggable: Story = {
+  args: { kpis, columns: 3, showSparklines: true, draggable: true },
+  render: (args) => <WakaKPIDashboard {...args} />,
+}
+
+export const NoSparklines: Story = {
+  args: { kpis, columns: 4, showSparklines: false },
+  render: (args) => <WakaKPIDashboard {...args} />,
+}

package/src/components/waka-level-progress/WakaLevelProgress.stories.tsx

@@ -15,29 +15,33 @@ const meta: Meta<typeof WakaLevelProgress> = {
   },
   tags: ['autodocs'],
   argTypes: {
-    level: {
+    currentLevel: {
       control: { type: 'number', min: 1, max: 100 },
       description: 'Current level',
     },
-    progress: {
-      control: { type: 'range', min: 0, max: 100, step: 1 },
-      description: 'Progress to next level (0-100)',
+    currentXp: {
+      control: { type: 'range', min: 0, max: 5000, step: 100 },
+      description: 'Current XP amount',
+    },
+    xpForNextLevel: {
+      control: { type: 'range', min: 1000, max: 10000, step: 500 },
+      description: 'XP required for next level',
     },
     theme: {
       control: 'select',
-      options: ['default', 'gold', 'silver', 'bronze', 'emerald', 'ruby'],
+      options: ['default', 'gold', 'purple', 'green', 'blue'],
       description: 'Color theme',
     },
     size: {
       control: 'select',
-      options: ['sm', 'md', 'lg'],
+      options: ['sm', 'default', 'lg'],
       description: 'Size variant',
     },
-    showMilestones: {
+    showXpNumbers: {
       control: 'boolean',
-      description: 'Show milestone markers',
+      description: 'Show XP numbers',
     },
-    animated: {
+    animate: {
       control: 'boolean',
       description: 'Enable animations',
     },
@@ -49,12 +53,12 @@ type Story = StoryObj<typeof WakaLevelProgress>
 
 export const Default: Story = {
   args: {
-    level: 15,
-    progress: 65,
+    currentLevel: 15,
+    currentXp: 650,
+    xpForNextLevel: 1000,
     theme: 'default',
-    size: 'md',
-    showMilestones: false,
-    animated: true,
+    size: 'default',
+    animate: true,
   },
   render: (args) => (
     <div className="w-[350px]">
@@ -68,27 +72,23 @@ export const Themes: Story = {
     <div className="w-[350px] space-y-6">
       <div>
         <p className="text-sm text-muted-foreground mb-2">Default</p>
-        <WakaLevelProgress level={10} progress={50} theme="default" />
+        <WakaLevelProgress currentLevel={10} currentXp={500} xpForNextLevel={1000} theme="default" />
       </div>
       <div>
         <p className="text-sm text-muted-foreground mb-2">Gold</p>
-        <WakaLevelProgress level={25} progress={75} theme="gold" />
-      </div>
-      <div>
-        <p className="text-sm text-muted-foreground mb-2">Silver</p>
-        <WakaLevelProgress level={15} progress={40} theme="silver" />
+        <WakaLevelProgress currentLevel={25} currentXp={750} xpForNextLevel={1000} theme="gold" />
       </div>
       <div>
-        <p className="text-sm text-muted-foreground mb-2">Bronze</p>
-        <WakaLevelProgress level={5} progress={60} theme="bronze" />
+        <p className="text-sm text-muted-foreground mb-2">Purple</p>
+        <WakaLevelProgress currentLevel={15} currentXp={400} xpForNextLevel={1000} theme="purple" />
       </div>
       <div>
-        <p className="text-sm text-muted-foreground mb-2">Emerald</p>
-        <WakaLevelProgress level={30} progress={85} theme="emerald" />
+        <p className="text-sm text-muted-foreground mb-2">Green</p>
+        <WakaLevelProgress currentLevel={30} currentXp={850} xpForNextLevel={1000} theme="green" />
       </div>
       <div>
-        <p className="text-sm text-muted-foreground mb-2">Ruby</p>
-        <WakaLevelProgress level={50} progress={30} theme="ruby" />
+        <p className="text-sm text-muted-foreground mb-2">Blue</p>
+        <WakaLevelProgress currentLevel={50} currentXp={300} xpForNextLevel={1000} theme="blue" />
       </div>
     </div>
   ),
@@ -99,15 +99,15 @@ export const Sizes: Story = {
     <div className="w-[400px] space-y-6">
       <div>
         <p className="text-sm text-muted-foreground mb-2">Small</p>
-        <WakaLevelProgress level={8} progress={45} size="sm" />
+        <WakaLevelProgress currentLevel={8} currentXp={450} xpForNextLevel={1000} size="sm" />
       </div>
       <div>
-        <p className="text-sm text-muted-foreground mb-2">Medium (Default)</p>
-        <WakaLevelProgress level={15} progress={60} size="md" />
+        <p className="text-sm text-muted-foreground mb-2">Default</p>
+        <WakaLevelProgress currentLevel={15} currentXp={600} xpForNextLevel={1000} size="default" />
       </div>
       <div>
         <p className="text-sm text-muted-foreground mb-2">Large</p>
-        <WakaLevelProgress level={25} progress={80} size="lg" />
+        <WakaLevelProgress currentLevel={25} currentXp={800} xpForNextLevel={1000} size="lg" />
       </div>
     </div>
   ),
@@ -118,11 +118,20 @@ export const WithMilestones: Story = {
     <div className="w-[400px] space-y-6">
       <div>
         <p className="text-sm text-muted-foreground mb-2">With Milestones</p>
-        <WakaLevelProgress level={12} progress={70} showMilestones />
+        <WakaLevelProgress 
+          currentLevel={12} 
+          currentXp={700} 
+          xpForNextLevel={1000} 
+          milestones={[
+            { level: 10, label: 'Bronze', icon: '🥉' },
+            { level: 25, label: 'Silver', icon: '🥈' },
+            { level: 50, label: 'Gold', icon: '🥇' },
+          ]}
+        />
       </div>
       <div>
         <p className="text-sm text-muted-foreground mb-2">Without Milestones</p>
-        <WakaLevelProgress level={12} progress={70} showMilestones={false} />
+        <WakaLevelProgress currentLevel={12} currentXp={700} xpForNextLevel={1000} />
       </div>
     </div>
   ),
@@ -133,23 +142,23 @@ export const ProgressStages: Story = {
     <div className="w-[400px] space-y-6">
       <div>
         <p className="text-sm text-muted-foreground mb-2">Just Started (10%)</p>
-        <WakaLevelProgress level={1} progress={10} theme="bronze" />
+        <WakaLevelProgress currentLevel={1} currentXp={100} xpForNextLevel={1000} theme="default" />
       </div>
       <div>
         <p className="text-sm text-muted-foreground mb-2">Quarter Way (25%)</p>
-        <WakaLevelProgress level={5} progress={25} theme="silver" />
+        <WakaLevelProgress currentLevel={5} currentXp={250} xpForNextLevel={1000} theme="purple" />
       </div>
       <div>
         <p className="text-sm text-muted-foreground mb-2">Halfway (50%)</p>
-        <WakaLevelProgress level={10} progress={50} theme="default" />
+        <WakaLevelProgress currentLevel={10} currentXp={500} xpForNextLevel={1000} theme="blue" />
       </div>
       <div>
         <p className="text-sm text-muted-foreground mb-2">Almost There (90%)</p>
-        <WakaLevelProgress level={24} progress={90} theme="gold" />
+        <WakaLevelProgress currentLevel={24} currentXp={900} xpForNextLevel={1000} theme="gold" />
       </div>
       <div>
         <p className="text-sm text-muted-foreground mb-2">Max Level</p>
-        <WakaLevelProgress level={100} progress={100} theme="emerald" />
+        <WakaLevelProgress currentLevel={100} currentXp={1000} xpForNextLevel={1000} theme="green" />
       </div>
     </div>
   ),
@@ -158,31 +167,38 @@ export const ProgressStages: Story = {
 export const Interactive: Story = {
   render: () => {
     const [level, setLevel] = React.useState(5)
-    const [progress, setProgress] = React.useState(30)
+    const [xp, setXp] = React.useState(300)
+    const xpForNextLevel = 1000
 
     const gainXP = () => {
-      const newProgress = progress + 15
-      if (newProgress >= 100) {
+      const newXp = xp + 150
+      if (newXp >= xpForNextLevel) {
         setLevel((prev) => prev + 1)
-        setProgress(newProgress - 100)
+        setXp(newXp - xpForNextLevel)
       } else {
-        setProgress(newProgress)
+        setXp(newXp)
       }
     }
 
     return (
       <div className="w-[400px] space-y-4">
-        <WakaLevelProgress level={level} progress={progress} theme="gold" showMilestones animated />
+        <WakaLevelProgress 
+          currentLevel={level} 
+          currentXp={xp} 
+          xpForNextLevel={xpForNextLevel} 
+          theme="gold" 
+          animate 
+        />
 
         <div className="flex gap-2">
           <button
             onClick={gainXP}
             className="flex-1 px-4 py-2 rounded-lg bg-amber-500 text-white font-medium hover:bg-amber-600"
           >
-            Gain XP (+15%)
+            Gain XP (+150)
           </button>
           <button
-            onClick={() => { setLevel(5); setProgress(30) }}
+            onClick={() => { setLevel(5); setXp(300) }}
             className="px-4 py-2 rounded-lg border font-medium hover:bg-muted"
           >
             Reset
@@ -190,7 +206,7 @@ export const Interactive: Story = {
         </div>
 
         <p className="text-sm text-muted-foreground text-center">
-          Level {level} • {progress}% to next level
+          Level {level} • {xp} / {xpForNextLevel} XP ({Math.round((xp / xpForNextLevel) * 100)}%)
         </p>
       </div>
     )
@@ -200,50 +216,53 @@ export const Interactive: Story = {
 export const WithHook: Story = {
   render: () => {
     const {
-      level,
-      progress,
-      addProgress,
-      levelUp,
+      currentLevel,
+      currentXp,
+      xpForNextLevel,
+      addXp,
       reset,
-      canLevelUp,
-      progressToNextLevel,
+      progressPercent,
     } = useLevelProgress({
-      initialLevel: 10,
-      initialProgress: 45,
+      initialXp: 9450, // Level 10 + 450 XP (9 full levels * 1000 + 450)
+      xpPerLevel: 1000,
     })
 
     return (
       <div className="w-[400px] space-y-4">
-        <WakaLevelProgress level={level} progress={progress} theme="emerald" showMilestones />
+        <WakaLevelProgress 
+          currentLevel={currentLevel} 
+          currentXp={currentXp} 
+          xpForNextLevel={xpForNextLevel} 
+          theme="green" 
+        />
 
         <div className="grid grid-cols-2 gap-4 text-center">
           <div className="p-3 rounded-lg border">
-            <p className="text-2xl font-bold">{level}</p>
+            <p className="text-2xl font-bold">{currentLevel}</p>
             <p className="text-xs text-muted-foreground">Current Level</p>
           </div>
           <div className="p-3 rounded-lg border">
-            <p className="text-2xl font-bold">{progressToNextLevel}%</p>
+            <p className="text-2xl font-bold">{Math.round(progressPercent)}%</p>
             <p className="text-xs text-muted-foreground">To Next Level</p>
           </div>
         </div>
 
         <div className="flex gap-2 flex-wrap">
           <button
-            onClick={() => addProgress(10)}
+            onClick={() => addXp(100)}
             className="px-3 py-1.5 text-sm rounded bg-green-500 text-white hover:bg-green-600"
           >
-            +10%
+            +100 XP
           </button>
           <button
-            onClick={() => addProgress(25)}
+            onClick={() => addXp(250)}
             className="px-3 py-1.5 text-sm rounded bg-blue-500 text-white hover:bg-blue-600"
           >
-            +25%
+            +250 XP
           </button>
           <button
-            onClick={levelUp}
-            disabled={!canLevelUp}
-            className="px-3 py-1.5 text-sm rounded bg-amber-500 text-white hover:bg-amber-600 disabled:opacity-50"
+            onClick={() => addXp(xpForNextLevel - currentXp)}
+            className="px-3 py-1.5 text-sm rounded bg-amber-500 text-white hover:bg-amber-600"
           >
             Level Up
           </button>
@@ -272,33 +291,33 @@ export const RankSystem: Story = {
             <p className="text-xs text-muted-foreground">Elite Player</p>
           </div>
         </div>
-        <WakaLevelProgress level={25} progress={78} theme="gold" showMilestones />
+        <WakaLevelProgress currentLevel={25} currentXp={780} xpForNextLevel={1000} theme="gold" />
       </div>
 
-      <div className="p-4 rounded-xl border bg-gradient-to-r from-slate-900/20 to-gray-900/20">
+      <div className="p-4 rounded-xl border bg-gradient-to-r from-purple-900/20 to-violet-900/20">
         <div className="flex items-center gap-3 mb-3">
-          <div className="w-10 h-10 rounded-full bg-gradient-to-br from-slate-400 to-gray-600 flex items-center justify-center">
-            <span className="text-white font-bold text-sm">S</span>
+          <div className="w-10 h-10 rounded-full bg-gradient-to-br from-purple-400 to-violet-600 flex items-center justify-center">
+            <span className="text-white font-bold text-sm">P</span>
           </div>
           <div>
-            <p className="font-bold text-slate-400">Silver Rank</p>
+            <p className="font-bold text-purple-400">Purple Rank</p>
             <p className="text-xs text-muted-foreground">Skilled Player</p>
           </div>
         </div>
-        <WakaLevelProgress level={15} progress={45} theme="silver" showMilestones />
+        <WakaLevelProgress currentLevel={15} currentXp={450} xpForNextLevel={1000} theme="purple" />
       </div>
 
-      <div className="p-4 rounded-xl border bg-gradient-to-r from-orange-900/20 to-amber-900/20">
+      <div className="p-4 rounded-xl border bg-gradient-to-r from-blue-900/20 to-cyan-900/20">
         <div className="flex items-center gap-3 mb-3">
-          <div className="w-10 h-10 rounded-full bg-gradient-to-br from-orange-500 to-amber-700 flex items-center justify-center">
+          <div className="w-10 h-10 rounded-full bg-gradient-to-br from-blue-500 to-cyan-700 flex items-center justify-center">
             <span className="text-white font-bold text-sm">B</span>
           </div>
           <div>
-            <p className="font-bold text-orange-500">Bronze Rank</p>
+            <p className="font-bold text-blue-500">Blue Rank</p>
             <p className="text-xs text-muted-foreground">Rising Player</p>
           </div>
         </div>
-        <WakaLevelProgress level={5} progress={20} theme="bronze" showMilestones />
+        <WakaLevelProgress currentLevel={5} currentXp={200} xpForNextLevel={1000} theme="blue" />
       </div>
     </div>
   ),
@@ -307,7 +326,7 @@ export const RankSystem: Story = {
 export const NoAnimation: Story = {
   render: () => (
     <div className="w-[350px]">
-      <WakaLevelProgress level={15} progress={65} animated={false} />
+      <WakaLevelProgress currentLevel={15} currentXp={650} xpForNextLevel={1000} animate={false} />
     </div>
   ),
 }

package/src/components/waka-liquid-button/WakaLiquidButton.stories.tsx

@@ -0,0 +1,45 @@
+import type { Meta, StoryObj } from "@storybook/react"
+import { WakaLiquidButton } from "./index"
+
+const meta: Meta<typeof WakaLiquidButton> = {
+  title: "UI/WakaLiquidButton",
+  component: WakaLiquidButton,
+  parameters: { layout: "centered" },
+  tags: ["autodocs"],
+  argTypes: {
+    variant: { control: "select", options: ["default", "secondary", "destructive", "success", "gradient", "neon"], description: "Variante" },
+    size: { control: "select", options: ["sm", "default", "lg", "xl"], description: "Taille" },
+    liquidEffect: { control: "boolean", description: "Effet liquide" },
+    liquidIntensity: { control: { type: "range", min: 0, max: 1, step: 0.1 }, description: "Intensité" },
+    liquidSpeed: { control: "number", description: "Vitesse (ms)" },
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof WakaLiquidButton>
+
+export const Default: Story = {
+  args: { children: "Liquid Button", variant: "default", size: "default", liquidEffect: true },
+  render: (args) => <WakaLiquidButton {...args} />,
+}
+
+export const Gradient: Story = {
+  args: { children: "Gradient Effect", variant: "gradient", size: "lg", liquidEffect: true, liquidIntensity: 0.8 },
+  render: (args) => <WakaLiquidButton {...args} />,
+}
+
+export const Neon: Story = {
+  args: { children: "Neon Glow", variant: "neon", size: "lg", liquidEffect: true },
+  render: (args) => <WakaLiquidButton {...args} />,
+}
+
+export const Success: Story = {
+  args: { children: "Success", variant: "success", liquidEffect: true },
+  render: (args) => <WakaLiquidButton {...args} />,
+}
+
+export const NoEffect: Story = {
+  args: { children: "Sans effet", variant: "default", liquidEffect: false },
+  render: (args) => <WakaLiquidButton {...args} />,
+}
+

package/src/components/waka-magic-link/WakaMagicLink.stories.tsx

@@ -0,0 +1,61 @@
+import type { Meta, StoryObj } from "@storybook/react"
+import { WakaMagicLink } from "./index"
+
+const meta: Meta<typeof WakaMagicLink> = {
+  title: "Security/WakaMagicLink",
+  component: WakaMagicLink,
+  parameters: { layout: "centered" },
+  tags: ["autodocs"],
+  argTypes: {
+    placeholder: { control: "text", description: "Placeholder de l'email" },
+    countdownDuration: { control: "number", description: "Durée avant renvoi (sec)" },
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof WakaMagicLink>
+
+const mockSubmit = async (email: string) => {
+  await new Promise(r => setTimeout(r, 1500))
+  console.log("Magic link sent to:", email)
+}
+
+export const Default: Story = {
+  args: {
+    placeholder: "Entrez votre email",
+    buttonText: { idle: "Envoyer le lien magique", loading: "Envoi...", sent: "Lien envoyé !" },
+    successMessage: "Un lien de connexion a été envoyé à votre email",
+    countdownDuration: 60,
+  },
+  render: (args) => (
+    <div style={{ width: 350 }}>
+      <WakaMagicLink {...args} onSubmit={mockSubmit} />
+    </div>
+  ),
+}
+
+export const CustomText: Story = {
+  args: {
+    placeholder: "votre@email.com",
+    buttonText: { idle: "Connexion sans mot de passe", loading: "Patientez...", sent: "Email envoyé" },
+    successMessage: "Vérifiez votre boîte mail",
+  },
+  render: (args) => (
+    <div style={{ width: 350 }}>
+      <WakaMagicLink {...args} onSubmit={mockSubmit} />
+    </div>
+  ),
+}
+
+export const NoCountdown: Story = {
+  args: {
+    placeholder: "Email",
+    countdownDuration: 0,
+  },
+  render: (args) => (
+    <div style={{ width: 350 }}>
+      <WakaMagicLink {...args} onSubmit={mockSubmit} />
+    </div>
+  ),
+}
+