@wakastellar/ui 2.4.0 → 3.1.0

package/src/components/waka-two-factor-setup/WakaTwoFactorSetup.stories.tsx

@@ -0,0 +1,142 @@
+import type { Meta, StoryObj } from "@storybook/react"
+import { WakaTwoFactorSetup, type TwoFactorSetupConfig, type BackupCode } from "./index"
+
+const meta: Meta<typeof WakaTwoFactorSetup> = {
+  title: "Security/WakaTwoFactorSetup",
+  component: WakaTwoFactorSetup,
+  parameters: { layout: "centered" },
+  tags: ["autodocs"],
+  argTypes: {
+    initialStep: {
+      control: "select",
+      options: ["intro", "qr-code", "backup-codes", "verify", "success"],
+      description: "Etape initiale",
+    },
+    showStepIndicator: { control: "boolean", description: "Afficher l'indicateur d'etapes" },
+    allowSkipBackupCodes: { control: "boolean", description: "Permettre de sauter les codes de secours" },
+    isLoading: { control: "boolean", description: "Etat de chargement" },
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof WakaTwoFactorSetup>
+
+const backupCodes: BackupCode[] = [
+  { code: "ABCD-1234", used: false },
+  { code: "EFGH-5678", used: false },
+  { code: "IJKL-9012", used: false },
+  { code: "MNOP-3456", used: false },
+  { code: "QRST-7890", used: false },
+  { code: "UVWX-1234", used: false },
+]
+
+const config: TwoFactorSetupConfig = {
+  secretKey: "JBSWY3DPEHPK3PXP",
+  qrCodeUrl: "https://api.qrserver.com/v1/create-qr-code/?size=200x200&data=otpauth://totp/WakaStart:user@example.com?secret=JBSWY3DPEHPK3PXP&issuer=WakaStart",
+  issuer: "WakaStart",
+  accountName: "user@example.com",
+  backupCodes,
+}
+
+const mockVerify = async (code: string): Promise<boolean> => {
+  // Simulate API call
+  await new Promise((resolve) => setTimeout(resolve, 1000))
+  return code === "123456"
+}
+
+export const Default: Story = {
+  args: {
+    config,
+    initialStep: "intro",
+    onVerify: mockVerify,
+    onComplete: () => console.log("2FA setup completed"),
+    onCancel: () => console.log("2FA setup cancelled"),
+  },
+  render: (args) => (
+    <div style={{ width: 400 }}>
+      <WakaTwoFactorSetup {...args} />
+    </div>
+  ),
+}
+
+export const QRCodeStep: Story = {
+  args: {
+    config,
+    initialStep: "qr-code",
+    onVerify: mockVerify,
+  },
+  render: (args) => (
+    <div style={{ width: 400 }}>
+      <WakaTwoFactorSetup {...args} />
+    </div>
+  ),
+}
+
+export const BackupCodesStep: Story = {
+  args: {
+    config,
+    initialStep: "backup-codes",
+    onVerify: mockVerify,
+  },
+  render: (args) => (
+    <div style={{ width: 400 }}>
+      <WakaTwoFactorSetup {...args} />
+    </div>
+  ),
+}
+
+export const VerifyStep: Story = {
+  args: {
+    config,
+    initialStep: "verify",
+    onVerify: mockVerify,
+  },
+  render: (args) => (
+    <div style={{ width: 400 }}>
+      <WakaTwoFactorSetup {...args} />
+    </div>
+  ),
+}
+
+export const SuccessStep: Story = {
+  args: {
+    config,
+    initialStep: "success",
+    onVerify: mockVerify,
+    onComplete: () => console.log("Done clicked"),
+  },
+  render: (args) => (
+    <div style={{ width: 400 }}>
+      <WakaTwoFactorSetup {...args} />
+    </div>
+  ),
+}
+
+export const Loading: Story = {
+  args: {
+    config,
+    initialStep: "intro",
+    onVerify: mockVerify,
+    isLoading: true,
+  },
+  render: (args) => (
+    <div style={{ width: 400 }}>
+      <WakaTwoFactorSetup {...args} />
+    </div>
+  ),
+}
+
+export const WithError: Story = {
+  args: {
+    config,
+    initialStep: "intro",
+    onVerify: mockVerify,
+    error: "Failed to initialize two-factor authentication. Please try again.",
+    onCancel: () => console.log("Go back clicked"),
+  },
+  render: (args) => (
+    <div style={{ width: 400 }}>
+      <WakaTwoFactorSetup {...args} />
+    </div>
+  ),
+}

package/src/components/waka-typing-indicator/WakaTypingIndicator.stories.tsx

@@ -0,0 +1,134 @@
+import type { Meta, StoryObj } from "@storybook/react"
+import { WakaTypingIndicator, type TypingUser } from "./index"
+
+const meta: Meta<typeof WakaTypingIndicator> = {
+  title: "Communication/WakaTypingIndicator",
+  component: WakaTypingIndicator,
+  parameters: {
+    layout: "centered",
+  },
+  tags: ["autodocs"],
+  argTypes: {
+    variant: {
+      control: "select",
+      options: ["dots", "text", "pulse"],
+      description: "Style de l'indicateur",
+    },
+    size: {
+      control: "select",
+      options: ["sm", "md", "lg"],
+      description: "Taille de l'indicateur",
+    },
+    animationSpeed: {
+      control: { type: "number", min: 100, max: 1000 },
+      description: "Vitesse d'animation en ms",
+    },
+    autoHideTimeout: {
+      control: "number",
+      description: "Timeout auto-hide en ms (0 pour désactiver)",
+    },
+    showAvatars: {
+      control: "boolean",
+      description: "Afficher les avatars",
+    },
+    maxAvatars: {
+      control: "number",
+      description: "Nombre maximum d'avatars",
+    },
+    visible: {
+      control: "boolean",
+      description: "Visibilité de l'indicateur",
+    },
+    customText: {
+      control: "text",
+      description: "Texte personnalisé",
+    },
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof WakaTypingIndicator>
+
+const typingUsers: TypingUser[] = [
+  { id: "1", name: "Alice", avatar: "https://i.pravatar.cc/150?u=alice" },
+  { id: "2", name: "Bob", avatar: "https://i.pravatar.cc/150?u=bob" },
+  { id: "3", name: "Charlie", avatar: "https://i.pravatar.cc/150?u=charlie" },
+]
+
+export const Default: Story = {
+  args: {
+    users: [typingUsers[0]],
+    variant: "dots",
+    size: "md",
+    visible: true,
+    showAvatars: true,
+  },
+  render: (args) => <WakaTypingIndicator {...args} />,
+}
+
+export const MultipleUsers: Story = {
+  args: {
+    users: typingUsers,
+    variant: "dots",
+    size: "md",
+    visible: true,
+    showAvatars: true,
+    maxAvatars: 3,
+  },
+  render: (args) => <WakaTypingIndicator {...args} />,
+}
+
+export const TextVariant: Story = {
+  args: {
+    users: [typingUsers[0]],
+    variant: "text",
+    size: "md",
+    visible: true,
+    showAvatars: true,
+  },
+  render: (args) => <WakaTypingIndicator {...args} />,
+}
+
+export const PulseVariant: Story = {
+  args: {
+    users: [typingUsers[0], typingUsers[1]],
+    variant: "pulse",
+    size: "md",
+    visible: true,
+    showAvatars: false,
+  },
+  render: (args) => <WakaTypingIndicator {...args} />,
+}
+
+export const CustomText: Story = {
+  args: {
+    users: typingUsers,
+    variant: "dots",
+    size: "lg",
+    visible: true,
+    customText: "Plusieurs personnes écrivent...",
+  },
+  render: (args) => <WakaTypingIndicator {...args} />,
+}
+
+export const SmallSize: Story = {
+  args: {
+    users: [typingUsers[0]],
+    variant: "dots",
+    size: "sm",
+    visible: true,
+  },
+  render: (args) => <WakaTypingIndicator {...args} />,
+}
+
+export const LargeSize: Story = {
+  args: {
+    users: [typingUsers[0]],
+    variant: "dots",
+    size: "lg",
+    visible: true,
+    showAvatars: true,
+  },
+  render: (args) => <WakaTypingIndicator {...args} />,
+}
+

package/src/components/waka-video-ad/WakaVideoAd.stories.tsx

@@ -0,0 +1,138 @@
+import type { Meta, StoryObj } from "@storybook/react"
+import { WakaVideoAd } from "./index"
+import { WakaAdProvider } from "../waka-ad-provider"
+
+const mockAdConfig = {
+  network: "custom" as const,
+  testMode: true,
+  debugMode: true,
+}
+
+const meta: Meta<typeof WakaVideoAd> = {
+  title: "Components/Ads/WakaVideoAd",
+  component: WakaVideoAd,
+  parameters: {
+    layout: "centered",
+  },
+  tags: ["autodocs"],
+  decorators: [
+    (Story) => (
+      <WakaAdProvider config={mockAdConfig}>
+        <Story />
+      </WakaAdProvider>
+    ),
+  ],
+  argTypes: {
+    width: {
+      control: "number",
+      description: "Video width",
+    },
+    height: {
+      control: "number",
+      description: "Video height",
+    },
+    aspectRatio: {
+      control: "select",
+      options: ["16/9", "4/3", "1/1", "9/16"],
+      description: "Aspect ratio",
+    },
+    autoplay: {
+      control: "boolean",
+      description: "Autoplay when visible",
+    },
+    muted: {
+      control: "boolean",
+      description: "Mute by default",
+    },
+    showControls: {
+      control: "boolean",
+      description: "Show video controls",
+    },
+    skipAfter: {
+      control: "number",
+      description: "Skip time in seconds (0 = no skip)",
+    },
+    showProgress: {
+      control: "boolean",
+      description: "Show progress bar",
+    },
+    ctaPosition: {
+      control: "select",
+      options: ["bottom", "overlay", "end"],
+      description: "CTA button position",
+    },
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof WakaVideoAd>
+
+export const Default: Story = {
+  args: {
+    slotId: "video-ad-1",
+    width: 640,
+    aspectRatio: "16/9",
+    autoplay: true,
+    muted: true,
+    showControls: true,
+    skipAfter: 5,
+    showProgress: true,
+    ctaPosition: "bottom",
+  },
+  render: (args) => <WakaVideoAd {...args} />,
+}
+
+export const OverlayCTA: Story = {
+  args: {
+    slotId: "video-ad-2",
+    width: 640,
+    aspectRatio: "16/9",
+    autoplay: true,
+    muted: true,
+    showControls: true,
+    skipAfter: 5,
+    ctaPosition: "overlay",
+  },
+  render: (args) => <WakaVideoAd {...args} />,
+}
+
+export const EndScreenCTA: Story = {
+  args: {
+    slotId: "video-ad-3",
+    width: 640,
+    aspectRatio: "16/9",
+    autoplay: true,
+    muted: true,
+    skipAfter: 0,
+    ctaPosition: "end",
+  },
+  render: (args) => <WakaVideoAd {...args} />,
+}
+
+export const Square: Story = {
+  args: {
+    slotId: "video-ad-4",
+    width: 400,
+    aspectRatio: "1/1",
+    autoplay: true,
+    muted: true,
+    showControls: true,
+    skipAfter: 3,
+  },
+  render: (args) => <WakaVideoAd {...args} />,
+}
+
+export const NoSkip: Story = {
+  args: {
+    slotId: "video-ad-5",
+    width: 640,
+    aspectRatio: "16/9",
+    autoplay: true,
+    muted: true,
+    showControls: true,
+    skipAfter: 0,
+    showProgress: true,
+  },
+  render: (args) => <WakaVideoAd {...args} />,
+}
+

package/src/components/waka-video-call/WakaVideoCall.stories.tsx

@@ -0,0 +1,186 @@
+import type { Meta, StoryObj } from "@storybook/react"
+import { WakaVideoCall, type Participant } from "./index"
+
+const meta: Meta<typeof WakaVideoCall> = {
+  title: "Communication/WakaVideoCall",
+  component: WakaVideoCall,
+  parameters: {
+    layout: "fullscreen",
+  },
+  tags: ["autodocs"],
+  argTypes: {
+    layout: {
+      control: "select",
+      options: ["grid", "speaker", "sidebar"],
+      description: "Disposition des participants",
+    },
+    isRecording: {
+      control: "boolean",
+      description: "Enregistrement en cours",
+    },
+    showChat: {
+      control: "boolean",
+      description: "Afficher le chat",
+    },
+    showParticipantsList: {
+      control: "boolean",
+      description: "Afficher la liste des participants",
+    },
+    isPictureInPicture: {
+      control: "boolean",
+      description: "Mode picture-in-picture",
+    },
+    isFullscreen: {
+      control: "boolean",
+      description: "Mode plein écran",
+    },
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof WakaVideoCall>
+
+const participants: Participant[] = [
+  {
+    id: "local",
+    name: "Vous",
+    avatar: "https://i.pravatar.cc/150?u=local",
+    isMuted: false,
+    isVideoOff: false,
+    isScreenSharing: false,
+    hasRaisedHand: false,
+    isSpeaking: false,
+    isPinned: false,
+    isLocal: true,
+    connectionQuality: "excellent",
+  },
+  {
+    id: "2",
+    name: "Alice Martin",
+    avatar: "https://i.pravatar.cc/150?u=alice",
+    isMuted: false,
+    isVideoOff: false,
+    isScreenSharing: false,
+    hasRaisedHand: false,
+    isSpeaking: true,
+    isPinned: false,
+    connectionQuality: "good",
+  },
+  {
+    id: "3",
+    name: "Bob Dupont",
+    avatar: "https://i.pravatar.cc/150?u=bob",
+    isMuted: true,
+    isVideoOff: true,
+    isScreenSharing: false,
+    hasRaisedHand: false,
+    isSpeaking: false,
+    isPinned: false,
+    connectionQuality: "fair",
+  },
+  {
+    id: "4",
+    name: "Charlie Bernard",
+    avatar: "https://i.pravatar.cc/150?u=charlie",
+    isMuted: false,
+    isVideoOff: false,
+    isScreenSharing: false,
+    hasRaisedHand: true,
+    isSpeaking: false,
+    isPinned: false,
+    connectionQuality: "excellent",
+  },
+]
+
+export const Default: Story = {
+  args: {
+    participants,
+    localParticipantId: "local",
+    layout: "grid",
+    isRecording: false,
+    callStartTime: new Date(),
+  },
+  render: (args) => (
+    <div style={{ height: "100vh" }}>
+      <WakaVideoCall {...args} />
+    </div>
+  ),
+}
+
+export const SpeakerView: Story = {
+  args: {
+    participants,
+    localParticipantId: "local",
+    layout: "speaker",
+    isRecording: false,
+    callStartTime: new Date(),
+  },
+  render: (args) => (
+    <div style={{ height: "100vh" }}>
+      <WakaVideoCall {...args} />
+    </div>
+  ),
+}
+
+export const SidebarView: Story = {
+  args: {
+    participants,
+    localParticipantId: "local",
+    layout: "sidebar",
+    showChat: true,
+    callStartTime: new Date(),
+  },
+  render: (args) => (
+    <div style={{ height: "100vh" }}>
+      <WakaVideoCall {...args} />
+    </div>
+  ),
+}
+
+export const Recording: Story = {
+  args: {
+    participants: participants.slice(0, 2),
+    localParticipantId: "local",
+    layout: "grid",
+    isRecording: true,
+    callStartTime: new Date(Date.now() - 300000),
+  },
+  render: (args) => (
+    <div style={{ height: "100vh" }}>
+      <WakaVideoCall {...args} />
+    </div>
+  ),
+}
+
+export const ScreenSharing: Story = {
+  args: {
+    participants: [
+      participants[0],
+      { ...participants[1], isScreenSharing: true },
+      ...participants.slice(2),
+    ],
+    localParticipantId: "local",
+    layout: "speaker",
+    callStartTime: new Date(),
+  },
+  render: (args) => (
+    <div style={{ height: "100vh" }}>
+      <WakaVideoCall {...args} />
+    </div>
+  ),
+}
+
+export const TwoParticipants: Story = {
+  args: {
+    participants: participants.slice(0, 2),
+    localParticipantId: "local",
+    layout: "grid",
+    callStartTime: new Date(),
+  },
+  render: (args) => (
+    <div style={{ height: "100vh" }}>
+      <WakaVideoCall {...args} />
+    </div>
+  ),
+}
+

package/src/components/waka-video-overlay/WakaVideoOverlay.stories.tsx

@@ -0,0 +1,100 @@
+import type { Meta, StoryObj } from "@storybook/react"
+import * as React from "react"
+import { WakaVideoOverlay } from "./index"
+import { WakaAdProvider } from "../waka-ad-provider"
+
+const meta: Meta<typeof WakaVideoOverlay> = {
+  title: "Sponsoring/WakaVideoOverlay",
+  component: WakaVideoOverlay,
+  parameters: { layout: "centered" },
+  tags: ["autodocs"],
+  argTypes: {
+    position: { control: "select", options: ["bottom", "top", "corner"], description: "Position" },
+    trigger: { control: "select", options: ["start", "pause", "time", "manual"], description: "Trigger" },
+    triggerTime: { control: "number", description: "Temps de déclenchement (sec)" },
+    dismissable: { control: "boolean", description: "Fermeture possible" },
+    hideAfter: { control: "number", description: "Masquer après (sec)" },
+    visible: { control: "boolean", description: "Visible" },
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof WakaVideoOverlay>
+
+const mockAd = {
+  id: "mock-ad-1",
+  imageUrl: "https://picsum.photos/seed/ad-video/600/300",
+  targetUrl: "https://example.com",
+  title: "Offre spéciale partenaires",
+  description: "Découvrez nos solutions pour booster votre croissance.",
+  sponsor: "WakaStart",
+  cta: "En savoir plus",
+}
+
+const MockedOverlay = (props: React.ComponentProps<typeof WakaVideoOverlay>) => {
+  React.useEffect(() => {
+    if (typeof window === "undefined") return
+    const originalFetch = window.fetch.bind(window)
+    window.fetch = async (input: RequestInfo, init?: RequestInit) => {
+      if (typeof input === "string" && input.startsWith("https://mock-ads.local")) {
+        return new Response(JSON.stringify(mockAd), {
+          status: 200,
+          headers: { "Content-Type": "application/json" },
+        })
+      }
+      return originalFetch(input, init)
+    }
+    return () => {
+      window.fetch = originalFetch
+    }
+  }, [])
+
+  return (
+    <WakaAdProvider
+      config={{
+        network: "custom",
+        customAdServer: "https://mock-ads.local",
+        enableConsent: false,
+        testMode: true,
+      }}
+    >
+      <div style={{ width: 640, height: 360, position: "relative", background: "#0f172a" }}>
+        <WakaVideoOverlay {...props} />
+      </div>
+    </WakaAdProvider>
+  )
+}
+
+export const Corner: Story = {
+  args: {
+    slotId: "video-ad-1",
+    position: "corner",
+    trigger: "manual",
+    visible: true,
+    dismissable: true,
+  },
+  render: (args) => <MockedOverlay {...args} />,
+}
+
+export const TopBanner: Story = {
+  args: {
+    slotId: "video-ad-2",
+    position: "top",
+    trigger: "manual",
+    visible: true,
+    dismissable: true,
+  },
+  render: (args) => <MockedOverlay {...args} />,
+}
+
+export const BottomBanner: Story = {
+  args: {
+    slotId: "video-ad-3",
+    position: "bottom",
+    trigger: "manual",
+    visible: true,
+    dismissable: true,
+  },
+  render: (args) => <MockedOverlay {...args} />,
+}
+