@cognior/iap-sdk 0.1.0

package/src/experiences/taskList.ts

@@ -0,0 +1,625 @@
+// src/experiences/taskList.ts
+// Task list/checklist experience renderer
+
+import { sanitizeHtml } from "../utils/sanitize";
+import { register } from "./registry";
+import type { TaskListPayload, TaskItem } from "./types";
+
+type TaskListFlow = { id: string; type: "taskList"; payload: TaskListPayload };
+
+const taskListCssText = `
+:root {
+  --dap-z-tasklist: 2147483625;
+  --dap-tasklist-bg: #ffffff;
+  --dap-tasklist-border: #e2e8f0;
+  --dap-tasklist-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
+  --dap-tasklist-text: #1e293b;
+  --dap-tasklist-text-muted: #64748b;
+  --dap-tasklist-primary: #3b82f6;
+  --dap-tasklist-success: #10b981;
+  --dap-tasklist-overlay: rgba(15, 23, 42, 0.3);
+}
+
+.dap-tasklist-overlay {
+  position: fixed;
+  inset: 0;
+  background: var(--dap-tasklist-overlay);
+  z-index: var(--dap-z-tasklist);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 20px;
+  opacity: 0;
+  animation: tasklistOverlayFadeIn 0.3s ease-out forwards;
+}
+
+@keyframes tasklistOverlayFadeIn {
+  to { opacity: 1; }
+}
+
+.dap-tasklist-modal {
+  background: var(--dap-tasklist-bg);
+  border: 1px solid var(--dap-tasklist-border);
+  border-radius: 12px;
+  box-shadow: var(--dap-tasklist-shadow);
+  width: 100%;
+  max-width: 480px;
+  max-height: 80vh;
+  display: flex;
+  flex-direction: column;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+  opacity: 0;
+  transform: scale(0.95);
+  animation: tasklistModalIn 0.3s ease-out 0.1s forwards;
+}
+
+@keyframes tasklistModalIn {
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+.dap-tasklist-header {
+  padding: 20px 20px 16px;
+  border-bottom: 1px solid var(--dap-tasklist-border);
+}
+
+.dap-tasklist-title {
+  font-size: 20px;
+  font-weight: 600;
+  color: var(--dap-tasklist-text);
+  margin: 0 0 8px 0;
+}
+
+.dap-tasklist-description {
+  font-size: 14px;
+  color: var(--dap-tasklist-text-muted);
+  line-height: 1.5;
+  margin: 0;
+}
+
+.dap-tasklist-progress {
+  padding: 16px 20px;
+  border-bottom: 1px solid var(--dap-tasklist-border);
+  background: #f8fafc;
+}
+
+.dap-tasklist-progress-text {
+  font-size: 14px;
+  color: var(--dap-tasklist-text);
+  margin-bottom: 8px;
+  font-weight: 500;
+}
+
+.dap-tasklist-progress-bar {
+  width: 100%;
+  height: 6px;
+  background: var(--dap-tasklist-border);
+  border-radius: 3px;
+  overflow: hidden;
+}
+
+.dap-tasklist-progress-fill {
+  height: 100%;
+  background: var(--dap-tasklist-success);
+  border-radius: 3px;
+  transition: width 0.4s ease;
+  width: 0%;
+}
+
+.dap-tasklist-body {
+  flex: 1;
+  overflow-y: auto;
+  padding: 16px 20px;
+}
+
+.dap-tasklist-item {
+  display: flex;
+  align-items: flex-start;
+  gap: 12px;
+  padding: 12px 0;
+  border-bottom: 1px solid #f1f5f9;
+  transition: background-color 0.15s ease;
+}
+
+.dap-tasklist-item:last-child {
+  border-bottom: none;
+}
+
+.dap-tasklist-item:hover {
+  background: #f8fafc;
+  margin: 0 -20px;
+  padding: 12px 20px;
+  border-radius: 6px;
+  border-bottom: none;
+}
+
+.dap-tasklist-item.completed {
+  opacity: 0.7;
+}
+
+.dap-tasklist-checkbox {
+  width: 20px;
+  height: 20px;
+  border: 2px solid var(--dap-tasklist-border);
+  border-radius: 4px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  transition: all 0.15s ease;
+  flex-shrink: 0;
+  margin-top: 2px;
+}
+
+.dap-tasklist-checkbox:hover {
+  border-color: var(--dap-tasklist-primary);
+}
+
+.dap-tasklist-checkbox.checked {
+  background: var(--dap-tasklist-success);
+  border-color: var(--dap-tasklist-success);
+  color: white;
+}
+
+.dap-tasklist-checkbox.required {
+  border-color: #f59e0b;
+}
+
+.dap-tasklist-checkbox.required.checked {
+  background: var(--dap-tasklist-success);
+  border-color: var(--dap-tasklist-success);
+}
+
+.dap-tasklist-content {
+  flex: 1;
+  min-width: 0;
+}
+
+.dap-tasklist-item-title {
+  font-size: 15px;
+  font-weight: 500;
+  color: var(--dap-tasklist-text);
+  margin: 0 0 4px 0;
+  line-height: 1.4;
+}
+
+.dap-tasklist-item.completed .dap-tasklist-item-title {
+  text-decoration: line-through;
+  color: var(--dap-tasklist-text-muted);
+}
+
+.dap-tasklist-item-description {
+  font-size: 13px;
+  color: var(--dap-tasklist-text-muted);
+  line-height: 1.4;
+  margin: 0;
+}
+
+.dap-tasklist-required-badge {
+  display: inline-block;
+  background: #fef3c7;
+  color: #92400e;
+  font-size: 10px;
+  font-weight: 600;
+  padding: 2px 6px;
+  border-radius: 10px;
+  margin-left: 8px;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+}
+
+.dap-tasklist-footer {
+  padding: 16px 20px;
+  border-top: 1px solid var(--dap-tasklist-border);
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 12px;
+}
+
+.dap-tasklist-actions {
+  display: flex;
+  gap: 8px;
+}
+
+.dap-tasklist-btn {
+  padding: 8px 16px;
+  border: 1px solid var(--dap-tasklist-border);
+  border-radius: 6px;
+  background: transparent;
+  color: var(--dap-tasklist-text);
+  font-size: 14px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: all 0.15s ease;
+}
+
+.dap-tasklist-btn:hover {
+  background: var(--dap-tasklist-border);
+}
+
+.dap-tasklist-btn.primary {
+  background: var(--dap-tasklist-primary);
+  border-color: var(--dap-tasklist-primary);
+  color: white;
+}
+
+.dap-tasklist-btn.primary:hover {
+  background: #2563eb;
+  border-color: #2563eb;
+}
+
+.dap-tasklist-btn.success {
+  background: var(--dap-tasklist-success);
+  border-color: var(--dap-tasklist-success);
+  color: white;
+}
+
+.dap-tasklist-btn.success:hover {
+  background: #059669;
+  border-color: #059669;
+}
+
+.dap-tasklist-btn:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.dap-tasklist-completion-text {
+  font-size: 12px;
+  color: var(--dap-tasklist-text-muted);
+}
+
+@media (max-width: 640px) {
+  .dap-tasklist-overlay {
+    padding: 12px;
+  }
+  
+  .dap-tasklist-modal {
+    max-width: 100%;
+  }
+  
+  .dap-tasklist-header {
+    padding: 16px;
+  }
+  
+  .dap-tasklist-body {
+    padding: 12px 16px;
+  }
+  
+  .dap-tasklist-footer {
+    padding: 12px 16px;
+    flex-direction: column;
+    gap: 8px;
+  }
+  
+  .dap-tasklist-actions {
+    width: 100%;
+    justify-content: space-between;
+  }
+}
+`;
+
+export function registerTaskList() {
+  register("taskList", renderTaskList);
+}
+
+export async function renderTaskList(flow: TaskListFlow): Promise<void> {
+  const { payload, id } = flow;
+  
+  // Extract completion tracker
+  const completionTracker = payload._completionTracker;
+  
+  // Ensure CSS is injected
+  ensureStyles();
+  
+  // Track completed tasks
+  const completedTasks = new Set<string>();
+  
+  // Initialize with pre-completed tasks
+  payload.tasks.forEach(task => {
+    if (task.completed) {
+      completedTasks.add(task.id);
+    }
+  });
+  
+  // Create modal
+  const { overlay, modal, progressEl, bodyEl, footerEl } = createTaskListModal(payload);
+  
+  // Populate tasks
+  renderTasks();
+  
+  // Update progress initially
+  updateProgress();
+  
+  // Add to DOM
+  document.documentElement.appendChild(overlay);
+  
+  // Focus management
+  modal.setAttribute("role", "dialog");
+  modal.setAttribute("aria-modal", "true");
+  modal.setAttribute("aria-labelledby", "tasklist-title");
+  
+  function renderTasks() {
+    bodyEl.innerHTML = "";
+    
+    payload.tasks.forEach(task => {
+      const taskEl = createTaskElement(task);
+      bodyEl.appendChild(taskEl);
+    });
+  }
+  
+  function createTaskElement(task: TaskItem): HTMLElement {
+    const taskEl = document.createElement("div");
+    taskEl.className = `dap-tasklist-item${completedTasks.has(task.id) ? " completed" : ""}`;
+    
+    // Checkbox
+    const checkbox = document.createElement("div");
+    checkbox.className = `dap-tasklist-checkbox${completedTasks.has(task.id) ? " checked" : ""}${task.required ? " required" : ""}`;
+    checkbox.innerHTML = completedTasks.has(task.id) ? "✓" : "";
+    checkbox.setAttribute("role", "checkbox");
+    checkbox.setAttribute("aria-checked", completedTasks.has(task.id) ? "true" : "false");
+    
+    checkbox.addEventListener("click", () => {
+      toggleTask(task.id);
+    });
+    
+    // Content
+    const content = document.createElement("div");
+    content.className = "dap-tasklist-content";
+    
+    const title = document.createElement("h4");
+    title.className = "dap-tasklist-item-title";
+    title.textContent = task.title;
+    
+    if (task.required) {
+      const badge = document.createElement("span");
+      badge.className = "dap-tasklist-required-badge";
+      badge.textContent = "Required";
+      title.appendChild(badge);
+    }
+    
+    content.appendChild(title);
+    
+    if (task.description) {
+      const description = document.createElement("p");
+      description.className = "dap-tasklist-item-description";
+      description.innerHTML = sanitizeHtml(task.description);
+      content.appendChild(description);
+    }
+    
+    taskEl.appendChild(checkbox);
+    taskEl.appendChild(content);
+    
+    return taskEl;
+  }
+  
+  function toggleTask(taskId: string) {
+    if (completedTasks.has(taskId)) {
+      completedTasks.delete(taskId);
+    } else {
+      completedTasks.add(taskId);
+      
+      // Trigger custom action if defined
+      const task = payload.tasks.find(t => t.id === taskId);
+      if (task?.action) {
+        window.dispatchEvent(new CustomEvent("dap-task-completed", {
+          detail: { action: task.action, taskId, taskListId: id }
+        }));
+      }
+    }
+    
+    renderTasks();
+    updateProgress();
+    updateFooter();
+  }
+  
+  function updateProgress() {
+    if (!progressEl) return;
+    
+    const total = payload.tasks.length;
+    const completed = completedTasks.size;
+    const percentage = total > 0 ? (completed / total) * 100 : 0;
+    
+    const progressText = progressEl.querySelector(".dap-tasklist-progress-text") as HTMLElement;
+    const progressFill = progressEl.querySelector(".dap-tasklist-progress-fill") as HTMLElement;
+    
+    if (progressText) {
+      progressText.textContent = `${completed} of ${total} tasks completed`;
+    }
+    if (progressFill) {
+      progressFill.style.width = `${percentage}%`;
+    }
+  }
+  
+  function updateFooter() {
+    const requiredTasks = payload.tasks.filter(t => t.required);
+    const completedRequired = requiredTasks.filter(t => completedTasks.has(t.id));
+    const allRequiredCompleted = completedRequired.length === requiredTasks.length;
+    const allTasksCompleted = completedTasks.size === payload.tasks.length;
+    
+    const completeBtn = footerEl.querySelector(".dap-tasklist-complete") as HTMLButtonElement;
+    const skipBtn = footerEl.querySelector(".dap-tasklist-skip") as HTMLButtonElement;
+    const completionText = footerEl.querySelector(".dap-tasklist-completion-text") as HTMLElement;
+    
+    // Update completion button
+    if (allTasksCompleted) {
+      completeBtn.textContent = "All Done!";
+      completeBtn.className = "dap-tasklist-btn success";
+      completeBtn.disabled = false;
+    } else if (allRequiredCompleted || payload.allowPartialCompletion) {
+      completeBtn.textContent = "Complete";
+      completeBtn.className = "dap-tasklist-btn primary";
+      completeBtn.disabled = false;
+    } else {
+      completeBtn.textContent = "Complete";
+      completeBtn.className = "dap-tasklist-btn primary";
+      completeBtn.disabled = true;
+    }
+    
+    // Update completion text
+    if (requiredTasks.length > 0 && !allRequiredCompleted) {
+      const remaining = requiredTasks.length - completedRequired.length;
+      completionText.textContent = `${remaining} required task${remaining === 1 ? "" : "s"} remaining`;
+    } else {
+      completionText.textContent = "";
+    }
+  }
+  
+  function completeTaskList() {
+    overlay.style.animation = "tasklistOverlayFadeOut 0.2s ease-in";
+    modal.style.animation = "tasklistModalOut 0.2s ease-in";
+    
+    setTimeout(() => {
+      overlay.remove();
+      
+      // Signal completion
+      if (completionTracker?.onComplete) {
+        console.debug(`[DAP] Completing task list flow: ${id}`);
+        completionTracker.onComplete();
+      }
+    }, 200);
+  }
+  
+  // Footer button events
+  const completeBtn = footerEl.querySelector(".dap-tasklist-complete") as HTMLButtonElement;
+  const skipBtn = footerEl.querySelector(".dap-tasklist-skip") as HTMLButtonElement;
+  
+  completeBtn.addEventListener("click", completeTaskList);
+  if (skipBtn) {
+    skipBtn.addEventListener("click", completeTaskList);
+  }
+  
+  // Close on overlay click
+  overlay.addEventListener("click", (e) => {
+    if (e.target === overlay) {
+      completeTaskList();
+    }
+  });
+  
+  // Keyboard support
+  document.addEventListener("keydown", handleKeyboard);
+  
+  function handleKeyboard(e: KeyboardEvent) {
+    if (e.key === "Escape") {
+      completeTaskList();
+      document.removeEventListener("keydown", handleKeyboard);
+    }
+  }
+  
+  // Add exit animations
+  if (!document.getElementById("dap-tasklist-exit-styles")) {
+    const style = document.createElement("style");
+    style.id = "dap-tasklist-exit-styles";
+    style.textContent = `
+      @keyframes tasklistOverlayFadeOut {
+        from { opacity: 1; }
+        to { opacity: 0; }
+      }
+      @keyframes tasklistModalOut {
+        from { opacity: 1; transform: scale(1); }
+        to { opacity: 0; transform: scale(0.95); }
+      }
+    `;
+    document.head.appendChild(style);
+  }
+  
+  // Initial footer update
+  updateFooter();
+}
+
+function createTaskListModal(payload: TaskListPayload) {
+  const overlay = document.createElement("div");
+  overlay.className = "dap-tasklist-overlay";
+  
+  const modal = document.createElement("div");
+  modal.className = "dap-tasklist-modal";
+  
+  // Header
+  const header = document.createElement("div");
+  header.className = "dap-tasklist-header";
+  
+  const title = document.createElement("h2");
+  title.className = "dap-tasklist-title";
+  title.id = "tasklist-title";
+  title.textContent = payload.title || "Tasks";
+  
+  header.appendChild(title);
+  
+  if (payload.description) {
+    const description = document.createElement("p");
+    description.className = "dap-tasklist-description";
+    description.innerHTML = sanitizeHtml(payload.description);
+    header.appendChild(description);
+  }
+  
+  // Progress section
+  let progressEl: HTMLElement | null = null;
+  if (payload.showProgress) {
+    progressEl = document.createElement("div");
+    progressEl.className = "dap-tasklist-progress";
+    
+    const progressText = document.createElement("div");
+    progressText.className = "dap-tasklist-progress-text";
+    progressText.textContent = "0 of 0 tasks completed";
+    
+    const progressBar = document.createElement("div");
+    progressBar.className = "dap-tasklist-progress-bar";
+    
+    const progressFill = document.createElement("div");
+    progressFill.className = "dap-tasklist-progress-fill";
+    
+    progressBar.appendChild(progressFill);
+    progressEl.appendChild(progressText);
+    progressEl.appendChild(progressBar);
+  }
+  
+  // Body
+  const bodyEl = document.createElement("div");
+  bodyEl.className = "dap-tasklist-body";
+  
+  // Footer
+  const footerEl = document.createElement("div");
+  footerEl.className = "dap-tasklist-footer";
+  
+  const completionText = document.createElement("div");
+  completionText.className = "dap-tasklist-completion-text";
+  
+  const actions = document.createElement("div");
+  actions.className = "dap-tasklist-actions";
+  
+  if (payload.allowPartialCompletion) {
+    const skipBtn = document.createElement("button");
+    skipBtn.className = "dap-tasklist-btn dap-tasklist-skip";
+    skipBtn.textContent = "Skip";
+    actions.appendChild(skipBtn);
+  }
+  
+  const completeBtn = document.createElement("button");
+  completeBtn.className = "dap-tasklist-btn primary dap-tasklist-complete";
+  completeBtn.textContent = "Complete";
+  actions.appendChild(completeBtn);
+  
+  footerEl.appendChild(completionText);
+  footerEl.appendChild(actions);
+  
+  // Assemble modal
+  modal.appendChild(header);
+  if (progressEl) modal.appendChild(progressEl);
+  modal.appendChild(bodyEl);
+  modal.appendChild(footerEl);
+  overlay.appendChild(modal);
+  
+  return { overlay, modal, progressEl, bodyEl, footerEl };
+}
+
+function ensureStyles() {
+  if (!document.getElementById("dap-tasklist-style")) {
+    const style = document.createElement("style");
+    style.id = "dap-tasklist-style";
+    style.textContent = taskListCssText;
+    document.head.appendChild(style);
+  }
+}