@cognior/iap-sdk 0.1.0

package/src/experiences/banner.ts

@@ -0,0 +1,366 @@
+// src/experiences/banner.ts
+// Banner notification experience renderer
+
+import { sanitizeHtml } from "../utils/sanitize";
+import { register } from "./registry";
+import type { BannerPayload } from "./types";
+
+type BannerFlow = { id: string; type: "banner"; payload: BannerPayload };
+
+const bannerCssText = `
+:root {
+  --dap-z-banner: 2147483620;
+  --dap-banner-bg-info: #eff6ff;
+  --dap-banner-bg-warning: #fefce8;
+  --dap-banner-bg-error: #fef2f2;
+  --dap-banner-bg-success: #f0f9ff;
+  --dap-banner-text-info: #1e40af;
+  --dap-banner-text-warning: #92400e;
+  --dap-banner-text-error: #dc2626;
+  --dap-banner-text-success: #059669;
+  --dap-banner-border-info: #3b82f6;
+  --dap-banner-border-warning: #f59e0b;
+  --dap-banner-border-error: #ef4444;
+  --dap-banner-border-success: #10b981;
+}
+
+.dap-banner-wrap {
+  position: fixed;
+  left: 0;
+  right: 0;
+  z-index: var(--dap-z-banner);
+  padding: 0 16px;
+  pointer-events: none;
+}
+
+.dap-banner-wrap.top {
+  top: 16px;
+}
+
+.dap-banner-wrap.bottom {
+  bottom: 16px;
+}
+
+.dap-banner {
+  max-width: 800px;
+  margin: 0 auto;
+  padding: 16px 20px;
+  border-radius: 8px;
+  border-left: 4px solid;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+  line-height: 1.5;
+  pointer-events: auto;
+  animation: bannerSlideIn 0.3s ease-out;
+}
+
+@keyframes bannerSlideIn {
+  from {
+    opacity: 0;
+    transform: translateY(-20px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.dap-banner.bottom {
+  animation: bannerSlideInBottom 0.3s ease-out;
+}
+
+@keyframes bannerSlideInBottom {
+  from {
+    opacity: 0;
+    transform: translateY(20px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.dap-banner.info {
+  background: var(--dap-banner-bg-info);
+  color: var(--dap-banner-text-info);
+  border-color: var(--dap-banner-border-info);
+}
+
+.dap-banner.warning {
+  background: var(--dap-banner-bg-warning);
+  color: var(--dap-banner-text-warning);
+  border-color: var(--dap-banner-border-warning);
+}
+
+.dap-banner.error {
+  background: var(--dap-banner-bg-error);
+  color: var(--dap-banner-text-error);
+  border-color: var(--dap-banner-border-error);
+}
+
+.dap-banner.success {
+  background: var(--dap-banner-bg-success);
+  color: var(--dap-banner-text-success);
+  border-color: var(--dap-banner-border-success);
+}
+
+.dap-banner-icon {
+  width: 20px;
+  height: 20px;
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 16px;
+  font-weight: bold;
+}
+
+.dap-banner-message {
+  flex: 1;
+  font-size: 14px;
+  font-weight: 500;
+}
+
+.dap-banner-actions {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+  flex-shrink: 0;
+}
+
+.dap-banner-btn {
+  padding: 6px 12px;
+  border: 1px solid currentColor;
+  border-radius: 4px;
+  background: transparent;
+  color: inherit;
+  font-size: 12px;
+  font-weight: 500;
+  cursor: pointer;
+  text-decoration: none;
+  display: inline-flex;
+  align-items: center;
+  transition: all 0.15s ease;
+}
+
+.dap-banner-btn:hover {
+  background: currentColor;
+  color: white;
+}
+
+.dap-banner-close {
+  background: none;
+  border: none;
+  color: inherit;
+  cursor: pointer;
+  padding: 4px;
+  border-radius: 4px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  font-size: 14px;
+  opacity: 0.7;
+  transition: opacity 0.15s ease;
+}
+
+.dap-banner-close:hover {
+  opacity: 1;
+  background: rgba(0, 0, 0, 0.1);
+}
+
+@media (max-width: 640px) {
+  .dap-banner-wrap {
+    padding: 0 12px;
+  }
+  
+  .dap-banner {
+    padding: 14px 16px;
+  }
+  
+  .dap-banner-actions {
+    flex-direction: column;
+    gap: 6px;
+  }
+  
+  .dap-banner-btn {
+    font-size: 11px;
+    padding: 4px 8px;
+  }
+}
+`;
+
+export function registerBanner() {
+  register("banner", renderBanner);
+}
+
+export async function renderBanner(flow: BannerFlow): Promise<void> {
+  const { payload, id } = flow;
+  
+  // Ensure we have a root container
+  const root = ensureRoot();
+  
+  // Extract completion tracker if provided
+  const completionTracker = payload._completionTracker;
+  
+  // Create banner shell
+  const shell = createBannerShell(payload);
+  
+  // Add message content
+  shell.messageEl.innerHTML = sanitizeHtml(payload.message);
+  
+  // Add actions if provided
+  if (payload.actions?.length) {
+    payload.actions.forEach(action => {
+      const btn = document.createElement(action.action === "navigate" ? "a" : "button");
+      btn.className = "dap-banner-btn";
+      btn.textContent = action.label;
+      
+      if (action.action === "navigate" && action.href) {
+        (btn as HTMLAnchorElement).href = action.href;
+        (btn as HTMLAnchorElement).target = "_blank";
+        (btn as HTMLAnchorElement).rel = "noopener noreferrer";
+      } else {
+        btn.addEventListener("click", () => {
+          if (action.action === "dismiss") {
+            dismissBanner();
+          } else if (action.action === "custom" && action.customAction) {
+            // Trigger custom action event
+            window.dispatchEvent(new CustomEvent("dap-banner-action", {
+              detail: { action: action.customAction, bannerId: id }
+            }));
+            dismissBanner();
+          }
+        });
+      }
+      
+      shell.actionsEl.appendChild(btn);
+    });
+  }
+  
+  // Auto-hide functionality
+  let autoHideTimer: number | undefined;
+  if (payload.autoHide && payload.autoHide > 0) {
+    autoHideTimer = window.setTimeout(() => {
+      dismissBanner();
+    }, payload.autoHide * 1000);
+  }
+  
+  function dismissBanner() {
+    if (autoHideTimer) {
+      clearTimeout(autoHideTimer);
+    }
+    
+    shell.wrap.style.animation = payload.position === "bottom" ? "bannerSlideOutBottom 0.2s ease-in" : "bannerSlideOut 0.2s ease-in";
+    
+    setTimeout(() => {
+      shell.wrap.remove();
+      
+      // Signal completion if tracker provided
+      if (completionTracker?.onComplete) {
+        console.debug(`[DAP] Completing banner flow: ${id}`);
+        completionTracker.onComplete();
+      }
+    }, 200);
+  }
+  
+  // Close button functionality (if dismissible)
+  if (payload.dismissible !== false) {
+    shell.closeBtn.addEventListener("click", dismissBanner);
+  } else {
+    shell.closeBtn.style.display = "none";
+  }
+  
+  // Add dismiss animation styles
+  if (!document.getElementById("dap-banner-dismiss-styles")) {
+    const style = document.createElement("style");
+    style.id = "dap-banner-dismiss-styles";
+    style.textContent = `
+      @keyframes bannerSlideOut {
+        from { opacity: 1; transform: translateY(0); }
+        to { opacity: 0; transform: translateY(-20px); }
+      }
+      @keyframes bannerSlideOutBottom {
+        from { opacity: 1; transform: translateY(0); }
+        to { opacity: 0; transform: translateY(20px); }
+      }
+    `;
+    document.head.appendChild(style);
+  }
+  
+  // Append to root and focus for accessibility
+  root.appendChild(shell.wrap);
+  shell.banner.setAttribute("role", "alert");
+  shell.banner.setAttribute("aria-live", "polite");
+}
+
+function createBannerShell(payload: BannerPayload) {
+  const wrap = document.createElement("div");
+  wrap.className = `dap-banner-wrap ${payload.position || "top"}`;
+  
+  const banner = document.createElement("div");
+  banner.className = `dap-banner ${payload.variant || "info"}`;
+  
+  // Apply theme if provided
+  if (payload.theme) {
+    for (const [key, value] of Object.entries(payload.theme)) {
+      banner.style.setProperty(key, value);
+    }
+  }
+  
+  const iconEl = document.createElement("div");
+  iconEl.className = "dap-banner-icon";
+  
+  // Set icon based on variant
+  const icons = {
+    info: "ℹ",
+    warning: "⚠",
+    error: "✕",
+    success: "✓"
+  };
+  iconEl.textContent = icons[payload.variant || "info"];
+  
+  const messageEl = document.createElement("div");
+  messageEl.className = "dap-banner-message";
+  
+  const actionsEl = document.createElement("div");
+  actionsEl.className = "dap-banner-actions";
+  
+  const closeBtn = document.createElement("button");
+  closeBtn.className = "dap-banner-close";
+  closeBtn.innerHTML = "×";
+  closeBtn.setAttribute("aria-label", "Close banner");
+  
+  banner.appendChild(iconEl);
+  banner.appendChild(messageEl);
+  banner.appendChild(actionsEl);
+  banner.appendChild(closeBtn);
+  wrap.appendChild(banner);
+  
+  return { wrap, banner, iconEl, messageEl, actionsEl, closeBtn };
+}
+
+function ensureRoot(): HTMLElement {
+  let host = document.querySelector("dap-banner-root") as HTMLElement | null;
+  if (!host) {
+    host = document.createElement("dap-banner-root");
+    host.style.position = "fixed";
+    host.style.zIndex = "2147483620";
+    host.style.inset = "0";
+    host.style.pointerEvents = "none";
+    document.documentElement.appendChild(host);
+    
+    // Inject styles
+    if (!host.shadowRoot && !document.getElementById("dap-banner-style")) {
+      const style = document.createElement("style");
+      style.id = "dap-banner-style";
+      style.textContent = bannerCssText;
+      document.head.appendChild(style);
+    }
+  }
+  return host;
+}