@spatika/react 1.1.0 → 1.2.0

package/src/composites/scheduler-ui.tsx

@@ -0,0 +1,304 @@
+import type { HTMLAttributes, ReactNode } from "react";
+import { ChevronDown, ChevronLeft, ChevronRight, Settings } from "lucide-react";
+import { cn } from "../lib/cn";
+import {
+  eventColorStyle,
+  formatDateRange,
+  snapMs,
+  startOfDay,
+  type CalendarView,
+  type NormalizedEvent,
+  type SchedulerPreferences,
+  type SchedulerResource,
+  type TimelineScale,
+} from "../lib/scheduler";
+import { Button } from "../primitives/Button";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "../primitives/DropdownMenu";
+import { Popover, PopoverContent, PopoverTrigger } from "../primitives/Popover";
+
+export const CALENDAR_VIEW_LABEL: Record<CalendarView, string> = {
+  month: "Month",
+  week: "Week",
+  day: "Day",
+  agenda: "Agenda",
+};
+
+export const TIMELINE_SCALE_LABEL: Record<TimelineScale, string> = {
+  hours: "Hours",
+  days: "Days",
+  weeks: "Weeks",
+  months: "Months",
+  years: "Years",
+};
+
+export function SchedulerToolbar({
+  title,
+  onPrev,
+  onNext,
+  onToday,
+  menuLabel,
+  menu,
+  trailing,
+}: {
+  title: string;
+  onPrev: () => void;
+  onNext: () => void;
+  onToday: () => void;
+  menuLabel: string;
+  menu: ReactNode;
+  trailing?: ReactNode;
+}) {
+  return (
+    <div
+      data-slot="scheduler-toolbar"
+      className="flex flex-col gap-3 border-b border-border/50 px-3 py-3 sm:flex-row sm:items-center sm:justify-between sm:px-4"
+    >
+      <h2 className="min-w-0 truncate text-xl font-black tracking-tight text-foreground sm:text-2xl">
+        {title}
+      </h2>
+      <div className="flex flex-wrap items-center gap-2">
+        <div className="flex items-center gap-1">
+          <Button
+            type="button"
+            variant="ghost"
+            size="icon"
+            aria-label="Previous"
+            onClick={onPrev}
+          >
+            <ChevronLeft className="size-4" />
+          </Button>
+          <Button type="button" variant="outline" size="sm" className="uppercase tracking-wide" onClick={onToday}>
+            Today
+          </Button>
+          <Button type="button" variant="ghost" size="icon" aria-label="Next" onClick={onNext}>
+            <ChevronRight className="size-4" />
+          </Button>
+        </div>
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild>
+            <Button type="button" variant="outline" size="sm" className="min-w-[6.5rem] justify-between gap-2 uppercase tracking-wide">
+              {menuLabel}
+              <ChevronDown className="size-3.5 opacity-70" />
+            </Button>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent align="end">{menu}</DropdownMenuContent>
+        </DropdownMenu>
+        {trailing}
+      </div>
+    </div>
+  );
+}
+
+export function SchedulerPreferencesMenu({
+  value,
+  onChange,
+  disabled,
+}: {
+  value: Required<SchedulerPreferences>;
+  onChange: (next: Required<SchedulerPreferences>) => void;
+  disabled?: boolean;
+}) {
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <Button type="button" variant="ghost" size="icon" aria-label="Preferences" disabled={disabled}>
+          <Settings className="size-4" />
+        </Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align="end" className="w-52">
+        <DropdownMenuItem
+          onClick={() => onChange({ ...value, showWeekends: !value.showWeekends })}
+        >
+          {value.showWeekends ? "Hide weekends" : "Show weekends"}
+        </DropdownMenuItem>
+        <DropdownMenuItem
+          onClick={() => onChange({ ...value, showWeekNumber: !value.showWeekNumber })}
+        >
+          {value.showWeekNumber ? "Hide week numbers" : "Show week numbers"}
+        </DropdownMenuItem>
+        <DropdownMenuItem onClick={() => onChange({ ...value, ampm: !value.ampm })}>
+          {value.ampm ? "Use 24-hour time" : "Use 12-hour time"}
+        </DropdownMenuItem>
+        <DropdownMenuItem
+          onClick={() =>
+            onChange({ ...value, weekStartsOn: value.weekStartsOn === 0 ? 1 : 0 })
+          }
+        >
+          Week starts on {value.weekStartsOn === 0 ? "Monday" : "Sunday"}
+        </DropdownMenuItem>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}
+
+export function EventResizeHandle({
+  event,
+  edge,
+  axis,
+  hourStart,
+  hourEnd,
+  onCommit,
+}: {
+  event: NormalizedEvent;
+  edge: "start" | "end";
+  axis: "ns" | "ew";
+  hourStart?: number;
+  hourEnd?: number;
+  onCommit: (event: NormalizedEvent, edge: "start" | "end", instant: Date) => void;
+}) {
+  const ns = axis === "ns";
+  return (
+    <button
+      type="button"
+      aria-label={edge === "start" ? "Resize start" : "Resize end"}
+      className={cn(
+        "absolute z-10 touch-none bg-transparent",
+        ns ? "inset-x-1 h-1.5 cursor-ns-resize" : "inset-y-1 w-1.5 cursor-ew-resize",
+        ns && edge === "start" && "top-0",
+        ns && edge === "end" && "bottom-0",
+        !ns && edge === "start" && "left-0",
+        !ns && edge === "end" && "right-0",
+      )}
+      onClick={(click) => click.stopPropagation()}
+      onPointerDown={(pointer) => {
+        pointer.stopPropagation();
+        (pointer.currentTarget as HTMLElement).setPointerCapture?.(pointer.pointerId);
+      }}
+      onPointerUp={(pointer) => {
+        pointer.stopPropagation();
+        if (ns) {
+          const column = (pointer.currentTarget as HTMLElement).closest(
+            "[data-scheduler-day]",
+          ) as HTMLElement | null;
+          if (!column || hourStart == null || hourEnd == null) return;
+          const rect = column.getBoundingClientRect();
+          const ratio = Math.min(1, Math.max(0, (pointer.clientY - rect.top) / rect.height));
+          const ms =
+            startOfDay(event.start).getTime() + (hourStart + ratio * (hourEnd - hourStart)) * 3_600_000;
+          onCommit(event, edge, new Date(snapMs(ms)));
+          return;
+        }
+        const grid = (pointer.currentTarget as HTMLElement).closest(
+          "[data-scheduler-grid]",
+        ) as HTMLElement | null;
+        if (!grid) return;
+        const start = Number(grid.dataset.rangeStart);
+        const end = Number(grid.dataset.rangeEnd);
+        const rect = grid.getBoundingClientRect();
+        const ratio = Math.min(1, Math.max(0, (pointer.clientX - rect.left) / rect.width));
+        onCommit(event, edge, new Date(snapMs(start + ratio * (end - start))));
+      }}
+    />
+  );
+}
+
+
+export function ResourceLegend({
+  resources,
+  hiddenIds,
+  onToggle,
+}: {
+  resources: SchedulerResource[];
+  hiddenIds: ReadonlySet<string>;
+  onToggle: (id: string) => void;
+}) {
+  if (resources.length === 0) return null;
+  return (
+    <div
+      data-slot="scheduler-resources"
+      className="flex flex-wrap items-center gap-1.5 border-t border-border/50 px-3 py-2.5 sm:px-4"
+    >
+      <p className="mr-1 text-[10px] font-black uppercase tracking-widest text-muted-foreground">
+        Resources
+      </p>
+      {resources.map((resource) => {
+        const active = !hiddenIds.has(resource.id);
+        const tone = resource.color ?? "blue";
+        return (
+          <button
+            key={resource.id}
+            type="button"
+            onClick={() => onToggle(resource.id)}
+            aria-pressed={active}
+            className={cn(
+              "inline-flex items-center gap-1.5 rounded-full border px-2.5 py-1 text-xs font-semibold transition-colors",
+              active
+                ? "border-border/60 bg-background/80 text-foreground"
+                : "border-transparent bg-muted/30 text-muted-foreground line-through",
+            )}
+          >
+            <span
+              className="size-2 rounded-full"
+              style={eventColorStyle(tone, "dot")}
+              aria-hidden
+            />
+            {resource.title}
+          </button>
+        );
+      })}
+    </div>
+  );
+}
+
+export function EventPopover({
+  event,
+  resources,
+  children,
+  onOpenChange,
+}: {
+  event: NormalizedEvent;
+  resources: SchedulerResource[];
+  children: ReactNode;
+  onOpenChange?: (open: boolean) => void;
+}) {
+  const resource = resources.find((item) => item.id === event.resourceId);
+  return (
+    <Popover onOpenChange={onOpenChange}>
+      <PopoverTrigger asChild>{children}</PopoverTrigger>
+      <PopoverContent align="start" sideOffset={6} className="w-72 p-3">
+        <p className="text-sm font-bold text-foreground">{event.title}</p>
+        <p className="mt-1 text-xs text-muted-foreground">
+          {formatDateRange(event.start, event.end, event.allDay)}
+        </p>
+        {resource ? (
+          <p className="mt-2 inline-flex items-center gap-1.5 text-xs font-semibold text-foreground">
+            <span className="size-2 rounded-full" style={eventColorStyle(event.color, "dot")} />
+            {resource.title}
+          </p>
+        ) : null}
+        {event.description ? (
+          <p className="mt-2 text-xs leading-relaxed text-muted-foreground">{event.description}</p>
+        ) : null}
+      </PopoverContent>
+    </Popover>
+  );
+}
+
+export function SchedulerShell({
+  className,
+  slot,
+  children,
+  ...props
+}: {
+  className?: string;
+  slot: string;
+  children: ReactNode;
+} & HTMLAttributes<HTMLDivElement>) {
+  return (
+    <div
+      data-slot={slot}
+      className={cn(
+        "relative overflow-hidden rounded-[var(--radius-card)] border border-border/60 bg-background/80 shadow-[var(--shadow-soft)]",
+        className,
+      )}
+      {...props}
+    >
+      {children}
+    </div>
+  );
+}

package/src/composites/scheduler.test.tsx

@@ -0,0 +1,194 @@
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { describe, expect, it, vi } from "vitest";
+import { EventCalendar } from "./EventCalendar";
+import { EventTimeline } from "./EventTimeline";
+import type { SchedulerEvent, SchedulerResource } from "../lib/scheduler";
+
+const resources: SchedulerResource[] = [
+  { id: "work", title: "Work", color: "violet" },
+  { id: "health", title: "Health", color: "teal" },
+];
+
+const events: SchedulerEvent[] = [
+  {
+    id: "run",
+    title: "Morning Run",
+    start: "2026-08-03T07:00:00",
+    end: "2026-08-03T07:45:00",
+    resourceId: "health",
+  },
+  {
+    id: "bday",
+    title: "Alice's Birthday",
+    start: "2026-08-06",
+    end: "2026-08-08",
+    allDay: true,
+    resourceId: "work",
+    color: "rose",
+  },
+  {
+    id: "review",
+    title: "Design Review",
+    start: "2026-08-09T14:00:00",
+    end: "2026-08-09T16:00:00",
+    resourceId: "work",
+  },
+];
+
+describe("EventCalendar", () => {
+  it("renders the month heading, weekday labels, and events", () => {
+    render(
+      <EventCalendar
+        defaultDate={new Date(2026, 7, 15)}
+        events={events}
+        resources={resources}
+        locale="en-US"
+      />,
+    );
+    expect(screen.getByRole("heading", { name: /August 2026/i })).toBeInTheDocument();
+    expect(screen.getByText(/Sun/)).toBeInTheDocument();
+    expect(screen.getByText("Morning Run")).toBeInTheDocument();
+    expect(screen.getByText("Alice's Birthday")).toBeInTheDocument();
+    expect(screen.getByText("Work")).toBeInTheDocument();
+  });
+
+  it("jumps to today from the toolbar", async () => {
+    const user = userEvent.setup();
+    const onDateChange = vi.fn();
+    render(
+      <EventCalendar
+        defaultDate={new Date(2025, 0, 1)}
+        onDateChange={onDateChange}
+        events={events}
+      />,
+    );
+    await user.click(screen.getByRole("button", { name: "Today" }));
+    expect(onDateChange).toHaveBeenCalled();
+    const next = onDateChange.mock.calls[0][0] as Date;
+    const now = new Date();
+    expect(next.getFullYear()).toBe(now.getFullYear());
+    expect(next.getMonth()).toBe(now.getMonth());
+  });
+
+  it("fires onEventClick for a timed event", async () => {
+    const user = userEvent.setup();
+    const onEventClick = vi.fn();
+    render(
+      <EventCalendar
+        defaultDate={new Date(2026, 7, 15)}
+        events={events}
+        resources={resources}
+        locale="en-US"
+        onEventClick={onEventClick}
+      />,
+    );
+    await user.click(screen.getByText("Morning Run"));
+    expect(onEventClick).toHaveBeenCalledWith(expect.objectContaining({ id: "run" }));
+  });
+
+  it("switches to week view from the menu", async () => {
+    const user = userEvent.setup();
+    render(
+      <EventCalendar defaultDate={new Date(2026, 7, 15)} events={events} locale="en-US" />,
+    );
+    await user.click(screen.getByRole("button", { name: /month/i }));
+    await user.click(screen.getByRole("menuitem", { name: "Week" }));
+    expect(screen.getByRole("heading", { name: /2026/ })).toBeInTheDocument();
+  });
+
+  it("lists events in agenda view", () => {
+    render(
+      <EventCalendar
+        defaultView="agenda"
+        defaultDate={new Date(2026, 7, 3)}
+        events={events}
+        locale="en-US"
+      />,
+    );
+    expect(screen.getByRole("heading", { name: /Aug 3/ })).toBeInTheDocument();
+    expect(screen.getAllByText("No events").length).toBeGreaterThan(0);
+    expect(screen.getByText("Morning Run")).toBeInTheDocument();
+    expect(screen.getAllByText("Alice's Birthday").length).toBeGreaterThan(0);
+  });
+
+  it("opens the editor and saves title changes", async () => {
+    const user = userEvent.setup();
+    const onEventChange = vi.fn();
+    render(
+      <EventCalendar
+        defaultDate={new Date(2026, 7, 15)}
+        events={events}
+        resources={resources}
+        locale="en-US"
+        onEventChange={onEventChange}
+      />,
+    );
+    await user.click(screen.getByText("Morning Run"));
+    const title = screen.getByRole("textbox", { name: /title/i });
+    await user.clear(title);
+    await user.type(title, "Jog");
+    await user.click(screen.getByRole("button", { name: "Save" }));
+    expect(onEventChange).toHaveBeenCalledWith(
+      expect.objectContaining({ id: "run" }),
+      expect.objectContaining({ title: "Jog" }),
+    );
+  });
+
+  it("creates an event from a day slot", async () => {
+    const user = userEvent.setup();
+    const onEventCreate = vi.fn();
+    render(
+      <EventCalendar
+        defaultDate={new Date(2026, 7, 15)}
+        events={events}
+        locale="en-US"
+        onEventCreate={onEventCreate}
+      />,
+    );
+    await user.click(screen.getByRole("button", { name: "15" }));
+    expect(screen.getByRole("heading", { name: "New event" })).toBeInTheDocument();
+    await user.type(screen.getByRole("textbox", { name: /title/i }), "Focus time");
+    await user.click(screen.getByRole("button", { name: "Save" }));
+    expect(onEventCreate).toHaveBeenCalledWith(expect.objectContaining({ title: "Focus time" }));
+  });
+});
+
+describe("EventTimeline", () => {
+  const timelineEvents: SchedulerEvent[] = [
+    {
+      id: "api",
+      title: "API V3 Development",
+      start: "2026-07-01",
+      end: "2026-09-20",
+      allDay: true,
+      resourceId: "eng",
+    },
+    {
+      id: "ui",
+      title: "Mobile App UI/UX",
+      start: "2026-08-01",
+      end: "2026-10-15",
+      allDay: true,
+      resourceId: "design",
+    },
+  ];
+  const timelineResources: SchedulerResource[] = [
+    { id: "design", title: "Design", color: "rose" },
+    { id: "eng", title: "Engineering", color: "blue" },
+  ];
+
+  it("renders resource rows and event bars", () => {
+    render(
+      <EventTimeline
+        defaultDate={new Date(2026, 7, 1)}
+        events={timelineEvents}
+        resources={timelineResources}
+      />,
+    );
+    expect(screen.getAllByText("Design").length).toBeGreaterThan(0);
+    expect(screen.getAllByText("Engineering").length).toBeGreaterThan(0);
+    expect(screen.getByText("API V3 Development")).toBeInTheDocument();
+    expect(screen.getByText("Mobile App UI/UX")).toBeInTheDocument();
+  });
+});

package/src/index.test.ts

@@ -0,0 +1,22 @@
+import { describe, expect, it } from "vitest";
+import {
+  BarChart,
+  BarChart3D,
+  Button,
+  ChartContainer,
+  ChartDataGrid,
+  MapChart,
+  mercator,
+} from "./index";
+
+describe("@spatika/react public exports", () => {
+  it("exports primitives, chart composites, and helpers", () => {
+    expect(Button.displayName).toBe("Button");
+    expect(BarChart).toBeTypeOf("function");
+    expect(ChartContainer).toBeTypeOf("function");
+    expect(ChartDataGrid).toBeTypeOf("function");
+    expect(MapChart).toBeTypeOf("function");
+    expect(BarChart3D).toBeTypeOf("function");
+    expect(mercator([0, 0])[0]).toBeCloseTo(0.5);
+  });
+});