// @ts-nocheck 'use client'; import { Button, buttonVariants } from '@/components/website/ui/button'; import { Calendar, type CalendarProps } from '@/components/website/ui/calendar'; import { Popover, PopoverContent, PopoverTrigger } from '@/components/website/ui/popover'; import { ScrollArea } from '@/components/website/ui/scroll-area'; import { cn } from '@/lib/utils'; import { parseDate } from 'chrono-node'; import { Calendar as CalendarIcon, LucideTextCursorInput } from 'lucide-react'; import React from 'react'; import type { ActiveModifiers } from 'react-day-picker'; /* -------------------------------------------------------------------------- */ /* Inspired By: */ /* @steventey */ /* ------------------https://dub.co/blog/smart-datetime-picker--------------- */ /* -------------------------------------------------------------------------- */ /** * Utility function that parses dates. * Parses a given date string using the `chrono-node` library. * * @param str - A string representation of a date and time. * @returns A `Date` object representing the parsed date and time, or `null` if the string could not be parsed. */ export const parseDateTime = (str: Date | string) => { if (str instanceof Date) return str; return parseDate(str); }; /** * Converts a given timestamp or the current date and time to a string representation in the local time zone. * format: `HH:mm`, adjusted for the local time zone. * * @param timestamp {Date | string} * @returns A string representation of the timestamp */ export const getDateTimeLocal = (timestamp?: Date): string => { const d = timestamp ? new Date(timestamp) : new Date(); if (d.toString() === 'Invalid Date') return ''; return new Date(d.getTime() - d.getTimezoneOffset() * 60000) .toISOString() .split(':') .slice(0, 2) .join(':'); }; /** * Formats a given date and time object or string into a human-readable string representation. * "MMM D, YYYY h:mm A" (e.g. "Jan 1, 2023 12:00 PM"). * * @param datetime - {Date | string} * @returns A string representation of the date and time */ const formatTimeOnly = (datetime: Date | string) => { return new Date(datetime).toLocaleTimeString('en-US', { hour: 'numeric', minute: 'numeric', hour12: true, }); }; const formatDateOnly = (datetime: Date | string) => { return new Date(datetime).toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric', }); }; const formatDateTime = ( datetime: Date | string, showCalendar: boolean, showTimePicker: boolean ) => { if (!showCalendar && showTimePicker) { return formatTimeOnly(datetime); } if (showCalendar && !showTimePicker) { return formatDateOnly(datetime); } return new Date(datetime).toLocaleTimeString('en-US', { month: 'short', day: 'numeric', year: 'numeric', hour: 'numeric', minute: 'numeric', hour12: true, }); }; const inputBase = 'bg-transparent focus:outline-hidden focus:ring-0 focus-within:outline-hidden focus-within:ring-0 sm:text-sm disabled:cursor-not-allowed disabled:opacity-50'; // @source: https://www.perplexity.ai/search/in-javascript-how-RfI7fMtITxKr5c.V9Lv5KA#1 // use this pattern to validate the transformed date string for the natural language input const naturalInputValidationPattern = '^[A-Z][a-z]{2}sd{1,2},sd{4},sd{1,2}:d{2}s[AP]M$'; const DEFAULT_SIZE = 96; /** * Smart time input Docs: {@link: https://shadcn-extension.vercel.app/docs/smart-time-input} */ interface SmartDatetimeInputProps { value?: Date; onValueChange: (date: Date) => void; showCalendar?: boolean; showTimePicker?: boolean; } interface SmartDatetimeInputContextProps extends SmartDatetimeInputProps { Time: string; onTimeChange: (time: string) => void; } const SmartDatetimeInputContext = React.createContext(null); const useSmartDateInput = () => { const context = React.useContext(SmartDatetimeInputContext); if (!context) { throw new Error('useSmartDateInput must be used within SmartDateInputProvider'); } return context; }; export const SmartDatetimeInput = React.forwardRef< HTMLInputElement, Omit< React.InputHTMLAttributes, 'type' | 'ref' | 'value' | 'defaultValue' | 'onBlur' > & SmartDatetimeInputProps >( ( { className, value, onValueChange, placeholder, disabled, showCalendar = true, showTimePicker = true, }, ref ) => { const [Time, setTime] = React.useState(''); const onTimeChange = React.useCallback((time: string) => { setTime(time); }, []); // If neither calendar nor timepicker is specified, show both const shouldShowBoth = showCalendar === showTimePicker; return (

); } ); SmartDatetimeInput.displayName = 'DatetimeInput'; // Make it a standalone component const TimePicker = () => { const { value, onValueChange, Time, onTimeChange } = useSmartDateInput(); const [activeIndex, setActiveIndex] = React.useState(-1); const timestamp = 15; const formateSelectedTime = React.useCallback( (time: string, hour: number, partStamp: number) => { onTimeChange(time); const newVal = value ? new Date(value) : new Date(); // If no value exists, use current date but only set the time newVal.setHours(hour, partStamp === 0 ? Number.parseInt('00') : timestamp * partStamp); onValueChange(newVal); }, [value, onValueChange, onTimeChange] ); const handleKeydown = React.useCallback( (e: React.KeyboardEvent) => { e.stopPropagation(); if (!document) return; const moveNext = () => { const nextIndex = activeIndex + 1 > DEFAULT_SIZE - 1 ? 0 : activeIndex + 1; const currentElm = document.getElementById(`time-${nextIndex}`); currentElm?.focus(); setActiveIndex(nextIndex); }; const movePrev = () => { const prevIndex = activeIndex - 1 < 0 ? DEFAULT_SIZE - 1 : activeIndex - 1; const currentElm = document.getElementById(`time-${prevIndex}`); currentElm?.focus(); setActiveIndex(prevIndex); }; const setElement = () => { const currentElm = document.getElementById(`time-${activeIndex}`); if (!currentElm) return; currentElm.focus(); const timeValue = currentElm.textContent ?? ''; // this should work now haha that hour is what does the trick const PM_AM = timeValue.split(' ')[1]; const PM_AM_hour = Number.parseInt(timeValue.split(' ')[0].split(':')[0]); const hour = PM_AM === 'AM' ? PM_AM_hour === 12 ? 0 : PM_AM_hour : PM_AM_hour === 12 ? 12 : PM_AM_hour + 12; const part = Math.floor(Number.parseInt(timeValue.split(' ')[0].split(':')[1]) / 15); formateSelectedTime(timeValue, hour, part); }; const reset = () => { const currentElm = document.getElementById(`time-${activeIndex}`); currentElm?.blur(); setActiveIndex(-1); }; switch (e.key) { case 'ArrowUp': movePrev(); break; case 'ArrowDown': moveNext(); break; case 'Escape': reset(); break; case 'Enter': setElement(); break; } }, [activeIndex, formateSelectedTime] ); const handleClick = React.useCallback( (hour: number, part: number, PM_AM: string, currentIndex: number) => { formateSelectedTime(`${hour}:${part === 0 ? '00' : timestamp * part} ${PM_AM}`, hour, part); setActiveIndex(currentIndex); }, [formateSelectedTime] ); const currentTime = React.useMemo(() => { const timeVal = Time.split(' ')[0]; return { hours: Number.parseInt(timeVal.split(':')[0]), minutes: Number.parseInt(timeVal.split(':')[1]), }; }, [Time]); React.useEffect(() => { const getCurrentElementTime = () => { const timeVal = Time.split(' ')[0]; const hours = Number.parseInt(timeVal.split(':')[0]); const minutes = Number.parseInt(timeVal.split(':')[1]); const PM_AM = Time.split(' ')[1]; const formatIndex = PM_AM === 'AM' ? hours : hours === 12 ? hours : hours + 12; const formattedHours = formatIndex; console.log(formatIndex); for (let j = 0; j <= 3; j++) { const diff = Math.abs(j * timestamp - minutes); const selected = PM_AM === (formattedHours >= 12 ? 'PM' : 'AM') && (minutes <= 53 ? diff < Math.ceil(timestamp / 2) : diff < timestamp); if (selected) { const trueIndex = activeIndex === -1 ? formattedHours * 4 + j : activeIndex; setActiveIndex(trueIndex); const currentElm = document.getElementById(`time-${trueIndex}`); currentElm?.scrollIntoView({ block: 'center', behavior: 'smooth', }); } } }; getCurrentElementTime(); }, [Time, activeIndex]); const height = React.useMemo(() => { if (!document) return; const calendarElm = document.getElementById('calendar'); if (!calendarElm) return; return calendarElm.style.height; }, []); return (

Time

handleClick(i, part, PM_AM, trueIndex)} onFocus={() => isSuggested && setActiveIndex(trueIndex)} > {currentValue}

); }; const getDefaultPlaceholder = (showCalendar: boolean, showTimePicker: boolean) => { if (!showCalendar && showTimePicker) { return 'e.g. "5pm" or "in 2 hours"'; } if (showCalendar && !showTimePicker) { return 'e.g. "tomorrow" or "next monday"'; } return 'e.g. "tomorrow at 5pm" or "in 2 hours"'; }; const NaturalLanguageInput = React.forwardRef< HTMLInputElement, { placeholder?: string; disabled?: boolean; } >(({ placeholder, ...props }, ref) => { const { value, onValueChange, Time, onTimeChange, showCalendar, showTimePicker } = useSmartDateInput(); const _placeholder = placeholder ?? getDefaultPlaceholder(showCalendar, showTimePicker); const [inputValue, setInputValue] = React.useState(''); React.useEffect(() => { if (!value) { setInputValue(''); return; } const formattedValue = formatDateTime(value, showCalendar, showTimePicker); setInputValue(formattedValue); // Only update time if time picker is shown if (showTimePicker) { const hour = value.getHours(); const timeVal = `${hour >= 12 ? hour % 12 || 12 : hour || 12}:${String( value.getMinutes() ).padStart(2, '0')} ${hour >= 12 ? 'PM' : 'AM'}`; onTimeChange(timeVal); } }, [value, showCalendar, showTimePicker]); const handleParse = React.useCallback( (e: React.ChangeEvent) => { const parsedDateTime = parseDateTime(e.currentTarget.value); if (parsedDateTime) { // If only showing time picker, preserve the current date if (!showCalendar && showTimePicker && value) { parsedDateTime.setFullYear(value.getFullYear(), value.getMonth(), value.getDate()); } // If only showing calendar, preserve the current time if (showCalendar && !showTimePicker && value) { parsedDateTime.setHours(0, 0, 0, 0); } // console.log(parsedDateTime); onValueChange(parsedDateTime); setInputValue(formatDateTime(parsedDateTime, showCalendar, showTimePicker)); if (showTimePicker) { const PM_AM = parsedDateTime.getHours() >= 12 ? 'PM' : 'AM'; const PM_AM_hour = parsedDateTime.getHours(); const hour = PM_AM_hour > 12 ? PM_AM_hour % 12 : PM_AM_hour === 0 || PM_AM_hour === 12 ? 12 : PM_AM_hour; onTimeChange(`${hour}:${String(parsedDateTime.getMinutes()).padStart(2, '0')} ${PM_AM}`); } } }, [value, showCalendar, showTimePicker] ); const handleKeydown = React.useCallback( (e: React.KeyboardEvent) => { if (e.key === 'Enter') { handleParse(e as any); } }, [handleParse] ); return ( setInputValue(e.currentTarget.value)} onKeyDown={handleKeydown} onBlur={handleParse} className={cn( 'px-2 mr-0.5 dark:bg-neutral-800 bg-neutral-50 flex-1 border-none h-8 rounded-sm', inputBase )} {...props} /> ); }); NaturalLanguageInput.displayName = 'NaturalLanguageInput'; type DateTimeLocalInputProps = {} & CalendarProps; const DateTimeLocalInput = ({ className, ...props }: DateTimeLocalInputProps) => { const { value, onValueChange, Time, showCalendar, showTimePicker } = useSmartDateInput(); const formateSelectedDate = React.useCallback( (date: Date | undefined, selectedDate: Date, m: ActiveModifiers, e: React.MouseEvent) => { const parsedDateTime = new Date(selectedDate); if (!showTimePicker) { // If only calendar is shown, set time to start of day parsedDateTime.setHours(0, 0, 0, 0); } else if (value) { // If time picker is shown, preserve existing time parsedDateTime.setHours( value.getHours(), value.getMinutes(), value.getSeconds(), value.getMilliseconds() ); } onValueChange(parsedDateTime); }, [value, showTimePicker, onValueChange] ); return (

{showCalendar && ( )} {showTimePicker && }

); }; DateTimeLocalInput.displayName = 'DateTimeLocalInput';