site/parts.tsx

Functions

Imports

It imports site/data.ts. Imported by site/color-view.tsx, site/main.tsx, site/views.tsx.

Source

1// The small parts every view of the site is built from (main.tsx).
2
3import { createContext, useContext, type ReactNode } from "react";
4import { RESULTS_BUILD, type ComponentDoc, type ComponentResults, type Results } from "./data.ts";
5
6export function Panel({ title, src, flush, children, id }: { title: string; src?: ReactNode; flush?: boolean; children: ReactNode; id?: string }) {
7  return (
8    <section className="cap-panel" aria-labelledby={id ? `${id}-h` : undefined} data-flush={flush ? "" : undefined}>
9      <header className="cap-panel-head">
10        <h2 id={id ? `${id}-h` : undefined}>{title}</h2>
11        {src ? <span className="cap-panel-src">{src}</span> : null}
12      </header>
13      <div className="cap-panel-body">{children}</div>
14    </section>
15  );
16}
17
18export function Verdict({ passed, failed, none }: { passed: number; failed: number; none?: string }) {
19  if (passed + failed === 0) return <span className="cap-status" data-tone="nodata">{none ?? "Not run"}</span>;
20  if (failed) return <span className="cap-status" data-tone="crit">{`${failed} of ${passed + failed} failed`}</span>;
21  return <span className="cap-status" data-tone="ok">{`${passed} passed`}</span>;
22}
23
24export function when(iso: string | null): string {
25  if (!iso) return "never";
26  const t = new Date(iso);
27  return `${t.toLocaleString(undefined, { dateStyle: "medium", timeStyle: "short" })} (${t.toISOString().slice(0, 16).replace("T", " ")} UTC)`;
28}
29
30export const TOOL = (c: ComponentDoc) => c.tool || "Native";
31
32// Sets one CSS property through the CSSOM, never a style attribute (the apps' CSP rule,
33// kept here too).
34export const paint = (prop: string, value: string) => (el: HTMLElement | null) => {
35  el?.style.setProperty(prop, value);
36};
37
38// The test results every view reads: the build's own, replaced by the last run on main
39// once that has been read.
40export const ResultsContext = createContext<Results>(RESULTS_BUILD);
41export const useResults = () => useContext(ResultsContext);
42export function TestList({ rows }: { rows: ComponentResults["tests"] }) {
43  const sorted = [...rows].sort((a, b) => (a.status === b.status ? 0 : a.status === "failed" ? -1 : b.status === "failed" ? 1 : 0));
44  return (
45    <ul className="site-tests">
46      {sorted.map((t, i) => (
47        <li key={i} data-status={t.status}>
48          <span className="cap-status" data-tone={t.status === "passed" ? "ok" : t.status === "failed" ? "crit" : "nodata"}>
49            {t.status === "passed" ? "Passed" : t.status === "failed" ? "Failed" : "Skipped"}
50          </span>
51          <span>
52            {t.title}
53            {t.theme ? <span className="cap-muted">, {t.theme}</span> : null}
54            {t.error ? <pre className="site-code site-error">{t.error}</pre> : null}
55          </span>
56        </li>
57      ))}
58    </ul>
59  );
60}
61