@vamos-ui/react 0.0.0-stage → 0.2.0

package/dist/scheduler/core/time-scale.js

@@ -0,0 +1,173 @@
+/**
+ * Time scale: instant ↔ pixel mapping, zoom presets, calendar ticks in an explicit time zone,
+ * snapping and visible-window math. Shared by Agenda, Resource calendar and Gantt.
+ * React-free (the hook `useTimeScale` lives in `@vamos-ui/react/sortable`, next to `usePointerDrag`).
+ */
+import { TZDate } from "@date-fns/tz";
+import { addDays, addHours, addMinutes, addMonths, addQuarters, addWeeks, addYears, startOfDay, startOfHour, startOfMonth, startOfQuarter, startOfWeek, startOfYear, } from "date-fns";
+import { getWeekInfo } from "../../locale-data/core/week-info.js";
+import { workingValue } from "../../locale-data/core/working-days.js";
+/** Zoom presets: hour (rooms × hours), day (people × days), week / month / quarter (Gantt). */
+export const TIME_SCALE_PRESETS = {
+    hour: { pxPerDay: 64 * 24, minor: "hour", major: "day" },
+    day: { pxPerDay: 44, minor: "day", major: "month" },
+    week: { pxPerDay: 18, minor: "week", major: "month" },
+    month: { pxPerDay: 4, minor: "month", major: "year" },
+    quarter: { pxPerDay: 1.5, minor: "quarter", major: "year" },
+};
+const DAY_MS = 86_400_000;
+const DATE_ONLY = /^\d{4}-\d{2}-\d{2}$/;
+/** Resolves a `TimeInput` to epoch ms; date-only strings are local midnight in `timeZone`. */
+export function toEpoch(t, timeZone = "UTC") {
+    if (t instanceof Date)
+        return t.getTime();
+    if (typeof t === "number")
+        return t;
+    if (DATE_ONLY.test(t)) {
+        const [y, m, d] = t.split("-").map(Number);
+        return new TZDate(y, m - 1, d, timeZone).getTime();
+    }
+    const ms = Date.parse(t);
+    if (Number.isNaN(ms))
+        throw new RangeError(`Invalid time: "${t}"`);
+    return ms;
+}
+function isoOf(d) {
+    return `${String(d.getFullYear()).padStart(4, "0")}-${String(d.getMonth() + 1).padStart(2, "0")}-${String(d.getDate()).padStart(2, "0")}`;
+}
+function floorTo(d, unit, weekStartsOn) {
+    switch (unit) {
+        case "minute15":
+        case "minute30": {
+            const step = unit === "minute15" ? 15 : 30;
+            const h = startOfHour(d);
+            return addMinutes(h, Math.floor(d.getMinutes() / step) * step);
+        }
+        case "hour":
+            return startOfHour(d);
+        case "day":
+            return startOfDay(d);
+        case "week":
+            return startOfWeek(d, { weekStartsOn });
+        case "month":
+            return startOfMonth(d);
+        case "quarter":
+            return startOfQuarter(d);
+        case "year":
+            return startOfYear(d);
+    }
+}
+function step(d, unit, n = 1) {
+    switch (unit) {
+        case "minute15":
+            return addMinutes(d, 15 * n);
+        case "minute30":
+            return addMinutes(d, 30 * n);
+        case "hour":
+            return addHours(d, n);
+        case "day":
+            return addDays(d, n);
+        case "week":
+            return addWeeks(d, n);
+        case "month":
+            return addMonths(d, n);
+        case "quarter":
+            return addQuarters(d, n);
+        case "year":
+            return addYears(d, n);
+    }
+}
+/**
+ * Creates a time scale.
+ *
+ * ```ts
+ * const scale = createTimeScale({ start: "2026-11-01", end: "2026-12-01", scale: "day", timeZone: "Europe/Istanbul", locale: "tr-TR" });
+ * scale.toPx("2026-11-02"); // 44
+ * scale.ticks("week");      // week columns starting Monday
+ * ```
+ */
+export function createTimeScale(options) {
+    const timeZone = options.timeZone ?? "UTC";
+    const unit = options.scale ?? "day";
+    const preset = TIME_SCALE_PRESETS[unit];
+    const pxPerDay = options.pxPerDay ?? preset.pxPerDay;
+    const start = toEpoch(options.start, timeZone);
+    const end = toEpoch(options.end, timeZone);
+    if (!(end > start))
+        throw new RangeError("createTimeScale: end must be after start");
+    const pxPerMs = pxPerDay / DAY_MS;
+    const weekStartsOn = (getWeekInfo(options.locale ?? "en-US").firstDay % 7);
+    const width = (end - start) * pxPerMs;
+    const toPx = (t) => (toEpoch(t, timeZone) - start) * pxPerMs;
+    const toTime = (px) => start + px / pxPerMs;
+    const tz = (ms) => new TZDate(ms, timeZone);
+    const scale = {
+        start,
+        end,
+        unit,
+        timeZone,
+        pxPerDay,
+        pxPerMs,
+        width,
+        weekStartsOn,
+        toPx,
+        toTime,
+        toDate: (px) => new Date(toTime(px)),
+        durationToPx: (ms) => ms * pxPerMs,
+        pxToDuration: (px) => px / pxPerMs,
+        snap(t, by, mode = "round") {
+            const ms = toEpoch(t, timeZone);
+            if (typeof by === "number") {
+                // Minute steps are aligned to local wall-clock hours of the zone.
+                const hour = startOfHour(tz(ms)).getTime();
+                const size = by * 60_000;
+                const k = (ms - hour) / size;
+                const n = mode === "floor" ? Math.floor(k) : mode === "ceil" ? Math.ceil(k) : Math.round(k);
+                return hour + n * size;
+            }
+            const lo = floorTo(tz(ms), by, weekStartsOn).getTime();
+            if (lo === ms || mode === "floor")
+                return lo;
+            const hi = step(tz(lo), by).getTime();
+            if (mode === "ceil")
+                return hi;
+            return ms - lo < hi - ms ? lo : hi;
+        },
+        ticks(tickUnit = preset.minor) {
+            const out = [];
+            let cur = floorTo(tz(start), tickUnit, weekStartsOn);
+            let guard = 0;
+            while (cur.getTime() < end && guard++ < 100_000) {
+                const next = step(cur, tickUnit);
+                const s = Math.max(cur.getTime(), start);
+                const e = Math.min(next.getTime(), end);
+                const tick = { unit: tickUnit, start: s, end: e, x: (s - start) * pxPerMs, width: (e - s) * pxPerMs, date: isoOf(cur) };
+                if (tickUnit === "day" && options.workCalendar)
+                    tick.working = workingValue(tick.date, options.workCalendar);
+                out.push(tick);
+                cur = next;
+            }
+            return out;
+        },
+        visibleRange(scrollLeft, viewportWidth, overscanPx = 0) {
+            const a = Math.max(0, scrollLeft - overscanPx);
+            const b = Math.min(width, scrollLeft + viewportWidth + overscanPx);
+            return { start: toTime(a), end: toTime(b) };
+        },
+        dateOf: (t) => isoOf(tz(toEpoch(t, timeZone))),
+        startOfDate: (date) => toEpoch(date, timeZone),
+    };
+    return scale;
+}
+/** Converts a minute offset into "HH:mm" (wall clock), e.g. for drag labels. */
+export function minutesToClock(minutes) {
+    const m = ((Math.round(minutes) % 1440) + 1440) % 1440;
+    return `${String(Math.floor(m / 60)).padStart(2, "0")}:${String(m % 60).padStart(2, "0")}`;
+}
+/** Parses "HH:mm" into minutes since midnight. */
+export function clockToMinutes(clock) {
+    const m = /^(\d{1,2}):(\d{2})$/.exec(clock.trim());
+    if (!m)
+        throw new RangeError(`Expected HH:mm, got "${clock}"`);
+    return Number(m[1]) * 60 + Number(m[2]);
+}

package/dist/scheduler/gantt.d.ts

@@ -0,0 +1,125 @@
+/**
+ * Gantt: a WBS treegrid (the accessible source of truth: dates, duration, progress,
+ * predecessors, all editable inline) beside a time axis with bars, summaries, milestones,
+ * finish-to-start links, a today marker and non-working days. Drag to move / resize, drag the
+ * end handle onto another bar to link. Zoom: day · week · month · quarter.
+ */
+import * as React from "react";
+import type { IsoDate, WorkCalendar } from "../locale-data/core/types.js";
+import { type GanttLinkCore, type GanttTaskCore } from "./core/gantt.js";
+import { type ScheduleTone } from "./shared.js";
+export declare const ganttLabels: {
+    plan: string;
+    task: string;
+    assignees: string;
+    start: string;
+    end: string;
+    duration: string;
+    progress: string;
+    predecessors: string;
+    zoom: string;
+    day: string;
+    week: string;
+    month: string;
+    quarter: string;
+    today: string;
+    resize: string;
+    workingDays: string;
+    days: string;
+    milestone: string;
+    summary: string;
+    overdue: string;
+    done: string;
+    cycle: string;
+    saveFailed: string;
+    empty: string;
+    emptyHint: string;
+    editHint: string;
+    invalid: string;
+    unknownTask: string;
+    moved: string;
+    linked: string;
+    unlinked: string;
+    undo: string;
+    weekShort: string;
+    quarterShort: string;
+    noOwner: string;
+};
+export type GanttLabels = typeof ganttLabels;
+export interface GanttAssignee {
+    id: string;
+    name: string;
+    avatarUrl?: string | null;
+}
+export interface GanttTask extends GanttTaskCore {
+    title: string;
+    /** 0–1 */
+    progress?: number;
+    assignees?: GanttAssignee[];
+    tone?: ScheduleTone | (string & {});
+    /** `false` locks this task's dates. */
+    editable?: boolean;
+}
+export type GanttLink = GanttLinkCore;
+export type GanttScale = "day" | "week" | "month" | "quarter";
+export type GanttColumnKey = "title" | "assignees" | "start" | "end" | "duration" | "progress" | "predecessors";
+export interface GanttTaskChange {
+    id: string;
+    start: IsoDate;
+    end: IsoDate;
+    progress?: number;
+}
+export interface GanttProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "onChange"> {
+    tasks: GanttTask[];
+    links?: GanttLink[];
+    scale?: GanttScale;
+    defaultScale?: GanttScale;
+    onScaleChange?(scale: GanttScale): void;
+    /** Scales offered in the toolbar. Default all four; `[]` hides the switch. */
+    scales?: GanttScale[];
+    workCalendar?: WorkCalendar;
+    /** How durations are counted and shown. Default `"workdays"`. */
+    durationUnit?: "workdays" | "days";
+    /** One batch per edit: the task and every successor auto-scheduling moved. Optimistic; reject to revert. */
+    onTaskChange?(changes: GanttTaskChange[]): void | Promise<void>;
+    onLinkCreate?(link: Omit<GanttLink, "id">): void | Promise<void>;
+    onLinkDelete?(id: string): void | Promise<void>;
+    /** Push FS successors when a task moves. Default true. */
+    autoSchedule?: boolean;
+    readOnly?: boolean;
+    /** Task-list columns, in order. Default title, start, end, duration, progress. */
+    columns?: GanttColumnKey[];
+    /** Task-list width in px. */
+    gridWidth?: number;
+    defaultGridWidth?: number;
+    onGridWidthChange?(px: number): void;
+    /** Collapsed summary ids. */
+    collapsed?: string[];
+    defaultCollapsed?: string[];
+    onCollapsedChange?(ids: string[]): void;
+    /** Max height of the chart (CSS length). Default `"32rem"`. */
+    height?: string | number;
+    /** Row height in px. Default from density (36 / 32). */
+    rowHeight?: number;
+    /** Rows are virtualized from this count. Default 150. */
+    virtualizeAt?: number;
+    toolbar?: React.ReactNode;
+    /** "Today" for the marker and overdue state. Default: today in the locale time zone. */
+    today?: IsoDate;
+    labels?: Partial<GanttLabels>;
+}
+export declare const ganttVariants: (props?: ({
+    framed?: boolean | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+/**
+ * ```tsx
+ * <Gantt
+ *   tasks={plan}
+ *   links={[{ id: "l1", from: "design", to: "build", type: "FS" }]}
+ *   defaultScale="week"
+ *   workCalendar={trWorkCalendar}
+ *   onTaskChange={(batch) => api.tasks.updateMany(batch)}
+ * />
+ * ```
+ */
+export declare const Gantt: React.ForwardRefExoticComponent<GanttProps & React.RefAttributes<HTMLDivElement>>;