@stacksjs/stx 0.2.95 → 0.2.97

package/dist/story/interactions.js

@@ -1,2 +1,225 @@
-// @bun
-import{ha as a,ia as b,ja as c,ka as d}from"../chunk-h82kjdr4.js";import"../chunk-xv34zbp4.js";export{b as runInteractionTests,a as parseInteractionBlocks,c as getInteractionHelpersScript,d as formatInteractionResults};
+export function parseInteractionBlocks(content) {
+  const tests = [], regex = /@interaction\s*\(\s*['"]([^'"]+)['"]\s*\)([\s\S]*?)@endinteraction/g;
+  let match = regex.exec(content);
+  while (match !== null) {
+    const name = match[1], body = match[2].trim(), steps = parseInteractionSteps(body);
+    tests.push({
+      name,
+      storyId: "",
+      variantId: "",
+      steps
+    });
+    match = regex.exec(content);
+  }
+  return tests;
+}
+function parseInteractionSteps(body) {
+  const steps = [], lines = body.split(`
+`).map((l) => l.trim()).filter(Boolean);
+  for (const line of lines) {
+    const clickMatch = line.match(/await\s+click\s*\(\s*['"]([^'"]+)['"]\s*\)/);
+    if (clickMatch) {
+      steps.push({ action: "click", selector: clickMatch[1] });
+      continue;
+    }
+    const typeMatch = line.match(/await\s+type\s*\(\s*['"]([^'"]+)['"]\s*,\s*['"]([^'"]+)['"]\s*\)/);
+    if (typeMatch) {
+      steps.push({ action: "type", selector: typeMatch[1], value: typeMatch[2] });
+      continue;
+    }
+    const selectMatch = line.match(/await\s+select\s*\(\s*['"]([^'"]+)['"]\s*,\s*['"]([^'"]+)['"]\s*\)/);
+    if (selectMatch) {
+      steps.push({ action: "select", selector: selectMatch[1], value: selectMatch[2] });
+      continue;
+    }
+    const hoverMatch = line.match(/await\s+hover\s*\(\s*['"]([^'"]+)['"]\s*\)/);
+    if (hoverMatch) {
+      steps.push({ action: "hover", selector: hoverMatch[1] });
+      continue;
+    }
+    const waitMatch = line.match(/await\s+wait\s*\(\s*(\d+)\s*\)/);
+    if (waitMatch) {
+      steps.push({ action: "wait", duration: Number.parseInt(waitMatch[1], 10) });
+      continue;
+    }
+    const expectMatch = line.match(/expect\s*\(\s*['"]([^'"]+)['"]\s*\)\s*\.\s*(\w+)\s*\(\s*['"]?([^'")\s]+)['"]?\s*\)/);
+    if (expectMatch) {
+      const selector = expectMatch[1], assertType = expectMatch[2], expected = expectMatch[3];
+      let assertion;
+      switch (assertType) {
+        case "toHaveText":
+        case "toContainText":
+          assertion = { type: "text", expected };
+          break;
+        case "toHaveValue":
+          assertion = { type: "value", expected };
+          break;
+        case "toBeVisible":
+          assertion = { type: "visible", expected: !0 };
+          break;
+        case "toBeHidden":
+          assertion = { type: "hidden", expected: !0 };
+          break;
+        case "toHaveClass":
+          assertion = { type: "class", expected };
+          break;
+        default:
+          assertion = { type: "text", expected };
+      }
+      steps.push({ action: "assert", selector, assertion });
+    }
+  }
+  return steps;
+}
+export async function runInteractionTests(_ctx, story, tests) {
+  const results = [];
+  for (const test of tests) {
+    const startTime = Date.now();
+    let passed = !0, error, failedStep;
+    try {
+      if (test.setup)
+        await test.setup();
+      for (let i = 0;i < test.steps.length; i++) {
+        const step = test.steps[i], stepResult = await executeStep(step);
+        if (!stepResult.success) {
+          passed = !1;
+          error = stepResult.error;
+          failedStep = i;
+          break;
+        }
+      }
+      if (test.teardown)
+        await test.teardown();
+    } catch (e) {
+      passed = !1;
+      error = String(e);
+    }
+    results.push({
+      name: test.name,
+      passed,
+      error,
+      duration: Date.now() - startTime,
+      failedStep
+    });
+  }
+  return results;
+}
+async function executeStep(step) {
+  switch (step.action) {
+    case "wait":
+      await new Promise((resolve) => setTimeout(resolve, step.duration || 100));
+      return { success: !0 };
+    case "click":
+    case "type":
+    case "select":
+    case "hover":
+    case "focus":
+    case "blur":
+      return { success: !0 };
+    case "assert":
+      return { success: !0 };
+    default:
+      return { success: !1, error: `Unknown action: ${step.action}` };
+  }
+}
+export function getInteractionHelpersScript() {
+  return `
+    window.__stxInteraction = {
+      async click(selector) {
+        const el = document.querySelector(selector);
+        if (!el) throw new Error('Element not found: ' + selector);
+        el.click();
+      },
+
+      async type(selector, value) {
+        const el = document.querySelector(selector);
+        if (!el) throw new Error('Element not found: ' + selector);
+        el.value = value;
+        el.dispatchEvent(new Event('input', { bubbles: true }));
+        el.dispatchEvent(new Event('change', { bubbles: true }));
+      },
+
+      async select(selector, value) {
+        const el = document.querySelector(selector);
+        if (!el) throw new Error('Element not found: ' + selector);
+        el.value = value;
+        el.dispatchEvent(new Event('change', { bubbles: true }));
+      },
+
+      async hover(selector) {
+        const el = document.querySelector(selector);
+        if (!el) throw new Error('Element not found: ' + selector);
+        el.dispatchEvent(new MouseEvent('mouseenter', { bubbles: true }));
+      },
+
+      async wait(ms) {
+        return new Promise(resolve => setTimeout(resolve, ms));
+      },
+
+      expect(selector) {
+        const el = document.querySelector(selector);
+        return {
+          toHaveText(expected) {
+            if (!el) throw new Error('Element not found: ' + selector);
+            if (el.textContent !== expected) {
+              throw new Error('Expected text "' + expected + '" but got "' + el.textContent + '"');
+            }
+          },
+          toContainText(expected) {
+            if (!el) throw new Error('Element not found: ' + selector);
+            if (!el.textContent.includes(expected)) {
+              throw new Error('Expected text to contain "' + expected + '"');
+            }
+          },
+          toHaveValue(expected) {
+            if (!el) throw new Error('Element not found: ' + selector);
+            if (el.value !== expected) {
+              throw new Error('Expected value "' + expected + '" but got "' + el.value + '"');
+            }
+          },
+          toBeVisible() {
+            if (!el) throw new Error('Element not found: ' + selector);
+            const style = window.getComputedStyle(el);
+            if (style.display === 'none' || style.visibility === 'hidden') {
+              throw new Error('Expected element to be visible');
+            }
+          },
+          toBeHidden() {
+            if (el) {
+              const style = window.getComputedStyle(el);
+              if (style.display !== 'none' && style.visibility !== 'hidden') {
+                throw new Error('Expected element to be hidden');
+              }
+            }
+          },
+          toHaveClass(className) {
+            if (!el) throw new Error('Element not found: ' + selector);
+            if (!el.classList.contains(className)) {
+              throw new Error('Expected element to have class "' + className + '"');
+            }
+          }
+        };
+      }
+    };
+  `;
+}
+export function formatInteractionResults(results) {
+  const lines = [], passed = results.filter((r) => r.passed).length, failed = results.filter((r) => !r.passed).length;
+  lines.push("");
+  lines.push("Interaction Tests");
+  lines.push("\u2500".repeat(40));
+  for (const result of results) {
+    const icon = result.passed ? "\u2713" : "\u2717", status = result.passed ? "PASS" : "FAIL";
+    lines.push(`${icon} ${result.name} [${status}] (${result.duration}ms)`);
+    if (!result.passed && result.error) {
+      lines.push(`  Error: ${result.error}`);
+      if (result.failedStep !== void 0)
+        lines.push(`  Failed at step: ${result.failedStep + 1}`);
+    }
+  }
+  lines.push("");
+  lines.push(`Total: ${results.length} | Passed: ${passed} | Failed: ${failed}`);
+  lines.push("");
+  return lines.join(`
+`);
+}

package/dist/story/keyboard-shortcuts.js

@@ -1,2 +1,345 @@
-// @bun
-import{Ub as a,Vb as b,Wb as c,Xb as d,Yb as e}from"../chunk-fzm3y0r3.js";import"../chunk-xv34zbp4.js";export{d as getShortcutsStyles,e as getShortcutsScript,c as getShortcutsModalHtml,b as formatShortcutKey,a as defaultShortcuts};
+export const defaultShortcuts = [
+  { key: "k", modifiers: ["meta"], description: "Open search", category: "Navigation", action: "openSearch" },
+  { key: "ArrowUp", description: "Previous story", category: "Navigation", action: "prevStory" },
+  { key: "ArrowDown", description: "Next story", category: "Navigation", action: "nextStory" },
+  { key: "ArrowLeft", description: "Previous variant", category: "Navigation", action: "prevVariant" },
+  { key: "ArrowRight", description: "Next variant", category: "Navigation", action: "nextVariant" },
+  { key: "Enter", description: "Select story", category: "Navigation", action: "selectStory" },
+  { key: "Escape", description: "Close panel/modal", category: "Navigation", action: "closePanel" },
+  { key: "d", description: "Toggle dark mode", category: "View", action: "toggleDarkMode" },
+  { key: "f", description: "Toggle fullscreen", category: "View", action: "toggleFullscreen" },
+  { key: "s", description: "Toggle sidebar", category: "View", action: "toggleSidebar" },
+  { key: "a", description: "Toggle addons panel", category: "View", action: "toggleAddons" },
+  { key: "z", description: "Zoom in", category: "View", action: "zoomIn" },
+  { key: "x", description: "Zoom out", category: "View", action: "zoomOut" },
+  { key: "0", description: "Reset zoom", category: "View", action: "resetZoom" },
+  { key: "r", description: "Reload story", category: "Actions", action: "reloadStory" },
+  { key: "c", description: "Copy story code", category: "Actions", action: "copyCode" },
+  { key: "p", description: "Open props panel", category: "Actions", action: "openProps" },
+  { key: "b", description: "Toggle bookmark", category: "Actions", action: "toggleBookmark" },
+  { key: "t", description: "Run tests", category: "Actions", action: "runTests" },
+  { key: "?", description: "Show shortcuts", category: "Help", action: "showShortcuts" }
+];
+export function formatShortcutKey(shortcut) {
+  const parts = [];
+  if (shortcut.modifiers)
+    for (const mod of shortcut.modifiers)
+      switch (mod) {
+        case "meta":
+          parts.push("\u2318");
+          break;
+        case "ctrl":
+          parts.push("Ctrl");
+          break;
+        case "alt":
+          parts.push("Alt");
+          break;
+        case "shift":
+          parts.push("\u21E7");
+          break;
+      }
+  let key = shortcut.key;
+  switch (key) {
+    case "ArrowUp":
+      key = "\u2191";
+      break;
+    case "ArrowDown":
+      key = "\u2193";
+      break;
+    case "ArrowLeft":
+      key = "\u2190";
+      break;
+    case "ArrowRight":
+      key = "\u2192";
+      break;
+    case "Enter":
+      key = "\u21B5";
+      break;
+    case "Escape":
+      key = "Esc";
+      break;
+    default:
+      key = key.toUpperCase();
+  }
+  parts.push(key);
+  return parts.join(" + ");
+}
+export function getShortcutsModalHtml(shortcuts = defaultShortcuts) {
+  const categories = new Map;
+  for (const shortcut of shortcuts) {
+    const list = categories.get(shortcut.category) || [];
+    list.push(shortcut);
+    categories.set(shortcut.category, list);
+  }
+  return `
+    <div class="shortcuts-modal" id="shortcuts-modal" style="display: none;">
+      <div class="shortcuts-backdrop" onclick="closeShortcutsModal()"></div>
+      <div class="shortcuts-content">
+        <div class="shortcuts-header">
+          <h3>Keyboard Shortcuts</h3>
+          <button class="shortcuts-close" onclick="closeShortcutsModal()">\xD7</button>
+        </div>
+        <div class="shortcuts-body">
+          ${Array.from(categories.entries()).map(([category, items]) => `
+    <div class="shortcuts-category">
+      <h4>${category}</h4>
+      <div class="shortcuts-list">
+        ${items.map((s) => `
+          <div class="shortcut-item">
+            <span class="shortcut-desc">${s.description}</span>
+            <kbd class="shortcut-key">${formatShortcutKey(s)}</kbd>
+          </div>
+        `).join("")}
+      </div>
+    </div>
+  `).join("")}
+        </div>
+      </div>
+    </div>
+  `;
+}
+export function getShortcutsStyles() {
+  return `
+    .shortcuts-modal {
+      position: fixed;
+      inset: 0;
+      z-index: 1000;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+    .shortcuts-backdrop {
+      position: absolute;
+      inset: 0;
+      background: rgba(0, 0, 0, 0.5);
+    }
+    .shortcuts-content {
+      position: relative;
+      background: var(--bg);
+      border-radius: 12px;
+      box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
+      max-width: 600px;
+      max-height: 80vh;
+      overflow: hidden;
+      display: flex;
+      flex-direction: column;
+    }
+    .shortcuts-header {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      padding: 16px 20px;
+      border-bottom: 1px solid var(--border);
+    }
+    .shortcuts-header h3 {
+      margin: 0;
+      font-size: 16px;
+    }
+    .shortcuts-close {
+      background: none;
+      border: none;
+      font-size: 24px;
+      cursor: pointer;
+      color: var(--text-secondary);
+      padding: 0;
+      line-height: 1;
+    }
+    .shortcuts-body {
+      padding: 20px;
+      overflow-y: auto;
+      display: grid;
+      grid-template-columns: repeat(2, 1fr);
+      gap: 24px;
+    }
+    .shortcuts-category h4 {
+      margin: 0 0 12px;
+      font-size: 12px;
+      text-transform: uppercase;
+      color: var(--text-secondary);
+      letter-spacing: 0.5px;
+    }
+    .shortcuts-list {
+      display: flex;
+      flex-direction: column;
+      gap: 8px;
+    }
+    .shortcut-item {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      gap: 12px;
+    }
+    .shortcut-desc {
+      font-size: 13px;
+      color: var(--text);
+    }
+    .shortcut-key {
+      font-family: monospace;
+      font-size: 11px;
+      padding: 4px 8px;
+      background: var(--bg-secondary);
+      border: 1px solid var(--border);
+      border-radius: 4px;
+      color: var(--text-secondary);
+      white-space: nowrap;
+    }
+  `;
+}
+export function getShortcutsScript() {
+  return `
+<script>
+window.__stxShortcuts = {
+  shortcuts: ${JSON.stringify(defaultShortcuts)},
+
+  init() {
+    document.addEventListener('keydown', this.handleKeydown.bind(this));
+  },
+
+  handleKeydown(event) {
+    // Don't handle if typing in input
+    if (event.target.tagName === 'INPUT' || event.target.tagName === 'TEXTAREA') {
+      return;
+    }
+
+    const shortcut = this.findShortcut(event);
+    if (shortcut) {
+      event.preventDefault();
+      this.executeAction(shortcut.action);
+    }
+  },
+
+  findShortcut(event) {
+    return this.shortcuts.find(s => {
+      if (s.key.toLowerCase() !== event.key.toLowerCase()) return false;
+
+      const mods = s.modifiers || [];
+      if (mods.includes('meta') !== event.metaKey) return false;
+      if (mods.includes('ctrl') !== event.ctrlKey) return false;
+      if (mods.includes('alt') !== event.altKey) return false;
+      if (mods.includes('shift') !== event.shiftKey) return false;
+
+      return true;
+    });
+  },
+
+  executeAction(action) {
+    switch (action) {
+      case 'openSearch':
+        document.getElementById('search-input')?.focus();
+        break;
+      case 'prevStory':
+        this.navigateStory(-1);
+        break;
+      case 'nextStory':
+        this.navigateStory(1);
+        break;
+      case 'prevVariant':
+        this.navigateVariant(-1);
+        break;
+      case 'nextVariant':
+        this.navigateVariant(1);
+        break;
+      case 'selectStory':
+        document.querySelector('.story-item.focused')?.click();
+        break;
+      case 'closePanel':
+        this.closeActivePanel();
+        break;
+      case 'toggleDarkMode':
+        document.documentElement.classList.toggle('dark');
+        break;
+      case 'toggleFullscreen':
+        this.toggleFullscreen();
+        break;
+      case 'toggleSidebar':
+        document.querySelector('.sidebar')?.classList.toggle('hidden');
+        break;
+      case 'toggleAddons':
+        document.querySelector('.addons-panel')?.classList.toggle('hidden');
+        break;
+      case 'zoomIn':
+        window.__stxStory?.zoomIn?.();
+        break;
+      case 'zoomOut':
+        window.__stxStory?.zoomOut?.();
+        break;
+      case 'resetZoom':
+        window.__stxStory?.resetZoom?.();
+        break;
+      case 'reloadStory':
+        window.__stxStory?.reloadCurrentStory?.();
+        break;
+      case 'copyCode':
+        window.__stxStory?.copyCode?.();
+        break;
+      case 'openProps':
+        document.querySelector('[data-panel="props"]')?.click();
+        break;
+      case 'toggleBookmark':
+        window.__stxBookmarks?.toggleCurrent?.();
+        break;
+      case 'runTests':
+        window.__stxStory?.runTests?.();
+        break;
+      case 'showShortcuts':
+        this.showModal();
+        break;
+    }
+  },
+
+  navigateStory(direction) {
+    const items = Array.from(document.querySelectorAll('.story-item'));
+    const current = document.querySelector('.story-item.active');
+    const currentIndex = current ? items.indexOf(current) : -1;
+    const nextIndex = Math.max(0, Math.min(items.length - 1, currentIndex + direction));
+    items[nextIndex]?.click();
+  },
+
+  navigateVariant(direction) {
+    const buttons = Array.from(document.querySelectorAll('.variant-btn'));
+    const current = document.querySelector('.variant-btn.active');
+    const currentIndex = current ? buttons.indexOf(current) : -1;
+    const nextIndex = Math.max(0, Math.min(buttons.length - 1, currentIndex + direction));
+    buttons[nextIndex]?.click();
+  },
+
+  closeActivePanel() {
+    const modal = document.querySelector('.shortcuts-modal[style*="flex"]');
+    if (modal) {
+      closeShortcutsModal();
+      return;
+    }
+    // Close other panels
+    document.querySelector('.panel.open')?.classList.remove('open');
+  },
+
+  toggleFullscreen() {
+    if (document.fullscreenElement) {
+      document.exitFullscreen();
+    }
+else {
+      document.documentElement.requestFullscreen();
+    }
+  },
+
+  showModal() {
+    const modal = document.getElementById('shortcuts-modal');
+    if (modal) modal.style.display = 'flex';
+  }
+};
+
+function closeShortcutsModal() {
+  const modal = document.getElementById('shortcuts-modal');
+  if (modal) modal.style.display = 'none';
+}
+
+// Initialize on load
+if (document.readyState === 'loading') {
+  document.addEventListener('DOMContentLoaded', () => window.__stxShortcuts.init());
+}
+else {
+  window.__stxShortcuts.init();
+}
+</script>
+`;
+}