Added calendar days layout

package.json

@@ -33,6 +33,7 @@
         "@hookform/resolvers": "^3.10.0",
         "@reduxjs/toolkit": "^2.5.0",
         "moment": "^2.30.1",
+        "motion": "^12.7.4",
         "react": "^18.3.1",
         "react-calendar": "^5.1.0",
         "react-dom": "^18.3.1",
@@ -46,6 +47,7 @@
     "devDependencies": {
         "@eslint/js": "^9.17.0",
         "@trivago/prettier-plugin-sort-imports": "^5.2.2",
+        "@types/moment": "^2.13.0",
         "@types/node": "^22.10.7",
         "@types/react": "^18.3.18",
         "@types/react-dom": "^18.3.5",

src/components/Container/index.tsx

@@ -1,7 +1,7 @@
 import {PropsWithChildren} from 'react';
 
 const Container = ({className = '', children}: PropsWithChildren<{className?: string}>) => {
-    return <div className={`w-full max-w-[1280px] m-auto px-[15px] md:px-[30px] ${className}`}>{children}</div>;
+    return <div className={`w-full h-full max-w-[1280px] mx-auto px-[15px] md:px-[30px] ${className}`}>{children}</div>;
 };
 
 export default Container;

src/components/Modal/index.tsx

@@ -1,18 +1,14 @@
 import {createPortal} from 'react-dom';
 
-import {useBodyClick} from '@/services/hooks';
-
 import {TModalProps} from './types';
 
-const Modal = ({className, onClose, children}: TModalProps) => {
-    const {ref} = useBodyClick(onClose);
-
+const Modal = ({refItem, className, children}: TModalProps) => {
     return (
         <>
             {createPortal(
                 <div
                     className={`modal-wrapper fixed top-0 left-0 w-screen h-screen flex items-center justify-center bg-secondaryBackgroundColor bg-opacity-80 ${className ? className : ''}`}>
-                    <div ref={ref}>{children}</div>
+                    <div ref={refItem}>{children}</div>
                 </div>,
                 document.body,
             )}

src/components/Modal/types.ts

@@ -1,6 +1,7 @@
-import {PropsWithChildren} from 'react';
+import {PropsWithChildren, RefObject} from 'react';
 
 export type TModalProps = PropsWithChildren<{
-    onClose: () => void;
+    refItem: RefObject<HTMLDivElement>;
+    onClose: (refId: string) => void;
     className?: string;
 }>;

src/components/forms/NewEventByDateForm/index.tsx

@@ -9,7 +9,7 @@ import InputControl from '@/components/formInputs/InputControl';
 import CheckIcon from '@/icons/CheckIcon';
 import CloseIcon from '@/icons/CloseIcon';
 import {selectDay, selectMonth, selectYear} from '@/redux/date/selectors';
-import {getDaysOptions, getMonthsOptions, getYearsOptions} from '@/services/utils';
+import {getDays, getMonthsOptions, getYearsOptions} from '@/services/utils';
 
 import {validation} from './form';
 import {TFormValues, TNewEventByDateFormProps} from './types';
@@ -44,7 +44,7 @@ const NewEventByDateForm = ({handleModalClose}: TNewEventByDateFormProps) => {
     const yearsOptions = useMemo(() => getYearsOptions(), []);
     const monthsOptions = useMemo(() => getMonthsOptions(), []);
     const daysOptions = useMemo(
-        () => getDaysOptions(formYearValue || '', formMonthValue || ''),
+        () => getDays(formYearValue || '', formMonthValue || ''),
         [formYearValue, formMonthValue],
     );
 

src/components/inputs/Dropdown/index.tsx

@@ -1,8 +1,8 @@
-import {useCallback, useEffect, useState} from 'react';
+import {memo, useCallback, useEffect, useState} from 'react';
 
 import ArrowDown from '@/icons/ArrowDown';
 import CheckIcon from '@/icons/CheckIcon';
-import {useBodyClick, useOpen} from '@/services/hooks';
+import {useOpeningItem} from '@/services/hooks';
 
 import Button from '../../Button';
 import {TDropdownProps} from './types';
@@ -17,8 +17,7 @@ const Dropdown = ({
 }: TDropdownProps) => {
     const [currentValue, setCurrentValue] = useState(selectedOption);
 
-    const {isOpen, handleToggle, handleClose} = useOpen(false);
-    const {ref} = useBodyClick(handleClose);
+    const {ref, isOpen, handleClose, handleToggle} = useOpeningItem();
 
     const handleChange = useCallback(
         (option: string) => {
@@ -28,10 +27,10 @@ const Dropdown = ({
             setCurrentValue(option);
 
             setTimeout(() => {
-                handleClose(); // close dropdown by microtask
+                handleClose();
             }, 0);
         },
-        [field, onChange, handleClose],
+        [field, handleClose, onChange],
     );
 
     const initValue = useCallback(() => {
@@ -73,4 +72,4 @@ const Dropdown = ({
     );
 };
 
-export default Dropdown;
+export default memo(Dropdown);

src/index.css

@@ -9,6 +9,8 @@ body {
 html,
 body,
 #root {
+    height: 100vh;
+    width: 100vw;
     @apply bg-black text-white box-border;
 }
 

src/main.tsx

@@ -2,6 +2,7 @@ import {createRoot} from 'react-dom/client';
 
 import App from './App';
 import './index.css';
+import './moment.config';
 import ReduxProvider from './redux/redux-provider';
 
 createRoot(document.getElementById('root')!).render(

src/moment.config.ts

@@ -0,0 +1,9 @@
+import moment from 'moment';
+
+moment.updateLocale('uk', {
+    week: {
+        dow: 1, // week starts on Monday
+    },
+});
+
+moment.locale('uk');

src/pages/Main/components/KanbanBoard/Column/ColumnTasksList/Task/index.tsx → src/pages/Main/components/Calendar/Day/DayEventsList/Event/index.tsx

@@ -9,15 +9,15 @@ import BoardItemForm from '@/components/forms/BoardItemForm';
 import DeleteIcon from '@/icons/DeleteIcon';
 import EditIcon from '@/icons/EditIcon';
 import {deleteTask} from '@/redux/columns/columnsSlice';
-import {useModal} from '@/services/hooks';
+import {useOpeningItem} from '@/services/hooks';
 
 import {TTasksProps} from './types';
 
-const Task = ({task}: TTasksProps) => {
+const Event = ({task}: TTasksProps) => {
     const [isHover, setIsHover] = useState(false);
 
     const dispatch = useDispatch();
-    const {isOpen, handleModalClose, handleModalOpen} = useModal();
+    const {ref, isOpen, handleClose: handleModalClose, handleOpen: handleModalOpen} = useOpeningItem();
     const {setNodeRef, attributes, listeners, transform, transition, isDragging} = useSortable({
         id: task.id,
         data: {type: 'Task', task},
@@ -65,7 +65,7 @@ const Task = ({task}: TTasksProps) => {
             )}
 
             {isOpen && (
-                <Modal onClose={handleModalClose}>
+                <Modal refItem={ref} onClose={handleModalClose}>
                     <BoardItemForm
                         actionType="edit"
                         formTitle="Edit task"
@@ -78,4 +78,4 @@ const Task = ({task}: TTasksProps) => {
     );
 };
 
-export default Task;
+export default Event;

src/pages/Main/components/KanbanBoard/Column/ColumnTasksList/index.tsx → src/pages/Main/components/Calendar/Day/DayEventsList/index.tsx

@@ -1,7 +1,7 @@
 import {SortableContext} from '@dnd-kit/sortable';
 import {useMemo} from 'react';
 
-import Task from './Task';
+import Task from './Event';
 import {TColumnTasksListProps} from './types';
 
 const ColumnTasksList = ({tasks}: TColumnTasksListProps) => {

src/pages/Main/components/Calendar/Day/index.tsx

@@ -0,0 +1,69 @@
+import {motion} from 'framer-motion';
+import moment from 'moment';
+import {useCallback} from 'react';
+import {useSelector} from 'react-redux';
+
+// import Button from '@/components/Button';
+import Modal from '@/components/Modal';
+import BoardItemForm from '@/components/forms/BoardItemForm';
+// import AddIcon from '@/icons/AddIcon';
+import {selectFullDate} from '@/redux/date/selectors';
+import {useOpeningItem} from '@/services/hooks';
+import {formatDate, getDate} from '@/services/utils';
+
+import {TDayProps} from './types';
+
+const Day = ({date}: TDayProps) => {
+    const {ref, isOpen, handleClose: handleModalClose /*handleOpen: handleModalOpen*/} = useOpeningItem();
+
+    const curentDate = useSelector(selectFullDate);
+    const curentMonth = formatDate(moment(curentDate), 'M');
+    const dateMonth = formatDate(moment(date), 'M');
+
+    const currentDate = formatDate(getDate(new Date()), 'YYYY-MM-DD');
+    const day = formatDate(getDate(date), 'DD');
+
+    const onAddNewTaskSubmit = useCallback(
+        (data: unknown) => {
+            handleModalClose();
+
+            // eslint-disable-next-line no-console
+            console.log(data);
+        },
+        [handleModalClose],
+    );
+
+    return (
+        <motion.div
+            initial={{opacity: 0}}
+            animate={{opacity: 1}}
+            transition={{duration: 0.5, ease: 'easeOut'}}
+            className={`border border-secondaryBackgroundColor rounded-md p-1 md:p-3 ${dateMonth !== curentMonth ? 'bg-secondaryBackgroundColor' : ''} cursor-pointer hover:bg-secondaryBackgroundColorHover`}>
+            <div className="text-xs sm:text-base">
+                <span
+                    className={`${currentDate === date ? 'bg-blue-600' : ''} ${dateMonth !== curentMonth ? 'text-black' : ''} rounded-full p-1 w-5 h-5 sm:w-8 sm:h-8 flex items-center justify-center text-white`}>
+                    <time dateTime={date}>{day}</time>
+                </span>
+            </div>
+
+            {/* <DayEventsList tasks={tasks} /> */}
+
+            {/* <div className="flex justify-start gap-3 p-3">
+                <Button startIcon={<AddIcon size="size-5" />} text="Add task" onClick={handleModalOpen} />
+            </div> */}
+
+            {isOpen && (
+                <Modal refItem={ref} onClose={handleModalClose}>
+                    <BoardItemForm
+                        actionType="add"
+                        formTitle="Create new event"
+                        onSubmit={onAddNewTaskSubmit}
+                        handleModalClose={handleModalClose}
+                    />
+                </Modal>
+            )}
+        </motion.div>
+    );
+};
+
+export default Day;

src/pages/Main/components/Calendar/Day/types.ts

@@ -0,0 +1,3 @@
+export type TDayProps = {
+    date: string;
+};