@wakastellar/ui 2.4.0 → 3.1.0

package/src/components/waka-ad-fallback/WakaAdFallback.stories.tsx

@@ -0,0 +1,117 @@
+import type { Meta, StoryObj } from "@storybook/react"
+import { WakaAdFallback } from "./index"
+import { WakaAdProvider } from "../waka-ad-provider"
+
+const mockAdConfig = {
+  network: "custom" as const,
+  testMode: true,
+}
+
+const meta: Meta<typeof WakaAdFallback> = {
+  title: "Components/Ads/WakaAdFallback",
+  component: WakaAdFallback,
+  parameters: {
+    layout: "centered",
+  },
+  tags: ["autodocs"],
+  decorators: [
+    (Story) => (
+      <WakaAdProvider config={mockAdConfig}>
+        <Story />
+      </WakaAdProvider>
+    ),
+  ],
+  argTypes: {
+    variant: {
+      control: "select",
+      options: ["house", "empty", "custom"],
+      description: "Fallback variant style",
+    },
+    size: {
+      control: "select",
+      options: ["leaderboard", "rectangle", "skyscraper", "billboard", "mobile-banner"],
+      description: "Ad size preset",
+    },
+    title: {
+      control: "text",
+      description: "Title text",
+    },
+    description: {
+      control: "text",
+      description: "Description text",
+    },
+    ctaText: {
+      control: "text",
+      description: "Call to action button text",
+    },
+    showBorder: {
+      control: "boolean",
+      description: "Show border around fallback",
+    },
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof WakaAdFallback>
+
+export const House: Story = {
+  args: {
+    variant: "house",
+    size: "rectangle",
+    title: "Your Ad Here",
+    description: "Advertise with us",
+    ctaText: "Learn More",
+    showBorder: true,
+  },
+  render: (args) => <WakaAdFallback {...args} />,
+}
+
+export const Empty: Story = {
+  args: {
+    variant: "empty",
+    size: "rectangle",
+    showBorder: true,
+  },
+  render: (args) => <WakaAdFallback {...args} />,
+}
+
+export const WithImage: Story = {
+  args: {
+    variant: "house",
+    size: "rectangle",
+    title: "Premium Subscription",
+    description: "Get access to all features",
+    ctaText: "Subscribe Now",
+    imageUrl: "https://picsum.photos/300/250",
+    showBorder: false,
+  },
+  render: (args) => <WakaAdFallback {...args} />,
+}
+
+export const Leaderboard: Story = {
+  args: {
+    variant: "house",
+    size: "leaderboard",
+    title: "Promote Your Brand",
+    description: "Reach millions of users",
+    ctaText: "Start Advertising",
+  },
+  render: (args) => <WakaAdFallback {...args} />,
+}
+
+export const CustomContent: Story = {
+  args: {
+    variant: "custom",
+    size: "rectangle",
+    children: (
+      <div className="flex items-center justify-center h-full bg-gradient-to-br from-purple-500 to-pink-500 text-white p-4">
+        <div className="text-center">
+          <h3 className="font-bold text-lg">Custom Fallback</h3>
+          <p className="text-sm opacity-80">Your custom content here</p>
+        </div>
+      </div>
+    ),
+  },
+  render: (args) => <WakaAdFallback {...args} />,
+}
+

package/src/components/waka-ad-inline/WakaAdInline.stories.tsx

@@ -0,0 +1,105 @@
+import type { Meta, StoryObj } from "@storybook/react"
+import { WakaAdInline } from "./index"
+import { WakaAdProvider } from "../waka-ad-provider"
+
+const mockAdConfig = {
+  network: "custom" as const,
+  testMode: true,
+  debugMode: true,
+}
+
+const meta: Meta<typeof WakaAdInline> = {
+  title: "Components/Ads/WakaAdInline",
+  component: WakaAdInline,
+  parameters: {
+    layout: "padded",
+  },
+  tags: ["autodocs"],
+  decorators: [
+    (Story) => (
+      <WakaAdProvider config={mockAdConfig}>
+        <div className="max-w-4xl mx-auto">
+          <p className="mb-4 text-muted-foreground">
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+          </p>
+          <Story />
+          <p className="mt-4 text-muted-foreground">
+            Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+          </p>
+        </div>
+      </WakaAdProvider>
+    ),
+  ],
+  argTypes: {
+    size: {
+      control: "select",
+      options: ["responsive", "rectangle", "leaderboard"],
+      description: "Ad size",
+    },
+    align: {
+      control: "select",
+      options: ["left", "center", "right"],
+      description: "Alignment within container",
+    },
+    margin: {
+      control: "select",
+      options: ["none", "sm", "md", "lg"],
+      description: "Vertical margin",
+    },
+    showSeparators: {
+      control: "boolean",
+      description: "Show separator lines",
+    },
+    label: {
+      control: "text",
+      description: "Label above the ad",
+    },
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof WakaAdInline>
+
+export const Default: Story = {
+  args: {
+    slotId: "inline-ad-1",
+    size: "responsive",
+    align: "center",
+    margin: "md",
+  },
+  render: (args) => <WakaAdInline {...args} />,
+}
+
+export const WithSeparators: Story = {
+  args: {
+    slotId: "inline-ad-2",
+    size: "leaderboard",
+    align: "center",
+    margin: "md",
+    showSeparators: true,
+    label: "Sponsored",
+  },
+  render: (args) => <WakaAdInline {...args} />,
+}
+
+export const LeftAligned: Story = {
+  args: {
+    slotId: "inline-ad-3",
+    size: "rectangle",
+    align: "left",
+    margin: "sm",
+  },
+  render: (args) => <WakaAdInline {...args} />,
+}
+
+export const WithCustomLabel: Story = {
+  args: {
+    slotId: "inline-ad-4",
+    size: "rectangle",
+    align: "center",
+    margin: "lg",
+    label: "Partner Content",
+  },
+  render: (args) => <WakaAdInline {...args} />,
+}
+

package/src/components/waka-ad-interstitial/WakaAdInterstitial.stories.tsx

@@ -0,0 +1,92 @@
+import type { Meta, StoryObj } from "@storybook/react"
+import { WakaAdInterstitial } from "./index"
+import { WakaAdProvider } from "../waka-ad-provider"
+import { Button } from "../button"
+import * as React from "react"
+
+const mockAdConfig = {
+  network: "custom" as const,
+  testMode: true,
+  debugMode: true,
+}
+
+const InterstitialDemo = (props: Partial<React.ComponentProps<typeof WakaAdInterstitial>>) => {
+  const [open, setOpen] = React.useState(false)
+
+  return (
+    <>
+      <Button onClick={() => setOpen(true)}>Show Interstitial</Button>
+      <WakaAdInterstitial
+        slotId="interstitial-1"
+        open={open}
+        onClose={() => setOpen(false)}
+        {...props}
+      />
+    </>
+  )
+}
+
+const meta: Meta<typeof WakaAdInterstitial> = {
+  title: "Components/Ads/WakaAdInterstitial",
+  component: WakaAdInterstitial,
+  parameters: {
+    layout: "centered",
+  },
+  tags: ["autodocs"],
+  decorators: [
+    (Story) => (
+      <WakaAdProvider config={mockAdConfig}>
+        <Story />
+      </WakaAdProvider>
+    ),
+  ],
+  argTypes: {
+    minDisplayTime: {
+      control: "number",
+      description: "Minimum display time before skip (seconds)",
+    },
+    autoCloseAfter: {
+      control: "number",
+      description: "Auto-close after duration (seconds, 0 = manual only)",
+    },
+    showCountdown: {
+      control: "boolean",
+      description: "Show countdown timer",
+    },
+    skipText: {
+      control: "text",
+      description: "Skip button text",
+    },
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof WakaAdInterstitial>
+
+export const Default: Story = {
+  args: {
+    minDisplayTime: 5,
+    showCountdown: true,
+    skipText: "Skip Ad",
+  },
+  render: (args) => <InterstitialDemo {...args} />,
+}
+
+export const NoSkip: Story = {
+  args: {
+    minDisplayTime: 0,
+    showCountdown: false,
+    skipText: "Close",
+  },
+  render: (args) => <InterstitialDemo {...args} />,
+}
+
+export const AutoClose: Story = {
+  args: {
+    minDisplayTime: 3,
+    autoCloseAfter: 10,
+    showCountdown: true,
+  },
+  render: (args) => <InterstitialDemo {...args} />,
+}
+

package/src/components/waka-ad-placeholder/WakaAdPlaceholder.stories.tsx

@@ -0,0 +1,89 @@
+import type { Meta, StoryObj } from "@storybook/react"
+import { WakaAdPlaceholder } from "./index"
+import { WakaAdProvider } from "../waka-ad-provider"
+
+const mockAdConfig = {
+  network: "custom" as const,
+  testMode: true,
+}
+
+const meta: Meta<typeof WakaAdPlaceholder> = {
+  title: "Components/Ads/WakaAdPlaceholder",
+  component: WakaAdPlaceholder,
+  parameters: {
+    layout: "centered",
+  },
+  tags: ["autodocs"],
+  decorators: [
+    (Story) => (
+      <WakaAdProvider config={mockAdConfig}>
+        <Story />
+      </WakaAdProvider>
+    ),
+  ],
+  argTypes: {
+    size: {
+      control: "select",
+      options: ["leaderboard", "rectangle", "skyscraper", "billboard", "mobile-banner"],
+      description: "Ad size preset",
+    },
+    animated: {
+      control: "boolean",
+      description: "Show animated skeleton",
+    },
+    showLabel: {
+      control: "boolean",
+      description: "Show loading text",
+    },
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof WakaAdPlaceholder>
+
+export const Rectangle: Story = {
+  args: {
+    size: "rectangle",
+    animated: true,
+    showLabel: true,
+  },
+  render: (args) => <WakaAdPlaceholder {...args} />,
+}
+
+export const Leaderboard: Story = {
+  args: {
+    size: "leaderboard",
+    animated: true,
+    showLabel: true,
+  },
+  render: (args) => <WakaAdPlaceholder {...args} />,
+}
+
+export const Skyscraper: Story = {
+  args: {
+    size: "skyscraper",
+    animated: true,
+    showLabel: true,
+  },
+  render: (args) => <WakaAdPlaceholder {...args} />,
+}
+
+export const Static: Story = {
+  args: {
+    size: "rectangle",
+    animated: false,
+    showLabel: false,
+  },
+  render: (args) => <WakaAdPlaceholder {...args} />,
+}
+
+export const CustomSize: Story = {
+  args: {
+    width: 400,
+    height: 200,
+    animated: true,
+    showLabel: true,
+  },
+  render: (args) => <WakaAdPlaceholder {...args} />,
+}
+

package/src/components/waka-ad-provider/WakaAdProvider.stories.tsx

@@ -0,0 +1,110 @@
+import type { Meta, StoryObj } from "@storybook/react"
+import { WakaAdProvider, useAdContext, useAdConsent } from "./index"
+import { WakaAdBanner } from "../waka-ad-banner"
+import { Button } from "../button"
+import * as React from "react"
+
+const AdContextDemo = () => {
+  const { isReady, hasConsent, config, slots } = useAdContext()
+  const { setConsent } = useAdConsent()
+
+  return (
+    <div className="space-y-4 p-4 border rounded-lg">
+      <h3 className="font-semibold">Ad Provider Status</h3>
+      <div className="grid grid-cols-2 gap-2 text-sm">
+        <div>Network:</div>
+        <div className="font-mono">{config.network}</div>
+        <div>Ready:</div>
+        <div className={isReady ? "text-green-500" : "text-yellow-500"}>
+          {isReady ? "Yes" : "Loading..."}
+        </div>
+        <div>Consent:</div>
+        <div className={hasConsent ? "text-green-500" : "text-red-500"}>
+          {hasConsent === null ? "Pending" : hasConsent ? "Granted" : "Denied"}
+        </div>
+        <div>Registered Slots:</div>
+        <div>{slots.size}</div>
+      </div>
+
+      <div className="flex gap-2">
+        <Button size="sm" onClick={() => setConsent(true)}>
+          Grant Consent
+        </Button>
+        <Button size="sm" variant="outline" onClick={() => setConsent(false)}>
+          Deny Consent
+        </Button>
+      </div>
+
+      <div className="pt-4">
+        <WakaAdBanner slotId="demo-ad" size="rectangle" />
+      </div>
+    </div>
+  )
+}
+
+const meta: Meta<typeof WakaAdProvider> = {
+  title: "Components/Ads/WakaAdProvider",
+  component: WakaAdProvider,
+  parameters: {
+    layout: "centered",
+  },
+  tags: ["autodocs"],
+  argTypes: {
+    config: {
+      description: "Ad configuration object",
+    },
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof WakaAdProvider>
+
+export const Default: Story = {
+  args: {
+    config: {
+      network: "custom",
+      testMode: true,
+      debugMode: true,
+      enableConsent: true,
+    },
+  },
+  render: (args) => (
+    <WakaAdProvider {...args}>
+      <AdContextDemo />
+    </WakaAdProvider>
+  ),
+}
+
+export const WithGPT: Story = {
+  args: {
+    config: {
+      network: "gpt",
+      gptNetworkCode: "/12345/example",
+      enableLazyLoad: true,
+      debugMode: true,
+    },
+  },
+  render: (args) => (
+    <WakaAdProvider {...args}>
+      <AdContextDemo />
+    </WakaAdProvider>
+  ),
+}
+
+export const CustomAdServer: Story = {
+  args: {
+    config: {
+      network: "custom",
+      customAdServer: "https://ads.example.com",
+      customApiKey: "test-api-key",
+      testMode: true,
+      debugMode: true,
+    },
+  },
+  render: (args) => (
+    <WakaAdProvider {...args}>
+      <AdContextDemo />
+    </WakaAdProvider>
+  ),
+}
+

package/src/components/waka-ad-sidebar/WakaAdSidebar.stories.tsx

@@ -0,0 +1,89 @@
+import type { Meta, StoryObj } from "@storybook/react"
+import { WakaAdSidebar } from "./index"
+import { WakaAdProvider } from "../waka-ad-provider"
+
+const mockAdConfig = {
+  network: "custom" as const,
+  testMode: true,
+  debugMode: true,
+}
+
+const meta: Meta<typeof WakaAdSidebar> = {
+  title: "Components/Ads/WakaAdSidebar",
+  component: WakaAdSidebar,
+  parameters: {
+    layout: "fullscreen",
+  },
+  tags: ["autodocs"],
+  decorators: [
+    (Story) => (
+      <WakaAdProvider config={mockAdConfig}>
+        <div className="flex min-h-[200vh]">
+          <div className="flex-1 p-8">
+            <h2 className="text-2xl font-bold mb-4">Main Content</h2>
+            <p className="text-muted-foreground mb-4">
+              Scroll down to see the sticky sidebar ad behavior.
+            </p>
+            {Array.from({ length: 20 }).map((_, i) => (
+              <p key={i} className="mb-4 text-muted-foreground">
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+              </p>
+            ))}
+          </div>
+          <div className="w-[200px] p-4 bg-muted/30">
+            <Story />
+          </div>
+        </div>
+      </WakaAdProvider>
+    ),
+  ],
+  argTypes: {
+    sticky: {
+      control: "boolean",
+      description: "Enable sticky behavior",
+    },
+    stickyOffset: {
+      control: "number",
+      description: "Top offset when sticky (pixels)",
+    },
+    gap: {
+      control: "number",
+      description: "Gap between multiple ads",
+    },
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof WakaAdSidebar>
+
+export const Default: Story = {
+  args: {
+    slotId: "sidebar-ad-1",
+    sticky: true,
+    stickyOffset: 80,
+  },
+  render: (args) => <WakaAdSidebar {...args} />,
+}
+
+export const WithAdditionalSlots: Story = {
+  args: {
+    slotId: "sidebar-ad-main",
+    sticky: true,
+    stickyOffset: 80,
+    gap: 16,
+    additionalSlots: [
+      { slotId: "sidebar-ad-2" },
+      { slotId: "sidebar-ad-3" },
+    ],
+  },
+  render: (args) => <WakaAdSidebar {...args} />,
+}
+
+export const NonSticky: Story = {
+  args: {
+    slotId: "sidebar-ad-static",
+    sticky: false,
+  },
+  render: (args) => <WakaAdSidebar {...args} />,
+}
+

package/src/components/waka-ad-sidebar/index.tsx

@@ -51,10 +51,11 @@ export function WakaAdSidebar({
         if (boundaryRect) {
           const maxTop = boundaryRect.top - container.offsetHeight - gap
           if (maxTop < stickyOffset) {
-            // Stop at boundary
+            // Stop at boundary - cast to HTMLElement for offsetTop access
+            const boundaryElement = boundary as HTMLElement
             setStickyStyle({
               position: "absolute",
-              top: boundary!.offsetTop - container.offsetHeight - gap,
+              top: boundaryElement.offsetTop - container.offsetHeight - gap,
               width: containerRect.width,
             })
             setIsSticky(false)

package/src/components/waka-ad-sticky-footer/WakaAdStickyFooter.stories.tsx

@@ -0,0 +1,88 @@
+import type { Meta, StoryObj } from "@storybook/react"
+import { WakaAdStickyFooter } from "./index"
+import { WakaAdProvider } from "../waka-ad-provider"
+
+const mockAdConfig = {
+  network: "custom" as const,
+  testMode: true,
+  debugMode: true,
+}
+
+const meta: Meta<typeof WakaAdStickyFooter> = {
+  title: "Components/Ads/WakaAdStickyFooter",
+  component: WakaAdStickyFooter,
+  parameters: {
+    layout: "fullscreen",
+  },
+  tags: ["autodocs"],
+  decorators: [
+    (Story) => (
+      <WakaAdProvider config={mockAdConfig}>
+        <div className="min-h-screen p-8 pb-24">
+          <h2 className="text-2xl font-bold mb-4">Page Content</h2>
+          <p className="text-muted-foreground">
+            The sticky footer ad will appear at the bottom of the viewport.
+          </p>
+        </div>
+        <Story />
+      </WakaAdProvider>
+    ),
+  ],
+  argTypes: {
+    dismissable: {
+      control: "boolean",
+      description: "Allow user to dismiss",
+    },
+    showCloseAfter: {
+      control: "number",
+      description: "Show close button after delay (seconds)",
+    },
+    animation: {
+      control: "select",
+      options: ["slide", "fade", "none"],
+      description: "Animation style",
+    },
+    blur: {
+      control: "boolean",
+      description: "Background blur effect",
+    },
+    safeAreaPadding: {
+      control: "boolean",
+      description: "Safe area padding for mobile",
+    },
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof WakaAdStickyFooter>
+
+export const Default: Story = {
+  args: {
+    slotId: "sticky-footer-1",
+    dismissable: true,
+    showCloseAfter: 0,
+    animation: "slide",
+    blur: true,
+  },
+  render: (args) => <WakaAdStickyFooter {...args} />,
+}
+
+export const DelayedClose: Story = {
+  args: {
+    slotId: "sticky-footer-2",
+    dismissable: true,
+    showCloseAfter: 5,
+    animation: "slide",
+  },
+  render: (args) => <WakaAdStickyFooter {...args} />,
+}
+
+export const NonDismissable: Story = {
+  args: {
+    slotId: "sticky-footer-3",
+    dismissable: false,
+    animation: "fade",
+  },
+  render: (args) => <WakaAdStickyFooter {...args} />,
+}
+