@wakastellar/ui 2.4.0 → 3.1.0

package/src/components/waka-magnetic-button/WakaMagneticButton.stories.tsx

@@ -0,0 +1,40 @@
+import type { Meta, StoryObj } from "@storybook/react"
+import { WakaMagneticButton } from "./index"
+
+const meta: Meta<typeof WakaMagneticButton> = {
+  title: "UI/WakaMagneticButton",
+  component: WakaMagneticButton,
+  parameters: { layout: "centered" },
+  tags: ["autodocs"],
+  argTypes: {
+    variant: { control: "select", options: ["default", "secondary", "destructive", "outline", "ghost", "gradient"], description: "Variante" },
+    magneticEnabled: { control: "boolean", description: "Effet magnétique" },
+    attractionRadius: { control: "number", description: "Rayon d'attraction (px)" },
+    attractionStrength: { control: { type: "range", min: 0, max: 1, step: 0.1 }, description: "Force" },
+    followDuration: { control: "number", description: "Durée animation (ms)" },
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof WakaMagneticButton>
+
+export const Default: Story = {
+  args: { children: "Hover me!", variant: "default", magneticEnabled: true, attractionRadius: 100, attractionStrength: 0.3 },
+  render: (args) => <WakaMagneticButton {...args} />,
+}
+
+export const StrongAttraction: Story = {
+  args: { children: "Strong Pull", variant: "gradient", magneticEnabled: true, attractionRadius: 150, attractionStrength: 0.6 },
+  render: (args) => <WakaMagneticButton {...args} />,
+}
+
+export const Outline: Story = {
+  args: { children: "Outline Magnetic", variant: "outline", magneticEnabled: true },
+  render: (args) => <WakaMagneticButton {...args} />,
+}
+
+export const Disabled: Story = {
+  args: { children: "No Effect", variant: "default", magneticEnabled: false },
+  render: (args) => <WakaMagneticButton {...args} />,
+}
+

package/src/components/waka-mention-input/WakaMentionInput.stories.tsx

@@ -0,0 +1,140 @@
+import type { Meta, StoryObj } from "@storybook/react"
+import { WakaMentionInput, type MentionItem } from "./index"
+import { useState } from "react"
+import { User, Hash } from "lucide-react"
+
+const meta: Meta<typeof WakaMentionInput> = {
+  title: "Communication/WakaMentionInput",
+  component: WakaMentionInput,
+  parameters: {
+    layout: "centered",
+  },
+  tags: ["autodocs"],
+  argTypes: {
+    placeholder: {
+      control: "text",
+      description: "Texte placeholder",
+    },
+    disabled: {
+      control: "boolean",
+      description: "État désactivé",
+    },
+    error: {
+      control: "text",
+      description: "Message d'erreur",
+    },
+    maxLength: {
+      control: "number",
+      description: "Limite de caractères",
+    },
+    maxMentions: {
+      control: "number",
+      description: "Limite de mentions",
+    },
+    showCharacterCount: {
+      control: "boolean",
+      description: "Afficher le compteur de caractères",
+    },
+    showMentionCount: {
+      control: "boolean",
+      description: "Afficher le compteur de mentions",
+    },
+    minHeight: {
+      control: "number",
+      description: "Hauteur minimale",
+    },
+    maxHeight: {
+      control: "number",
+      description: "Hauteur maximale",
+    },
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof WakaMentionInput>
+
+const sampleUsers: MentionItem[] = [
+  { id: "1", type: "user", display: "Alice Martin", value: "alice", avatar: "https://i.pravatar.cc/150?u=alice" },
+  { id: "2", type: "user", display: "Bob Dupont", value: "bob", avatar: "https://i.pravatar.cc/150?u=bob" },
+  { id: "3", type: "user", display: "Charlie Bernard", value: "charlie", avatar: "https://i.pravatar.cc/150?u=charlie" },
+]
+
+const sampleChannels: MentionItem[] = [
+  { id: "c1", type: "channel", display: "general", value: "general", description: "Discussion générale" },
+  { id: "c2", type: "channel", display: "random", value: "random", description: "Discussions diverses" },
+  { id: "c3", type: "channel", display: "dev", value: "dev", description: "Équipe développement" },
+]
+
+const defaultTriggers = [
+  {
+    trigger: "@",
+    type: "user",
+    icon: <User className="tw-h-4 tw-w-4" />,
+    data: sampleUsers,
+  },
+  {
+    trigger: "#",
+    type: "channel",
+    icon: <Hash className="tw-h-4 tw-w-4" />,
+    data: sampleChannels,
+  },
+]
+
+export const Default: Story = {
+  args: {
+    placeholder: "Tapez @ pour mentionner quelqu'un, # pour un canal...",
+    triggers: defaultTriggers,
+    showCharacterCount: true,
+    showMentionCount: true,
+    maxLength: 500,
+    maxMentions: 10,
+  },
+  render: (args) => (
+    <div style={{ width: 400 }}>
+      <WakaMentionInput {...args} />
+    </div>
+  ),
+}
+
+export const WithError: Story = {
+  args: {
+    placeholder: "Tapez votre message...",
+    triggers: defaultTriggers,
+    error: "Le message ne peut pas être vide",
+  },
+  render: (args) => (
+    <div style={{ width: 400 }}>
+      <WakaMentionInput {...args} />
+    </div>
+  ),
+}
+
+export const Disabled: Story = {
+  args: {
+    placeholder: "Input désactivé",
+    triggers: defaultTriggers,
+    disabled: true,
+  },
+  render: (args) => (
+    <div style={{ width: 400 }}>
+      <WakaMentionInput {...args} />
+    </div>
+  ),
+}
+
+export const WithLimits: Story = {
+  args: {
+    placeholder: "Message limité...",
+    triggers: defaultTriggers,
+    maxLength: 100,
+    maxMentions: 3,
+    showCharacterCount: true,
+    showMentionCount: true,
+  },
+  render: (args) => (
+    <div style={{ width: 400 }}>
+      <WakaMentionInput {...args} />
+    </div>
+  ),
+}
+

package/src/components/waka-milestone-road/WakaMilestoneRoad.stories.tsx

@@ -0,0 +1,143 @@
+import type { Meta, StoryObj } from "@storybook/react"
+import { WakaMilestoneRoad, Milestone } from "./index"
+
+const sampleMilestones: Milestone[] = [
+  {
+    id: "m1",
+    name: "Start",
+    description: "Begin your journey",
+    completed: true,
+    rewards: [{ type: "xp", value: 100 }],
+  },
+  {
+    id: "m2",
+    name: "First Steps",
+    description: "Complete 5 tasks",
+    completed: true,
+    rewards: [{ type: "xp", value: 200 }, { type: "badge", value: "Beginner" }],
+  },
+  {
+    id: "m3",
+    name: "Rising Star",
+    description: "Reach level 10",
+    completed: true,
+    isCurrent: false,
+    rewards: [{ type: "xp", value: 500 }],
+  },
+  {
+    id: "m4",
+    name: "Champion",
+    description: "Win 10 challenges",
+    completed: false,
+    isCurrent: true,
+    rewards: [{ type: "xp", value: 1000 }, { type: "item", value: "Gold Sword" }],
+  },
+  {
+    id: "m5",
+    name: "Master",
+    description: "Complete all achievements",
+    completed: false,
+    rewards: [{ type: "badge", value: "Master" }, { type: "currency", value: 5000 }],
+  },
+]
+
+const meta: Meta<typeof WakaMilestoneRoad> = {
+  title: "Components/Gamification/WakaMilestoneRoad",
+  component: WakaMilestoneRoad,
+  parameters: {
+    layout: "fullscreen",
+  },
+  tags: ["autodocs"],
+  argTypes: {
+    variant: {
+      control: "select",
+      options: ["horizontal", "vertical", "winding"],
+      description: "Display variant",
+    },
+    theme: {
+      control: "select",
+      options: ["default", "gold", "purple", "green", "blue"],
+      description: "Color theme",
+    },
+    animated: {
+      control: "boolean",
+      description: "Enable animations",
+    },
+    showCharacter: {
+      control: "boolean",
+      description: "Show character on road",
+    },
+    showProgressLabel: {
+      control: "boolean",
+      description: "Show progress percentage",
+    },
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof WakaMilestoneRoad>
+
+export const Winding: Story = {
+  args: {
+    milestones: sampleMilestones,
+    progress: 65,
+    variant: "winding",
+    theme: "default",
+    animated: true,
+    showCharacter: true,
+    showProgressLabel: true,
+  },
+  render: (args) => (
+    <div className="h-[600px] p-4">
+      <WakaMilestoneRoad {...args} />
+    </div>
+  ),
+}
+
+export const Horizontal: Story = {
+  args: {
+    milestones: sampleMilestones,
+    progress: 65,
+    variant: "horizontal",
+    theme: "gold",
+    animated: true,
+    showCharacter: true,
+  },
+  render: (args) => (
+    <div className="h-[300px] p-4">
+      <WakaMilestoneRoad {...args} />
+    </div>
+  ),
+}
+
+export const Vertical: Story = {
+  args: {
+    milestones: sampleMilestones,
+    progress: 65,
+    variant: "vertical",
+    theme: "purple",
+    animated: true,
+    showCharacter: true,
+  },
+  render: (args) => (
+    <div className="h-[600px] w-[300px] p-4">
+      <WakaMilestoneRoad {...args} />
+    </div>
+  ),
+}
+
+export const GreenTheme: Story = {
+  args: {
+    milestones: sampleMilestones,
+    progress: 40,
+    variant: "winding",
+    theme: "green",
+    animated: true,
+  },
+  render: (args) => (
+    <div className="h-[600px] p-4">
+      <WakaMilestoneRoad {...args} />
+    </div>
+  ),
+}
+

package/src/components/waka-orbital-menu/WakaOrbitalMenu.stories.tsx

@@ -0,0 +1,54 @@
+import type { Meta, StoryObj } from "@storybook/react"
+import { WakaOrbitalMenu } from "./index"
+import { Home, Settings, User, Mail, Bell, Heart } from "lucide-react"
+
+const meta: Meta<typeof WakaOrbitalMenu> = {
+  title: "Navigation/WakaOrbitalMenu",
+  component: WakaOrbitalMenu,
+  parameters: { layout: "centered" },
+  tags: ["autodocs"],
+  argTypes: {
+    radius: { control: "number", description: "Rayon de l'orbite" },
+    startAngle: { control: "number", description: "Angle de départ" },
+    animated: { control: "boolean", description: "Animation" },
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof WakaOrbitalMenu>
+
+const items = [
+  { id: "home", icon: <Home className="tw-h-5 tw-w-5" />, label: "Accueil" },
+  { id: "user", icon: <User className="tw-h-5 tw-w-5" />, label: "Profil" },
+  { id: "mail", icon: <Mail className="tw-h-5 tw-w-5" />, label: "Messages" },
+  { id: "bell", icon: <Bell className="tw-h-5 tw-w-5" />, label: "Notifications" },
+  { id: "settings", icon: <Settings className="tw-h-5 tw-w-5" />, label: "Paramètres" },
+]
+
+export const Default: Story = {
+  args: { items, radius: 100, animated: true },
+  render: (args) => (
+    <div style={{ width: 300, height: 300 }}>
+      <WakaOrbitalMenu {...args} />
+    </div>
+  ),
+}
+
+export const LargeRadius: Story = {
+  args: { items, radius: 150, animated: true },
+  render: (args) => (
+    <div style={{ width: 400, height: 400 }}>
+      <WakaOrbitalMenu {...args} />
+    </div>
+  ),
+}
+
+export const FewItems: Story = {
+  args: { items: items.slice(0, 3), radius: 80, animated: true },
+  render: (args) => (
+    <div style={{ width: 250, height: 250 }}>
+      <WakaOrbitalMenu {...args} />
+    </div>
+  ),
+}
+

package/src/components/waka-order-tracker/WakaOrderTracker.stories.tsx

@@ -0,0 +1,163 @@
+import type { Meta, StoryObj } from "@storybook/react"
+import { WakaOrderTracker, type StatusUpdate, type OrderStatus } from "./index"
+
+const meta: Meta<typeof WakaOrderTracker> = {
+  title: "E-commerce/WakaOrderTracker",
+  component: WakaOrderTracker,
+  parameters: {
+    layout: "centered",
+  },
+  tags: ["autodocs"],
+  argTypes: {
+    currentStatus: {
+      control: "select",
+      options: ["ordered", "processing", "shipped", "out_for_delivery", "delivered"],
+      description: "Statut actuel de la commande",
+    },
+    showMap: {
+      control: "boolean",
+      description: "Afficher la carte",
+    },
+    showTimeline: {
+      control: "boolean",
+      description: "Afficher la timeline",
+    },
+    orientation: {
+      control: "select",
+      options: ["horizontal", "vertical"],
+      description: "Orientation de la timeline",
+    },
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof WakaOrderTracker>
+
+const statusUpdates: StatusUpdate[] = [
+  {
+    id: "1",
+    status: "ordered",
+    timestamp: new Date("2024-01-10T10:00:00"),
+    description: "Commande confirmée",
+    location: "Paris, France",
+  },
+  {
+    id: "2",
+    status: "processing",
+    timestamp: new Date("2024-01-10T14:00:00"),
+    description: "Préparation en cours",
+    location: "Entrepôt central",
+  },
+  {
+    id: "3",
+    status: "shipped",
+    timestamp: new Date("2024-01-11T09:00:00"),
+    description: "Colis expédié",
+    location: "Centre de tri Lyon",
+  },
+]
+
+const deliveredUpdates: StatusUpdate[] = [
+  ...statusUpdates,
+  {
+    id: "4",
+    status: "out_for_delivery",
+    timestamp: new Date("2024-01-12T08:00:00"),
+    description: "En cours de livraison",
+    location: "Lyon",
+  },
+  {
+    id: "5",
+    status: "delivered",
+    timestamp: new Date("2024-01-12T14:30:00"),
+    description: "Livré",
+    location: "Votre adresse",
+  },
+]
+
+export const Default: Story = {
+  args: {
+    orderNumber: "CMD-2024-001",
+    currentStatus: "shipped",
+    statusUpdates,
+    estimatedDelivery: new Date("2024-01-13"),
+    showTimeline: true,
+    orientation: "vertical",
+  },
+  render: (args) => (
+    <div style={{ width: 450 }}>
+      <WakaOrderTracker {...args} />
+    </div>
+  ),
+}
+
+export const Processing: Story = {
+  args: {
+    orderNumber: "CMD-2024-002",
+    currentStatus: "processing",
+    statusUpdates: statusUpdates.slice(0, 2),
+    estimatedDelivery: new Date(Date.now() + 3 * 24 * 60 * 60 * 1000),
+    showTimeline: true,
+  },
+  render: (args) => (
+    <div style={{ width: 450 }}>
+      <WakaOrderTracker {...args} />
+    </div>
+  ),
+}
+
+export const OutForDelivery: Story = {
+  args: {
+    orderNumber: "CMD-2024-003",
+    currentStatus: "out_for_delivery",
+    statusUpdates: deliveredUpdates.slice(0, 4),
+    estimatedDelivery: new Date(),
+    showTimeline: true,
+  },
+  render: (args) => (
+    <div style={{ width: 450 }}>
+      <WakaOrderTracker {...args} />
+    </div>
+  ),
+}
+
+export const Delivered: Story = {
+  args: {
+    orderNumber: "CMD-2024-004",
+    currentStatus: "delivered",
+    statusUpdates: deliveredUpdates,
+    deliveredAt: new Date("2024-01-12T14:30:00"),
+    showTimeline: true,
+  },
+  render: (args) => (
+    <div style={{ width: 450 }}>
+      <WakaOrderTracker {...args} />
+    </div>
+  ),
+}
+
+export const Horizontal: Story = {
+  args: {
+    orderNumber: "CMD-2024-005",
+    currentStatus: "shipped",
+    statusUpdates,
+    orientation: "horizontal",
+    showTimeline: true,
+  },
+  render: (args) => <WakaOrderTracker {...args} />,
+}
+
+export const Minimal: Story = {
+  args: {
+    orderNumber: "CMD-2024-006",
+    currentStatus: "shipped",
+    statusUpdates,
+    showTimeline: false,
+  },
+  render: (args) => (
+    <div style={{ width: 400 }}>
+      <WakaOrderTracker {...args} />
+    </div>
+  ),
+}
+

package/src/components/waka-outstream-video/WakaOutstreamVideo.stories.tsx

@@ -0,0 +1,94 @@
+import type { Meta, StoryObj } from "@storybook/react"
+import { WakaOutstreamVideo } from "./index"
+import { WakaAdProvider } from "../waka-ad-provider"
+
+const mockAdConfig = {
+  network: "custom" as const,
+  testMode: true,
+  debugMode: true,
+}
+
+const meta: Meta<typeof WakaOutstreamVideo> = {
+  title: "Components/Ads/WakaOutstreamVideo",
+  component: WakaOutstreamVideo,
+  parameters: {
+    layout: "padded",
+  },
+  tags: ["autodocs"],
+  decorators: [
+    (Story) => (
+      <WakaAdProvider config={mockAdConfig}>
+        <div className="max-w-2xl mx-auto space-y-4">
+          <p className="text-muted-foreground">
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor.
+          </p>
+          <Story />
+          <p className="text-muted-foreground">
+            Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.
+          </p>
+        </div>
+      </WakaAdProvider>
+    ),
+  ],
+  argTypes: {
+    muted: {
+      control: "boolean",
+      description: "Start muted",
+    },
+    showClose: {
+      control: "boolean",
+      description: "Show close button",
+    },
+    closeAfter: {
+      control: "number",
+      description: "Close after seconds (0 = manual only)",
+    },
+    collapseOnEnd: {
+      control: "boolean",
+      description: "Collapse when video ends",
+    },
+    collapseDuration: {
+      control: "number",
+      description: "Collapse animation duration (ms)",
+    },
+    visibilityThreshold: {
+      control: { type: "range", min: 0, max: 1, step: 0.1 },
+      description: "Minimum visibility to start playing",
+    },
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof WakaOutstreamVideo>
+
+export const Default: Story = {
+  args: {
+    slotId: "outstream-video-1",
+    muted: true,
+    showClose: true,
+    collapseOnEnd: true,
+  },
+  render: (args) => <WakaOutstreamVideo {...args} />,
+}
+
+export const AutoClose: Story = {
+  args: {
+    slotId: "outstream-video-2",
+    muted: true,
+    showClose: true,
+    closeAfter: 15,
+    collapseOnEnd: true,
+  },
+  render: (args) => <WakaOutstreamVideo {...args} />,
+}
+
+export const NoClose: Story = {
+  args: {
+    slotId: "outstream-video-3",
+    muted: true,
+    showClose: false,
+    collapseOnEnd: false,
+  },
+  render: (args) => <WakaOutstreamVideo {...args} />,
+}
+