@watt-ui/react 0.0.0-stage → 0.1.0

package/src/chart/options.ts

@@ -0,0 +1,178 @@
+import type { EChartsCoreOption } from "echarts/core";
+import type { PreparedSeries } from "./data.js";
+import { samplePoints } from "./data.js";
+import type { TimeRange } from "../types.js";
+export interface ChartConfig {
+  series: PreparedSeries[];
+  range?: TimeRange;
+  sampling?: "minmax" | "none";
+  timeZone: string;
+  locale?: string;
+  options?: EChartsCoreOption;
+}
+const record = (value: unknown): Record<string, unknown> =>
+  value && typeof value === "object" && !Array.isArray(value)
+    ? (value as Record<string, unknown>)
+    : {};
+const at = (value: unknown, index = 0) =>
+  record(Array.isArray(value) ? value[index] : index === 0 ? value : undefined);
+function seriesOption(value: unknown, id: string, index: number) {
+  return Array.isArray(value)
+    ? record(value.find((v) => record(v).id === id) ?? value[index])
+    : at(value, index);
+}
+export function hasManagedConflict(config: ChartConfig): boolean {
+  const o = config.options;
+  if (!o) return false;
+  const x = at(o.xAxis),
+    zoom = at(o.dataZoom),
+    tooltip = at(o.tooltip);
+  if (
+    (x.type !== undefined && x.type !== "time") ||
+    (config.range &&
+      ((x.min !== undefined && x.min !== config.range[0]) ||
+        (x.max !== undefined && x.max !== config.range[1]) ||
+        (zoom.startValue !== undefined &&
+          zoom.startValue !== config.range[0]) ||
+        (zoom.endValue !== undefined && zoom.endValue !== config.range[1])))
+  )
+    return true;
+  if (
+    at(o.legend).show === true ||
+    tooltip.showContent === true ||
+    (tooltip.trigger !== undefined && tooltip.trigger !== "axis")
+  )
+    return true;
+  return config.series.some((s, index) => {
+    const custom = seriesOption(o.series, s.id, index),
+      y = at(o.yAxis, s.axis ?? 0);
+    return (
+      "data" in custom ||
+      (custom.type !== undefined && custom.type !== "line") ||
+      custom.connectNulls === true ||
+      (custom.yAxisIndex !== undefined &&
+        custom.yAxisIndex !== (s.axis ?? 0)) ||
+      (custom.name !== undefined && custom.name !== s.label) ||
+      (y.type !== undefined && y.type !== "value") ||
+      (y.name !== undefined && y.name !== s.unit)
+    );
+  });
+}
+export function chartOption(
+  config: ChartConfig,
+  width = 800,
+  colors = { text: "#667085", border: "#e7e9ee", accent: "#355dff" },
+): EChartsCoreOption {
+  const {
+    series,
+    range,
+    sampling = "minmax",
+    timeZone,
+    locale,
+    options,
+  } = config;
+  if (
+    range &&
+    (!range.every(
+      (value) => Number.isFinite(value) && Math.abs(value) <= 8.64e15,
+    ) ||
+      range[0] >= range[1])
+  )
+    throw new Error(
+      "Chart range must contain two increasing epoch milliseconds",
+    );
+  const timeFormat = new Intl.DateTimeFormat(locale ?? "en-GB", {
+    timeZone,
+    hour: "2-digit",
+    minute: "2-digit",
+  });
+  const maxAxis = series.some((s) => s.axis === 1) ? 1 : 0;
+  const passthrough = { ...options };
+  delete passthrough.legend;
+  const x = at(options?.xAxis),
+    zoom = at(options?.dataZoom);
+  return {
+    animation: false,
+    ...passthrough,
+    grid: {
+      left: 64,
+      right: maxAxis ? 64 : 20,
+      top: 30,
+      bottom: 44,
+      ...at(options?.grid),
+    },
+    tooltip: {
+      ...at(options?.tooltip),
+      trigger: "axis",
+      showContent: false,
+      animation: false,
+    },
+    xAxis: {
+      axisLine: { lineStyle: { color: colors.border } },
+      splitLine: { show: false },
+      axisPointer: { show: true, label: { show: false } },
+      ...x,
+      type: "time",
+      ...(range ? { min: range[0], max: range[1] } : {}),
+      axisLabel: {
+        color: colors.text,
+        formatter: (time: number) => timeFormat.format(time),
+        ...record(x.axisLabel),
+      },
+    },
+    yAxis: Array.from({ length: maxAxis + 1 }, (_, axis) => {
+      const custom = at(options?.yAxis, axis);
+      return {
+        nameTextStyle: { color: colors.text },
+        splitLine: { lineStyle: { color: colors.border } },
+        scale: true,
+        ...custom,
+        type: "value",
+        name: series.find((s) => (s.axis ?? 0) === axis)?.unit ?? "",
+        axisLabel: { color: colors.text, ...record(custom.axisLabel) },
+      };
+    }),
+    dataZoom: [
+      {
+        zoomOnMouseWheel: "ctrl",
+        moveOnMouseMove: true,
+        preventDefaultMouseMove: false,
+        ...zoom,
+        type: "inside",
+        xAxisIndex: 0,
+        filterMode: "none",
+        ...(range ? { startValue: range[0], endValue: range[1] } : {}),
+      },
+    ],
+    series: series.map((s, index) => {
+      const custom = seriesOption(options?.series, s.id, index);
+      const line = record(custom.lineStyle),
+        item = record(custom.itemStyle);
+      const color =
+        s.color ?? line.color ?? (index ? "#12a594" : colors.accent);
+      return {
+        showSymbol: false,
+        clip: true,
+        ...custom,
+        id: s.id,
+        name: s.label,
+        type: "line",
+        yAxisIndex: s.axis ?? 0,
+        connectNulls: false,
+        sampling: "none",
+        lineStyle: { width: 2, ...line, color },
+        itemStyle: { ...item, color: s.color ?? item.color ?? color },
+        areaStyle:
+          s.area === undefined
+            ? custom.areaStyle
+            : s.area
+              ? { opacity: 0.08, ...record(custom.areaStyle) }
+              : undefined,
+        data:
+          sampling === "none"
+            ? s.points
+            : samplePoints(s.points, Math.max(100, width * 2), range),
+      };
+    }),
+  };
+}

package/src/components/alarm-feed.tsx

@@ -0,0 +1,126 @@
+"use client";
+import { useComposedRefs } from "@radix-ui/react-compose-refs";
+import type { ForwardedRef, RefAttributes, ReactElement } from "react";
+import { forwardRef } from "react";
+import { useVirtualizer } from "@tanstack/react-virtual";
+import { useRef } from "react";
+import { cx, part } from "../internal.js";
+import type { AlarmEvent, Density } from "../types.js";
+export interface AlarmFeedProps<T extends AlarmEvent = AlarmEvent> extends Omit<
+  React.HTMLAttributes<HTMLDivElement>,
+  "children"
+> {
+  items: readonly T[];
+  children: (item: T, index: number) => React.ReactNode;
+  density?: Density;
+  virtualized?: boolean;
+  rowHeight?: number;
+  height?: number;
+  empty?: React.ReactNode;
+}
+function Root<T extends AlarmEvent>(
+  {
+    items,
+    children,
+    density = "comfortable",
+    virtualized = false,
+    rowHeight = 80,
+    height = 400,
+    empty,
+    className,
+    style,
+    ...props
+  }: AlarmFeedProps<T>,
+  forwardedRef: ForwardedRef<HTMLDivElement>,
+) {
+  const host = useRef<HTMLDivElement>(null);
+  const hostRef = useComposedRefs(host, forwardedRef);
+  const virtualizer = useVirtualizer({
+    count: items.length,
+    initialRect: { width: 0, height: virtualized ? height : 0 },
+    getScrollElement: () => host.current,
+    estimateSize: () => rowHeight,
+    overscan: 4,
+    enabled: virtualized,
+    getItemKey: (index) => items[index]!.id,
+  });
+  const rows = virtualized
+    ? virtualizer.getVirtualItems()
+    : items.map((item, index) => ({ key: item.id, index, start: 0 }));
+  return (
+    <div
+      {...props}
+      ref={hostRef}
+      tabIndex={props.tabIndex ?? (virtualized ? 0 : undefined)}
+      data-slot="alarm-feed"
+      data-density={density}
+      className={cx("watt-root overflow-auto", className)}
+      style={{ ...(virtualized ? { height } : {}), ...style }}
+    >
+      {!items.length ? (
+        empty
+      ) : (
+        <div
+          role="list"
+          style={
+            virtualized
+              ? { height: virtualizer.getTotalSize(), position: "relative" }
+              : undefined
+          }
+        >
+          {rows.map((row) => {
+            const item = items[row.index]!;
+            return (
+              <div
+                role="listitem"
+                key={row.key}
+                data-index={row.index}
+                ref={virtualized ? virtualizer.measureElement : undefined}
+                aria-posinset={row.index + 1}
+                aria-setsize={items.length}
+                data-slot="alarm-feed-item"
+                data-severity={item.severity}
+                data-state={item.status}
+                className={cx(
+                  "border-b border-[var(--watt-border)] last:border-0",
+                  density === "compact" ? "py-2.5" : "py-4",
+                )}
+                style={
+                  virtualized
+                    ? {
+                        position: "absolute",
+                        top: 0,
+                        left: 0,
+                        width: "100%",
+                        transform: `translateY(${row.start}px)`,
+                      }
+                    : undefined
+                }
+              >
+                {children(item, row.index)}
+              </div>
+            );
+          })}
+        </div>
+      )}
+    </div>
+  );
+}
+const Severity = forwardRef<
+  HTMLSpanElement,
+  React.HTMLAttributes<HTMLSpanElement>
+>((props, ref) => (
+  <span {...props} ref={ref} data-slot="alarm-feed-severity" />
+));
+export const AlarmFeed = {
+  Root: forwardRef(Root) as <T extends AlarmEvent = AlarmEvent>(
+    props: AlarmFeedProps<T> & RefAttributes<HTMLDivElement>,
+  ) => ReactElement,
+  Severity,
+  Message: part("alarm-feed-message", "font-medium", "span"),
+  Description: part(
+    "alarm-feed-description",
+    "text-sm text-[var(--watt-muted)]",
+    "span",
+  ),
+};

package/src/components/asset-tree.tsx

@@ -0,0 +1,258 @@
+"use client";
+import { useComposedRefs } from "@radix-ui/react-compose-refs";
+import { forwardRef, useEffect, useMemo, useRef, useState } from "react";
+import { useTree } from "@headless-tree/react";
+import {
+  syncDataLoaderFeature,
+  selectionFeature,
+  hotkeysCoreFeature,
+  type ItemInstance,
+  type FeatureImplementation,
+} from "@headless-tree/core";
+import { useVirtualizer } from "@tanstack/react-virtual";
+import { cx } from "../internal.js";
+import type { ForwardedRef, RefAttributes, ReactElement } from "react";
+import type { Density, PlantAsset } from "../types.js";
+export interface AssetTreeRow<T> {
+  item: T;
+  level: number;
+  expanded: boolean;
+  selected: boolean;
+  focused: boolean;
+  hasChildren: boolean;
+  toggleExpanded: () => void;
+}
+// Include heterogeneous descendants so leaf rows do not inherit a parent's required fields.
+export type AssetTreeItem<T extends PlantAsset> =
+  | T
+  | (T extends { children?: readonly (infer C extends PlantAsset)[] }
+      ? C extends T
+        ? never
+        : AssetTreeItem<C>
+      : never);
+export interface AssetTreeProps<T extends PlantAsset = PlantAsset> extends Omit<
+  React.HTMLAttributes<HTMLDivElement>,
+  "children"
+> {
+  items: readonly T[];
+  children: (row: AssetTreeRow<AssetTreeItem<T>>) => React.ReactNode;
+  expandedIds?: string[];
+  defaultExpandedIds?: string[];
+  onExpandedChange?: (ids: string[]) => void;
+  selectedIds?: string[];
+  defaultSelectedIds?: string[];
+  onSelectionChange?: (ids: string[]) => void;
+  onActivate?: (item: AssetTreeItem<T>) => void;
+  density?: Density;
+  height?: number;
+  rowHeight?: number;
+  empty?: React.ReactNode;
+}
+const ROOT = "\u0000watt-tree-root";
+function Root<T extends PlantAsset>(
+  {
+    items,
+    children,
+    expandedIds,
+    defaultExpandedIds = [],
+    onExpandedChange,
+    selectedIds,
+    defaultSelectedIds = [],
+    onSelectionChange,
+    onActivate,
+    density = "comfortable",
+    height = 360,
+    rowHeight = density === "compact" ? 36 : 48,
+    empty,
+    className,
+    style,
+    ...props
+  }: AssetTreeProps<T>,
+  forwardedRef: ForwardedRef<HTMLDivElement>,
+) {
+  const host = useRef<HTMLDivElement>(null);
+  const indexed = useMemo(() => {
+    const map = new Map<string, AssetTreeItem<T>>();
+    const stack = [...items] as AssetTreeItem<T>[];
+    while (stack.length) {
+      const item = stack.pop()!;
+      if (!item.id || item.id === ROOT || map.has(item.id))
+        throw new Error(
+          "AssetTree IDs must be nonempty and unique, with no cycles",
+        );
+      map.set(item.id, item);
+      if (item.children)
+        for (const child of item.children)
+          stack.push(child as AssetTreeItem<T>);
+    }
+    return map;
+  }, [items]);
+  const virtualRef = useRef<ReturnType<
+    typeof useVirtualizer<HTMLDivElement, HTMLDivElement>
+  > | null>(null);
+  const focusFrame = useRef(0);
+  const virtualFocus = useMemo<FeatureImplementation>(
+    () => ({
+      key: "watt-virtual-focus",
+      treeInstance: {
+        updateDomFocus: ({ tree }) => {
+          const item = tree.getFocusedItem();
+          if (!item) return;
+          const id = item.getId();
+          const started = performance.now();
+          virtualRef.current?.scrollToIndex(item.getItemMeta().index, {
+            behavior: "instant",
+          });
+          cancelAnimationFrame(focusFrame.current);
+          const focus = () => {
+            if (tree.getFocusedItem()?.getId() !== id) return;
+            const active = document.activeElement;
+            if (
+              active &&
+              active !== document.body &&
+              !host.current?.contains(active)
+            )
+              return;
+            const element = item.getElement();
+            // Wait for the virtual row, then focus without a second native scroll that can unmount it.
+            if (element) element.focus({ preventScroll: true });
+            else if (performance.now() - started < 1000)
+              focusFrame.current = requestAnimationFrame(focus);
+          };
+          focusFrame.current = requestAnimationFrame(focus);
+        },
+      },
+    }),
+    [],
+  );
+  useEffect(() => () => cancelAnimationFrame(focusFrame.current), []);
+  const [internalExpanded, setInternalExpanded] = useState(defaultExpandedIds);
+  const [internalSelected, setInternalSelected] = useState(defaultSelectedIds);
+  const tree = useTree<AssetTreeItem<T>>({
+    rootItemId: ROOT,
+    getItemName: (item) => item.getItemData().label,
+    isItemFolder: (item) => !!item.getItemData().children?.length,
+    dataLoader: {
+      getItem: (id) => indexed.get(id)!,
+      getChildren: (id) =>
+        id === ROOT
+          ? items.map((item) => item.id)
+          : (indexed.get(id)?.children?.map((item) => item.id) ?? []),
+    },
+    state: {
+      expandedItems: expandedIds ?? internalExpanded,
+      selectedItems: selectedIds ?? internalSelected,
+    },
+    setExpandedItems: (updater) => {
+      const next =
+        typeof updater === "function"
+          ? updater(tree.getState().expandedItems)
+          : updater;
+      if (expandedIds === undefined) setInternalExpanded(next);
+      onExpandedChange?.(next);
+    },
+    setSelectedItems: (updater) => {
+      const next =
+        typeof updater === "function"
+          ? updater(tree.getState().selectedItems)
+          : updater;
+      if (selectedIds === undefined) setInternalSelected(next);
+      onSelectionChange?.(next);
+    },
+    onPrimaryAction: (item) => onActivate?.(item.getItemData()),
+    scrollToItem: (item) =>
+      virtualRef.current?.scrollToIndex(item.getItemMeta().index, {
+        behavior: "instant",
+      }),
+    features: [
+      syncDataLoaderFeature,
+      selectionFeature,
+      hotkeysCoreFeature,
+      virtualFocus,
+    ],
+  });
+  useEffect(() => {
+    tree.rebuildTree();
+    const focused = tree.getState().focusedItem;
+    if (focused && !tree.getItems().some((item) => item.getId() === focused))
+      tree.applySubStateUpdate("focusedItem", null);
+  }, [items, expandedIds, tree]);
+  const visible = tree.getItems();
+  const virtualizer = useVirtualizer<HTMLDivElement, HTMLDivElement>({
+    count: visible.length,
+    getScrollElement: () => host.current,
+    estimateSize: () => rowHeight,
+    overscan: 5,
+    initialRect: { width: 0, height },
+    getItemKey: (index) => visible[index]!.getId(),
+  });
+  virtualRef.current = virtualizer;
+  const containerProps = tree.getContainerProps(props["aria-label"]);
+  const hostRef = useComposedRefs(host, tree.registerElement, forwardedRef);
+  const renderRow = (
+    item: ItemInstance<AssetTreeItem<T>>,
+    index: number,
+    start: number,
+  ) => {
+    const rowProps = item.getProps();
+    return (
+      <div
+        {...rowProps}
+        aria-label={undefined}
+        key={item.getId()}
+        data-slot="asset-tree-row"
+        data-index={index}
+        data-selected={item.isSelected() || undefined}
+        className="absolute top-0 left-0 flex w-full items-center border-b border-[var(--watt-border)] outline-offset-[-2px] data-[selected]:bg-[var(--watt-subtle)] focus-visible:outline-2 focus-visible:outline-[var(--watt-accent)]"
+        style={{
+          height: rowHeight,
+          paddingInlineStart: item.getItemMeta().level * 20,
+          transform: `translateY(${start}px)`,
+        }}
+      >
+        {children({
+          item: item.getItemData(),
+          level: item.getItemMeta().level,
+          expanded: item.isExpanded(),
+          selected: item.isSelected(),
+          focused: item.isFocused(),
+          hasChildren: item.isFolder(),
+          toggleExpanded: () =>
+            item.isExpanded() ? item.collapse() : item.expand(),
+        })}
+      </div>
+    );
+  };
+  return (
+    <div
+      {...containerProps}
+      {...props}
+      ref={hostRef}
+      data-slot="asset-tree"
+      data-density={density}
+      className={cx("watt-root overflow-auto text-sm", className)}
+      style={{ height, ...style }}
+    >
+      {!items.length ? (
+        empty
+      ) : (
+        <div
+          role="presentation"
+          style={{ height: virtualizer.getTotalSize(), position: "relative" }}
+        >
+          {virtualizer.getVirtualItems().map((row) => {
+            const item = visible[row.index];
+            return item && indexed.has(item.getId())
+              ? renderRow(item, row.index, row.start)
+              : null;
+          })}
+        </div>
+      )}
+    </div>
+  );
+}
+export const AssetTree = {
+  Root: forwardRef(Root) as <T extends PlantAsset = PlantAsset>(
+    props: AssetTreeProps<T> & RefAttributes<HTMLDivElement>,
+  ) => ReactElement,
+};

package/src/components/battery-soc.tsx

@@ -0,0 +1,84 @@
+"use client";
+import { createContext, forwardRef, useContext } from "react";
+import { Slot } from "@radix-ui/react-slot";
+import { cx, part } from "../internal.js";
+import type { PartProps, RootProps, Density } from "../types.js";
+const Context = createContext<{
+  value: number | null;
+  density: Density;
+} | null>(null);
+function useSOC() {
+  const value = useContext(Context);
+  if (value === null)
+    throw new Error("BatterySOC parts require BatterySOC.Root");
+  return value;
+}
+export interface BatterySOCProps extends RootProps {
+  value: number | null;
+}
+const Root = forwardRef<HTMLElement, BatterySOCProps>(
+  ({ value, asChild, density = "comfortable", className, ...props }, ref) => {
+    const Component = asChild ? Slot : "div";
+    const valid =
+      value !== null && Number.isFinite(value) && value >= 0 && value <= 100;
+    return (
+      <Context.Provider value={{ value: valid ? value : null, density }}>
+        <Component
+          {...props}
+          ref={ref as never}
+          data-slot="battery-soc"
+          data-invalid={!valid || undefined}
+          data-density={density}
+          className={cx("watt-root flex flex-col gap-3", className)}
+        />
+      </Context.Provider>
+    );
+  },
+);
+const Track = forwardRef<HTMLElement, PartProps>(
+  ({ asChild, className, ...props }, ref) => {
+    const { value, density } = useSOC();
+    const Component = asChild ? Slot : "div";
+    return (
+      <Component
+        {...props}
+        ref={ref as never}
+        role={value === null ? "img" : "meter"}
+        aria-valuemin={value === null ? undefined : 0}
+        aria-valuemax={value === null ? undefined : 100}
+        aria-valuenow={value ?? undefined}
+        data-slot="battery-soc-track"
+        className={cx(
+          density === "compact" ? "h-2" : "h-4",
+          "overflow-hidden rounded-sm bg-[var(--watt-subtle)]",
+          className,
+        )}
+      />
+    );
+  },
+);
+const Fill = forwardRef<HTMLElement, PartProps>(
+  ({ asChild, className, style, ...props }, ref) => {
+    const { value } = useSOC();
+    const Component = asChild ? Slot : "div";
+    return (
+      <Component
+        {...props}
+        ref={ref as never}
+        aria-hidden="true"
+        data-slot="battery-soc-fill"
+        className={cx(
+          "h-full bg-[var(--watt-accent)] transition-[width] duration-500 motion-reduce:transition-none",
+          className,
+        )}
+        style={{ width: `${value ?? 0}%`, ...style }}
+      />
+    );
+  },
+);
+export const BatterySOC = {
+  Root,
+  Track,
+  Fill,
+  Label: part("battery-soc-label", "text-sm", "span"),
+};