@dataverse-kit/calendar-kit 0.1.0

package/dist/index.cjs

@@ -0,0 +1,568 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var src_exports = {};
+__export(src_exports, {
+  CalendarView: () => CalendarView,
+  GROUP_PALETTE: () => GROUP_PALETTE,
+  addDays: () => addDays,
+  browserZone: () => browserZone,
+  contrastRatio: () => contrastRatio,
+  fixedZone: () => fixedZone,
+  fromWall: () => fromWall,
+  groupColor: () => groupColor,
+  kindOf: () => kindOf,
+  normaliseFloating: () => normaliseFloating,
+  parseHex: () => parseHex,
+  readableTextOn: () => readableTextOn,
+  themeStyle: () => themeStyle,
+  toDate: () => toDate,
+  toInstant: () => toInstant,
+  toWall: () => toWall,
+  utcFieldsToWall: () => utcFieldsToWall
+});
+module.exports = __toCommonJS(src_exports);
+
+// src/view/CalendarView.tsx
+var React2 = __toESM(require("react"), 1);
+var import_react = __toESM(require("@fullcalendar/react"), 1);
+var import_daygrid = __toESM(require("@fullcalendar/react/daygrid"), 1);
+var import_timegrid = __toESM(require("@fullcalendar/react/timegrid"), 1);
+var import_list = __toESM(require("@fullcalendar/react/list"), 1);
+var import_interaction = __toESM(require("@fullcalendar/react/interaction"), 1);
+var import_classic = __toESM(require("@fullcalendar/react/themes/classic"), 1);
+var import_skeleton = require("@fullcalendar/react/skeleton.css");
+var import_theme = require("@fullcalendar/react/themes/classic/theme.css");
+var import_palette = require("@fullcalendar/react/themes/classic/palette.css");
+
+// src/core/datetime.ts
+var DATE_RE = /^(\d{4})-(\d{2})-(\d{2})$/;
+var FLOATING_RE = /^(\d{4})-(\d{2})-(\d{2})T(\d{2}):(\d{2})(?::(\d{2})(?:\.\d{1,9})?)?$/;
+var INSTANT_RE = /^\d{4}-\d{2}-\d{2}T\d{2}:\d{2}(?::\d{2}(?:\.\d{1,9})?)?(?:Z|[+-]\d{2}:?\d{2})$/i;
+var pad = (n, w = 2) => String(n).padStart(w, "0");
+var browserZone = (instant) => -instant.getTimezoneOffset();
+var fixedZone = (minutesEast) => () => minutesEast;
+function kindOf(value) {
+  if (value instanceof Date) {
+    if (Number.isNaN(value.getTime())) throw new RangeError("Invalid Date");
+    return "instant";
+  }
+  const local = DATE_RE.test(value) ? "date" : FLOATING_RE.test(value) ? "floating" : null;
+  if (local) {
+    const m = FLOATING_RE.exec(value) ?? DATE_RE.exec(value);
+    const [, y, mo, d, h = "0", mi = "0", sec = "0"] = m;
+    const t = new Date(Date.UTC(+y, +mo - 1, +d, +h, +mi, +sec));
+    if (t.getUTCFullYear() !== +y || t.getUTCMonth() !== +mo - 1 || t.getUTCDate() !== +d || +h > 23 || +mi > 59 || +sec > 59) {
+      throw new RangeError(`Not a real calendar date or time: ${JSON.stringify(value)}`);
+    }
+    return local;
+  }
+  if (INSTANT_RE.test(value) && !Number.isNaN(new Date(value).getTime())) return "instant";
+  throw new RangeError(`Not an ISO-8601 date, wall-clock time or instant: ${JSON.stringify(value)}`);
+}
+function toInstant(value) {
+  if (value instanceof Date) return value.toISOString();
+  if (kindOf(value) !== "instant") throw new RangeError(`Not an instant: ${value}`);
+  return new Date(value).toISOString();
+}
+function wallMillis(wall) {
+  const m = FLOATING_RE.exec(wall) ?? DATE_RE.exec(wall);
+  if (!m) throw new RangeError(`Not a date or wall-clock time: ${wall}`);
+  const [, y, mo, d, h = "0", mi = "0", s = "0"] = m;
+  return Date.UTC(+y, +mo - 1, +d, +h, +mi, +s);
+}
+function formatWall(ms) {
+  const d = new Date(ms);
+  return `${d.getUTCFullYear()}-${pad(d.getUTCMonth() + 1)}-${pad(d.getUTCDate())}T${pad(d.getUTCHours())}:${pad(d.getUTCMinutes())}:${pad(d.getUTCSeconds())}`;
+}
+function toWall(instant, zone) {
+  const at = instant instanceof Date ? instant : new Date(toInstant(instant));
+  return formatWall(at.getTime() + zone(at) * 6e4);
+}
+function fromWall(wall, zone) {
+  const w = wallMillis(wall);
+  const before = zone(new Date(w - 864e5));
+  const after = zone(new Date(w + 864e5));
+  const fits = (offset) => {
+    const t2 = w - offset * 6e4;
+    return zone(new Date(t2)) === offset ? t2 : null;
+  };
+  const candidates = [fits(before), fits(after)].filter((t2) => t2 !== null);
+  const t = candidates.length > 0 ? Math.min(...candidates) : w - before * 6e4;
+  return new Date(t).toISOString();
+}
+function toDate(value, zone) {
+  const k = kindOf(value);
+  if (k === "date") return value;
+  if (k === "floating") return value.slice(0, 10);
+  return toWall(value, zone).slice(0, 10);
+}
+function addDays(date, days) {
+  if (kindOf(date) !== "date") throw new RangeError(`addDays needs a date, got ${date}`);
+  return formatWall(wallMillis(date) + days * 864e5).slice(0, 10);
+}
+function utcFieldsToWall(d) {
+  return formatWall(d.getTime());
+}
+function normaliseFloating(value) {
+  return formatWall(wallMillis(value));
+}
+
+// src/core/colors.ts
+var GROUP_PALETTE = [
+  "#0f6cbd",
+  // blue
+  "#107c10",
+  // green
+  "#c50f1f",
+  // red
+  "#8764b8",
+  // lavender
+  "#ae4b00",
+  // dark orange
+  "#03787c",
+  // teal
+  "#4f52b2",
+  // indigo
+  "#8a5b00",
+  // dark gold
+  "#c0077d",
+  // magenta
+  "#5c2e91"
+  // purple
+];
+function hash(key) {
+  let h = 2166136261;
+  for (let i = 0; i < key.length; i++) {
+    h ^= key.charCodeAt(i);
+    h = Math.imul(h, 16777619);
+  }
+  return h >>> 0;
+}
+function groupColor(key, palette = GROUP_PALETTE) {
+  return palette[hash(key) % palette.length];
+}
+function parseHex(color) {
+  const m = /^#?([0-9a-f]{3}|[0-9a-f]{6})$/i.exec(color.trim());
+  if (!m) return null;
+  const h = m[1].length === 3 ? m[1].replace(/./g, (c) => c + c) : m[1];
+  return [0, 2, 4].map((i) => parseInt(h.slice(i, i + 2), 16));
+}
+function luminance([r, g, b]) {
+  const lin = (c) => {
+    const s = c / 255;
+    return s <= 0.03928 ? s / 12.92 : ((s + 0.055) / 1.055) ** 2.4;
+  };
+  return 0.2126 * lin(r) + 0.7152 * lin(g) + 0.0722 * lin(b);
+}
+function contrastRatio(a, b) {
+  const pa = parseHex(a);
+  const pb = parseHex(b);
+  if (!pa || !pb) return null;
+  const [hi, lo] = [luminance(pa), luminance(pb)].sort((x, y) => y - x);
+  return (hi + 0.05) / (lo + 0.05);
+}
+function readableTextOn(background) {
+  const onWhite = contrastRatio(background, "#ffffff");
+  const onBlack = contrastRatio(background, "#000000");
+  if (onWhite === null || onBlack === null) return void 0;
+  return onWhite >= onBlack ? "#ffffff" : "#000000";
+}
+
+// src/view/fcBridge.ts
+function toFcValue(value, zone) {
+  const k = kindOf(value);
+  if (k === "instant") return toWall(value, zone);
+  if (k === "floating") return normaliseFloating(value);
+  return value;
+}
+function exclusiveAllDayEnd(end, zone) {
+  const wall = toFcValue(end, zone);
+  if (wall.length === 10) return wall;
+  return wall.slice(11, 19) === "00:00:00" ? wall.slice(0, 10) : addDays(wall.slice(0, 10), 1);
+}
+function toFcEvent(event, zone) {
+  const originalKind = kindOf(event.start);
+  const allDay = event.allDay ?? originalKind === "date";
+  const start = allDay ? toFcValue(event.start, zone).slice(0, 10) : toFcValue(event.start, zone);
+  const out = {
+    id: event.id,
+    title: event.title,
+    start,
+    allDay,
+    extendedProps: { source: event, kind: allDay ? "date" : originalKind, originalKind }
+  };
+  if (event.end !== void 0) out.end = allDay ? exclusiveAllDayEnd(event.end, zone) : toFcValue(event.end, zone);
+  if (event.color) {
+    out.color = event.color;
+    const text = readableTextOn(event.color);
+    if (text) out.textColor = text;
+  }
+  if (event.readOnly) out.editable = false;
+  else if (event.end === void 0) out.durationEditable = false;
+  return out;
+}
+function fromFcDate(d, kind, zone) {
+  const wall = utcFieldsToWall(d);
+  if (kind === "date") return wall.slice(0, 10);
+  if (kind === "floating") return wall;
+  return fromWall(wall, zone);
+}
+function asKind(value, from, target, zone) {
+  if (from === target || from !== "date") return value;
+  return target === "instant" ? fromWall(`${value}T00:00:00`, zone) : `${value}T00:00:00`;
+}
+function canonical(value) {
+  const k = kindOf(value);
+  return k === "instant" ? toInstant(value) : k === "floating" ? normaliseFloating(value) : value;
+}
+function toChange(fcEvent, kind, zone) {
+  const { source, kind: valueKind, originalKind } = fcEvent.extendedProps;
+  if (!fcEvent.start) throw new Error(`FullCalendar returned no start for event ${source.id}`);
+  const back = (d) => asKind(fromFcDate(d, valueKind, zone), valueKind, originalKind ?? valueKind, zone);
+  return {
+    event: source,
+    kind,
+    // ★ A RESIZE never moves the start. Recomputing it from FullCalendar's wall-clock Date is
+    //   lossy on the fall-back day (the second 01:30 reads back as the first), and toWebApiPatch
+    //   writes `start` unconditionally — so resizing an end silently moved the start an hour.
+    start: kind === "resize" ? canonical(source.start) : back(fcEvent.start),
+    end: fcEvent.end ? back(fcEvent.end) : void 0,
+    allDay: fcEvent.allDay
+  };
+}
+function toSelection(start, end, allDay, zone) {
+  const kind = allDay ? "date" : "instant";
+  return { start: fromFcDate(start, kind, zone), end: fromFcDate(end, kind, zone), allDay };
+}
+function toVisibleRange(start, end, view, zone) {
+  return {
+    start: fromFcDate(start, "instant", zone),
+    end: fromFcDate(end, "instant", zone),
+    view,
+    startDate: utcFieldsToWall(start).slice(0, 10),
+    endDate: utcFieldsToWall(end).slice(0, 10)
+  };
+}
+var nowWall = (zone) => toWall(/* @__PURE__ */ new Date(), zone);
+var sameAllDayness = (spanAllDay, eventAllDay) => spanAllDay === eventAllDay;
+var same = (a, b) => {
+  if (a === void 0 || b === void 0) return a === b;
+  const ka = kindOf(a);
+  if (ka !== kindOf(b)) return false;
+  if (ka === "instant") return new Date(a).getTime() === new Date(b).getTime();
+  return ka === "floating" ? normaliseFloating(a) === normaliseFloating(b) : a === b;
+};
+function applyPending(events, pending) {
+  if (pending.size === 0) return events;
+  return events.map((e) => {
+    const p = pending.get(e.id);
+    return p ? { ...e, start: p.start, end: p.end, allDay: p.allDay } : e;
+  });
+}
+function settledIds(events, pending) {
+  const byId = new Map(events.map((e) => [e.id, e]));
+  const done = [];
+  for (const [id, p] of pending) {
+    const e = byId.get(id);
+    if (!e || same(e.start, p.start) && same(e.end, p.end) || p.savedWith !== void 0 && p.savedWith !== events) done.push(id);
+  }
+  return done;
+}
+
+// src/view/useOptimisticChanges.ts
+var React = __toESM(require("react"), 1);
+function describe(error) {
+  const m = error?.message;
+  return typeof m === "string" && m ? m : String(error);
+}
+function useOptimisticChanges(events, onEventChange, onChangeError, zoneRef) {
+  const [pending, setPending] = React.useState(() => /* @__PURE__ */ new Map());
+  const [error, setError] = React.useState(null);
+  const eventsRef = React.useRef(events);
+  eventsRef.current = events;
+  const latest = React.useRef(/* @__PURE__ */ new Map());
+  const seq = React.useRef(0);
+  const mounted = React.useRef(true);
+  React.useEffect(() => {
+    mounted.current = true;
+    return () => {
+      mounted.current = false;
+    };
+  }, []);
+  React.useEffect(() => {
+    const done = settledIds(events, pending);
+    if (done.length === 0) return;
+    for (const id of done) if (latest.current.get(id) === pending.get(id)?.token) latest.current.delete(id);
+    setPending((prev) => {
+      const next = new Map(prev);
+      for (const id of done) next.delete(id);
+      return next;
+    });
+  }, [events, pending]);
+  const handleChange = React.useCallback(
+    (kind) => (info) => {
+      if (!onEventChange) {
+        info.revert();
+        return;
+      }
+      let change;
+      try {
+        change = toChange(info.event, kind, zoneRef.current);
+      } catch (e) {
+        info.revert();
+        setError(describe(e));
+        return;
+      }
+      setError(null);
+      const id = change.event.id;
+      const token = ++seq.current;
+      const fail = (err) => {
+        const current = latest.current.get(id) === token;
+        if (current) latest.current.delete(id);
+        onChangeError?.(err, change);
+        if (!mounted.current) return;
+        setError(`Could not save "${change.event.title}": ${describe(err)}`);
+        if (!current) return;
+        setPending((prev) => {
+          if (!prev.has(id)) return prev;
+          const next = new Map(prev);
+          next.delete(id);
+          return next;
+        });
+        try {
+          info.revert();
+        } catch {
+        }
+      };
+      latest.current.set(id, token);
+      let result;
+      try {
+        result = onEventChange(change);
+      } catch (err) {
+        fail(err);
+        return;
+      }
+      if (!result || typeof result.then !== "function") {
+        if (latest.current.get(id) === token) latest.current.delete(id);
+        return;
+      }
+      setPending((prev) => new Map(prev).set(id, { start: change.start, end: change.end, allDay: change.allDay, token }));
+      result.then(
+        () => {
+          if (!mounted.current || latest.current.get(id) !== token) return;
+          const savedWith = eventsRef.current;
+          setPending((prev) => {
+            const p = prev.get(id);
+            if (!p || p.token !== token) return prev;
+            return new Map(prev).set(id, { ...p, savedWith });
+          });
+        },
+        fail
+      );
+    },
+    [onEventChange, onChangeError, zoneRef]
+  );
+  return { pending, error, dismissError: React.useCallback(() => setError(null), []), handleChange };
+}
+
+// src/view/theme.ts
+var VAR = {
+  primary: "--fc-classic-primary",
+  primaryForeground: "--fc-classic-primary-foreground",
+  background: "--fc-classic-background",
+  foreground: "--fc-classic-foreground",
+  mutedForeground: "--fc-classic-muted-foreground",
+  faint: "--fc-classic-faint",
+  muted: "--fc-classic-muted",
+  strong: "--fc-classic-strong",
+  border: "--fc-classic-border",
+  strongBorder: "--fc-classic-strong-border",
+  today: "--fc-classic-today",
+  highlight: "--fc-classic-highlight",
+  now: "--fc-classic-now",
+  button: "--fc-classic-button",
+  buttonForeground: "--fc-classic-button-foreground",
+  buttonBorder: "--fc-classic-button-border",
+  buttonStrong: "--fc-classic-button-strong",
+  buttonStrongBorder: "--fc-classic-button-strong-border"
+};
+function themeStyle(theme) {
+  const style = {};
+  if (!theme) return style;
+  for (const [key, cssVar] of Object.entries(VAR)) {
+    const v = theme[key];
+    if (v) style[cssVar] = v;
+  }
+  if (theme.fontFamily) style.fontFamily = theme.fontFamily;
+  if (theme.fontSize) style.fontSize = theme.fontSize;
+  if (theme.background) style.background = theme.background;
+  if (theme.foreground) style.color = theme.foreground;
+  return style;
+}
+
+// src/view/CalendarView.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+var FC_VIEW = {
+  month: "dayGridMonth",
+  week: "timeGridWeek",
+  workWeek: "timeGridWorkWeek",
+  day: "timeGridDay",
+  list: "listWeek"
+};
+var VIEW_LABEL = {
+  month: "Month",
+  week: "Week",
+  workWeek: "Work week",
+  day: "Day",
+  list: "List"
+};
+var asChangeInfo = (info) => ({
+  event: {
+    start: info.event.start,
+    end: info.event.end,
+    allDay: info.event.allDay,
+    extendedProps: info.event.extendedProps
+  },
+  revert: () => info.revert()
+});
+var bannerStyle = {
+  display: "flex",
+  alignItems: "center",
+  gap: 8,
+  padding: "6px 10px",
+  marginBottom: 6,
+  borderRadius: 4,
+  border: "1px solid currentColor"
+};
+function CalendarView(props) {
+  const zone = props.zone ?? browserZone;
+  const zoneRef = React2.useRef(zone);
+  zoneRef.current = zone;
+  const { pending, error, dismissError, handleChange } = useOptimisticChanges(
+    props.events,
+    props.onEventChange,
+    props.onChangeError,
+    zoneRef
+  );
+  const fcEvents = React2.useMemo(
+    () => applyPending(props.events, pending).map((e) => toFcEvent(e, zone)),
+    [props.events, pending, zone]
+  );
+  const views = props.views ?? ["month", "week", "day", "list"];
+  const optional = {};
+  if (props.firstDay !== void 0) optional.firstDay = props.firstDay;
+  if (props.slotMinTime !== void 0) optional.slotMinTime = props.slotMinTime;
+  if (props.slotMaxTime !== void 0) optional.slotMaxTime = props.slotMaxTime;
+  if (props.initialDate !== void 0) optional.initialDate = props.initialDate;
+  if (props.classNames?.button) optional.buttonClass = props.classNames.button;
+  if (props.classNames?.toolbar) optional.headerToolbarClass = props.classNames.toolbar;
+  if (props.businessHours) optional.businessHours = props.businessHours.map((b) => ({ ...b, daysOfWeek: [...b.daysOfWeek] }));
+  const selectable = props.selectable ?? !!props.onSelectRange;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    "div",
+    {
+      className: props.className,
+      style: themeStyle(props.theme),
+      role: "region",
+      "aria-label": props["aria-label"] ?? "Calendar",
+      "aria-busy": props.loading || void 0,
+      "data-calendar-kit": "",
+      children: [
+        error && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { role: "alert", style: { ...bannerStyle, color: props.theme?.error ?? "#a4262c" }, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { style: { flex: 1 }, children: error }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", { type: "button", onClick: dismissError, "aria-label": "Dismiss", style: { font: "inherit" }, children: "\xD7" })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_react.default,
+          {
+            plugins: [import_daygrid.default, import_timegrid.default, import_list.default, import_interaction.default, import_classic.default],
+            timeZone: "UTC",
+            now: () => nowWall(zoneRef.current),
+            initialView: FC_VIEW[props.view ?? "week"],
+            views: { timeGridWorkWeek: { type: "timeGridWeek", hiddenDays: [0, 6] } },
+            headerToolbar: {
+              start: "today prev,next",
+              center: "title",
+              end: views.map((v) => FC_VIEW[v]).join(",")
+            },
+            buttons: {
+              today: { text: "Today" },
+              ...Object.fromEntries(views.map((v) => [FC_VIEW[v], { text: VIEW_LABEL[v] }]))
+            },
+            height: props.height ?? "auto",
+            events: fcEvents,
+            editable: !!props.editable && !!props.onEventChange,
+            selectable,
+            selectMirror: true,
+            nowIndicator: true,
+            dayMaxEvents: true,
+            ...optional,
+            scrollTime: props.scrollTime ?? "08:00:00",
+            eventAllow: (span, moving) => moving ? sameAllDayness(span.allDay, moving.allDay) : true,
+            datesSet: (info) => props.onRangeChange?.(toVisibleRange(info.start, info.end, info.view.type, zoneRef.current)),
+            eventClick: (info) => {
+              info.jsEvent.preventDefault();
+              const source = info.event.extendedProps.source;
+              if (source) props.onEventClick?.(source);
+            },
+            select: (info) => {
+              props.onSelectRange?.(toSelection(info.start, info.end, info.allDay, zoneRef.current));
+              info.view.calendar.unselect();
+            },
+            eventDrop: (info) => handleChange("move")(asChangeInfo(info)),
+            eventResize: (info) => handleChange("resize")(asChangeInfo(info))
+          }
+        )
+      ]
+    }
+  );
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  CalendarView,
+  GROUP_PALETTE,
+  addDays,
+  browserZone,
+  contrastRatio,
+  fixedZone,
+  fromWall,
+  groupColor,
+  kindOf,
+  normaliseFloating,
+  parseHex,
+  readableTextOn,
+  themeStyle,
+  toDate,
+  toInstant,
+  toWall,
+  utcFieldsToWall
+});
+//# sourceMappingURL=index.cjs.map