@daryasidorovich/modsen-datepicker 1.0.0 → 1.0.1

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

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