@vllnt/ui 0.2.1 → 0.3.0-canary.f3cafe8

package/dist/components/interactive-timeline/interactive-timeline.js

@@ -0,0 +1,724 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import {
+  createContext,
+  forwardRef,
+  useCallback,
+  useContext,
+  useId,
+  useMemo,
+  useRef,
+  useState,
+  useSyncExternalStore
+} from "react";
+import { cn } from "../../lib/utils";
+const MIN_ZOOM = 1;
+const MAX_ZOOM = 32;
+const ZOOM_STEP = 2;
+const MS_PER_DAY = 864e5;
+const TICK_TARGET_PX = 120;
+const COLOR_PALETTE = {
+  amber: {
+    bar: "bg-amber-500/80",
+    chip: "border-amber-400 text-amber-700 dark:text-amber-300",
+    chipActive: "bg-amber-500 text-white border-amber-500",
+    dot: "border-amber-500 bg-amber-500"
+  },
+  blue: {
+    bar: "bg-blue-500/80",
+    chip: "border-blue-400 text-blue-700 dark:text-blue-300",
+    chipActive: "bg-blue-500 text-white border-blue-500",
+    dot: "border-blue-500 bg-blue-500"
+  },
+  emerald: {
+    bar: "bg-emerald-500/80",
+    chip: "border-emerald-400 text-emerald-700 dark:text-emerald-300",
+    chipActive: "bg-emerald-500 text-white border-emerald-500",
+    dot: "border-emerald-500 bg-emerald-500"
+  },
+  neutral: {
+    bar: "bg-muted-foreground/70",
+    chip: "border-border text-muted-foreground",
+    chipActive: "bg-foreground text-background border-foreground",
+    dot: "border-muted-foreground bg-muted-foreground"
+  },
+  purple: {
+    bar: "bg-purple-500/80",
+    chip: "border-purple-400 text-purple-700 dark:text-purple-300",
+    chipActive: "bg-purple-500 text-white border-purple-500",
+    dot: "border-purple-500 bg-purple-500"
+  },
+  red: {
+    bar: "bg-red-500/80",
+    chip: "border-red-400 text-red-700 dark:text-red-300",
+    chipActive: "bg-red-500 text-white border-red-500",
+    dot: "border-red-500 bg-red-500"
+  },
+  rose: {
+    bar: "bg-rose-500/80",
+    chip: "border-rose-400 text-rose-700 dark:text-rose-300",
+    chipActive: "bg-rose-500 text-white border-rose-500",
+    dot: "border-rose-500 bg-rose-500"
+  }
+};
+const DEFAULT_LABELS = {
+  region: "Interactive timeline",
+  today: "Jump to today",
+  zoomIn: "Zoom in",
+  zoomOut: "Zoom out"
+};
+const TimelineContext = createContext(null);
+function useTimelineContext() {
+  const ctx = useContext(TimelineContext);
+  if (!ctx) {
+    throw new Error("InteractiveTimeline subcomponent used outside its root.");
+  }
+  return ctx;
+}
+function clamp(value, min, max) {
+  return Math.min(Math.max(value, min), max);
+}
+function dateToOffset(date, start, span) {
+  if (span <= 0) return 0;
+  return (date.getTime() - start) / span;
+}
+function formatDate(date) {
+  return date.toLocaleDateString(void 0, {
+    day: "2-digit",
+    month: "short",
+    year: "numeric"
+  });
+}
+function dayCount(start, end) {
+  return Math.max(1, Math.round((end - start) / MS_PER_DAY));
+}
+function buildTicks(start, end, containerWidth) {
+  if (containerWidth <= 0) return [];
+  const targetCount = Math.max(2, Math.floor(containerWidth / TICK_TARGET_PX));
+  const span = end - start;
+  if (span <= 0) return [];
+  const totalDays = dayCount(start, end);
+  const stepDays = Math.max(1, Math.round(totalDays / (targetCount - 1)));
+  const stepMs = stepDays * MS_PER_DAY;
+  return Array.from({ length: targetCount }).map((_, index) => {
+    const time = start + stepMs * index;
+    const clamped = Math.min(time, end);
+    return {
+      date: new Date(clamped),
+      offset: (clamped - start) / span
+    };
+  });
+}
+function resolveEventColor(event, tracks, categories) {
+  if (event.color) return event.color;
+  if (event.category) {
+    const cat = categories.find((c) => c.id === event.category);
+    if (cat?.color) return cat.color;
+  }
+  if (event.track) {
+    const track = tracks.find((t) => t.id === event.track);
+    if (track?.color) return track.color;
+  }
+  return "neutral";
+}
+function Axis({ endTime, startTime, ticks }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "aria-hidden": "true",
+      className: "relative h-7 border-b border-border text-[10px] font-medium uppercase tracking-wide text-muted-foreground",
+      "data-end": endTime,
+      "data-start": startTime,
+      children: ticks.map((tick) => /* @__PURE__ */ jsx(
+        "span",
+        {
+          className: "absolute top-1 -translate-x-1/2 whitespace-nowrap",
+          style: { left: `${(tick.offset * 100).toString()}%` },
+          children: formatDate(tick.date)
+        },
+        tick.date.getTime()
+      ))
+    }
+  );
+}
+function getNow() {
+  return Date.now();
+}
+function noopUnsubscribe() {
+  return;
+}
+function emptySubscribe() {
+  return noopUnsubscribe;
+}
+function useNow() {
+  return useSyncExternalStore(emptySubscribe, getNow, getNow);
+}
+function TodayMarker({ endTime, startTime }) {
+  const now = useNow();
+  if (now < startTime || now > endTime) return null;
+  const offset = (now - startTime) / (endTime - startTime);
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "aria-hidden": "true",
+      className: "pointer-events-none absolute inset-y-0 z-20 w-px bg-primary",
+      "data-testid": "today-marker",
+      style: { left: `${(offset * 100).toString()}%` },
+      children: /* @__PURE__ */ jsx("span", { className: "absolute -top-2 -translate-x-1/2 rounded bg-primary px-1 text-[10px] font-medium text-primary-foreground", children: "Today" })
+    }
+  );
+}
+function eventGeometry(event, startTime, endTime) {
+  const span = endTime - startTime;
+  const startOffset = dateToOffset(event.startDate, startTime, span);
+  const endOffset = event.endDate ? dateToOffset(event.endDate, startTime, span) : startOffset;
+  const visible = endOffset >= 0 && startOffset <= 1 && event.startDate.getTime() <= endTime;
+  const left = clamp(startOffset, 0, 1);
+  const width = Math.max(0, Math.min(1, endOffset) - left);
+  return {
+    isDuration: width > 0 && Boolean(event.endDate),
+    left,
+    visible,
+    width
+  };
+}
+function EventTooltip({ event, tooltipId }) {
+  return /* @__PURE__ */ jsxs(
+    "span",
+    {
+      className: "pointer-events-none absolute left-1/2 top-5 hidden -translate-x-1/2 whitespace-nowrap rounded border bg-popover px-2 py-1 text-[11px] font-medium text-popover-foreground shadow-md group-hover:block group-focus-visible:block",
+      id: tooltipId,
+      role: "tooltip",
+      children: [
+        /* @__PURE__ */ jsx("span", { className: "block", children: event.title }),
+        /* @__PURE__ */ jsxs("span", { className: "block text-[10px] text-muted-foreground", children: [
+          formatDate(event.startDate),
+          event.endDate ? ` \u2013 ${formatDate(event.endDate)}` : null
+        ] }),
+        event.description ? /* @__PURE__ */ jsx("span", { className: "block text-[10px] text-muted-foreground", children: event.description }) : null
+      ]
+    }
+  );
+}
+function EventNode({
+  active,
+  categories,
+  endTime,
+  event,
+  onSelect,
+  startTime,
+  tracks
+}) {
+  const color = resolveEventColor(event, tracks, categories);
+  const palette = COLOR_PALETTE[color];
+  const { isDuration, left, visible, width } = eventGeometry(
+    event,
+    startTime,
+    endTime
+  );
+  if (!visible) return null;
+  const titleText = typeof event.title === "string" ? event.title : "Event";
+  const tooltipId = `${event.id}-tooltip`;
+  const handleSelectTimelineEvent = (mouseEvent) => {
+    mouseEvent.stopPropagation();
+    onSelect(event);
+  };
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      "aria-describedby": event.description ? tooltipId : void 0,
+      "aria-label": titleText,
+      "aria-pressed": active,
+      className: cn(
+        "group absolute top-1/2 z-10 -translate-y-1/2 cursor-pointer rounded-sm focus:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+        isDuration ? "" : "-translate-x-1/2"
+      ),
+      "data-event-id": event.id,
+      "data-event-track": event.track ?? "",
+      "data-selected": active ? "true" : void 0,
+      onClick: handleSelectTimelineEvent,
+      style: {
+        left: `${(left * 100).toString()}%`,
+        width: isDuration ? `${(width * 100).toString()}%` : void 0
+      },
+      type: "button",
+      children: [
+        isDuration ? /* @__PURE__ */ jsx(
+          "span",
+          {
+            className: cn(
+              "block h-3 rounded-sm shadow-sm ring-2 ring-background",
+              palette.bar,
+              active ? "ring-primary" : ""
+            )
+          }
+        ) : /* @__PURE__ */ jsx(
+          "span",
+          {
+            className: cn(
+              "block size-3 rounded-full border-2 ring-2 ring-background",
+              palette.dot,
+              active ? "ring-primary" : ""
+            )
+          }
+        ),
+        /* @__PURE__ */ jsx(EventTooltip, { event, tooltipId })
+      ]
+    }
+  );
+}
+function TrackRow({
+  categories,
+  endTime,
+  events,
+  onSelect,
+  selectedId,
+  startTime,
+  track
+}) {
+  const palette = COLOR_PALETTE[track.color ?? "neutral"];
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: "relative flex h-12 items-center border-t border-border/60",
+      "data-track-id": track.id,
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "absolute left-0 z-30 flex h-full w-32 shrink-0 items-center gap-2 border-r border-border bg-background px-3 text-xs font-medium", children: [
+          /* @__PURE__ */ jsx(
+            "span",
+            {
+              "aria-hidden": "true",
+              className: cn("size-2 rounded-full", palette.dot)
+            }
+          ),
+          /* @__PURE__ */ jsx("span", { className: "truncate", children: track.label })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "relative ml-32 h-full flex-1", children: [
+          /* @__PURE__ */ jsx("div", { className: "absolute inset-x-0 top-1/2 h-px -translate-y-1/2 bg-border" }),
+          events.map((event) => /* @__PURE__ */ jsx(
+            EventNode,
+            {
+              active: selectedId === event.id,
+              categories,
+              endTime,
+              event,
+              onSelect,
+              startTime,
+              tracks: [track]
+            },
+            event.id
+          ))
+        ] })
+      ]
+    }
+  );
+}
+function useScrollDrag(ref) {
+  const dragRef = useRef(
+    null
+  );
+  const onPointerDown = useCallback(
+    (event) => {
+      const node = ref.current;
+      if (!node) return;
+      dragRef.current = {
+        originScroll: node.scrollLeft,
+        originX: event.clientX
+      };
+      node.setPointerCapture(event.pointerId);
+    },
+    [ref]
+  );
+  const onPointerMove = useCallback(
+    (event) => {
+      const node = ref.current;
+      const drag = dragRef.current;
+      if (!node || !drag) return;
+      node.scrollLeft = drag.originScroll - (event.clientX - drag.originX);
+    },
+    [ref]
+  );
+  const onPointerEnd = useCallback(
+    (event) => {
+      const node = ref.current;
+      if (!node) return;
+      if (node.hasPointerCapture(event.pointerId)) {
+        node.releasePointerCapture(event.pointerId);
+      }
+      dragRef.current = null;
+    },
+    [ref]
+  );
+  return {
+    onPointerCancel: onPointerEnd,
+    onPointerDown,
+    onPointerMove,
+    onPointerUp: onPointerEnd
+  };
+}
+function ScrollArea({
+  categories,
+  endTime,
+  events,
+  onSelect,
+  scrollerId,
+  selectedId,
+  startTime,
+  tracks,
+  zoom
+}) {
+  const ref = useRef(null);
+  const observerRef = useRef(null);
+  const [containerWidth, setContainerWidth] = useState(800);
+  const dragHandlers = useScrollDrag(ref);
+  const handleRef = useCallback((node) => {
+    ref.current = node;
+    observerRef.current?.disconnect();
+    observerRef.current = null;
+    if (!node) return;
+    setContainerWidth(node.clientWidth);
+    if (typeof ResizeObserver === "undefined") return;
+    const observer = new ResizeObserver(() => {
+      setContainerWidth(node.clientWidth);
+    });
+    observer.observe(node);
+    observerRef.current = observer;
+  }, []);
+  const innerWidth = `${(zoom * 100).toString()}%`;
+  const ticks = useMemo(
+    () => buildTicks(startTime, endTime, containerWidth * zoom),
+    [containerWidth, endTime, startTime, zoom]
+  );
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: "relative w-full cursor-grab overflow-x-auto active:cursor-grabbing",
+      "data-scroller-id": scrollerId,
+      "data-zoom": zoom,
+      ref: handleRef,
+      ...dragHandlers,
+      children: /* @__PURE__ */ jsxs("div", { className: "relative", style: { width: innerWidth }, children: [
+        /* @__PURE__ */ jsx(Axis, { endTime, startTime, ticks }),
+        /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+          /* @__PURE__ */ jsx(TodayMarker, { endTime, startTime }),
+          tracks.map((track) => {
+            const trackEvents = events.filter(
+              (event) => (event.track ?? tracks[0]?.id) === track.id
+            );
+            return /* @__PURE__ */ jsx(
+              TrackRow,
+              {
+                categories,
+                endTime,
+                events: trackEvents,
+                onSelect,
+                selectedId,
+                startTime,
+                track
+              },
+              track.id
+            );
+          })
+        ] })
+      ] })
+    }
+  );
+}
+const InteractiveTimelineToolbar = forwardRef(({ children, className, ...rest }, ref) => /* @__PURE__ */ jsx(
+  "div",
+  {
+    className: cn(
+      "flex flex-wrap items-center gap-2 border-b border-border bg-muted/30 px-3 py-2",
+      className
+    ),
+    ref,
+    role: "toolbar",
+    ...rest,
+    children
+  }
+));
+InteractiveTimelineToolbar.displayName = "InteractiveTimelineToolbar";
+const InteractiveTimelineZoomIn = forwardRef(({ className, ...rest }, ref) => {
+  const { labels, zoomIn } = useTimelineContext();
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      "aria-label": labels.zoomIn,
+      className: cn(
+        "inline-flex size-8 items-center justify-center rounded-md border border-border bg-background text-sm font-medium hover:bg-accent focus:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+        className
+      ),
+      onClick: zoomIn,
+      ref,
+      type: "button",
+      ...rest,
+      children: /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: "+" })
+    }
+  );
+});
+InteractiveTimelineZoomIn.displayName = "InteractiveTimelineZoomIn";
+const InteractiveTimelineZoomOut = forwardRef(({ className, ...rest }, ref) => {
+  const { labels, zoomOut } = useTimelineContext();
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      "aria-label": labels.zoomOut,
+      className: cn(
+        "inline-flex size-8 items-center justify-center rounded-md border border-border bg-background text-sm font-medium hover:bg-accent focus:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+        className
+      ),
+      onClick: zoomOut,
+      ref,
+      type: "button",
+      ...rest,
+      children: /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: "\u2212" })
+    }
+  );
+});
+InteractiveTimelineZoomOut.displayName = "InteractiveTimelineZoomOut";
+const InteractiveTimelineToday = forwardRef(({ children, className, ...rest }, ref) => {
+  const { centerToday, labels } = useTimelineContext();
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      "aria-label": labels.today,
+      className: cn(
+        "inline-flex h-8 items-center rounded-md border border-border bg-background px-3 text-xs font-medium hover:bg-accent focus:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+        className
+      ),
+      onClick: centerToday,
+      ref,
+      type: "button",
+      ...rest,
+      children: children ?? "Today"
+    }
+  );
+});
+InteractiveTimelineToday.displayName = "InteractiveTimelineToday";
+const InteractiveTimelineFilter = forwardRef(({ categories, className, ...rest }, ref) => {
+  const { toggleCategory, visibleCategories } = useTimelineContext();
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn("flex flex-wrap items-center gap-1.5", className),
+      ref,
+      role: "group",
+      ...rest,
+      children: categories.map((category) => {
+        const active = visibleCategories.has(category.id);
+        const palette = COLOR_PALETTE[category.color ?? "neutral"];
+        return /* @__PURE__ */ jsx(
+          "button",
+          {
+            "aria-pressed": active,
+            className: cn(
+              "inline-flex items-center gap-1 rounded-full border px-2 py-0.5 text-xs font-medium",
+              active ? palette.chipActive : palette.chip
+            ),
+            "data-category-id": category.id,
+            onClick: () => {
+              toggleCategory(category.id);
+            },
+            type: "button",
+            children: category.label
+          },
+          category.id
+        );
+      })
+    }
+  );
+});
+InteractiveTimelineFilter.displayName = "InteractiveTimelineFilter";
+const FALLBACK_TRACK = {
+  color: "neutral",
+  id: "default",
+  label: "Events"
+};
+function noop() {
+  return;
+}
+function useToolbarHandlers(arguments_) {
+  const { endTime, scrollerId, setZoom, startTime } = arguments_;
+  const zoomIn = useCallback(() => {
+    setZoom((current) => clamp(current * ZOOM_STEP, MIN_ZOOM, MAX_ZOOM));
+  }, [setZoom]);
+  const zoomOut = useCallback(() => {
+    setZoom((current) => clamp(current / ZOOM_STEP, MIN_ZOOM, MAX_ZOOM));
+  }, [setZoom]);
+  const centerToday = useCallback(() => {
+    if (typeof document === "undefined") return;
+    const node = document.querySelector(
+      `[data-scroller-id="${scrollerId}"]`
+    );
+    if (!node) return;
+    const span = endTime - startTime;
+    if (span <= 0) return;
+    const now = Date.now();
+    const offset = clamp((now - startTime) / span, 0, 1);
+    const targetX = offset * node.scrollWidth - node.clientWidth / 2;
+    node.scrollLeft = clamp(targetX, 0, node.scrollWidth);
+  }, [endTime, scrollerId, startTime]);
+  return { centerToday, zoomIn, zoomOut };
+}
+function useTimelineFrame(arguments_) {
+  const { endDate, labels, startDate, trackProperty } = arguments_;
+  const tracks = trackProperty && trackProperty.length > 0 ? trackProperty : [FALLBACK_TRACK];
+  const resolvedLabels = useMemo(
+    () => ({ ...DEFAULT_LABELS, ...labels }),
+    [labels]
+  );
+  return {
+    endTime: endDate.getTime(),
+    resolvedLabels,
+    startTime: startDate.getTime(),
+    tracks
+  };
+}
+function useEventSelection(onEventClick) {
+  const [selectedId, setSelectedId] = useState();
+  const handleSelect = useCallback(
+    (event) => {
+      setSelectedId(event.id);
+      onEventClick(event);
+    },
+    [onEventClick]
+  );
+  return { handleSelect, selectedId };
+}
+function useTimelineContextValue(arguments_) {
+  const {
+    centerToday,
+    labels,
+    toggleCategory,
+    visibleCategories,
+    zoom,
+    zoomIn,
+    zoomOut
+  } = arguments_;
+  return useMemo(
+    () => ({
+      centerToday,
+      labels,
+      toggleCategory,
+      visibleCategories,
+      zoom,
+      zoomIn,
+      zoomOut
+    }),
+    [
+      centerToday,
+      labels,
+      toggleCategory,
+      visibleCategories,
+      zoom,
+      zoomIn,
+      zoomOut
+    ]
+  );
+}
+function useTimelineFilter(categories, events) {
+  const [hidden, setHidden] = useState(() => /* @__PURE__ */ new Set());
+  const visibleCategories = useMemo(
+    () => categories.reduce((visible, category) => {
+      if (!hidden.has(category.id)) {
+        visible.add(category.id);
+      }
+      return visible;
+    }, /* @__PURE__ */ new Set()),
+    [categories, hidden]
+  );
+  const toggleCategory = useCallback((id) => {
+    setHidden((current) => {
+      const next = new Set(current);
+      if (next.has(id)) next.delete(id);
+      else next.add(id);
+      return next;
+    });
+  }, []);
+  const filteredEvents = useMemo(() => {
+    if (categories.length === 0) return events;
+    return events.filter((event) => {
+      if (!event.category) return true;
+      return !hidden.has(event.category);
+    });
+  }, [categories.length, events, hidden]);
+  return { filteredEvents, toggleCategory, visibleCategories };
+}
+const InteractiveTimeline = forwardRef((props, ref) => {
+  const {
+    categories = [],
+    children,
+    className,
+    endDate,
+    events = [],
+    labels,
+    onEventClick = noop,
+    startDate,
+    tracks: trackProperty,
+    ...rest
+  } = props;
+  const { endTime, resolvedLabels, startTime, tracks } = useTimelineFrame({
+    endDate,
+    labels,
+    startDate,
+    trackProperty
+  });
+  const scrollerId = useId();
+  const [zoom, setZoom] = useState(1);
+  const { filteredEvents, toggleCategory, visibleCategories } = useTimelineFilter(categories, events);
+  const { centerToday, zoomIn, zoomOut } = useToolbarHandlers({
+    endTime,
+    scrollerId,
+    setZoom,
+    startTime,
+    zoom
+  });
+  const { handleSelect, selectedId } = useEventSelection(onEventClick);
+  const ctx = useTimelineContextValue({
+    centerToday,
+    labels: resolvedLabels,
+    toggleCategory,
+    visibleCategories,
+    zoom,
+    zoomIn,
+    zoomOut
+  });
+  return /* @__PURE__ */ jsx(TimelineContext.Provider, { value: ctx, children: /* @__PURE__ */ jsxs(
+    "section",
+    {
+      "aria-label": resolvedLabels.region,
+      className: cn(
+        "flex w-full flex-col overflow-hidden rounded-2xl border bg-background text-foreground",
+        className
+      ),
+      ref,
+      ...rest,
+      children: [
+        children,
+        /* @__PURE__ */ jsx("div", { id: scrollerId, children: /* @__PURE__ */ jsx(
+          ScrollArea,
+          {
+            categories,
+            endTime,
+            events: filteredEvents,
+            onSelect: handleSelect,
+            scrollerId,
+            selectedId,
+            startTime,
+            tracks,
+            zoom
+          }
+        ) })
+      ]
+    }
+  ) });
+});
+InteractiveTimeline.displayName = "InteractiveTimeline";
+export {
+  InteractiveTimeline,
+  InteractiveTimelineFilter,
+  InteractiveTimelineToday,
+  InteractiveTimelineToolbar,
+  InteractiveTimelineZoomIn,
+  InteractiveTimelineZoomOut
+};