@wakastellar/ui 2.3.0 → 2.3.2

package/dist/utils/security.d.ts

@@ -0,0 +1,96 @@
+/**
+ * Security utilities for sanitizing user input and preventing XSS/injection attacks.
+ *
+ * @module security
+ */
+/**
+ * Validates and sanitizes a URL to prevent javascript: protocol attacks.
+ *
+ * @param url - The URL to validate
+ * @returns The sanitized URL if safe, or undefined if potentially malicious
+ *
+ * @example
+ * ```ts
+ * const safeUrl = sanitizeUrl("https://example.com") // "https://example.com"
+ * const blocked = sanitizeUrl("javascript:alert(1)") // undefined
+ * ```
+ *
+ * @security
+ * This function blocks:
+ * - javascript: protocol URLs
+ * - data: protocol URLs (except data:image for specific use cases)
+ * - vbscript: protocol URLs
+ * - URLs with encoded dangerous protocols
+ */
+export declare function sanitizeUrl(url: string | undefined | null): string | undefined;
+/**
+ * Safely navigates to a URL after validation.
+ * Use this instead of directly assigning to window.location.href.
+ *
+ * @param url - The URL to navigate to
+ * @returns true if navigation was performed, false if blocked
+ *
+ * @example
+ * ```ts
+ * // Safe navigation
+ * safeNavigate("https://example.com") // navigates
+ * safeNavigate("javascript:alert(1)") // blocked, returns false
+ * ```
+ */
+export declare function safeNavigate(url: string | undefined | null): boolean;
+/**
+ * Escapes special regex characters in a string.
+ * Use this when creating RegExp from user input to prevent ReDoS attacks.
+ *
+ * @param str - The string to escape
+ * @returns The escaped string safe for use in RegExp
+ *
+ * @example
+ * ```ts
+ * const pattern = escapeRegex("user.name") // "user\\.name"
+ * const regex = new RegExp(pattern, "i")
+ * ```
+ *
+ * @security
+ * This prevents:
+ * - ReDoS (Regular Expression Denial of Service) attacks
+ * - Unintended regex matching due to special characters
+ */
+export declare function escapeRegex(str: string): string;
+/**
+ * Creates a safe RegExp from user input by escaping special characters.
+ *
+ * @param pattern - The pattern string (will be escaped)
+ * @param flags - Optional regex flags
+ * @returns A safe RegExp instance
+ *
+ * @example
+ * ```ts
+ * const regex = createSafeRegex("search.term", "gi")
+ * // Matches literal "search.term" not "search" + any char + "term"
+ * ```
+ */
+export declare function createSafeRegex(pattern: string, flags?: string): RegExp;
+/**
+ * Creates a RegExp for highlighting text in search results.
+ * Escapes the search term and wraps in capture group for splitting.
+ *
+ * @param searchTerm - The term to highlight
+ * @returns A case-insensitive RegExp for highlighting
+ *
+ * @example
+ * ```ts
+ * const regex = createHighlightRegex("search")
+ * const parts = "Search results".split(regex)
+ * // ["", "Search", " results"]
+ * ```
+ */
+export declare function createHighlightRegex(searchTerm: string): RegExp;
+/**
+ * Sanitizes HTML content by escaping dangerous characters.
+ * Use when displaying user-generated content.
+ *
+ * @param html - The HTML string to sanitize
+ * @returns Escaped HTML safe for display
+ */
+export declare function escapeHtml(html: string): string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wakastellar/ui",
-  "version": "2.3.0",
+  "version": "2.3.2",
   "description": "Zero-config UI Library for Next.js with TweakCN theming and i18n support",
   "keywords": [
     "ui",
@@ -107,7 +107,7 @@
     "@tiptap/extension-underline": "^2.0.0 || ^3.0.0",
     "@tiptap/react": "^2.0.0 || ^3.0.0",
     "@tiptap/starter-kit": "^2.0.0 || ^3.0.0",
-    "jspdf": "*",
+    "jspdf": ">=4.0.0",
     "jspdf-autotable": "*",
     "next": ">=14.0.0",
     "react": ">=18.0.0",
@@ -165,12 +165,12 @@
     "@vitest/coverage-v8": "^3.2.4",
     "@vitest/ui": "^3.2.4",
     "autoprefixer": "^10.4.16",
-    "esbuild": "^0.24.2",
+    "esbuild": "^0.25.0",
     "jsdom": "^23.0.1",
     "playwright": "^1.56.0",
     "postcss": "^8.4.31",
     "react-hook-form": "^7.70.0",
-    "storybook": "^9.1.10",
+    "storybook": "^9.1.17",
     "tailwindcss": "^4.1.8",
     "typescript": "^5.5.0",
     "vite": "^7.1.9",

package/src/blocks/sidebar/index.tsx

@@ -554,13 +554,13 @@ export function WakaSidebar({
     onClose: () => setIsOpen(false),
   }
 
-  // Styles personnalisés
+  // Styles personnalisés - utilise les variables CSS du thème par défaut
   const customStyles = {
-    "--sidebar-bg": backgroundColor || "hsl(222 47% 11%)",
-    "--sidebar-text": textColor || "hsl(210 40% 96%)",
-    "--sidebar-active": activeColor || "hsl(187 85% 43%)",
-    "--sidebar-active-foreground": "hsl(222 47% 11%)",
-    "--sidebar-hover": hoverColor || "rgba(255, 255, 255, 0.1)",
+    "--sidebar-bg": backgroundColor || "hsl(var(--sidebar-background, var(--card)))",
+    "--sidebar-text": textColor || "hsl(var(--sidebar-foreground, var(--card-foreground)))",
+    "--sidebar-active": activeColor || "hsl(var(--sidebar-primary, var(--primary)))",
+    "--sidebar-active-foreground": "hsl(var(--sidebar-primary-foreground, var(--primary-foreground)))",
+    "--sidebar-hover": hoverColor || "hsl(var(--sidebar-accent, var(--accent)))",
   } as React.CSSProperties
 
   const sidebarClasses = cn(

package/src/components/DataTable/templates/index.tsx

@@ -28,6 +28,7 @@ import {
   AlertDialogTitle,
 } from "../../alert-dialog"
 import { cn } from "../../../utils/cn"
+import { createHighlightRegex } from "../../../utils/security"
 import { formatters } from "../formatters"
 import type { ColumnTemplate, ColumnTemplateOptions, ColumnTemplateAction } from "../types"
 
@@ -715,9 +716,9 @@ export const textTemplate: ColumnTemplate<unknown, unknown> = {
       ? formatters.truncate(strValue, options.maxLength)
       : strValue
 
-    // Highlight si spécifié
+    // Highlight si spécifié (with escaped regex for security)
     if (options?.highlight) {
-      const regex = new RegExp(`(${options.highlight})`, "gi")
+      const regex = createHighlightRegex(options.highlight)
       const parts = displayValue.split(regex)
 
       return (

package/src/components/index.ts

@@ -555,3 +555,97 @@ export {
   type NodeType,
   type WakaQueryExplainProps,
 } from './waka-query-explain'
+
+// Advertising Components
+export {
+  WakaAdProvider,
+  useAdContext,
+  useAdVisibility,
+  useAdConsent,
+  useAdSlot,
+  AD_SIZES,
+  type AdNetwork,
+  type AdSize,
+  type AdPosition,
+  type AdSlot,
+  type AdConfig,
+  type AdEvent,
+  type CustomAd,
+} from './waka-ad-provider'
+
+export {
+  WakaAdBanner,
+  type WakaAdBannerProps,
+} from './waka-ad-banner'
+
+export {
+  WakaAdPlaceholder,
+  type WakaAdPlaceholderProps,
+} from './waka-ad-placeholder'
+
+export {
+  WakaAdFallback,
+  type WakaAdFallbackProps,
+  type AdFallbackVariant,
+} from './waka-ad-fallback'
+
+export {
+  WakaSponsoredBadge,
+  type WakaSponsoredBadgeProps,
+  type SponsoredBadgeVariant,
+  type SponsoredBadgeSize,
+} from './waka-sponsored-badge'
+
+export {
+  WakaAdSidebar,
+  type WakaAdSidebarProps,
+} from './waka-ad-sidebar'
+
+export {
+  WakaAdInline,
+  type WakaAdInlineProps,
+} from './waka-ad-inline'
+
+export {
+  WakaAdInterstitial,
+  type WakaAdInterstitialProps,
+} from './waka-ad-interstitial'
+
+export {
+  WakaAdStickyFooter,
+  type WakaAdStickyFooterProps,
+} from './waka-ad-sticky-footer'
+
+export {
+  WakaSponsoredCard,
+  type WakaSponsoredCardProps,
+  type SponsoredCardVariant,
+} from './waka-sponsored-card'
+
+export {
+  WakaSponsoredFeed,
+  type WakaSponsoredFeedProps,
+} from './waka-sponsored-feed'
+
+export {
+  WakaContentRecommendation,
+  type WakaContentRecommendationProps,
+  type RecommendationLayout,
+} from './waka-content-recommendation'
+
+export {
+  WakaVideoAd,
+  type WakaVideoAdProps,
+} from './waka-video-ad'
+
+export {
+  WakaOutstreamVideo,
+  type WakaOutstreamVideoProps,
+} from './waka-outstream-video'
+
+export {
+  WakaVideoOverlay,
+  type WakaVideoOverlayProps,
+  type OverlayPosition,
+  type OverlayTrigger,
+} from './waka-video-overlay'

package/src/components/waka-3d-pie-chart/index.tsx

@@ -127,18 +127,18 @@ export function Waka3DPieChart({
     })
   }, [data, total])
 
-  // Default colors
+  // Default colors - using CSS variables for theme support
   const defaultColors = [
-    "#3b82f6", // blue
-    "#ef4444", // red
-    "#22c55e", // green
-    "#f59e0b", // amber
-    "#8b5cf6", // violet
-    "#ec4899", // pink
-    "#14b8a6", // teal
-    "#f97316", // orange
-    "#6366f1", // indigo
-    "#84cc16", // lime
+    "hsl(var(--chart-1))",
+    "hsl(var(--chart-2))",
+    "hsl(var(--chart-3))",
+    "hsl(var(--chart-4))",
+    "hsl(var(--chart-5))",
+    "hsl(var(--primary))",
+    "hsl(var(--info))",
+    "hsl(var(--warning))",
+    "hsl(var(--success))",
+    "hsl(var(--destructive))",
   ]
 
   const getSliceColor = (index: number, slice: PieSlice) => {

package/src/components/waka-achievement-unlock/index.tsx

@@ -73,41 +73,41 @@ const rarityConfig = {
   common: {
     gradient: "from-slate-400 to-slate-600",
     glow: "shadow-slate-400/50",
-    glowColor: "#94a3b8",
+    glowColor: "hsl(var(--muted-foreground))",
     borderColor: "border-slate-400",
-    bgColor: "bg-slate-100",
-    textColor: "text-slate-600",
-    particleColors: ["#94a3b8", "#cbd5e1", "#64748b"],
+    bgColor: "bg-slate-100 dark:bg-slate-900",
+    textColor: "text-slate-600 dark:text-slate-400",
+    particleColors: ["hsl(var(--muted-foreground))", "hsl(var(--muted))", "hsl(var(--border))"],
     label: "Common",
   },
   rare: {
     gradient: "from-blue-400 to-blue-600",
     glow: "shadow-blue-400/50",
-    glowColor: "#60a5fa",
+    glowColor: "hsl(var(--info))",
     borderColor: "border-blue-400",
-    bgColor: "bg-blue-100",
-    textColor: "text-blue-600",
-    particleColors: ["#60a5fa", "#93c5fd", "#3b82f6"],
+    bgColor: "bg-blue-100 dark:bg-blue-950",
+    textColor: "text-blue-600 dark:text-blue-400",
+    particleColors: ["hsl(var(--info))", "hsl(var(--chart-1))", "hsl(var(--primary))"],
     label: "Rare",
   },
   epic: {
     gradient: "from-purple-400 to-purple-600",
     glow: "shadow-purple-400/50",
-    glowColor: "#a855f7",
+    glowColor: "hsl(var(--chart-2))",
     borderColor: "border-purple-400",
-    bgColor: "bg-purple-100",
-    textColor: "text-purple-600",
-    particleColors: ["#a855f7", "#c084fc", "#9333ea"],
+    bgColor: "bg-purple-100 dark:bg-purple-950",
+    textColor: "text-purple-600 dark:text-purple-400",
+    particleColors: ["hsl(var(--chart-2))", "hsl(var(--chart-3))", "hsl(var(--primary))"],
     label: "Epic",
   },
   legendary: {
     gradient: "from-amber-400 via-orange-500 to-red-500",
     glow: "shadow-amber-400/50",
-    glowColor: "#fbbf24",
+    glowColor: "hsl(var(--warning))",
     borderColor: "border-amber-400",
-    bgColor: "bg-amber-100",
-    textColor: "text-amber-600",
-    particleColors: ["#fbbf24", "#f59e0b", "#ef4444", "#fcd34d"],
+    bgColor: "bg-amber-100 dark:bg-amber-950",
+    textColor: "text-amber-600 dark:text-amber-400",
+    particleColors: ["hsl(var(--warning))", "hsl(var(--chart-4))", "hsl(var(--destructive))", "hsl(var(--chart-5))"],
     label: "Legendary",
   },
 }

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

@@ -0,0 +1,275 @@
+"use client"
+
+import * as React from "react"
+import { useRef, useEffect, useState, useCallback } from "react"
+import { cn } from "../../utils/cn"
+import { useAdContext, useAdVisibility, AD_SIZES, type AdSize, type AdSlot, type CustomAd } from "../waka-ad-provider"
+import { WakaAdPlaceholder } from "../waka-ad-placeholder"
+import { WakaAdFallback } from "../waka-ad-fallback"
+import { WakaSponsoredBadge } from "../waka-sponsored-badge"
+
+export interface WakaAdBannerProps {
+  /** Unique slot ID */
+  slotId: string
+  /** Ad size preset */
+  size?: AdSize
+  /** Custom width (when size is "custom") */
+  customWidth?: number
+  /** Custom height (when size is "custom") */
+  customHeight?: number
+  /** GPT ad unit path (for GPT network) */
+  adUnitPath?: string
+  /** Targeting parameters */
+  targeting?: Record<string, string | string[]>
+  /** Auto-refresh interval in seconds (0 = disabled) */
+  refreshInterval?: number
+  /** Enable lazy loading */
+  lazyLoad?: boolean
+  /** Fallback content when no ad available */
+  fallback?: React.ReactNode
+  /** Show sponsored badge */
+  showBadge?: boolean
+  /** Badge position */
+  badgePosition?: "top-left" | "top-right" | "bottom-left" | "bottom-right"
+  /** Custom class name */
+  className?: string
+  /** Callback when ad loads */
+  onLoad?: () => void
+  /** Callback when ad fails */
+  onError?: (error: Error) => void
+  /** Callback when ad is clicked */
+  onClick?: () => void
+}
+
+export function WakaAdBanner({
+  slotId,
+  size = "rectangle",
+  customWidth,
+  customHeight,
+  adUnitPath,
+  targeting,
+  refreshInterval = 0,
+  lazyLoad = true,
+  fallback,
+  showBadge = true,
+  badgePosition = "top-right",
+  className,
+  onLoad,
+  onError,
+  onClick,
+}: WakaAdBannerProps) {
+  const containerRef = useRef<HTMLDivElement>(null)
+  const { config, isReady, hasConsent, registerSlot, unregisterSlot, getCustomAd, trackEvent } = useAdContext()
+  const { isVisible } = useAdVisibility(containerRef)
+
+  const [status, setStatus] = useState<"loading" | "loaded" | "error" | "empty">("loading")
+  const [customAd, setCustomAd] = useState<CustomAd | null>(null)
+
+  const dimensions = size === "custom"
+    ? { width: customWidth || 300, height: customHeight || 250 }
+    : AD_SIZES[size]
+
+  // Register slot
+  useEffect(() => {
+    const slot: AdSlot = {
+      id: slotId,
+      network: config.network,
+      size,
+      position: "inline",
+      targeting,
+      refreshInterval,
+      lazyLoad,
+      customWidth,
+      customHeight,
+    }
+    registerSlot(slot)
+    return () => unregisterSlot(slotId)
+  }, [slotId, config.network, size, targeting, refreshInterval, lazyLoad, customWidth, customHeight, registerSlot, unregisterSlot])
+
+  // Load ad based on network type
+  const loadAd = useCallback(async () => {
+    if (!isReady || hasConsent === false) return
+
+    setStatus("loading")
+
+    try {
+      if (config.network === "gpt" && window.googletag && adUnitPath) {
+        // GPT implementation
+        window.googletag.cmd.push(() => {
+          const slot = window.googletag.defineSlot(
+            adUnitPath,
+            [dimensions.width, dimensions.height],
+            slotId
+          )
+
+          if (slot && targeting) {
+            Object.entries(targeting).forEach(([key, value]) => {
+              window.googletag.pubads().setTargeting(key, value)
+            })
+          }
+
+          window.googletag.enableServices()
+          window.googletag.display(slotId)
+        })
+
+        setStatus("loaded")
+        trackEvent({ type: "loaded", slotId, timestamp: new Date() })
+        onLoad?.()
+      } else if (config.network === "custom") {
+        // Custom ad server
+        const ad = await getCustomAd(slotId)
+        if (ad) {
+          setCustomAd(ad)
+          setStatus("loaded")
+          trackEvent({ type: "loaded", slotId, timestamp: new Date() })
+          onLoad?.()
+
+          // Fire impression tracking
+          if (ad.impressionUrl) {
+            fetch(ad.impressionUrl, { mode: "no-cors" }).catch(() => {})
+          }
+          ad.trackingPixels?.forEach((url) => {
+            const img = new Image()
+            img.src = url
+          })
+        } else {
+          setStatus("empty")
+          trackEvent({ type: "empty", slotId, timestamp: new Date() })
+        }
+      }
+    } catch (error) {
+      setStatus("error")
+      trackEvent({ type: "error", slotId, timestamp: new Date(), data: { error } })
+      onError?.(error as Error)
+    }
+  }, [isReady, hasConsent, config.network, adUnitPath, dimensions, slotId, targeting, getCustomAd, trackEvent, onLoad, onError])
+
+  // Initial load (with lazy loading support)
+  useEffect(() => {
+    if (lazyLoad) {
+      if (isVisible) {
+        loadAd()
+      }
+    } else {
+      loadAd()
+    }
+  }, [lazyLoad, isVisible, loadAd])
+
+  // Auto-refresh
+  useEffect(() => {
+    if (refreshInterval > 0 && status === "loaded" && isVisible) {
+      const interval = setInterval(() => {
+        loadAd()
+      }, refreshInterval * 1000)
+      return () => clearInterval(interval)
+    }
+  }, [refreshInterval, status, isVisible, loadAd])
+
+  // Track viewability
+  useEffect(() => {
+    if (isVisible && status === "loaded") {
+      trackEvent({ type: "viewable", slotId, timestamp: new Date() })
+    }
+  }, [isVisible, status, slotId, trackEvent])
+
+  const handleClick = () => {
+    trackEvent({ type: "click", slotId, timestamp: new Date() })
+    onClick?.()
+
+    if (customAd?.clickUrl) {
+      fetch(customAd.clickUrl, { mode: "no-cors" }).catch(() => {})
+    }
+    if (customAd?.targetUrl) {
+      window.open(customAd.targetUrl, "_blank", "noopener,noreferrer")
+    }
+  }
+
+  // Render based on status
+  const renderContent = () => {
+    if (hasConsent === false) {
+      return fallback || <WakaAdFallback width={dimensions.width} height={dimensions.height} />
+    }
+
+    if (status === "loading") {
+      return <WakaAdPlaceholder width={dimensions.width} height={dimensions.height} />
+    }
+
+    if (status === "error" || status === "empty") {
+      return fallback || <WakaAdFallback width={dimensions.width} height={dimensions.height} />
+    }
+
+    // GPT renders into the div directly
+    if (config.network === "gpt") {
+      return null
+    }
+
+    // Custom ad rendering
+    if (customAd) {
+      return (
+        <button
+          onClick={handleClick}
+          className="relative w-full h-full cursor-pointer focus:outline-none focus:ring-2 focus:ring-primary"
+        >
+          {customAd.imageUrl && (
+            <img
+              src={customAd.imageUrl}
+              alt={customAd.title || "Advertisement"}
+              className="w-full h-full object-cover"
+            />
+          )}
+          {customAd.title && !customAd.imageUrl && (
+            <div className="flex flex-col items-center justify-center h-full p-4 bg-muted">
+              <p className="font-semibold text-center">{customAd.title}</p>
+              {customAd.description && (
+                <p className="text-sm text-muted-foreground text-center mt-1">{customAd.description}</p>
+              )}
+              {customAd.cta && (
+                <span className="mt-2 px-4 py-1 bg-primary text-primary-foreground rounded text-sm">
+                  {customAd.cta}
+                </span>
+              )}
+            </div>
+          )}
+        </button>
+      )
+    }
+
+    return null
+  }
+
+  const badgePositionClasses = {
+    "top-left": "top-1 left-1",
+    "top-right": "top-1 right-1",
+    "bottom-left": "bottom-1 left-1",
+    "bottom-right": "bottom-1 right-1",
+  }
+
+  return (
+    <div
+      ref={containerRef}
+      id={slotId}
+      className={cn(
+        "relative overflow-hidden bg-muted/20 border border-border/50 rounded-md",
+        className
+      )}
+      style={{
+        width: dimensions.width,
+        height: dimensions.height,
+        maxWidth: "100%",
+      }}
+      data-ad-slot={slotId}
+      data-ad-size={size}
+      data-ad-status={status}
+    >
+      {renderContent()}
+
+      {showBadge && status === "loaded" && (
+        <div className={cn("absolute z-10", badgePositionClasses[badgePosition])}>
+          <WakaSponsoredBadge sponsor={customAd?.sponsor} />
+        </div>
+      )}
+    </div>
+  )
+}
+
+export default WakaAdBanner