@daryasidorovich/modsen-datepicker 1.0.0

package/src/components/Modal/CrudModal/styles.module.scss

@@ -0,0 +1,44 @@
+.header {
+  margin-bottom: $gap-24;
+  margin-top: $gap-8;
+}
+
+.title {
+  font-size: $font-size-18;
+}
+
+.footer {
+  display: flex;
+  width: 100%;
+  gap: $gap-10;
+  justify-content: end;
+}
+
+.children {
+  display: flex;
+  gap: $gap-8;
+  flex-direction: column;
+  min-width: 300px;
+  width: fit-content;
+  margin-bottom: $gap-24;
+}
+
+.modalButtons {
+  @include themify-modules($themes) {
+    background-color: themed('light-blue');
+    border-color: themed('border');
+    color: themed('text');
+  }
+  @include border;
+
+  padding: $gap-5 $gap-10;
+  border-radius: $radius-8;
+}
+
+.confirm {
+  @include themify-modules($themes) {
+    background-color: themed('middle-blue');
+    border-color: themed('border');
+    color: themed('white-color');
+  }
+}

package/src/components/Modal/index.tsx

@@ -0,0 +1,66 @@
+import classNames from 'classnames';
+import React, { ReactNode, useRef } from 'react';
+import { createPortal } from 'react-dom';
+
+import useLockBodyScroll from '@/hooks/useLockBodyScroll';
+
+import styles from './styles.module.scss';
+
+export interface ModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+  children: ReactNode;
+  showCloseButton?: boolean;
+  showOverlay?: boolean;
+  className?: string;
+  classNameOverlay?: string;
+  style?: React.CSSProperties;
+}
+
+export const Modal = ({
+  isOpen,
+  onClose,
+  children,
+  showOverlay = true,
+  showCloseButton = true,
+  className = '',
+  classNameOverlay = '',
+  style = {},
+}: ModalProps) => {
+  const modalRoot = document.body;
+  const targetElement = modalRoot || document.body;
+  const modalRef = useRef(null);
+  useLockBodyScroll(isOpen);
+
+  const handleClick = (e: React.MouseEvent<HTMLDivElement>) => {
+    if (e.target === e.currentTarget) {
+      onClose();
+    }
+  };
+
+  if (!isOpen) return null;
+
+  const modalContent = (
+    <div
+      className={classNames(styles.overlay, classNameOverlay, {
+        [styles.overlayColor]: showOverlay,
+      })}
+      onClick={handleClick}
+    >
+      <div
+        ref={modalRef}
+        className={classNames(styles.modal, className)}
+        style={style}
+      >
+        {showCloseButton && (
+          <button className={styles.closeButton} onClick={onClose}>
+            <span>×</span>
+          </button>
+        )}
+        {children}
+      </div>
+    </div>
+  );
+
+  return createPortal(modalContent, targetElement);
+};

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

@@ -0,0 +1,40 @@
+.overlay {
+  position: fixed;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: $z-index-10;
+}
+
+.overlayColor {
+  @include themify-modules($themes) {
+    background-color: themed('overlay');
+  }
+}
+
+.modal {
+  position: relative;
+  @include themify-modules($themes) {
+    background-color: themed('background');
+    border-color: themed('border');
+  }
+
+  @include border;
+  border-radius: $radius-8;
+  padding: $gap-24;
+}
+
+.closeButton {
+  border: none;
+  background-color: transparent;
+  position: absolute;
+  right: $gap-8;
+  top: 0;
+  font-size: 24px;
+  line-height: normal;
+
+  @include themify-modules($themes) {
+    color: themed('text');
+  }
+}

package/src/components/Modal/types.ts

@@ -0,0 +1,13 @@
+import { ReactNode } from 'react';
+
+export interface CrudModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+  onConfirm: () => void;
+  title: string;
+  children?: ReactNode;
+  cancelText?: string;
+  confirmText?: string;
+  isLoading?: boolean;
+  showCloseButton?: boolean;
+}

package/src/components/Month/Month.stories.tsx

@@ -0,0 +1,19 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { Month } from '.';
+
+const meta: Meta<typeof Month> = {
+  component: Month,
+  parameters: {
+    layout: 'centered',
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Month>;
+
+export const Default: Story = {
+  args: {
+    date: new Date(),
+  },
+};

package/src/components/Month/index.tsx

@@ -0,0 +1,31 @@
+import Next from '@assets/arrows/Next.svg?react';
+import Prev from '@assets/arrows/Prev.svg?react';
+
+import { MONTHS_NAMES } from '@/constants/monthsNames';
+
+import styles from './styles.module.scss';
+
+interface MonthProps {
+  date: Date;
+  onPrev: () => void;
+  onNext: () => void;
+}
+
+export const Month = ({ date, onPrev, onNext }: MonthProps) => {
+  const year = date.getFullYear();
+  const month = MONTHS_NAMES[date.getMonth()];
+
+  return (
+    <div className={styles.month}>
+      <button className={styles.arrow} onClick={onPrev} type="button">
+        <Prev />
+      </button>
+      <p>
+        {month} {year}
+      </p>
+      <button className={styles.arrow} onClick={onNext} type="button">
+        <Next />
+      </button>
+    </div>
+  );
+};

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

@@ -0,0 +1,30 @@
+.month {
+  @include themify-modules($themes) {
+    color: themed('text');
+    background-color: themed('background');
+  }
+
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  width: 100%;
+  padding-block: 5px;
+  gap: 2px;
+  font-weight: $font-weight-bold;
+}
+
+.arrow {
+  @include themify-modules($themes) {
+    color: themed('text');
+  }
+
+  width: max-content;
+  border: none;
+  background-color: transparent;
+
+  &:hover {
+    @include themify-modules($themes) {
+      color: themed('middle-blue');
+    }
+  }
+}

package/src/components/RangePicker/RangePicker.stories.tsx

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

package/src/components/RangePicker/index.tsx

@@ -0,0 +1,144 @@
+import { ChangeEvent, KeyboardEvent, Ref } from 'react';
+
+import { useValidate } from '@/hooks/useValidate';
+
+import { BaseCalendar } from '../BaseCalendar';
+import { BaseCalendarProps, CalendarProps } from '../CalendarGrid/types';
+import { Clear } from '../Clear';
+import { Input } from '../Input';
+import styles from './styles.module.scss';
+
+export interface RangePickerProps
+  extends BaseCalendarProps, Pick<CalendarProps, 'rangeStart' | 'rangeEnd'> {
+  onChangeStart?: (date?: Date) => void;
+  onChangeEnd?: (date?: Date) => void;
+}
+
+export const RangePicker = ({
+  rangeStart,
+  rangeEnd,
+  monthDate = new Date(),
+  onChangeStart,
+  onChangeEnd,
+  ...props
+}: RangePickerProps) => {
+  const {
+    currentDate: startDate,
+    value: startValue,
+    error: startError,
+    ref: startRef,
+    handleDateSelect: handleStartDateSelect,
+    handleDateValidation: handleStartDateValidation,
+    handleClearInput: handleStartClearInput,
+  } = useValidate(rangeStart);
+
+  const {
+    currentDate: endDate,
+    value: endValue,
+    error: endError,
+    ref: endRef,
+    handleDateSelect: handleEndDateSelect,
+    handleDateValidation: handleEndDateValidation,
+    handleClearInput: handleEndClearInput,
+  } = useValidate(rangeEnd);
+
+  const handleDateSelectAndExternalUpdate = (
+    e: React.MouseEvent<HTMLButtonElement>,
+    date: Date
+  ) => {
+    if (!startDate) {
+      handleStartDateSelect(date);
+      onChangeStart?.(date);
+      return;
+    }
+
+    if (!endDate || e.ctrlKey) {
+      if (startDate && date < startDate) {
+        handleStartDateSelect(date);
+        handleEndDateSelect(startDate);
+        onChangeStart?.(date);
+        onChangeEnd?.(startDate);
+      } else {
+        handleEndDateSelect(date);
+        onChangeEnd?.(date);
+      }
+      return;
+    }
+
+    handleStartDateSelect(date);
+    handleEndDateSelect();
+    onChangeStart?.(date);
+    onChangeEnd?.();
+  };
+
+  const handleStartChange = (e: ChangeEvent<HTMLInputElement>) => {
+    const parsed = handleStartDateValidation(e.target.value);
+    if (!parsed) return;
+    onChangeStart?.(parsed);
+    if (endValue) handleEndDateValidation(endValue, parsed);
+  };
+
+  const handleStartKeyDown = (e: KeyboardEvent<HTMLInputElement>) => {
+    if (e.key !== 'Enter') return;
+    const parsed = handleStartDateValidation(e.currentTarget.value);
+    if (!parsed) return;
+    onChangeStart?.(parsed);
+    if (endValue) handleEndDateValidation(endValue, parsed);
+  };
+
+  const handleEndChange = (e: ChangeEvent<HTMLInputElement>) => {
+    const parsed = handleEndDateValidation(e.target.value, startDate);
+    if (parsed) onChangeEnd?.(parsed);
+  };
+
+  const handleEndKeyDown = (e: KeyboardEvent<HTMLInputElement>) => {
+    if (e.key !== 'Enter') return;
+    const parsed = handleEndDateValidation(e.currentTarget.value, startDate);
+    if (parsed) onChangeEnd?.(parsed);
+  };
+
+  const handleClearRange = () => {
+    handleStartClearInput();
+    handleEndClearInput();
+  };
+
+  return (
+    <div className={styles.rangePicker}>
+      <div className={styles.inputs}>
+        <Input
+          isDateInput
+          label="From"
+          value={startValue}
+          ref={startRef as Ref<HTMLInputElement>}
+          placeholder="dd/mm/yyyy"
+          onBlur={handleStartChange}
+          onReset={handleStartClearInput}
+          onKeyDown={handleStartKeyDown}
+          error={startError}
+        />
+        <Input
+          isDateInput
+          label="To"
+          value={endValue}
+          ref={endRef as Ref<HTMLInputElement>}
+          placeholder="dd/mm/yyyy"
+          onBlur={handleEndChange}
+          onReset={handleEndClearInput}
+          onKeyDown={handleEndKeyDown}
+          error={endError}
+        />
+      </div>
+
+      <div className={styles.calendar}>
+        <BaseCalendar
+          monthDate={monthDate}
+          rangeStart={startDate}
+          rangeEnd={endDate}
+          onDateClick={handleDateSelectAndExternalUpdate}
+          {...props}
+        />
+        <Clear onClick={handleClearRange} />
+      </div>
+    </div>
+  );
+};

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

@@ -0,0 +1,19 @@
+.rangePicker {
+  display: flex;
+  flex-direction: column;
+  padding: $gap-8;
+
+  @include themify-modules($themes) {
+    background-color: themed('background');
+  }
+}
+
+.calendar {
+  margin-top: 15px;
+}
+
+.inputs {
+  display: flex;
+  flex-direction: column;
+  gap: $gap-8;
+}

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

@@ -0,0 +1,62 @@
+import { zodResolver } from '@hookform/resolvers/zod';
+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 AddModalProps extends Pick<ModalProps, 'isOpen' | 'onClose'> {
+  date: Date;
+}
+
+export const AddModal = ({ isOpen, onClose, date }: AddModalProps) => {
+  const { addTask } = useTasks();
+  const {
+    register,
+    handleSubmit,
+    reset,
+    formState: { errors },
+  } = useForm<FormData>({
+    resolver: zodResolver(formSchema),
+    defaultValues: {
+      title: '',
+      date: formatDate(date),
+    },
+  });
+
+  const onSubmit = (data: FormData) => {
+    addTask(date, data.title);
+    reset();
+    onClose();
+  };
+
+  const handleClose = () => {
+    reset({
+      title: '',
+    });
+    onClose();
+  };
+
+  return (
+    <CrudModal
+      isOpen={isOpen}
+      onClose={handleClose}
+      onConfirm={handleSubmit(onSubmit)}
+      showCloseButton={true}
+      confirmText="Add"
+      cancelText="Cancel"
+      title="Add task"
+    >
+      <Input
+        {...register('title')}
+        label="Title"
+        placeholder="Training name"
+        error={errors.title?.message}
+      />
+    </CrudModal>
+  );
+};

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

@@ -0,0 +1,22 @@
+import { ModalProps } from '@/components/Modal';
+import { CrudModal } from '@/components/Modal/CrudModal';
+import { useTasks } from '@/store/tasksStore';
+
+interface DeleteModalProps extends Pick<ModalProps, 'isOpen' | 'onClose'> {
+  id: string;
+}
+export const DeleteModal = ({ id, isOpen, onClose }: DeleteModalProps) => {
+  const { deleteTask } = useTasks();
+  const handleDelete = () => {
+    deleteTask(id);
+    onClose();
+  };
+  return (
+    <CrudModal
+      isOpen={isOpen}
+      onClose={onClose}
+      onConfirm={handleDelete}
+      title="Are you sure you want to delete this task?"
+    />
+  );
+};