@geomak/ui 6.26.1 → 6.27.0

package/dist/index.cjs

@@ -2947,6 +2947,7 @@ function Scheduler({
   onSelectSlot,
   onSelectEvent,
   onNewEvent,
+  onError,
   className = "",
   style
 }) {
@@ -2955,9 +2956,11 @@ function Scheduler({
   const [cursor, setCursor] = React29.useState(() => defaultDate ?? /* @__PURE__ */ new Date());
   const [loaded, setLoaded] = React29.useState([]);
   const [loading, setLoading] = React29.useState(false);
+  const [error, setError] = React29.useState(null);
+  const [reloadKey, setReloadKey] = React29.useState(0);
   const [dir, setDir] = React29.useState(0);
-  const loaderRef = React29.useRef(loadEvents);
-  loaderRef.current = loadEvents;
+  const cbRef = React29.useRef({ loadEvents, onError });
+  cbRef.current = { loadEvents, onError };
   const range = React29.useMemo(
     () => view === "month" ? monthRange(cursor) : weekRange(cursor, weekStartsOn),
     [view, cursor, weekStartsOn]
@@ -2965,21 +2968,26 @@ function Scheduler({
   const fromKey = range.from.getTime();
   const toKey = range.to.getTime();
   React29.useEffect(() => {
-    const loader = loaderRef.current;
+    const { loadEvents: loader, onError: onErr } = cbRef.current;
     if (!loader) return;
     let cancelled = false;
     setLoading(true);
+    setError(null);
     Promise.resolve(loader({ from: new Date(fromKey), to: new Date(toKey) }, view)).then((evts) => {
       if (!cancelled) setLoaded(evts);
-    }).catch(() => {
-      if (!cancelled) setLoaded([]);
+    }).catch((err) => {
+      if (!cancelled) {
+        setError(err ?? new Error("Failed to load events"));
+        onErr?.(err);
+      }
     }).finally(() => {
       if (!cancelled) setLoading(false);
     });
     return () => {
       cancelled = true;
     };
-  }, [fromKey, toKey, view]);
+  }, [fromKey, toKey, view, reloadKey]);
+  const retry = React29.useCallback(() => setReloadKey((k) => k + 1), []);
   const events = React29.useMemo(
     () => (controlledEvents ?? loaded).map(normalize),
     [controlledEvents, loaded]
@@ -3032,7 +3040,7 @@ function Scheduler({
             onNewEvent && /* @__PURE__ */ jsxRuntime.jsx(Button_default, { size: "sm", icon: /* @__PURE__ */ jsxRuntime.jsx(Plus, {}), content: "New event", onClick: onNewEvent })
           ] })
         ] }),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative flex-1 overflow-hidden", children: /* @__PURE__ */ jsxRuntime.jsx(
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative flex-1 overflow-hidden", children: error ? /* @__PURE__ */ jsxRuntime.jsx(SchedulerError, { onRetry: retry }) : loadEvents && loading && events.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx(SchedulerSkeleton, { view }) : /* @__PURE__ */ jsxRuntime.jsx(
           framerMotion.motion.div,
           {
             initial: { opacity: 0, x: reduced ? 0 : dir * 24 },
@@ -3067,6 +3075,36 @@ function Scheduler({
     }
   );
 }
+function SchedulerSkeleton({ view }) {
+  const bar = "rounded bg-background animate-pulse";
+  if (view === "week") {
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex h-full flex-col p-3", "aria-hidden": "true", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-3 grid gap-2", style: { gridTemplateColumns: "3.5rem repeat(7, 1fr)" }, children: [
+        /* @__PURE__ */ jsxRuntime.jsx("span", {}),
+        Array.from({ length: 7 }, (_, i) => /* @__PURE__ */ jsxRuntime.jsx("span", { className: `${bar} mx-auto h-8 w-8 rounded-full` }, i))
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-1 flex-col gap-3", children: Array.from({ length: 8 }, (_, i) => /* @__PURE__ */ jsxRuntime.jsx("span", { className: `${bar} h-6`, style: { width: `${60 + i * 13 % 35}%` } }, i)) })
+    ] });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex h-full flex-col p-3", "aria-hidden": "true", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-3 grid grid-cols-7 gap-2", children: Array.from({ length: 7 }, (_, i) => /* @__PURE__ */ jsxRuntime.jsx("span", { className: `${bar} h-2.5` }, i)) }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid flex-1 grid-cols-7 grid-rows-5 gap-2", children: Array.from({ length: 35 }, (_, i) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-1.5", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("span", { className: `${bar} h-5 w-5 rounded-full` }),
+      i % 3 === 0 && /* @__PURE__ */ jsxRuntime.jsx("span", { className: `${bar} h-3` }),
+      i % 5 === 0 && /* @__PURE__ */ jsxRuntime.jsx("span", { className: `${bar} h-3`, style: { width: "70%" } })
+    ] }, i)) })
+  ] });
+}
+function SchedulerError({ onRetry }) {
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { role: "alert", className: "flex h-full flex-col items-center justify-center gap-3 p-8 text-center", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex h-10 w-10 items-center justify-center rounded-full text-status-error", style: { backgroundColor: "color-mix(in oklab, var(--color-error) 12%, var(--color-surface))" }, children: /* @__PURE__ */ jsxRuntime.jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, "aria-hidden": "true", className: "h-5 w-5", children: /* @__PURE__ */ jsxRuntime.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M12 9v4m0 4h.01M10.3 3.9 1.8 18a2 2 0 0 0 1.7 3h16.94a2 2 0 0 0 1.7-3L13.7 3.9a2 2 0 0 0-3.4 0z" }) }) }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-sm font-semibold text-foreground", children: "Couldn\u2019t load events" }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-0.5 text-xs text-foreground-muted", children: "Something went wrong fetching this range." })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx(Button_default, { size: "sm", variant: "secondary", content: "Retry", onClick: onRetry })
+  ] });
+}
 function MonthYearPicker({ label, cursor, onPick }) {
   const [open, setOpen] = React29.useState(false);
   const [viewYear, setViewYear] = React29.useState(cursor.getFullYear());