@daryasidorovich/modsen-datepicker 1.0.0

package/src/components/TasksManager/EditModal/index.tsx

@@ -0,0 +1,96 @@
+import { zodResolver } from '@hookform/resolvers/zod';
+import { useEffect } from 'react';
+import { useForm } from 'react-hook-form';
+
+import { Input } from '@/components/Input';
+import { ModalProps } from '@/components/Modal';
+import { CrudModal } from '@/components/Modal/CrudModal';
+import { useTasks } from '@/store/tasksStore';
+import { formatDate } from '@/utils/formatDate';
+import { FormData } from '@/utils/schema';
+import { formSchema } from '@/utils/schema';
+
+interface EditModalProps extends Pick<ModalProps, 'isOpen' | 'onClose'> {
+  id: string;
+  date: Date;
+}
+
+export const EditModal = ({ isOpen, onClose, id, date }: EditModalProps) => {
+  const { editTask, tasks } = useTasks();
+  const {
+    register,
+    handleSubmit,
+    reset,
+    formState: { errors },
+  } = useForm<FormData>({
+    resolver: zodResolver(formSchema),
+    defaultValues: {
+      title: '',
+      date: formatDate(date),
+    },
+  });
+
+  const onSubmit = (data: FormData) => {
+    const taskData = {
+      title: data.title,
+      date: new Date(data.date),
+    };
+    editTask(id, taskData);
+    reset({
+      title: '',
+      date: formatDate(date),
+    });
+    onClose();
+  };
+
+  useEffect(() => {
+    if (isOpen && id) {
+      const task = tasks.find((task) => task.id === id);
+      if (task) {
+        reset({
+          title: task.title,
+          date: formatDate(task.date),
+        });
+      } else {
+        reset({
+          title: '',
+          date: formatDate(date),
+        });
+      }
+    }
+  }, [isOpen, id, tasks, reset, date]);
+
+  const handleClose = () => {
+    reset({
+      title: '',
+      date: formatDate(date),
+    });
+    onClose();
+  };
+
+  return (
+    <CrudModal
+      isOpen={isOpen}
+      onClose={handleClose}
+      onConfirm={handleSubmit(onSubmit)}
+      showCloseButton={true}
+      confirmText="Edit"
+      cancelText="Cancel"
+      title="Edit task"
+    >
+      <Input
+        {...register('title')}
+        label="Title"
+        placeholder="Training name"
+        error={errors.title?.message}
+      />
+      <Input
+        {...register('date')}
+        label="Date"
+        type="date"
+        placeholder="Training date"
+        error={errors.date?.message}
+      />
+    </CrudModal>
+  );
+};

package/src/components/TasksManager/index.tsx

@@ -0,0 +1,112 @@
+import Delete from '@assets/actions/Delete.svg?react';
+import Edit from '@assets/actions/Edit.svg?react';
+import classNames from 'classnames';
+import { useState } from 'react';
+
+import { useModal } from '@/hooks/useModal';
+import { useTasks } from '@/store/tasksStore';
+import { Task } from '@/store/types';
+
+import { Modal } from '../Modal';
+import { AddModal } from './AddModal';
+import { DeleteModal } from './DeleteModal';
+import { EditModal } from './EditModal';
+import styles from './styles.module.scss';
+
+interface TasksManager {
+  tasks: Task[];
+  onClose: () => void;
+  isOpen: boolean;
+  selectedDate: Date;
+}
+
+export const TasksManager = ({
+  onClose,
+  isOpen,
+  tasks,
+  selectedDate,
+}: TasksManager) => {
+  const addModal = useModal();
+  const editModal = useModal();
+  const deleteModal = useModal();
+  const { toggleTask } = useTasks();
+
+  const [currentTaskId, setCurrentTaskId] = useState<string>('');
+
+  const handleAddTask = () => {
+    addModal.open();
+  };
+  const handleEditTask = (id: string) => () => {
+    setCurrentTaskId(id);
+    editModal.open();
+  };
+
+  const handleDeleteTask = (id: string) => () => {
+    setCurrentTaskId(id);
+    deleteModal.open();
+  };
+
+  const handleToggle = (id: string) => () => {
+    toggleTask(id);
+  };
+  return (
+    <>
+      <Modal isOpen={isOpen} onClose={onClose}>
+        <div className={styles.tasksManager}>
+          <h1 className={styles.header}>Tasks for the day:</h1>
+          <button className={styles.add} onClick={handleAddTask}>
+            Add task
+          </button>
+          <ul className={styles.tasks}>
+            {tasks.length < 1 && (
+              <li>
+                <p>No tasks added</p>
+              </li>
+            )}
+            {tasks.map(({ id, title, completed }) => (
+              <li
+                key={id}
+                className={classNames(styles.task, {
+                  [styles.checked]: completed,
+                })}
+              >
+                <input
+                  type="checkbox"
+                  checked={completed}
+                  onChange={handleToggle(id)}
+                />
+                <p className={styles.title}>{title}</p>
+                <button onClick={handleEditTask(id)} className={styles.action}>
+                  <Edit />
+                </button>
+                <button
+                  onClick={handleDeleteTask(id)}
+                  className={classNames(styles.action, styles.delete)}
+                >
+                  <Delete />
+                </button>
+              </li>
+            ))}
+          </ul>
+        </div>
+      </Modal>
+      <AddModal
+        isOpen={addModal.isOpen}
+        onClose={addModal.close}
+        date={selectedDate}
+      />
+
+      <EditModal
+        isOpen={editModal.isOpen}
+        onClose={editModal.close}
+        id={currentTaskId}
+        date={selectedDate}
+      />
+      <DeleteModal
+        isOpen={deleteModal.isOpen}
+        onClose={deleteModal.close}
+        id={currentTaskId}
+      />
+    </>
+  );
+};

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

@@ -0,0 +1,62 @@
+.tasksManager {
+  min-width: 300px;
+  width: fit-content;
+  display: flex;
+  flex-direction: column;
+  gap: $gap-24;
+  max-height: 70%;
+}
+
+.tasks {
+  display: flex;
+  flex-direction: column;
+  gap: $gap-8;
+}
+
+.task {
+  display: flex;
+  gap: $gap-8;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.checked {
+  @include themify-modules($themes) {
+    color: themed('disabled');
+  }
+}
+
+.title {
+  margin-right: auto;
+}
+
+.action {
+  border: none;
+  background-color: transparent;
+
+  @include themify-modules($themes) {
+    color: themed('text');
+  }
+}
+
+.delete {
+  @include themify-modules($themes) {
+    color: themed('accent');
+  }
+}
+
+.add {
+  @include themify-modules($themes) {
+    background-color: themed('middle-blue');
+    border-color: themed('border');
+    color: themed('white-color');
+  }
+
+  @include border;
+
+  border-radius: $radius-8;
+}
+
+.header {
+  font-size: $font-size-18;
+}

package/src/components/Week/Week.stories.tsx

@@ -0,0 +1,49 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { Week } from '.';
+
+const meta: Meta<typeof Week> = {
+  component: Week,
+  parameters: {
+    layout: 'centered',
+  },
+};
+
+export default meta;
+
+const weekDaysArr = [
+  new Date(2026, 7, 25),
+  new Date(2026, 7, 26),
+  new Date(2026, 7, 27),
+  new Date(2026, 7, 28),
+  new Date(2026, 7, 29),
+  new Date(2026, 7, 30),
+  new Date(2026, 7, 31),
+];
+
+const baseArgs = {
+  weekDays: weekDaysArr,
+  getIsCurrentMonth: () => {
+    return true;
+  },
+};
+
+type Story = StoryObj<typeof Week>;
+
+export const Default: Story = {
+  args: { ...baseArgs },
+};
+
+export const WithSelectedDate: Story = {
+  args: {
+    ...baseArgs,
+    selectedDate: new Date(2026, 7, 28),
+  },
+};
+
+export const WithRange: Story = {
+  args: {
+    ...baseArgs,
+    rangeStart: new Date(2026, 7, 26),
+    rangeEnd: new Date(2026, 7, 30),
+  },
+};

package/src/components/Week/index.tsx

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

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

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

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

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

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

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

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

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

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

package/src/constants/monthsNames.ts

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

package/src/constants/weekdaysNames.ts

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

package/src/hooks/useCalendar.ts

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

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