components/catalog/examples.tsx

Functions

Imports

It imports components/catalog/catalog-core.ts, components/catalog/catalog.react.tsx, components/catalog/fixture.ts. No module of this repo imports it.

Source

1// Mounts the specimen: the Catalog wrapper over the fixture collection. A real site renders this on its server;
2// the specimen has no server, so it renders in the page, and answers the behaviour's fetches itself (the page's own
3// address with a query string) with the HTML a server would have sent.
4import { createRoot } from "react-dom/client";
5import { renderToString } from "react-dom/server";
6import { Catalog } from "./catalog.react.tsx";
7import { parseCatalogParams, queryCatalog } from "./catalog-core.ts";
8import { PROTOCOLS, protocolCatalog as def } from "./fixture.ts";
9
10function Demo({ id, query }: { id: string; query: string }) {
11  const result = queryCatalog(def, PROTOCOLS, parseCatalogParams(def, query));
12  return (
13    <Catalog
14      definition={{ ...def, id }}
15      result={result}
16      labelledBy={id === "wide" ? "s-wide" : "s-narrow"}
17      title={(p) => <a className="cap-table-open" href={`#${p.id}`}>{p.title}</a>}
18      cells={{ size: (p) => (p.size === null ? <span className="cap-sr-only">No data</span> : String(p.size)) }}
19      actions={<a className="cap-btn" href="#download">Download CSV</a>}
20    />
21  );
22}
23
24const original = window.fetch.bind(window);
25window.fetch = (input, init) => {
26  const url = new URL(typeof input === "string" ? input : input instanceof URL ? input.href : input.url, location.href);
27  if (url.pathname !== def.basePath) return original(input, init);
28  // The behaviour asks for the catalog whose form it holds; both demos answer.
29  const html = ["wide", "narrow"].map((id) => renderToString(<Demo id={id} query={url.search} />)).join("");
30  return Promise.resolve(new Response(`<!doctype html><body>${html}</body>`, { headers: { "content-type": "text/html" } }));
31};
32
33for (const [id, root] of [["wide", "catalog-wide"], ["narrow", "catalog-narrow"]] as const) {
34  const el = document.getElementById(root);
35  if (el) createRoot(el).render(<Demo id={id} query={location.search} />);
36}