From 78c046faea21b9952532f6cc49046d959c9faab8 Mon Sep 17 00:00:00 2001 From: danilfomchik Date: Sun, 5 Apr 2026 23:12:37 +0300 Subject: [PATCH 1/2] wip(day-page-redesign): common changes, ui changes --- src/components/Loading/index.tsx | 19 ------ .../{ => common}/Button/constants.ts | 13 ++-- src/components/{ => common}/Button/index.tsx | 12 ++-- src/components/{ => common}/Button/types.tsx | 8 +-- src/components/{ => common}/EventForm/form.ts | 0 .../{ => common}/EventForm/index.tsx | 14 ++-- .../{ => common}/EventForm/types.ts | 0 .../EventsList/EventsListItem/index.tsx | 27 +++++--- .../{ => common}/EventsList/index.tsx | 4 +- src/components/{ => common}/Modal/index.tsx | 0 src/components/{ => common}/Modal/types.ts | 0 .../common/MonthSmallCalendar/index.tsx | 51 ++++++++++++++ .../formInputs/DropdownControl.tsx | 0 .../{ => common}/formInputs/InputControl.tsx | 0 .../formInputs/TextareaControl.tsx | 0 .../{ => common}/inputs/Dropdown/index.tsx | 4 +- .../{ => common}/inputs/Dropdown/types.ts | 0 .../{ => common}/inputs/Input/index.tsx | 0 .../{ => common}/inputs/Input/types.ts | 0 .../{ => common}/inputs/Textarea/index.tsx | 0 .../{ => common}/inputs/Textarea/types.ts | 0 .../components/MyCalendarsList/index.tsx | 57 ++++++++++++++++ src/components/layout/Aside/index.tsx | 19 ++++++ .../{ => layout}/Container/index.tsx | 2 +- src/components/{ => layout}/Error/index.tsx | 0 .../{ => layout}/MainLayout/index.tsx | 17 +++-- src/components/ui/Loading/index.tsx | 34 ++++++++++ src/components/{ => ui}/Tooltip/index.tsx | 0 src/components/{ => ui}/Tooltip/types.ts | 0 src/{ => components/ui}/icons/AddIcon.tsx | 0 src/{ => components/ui}/icons/ArrowDown.tsx | 0 src/{ => components/ui}/icons/ArrowLeft.tsx | 0 src/{ => components/ui}/icons/ArrowRight.tsx | 0 src/{ => components/ui}/icons/BarsIcon.tsx | 0 src/{ => components/ui}/icons/CheckIcon.tsx | 0 src/{ => components/ui}/icons/CloseIcon.tsx | 0 src/{ => components/ui}/icons/DeleteIcon.tsx | 0 src/{ => components/ui}/icons/EditIcon.tsx | 0 .../ui}/icons/ExternalPage.tsx | 0 .../ui}/icons/VerticalDots.tsx | 0 src/{ => components/ui}/icons/types.ts | 0 src/index.css | 18 ++++- src/pages/Day/components/AIInfo/index.tsx | 53 +++++---------- src/pages/Day/components/AIInfo/types.ts | 4 +- src/pages/Day/index.tsx | 67 ++++++++++++++----- .../Day/DayEventsList/Event/index.tsx | 8 +-- .../Day/DayEventsList/RemainedItems/index.tsx | 2 +- .../Main/components/Calendar/Day/index.tsx | 10 +-- .../Header/CalendarDatePicker/index.tsx | 2 +- .../components/Header/Controls/AddEvent.tsx | 6 +- .../Header/Controls/ChangeMonthControl.tsx | 6 +- .../Header/Controls/ChangeViewControl.tsx | 2 +- .../Main/components/Header/Controls/index.tsx | 4 +- src/pages/Main/components/Header/index.tsx | 10 +-- .../Main/components/MobileDateInfo/index.tsx | 6 +- src/pages/Main/index.tsx | 9 +-- .../dateHolidaysGenerator/holidaysApi.tsx | 30 +++++---- src/redux/myCalendars/myCalendarsSlice.ts | 49 ++++++++++++++ src/redux/myCalendars/selectors.ts | 4 ++ src/redux/myCalendars/types.ts | 6 ++ src/redux/store.ts | 2 + src/redux/types.ts | 1 + src/routes/router.tsx | 4 +- src/services/dateUtils.ts | 4 +- src/services/types.ts | 15 ++++- 65 files changed, 425 insertions(+), 178 deletions(-) delete mode 100644 src/components/Loading/index.tsx rename src/components/{ => common}/Button/constants.ts (72%) rename src/components/{ => common}/Button/index.tsx (75%) rename src/components/{ => common}/Button/types.tsx (90%) rename src/components/{ => common}/EventForm/form.ts (100%) rename src/components/{ => common}/EventForm/index.tsx (91%) rename src/components/{ => common}/EventForm/types.ts (100%) rename src/components/{ => common}/EventsList/EventsListItem/index.tsx (65%) rename src/components/{ => common}/EventsList/index.tsx (81%) rename src/components/{ => common}/Modal/index.tsx (100%) rename src/components/{ => common}/Modal/types.ts (100%) create mode 100644 src/components/common/MonthSmallCalendar/index.tsx rename src/components/{ => common}/formInputs/DropdownControl.tsx (100%) rename src/components/{ => common}/formInputs/InputControl.tsx (100%) rename src/components/{ => common}/formInputs/TextareaControl.tsx (100%) rename src/components/{ => common}/inputs/Dropdown/index.tsx (96%) rename src/components/{ => common}/inputs/Dropdown/types.ts (100%) rename src/components/{ => common}/inputs/Input/index.tsx (100%) rename src/components/{ => common}/inputs/Input/types.ts (100%) rename src/components/{ => common}/inputs/Textarea/index.tsx (100%) rename src/components/{ => common}/inputs/Textarea/types.ts (100%) create mode 100644 src/components/layout/Aside/components/MyCalendarsList/index.tsx create mode 100644 src/components/layout/Aside/index.tsx rename src/components/{ => layout}/Container/index.tsx (82%) rename src/components/{ => layout}/Error/index.tsx (100%) rename src/components/{ => layout}/MainLayout/index.tsx (68%) create mode 100644 src/components/ui/Loading/index.tsx rename src/components/{ => ui}/Tooltip/index.tsx (100%) rename src/components/{ => ui}/Tooltip/types.ts (100%) rename src/{ => components/ui}/icons/AddIcon.tsx (100%) rename src/{ => components/ui}/icons/ArrowDown.tsx (100%) rename src/{ => components/ui}/icons/ArrowLeft.tsx (100%) rename src/{ => components/ui}/icons/ArrowRight.tsx (100%) rename src/{ => components/ui}/icons/BarsIcon.tsx (100%) rename src/{ => components/ui}/icons/CheckIcon.tsx (100%) rename src/{ => components/ui}/icons/CloseIcon.tsx (100%) rename src/{ => components/ui}/icons/DeleteIcon.tsx (100%) rename src/{ => components/ui}/icons/EditIcon.tsx (100%) rename src/{ => components/ui}/icons/ExternalPage.tsx (100%) rename src/{ => components/ui}/icons/VerticalDots.tsx (100%) rename src/{ => components/ui}/icons/types.ts (100%) create mode 100644 src/redux/myCalendars/myCalendarsSlice.ts create mode 100644 src/redux/myCalendars/selectors.ts create mode 100644 src/redux/myCalendars/types.ts diff --git a/src/components/Loading/index.tsx b/src/components/Loading/index.tsx deleted file mode 100644 index cb5ac3f..0000000 --- a/src/components/Loading/index.tsx +++ /dev/null @@ -1,19 +0,0 @@ -const Loading = () => { - return ( -
- - - - -
- ); -}; - -export default Loading; diff --git a/src/components/Button/constants.ts b/src/components/common/Button/constants.ts similarity index 72% rename from src/components/Button/constants.ts rename to src/components/common/Button/constants.ts index 6aca43e..bdba111 100644 --- a/src/components/Button/constants.ts +++ b/src/components/common/Button/constants.ts @@ -1,4 +1,4 @@ -import {ButtonSizes, ButtonVariants} from './types'; +import {ButtonVariants} from './types'; export const buttonVariants = { [ButtonVariants.primary]: @@ -11,10 +11,11 @@ export const buttonVariants = { 'border-secondaryBackgroundColor bg-transparent text-secondaryBackgroundColor hover:bg-secondaryBackgroundColor hover:text-white', [ButtonVariants.secondaryBordered]: 'border-sky-500 text-sky-500 bg-transparent hover:bg-sky-500 hover:text-white', [ButtonVariants.redBordered]: 'border-red-400 text-red-400 bg-transparent hover:bg-red-400 hover:text-white', + [ButtonVariants.transparent]: 'border-none text-[#3a3a3a] bg-transparent hover:text-white', }; -export const buttonSizes = { - [ButtonSizes.default]: 'text-sm px-3 py-2', - [ButtonSizes.medium]: 'text-base px-4 py-3', - [ButtonSizes.small]: 'text-xs px-2 py-1', -}; +// export const buttonSizes = { +// [ButtonSizes.default]: 'text-sm px-3 py-2', +// [ButtonSizes.medium]: 'text-base px-4 py-3', +// [ButtonSizes.small]: 'text-xs px-2 py-1', +// }; diff --git a/src/components/Button/index.tsx b/src/components/common/Button/index.tsx similarity index 75% rename from src/components/Button/index.tsx rename to src/components/common/Button/index.tsx index cdc37f2..687915e 100644 --- a/src/components/Button/index.tsx +++ b/src/components/common/Button/index.tsx @@ -2,13 +2,12 @@ import {Link} from 'react-router'; import {cx} from '@/services/utils'; -import {buttonSizes, buttonVariants} from './constants'; -import {ButtonSizes, TButtonProps, TLinkKindProps} from './types'; +import {buttonVariants} from './constants'; +import {TButtonProps, TLinkKindProps} from './types'; const Button = ({ variant = 'primary', kind = 'button', - size = ButtonSizes.default, startIcon = null, endIcon = null, text = '', @@ -21,7 +20,6 @@ const Button = ({ className={cx( 'w-auto p-3 flex justify-center items-center gap-2 cursor-pointer border rounded-lg transition duration-500 ease-in-out disabled:hover:border-secondaryBackgroundColor disabled:text-secondaryBackgroundColor disabled:hover:text-secondaryBackgroundColor disabled:cursor-auto', buttonVariants[variant], - buttonSizes[size], className, )} {...restProps}> @@ -29,11 +27,11 @@ const Button = ({ className={cx('flex items-center justify-center w-full', { 'gap-2': (startIcon || endIcon) && text, })}> - {startIcon ? {startIcon} : null} + {startIcon ? {startIcon} : null} - {text} + {text} - {endIcon ? {endIcon} : null} + {endIcon ? {endIcon} : null} {children} diff --git a/src/components/Button/types.tsx b/src/components/common/Button/types.tsx similarity index 90% rename from src/components/Button/types.tsx rename to src/components/common/Button/types.tsx index 1e6e255..e436067 100644 --- a/src/components/Button/types.tsx +++ b/src/components/common/Button/types.tsx @@ -10,12 +10,7 @@ export enum ButtonVariants { primaryBordered = 'primary-bordered', secondaryBordered = 'secondary-bordered', redBordered = 'red-bordered', -} - -export enum ButtonSizes { - default = 'default', - medium = 'medium', - small = 'small', + transparent = 'transparent', } type TButton = @@ -48,7 +43,6 @@ type TButtonKind = TButtonKindProps | TLinkKindProps; type TButtonType = { variant?: `${ButtonVariants}`; - size?: ButtonSizes; startIcon?: React.ReactNode; endIcon?: React.ReactNode; }; diff --git a/src/components/EventForm/form.ts b/src/components/common/EventForm/form.ts similarity index 100% rename from src/components/EventForm/form.ts rename to src/components/common/EventForm/form.ts diff --git a/src/components/EventForm/index.tsx b/src/components/common/EventForm/index.tsx similarity index 91% rename from src/components/EventForm/index.tsx rename to src/components/common/EventForm/index.tsx index 4312de7..c008d19 100644 --- a/src/components/EventForm/index.tsx +++ b/src/components/common/EventForm/index.tsx @@ -5,13 +5,13 @@ import {useMemo} from 'react'; import {FormProvider, SubmitHandler, useForm} from 'react-hook-form'; import {useSelector} from 'react-redux'; -import Button from '@/components/Button'; -import DropdownControl from '@/components/formInputs/DropdownControl'; -import InputControl from '@/components/formInputs/InputControl'; -import TextareaControl from '@/components/formInputs/TextareaControl'; -import CheckIcon from '@/icons/CheckIcon'; -import CloseIcon from '@/icons/CloseIcon'; -import EditIcon from '@/icons/EditIcon'; +import Button from '@/components/common/Button'; +import DropdownControl from '@/components/common/formInputs/DropdownControl'; +import InputControl from '@/components/common/formInputs/InputControl'; +import TextareaControl from '@/components/common/formInputs/TextareaControl'; +import CheckIcon from '@/components/ui/icons/CheckIcon'; +import CloseIcon from '@/components/ui/icons/CloseIcon'; +import EditIcon from '@/components/ui/icons/EditIcon'; import {selectDay, selectMonth, selectYear} from '@/redux/date/selectors'; import {addEvent, editEvent} from '@/redux/events/eventsSlice'; import {useAppDispatch} from '@/redux/store'; diff --git a/src/components/EventForm/types.ts b/src/components/common/EventForm/types.ts similarity index 100% rename from src/components/EventForm/types.ts rename to src/components/common/EventForm/types.ts diff --git a/src/components/EventsList/EventsListItem/index.tsx b/src/components/common/EventsList/EventsListItem/index.tsx similarity index 65% rename from src/components/EventsList/EventsListItem/index.tsx rename to src/components/common/EventsList/EventsListItem/index.tsx index bd0c85a..e94b957 100644 --- a/src/components/EventsList/EventsListItem/index.tsx +++ b/src/components/common/EventsList/EventsListItem/index.tsx @@ -1,13 +1,13 @@ import {useCallback} from 'react'; -import Button from '@/components/Button'; -import EventForm from '@/components/EventForm'; -import {FormActionType} from '@/components/EventForm/types'; -import Modal from '@/components/Modal'; +import Button from '@/components/common/Button'; +import EventForm from '@/components/common/EventForm'; +import {FormActionType} from '@/components/common/EventForm/types'; +import Modal from '@/components/common/Modal'; +import BarsIcon from '@/components/ui/icons/BarsIcon'; +import DeleteIcon from '@/components/ui/icons/DeleteIcon'; +import EditIcon from '@/components/ui/icons/EditIcon'; import {useOpeningItem} from '@/hooks/useOpeningItem'; -import BarsIcon from '@/icons/BarsIcon'; -import DeleteIcon from '@/icons/DeleteIcon'; -import EditIcon from '@/icons/EditIcon'; import {deleteEvent} from '@/redux/events/eventsSlice'; import {TEvent} from '@/redux/events/types'; import {useAppDispatch} from '@/redux/store'; @@ -22,13 +22,20 @@ const EventsListItem = ({event, showItemControls}: {event: TEvent; showItemContr return ( <> -
-
- +

{event.title}

{event.description &&

{event.description}

} + + {/* TODO: add correct calendar */} +
+ Work +
{showItemControls && ( diff --git a/src/components/EventsList/index.tsx b/src/components/common/EventsList/index.tsx similarity index 81% rename from src/components/EventsList/index.tsx rename to src/components/common/EventsList/index.tsx index 66744c7..3ac7020 100644 --- a/src/components/EventsList/index.tsx +++ b/src/components/common/EventsList/index.tsx @@ -6,11 +6,11 @@ const EventsList = ({date, showItemControls = false}: {date: string; showItemCon const events = useEventsList(date); return ( -
+
{!events?.length ? (

no events

) : ( -
+
{events?.map(event => )}
)} diff --git a/src/components/Modal/index.tsx b/src/components/common/Modal/index.tsx similarity index 100% rename from src/components/Modal/index.tsx rename to src/components/common/Modal/index.tsx diff --git a/src/components/Modal/types.ts b/src/components/common/Modal/types.ts similarity index 100% rename from src/components/Modal/types.ts rename to src/components/common/Modal/types.ts diff --git a/src/components/common/MonthSmallCalendar/index.tsx b/src/components/common/MonthSmallCalendar/index.tsx new file mode 100644 index 0000000..3d1b6cd --- /dev/null +++ b/src/components/common/MonthSmallCalendar/index.tsx @@ -0,0 +1,51 @@ +import moment from 'moment'; +import {useSelector} from 'react-redux'; + +import {selectFullDate, selectMonth, selectYear} from '@/redux/date/selectors'; +import {formatDate, generateDatesArray, getDate, getWeekDays} from '@/services/dateUtils'; +import {cx} from '@/services/utils'; + +const MonthSmallCalendar = () => { + const fullDate = useSelector(selectFullDate); + const year = useSelector(selectYear); + const month = useSelector(selectMonth); + + const dates = generateDatesArray(year as string, month as string); + const weekDays = getWeekDays(); + + return ( +
+

+ {month} {year} +

+ +
+ {weekDays.map(weekday => ( + + {weekday.slice(0, 1)} + + ))} + + {dates.map(date => { + const day = formatDate(getDate(date), 'DD'); + const currentMonth = formatDate(moment(fullDate), 'M'); + const dateMonth = formatDate(moment(date), 'M'); + const currentDate = formatDate(getDate(new Date()), 'YYYY-MM-DD'); + + return ( +
+ +
+ ); + })} +
+
+ ); +}; + +export default MonthSmallCalendar; diff --git a/src/components/formInputs/DropdownControl.tsx b/src/components/common/formInputs/DropdownControl.tsx similarity index 100% rename from src/components/formInputs/DropdownControl.tsx rename to src/components/common/formInputs/DropdownControl.tsx diff --git a/src/components/formInputs/InputControl.tsx b/src/components/common/formInputs/InputControl.tsx similarity index 100% rename from src/components/formInputs/InputControl.tsx rename to src/components/common/formInputs/InputControl.tsx diff --git a/src/components/formInputs/TextareaControl.tsx b/src/components/common/formInputs/TextareaControl.tsx similarity index 100% rename from src/components/formInputs/TextareaControl.tsx rename to src/components/common/formInputs/TextareaControl.tsx diff --git a/src/components/inputs/Dropdown/index.tsx b/src/components/common/inputs/Dropdown/index.tsx similarity index 96% rename from src/components/inputs/Dropdown/index.tsx rename to src/components/common/inputs/Dropdown/index.tsx index bfb2ab9..2e405a8 100644 --- a/src/components/inputs/Dropdown/index.tsx +++ b/src/components/common/inputs/Dropdown/index.tsx @@ -1,8 +1,8 @@ import {memo, useCallback, useEffect, useRef, useState} from 'react'; +import ArrowDown from '@/components/ui/icons/ArrowDown'; +import CheckIcon from '@/components/ui/icons/CheckIcon'; import {useOpeningItem} from '@/hooks/useOpeningItem'; -import ArrowDown from '@/icons/ArrowDown'; -import CheckIcon from '@/icons/CheckIcon'; import {cx} from '@/services/utils'; import Button from '../../Button'; diff --git a/src/components/inputs/Dropdown/types.ts b/src/components/common/inputs/Dropdown/types.ts similarity index 100% rename from src/components/inputs/Dropdown/types.ts rename to src/components/common/inputs/Dropdown/types.ts diff --git a/src/components/inputs/Input/index.tsx b/src/components/common/inputs/Input/index.tsx similarity index 100% rename from src/components/inputs/Input/index.tsx rename to src/components/common/inputs/Input/index.tsx diff --git a/src/components/inputs/Input/types.ts b/src/components/common/inputs/Input/types.ts similarity index 100% rename from src/components/inputs/Input/types.ts rename to src/components/common/inputs/Input/types.ts diff --git a/src/components/inputs/Textarea/index.tsx b/src/components/common/inputs/Textarea/index.tsx similarity index 100% rename from src/components/inputs/Textarea/index.tsx rename to src/components/common/inputs/Textarea/index.tsx diff --git a/src/components/inputs/Textarea/types.ts b/src/components/common/inputs/Textarea/types.ts similarity index 100% rename from src/components/inputs/Textarea/types.ts rename to src/components/common/inputs/Textarea/types.ts diff --git a/src/components/layout/Aside/components/MyCalendarsList/index.tsx b/src/components/layout/Aside/components/MyCalendarsList/index.tsx new file mode 100644 index 0000000..0926b5d --- /dev/null +++ b/src/components/layout/Aside/components/MyCalendarsList/index.tsx @@ -0,0 +1,57 @@ +import {useSelector} from 'react-redux'; + +import {setSelectedCalendar} from '@/redux/myCalendars/myCalendarsSlice'; +import {selectCalendarsList, selectSelectedCalendar} from '@/redux/myCalendars/selectors'; +import {useAppDispatch} from '@/redux/store'; +import {CalendarsNames} from '@/services/types'; +import {cx} from '@/services/utils'; + +const MyCalendarsList = () => { + const dispatch = useAppDispatch(); + // TODO: for day page - filter by date + const calendarsList = useSelector(selectCalendarsList); + const selectedCalendar = useSelector(selectSelectedCalendar); + + const selectCalendar = (name: CalendarsNames) => { + if (selectedCalendar === name) { + dispatch(setSelectedCalendar(null)); + } else { + dispatch(setSelectedCalendar(name)); + } + }; + + return ( +
+

My calendars

+ +
+ {calendarsList?.map(({name, count, itemColor}) => { + const isSelected = selectedCalendar === name; + + return ( +
selectCalendar(name)}> +
+

{name}

+ {count} +
+ ); + })} +
+
+ ); +}; + +export default MyCalendarsList; diff --git a/src/components/layout/Aside/index.tsx b/src/components/layout/Aside/index.tsx new file mode 100644 index 0000000..33e688f --- /dev/null +++ b/src/components/layout/Aside/index.tsx @@ -0,0 +1,19 @@ +import MonthSmallCalendar from '@/components/common/MonthSmallCalendar'; + +import MyCalendarsList from './components/MyCalendarsList'; + +const Aside = () => { + return ( + + ); +}; + +export default Aside; diff --git a/src/components/Container/index.tsx b/src/components/layout/Container/index.tsx similarity index 82% rename from src/components/Container/index.tsx rename to src/components/layout/Container/index.tsx index c94be4a..f97be4e 100644 --- a/src/components/Container/index.tsx +++ b/src/components/layout/Container/index.tsx @@ -3,7 +3,7 @@ import {PropsWithChildren} from 'react'; import {cx} from '@/services/utils'; const Container = ({className = '', children}: PropsWithChildren<{className?: string}>) => { - return
{children}
; + return
{children}
; }; export default Container; diff --git a/src/components/Error/index.tsx b/src/components/layout/Error/index.tsx similarity index 100% rename from src/components/Error/index.tsx rename to src/components/layout/Error/index.tsx diff --git a/src/components/MainLayout/index.tsx b/src/components/layout/MainLayout/index.tsx similarity index 68% rename from src/components/MainLayout/index.tsx rename to src/components/layout/MainLayout/index.tsx index ea6da27..6cf19d9 100644 --- a/src/components/MainLayout/index.tsx +++ b/src/components/layout/MainLayout/index.tsx @@ -2,9 +2,11 @@ import {Suspense, useEffect} from 'react'; import {useSelector} from 'react-redux'; import {Outlet} from 'react-router'; -import Loading from '@/components/Loading'; +import Loading from '@/components/ui/Loading'; import {selectOpenedItems} from '@/redux/overflow/selectors'; +import Aside from '../Aside'; + const MainLayout = () => { const openedItems = useSelector(selectOpenedItems); @@ -21,11 +23,14 @@ const MainLayout = () => { }, [openedItems]); return ( -
- }> - - -
+ <> +
- +
- -
-