feat(ui): storybook 10 over the real pages + screenshot harness
Preview imports the mock transport statically and wraps every story in a fresh RegistryProvider seeded with mock mode + the story's scenario parameter (dark default, light via toolbar). One story file per page (Default + FirstRun/Syncing/Errors where meaningful) plus the whole shell. tools/screenshots.mjs mirrors the console's harness: headless Chromium over storybook-static, every Pages/* + Shell/* story. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
This commit is contained in:
@@ -0,0 +1,12 @@
|
|||||||
|
import type { StorybookConfig } from "@storybook/react-vite";
|
||||||
|
|
||||||
|
const config: StorybookConfig = {
|
||||||
|
stories: ["../src/**/*.stories.tsx"],
|
||||||
|
addons: [],
|
||||||
|
framework: {
|
||||||
|
name: "@storybook/react-vite",
|
||||||
|
options: {},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
|
||||||
|
export default config;
|
||||||
@@ -0,0 +1,65 @@
|
|||||||
|
// Storybook renders the REAL pages on the mock transport: the static import below
|
||||||
|
// registers the fixture HttpClient layer + status ticker (Storybook bundles are never
|
||||||
|
// shipped, so fixtures in them are fine), and the decorator gives every story a fresh
|
||||||
|
// atom registry seeded with mock mode + the story's scenario.
|
||||||
|
import "../src/styles.css";
|
||||||
|
import "../src/mocks/http";
|
||||||
|
import { RegistryProvider } from "@effect/atom-react";
|
||||||
|
import { definePreview } from "@storybook/react-vite";
|
||||||
|
import { useEffect } from "react";
|
||||||
|
import {
|
||||||
|
apiModeAtom,
|
||||||
|
type Scenario,
|
||||||
|
scenarioAtom,
|
||||||
|
} from "../src/mocks/scenario";
|
||||||
|
|
||||||
|
export default definePreview({
|
||||||
|
addons: [],
|
||||||
|
// The console pins dark; default the canvas to dark with a toolbar light switch.
|
||||||
|
initialGlobals: { theme: "dark" },
|
||||||
|
globalTypes: {
|
||||||
|
theme: {
|
||||||
|
description: "Light/dark color scheme",
|
||||||
|
toolbar: {
|
||||||
|
title: "Theme",
|
||||||
|
icon: "circlehollow",
|
||||||
|
items: [
|
||||||
|
{ value: "dark", icon: "moon", title: "Dark" },
|
||||||
|
{ value: "light", icon: "sun", title: "Light" },
|
||||||
|
],
|
||||||
|
dynamicTitle: true,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
decorators: [
|
||||||
|
(Story, context) => {
|
||||||
|
const dark = (context.globals.theme as string) !== "light";
|
||||||
|
const scenario =
|
||||||
|
(context.parameters.scenario as Scenario | undefined) ?? "healthy";
|
||||||
|
const fullscreen = context.parameters.layout === "fullscreen";
|
||||||
|
// Mirror `.dark` onto <html> so portal-mounted content (selects, dialogs,
|
||||||
|
// toasts) picks up the palette — the theme keys everything off `html.dark`.
|
||||||
|
useEffect(() => {
|
||||||
|
document.documentElement.classList.toggle("dark", dark);
|
||||||
|
}, [dark]);
|
||||||
|
return (
|
||||||
|
<RegistryProvider
|
||||||
|
key={`${scenario}-${dark}`}
|
||||||
|
initialValues={[
|
||||||
|
[apiModeAtom, "mock"],
|
||||||
|
[scenarioAtom, scenario],
|
||||||
|
]}
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
className={`min-h-screen bg-background text-foreground ${fullscreen ? "" : "p-6"}`}
|
||||||
|
>
|
||||||
|
<Story />
|
||||||
|
</div>
|
||||||
|
</RegistryProvider>
|
||||||
|
);
|
||||||
|
},
|
||||||
|
],
|
||||||
|
parameters: {
|
||||||
|
layout: "padded",
|
||||||
|
},
|
||||||
|
});
|
||||||
@@ -0,0 +1,14 @@
|
|||||||
|
import type { Meta, StoryObj } from "@storybook/react-vite";
|
||||||
|
import { App } from "./App";
|
||||||
|
|
||||||
|
const meta = {
|
||||||
|
title: "Shell/App",
|
||||||
|
component: App,
|
||||||
|
parameters: { layout: "fullscreen" },
|
||||||
|
} satisfies Meta<typeof App>;
|
||||||
|
|
||||||
|
export default meta;
|
||||||
|
type Story = StoryObj<typeof meta>;
|
||||||
|
|
||||||
|
export const Default: Story = {};
|
||||||
|
export const FirstRun: Story = { parameters: { scenario: "firstRun" } };
|
||||||
@@ -0,0 +1,14 @@
|
|||||||
|
import type { Meta, StoryObj } from "@storybook/react-vite";
|
||||||
|
import { EmulatorsPage } from "./emulators";
|
||||||
|
|
||||||
|
const meta = {
|
||||||
|
title: "Pages/Emulators",
|
||||||
|
component: EmulatorsPage,
|
||||||
|
args: { navigate: () => {} },
|
||||||
|
} satisfies Meta<typeof EmulatorsPage>;
|
||||||
|
|
||||||
|
export default meta;
|
||||||
|
type Story = StoryObj<typeof meta>;
|
||||||
|
|
||||||
|
export const Default: Story = {};
|
||||||
|
export const FirstRun: Story = { parameters: { scenario: "firstRun" } };
|
||||||
@@ -0,0 +1,16 @@
|
|||||||
|
import type { Meta, StoryObj } from "@storybook/react-vite";
|
||||||
|
import { LibraryPage } from "./library";
|
||||||
|
|
||||||
|
const meta = {
|
||||||
|
title: "Pages/Library",
|
||||||
|
component: LibraryPage,
|
||||||
|
args: { navigate: () => {} },
|
||||||
|
} satisfies Meta<typeof LibraryPage>;
|
||||||
|
|
||||||
|
export default meta;
|
||||||
|
type Story = StoryObj<typeof meta>;
|
||||||
|
|
||||||
|
export const Default: Story = {};
|
||||||
|
export const FirstRun: Story = { parameters: { scenario: "firstRun" } };
|
||||||
|
/** The preview endpoint fails (ScanFailed 500) — exercises the error gate. */
|
||||||
|
export const Errors: Story = { parameters: { scenario: "errors" } };
|
||||||
@@ -0,0 +1,16 @@
|
|||||||
|
import type { Meta, StoryObj } from "@storybook/react-vite";
|
||||||
|
import { OverviewPage } from "./overview";
|
||||||
|
|
||||||
|
const meta = {
|
||||||
|
title: "Pages/Overview",
|
||||||
|
component: OverviewPage,
|
||||||
|
args: { navigate: () => {} },
|
||||||
|
} satisfies Meta<typeof OverviewPage>;
|
||||||
|
|
||||||
|
export default meta;
|
||||||
|
type Story = StoryObj<typeof meta>;
|
||||||
|
|
||||||
|
export const Default: Story = {};
|
||||||
|
export const FirstRun: Story = { parameters: { scenario: "firstRun" } };
|
||||||
|
export const Syncing: Story = { parameters: { scenario: "syncing" } };
|
||||||
|
export const Errors: Story = { parameters: { scenario: "errors" } };
|
||||||
@@ -0,0 +1,13 @@
|
|||||||
|
import type { Meta, StoryObj } from "@storybook/react-vite";
|
||||||
|
import { SettingsPage } from "./settings";
|
||||||
|
|
||||||
|
const meta = {
|
||||||
|
title: "Pages/Settings",
|
||||||
|
component: SettingsPage,
|
||||||
|
args: { navigate: () => {} },
|
||||||
|
} satisfies Meta<typeof SettingsPage>;
|
||||||
|
|
||||||
|
export default meta;
|
||||||
|
type Story = StoryObj<typeof meta>;
|
||||||
|
|
||||||
|
export const Default: Story = {};
|
||||||
@@ -0,0 +1,14 @@
|
|||||||
|
import type { Meta, StoryObj } from "@storybook/react-vite";
|
||||||
|
import { SourcesPage } from "./sources";
|
||||||
|
|
||||||
|
const meta = {
|
||||||
|
title: "Pages/Sources",
|
||||||
|
component: SourcesPage,
|
||||||
|
args: { navigate: () => {} },
|
||||||
|
} satisfies Meta<typeof SourcesPage>;
|
||||||
|
|
||||||
|
export default meta;
|
||||||
|
type Story = StoryObj<typeof meta>;
|
||||||
|
|
||||||
|
export const Default: Story = {};
|
||||||
|
export const FirstRun: Story = { parameters: { scenario: "firstRun" } };
|
||||||
@@ -0,0 +1,144 @@
|
|||||||
|
// Capture page screenshots from the built Storybook — the same harness the console
|
||||||
|
// uses (punktfunk/web/tools/screenshots.mjs): headless Chromium over storybook-static,
|
||||||
|
// every Pages/* + Shell/* story, rendered entirely from fixtures. No host required.
|
||||||
|
//
|
||||||
|
// bun run build-storybook # produce ./storybook-static
|
||||||
|
// bun run screenshots # → ./screenshots/<story-id>.png
|
||||||
|
//
|
||||||
|
// Env knobs: OUT (output dir), STORYBOOK_STATIC (input dir), SETTLE (ms after the
|
||||||
|
// page looks ready, default 600), WIDTH/HEIGHT/SCALE (viewport, default 1440x900@2x),
|
||||||
|
// ONLY (comma-separated story-id substring filter).
|
||||||
|
|
||||||
|
import { existsSync } from "node:fs";
|
||||||
|
import { mkdir, readFile } from "node:fs/promises";
|
||||||
|
import { createServer } from "node:http";
|
||||||
|
import { extname, join, normalize, resolve } from "node:path";
|
||||||
|
import { chromium } from "playwright";
|
||||||
|
|
||||||
|
const ROOT = resolve(process.env.STORYBOOK_STATIC ?? "storybook-static");
|
||||||
|
const OUT = resolve(process.env.OUT ?? "screenshots");
|
||||||
|
const SETTLE = Number(process.env.SETTLE ?? 600);
|
||||||
|
const WIDTH = Number(process.env.WIDTH ?? 1440);
|
||||||
|
const HEIGHT = Number(process.env.HEIGHT ?? 900);
|
||||||
|
const SCALE = Number(process.env.SCALE ?? 2);
|
||||||
|
const ONLY = (process.env.ONLY ?? "")
|
||||||
|
.split(",")
|
||||||
|
.map((s) => s.trim())
|
||||||
|
.filter(Boolean);
|
||||||
|
|
||||||
|
// Only the page-level + shell stories make sense as screenshots.
|
||||||
|
const TITLE_PREFIXES = ["Pages/", "Shell/"];
|
||||||
|
|
||||||
|
const MIME = {
|
||||||
|
".html": "text/html",
|
||||||
|
".js": "text/javascript",
|
||||||
|
".mjs": "text/javascript",
|
||||||
|
".css": "text/css",
|
||||||
|
".json": "application/json",
|
||||||
|
".svg": "image/svg+xml",
|
||||||
|
".png": "image/png",
|
||||||
|
".jpg": "image/jpeg",
|
||||||
|
".woff": "font/woff",
|
||||||
|
".woff2": "font/woff2",
|
||||||
|
".ttf": "font/ttf",
|
||||||
|
".map": "application/json",
|
||||||
|
".ico": "image/x-icon",
|
||||||
|
};
|
||||||
|
|
||||||
|
function staticServer(rootDir) {
|
||||||
|
return createServer(async (req, res) => {
|
||||||
|
try {
|
||||||
|
const url = new URL(req.url, "http://localhost");
|
||||||
|
let path = decodeURIComponent(url.pathname);
|
||||||
|
if (path.endsWith("/")) path += "index.html";
|
||||||
|
// Contain the path to rootDir (no traversal).
|
||||||
|
const filePath = normalize(join(rootDir, path));
|
||||||
|
if (!filePath.startsWith(rootDir)) {
|
||||||
|
res.writeHead(403).end();
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
const body = await readFile(filePath);
|
||||||
|
res.writeHead(200, {
|
||||||
|
"content-type": MIME[extname(filePath)] ?? "application/octet-stream",
|
||||||
|
});
|
||||||
|
res.end(body);
|
||||||
|
} catch {
|
||||||
|
res.writeHead(404).end();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
async function listStories(rootDir) {
|
||||||
|
const indexPath = join(rootDir, "index.json");
|
||||||
|
if (!existsSync(indexPath)) {
|
||||||
|
throw new Error(
|
||||||
|
`${indexPath} not found — run \`bun run build-storybook\` first`,
|
||||||
|
);
|
||||||
|
}
|
||||||
|
const index = JSON.parse(await readFile(indexPath, "utf8"));
|
||||||
|
const entries = Object.values(index.entries ?? index.stories ?? {});
|
||||||
|
return entries
|
||||||
|
.filter((e) => e.type === "story" || e.type === undefined)
|
||||||
|
.filter((e) => TITLE_PREFIXES.some((p) => (e.title ?? "").startsWith(p)))
|
||||||
|
.filter((e) => ONLY.length === 0 || ONLY.some((f) => e.id.includes(f)))
|
||||||
|
.sort((a, b) => a.id.localeCompare(b.id));
|
||||||
|
}
|
||||||
|
|
||||||
|
async function main() {
|
||||||
|
if (!existsSync(ROOT)) {
|
||||||
|
throw new Error(
|
||||||
|
`${ROOT} not found — run \`bun run build-storybook\` first`,
|
||||||
|
);
|
||||||
|
}
|
||||||
|
const stories = await listStories(ROOT);
|
||||||
|
if (stories.length === 0)
|
||||||
|
throw new Error("no Pages/* or Shell/* stories found");
|
||||||
|
await mkdir(OUT, { recursive: true });
|
||||||
|
|
||||||
|
const server = staticServer(ROOT);
|
||||||
|
await new Promise((r) => server.listen(0, "127.0.0.1", r));
|
||||||
|
const port = server.address().port;
|
||||||
|
|
||||||
|
const browser = await chromium.launch({
|
||||||
|
args: ["--force-color-profile=srgb"],
|
||||||
|
});
|
||||||
|
const context = await browser.newContext({
|
||||||
|
viewport: { width: WIDTH, height: HEIGHT },
|
||||||
|
deviceScaleFactor: SCALE,
|
||||||
|
colorScheme: "dark",
|
||||||
|
});
|
||||||
|
|
||||||
|
let ok = 0;
|
||||||
|
for (const story of stories) {
|
||||||
|
const page = await context.newPage();
|
||||||
|
const url = `http://127.0.0.1:${port}/iframe.html?id=${encodeURIComponent(
|
||||||
|
story.id,
|
||||||
|
)}&viewMode=story`;
|
||||||
|
try {
|
||||||
|
await page.goto(url, { waitUntil: "networkidle", timeout: 30_000 });
|
||||||
|
// Story root mounted with real content.
|
||||||
|
await page.waitForSelector("#storybook-root > *", { timeout: 20_000 });
|
||||||
|
// Web fonts settled (else text reflows / falls back in the shot).
|
||||||
|
await page.evaluate(() => document.fonts.ready);
|
||||||
|
await page.waitForTimeout(SETTLE);
|
||||||
|
const file = join(OUT, `${story.id}.png`);
|
||||||
|
await page.screenshot({ path: file });
|
||||||
|
console.log(`ok ${story.id} -> ${file}`);
|
||||||
|
ok++;
|
||||||
|
} catch (e) {
|
||||||
|
console.warn(`FAIL ${story.id}: ${e.message}`);
|
||||||
|
} finally {
|
||||||
|
await page.close();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
await browser.close();
|
||||||
|
await new Promise((r) => server.close(r));
|
||||||
|
console.log(`\n${ok}/${stories.length} stories captured -> ${OUT}`);
|
||||||
|
if (ok === 0) process.exit(1);
|
||||||
|
}
|
||||||
|
|
||||||
|
main().catch((e) => {
|
||||||
|
console.error(e);
|
||||||
|
process.exit(1);
|
||||||
|
});
|
||||||
Reference in New Issue
Block a user