@daryasidorovich/modsen-datepicker 1.0.0

package/src/components/CalendarGrid/CalendarGrid.stories.tsx

@@ -0,0 +1,136 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { CalendarGrid } from '.';
+
+const meta: Meta<typeof CalendarGrid> = {
+  component: CalendarGrid,
+  parameters: {
+    layout: 'centered',
+  },
+  argTypes: {
+    firstDayOfWeek: {
+      control: 'select',
+      options: [0, 1],
+    },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof CalendarGrid>;
+
+export const Default: Story = {
+  args: {
+    monthDate: new Date(2026, 7, 1),
+    firstDayOfWeek: 1,
+    selectedDate: new Date(2026, 7, 15),
+  },
+};
+
+export const SundayFirst: Story = {
+  args: {
+    monthDate: new Date(2026, 7, 1),
+    firstDayOfWeek: 0,
+    selectedDate: new Date(2026, 7, 15),
+  },
+};
+
+export const WithSelectedDate: Story = {
+  args: {
+    monthDate: new Date(2026, 7, 1),
+    firstDayOfWeek: 1,
+    selectedDate: new Date(2026, 7, 27),
+  },
+};
+
+export const WithMinMax: Story = {
+  args: {
+    monthDate: new Date(2026, 7, 1),
+    firstDayOfWeek: 1,
+    selectedDate: new Date(2026, 7, 15),
+    minDate: new Date(2026, 7, 10),
+    maxDate: new Date(2026, 7, 20),
+  },
+};
+
+export const WeekMode: Story = {
+  args: {
+    monthDate: new Date(2026, 7, 1),
+    firstDayOfWeek: 1,
+    selectedDate: new Date(2026, 7, 15),
+    mode: 'week',
+  },
+};
+
+export const FullFeatured: Story = {
+  args: {
+    monthDate: new Date(2026, 7, 1),
+    firstDayOfWeek: 1,
+    selectedDate: new Date(2026, 7, 15),
+    minDate: new Date(2026, 7, 1),
+    maxDate: new Date(2026, 7, 15),
+  },
+};
+
+export const September: Story = {
+  args: {
+    monthDate: new Date(2026, 8, 1),
+    firstDayOfWeek: 1,
+    selectedDate: new Date(2026, 8, 15),
+  },
+};
+
+export const CurrentMonth: Story = {
+  args: {
+    monthDate: new Date(),
+    firstDayOfWeek: 1,
+  },
+};
+
+export const WithRange: Story = {
+  args: {
+    monthDate: new Date(),
+    firstDayOfWeek: 1,
+    rangeStart: new Date(2026, 7, 10),
+    rangeEnd: new Date(2026, 7, 19),
+  },
+};
+
+export const HideWeekends: Story = {
+  args: {
+    monthDate: new Date(),
+    firstDayOfWeek: 1,
+    hideWeekends: true,
+  },
+};
+
+export const ShowHolidays: Story = {
+  args: {
+    monthDate: new Date(2025, 0, 3),
+    firstDayOfWeek: 1,
+    showHolidays: true,
+  },
+};
+
+export const WithError: Story = {
+  args: {
+    monthDate: new Date(2026, 0, 3),
+    firstDayOfWeek: 1,
+    showHolidays: true,
+  },
+};
+
+export const WithTasks: Story = {
+  args: {
+    monthDate: new Date(2026, 7, 25),
+    firstDayOfWeek: 1,
+    enableTasks: true,
+  },
+};
+
+export const WithoutTasks: Story = {
+  args: {
+    monthDate: new Date(2026, 7, 25),
+    firstDayOfWeek: 1,
+    enableTasks: false,
+  },
+};

package/src/components/CalendarGrid/CalendarGridWithTasks/Tooltip/index.tsx

@@ -0,0 +1,27 @@
+import { createPortal } from 'react-dom';
+
+import styles from './styles.module.scss';
+
+interface TooltipProps {
+  isVisible: boolean;
+  text: string;
+  x: number;
+  y: number;
+}
+
+export const Tooltip = ({ isVisible, text, x, y }: TooltipProps) => {
+  if (!isVisible) return;
+
+  const Tooltip = (
+    <div
+      className={styles.tooltip}
+      style={{
+        top: y,
+        left: x,
+      }}
+    >
+      <p>{text}</p>
+    </div>
+  );
+  return createPortal(Tooltip, document.body);
+};

package/src/components/CalendarGrid/CalendarGridWithTasks/Tooltip/styles.module.scss

@@ -0,0 +1,9 @@
+.tooltip {
+  @include themify-modules($themes) {
+    background-color: themed('border');
+  }
+
+  border-radius: $radius-8;
+  padding: 2px $gap-8;
+  position: absolute;
+}

package/src/components/CalendarGrid/CalendarGridWithTasks/index.tsx

@@ -0,0 +1,51 @@
+import { useState } from 'react';
+
+import { TasksManager } from '@/components/TasksManager';
+import { useModal } from '@/hooks/useModal';
+import { useTooltip } from '@/hooks/useTooltip';
+import { useTasks } from '@/store/tasksStore';
+
+import { CalendarGridWithoutTasks } from '../CalendarGridWithoutTasks';
+import { CalendarProps } from '../types';
+import { Tooltip } from './Tooltip';
+
+export const CalendarGridWithTasks = (props: CalendarProps) => {
+  const { getTasksByDate, hasTasks } = useTasks();
+  const [selectedDate, setSelectedDate] = useState<Date>();
+  const tasksManagerModal = useModal();
+  const { tooltip, handleDayMouseEnter, handleDayMouseLeave } = useTooltip();
+
+  const handleDateDoubleClick = (date: Date) => {
+    setSelectedDate(date);
+    tasksManagerModal.open();
+  };
+
+  const currentTasks = selectedDate ? getTasksByDate(selectedDate) : [];
+
+  return (
+    <>
+      <CalendarGridWithoutTasks
+        {...props}
+        hasTasks={hasTasks}
+        onDateDoubleClick={handleDateDoubleClick}
+        onMouseEnter={handleDayMouseEnter}
+        onMouseLeave={handleDayMouseLeave}
+      >
+        {selectedDate && (
+          <TasksManager
+            tasks={currentTasks}
+            isOpen={tasksManagerModal.isOpen}
+            onClose={tasksManagerModal.close}
+            selectedDate={selectedDate}
+          />
+        )}
+      </CalendarGridWithoutTasks>
+      <Tooltip
+        isVisible={tooltip.isVisible}
+        text="Double-click to open the task manager"
+        x={tooltip.x}
+        y={tooltip.y}
+      />
+    </>
+  );
+};

package/src/components/CalendarGrid/CalendarGridWithoutTasks/CalendarGridWithoutTasks.test.tsx

@@ -0,0 +1,223 @@
+import { render, screen, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { getHolidays } from '@/services/holidayService';
+import { getDefaultHolidays } from '@/constants/holidays';
+import { CalendarGridWithoutTasks } from '.';
+
+jest.mock('@/services/holidayService');
+jest.mock('@/constants/holidays');
+
+describe('CalendarWithoutTasks:', () => {
+  const august2026 = new Date(2026, 7, 1);
+  const mockHolidays = [new Date(2026, 7, 10)];
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  test('renders calendar with default props:', () => {
+    render(
+      <CalendarGridWithoutTasks monthDate={august2026} firstDayOfWeek={1} />
+    );
+
+    const days = screen.getAllByText('1');
+    expect(days.length).toBeGreaterThan(0);
+    const days31 = screen.getAllByText('31');
+    expect(days31.length).toBeGreaterThan(0);
+  });
+
+  test('displays selected date correctly:', () => {
+    render(
+      <CalendarGridWithoutTasks
+        monthDate={august2026}
+        selectedDate={new Date(2026, 7, 15)}
+        firstDayOfWeek={1}
+      />
+    );
+
+    const day15 = screen.getByText('15');
+    expect(day15).toBeInTheDocument();
+    expect(day15.closest('button')).toHaveClass('selected');
+  });
+
+  test('handles hideWeekends option:', () => {
+    render(
+      <CalendarGridWithoutTasks
+        monthDate={august2026}
+        firstDayOfWeek={1}
+        hideWeekends={true}
+      />
+    );
+
+    expect(screen.queryByText('15')).not.toBeInTheDocument();
+    expect(screen.queryByText('16')).not.toBeInTheDocument();
+    expect(screen.getByText('7')).toBeInTheDocument();
+  });
+
+  test('displays holidays when showHolidays is true:', async () => {
+    (getHolidays as jest.Mock).mockResolvedValue(mockHolidays);
+
+    render(
+      <CalendarGridWithoutTasks
+        monthDate={august2026}
+        firstDayOfWeek={1}
+        showHolidays={true}
+      />
+    );
+    await waitFor(() => {
+      const day10 = screen.getByText('10');
+      expect(day10).toBeInTheDocument();
+      expect(day10.closest('button')).toHaveClass('holiday');
+    });
+  });
+
+  test('shows loading state while fetching holidays:', async () => {
+    (getHolidays as jest.Mock).mockResolvedValue(mockHolidays);
+
+    render(
+      <CalendarGridWithoutTasks
+        monthDate={august2026}
+        firstDayOfWeek={1}
+        showHolidays={true}
+      />
+    );
+
+    expect(screen.getByText('Loading...')).toBeInTheDocument();
+
+    await waitFor(() => {
+      expect(screen.queryByText('Loading...')).not.toBeInTheDocument();
+    });
+  });
+
+  test('handles holiday loading error:', async () => {
+    const errorMessage = 'Failed to load holidays';
+    (getHolidays as jest.Mock).mockRejectedValue(new Error(errorMessage));
+    (getDefaultHolidays as jest.Mock).mockReturnValue(mockHolidays);
+
+    render(
+      <CalendarGridWithoutTasks
+        monthDate={august2026}
+        firstDayOfWeek={1}
+        showHolidays={true}
+      />
+    );
+
+    await waitFor(() => {
+      expect(screen.getByText(errorMessage)).toBeInTheDocument();
+    });
+
+    const day10 = screen.getByText('10');
+    expect(day10.closest('button')).toHaveClass('holiday');
+  });
+
+  test('applies min/max dates correctly:', () => {
+    render(
+      <CalendarGridWithoutTasks
+        monthDate={august2026}
+        firstDayOfWeek={1}
+        minDate={new Date(2026, 7, 10)}
+        maxDate={new Date(2026, 7, 20)}
+      />
+    );
+
+    const day1 = screen.getByText('8');
+    expect(day1.closest('button')).toBeDisabled();
+
+    const day15 = screen.getByText('18');
+    expect(day15.closest('button')).not.toBeDisabled();
+
+    const day31 = screen.getByText('25');
+    expect(day31.closest('button')).toBeDisabled();
+  });
+
+  test('handles week mode:', () => {
+    render(
+      <CalendarGridWithoutTasks
+        monthDate={august2026}
+        firstDayOfWeek={1}
+        mode="week"
+      />
+    );
+
+    const days = document.querySelectorAll('.day');
+    expect(days.length).toBe(7);
+  });
+
+  test('handles day click', async () => {
+    const handleDoubleClick = jest.fn();
+    const handleClick = jest.fn();
+
+    render(
+      <CalendarGridWithoutTasks
+        monthDate={august2026}
+        firstDayOfWeek={1}
+        onDateDoubleClick={handleDoubleClick}
+        onDateClick={handleClick}
+        enableTasks
+      />
+    );
+
+    const day15 = screen.getByRole('button', { name: '15' });
+    expect(day15).not.toBeDisabled();
+
+    await userEvent.dblClick(day15);
+
+    expect(handleClick).not.toHaveBeenCalled();
+    expect(handleDoubleClick).toHaveBeenCalledTimes(1);
+  });
+
+  test('applies all decorators together:', async () => {
+    (getHolidays as jest.Mock).mockResolvedValue(mockHolidays);
+
+    render(
+      <CalendarGridWithoutTasks
+        monthDate={august2026}
+        firstDayOfWeek={1}
+        hideWeekends={true}
+        showHolidays={true}
+        minDate={new Date(2026, 7, 9)}
+        maxDate={new Date(2026, 7, 25)}
+        mode="month"
+      />
+    );
+
+    expect(screen.queryByText('15')).not.toBeInTheDocument();
+    expect(screen.queryByText('16')).not.toBeInTheDocument();
+    await waitFor(() => {
+      const day10 = screen.getByText('10');
+      expect(day10.closest('button')).toHaveClass('holiday');
+    });
+    expect(screen.getByText('6').closest('button')).toHaveClass('disabled');
+
+    const day18 = screen.getByText('18');
+    expect(day18.closest('button')).not.toBeDisabled();
+  });
+
+  test('does not fetch holidays when showHolidays is false:', () => {
+    render(
+      <CalendarGridWithoutTasks
+        monthDate={august2026}
+        firstDayOfWeek={1}
+        showHolidays={false}
+      />
+    );
+
+    expect(getHolidays).not.toHaveBeenCalled();
+  });
+
+  test('handles different first day of week:', () => {
+    const { rerender } = render(
+      <CalendarGridWithoutTasks monthDate={august2026} firstDayOfWeek={0} />
+    );
+
+    const week = screen.getAllByRole('button');
+    expect(week[0]).toHaveTextContent('26');
+
+    rerender(
+      <CalendarGridWithoutTasks monthDate={august2026} firstDayOfWeek={1} />
+    );
+
+    const week2 = screen.getAllByRole('button');
+    expect(week2[0]).toHaveTextContent('27');
+  });
+});

package/src/components/CalendarGrid/CalendarGridWithoutTasks/index.tsx

@@ -0,0 +1,36 @@
+import { Week } from '@/components/Week';
+import { useCalendar } from '@/hooks/useCalendar';
+
+import { CalendarProps } from '../types';
+import styles from './styles.module.scss';
+
+export const CalendarGridWithoutTasks = ({
+  children,
+  ...props
+}: CalendarProps & { children?: React.ReactNode }) => {
+  const { calendar, loading, error } = useCalendar(props);
+
+  const weeks = calendar.getWeeks();
+
+  return (
+    <div className={styles.calendar}>
+      {weeks.map((weekDays) => (
+        <Week
+          key={weekDays[0].toISOString()}
+          weekDays={weekDays}
+          selectedDate={calendar.selectedDate}
+          getIsDisabled={calendar.getIsDisabled}
+          getIsCurrentMonth={calendar.getIsCurrentMonth}
+          getIsHoliday={calendar.getIsHoliday}
+          rangeStart={calendar.rangeStart}
+          rangeEnd={calendar.rangeEnd}
+          {...props}
+        />
+      ))}
+
+      {error && <p className={styles.errorMessage}>{error}</p>}
+      {loading && <div>Loading...</div>}
+      {children}
+    </div>
+  );
+};

package/src/components/CalendarGrid/CalendarGridWithoutTasks/styles.module.scss

@@ -0,0 +1,11 @@
+.calendar {
+  display: flex;
+  flex-direction: column;
+  gap: $gap-8;
+}
+
+.errorMessage {
+  @include themify-modules($themes) {
+    color: themed('accent');
+  }
+}

package/src/components/CalendarGrid/index.tsx

@@ -0,0 +1,19 @@
+import { TasksProvider } from '@/store/tasksStore';
+
+import { CalendarGridWithoutTasks } from './CalendarGridWithoutTasks';
+import { CalendarGridWithTasks } from './CalendarGridWithTasks';
+import { CalendarProps } from './types';
+
+export const CalendarGrid = (props: CalendarProps) => {
+  const { enableTasks } = props;
+
+  if (enableTasks) {
+    return (
+      <TasksProvider>
+        <CalendarGridWithTasks {...props} />
+      </TasksProvider>
+    );
+  }
+
+  return <CalendarGridWithoutTasks {...props} />;
+};

package/src/components/CalendarGrid/types.ts

@@ -0,0 +1,26 @@
+import { FIRST_DAY_OF_WEEK_TYPES } from '@/constants/firstDayOfWeek';
+import { MODES_TYPES } from '@/constants/modes';
+
+export interface CalendarProps {
+  minDate?: Date;
+  maxDate?: Date;
+  monthDate: Date;
+  firstDayOfWeek?: FIRST_DAY_OF_WEEK_TYPES;
+  selectedDate?: Date;
+  mode?: MODES_TYPES;
+  rangeStart?: Date;
+  rangeEnd?: Date;
+  hideWeekends?: boolean;
+  showHolidays?: boolean;
+  enableTasks?: 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 type BaseCalendarProps = Omit<
+  CalendarProps,
+  'hasTasks' | 'onDoubleDateClick' | 'onMouseEnter' | 'onMouseLeave'
+>;

package/src/components/Clear/Clear.stories.tsx

@@ -0,0 +1,16 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { Clear } from '.';
+
+const meta: Meta<typeof Clear> = {
+  component: Clear,
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Clear>;
+
+export const Default: Story = {
+  args: {
+    onClick: () => console.log('Click'),
+  },
+};

package/src/components/Clear/index.tsx

@@ -0,0 +1,12 @@
+import styles from './styles.module.scss';
+
+interface ClearProps {
+  onClick: () => void;
+}
+export const Clear = ({ onClick }: ClearProps) => {
+  return (
+    <button className={styles.clear} type="button" onClick={onClick}>
+      Clear
+    </button>
+  );
+};

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

@@ -0,0 +1,34 @@
+.clear {
+  @include border;
+
+  @include themify-modules($themes) {
+    border-color: themed('border');
+    background-color: themed('background');
+    color: themed('text');
+  }
+
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: $gap-10;
+  width: 100%;
+  font-weight: $font-weight-semibold;
+  border-bottom-right-radius: $radius-8;
+  border-bottom-left-radius: $radius-8;
+
+  &:hover {
+    @include themify-modules($themes) {
+      background-color: themed('button-hover');
+      color: themed('white-color');
+    }
+  }
+
+  &:active {
+    transform: scale(0.98);
+
+    @include themify-modules($themes) {
+      background-color: themed('selected');
+      color: themed('white-color');
+    }
+  }
+}