components/admin-shell/examples.tsx

Functions

Imports

It imports components/admin-shell/admin-shell.react.tsx, components/tooltip/tooltip.ts. No module of this repo imports it.

Source

1// Mounts the admin shell specimens. Every element with data-mount="<state>" gets that state.
2import { StrictMode, useEffect, useState, type ReactNode } from "react";
3import { createRoot } from "react-dom/client";
4import { flushSync } from "react-dom";
5import { showTip } from "../tooltip/tooltip.ts";
6import { AdminShell, FAMILY_APPS, FIRST_PAGE, FOXHOUND_MARKS, startPageTransition, type AdminEntry, type AdminShellProps } from "./admin-shell.react.tsx";
7
8const svg = (d: string) => (
9  <svg className="cap-admin-icon" viewBox="0 0 24 24" aria-hidden="true" focusable="false">
10    <path d={d} />
11  </svg>
12);
13const GRID = svg("M3 3h7v7H3zM14 3h7v7h-7zM3 14h7v7H3zM14 14h7v7h-7z");
14const GLOBE = svg("M12 3a9 9 0 1 0 0 18a9 9 0 1 0 0-18zM3 12h18M12 3c3 3 3 15 0 18M12 3c-3 3-3 15 0 18");
15const ALERT = svg("M12 3l9.5 17h-19zM12 10v4M12 17h.01");
16const LIST = svg("M8 6h13M8 12h13M8 18h13M3 6h.01M3 12h.01M3 18h.01");
17const CLOCK = svg("M12 3a9 9 0 1 0 0 18a9 9 0 1 0 0-18zM12 7v5l3 3");
18const FOLDER = svg("M3 7h6l2 2h10v10H3z");
19
20const nav: AdminEntry[] = [
21  { id: "overview", label: FIRST_PAGE, href: "#overview", icon: GRID, current: true, group: "Watch" },
22  { id: "sites", label: "Sites", href: "#sites", icon: GLOBE, count: 11, group: "Watch" },
23  { id: "incidents", label: "Incidents", href: "#incidents", icon: ALERT, count: 4, countNote: "open", tone: "need", group: "Watch" },
24  { id: "queue", label: "Queue", href: "#queue", icon: LIST, count: 5, countNote: "blocked", tone: "need", group: "Work" },
25  { id: "activity", label: "Activity", href: "#activity", icon: CLOCK, count: 120, group: "Records" },
26  { id: "namespaces", label: "Namespaces", href: "#namespaces", icon: FOLDER, count: 11, group: "Records" },
27];
28
29const base: Omit<AdminShellProps, "children"> = {
30  app: "portal",
31  badges: { portal: { count: 3 }, carrel: { count: 2, countNote: "AI drafts waiting" }, germomics: { count: 1, countNote: "check failing" } },
32  nav,
33  page: FIRST_PAGE,
34  onSearch: () => undefined,
35  inbox: { count: 7, countNote: "need you", href: "#inbox" },
36  onHelp: () => undefined,
37  viewSite: "#site",
38  account: {
39    role: "Owner",
40    email: "dustin@example.test",
41    appLinks: [{ label: "Portal settings", href: "#settings" }, { label: "Keyboard shortcuts", onClick: () => undefined }],
42    onSignOut: () => undefined,
43  },
44  // Six minutes before the page was opened, so the specimen always reads "6 minutes ago".
45  updated: { at: Date.now() - 6 * 60_000, auto: true },
46  onRefresh: () => undefined,
47  refreshShortcut: "R",
48};
49
50const Page = ({ children }: { children?: ReactNode }) => (
51  <div className="cap-admin-page">
52    <h1>{FIRST_PAGE}</h1>
53    <p className="cap-muted">The page's own content sits here, and the document scrolls. {children}</p>
54  </div>
55);
56
57const key = (name: string) => `cap-admin-specimen-${name}`;
58const remember = (name: string, value: string) => {
59  try {
60    localStorage.setItem(key(name), value);
61  } catch {
62    // A blocked store: the specimen shows its default.
63  }
64};
65
66function Shell({ name, collapsed, ...rest }: { name: string; collapsed?: boolean } & Partial<AdminShellProps>) {
67  if (collapsed) remember(name, "collapsed");
68  return (
69    <AdminShell {...base} prefKey={key(name)} {...rest}>
70      <Page />
71    </AdminShell>
72  );
73}
74
75// Shows the name a hovered control would show, for the picture; the spec checks real hover and focus.
76const showName = (sel: string, i: number) => {
77  const frame = requestAnimationFrame(() => {
78    const el = document.querySelectorAll<HTMLElement>(sel)[i];
79    if (el) showTip(el);
80  });
81  return () => cancelAnimationFrame(frame);
82};
83function Tipped() {
84  useEffect(() => showName(".cap-admin-tile", 1), []);
85  return <Shell name="tip" />;
86}
87
88// Collapsed, with a menu icon's name shown, for the picture.
89function CollapsedTip() {
90  useEffect(() => showName(".cap-admin-menu a", 1), []);
91  return <Shell name="collapsed-tip" collapsed />;
92}
93
94// Opens the header's account menu, for the picture: a press with no pointer, as a key gives.
95function AccountOpen() {
96  useEffect(() => {
97    const frame = requestAnimationFrame(() => document.querySelector<HTMLButtonElement>(".cap-site-header-avatar")?.click());
98    return () => cancelAnimationFrame(frame);
99  }, []);
100  return <Shell name="account" />;
101}
102
103function SheetOpen() {
104  useEffect(() => {
105    const frame = requestAnimationFrame(() => document.querySelector<HTMLButtonElement>(".cap-site-header-menu")?.click());
106    return () => cancelAnimationFrame(frame);
107  }, []);
108  return <Shell name="phone-sheet" />;
109}
110
111// A reader's own area on a site outside the family: the user variant (no strip, the 288px menu),
112// the site's sections in the menu, a centred reading column.
113const reader: Partial<AdminShellProps> = {
114  variant: "user",
115  app: undefined,
116  title: "dustinedwards.info",
117  logo: { href: "#home", label: "dustinedwards.info", mark: FAMILY_APPS.find((a) => a.id === "info")?.logo },
118  nav: [
119    { id: "research", label: "Research", href: "#research", icon: FOLDER, current: true },
120    { id: "protocols", label: "Protocols", href: "#protocols", icon: LIST },
121    { id: "episodes", label: "Episodes", href: "#episodes", icon: CLOCK },
122  ],
123  inbox: undefined,
124  account: undefined,
125  updated: undefined,
126  onRefresh: undefined,
127  page: "Research",
128};
129
130// A customer's own dashboard (the user variant): no strip, the 288px menu, so its page starts at
131// the same x as your admin's; the business and product switchers sit in the header.
132const dashboard: Partial<AdminShellProps> = {
133  variant: "user",
134  app: undefined,
135  title: "Acme Supply Co.",
136  logo: { href: "#home", label: "Acme Supply Co.", mark: GRID },
137  badges: undefined,
138  onSearch: undefined,
139  inbox: undefined,
140  onHelp: () => undefined,
141  viewSite: undefined,
142  switchers: [
143    { id: "business", label: "Acme Supply Co.", name: "Business: Acme Supply Co.", tile: "A", sheetLabel: "Businesses", groups: [{ links: [{ label: "Acme Supply Co.", href: "#acme", current: true }, { label: "Northwind Goods", href: "#northwind" }] }] },
144    { id: "product", label: "Recovery", name: "Product: Recovery", sheetLabel: "Products", groups: [{ links: [{ label: "Console", href: "#console" }, { label: "Recovery", href: "#recovery", current: true }, { label: "Disputes", href: "#disputes" }] }] },
145  ],
146  account: { name: "Sam Rivera", initials: "SR", email: "sam@example.com", appLinks: [{ label: "Settings", href: "#settings" }, { label: "Billing", href: "#billing" }], onSignOut: () => undefined },
147};
148
149// Page transitions: the menu links and the button change the page inside startPageTransition, so
150// the content cross-fades and the strip and menu stay put.
151const PAGES = ["overview", "sites", "queue"];
152function Transitioning() {
153  const [page, setPage] = useState(0);
154  const go = (to: number) => void startPageTransition(() => flushSync(() => setPage(to)));
155  const entries = nav.map((e) => ({ ...e, current: e.id === PAGES[page] }));
156  return (
157    <AdminShell
158      {...base}
159      nav={entries}
160      page={entries.find((e) => e.current)?.label}
161      transition
162      prefKey={key("transition")}
163      renderLink={({ children, ...rest }) => (
164        <a
165          {...rest}
166          onClick={(e) => {
167            const to = PAGES.indexOf(rest.href.slice(1));
168            if (to < 0) return;
169            e.preventDefault();
170            go(to);
171          }}
172        >
173          {children}
174        </a>
175      )}
176    >
177      <div className="cap-admin-page" key={page}>
178        <h1 data-testid="page-title">{PAGES[page]}</h1>
179        <p className="cap-muted">Page {page + 1} of {PAGES.length}.</p>
180        <button type="button" className="cap-btn" onClick={() => go((page + 1) % PAGES.length)}>
181          Next page
182        </button>
183      </div>
184    </AdminShell>
185  );
186}
187
188// Foxhound's mark: today's x beside the two alternatives, for Dustin to pick from.
189function FoxhoundMarks() {
190  const today = FAMILY_APPS.find((a) => a.id === "foxhound")?.logo;
191  const options: [string, string, ReactNode][] = [["today", "Today: the favicon's x", today], ...Object.entries(FOXHOUND_MARKS).map(([k, v]): [string, string, ReactNode] => [k, k === "track" ? "Alternative: a paw print" : "Alternative: a fox's head", v])];
192  return (
193    <ul className="cap-admin-marks" style={{ display: "flex", gap: "2rem", listStyle: "none", margin: 0, padding: "1rem" }}>
194      {options.map(([id, label, logo]) => (
195        <li key={id} data-mark={id} style={{ display: "grid", justifyItems: "center", gap: ".5rem", color: "var(--text)" }}>
196          <span style={{ display: "grid", placeItems: "center", width: 56, height: 56, borderRadius: 12, background: "var(--ground)", border: "1px solid var(--line)", color: "var(--text)" }}><span style={{ display: "grid", width: 28, height: 28 }}>{logo}</span></span>
197          <span>{label}</span>
198        </li>
199      ))}
200    </ul>
201  );
202}
203
204const SPECIMENS: Record<string, () => ReactNode> = {
205  expanded: () => <Shell name="expanded" />,
206  collapsed: () => <Shell name="collapsed" collapsed />,
207  tip: () => <Tipped />,
208  "collapsed-tip": () => <CollapsedTip />,
209  trail: () => <Shell name="trail" nav={nav.map((e) => ({ ...e, current: e.id === "sites" }))} page="fieldnotes.example" trail={[{ label: "Sites", href: "#sites" }]} />,
210  account: () => <AccountOpen />,
211  reader: () => (
212    <AdminShell {...base} {...reader} prefKey={key("reader")} children={<div className="cap-admin-page" data-measure="reading"><h1>Research</h1><p>A reading column holds a comfortable line length.</p></div>} />
213  ),
214  user: () => <Shell name="user" {...dashboard} />,
215  "user-collapsed": () => <Shell name="user-collapsed" collapsed {...dashboard} />,
216  comfortable: () => (
217    <div data-density="comfortable">
218      <Shell name="comfortable" />
219    </div>
220  ),
221  transition: () => <Transitioning />,
222  // An app that passes only `app`: the strip still lists all seven, each with its real mark.
223  minimal: () => (
224    <AdminShell app="foxhound" nav={nav} page={FIRST_PAGE} prefKey={key("minimal")}>
225      <Page />
226    </AdminShell>
227  ),
228  "foxhound-marks": () => <FoxhoundMarks />,
229  phone: () => <Shell name="phone" />,
230  "phone-sheet": () => <SheetOpen />,
231  "phone-counts": () => <Shell name="phone-counts" nav={nav.map((e) => (e.id === "queue" ? { ...e, count: 120 } : e))} />,
232};
233
234for (const el of Array.from(document.querySelectorAll<HTMLElement>("[data-mount]"))) {
235  const render = SPECIMENS[el.dataset.mount ?? ""];
236  if (render) createRoot(el).render(<StrictMode>{render()}</StrictMode>);
237}