@watt-ui/react 0.1.4 → 0.2.0

package/src/components/operating-timeline.tsx

@@ -0,0 +1,182 @@
+"use client";
+import { forwardRef, useMemo, useState } from "react";
+import { cx, part } from "../internal.js";
+import { parseTimestamp } from "../domain.js";
+import { motionStyle } from "../motion.js";
+import type { Timestamp, TimeRange, Density, MotionProps } from "../types.js";
+import type { ForwardedRef, ReactElement, RefAttributes } from "react";
+export interface TimelineTrack {
+  id: string;
+  label: React.ReactNode;
+}
+export interface TimelineEvent {
+  id: string;
+  trackId: string;
+  start: Timestamp;
+  end: Timestamp;
+  label: string;
+  color?: string;
+}
+export interface OperatingTimelineProps<T extends TimelineEvent = TimelineEvent>
+  extends
+    Omit<React.HTMLAttributes<HTMLDivElement>, "children" | "onSelect">,
+    MotionProps {
+  events: readonly T[];
+  tracks: readonly TimelineTrack[];
+  range: TimeRange;
+  timeZone: string;
+  selectedId?: string | null;
+  onEventSelect?: (event: T) => void;
+  children?: (event: T) => React.ReactNode;
+  density?: Density;
+  timeFormatter?: (timestamp: number) => string;
+  empty?: React.ReactNode;
+}
+function Root<T extends TimelineEvent>(
+  {
+    events,
+    tracks,
+    range,
+    timeZone,
+    selectedId,
+    onEventSelect,
+    children,
+    density = "comfortable",
+    timeFormatter,
+    empty,
+    motion,
+    style,
+    className,
+    ...props
+  }: OperatingTimelineProps<T>,
+  ref: ForwardedRef<HTMLDivElement>,
+) {
+  const [internal, setInternal] = useState<string | null>(null);
+  const selected = selectedId === undefined ? internal : selectedId;
+  const grouped = useMemo(() => {
+    if (
+      !Number.isFinite(range[0]) ||
+      !Number.isFinite(range[1]) ||
+      range[1] <= range[0]
+    )
+      throw new Error("OperatingTimeline requires finite start < end");
+    const groups = new Map(
+      tracks.map((track) => [
+        track.id,
+        [] as { event: T; start: number; end: number }[],
+      ]),
+    );
+    if (groups.size !== tracks.length || tracks.some((track) => !track.id))
+      throw new Error("Timeline track IDs must be nonempty and unique");
+    const ids = new Set<string>();
+    for (const event of events) {
+      const start = parseTimestamp(event.start),
+        end = parseTimestamp(event.end);
+      if (
+        !event.id ||
+        ids.has(event.id) ||
+        start === null ||
+        end === null ||
+        end < start ||
+        !groups.has(event.trackId)
+      )
+        throw new Error(
+          "Timeline events need unique IDs, a known track and valid start <= end",
+        );
+      ids.add(event.id);
+      if (end >= range[0] && start <= range[1])
+        groups.get(event.trackId)!.push({ event, start, end });
+    }
+    return groups;
+  }, [events, tracks, range]);
+  const label =
+    timeFormatter ??
+    new Intl.DateTimeFormat("en-GB", {
+      timeZone,
+      dateStyle: "short",
+      timeStyle: "short",
+      hour12: false,
+    }).format;
+  const rowHeight = density === "compact" ? 40 : 52;
+  return (
+    <div
+      {...props}
+      ref={ref}
+      data-slot="operating-timeline"
+      tabIndex={props.tabIndex ?? 0}
+      data-density={density}
+      className={cx("watt-root overflow-auto text-sm", className)}
+      style={{ ...style, ...motionStyle(motion) }}
+    >
+      <div className="min-w-[280px]">
+        <div
+          data-slot="operating-timeline-range"
+          className="mb-3 grid grid-cols-[minmax(0,1fr)_auto_minmax(0,1fr)] gap-2 pl-28 text-xs text-[var(--watt-muted)]"
+        >
+          <span>{label(range[0])}</span>
+          <span>{timeZone}</span>
+          <span className="text-right">{label(range[1])}</span>
+        </div>
+        {!events.length && empty}
+        {tracks.map((track) => (
+          <div
+            key={track.id}
+            data-slot="operating-timeline-track"
+            className="grid grid-cols-[7rem_minmax(0,1fr)] items-center border-b border-[var(--watt-border)] last:border-0"
+            style={{ minHeight: rowHeight }}
+          >
+            <span className="pr-3 text-xs">{track.label}</span>
+            <div
+              role="list"
+              aria-label={
+                typeof track.label === "string" ? track.label : track.id
+              }
+              className="relative"
+              style={{ height: rowHeight }}
+            >
+              {grouped.get(track.id)!.map(({ event, start, end }) => (
+                <div
+                  key={event.id}
+                  role="listitem"
+                  className="watt-motion watt-timeline-event absolute inset-y-2"
+                  style={{
+                    left: `clamp(0px, ${((Math.max(start, range[0]) - range[0]) / (range[1] - range[0])) * 100}%, calc(100% - 16px))`,
+                    minWidth: 16,
+                    width: `${Math.max(0.6, ((Math.min(end, range[1]) - Math.max(start, range[0])) / (range[1] - range[0])) * 100)}%`,
+                  }}
+                >
+                  <button
+                    type="button"
+                    data-slot="operating-timeline-event"
+                    data-selected={selected === event.id || undefined}
+                    aria-pressed={selected === event.id}
+                    aria-label={`${event.label}, ${label(start)}–${label(end)} ${timeZone}`}
+                    className="h-full w-full overflow-hidden rounded-sm border border-[var(--watt-border)] px-1.5 text-left text-xs whitespace-nowrap outline-offset-2 data-[selected]:outline-2 data-[selected]:outline-[var(--watt-accent)] focus-visible:outline-2 focus-visible:outline-[var(--watt-accent)]"
+                    style={{
+                      backgroundColor: event.color ?? "var(--watt-subtle)",
+                    }}
+                    onClick={() => {
+                      if (selectedId === undefined) setInternal(event.id);
+                      onEventSelect?.(event);
+                    }}
+                  >
+                    {children ? children(event) : event.label}
+                  </button>
+                </div>
+              ))}
+            </div>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}
+export const OperatingTimeline = {
+  Root: forwardRef(Root) as <T extends TimelineEvent>(
+    props: OperatingTimelineProps<T> & RefAttributes<HTMLDivElement>,
+  ) => ReactElement,
+  Legend: part(
+    "operating-timeline-legend",
+    "flex flex-wrap gap-4 text-xs text-[var(--watt-muted)]",
+  ),
+};

package/src/components/plant-fleet-map.tsx

@@ -0,0 +1,173 @@
+"use client";
+import { forwardRef, useMemo, useState } from "react";
+import { cx, part } from "../internal.js";
+import { motionStyle } from "../motion.js";
+import { landPath } from "../map/land.js";
+import type {
+  DataQuality,
+  Density,
+  EquipmentStatus,
+  MotionProps,
+} from "../types.js";
+import type { ForwardedRef, ReactElement, RefAttributes } from "react";
+export interface FleetSite {
+  id: string;
+  label: string;
+  longitude: number;
+  latitude: number;
+  status?: EquipmentStatus;
+  quality?: DataQuality;
+}
+export type MapBounds = readonly [
+  west: number,
+  south: number,
+  east: number,
+  north: number,
+];
+export interface PlantFleetMapProps<T extends FleetSite = FleetSite>
+  extends Omit<React.HTMLAttributes<HTMLDivElement>, "children">, MotionProps {
+  sites: readonly T[];
+  density?: Density;
+  bounds?: MapBounds;
+  selectedId?: string | null;
+  defaultSelectedId?: string | null;
+  onSelectionChange?: (site: T) => void;
+  children?: (site: T, selected: boolean) => React.ReactNode;
+  background?: React.ReactNode;
+  empty?: React.ReactNode;
+}
+const WORLD: MapBounds = [-180, -75, 180, 85];
+function Root<T extends FleetSite>(
+  {
+    sites,
+    bounds = WORLD,
+    selectedId,
+    defaultSelectedId = null,
+    onSelectionChange,
+    children,
+    background,
+    empty,
+    density = "comfortable",
+    motion,
+    style,
+    className,
+    ...props
+  }: PlantFleetMapProps<T>,
+  ref: ForwardedRef<HTMLDivElement>,
+) {
+  const [internal, setInternal] = useState(defaultSelectedId);
+  const selected = selectedId === undefined ? internal : selectedId;
+  const visible = useMemo(() => {
+    const [west, south, east, north] = bounds;
+    if (
+      !bounds.every(Number.isFinite) ||
+      west < -180 ||
+      east > 180 ||
+      south < -90 ||
+      north > 90 ||
+      west >= east ||
+      south >= north
+    )
+      throw new Error(
+        "Map bounds must be finite west < east and south < north within longitude/latitude limits",
+      );
+    const ids = new Set<string>();
+    for (const site of sites) {
+      if (
+        !site.id ||
+        ids.has(site.id) ||
+        !Number.isFinite(site.longitude) ||
+        Math.abs(site.longitude) > 180 ||
+        !Number.isFinite(site.latitude) ||
+        Math.abs(site.latitude) > 90
+      )
+        throw new Error(
+          "Map sites need unique IDs and valid longitude/latitude",
+        );
+      ids.add(site.id);
+    }
+    return sites.filter(
+      (site) =>
+        site.longitude >= west &&
+        site.longitude <= east &&
+        site.latitude >= south &&
+        site.latitude <= north,
+    );
+  }, [sites, bounds]);
+  return (
+    <div
+      {...props}
+      ref={ref}
+      data-slot="plant-fleet-map"
+      data-density={density}
+      className={cx(
+        "watt-root relative isolate overflow-hidden rounded-sm bg-[var(--watt-subtle)]",
+        className,
+      )}
+      style={{
+        aspectRatio: (bounds[2] - bounds[0]) / (bounds[3] - bounds[1]),
+        ...style,
+        ...motionStyle(motion),
+      }}
+    >
+      {background ?? (
+        <svg
+          aria-hidden="true"
+          className="absolute inset-0 h-full w-full"
+          preserveAspectRatio="none"
+          viewBox={`${(bounds[0] + 180) * 2} ${(90 - bounds[3]) * 2} ${(bounds[2] - bounds[0]) * 2} ${(bounds[3] - bounds[1]) * 2}`}
+        >
+          <path
+            d={landPath}
+            fill="var(--watt-surface)"
+            stroke="var(--watt-border)"
+            strokeWidth=".7"
+            vectorEffect="non-scaling-stroke"
+          />
+        </svg>
+      )}
+      {!visible.length && <div className="relative p-6 text-sm">{empty}</div>}
+      {visible.map((site) => (
+        <button
+          type="button"
+          key={site.id}
+          data-slot="plant-fleet-map-site"
+          data-selected={selected === site.id || undefined}
+          data-status={site.status}
+          data-quality={site.quality}
+          aria-label={[site.label, site.status, site.quality]
+            .filter(Boolean)
+            .join(", ")}
+          aria-pressed={selected === site.id}
+          title={site.label}
+          className="watt-motion watt-choice absolute z-10 inline-flex min-h-9 min-w-9 -translate-x-1/2 -translate-y-1/2 items-center justify-center rounded-full focus-visible:outline-2 focus-visible:outline-[var(--watt-accent)] data-[selected]:outline-2 data-[selected]:outline-[var(--watt-accent)]"
+          style={{
+            left: `${((site.longitude - bounds[0]) / (bounds[2] - bounds[0])) * 100}%`,
+            top: `${((bounds[3] - site.latitude) / (bounds[3] - bounds[1])) * 100}%`,
+          }}
+          onClick={() => {
+            if (selectedId === undefined) setInternal(site.id);
+            onSelectionChange?.(site);
+          }}
+        >
+          {children ? (
+            children(site, selected === site.id)
+          ) : (
+            <span className="watt-status" data-status={site.status}>
+              <span className="watt-status-dot" />
+            </span>
+          )}
+        </button>
+      ))}
+    </div>
+  );
+}
+export const PlantFleetMap = {
+  Root: forwardRef(Root) as <T extends FleetSite>(
+    props: PlantFleetMapProps<T> & RefAttributes<HTMLDivElement>,
+  ) => ReactElement,
+  Legend: part(
+    "plant-fleet-map-legend",
+    "flex flex-wrap gap-4 text-xs text-[var(--watt-muted)]",
+  ),
+};

package/src/components/threshold-gauge.tsx

@@ -0,0 +1,152 @@
+"use client";
+import { createContext, forwardRef, useContext } from "react";
+import { Slot } from "@radix-ui/react-slot";
+import { cx, part } from "../internal.js";
+import { MotionProvider, motionStyle } from "../motion.js";
+import type { RootProps, MotionProps, PartProps } from "../types.js";
+export interface ThresholdGaugeProps extends RootProps, MotionProps {
+  value: number | null;
+  min?: number;
+  max: number;
+  valueText?: string;
+  tone?: "neutral" | "positive" | "warning" | "critical";
+}
+interface GaugeState {
+  min: number;
+  max: number;
+  value: number | null;
+  percent: number;
+  valueText?: string;
+}
+const Context = createContext<GaugeState | null>(null);
+function useGauge() {
+  const context = useContext(Context);
+  if (!context)
+    throw new Error("ThresholdGauge parts require ThresholdGauge.Root");
+  return context;
+}
+export const ThresholdGauge = {
+  Root: forwardRef<HTMLElement, ThresholdGaugeProps>(function GaugeRoot(
+    {
+      value,
+      min = 0,
+      max,
+      valueText,
+      tone = "neutral",
+      density = "comfortable",
+      motion,
+      style,
+      asChild,
+      className,
+      ...props
+    },
+    ref,
+  ) {
+    if (!Number.isFinite(min) || !Number.isFinite(max) || max <= min)
+      throw new Error("ThresholdGauge requires finite min < max");
+    const valid =
+      value !== null && Number.isFinite(value) && value >= min && value <= max;
+    const Component = asChild ? Slot : "div";
+    return (
+      <MotionProvider motion={motion}>
+        <Context.Provider
+          value={{
+            min,
+            max,
+            value: valid ? value : null,
+            valueText,
+            percent: valid ? ((value - min) / (max - min)) * 100 : 0,
+          }}
+        >
+          <Component
+            {...props}
+            ref={ref as never}
+            data-slot="threshold-gauge"
+            data-density={density}
+            data-tone={tone}
+            data-invalid={!valid || undefined}
+            style={{ ...style, ...motionStyle(motion) }}
+            className={cx("watt-root", className)}
+          />
+        </Context.Provider>
+      </MotionProvider>
+    );
+  }),
+  Track: forwardRef<HTMLElement, PartProps>(function GaugeTrack(
+    { asChild, className, ...props },
+    ref,
+  ) {
+    const { value, min, max, valueText } = useGauge();
+    const Component = asChild ? Slot : "div";
+    return (
+      <Component
+        {...props}
+        ref={ref as never}
+        data-slot="threshold-gauge-track"
+        role={value === null ? "img" : "meter"}
+        aria-valuemin={value === null ? undefined : min}
+        aria-valuemax={value === null ? undefined : max}
+        aria-valuenow={value ?? undefined}
+        aria-valuetext={
+          value === null ? undefined : (props["aria-valuetext"] ?? valueText)
+        }
+        aria-description={
+          value === null
+            ? (props["aria-valuetext"] ?? valueText ?? "Unavailable")
+            : props["aria-description"]
+        }
+        className={cx(
+          "relative h-2.5 rounded-sm bg-[var(--watt-subtle)]",
+          className,
+        )}
+      />
+    );
+  }),
+  Fill: forwardRef<HTMLElement, PartProps>(function GaugeFill(
+    { asChild, className, style, ...props },
+    ref,
+  ) {
+    const { percent, value } = useGauge();
+    const Component = asChild ? Slot : "div";
+    return (
+      <Component
+        {...props}
+        ref={ref as never}
+        data-slot="threshold-gauge-fill"
+        aria-hidden="true"
+        className={cx(
+          "watt-motion watt-gauge-fill h-full rounded-sm bg-[var(--watt-accent)]",
+          className,
+        )}
+        style={{
+          width: `${percent}%`,
+          ...(value === null ? { transitionDuration: "0ms" } : {}),
+          ...style,
+        }}
+      />
+    );
+  }),
+  Marker: forwardRef<HTMLElement, PartProps & { value: number }>(
+    function GaugeMarker({ value, asChild, style, className, ...props }, ref) {
+      const { min, max } = useGauge();
+      if (!Number.isFinite(value) || value < min || value > max)
+        throw new Error("Gauge marker must be within min and max");
+      const Component = asChild ? Slot : "span";
+      return (
+        <Component
+          {...props}
+          ref={ref as never}
+          data-slot="threshold-gauge-marker"
+          className={cx("absolute inset-y-0 w-px bg-current", className)}
+          style={{ left: `${((value - min) / (max - min)) * 100}%`, ...style }}
+        />
+      );
+    },
+  ),
+  Label: part("threshold-gauge-label", "text-sm", "span"),
+  Description: part(
+    "threshold-gauge-description",
+    "text-sm text-[var(--watt-muted)]",
+    "span",
+  ),
+};

package/src/components/time-range-selector.tsx

@@ -0,0 +1,126 @@
+"use client";
+import { createContext, forwardRef, useContext, useId, useState } from "react";
+import { cx } from "../internal.js";
+import { motionStyle } from "../motion.js";
+import type { MotionProps, TimeRange, Density } from "../types.js";
+interface RangeContext {
+  name: string;
+  value: TimeRange | null;
+  change: (range: TimeRange | null) => void;
+}
+const Context = createContext<RangeContext | null>(null);
+function validate(range: TimeRange | null | undefined) {
+  if (
+    range &&
+    (!Number.isFinite(range[0]) ||
+      !Number.isFinite(range[1]) ||
+      range[0] >= range[1])
+  )
+    throw new Error("TimeRangeSelector requires a finite start < end");
+}
+export interface TimeRangeSelectorProps
+  extends
+    Omit<React.HTMLAttributes<HTMLDivElement>, "defaultValue">,
+    MotionProps {
+  value?: TimeRange | null;
+  defaultValue?: TimeRange | null;
+  onValueChange?: (range: TimeRange | null) => void;
+  orientation?: "horizontal" | "vertical";
+  density?: Density;
+}
+export interface TimeRangeOptionProps extends Omit<
+  React.InputHTMLAttributes<HTMLInputElement>,
+  "value" | "type" | "checked" | "defaultChecked" | "name"
+> {
+  range: TimeRange | null;
+}
+export const TimeRangeSelector = {
+  Root: forwardRef<HTMLDivElement, TimeRangeSelectorProps>(function RangeRoot(
+    {
+      value,
+      defaultValue = null,
+      onValueChange,
+      orientation = "horizontal",
+      density = "comfortable",
+      motion,
+      style,
+      className,
+      ...props
+    },
+    ref,
+  ) {
+    const name = useId();
+    const [internal, setInternal] = useState(defaultValue);
+    const current = value === undefined ? internal : value;
+    validate(current);
+    return (
+      <Context.Provider
+        value={{
+          name,
+          value: current,
+          change: (next) => {
+            if (value === undefined) setInternal(next);
+            onValueChange?.(next);
+          },
+        }}
+      >
+        <div
+          {...props}
+          ref={ref}
+          role="radiogroup"
+          aria-orientation={orientation}
+          data-slot="time-range-selector"
+          data-density={density}
+          style={{ ...style, ...motionStyle(motion) }}
+          className={cx(
+            "watt-root flex flex-wrap gap-1",
+            orientation === "vertical" && "flex-col",
+            className,
+          )}
+        />
+      </Context.Provider>
+    );
+  }),
+  Option: forwardRef<HTMLInputElement, TimeRangeOptionProps>(
+    function RangeOption(
+      { range, className, children, onChange, style, ...props },
+      ref,
+    ) {
+      const context = useContext(Context);
+      if (!context) throw new Error("TimeRangeSelector.Option requires Root");
+      validate(range);
+      const checked =
+        context.value === null
+          ? range === null
+          : range !== null &&
+            range[0] === context.value[0] &&
+            range[1] === context.value[1];
+      return (
+        <label
+          data-slot="time-range-selector-option"
+          data-checked={checked || undefined}
+          data-disabled={props.disabled || undefined}
+          style={style}
+          className={cx(
+            "watt-motion watt-choice inline-flex min-h-9 cursor-pointer items-center rounded-md px-3 py-1.5 text-sm data-[checked]:bg-[var(--watt-subtle)] data-[checked]:font-medium data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50 focus-within:outline-2 focus-within:outline-offset-2 focus-within:outline-[var(--watt-accent)]",
+            className,
+          )}
+        >
+          <input
+            {...props}
+            ref={ref}
+            type="radio"
+            name={context.name}
+            checked={checked}
+            className="sr-only"
+            onChange={(event) => {
+              onChange?.(event);
+              if (!event.defaultPrevented) context.change(range);
+            }}
+          />
+          {children}
+        </label>
+      );
+    },
+  ),
+};