@daryasidorovich/modsen-datepicker 1.0.0 → 1.0.2

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

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

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

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

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

@@ -1,22 +0,0 @@
-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?"
-    />
-  );
-};

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

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

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

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

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