@ghxstship/xos-ui 0.0.0-stage → 4.16.0

package/src/Charts/Heatmap.tsx

@@ -0,0 +1,116 @@
+import { type ReactElement } from "react";
+import type { HeatmapProps as ReferenceHeatmapProps } from "../types/reference";
+import { cx } from "../lib/cx.ts";
+import { useT } from "../lib/context.tsx";
+import { Icon } from "../Icon/Icon.tsx";
+import { ScrollRegion } from "../Layout/Layout.tsx";
+
+export type HeatmapProps = ReferenceHeatmapProps & {
+  /** Called when a cell's button is pressed, with its row and column keys; cells are buttons only when given. */
+  onCellActivate?: (row: string, column: string) => void;
+};
+
+const STEP: Record<number, string> = {
+  0: cx("bg-bg-canvas text-text-tertiary"),
+  1: cx("bg-viz-seq-2 text-viz-ink"),
+  2: cx("bg-viz-seq-4 text-viz-ink"),
+  3: cx("bg-viz-seq-6 text-accent-text-on"),
+  4: cx("bg-viz-seq-8 text-accent-text-on"),
+};
+
+/**
+ * A numeric heatmap (B4, G-45; ADR 0143 decision 7): rows against columns as a native table, so a screen reader
+ * reads each cell with its row and column headers. Every cell shows its value as text beside its tint, and a cell
+ * over its limit carries an icon and a sentence, so the tint is never the only signal. Cells are keyed
+ * '<row>:<col>'. With `onCellActivate` each cell is a button that opens its detail.
+ */
+export function Heatmap({
+  label,
+  rowHeader,
+  rows,
+  columns,
+  cells,
+  onCellActivate,
+}: HeatmapProps): ReactElement {
+  const t = useT();
+  const th =
+    "px-8 py-6 text-text-12 font-medium text-text-secondary bg-bg-surface border-b border-e border-border-subtle";
+  return (
+    <ScrollRegion label={label}>
+      <table className="w-full border-collapse text-text-13">
+        <caption className="sr-only">{label}</caption>
+        <thead>
+          <tr>
+            <th scope="col" className={cx(th, "text-start")}>
+              {rowHeader}
+            </th>
+            {columns.map((c) => (
+              <th key={c.key} scope="col" className={cx(th, "text-center whitespace-nowrap")}>
+                {c.fullLabel && c.fullLabel !== c.label ? (
+                  <abbr title={c.fullLabel} className="no-underline">
+                    <span aria-hidden="true">{c.label}</span>
+                    <span className="sr-only">{c.fullLabel}</span>
+                  </abbr>
+                ) : (
+                  c.label
+                )}
+              </th>
+            ))}
+          </tr>
+        </thead>
+        <tbody>
+          {rows.map((r) => (
+            <tr key={r.key}>
+              <th
+                scope="row"
+                className="px-8 py-6 text-start font-medium whitespace-nowrap bg-bg-surface border-b border-e border-border-subtle"
+              >
+                {r.label}
+              </th>
+              {columns.map((c) => {
+                const cell = cells[`${r.key}:${c.key}`];
+                const step = cell?.step ?? 0;
+                const content = (
+                  <span className="inline-flex items-center justify-center gap-4 tabular-nums">
+                    {cell?.over ? <Icon name="TriangleAlert" size={12} /> : null}
+                    <span>{cell?.text ?? ""}</span>
+                    {cell?.over && !onCellActivate ? (
+                      <span className="sr-only">{cell.over}</span>
+                    ) : null}
+                  </span>
+                );
+                return (
+                  <td
+                    key={c.key}
+                    data-step={step}
+                    title={cell?.over}
+                    className={cx(
+                      "h-row-default min-w-(--space-56) p-0 text-center border-b border-e border-border-subtle",
+                      STEP[step],
+                      cell?.over &&
+                        "font-semibold ring-(length:--stroke-width-focus) ring-inset ring-danger",
+                      "forced-colors:border",
+                    )}
+                  >
+                    {onCellActivate && cell ? (
+                      <button
+                        type="button"
+                        aria-label={`${t("heatmap.cell", { row: r.label, column: c.fullLabel ?? c.label, value: cell.text })}${cell.over ? `, ${cell.over}` : ""}`}
+                        onClick={() => onCellActivate(r.key, c.key)}
+                        className="h-full w-full cursor-pointer border-0 bg-transparent px-6 text-inherit focus-visible:outline-(length:--stroke-width-focus) focus-visible:outline-accent"
+                      >
+                        {content}
+                      </button>
+                    ) : (
+                      <span className="px-6">{content}</span>
+                    )}
+                  </td>
+                );
+              })}
+            </tr>
+          ))}
+        </tbody>
+      </table>
+    </ScrollRegion>
+  );
+}

package/src/Charts/OrgChart.tsx

@@ -0,0 +1,53 @@
+import { type ReactElement } from "react";
+import type { OrgChartNode } from "../types/reference";
+import { useT } from "../lib/context.tsx";
+import { Icon } from "../Icon/Icon.tsx";
+import { Avatar } from "../Avatar/Avatar.tsx";
+import { ScrollRegion } from "../Layout/Layout.tsx";
+import { type OrgChartProps } from "./Charts.types.ts";
+
+function OrgNode({ node }: { node: OrgChartNode }) {
+  const t = useT();
+  const reports = node.reports ?? [];
+  return (
+    <li className="relative flex flex-col items-center">
+      <div className="flex items-center gap-8 px-12 py-8 whitespace-nowrap rounded-card border border-border-subtle bg-bg-raised text-text-12">
+        {node.name ? (
+          <Avatar name={node.name} />
+        ) : (
+          <span
+            aria-hidden="true"
+            className="inline-grid place-items-center size-(--ui-avatar) rounded-full bg-bg-surface text-text-secondary"
+          >
+            <Icon name="UserPlus" size={12} />
+          </span>
+        )}
+        <span className="flex flex-col">
+          <strong className="font-semibold">{node.name ?? t("org.vacant")}</strong>
+          <span className="text-text-secondary">{node.role}</span>
+          {node.code ? <span className="font-mono text-text-secondary">{node.code}</span> : null}
+        </span>
+      </div>
+      {reports.length ? (
+        <ul className="relative flex justify-center gap-16 m-0 pt-20 p-0 list-none before:absolute before:top-0 before:start-1/2 before:h-(--space-12) before:border-s before:border-border-control">
+          {reports.map((r) => (
+            <OrgNode key={`${r.name ?? ""}-${r.role}`} node={r} />
+          ))}
+        </ul>
+      ) : null}
+    </li>
+  );
+}
+
+/** Reporting lines as a nested list; vacant positions read Vacant rather than being hidden. */
+export function OrgChart({ label, root }: OrgChartProps): ReactElement {
+  return (
+    <ScrollRegion label={label}>
+      <div role="group" aria-label={label} className="w-max min-w-full">
+        <ul className="flex justify-center m-0 p-0 list-none">
+          <OrgNode node={root} />
+        </ul>
+      </div>
+    </ScrollRegion>
+  );
+}

package/src/Charts/ResourceSchedule.tsx

@@ -0,0 +1,91 @@
+import { type ReactElement } from "react";
+import { cx } from "../lib/cx.ts";
+import { useT } from "../lib/context.tsx";
+import { Icon } from "../Icon/Icon.tsx";
+import { Avatar } from "../Avatar/Avatar.tsx";
+import { StateIcon } from "../StateIcon/StateIcon.tsx";
+import { ScrollRegion } from "../Layout/Layout.tsx";
+import { type ResourceScheduleProps } from "./Charts.types.ts";
+
+/** People against days with their shifts; double bookings are flagged in place. A native table. */
+export function ResourceSchedule({ label, days, people }: ResourceScheduleProps): ReactElement {
+  const t = useT();
+  return (
+    <ScrollRegion label={label}>
+      <table className="w-full border-collapse text-text-13">
+        <caption className="pb-8 text-start font-semibold">{label}</caption>
+        <thead>
+          <tr>
+            <th
+              scope="col"
+              className="h-control-lg px-12 text-start font-medium text-text-12 text-text-secondary bg-bg-surface border-b border-border-subtle"
+            >
+              {t("resource.person")}
+            </th>
+            {days.map((d) => (
+              <th
+                key={d.key}
+                scope="col"
+                className={cx(
+                  "h-control-lg px-12 text-start font-medium text-text-12 border-b border-border-subtle",
+                  d.weekend ? "bg-bg-surface" : "bg-bg-surface",
+                )}
+              >
+                <span className="text-text-secondary">{d.dow}</span>{" "}
+                <span className="tabular-nums">{d.date}</span>
+              </th>
+            ))}
+          </tr>
+        </thead>
+        <tbody>
+          {people.map((p) => (
+            <tr key={p.name}>
+              <th
+                scope="row"
+                className="px-12 py-6 text-start font-regular border-b border-border-subtle"
+              >
+                <span className="flex items-center gap-8 whitespace-nowrap">
+                  <Avatar name={p.name} />
+                  <span className="flex flex-col">
+                    <span>{p.name}</span>
+                    <span className="text-text-secondary">{p.role}</span>
+                  </span>
+                </span>
+              </th>
+              {days.map((d) => {
+                const shifts = (p.shifts ?? []).filter((s) => s.day === d.key);
+                const clash = shifts.length > 1;
+                return (
+                  <td
+                    key={d.key}
+                    className={cx(
+                      "min-w-(--space-64) px-12 py-6 align-top border-b border-border-subtle",
+                      d.weekend && "bg-bg-surface",
+                      clash && "ring-(length:--stroke-width-focus) ring-inset ring-danger",
+                    )}
+                  >
+                    {shifts.map((s, i) => (
+                      <span
+                        key={i}
+                        className="flex items-center gap-4 mb-2 px-6 py-2 rounded-chip bg-bg-hover text-text-12"
+                      >
+                        <StateIcon state={s.state} size={12} />
+                        <span className="tabular-nums">{s.time}</span>
+                      </span>
+                    ))}
+                    {clash ? (
+                      <span className="flex items-center gap-4 text-text-11 font-medium text-danger-text">
+                        <Icon name="TriangleAlert" size={12} />
+                        {t("resource.doubleBooked")}
+                      </span>
+                    ) : null}
+                  </td>
+                );
+              })}
+            </tr>
+          ))}
+        </tbody>
+      </table>
+    </ScrollRegion>
+  );
+}

package/src/Charts/Sparkline.tsx

@@ -0,0 +1,59 @@
+import type { ReactElement } from "react";
+
+export interface SparklineProps {
+  values: (number | null)[];
+  /** Decorative unless labeled; the tile states the figure in text. */
+  label?: string;
+}
+
+const WIDTH = 96;
+const HEIGHT = 24;
+
+/** Maps `value` from [d0, d1] onto [r0, r1], as a linear scale does. */
+function linear(value: number, d0: number, d1: number, r0: number, r1: number): number {
+  return d1 === d0 ? (r0 + r1) / 2 : r0 + ((value - d0) / (d1 - d0)) * (r1 - r0);
+}
+
+/** The SVG path of a line through the values; a null value ends one run and starts the next. */
+export function sparklinePath(values: readonly (number | null)[]): string {
+  const numbers = values.filter((v): v is number => v !== null);
+  const min = Math.min(...numbers, 0);
+  const max = Math.max(...numbers, 1);
+  const last = Math.max(1, values.length - 1);
+  let path = "";
+  let drawing = false;
+  values.forEach((v, i) => {
+    if (v === null) {
+      drawing = false;
+      return;
+    }
+    const x = linear(i, 0, last, 1, WIDTH - 1);
+    const y = linear(v, min, max, HEIGHT - 2, 2);
+    path += `${drawing ? "L" : "M"}${x},${y}`;
+    drawing = true;
+  });
+  return path;
+}
+
+/**
+ * A small trend line for StatTile; decorative unless labeled. Gaps stay gaps. It draws its own
+ * path so that the list and board views that show it never load the chart library (A24-009).
+ */
+export function Sparkline({ values, label }: SparklineProps): ReactElement {
+  return (
+    <svg
+      width={WIDTH}
+      height={HEIGHT}
+      viewBox={`0 0 ${WIDTH} ${HEIGHT}`}
+      {...(label ? { role: "img", "aria-label": label } : { "aria-hidden": true })}
+    >
+      <path
+        d={sparklinePath(values)}
+        className="fill-none stroke-accent"
+        strokeWidth={1.5}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}