@watt-ui/react 0.1.3 → 0.2.0

package/src/components/equipment-heatmap.tsx

@@ -0,0 +1,298 @@
+"use client";
+import { forwardRef, useEffect, useMemo, useRef, useState } from "react";
+import { useComposedRefs } from "@radix-ui/react-compose-refs";
+import { useVirtualizer } from "@tanstack/react-virtual";
+import { cx, part } from "../internal.js";
+import { useVirtualFocus } from "../virtual-focus.js";
+import { motionStyle } from "../motion.js";
+import type {
+  DataQuality,
+  Density,
+  EquipmentStatus,
+  MotionProps,
+} from "../types.js";
+import type { ForwardedRef, ReactElement, RefAttributes } from "react";
+
+export interface HeatmapCell {
+  id: string;
+  label: string;
+  value: number | null;
+  color?: string;
+  quality?: DataQuality;
+  status?: EquipmentStatus;
+  disabled?: boolean;
+}
+export interface EquipmentHeatmapProps<T extends HeatmapCell = HeatmapCell>
+  extends
+    Omit<React.HTMLAttributes<HTMLDivElement>, "children" | "onSelect">,
+    MotionProps {
+  cells: readonly T[];
+  columns: number;
+  children?: (
+    cell: T,
+    state: { selected: boolean; focused: boolean },
+  ) => React.ReactNode;
+  valueFormatter?: (cell: T) => string;
+  selectedId?: string | null;
+  defaultSelectedId?: string | null;
+  onSelectionChange?: (id: string) => void;
+  density?: Density;
+  cellSize?: number;
+  height?: number;
+  virtualized?: boolean;
+  empty?: React.ReactNode;
+}
+function Root<T extends HeatmapCell>(
+  {
+    cells,
+    columns,
+    children,
+    valueFormatter,
+    selectedId,
+    defaultSelectedId = null,
+    onSelectionChange,
+    density = "comfortable",
+    cellSize = density === "compact" ? 36 : 44,
+    height = 320,
+    virtualized = true,
+    empty,
+    motion,
+    style,
+    className,
+    onKeyDown,
+    ...props
+  }: EquipmentHeatmapProps<T>,
+  ref: ForwardedRef<HTMLDivElement>,
+) {
+  if (
+    !Number.isInteger(columns) ||
+    columns < 1 ||
+    !Number.isFinite(cellSize) ||
+    cellSize < 24 ||
+    !Number.isFinite(height) ||
+    height <= 0
+  )
+    throw new Error(
+      "EquipmentHeatmap requires positive columns/height and cellSize >= 24",
+    );
+  useMemo(() => {
+    const ids = new Set<string>();
+    for (const cell of cells) {
+      if (!cell.id || ids.has(cell.id))
+        throw new Error("Heatmap cell IDs must be nonempty and unique");
+      ids.add(cell.id);
+    }
+  }, [cells]);
+  const host = useRef<HTMLDivElement>(null);
+  const hostRef = useComposedRefs(host, ref);
+  const [internal, setInternal] = useState(defaultSelectedId);
+  const selected = selectedId === undefined ? internal : selectedId;
+  const [focused, setFocused] = useState(0);
+  const count = Math.ceil(cells.length / columns);
+  const rowHeight = cellSize + 4;
+  const virtualizer = useVirtualizer({
+    count,
+    getScrollElement: () => host.current,
+    estimateSize: () => rowHeight,
+    initialRect: { width: 0, height },
+    overscan: 3,
+    enabled: virtualized,
+  });
+  useEffect(() => {
+    virtualizer.measure();
+  }, [virtualizer, rowHeight]);
+  const focus = useVirtualFocus(host, (index) =>
+    virtualizer.scrollToIndex(Math.floor(index / columns), { align: "auto" }),
+  );
+  const rows = virtualized
+    ? virtualizer.getVirtualItems()
+    : Array.from({ length: count }, (_, index) => ({
+        index,
+        start: index * rowHeight,
+      }));
+  const mounted = rows.flatMap((row) =>
+    Array.from(
+      { length: Math.min(columns, cells.length - row.index * columns) },
+      (_, offset) => row.index * columns + offset,
+    ),
+  );
+  const tabIndex =
+    mounted.includes(focused) && !cells[focused]?.disabled
+      ? focused
+      : mounted.find((index) => !cells[index]?.disabled);
+  return (
+    <div
+      {...props}
+      ref={hostRef}
+      role={cells.length ? "grid" : "group"}
+      aria-rowcount={cells.length ? count : undefined}
+      aria-colcount={cells.length ? columns : undefined}
+      tabIndex={
+        props.tabIndex ??
+        (cells.length && tabIndex === undefined ? 0 : undefined)
+      }
+      data-slot="equipment-heatmap"
+      data-density={density}
+      className={cx("watt-root relative overflow-auto", className)}
+      style={{
+        height:
+          virtualized && cells.length
+            ? Math.min(height, Math.max(rowHeight, count * rowHeight))
+            : undefined,
+        ...style,
+        ...motionStyle(motion),
+      }}
+      onKeyDown={(event) => {
+        onKeyDown?.(event);
+        if (event.defaultPrevented || !cells.length) return;
+        const index = Number(
+          (event.target as HTMLElement).closest<HTMLElement>(
+            "[data-focus-index]",
+          )?.dataset.focusIndex ?? focused,
+        );
+        if (!Number.isInteger(index)) return;
+        let next: number;
+        switch (event.key) {
+          case "ArrowRight":
+            next = index + 1;
+            break;
+          case "ArrowLeft":
+            next = index - 1;
+            break;
+          case "ArrowDown":
+            next = index + columns;
+            break;
+          case "ArrowUp":
+            next = index - columns;
+            break;
+          case "Home":
+            next =
+              event.ctrlKey || event.metaKey
+                ? 0
+                : Math.floor(index / columns) * columns;
+            break;
+          case "End":
+            next =
+              event.ctrlKey || event.metaKey
+                ? cells.length - 1
+                : Math.min(
+                    cells.length - 1,
+                    (Math.floor(index / columns) + 1) * columns - 1,
+                  );
+            break;
+          default:
+            return;
+        }
+        event.preventDefault();
+        next = Math.max(0, Math.min(cells.length - 1, next));
+        const step = next >= index ? 1 : -1;
+        while (next >= 0 && next < cells.length && cells[next]?.disabled)
+          next += step;
+        if (!cells[next]) return;
+        setFocused(next);
+        focus(next);
+      }}
+    >
+      {!cells.length ? (
+        empty
+      ) : (
+        <div
+          role="rowgroup"
+          style={{
+            position: "relative",
+            height: virtualized ? virtualizer.getTotalSize() : undefined,
+            minWidth: columns * (cellSize + 4) - 4,
+          }}
+        >
+          {rows.map((row) => (
+            <div
+              role="row"
+              key={row.index}
+              aria-rowindex={row.index + 1}
+              style={{
+                display: "grid",
+                gridTemplateColumns: `repeat(${columns}, minmax(0, 1fr))`,
+                gap: 4,
+                height: cellSize,
+                marginBottom: 4,
+                ...(virtualized
+                  ? {
+                      position: "absolute",
+                      top: 0,
+                      left: 0,
+                      width: "100%",
+                      transform: `translateY(${row.start}px)`,
+                    }
+                  : {}),
+              }}
+            >
+              {cells
+                .slice(row.index * columns, (row.index + 1) * columns)
+                .map((cell, offset) => {
+                  const index = row.index * columns + offset;
+                  const valid =
+                    cell.value !== null && Number.isFinite(cell.value);
+                  const text =
+                    valueFormatter?.(cell) ??
+                    (valid ? String(cell.value) : "—");
+                  return (
+                    <button
+                      key={cell.id}
+                      type="button"
+                      role="gridcell"
+                      aria-colindex={offset + 1}
+                      aria-selected={selected === cell.id}
+                      aria-label={[
+                        cell.label,
+                        valid ? text : "Unavailable",
+                        cell.quality,
+                        cell.status,
+                      ]
+                        .filter(Boolean)
+                        .join(", ")}
+                      disabled={cell.disabled}
+                      tabIndex={index === tabIndex ? 0 : -1}
+                      data-focus-index={index}
+                      data-slot="equipment-heatmap-cell"
+                      data-selected={selected === cell.id || undefined}
+                      data-quality={cell.quality}
+                      data-status={cell.status}
+                      className="watt-motion watt-heatmap-cell rounded-sm border border-[var(--watt-border)] text-xs outline-offset-[-2px] focus-visible:outline-2 focus-visible:outline-[var(--watt-accent)]"
+                      style={{
+                        backgroundColor: valid
+                          ? (cell.color ?? "var(--watt-subtle)")
+                          : "var(--watt-subtle)",
+                        minWidth: cellSize,
+                        height: cellSize,
+                      }}
+                      onFocus={() => setFocused(index)}
+                      onClick={() => {
+                        if (selectedId === undefined) setInternal(cell.id);
+                        onSelectionChange?.(cell.id);
+                      }}
+                    >
+                      {children
+                        ? children(cell, {
+                            selected: selected === cell.id,
+                            focused: focused === index,
+                          })
+                        : text}
+                    </button>
+                  );
+                })}
+            </div>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}
+export const EquipmentHeatmap = {
+  Root: forwardRef(Root) as <T extends HeatmapCell>(
+    props: EquipmentHeatmapProps<T> & RefAttributes<HTMLDivElement>,
+  ) => ReactElement,
+  Legend: part(
+    "equipment-heatmap-legend",
+    "flex flex-wrap items-center gap-4 text-xs text-[var(--watt-muted)]",
+  ),
+};

package/src/components/equipment-table.tsx

@@ -0,0 +1,302 @@
+"use client";
+import { forwardRef, useEffect, useMemo, useRef, useState } from "react";
+import { useComposedRefs } from "@radix-ui/react-compose-refs";
+import { useVirtualizer } from "@tanstack/react-virtual";
+import { ArrowDown, ArrowUp } from "lucide-react";
+import { cx } from "../internal.js";
+import { MotionProvider, motionStyle } from "../motion.js";
+import { useVirtualFocus } from "../virtual-focus.js";
+import type { Density, MotionProps } from "../types.js";
+import type { ForwardedRef, ReactElement, RefAttributes } from "react";
+export interface EquipmentColumn<T> {
+  id: string;
+  header: React.ReactNode;
+  cell: (item: T) => React.ReactNode;
+  width?: string;
+  sortable?: boolean;
+}
+export interface TableSort {
+  columnId: string;
+  direction: "ascending" | "descending";
+}
+export interface EquipmentTableProps<T extends { id: string }>
+  extends
+    Omit<React.HTMLAttributes<HTMLDivElement>, "children" | "onSelect">,
+    MotionProps {
+  items: readonly T[];
+  columns: readonly EquipmentColumn<T>[];
+  sort?: TableSort;
+  onSortChange?: (sort: TableSort) => void;
+  selectedId?: string | null;
+  onRowSelect?: (item: T) => void;
+  density?: Density;
+  height?: number;
+  rowHeight?: number;
+  virtualized?: boolean;
+  empty?: React.ReactNode;
+}
+function Root<T extends { id: string }>(
+  {
+    items,
+    columns,
+    sort,
+    onSortChange,
+    selectedId,
+    onRowSelect,
+    density = "comfortable",
+    height = 360,
+    rowHeight = density === "compact" ? 36 : 48,
+    virtualized = true,
+    empty,
+    motion,
+    style,
+    className,
+    onKeyDown,
+    ...props
+  }: EquipmentTableProps<T>,
+  ref: ForwardedRef<HTMLDivElement>,
+) {
+  if (
+    !Number.isFinite(height) ||
+    height <= 0 ||
+    !Number.isFinite(rowHeight) ||
+    rowHeight < 24
+  )
+    throw new Error(
+      "EquipmentTable requires a positive height and rowHeight >= 24",
+    );
+  useMemo(() => {
+    for (const list of [items, columns]) {
+      const ids = new Set<string>();
+      for (const item of list) {
+        if (!item.id || ids.has(item.id))
+          throw new Error(
+            "EquipmentTable row and column IDs must be nonempty and unique",
+          );
+        ids.add(item.id);
+      }
+    }
+    if (!columns.length)
+      throw new Error("EquipmentTable needs at least one column");
+  }, [items, columns]);
+  const host = useRef<HTMLDivElement>(null);
+  const hostRef = useComposedRefs(host, ref);
+  const [focused, setFocused] = useState(0);
+  const virtualizer = useVirtualizer({
+    count: items.length,
+    getScrollElement: () => host.current,
+    estimateSize: () => rowHeight,
+    initialRect: { width: 0, height },
+    overscan: 5,
+    enabled: virtualized,
+    getItemKey: (index) => items[index]!.id,
+    scrollMargin: rowHeight,
+  });
+  useEffect(() => {
+    virtualizer.measure();
+  }, [virtualizer, rowHeight]);
+  const focus = useVirtualFocus(host, (index) =>
+    virtualizer.scrollToIndex(index, { align: "auto" }),
+  );
+  const rows = virtualized
+    ? virtualizer.getVirtualItems()
+    : items.map((item, index) => ({
+        key: item.id,
+        index,
+        start: index * rowHeight,
+      }));
+  const tabIndex = rows.some((row) => row.index === focused)
+    ? focused
+    : rows[0]?.index;
+  const gridTemplateColumns = columns
+    .map((column) => column.width ?? "minmax(140px, 1fr)")
+    .join(" ");
+  return (
+    <MotionProvider motion={motion}>
+      <div
+        {...props}
+        ref={hostRef}
+        role={onRowSelect ? "grid" : "table"}
+        tabIndex={
+          props.tabIndex ?? (!onRowSelect || !items.length ? 0 : undefined)
+        }
+        aria-rowcount={items.length + 1}
+        aria-colcount={columns.length}
+        data-slot="equipment-table"
+        data-density={density}
+        className={cx("watt-root relative overflow-auto text-sm", className)}
+        style={{ maxHeight: height, ...style, ...motionStyle(motion) }}
+        onKeyDown={(event) => {
+          onKeyDown?.(event);
+          if (
+            event.defaultPrevented ||
+            !onRowSelect ||
+            event.target !== event.currentTarget.ownerDocument.activeElement
+          )
+            return;
+          const target = event.target as HTMLElement;
+          if (target.dataset.slot !== "equipment-table-row") return;
+          const index = Number(target.dataset.focusIndex);
+          let next: number;
+          switch (event.key) {
+            case "ArrowDown":
+              next = Math.min(items.length - 1, index + 1);
+              break;
+            case "ArrowUp":
+              next = Math.max(0, index - 1);
+              break;
+            case "Home":
+              next = 0;
+              break;
+            case "End":
+              next = items.length - 1;
+              break;
+            case "Enter":
+            case " ":
+              event.preventDefault();
+              onRowSelect(items[index]!);
+              return;
+            default:
+              return;
+          }
+          event.preventDefault();
+          setFocused(next);
+          focus(next);
+        }}
+      >
+        <div
+          role="rowgroup"
+          className="sticky top-0 z-10 bg-[var(--watt-surface)]"
+        >
+          <div
+            role="row"
+            aria-rowindex={1}
+            style={{
+              display: "grid",
+              gridTemplateColumns,
+              minWidth: "max-content",
+              minHeight: rowHeight,
+            }}
+          >
+            {columns.map((column) => (
+              <div
+                key={column.id}
+                role="columnheader"
+                aria-sort={
+                  column.sortable
+                    ? sort?.columnId === column.id
+                      ? sort.direction
+                      : "none"
+                    : undefined
+                }
+                className="flex items-center border-b border-[var(--watt-border)] px-3 font-medium"
+              >
+                {column.sortable && onSortChange ? (
+                  <button
+                    type="button"
+                    className="watt-choice inline-flex min-h-9 items-center gap-2 rounded-sm text-left focus-visible:outline-2 focus-visible:outline-[var(--watt-accent)]"
+                    onClick={() =>
+                      onSortChange({
+                        columnId: column.id,
+                        direction:
+                          sort?.columnId === column.id &&
+                          sort.direction === "ascending"
+                            ? "descending"
+                            : "ascending",
+                      })
+                    }
+                  >
+                    {column.header}
+                    {sort?.columnId === column.id &&
+                      (sort.direction === "ascending" ? (
+                        <ArrowUp size={14} />
+                      ) : (
+                        <ArrowDown size={14} />
+                      ))}
+                  </button>
+                ) : (
+                  column.header
+                )}
+              </div>
+            ))}
+          </div>
+        </div>
+        {!items.length ? (
+          empty
+        ) : (
+          <div
+            role="rowgroup"
+            style={{
+              position: "relative",
+              height: virtualized ? virtualizer.getTotalSize() : undefined,
+            }}
+          >
+            {rows.map((row) => {
+              const item = items[row.index]!;
+              return (
+                <div
+                  role="row"
+                  key={item.id}
+                  aria-rowindex={row.index + 2}
+                  data-slot="equipment-table-row"
+                  aria-selected={
+                    onRowSelect ? selectedId === item.id : undefined
+                  }
+                  data-focus-index={row.index}
+                  data-selected={selectedId === item.id || undefined}
+                  tabIndex={
+                    onRowSelect ? (tabIndex === row.index ? 0 : -1) : undefined
+                  }
+                  className="watt-motion border-b border-[var(--watt-border)] last:border-0 outline-offset-[-2px] data-[selected]:bg-[var(--watt-subtle)] focus-visible:outline-2 focus-visible:outline-[var(--watt-accent)]"
+                  style={{
+                    display: "grid",
+                    gridTemplateColumns,
+                    minWidth: "max-content",
+                    height: rowHeight,
+                    ...(virtualized
+                      ? {
+                          position: "absolute",
+                          top: 0,
+                          left: 0,
+                          width: "100%",
+                          transform: `translateY(${row.start - rowHeight}px)`,
+                        }
+                      : {}),
+                  }}
+                  onFocus={(event) => {
+                    if (event.target === event.currentTarget)
+                      setFocused(row.index);
+                  }}
+                  onClick={(event) => {
+                    if (
+                      (event.target as HTMLElement).closest(
+                        "button,a,input,select,textarea",
+                      )
+                    )
+                      return;
+                    onRowSelect?.(item);
+                  }}
+                >
+                  {columns.map((column) => (
+                    <div
+                      role={onRowSelect ? "gridcell" : "cell"}
+                      key={column.id}
+                      className="flex min-w-0 items-center overflow-hidden px-3"
+                    >
+                      {column.cell(item)}
+                    </div>
+                  ))}
+                </div>
+              );
+            })}
+          </div>
+        )}
+      </div>
+    </MotionProvider>
+  );
+}
+export const EquipmentTable = {
+  Root: forwardRef(Root) as <T extends { id: string }>(
+    props: EquipmentTableProps<T> & RefAttributes<HTMLDivElement>,
+  ) => ReactElement,
+};

package/src/components/metric-trend.tsx

@@ -0,0 +1,87 @@
+"use client";
+import { createContext, forwardRef, useContext } from "react";
+import { ArrowUpRight, ArrowDownRight, ArrowRight } from "lucide-react";
+import { Slot } from "@radix-ui/react-slot";
+import { cx, part } from "../internal.js";
+import { MotionProvider, motionStyle } from "../motion.js";
+import { PowerMetric, type MetricValueProps } from "./power-metric.js";
+import type { RootProps, MotionProps, PartProps } from "../types.js";
+export interface MetricTrendProps extends RootProps, MotionProps {
+  direction: "up" | "down" | "flat";
+  tone?: "neutral" | "positive" | "warning" | "critical";
+}
+const Context = createContext<MetricTrendProps["direction"]>("flat");
+export const MetricTrend = {
+  Root: forwardRef<HTMLElement, MetricTrendProps>(function MetricTrendRoot(
+    {
+      direction,
+      tone = "neutral",
+      density = "comfortable",
+      motion,
+      style,
+      asChild,
+      className,
+      ...props
+    },
+    ref,
+  ) {
+    const Component = asChild ? Slot : "span";
+    return (
+      <MotionProvider motion={motion}>
+        <Context.Provider value={direction}>
+          <Component
+            {...props}
+            ref={ref as never}
+            data-slot="metric-trend"
+            data-direction={direction}
+            data-tone={tone}
+            data-density={density}
+            style={{ ...style, ...motionStyle(motion) }}
+            className={cx(
+              "watt-root inline-flex items-center gap-1.5 text-sm data-[tone=positive]:text-[var(--watt-positive)] data-[tone=warning]:text-[var(--watt-warning)] data-[tone=critical]:text-[var(--watt-critical)] data-[density=compact]:text-xs",
+              className,
+            )}
+          />
+        </Context.Provider>
+      </MotionProvider>
+    );
+  }),
+  Indicator: forwardRef<HTMLElement, PartProps>(function TrendIndicator(
+    { asChild, children, ...props },
+    ref,
+  ) {
+    const direction = useContext(Context);
+    const Icon =
+      direction === "up"
+        ? ArrowUpRight
+        : direction === "down"
+          ? ArrowDownRight
+          : ArrowRight;
+    const Component = asChild ? Slot : "span";
+    return (
+      <Component
+        {...props}
+        ref={ref as never}
+        data-slot="metric-trend-indicator"
+      >
+        {children ?? <Icon size={16} aria-hidden="true" />}
+      </Component>
+    );
+  }),
+  Value: forwardRef<HTMLElement, MetricValueProps>(function TrendValue(
+    { className, ...props },
+    ref,
+  ) {
+    return (
+      <PowerMetric.Value
+        {...props}
+        ref={ref}
+        className={cx(
+          "text-[length:inherit] font-medium tracking-normal",
+          className,
+        )}
+      />
+    );
+  }),
+  Label: part("metric-trend-label", "", "span"),
+};