@wakastellar/ui 2.4.0 → 3.1.0

package/src/components/waka-chat-bubble/WakaChatBubble.stories.tsx

@@ -0,0 +1,118 @@
+import type { Meta, StoryObj } from "@storybook/react"
+import { WakaChatBubble } from "./index"
+
+const meta: Meta<typeof WakaChatBubble> = {
+  title: "Communication/WakaChatBubble",
+  component: WakaChatBubble,
+  parameters: {
+    layout: "centered",
+  },
+  tags: ["autodocs"],
+  argTypes: {
+    message: {
+      control: "text",
+      description: "Le contenu du message",
+    },
+    variant: {
+      control: "select",
+      options: ["sent", "received"],
+      description: "Variante du bubble (envoyé/reçu)",
+    },
+    status: {
+      control: "select",
+      options: ["sending", "sent", "delivered", "read", "failed"],
+      description: "Statut du message",
+    },
+    timestamp: {
+      control: "date",
+      description: "Horodatage du message",
+    },
+    showAvatar: {
+      control: "boolean",
+      description: "Afficher l'avatar",
+    },
+    showStatus: {
+      control: "boolean",
+      description: "Afficher le statut",
+    },
+    showTimestamp: {
+      control: "boolean",
+      description: "Afficher l'horodatage",
+    },
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof WakaChatBubble>
+
+export const Default: Story = {
+  args: {
+    message: "Bonjour ! Comment ça va ?",
+    variant: "received",
+    status: "read",
+    timestamp: new Date(),
+    showAvatar: true,
+    showStatus: true,
+    showTimestamp: true,
+    sender: {
+      id: "1",
+      name: "Alice",
+      avatar: "https://i.pravatar.cc/150?u=alice",
+    },
+  },
+  render: (args) => <WakaChatBubble {...args} />,
+}
+
+export const Sent: Story = {
+  args: {
+    message: "Je vais bien, merci !",
+    variant: "sent",
+    status: "delivered",
+    timestamp: new Date(),
+    showStatus: true,
+    showTimestamp: true,
+  },
+  render: (args) => <WakaChatBubble {...args} />,
+}
+
+export const WithReactions: Story = {
+  args: {
+    message: "Super nouvelle ! 🎉",
+    variant: "received",
+    status: "read",
+    timestamp: new Date(),
+    reactions: [
+      { emoji: "👍", count: 3, users: ["Alice", "Bob", "Charlie"], reacted: true },
+      { emoji: "❤️", count: 2, users: ["David", "Eve"], reacted: false },
+    ],
+    sender: {
+      id: "2",
+      name: "Bob",
+      avatar: "https://i.pravatar.cc/150?u=bob",
+    },
+  },
+  render: (args) => <WakaChatBubble {...args} />,
+}
+
+export const Failed: Story = {
+  args: {
+    message: "Ce message a échoué",
+    variant: "sent",
+    status: "failed",
+    timestamp: new Date(),
+    showStatus: true,
+  },
+  render: (args) => <WakaChatBubble {...args} />,
+}
+
+export const Sending: Story = {
+  args: {
+    message: "Envoi en cours...",
+    variant: "sent",
+    status: "sending",
+    timestamp: new Date(),
+    showStatus: true,
+  },
+  render: (args) => <WakaChatBubble {...args} />,
+}
+

package/src/components/waka-checklist/WakaChecklist.stories.tsx

@@ -0,0 +1,71 @@
+import type { Meta, StoryObj } from "@storybook/react"
+import { WakaChecklist, type ChecklistTask } from "./index"
+
+const meta: Meta<typeof WakaChecklist> = {
+  title: "Admin/WakaChecklist",
+  component: WakaChecklist,
+  parameters: { layout: "centered" },
+  tags: ["autodocs"],
+  argTypes: {
+    showProgress: { control: "boolean", description: "Afficher la progression" },
+    showSkip: { control: "boolean", description: "Permettre de passer" },
+    collapsible: { control: "boolean", description: "Sections réductibles" },
+    celebrateOnComplete: { control: "boolean", description: "Animation de fin" },
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof WakaChecklist>
+
+const tasks: ChecklistTask[] = [
+  { id: "1", title: "Créer un compte", description: "Inscrivez-vous avec votre email", status: "completed" },
+  { id: "2", title: "Configurer le profil", description: "Ajoutez votre photo et bio", status: "completed" },
+  { id: "3", title: "Connecter un service", description: "Liez GitHub ou GitLab", status: "pending" },
+  { id: "4", title: "Inviter des collaborateurs", description: "Ajoutez votre équipe", status: "pending" },
+  { id: "5", title: "Créer le premier projet", description: "Démarrez votre aventure", status: "pending" },
+]
+
+export const Default: Story = {
+  args: { tasks, showProgress: true, showSkip: true },
+  render: (args) => (
+    <div style={{ width: 400 }}>
+      <WakaChecklist {...args} />
+    </div>
+  ),
+}
+
+export const AllCompleted: Story = {
+  args: { tasks: tasks.map(t => ({ ...t, status: "completed" as const })), showProgress: true, celebrateOnComplete: true },
+  render: (args) => (
+    <div style={{ width: 400 }}>
+      <WakaChecklist {...args} />
+    </div>
+  ),
+}
+
+export const WithSkipped: Story = {
+  args: {
+    tasks: [
+      { ...tasks[0], status: "completed" as const },
+      { ...tasks[1], status: "skipped" as const },
+      { ...tasks[2], status: "pending" as const },
+    ],
+    showProgress: true,
+    showSkip: true,
+  },
+  render: (args) => (
+    <div style={{ width: 400 }}>
+      <WakaChecklist {...args} />
+    </div>
+  ),
+}
+
+export const Compact: Story = {
+  args: { tasks: tasks.slice(0, 3), showProgress: false, showSkip: false },
+  render: (args) => (
+    <div style={{ width: 350 }}>
+      <WakaChecklist {...args} />
+    </div>
+  ),
+}
+

package/src/components/waka-checkout-stepper/WakaCheckoutStepper.stories.tsx

@@ -0,0 +1,102 @@
+import type { Meta, StoryObj } from "@storybook/react"
+import { WakaCheckoutStepper, type CheckoutStep } from "./index"
+import { useState } from "react"
+
+const meta: Meta<typeof WakaCheckoutStepper> = {
+  title: "E-commerce/WakaCheckoutStepper",
+  component: WakaCheckoutStepper,
+  parameters: {
+    layout: "padded",
+  },
+  tags: ["autodocs"],
+  argTypes: {
+    currentStep: {
+      control: { type: "number", min: 0, max: 4 },
+      description: "Index de l'étape courante",
+    },
+    orientation: {
+      control: "select",
+      options: ["horizontal", "vertical"],
+      description: "Orientation du stepper",
+    },
+    showStepContent: {
+      control: "boolean",
+      description: "Afficher le contenu des étapes",
+    },
+    allowNavigation: {
+      control: "boolean",
+      description: "Permettre la navigation entre étapes",
+    },
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof WakaCheckoutStepper>
+
+const checkoutSteps: CheckoutStep[] = [
+  { id: "cart", title: "Panier", description: "Vérifiez vos articles" },
+  { id: "shipping", title: "Livraison", description: "Adresse de livraison" },
+  { id: "payment", title: "Paiement", description: "Mode de paiement" },
+  { id: "review", title: "Confirmation", description: "Vérifiez votre commande" },
+]
+
+export const Default: Story = {
+  args: {
+    steps: checkoutSteps,
+    currentStep: 1,
+    orientation: "horizontal",
+  },
+  render: (args) => <WakaCheckoutStepper {...args} />,
+}
+
+export const Vertical: Story = {
+  args: {
+    steps: checkoutSteps,
+    currentStep: 2,
+    orientation: "vertical",
+  },
+  render: (args) => (
+    <div style={{ maxHeight: 400 }}>
+      <WakaCheckoutStepper {...args} />
+    </div>
+  ),
+}
+
+export const FirstStep: Story = {
+  args: {
+    steps: checkoutSteps,
+    currentStep: 0,
+    orientation: "horizontal",
+  },
+  render: (args) => <WakaCheckoutStepper {...args} />,
+}
+
+export const LastStep: Story = {
+  args: {
+    steps: checkoutSteps,
+    currentStep: 3,
+    orientation: "horizontal",
+  },
+  render: (args) => <WakaCheckoutStepper {...args} />,
+}
+
+export const WithError: Story = {
+  args: {
+    steps: checkoutSteps.map((step, i) => 
+      i === 2 ? { ...step, status: "error" as const } : step
+    ),
+    currentStep: 2,
+    orientation: "horizontal",
+  },
+  render: (args) => <WakaCheckoutStepper {...args} />,
+}
+
+export const AllCompleted: Story = {
+  args: {
+    steps: checkoutSteps.map(step => ({ ...step, status: "completed" as const })),
+    currentStep: 4,
+    orientation: "horizontal",
+  },
+  render: (args) => <WakaCheckoutStepper {...args} />,
+}
+

package/src/components/waka-cohort-table/WakaCohortTable.stories.tsx

@@ -0,0 +1,56 @@
+import type { Meta, StoryObj } from "@storybook/react"
+import { WakaCohortTable, type CohortRow } from "./index"
+
+const meta: Meta<typeof WakaCohortTable> = {
+  title: "Admin/WakaCohortTable",
+  component: WakaCohortTable,
+  parameters: { layout: "padded" },
+  tags: ["autodocs"],
+  argTypes: {
+    metric: { control: "select", options: ["retention", "churn", "revenue", "engagement"], description: "Métrique" },
+    period: { control: "select", options: ["day", "week", "month", "quarter"], description: "Période" },
+    showExport: { control: "boolean", description: "Exporter" },
+    colorScale: { control: "select", options: ["green", "blue", "purple", "red"], description: "Échelle de couleur" },
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof WakaCohortTable>
+
+const cohorts: CohortRow[] = [
+  { id: "jan", label: "Jan 2024", size: 1000, data: [{ value: 100 }, { value: 85 }, { value: 72 }, { value: 68 }, { value: 60 }] },
+  { id: "feb", label: "Fév 2024", size: 1200, data: [{ value: 100 }, { value: 82 }, { value: 70 }, { value: 65 }] },
+  { id: "mar", label: "Mar 2024", size: 950, data: [{ value: 100 }, { value: 88 }, { value: 75 }] },
+  { id: "apr", label: "Avr 2024", size: 1100, data: [{ value: 100 }, { value: 90 }] },
+  { id: "may", label: "Mai 2024", size: 1300, data: [{ value: 100 }] },
+]
+
+export const Default: Story = {
+  args: { cohorts, metric: "retention", period: "month", showExport: true },
+  render: (args) => <WakaCohortTable {...args} />,
+}
+
+export const ChurnMetric: Story = {
+  args: {
+    cohorts: cohorts.map(c => ({ ...c, data: c.data.map((d, i) => ({ value: i === 0 ? 0 : 100 - d.value })) })),
+    metric: "churn",
+    period: "month",
+    colorScale: "red",
+  },
+  render: (args) => <WakaCohortTable {...args} />,
+}
+
+export const WeeklyPeriod: Story = {
+  args: {
+    cohorts: cohorts.slice(0, 4).map((c, i) => ({ ...c, id: `w${i}`, label: `Semaine ${i + 1}` })),
+    metric: "retention",
+    period: "week",
+  },
+  render: (args) => <WakaCohortTable {...args} />,
+}
+
+export const CompactView: Story = {
+  args: { cohorts: cohorts.slice(0, 3), metric: "retention", showExport: false },
+  render: (args) => <WakaCohortTable {...args} />,
+}
+

package/src/components/waka-color-picker/WakaColorPicker.stories.tsx

@@ -1,41 +1,48 @@
-import type { Meta, StoryObj } from '@storybook/react'
-import { WakaColorPicker } from './index'
-import * as React from 'react'
+import type { Meta, StoryObj } from "@storybook/react"
+import { WakaColorPicker } from "./index"
+import { useState } from "react"
 
 const meta: Meta<typeof WakaColorPicker> = {
-  title: 'Components/Forms/WakaColorPicker',
+  title: "Forms/WakaColorPicker",
   component: WakaColorPicker,
   parameters: {
-    layout: 'centered',
-    docs: {
-      description: {
-        component: 'A color picker component with presets, EyeDropper support, and multiple formats.',
-      },
-    },
+    layout: "centered",
   },
-  tags: ['autodocs'],
+  tags: ["autodocs"],
   argTypes: {
+    value: {
+      control: "color",
+      description: "Valeur de la couleur",
+    },
     format: {
-      control: 'select',
-      options: ['hex', 'rgb', 'hsl'],
-      description: 'Color format',
+      control: "select",
+      options: ["hex", "rgb", "hsl"],
+      description: "Format de la couleur",
     },
-    size: {
-      control: 'select',
-      options: ['sm', 'md', 'lg'],
-      description: 'Size of the trigger button',
+    showAlpha: {
+      control: "boolean",
+      description: "Afficher le canal alpha",
     },
     showPresets: {
-      control: 'boolean',
-      description: 'Show preset colors',
+      control: "boolean",
+      description: "Afficher les couleurs prédéfinies",
     },
     showEyeDropper: {
-      control: 'boolean',
-      description: 'Show EyeDropper tool (if supported)',
+      control: "boolean",
+      description: "Afficher l'outil EyeDropper",
     },
     disabled: {
-      control: 'boolean',
-      description: 'Disable the picker',
+      control: "boolean",
+      description: "État désactivé",
+    },
+    placeholder: {
+      control: "text",
+      description: "Texte placeholder",
+    },
+    size: {
+      control: "select",
+      options: ["sm", "md", "lg"],
+      description: "Taille du composant",
     },
   },
 }
@@ -44,157 +51,94 @@ export default meta
 type Story = StoryObj<typeof WakaColorPicker>
 
 export const Default: Story = {
-  render: function ColorPickerDemo() {
-    const [color, setColor] = React.useState('#3b82f6')
-
-    return (
-      <div className="flex items-center gap-4">
-        <WakaColorPicker value={color} onChange={setColor} />
-        <span className="text-sm font-mono">{color}</span>
-      </div>
-    )
+  args: {
+    value: "#3b82f6",
+    format: "hex",
+    showPresets: true,
+    showEyeDropper: true,
+    size: "md",
   },
+  render: (args) => <WakaColorPicker {...args} />,
 }
 
-export const Sizes: Story = {
-  render: function SizesDemo() {
-    const [color, setColor] = React.useState('#ef4444')
-
-    return (
-      <div className="flex items-center gap-4">
-        <div className="text-center">
-          <WakaColorPicker value={color} onChange={setColor} size="sm" />
-          <p className="text-xs text-muted-foreground mt-1">Small</p>
-        </div>
-        <div className="text-center">
-          <WakaColorPicker value={color} onChange={setColor} size="md" />
-          <p className="text-xs text-muted-foreground mt-1">Medium</p>
-        </div>
-        <div className="text-center">
-          <WakaColorPicker value={color} onChange={setColor} size="lg" />
-          <p className="text-xs text-muted-foreground mt-1">Large</p>
-        </div>
-      </div>
-    )
+export const WithAlpha: Story = {
+  args: {
+    value: "rgba(59, 130, 246, 0.5)",
+    format: "rgb",
+    showAlpha: true,
+    showPresets: true,
   },
+  render: (args) => <WakaColorPicker {...args} />,
 }
 
-export const Formats: Story = {
-  render: function FormatsDemo() {
-    const [hexColor, setHexColor] = React.useState('#22c55e')
-    const [rgbColor, setRgbColor] = React.useState('rgb(34, 197, 94)')
-    const [hslColor, setHslColor] = React.useState('hsl(142, 71%, 45%)')
+export const RGBFormat: Story = {
+  args: {
+    value: "rgb(239, 68, 68)",
+    format: "rgb",
+    showPresets: true,
+  },
+  render: (args) => <WakaColorPicker {...args} />,
+}
 
-    return (
-      <div className="space-y-4">
-        <div className="flex items-center gap-4">
-          <WakaColorPicker value={hexColor} onChange={setHexColor} format="hex" />
-          <span className="text-sm font-mono">HEX: {hexColor}</span>
-        </div>
-        <div className="flex items-center gap-4">
-          <WakaColorPicker value={rgbColor} onChange={setRgbColor} format="rgb" />
-          <span className="text-sm font-mono">RGB: {rgbColor}</span>
-        </div>
-        <div className="flex items-center gap-4">
-          <WakaColorPicker value={hslColor} onChange={setHslColor} format="hsl" />
-          <span className="text-sm font-mono">HSL: {hslColor}</span>
-        </div>
-      </div>
-    )
+export const HSLFormat: Story = {
+  args: {
+    value: "hsl(262, 83%, 58%)",
+    format: "hsl",
+    showPresets: true,
   },
+  render: (args) => <WakaColorPicker {...args} />,
 }
 
 export const CustomPresets: Story = {
-  render: function CustomPresetsDemo() {
-    const [color, setColor] = React.useState('#8b5cf6')
-
-    const customPresets = [
-      '#000000', '#ffffff',
-      '#ef4444', '#f97316', '#f59e0b',
-      '#22c55e', '#14b8a6', '#3b82f6',
-      '#8b5cf6', '#ec4899',
-    ]
-
-    return (
-      <div className="flex items-center gap-4">
-        <WakaColorPicker
-          value={color}
-          onChange={setColor}
-          presets={customPresets}
-        />
-        <span className="text-sm font-mono">{color}</span>
-      </div>
-    )
+  args: {
+    value: "#10b981",
+    format: "hex",
+    showPresets: true,
+    presets: [
+      "#1f2937", "#374151", "#6b7280", "#9ca3af",
+      "#dc2626", "#ea580c", "#ca8a04", "#16a34a",
+      "#0891b2", "#2563eb", "#7c3aed", "#c026d3",
+    ],
   },
+  render: (args) => <WakaColorPicker {...args} />,
 }
 
-export const NoPresets: Story = {
-  render: function NoPresetsDemo() {
-    const [color, setColor] = React.useState('#0ea5e9')
+export const SmallSize: Story = {
+  args: {
+    value: "#ef4444",
+    format: "hex",
+    size: "sm",
+    showPresets: false,
+  },
+  render: (args) => <WakaColorPicker {...args} />,
+}
 
-    return (
-      <div className="flex items-center gap-4">
-        <WakaColorPicker
-          value={color}
-          onChange={setColor}
-          showPresets={false}
-        />
-        <span className="text-sm font-mono">{color}</span>
-      </div>
-    )
+export const LargeSize: Story = {
+  args: {
+    value: "#8b5cf6",
+    format: "hex",
+    size: "lg",
+    showPresets: true,
+    showEyeDropper: true,
   },
+  render: (args) => <WakaColorPicker {...args} />,
 }
 
 export const Disabled: Story = {
-  render: () => (
-    <WakaColorPicker value="#6b7280" disabled />
-  ),
+  args: {
+    value: "#6366f1",
+    format: "hex",
+    disabled: true,
+  },
+  render: (args) => <WakaColorPicker {...args} />,
 }
 
-export const InForm: Story = {
-  render: function InFormDemo() {
-    const [bgColor, setBgColor] = React.useState('#ffffff')
-    const [textColor, setTextColor] = React.useState('#000000')
-    const [accentColor, setAccentColor] = React.useState('#3b82f6')
-
-    return (
-      <div className="space-y-4 w-[300px]">
-        <div className="space-y-2">
-          <label className="text-sm font-medium">Background Color</label>
-          <div className="flex items-center gap-2">
-            <WakaColorPicker value={bgColor} onChange={setBgColor} />
-            <span className="text-sm font-mono flex-1">{bgColor}</span>
-          </div>
-        </div>
-        <div className="space-y-2">
-          <label className="text-sm font-medium">Text Color</label>
-          <div className="flex items-center gap-2">
-            <WakaColorPicker value={textColor} onChange={setTextColor} />
-            <span className="text-sm font-mono flex-1">{textColor}</span>
-          </div>
-        </div>
-        <div className="space-y-2">
-          <label className="text-sm font-medium">Accent Color</label>
-          <div className="flex items-center gap-2">
-            <WakaColorPicker value={accentColor} onChange={setAccentColor} />
-            <span className="text-sm font-mono flex-1">{accentColor}</span>
-          </div>
-        </div>
-
-        <div
-          className="p-4 rounded-lg mt-4"
-          style={{ backgroundColor: bgColor, color: textColor }}
-        >
-          <p className="font-semibold">Preview</p>
-          <p className="text-sm mt-1">This is how your colors look together.</p>
-          <button
-            className="mt-2 px-3 py-1 rounded text-white text-sm"
-            style={{ backgroundColor: accentColor }}
-          >
-            Accent Button
-          </button>
-        </div>
-      </div>
-    )
+export const WithoutPresets: Story = {
+  args: {
+    value: "#f97316",
+    format: "hex",
+    showPresets: false,
+    showEyeDropper: false,
   },
+  render: (args) => <WakaColorPicker {...args} />,
 }