executable-stories-formatters 0.1.0 → 0.2.0

package/dist/index.js

@@ -693,50 +693,162 @@ function initTheme() {
 }
 `;
 var JS_CORE = `
+// Filter state
+var activeTags = new Set();
+var activeStatus = null;
+
 // Search functionality
 function initSearch() {
-  const input = document.querySelector('.search-input');
+  var input = document.querySelector('.search-input');
   if (!input) return;
 
-  let debounceTimer;
-  input.addEventListener('input', (e) => {
+  var debounceTimer;
+  input.addEventListener('input', function() {
     clearTimeout(debounceTimer);
-    debounceTimer = setTimeout(() => {
-      filterScenarios(e.target.value.toLowerCase().trim());
+    debounceTimer = setTimeout(function() {
+      applyAllFilters();
     }, 150);
   });
 
   // Clear search on Escape
-  input.addEventListener('keydown', (e) => {
+  input.addEventListener('keydown', function(e) {
     if (e.key === 'Escape') {
       e.target.value = '';
-      filterScenarios('');
+      applyAllFilters();
     }
   });
 }
 
-function filterScenarios(query) {
-  const features = document.querySelectorAll('.feature');
+// Tag filter
+function initTagFilter() {
+  document.querySelectorAll('.tag-pill').forEach(function(pill) {
+    pill.addEventListener('click', function() {
+      var tag = pill.dataset.tag;
+      if (activeTags.has(tag)) {
+        activeTags.delete(tag);
+        pill.classList.remove('active');
+      } else {
+        activeTags.add(tag);
+        pill.classList.add('active');
+      }
+      updateClearButton();
+      applyAllFilters();
+    });
+  });
 
-  features.forEach(feature => {
-    const scenarios = feature.querySelectorAll('.scenario');
-    let visibleCount = 0;
+  var clearBtn = document.querySelector('.tag-bar-clear');
+  if (clearBtn) {
+    clearBtn.addEventListener('click', function() {
+      activeTags.clear();
+      document.querySelectorAll('.tag-pill.active').forEach(function(p) { p.classList.remove('active'); });
+      updateClearButton();
+      applyAllFilters();
+    });
+  }
+}
 
-    scenarios.forEach(scenario => {
-      const title = scenario.querySelector('.scenario-title')?.textContent?.toLowerCase() || '';
-      const tags = Array.from(scenario.querySelectorAll('.tag')).map(t => t.textContent.toLowerCase());
-      const steps = Array.from(scenario.querySelectorAll('.step-text')).map(s => s.textContent.toLowerCase());
+function updateClearButton() {
+  var clearBtn = document.querySelector('.tag-bar-clear');
+  if (clearBtn) {
+    clearBtn.style.display = activeTags.size > 0 ? '' : 'none';
+  }
+}
 
-      const matches = !query ||
-        title.includes(query) ||
-        tags.some(t => t.includes(query)) ||
-        steps.some(s => s.includes(query));
+// Status filter (clickable summary cards)
+function initStatusFilter() {
+  document.querySelectorAll('.summary-card').forEach(function(card) {
+    card.style.cursor = 'pointer';
+    if (!card.classList.contains('passed') && !card.classList.contains('failed') && !card.classList.contains('skipped')) {
+      card.addEventListener('click', function() {
+        activeStatus = null;
+        document.querySelectorAll('.summary-card').forEach(function(c) { c.classList.remove('status-active'); });
+        applyAllFilters();
+      });
+      return;
+    }
+    card.addEventListener('click', function() {
+      var status = card.classList.contains('passed') ? 'passed' :
+                   card.classList.contains('failed') ? 'failed' : 'skipped';
+      if (activeStatus === status) {
+        activeStatus = null;
+        card.classList.remove('status-active');
+      } else {
+        activeStatus = status;
+        document.querySelectorAll('.summary-card').forEach(function(c) { c.classList.remove('status-active'); });
+        card.classList.add('status-active');
+      }
+      applyAllFilters();
+    });
+  });
+}
 
-      scenario.style.display = matches ? '' : 'none';
-      if (matches) visibleCount++;
+// Unified filter: composes search + tags + status
+function applyAllFilters() {
+  var searchInput = document.querySelector('.search-input');
+  var searchQuery = searchInput ? searchInput.value.toLowerCase().trim() : '';
+  var features = document.querySelectorAll('.feature');
+  var visibleCount = 0;
+  var totalCount = 0;
+
+  features.forEach(function(feature) {
+    var scenarios = feature.querySelectorAll('.scenario');
+    var featureVisible = 0;
+
+    scenarios.forEach(function(scenario) {
+      totalCount++;
+      var title = (scenario.querySelector('.scenario-title') || {}).textContent || '';
+      title = title.toLowerCase();
+      var tags = Array.from(scenario.querySelectorAll('.scenario-meta .tag')).map(function(t) { return t.textContent.toLowerCase(); });
+      var steps = Array.from(scenario.querySelectorAll('.step-text')).map(function(s) { return s.textContent.toLowerCase(); });
+      var statusEl = scenario.querySelector('.status-icon');
+      var status = statusEl && statusEl.classList.contains('status-passed') ? 'passed' :
+                   statusEl && statusEl.classList.contains('status-failed') ? 'failed' :
+                   statusEl && statusEl.classList.contains('status-skipped') ? 'skipped' : 'pending';
+
+      var matchesSearch = !searchQuery ||
+        title.includes(searchQuery) ||
+        tags.some(function(t) { return t.includes(searchQuery); }) ||
+        steps.some(function(s) { return s.includes(searchQuery); });
+
+      var matchesTags = activeTags.size === 0 ||
+        tags.some(function(t) { return activeTags.has(t); });
+
+      var matchesStatus = !activeStatus ||
+        status === activeStatus ||
+        (activeStatus === 'skipped' && status === 'pending');
+
+      var visible = matchesSearch && matchesTags && matchesStatus;
+      scenario.style.display = visible ? '' : 'none';
+      if (visible) { visibleCount++; featureVisible++; }
     });
 
-    feature.style.display = visibleCount > 0 ? '' : 'none';
+    feature.style.display = featureVisible > 0 ? '' : 'none';
+  });
+
+  updateFilterResults(visibleCount, totalCount);
+}
+
+function updateFilterResults(visible, total) {
+  var el = document.querySelector('.filter-results');
+  if (!el) return;
+  var searchInput = document.querySelector('.search-input');
+  var isFiltering = activeTags.size > 0 || activeStatus ||
+    (searchInput && searchInput.value.trim().length > 0);
+  el.style.display = isFiltering ? '' : 'none';
+  var vc = el.querySelector('.visible-count');
+  var tc = el.querySelector('.total-count');
+  if (vc) vc.textContent = visible;
+  if (tc) tc.textContent = total;
+}
+
+// Keyboard shortcuts
+function initKeyboardShortcuts() {
+  document.addEventListener('keydown', function(e) {
+    if (e.key === '/' && !e.ctrlKey && !e.metaKey && e.target.tagName !== 'INPUT') {
+      e.preventDefault();
+      var input = document.querySelector('.search-input');
+      if (input) input.focus();
+    }
   });
 }
 
@@ -821,6 +933,9 @@ function generateScript(options) {
     initCalls.push("initTheme();");
   }
   initCalls.push("initSearch();");
+  initCalls.push("initTagFilter();");
+  initCalls.push("initStatusFilter();");
+  initCalls.push("initKeyboardShortcuts();");
   initCalls.push("initCollapse();");
   const initScript = `
 // Initialize on load
@@ -1304,6 +1419,98 @@ body {
 }
 .summary-card.pending .value { color: var(--pending); }
 
+/* ============================================================================
+   Tag Filter Bar
+   ============================================================================ */
+.tag-bar {
+  margin-bottom: 1rem;
+  padding: 0.75rem 1rem;
+  background: var(--card);
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  position: sticky;
+  top: 0;
+  z-index: 10;
+}
+
+.tag-bar-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 0.5rem;
+}
+
+.tag-bar-label {
+  font-size: 0.6875rem;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  color: var(--muted-foreground);
+  font-weight: 500;
+}
+
+.tag-bar-clear {
+  font-size: 0.75rem;
+  font-weight: 500;
+  color: var(--primary);
+  background: none;
+  border: none;
+  cursor: pointer;
+  padding: 0.125rem 0.5rem;
+  border-radius: var(--radius);
+  transition: all 0.15s ease;
+}
+
+.tag-bar-clear:hover {
+  background: var(--muted);
+}
+
+.tag-bar-pills {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.375rem;
+}
+
+.tag-pill {
+  font-size: 0.75rem;
+  font-weight: 500;
+  padding: 0.25rem 0.625rem;
+  background: var(--tag-bg);
+  color: var(--tag-color);
+  border: 1px solid var(--tag-border);
+  border-radius: 9999px;
+  font-family: var(--font-mono);
+  cursor: pointer;
+  transition: all 0.15s ease;
+}
+
+.tag-pill:hover {
+  background: var(--success-border);
+}
+
+.tag-pill.active {
+  background: var(--primary);
+  color: var(--primary-foreground);
+  border-color: var(--primary);
+}
+
+/* ============================================================================
+   Summary Card Status Filter
+   ============================================================================ */
+.summary-card.status-active {
+  box-shadow: 0 0 0 2px var(--background), 0 0 0 4px var(--ring);
+}
+
+/* ============================================================================
+   Filter Results Counter
+   ============================================================================ */
+.filter-results {
+  text-align: center;
+  font-size: 0.8125rem;
+  color: var(--muted-foreground);
+  margin-bottom: 1rem;
+  font-weight: 500;
+}
+
 /* ============================================================================
    Feature Sections - shadcn accordion style
    ============================================================================ */
@@ -1691,8 +1898,10 @@ body {
     padding: 0;
   }
 
-  .header-actions {
-    display: none;
+  .header-actions,
+  .tag-bar,
+  .filter-results {
+    display: none !important;
   }
 
   .feature,
@@ -2266,6 +2475,28 @@ function renderSummary(args, _deps) {
 </div>`;
 }
 
+// src/formatters/html/renderers/tag-bar.ts
+function renderTagBar(args, deps) {
+  const { tags, totalScenarios } = args;
+  if (tags.length === 0) return "";
+  const pills = tags.map(
+    (tag) => `<button type="button" class="tag-pill" data-tag="${deps.escapeHtml(tag)}">${deps.escapeHtml(tag)}</button>`
+  ).join("\n      ");
+  return `
+<div class="tag-bar">
+  <div class="tag-bar-header">
+    <span class="tag-bar-label">Filter by tag</span>
+    <button type="button" class="tag-bar-clear" style="display:none">Clear</button>
+  </div>
+  <div class="tag-bar-pills">
+    ${pills}
+  </div>
+</div>
+<div class="filter-results" style="display:none">
+  Showing <span class="visible-count">0</span> of <span class="total-count">${totalScenarios}</span> scenarios
+</div>`;
+}
+
 // src/formatters/html/renderers/error-box.ts
 function renderErrorBox(args, deps) {
   const body = args.stack != null ? `${deps.escapeHtml(args.message)}
@@ -2565,6 +2796,15 @@ function buildBody(args, deps) {
       deps.summaryDeps
     )
   );
+  const allTags = [
+    ...new Set(run.testCases.flatMap((tc) => tc.tags))
+  ].sort();
+  parts.push(
+    deps.renderTagBar(
+      { tags: allTags, totalScenarios: total },
+      deps.tagBarDeps
+    )
+  );
   const byFile = groupBy(run.testCases, (tc) => tc.sourceFile);
   for (const [file, testCases] of byFile) {
     parts.push(
@@ -2621,12 +2861,15 @@ function createHtmlFormatter(options = {}) {
     renderScenario: (args) => renderScenario(args, scenarioDeps),
     scenarioDeps
   };
+  const tagBarDeps = { escapeHtml };
   const bodyDeps = {
     renderMetaInfo,
     renderSummary,
+    renderTagBar,
     renderFeature,
     metaDeps: { escapeHtml },
     summaryDeps: {},
+    tagBarDeps,
     featureDeps
   };
   return {