27 lines
1.9 KiB
TypeScript
27 lines
1.9 KiB
TypeScript
import { readFileSync } from "node:fs";
|
|
import { COMPONENT_CONTRACTS, type DesignSystem } from "../../design-system/src/index.ts";
|
|
import { renderComponent } from "../../test/src/index.ts";
|
|
import { resolveThemeConfig, renderThemeCss } from "../../styles/src/theme.ts";
|
|
import { renderDocument } from "../../ssr/src/index.ts";
|
|
import { uiCss } from "../src/registry.ts";
|
|
|
|
// SSR baseline gallery. Provider regions and empty collection states intentionally keep their defaults.
|
|
export async function catalogFixtureDocument(system: DesignSystem, mode: string, page: number) {
|
|
const entries = Object.entries(COMPONENT_CONTRACTS).slice(page * 16, (page + 1) * 16);
|
|
const cards = await Promise.all(
|
|
entries.map(async ([name, contract]) => {
|
|
const body = await renderComponent(readFileSync(contract.source, "utf8"), {});
|
|
return `<section class="sample" data-sample="${name}"><h2>${name}</h2>${body}</section>`;
|
|
}),
|
|
);
|
|
const theme = resolveThemeConfig({ designSystem: { system }, default: mode });
|
|
const query = `system=${system.id}&mode=${mode}`;
|
|
return renderDocument({
|
|
meta: { title: `${system.name} — Catalog ${page + 1}` },
|
|
htmlAttrs: ` data-theme="${mode}"`,
|
|
body: `<h1>Component catalog</h1><p>Default server-rendered states. Interactive core preview: <a href="/?${query}">open</a>.</p><nav>${Array.from({ length: 7 }, (_, i) => `<a href="/catalog?${query}&page=${i}">${i + 1}</a>`).join(" · ")}</nav><main>${cards.join("")}</main>`,
|
|
extraHead: `<style>${uiCss()}${renderThemeCss(theme)}*{box-sizing:border-box}body{margin:0;padding:24px;background:var(--wrn-color-bg);color:var(--wrn-color-text);font-family:var(--wrn-font-sans)}main{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr));gap:24px;margin-top:24px}.sample{min-width:0;overflow:auto;padding:16px;border:1px solid var(--wrn-color-border)}h2{font-size:16px}a{color:inherit}</style>`,
|
|
componentRecipeCss: theme.recipeCss,
|
|
});
|
|
}
|