@geomak/ui 6.26.1 → 6.27.0

package/dist/index.d.cts

@@ -1616,6 +1616,8 @@ interface SchedulerProps {
     onSelectEvent?: (event: SchedulerEvent) => void;
     /** Click the "New event" toolbar button. Omit to hide it. */
     onNewEvent?: () => void;
+    /** Called when `loadEvents` rejects. The Scheduler also shows a retry state. */
+    onError?: (error: unknown) => void;
     className?: string;
     style?: React__default.CSSProperties;
 }
@@ -1634,7 +1636,7 @@ interface SchedulerProps {
  *   onNewEvent={() => create()}
  * />
  */
-declare function Scheduler({ events: controlledEvents, loadEvents, defaultView, defaultDate, weekStartsOn, dayHours, hourHeight, onSelectSlot, onSelectEvent, onNewEvent, className, style, }: SchedulerProps): react_jsx_runtime.JSX.Element;
+declare function Scheduler({ events: controlledEvents, loadEvents, defaultView, defaultDate, weekStartsOn, dayHours, hourHeight, onSelectSlot, onSelectEvent, onNewEvent, onError, className, style, }: SchedulerProps): react_jsx_runtime.JSX.Element;
 
 interface CartLineItem {
     id: string | number;

package/dist/index.d.ts

@@ -1616,6 +1616,8 @@ interface SchedulerProps {
     onSelectEvent?: (event: SchedulerEvent) => void;
     /** Click the "New event" toolbar button. Omit to hide it. */
     onNewEvent?: () => void;
+    /** Called when `loadEvents` rejects. The Scheduler also shows a retry state. */
+    onError?: (error: unknown) => void;
     className?: string;
     style?: React__default.CSSProperties;
 }
@@ -1634,7 +1636,7 @@ interface SchedulerProps {
  *   onNewEvent={() => create()}
  * />
  */
-declare function Scheduler({ events: controlledEvents, loadEvents, defaultView, defaultDate, weekStartsOn, dayHours, hourHeight, onSelectSlot, onSelectEvent, onNewEvent, className, style, }: SchedulerProps): react_jsx_runtime.JSX.Element;
+declare function Scheduler({ events: controlledEvents, loadEvents, defaultView, defaultDate, weekStartsOn, dayHours, hourHeight, onSelectSlot, onSelectEvent, onNewEvent, onError, className, style, }: SchedulerProps): react_jsx_runtime.JSX.Element;
 
 interface CartLineItem {
     id: string | number;

package/dist/index.js

@@ -2910,6 +2910,7 @@ function Scheduler({
   onSelectSlot,
   onSelectEvent,
   onNewEvent,
+  onError,
   className = "",
   style
 }) {
@@ -2918,9 +2919,11 @@ function Scheduler({
   const [cursor, setCursor] = useState(() => defaultDate ?? /* @__PURE__ */ new Date());
   const [loaded, setLoaded] = useState([]);
   const [loading, setLoading] = useState(false);
+  const [error, setError] = useState(null);
+  const [reloadKey, setReloadKey] = useState(0);
   const [dir, setDir] = useState(0);
-  const loaderRef = useRef(loadEvents);
-  loaderRef.current = loadEvents;
+  const cbRef = useRef({ loadEvents, onError });
+  cbRef.current = { loadEvents, onError };
   const range = useMemo(
     () => view === "month" ? monthRange(cursor) : weekRange(cursor, weekStartsOn),
     [view, cursor, weekStartsOn]
@@ -2928,21 +2931,26 @@ function Scheduler({
   const fromKey = range.from.getTime();
   const toKey = range.to.getTime();
   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 = useCallback(() => setReloadKey((k) => k + 1), []);
   const events = useMemo(
     () => (controlledEvents ?? loaded).map(normalize),
     [controlledEvents, loaded]
@@ -2995,7 +3003,7 @@ function Scheduler({
             onNewEvent && /* @__PURE__ */ jsx(Button_default, { size: "sm", icon: /* @__PURE__ */ jsx(Plus, {}), content: "New event", onClick: onNewEvent })
           ] })
         ] }),
-        /* @__PURE__ */ jsx("div", { className: "relative flex-1 overflow-hidden", children: /* @__PURE__ */ jsx(
+        /* @__PURE__ */ jsx("div", { className: "relative flex-1 overflow-hidden", children: error ? /* @__PURE__ */ jsx(SchedulerError, { onRetry: retry }) : loadEvents && loading && events.length === 0 ? /* @__PURE__ */ jsx(SchedulerSkeleton, { view }) : /* @__PURE__ */ jsx(
           motion.div,
           {
             initial: { opacity: 0, x: reduced ? 0 : dir * 24 },
@@ -3030,6 +3038,36 @@ function Scheduler({
     }
   );
 }
+function SchedulerSkeleton({ view }) {
+  const bar = "rounded bg-background animate-pulse";
+  if (view === "week") {
+    return /* @__PURE__ */ jsxs("div", { className: "flex h-full flex-col p-3", "aria-hidden": "true", children: [
+      /* @__PURE__ */ jsxs("div", { className: "mb-3 grid gap-2", style: { gridTemplateColumns: "3.5rem repeat(7, 1fr)" }, children: [
+        /* @__PURE__ */ jsx("span", {}),
+        Array.from({ length: 7 }, (_, i) => /* @__PURE__ */ jsx("span", { className: `${bar} mx-auto h-8 w-8 rounded-full` }, i))
+      ] }),
+      /* @__PURE__ */ jsx("div", { className: "flex flex-1 flex-col gap-3", children: Array.from({ length: 8 }, (_, i) => /* @__PURE__ */ jsx("span", { className: `${bar} h-6`, style: { width: `${60 + i * 13 % 35}%` } }, i)) })
+    ] });
+  }
+  return /* @__PURE__ */ jsxs("div", { className: "flex h-full flex-col p-3", "aria-hidden": "true", children: [
+    /* @__PURE__ */ jsx("div", { className: "mb-3 grid grid-cols-7 gap-2", children: Array.from({ length: 7 }, (_, i) => /* @__PURE__ */ jsx("span", { className: `${bar} h-2.5` }, i)) }),
+    /* @__PURE__ */ jsx("div", { className: "grid flex-1 grid-cols-7 grid-rows-5 gap-2", children: Array.from({ length: 35 }, (_, i) => /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1.5", children: [
+      /* @__PURE__ */ jsx("span", { className: `${bar} h-5 w-5 rounded-full` }),
+      i % 3 === 0 && /* @__PURE__ */ jsx("span", { className: `${bar} h-3` }),
+      i % 5 === 0 && /* @__PURE__ */ jsx("span", { className: `${bar} h-3`, style: { width: "70%" } })
+    ] }, i)) })
+  ] });
+}
+function SchedulerError({ onRetry }) {
+  return /* @__PURE__ */ jsxs("div", { role: "alert", className: "flex h-full flex-col items-center justify-center gap-3 p-8 text-center", children: [
+    /* @__PURE__ */ 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__ */ jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, "aria-hidden": "true", className: "h-5 w-5", children: /* @__PURE__ */ 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__ */ jsxs("div", { children: [
+      /* @__PURE__ */ jsx("div", { className: "text-sm font-semibold text-foreground", children: "Couldn\u2019t load events" }),
+      /* @__PURE__ */ jsx("div", { className: "mt-0.5 text-xs text-foreground-muted", children: "Something went wrong fetching this range." })
+    ] }),
+    /* @__PURE__ */ jsx(Button_default, { size: "sm", variant: "secondary", content: "Retry", onClick: onRetry })
+  ] });
+}
 function MonthYearPicker({ label, cursor, onPick }) {
   const [open, setOpen] = useState(false);
   const [viewYear, setViewYear] = useState(cursor.getFullYear());