@prosdevlab/experience-sdk-plugins 0.1.0 → 0.1.4

package/src/banner/banner.ts

@@ -7,12 +7,14 @@
 
 import type { PluginFunction } from '@lytics/sdk-kit';
 import type { BannerContent, Decision, Experience } from '../types';
+import { sanitizeHTML } from '../utils/sanitize';
 
 export interface BannerPluginConfig {
   banner?: {
     position?: 'top' | 'bottom';
     dismissable?: boolean;
     zIndex?: number;
+    pushDown?: string; // CSS selector of element to push down (add margin-top)
   };
 }
 
@@ -32,7 +34,23 @@ export interface BannerPlugin {
  * import { createInstance } from '@prosdevlab/experience-sdk';
  * import { bannerPlugin } from '@prosdevlab/experience-sdk-plugins';
  *
- * const sdk = createInstance({ banner: { position: 'top', dismissable: true } });
+ * // Basic usage (banner overlays at top)
+ * const sdk = createInstance({
+ *   banner: {
+ *     position: 'top',
+ *     dismissable: true
+ *   }
+ * });
+ * sdk.use(bannerPlugin);
+ *
+ * // With pushDown (pushes navigation down instead of overlaying)
+ * const sdk = createInstance({
+ *   banner: {
+ *     position: 'top',
+ *     dismissable: true,
+ *     pushDown: 'header' // CSS selector of element to push down
+ *   }
+ * });
  * sdk.use(bannerPlugin);
  * ```
  */
@@ -51,6 +69,236 @@ export const bannerPlugin: PluginFunction = (plugin, instance, config) => {
   // Track multiple active banners by experience ID
   const activeBanners = new Map<string, HTMLElement>();
 
+  /**
+   * Inject default banner styles if not already present
+   */
+  function injectDefaultStyles(): void {
+    const styleId = 'xp-banner-styles';
+    if (document.getElementById(styleId)) {
+      return; // Already injected
+    }
+
+    const style = document.createElement('style');
+    style.id = styleId;
+    style.textContent = `
+      .xp-banner {
+        position: fixed;
+        left: 0;
+        right: 0;
+        width: 100%;
+        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+        font-size: 14px;
+        line-height: 1.5;
+        box-sizing: border-box;
+        z-index: 10000;
+        background: #ffffff;
+        color: #111827;
+        border-bottom: 1px solid #e5e7eb;
+        box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.05);
+      }
+      
+      .xp-banner--top {
+        top: 0;
+      }
+      
+      .xp-banner--bottom {
+        bottom: 0;
+        border-bottom: none;
+        border-top: 1px solid #e5e7eb;
+        box-shadow: 0 -1px 3px 0 rgba(0, 0, 0, 0.05);
+      }
+      
+      .xp-banner__container {
+        display: flex;
+        align-items: center;
+        gap: 16px;
+        max-width: 1280px;
+        margin: 0 auto;
+        padding: 14px 24px;
+      }
+      
+      .xp-banner__content {
+        flex: 1;
+        min-width: 0;
+        display: flex;
+        flex-direction: column;
+        gap: 4px;
+      }
+      
+      .xp-banner__title {
+        font-weight: 600;
+        margin: 0;
+        font-size: 15px;
+        line-height: 1.4;
+      }
+      
+      .xp-banner__message {
+        margin: 0;
+        font-size: 14px;
+        line-height: 1.5;
+        color: #6b7280;
+      }
+      
+      .xp-banner__buttons {
+        display: flex;
+        align-items: center;
+        gap: 8px;
+        flex-shrink: 0;
+      }
+      
+      .xp-banner__button {
+        padding: 8px 16px;
+        border: none;
+        border-radius: 6px;
+        font-size: 14px;
+        font-weight: 500;
+        cursor: pointer;
+        transition: all 0.2s;
+        text-decoration: none;
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        white-space: nowrap;
+      }
+      
+      .xp-banner__button--primary {
+        background: #2563eb;
+        color: #ffffff;
+      }
+      
+      .xp-banner__button--primary:hover {
+        background: #1d4ed8;
+      }
+      
+      .xp-banner__button--secondary {
+        background: #f3f4f6;
+        color: #374151;
+        border: 1px solid #e5e7eb;
+      }
+      
+      .xp-banner__button--secondary:hover {
+        background: #e5e7eb;
+      }
+      
+      .xp-banner__button--link {
+        background: transparent;
+        color: #2563eb;
+        padding: 6px 12px;
+        font-weight: 400;
+      }
+      
+      .xp-banner__button--link:hover {
+        background: #f3f4f6;
+        text-decoration: underline;
+      }
+      
+      .xp-banner__close {
+        background: transparent;
+        border: none;
+        color: #9ca3af;
+        font-size: 20px;
+        line-height: 1;
+        cursor: pointer;
+        padding: 4px;
+        margin: 0;
+        transition: color 0.2s;
+        flex-shrink: 0;
+        width: 28px;
+        height: 28px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        border-radius: 4px;
+      }
+      
+      .xp-banner__close:hover {
+        color: #111827;
+        background: #f3f4f6;
+      }
+      
+      @media (max-width: 640px) {
+        .xp-banner__container {
+          flex-wrap: wrap;
+          padding: 14px 16px;
+          position: relative;
+        }
+        
+        .xp-banner__content {
+          flex: 1 1 100%;
+          padding-right: 32px;
+        }
+        
+        .xp-banner__buttons {
+          flex: 1 1 auto;
+          width: 100%;
+        }
+        
+        .xp-banner__button {
+          flex: 1;
+        }
+        
+        .xp-banner__close {
+          position: absolute;
+          top: 12px;
+          right: 12px;
+        }
+      }
+      
+      /* Dark mode support */
+      @media (prefers-color-scheme: dark) {
+        .xp-banner {
+          background: #111827;
+          color: #f9fafb;
+          border-bottom-color: #1f2937;
+        }
+        
+        .xp-banner--bottom {
+          border-top-color: #1f2937;
+        }
+        
+        .xp-banner__message {
+          color: #9ca3af;
+        }
+        
+        .xp-banner__button--primary {
+          background: #3b82f6;
+        }
+        
+        .xp-banner__button--primary:hover {
+          background: #2563eb;
+        }
+        
+        .xp-banner__button--secondary {
+          background: #1f2937;
+          color: #f9fafb;
+          border-color: #374151;
+        }
+        
+        .xp-banner__button--secondary:hover {
+          background: #374151;
+        }
+        
+        .xp-banner__button--link {
+          color: #60a5fa;
+        }
+        
+        .xp-banner__button--link:hover {
+          background: #1f2937;
+        }
+        
+        .xp-banner__close {
+          color: #6b7280;
+        }
+        
+        .xp-banner__close:hover {
+          color: #f9fafb;
+          background: #1f2937;
+        }
+      }
+    `;
+    document.head.appendChild(style);
+  }
+
   /**
    * Create banner DOM element
    */
@@ -61,89 +309,60 @@ export const bannerPlugin: PluginFunction = (plugin, instance, config) => {
     const dismissable = content.dismissable ?? config.get('banner.dismissable') ?? true;
     const zIndex = config.get('banner.zIndex') ?? 10000;
 
-    // Detect dark mode
-    const isDarkMode = document.documentElement.classList.contains('dark');
-
-    // Theme-aware colors - professional subtle style
-    const bgColor = isDarkMode ? '#1f2937' : '#f9fafb';
-    const textColor = isDarkMode ? '#f3f4f6' : '#111827';
-    const borderColor = isDarkMode ? '#374151' : '#e5e7eb';
-    const shadowColor = isDarkMode ? 'rgba(0, 0, 0, 0.3)' : 'rgba(0, 0, 0, 0.05)';
+    // Inject default styles if needed
+    injectDefaultStyles();
 
     // Create banner container
     const banner = document.createElement('div');
     banner.setAttribute('data-experience-id', experience.id);
 
-    // Add responsive media query styles
-    const styleId = `banner-responsive-${experience.id}`;
-    if (!document.getElementById(styleId)) {
-      const style = document.createElement('style');
-      style.id = styleId;
-      style.textContent = `
-        @media (max-width: 640px) {
-          [data-experience-id="${experience.id}"] {
-            flex-direction: column !important;
-            align-items: flex-start !important;
-          }
-          [data-experience-id="${experience.id}"] > div:last-child {
-            width: 100%;
-            flex-direction: column !important;
-          }
-          [data-experience-id="${experience.id}"] button {
-            width: 100%;
-          }
-        }
-      `;
-      document.head.appendChild(style);
+    // Build className: base classes + position + user's custom class
+    const baseClasses = ['xp-banner', `xp-banner--${position}`];
+    if (content.className) {
+      baseClasses.push(content.className);
     }
+    banner.className = baseClasses.join(' ');
 
-    banner.style.cssText = `
-      position: fixed;
-      ${position}: 0;
-      left: 0;
-      right: 0;
-      background: ${bgColor};
-      color: ${textColor};
-      padding: 16px 20px;
-      border-${position === 'top' ? 'bottom' : 'top'}: 1px solid ${borderColor};
-      box-shadow: 0 ${position === 'top' ? '1' : '-1'}px 3px 0 ${shadowColor};
-      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
-      font-size: 14px;
-      line-height: 1.5;
-      z-index: ${zIndex};
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-      box-sizing: border-box;
-    `;
+    // Apply user's custom styles
+    if (content.style) {
+      Object.assign(banner.style, content.style);
+    }
+
+    // Override z-index if configured
+    if (zIndex !== 10000) {
+      banner.style.zIndex = String(zIndex);
+    }
+
+    // Create container
+    const container = document.createElement('div');
+    container.className = 'xp-banner__container';
+    banner.appendChild(container);
 
     // Create content container
     const contentDiv = document.createElement('div');
-    contentDiv.style.cssText = 'flex: 1; margin-right: 20px;';
+    contentDiv.className = 'xp-banner__content';
 
     // Add title if present
     if (content.title) {
-      const title = document.createElement('div');
-      title.textContent = content.title;
-      title.style.cssText = 'font-weight: 600; margin-bottom: 4px;';
+      const title = document.createElement('h3');
+      title.className = 'xp-banner__title';
+      // Sanitize HTML to prevent XSS attacks
+      title.innerHTML = sanitizeHTML(content.title);
       contentDiv.appendChild(title);
     }
 
     // Add message
-    const message = document.createElement('div');
-    message.textContent = content.message;
+    const message = document.createElement('p');
+    message.className = 'xp-banner__message';
+    // Sanitize HTML to prevent XSS attacks
+    message.innerHTML = sanitizeHTML(content.message);
     contentDiv.appendChild(message);
 
-    banner.appendChild(contentDiv);
+    container.appendChild(contentDiv);
 
-    // Create button container for actions and/or dismiss
-    const buttonContainer = document.createElement('div');
-    buttonContainer.style.cssText = `
-      display: flex;
-      align-items: center;
-      gap: 12px;
-      flex-wrap: wrap;
-    `;
+    // Create buttons container
+    const buttonsDiv = document.createElement('div');
+    buttonsDiv.className = 'xp-banner__buttons';
 
     // Helper function to create button with variant styling
     function createButton(buttonConfig: {
@@ -152,53 +371,25 @@ export const bannerPlugin: PluginFunction = (plugin, instance, config) => {
       url?: string;
       variant?: 'primary' | 'secondary' | 'link';
       metadata?: Record<string, unknown>;
+      className?: string;
+      style?: Record<string, string>;
     }): HTMLButtonElement {
       const button = document.createElement('button');
       button.textContent = buttonConfig.text;
 
       const variant = buttonConfig.variant || 'primary';
 
-      // Variant-based styling
-      let bg: string, hoverBg: string, textColor: string, border: string;
-
-      if (variant === 'primary') {
-        bg = isDarkMode ? '#3b82f6' : '#2563eb';
-        hoverBg = isDarkMode ? '#2563eb' : '#1d4ed8';
-        textColor = '#ffffff';
-        border = 'none';
-      } else if (variant === 'secondary') {
-        bg = isDarkMode ? '#374151' : '#ffffff';
-        hoverBg = isDarkMode ? '#4b5563' : '#f9fafb';
-        textColor = isDarkMode ? '#f3f4f6' : '#374151';
-        border = isDarkMode ? '1px solid #4b5563' : '1px solid #d1d5db';
-      } else {
-        // 'link'
-        bg = 'transparent';
-        hoverBg = isDarkMode ? 'rgba(255, 255, 255, 0.1)' : 'rgba(0, 0, 0, 0.05)';
-        textColor = isDarkMode ? '#93c5fd' : '#2563eb';
-        border = 'none';
+      // Build className: base class + variant + user's custom class
+      const buttonClasses = ['xp-banner__button', `xp-banner__button--${variant}`];
+      if (buttonConfig.className) {
+        buttonClasses.push(buttonConfig.className);
       }
+      button.className = buttonClasses.join(' ');
 
-      button.style.cssText = `
-        background: ${bg};
-        border: ${border};
-        color: ${textColor};
-        padding: ${variant === 'link' ? '4px 8px' : '8px 16px'};
-        font-size: 14px;
-        font-weight: ${variant === 'link' ? '400' : '500'};
-        border-radius: 6px;
-        cursor: pointer;
-        transition: all 0.2s;
-        text-decoration: ${variant === 'link' ? 'underline' : 'none'};
-      `;
-
-      button.addEventListener('mouseenter', () => {
-        button.style.background = hoverBg;
-      });
-
-      button.addEventListener('mouseleave', () => {
-        button.style.background = bg;
-      });
+      // Apply user's custom styles
+      if (buttonConfig.style) {
+        Object.assign(button.style, buttonConfig.style);
+      }
 
       button.addEventListener('click', () => {
         // Emit action event
@@ -225,39 +416,17 @@ export const bannerPlugin: PluginFunction = (plugin, instance, config) => {
     if (content.buttons && content.buttons.length > 0) {
       content.buttons.forEach((buttonConfig) => {
         const button = createButton(buttonConfig);
-        buttonContainer.appendChild(button);
+        buttonsDiv.appendChild(button);
       });
     }
 
     // Add dismiss button if dismissable
     if (dismissable) {
       const closeButton = document.createElement('button');
+      closeButton.className = 'xp-banner__close';
       closeButton.innerHTML = '&times;';
       closeButton.setAttribute('aria-label', 'Close banner');
 
-      const closeColor = isDarkMode ? '#9ca3af' : '#6b7280';
-
-      closeButton.style.cssText = `
-        background: transparent;
-        border: none;
-        color: ${closeColor};
-        font-size: 24px;
-        line-height: 1;
-        cursor: pointer;
-        padding: 0;
-        margin: 0;
-        opacity: 0.7;
-        transition: opacity 0.2s;
-      `;
-
-      closeButton.addEventListener('mouseenter', () => {
-        closeButton.style.opacity = '1';
-      });
-
-      closeButton.addEventListener('mouseleave', () => {
-        closeButton.style.opacity = '0.7';
-      });
-
       closeButton.addEventListener('click', () => {
         remove(experience.id);
         instance.emit('experiences:dismissed', {
@@ -266,14 +435,57 @@ export const bannerPlugin: PluginFunction = (plugin, instance, config) => {
         });
       });
 
-      buttonContainer.appendChild(closeButton);
+      buttonsDiv.appendChild(closeButton);
     }
 
-    banner.appendChild(buttonContainer);
+    container.appendChild(buttonsDiv);
 
     return banner;
   }
 
+  /**
+   * Apply pushDown margin to target element
+   */
+  function applyPushDown(banner: HTMLElement, position: 'top' | 'bottom'): void {
+    const pushDownSelector = config.get('banner.pushDown');
+
+    if (!pushDownSelector || position !== 'top') {
+      return; // Only push down for top banners
+    }
+
+    const targetElement = document.querySelector(pushDownSelector);
+    if (!targetElement || !(targetElement instanceof HTMLElement)) {
+      return;
+    }
+
+    // Get banner height
+    const height = banner.offsetHeight;
+
+    // Apply margin-top with transition
+    targetElement.style.transition = 'margin-top 0.3s ease';
+    targetElement.style.marginTop = `${height}px`;
+  }
+
+  /**
+   * Remove pushDown margin from target element
+   */
+  function removePushDown(): void {
+    const pushDownSelector = config.get('banner.pushDown');
+
+    if (!pushDownSelector) {
+      return;
+    }
+
+    const targetElement = document.querySelector(pushDownSelector);
+    if (!targetElement || !(targetElement instanceof HTMLElement)) {
+      return;
+    }
+
+    // Remove margin-top with transition
+    targetElement.style.transition = 'margin-top 0.3s ease';
+    targetElement.style.marginTop = '0';
+  }
+
   /**
    * Show a banner experience
    */
@@ -292,6 +504,11 @@ export const bannerPlugin: PluginFunction = (plugin, instance, config) => {
     document.body.appendChild(banner);
     activeBanners.set(experience.id, banner);
 
+    // Apply pushDown to target element if configured
+    const content = experience.content as BannerContent;
+    const position = content.position ?? config.get('banner.position') ?? 'top';
+    applyPushDown(banner, position);
+
     instance.emit('experiences:shown', {
       experienceId: experience.id,
       type: 'banner',
@@ -310,6 +527,11 @@ export const bannerPlugin: PluginFunction = (plugin, instance, config) => {
         banner.parentNode.removeChild(banner);
       }
       activeBanners.delete(experienceId);
+
+      // Remove pushDown if no more banners
+      if (activeBanners.size === 0) {
+        removePushDown();
+      }
     } else {
       // Remove all banners
       for (const [id, banner] of activeBanners.entries()) {
@@ -318,6 +540,9 @@ export const bannerPlugin: PluginFunction = (plugin, instance, config) => {
         }
         activeBanners.delete(id);
       }
+
+      // Remove pushDown
+      removePushDown();
     }
   }
 

package/src/types.ts

@@ -20,9 +20,31 @@ export interface BannerContent {
     url?: string;
     variant?: 'primary' | 'secondary' | 'link';
     metadata?: Record<string, any>;
+    className?: string;
+    style?: Record<string, string>;
   }>;
   dismissable?: boolean;
   position?: 'top' | 'bottom';
+  className?: string;
+  style?: Record<string, string>;
+}
+
+/**
+ * Modal content configuration
+ */
+export interface ModalContent {
+  title: string;
+  message: string;
+  confirmText?: string;
+  cancelText?: string;
+}
+
+/**
+ * Tooltip content configuration
+ */
+export interface TooltipContent {
+  message: string;
+  position?: 'top' | 'bottom' | 'left' | 'right';
 }
 
 /**