Diagram Kit

1import * as React from "react";
2import "./diagram.css";
3 
4/**
5 * HTML/CSS block diagrams. Real DOM, not SVG and not images: every label is
6 * selectable text, reachable by a screen reader, and reflows on mobile.
7 */
8 
9export interface DgmProps {
10  children: React.ReactNode;
11  minWidth?: number;
12  live?: boolean;
13}
14 
15export function Dgm({ children, minWidth, live }: DgmProps) {
16  return (
17    <div
18      className="moco-dgm"
19      style={minWidth ? { minWidth } : undefined}
20      role="group"
21      aria-live={live ? "polite" : undefined}
22    >
23      {children}
24    </div>
25  );
26}
27 
28export interface DgmRowProps {
29  label?: string;
30  children: React.ReactNode;
31  note?: React.ReactNode;
32}
33 
34export function DgmRow({ label, children, note }: DgmRowProps) {
35  return (
36    <>
37      <div className="moco-dgm-row">
38        <div className="moco-dgm-row-label">{label}</div>
39        <div className="moco-dgm-track">{children}</div>
40      </div>
41      {note ? (
42        <div className="moco-dgm-row" style={{ marginTop: "-0.7rem" }}>
43          <div />
44          <div className="moco-dgm-note">{note}</div>
45        </div>
46      ) : null}
47    </>
48  );
49}
50 
51export type BlockVariant = "default" | "active" | "dashed" | "warn" | "ghost";
52 
53export interface DgmBlockProps {
54  label: React.ReactNode;
55  sub?: React.ReactNode;
56  variant?: BlockVariant;
57  tip?: string;
58  grow?: number;
59  id?: string;
60}
61 
62export function DgmBlock({
63  label,
64  sub,
65  variant = "default",
66  tip,
67  grow = 1,
68  id,
69}: DgmBlockProps) {
70  return (
71    <div
72      id={id}
73      className="moco-dgm-block"
74      data-variant={variant}
75      style={{ flexGrow: grow }}
76      tabIndex={tip ? 0 : undefined}
77      title={tip}
78    >
79      <span className="moco-b-label">{label}</span>
80      {sub ? <span className="moco-b-sub">{sub}</span> : null}
81      {tip ? <span className="moco-dgm-tip">{tip}</span> : null}
82    </div>
83  );
84}
85 
86export function DgmDiamond({ label }: { label?: string }) {
87  return (
88    <span
89      style={{ display: "inline-flex", alignItems: "center", flex: "none" }}
90      aria-label={label ? `marker: ${label}` : "marker"}
91    >
92      <span className="moco-dgm-diamond" />
93      {label ? (
94        <span style={{ fontSize: 11.5, color: "var(--moco-faint)" }}>{label}</span>
95      ) : null}
96    </span>
97  );
98}
99 
100export interface DgmBracketProps {
101  children: React.ReactNode;
102  /** How many block-widths the bracket covers. */
103  span?: number;
104  /** How many block-widths to skip before it starts. */
105  offset?: number;
106// … truncated