@multiplatform.one/components 5.0.26 → 6.0.0

package/dist/cjs/views/Calendar.cjs

@@ -0,0 +1,439 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+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 __toCommonJS = mod => __copyProps(__defProp({}, "__esModule", {
+  value: true
+}), mod);
+var Calendar_exports = {};
+__export(Calendar_exports, {
+  Calendar: () => Calendar
+});
+module.exports = __toCommonJS(Calendar_exports);
+var import_componentColors = require("../componentColors.cjs");
+var import_theme = require("@multiplatform.one/theme");
+var import_react = require("react");
+var import_forms = require("@multiplatform.one/forms");
+var import_tamagui = require("tamagui");
+var import_jsx_runtime = require("react/jsx-runtime");
+function getMonthDays(date, firstDayOfWeek) {
+  const year = date.getFullYear();
+  const month = date.getMonth();
+  const firstDay = new Date(year, month, 1);
+  const lastDay = new Date(year, month + 1, 0);
+  let startOffset = firstDay.getDay() - firstDayOfWeek;
+  if (startOffset < 0) startOffset += 7;
+  const totalDays = startOffset + lastDay.getDate();
+  const totalRows = Math.ceil(totalDays / 7);
+  const totalCells = totalRows * 7;
+  const days = [];
+  for (let i = 0; i < totalCells; i++) {
+    days.push(new Date(year, month, 1 - startOffset + i));
+  }
+  return days;
+}
+function getWeekDays(date, firstDayOfWeek) {
+  const days = [];
+  const dayOfWeek = date.getDay();
+  let startOffset = dayOfWeek - firstDayOfWeek;
+  if (startOffset < 0) startOffset += 7;
+  const startDate = new Date(date);
+  startDate.setDate(date.getDate() - startOffset);
+  for (let i = 0; i < 7; i++) {
+    const day = new Date(startDate);
+    day.setDate(startDate.getDate() + i);
+    days.push(day);
+  }
+  return days;
+}
+function formatDateKey(date) {
+  return date.toISOString().split("T")[0];
+}
+function isSameDay(d1, d2) {
+  return d1.getFullYear() === d2.getFullYear() && d1.getMonth() === d2.getMonth() && d1.getDate() === d2.getDate();
+}
+function isToday(date) {
+  return isSameDay(date, /* @__PURE__ */new Date());
+}
+function getWeekdayNames() {
+  const formatter = new Intl.DateTimeFormat(void 0, {
+    weekday: "short"
+  });
+  return Array.from({
+    length: 7
+  }, (_, i) => formatter.format(new Date(2004, 0, 4 + i)));
+}
+function getMonthNames() {
+  const formatter = new Intl.DateTimeFormat(void 0, {
+    month: "long"
+  });
+  return Array.from({
+    length: 12
+  }, (_, i) => formatter.format(new Date(2e3, i, 1)));
+}
+function getHours() {
+  return Array.from({
+    length: 24
+  }, (_, i) => i);
+}
+function formatHour(hour) {
+  const date = new Date(2e3, 0, 1, hour, 0, 0);
+  return new Intl.DateTimeFormat(void 0, {
+    hour: "numeric",
+    hour12: true
+  }).format(date);
+}
+const weekdayNames = getWeekdayNames();
+const monthNames = getMonthNames();
+function Calendar({
+  events,
+  renderEvent,
+  onDateSelect,
+  onEventClick,
+  viewType: initialViewType = "month",
+  initialDate,
+  height = 600,
+  showNavigation = true,
+  showViewSwitcher = true,
+  firstDayOfWeek = 0,
+  ...stackProps
+}) {
+  const {
+    knobProps
+  } = (0, import_theme.useResolvedKnobs)();
+  const [currentDate, setCurrentDate] = (0, import_react.useState)(initialDate ?? /* @__PURE__ */new Date());
+  const [view, setView] = (0, import_react.useState)(initialViewType);
+  const eventsByDate = (0, import_react.useMemo)(() => {
+    const grouped = {};
+    for (const event of events) {
+      const key = formatDateKey(event.start);
+      if (!grouped[key]) grouped[key] = [];
+      grouped[key].push(event);
+    }
+    return grouped;
+  }, [events]);
+  const goToPrevious = (0, import_react.useCallback)(() => {
+    setCurrentDate(prev => {
+      const next = new Date(prev);
+      if (view === "month") next.setMonth(prev.getMonth() - 1);else if (view === "week") next.setDate(prev.getDate() - 7);else next.setDate(prev.getDate() - 1);
+      return next;
+    });
+  }, [view]);
+  const goToNext = (0, import_react.useCallback)(() => {
+    setCurrentDate(prev => {
+      const next = new Date(prev);
+      if (view === "month") next.setMonth(prev.getMonth() + 1);else if (view === "week") next.setDate(prev.getDate() + 7);else next.setDate(prev.getDate() + 1);
+      return next;
+    });
+  }, [view]);
+  const goToToday = (0, import_react.useCallback)(() => {
+    setCurrentDate(/* @__PURE__ */new Date());
+  }, []);
+  const displayTitle = (0, import_react.useMemo)(() => {
+    if (view === "month") {
+      return `${monthNames[currentDate.getMonth()]} ${currentDate.getFullYear()}`;
+    }
+    if (view === "week") {
+      const weekDays = getWeekDays(currentDate, firstDayOfWeek);
+      const start = weekDays[0];
+      const end = weekDays[6];
+      if (start.getMonth() === end.getMonth()) {
+        return `${monthNames[start.getMonth()]} ${start.getDate()} - ${end.getDate()}, ${start.getFullYear()}`;
+      }
+      return `${monthNames[start.getMonth()]} ${start.getDate()} - ${monthNames[end.getMonth()]} ${end.getDate()}, ${end.getFullYear()}`;
+    }
+    return `${weekdayNames[currentDate.getDay()]}, ${monthNames[currentDate.getMonth()]} ${currentDate.getDate()}, ${currentDate.getFullYear()}`;
+  }, [currentDate, view, firstDayOfWeek]);
+  const renderEventBadge = (0, import_react.useCallback)((event, compact = false) => {
+    if (renderEvent) return renderEvent(event);
+    return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.YStack, {
+      ...knobProps.borderRadius,
+      backgroundColor: event.color || "$accentBackground",
+      padding: compact ? "$1" : "$2",
+      hoverStyle: {
+        opacity: 0.9
+      },
+      pressStyle: {
+        opacity: 0.8
+      },
+      cursor: "pointer",
+      onPress: e => {
+        e?.stopPropagation?.();
+        onEventClick?.(event);
+      },
+      children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
+        fontSize: compact ? "$1" : "$2",
+        numberOfLines: compact ? 1 : 2,
+        color: "white",
+        children: event.title
+      })
+    }, event.id);
+  }, [renderEvent, onEventClick, knobProps.borderRadius]);
+  const renderMonthView = () => {
+    const monthDays = getMonthDays(currentDate, firstDayOfWeek);
+    const weekdayHeaders = [];
+    for (let i = 0; i < 7; i++) {
+      weekdayHeaders.push(weekdayNames[(firstDayOfWeek + i) % 7]);
+    }
+    return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.YStack, {
+      flex: 1,
+      children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.XStack, {
+        borderBottomWidth: 1,
+        borderColor: "$borderColor",
+        children: weekdayHeaders.map(day => /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.YStack, {
+          flex: 1,
+          padding: "$2",
+          alignItems: "center",
+          ...{
+            backgroundColor: import_componentColors.componentColors.surface.background
+          },
+          children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
+            fontWeight: "500",
+            fontSize: "$2",
+            color: import_componentColors.componentColors.text.muted,
+            children: day
+          })
+        }, day))
+      }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.ScrollView, {
+        flex: 1,
+        children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.YStack, {
+          children: Array.from({
+            length: Math.ceil(monthDays.length / 7)
+          }).map((_, weekIndex) => /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.XStack, {
+            minHeight: 100,
+            children: monthDays.slice(weekIndex * 7, (weekIndex + 1) * 7).map(day => {
+              const isCurrentMonth = day.getMonth() === currentDate.getMonth();
+              const dayEvents = eventsByDate[formatDateKey(day)] || [];
+              return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.YStack, {
+                flex: 1,
+                minHeight: 100,
+                borderRightWidth: 1,
+                borderBottomWidth: 1,
+                borderColor: "$borderColor",
+                backgroundColor: isToday(day) ? import_componentColors.componentColors.surface.background : isCurrentMonth ? "$background" : import_componentColors.componentColors.surface.background,
+                padding: "$1",
+                onPress: () => onDateSelect?.(day),
+                cursor: "pointer",
+                hoverStyle: {
+                  backgroundColor: import_componentColors.componentColors.surface.background
+                },
+                children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
+                  fontSize: "$2",
+                  fontWeight: isToday(day) ? "700" : "400",
+                  color: isToday(day) ? "$accentColor" : isCurrentMonth ? "$color" : import_componentColors.componentColors.text.subtle,
+                  textAlign: "right",
+                  paddingRight: "$1",
+                  children: day.getDate()
+                }), /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.YStack, {
+                  gap: "$1",
+                  marginTop: "$1",
+                  children: [dayEvents.slice(0, 3).map(event => renderEventBadge(event, true)), dayEvents.length > 3 && /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.Text, {
+                    fontSize: "$1",
+                    color: import_componentColors.componentColors.text.muted,
+                    paddingLeft: "$1",
+                    children: ["+", dayEvents.length - 3, " more"]
+                  })]
+                })]
+              }, day.toISOString());
+            })
+          }, weekIndex))
+        })
+      })]
+    });
+  };
+  const renderWeekView = () => {
+    const weekDays = getWeekDays(currentDate, firstDayOfWeek);
+    return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.YStack, {
+      flex: 1,
+      children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.XStack, {
+        borderBottomWidth: 1,
+        borderColor: "$borderColor",
+        children: weekDays.map(day => /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.YStack, {
+          flex: 1,
+          padding: "$2",
+          alignItems: "center",
+          ...{
+            backgroundColor: import_componentColors.componentColors.surface.background
+          },
+          ...(isToday(day) && {
+            backgroundColor: import_componentColors.componentColors.interactive.background
+          }),
+          children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
+            fontWeight: "500",
+            fontSize: "$2",
+            color: import_componentColors.componentColors.text.muted,
+            children: weekdayNames[day.getDay()]
+          }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
+            fontWeight: isToday(day) ? "700" : "400",
+            fontSize: knobProps.sizeToken,
+            color: isToday(day) ? "$accentColor" : "$color",
+            children: day.getDate()
+          })]
+        }, day.toISOString()))
+      }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.ScrollView, {
+        flex: 1,
+        children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.XStack, {
+          flex: 1,
+          minHeight: 400,
+          children: weekDays.map(day => {
+            const dayEvents = eventsByDate[formatDateKey(day)] || [];
+            return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.YStack, {
+              flex: 1,
+              borderRightWidth: 1,
+              borderColor: "$borderColor",
+              padding: "$1",
+              onPress: () => onDateSelect?.(day),
+              cursor: "pointer",
+              hoverStyle: {
+                backgroundColor: import_componentColors.componentColors.surface.background
+              },
+              children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.YStack, {
+                gap: "$1",
+                children: dayEvents.map(event => renderEventBadge(event, true))
+              })
+            }, day.toISOString());
+          })
+        })
+      })]
+    });
+  };
+  const renderDayView = () => {
+    const hours = getHours();
+    const dayEvents = eventsByDate[formatDateKey(currentDate)] || [];
+    return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.ScrollView, {
+      flex: 1,
+      children: /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.YStack, {
+        children: [dayEvents.length > 0 && /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.YStack, {
+          padding: "$2",
+          borderBottomWidth: 1,
+          borderColor: "$borderColor",
+          ...{
+            backgroundColor: import_componentColors.componentColors.surface.background
+          },
+          children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
+            fontSize: "$2",
+            color: import_componentColors.componentColors.text.muted,
+            marginBottom: "$2",
+            children: "Events"
+          }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.YStack, {
+            gap: "$1",
+            children: dayEvents.map(event => renderEventBadge(event, false))
+          })]
+        }), hours.map(hour => /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.XStack, {
+          minHeight: 60,
+          borderBottomWidth: 1,
+          borderColor: "$borderColor",
+          onPress: () => {
+            const date = new Date(currentDate);
+            date.setHours(hour, 0, 0, 0);
+            onDateSelect?.(date);
+          },
+          hoverStyle: {
+            backgroundColor: import_componentColors.componentColors.surface.background
+          },
+          cursor: "pointer",
+          children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.YStack, {
+            width: 60,
+            paddingRight: "$2",
+            alignItems: "flex-end",
+            paddingTop: "$1",
+            children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
+              fontSize: "$2",
+              color: import_componentColors.componentColors.text.muted,
+              children: formatHour(hour)
+            })
+          }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.YStack, {
+            flex: 1,
+            borderLeftWidth: 1,
+            borderColor: "$borderColor",
+            padding: "$2"
+          })]
+        }, hour))]
+      })
+    });
+  };
+  return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.YStack, {
+    height,
+    ...stackProps,
+    children: [(showNavigation || showViewSwitcher) && /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.XStack, {
+      ...knobProps.panelPadding,
+      alignItems: "center",
+      justifyContent: "space-between",
+      borderBottomWidth: 1,
+      borderColor: "$borderColor",
+      children: [showNavigation && /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.XStack, {
+        gap: "$2",
+        alignItems: "center",
+        children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.Button, {
+          size: knobProps.sizeToken,
+          onPress: goToPrevious,
+          "aria-label": "Previous",
+          children: "<"
+        }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.Button, {
+          size: knobProps.sizeToken,
+          onPress: goToToday,
+          children: "Today"
+        }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.Button, {
+          size: knobProps.sizeToken,
+          onPress: goToNext,
+          "aria-label": "Next",
+          children: ">"
+        })]
+      }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
+        ...knobProps.heading,
+        fontSize: knobProps.sizeToken,
+        children: displayTitle
+      }), showViewSwitcher && /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.ToggleGroup, {
+        type: "single",
+        orientation: "horizontal",
+        flexDirection: "row",
+        value: view,
+        onValueChange: val => {
+          if (val) setView(val);
+        },
+        ...knobProps.borderRadius,
+        ...knobProps.inputSurface,
+        children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.ToggleGroup.Item, {
+          value: "month",
+          size: knobProps.sizeToken,
+          children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
+            fontSize: knobProps.sizeToken,
+            children: "Month"
+          })
+        }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.ToggleGroup.Item, {
+          value: "week",
+          size: knobProps.sizeToken,
+          children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
+            fontSize: knobProps.sizeToken,
+            children: "Week"
+          })
+        }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.ToggleGroup.Item, {
+          value: "day",
+          size: knobProps.sizeToken,
+          children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
+            fontSize: knobProps.sizeToken,
+            children: "Day"
+          })
+        })]
+      })]
+    }), /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.YStack, {
+      flex: 1,
+      children: [view === "month" && renderMonthView(), view === "week" && renderWeekView(), view === "day" && renderDayView()]
+    })]
+  });
+}