@watt-ui/react 0.1.3 → 0.2.0

package/src/components/category-chart.tsx

@@ -0,0 +1,452 @@
+"use client";
+import {
+  createContext,
+  forwardRef,
+  useContext,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from "react";
+import { useComposedRefs } from "@radix-ui/react-compose-refs";
+import type { EChartsType } from "echarts/core";
+import { cx, part } from "../internal.js";
+import { MotionProvider, motionStyle, useChangeFeedback } from "../motion.js";
+import {
+  categoryOption,
+  validateCategories,
+  hasCategoryConflict,
+  type CategoryChartConfig,
+  type CategorySeries,
+} from "../chart/category-options.js";
+import type { RootProps, MotionProps } from "../types.js";
+export interface CategoryInspection {
+  index: number;
+  category: string;
+  values: { id: string; label: string; unit: string; value: number | null }[];
+}
+export interface CategoryChartProps
+  extends
+    Omit<RootProps, "asChild" | "onError">,
+    MotionProps,
+    CategoryChartConfig {
+  onReady?: (chart: EChartsType) => void;
+  onError?: (error: Error) => void;
+  events?: Readonly<
+    Record<string, (event: unknown, chart: EChartsType) => void>
+  >;
+}
+interface CategoryContext extends Omit<CategoryChartProps, "hidden"> {
+  hidden: Set<string>;
+  toggle: (id: string) => void;
+  inspection: CategoryInspection | null;
+  inspect: (index: number | null) => void;
+}
+const Context = createContext<CategoryContext | null>(null);
+function useCategory() {
+  const context = useContext(Context);
+  if (!context)
+    throw new Error("CategoryChart parts require CategoryChart.Root");
+  return context;
+}
+const Root = forwardRef<HTMLDivElement, CategoryChartProps>(
+  function CategoryRoot(
+    {
+      categories,
+      series,
+      orientation = "vertical",
+      stacked = false,
+      options,
+      events,
+      onReady,
+      onError,
+      density = "comfortable",
+      motion,
+      style,
+      className,
+      ...props
+    },
+    ref,
+  ) {
+    useMemo(
+      () => validateCategories({ categories, series }),
+      [categories, series],
+    );
+    useEffect(() => {
+      if (
+        process.env.NODE_ENV !== "production" &&
+        hasCategoryConflict({ categories, series, orientation, options })
+      )
+        console.warn(
+          "Watt CategoryChart props override conflicting ECharts data, axes, legend or tooltip options.",
+        );
+    }, [categories, series, orientation, options]);
+    const [hidden, setHidden] = useState(new Set<string>());
+    const [index, setIndex] = useState<number | null>(null);
+    const inspection: CategoryInspection | null =
+      index === null || categories[index] === undefined
+        ? null
+        : {
+            index,
+            category: categories[index]!,
+            values: series
+              .filter((s) => !hidden.has(s.id))
+              .map((s) => ({
+                id: s.id,
+                label: s.label,
+                unit: s.unit,
+                value:
+                  s.values[index] !== null && Number.isFinite(s.values[index])
+                    ? s.values[index]!
+                    : null,
+              })),
+          };
+    return (
+      <MotionProvider motion={motion}>
+        <Context.Provider
+          value={{
+            categories,
+            series,
+            orientation,
+            stacked,
+            options,
+            events,
+            onReady,
+            onError,
+            hidden,
+            toggle: (id) =>
+              setHidden((old) => {
+                const next = new Set(old);
+                if (next.has(id)) next.delete(id);
+                else next.add(id);
+                return next;
+              }),
+            inspection,
+            inspect: setIndex,
+          }}
+        >
+          <div
+            {...props}
+            ref={ref}
+            data-slot="category-chart"
+            data-density={density}
+            className={cx("watt-root min-w-0", className)}
+            style={{ ...style, ...motionStyle(motion) }}
+          />
+        </Context.Provider>
+      </MotionProvider>
+    );
+  },
+);
+export interface CategoryCanvasProps extends Omit<
+  React.HTMLAttributes<HTMLDivElement>,
+  "children"
+> {
+  height?: number;
+  previewSvg?: string;
+}
+const Canvas = forwardRef<HTMLDivElement, CategoryCanvasProps>(
+  function CategoryCanvas(
+    { height = 280, previewSvg, className, onKeyDown, ...props },
+    ref,
+  ) {
+    if (!Number.isFinite(height) || height <= 0)
+      throw new Error("CategoryChart.Canvas requires a positive height");
+    const context = useCategory();
+    const current = useRef(context);
+    current.current = context;
+    const host = useRef<HTMLDivElement>(null);
+    const hostRef = useComposedRefs(host, ref);
+    const instance = useRef<EChartsType | null>(null);
+    const render = useRef(() => {});
+    const bindings = useRef(new Map<string, (event: unknown) => void>());
+    const [ready, setReady] = useState(false);
+    const [error, setError] = useState(false);
+    useEffect(() => {
+      let alive = true,
+        frame = 0;
+      let observer: ResizeObserver | undefined,
+        theme: MutationObserver | undefined;
+      const fail = (reason: unknown) => {
+        if (!alive) return;
+        setError(true);
+        current.current.onError?.(
+          reason instanceof Error ? reason : new Error(String(reason)),
+        );
+      };
+      import("../chart/category-engine.js")
+        .then(({ initCategoryCanvas }) => {
+          if (!alive || !host.current) return;
+          const chart = initCategoryCanvas(host.current);
+          instance.current = chart;
+          let first = true;
+          render.current = () => {
+            cancelAnimationFrame(frame);
+            frame = requestAnimationFrame(() => {
+              if (!alive || !host.current) return;
+              try {
+                const styles = getComputedStyle(host.current),
+                  ctx = current.current;
+                chart.resize({ silent: true });
+                chart.setOption(
+                  categoryOption(
+                    {
+                      ...ctx,
+                      series: ctx.series.filter((s) => !ctx.hidden.has(s.id)),
+                    },
+                    {
+                      text:
+                        styles.getPropertyValue("--watt-muted").trim() ||
+                        "#64748b",
+                      border:
+                        styles.getPropertyValue("--watt-border").trim() ||
+                        "#e2e8f0",
+                      accent:
+                        styles.getPropertyValue("--watt-accent").trim() ||
+                        "#355dff",
+                    },
+                  ),
+                  { notMerge: true },
+                );
+                setReady(true);
+                setError(false);
+                if (first) {
+                  first = false;
+                  ctx.onReady?.(chart);
+                }
+              } catch (reason) {
+                fail(reason);
+              }
+            });
+          };
+          chart.on("updateAxisPointer", (event: unknown) => {
+            const axes = (
+              event as { axesInfo?: { axisDim: string; value: unknown }[] }
+            ).axesInfo;
+            const axis = axes?.find(
+              (a) =>
+                a.axisDim ===
+                (current.current.orientation === "horizontal" ? "y" : "x"),
+            );
+            const index =
+              typeof axis?.value === "number"
+                ? axis.value
+                : current.current.categories.indexOf(String(axis?.value));
+            if (index >= 0 && index < current.current.categories.length)
+              current.current.inspect(index);
+          });
+          chart.getZr().on("globalout", () => current.current.inspect(null));
+          for (const name of Object.keys(current.current.events ?? {})) {
+            const handler = (event: unknown) =>
+              current.current.events?.[name]?.(event, chart);
+            chart.on(name, handler);
+            bindings.current.set(name, handler);
+          }
+          observer = new ResizeObserver(() => render.current());
+          observer.observe(host.current);
+          theme = new MutationObserver(() => render.current());
+          for (
+            let element: HTMLElement | null = host.current.parentElement;
+            element;
+            element = element.parentElement
+          )
+            theme.observe(element, {
+              attributes: true,
+              attributeFilter: ["class", "style", "data-theme"],
+            });
+          render.current();
+        })
+        .catch(fail);
+      return () => {
+        alive = false;
+        cancelAnimationFrame(frame);
+        observer?.disconnect();
+        theme?.disconnect();
+        instance.current?.dispose();
+        instance.current = null;
+        bindings.current.clear();
+        render.current = () => {};
+      };
+    }, []);
+    useEffect(
+      () => render.current(),
+      [
+        context.categories,
+        context.series,
+        context.orientation,
+        context.stacked,
+        context.options,
+        context.hidden,
+        className,
+        props.style,
+      ],
+    );
+    const eventNames = Object.keys(context.events ?? {})
+      .sort()
+      .join("\0");
+    useEffect(() => {
+      const chart = instance.current;
+      if (!chart || !ready) return;
+      const names = new Set(eventNames ? eventNames.split("\0") : []);
+      for (const [name, handler] of bindings.current)
+        if (!names.has(name)) {
+          chart.off(name, handler);
+          bindings.current.delete(name);
+        }
+      for (const name of names)
+        if (!bindings.current.has(name)) {
+          const handler = (event: unknown) =>
+            current.current.events?.[name]?.(event, chart);
+          chart.on(name, handler);
+          bindings.current.set(name, handler);
+        }
+    }, [eventNames, ready]);
+    return (
+      <div className="relative min-w-0" style={{ height }}>
+        {!ready && previewSvg && (
+          <div
+            aria-hidden="true"
+            className="absolute inset-0"
+            dangerouslySetInnerHTML={{ __html: previewSvg }}
+          />
+        )}
+        <div
+          {...props}
+          ref={hostRef}
+          role="img"
+          tabIndex={0}
+          aria-busy={!ready && !error}
+          data-error={error || undefined}
+          data-slot="category-chart-canvas"
+          className={cx(
+            "h-full w-full outline-offset-4 focus-visible:outline-2 focus-visible:outline-[var(--watt-accent)]",
+            className,
+          )}
+          onKeyDown={(event) => {
+            onKeyDown?.(event);
+            if (event.defaultPrevented || !context.categories.length) return;
+            if (event.key === "Escape") {
+              context.inspect(null);
+              return;
+            }
+            if (
+              ![
+                "ArrowLeft",
+                "ArrowRight",
+                "ArrowUp",
+                "ArrowDown",
+                "Home",
+                "End",
+              ].includes(event.key)
+            )
+              return;
+            event.preventDefault();
+            const next =
+              event.key === "Home"
+                ? 0
+                : event.key === "End"
+                  ? context.categories.length - 1
+                  : Math.max(
+                      0,
+                      Math.min(
+                        context.categories.length - 1,
+                        (context.inspection?.index ?? -1) +
+                          (["ArrowLeft", "ArrowUp"].includes(event.key)
+                            ? -1
+                            : 1),
+                      ),
+                    );
+            context.inspect(next);
+            instance.current?.dispatchAction({
+              type: "showTip",
+              seriesIndex: 0,
+              dataIndex: next,
+            });
+          }}
+        />
+      </div>
+    );
+  },
+);
+const Legend = forwardRef<
+  HTMLDivElement,
+  Omit<React.HTMLAttributes<HTMLDivElement>, "children"> & {
+    children?: (
+      series: CategorySeries & { hidden: boolean; toggle: () => void },
+    ) => React.ReactNode;
+  }
+>(function CategoryLegend({ className, children, ...props }, ref) {
+  const context = useCategory();
+  return (
+    <div
+      {...props}
+      ref={ref}
+      data-slot="category-chart-legend"
+      className={cx("flex flex-wrap gap-4 text-sm", className)}
+    >
+      {context.series.map((series) => (
+        <span key={series.id}>
+          {children ? (
+            children({
+              ...series,
+              hidden: context.hidden.has(series.id),
+              toggle: () => context.toggle(series.id),
+            })
+          ) : (
+            <button
+              type="button"
+              aria-pressed={!context.hidden.has(series.id)}
+              className="watt-motion watt-chart-legend-toggle inline-flex items-center gap-2"
+              onClick={() => context.toggle(series.id)}
+            >
+              <span
+                className="watt-motion watt-category-marker h-2 w-2 rounded-full border border-current"
+                aria-hidden="true"
+                style={{
+                  color: series.color ?? "var(--watt-accent)",
+                  backgroundColor: context.hidden.has(series.id)
+                    ? "transparent"
+                    : "currentColor",
+                }}
+              />
+              {series.label}
+            </button>
+          )}
+        </span>
+      ))}
+    </div>
+  );
+});
+const Tooltip = forwardRef<
+  HTMLDivElement,
+  Omit<React.HTMLAttributes<HTMLDivElement>, "children"> & {
+    children: (point: CategoryInspection | null) => React.ReactNode;
+  }
+>(function CategoryTooltip({ children, className, ...props }, ref) {
+  const { inspection } = useCategory();
+  const host = useRef<HTMLDivElement>(null);
+  const hostRef = useComposedRefs(host, ref);
+  useChangeFeedback(host, inspection !== null);
+  return (
+    <div
+      {...props}
+      ref={hostRef}
+      data-slot="category-chart-tooltip"
+      aria-live={props["aria-live"] ?? "polite"}
+      aria-atomic="true"
+      className={cx("watt-motion", className)}
+    >
+      {children(inspection)}
+    </div>
+  );
+});
+export const CategoryChart = {
+  Root,
+  Canvas,
+  Legend,
+  Tooltip,
+  Description: part(
+    "category-chart-description",
+    "text-sm text-[var(--watt-muted)]",
+  ),
+};

package/src/components/energy-flow.tsx

@@ -243,6 +243,7 @@ export interface FlowEdgeProps extends EnergyFlowEdge, FlowStyle {
   className?: string;
   label?: string;
   style?: React.CSSProperties;
+  showDirection?: boolean;
 }
 function Edge({
   source,
@@ -257,6 +258,7 @@ function Edge({
   className,
   label,
   style,
+  showDirection = true,
 }: FlowEdgeProps) {
   const ctx = useFlow();
   const id = `watt-${useId().replace(/:/g, "")}`;
@@ -331,7 +333,7 @@ function Edge({
           fill="none"
           stroke="currentColor"
           strokeWidth={width}
-          markerEnd={`url(#${id})`}
+          markerEnd={showDirection ? `url(#${id})` : undefined}
           className={
             settings.type === "dash"
               ? "watt-flow-dash"

package/src/components/equipment-card.tsx

@@ -0,0 +1,46 @@
+"use client";
+import { forwardRef } 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 } from "../types.js";
+export interface EquipmentCardProps extends RootProps, MotionProps {}
+
+export const EquipmentCard = {
+  Root: forwardRef<HTMLElement, EquipmentCardProps>(function EquipmentCardRoot(
+    { asChild, density = "comfortable", motion, style, className, ...props },
+    ref,
+  ) {
+    const Component = asChild ? Slot : "section";
+    return (
+      <MotionProvider motion={motion}>
+        <Component
+          {...props}
+          ref={ref as never}
+          data-slot="equipment-card"
+          data-density={density}
+          style={{ ...style, ...motionStyle(motion) }}
+          className={cx(
+            "watt-root grid gap-4 data-[density=compact]:gap-3",
+            className,
+          )}
+        />
+      </MotionProvider>
+    );
+  }),
+  Header: part(
+    "equipment-card-header",
+    "flex items-start justify-between gap-4",
+  ),
+  Title: part("equipment-card-title", "font-medium", "span"),
+  Description: part(
+    "equipment-card-description",
+    "text-sm text-[var(--watt-muted)]",
+    "span",
+  ),
+  Content: part("equipment-card-content", "min-w-0"),
+  Footer: part(
+    "equipment-card-footer",
+    "flex flex-wrap items-center gap-4 text-sm",
+  ),
+};