@daryasidorovich/modsen-datepicker 1.0.0

package/src/hooks/useModal.ts

@@ -0,0 +1,45 @@
+import { useState } from 'react';
+
+interface UseModalOptions {
+  initial?: boolean;
+  onOpen?: () => void;
+  onClose?: () => void;
+}
+
+export const useModal = (options: UseModalOptions = {}) => {
+  const { initial = false, onOpen, onClose } = options;
+  const [isOpen, setIsOpen] = useState(initial);
+
+  const open = () => {
+    onOpen?.();
+    setIsOpen(true);
+  };
+
+  const close = () => {
+    onClose?.();
+    setIsOpen(false);
+  };
+
+  const toggle = () => {
+    setIsOpen((prev) => {
+      const newState = !prev;
+      if (newState) {
+        onOpen?.();
+      } else {
+        onClose?.();
+      }
+      return newState;
+    });
+  };
+
+  const setOpen = (value: boolean) => {
+    if (value) {
+      onOpen?.();
+    } else {
+      onClose?.();
+    }
+    setIsOpen(value);
+  };
+
+  return { isOpen, open, close, toggle, setOpen };
+};

package/src/hooks/useTooltip.ts

@@ -0,0 +1,41 @@
+import { useRef, useState } from 'react';
+
+export const useTooltip = () => {
+  const timeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+
+  const [tooltip, setTooltip] = useState({
+    isVisible: false,
+    x: 0,
+    y: 0,
+  });
+
+  const handleDayMouseEnter = (e: React.MouseEvent<HTMLButtonElement>) => {
+    const rect = e.currentTarget.getBoundingClientRect();
+    const coords = {
+      x: rect.right - 5,
+      y: rect.top - 10,
+    };
+
+    if (timeoutRef.current) {
+      clearTimeout(timeoutRef.current);
+    }
+
+    timeoutRef.current = setTimeout(() => {
+      setTooltip({
+        isVisible: true,
+        x: coords.x,
+        y: coords.y,
+      });
+    }, 500);
+  };
+
+  const handleDayMouseLeave = () => {
+    if (timeoutRef.current) {
+      clearTimeout(timeoutRef.current);
+    }
+
+    setTooltip((prev) => ({ ...prev, isVisible: false }));
+  };
+
+  return { tooltip, handleDayMouseEnter, handleDayMouseLeave };
+};

package/src/hooks/useValidate.ts

@@ -0,0 +1,80 @@
+import { useEffect, useState } from 'react';
+import { useIMask } from 'react-imask';
+
+import { DATE_MASK } from '@/constants/dateMask';
+import { getRangeError } from '@/utils/dateChecks';
+import { formatDateForInput, parseDate } from '@/utils/formatDate';
+
+export function useValidate(selectedDate: Date | undefined) {
+  const [currentDate, setCurrentDate] = useState(selectedDate);
+  const [error, setError] = useState('');
+  const { ref, value, setValue } = useIMask(DATE_MASK);
+
+  useEffect(() => {
+    setCurrentDate(selectedDate);
+    if (selectedDate) {
+      setValue(formatDateForInput(selectedDate));
+    } else {
+      setValue('');
+    }
+  }, [selectedDate, setValue]);
+
+  const handleDateValidation = (
+    value: string,
+    startDate?: Date
+  ): Date | undefined => {
+    if (!value) {
+      setError('');
+      setCurrentDate(undefined);
+      return;
+    }
+    const parsed = parseDate(value);
+
+    if (!parsed) {
+      setError('Invalid date');
+      setCurrentDate(undefined);
+      return;
+    }
+
+    if (startDate) {
+      const rangeError = getRangeError(parsed, startDate);
+      if (rangeError) {
+        setError(rangeError);
+        setCurrentDate(undefined);
+        return;
+      }
+    }
+
+    setError('');
+    setCurrentDate(parsed);
+    return parsed;
+  };
+
+  const handleClearInput = () => {
+    setCurrentDate(undefined);
+    setValue('');
+    setError('');
+  };
+
+  const handleDateSelect = (date?: Date) => {
+    setCurrentDate(date);
+    if (!date) {
+      setValue('');
+      return;
+    }
+    setValue(formatDateForInput(date));
+    setError('');
+  };
+
+  return {
+    currentDate,
+    setCurrentDate,
+    handleDateValidation,
+    handleClearInput,
+    handleDateSelect,
+    ref,
+    value,
+    setValue,
+    error,
+  };
+}

package/src/index.ts

@@ -0,0 +1,15 @@
+import { FIRST_DAY_OF_WEEK } from './constants/firstDayOfWeek';
+import { MODES } from './constants/modes';
+
+export { BaseCalendar } from './components/BaseCalendar';
+export type {
+  BaseCalendarProps,
+  CalendarProps,
+} from './components/Calendar/types';
+export type { DatePickerProps } from './components/DatePicker';
+export { DatePicker } from './components/DatePicker';
+export type { RangePickerProps } from './components/RangePicker';
+export { RangePicker } from './components/RangePicker';
+export type { FIRST_DAY_OF_WEEK_TYPES } from './constants/firstDayOfWeek';
+export type { MODES_TYPES } from './constants/modes';
+export { FIRST_DAY_OF_WEEK, MODES };

package/src/services/calendarService.ts

@@ -0,0 +1,62 @@
+import { FIRST_DAY_OF_WEEK_TYPES } from '@/constants/firstDayOfWeek';
+import { MODES, MODES_TYPES } from '@/constants/modes';
+import { getMonthDays, getWeekDays, getWeeksFromDays } from '@/utils/calendar';
+import { isCurrentMonth, isWeekend } from '@/utils/dateChecks';
+
+export class CalendarService {
+  private hideWeekends: boolean = false;
+
+  constructor(
+    public monthDate: Date = new Date(),
+    public firstDayOfWeek?: FIRST_DAY_OF_WEEK_TYPES,
+    public selectedDate?: Date,
+    public mode: MODES_TYPES = MODES.MONTH,
+    public rangeStart?: Date,
+    public rangeEnd?: Date
+  ) {}
+
+  setHideWeekends(value: boolean) {
+    this.hideWeekends = value;
+    return this;
+  }
+
+  getDays(): Date[] {
+    let days: Date[];
+
+    if (this.mode === MODES.MONTH) {
+      days = getMonthDays(this.monthDate, this.firstDayOfWeek);
+    } else {
+      days = getWeekDays(this.monthDate, this.firstDayOfWeek);
+    }
+
+    return this.applyFilters(days);
+  }
+
+  private applyFilters(days: Date[]): Date[] {
+    let filteredDays = days;
+
+    if (this.hideWeekends) {
+      filteredDays = filteredDays.filter((day) => !isWeekend(day));
+    }
+
+    return filteredDays;
+  }
+
+  getWeeks(): Date[][] {
+    const days = this.getDays();
+    const weekLength = this.hideWeekends ? 5 : 7;
+    return getWeeksFromDays(days, weekLength);
+  }
+
+  getIsCurrentMonth = (date: Date) => {
+    return isCurrentMonth(date, this.monthDate);
+  };
+
+  getIsDisabled = (_date: Date) => {
+    return false;
+  };
+
+  getIsHoliday = (_date: Date) => {
+    return false;
+  };
+}

package/src/services/decorators/withHolidays.test.ts

@@ -0,0 +1,64 @@
+import { isSameDay } from '@/utils/dateChecks';
+
+import { CalendarService } from '../calendarService';
+import { withHolidays } from './withHolidays';
+
+jest.mock('@/utils/dateChecks', () => ({
+  isSameDay: jest.fn(),
+}));
+
+describe('withHolidays:', () => {
+  let calendar: CalendarService = new CalendarService();
+
+  beforeEach(() => {
+    calendar = new CalendarService();
+    jest.clearAllMocks();
+  });
+
+  it('returns the same calendar instance unchanged when the holidays array is empty', () => {
+    const originalGetIsHoliday = calendar.getIsHoliday;
+
+    const result = withHolidays(calendar, []);
+
+    expect(result).toBe(calendar);
+    expect(result.getIsHoliday).toBe(originalGetIsHoliday);
+  });
+
+  it('returns the same calendar instance (mutates rather than clones)', () => {
+    const holidays = [new Date(2026, 0, 1)];
+    const result = withHolidays(calendar, holidays);
+
+    expect(result).toBe(calendar);
+  });
+
+  it('overrides getIsHoliday with a new function when holidays is not empty', () => {
+    const holidays = [new Date(2026, 0, 1)];
+    const originalGetIsHoliday = calendar.getIsHoliday;
+
+    withHolidays(calendar, holidays);
+
+    expect(calendar.getIsHoliday).not.toBe(originalGetIsHoliday);
+  });
+
+  it('returns true when the date matches a holiday', () => {
+    (isSameDay as jest.Mock).mockReturnValue(true);
+
+    const holidays = [new Date(2026, 0, 1)];
+    const date = new Date(2026, 0, 1);
+
+    withHolidays(calendar, holidays);
+
+    expect(calendar.getIsHoliday(date)).toBe(true);
+  });
+
+  it('returns false when the date does not match a holiday', () => {
+    (isSameDay as jest.Mock).mockReturnValue(false);
+
+    const holidays = [new Date(2026, 0, 1)];
+    const date = new Date(2026, 0, 2);
+
+    withHolidays(calendar, holidays);
+
+    expect(calendar.getIsHoliday(date)).toBe(false);
+  });
+});

package/src/services/decorators/withHolidays.ts

@@ -0,0 +1,12 @@
+import { isSameDay } from '@/utils/dateChecks';
+
+import { CalendarService } from '../calendarService';
+
+export const withHolidays = (calendar: CalendarService, holidays: Date[]) => {
+  if (!holidays.length) return calendar;
+
+  calendar.getIsHoliday = (date: Date) => {
+    return holidays.some((holiday) => isSameDay(holiday, date));
+  };
+  return calendar;
+};

package/src/services/decorators/withMinMax.test.ts

@@ -0,0 +1,77 @@
+import { isDisabled } from '@/utils/dateChecks';
+
+import { CalendarService } from '../calendarService';
+import { withMinMax } from './withMinMax';
+
+jest.mock('@/utils/dateChecks', () => ({
+  isDisabled: jest.fn(),
+}));
+
+describe('withMinMax:', () => {
+  let calendar: CalendarService;
+
+  beforeEach(() => {
+    calendar = new CalendarService();
+    jest.clearAllMocks();
+  });
+
+  it('returns the same calendar instance', () => {
+    const result = withMinMax(
+      calendar,
+      new Date(2026, 0, 1),
+      new Date(2026, 11, 31)
+    );
+
+    expect(result).toBe(calendar);
+  });
+
+  it('returns true when the date is outside the min/max range', () => {
+    calendar.getIsDisabled = jest.fn().mockReturnValue(false);
+    (isDisabled as jest.Mock).mockReturnValue(true);
+
+    withMinMax(calendar, new Date(2026, 0, 1), new Date(2026, 11, 31));
+    const result = calendar.getIsDisabled(new Date(2027, 0, 1));
+
+    expect(result).toBe(true);
+  });
+
+  it('returns false when the date passes both checks', () => {
+    calendar.getIsDisabled = jest.fn().mockReturnValue(false);
+    (isDisabled as jest.Mock).mockReturnValue(false);
+
+    withMinMax(calendar, new Date(2026, 0, 1), new Date(2026, 11, 31));
+    const result = calendar.getIsDisabled(new Date(2026, 5, 15));
+
+    expect(result).toBe(false);
+  });
+
+  it('works with only minDate provided', () => {
+    calendar.getIsDisabled = jest.fn().mockReturnValue(false);
+    (isDisabled as jest.Mock).mockReturnValue(false);
+
+    const minDate = new Date(2026, 0, 1);
+    withMinMax(calendar, minDate);
+    calendar.getIsDisabled(new Date(2026, 5, 15));
+
+    expect(isDisabled).toHaveBeenCalledWith(
+      new Date(2026, 5, 15),
+      minDate,
+      undefined
+    );
+  });
+
+  it('works with only maxDate provided', () => {
+    calendar.getIsDisabled = jest.fn().mockReturnValue(false);
+    (isDisabled as jest.Mock).mockReturnValue(false);
+
+    const maxDate = new Date(2026, 11, 31);
+    withMinMax(calendar, undefined, maxDate);
+    calendar.getIsDisabled(new Date(2026, 5, 15));
+
+    expect(isDisabled).toHaveBeenCalledWith(
+      new Date(2026, 5, 15),
+      undefined,
+      maxDate
+    );
+  });
+});

package/src/services/decorators/withMinMax.ts

@@ -0,0 +1,19 @@
+import { isDisabled } from '@/utils/dateChecks';
+
+import { CalendarService } from '../calendarService';
+
+export function withMinMax(
+  calendar: CalendarService,
+  minDate?: Date,
+  maxDate?: Date
+) {
+  const original = calendar.getIsDisabled;
+
+  calendar.getIsDisabled = (date: Date): boolean => {
+    if (original(date)) return true;
+
+    return isDisabled(date, minDate, maxDate);
+  };
+
+  return calendar;
+}

package/src/services/holidayService.ts

@@ -0,0 +1,56 @@
+const HOLIDAY_API_URL = process.env.STORYBOOK_HOLIDAY_API_URL;
+const API_KEY = process.env.STORYBOOK_HOLIDAY_API_KEY;
+
+export interface Holiday {
+  name: string;
+  date: string;
+}
+
+export const getHolidays = async (
+  year: number = new Date().getFullYear(),
+  signal?: AbortSignal
+): Promise<Date[]> => {
+  try {
+    let holidayDates;
+    const locale = new Intl.Locale(navigator.language);
+    const countryCode = locale.region;
+
+    if (!countryCode) {
+      throw new Error('Cannot get your country code');
+    }
+
+    if (!API_KEY) {
+      throw new Error('API key is not defined');
+    }
+
+    const url = `${HOLIDAY_API_URL}?key=${API_KEY}&country=${countryCode}&year=${year}`;
+    const response = await fetch(url, { signal });
+
+    if (!response.ok) {
+      throw new Error(`Error while loading holidays`);
+    }
+
+    const data = await response.json();
+
+    if (data.holidays) {
+      holidayDates = data.holidays.map((holiday: Holiday) => {
+        const date = new Date(holiday.date);
+        return new Date(date.getFullYear(), date.getMonth(), date.getDate());
+      });
+
+      return holidayDates;
+    }
+
+    return [];
+  } catch (err) {
+    if (err instanceof Error && err.name === 'AbortError') {
+      throw new Error('Fetch aborted');
+    }
+
+    if (err instanceof Error) {
+      throw err;
+    }
+
+    throw new Error('Failed to fetch holidays');
+  }
+};

package/src/setupTests.ts

@@ -0,0 +1 @@
+import '@testing-library/jest-dom';

package/src/store/localStorage.ts

@@ -0,0 +1,33 @@
+import { Task } from './types';
+
+const STORAGE_KEY = 'tasks';
+
+export const loadTasksFromStorage = (): Task[] => {
+  try {
+    const stored = localStorage.getItem(STORAGE_KEY);
+    if (stored) {
+      const parsed = JSON.parse(stored);
+      return parsed.map((task: Task) => ({
+        ...task,
+        date: new Date(task.date),
+      }));
+    }
+  } catch (error) {
+    throw new Error(
+      error instanceof Error
+        ? error.message
+        : 'Failed to load tasks from storage'
+    );
+  }
+  return [];
+};
+
+export const saveTasksToStorage = (tasks: Task[]): void => {
+  try {
+    localStorage.setItem(STORAGE_KEY, JSON.stringify(tasks));
+  } catch (error) {
+    throw new Error(
+      error instanceof Error ? error.message : 'Failed to save tasks to storage'
+    );
+  }
+};