@daryasidorovich/modsen-datepicker 1.0.0 → 1.0.2

package/src/components/Week/index.tsx

@@ -1,68 +0,0 @@
-import {
-  isInRange,
-  isRangeEnd,
-  isRangeStart,
-  isSelected,
-} from '@/utils/dateChecks';
-
-import { Day } from '../Day';
-import styles from './styles.module.scss';
-
-export interface WeekProps {
-  weekDays: Date[];
-  selectedDate?: Date;
-  rangeStart?: Date;
-  rangeEnd?: Date;
-  getIsHoliday?: (date: Date) => boolean;
-  getHasTask?: (date: Date) => boolean;
-  getIsDisabled?: (date: Date) => boolean;
-  getIsCurrentMonth: (date: Date) => boolean;
-  getIsWeekend?: (date: Date) => boolean;
-  hasTasks?: (date: Date) => boolean;
-  onDateClick?: (e: React.MouseEvent<HTMLButtonElement>, date: Date) => void;
-  onDateDoubleClick?: (date: Date) => void;
-  onMouseEnter?: (e: React.MouseEvent<HTMLButtonElement>) => void;
-  onMouseLeave?: () => void;
-}
-
-export const Week = ({
-  weekDays,
-  selectedDate,
-  getIsHoliday,
-  getIsDisabled,
-  getIsCurrentMonth,
-  rangeStart,
-  rangeEnd,
-  hasTasks,
-  onDateClick,
-  onDateDoubleClick,
-  onMouseEnter,
-  onMouseLeave,
-}: WeekProps) => {
-  return (
-    <div className={styles.week}>
-      {weekDays.map((date) => {
-        return (
-          <Day
-            key={date.toISOString()}
-            date={date}
-            isSelected={isSelected(date, selectedDate)}
-            isDisabled={getIsDisabled?.(date) || false}
-            isCurrentMonth={getIsCurrentMonth(date)}
-            isHoliday={getIsHoliday?.(date) || false}
-            hasTasks={hasTasks?.(date) || false}
-            isRangeStart={isRangeStart(date, rangeStart)}
-            isRangeEnd={isRangeEnd(date, rangeEnd)}
-            isRangeMiddle={isInRange(date, rangeStart, rangeEnd)}
-            onClick={getIsDisabled?.(date) ? undefined : onDateClick}
-            onDoubleClick={
-              getIsDisabled?.(date) ? undefined : onDateDoubleClick
-            }
-            onMouseEnter={getIsDisabled?.(date) ? undefined : onMouseEnter}
-            onMouseLeave={getIsDisabled?.(date) ? undefined : onMouseLeave}
-          />
-        );
-      })}
-    </div>
-  );
-};

package/src/components/Week/styles.module.scss

@@ -1,7 +0,0 @@
-.week {
-  display: flex;
-
-  @include themify-modules($themes) {
-    background-color: themed('background');
-  }
-}

package/src/components/WeekDay/WeekDay.stories.tsx

@@ -1,38 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import { WeekDay } from '.';
-
-const meta: Meta<typeof WeekDay> = {
-  component: WeekDay,
-  parameters: {
-    layout: 'centered',
-  },
-  argTypes: {
-    firstDayOfWeek: {
-      control: 'select',
-      options: [0, 1],
-    },
-  },
-};
-
-export default meta;
-
-type Story = StoryObj<typeof WeekDay>;
-
-export const MondayFirst: Story = {
-  args: {
-    firstDayOfWeek: 1,
-  },
-};
-
-export const SundayFirst: Story = {
-  args: {
-    firstDayOfWeek: 0,
-  },
-};
-
-export const HideWeekends: Story = {
-  args: {
-    firstDayOfWeek: 0,
-    hideWeekends: true,
-  },
-};

package/src/components/WeekDay/index.tsx

@@ -1,35 +0,0 @@
-import classNames from 'classnames';
-
-import { WEEKDAYS_NAMES } from '@/constants/weekdaysNames';
-import { getOrderedDays } from '@/utils/weekdayOrder';
-
-import styles from './styles.module.scss';
-
-interface WeekDayProps {
-  firstDayOfWeek?: 0 | 1;
-  className?: string;
-  hideWeekends?: boolean;
-}
-
-export const WeekDay = ({
-  firstDayOfWeek = 1,
-  className = '',
-  hideWeekends = false,
-}: WeekDayProps) => {
-  let days = getOrderedDays(firstDayOfWeek);
-
-  if (hideWeekends) {
-    days = days.filter((dayIndex) => dayIndex !== 0 && dayIndex !== 6);
-  }
-  return (
-    <div className={classNames(styles.weekDay, className)}>
-      {days.map((index) => {
-        return (
-          <span key={WEEKDAYS_NAMES[index]} className={styles.dayName}>
-            {WEEKDAYS_NAMES[index]}
-          </span>
-        );
-      })}
-    </div>
-  );
-};

package/src/components/WeekDay/styles.module.scss

@@ -1,19 +0,0 @@
-.weekDay {
-  display: flex;
-}
-
-.dayName {
-  @include square(32px);
-
-  @include themify-modules($themes) {
-    background-color: themed('background');
-  }
-
-  font-size: $font-size-13;
-  padding: $gap-10;
-  border-radius: $radius-8;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-weight: $font-weight-semibold;
-}

package/src/constants/dateMask.ts

@@ -1,23 +0,0 @@
-import { IMask } from 'react-imask';
-
-export const DATE_MASK = {
-  mask: 'dd/mm/yyyy',
-  blocks: {
-    dd: {
-      mask: IMask.MaskedRange,
-      from: 1,
-      to: 31,
-    },
-    mm: {
-      mask: IMask.MaskedRange,
-      from: 1,
-      to: 12,
-    },
-    yyyy: {
-      mask: IMask.MaskedRange,
-      from: 1900,
-      to: 2100,
-    },
-  },
-  autofix: true,
-} as const;

package/src/constants/firstDayOfWeek.ts

@@ -1,7 +0,0 @@
-export const FIRST_DAY_OF_WEEK = {
-  MONDAY: 1,
-  SUNDAY: 0,
-} as const;
-
-export type FIRST_DAY_OF_WEEK_TYPES =
-  (typeof FIRST_DAY_OF_WEEK)[keyof typeof FIRST_DAY_OF_WEEK];

package/src/constants/holidays.ts

@@ -1,32 +0,0 @@
-const HOLIDAYS_RULES = [
-  { name: 'New Year', getDate: (year: number) => new Date(year, 0, 1) },
-  { name: 'Christmas', getDate: (year: number) => new Date(year, 11, 25) },
-  {
-    name: 'Chinese New Year',
-    getDate: (year: number) => new Date(year, 1, 17),
-  },
-  {
-    name: "International Women's Day",
-    getDate: (year: number) => new Date(year, 2, 8),
-  },
-  {
-    name: 'Defender of the Fatherland Day',
-    getDate: (year: number) => new Date(year, 1, 23),
-  },
-  { name: "Children's Day", getDate: (year: number) => new Date(year, 5, 1) },
-  { name: 'Labor Day', getDate: (year: number) => new Date(year, 4, 1) },
-  {
-    name: 'Thanksgiving Day',
-    getDate: (year: number) => new Date(year, 10, 26),
-  },
-  { name: 'Easter', getDate: (year: number) => new Date(year, 3, 5) },
-  { name: 'Boxing Day', getDate: (year: number) => new Date(year, 11, 26) },
-  { name: 'Eid al-Fitr', getDate: (year: number) => new Date(year, 2, 20) },
-  { name: 'Eid al-Adha', getDate: (year: number) => new Date(year, 4, 27) },
-  { name: 'Nowruz', getDate: (year: number) => new Date(year, 2, 21) },
-  { name: 'Bastille Day', getDate: (year: number) => new Date(year, 6, 14) },
-];
-
-export const getDefaultHolidays = (year: number): Date[] => {
-  return HOLIDAYS_RULES.map((rule) => rule.getDate(year));
-};

package/src/constants/modes.ts

@@ -1,6 +0,0 @@
-export const MODES = {
-  WEEK: 'week',
-  MONTH: 'month',
-} as const;
-
-export type MODES_TYPES = (typeof MODES)[keyof typeof MODES];

package/src/constants/monthsNames.ts

@@ -1,14 +0,0 @@
-export const MONTHS_NAMES = [
-  'January',
-  'February',
-  'March',
-  'April',
-  'May',
-  'June',
-  'July',
-  'August',
-  'September',
-  'October',
-  'November',
-  'December',
-];

package/src/constants/weekdaysNames.ts

@@ -1 +0,0 @@
-export const WEEKDAYS_NAMES = ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'];

package/src/hooks/useCalendar.ts

@@ -1,62 +0,0 @@
-import { useEffect, useState } from 'react';
-
-import { CalendarProps } from '@/components/Calendar/types';
-import { getDefaultHolidays } from '@/constants/holidays';
-import { CalendarService } from '@/services/calendarService';
-import { withHolidays } from '@/services/decorators/withHolidays';
-import { withMinMax } from '@/services/decorators/withMinMax';
-import { getHolidays } from '@/services/holidayService';
-
-export function useCalendar(props: CalendarProps) {
-  const year = props.monthDate.getFullYear();
-  const [holidays, setHolidays] = useState<Date[]>([]);
-  const [loading, setLoading] = useState(false);
-  const [error, setError] = useState('');
-
-  useEffect(() => {
-    const abortController = new AbortController();
-
-    if (props.showHolidays) {
-      setLoading(true);
-      setError('');
-      getHolidays(year, abortController.signal)
-        .then((result) => {
-          setHolidays(result);
-        })
-        .catch((err) => {
-          if (err.name === 'AbortError') {
-            return;
-          }
-          setHolidays(getDefaultHolidays(year));
-          setError(err.message);
-        })
-        .finally(() => setLoading(false));
-    }
-    return () => {
-      abortController.abort();
-    };
-  }, [props.showHolidays, year]);
-
-  const calendar: CalendarService = new CalendarService(
-    props.monthDate,
-    props.firstDayOfWeek,
-    props.selectedDate,
-    props.mode,
-    props.rangeStart,
-    props.rangeEnd
-  );
-
-  if (props.hideWeekends) {
-    calendar.setHideWeekends(true);
-  }
-
-  if (props.showHolidays && holidays.length > 0) {
-    withHolidays(calendar, holidays);
-  }
-
-  if (props.minDate || props.maxDate) {
-    withMinMax(calendar, props.minDate, props.maxDate);
-  }
-
-  return { calendar, loading, error };
-}

package/src/hooks/useLockBodyScroll.ts

@@ -1,19 +0,0 @@
-import { useEffect } from 'react';
-
-export const useLockBodyScroll = (isLocked: boolean) => {
-  useEffect(() => {
-    const originalOverflow = document.body.style.overflow;
-
-    if (isLocked) {
-      document.body.style.overflow = 'hidden';
-    } else {
-      document.body.style.overflow = 'unset';
-    }
-
-    return () => {
-      document.body.style.overflow = originalOverflow;
-    };
-  }, [isLocked]);
-};
-
-export default useLockBodyScroll;

package/src/hooks/useModal.ts

@@ -1,45 +0,0 @@
-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

@@ -1,41 +0,0 @@
-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

@@ -1,80 +0,0 @@
-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

@@ -1,15 +0,0 @@
-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

@@ -1,62 +0,0 @@
-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

@@ -1,64 +0,0 @@
-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

@@ -1,12 +0,0 @@
-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;
-};