"use client"; import { getDay, getDaysInMonth, isSameDay } from "date-fns"; import { atom, useAtom } from "jotai"; import { Check, ChevronLeftIcon, ChevronRightIcon, ChevronsUpDown, } from "lucide-react"; import { createContext, memo, type ReactNode, useCallback, useContext, useMemo, useState, } from "react"; import { Button } from "@/components/ui/button"; import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, } from "@/components/ui/command"; import { Popover, PopoverContent, PopoverTrigger, } from "@/components/ui/popover"; import { cn } from "@/lib/utils"; export type CalendarState = { month: 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11; year: number; }; const monthAtom = atom( new Date().getMonth() as CalendarState["month"] ); const yearAtom = atom(new Date().getFullYear()); export const useCalendarMonth = () => useAtom(monthAtom); export const useCalendarYear = () => useAtom(yearAtom); type CalendarContextProps = { locale: Intl.LocalesArgument; startDay: number; }; const CalendarContext = createContext({ locale: "en-US", startDay: 0, }); export type Status = { id: string; name: string; color: string; }; export type Feature = { id: string; name: string; startAt: Date; endAt: Date; status: Status; }; type ComboboxProps = { value: string; setValue: (value: string) => void; data: { value: string; label: string; }[]; labels: { button: string; empty: string; search: string; }; className?: string; }; export const monthsForLocale = ( localeName: Intl.LocalesArgument, monthFormat: Intl.DateTimeFormatOptions["month"] = "long" ) => { const format = new Intl.DateTimeFormat(localeName, { month: monthFormat }) .format; return [...new Array(12).keys()].map((m) => format(new Date(Date.UTC(2021, m, 2))) ); }; export const daysForLocale = ( locale: Intl.LocalesArgument, startDay: number ) => { const weekdays: string[] = []; const baseDate = new Date(2024, 0, startDay); for (let i = 0; i < 7; i++) { weekdays.push( new Intl.DateTimeFormat(locale, { weekday: "short" }).format(baseDate) ); baseDate.setDate(baseDate.getDate() + 1); } return weekdays; }; const Combobox = ({ value, setValue, data, labels, className, }: ComboboxProps) => { const [open, setOpen] = useState(false); return ( { const label = data.find((item) => item.value === value)?.label; return label?.toLowerCase().includes(search.toLowerCase()) ? 1 : 0; }} > {labels.empty} {data.map((item) => ( { setValue(currentValue === value ? "" : currentValue); setOpen(false); }} value={item.value} > {item.label} ))} ); }; type OutOfBoundsDayProps = { day: number; }; const OutOfBoundsDay = ({ day }: OutOfBoundsDayProps) => (

{day}

); export type CalendarBodyProps = { features: Feature[]; children: (props: { feature: Feature }) => ReactNode; }; export const CalendarBody = ({ features, children }: CalendarBodyProps) => { const [month] = useCalendarMonth(); const [year] = useCalendarYear(); const { startDay } = useContext(CalendarContext); // Memoize expensive date calculations const currentMonthDate = useMemo( () => new Date(year, month, 1), [year, month] ); const daysInMonth = useMemo( () => getDaysInMonth(currentMonthDate), [currentMonthDate] ); const firstDay = useMemo( () => (getDay(currentMonthDate) - startDay + 7) % 7, [currentMonthDate, startDay] ); // Memoize previous month calculations const prevMonthData = useMemo(() => { const prevMonth = month === 0 ? 11 : month - 1; const prevMonthYear = month === 0 ? year - 1 : year; const prevMonthDays = getDaysInMonth(new Date(prevMonthYear, prevMonth, 1)); const prevMonthDaysArray = Array.from( { length: prevMonthDays }, (_, i) => i + 1 ); return { prevMonthDays, prevMonthDaysArray }; }, [month, year]); // Memoize next month calculations const nextMonthData = useMemo(() => { const nextMonth = month === 11 ? 0 : month + 1; const nextMonthYear = month === 11 ? year + 1 : year; const nextMonthDays = getDaysInMonth(new Date(nextMonthYear, nextMonth, 1)); const nextMonthDaysArray = Array.from( { length: nextMonthDays }, (_, i) => i + 1 ); return { nextMonthDaysArray }; }, [month, year]); // Memoize features filtering by day to avoid recalculating on every render const featuresByDay = useMemo(() => { const result: { [day: number]: Feature[] } = {}; for (let day = 1; day <= daysInMonth; day++) { result[day] = features.filter((feature) => { return isSameDay(new Date(feature.endAt), new Date(year, month, day)); }); } return result; }, [features, daysInMonth, year, month]); const days: ReactNode[] = []; for (let i = 0; i < firstDay; i++) { const day = prevMonthData.prevMonthDaysArray[ prevMonthData.prevMonthDays - firstDay + i ]; if (day) { days.push(); } } for (let day = 1; day <= daysInMonth; day++) { const featuresForDay = featuresByDay[day] || []; days.push(

{day}

{featuresForDay.slice(0, 3).map((feature) => children({ feature }))}

{featuresForDay.length > 3 && ( +{featuresForDay.length - 3} more )}

); } const remainingDays = 7 - ((firstDay + daysInMonth) % 7); if (remainingDays < 7) { for (let i = 0; i < remainingDays; i++) { const day = nextMonthData.nextMonthDaysArray[i]; if (day) { days.push(); } } } return (

{days.map((day, index) => (

{day}

))}

); }; export type CalendarDatePickerProps = { className?: string; children: ReactNode; }; export const CalendarDatePicker = ({ className, children, }: CalendarDatePickerProps) => (

{children}

); export type CalendarMonthPickerProps = { className?: string; }; export const CalendarMonthPicker = ({ className, }: CalendarMonthPickerProps) => { const [month, setMonth] = useCalendarMonth(); const { locale } = useContext(CalendarContext); // Memoize month data to avoid recalculating date formatting const monthData = useMemo(() => { return monthsForLocale(locale).map((month, index) => ({ value: index.toString(), label: month, })); }, [locale]); return ( setMonth(Number.parseInt(value, 10) as CalendarState["month"]) } value={month.toString()} /> ); }; export type CalendarYearPickerProps = { className?: string; start: number; end: number; }; export const CalendarYearPicker = ({ className, start, end, }: CalendarYearPickerProps) => { const [year, setYear] = useCalendarYear(); return ( ({ value: (start + i).toString(), label: (start + i).toString(), }))} labels={{ button: "Select year", empty: "No year found", search: "Search year", }} setValue={(value) => setYear(Number.parseInt(value, 10))} value={year.toString()} /> ); }; export type CalendarDatePaginationProps = { className?: string; }; export const CalendarDatePagination = ({ className, }: CalendarDatePaginationProps) => { const [month, setMonth] = useCalendarMonth(); const [year, setYear] = useCalendarYear(); const handlePreviousMonth = useCallback(() => { if (month === 0) { setMonth(11); setYear(year - 1); } else { setMonth((month - 1) as CalendarState["month"]); } }, [month, year, setMonth, setYear]); const handleNextMonth = useCallback(() => { if (month === 11) { setMonth(0); setYear(year + 1); } else { setMonth((month + 1) as CalendarState["month"]); } }, [month, year, setMonth, setYear]); return (

); }; export type CalendarDateProps = { children: ReactNode; }; export const CalendarDate = ({ children }: CalendarDateProps) => (

{children}

); export type CalendarHeaderProps = { className?: string; }; export const CalendarHeader = ({ className }: CalendarHeaderProps) => { const { locale, startDay } = useContext(CalendarContext); // Memoize days data to avoid recalculating date formatting const daysData = useMemo(() => { return daysForLocale(locale, startDay); }, [locale, startDay]); return (

{daysData.map((day) => (

{day}

))}

); }; export type CalendarItemProps = { feature: Feature; className?: string; }; export const CalendarItem = memo( ({ feature, className }: CalendarItemProps) => (

{feature.name}

) ); CalendarItem.displayName = "CalendarItem"; export type CalendarProviderProps = { locale?: Intl.LocalesArgument; startDay?: number; children: ReactNode; className?: string; }; export const CalendarProvider = ({ locale = "en-US", startDay = 0, children, className, }: CalendarProviderProps) => (

{children}

);

calendar

Instalação

Dependências

Registry dependencies