@fragments-sdk/cli 0.2.2

package/src/viewer/components/ActionCapture.tsx

@@ -0,0 +1,172 @@
+/**
+ * ActionCapture component - captures DOM events for action logging.
+ *
+ * Uses event delegation to capture interactions at the DOM level,
+ * which works even when component render functions don't pass callbacks.
+ */
+
+import { useRef, useEffect, type ReactNode } from 'react';
+
+interface ActionCaptureProps {
+  children: ReactNode;
+  onAction: (name: string, args: unknown[]) => void;
+  enabled?: boolean;
+}
+
+// Events to capture
+const CAPTURE_EVENTS = [
+  'click',
+  'dblclick',
+  'change',
+  'input',
+  'submit',
+  'focus',
+  'blur',
+  'keydown',
+  'keyup',
+] as const;
+
+// Map event types to action names
+function getActionName(event: Event): string {
+  const type = event.type;
+  // Convert to React-style naming
+  switch (type) {
+    case 'click': return 'onClick';
+    case 'dblclick': return 'onDoubleClick';
+    case 'change': return 'onChange';
+    case 'input': return 'onInput';
+    case 'submit': return 'onSubmit';
+    case 'focus': return 'onFocus';
+    case 'blur': return 'onBlur';
+    case 'keydown': return 'onKeyDown';
+    case 'keyup': return 'onKeyUp';
+    default: return `on${type.charAt(0).toUpperCase() + type.slice(1)}`;
+  }
+}
+
+// Extract useful information about the target element
+function getElementInfo(element: Element): Record<string, unknown> {
+  const tag = element.tagName.toLowerCase();
+  const info: Record<string, unknown> = { element: tag };
+
+  // Get identifying attributes
+  if (element.id) info.id = element.id;
+  if (element.className && typeof element.className === 'string') {
+    const classes = element.className.trim().split(/\s+/).slice(0, 3);
+    if (classes.length > 0 && classes[0]) info.className = classes.join(' ');
+  }
+
+  // Get accessibility info
+  const role = element.getAttribute('role');
+  if (role) info.role = role;
+
+  const ariaLabel = element.getAttribute('aria-label');
+  if (ariaLabel) info['aria-label'] = ariaLabel;
+
+  // Get text content (truncated)
+  const text = element.textContent?.trim();
+  if (text && text.length > 0 && text.length <= 50) {
+    info.text = text;
+  } else if (text && text.length > 50) {
+    info.text = text.slice(0, 47) + '...';
+  }
+
+  // Get input-specific info
+  if (element instanceof HTMLInputElement) {
+    info.type = element.type;
+    info.name = element.name || undefined;
+    if (element.type === 'checkbox' || element.type === 'radio') {
+      info.checked = element.checked;
+    } else if (element.type !== 'password') {
+      info.value = element.value;
+    }
+  } else if (element instanceof HTMLSelectElement) {
+    info.name = element.name || undefined;
+    info.value = element.value;
+    info.selectedText = element.options[element.selectedIndex]?.text;
+  } else if (element instanceof HTMLTextAreaElement) {
+    info.name = element.name || undefined;
+    info.value = element.value.length > 100 ? element.value.slice(0, 97) + '...' : element.value;
+  } else if (element instanceof HTMLButtonElement) {
+    info.type = element.type;
+    if (element.name) info.name = element.name;
+  }
+
+  // Clean up undefined values
+  return Object.fromEntries(Object.entries(info).filter(([, v]) => v !== undefined));
+}
+
+// Extract keyboard event info
+function getKeyboardInfo(event: KeyboardEvent): Record<string, unknown> {
+  return {
+    key: event.key,
+    code: event.code,
+    ...(event.ctrlKey && { ctrlKey: true }),
+    ...(event.shiftKey && { shiftKey: true }),
+    ...(event.altKey && { altKey: true }),
+    ...(event.metaKey && { metaKey: true }),
+  };
+}
+
+export function ActionCapture({ children, onAction, enabled = true }: ActionCaptureProps) {
+  const containerRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    if (!enabled) return;
+
+    const container = containerRef.current;
+    if (!container) return;
+
+    const handleEvent = (event: Event) => {
+      const target = event.target;
+      if (!(target instanceof Element)) return;
+
+      // Skip if the event is from the container itself
+      if (target === container) return;
+
+      // Get action name
+      const actionName = getActionName(event);
+
+      // Build args array with useful info
+      const args: unknown[] = [];
+
+      // Add element info
+      const elementInfo = getElementInfo(target);
+      args.push(elementInfo);
+
+      // Add keyboard-specific info for key events
+      if (event instanceof KeyboardEvent) {
+        args.push(getKeyboardInfo(event));
+      }
+
+      // Add mouse position for click events
+      if (event instanceof MouseEvent && (event.type === 'click' || event.type === 'dblclick')) {
+        args.push({
+          clientX: event.clientX,
+          clientY: event.clientY,
+          button: event.button,
+        });
+      }
+
+      onAction(actionName, args);
+    };
+
+    // Attach event listeners with capture phase
+    // This ensures we catch events even if stopPropagation is called
+    CAPTURE_EVENTS.forEach(eventType => {
+      container.addEventListener(eventType, handleEvent, { capture: true });
+    });
+
+    return () => {
+      CAPTURE_EVENTS.forEach(eventType => {
+        container.removeEventListener(eventType, handleEvent, { capture: true });
+      });
+    };
+  }, [onAction, enabled]);
+
+  return (
+    <div ref={containerRef} className="contents">
+      {children}
+    </div>
+  );
+}

package/src/viewer/components/ActionsPanel.tsx

@@ -0,0 +1,371 @@
+/**
+ * Actions Panel - Storybook-style event logging
+ *
+ * Displays a log of callback invocations (onClick, onChange, etc.)
+ * with expandable argument details and timestamps.
+ */
+
+import { useState, useMemo, useRef, useEffect } from "react";
+import clsx from "clsx";
+import type { ActionLog } from "../hooks/useActions.js";
+import { formatActionArg } from "../hooks/useActions.js";
+import {
+  TrashIcon,
+  ChevronDownIcon,
+  ChevronRightIcon,
+  PlayIcon,
+  ExportIcon,
+  DownloadIcon,
+  CopyIcon,
+  CheckIcon,
+} from "./Icons.js";
+import {
+  exportActions,
+  copyToClipboard,
+  downloadAsFile,
+  getFileExtension,
+  type ExportFormat,
+} from "../utils/actionExport.js";
+
+interface ActionsPanelProps {
+  /** List of action logs */
+  logs: ActionLog[];
+  /** Callback to clear all logs */
+  onClear: () => void;
+  /** Component name for export context */
+  componentName?: string;
+  /** Variant name for export context */
+  variantName?: string;
+}
+
+export function ActionsPanel({ logs, onClear, componentName = 'Component', variantName = 'Default' }: ActionsPanelProps) {
+  const [expandedLogs, setExpandedLogs] = useState<Set<string>>(new Set());
+  const [filter, setFilter] = useState("");
+  const [showExportMenu, setShowExportMenu] = useState(false);
+  const [copyFeedback, setCopyFeedback] = useState<string | null>(null);
+  const exportMenuRef = useRef<HTMLDivElement>(null);
+
+  // Close export menu when clicking outside
+  useEffect(() => {
+    const handleClickOutside = (event: MouseEvent) => {
+      if (exportMenuRef.current && !exportMenuRef.current.contains(event.target as Node)) {
+        setShowExportMenu(false);
+      }
+    };
+    document.addEventListener('mousedown', handleClickOutside);
+    return () => document.removeEventListener('mousedown', handleClickOutside);
+  }, []);
+
+  const filteredLogs = useMemo(() => {
+    if (!filter) return logs;
+    const lowerFilter = filter.toLowerCase();
+    return logs.filter((log) => log.name.toLowerCase().includes(lowerFilter));
+  }, [logs, filter]);
+
+  const toggleExpanded = (id: string) => {
+    setExpandedLogs((prev) => {
+      const next = new Set(prev);
+      if (next.has(id)) {
+        next.delete(id);
+      } else {
+        next.add(id);
+      }
+      return next;
+    });
+  };
+
+  const formatTime = (timestamp: number) => {
+    const date = new Date(timestamp);
+    return date.toLocaleTimeString("en-US", {
+      hour12: false,
+      hour: "2-digit",
+      minute: "2-digit",
+      second: "2-digit",
+    });
+  };
+
+  const handleExport = async (format: ExportFormat, action: 'copy' | 'download') => {
+    const content = exportActions(logs, format, {
+      componentName,
+      variantName,
+      includeComments: true,
+    });
+
+    if (action === 'copy') {
+      const success = await copyToClipboard(content);
+      if (success) {
+        setCopyFeedback(format);
+        setTimeout(() => setCopyFeedback(null), 2000);
+      }
+    } else {
+      const filename = `${componentName}-${variantName}-actions${getFileExtension(format)}`;
+      downloadAsFile(content, filename.toLowerCase().replace(/\s+/g, '-'));
+    }
+
+    setShowExportMenu(false);
+  };
+
+  // No logs state
+  if (logs.length === 0) {
+    return (
+      <div className="h-full flex flex-col">
+        <div className="p-4 border-b border-[--border] flex items-center justify-between">
+          <h3 className="font-medium text-primary flex items-center gap-2">
+            <PlayIcon className="w-4 h-4" />
+            Actions
+          </h3>
+        </div>
+        <div className="flex-1 flex items-center justify-center p-8 text-center">
+          <div className="max-w-md">
+            <div className="w-12 h-12 rounded-full bg-[--bg-tertiary] flex items-center justify-center mx-auto mb-4">
+              <PlayIcon className="w-6 h-6 text-tertiary" />
+            </div>
+            <h4 className="font-medium text-secondary mb-2">
+              No actions logged yet
+            </h4>
+            <p className="text-sm text-tertiary">
+              Interact with the component to see callback invocations here.
+              Actions like <code className="px-1 py-0.5 bg-[--bg-tertiary] rounded text-xs">onClick</code>, <code className="px-1 py-0.5 bg-[--bg-tertiary] rounded text-xs">onChange</code>, etc. will be logged automatically.
+            </p>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="h-full flex flex-col">
+      {/* Header */}
+      <div className="p-3 border-b border-[--border] flex items-center justify-between gap-2">
+        <div className="flex items-center gap-2 flex-1">
+          <h3 className="font-medium text-primary flex items-center gap-2 text-sm">
+            <PlayIcon className="w-4 h-4" />
+            Actions
+          </h3>
+          <span className="text-xs text-tertiary bg-[--bg-tertiary] px-1.5 py-0.5 rounded">
+            {logs.length}
+          </span>
+        </div>
+        <div className="flex items-center gap-2">
+          <input
+            type="text"
+            placeholder="Filter..."
+            value={filter}
+            onChange={(e) => setFilter(e.target.value)}
+            className="px-2 py-1 text-xs border border-[--border] rounded bg-[--bg-elevated] text-primary w-24 focus:outline-none focus:ring-1 focus:ring-[--color-accent]"
+          />
+
+          {/* Export dropdown */}
+          <div className="relative" ref={exportMenuRef}>
+            <button
+              onClick={() => setShowExportMenu(!showExportMenu)}
+              className={clsx(
+                "p-1.5 rounded transition-colors",
+                showExportMenu
+                  ? "text-[--color-accent] bg-[--bg-hover]"
+                  : "text-tertiary hover:text-secondary hover:bg-[--bg-hover]"
+              )}
+              title="Export actions"
+            >
+              <ExportIcon className="w-4 h-4" />
+            </button>
+
+            {showExportMenu && (
+              <div className="absolute right-0 top-full mt-1 w-56 bg-[--bg-elevated] rounded-lg shadow-[--shadow-lg] border border-[--border] py-1 z-50">
+                <div className="px-3 py-1.5 text-xs font-medium text-tertiary uppercase tracking-wide">
+                  Export as
+                </div>
+
+                {/* JSON */}
+                <div className="px-1">
+                  <div className="flex items-center justify-between px-2 py-1.5 hover:bg-[--bg-hover] rounded">
+                    <span className="text-sm text-secondary">JSON</span>
+                    <div className="flex items-center gap-1">
+                      <button
+                        onClick={() => handleExport('json', 'copy')}
+                        className="p-1 text-tertiary hover:text-secondary hover:bg-[--bg-hover] rounded"
+                        title="Copy to clipboard"
+                      >
+                        {copyFeedback === 'json' ? <CheckIcon className="w-3.5 h-3.5 text-green-500" /> : <CopyIcon className="w-3.5 h-3.5" />}
+                      </button>
+                      <button
+                        onClick={() => handleExport('json', 'download')}
+                        className="p-1 text-tertiary hover:text-secondary hover:bg-[--bg-hover] rounded"
+                        title="Download file"
+                      >
+                        <DownloadIcon className="w-3.5 h-3.5" />
+                      </button>
+                    </div>
+                  </div>
+                </div>
+
+                {/* Jest */}
+                <div className="px-1">
+                  <div className="flex items-center justify-between px-2 py-1.5 hover:bg-[--bg-hover] rounded">
+                    <span className="text-sm text-secondary">Jest Assertions</span>
+                    <div className="flex items-center gap-1">
+                      <button
+                        onClick={() => handleExport('jest', 'copy')}
+                        className="p-1 text-tertiary hover:text-secondary hover:bg-[--bg-hover] rounded"
+                        title="Copy to clipboard"
+                      >
+                        {copyFeedback === 'jest' ? <CheckIcon className="w-3.5 h-3.5 text-green-500" /> : <CopyIcon className="w-3.5 h-3.5" />}
+                      </button>
+                      <button
+                        onClick={() => handleExport('jest', 'download')}
+                        className="p-1 text-tertiary hover:text-secondary hover:bg-[--bg-hover] rounded"
+                        title="Download file"
+                      >
+                        <DownloadIcon className="w-3.5 h-3.5" />
+                      </button>
+                    </div>
+                  </div>
+                </div>
+
+                {/* Playwright */}
+                <div className="px-1">
+                  <div className="flex items-center justify-between px-2 py-1.5 hover:bg-[--bg-hover] rounded">
+                    <span className="text-sm text-secondary">Playwright Test</span>
+                    <div className="flex items-center gap-1">
+                      <button
+                        onClick={() => handleExport('playwright', 'copy')}
+                        className="p-1 text-tertiary hover:text-secondary hover:bg-[--bg-hover] rounded"
+                        title="Copy to clipboard"
+                      >
+                        {copyFeedback === 'playwright' ? <CheckIcon className="w-3.5 h-3.5 text-green-500" /> : <CopyIcon className="w-3.5 h-3.5" />}
+                      </button>
+                      <button
+                        onClick={() => handleExport('playwright', 'download')}
+                        className="p-1 text-tertiary hover:text-secondary hover:bg-[--bg-hover] rounded"
+                        title="Download file"
+                      >
+                        <DownloadIcon className="w-3.5 h-3.5" />
+                      </button>
+                    </div>
+                  </div>
+                </div>
+
+                <div className="border-t border-[--border-subtle] my-1" />
+                <div className="px-3 py-1.5 text-xs text-tertiary">
+                  {logs.length} action{logs.length !== 1 ? 's' : ''} recorded
+                </div>
+              </div>
+            )}
+          </div>
+
+          <button
+            onClick={onClear}
+            className="p-1.5 text-tertiary hover:text-secondary hover:bg-[--bg-hover] rounded transition-colors"
+            title="Clear all actions"
+          >
+            <TrashIcon className="w-4 h-4" />
+          </button>
+        </div>
+      </div>
+
+      {/* Log list */}
+      <div className="flex-1 overflow-y-auto">
+        {filteredLogs.length === 0 ? (
+          <div className="p-4 text-center text-sm text-tertiary">
+            No actions match "{filter}"
+          </div>
+        ) : (
+          <div className="divide-y divide-[--border-subtle]">
+            {filteredLogs.map((log) => (
+              <ActionLogItem
+                key={log.id}
+                log={log}
+                isExpanded={expandedLogs.has(log.id)}
+                onToggle={() => toggleExpanded(log.id)}
+                formatTime={formatTime}
+              />
+            ))}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}
+
+interface ActionLogItemProps {
+  log: ActionLog;
+  isExpanded: boolean;
+  onToggle: () => void;
+  formatTime: (timestamp: number) => string;
+}
+
+function ActionLogItem({ log, isExpanded, onToggle, formatTime }: ActionLogItemProps) {
+  const hasArgs = log.args.length > 0;
+  const argsPreview = hasArgs
+    ? log.args.map((arg) => formatActionArg(arg, 50)).join(", ")
+    : "";
+
+  return (
+    <div className="hover:bg-[--bg-secondary] transition-colors">
+      <button
+        onClick={onToggle}
+        disabled={!hasArgs}
+        className={clsx(
+          "w-full px-3 py-2 flex items-start gap-2 text-left",
+          hasArgs && "cursor-pointer",
+          !hasArgs && "cursor-default"
+        )}
+      >
+        {/* Expand icon */}
+        <div className="flex-shrink-0 w-4 h-4 mt-0.5">
+          {hasArgs ? (
+            isExpanded ? (
+              <ChevronDownIcon className="w-4 h-4 text-tertiary" />
+            ) : (
+              <ChevronRightIcon className="w-4 h-4 text-tertiary" />
+            )
+          ) : (
+            <div className="w-4 h-4" />
+          )}
+        </div>
+
+        {/* Action name */}
+        <div className="flex-1 min-w-0">
+          <div className="flex items-center gap-2">
+            <span className="font-mono text-sm text-[--color-accent]">
+              {log.name}
+            </span>
+            {log.count > 1 && (
+              <span className="text-xs text-tertiary bg-[--bg-tertiary] px-1.5 py-0.5 rounded-full">
+                ×{log.count}
+              </span>
+            )}
+          </div>
+          {!isExpanded && hasArgs && (
+            <div className="text-xs text-tertiary truncate mt-0.5 font-mono">
+              ({argsPreview})
+            </div>
+          )}
+        </div>
+
+        {/* Timestamp */}
+        <span className="flex-shrink-0 text-xs text-tertiary font-mono">
+          {formatTime(log.timestamp)}
+        </span>
+      </button>
+
+      {/* Expanded args */}
+      {isExpanded && hasArgs && (
+        <div className="px-3 pb-3 pl-9">
+          <div className="bg-[--bg-secondary] rounded-lg p-2 overflow-x-auto">
+            {log.args.map((arg, index) => (
+              <div key={index} className="mb-1 last:mb-0">
+                <span className="text-xs text-tertiary">
+                  {log.args.length > 1 ? `[${index}] ` : ""}
+                </span>
+                <pre className="inline text-xs font-mono text-secondary whitespace-pre-wrap">
+                  {formatActionArg(arg, 500)}
+                </pre>
+              </div>
+            ))}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}