executable-stories-react 0.1.16 → 0.2.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 +1743 -371
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +136 -14
- package/dist/index.d.ts +136 -14
- package/dist/index.js +1724 -370
- package/dist/index.js.map +1 -1
- package/dist/interactive.cjs +1461 -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 +1450 -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 +1211 -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 +1186 -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,98 @@ 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
|
+
|
|
158
226
|
declare function DocScreenshot({ entry }: {
|
|
159
227
|
entry: ReportDocScreenshot;
|
|
160
228
|
}): react.JSX.Element;
|
|
161
229
|
|
|
230
|
+
/**
|
|
231
|
+
* Renders a video doc entry. Video bytes are large and never inlined; `path` is
|
|
232
|
+
* a URL or a path that resolves alongside the report. Both `path` and `poster`
|
|
233
|
+
* are adapter-supplied, so they go through the same scheme allow-list as the
|
|
234
|
+
* DocHtml iframe src (no `javascript:`/`data:` URLs reach the DOM).
|
|
235
|
+
*/
|
|
236
|
+
declare function DocVideo({ entry }: {
|
|
237
|
+
entry: ReportDocVideo;
|
|
238
|
+
}): react.JSX.Element;
|
|
239
|
+
|
|
240
|
+
/**
|
|
241
|
+
* Renders an embedded-HTML doc entry inside a SANDBOXED iframe. All embedded
|
|
242
|
+
* HTML is untrusted, so the frame is `sandbox="allow-scripts"` only (no
|
|
243
|
+
* allow-same-origin) — embedded scripts run (charts work) but can't touch the
|
|
244
|
+
* report DOM, cookies, or storage. Inline `content` → srcdoc (keeps the report
|
|
245
|
+
* self-contained); `url`/`path` → src (scheme-validated).
|
|
246
|
+
*/
|
|
247
|
+
declare function DocHtml({ entry }: {
|
|
248
|
+
entry: ReportDocHtml;
|
|
249
|
+
}): react.JSX.Element;
|
|
250
|
+
|
|
162
251
|
declare function DocCustom({ entry }: {
|
|
163
252
|
entry: ReportDocCustom;
|
|
164
253
|
}): react.JSX.Element;
|
|
165
254
|
|
|
255
|
+
type ExplorerStatus = "passed" | "failed" | "skipped" | "pending";
|
|
256
|
+
interface ExplorerScenario {
|
|
257
|
+
id: string;
|
|
258
|
+
title: string;
|
|
259
|
+
status: ExplorerStatus;
|
|
260
|
+
tags: string[];
|
|
261
|
+
/** Source file / feature label shown on the right. */
|
|
262
|
+
feature: string;
|
|
263
|
+
/** Resolved href to the scenario detail page. */
|
|
264
|
+
href: string;
|
|
265
|
+
}
|
|
266
|
+
interface ScenarioExplorerProps {
|
|
267
|
+
scenarios: ExplorerScenario[];
|
|
268
|
+
summary?: {
|
|
269
|
+
total: number;
|
|
270
|
+
passed: number;
|
|
271
|
+
failed: number;
|
|
272
|
+
};
|
|
273
|
+
}
|
|
274
|
+
/**
|
|
275
|
+
* Scenario Explorer surface — a shadcn `Command` palette rendered inline. cmdk
|
|
276
|
+
* filters by the item value (title + feature + tags) as you type; the status
|
|
277
|
+
* pills pre-filter the list. Each row is a real `<a>` to the detail page.
|
|
278
|
+
*/
|
|
279
|
+
declare function ScenarioExplorer({ scenarios, summary }: ScenarioExplorerProps): react.JSX.Element;
|
|
280
|
+
|
|
166
281
|
declare function useCustomRenderers(): CustomRenderers;
|
|
167
282
|
declare function useBuiltinRenderers(): BuiltinRenderers;
|
|
168
283
|
|
|
@@ -176,7 +291,7 @@ interface ReportSchemaErrorProps {
|
|
|
176
291
|
}
|
|
177
292
|
declare function ReportSchemaError({ error }: ReportSchemaErrorProps): react.JSX.Element;
|
|
178
293
|
|
|
179
|
-
declare function useReport():
|
|
294
|
+
declare function useReport(): executable_stories_core.StoryReport;
|
|
180
295
|
|
|
181
296
|
/**
|
|
182
297
|
* parseStoryReport — boundary validator. Accepts unknown input (file contents,
|
|
@@ -185,9 +300,17 @@ declare function useReport(): executable_stories_formatters.StoryReport;
|
|
|
185
300
|
|
|
186
301
|
declare function parseStoryReport(input: unknown): Result<StoryReport>;
|
|
187
302
|
|
|
303
|
+
/**
|
|
304
|
+
* The supported StoryReport schema major version, factored out of
|
|
305
|
+
* story-report.schema.ts so the client island can do a cheap version check
|
|
306
|
+
* WITHOUT importing the Zod schema module (which evaluates z.fromJSONSchema at
|
|
307
|
+
* module load and pulls ~315kb of zod + locales into the bundle).
|
|
308
|
+
*/
|
|
309
|
+
declare const STORY_REPORT_SCHEMA_MAJOR: 1;
|
|
310
|
+
|
|
188
311
|
/**
|
|
189
312
|
* StoryReport runtime Zod schema, derived from the canonical JSON Schema
|
|
190
|
-
* at executable-stories-
|
|
313
|
+
* at executable-stories-core/schemas/story-report-v1.json.
|
|
191
314
|
*
|
|
192
315
|
* Uses z.fromJSONSchema (experimental in Zod 4.x). If the API changes upstream,
|
|
193
316
|
* only this file needs updating — the rest of the package consumes
|
|
@@ -197,6 +320,5 @@ declare function parseStoryReport(input: unknown): Result<StoryReport>;
|
|
|
197
320
|
*/
|
|
198
321
|
|
|
199
322
|
declare const storyReportSchema: z.ZodType<unknown, unknown, z.core.$ZodTypeInternals<unknown, unknown>>;
|
|
200
|
-
declare const STORY_REPORT_SCHEMA_MAJOR: 1;
|
|
201
323
|
|
|
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 };
|
|
324
|
+
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,98 @@ 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
|
+
|
|
158
226
|
declare function DocScreenshot({ entry }: {
|
|
159
227
|
entry: ReportDocScreenshot;
|
|
160
228
|
}): react.JSX.Element;
|
|
161
229
|
|
|
230
|
+
/**
|
|
231
|
+
* Renders a video doc entry. Video bytes are large and never inlined; `path` is
|
|
232
|
+
* a URL or a path that resolves alongside the report. Both `path` and `poster`
|
|
233
|
+
* are adapter-supplied, so they go through the same scheme allow-list as the
|
|
234
|
+
* DocHtml iframe src (no `javascript:`/`data:` URLs reach the DOM).
|
|
235
|
+
*/
|
|
236
|
+
declare function DocVideo({ entry }: {
|
|
237
|
+
entry: ReportDocVideo;
|
|
238
|
+
}): react.JSX.Element;
|
|
239
|
+
|
|
240
|
+
/**
|
|
241
|
+
* Renders an embedded-HTML doc entry inside a SANDBOXED iframe. All embedded
|
|
242
|
+
* HTML is untrusted, so the frame is `sandbox="allow-scripts"` only (no
|
|
243
|
+
* allow-same-origin) — embedded scripts run (charts work) but can't touch the
|
|
244
|
+
* report DOM, cookies, or storage. Inline `content` → srcdoc (keeps the report
|
|
245
|
+
* self-contained); `url`/`path` → src (scheme-validated).
|
|
246
|
+
*/
|
|
247
|
+
declare function DocHtml({ entry }: {
|
|
248
|
+
entry: ReportDocHtml;
|
|
249
|
+
}): react.JSX.Element;
|
|
250
|
+
|
|
162
251
|
declare function DocCustom({ entry }: {
|
|
163
252
|
entry: ReportDocCustom;
|
|
164
253
|
}): react.JSX.Element;
|
|
165
254
|
|
|
255
|
+
type ExplorerStatus = "passed" | "failed" | "skipped" | "pending";
|
|
256
|
+
interface ExplorerScenario {
|
|
257
|
+
id: string;
|
|
258
|
+
title: string;
|
|
259
|
+
status: ExplorerStatus;
|
|
260
|
+
tags: string[];
|
|
261
|
+
/** Source file / feature label shown on the right. */
|
|
262
|
+
feature: string;
|
|
263
|
+
/** Resolved href to the scenario detail page. */
|
|
264
|
+
href: string;
|
|
265
|
+
}
|
|
266
|
+
interface ScenarioExplorerProps {
|
|
267
|
+
scenarios: ExplorerScenario[];
|
|
268
|
+
summary?: {
|
|
269
|
+
total: number;
|
|
270
|
+
passed: number;
|
|
271
|
+
failed: number;
|
|
272
|
+
};
|
|
273
|
+
}
|
|
274
|
+
/**
|
|
275
|
+
* Scenario Explorer surface — a shadcn `Command` palette rendered inline. cmdk
|
|
276
|
+
* filters by the item value (title + feature + tags) as you type; the status
|
|
277
|
+
* pills pre-filter the list. Each row is a real `<a>` to the detail page.
|
|
278
|
+
*/
|
|
279
|
+
declare function ScenarioExplorer({ scenarios, summary }: ScenarioExplorerProps): react.JSX.Element;
|
|
280
|
+
|
|
166
281
|
declare function useCustomRenderers(): CustomRenderers;
|
|
167
282
|
declare function useBuiltinRenderers(): BuiltinRenderers;
|
|
168
283
|
|
|
@@ -176,7 +291,7 @@ interface ReportSchemaErrorProps {
|
|
|
176
291
|
}
|
|
177
292
|
declare function ReportSchemaError({ error }: ReportSchemaErrorProps): react.JSX.Element;
|
|
178
293
|
|
|
179
|
-
declare function useReport():
|
|
294
|
+
declare function useReport(): executable_stories_core.StoryReport;
|
|
180
295
|
|
|
181
296
|
/**
|
|
182
297
|
* parseStoryReport — boundary validator. Accepts unknown input (file contents,
|
|
@@ -185,9 +300,17 @@ declare function useReport(): executable_stories_formatters.StoryReport;
|
|
|
185
300
|
|
|
186
301
|
declare function parseStoryReport(input: unknown): Result<StoryReport>;
|
|
187
302
|
|
|
303
|
+
/**
|
|
304
|
+
* The supported StoryReport schema major version, factored out of
|
|
305
|
+
* story-report.schema.ts so the client island can do a cheap version check
|
|
306
|
+
* WITHOUT importing the Zod schema module (which evaluates z.fromJSONSchema at
|
|
307
|
+
* module load and pulls ~315kb of zod + locales into the bundle).
|
|
308
|
+
*/
|
|
309
|
+
declare const STORY_REPORT_SCHEMA_MAJOR: 1;
|
|
310
|
+
|
|
188
311
|
/**
|
|
189
312
|
* StoryReport runtime Zod schema, derived from the canonical JSON Schema
|
|
190
|
-
* at executable-stories-
|
|
313
|
+
* at executable-stories-core/schemas/story-report-v1.json.
|
|
191
314
|
*
|
|
192
315
|
* Uses z.fromJSONSchema (experimental in Zod 4.x). If the API changes upstream,
|
|
193
316
|
* only this file needs updating — the rest of the package consumes
|
|
@@ -197,6 +320,5 @@ declare function parseStoryReport(input: unknown): Result<StoryReport>;
|
|
|
197
320
|
*/
|
|
198
321
|
|
|
199
322
|
declare const storyReportSchema: z.ZodType<unknown, unknown, z.core.$ZodTypeInternals<unknown, unknown>>;
|
|
200
|
-
declare const STORY_REPORT_SCHEMA_MAJOR: 1;
|
|
201
323
|
|
|
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 };
|
|
324
|
+
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 };
|