executable-stories-react 0.5.0 → 0.6.0

package/dist/interactive.js

@@ -202,7 +202,7 @@ function DocTable({ entry }) {
     entry.label ? /* @__PURE__ */ jsx6("figcaption", { className: "mb-1.5 text-xs font-medium text-muted-foreground", children: entry.label }) : null,
     /* @__PURE__ */ jsx6("div", { tabIndex: 0, className: "overflow-x-auto rounded-md border border-border", children: /* @__PURE__ */ jsxs3("table", { className: "w-full border-collapse text-sm", children: [
       /* @__PURE__ */ jsx6("thead", { children: /* @__PURE__ */ jsx6("tr", { className: "bg-muted/50", children: entry.columns.map((c) => /* @__PURE__ */ jsx6("th", { scope: "col", className: "border-b border-border px-3 py-2 text-left font-semibold", children: c }, c)) }) }),
-      /* @__PURE__ */ jsx6("tbody", { children: entry.rows.map((row, i) => /* @__PURE__ */ jsx6("tr", { children: row.map((cell, j) => /* @__PURE__ */ jsx6("td", { className: "border-b border-border px-3 py-2 text-foreground", children: cell }, j)) }, i)) })
+      /* @__PURE__ */ jsx6("tbody", { children: entry.rows.map((row, i) => /* @__PURE__ */ jsx6("tr", { children: row.map((cell2, j) => /* @__PURE__ */ jsx6("td", { className: "border-b border-border px-3 py-2 text-foreground", children: cell2 }, j)) }, i)) })
     ] }) })
   ] });
 }
@@ -855,20 +855,118 @@ function useCollapseState(computeDefault) {
 
 // src/interactive/scenario-actions.tsx
 import { createContext as createContext4, useContext as useContext5 } from "react";
+
+// ../executable-stories-core/dist/utils/scenario-markdown.js
+function cell(value) {
+  return value.replaceAll("|", "\\|").replaceAll("\n", " ");
+}
+function stringify(value) {
+  if (typeof value === "string") return value;
+  try {
+    return JSON.stringify(value, null, 2) ?? String(value);
+  } catch {
+    return String(value);
+  }
+}
+function docEntryToMarkdown(entry) {
+  const lines = [];
+  switch (entry.kind) {
+    case "note":
+      lines.push(entry.text);
+      break;
+    case "tag":
+      lines.push(entry.names.map((n) => `\`@${n}\``).join(" "));
+      break;
+    case "kv":
+      lines.push(`**${entry.label}:** ${stringify(entry.value)}`);
+      break;
+    case "code":
+      lines.push(`**${entry.label}**`, "", "```" + (entry.lang ?? ""), entry.content, "```");
+      break;
+    case "table": {
+      lines.push(`**${entry.label}**`, "");
+      lines.push(`| ${entry.columns.map(cell).join(" | ")} |`);
+      lines.push(`| ${entry.columns.map(() => "---").join(" | ")} |`);
+      for (const row of entry.rows) lines.push(`| ${row.map(cell).join(" | ")} |`);
+      break;
+    }
+    case "link":
+      lines.push(`[${entry.label}](${entry.url})`);
+      break;
+    case "section":
+      lines.push(`### ${entry.title}`, "", entry.markdown);
+      break;
+    case "mermaid":
+      if (entry.title) lines.push(`**${entry.title}**`, "");
+      lines.push("```mermaid", entry.code, "```");
+      break;
+    case "screenshot":
+      lines.push(`![${entry.alt ?? "screenshot"}](${entry.path})`);
+      break;
+    case "video":
+      lines.push(`Video: ${entry.path}${entry.caption ? ` \u2014 ${entry.caption}` : ""}`);
+      break;
+    case "html": {
+      const htmlTitle = entry.title ?? "Embedded HTML";
+      if (entry.content) {
+        lines.push(`**${htmlTitle}**`, "", "```html", entry.content, "```");
+      } else if (entry.url) {
+        lines.push(`[${htmlTitle}](${entry.url})`);
+      } else {
+        lines.push(`Embedded HTML: ${entry.path ?? "(inline)"}`);
+      }
+      break;
+    }
+    case "custom":
+      lines.push(`**${entry.type}**`, "", "```json", stringify(entry.data), "```");
+      break;
+  }
+  for (const child of entry.children ?? []) {
+    lines.push("", ...docEntryToMarkdown(child));
+  }
+  return lines;
+}
+function stepLines(step, ordinal, full) {
+  const status = step.status === "passed" ? "" : ` \u2014 **${step.status}**`;
+  const lines = [`${ordinal}. **${step.keyword}** ${step.text}${status}`];
+  if (!full) return lines;
+  if (step.errorMessage) {
+    lines.push(...step.errorMessage.split("\n").map((l) => `   > ${l}`));
+  }
+  for (const entry of step.docEntries) {
+    lines.push("", ...docEntryToMarkdown(entry).map((l) => l === "" ? l : `   ${l}`));
+  }
+  return lines;
+}
+function scenarioToMarkdown(scenario, options = {}) {
+  const { variant = "full", meta = [] } = options;
+  const full = variant === "full";
+  const lines = full ? [`# ${scenario.title}`, ""] : [`## ${scenario.title} _(${scenario.status})_`, ""];
+  if (full && meta.length > 0) lines.push(...meta);
+  if (scenario.steps.length > 0) {
+    if (full) lines.push("", "## Steps", "");
+    scenario.steps.forEach((step, i) => lines.push(...stepLines(step, i + 1, full)));
+  }
+  if (scenario.errorMessage) {
+    if (full) lines.push("", "## Failure", "");
+    else lines.push("");
+    lines.push("```", scenario.errorMessage.trim(), "```");
+  }
+  if (full && scenario.docEntries.length > 0) {
+    lines.push("", "## Docs", "");
+    for (const entry of scenario.docEntries) lines.push(...docEntryToMarkdown(entry), "");
+  }
+  return lines.join("\n").replaceAll(/\n{3,}/g, "\n\n").trimEnd() + (full ? "\n" : "");
+}
+
+// src/interactive/scenario-actions.tsx
 var ScenarioActionsContext = createContext4(null);
 var ScenarioActionsProvider = ScenarioActionsContext.Provider;
 function useScenarioActions() {
   return useContext5(ScenarioActionsContext);
 }
-function scenarioToMarkdown(scenario) {
-  const lines = [`## ${scenario.title} _(${scenario.status})_`, ""];
-  for (const step of scenario.steps) {
-    lines.push(`- **${step.keyword}** ${step.text}`);
-  }
-  if (scenario.errorMessage) {
-    lines.push("", "```", scenario.errorMessage.trim(), "```");
-  }
-  return lines.join("\n");
+function scenarioToMarkdown2(scenario) {
+  return scenarioToMarkdown(scenario, { variant: "compact" });
 }
 function scenarioToPrompt(scenario) {
   const lines = [
@@ -2036,6 +2134,33 @@ function listFailures(report) {
   return out;
 }
 
+// src/interactive/triage-default.ts
+function needsAttention(status) {
+  return status === "failed";
+}
+function defaultCollapsedIds(report) {
+  const collapsed = /* @__PURE__ */ new Set();
+  if (report.summary.failed === 0) return collapsed;
+  for (const feature of report.features) {
+    const featureHasFailure = feature.scenarios.some((s) => needsAttention(s.status));
+    if (!featureHasFailure) collapsed.add(feature.id);
+    for (const scenario of feature.scenarios) {
+      if (!needsAttention(scenario.status)) collapsed.add(scenario.id);
+    }
+  }
+  return collapsed;
+}
+function failuresFirst(report) {
+  if (report.summary.failed === 0) return report;
+  const withFailures = [];
+  const rest = [];
+  for (const feature of report.features) {
+    (feature.scenarios.some((s) => needsAttention(s.status)) ? withFailures : rest).push(feature);
+  }
+  if (withFailures.length === 0) return report;
+  return { ...report, features: [...withFailures, ...rest] };
+}
+
 // src/interactive/ReportFilters.tsx
 import { useState as useState3 } from "react";
 import { jsx as jsx41, jsxs as jsxs26 } from "react/jsx-runtime";
@@ -2326,7 +2451,9 @@ function ReportInteractiveView({
   const deferredQuery = useDeferredValue(query);
   const failures = useMemo3(() => listFailures(report), [report]);
   const filtered = useMemo3(
-    () => filterReport(report, { query: deferredQuery, status: statusFilter, tags: activeTags }),
+    // Features carrying failures float to the top so the first thing on screen
+    // is the thing that needs attention; an all-green run keeps source order.
+    () => failuresFirst(filterReport(report, { query: deferredQuery, status: statusFilter, tags: activeTags })),
     [report, deferredQuery, statusFilter, activeTags]
   );
   const isFiltering = query !== deferredQuery;
@@ -2364,7 +2491,7 @@ function ReportInteractiveView({
   const scenarioActions = useMemo3(
     () => ({
       copyLink: (s) => copy(scenarioPermalink(s), "Link copied"),
-      copyMarkdown: (s) => copy(scenarioToMarkdown(s), "Markdown copied"),
+      copyMarkdown: (s) => copy(scenarioToMarkdown2(s), "Markdown copied"),
       copyPrompt: (s) => copy(scenarioToPrompt(s), "Prompt copied")
     }),
     [copy]
@@ -2374,9 +2501,9 @@ function ReportInteractiveView({
     () => report.features.flatMap((f) => [f.id, ...f.scenarios.map((s) => s.id)]),
     [report]
   );
-  const collapse = useCollapseState();
+  const collapse = useCollapseState(useCallback4(() => defaultCollapsedIds(report), [report]));
   const collapseAll = useCallback4(() => collapse.collapseAll(allCollapsibleIds), [collapse, allCollapsibleIds]);
-  const [expandedAll, setExpandedAll] = useState7(true);
+  const [expandedAll, setExpandedAll] = useState7(() => report.summary.failed === 0);
   const setExpanded = useCallback4(
     (expanded) => {
       if (expanded) collapse.expandAll();