@monkey-mini-app/ui 0.1.0 → 0.1.4

package/dist/src/products/full-calendar/settings/settings.tsx

@@ -0,0 +1,80 @@
+import { SettingsIcon } from "lucide-react"
+
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuLabel,
+  DropdownMenuRadioGroup,
+  DropdownMenuRadioItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@monkey-mini-app/ui/components/dropdown-menu"
+import { Input } from "@monkey-mini-app/ui/components/input"
+import { Switch } from "@monkey-mini-app/ui/components/switch"
+import { useLabels } from "@monkey-mini-app/ui/i18n/context"
+
+import { MAX_SCROLL_HOUR, MIN_SCROLL_HOUR, useCalendar } from "../contexts/calendar-context"
+
+export function Settings() {
+  const {
+    badgeVariant,
+    setBadgeVariant,
+    use24HourFormat,
+    toggleTimeFormat,
+    startOfDayHour,
+    setStartOfDayHour,
+    agendaModeGroupBy,
+    setAgendaModeGroupBy,
+  } = useCalendar()
+  const t = useLabels("eventCalendar")
+
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger
+        className="inline-flex size-8 items-center justify-center rounded-lg border border-border bg-background"
+        aria-label={t.settingsAria}
+      >
+        <SettingsIcon className="h-4 w-4" />
+      </DropdownMenuTrigger>
+      <DropdownMenuContent className="w-56">
+        <DropdownMenuGroup>
+          <DropdownMenuLabel>{t.settings}</DropdownMenuLabel>
+          <div className="flex items-center justify-between gap-2 px-1.5 py-1.5 text-sm">
+            <span>{t.useDotBadge}</span>
+            <Switch
+              checked={badgeVariant === "dot"}
+              onCheckedChange={(checked) => setBadgeVariant(checked ? "dot" : "colored")}
+            />
+          </div>
+          <div className="flex items-center justify-between gap-2 px-1.5 py-1.5 text-sm">
+            <span>{t.use24Hour}</span>
+            <Switch checked={use24HourFormat} onCheckedChange={() => toggleTimeFormat()} />
+          </div>
+          <div className="flex items-center justify-between gap-2 px-1.5 py-1.5 text-sm">
+            <span>{t.scrollHour}</span>
+            <Input
+              type="number"
+              className="h-7 w-16"
+              min={MIN_SCROLL_HOUR}
+              max={MAX_SCROLL_HOUR}
+              value={startOfDayHour}
+              onChange={(e) => setStartOfDayHour(Number(e.target.value))}
+              onClick={(e) => e.stopPropagation()}
+              onKeyDown={(e) => e.stopPropagation()}
+            />
+          </div>
+        </DropdownMenuGroup>
+        <DropdownMenuSeparator />
+        <DropdownMenuRadioGroup
+          value={agendaModeGroupBy}
+          onValueChange={(value) => setAgendaModeGroupBy(value as "date" | "color")}
+        >
+          <DropdownMenuLabel>{t.agendaGroupBy}</DropdownMenuLabel>
+          <DropdownMenuRadioItem value="date">{t.groupByDate}</DropdownMenuRadioItem>
+          <DropdownMenuRadioItem value="color">{t.groupByColor}</DropdownMenuRadioItem>
+        </DropdownMenuRadioGroup>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  )
+}

package/dist/src/products/full-calendar/shims/avatar-group.tsx

@@ -0,0 +1,16 @@
+import * as React from "react"
+
+import { cn } from "@monkey-mini-app/ui/lib/utils"
+
+export function AvatarGroup({
+  children,
+  className,
+  max = 3,
+}: {
+  children: React.ReactNode
+  className?: string
+  max?: number
+}) {
+  const items = React.Children.toArray(children).slice(0, max)
+  return <div className={cn("flex items-center -space-x-2", className)}>{items}</div>
+}

package/dist/src/products/full-calendar/shims/day-picker.tsx

@@ -0,0 +1 @@
+export { Calendar as DayPicker } from "@monkey-mini-app/ui/components/calendar"

package/dist/src/products/full-calendar/shims/motion.tsx

@@ -0,0 +1,97 @@
+import * as React from "react"
+
+function strip(props: Record<string, unknown>) {
+  const {
+    initial: _i,
+    animate: _a,
+    exit: _e,
+    variants: _v,
+    transition: _t,
+    whileHover: _h,
+    whileTap: _p,
+    layout: _l,
+    scrollPosition: _s,
+    ...rest
+  } = props
+  return rest
+}
+
+function make(tag: React.ElementType) {
+  const El = React.forwardRef(function MotionEl(props: Record<string, unknown>, ref: React.Ref<unknown>) {
+    return React.createElement(tag, { ...strip(props), ref })
+  })
+  El.displayName = `motion.${typeof tag === "string" ? tag : "el"}`
+  return El
+}
+
+/**
+ * One component per tag, cached.
+ *
+ * Without the cache `motion.div` returns a NEW component type on every property
+ * access, so React sees a different `type` each render and tears the subtree down:
+ * DOM refs held across renders (pointer capture, `getBoundingClientRect` during a
+ * drag) then point at detached nodes, and every `motion.*` descendant remounts on
+ * each state change. Keep this memoised.
+ */
+const byTag = new Map<string, React.ElementType>()
+const byComponent = new Map<React.ElementType, React.ElementType>()
+
+function forTag(tag: string): React.ElementType {
+  let el = byTag.get(tag)
+  if (!el) {
+    el = make(tag as React.ElementType)
+    byTag.set(tag, el)
+  }
+  return el
+}
+
+function forComponent(comp: React.ElementType): React.ElementType {
+  let el = byComponent.get(comp)
+  if (!el) {
+    el = make(comp)
+    byComponent.set(comp, el)
+  }
+  return el
+}
+
+/** Props the shim swallows rather than forwarding to the DOM. */
+export type MotionProps = {
+  initial?: unknown
+  animate?: unknown
+  exit?: unknown
+  variants?: unknown
+  transition?: unknown
+  whileHover?: unknown
+  whileTap?: unknown
+  layout?: unknown
+  scrollPosition?: unknown
+}
+
+/**
+ * `motion.div` has to type as a component taking **the real element's props** plus the motion
+ * ones. Typed as a bare `React.ElementType` (or a `Record<string, unknown>` props bag), every
+ * handler at a call site becomes an implicit any — that is how the week view's
+ * `onPointerDown={(e) => …}` lost its `e`.
+ */
+export type MotionComponents = {
+  [K in keyof React.JSX.IntrinsicElements]: React.ComponentType<
+    React.ComponentProps<K> & MotionProps
+  >
+}
+
+export const motion = new Proxy(
+  { create: (comp: React.ElementType) => forComponent(comp) },
+  {
+    get(target, key) {
+      if (key === "create") return target.create
+      if (typeof key === "string") return forTag(key)
+      return undefined
+    },
+  },
+) as unknown as { create: (comp: React.ElementType) => React.ElementType } & MotionComponents
+
+export function AnimatePresence({ children }: { children?: React.ReactNode; initial?: boolean; mode?: string }) {
+  return <>{children}</>
+}
+
+export type Variants = Record<string, unknown>

package/dist/src/products/full-calendar/shims/next-themes.ts

@@ -0,0 +1,6 @@
+export function useTheme() {
+  return {
+    theme: typeof document !== "undefined" && document.documentElement.classList.contains("dark") ? "dark" : "light",
+    setTheme(_theme: string) {},
+  }
+}

package/dist/src/products/full-calendar/shims/re-resizable.tsx

@@ -0,0 +1,25 @@
+import type { ReactNode } from "react"
+
+export type ResizeCallback = (
+  _event: unknown,
+  direction: string,
+  ref: { style: { height: string } },
+) => void
+
+export function Resizable({
+  children,
+  className,
+}: {
+  children?: ReactNode
+  className?: string
+  minHeight?: number
+  maxHeight?: number
+  enable?: unknown
+  handleStyles?: unknown
+  handleClasses?: unknown
+  onResizeStart?: unknown
+  onResize?: unknown
+  onResizeStop?: unknown
+}) {
+  return <div className={className}>{children}</div>
+}

package/dist/src/products/full-calendar/shims/sonner.ts

@@ -0,0 +1,4 @@
+export const toast = {
+  success(_message?: string) {},
+  error(_message?: string) {},
+}

package/dist/src/products/full-calendar/types.ts

@@ -0,0 +1,8 @@
+export type TCalendarView = "day" | "week" | "month" | "year" | "agenda";
+export type TEventColor =
+	| "blue"
+	| "green"
+	| "red"
+	| "yellow"
+	| "purple"
+	| "orange";

package/dist/src/products/full-calendar/views/agenda-view/agenda-events.tsx

@@ -0,0 +1,140 @@
+import { format, parseISO } from "date-fns";
+import type { FC } from "react";
+import { Avatar, AvatarFallback, AvatarImage } from "@monkey-mini-app/ui/components/avatar";
+import {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+} from "@monkey-mini-app/ui/components/command";
+import { useDateLocale, useLabels } from "@monkey-mini-app/ui/i18n/context";
+import { cn } from "@monkey-mini-app/ui/lib/utils";
+import { useCalendar } from "../../contexts/calendar-context";
+import { EventDetailsDialog } from "../../dialogs/event-details-dialog";
+import {
+  formatTime,
+  getBgColor,
+  getColorClass,
+  getEventsForMonth,
+  getFirstLetters,
+  toCapitalize,
+} from "../../helpers";
+import { EventBullet } from "../month-view/event-bullet";
+
+export const AgendaEvents: FC = () => {
+  const {
+    events,
+    use24HourFormat,
+    badgeVariant,
+    agendaModeGroupBy,
+    selectedDate,
+  } = useCalendar();
+  const t = useLabels("eventCalendar");
+  const dateLocale = useDateLocale();
+
+  const monthEvents = getEventsForMonth(events, selectedDate);
+
+  const agendaEvents: Record<string, typeof monthEvents> = {};
+  for (const event of monthEvents) {
+    const key =
+      agendaModeGroupBy === "date"
+        ? format(parseISO(event.startDate), "yyyy-MM-dd")
+        : event.color;
+    (agendaEvents[key] ??= []).push(event);
+  }
+
+  const groupedAndSortedEvents = Object.entries(agendaEvents).sort(
+    (a, b) => new Date(a[0]).getTime() - new Date(b[0]).getTime(),
+  );
+
+  return (
+    <Command className="py-4 h-[80vh] bg-transparent">
+      <div className="mb-4 mx-4">
+        <CommandInput placeholder={t.searchAgenda} />
+      </div>
+      <CommandList className="max-h-max px-3 border-t">
+        {groupedAndSortedEvents.map(([date, groupedEvents]) => (
+          <CommandGroup
+            key={date}
+            heading={
+              agendaModeGroupBy === "date"
+                ? format(parseISO(date), "EEEE, MMMM d, yyyy", { locale: dateLocale })
+                : toCapitalize(groupedEvents![0].color)
+            }
+          >
+            {groupedEvents!.map((event) => (
+              <CommandItem
+                key={event.id}
+                className={cn(
+                  "mb-2 p-4 border rounded-md data-[selected=true]:bg-bg transition-all data-[selected=true]:text-none hover:cursor-pointer",
+                  {
+                    [getColorClass(event.color)]: badgeVariant === "colored",
+                    "hover:bg-zinc-200 dark:hover:bg-gray-900":
+                      badgeVariant === "dot",
+                    "hover:opacity-60": badgeVariant === "colored",
+                  },
+                )}
+              >
+                <EventDetailsDialog event={event}>
+                  <div className="w-full flex items-center justify-between gap-4">
+                    <div className="flex items-center gap-2">
+                      {badgeVariant === "dot" ? (
+                        <EventBullet color={event.color} />
+                      ) : (
+                        <Avatar>
+                          <AvatarImage src="" alt="@shadcn" />
+                          <AvatarFallback className={getBgColor(event.color)}>
+                            {getFirstLetters(event.title)}
+                          </AvatarFallback>
+                        </Avatar>
+                      )}
+                      <div className="flex flex-col">
+                        <p
+                          className={cn({
+                            "font-medium": badgeVariant === "dot",
+                            "text-foreground": badgeVariant === "dot",
+                          })}
+                        >
+                          {event.title}
+                        </p>
+                        <p className="text-muted-foreground text-sm line-clamp-1 text-ellipsis md:text-clip w-1/3">
+                          {event.description}
+                        </p>
+                      </div>
+                    </div>
+                    <div className="w-40 flex justify-center items-center gap-1">
+                      {agendaModeGroupBy === "date" ? (
+                        <>
+                          <p className="text-sm">
+                            {formatTime(event.startDate, use24HourFormat)}
+                          </p>
+                          <span className="text-muted-foreground">-</span>
+                          <p className="text-sm">
+                            {formatTime(event.endDate, use24HourFormat)}
+                          </p>
+                        </>
+                      ) : (
+                        <>
+                          <p className="text-sm">
+                            {format(event.startDate, "MM/dd/yyyy")}
+                          </p>
+                          <span className="text-sm">at</span>
+                          <p className="text-sm">
+                            {formatTime(event.startDate, use24HourFormat)}
+                          </p>
+                        </>
+                      )}
+                    </div>
+                  </div>
+                </EventDetailsDialog>
+              </CommandItem>
+            ))}
+          </CommandGroup>
+        ))}
+        <CommandEmpty>{t.noEvents}</CommandEmpty>
+      </CommandList>
+    </Command>
+  );
+};

package/dist/src/products/full-calendar/views/month-view/calendar-month-view.tsx

@@ -0,0 +1,69 @@
+import { motion } from "../../shims/motion";
+import { useMemo } from "react";
+import {
+	staggerContainer,
+	transition,
+} from "../../animations";
+import { useLabels } from "@monkey-mini-app/ui/i18n/context";
+import { useCalendar } from "../../contexts/calendar-context";
+
+import {
+	calculateMonthEventPositions,
+	getCalendarCells,
+} from "../../helpers";
+
+import type { IEvent } from "../../interfaces";
+import { DayCell } from "./day-cell";
+
+interface IProps {
+	singleDayEvents: IEvent[];
+	multiDayEvents: IEvent[];
+}
+
+export function CalendarMonthView({ singleDayEvents, multiDayEvents }: IProps) {
+	const { selectedDate } = useCalendar();
+	const t = useLabels("eventCalendar");
+
+	const allEvents = [...multiDayEvents, ...singleDayEvents];
+
+	const cells = useMemo(() => getCalendarCells(selectedDate), [selectedDate]);
+
+	const eventPositions = useMemo(
+		() =>
+			calculateMonthEventPositions(
+				multiDayEvents,
+				singleDayEvents,
+				selectedDate,
+			),
+		[multiDayEvents, singleDayEvents, selectedDate],
+	);
+
+	return (
+		<motion.div initial="initial" animate="animate" variants={staggerContainer}>
+			<div className="grid grid-cols-7">
+				{t.weekdaysSun.map((day, index) => (
+					<motion.div
+						key={day}
+						className="flex items-center justify-center py-2"
+						initial={{ opacity: 0, y: -10 }}
+						animate={{ opacity: 1, y: 0 }}
+						transition={{ delay: index * 0.05, ...transition }}
+					>
+						<span className="text-xs font-medium text-t-quaternary">{day}</span>
+					</motion.div>
+				))}
+			</div>
+
+			<div className="grid grid-cols-7 overflow-hidden">
+				{cells.map((cell) => (
+					<DayCell
+						key={cell.date.toISOString()}
+						cell={cell}
+						events={allEvents}
+						eventPositions={eventPositions}
+					/>
+				))}
+			</div>
+		</motion.div>
+	);
+}

package/dist/src/products/full-calendar/views/month-view/day-cell.tsx

@@ -0,0 +1,201 @@
+"use client";
+
+import { cva } from "class-variance-authority";
+import { isToday, startOfDay, isSunday, isSameMonth } from "date-fns";
+import { motion } from "../../shims/motion";
+import { useMemo, useCallback } from "react";
+
+import { cn } from "@monkey-mini-app/ui/lib/utils";
+import { transition } from "../../animations";
+import { EventListDialog } from "../../dialogs/events-list-dialog";
+import { DroppableArea } from "../../dnd/droppable-area";
+import { getMonthCellEvents } from "../../helpers";
+import { useMediaQuery } from "../../hooks";
+import type { ICalendarCell, IEvent } from "../../interfaces";
+import { EventBullet } from "./event-bullet";
+import { MonthEventBadge } from "./month-event-badge";
+import { Button } from "@monkey-mini-app/ui/components/button";
+import { Plus } from "lucide-react";
+import { AddEditEventDialog } from "../../dialogs/add-edit-event-dialog";
+
+interface IProps {
+  cell: ICalendarCell;
+  events: IEvent[];
+  eventPositions: Record<string, number>;
+}
+
+export const dayCellVariants = cva("text-white", {
+  variants: {
+    color: {
+      blue: "bg-blue-600 dark:bg-blue-500 hover:bg-blue-700 dark:hover:bg-blue-400 ",
+      green:
+        "bg-green-600 dark:bg-green-500 hover:bg-green-700 dark:hover:bg-green-400",
+      red: "bg-red-600 dark:bg-red-500 hover:bg-red-700 dark:hover:bg-red-400",
+      yellow:
+        "bg-yellow-600 dark:bg-yellow-500 hover:bg-yellow-700 dark:hover:bg-yellow-400",
+      purple:
+        "bg-purple-600 dark:bg-purple-500 hover:bg-purple-700 dark:hover:bg-purple-400",
+      orange:
+        "bg-orange-600 dark:bg-orange-500 hover:bg-orange-700 dark:hover:bg-orange-400",
+      gray: "bg-gray-600 dark:bg-gray-500 hover:bg-gray-700 dark:hover:bg-gray-400",
+    },
+  },
+  defaultVariants: {
+    color: "blue",
+  },
+});
+
+const MAX_VISIBLE_EVENTS = 3;
+
+export function DayCell({ cell, events, eventPositions }: IProps) {
+  const { day, currentMonth, date } = cell;
+  const isMobile = useMediaQuery("(max-width: 768px)");
+
+  // Memoize cellEvents and currentCellMonth for performance
+  const { cellEvents, currentCellMonth } = useMemo(() => {
+    const cellEvents = getMonthCellEvents(date, events, eventPositions);
+    const currentCellMonth = startOfDay(
+      new Date(date.getFullYear(), date.getMonth(), 1),
+    );
+    return { cellEvents, currentCellMonth };
+  }, [date, events, eventPositions]);
+
+  // Memoize event rendering for each position with animation
+  const renderEventAtPosition = useCallback(
+    (position: number) => {
+      const event = cellEvents.find((e) => e.position === position);
+      if (!event) {
+        return (
+          <motion.div
+            key={`empty-${position}`}
+            className="lg:flex-1"
+            initial={false}
+            animate={false}
+          />
+        );
+      }
+      const showBullet = isSameMonth(
+        new Date(event.startDate),
+        currentCellMonth,
+      );
+
+      return (
+        <motion.div
+          key={`event-${event.id}-${position}`}
+          className="lg:flex-1"
+          initial={{ opacity: 0, x: -10 }}
+          animate={{ opacity: 1, x: 0 }}
+          transition={{ delay: position * 0.1, ...transition }}
+        >
+          {showBullet && (
+            <EventBullet className="lg:hidden" color={event.color} />
+          )}
+          <MonthEventBadge
+            className="hidden lg:flex"
+            event={event}
+            cellDate={startOfDay(date)}
+          />
+        </motion.div>
+      );
+    },
+    [cellEvents, currentCellMonth, date],
+  );
+
+  const showMoreCount = cellEvents.length - MAX_VISIBLE_EVENTS;
+
+  const showMobileMore = isMobile && currentMonth && showMoreCount > 0;
+  const showDesktopMore = !isMobile && currentMonth && showMoreCount > 0;
+
+  const cellContent = useMemo(
+    () => (
+      <motion.div
+        className={cn(
+          "flex h-full lg:min-h-40 flex-col gap-1 border-l border-t",
+          isSunday(date) && "border-l-0",
+        )}
+        initial={{ opacity: 0, y: 10 }}
+        animate={{ opacity: 1, y: 0 }}
+        transition={transition}
+      >
+        <DroppableArea date={date} className="w-full h-full py-2">
+          <motion.span
+            className={cn(
+              "h-6 px-1 text-xs font-semibold lg:px-2",
+              !currentMonth && "opacity-20",
+              isToday(date) &&
+                "flex w-6 translate-x-1 items-center justify-center rounded-full bg-primary px-0 font-bold text-primary-foreground",
+            )}
+          >
+            {day}
+          </motion.span>
+
+          <motion.div
+            className={cn(
+              "flex h-fit gap-1 px-2 mt-1 lg:h-[94px] lg:flex-col lg:gap-2 lg:px-0",
+              !currentMonth && "opacity-50",
+            )}
+          >
+            {cellEvents.length === 0 && !isMobile ? (
+              <div className="w-full h-full flex justify-center items-center group">
+                <AddEditEventDialog startDate={date}>
+                  <Button
+                    variant="ghost"
+                    className="border opacity-0 group-hover:opacity-100 transition-opacity duration-200"
+                  >
+                    <Plus className="h-4 w-4" />
+                    <span className="max-sm:hidden">Add Event</span>
+                  </Button>
+                </AddEditEventDialog>
+              </div>
+            ) : (
+              [0, 1, 2].map(renderEventAtPosition)
+            )}
+          </motion.div>
+
+          {showMobileMore && (
+            <div className="flex justify-end items-end mx-2">
+              <span className="text-[0.6rem] font-semibold text-accent-foreground">
+                +{showMoreCount}
+              </span>
+            </div>
+          )}
+
+          {showDesktopMore && (
+            <motion.div
+              className={cn(
+                "h-4.5 px-1.5 my-2 text-end text-xs font-semibold text-muted-foreground",
+                !currentMonth && "opacity-50",
+              )}
+              initial={{ opacity: 0, y: 5 }}
+              animate={{ opacity: 1, y: 0 }}
+              transition={{ delay: 0.3, ...transition }}
+            >
+              <EventListDialog date={date} events={cellEvents} />
+            </motion.div>
+          )}
+        </DroppableArea>
+      </motion.div>
+    ),
+    [
+      date,
+      day,
+      currentMonth,
+      cellEvents,
+      showMobileMore,
+      showDesktopMore,
+      showMoreCount,
+      renderEventAtPosition,
+      isMobile,
+    ],
+  );
+
+  if (isMobile && currentMonth) {
+    return (
+      <EventListDialog date={date} events={cellEvents}>
+        {cellContent}
+      </EventListDialog>
+    );
+  }
+
+  return cellContent;
+}