@daryasidorovich/modsen-datepicker 1.0.0

package/src/types/types.d.ts

@@ -0,0 +1,15 @@
+declare module '*.module.css' {
+  const classes: { [key: string]: string };
+  export default classes;
+}
+
+declare module '*.module.scss' {
+  const classes: { [key: string]: string };
+  export default classes;
+}
+
+declare module '*.svg?react' {
+  import React from 'react';
+  const SVG: React.FC<React.SVGProps<SVGSVGElement>>;
+  export default SVG;
+}

package/src/utils/calendar.test.ts

@@ -0,0 +1,154 @@
+import {
+  getDaysInMonth,
+  getFirstDayOfMonth,
+  getLastDayOfMonth,
+  getMonthDays,
+  getWeekDayIndex,
+  getWeekDays,
+  getWeeksFromDays,
+} from './calendar';
+
+describe('getFirstDayOfMonth:', () => {
+  it('returns the first day of month', () => {
+    const result = getFirstDayOfMonth(new Date(2026, 8, 18));
+    expect(result.getMonth()).toBe(8);
+    expect(result.getDate()).toBe(1);
+  });
+});
+
+describe('getLastDayOfMonth:', () => {
+  it('returns the last day of month', () => {
+    const result = getLastDayOfMonth(new Date(2026, 0, 10));
+    expect(result.getDate()).toBe(31);
+    expect(result.getMonth()).toBe(0);
+  });
+
+  it('handles February in a leap year', () => {
+    const result = getLastDayOfMonth(new Date(2024, 1, 1));
+    expect(result.getDate()).toBe(29);
+  });
+
+  it('handles February in a non-leap year', () => {
+    const result = getLastDayOfMonth(new Date(2025, 1, 1));
+    expect(result.getDate()).toBe(28);
+  });
+});
+
+describe('getDaysInMonth:', () => {
+  it('returns count of days in the month', () => {
+    expect(getDaysInMonth(new Date(2026, 8, 1))).toBe(30);
+    expect(getDaysInMonth(new Date(2026, 7, 1))).toBe(31);
+    expect(getDaysInMonth(new Date(2026, 6, 1))).toBe(31);
+    expect(getDaysInMonth(new Date(2023, 5, 1))).toBe(30);
+  });
+});
+
+describe('getWeekDayIndex:', () => {
+  it('return 0 for Sunday if the first of week is 0', () => {
+    const sunday = new Date(2026, 8, 6);
+    expect(getWeekDayIndex(sunday, 0)).toBe(0);
+  });
+
+  it('return 1 for Monday if the first of week is 0', () => {
+    const monday = new Date(2026, 8, 7);
+    expect(getWeekDayIndex(monday, 0)).toBe(1);
+  });
+
+  it('return 6 for Sunday if the first of week is 1', () => {
+    const sunday = new Date(2026, 8, 6);
+    expect(getWeekDayIndex(sunday, 1)).toBe(6);
+  });
+
+  it('return 0 for Monday if the first of week is 1', () => {
+    const monday = new Date(2026, 8, 7);
+    expect(getWeekDayIndex(monday, 1)).toBe(0);
+  });
+
+  it('uses firstDayOfWeek = 1 by default', () => {
+    const monday = new Date(2026, 8, 7);
+    expect(getWeekDayIndex(monday)).toBe(0);
+  });
+});
+
+describe('getMonthDays:', () => {
+  it('returns a grid with a step of 7', () => {
+    const result = getMonthDays(new Date(2026, 8, 1));
+    expect(result.length % 7).toBe(0);
+  });
+
+  it('includes all month days', () => {
+    const result = getMonthDays(new Date(2026, 8, 1));
+    const daysInCurrentMonth = result.filter(
+      (day) => day.getMonth() === 8 && day.getFullYear() === 2026
+    );
+    expect(daysInCurrentMonth.length).toBe(30);
+  });
+
+  it('the first day of a grid is Monday if firstDayOfWeek = 1', () => {
+    const result = getMonthDays(new Date(2026, 8, 1), 1);
+    expect(result[0].getDay()).toBe(1);
+  });
+
+  it('the first day of a grid is Sunday if firstDayOfWeek = 0', () => {
+    const result = getMonthDays(new Date(2026, 8, 1), 0);
+    expect(result[0].getDay()).toBe(0);
+  });
+
+  it('correctly adds days of the previous and the next monthes', () => {
+    const result = getMonthDays(new Date(2026, 7, 1), 1);
+    expect(result[0].getMonth()).toBe(6);
+    expect(result[4].getMonth()).toBe(6);
+    expect(result[result.length - 1].getMonth()).toBe(8);
+    expect(result[result.length - 6].getMonth()).toBe(8);
+  });
+});
+
+describe('getWeeksFromDays:', () => {
+  const mockDays: Date[] = Array.from(
+    { length: 30 },
+    (_, i) => new Date(2026, 8, i + 1)
+  );
+
+  it('splits the array of days into weeks of 7', () => {
+    const weeks = getWeeksFromDays(mockDays, 7);
+    expect(weeks.length).toBe(5);
+    expect(weeks[0].length).toBe(7);
+    expect(weeks[3].length).toBe(7);
+  });
+
+  it('splits the array of days into weeks of 5', () => {
+    const weeks = getWeeksFromDays(mockDays, 5);
+    weeks.forEach((week) => expect(week.length).toBe(5));
+  });
+
+  it('handles correctly the last incomplete week', () => {
+    const weeks = getWeeksFromDays(mockDays);
+    expect(weeks[0].length).toBe(7);
+    expect(weeks[4].length).toBe(2);
+  });
+
+  it('returns emply array for an empty entry array', () => {
+    expect(getWeeksFromDays([], 7)).toEqual([]);
+  });
+});
+
+describe('getWeekDays:', () => {
+  it('return 7 days', () => {
+    const result = getWeekDays(new Date(2026, 8, 16));
+    expect(result.length).toBe(7);
+  });
+
+  it('starts from Monday if firstDayOfWeek = 1', () => {
+    const wednesday = new Date(2026, 8, 16);
+    const result = getWeekDays(wednesday, 1);
+    expect(result[0].getDay()).toBe(1);
+    expect(result[0].getDate()).toBe(14);
+  });
+
+  it('starts from Sunday if firstDayOfWeek = 0', () => {
+    const wednesday = new Date(2026, 8, 16);
+    const result = getWeekDays(wednesday, 0);
+    expect(result[0].getDay()).toBe(0);
+    expect(result[0].getDate()).toBe(13);
+  });
+});

package/src/utils/calendar.ts

@@ -0,0 +1,82 @@
+export const getFirstDayOfMonth = (date: Date): Date => {
+  return new Date(date.getFullYear(), date.getMonth(), 1);
+};
+
+export const getLastDayOfMonth = (date: Date): Date => {
+  return new Date(date.getFullYear(), date.getMonth() + 1, 0);
+};
+
+export const getDaysInMonth = (date: Date): number => {
+  return getLastDayOfMonth(date).getDate();
+};
+
+export const getWeekDayIndex = (
+  date: Date,
+  firstDayOfWeek: 0 | 1 = 1
+): number => {
+  let index = date.getDay();
+  if (firstDayOfWeek === 1) {
+    index = index === 0 ? 6 : index - 1;
+  }
+  return index;
+};
+
+export const getMonthDays = (date: Date, firstDayOfWeek: 0 | 1 = 1): Date[] => {
+  const year = date.getFullYear();
+  const month = date.getMonth();
+
+  const firstDay = getFirstDayOfMonth(date);
+  const daysInMonth = getDaysInMonth(date);
+  const firstDayIndex = getWeekDayIndex(firstDay, firstDayOfWeek);
+
+  const totalDays = Math.ceil((firstDayIndex + daysInMonth) / 7) * 7;
+  const days: Date[] = [];
+
+  for (let i = 0; i < firstDayIndex; i++) {
+    days.push(new Date(year, month, 1 - firstDayIndex + i));
+  }
+
+  for (let i = 1; i <= daysInMonth; i++) {
+    days.push(new Date(year, month, i));
+  }
+
+  const remaining = totalDays - days.length;
+  for (let i = 1; i <= remaining; i++) {
+    days.push(new Date(year, month + 1, i));
+  }
+
+  return days;
+};
+
+export const getWeeksFromDays = (
+  days: Date[],
+  weekLength: 5 | 7 = 7
+): Date[][] => {
+  const weeks: Date[][] = [];
+  for (let i = 0; i < days.length; i += weekLength) {
+    weeks.push(days.slice(i, i + weekLength));
+  }
+  return weeks;
+};
+
+export const getWeekDays = (date: Date, firstDayOfWeek: 0 | 1 = 1): Date[] => {
+  const year = date.getFullYear();
+  const month = date.getMonth();
+  const day = date.getDate();
+
+  const currentDayOfWeek = date.getDay();
+
+  const offset =
+    firstDayOfWeek === 1 ? (currentDayOfWeek + 6) % 7 : currentDayOfWeek;
+
+  const startDate = new Date(year, month, day - offset);
+
+  const weekDays: Date[] = [];
+  for (let i = 0; i < 7; i++) {
+    const newDate = new Date(startDate);
+    newDate.setDate(startDate.getDate() + i);
+    weekDays.push(newDate);
+  }
+
+  return weekDays;
+};

package/src/utils/controlDate.ts

@@ -0,0 +1,3 @@
+export const setControlDate = (date: Date | undefined) => {
+  return date ? new Date(date) : undefined;
+};

package/src/utils/dateChecks.test.ts

@@ -0,0 +1,216 @@
+import {
+  isCurrentMonth,
+  isDisabled,
+  isInRange,
+  isRangeEnd,
+  isRangeStart,
+  isSameDay,
+  isSelected,
+  isToday,
+  isWeekend,
+} from './dateChecks';
+
+describe('dateChecks:', () => {
+  describe('isSameDay:', () => {
+    it('returns true for same day', () => {
+      const date1 = new Date(2026, 7, 25);
+      const date2 = new Date(2026, 7, 25);
+      expect(isSameDay(date1, date2)).toBe(true);
+    });
+
+    it('returns false for different days', () => {
+      const date1 = new Date(2026, 7, 25);
+      const date2 = new Date(2026, 7, 26);
+      expect(isSameDay(date1, date2)).toBe(false);
+    });
+
+    it('returns false for different months', () => {
+      const date1 = new Date(2026, 7, 25);
+      const date2 = new Date(2026, 8, 25);
+      expect(isSameDay(date1, date2)).toBe(false);
+    });
+
+    it('returns false for different years', () => {
+      const date1 = new Date(2026, 7, 25);
+      const date2 = new Date(2027, 7, 25);
+      expect(isSameDay(date1, date2)).toBe(false);
+    });
+  });
+
+  describe('isCurrentMonth:', () => {
+    it('returns true for same month and year', () => {
+      const date = new Date(2026, 7, 25);
+      const monthDate = new Date(2026, 7, 1);
+      expect(isCurrentMonth(date, monthDate)).toBe(true);
+    });
+
+    it('returns false for different month', () => {
+      const date = new Date(2026, 9, 1);
+      const monthDate = new Date(2026, 8, 1);
+      expect(isCurrentMonth(date, monthDate)).toBe(false);
+    });
+
+    it('returns false for different year', () => {
+      const date = new Date(2026, 9, 25);
+      const monthDate = new Date(2027, 9, 1);
+      expect(isCurrentMonth(date, monthDate)).toBe(false);
+    });
+  });
+
+  describe('isWeekend:', () => {
+    it('returns true for Sunday', () => {
+      const sunday = new Date(2026, 8, 6);
+      expect(isWeekend(sunday)).toBe(true);
+    });
+
+    it('returns true for Saturday', () => {
+      const saturday = new Date(2026, 8, 5);
+      expect(isWeekend(saturday)).toBe(true);
+    });
+
+    it('returns false for Wednesday', () => {
+      const wednesday = new Date(2026, 8, 9);
+      expect(isWeekend(wednesday)).toBe(false);
+    });
+  });
+
+  describe('isToday', () => {
+    it('returns true for today', () => {
+      const today = new Date();
+      expect(isToday(today)).toBe(true);
+    });
+
+    it('returns false for random date', () => {
+      const random = new Date(2026, 2, 9);
+      expect(isToday(random)).toBe(false);
+    });
+  });
+
+  describe('isSelected:', () => {
+    it('returns true when date is selected', () => {
+      const date = new Date(2026, 7, 25);
+      const selectedDate = new Date(2026, 7, 25);
+      expect(isSelected(date, selectedDate)).toBe(true);
+    });
+
+    it('returns false when date is not selected', () => {
+      const date = new Date(2026, 7, 25);
+      const selectedDate = new Date(2026, 7, 26);
+      expect(isSelected(date, selectedDate)).toBe(false);
+    });
+
+    it('returns false when selectedDate is undefined', () => {
+      const date = new Date(2026, 7, 25);
+      expect(isSelected(date, undefined)).toBe(false);
+    });
+  });
+
+  describe('isDisabled', () => {
+    it('returns true when date is before minDate', () => {
+      const date = new Date(2026, 7, 25);
+      const minDate = new Date(2026, 7, 26);
+      expect(isDisabled(date, minDate)).toBe(true);
+    });
+
+    it('returns true when date is after maxDate', () => {
+      const date = new Date(2026, 7, 25);
+      const maxDate = new Date(2026, 7, 24);
+      expect(isDisabled(date, null, maxDate)).toBe(true);
+    });
+
+    it('returns false when date is within range', () => {
+      const date = new Date(2026, 7, 25);
+      const minDate = new Date(2026, 7, 20);
+      const maxDate = new Date(2026, 7, 30);
+      expect(isDisabled(date, minDate, maxDate)).toBe(false);
+    });
+
+    it('returns false when minDate and maxDate are null', () => {
+      const date = new Date(2026, 7, 25);
+      expect(isDisabled(date, null, null)).toBe(false);
+    });
+
+    it('returns false when date equals minDate', () => {
+      const date = new Date(2026, 7, 25);
+      const minDate = new Date(2026, 7, 25);
+      expect(isDisabled(date, minDate, null)).toBe(false);
+    });
+
+    it('returns false when date equals maxDate', () => {
+      const date = new Date(2026, 7, 25);
+      const maxDate = new Date(2026, 7, 25);
+      expect(isDisabled(date, null, maxDate)).toBe(false);
+    });
+  });
+
+  describe('isInRange:', () => {
+    it('returns true when date is between start and end', () => {
+      const date = new Date(2026, 7, 25);
+      const start = new Date(2026, 7, 20);
+      const end = new Date(2026, 7, 30);
+      expect(isInRange(date, start, end)).toBe(true);
+    });
+
+    it('returns false when date equals start', () => {
+      const date = new Date(2026, 7, 20);
+      const start = new Date(2026, 7, 20);
+      const end = new Date(2026, 7, 30);
+      expect(isInRange(date, start, end)).toBe(false);
+    });
+
+    it('returns false when date equals end', () => {
+      const date = new Date(2026, 7, 30);
+      const start = new Date(2026, 7, 20);
+      const end = new Date(2026, 7, 30);
+      expect(isInRange(date, start, end)).toBe(false);
+    });
+
+    it('returns false when start is undefined', () => {
+      const date = new Date(2026, 7, 25);
+      expect(isInRange(date, undefined, new Date(2026, 7, 30))).toBe(false);
+    });
+
+    it('returns false when end is undefined', () => {
+      const date = new Date(2026, 7, 25);
+      expect(isInRange(date, new Date(2026, 7, 20), undefined)).toBe(false);
+    });
+  });
+
+  describe('isRangeStart', () => {
+    it('returns true when date equals start', () => {
+      const date = new Date(2026, 7, 25);
+      const start = new Date(2026, 7, 25);
+      expect(isRangeStart(date, start)).toBe(true);
+    });
+
+    it('returns false when date does not equal start', () => {
+      const date = new Date(2026, 7, 25);
+      const start = new Date(2026, 7, 26);
+      expect(isRangeStart(date, start)).toBe(false);
+    });
+
+    it('returns false when start is undefined', () => {
+      const date = new Date(2026, 7, 25);
+      expect(isRangeStart(date, undefined)).toBe(false);
+    });
+  });
+
+  describe('isRangeEnd:', () => {
+    it('returns true when date equals end', () => {
+      const date = new Date(2026, 7, 25);
+      const end = new Date(2026, 7, 25);
+      expect(isRangeEnd(date, end)).toBe(true);
+    });
+
+    it('returns false when date does not equal end', () => {
+      const date = new Date(2026, 7, 25);
+      const end = new Date(2026, 7, 26);
+      expect(isRangeEnd(date, end)).toBe(false);
+    });
+
+    it('returns false when end is undefined', () => {
+      const date = new Date(2026, 7, 25);
+      expect(isRangeEnd(date, undefined)).toBe(false);
+    });
+  });
+});

package/src/utils/dateChecks.ts

@@ -0,0 +1,75 @@
+import { formatDateForInput } from './formatDate';
+
+export const isSameDay = (date1: Date, date2: Date) => {
+  return (
+    date1.getFullYear() === date2.getFullYear() &&
+    date1.getMonth() === date2.getMonth() &&
+    date1.getDate() === date2.getDate()
+  );
+};
+
+export const isCurrentMonth = (date: Date, monthDate: Date) => {
+  return (
+    date.getMonth() === monthDate.getMonth() &&
+    date.getFullYear() === monthDate.getFullYear()
+  );
+};
+
+export const isWeekend = (date: Date) => {
+  return date.getDay() === 0 || date.getDay() === 6;
+};
+
+export const isToday = (date: Date) => {
+  return isSameDay(date, new Date());
+};
+
+export const isSelected = (date: Date, selectedDate?: Date) => {
+  if (!selectedDate) return false;
+  return isSameDay(date, selectedDate);
+};
+
+export const isDisabled = (
+  date: Date,
+  minDate?: Date | null,
+  maxDate?: Date | null
+): boolean => {
+  if (minDate && date < minDate) return true;
+  if (maxDate && date > maxDate) return true;
+  return false;
+};
+
+export const isInRange = (date: Date, start?: Date, end?: Date) => {
+  if (!start || !end) return false;
+
+  const dateStart = new Date(
+    start.getFullYear(),
+    start.getMonth(),
+    start.getDate()
+  );
+  const dateEnd = new Date(end.getFullYear(), end.getMonth(), end.getDate());
+  const dateToCheck = new Date(
+    date.getFullYear(),
+    date.getMonth(),
+    date.getDate()
+  );
+
+  return dateToCheck > dateStart && dateToCheck < dateEnd;
+};
+
+export const isRangeStart = (date: Date, start?: Date) => {
+  if (!start) return false;
+  return isSameDay(date, start);
+};
+
+export const isRangeEnd = (date: Date, end?: Date) => {
+  if (!end) return false;
+  return isSameDay(date, end);
+};
+
+export const getRangeError = (date: Date, startDate: Date): string => {
+  if (startDate && date < startDate) {
+    return `Date must be after ${formatDateForInput(startDate)}`;
+  }
+
+  return '';
+};

package/src/utils/formatDate.test.ts

@@ -0,0 +1,57 @@
+import { formatDate, formatDateForInput, parseDate } from './formatDate';
+
+describe('formatting dates:', () => {
+  test('formatDate:', () => {
+    const date1 = new Date(2026, 0, 3);
+    const date2 = new Date(2024, 5, 15);
+    const date3 = new Date(2000, 11, 31);
+    const date4 = new Date(1999, 8, 9);
+    const date5 = new Date(2025, 2, 1);
+
+    expect(formatDate(date1)).toBe('2026-01-03');
+    expect(formatDate(date2)).toBe('2024-06-15');
+    expect(formatDate(date3)).toBe('2000-12-31');
+    expect(formatDate(date4)).toBe('1999-09-09');
+    expect(formatDate(date5)).toBe('2025-03-01');
+  });
+
+  test('formatDateForInput:', () => {
+    const date1 = new Date(2026, 0, 3);
+    const date2 = new Date(2024, 5, 15);
+    const date3 = new Date(2000, 11, 31);
+    const date4 = new Date(1999, 8, 9);
+    const date5 = new Date(2025, 2, 1);
+
+    expect(formatDateForInput(date1)).toBe('03/01/2026');
+    expect(formatDateForInput(date2)).toBe('15/06/2024');
+    expect(formatDateForInput(date3)).toBe('31/12/2000');
+    expect(formatDateForInput(date4)).toBe('09/09/1999');
+    expect(formatDateForInput(date5)).toBe('01/03/2025');
+  });
+
+  describe('parseDate:', () => {
+    test('returns parsed date', () => {
+      const date1 = '03/03/2026';
+      const date2 = '15/06/2024';
+      const date3 = '31/12/2000';
+      const date4 = '09/09/1999';
+      const date5 = '01/03/2025';
+
+      expect(parseDate(date1)).toEqual(new Date(2026, 2, 3));
+      expect(parseDate(date2)).toEqual(new Date(2024, 5, 15));
+      expect(parseDate(date3)).toEqual(new Date(2000, 11, 31));
+      expect(parseDate(date4)).toEqual(new Date(1999, 8, 9));
+      expect(parseDate(date5)).toEqual(new Date(2025, 2, 1));
+    });
+
+    test('returns null id date is invalid', () => {
+      const date1 = '31/02/2026';
+      const date2 = '00/06/2024';
+      const date3 = '31/14/2000';
+
+      expect(parseDate(date1)).toBeNull();
+      expect(parseDate(date2)).toBeNull();
+      expect(parseDate(date3)).toBeNull();
+    });
+  });
+});

package/src/utils/formatDate.ts

@@ -0,0 +1,27 @@
+export const formatDate = (date: Date): string => {
+  const year = date.getFullYear();
+  const month = String(date.getMonth() + 1).padStart(2, '0');
+  const day = String(date.getDate()).padStart(2, '0');
+  return `${year}-${month}-${day}`;
+};
+
+export const formatDateForInput = (date: Date): string => {
+  const year = date.getFullYear();
+  const month = String(date.getMonth() + 1).padStart(2, '0');
+  const day = String(date.getDate()).padStart(2, '0');
+  return `${day}/${month}/${year}`;
+};
+
+export const parseDate = (value: string): Date | null => {
+  if (!value.trim()) return null;
+
+  const [day, month, year] = value.split('/').map(Number);
+  const parsed = new Date(year, month - 1, day);
+
+  const isValid =
+    parsed.getFullYear() === year &&
+    parsed.getMonth() === month - 1 &&
+    parsed.getDate() === day;
+
+  return isValid ? parsed : null;
+};

package/src/utils/schema.test.ts

@@ -0,0 +1,40 @@
+import z from 'zod';
+
+import { formSchema } from './schema';
+
+describe('formSchema:', () => {
+  it('successfully validates correct data', () => {
+    const validData = { title: 'Run 100 km', date: '2026-03-11' };
+    const result = formSchema.safeParse(validData);
+
+    expect(result.success).toBe(true);
+    if (result.success) {
+      expect(result.data).toEqual(validData);
+    }
+  });
+
+  it('returns an error if title is shorter than 3 characters', () => {
+    const result = formSchema.safeParse({ title: 'Ru', date: '2026-03-11' });
+
+    expect(result.success).toBe(false);
+    if (!result.success) {
+      const errors = z.treeifyError(result.error).properties;
+      expect(errors?.title?.errors).toContain(
+        'Title must be at least 3 characters'
+      );
+    }
+  });
+
+  it('returns an error if date format is incorrect', () => {
+    const result = formSchema.safeParse({
+      title: 'Run 100 km',
+      date: '2026.01.13',
+    });
+
+    expect(result.success).toBe(false);
+    if (!result.success) {
+      const errors = z.treeifyError(result.error).properties;
+      expect(errors?.date?.errors).toContain('Incorrect date format');
+    }
+  });
+});

package/src/utils/schema.ts

@@ -0,0 +1,8 @@
+import * as z from 'zod';
+
+export const formSchema = z.object({
+  title: z.string().min(3, 'Title must be at least 3 characters'),
+  date: z.string().regex(/^\d{4}-\d{2}-\d{2}$/, 'Incorrect date format'),
+});
+
+export type FormData = z.infer<typeof formSchema>;

package/src/utils/weekdayOrder.test.ts

@@ -0,0 +1,11 @@
+import { getOrderedDays } from './weekdayOrder';
+
+describe('getOrderedDays:', () => {
+  test('returns indexes for Sunday', () => {
+    expect(getOrderedDays(0)).toEqual([0, 1, 2, 3, 4, 5, 6]);
+  });
+
+  test('returns indexes for Monday', () => {
+    expect(getOrderedDays(1)).toEqual([1, 2, 3, 4, 5, 6, 0]);
+  });
+});