@dotss/ui 0.0.6 → 0.0.8

package/components/DatePicker/DatePicker.tsx

@@ -1,780 +0,0 @@
-import type { HTMLAttributes, MouseEvent, TouchEvent } from 'react';
-import { forwardRef, useCallback, useEffect, useLayoutEffect, useRef, useState } from 'react';
-
-import IconButton from '@components/IconButton';
-import Menu from '@components/Menu';
-import MenuBlock from '@components/Menu/MenuBlock';
-import useTheme from '@core/useTheme';
-import type { GeneralComponentProps } from '@typings/component';
-
-import {
-  DateChanger,
-  Day,
-  StyledDatePicker,
-  Title,
-  TitleBox,
-  WeekBody,
-  WeekContainer,
-  WeekHead,
-  WeekPanel,
-  WeekRow
-} from './DatePicker.styles';
-
-export type DateValue = string | number | Date | null;
-
-export type DatePickerValue = DateValue[] | DateValue;
-
-export type DateFormatter<T> = typeof formatDate<T>;
-
-export interface DatePickerProps
-  extends GeneralComponentProps<Omit<HTMLAttributes<HTMLDivElement>, 'onChange'>> {
-  onChange?: (date: string | string[], dateFormatter: DateFormatter<string>) => void;
-  value?: DatePickerValue;
-  date?: DateValue;
-  minDate?: DateValue;
-  maxDate?: DateValue;
-  holidayDates?: DatePickerValue;
-  disableDates?: DatePickerValue;
-  showWeekHead?: boolean;
-  multiple?: boolean;
-  period?: boolean;
-  enableMonthSelect?: boolean;
-  showToday?: boolean;
-  edgeSpacing?: number;
-}
-
-const WEEK_ROW_HEIGHT = 30;
-
-const DatePicker = forwardRef<HTMLDivElement, DatePickerProps>(function DatePicker(
-  {
-    onChange,
-    value,
-    date,
-    minDate,
-    maxDate,
-    holidayDates,
-    disableDates,
-    showWeekHead = false,
-    multiple = false,
-    period = false,
-    enableMonthSelect = false,
-    showToday = false,
-    edgeSpacing = 0,
-    inlineCSS,
-    ...props
-  },
-  ref
-) {
-  const { spacing } = useTheme();
-
-  const [currentDate, setCurrentDate] = useState(
-    (typeof date === 'string' || typeof date === 'number' ? new Date(date) : date) || new Date()
-  );
-  const [startDate, setStartDate] = useState<DateValue | null>(() => {
-    if (Array.isArray(value) && value.length > 0) {
-      return formatDate(value[0]);
-    }
-    return formatDate(value);
-  });
-  const [endDate, setEndDate] = useState<DateValue | null>(() => {
-    if (Array.isArray(value) && value.length > 1) {
-      return formatDate(value[value.length - 1]);
-    }
-    return null;
-  });
-  const [containerWidth, setContainerWidth] = useState(0);
-  const [currentIndex, setCurrentIndex] = useState(1);
-  const [isOnWeekPanelTransformInitTimer, setIsOnWeekPanelTransformInitTimer] = useState(false);
-  const [isOpen, setIsOpen] = useState(false);
-
-  const weekContainerRef = useRef<HTMLDivElement>(null);
-  const weekPanelRef = useRef<HTMLDivElement>(null);
-  const startXRef = useRef(0);
-  const currentXRef = useRef(0);
-  const isSwipingRef = useRef(false);
-  const prevCurrentIndexRef = useRef(currentIndex);
-  const weekPanelTransformInitTimerRef = useRef<ReturnType<typeof setTimeout>>();
-  const titleBoxRef = useRef<HTMLDivElement>(null);
-  const menuRef = useRef<HTMLDivElement>(null);
-
-  const currentYear = currentDate.getFullYear();
-  const currentMonth = currentDate.getMonth();
-  const currentWeeks = initMonthDays(currentYear, currentMonth);
-  const currentDisplayMonth = getDisplayMonth(currentMonth);
-  const currentSelectedDates = formatDate<string | string[]>(value);
-  const currentHolidayDates = formatDate<string | string[]>(holidayDates);
-  const currentDisableDates = formatDate<string | string[]>(disableDates);
-  const isDisabledPrevButton = isBefore(currentDate, minDate) || isSameMonth(currentDate, minDate);
-  const isDisabledNextButton = isAfter(currentDate, maxDate) || isSameMonth(currentDate, maxDate);
-  const prevDate = new Date(currentYear, currentMonth - 1);
-  const nextDate = new Date(currentYear, currentMonth + 1);
-  const title = `${currentYear}. ${currentDisplayMonth}`;
-  const activePeriodMode = period && !!startDate && !!endDate;
-
-  const weekPanelDates = [
-    {
-      year: prevDate.getFullYear(),
-      month: getDisplayMonth(prevDate.getMonth()),
-      weeks: initMonthDays(prevDate.getFullYear(), prevDate.getMonth())
-    },
-    {
-      year: currentYear,
-      month: currentDisplayMonth,
-      weeks: currentWeeks
-    },
-    {
-      year: nextDate.getFullYear(),
-      month: getDisplayMonth(nextDate.getMonth()),
-      weeks: initMonthDays(nextDate.getFullYear(), nextDate.getMonth())
-    }
-  ];
-
-  const maxHeight =
-    weekPanelDates[1].weeks.length * (WEEK_ROW_HEIGHT + spacing.content(2)) + spacing.content(2);
-
-  const startSwipe = (clientX: number) => () => {
-    if (!multiple) return;
-
-    if (weekPanelRef.current) {
-      weekPanelRef.current.style.transition = 'none';
-      weekPanelRef.current.style.cursor = 'grabbing';
-    }
-
-    startXRef.current = clientX;
-
-    isSwipingRef.current = true;
-  };
-
-  const endSwipe = useCallback(() => {
-    if (!isSwipingRef.current) return;
-
-    const endClientX = containerWidth - currentXRef.current;
-    const diff = Math.abs(containerWidth - endClientX);
-    const limitDiff = containerWidth * 0.1;
-
-    if (weekPanelRef.current) {
-      weekPanelRef.current.style.transform = `translate3d(-${containerWidth * currentIndex}px, 0, 0)`;
-      weekPanelRef.current.style.cursor = 'grab';
-      weekPanelRef.current.style.transition = 'transform 0.2s';
-    }
-
-    startXRef.current = 0;
-    currentXRef.current = 0;
-    isSwipingRef.current = false;
-
-    if (diff <= limitDiff) {
-      return;
-    }
-
-    if (containerWidth < endClientX) {
-      setCurrentIndex((prevState) => prevState + 1);
-    } else if (containerWidth > endClientX) {
-      setCurrentIndex((prevState) => prevState - 1);
-    }
-  }, [containerWidth, currentIndex]);
-
-  const handleClick = (newDate: string) => () => {
-    if (isSwipingRef.current || currentIndex !== 1) return;
-
-    if (!period) {
-      onChange?.(newDate, formatDate);
-      return;
-    }
-
-    if (isSame(newDate, startDate) && Array.isArray(value) && value.length === 1) {
-      setStartDate(null);
-      setEndDate(null);
-      onChange?.([], formatDate);
-      return;
-    } else if (isSame(newDate, startDate) && !Array.isArray(value) && isSame(newDate, value)) {
-      setStartDate(null);
-      setEndDate(null);
-      onChange?.([], formatDate);
-      return;
-    }
-
-    if (!startDate) {
-      setStartDate(newDate);
-      onChange?.(newDate, formatDate);
-      return;
-    }
-
-    if (!endDate && startDate) {
-      const [newStartDate, newEndDate] = isAfter(newDate, startDate)
-        ? [startDate, newDate]
-        : [newDate, startDate];
-
-      setStartDate(newStartDate);
-      setEndDate(newEndDate);
-
-      const datesInRange = getDatesInRange([newStartDate, newEndDate], disableDates);
-      onChange?.(datesInRange, formatDate);
-      return;
-    }
-
-    if (startDate && endDate) {
-      setStartDate(newDate);
-      setEndDate(null);
-      onChange?.(newDate, formatDate);
-    }
-  };
-
-  const handleMouseDown = (e: MouseEvent<HTMLDivElement>) => startSwipe(e.clientX)();
-
-  const handleTouchStart = (e: TouchEvent<HTMLDivElement>) => startSwipe(e.touches[0].clientX)();
-
-  const handleClickPrev = () => {
-    if (isOnWeekPanelTransformInitTimer) return;
-
-    if (weekPanelRef.current) {
-      weekPanelRef.current.style.transition = 'transform 0.2s';
-    }
-
-    setCurrentIndex((prevState) => prevState - 1);
-  };
-
-  const handleClickNext = () => {
-    if (isOnWeekPanelTransformInitTimer) return;
-
-    if (weekPanelRef.current) {
-      weekPanelRef.current.style.transition = 'transform 0.2s';
-    }
-
-    setCurrentIndex((prevState) => prevState + 1);
-  };
-
-  const handleOpen = () => setIsOpen((prevState) => !prevState);
-
-  const handleChangeMonth = (value?: string | number) => {
-    if (!value) return;
-
-    const [year, month] = value.toString().split('.').map(Number);
-
-    setCurrentDate(new Date(year, month - 1));
-    setIsOpen(false);
-  };
-
-  useLayoutEffect(() => {
-    setContainerWidth(weekContainerRef.current?.clientWidth || 0);
-  }, [multiple]);
-
-  useEffect(() => {
-    const handleResizeAndScroll = () => {
-      setContainerWidth(weekContainerRef.current?.clientWidth || 0);
-    };
-
-    window.addEventListener('resize', handleResizeAndScroll);
-    window.addEventListener('scroll', handleResizeAndScroll);
-
-    return () => {
-      window.removeEventListener('resize', handleResizeAndScroll);
-      window.removeEventListener('scroll', handleResizeAndScroll);
-    };
-  }, [multiple]);
-
-  useEffect(() => {
-    const weekPanelElement = weekPanelRef.current;
-
-    const moveSwipe = (
-      clientX: number,
-      clientY: number,
-      e: globalThis.TouchEvent | globalThis.MouseEvent
-    ) => {
-      if (!weekPanelElement || !isSwipingRef.current) return;
-
-      currentXRef.current = clientX - startXRef.current;
-      const movedTouchClientY = clientY - startXRef.current;
-      const threshold = 5;
-
-      isSwipingRef.current =
-        isSwipingRef.current ||
-        (Math.abs(currentXRef.current) > threshold && Math.abs(movedTouchClientY) < threshold * 2);
-
-      if (e.cancelable) {
-        e.preventDefault();
-      }
-
-      if (isSwipingRef.current) {
-        if (isDisabledPrevButton && currentXRef.current > 0) {
-          endSwipe();
-          return;
-        }
-
-        if (isDisabledNextButton && currentXRef.current < 0) {
-          endSwipe();
-          return;
-        }
-
-        if (Math.abs(currentXRef.current) >= 10) {
-          weekPanelElement.style.transform = `translate3d(${currentXRef.current - containerWidth * currentIndex}px, 0, 0)`;
-          weekPanelElement.style.cursor = 'grabbing';
-        }
-      }
-    };
-
-    const handleTouchMove = (e: globalThis.TouchEvent) =>
-      moveSwipe(e.touches[0].clientX, e.touches[0].clientY, e);
-
-    const handleMouseMove = (e: globalThis.MouseEvent) => {
-      if (!isSwipingRef.current) return;
-
-      moveSwipe(e.clientX, e.clientY, e);
-    };
-
-    weekPanelElement?.addEventListener('mousemove', handleMouseMove);
-    weekPanelElement?.addEventListener('touchmove', handleTouchMove);
-
-    return () => {
-      weekPanelElement?.removeEventListener('mousemove', handleMouseMove);
-      weekPanelElement?.removeEventListener('touchmove', handleTouchMove);
-    };
-  }, [containerWidth, currentIndex, endSwipe, isDisabledNextButton, isDisabledPrevButton]);
-
-  useEffect(() => {
-    setIsOnWeekPanelTransformInitTimer(true);
-
-    weekPanelTransformInitTimerRef.current = setTimeout(() => {
-      if (weekPanelRef.current) {
-        weekPanelRef.current.style.transition = 'none';
-      }
-
-      if (currentIndex > prevCurrentIndexRef.current) {
-        setCurrentIndex(1);
-        setCurrentDate((prevState) => new Date(prevState.setMonth(prevState.getMonth() + 1)));
-        prevCurrentIndexRef.current = 1;
-      } else if (currentIndex < prevCurrentIndexRef.current) {
-        setCurrentDate((prevState) => new Date(prevState.setMonth(prevState.getMonth() - 1)));
-        setCurrentIndex(1);
-        prevCurrentIndexRef.current = 1;
-      } else {
-        prevCurrentIndexRef.current = currentIndex;
-      }
-
-      setIsOnWeekPanelTransformInitTimer(false);
-    }, 200);
-  }, [currentIndex]);
-
-  useLayoutEffect(() => {
-    if (!period || !Array.isArray(value)) return;
-
-    const datesInRange = getDatesInRange(value, disableDates);
-
-    if (value.length < datesInRange.length) {
-      onChange?.(datesInRange, formatDate);
-    }
-  }, [period, value, onChange, disableDates]);
-
-  useEffect(() => {
-    let timer: ReturnType<typeof setTimeout>;
-
-    if (isOpen) {
-      timer = setTimeout(() => {
-        if (menuRef.current) {
-          const menuListElement = menuRef.current.querySelector('ul');
-          const selectedElement = menuListElement?.querySelector(`[data-value="${title}"]`);
-
-          selectedElement?.scrollIntoView({
-            block: 'start'
-          });
-        }
-      }, 200);
-    }
-
-    return () => {
-      clearTimeout(timer);
-    };
-  }, [isOpen, title]);
-
-  useEffect(() => {
-    return () => {
-      if (weekPanelTransformInitTimerRef.current) {
-        clearTimeout(weekPanelTransformInitTimerRef.current);
-      }
-    };
-  }, []);
-
-  return (
-    <StyledDatePicker ref={ref} {...props} css={inlineCSS}>
-      {multiple ? (
-        <DateChanger>
-          <IconButton
-            name="ChevronLeftLine"
-            size="small"
-            onClick={handleClickPrev}
-            disabled={isDisabledPrevButton}
-          />
-          <TitleBox
-            ref={titleBoxRef}
-            clickable={!!enableMonthSelect}
-            onClick={enableMonthSelect ? handleOpen : undefined}
-          >
-            {title}
-            {enableMonthSelect && <IconButton name="ArrowDownFill" size="xSmall" />}
-          </TitleBox>
-          <IconButton
-            name="ChevronRightLine"
-            size="small"
-            onClick={handleClickNext}
-            disabled={isDisabledNextButton}
-          />
-        </DateChanger>
-      ) : (
-        <Title
-          ref={titleBoxRef}
-          clickable={!!enableMonthSelect}
-          onClick={enableMonthSelect ? handleOpen : undefined}
-        >
-          {title}
-          {enableMonthSelect && <IconButton name="ArrowDownFill" size="xSmall" />}
-        </Title>
-      )}
-      {enableMonthSelect && (
-        <Menu
-          anchorRef={titleBoxRef}
-          ref={menuRef}
-          open={isOpen}
-          onClose={handleOpen}
-          onChange={handleChangeMonth}
-          value={title}
-          placement={multiple ? 'bottom-center' : 'bottom-left'}
-          width={160}
-          fitToAnchorWidth={false}
-          maxHeight={368}
-        >
-          {Array.from({ length: 130 }, (_, index) => {
-            const year = 1970 + index;
-            return Array.from({ length: 12 }, (_, monthIndex) => {
-              const month = monthIndex + 1;
-              const formattedMonth = month < 10 ? `0${month}` : month;
-              const lastDay = new Date(year, monthIndex + 1, 0).getDate();
-              const minCompareDate = `${year}-${formattedMonth}-${lastDay}`;
-              const maxCompareDate = `${year}-${formattedMonth}-01`;
-
-              if (isBefore(minCompareDate, minDate) || isAfter(maxCompareDate, maxDate))
-                return null;
-
-              return (
-                <MenuBlock key={`${year}-${formattedMonth}`} value={`${year}. ${formattedMonth}`}>
-                  {`${year}. ${formattedMonth}`}
-                </MenuBlock>
-              );
-            });
-          })}
-        </Menu>
-      )}
-      {showWeekHead && (
-        <WeekHead edgeSpacing={edgeSpacing}>
-          <span>일</span>
-          <span>월</span>
-          <span>화</span>
-          <span>수</span>
-          <span>목</span>
-          <span>금</span>
-          <span>토</span>
-        </WeekHead>
-      )}
-      <WeekContainer ref={weekContainerRef}>
-        <WeekPanel
-          ref={weekPanelRef}
-          onMouseDown={handleMouseDown}
-          onMouseUp={endSwipe}
-          onMouseLeave={endSwipe}
-          onTouchStart={handleTouchStart}
-          onTouchEnd={endSwipe}
-          onTouchCancel={endSwipe}
-          style={{
-            transform: multiple
-              ? `translate3d(-${containerWidth * currentIndex}px, 0, 0)`
-              : undefined,
-            cursor: multiple ? 'grab' : undefined,
-            maxHeight
-          }}
-        >
-          {multiple &&
-            weekPanelDates.map(({ year: weekPanelYear, month: weekPanelMonth, weeks }) => (
-              <WeekBody
-                key={`week-body-${weekPanelYear}-${weekPanelMonth}`}
-                edgeSpacing={edgeSpacing}
-              >
-                {weeks.map((week, weekIndex) => (
-                  <WeekRow key={`${weekPanelYear}-${weekPanelMonth}-week-row-${String(week)}`}>
-                    {week.map((day, dayIndex) => {
-                      const thisDate = `${weekPanelYear}-${weekPanelMonth}-${getDisplayDay(day || 0)}`;
-                      const isToday = isSame(thisDate, new Date());
-                      const isHoliday = Array.isArray(currentHolidayDates)
-                        ? currentHolidayDates.includes(thisDate)
-                        : currentHolidayDates === thisDate;
-                      const isSelected = Array.isArray(currentSelectedDates)
-                        ? currentSelectedDates.includes(thisDate)
-                        : currentSelectedDates === thisDate;
-                      const isDisabled =
-                        !day ||
-                        (Array.isArray(currentDisableDates)
-                          ? currentDisableDates.includes(thisDate)
-                          : currentDisableDates === thisDate) ||
-                        isAfter(thisDate, maxDate) ||
-                        isBefore(thisDate, minDate);
-                      const isStartDate = activePeriodMode && isSame(thisDate, startDate);
-                      const isEndDate = activePeriodMode && isSame(thisDate, endDate);
-                      const isInRange =
-                        activePeriodMode &&
-                        isAfter(thisDate, startDate) &&
-                        isBefore(thisDate, endDate);
-
-                      return (
-                        <Day
-                          key={`${weekPanelYear}-${weekPanelMonth}-week-row-${dayIndex}-${day ? thisDate : `${weekIndex}-${dayIndex}`}`}
-                          variant={
-                            isStartDate
-                              ? 'start'
-                              : isEndDate
-                                ? 'end'
-                                : isInRange
-                                  ? 'middle'
-                                  : undefined
-                          }
-                          onClick={handleClick(thisDate)}
-                          today={showToday && isToday}
-                          holiday={isHoliday}
-                          selected={isSelected}
-                          disabled={isDisabled}
-                        >
-                          <span>{day}</span>
-                        </Day>
-                      );
-                    })}
-                  </WeekRow>
-                ))}
-              </WeekBody>
-            ))}
-          {!multiple && (
-            <WeekBody edgeSpacing={edgeSpacing}>
-              {currentWeeks.map((week, weekIndex) => (
-                <WeekRow key={`${currentYear}-${currentDisplayMonth}-week-row-${String(week)}`}>
-                  {week.map((day, dayIndex) => {
-                    const thisDate = `${currentYear}-${currentDisplayMonth}-${getDisplayDay(day || 0)}`;
-                    const isToday = isSame(thisDate, new Date());
-                    const isHoliday = Array.isArray(currentHolidayDates)
-                      ? currentHolidayDates.includes(thisDate)
-                      : currentHolidayDates === thisDate;
-                    const isSelected = Array.isArray(currentSelectedDates)
-                      ? currentSelectedDates.includes(thisDate)
-                      : currentSelectedDates === thisDate;
-                    const isDisabled =
-                      !day ||
-                      (Array.isArray(currentDisableDates)
-                        ? currentDisableDates.includes(thisDate)
-                        : currentDisableDates === thisDate) ||
-                      isAfter(thisDate, maxDate) ||
-                      isBefore(thisDate, minDate);
-                    const isStartDate = activePeriodMode && isSame(thisDate, startDate);
-                    const isEndDate = activePeriodMode && isSame(thisDate, endDate);
-                    const isInRange =
-                      activePeriodMode &&
-                      isAfter(thisDate, startDate) &&
-                      isBefore(thisDate, endDate);
-
-                    return (
-                      <Day
-                        key={`${currentYear}-${currentDisplayMonth}-week-row-${week}-${day ? thisDate : `${weekIndex}-${dayIndex}`}`}
-                        variant={
-                          isStartDate
-                            ? 'start'
-                            : isEndDate
-                              ? 'end'
-                              : isInRange
-                                ? 'middle'
-                                : undefined
-                        }
-                        onClick={handleClick(thisDate)}
-                        today={showToday && isToday}
-                        holiday={isHoliday}
-                        selected={isSelected}
-                        disabled={isDisabled}
-                      >
-                        <span>{day}</span>
-                      </Day>
-                    );
-                  })}
-                </WeekRow>
-              ))}
-            </WeekBody>
-          )}
-        </WeekPanel>
-      </WeekContainer>
-    </StyledDatePicker>
-  );
-});
-
-export default DatePicker;
-
-function initMonthDays(year: number, month: number) {
-  let result: (number | null)[][] = [];
-  const date = new Date(year, month, 1);
-  const daysInMonth = new Date(year, month + 1, 0).getDate();
-  const dayOfWeek = date.getDay();
-
-  let week = Array.from({ length: dayOfWeek }).fill(null) as (number | null)[];
-
-  for (let day = 1; day <= daysInMonth; day += 1) {
-    week.push(day);
-
-    if (week.length === 7 || day === daysInMonth) {
-      result.push(week);
-      week = [];
-    }
-  }
-
-  result = result.map((resultWeek) =>
-    Array.from({ length: 7 }).map((_, index) => resultWeek[index] || null)
-  );
-
-  return result;
-}
-
-function getDisplayMonth(month: number) {
-  return String(month + 1).length === 1 ? `0${month + 1}` : month + 1;
-}
-
-function getDisplayDay(day: number) {
-  return String(day).length === 1 ? `0${day}` : day;
-}
-
-function formatDate<T>(value?: DatePickerValue): T {
-  if (Array.isArray(value)) {
-    return value.map((d) => {
-      if (d instanceof Date) {
-        return `${d.getFullYear()}-${getDisplayMonth(d.getMonth())}-${getDisplayDay(d.getDate())}`;
-      }
-      return d;
-    }) as T;
-  }
-
-  if (value instanceof Date) {
-    return `${value.getFullYear()}-${getDisplayMonth(value.getMonth())}-${getDisplayDay(value.getDate())}` as T;
-  }
-
-  if (typeof value === 'number') {
-    const date = new Date(value);
-    return `${date.getFullYear()}-${getDisplayMonth(date.getMonth())}-${getDisplayDay(date.getDate())}` as T;
-  }
-
-  return value as T;
-}
-
-function isAfter(a?: DateValue, b?: DateValue) {
-  if (!a || !b) {
-    return false;
-  }
-
-  const aDate = a instanceof Date ? a : new Date(a);
-  aDate.setHours(0);
-  aDate.setMinutes(0);
-  aDate.setSeconds(0);
-  aDate.setMilliseconds(0);
-  const aTime = aDate.getTime();
-  const bDate = b instanceof Date ? b : new Date(b);
-  bDate.setHours(0);
-  bDate.setMinutes(0);
-  bDate.setSeconds(0);
-  bDate.setMilliseconds(0);
-  const bTime = bDate.getTime();
-
-  return aTime > bTime;
-}
-
-function isBefore(a?: DateValue, b?: DateValue) {
-  if (!a || !b) {
-    return false;
-  }
-
-  const aDate = a instanceof Date ? a : new Date(a);
-  aDate.setHours(0);
-  aDate.setMinutes(0);
-  aDate.setSeconds(0);
-  aDate.setMilliseconds(0);
-  const aTime = aDate.getTime();
-  const bDate = b instanceof Date ? b : new Date(b);
-  bDate.setHours(0);
-  bDate.setMinutes(0);
-  bDate.setSeconds(0);
-  bDate.setMilliseconds(0);
-  const bTime = bDate.getTime();
-
-  return aTime < bTime;
-}
-
-function isSameMonth(a?: DateValue, b?: DateValue) {
-  if (!a || !b) {
-    return false;
-  }
-
-  const aDate = a instanceof Date ? a : new Date(a);
-  const bDate = b instanceof Date ? b : new Date(b);
-
-  return (
-    `${aDate.getFullYear()}-${aDate.getMonth()}` === `${bDate.getFullYear()}-${bDate.getMonth()}`
-  );
-}
-
-function isSame(a?: DateValue, b?: DateValue) {
-  if (!a || !b) {
-    return false;
-  }
-
-  const aDate = a instanceof Date ? a : new Date(a);
-  aDate.setHours(0);
-  aDate.setMinutes(0);
-  aDate.setSeconds(0);
-  aDate.setMilliseconds(0);
-  const aTime = aDate.getTime();
-  const bDate = b instanceof Date ? b : new Date(b);
-  bDate.setHours(0);
-  bDate.setMinutes(0);
-  bDate.setSeconds(0);
-  bDate.setMilliseconds(0);
-  const bTime = bDate.getTime();
-
-  return aTime === bTime;
-}
-
-function getDatesInRange(value?: DatePickerValue, disableDates?: DatePickerValue): string[] {
-  if (!value || !Array.isArray(value) || value.length === 0) {
-    return [];
-  }
-
-  const dates = value.map((date) => {
-    if (date instanceof Date) {
-      return date;
-    }
-    if (date === null) {
-      return new Date();
-    }
-    return new Date(date);
-  });
-
-  const startDate = new Date(Math.min(...dates.map((date) => date.getTime())));
-  const endDate = new Date(Math.max(...dates.map((date) => date.getTime())));
-
-  const result: string[] = [];
-  const currentDate = new Date(startDate);
-
-  while (currentDate <= endDate) {
-    if (Array.isArray(disableDates) && disableDates.includes(currentDate)) {
-      currentDate.setDate(currentDate.getDate() + 1);
-      continue;
-    } else if (disableDates === currentDate) {
-      currentDate.setDate(currentDate.getDate() + 1);
-      continue;
-    }
-
-    result.push(
-      `${currentDate.getFullYear()}-${getDisplayMonth(currentDate.getMonth())}-${getDisplayDay(
-        currentDate.getDate()
-      )}`
-    );
-    currentDate.setDate(currentDate.getDate() + 1);
-  }
-
-  return result;
-}