@wakastellar/ui 2.1.2 → 2.3.2

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

@@ -0,0 +1,329 @@
+"use client"
+
+import * as React from "react"
+import { createContext, useContext, useState, useEffect, useCallback, useRef } from "react"
+
+// ==================== Types ====================
+
+export type AdNetwork = "gpt" | "custom" | "adsense"
+export type AdSize = "leaderboard" | "rectangle" | "skyscraper" | "billboard" | "mobile-banner" | "custom"
+export type AdPosition = "top" | "bottom" | "sidebar" | "inline" | "interstitial" | "sticky"
+
+export interface AdSlot {
+  id: string
+  network: AdNetwork
+  size: AdSize
+  position: AdPosition
+  targeting?: Record<string, string | string[]>
+  refreshInterval?: number // in seconds, 0 = no refresh
+  lazyLoad?: boolean
+  customWidth?: number
+  customHeight?: number
+}
+
+export interface AdConfig {
+  network: AdNetwork
+  publisherId?: string
+  // GPT specific
+  gptNetworkCode?: string
+  gptAdUnits?: Record<string, string>
+  // Custom ad server
+  customAdServer?: string
+  customApiKey?: string
+  // General settings
+  enableLazyLoad?: boolean
+  lazyLoadOffset?: number // pixels before viewport
+  enableRefresh?: boolean
+  defaultRefreshInterval?: number // seconds
+  enableConsent?: boolean
+  testMode?: boolean
+  debugMode?: boolean
+}
+
+export interface AdEvent {
+  type: "impression" | "click" | "viewable" | "error" | "loaded" | "empty"
+  slotId: string
+  timestamp: Date
+  data?: Record<string, unknown>
+}
+
+export interface CustomAd {
+  id: string
+  imageUrl?: string
+  videoUrl?: string
+  targetUrl: string
+  title?: string
+  description?: string
+  sponsor?: string
+  cta?: string
+  trackingPixels?: string[]
+  impressionUrl?: string
+  clickUrl?: string
+}
+
+interface AdContextValue {
+  config: AdConfig
+  isReady: boolean
+  hasConsent: boolean | null
+  setConsent: (consent: boolean) => void
+  registerSlot: (slot: AdSlot) => void
+  unregisterSlot: (slotId: string) => void
+  refreshSlot: (slotId: string) => void
+  refreshAll: () => void
+  getCustomAd: (slotId: string) => Promise<CustomAd | null>
+  trackEvent: (event: AdEvent) => void
+  slots: Map<string, AdSlot>
+}
+
+// ==================== Size Definitions ====================
+
+export const AD_SIZES: Record<AdSize, { width: number; height: number; label: string }> = {
+  leaderboard: { width: 728, height: 90, label: "Leaderboard (728x90)" },
+  rectangle: { width: 300, height: 250, label: "Medium Rectangle (300x250)" },
+  skyscraper: { width: 160, height: 600, label: "Wide Skyscraper (160x600)" },
+  billboard: { width: 970, height: 250, label: "Billboard (970x250)" },
+  "mobile-banner": { width: 320, height: 50, label: "Mobile Banner (320x50)" },
+  custom: { width: 0, height: 0, label: "Custom Size" },
+}
+
+// ==================== Context ====================
+
+const AdContext = createContext<AdContextValue | null>(null)
+
+export function useAdContext() {
+  const context = useContext(AdContext)
+  if (!context) {
+    throw new Error("useAdContext must be used within WakaAdProvider")
+  }
+  return context
+}
+
+// ==================== Hooks ====================
+
+export function useAdVisibility(ref: React.RefObject<HTMLElement>, threshold = 0.5) {
+  const [isVisible, setIsVisible] = useState(false)
+  const [viewableTime, setViewableTime] = useState(0)
+  const viewableStartRef = useRef<number | null>(null)
+
+  useEffect(() => {
+    if (!ref.current) return
+
+    const observer = new IntersectionObserver(
+      ([entry]) => {
+        const nowVisible = entry.intersectionRatio >= threshold
+        setIsVisible(nowVisible)
+
+        if (nowVisible && !viewableStartRef.current) {
+          viewableStartRef.current = Date.now()
+        } else if (!nowVisible && viewableStartRef.current) {
+          setViewableTime((prev) => prev + (Date.now() - viewableStartRef.current!))
+          viewableStartRef.current = null
+        }
+      },
+      { threshold: [0, threshold, 1] }
+    )
+
+    observer.observe(ref.current)
+    return () => observer.disconnect()
+  }, [ref, threshold])
+
+  return { isVisible, viewableTime }
+}
+
+export function useAdConsent() {
+  const { hasConsent, setConsent } = useAdContext()
+  return { hasConsent, setConsent }
+}
+
+export function useAdSlot(slot: AdSlot) {
+  const { registerSlot, unregisterSlot, refreshSlot, isReady } = useAdContext()
+
+  useEffect(() => {
+    if (isReady) {
+      registerSlot(slot)
+      return () => unregisterSlot(slot.id)
+    }
+  }, [slot.id, isReady, registerSlot, unregisterSlot, slot])
+
+  const refresh = useCallback(() => refreshSlot(slot.id), [slot.id, refreshSlot])
+
+  return { refresh, isReady }
+}
+
+// ==================== Provider ====================
+
+interface WakaAdProviderProps {
+  children: React.ReactNode
+  config: AdConfig
+  onEvent?: (event: AdEvent) => void
+}
+
+export function WakaAdProvider({ children, config, onEvent }: WakaAdProviderProps) {
+  const [isReady, setIsReady] = useState(false)
+  const [hasConsent, setHasConsent] = useState<boolean | null>(null)
+  const [slots, setSlots] = useState<Map<string, AdSlot>>(new Map())
+  const eventQueueRef = useRef<AdEvent[]>([])
+
+  // Initialize ad network
+  useEffect(() => {
+    const initNetwork = async () => {
+      if (config.network === "gpt" && typeof window !== "undefined") {
+        // Load GPT script
+        if (!window.googletag) {
+          const script = document.createElement("script")
+          script.src = "https://securepubads.g.doubleclick.net/tag/js/gpt.js"
+          script.async = true
+          document.head.appendChild(script)
+
+          await new Promise<void>((resolve) => {
+            script.onload = () => resolve()
+          })
+        }
+
+        window.googletag = window.googletag || { cmd: [] }
+        window.googletag.cmd.push(() => {
+          window.googletag.pubads().enableSingleRequest()
+          if (config.enableLazyLoad) {
+            window.googletag.pubads().enableLazyLoad({
+              fetchMarginPercent: 100,
+              renderMarginPercent: config.lazyLoadOffset || 50,
+              mobileScaling: 2.0,
+            })
+          }
+          window.googletag.enableServices()
+        })
+      }
+
+      setIsReady(true)
+    }
+
+    initNetwork()
+  }, [config])
+
+  // Check for existing consent
+  useEffect(() => {
+    if (config.enableConsent && typeof window !== "undefined") {
+      // Check for TCF v2 consent
+      const storedConsent = localStorage.getItem("ad_consent")
+      if (storedConsent !== null) {
+        setHasConsent(storedConsent === "true")
+      }
+    } else {
+      setHasConsent(true) // No consent required
+    }
+  }, [config.enableConsent])
+
+  const setConsent = useCallback((consent: boolean) => {
+    setHasConsent(consent)
+    if (typeof window !== "undefined") {
+      localStorage.setItem("ad_consent", String(consent))
+    }
+  }, [])
+
+  const registerSlot = useCallback((slot: AdSlot) => {
+    setSlots((prev) => {
+      const newSlots = new Map(prev)
+      newSlots.set(slot.id, slot)
+      return newSlots
+    })
+  }, [])
+
+  const unregisterSlot = useCallback((slotId: string) => {
+    setSlots((prev) => {
+      const newSlots = new Map(prev)
+      newSlots.delete(slotId)
+      return newSlots
+    })
+  }, [])
+
+  const refreshSlot = useCallback(
+    (slotId: string) => {
+      if (config.network === "gpt" && window.googletag) {
+        window.googletag.cmd.push(() => {
+          window.googletag.pubads().refresh()
+        })
+      }
+      // For custom network, trigger re-fetch
+    },
+    [config.network]
+  )
+
+  const refreshAll = useCallback(() => {
+    slots.forEach((_, slotId) => refreshSlot(slotId))
+  }, [slots, refreshSlot])
+
+  const getCustomAd = useCallback(
+    async (slotId: string): Promise<CustomAd | null> => {
+      if (!config.customAdServer) return null
+
+      try {
+        const response = await fetch(`${config.customAdServer}/ad`, {
+          method: "POST",
+          headers: {
+            "Content-Type": "application/json",
+            ...(config.customApiKey && { Authorization: `Bearer ${config.customApiKey}` }),
+          },
+          body: JSON.stringify({
+            slotId,
+            slot: slots.get(slotId),
+            testMode: config.testMode,
+          }),
+        })
+
+        if (!response.ok) return null
+        return response.json()
+      } catch {
+        return null
+      }
+    },
+    [config.customAdServer, config.customApiKey, config.testMode, slots]
+  )
+
+  const trackEvent = useCallback(
+    (event: AdEvent) => {
+      if (config.debugMode) {
+        console.log("[WakaAd]", event.type, event.slotId, event.data)
+      }
+      onEvent?.(event)
+      eventQueueRef.current.push(event)
+    },
+    [config.debugMode, onEvent]
+  )
+
+  const value: AdContextValue = {
+    config,
+    isReady,
+    hasConsent,
+    setConsent,
+    registerSlot,
+    unregisterSlot,
+    refreshSlot,
+    refreshAll,
+    getCustomAd,
+    trackEvent,
+    slots,
+  }
+
+  return <AdContext.Provider value={value}>{children}</AdContext.Provider>
+}
+
+// ==================== Type augmentation for GPT ====================
+
+declare global {
+  interface Window {
+    googletag: {
+      cmd: Array<() => void>
+      defineSlot: (adUnitPath: string, size: [number, number], divId: string) => unknown
+      pubads: () => {
+        enableSingleRequest: () => void
+        enableLazyLoad: (config: Record<string, unknown>) => void
+        refresh: () => void
+        setTargeting: (key: string, value: string | string[]) => void
+      }
+      enableServices: () => void
+      display: (divId: string) => void
+    }
+  }
+}
+
+export default WakaAdProvider

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

@@ -0,0 +1,113 @@
+"use client"
+
+import * as React from "react"
+import { useRef, useState, useEffect } from "react"
+import { cn } from "../../utils/cn"
+import { WakaAdBanner, type WakaAdBannerProps } from "../waka-ad-banner"
+
+export interface WakaAdSidebarProps extends Omit<WakaAdBannerProps, "size"> {
+  /** Enable sticky behavior */
+  sticky?: boolean
+  /** Top offset when sticky (in pixels) */
+  stickyOffset?: number
+  /** Bottom boundary element selector */
+  boundarySelector?: string
+  /** Gap between multiple ads */
+  gap?: number
+  /** Additional ads to show below */
+  additionalSlots?: Array<{
+    slotId: string
+    adUnitPath?: string
+  }>
+}
+
+export function WakaAdSidebar({
+  slotId,
+  sticky = true,
+  stickyOffset = 80,
+  boundarySelector,
+  gap = 16,
+  additionalSlots = [],
+  className,
+  ...bannerProps
+}: WakaAdSidebarProps) {
+  const containerRef = useRef<HTMLDivElement>(null)
+  const [isSticky, setIsSticky] = useState(false)
+  const [stickyStyle, setStickyStyle] = useState<React.CSSProperties>({})
+
+  useEffect(() => {
+    if (!sticky || !containerRef.current) return
+
+    const container = containerRef.current
+    const boundary = boundarySelector ? document.querySelector(boundarySelector) : null
+
+    const handleScroll = () => {
+      const containerRect = container.getBoundingClientRect()
+      const boundaryRect = boundary?.getBoundingClientRect()
+
+      // Check if we should be sticky
+      if (containerRect.top <= stickyOffset) {
+        // Check if we've hit the boundary
+        if (boundaryRect) {
+          const maxTop = boundaryRect.top - container.offsetHeight - gap
+          if (maxTop < stickyOffset) {
+            // Stop at boundary
+            setStickyStyle({
+              position: "absolute",
+              top: boundary!.offsetTop - container.offsetHeight - gap,
+              width: containerRect.width,
+            })
+            setIsSticky(false)
+            return
+          }
+        }
+
+        setIsSticky(true)
+        setStickyStyle({
+          position: "fixed",
+          top: stickyOffset,
+          width: containerRect.width,
+        })
+      } else {
+        setIsSticky(false)
+        setStickyStyle({})
+      }
+    }
+
+    window.addEventListener("scroll", handleScroll, { passive: true })
+    handleScroll() // Initial check
+
+    return () => window.removeEventListener("scroll", handleScroll)
+  }, [sticky, stickyOffset, boundarySelector, gap])
+
+  return (
+    <div
+      ref={containerRef}
+      className={cn("relative", className)}
+      data-sticky={isSticky}
+    >
+      <div style={stickyStyle}>
+        <div className="flex flex-col" style={{ gap }}>
+          <WakaAdBanner
+            slotId={slotId}
+            size="skyscraper"
+            {...bannerProps}
+          />
+
+          {additionalSlots.map((slot, index) => (
+            <WakaAdBanner
+              key={slot.slotId}
+              slotId={slot.slotId}
+              size="rectangle"
+              adUnitPath={slot.adUnitPath}
+              lazyLoad
+              {...bannerProps}
+            />
+          ))}
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default WakaAdSidebar

package/src/components/waka-ad-sticky-footer/index.tsx

@@ -0,0 +1,125 @@
+"use client"
+
+import * as React from "react"
+import { useState, useEffect } from "react"
+import { cn } from "../../utils/cn"
+import { WakaAdBanner, type WakaAdBannerProps } from "../waka-ad-banner"
+import { X } from "lucide-react"
+
+export interface WakaAdStickyFooterProps extends Omit<WakaAdBannerProps, "size"> {
+  /** Allow user to dismiss */
+  dismissable?: boolean
+  /** Show close button after delay (seconds) */
+  showCloseAfter?: number
+  /** Animation style */
+  animation?: "slide" | "fade" | "none"
+  /** Safe area padding (for mobile notches) */
+  safeAreaPadding?: boolean
+  /** Background blur */
+  blur?: boolean
+  /** Container class name */
+  containerClassName?: string
+}
+
+export function WakaAdStickyFooter({
+  slotId,
+  dismissable = true,
+  showCloseAfter = 0,
+  animation = "slide",
+  safeAreaPadding = true,
+  blur = true,
+  className,
+  containerClassName,
+  ...bannerProps
+}: WakaAdStickyFooterProps) {
+  const [isVisible, setIsVisible] = useState(true)
+  const [canClose, setCanClose] = useState(showCloseAfter === 0)
+  const [isAnimatingOut, setIsAnimatingOut] = useState(false)
+
+  // Delayed close button
+  useEffect(() => {
+    if (showCloseAfter > 0 && !canClose) {
+      const timer = setTimeout(() => {
+        setCanClose(true)
+      }, showCloseAfter * 1000)
+      return () => clearTimeout(timer)
+    }
+  }, [showCloseAfter, canClose])
+
+  const handleClose = () => {
+    if (!dismissable || !canClose) return
+
+    if (animation !== "none") {
+      setIsAnimatingOut(true)
+      setTimeout(() => {
+        setIsVisible(false)
+      }, 300)
+    } else {
+      setIsVisible(false)
+    }
+  }
+
+  if (!isVisible) return null
+
+  const animationClasses = {
+    slide: cn(
+      "transition-transform duration-300",
+      isAnimatingOut ? "translate-y-full" : "translate-y-0"
+    ),
+    fade: cn(
+      "transition-opacity duration-300",
+      isAnimatingOut ? "opacity-0" : "opacity-100"
+    ),
+    none: "",
+  }
+
+  return (
+    <div
+      className={cn(
+        "fixed bottom-0 left-0 right-0 z-40",
+        blur && "backdrop-blur-sm",
+        safeAreaPadding && "pb-safe",
+        animationClasses[animation],
+        containerClassName
+      )}
+      role="complementary"
+      aria-label="Advertisement"
+    >
+      <div
+        className={cn(
+          "relative flex items-center justify-center",
+          "bg-background/95 border-t border-border shadow-lg",
+          "py-2 px-4",
+          className
+        )}
+      >
+        {/* Close button */}
+        {dismissable && (
+          <button
+            onClick={handleClose}
+            disabled={!canClose}
+            className={cn(
+              "absolute top-1 right-1 p-1 rounded-full transition-all",
+              canClose
+                ? "bg-muted hover:bg-muted-foreground/20 text-muted-foreground hover:text-foreground cursor-pointer"
+                : "bg-muted/50 text-muted-foreground/50 cursor-not-allowed"
+            )}
+            aria-label="Close advertisement"
+          >
+            <X className="h-4 w-4" />
+          </button>
+        )}
+
+        {/* Ad content */}
+        <WakaAdBanner
+          slotId={slotId}
+          size="mobile-banner"
+          showBadge={false}
+          {...bannerProps}
+        />
+      </div>
+    </div>
+  )
+}
+
+export default WakaAdStickyFooter