@daryasidorovich/modsen-datepicker 1.0.0 → 1.0.2

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

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

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

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

package/src/components/CalendarGrid/index.tsx

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

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

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

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

@@ -1,34 +0,0 @@
-.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');
-    }
-  }
-}

package/src/components/DatePicker/DatePicker.stories.tsx

@@ -1,127 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import { DatePicker } from './index';
-import { setControlDate } from '../../utils/controlDate';
-
-const meta: Meta<typeof DatePicker> = {
-  component: DatePicker,
-  parameters: {
-    layout: 'centered',
-  },
-  argTypes: {
-    monthDate: { control: 'date' },
-    selectedDate: { control: 'date' },
-    minDate: { control: 'date' },
-    maxDate: { control: 'date' },
-    firstDayOfWeek: {
-      control: 'select',
-      options: [0, 1],
-    },
-  },
-};
-
-export default meta;
-type Story = StoryObj<typeof DatePicker>;
-
-export const Default: Story = {
-  args: {
-    monthDate: new Date(2026, 7, 1),
-    firstDayOfWeek: 1,
-    selectedDate: new Date(2026, 7, 15),
-  },
-  render: (args) => (
-    <DatePicker
-      {...args}
-      monthDate={new Date(args.monthDate)}
-      selectedDate={setControlDate(args.selectedDate)}
-      minDate={setControlDate(args.minDate)}
-      maxDate={setControlDate(args.maxDate)}
-    />
-  ),
-};
-
-export const WithTasks: Story = {
-  args: {
-    monthDate: new Date(2026, 7, 25),
-    firstDayOfWeek: 1,
-    enableTasks: true,
-  },
-  render: (args) => (
-    <DatePicker
-      {...args}
-      monthDate={new Date(args.monthDate)}
-      selectedDate={setControlDate(args.selectedDate)}
-      minDate={setControlDate(args.minDate)}
-      maxDate={setControlDate(args.maxDate)}
-    />
-  ),
-};
-
-export const HideWeekends: Story = {
-  args: {
-    monthDate: new Date(2026, 8, 7),
-    firstDayOfWeek: 1,
-    hideWeekends: true,
-  },
-  render: (args) => (
-    <DatePicker
-      {...args}
-      monthDate={new Date(args.monthDate)}
-      selectedDate={setControlDate(args.selectedDate)}
-      minDate={setControlDate(args.minDate)}
-      maxDate={setControlDate(args.maxDate)}
-    />
-  ),
-};
-
-export const ShowHolidays: Story = {
-  args: {
-    monthDate: new Date(2025, 0, 3),
-    firstDayOfWeek: 1,
-    showHolidays: true,
-  },
-  render: (args) => (
-    <DatePicker
-      {...args}
-      monthDate={new Date(args.monthDate)}
-      selectedDate={setControlDate(args.selectedDate)}
-      minDate={setControlDate(args.minDate)}
-      maxDate={setControlDate(args.maxDate)}
-    />
-  ),
-};
-
-export const WeekMode: Story = {
-  args: {
-    monthDate: new Date(2025, 0, 31),
-    firstDayOfWeek: 1,
-    showHolidays: true,
-    mode: 'week',
-  },
-  render: (args) => (
-    <DatePicker
-      {...args}
-      monthDate={new Date(args.monthDate)}
-      selectedDate={setControlDate(args.selectedDate)}
-      minDate={setControlDate(args.minDate)}
-      maxDate={setControlDate(args.maxDate)}
-    />
-  ),
-};
-
-export const WithMinMaxDates: Story = {
-  args: {
-    monthDate: new Date(2026, 7, 1),
-    firstDayOfWeek: 1,
-    minDate: new Date(2026, 7, 10),
-    maxDate: new Date(2026, 7, 20),
-  },
-  render: (args) => (
-    <DatePicker
-      {...args}
-      monthDate={new Date(args.monthDate)}
-      selectedDate={setControlDate(args.selectedDate)}
-      minDate={setControlDate(args.minDate)}
-      maxDate={setControlDate(args.maxDate)}
-    />
-  ),
-};

package/src/components/DatePicker/index.tsx

@@ -1,72 +0,0 @@
-import { ChangeEvent, KeyboardEvent, Ref } from 'react';
-
-import { useValidate } from '@/hooks/useValidate';
-
-import { BaseCalendar } from '../BaseCalendar';
-import { BaseCalendarProps, CalendarProps } from '../CalendarGrid/types';
-import { Input } from '../Input';
-import styles from './styles.module.scss';
-
-export interface DatePickerProps
-  extends BaseCalendarProps, Pick<CalendarProps, 'selectedDate'> {
-  onChange?: (date: Date | undefined) => void;
-}
-
-export const DatePicker = ({
-  selectedDate,
-  monthDate = new Date(),
-  onChange,
-  ...props
-}: DatePickerProps) => {
-  const {
-    currentDate,
-    value,
-    handleDateSelect,
-    error,
-    ref,
-    handleDateValidation,
-    handleClearInput,
-  } = useValidate(selectedDate);
-
-  const handleDateSelectAndExternalUpdate = (
-    e: React.MouseEvent<HTMLButtonElement>,
-    date: Date
-  ) => {
-    handleDateSelect(date);
-    if (onChange) {
-      onChange(date);
-    }
-  };
-
-  const handleDateChange = (e: ChangeEvent<HTMLInputElement>) => {
-    handleDateValidation(e.target.value);
-  };
-
-  const handleKeyDown = (e: KeyboardEvent<HTMLInputElement>) => {
-    if (e.key === 'Enter') {
-      handleDateValidation(e.currentTarget.value);
-    }
-  };
-
-  return (
-    <div className={styles.datepicker}>
-      <Input
-        isDateInput
-        label="Date"
-        value={value}
-        ref={ref as Ref<HTMLInputElement>}
-        placeholder="dd/mm/yyyy"
-        onBlur={handleDateChange}
-        onReset={handleClearInput}
-        onKeyDown={handleKeyDown}
-        error={error}
-      />
-      <BaseCalendar
-        selectedDate={currentDate}
-        onDateClick={handleDateSelectAndExternalUpdate}
-        monthDate={currentDate ?? monthDate}
-        {...props}
-      />
-    </div>
-  );
-};

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

@@ -1,10 +0,0 @@
-.datepicker {
-  display: flex;
-  flex-direction: column;
-  gap: $gap-8;
-  padding: $gap-8;
-
-  @include themify-modules($themes) {
-    background-color: themed('background');
-  }
-}

package/src/components/Day/Day.stories.tsx

@@ -1,75 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import { Day } from '.';
-
-const meta: Meta<typeof Day> = {
-  component: Day,
-  parameters: {
-    layout: 'centered',
-  },
-};
-
-export default meta;
-
-type Story = StoryObj<typeof Day>;
-
-export const Today: Story = {
-  args: {
-    date: new Date(),
-  },
-};
-
-export const Selected: Story = {
-  args: {
-    date: new Date(2026, 7, 25),
-    isSelected: true,
-  },
-};
-
-export const Disabled: Story = {
-  args: {
-    date: new Date(2026, 7, 25),
-    isDisabled: true,
-  },
-};
-
-export const Holiday: Story = {
-  args: {
-    date: new Date(2026, 7, 25),
-    isHoliday: true,
-  },
-};
-
-export const HasTasks: Story = {
-  args: {
-    date: new Date(2026, 7, 25),
-    hasTasks: true,
-  },
-};
-
-export const RangeStart: Story = {
-  args: {
-    date: new Date(2026, 7, 25),
-    isRangeStart: true,
-  },
-};
-
-export const RangeMiddle: Story = {
-  args: {
-    date: new Date(2026, 7, 25),
-    isRangeMiddle: true,
-  },
-};
-
-export const RangeEnd: Story = {
-  args: {
-    date: new Date(2026, 7, 25),
-    isRangeEnd: true,
-  },
-};
-
-export const TodayAndHasTasks: Story = {
-  args: {
-    date: new Date(),
-    hasTasks: true,
-  },
-};