@monkey-mini-app/ui 0.1.1 → 0.1.4

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

@@ -0,0 +1,65 @@
+"use client";
+
+import { motion } from "../shims/motion";
+import { Plus } from "lucide-react";
+
+import { Button } from "@monkey-mini-app/ui/components/button";
+import { useLabels } from "@monkey-mini-app/ui/i18n/context";
+import {
+  slideFromLeft,
+  slideFromRight,
+  transition,
+} from "../animations";
+import { useCalendar } from "../contexts/calendar-context";
+import { AddEditEventDialog } from "../dialogs/add-edit-event-dialog";
+import { DateNavigator } from "./date-navigator";
+import FilterEvents from "./filter";
+import { TodayButton } from "./today-button";
+import { UserSelect } from "./user-select";
+import { Settings } from "../settings/settings";
+import Views from "./view-tabs";
+
+export function CalendarHeader() {
+  const { view, events, users } = useCalendar();
+  const t = useLabels("eventCalendar");
+
+  return (
+    <div className="flex flex-col gap-4 border-b p-4 lg:flex-row lg:items-center lg:justify-between">
+      <motion.div
+        className="flex items-center gap-3"
+        variants={slideFromLeft}
+        initial="initial"
+        animate="animate"
+        transition={transition}
+      >
+        <TodayButton />
+        <DateNavigator view={view} events={events} />
+      </motion.div>
+
+      <motion.div
+        className="flex flex-col gap-4 lg:flex-row lg:items-center lg:gap-1.5"
+        variants={slideFromRight}
+        initial="initial"
+        animate="animate"
+        transition={transition}
+      >
+        <div className="options flex-wrap flex items-center gap-4 md:gap-2">
+          <FilterEvents />
+          <Views />
+        </div>
+
+        <div className="flex flex-col gap-4 lg:flex-row lg:items-center lg:gap-1.5">
+          {users.length > 0 ? <UserSelect /> : null}
+
+          <AddEditEventDialog>
+            <Button data-testid="calendar-add-event">
+              <Plus className="h-4 w-4" />
+              {t.addEvent}
+            </Button>
+          </AddEditEventDialog>
+        </div>
+        <Settings />
+      </motion.div>
+    </div>
+  );
+}

package/dist/src/products/full-calendar/header/date-navigator.tsx

@@ -0,0 +1,110 @@
+import { formatDate } from "date-fns";
+import { AnimatePresence, motion } from "../shims/motion";
+import { ChevronLeft, ChevronRight } from "lucide-react";
+import { useMemo } from "react";
+import { Badge } from "@monkey-mini-app/ui/components/badge";
+import { Button } from "@monkey-mini-app/ui/components/button";
+import { useDateLocale, useLabels } from "@monkey-mini-app/ui/i18n/context";
+import { buttonHover, transition } from "../animations";
+import { useCalendar } from "../contexts/calendar-context";
+
+import {
+  getEventsCount,
+  navigateDate,
+  rangeText,
+} from "../helpers";
+
+import type { IEvent } from "../interfaces";
+import type { TCalendarView } from "../types";
+
+interface IProps {
+  view: TCalendarView;
+  events: IEvent[];
+}
+
+const MotionButton = motion.create(Button);
+const MotionBadge = motion.create(Badge);
+
+export function DateNavigator({ view, events }: IProps) {
+  const { selectedDate, setSelectedDate } = useCalendar();
+  const t = useLabels("eventCalendar");
+  const dateLocale = useDateLocale();
+
+  const month = formatDate(selectedDate, "MMMM", { locale: dateLocale });
+  const year = selectedDate.getFullYear();
+
+  const eventCount = useMemo(
+    () => getEventsCount(events, selectedDate, view),
+    [events, selectedDate, view],
+  );
+
+  const handlePrevious = () =>
+    setSelectedDate(navigateDate(selectedDate, view, "previous"));
+  const handleNext = () =>
+    setSelectedDate(navigateDate(selectedDate, view, "next"));
+
+  return (
+    <div className="space-y-0.5">
+      <div className="flex items-center gap-2">
+        <motion.span
+          className="text-lg font-semibold"
+          initial={{ x: -20, opacity: 0 }}
+          animate={{ x: 0, opacity: 1 }}
+          transition={transition}
+        >
+          {month} {year}
+        </motion.span>
+        <AnimatePresence mode="wait">
+          <MotionBadge
+            key={eventCount}
+            variant="secondary"
+            initial={{ scale: 0.8, opacity: 0 }}
+            animate={{ scale: 1, opacity: 1 }}
+            exit={{ scale: 0.8, opacity: 0 }}
+            transition={transition}
+          >
+            {t.eventsCount(eventCount)}
+          </MotionBadge>
+        </AnimatePresence>
+      </div>
+
+      <div className="flex items-center gap-2">
+        <MotionButton
+          variant="outline"
+          size="icon"
+          className="h-6 w-6"
+          onClick={handlePrevious}
+          variants={buttonHover}
+          whileHover="hover"
+          whileTap="tap"
+        >
+          <ChevronLeft className="h-4 w-4" />
+        </MotionButton>
+
+        <motion.p
+          className="text-sm text-muted-foreground"
+          initial={{ opacity: 0 }}
+          animate={{ opacity: 1 }}
+          transition={transition}
+        >
+          {rangeText(view, selectedDate, {
+            locale: dateLocale,
+            formatError: t.formatError,
+          })}
+        </motion.p>
+
+        <MotionButton
+          variant="outline"
+          size="icon"
+          className="h-6 w-6"
+          onClick={handleNext}
+          variants={buttonHover}
+          whileHover="hover"
+          whileTap="tap"
+        >
+          <ChevronRight className="h-4 w-4" />
+        </MotionButton>
+      </div>
+    </div>
+  );
+}

package/dist/src/products/full-calendar/header/filter.tsx

@@ -0,0 +1,58 @@
+import { CheckIcon, Filter, RefreshCcw } from "lucide-react"
+
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@monkey-mini-app/ui/components/dropdown-menu"
+import { Separator } from "@monkey-mini-app/ui/components/separator"
+import { useLabels } from "@monkey-mini-app/ui/i18n/context"
+
+import { useCalendar } from "../contexts/calendar-context"
+import type { TEventColor } from "../types"
+
+const COLORS: TEventColor[] = ["blue", "green", "red", "yellow", "purple", "orange"]
+
+export default function FilterEvents() {
+  const { selectedColors, filterEventsBySelectedColors, clearFilter } = useCalendar()
+  const t = useLabels("eventCalendar")
+
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger className="inline-flex size-8 items-center justify-center rounded-lg border border-border bg-background">
+        <Filter className="h-4 w-4" />
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align="end" className="w-[150px]">
+        {COLORS.map((color) => (
+          <DropdownMenuItem
+            key={color}
+            className="flex cursor-pointer items-center gap-2"
+            onClick={(e) => {
+              e.preventDefault()
+              filterEventsBySelectedColors(color)
+            }}
+          >
+            <span className="size-3.5 rounded-full" style={{ backgroundColor: color }} />
+            <span className="flex items-center gap-2 capitalize">
+              {color}
+              {selectedColors.includes(color) ? <CheckIcon className="size-4 text-blue-500" /> : null}
+            </span>
+          </DropdownMenuItem>
+        ))}
+        <Separator className="my-2" />
+        <DropdownMenuItem
+          disabled={selectedColors.length === 0}
+          className="flex cursor-pointer gap-2"
+          onClick={(e) => {
+            e.preventDefault()
+            clearFilter()
+          }}
+        >
+          <RefreshCcw className="size-3.5" />
+          {t.clearFilter}
+        </DropdownMenuItem>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  )
+}

package/dist/src/products/full-calendar/header/today-button.tsx

@@ -0,0 +1,45 @@
+import { formatDate } from "date-fns";
+import { motion } from "../shims/motion";
+import { Button } from "@monkey-mini-app/ui/components/button";
+import { useDateLocale } from "@monkey-mini-app/ui/i18n/context";
+import { buttonHover, transition } from "../animations";
+import { useCalendar } from "../contexts/calendar-context";
+
+const MotionButton = motion.create(Button);
+
+export function TodayButton() {
+  const { setSelectedDate } = useCalendar();
+  const dateLocale = useDateLocale();
+
+  const today = new Date();
+  const handleClick = () => setSelectedDate(today);
+
+  return (
+    <MotionButton
+      variant="outline"
+      className="flex h-14 w-14 flex-col items-center justify-center p-0 text-center"
+      onClick={handleClick}
+      variants={buttonHover}
+      whileHover="hover"
+      whileTap="tap"
+      transition={transition}
+    >
+      <motion.span
+        className="w-full bg-primary py-1 text-xs font-semibold text-primary-foreground"
+        initial={{ y: -10, opacity: 0 }}
+        animate={{ y: 0, opacity: 1 }}
+        transition={{ delay: 0.1, ...transition }}
+      >
+        {formatDate(today, "MMM", { locale: dateLocale }).toUpperCase()}
+      </motion.span>
+      <motion.span
+        className="text-lg font-bold"
+        initial={{ y: 10, opacity: 0 }}
+        animate={{ y: 0, opacity: 1 }}
+        transition={{ delay: 0.2, ...transition }}
+      >
+        {today.getDate()}
+      </motion.span>
+    </MotionButton>
+  );
+}

package/dist/src/products/full-calendar/header/user-select.tsx

@@ -0,0 +1,64 @@
+import { Avatar, AvatarFallback, AvatarImage } from "@monkey-mini-app/ui/components/avatar";
+import { AvatarGroup } from "../shims/avatar-group";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@monkey-mini-app/ui/components/select";
+import { useLabels } from "@monkey-mini-app/ui/i18n/context";
+import { useCalendar } from "../contexts/calendar-context";
+
+export function UserSelect() {
+  const { users, selectedUserId, filterEventsBySelectedUser } = useCalendar();
+  const t = useLabels("eventCalendar");
+
+  return (
+    <Select value={selectedUserId!} onValueChange={(value) => value && filterEventsBySelectedUser(value)}>
+      <SelectTrigger className="w-full">
+        <SelectValue placeholder={t.selectUser} />
+      </SelectTrigger>
+      <SelectContent align="end">
+        <SelectItem value="all">
+          <AvatarGroup className="mx-2 flex items-center" max={3}>
+            {users.map((user) => (
+              <Avatar key={user.id} className="size-6 text-xxs">
+                <AvatarImage
+                  src={user.picturePath ?? undefined}
+                  alt={user.name}
+                />
+                <AvatarFallback className="text-xxs">
+                  {user.name[0]}
+                </AvatarFallback>
+              </Avatar>
+            ))}
+          </AvatarGroup>
+          {t.allUsers}
+        </SelectItem>
+
+        {users.map((user) => (
+          <SelectItem
+            key={user.id}
+            value={user.id}
+            className="flex-1 cursor-pointer"
+          >
+            <div className="flex items-center gap-2">
+              <Avatar key={user.id} className="size-6">
+                <AvatarImage
+                  src={user.picturePath ?? undefined}
+                  alt={user.name}
+                />
+                <AvatarFallback className="text-xxs">
+                  {user.name[0]}
+                </AvatarFallback>
+              </Avatar>
+
+              <p className="truncate">{user.name}</p>
+            </div>
+          </SelectItem>
+        ))}
+      </SelectContent>
+    </Select>
+  );
+}

package/dist/src/products/full-calendar/header/view-tabs.tsx

@@ -0,0 +1,36 @@
+import { memo } from "react"
+
+import { Button } from "@monkey-mini-app/ui/components/button"
+import { useLabels } from "@monkey-mini-app/ui/i18n/context"
+
+import { useCalendar } from "../contexts/calendar-context"
+import type { TCalendarView } from "../types"
+
+function Views() {
+  const { view, setView } = useCalendar()
+  const t = useLabels("eventCalendar")
+  const tabs: { name: string; value: TCalendarView }[] = [
+    { name: t.agenda, value: "agenda" },
+    { name: t.day, value: "day" },
+    { name: t.week, value: "week" },
+    { name: t.month, value: "month" },
+    { name: t.year, value: "year" },
+  ]
+  return (
+    <div className="flex flex-wrap gap-1">
+      {tabs.map(({ name, value }) => (
+        <Button
+          key={value}
+          size="sm"
+          variant={view === value ? "default" : "outline"}
+          data-testid={`calendar-view-${value}`}
+          onClick={() => setView(value)}
+        >
+          {name}
+        </Button>
+      ))}
+    </div>
+  )
+}
+
+export default memo(Views)