executable-stories-react 0.12.0 → 0.14.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.cjs +73 -52
- package/dist/index.cjs.map +1 -1
- package/dist/index.js +73 -52
- package/dist/index.js.map +1 -1
- package/dist/interactive.cjs +737 -260
- package/dist/interactive.cjs.map +1 -1
- package/dist/interactive.d.cts +3 -1
- package/dist/interactive.d.ts +3 -1
- package/dist/interactive.js +698 -215
- package/dist/interactive.js.map +1 -1
- package/dist/report-island.global.js +65 -54
- package/dist/ssr.cjs +74 -53
- package/dist/ssr.cjs.map +1 -1
- package/dist/ssr.js +74 -53
- package/dist/ssr.js.map +1 -1
- package/dist/styles.css +1 -3
- package/dist/tailwind.css +2 -2
- package/package.json +24 -23
package/dist/ssr.cjs
CHANGED
|
@@ -366,7 +366,7 @@ function formatValue(value) {
|
|
|
366
366
|
function DocKv({ entry }) {
|
|
367
367
|
return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("dl", { className: "my-2 flex flex-wrap items-baseline gap-x-2 text-sm", children: [
|
|
368
368
|
/* @__PURE__ */ (0, import_jsx_runtime6.jsx)("dt", { className: "font-semibold text-muted-foreground", children: entry.label }),
|
|
369
|
-
/* @__PURE__ */ (0, import_jsx_runtime6.jsx)("dd", { className: "font-mono text-foreground", children: formatValue(entry.value) })
|
|
369
|
+
/* @__PURE__ */ (0, import_jsx_runtime6.jsx)("dd", { className: "min-w-0 break-words font-mono text-foreground", children: formatValue(entry.value) })
|
|
370
370
|
] });
|
|
371
371
|
}
|
|
372
372
|
|
|
@@ -574,7 +574,7 @@ function DocHtml({ entry }) {
|
|
|
574
574
|
loading: "lazy",
|
|
575
575
|
title,
|
|
576
576
|
className: "block w-full border-0",
|
|
577
|
-
style: { height }
|
|
577
|
+
style: { height, colorScheme: "light", background: "#fff" }
|
|
578
578
|
}
|
|
579
579
|
)
|
|
580
580
|
] });
|
|
@@ -1327,57 +1327,68 @@ function ReportScenario({ scenario, hideTitle = false }) {
|
|
|
1327
1327
|
className: "gap-0 py-0",
|
|
1328
1328
|
children: [
|
|
1329
1329
|
/* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(CardHeader, { className: "px-4 py-3", children: [
|
|
1330
|
-
/* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(
|
|
1331
|
-
|
|
1332
|
-
|
|
1333
|
-
|
|
1334
|
-
|
|
1335
|
-
|
|
1336
|
-
|
|
1337
|
-
|
|
1338
|
-
|
|
1339
|
-
|
|
1340
|
-
|
|
1341
|
-
|
|
1342
|
-
|
|
1343
|
-
|
|
1344
|
-
|
|
1345
|
-
|
|
1346
|
-
|
|
1347
|
-
|
|
1348
|
-
|
|
1349
|
-
|
|
1350
|
-
|
|
1351
|
-
|
|
1352
|
-
|
|
1353
|
-
|
|
1354
|
-
|
|
1355
|
-
|
|
1356
|
-
|
|
1357
|
-
|
|
1358
|
-
|
|
1359
|
-
}
|
|
1360
|
-
|
|
1361
|
-
|
|
1362
|
-
|
|
1363
|
-
|
|
1364
|
-
|
|
1365
|
-
|
|
1366
|
-
|
|
1367
|
-
|
|
1368
|
-
|
|
1369
|
-
|
|
1370
|
-
|
|
1371
|
-
|
|
1372
|
-
|
|
1373
|
-
|
|
1330
|
+
/* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(
|
|
1331
|
+
"div",
|
|
1332
|
+
{
|
|
1333
|
+
className: cn(
|
|
1334
|
+
// Wraps rather than squeezing: on a phone the status/duration group
|
|
1335
|
+
// is ~160px, which leaves a title column a few characters wide.
|
|
1336
|
+
"flex flex-wrap items-start gap-x-4 gap-y-1",
|
|
1337
|
+
hideTitle ? "justify-end" : "justify-between"
|
|
1338
|
+
),
|
|
1339
|
+
children: [
|
|
1340
|
+
hideTitle ? null : /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("h3", { id: titleId, className: "flex min-w-0 flex-1 basis-48 items-center gap-2 text-sm font-medium text-foreground", children: [
|
|
1341
|
+
collapsible ? /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
|
|
1342
|
+
"button",
|
|
1343
|
+
{
|
|
1344
|
+
type: "button",
|
|
1345
|
+
onClick: () => collapse.toggle(scenario.id),
|
|
1346
|
+
"aria-expanded": !collapsed,
|
|
1347
|
+
"aria-controls": bodyId,
|
|
1348
|
+
"aria-label": `Toggle ${scenario.title}`,
|
|
1349
|
+
className: "shrink-0 cursor-pointer text-muted-foreground hover:text-foreground",
|
|
1350
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("span", { "aria-hidden": true, className: cn("inline-block text-xs transition-transform", !collapsed && "rotate-90"), children: "\u25B8" })
|
|
1351
|
+
}
|
|
1352
|
+
) : null,
|
|
1353
|
+
/* @__PURE__ */ (0, import_jsx_runtime27.jsx)("span", { "aria-hidden": true, className: cn("text-sm leading-none", meta.glyphColor), children: meta.glyph }),
|
|
1354
|
+
/* @__PURE__ */ (0, import_jsx_runtime27.jsx)("span", { children: scenario.title })
|
|
1355
|
+
] }),
|
|
1356
|
+
/* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { className: "flex shrink-0 items-center gap-2", children: [
|
|
1357
|
+
/* @__PURE__ */ (0, import_jsx_runtime27.jsx)(ScenarioRunHistory, { scenarioId: scenario.id }),
|
|
1358
|
+
/* @__PURE__ */ (0, import_jsx_runtime27.jsx)(ScenarioStaleness, { scenario }),
|
|
1359
|
+
scenario.durationMs > 0 ? /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("span", { className: "whitespace-nowrap font-mono text-[0.6875rem] text-muted-foreground", children: (0, import_duration3.formatDuration)(scenario.durationMs) }) : null,
|
|
1360
|
+
meta.showPill ? /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(Badge, { variant: meta.badgeVariant, "aria-label": `Status: ${label}`, children: label }) : /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("span", { className: "sr-only", children: `Status: ${label}` }),
|
|
1361
|
+
actions ? /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(DropdownMenu, { children: [
|
|
1362
|
+
/* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
|
|
1363
|
+
DropdownMenuTrigger,
|
|
1364
|
+
{
|
|
1365
|
+
"aria-label": `Actions for ${scenario.title}`,
|
|
1366
|
+
className: "cursor-pointer rounded p-1 text-muted-foreground hover:bg-muted hover:text-foreground [&_svg]:size-4",
|
|
1367
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_lucide_react2.MoreHorizontalIcon, { "aria-hidden": true })
|
|
1368
|
+
}
|
|
1369
|
+
),
|
|
1370
|
+
/* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(DropdownMenuContent, { align: "end", children: [
|
|
1371
|
+
/* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(DropdownMenuItem, { onClick: () => actions.copyLink(scenario), children: [
|
|
1372
|
+
/* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_lucide_react2.LinkIcon, {}),
|
|
1373
|
+
" Copy link"
|
|
1374
|
+
] }),
|
|
1375
|
+
/* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(DropdownMenuItem, { onClick: () => actions.copyMarkdown(scenario), children: [
|
|
1376
|
+
/* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_lucide_react2.FileTextIcon, {}),
|
|
1377
|
+
" Copy as Markdown"
|
|
1378
|
+
] }),
|
|
1379
|
+
/* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(DropdownMenuItem, { onClick: () => actions.copyPrompt(scenario), children: [
|
|
1380
|
+
/* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_lucide_react2.SparklesIcon, {}),
|
|
1381
|
+
" Explain with AI"
|
|
1382
|
+
] })
|
|
1383
|
+
] })
|
|
1384
|
+
] }) : null
|
|
1374
1385
|
] })
|
|
1375
|
-
]
|
|
1376
|
-
|
|
1377
|
-
|
|
1386
|
+
]
|
|
1387
|
+
}
|
|
1388
|
+
),
|
|
1378
1389
|
scenario.tags.length > 0 || (scenario.tickets?.length ?? 0) > 0 ? /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("ul", { "aria-label": "Tags and tickets", className: "flex flex-wrap gap-1.5", children: [
|
|
1379
1390
|
scenario.tags.map((t) => /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("li", { children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(Badge, { variant: "tag", children: t }) }, `tag-${t}`)),
|
|
1380
|
-
(scenario.tickets ?? []).map((ticket) => /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("li", { children: ticket.url ? /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("a", { href: ticket.url, target: "_blank", rel: "noreferrer noopener", children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(Badge, { variant: "outline", children: ticket.id }) }) : /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(Badge, { variant: "outline", children: ticket.id }) }, `ticket-${ticket.id}`))
|
|
1391
|
+
(scenario.tickets ?? []).map((ticket) => /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("li", { children: ticket.url ? /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("a", { href: ticket.url, target: "_blank", rel: "noreferrer noopener", className: "inline-flex min-h-6 items-center", children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(Badge, { variant: "outline", children: ticket.id }) }) : /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(Badge, { variant: "outline", children: ticket.id }) }, `ticket-${ticket.id}`))
|
|
1381
1392
|
] }) : null
|
|
1382
1393
|
] }),
|
|
1383
1394
|
/* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(CardContent, { id: bodyId, hidden: collapsed, className: "px-4 pt-0 pb-4", children: [
|
|
@@ -1643,6 +1654,7 @@ function ReportSummaryView({ summary, className, ariaLabel }) {
|
|
|
1643
1654
|
|
|
1644
1655
|
// src/components/ReportMeta.tsx
|
|
1645
1656
|
var import_duration4 = require("executable-stories-core/utils/duration");
|
|
1657
|
+
var import_report_queries = require("executable-stories-core/report-queries");
|
|
1646
1658
|
var import_jsx_runtime35 = require("react/jsx-runtime");
|
|
1647
1659
|
function ReportMeta() {
|
|
1648
1660
|
const report = useReport();
|
|
@@ -1686,7 +1698,9 @@ function ReportMeta() {
|
|
|
1686
1698
|
value: url ? /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("a", { href: url, target: "_blank", rel: "noreferrer noopener", className: linkClass, children: label }) : label
|
|
1687
1699
|
});
|
|
1688
1700
|
}
|
|
1689
|
-
|
|
1701
|
+
const slowest = (0, import_report_queries.slowestScenarios)(report, 5);
|
|
1702
|
+
const showSlowest = slowest.length >= 3;
|
|
1703
|
+
if (items.length === 0 && !showSlowest) return null;
|
|
1690
1704
|
return (
|
|
1691
1705
|
// Run metadata is useful but secondary to "what failed" — tuck it into a
|
|
1692
1706
|
// collapsed disclosure so it doesn't push the result down. Native <details>
|
|
@@ -1699,7 +1713,14 @@ function ReportMeta() {
|
|
|
1699
1713
|
/* @__PURE__ */ (0, import_jsx_runtime35.jsx)("dl", { className: "flex flex-wrap gap-x-5 gap-y-2 border-t border-border px-4 py-3 text-muted-foreground", "aria-label": "Run metadata", children: items.map((item) => /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("div", { className: "flex items-baseline gap-1.5", children: [
|
|
1700
1714
|
/* @__PURE__ */ (0, import_jsx_runtime35.jsx)("dt", { className: "font-medium", children: item.label }),
|
|
1701
1715
|
/* @__PURE__ */ (0, import_jsx_runtime35.jsx)("dd", { className: "font-mono text-foreground", children: item.value })
|
|
1702
|
-
] }, item.label)) })
|
|
1716
|
+
] }, item.label)) }),
|
|
1717
|
+
showSlowest ? /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("div", { className: "border-t border-border px-4 py-3", children: [
|
|
1718
|
+
/* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: "mb-1.5 font-medium text-muted-foreground", children: "Slowest scenarios" }),
|
|
1719
|
+
/* @__PURE__ */ (0, import_jsx_runtime35.jsx)("ol", { className: "flex flex-col gap-1", "aria-label": "Slowest scenarios", children: slowest.map((s) => /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("li", { className: "flex items-baseline justify-between gap-4", children: [
|
|
1720
|
+
/* @__PURE__ */ (0, import_jsx_runtime35.jsx)("a", { href: `#${s.id}`, className: "min-w-0 text-primary underline underline-offset-2", children: s.title }),
|
|
1721
|
+
/* @__PURE__ */ (0, import_jsx_runtime35.jsx)("span", { className: "shrink-0 font-mono tabular-nums text-muted-foreground", children: (0, import_duration4.formatDuration)(s.durationMs) })
|
|
1722
|
+
] }, s.id)) })
|
|
1723
|
+
] }) : null
|
|
1703
1724
|
] })
|
|
1704
1725
|
);
|
|
1705
1726
|
}
|
|
@@ -1823,7 +1844,7 @@ function renderReportToHtml(report, options = {}) {
|
|
|
1823
1844
|
const parsed = unwrapReport(report);
|
|
1824
1845
|
const rawReport = parsed.ok ? parsed.data : void 0;
|
|
1825
1846
|
const interactive = islandScript.length > 0 && rawReport !== void 0;
|
|
1826
|
-
const dataScript =
|
|
1847
|
+
const dataScript = rawReport !== void 0 ? `<script type="application/json" id="${DATA_ID}">${escapeJsonForScript(JSON.stringify(rawReport))}</script>` : "";
|
|
1827
1848
|
const historyScript = interactive && scenarioHistory && Object.keys(scenarioHistory).length > 0 ? `<script type="application/json" id="${HISTORY_ID}">${escapeJsonForScript(JSON.stringify(scenarioHistory))}</script>` : "";
|
|
1828
1849
|
const islandTag = interactive ? `<script>${islandScript}</script>` : "";
|
|
1829
1850
|
const cdnBody = interactive ? "" : cdn.body;
|