executable-stories-react 0.1.16 → 0.2.1
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 +1767 -371
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +148 -14
- package/dist/index.d.ts +148 -14
- package/dist/index.js +1748 -370
- package/dist/index.js.map +1 -1
- package/dist/interactive.cjs +1485 -265
- package/dist/interactive.cjs.map +1 -1
- package/dist/interactive.d.cts +55 -4
- package/dist/interactive.d.ts +55 -4
- package/dist/interactive.js +1474 -255
- package/dist/interactive.js.map +1 -1
- package/dist/parse.cjs +631 -154
- package/dist/parse.cjs.map +1 -1
- package/dist/parse.d.cts +12 -4
- package/dist/parse.d.ts +12 -4
- package/dist/parse.js +631 -154
- package/dist/parse.js.map +1 -1
- package/dist/report-island.global.js +132 -0
- package/dist/ssr.cjs +1235 -0
- package/dist/ssr.cjs.map +1 -0
- package/dist/ssr.d.cts +72 -0
- package/dist/ssr.d.ts +72 -0
- package/dist/ssr.js +1210 -0
- package/dist/ssr.js.map +1 -0
- package/dist/styles.css +21 -6
- package/dist/tailwind.css +2 -0
- package/package.json +43 -8
package/dist/index.d.cts
CHANGED
|
@@ -1,8 +1,10 @@
|
|
|
1
1
|
import * as react from 'react';
|
|
2
|
-
import { ReactNode } from 'react';
|
|
3
|
-
import * as
|
|
4
|
-
import { ReportDocMermaid, ReportDocCode, ReportDocSection, ReportDocCustom, StoryReport, ReportSummary as ReportSummary$1, ReportFeature as ReportFeature$1, ReportScenario as ReportScenario$1, ReportStep, ReportDocEntry, ReportDocNote, ReportDocTag, ReportDocKv, ReportDocTable, ReportDocLink, ReportDocScreenshot } from 'executable-stories-
|
|
5
|
-
export { StoryReport, ReportDocEntry as StoryReportDocEntry, ReportFeature as StoryReportFeature, ReportScenario as StoryReportScenario, ReportStep as StoryReportStep, ReportSummary as StoryReportSummary } from 'executable-stories-
|
|
2
|
+
import { ReactNode, Ref } from 'react';
|
|
3
|
+
import * as executable_stories_core from 'executable-stories-core';
|
|
4
|
+
import { ReportDocMermaid, ReportDocCode, ReportDocSection, ReportDocCustom, StoryReport, ReportSummary as ReportSummary$1, ReportAttachment, ReportFeature as ReportFeature$1, ReportScenario as ReportScenario$1, ReportStep, ReportDocEntry, ReportDocNote, ReportDocTag, ReportDocKv, ReportDocTable, ReportDocLink, ReportDocScreenshot, ReportDocVideo, ReportDocHtml } from 'executable-stories-core';
|
|
5
|
+
export { StoryReport, ReportDocEntry as StoryReportDocEntry, ReportFeature as StoryReportFeature, ReportScenario as StoryReportScenario, ReportStep as StoryReportStep, ReportSummary as StoryReportSummary } from 'executable-stories-core';
|
|
6
|
+
import { OtelSpan } from 'executable-stories-core/types/otel';
|
|
7
|
+
import * as mermaid from 'mermaid';
|
|
6
8
|
import { z } from 'zod';
|
|
7
9
|
|
|
8
10
|
/**
|
|
@@ -11,6 +13,7 @@ import { z } from 'zod';
|
|
|
11
13
|
* Used at the boundary where a StoryReport is parsed: the consumer hands us
|
|
12
14
|
* an unknown value (file contents, fetch body, prop) and we return a Result.
|
|
13
15
|
*/
|
|
16
|
+
|
|
14
17
|
type Result<T, E = ReportParseError> = {
|
|
15
18
|
ok: true;
|
|
16
19
|
data: T;
|
|
@@ -82,11 +85,43 @@ interface ReportSummaryViewProps {
|
|
|
82
85
|
}
|
|
83
86
|
declare function ReportSummaryView({ summary, className, ariaLabel }: ReportSummaryViewProps): react.JSX.Element;
|
|
84
87
|
|
|
88
|
+
/**
|
|
89
|
+
* Run metadata line (started, duration, version, git SHA, CI) — the React
|
|
90
|
+
* equivalent of the report's `.meta-info` block. Reads the top-level StoryReport
|
|
91
|
+
* fields from context.
|
|
92
|
+
*/
|
|
93
|
+
declare function ReportMeta(): react.JSX.Element | null;
|
|
94
|
+
|
|
95
|
+
/**
|
|
96
|
+
* Renders scenario attachments. Base64 images embed inline; everything else
|
|
97
|
+
* becomes a labelled data-URI download link. Mirrors the report's attachments
|
|
98
|
+
* block (which also inlines images and links other media).
|
|
99
|
+
*/
|
|
100
|
+
declare function ReportAttachments({ attachments }: {
|
|
101
|
+
attachments: ReportAttachment[];
|
|
102
|
+
}): react.JSX.Element | null;
|
|
103
|
+
|
|
104
|
+
/**
|
|
105
|
+
* OTel trace waterfall. Collapsed by default (native <details>, no JS) so it
|
|
106
|
+
* renders in both the static and interactive reports. Each span is a row with a
|
|
107
|
+
* depth-indented name and a bar positioned/sized by its time window.
|
|
108
|
+
*/
|
|
109
|
+
declare function ReportTrace({ spans }: {
|
|
110
|
+
spans: readonly OtelSpan[] | undefined;
|
|
111
|
+
}): react.JSX.Element | null;
|
|
112
|
+
|
|
85
113
|
declare function ReportFeatureList(): react.JSX.Element;
|
|
86
114
|
|
|
87
115
|
interface ReportFeatureProps {
|
|
88
116
|
feature: ReportFeature$1;
|
|
89
117
|
}
|
|
118
|
+
/**
|
|
119
|
+
* Feature group — the report's `.feature` card: a header bar with the feature
|
|
120
|
+
* title + mono source path and ✓/✗/○ status counts on the right, over a stack
|
|
121
|
+
* of scenario cards. Kept a semantic <section> (a region), not a shadcn Card
|
|
122
|
+
* div, so it stays a landmark and doesn't collide with the scenario cards'
|
|
123
|
+
* `[data-slot="card"]`.
|
|
124
|
+
*/
|
|
90
125
|
declare function ReportFeature({ feature }: ReportFeatureProps): react.JSX.Element;
|
|
91
126
|
|
|
92
127
|
interface ReportScenarioListProps {
|
|
@@ -96,8 +131,14 @@ declare function ReportScenarioList({ feature }: ReportScenarioListProps): react
|
|
|
96
131
|
|
|
97
132
|
interface ReportScenarioProps {
|
|
98
133
|
scenario: ReportScenario$1;
|
|
134
|
+
/**
|
|
135
|
+
* Omit the card's own title row (status badge + tags still render). Use when
|
|
136
|
+
* the surrounding page already shows the scenario title as its heading — e.g.
|
|
137
|
+
* the Astro detail page, where Starlight renders the title as the page `h1`.
|
|
138
|
+
*/
|
|
139
|
+
hideTitle?: boolean;
|
|
99
140
|
}
|
|
100
|
-
declare function ReportScenario({ scenario }: ReportScenarioProps): react.JSX.Element;
|
|
141
|
+
declare function ReportScenario({ scenario, hideTitle }: ReportScenarioProps): react.JSX.Element;
|
|
101
142
|
|
|
102
143
|
interface ReportStepsProps {
|
|
103
144
|
scenario: ReportScenario$1;
|
|
@@ -114,7 +155,7 @@ declare function ReportDocEntries({ entries }: ReportDocEntriesProps): react.JSX
|
|
|
114
155
|
|
|
115
156
|
declare function DocEntry({ entry }: {
|
|
116
157
|
entry: ReportDocEntry;
|
|
117
|
-
}): react.JSX.Element
|
|
158
|
+
}): react.JSX.Element;
|
|
118
159
|
|
|
119
160
|
declare function DocNote({ entry }: {
|
|
120
161
|
entry: ReportDocNote;
|
|
@@ -145,24 +186,110 @@ declare function DocSection({ entry }: {
|
|
|
145
186
|
}): react.JSX.Element;
|
|
146
187
|
|
|
147
188
|
/**
|
|
148
|
-
*
|
|
189
|
+
* The raw mermaid source as a semantic `<pre data-mermaid>`. This is the
|
|
190
|
+
* default render and the universal fallback: AI agents, screen readers, and
|
|
191
|
+
* no-JS views all get the readable source. `<MermaidDiagram>` upgrades this to
|
|
192
|
+
* a drawn diagram on the client.
|
|
193
|
+
*/
|
|
194
|
+
declare function MermaidSource({ entry, ref }: {
|
|
195
|
+
entry: ReportDocMermaid;
|
|
196
|
+
ref?: Ref<HTMLElement>;
|
|
197
|
+
}): react.JSX.Element;
|
|
198
|
+
/**
|
|
199
|
+
* Renders mermaid source as a semantic `<pre data-mermaid>` by default.
|
|
149
200
|
*
|
|
150
|
-
*
|
|
151
|
-
*
|
|
152
|
-
* (e.g., one that dynamically imports the mermaid library on mount).
|
|
201
|
+
* To draw the diagram, supply a `renderers.mermaid` prop — e.g. the shipped
|
|
202
|
+
* `MermaidDiagram` (`renderers={{ mermaid: (e) => <MermaidDiagram entry={e} /> }}`).
|
|
153
203
|
*/
|
|
154
204
|
declare function DocMermaid({ entry }: {
|
|
155
205
|
entry: ReportDocMermaid;
|
|
156
206
|
}): react.JSX.Element;
|
|
157
207
|
|
|
208
|
+
type MermaidApi = typeof mermaid.default;
|
|
209
|
+
type MermaidLoader = () => Promise<MermaidApi>;
|
|
210
|
+
|
|
211
|
+
/**
|
|
212
|
+
* Client renderer for `story.mermaid(...)` entries. Dynamically imports the
|
|
213
|
+
* installed `mermaid` package and draws the diagram to inline SVG, falling back
|
|
214
|
+
* to the readable source on the server / before load / on error.
|
|
215
|
+
*
|
|
216
|
+
* Opt in via `<Report renderers={{ mermaid: (e) => <MermaidDiagram entry={e} /> }} />`.
|
|
217
|
+
* Requires `mermaid` to be installed (an optional peer dependency). Pass `load`
|
|
218
|
+
* to override how mermaid is obtained (the standalone report island injects a
|
|
219
|
+
* CDN loader via `MermaidView` directly).
|
|
220
|
+
*/
|
|
221
|
+
declare function MermaidDiagram({ entry, load }: {
|
|
222
|
+
entry: ReportDocMermaid;
|
|
223
|
+
load?: MermaidLoader;
|
|
224
|
+
}): react.JSX.Element;
|
|
225
|
+
|
|
226
|
+
/**
|
|
227
|
+
* A screenshot that's still an absolute local filesystem path by the time it
|
|
228
|
+
* reaches this component means the report's asset bundler couldn't find the
|
|
229
|
+
* file to inline/copy it (deleted, moved, or never captured — see
|
|
230
|
+
* inlineScreenshotIfPossible in executable-stories-playwright). `<img src>`
|
|
231
|
+
* would 404 against a path from the machine that generated the report, so
|
|
232
|
+
* show a placeholder instead of a broken image.
|
|
233
|
+
*/
|
|
158
234
|
declare function DocScreenshot({ entry }: {
|
|
159
235
|
entry: ReportDocScreenshot;
|
|
160
236
|
}): react.JSX.Element;
|
|
161
237
|
|
|
238
|
+
/**
|
|
239
|
+
* Renders a video doc entry. Video bytes are large and never inlined; `path` is
|
|
240
|
+
* a URL or a path that resolves alongside the report. Both `path` and `poster`
|
|
241
|
+
* are adapter-supplied, so they go through the same scheme allow-list as the
|
|
242
|
+
* DocHtml iframe src (no `javascript:`/`data:` URLs reach the DOM).
|
|
243
|
+
*
|
|
244
|
+
* An absolute local filesystem path means the report's asset bundler
|
|
245
|
+
* couldn't find/copy the file — a `<video src>` pointed at a runner-local
|
|
246
|
+
* path would just fail to load, so show a placeholder instead.
|
|
247
|
+
*/
|
|
248
|
+
declare function DocVideo({ entry }: {
|
|
249
|
+
entry: ReportDocVideo;
|
|
250
|
+
}): react.JSX.Element;
|
|
251
|
+
|
|
252
|
+
/**
|
|
253
|
+
* Renders an embedded-HTML doc entry inside a SANDBOXED iframe. All embedded
|
|
254
|
+
* HTML is untrusted, so the frame is `sandbox="allow-scripts"` only (no
|
|
255
|
+
* allow-same-origin) — embedded scripts run (charts work) but can't touch the
|
|
256
|
+
* report DOM, cookies, or storage. Inline `content` → srcdoc (keeps the report
|
|
257
|
+
* self-contained); `url`/`path` → src (scheme-validated).
|
|
258
|
+
*/
|
|
259
|
+
declare function DocHtml({ entry }: {
|
|
260
|
+
entry: ReportDocHtml;
|
|
261
|
+
}): react.JSX.Element;
|
|
262
|
+
|
|
162
263
|
declare function DocCustom({ entry }: {
|
|
163
264
|
entry: ReportDocCustom;
|
|
164
265
|
}): react.JSX.Element;
|
|
165
266
|
|
|
267
|
+
type ExplorerStatus = "passed" | "failed" | "skipped" | "pending";
|
|
268
|
+
interface ExplorerScenario {
|
|
269
|
+
id: string;
|
|
270
|
+
title: string;
|
|
271
|
+
status: ExplorerStatus;
|
|
272
|
+
tags: string[];
|
|
273
|
+
/** Source file / feature label shown on the right. */
|
|
274
|
+
feature: string;
|
|
275
|
+
/** Resolved href to the scenario detail page. */
|
|
276
|
+
href: string;
|
|
277
|
+
}
|
|
278
|
+
interface ScenarioExplorerProps {
|
|
279
|
+
scenarios: ExplorerScenario[];
|
|
280
|
+
summary?: {
|
|
281
|
+
total: number;
|
|
282
|
+
passed: number;
|
|
283
|
+
failed: number;
|
|
284
|
+
};
|
|
285
|
+
}
|
|
286
|
+
/**
|
|
287
|
+
* Scenario Explorer surface — a shadcn `Command` palette rendered inline. cmdk
|
|
288
|
+
* filters by the item value (title + feature + tags) as you type; the status
|
|
289
|
+
* pills pre-filter the list. Each row is a real `<a>` to the detail page.
|
|
290
|
+
*/
|
|
291
|
+
declare function ScenarioExplorer({ scenarios, summary }: ScenarioExplorerProps): react.JSX.Element;
|
|
292
|
+
|
|
166
293
|
declare function useCustomRenderers(): CustomRenderers;
|
|
167
294
|
declare function useBuiltinRenderers(): BuiltinRenderers;
|
|
168
295
|
|
|
@@ -176,7 +303,7 @@ interface ReportSchemaErrorProps {
|
|
|
176
303
|
}
|
|
177
304
|
declare function ReportSchemaError({ error }: ReportSchemaErrorProps): react.JSX.Element;
|
|
178
305
|
|
|
179
|
-
declare function useReport():
|
|
306
|
+
declare function useReport(): executable_stories_core.StoryReport;
|
|
180
307
|
|
|
181
308
|
/**
|
|
182
309
|
* parseStoryReport — boundary validator. Accepts unknown input (file contents,
|
|
@@ -185,9 +312,17 @@ declare function useReport(): executable_stories_formatters.StoryReport;
|
|
|
185
312
|
|
|
186
313
|
declare function parseStoryReport(input: unknown): Result<StoryReport>;
|
|
187
314
|
|
|
315
|
+
/**
|
|
316
|
+
* The supported StoryReport schema major version, factored out of
|
|
317
|
+
* story-report.schema.ts so the client island can do a cheap version check
|
|
318
|
+
* WITHOUT importing the Zod schema module (which evaluates z.fromJSONSchema at
|
|
319
|
+
* module load and pulls ~315kb of zod + locales into the bundle).
|
|
320
|
+
*/
|
|
321
|
+
declare const STORY_REPORT_SCHEMA_MAJOR: 1;
|
|
322
|
+
|
|
188
323
|
/**
|
|
189
324
|
* StoryReport runtime Zod schema, derived from the canonical JSON Schema
|
|
190
|
-
* at executable-stories-
|
|
325
|
+
* at executable-stories-core/schemas/story-report-v1.json.
|
|
191
326
|
*
|
|
192
327
|
* Uses z.fromJSONSchema (experimental in Zod 4.x). If the API changes upstream,
|
|
193
328
|
* only this file needs updating — the rest of the package consumes
|
|
@@ -197,6 +332,5 @@ declare function parseStoryReport(input: unknown): Result<StoryReport>;
|
|
|
197
332
|
*/
|
|
198
333
|
|
|
199
334
|
declare const storyReportSchema: z.ZodType<unknown, unknown, z.core.$ZodTypeInternals<unknown, unknown>>;
|
|
200
|
-
declare const STORY_REPORT_SCHEMA_MAJOR: 1;
|
|
201
335
|
|
|
202
|
-
export { type BuiltinRenderers, type CustomRenderer, type CustomRenderers, DocCode, DocCustom, DocEntry, DocKv, DocLink, DocMermaid, DocNote, DocScreenshot, DocSection, DocTable, DocTag, Report, ReportDocEntries, type ReportDocEntriesProps, ReportEmpty, type ReportEmptyProps, ReportFeature, ReportFeatureList, type ReportFeatureProps, type ReportParseError, type ReportParseErrorCode, type ReportProps, ReportRoot, type ReportRootProps, ReportScenario, ReportScenarioList, type ReportScenarioListProps, type ReportScenarioProps, ReportSchemaError, type ReportSchemaErrorProps, ReportStepItem, ReportSteps, type ReportStepsProps, ReportSummary, type ReportSummaryProps, ReportSummaryView, type ReportSummaryViewProps, type Result, STORY_REPORT_SCHEMA_MAJOR, err, ok, parseStoryReport, storyReportSchema, useBuiltinRenderers, useCustomRenderers, useReport };
|
|
336
|
+
export { type BuiltinRenderers, type CustomRenderer, type CustomRenderers, DocCode, DocCustom, DocEntry, DocHtml, DocKv, DocLink, DocMermaid, DocNote, DocScreenshot, DocSection, DocTable, DocTag, DocVideo, type ExplorerScenario, type ExplorerStatus, MermaidDiagram, MermaidSource, Report, ReportAttachments, ReportDocEntries, type ReportDocEntriesProps, ReportEmpty, type ReportEmptyProps, ReportFeature, ReportFeatureList, type ReportFeatureProps, ReportMeta, type ReportParseError, type ReportParseErrorCode, type ReportProps, ReportRoot, type ReportRootProps, ReportScenario, ReportScenarioList, type ReportScenarioListProps, type ReportScenarioProps, ReportSchemaError, type ReportSchemaErrorProps, ReportStepItem, ReportSteps, type ReportStepsProps, ReportSummary, type ReportSummaryProps, ReportSummaryView, type ReportSummaryViewProps, ReportTrace, type Result, STORY_REPORT_SCHEMA_MAJOR, ScenarioExplorer, type ScenarioExplorerProps, err, ok, parseStoryReport, storyReportSchema, useBuiltinRenderers, useCustomRenderers, useReport };
|
package/dist/index.d.ts
CHANGED
|
@@ -1,8 +1,10 @@
|
|
|
1
1
|
import * as react from 'react';
|
|
2
|
-
import { ReactNode } from 'react';
|
|
3
|
-
import * as
|
|
4
|
-
import { ReportDocMermaid, ReportDocCode, ReportDocSection, ReportDocCustom, StoryReport, ReportSummary as ReportSummary$1, ReportFeature as ReportFeature$1, ReportScenario as ReportScenario$1, ReportStep, ReportDocEntry, ReportDocNote, ReportDocTag, ReportDocKv, ReportDocTable, ReportDocLink, ReportDocScreenshot } from 'executable-stories-
|
|
5
|
-
export { StoryReport, ReportDocEntry as StoryReportDocEntry, ReportFeature as StoryReportFeature, ReportScenario as StoryReportScenario, ReportStep as StoryReportStep, ReportSummary as StoryReportSummary } from 'executable-stories-
|
|
2
|
+
import { ReactNode, Ref } from 'react';
|
|
3
|
+
import * as executable_stories_core from 'executable-stories-core';
|
|
4
|
+
import { ReportDocMermaid, ReportDocCode, ReportDocSection, ReportDocCustom, StoryReport, ReportSummary as ReportSummary$1, ReportAttachment, ReportFeature as ReportFeature$1, ReportScenario as ReportScenario$1, ReportStep, ReportDocEntry, ReportDocNote, ReportDocTag, ReportDocKv, ReportDocTable, ReportDocLink, ReportDocScreenshot, ReportDocVideo, ReportDocHtml } from 'executable-stories-core';
|
|
5
|
+
export { StoryReport, ReportDocEntry as StoryReportDocEntry, ReportFeature as StoryReportFeature, ReportScenario as StoryReportScenario, ReportStep as StoryReportStep, ReportSummary as StoryReportSummary } from 'executable-stories-core';
|
|
6
|
+
import { OtelSpan } from 'executable-stories-core/types/otel';
|
|
7
|
+
import * as mermaid from 'mermaid';
|
|
6
8
|
import { z } from 'zod';
|
|
7
9
|
|
|
8
10
|
/**
|
|
@@ -11,6 +13,7 @@ import { z } from 'zod';
|
|
|
11
13
|
* Used at the boundary where a StoryReport is parsed: the consumer hands us
|
|
12
14
|
* an unknown value (file contents, fetch body, prop) and we return a Result.
|
|
13
15
|
*/
|
|
16
|
+
|
|
14
17
|
type Result<T, E = ReportParseError> = {
|
|
15
18
|
ok: true;
|
|
16
19
|
data: T;
|
|
@@ -82,11 +85,43 @@ interface ReportSummaryViewProps {
|
|
|
82
85
|
}
|
|
83
86
|
declare function ReportSummaryView({ summary, className, ariaLabel }: ReportSummaryViewProps): react.JSX.Element;
|
|
84
87
|
|
|
88
|
+
/**
|
|
89
|
+
* Run metadata line (started, duration, version, git SHA, CI) — the React
|
|
90
|
+
* equivalent of the report's `.meta-info` block. Reads the top-level StoryReport
|
|
91
|
+
* fields from context.
|
|
92
|
+
*/
|
|
93
|
+
declare function ReportMeta(): react.JSX.Element | null;
|
|
94
|
+
|
|
95
|
+
/**
|
|
96
|
+
* Renders scenario attachments. Base64 images embed inline; everything else
|
|
97
|
+
* becomes a labelled data-URI download link. Mirrors the report's attachments
|
|
98
|
+
* block (which also inlines images and links other media).
|
|
99
|
+
*/
|
|
100
|
+
declare function ReportAttachments({ attachments }: {
|
|
101
|
+
attachments: ReportAttachment[];
|
|
102
|
+
}): react.JSX.Element | null;
|
|
103
|
+
|
|
104
|
+
/**
|
|
105
|
+
* OTel trace waterfall. Collapsed by default (native <details>, no JS) so it
|
|
106
|
+
* renders in both the static and interactive reports. Each span is a row with a
|
|
107
|
+
* depth-indented name and a bar positioned/sized by its time window.
|
|
108
|
+
*/
|
|
109
|
+
declare function ReportTrace({ spans }: {
|
|
110
|
+
spans: readonly OtelSpan[] | undefined;
|
|
111
|
+
}): react.JSX.Element | null;
|
|
112
|
+
|
|
85
113
|
declare function ReportFeatureList(): react.JSX.Element;
|
|
86
114
|
|
|
87
115
|
interface ReportFeatureProps {
|
|
88
116
|
feature: ReportFeature$1;
|
|
89
117
|
}
|
|
118
|
+
/**
|
|
119
|
+
* Feature group — the report's `.feature` card: a header bar with the feature
|
|
120
|
+
* title + mono source path and ✓/✗/○ status counts on the right, over a stack
|
|
121
|
+
* of scenario cards. Kept a semantic <section> (a region), not a shadcn Card
|
|
122
|
+
* div, so it stays a landmark and doesn't collide with the scenario cards'
|
|
123
|
+
* `[data-slot="card"]`.
|
|
124
|
+
*/
|
|
90
125
|
declare function ReportFeature({ feature }: ReportFeatureProps): react.JSX.Element;
|
|
91
126
|
|
|
92
127
|
interface ReportScenarioListProps {
|
|
@@ -96,8 +131,14 @@ declare function ReportScenarioList({ feature }: ReportScenarioListProps): react
|
|
|
96
131
|
|
|
97
132
|
interface ReportScenarioProps {
|
|
98
133
|
scenario: ReportScenario$1;
|
|
134
|
+
/**
|
|
135
|
+
* Omit the card's own title row (status badge + tags still render). Use when
|
|
136
|
+
* the surrounding page already shows the scenario title as its heading — e.g.
|
|
137
|
+
* the Astro detail page, where Starlight renders the title as the page `h1`.
|
|
138
|
+
*/
|
|
139
|
+
hideTitle?: boolean;
|
|
99
140
|
}
|
|
100
|
-
declare function ReportScenario({ scenario }: ReportScenarioProps): react.JSX.Element;
|
|
141
|
+
declare function ReportScenario({ scenario, hideTitle }: ReportScenarioProps): react.JSX.Element;
|
|
101
142
|
|
|
102
143
|
interface ReportStepsProps {
|
|
103
144
|
scenario: ReportScenario$1;
|
|
@@ -114,7 +155,7 @@ declare function ReportDocEntries({ entries }: ReportDocEntriesProps): react.JSX
|
|
|
114
155
|
|
|
115
156
|
declare function DocEntry({ entry }: {
|
|
116
157
|
entry: ReportDocEntry;
|
|
117
|
-
}): react.JSX.Element
|
|
158
|
+
}): react.JSX.Element;
|
|
118
159
|
|
|
119
160
|
declare function DocNote({ entry }: {
|
|
120
161
|
entry: ReportDocNote;
|
|
@@ -145,24 +186,110 @@ declare function DocSection({ entry }: {
|
|
|
145
186
|
}): react.JSX.Element;
|
|
146
187
|
|
|
147
188
|
/**
|
|
148
|
-
*
|
|
189
|
+
* The raw mermaid source as a semantic `<pre data-mermaid>`. This is the
|
|
190
|
+
* default render and the universal fallback: AI agents, screen readers, and
|
|
191
|
+
* no-JS views all get the readable source. `<MermaidDiagram>` upgrades this to
|
|
192
|
+
* a drawn diagram on the client.
|
|
193
|
+
*/
|
|
194
|
+
declare function MermaidSource({ entry, ref }: {
|
|
195
|
+
entry: ReportDocMermaid;
|
|
196
|
+
ref?: Ref<HTMLElement>;
|
|
197
|
+
}): react.JSX.Element;
|
|
198
|
+
/**
|
|
199
|
+
* Renders mermaid source as a semantic `<pre data-mermaid>` by default.
|
|
149
200
|
*
|
|
150
|
-
*
|
|
151
|
-
*
|
|
152
|
-
* (e.g., one that dynamically imports the mermaid library on mount).
|
|
201
|
+
* To draw the diagram, supply a `renderers.mermaid` prop — e.g. the shipped
|
|
202
|
+
* `MermaidDiagram` (`renderers={{ mermaid: (e) => <MermaidDiagram entry={e} /> }}`).
|
|
153
203
|
*/
|
|
154
204
|
declare function DocMermaid({ entry }: {
|
|
155
205
|
entry: ReportDocMermaid;
|
|
156
206
|
}): react.JSX.Element;
|
|
157
207
|
|
|
208
|
+
type MermaidApi = typeof mermaid.default;
|
|
209
|
+
type MermaidLoader = () => Promise<MermaidApi>;
|
|
210
|
+
|
|
211
|
+
/**
|
|
212
|
+
* Client renderer for `story.mermaid(...)` entries. Dynamically imports the
|
|
213
|
+
* installed `mermaid` package and draws the diagram to inline SVG, falling back
|
|
214
|
+
* to the readable source on the server / before load / on error.
|
|
215
|
+
*
|
|
216
|
+
* Opt in via `<Report renderers={{ mermaid: (e) => <MermaidDiagram entry={e} /> }} />`.
|
|
217
|
+
* Requires `mermaid` to be installed (an optional peer dependency). Pass `load`
|
|
218
|
+
* to override how mermaid is obtained (the standalone report island injects a
|
|
219
|
+
* CDN loader via `MermaidView` directly).
|
|
220
|
+
*/
|
|
221
|
+
declare function MermaidDiagram({ entry, load }: {
|
|
222
|
+
entry: ReportDocMermaid;
|
|
223
|
+
load?: MermaidLoader;
|
|
224
|
+
}): react.JSX.Element;
|
|
225
|
+
|
|
226
|
+
/**
|
|
227
|
+
* A screenshot that's still an absolute local filesystem path by the time it
|
|
228
|
+
* reaches this component means the report's asset bundler couldn't find the
|
|
229
|
+
* file to inline/copy it (deleted, moved, or never captured — see
|
|
230
|
+
* inlineScreenshotIfPossible in executable-stories-playwright). `<img src>`
|
|
231
|
+
* would 404 against a path from the machine that generated the report, so
|
|
232
|
+
* show a placeholder instead of a broken image.
|
|
233
|
+
*/
|
|
158
234
|
declare function DocScreenshot({ entry }: {
|
|
159
235
|
entry: ReportDocScreenshot;
|
|
160
236
|
}): react.JSX.Element;
|
|
161
237
|
|
|
238
|
+
/**
|
|
239
|
+
* Renders a video doc entry. Video bytes are large and never inlined; `path` is
|
|
240
|
+
* a URL or a path that resolves alongside the report. Both `path` and `poster`
|
|
241
|
+
* are adapter-supplied, so they go through the same scheme allow-list as the
|
|
242
|
+
* DocHtml iframe src (no `javascript:`/`data:` URLs reach the DOM).
|
|
243
|
+
*
|
|
244
|
+
* An absolute local filesystem path means the report's asset bundler
|
|
245
|
+
* couldn't find/copy the file — a `<video src>` pointed at a runner-local
|
|
246
|
+
* path would just fail to load, so show a placeholder instead.
|
|
247
|
+
*/
|
|
248
|
+
declare function DocVideo({ entry }: {
|
|
249
|
+
entry: ReportDocVideo;
|
|
250
|
+
}): react.JSX.Element;
|
|
251
|
+
|
|
252
|
+
/**
|
|
253
|
+
* Renders an embedded-HTML doc entry inside a SANDBOXED iframe. All embedded
|
|
254
|
+
* HTML is untrusted, so the frame is `sandbox="allow-scripts"` only (no
|
|
255
|
+
* allow-same-origin) — embedded scripts run (charts work) but can't touch the
|
|
256
|
+
* report DOM, cookies, or storage. Inline `content` → srcdoc (keeps the report
|
|
257
|
+
* self-contained); `url`/`path` → src (scheme-validated).
|
|
258
|
+
*/
|
|
259
|
+
declare function DocHtml({ entry }: {
|
|
260
|
+
entry: ReportDocHtml;
|
|
261
|
+
}): react.JSX.Element;
|
|
262
|
+
|
|
162
263
|
declare function DocCustom({ entry }: {
|
|
163
264
|
entry: ReportDocCustom;
|
|
164
265
|
}): react.JSX.Element;
|
|
165
266
|
|
|
267
|
+
type ExplorerStatus = "passed" | "failed" | "skipped" | "pending";
|
|
268
|
+
interface ExplorerScenario {
|
|
269
|
+
id: string;
|
|
270
|
+
title: string;
|
|
271
|
+
status: ExplorerStatus;
|
|
272
|
+
tags: string[];
|
|
273
|
+
/** Source file / feature label shown on the right. */
|
|
274
|
+
feature: string;
|
|
275
|
+
/** Resolved href to the scenario detail page. */
|
|
276
|
+
href: string;
|
|
277
|
+
}
|
|
278
|
+
interface ScenarioExplorerProps {
|
|
279
|
+
scenarios: ExplorerScenario[];
|
|
280
|
+
summary?: {
|
|
281
|
+
total: number;
|
|
282
|
+
passed: number;
|
|
283
|
+
failed: number;
|
|
284
|
+
};
|
|
285
|
+
}
|
|
286
|
+
/**
|
|
287
|
+
* Scenario Explorer surface — a shadcn `Command` palette rendered inline. cmdk
|
|
288
|
+
* filters by the item value (title + feature + tags) as you type; the status
|
|
289
|
+
* pills pre-filter the list. Each row is a real `<a>` to the detail page.
|
|
290
|
+
*/
|
|
291
|
+
declare function ScenarioExplorer({ scenarios, summary }: ScenarioExplorerProps): react.JSX.Element;
|
|
292
|
+
|
|
166
293
|
declare function useCustomRenderers(): CustomRenderers;
|
|
167
294
|
declare function useBuiltinRenderers(): BuiltinRenderers;
|
|
168
295
|
|
|
@@ -176,7 +303,7 @@ interface ReportSchemaErrorProps {
|
|
|
176
303
|
}
|
|
177
304
|
declare function ReportSchemaError({ error }: ReportSchemaErrorProps): react.JSX.Element;
|
|
178
305
|
|
|
179
|
-
declare function useReport():
|
|
306
|
+
declare function useReport(): executable_stories_core.StoryReport;
|
|
180
307
|
|
|
181
308
|
/**
|
|
182
309
|
* parseStoryReport — boundary validator. Accepts unknown input (file contents,
|
|
@@ -185,9 +312,17 @@ declare function useReport(): executable_stories_formatters.StoryReport;
|
|
|
185
312
|
|
|
186
313
|
declare function parseStoryReport(input: unknown): Result<StoryReport>;
|
|
187
314
|
|
|
315
|
+
/**
|
|
316
|
+
* The supported StoryReport schema major version, factored out of
|
|
317
|
+
* story-report.schema.ts so the client island can do a cheap version check
|
|
318
|
+
* WITHOUT importing the Zod schema module (which evaluates z.fromJSONSchema at
|
|
319
|
+
* module load and pulls ~315kb of zod + locales into the bundle).
|
|
320
|
+
*/
|
|
321
|
+
declare const STORY_REPORT_SCHEMA_MAJOR: 1;
|
|
322
|
+
|
|
188
323
|
/**
|
|
189
324
|
* StoryReport runtime Zod schema, derived from the canonical JSON Schema
|
|
190
|
-
* at executable-stories-
|
|
325
|
+
* at executable-stories-core/schemas/story-report-v1.json.
|
|
191
326
|
*
|
|
192
327
|
* Uses z.fromJSONSchema (experimental in Zod 4.x). If the API changes upstream,
|
|
193
328
|
* only this file needs updating — the rest of the package consumes
|
|
@@ -197,6 +332,5 @@ declare function parseStoryReport(input: unknown): Result<StoryReport>;
|
|
|
197
332
|
*/
|
|
198
333
|
|
|
199
334
|
declare const storyReportSchema: z.ZodType<unknown, unknown, z.core.$ZodTypeInternals<unknown, unknown>>;
|
|
200
|
-
declare const STORY_REPORT_SCHEMA_MAJOR: 1;
|
|
201
335
|
|
|
202
|
-
export { type BuiltinRenderers, type CustomRenderer, type CustomRenderers, DocCode, DocCustom, DocEntry, DocKv, DocLink, DocMermaid, DocNote, DocScreenshot, DocSection, DocTable, DocTag, Report, ReportDocEntries, type ReportDocEntriesProps, ReportEmpty, type ReportEmptyProps, ReportFeature, ReportFeatureList, type ReportFeatureProps, type ReportParseError, type ReportParseErrorCode, type ReportProps, ReportRoot, type ReportRootProps, ReportScenario, ReportScenarioList, type ReportScenarioListProps, type ReportScenarioProps, ReportSchemaError, type ReportSchemaErrorProps, ReportStepItem, ReportSteps, type ReportStepsProps, ReportSummary, type ReportSummaryProps, ReportSummaryView, type ReportSummaryViewProps, type Result, STORY_REPORT_SCHEMA_MAJOR, err, ok, parseStoryReport, storyReportSchema, useBuiltinRenderers, useCustomRenderers, useReport };
|
|
336
|
+
export { type BuiltinRenderers, type CustomRenderer, type CustomRenderers, DocCode, DocCustom, DocEntry, DocHtml, DocKv, DocLink, DocMermaid, DocNote, DocScreenshot, DocSection, DocTable, DocTag, DocVideo, type ExplorerScenario, type ExplorerStatus, MermaidDiagram, MermaidSource, Report, ReportAttachments, ReportDocEntries, type ReportDocEntriesProps, ReportEmpty, type ReportEmptyProps, ReportFeature, ReportFeatureList, type ReportFeatureProps, ReportMeta, type ReportParseError, type ReportParseErrorCode, type ReportProps, ReportRoot, type ReportRootProps, ReportScenario, ReportScenarioList, type ReportScenarioListProps, type ReportScenarioProps, ReportSchemaError, type ReportSchemaErrorProps, ReportStepItem, ReportSteps, type ReportStepsProps, ReportSummary, type ReportSummaryProps, ReportSummaryView, type ReportSummaryViewProps, ReportTrace, type Result, STORY_REPORT_SCHEMA_MAJOR, ScenarioExplorer, type ScenarioExplorerProps, err, ok, parseStoryReport, storyReportSchema, useBuiltinRenderers, useCustomRenderers, useReport };
|