Updated day dialog UI (#43)

* enhance: Enhanced ui & completed calendar month-mode * feat: Added moon phase & astro, worked on responsivness for medium screens * feat: Added moon phase, astro hide/show control feature * fix: Fixed select dropdown height bug * chore: Minor UI adustments * feat: YearMode, WeekMode & Enhance layouts for better mobile screen view * fix: Fixed type error during build time * feat: Implemented event calendar * chore: Updated GUIDE_FOR_ADDING_EVENT_CALENDAR.md * chore: Synced forked repo * chore: Added event reader function * chore: Updated GUIDE_FOR_ADDING_EVENT_CALENDAR.md * chore: Updated GUIDE_FOR_ADDING_EVENT_CALENDAR.md * feat: Update DayDialog UI * fix: check box error
myanmarcyberyouths · Oct 27, 2023 · 7c93154 · 7c93154
1 parent adb9aa2
commit 7c93154
Show file tree

Hide file tree

Showing 38 changed files with 820 additions and 226 deletions.
diff --git a/apps/myanmar_calendar/package.json b/apps/myanmar_calendar/package.json
@@ -29,6 +29,8 @@
     "@radix-ui/react-icons": "^1.3.0",
     "@radix-ui/react-scroll-area": "^1.0.5",
     "@radix-ui/react-select": "^2.0.0",
+    "@radix-ui/react-slot": "^1.0.2",
+    "@radix-ui/react-switch": "^1.0.3",
     "@reduxjs/toolkit": "^1.9.6",
     "@vercel/analytics": "^1.0.1",
     "burma-calendar": "workspace:*",

diff --git a/apps/myanmar_calendar/src/assets/styles/globals.css b/apps/myanmar_calendar/src/assets/styles/globals.css
@@ -68,13 +68,21 @@
 
 @layer base {
   * {
-    font-size: 15.5px;
     /* outline: 1px solid violet; */
+    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
     @apply border-border;
   }
+
   html {
+    font-size: 15.5px;
     overflow: hidden;
   }
+  @media (max-width: 639px) {
+    html {
+      font-size: 16px;
+    }
+  }
+
   body {
     @apply bg-background text-foreground;
     overflow: hidden;

diff --git a/apps/myanmar_calendar/src/assets/styles/scroll.css b/apps/myanmar_calendar/src/assets/styles/scroll.css
@@ -40,10 +40,10 @@ html {
 }
 .__scrollbar-sm::-webkit-scrollbar-thumb {
   border-radius: 1.2rem;
-  background-color: #afafaf;
+  background-color: #cacaca;
 }
 .__scrollbar-sm::-webkit-scrollbar-thumb:hover {
-  background-color: #9a9a9a;
+  background-color: #a0a0a0;
 }
 
 /* SCROLLBAR 2 */

diff --git a/apps/myanmar_calendar/src/components/MyanmarCalendar.tsx b/apps/myanmar_calendar/src/components/MyanmarCalendar.tsx
@@ -6,10 +6,11 @@ import { engToMyanmarNumber } from "@/utils/engToMyanmarNumber";
 import FullMoonIcon from "../assets/icons/FullMoonIcon";
 import { classNames } from "@/utils/classNames";
 import LanguageMenu, { Language } from "./LanguageMenu";
-import DayDialog from "./modals/DayDialog";
+// import DayDialog from "./modals/DayDialog(Depre)";
 import { getLocalTime } from "@/utils/helpers";
 import useKeyPress from "../hooks/useKeyPress";
 import { ContextMenu, ContextMenuContent, ContextMenuItem, ContextMenuShortcut, ContextMenuTrigger } from "@/components/ui/menus/context-menu";
+import RenderDayDialog2 from "./modals/DayDialog/RenderDayDialog";
 
 const colStartClasses = ["", "col-start-2", "col-start-3", "col-start-4", "col-start-5", "col-start-6", "col-start-7"];
 
@@ -66,11 +67,6 @@ export default function MyanmarCalendar() {
 
   return (
     <>
-      <DayDialog
-        isOpen={isOpenDayDialog}
-        onClose={closeModal}
-        selectedDay={selectedDay}
-      />
       <div className="lg:flex lg:h-full lg:flex-col">
         <header className="flex items-center justify-between border-b border-gray-200 px-6 py-4 lg:flex-none">
           <h1 className="text-base font-semibold leading-6 text-gray-900">

diff --git a/apps/myanmar_calendar/src/components/layouts/Calendar/Calendar.tsx b/apps/myanmar_calendar/src/components/layouts/Calendar/Calendar.tsx
@@ -5,6 +5,7 @@ import { useSelector } from "react-redux";
 import WeekMode from "./WeekMode/WeekMode";
 import MonthMode from "./MonthMode/MonthMode";
 import YearMode from "./YearMode/YearMode";
+import { cn } from "@/lib/utils";
 
 const calendar_modes = {
   W: <WeekMode />,
@@ -14,9 +15,13 @@ const calendar_modes = {
 
 function Calendar() {
   const calendarMode = useSelector((state: RootState) => state.calendarState.calendarMode);
+  // const sidebarOpen = useSelector((state: RootState) => state.systemState.sidebarOpen);
 
   return (
-    <section className="flex-1 h-[calc(100vh-theme(spacing.nav-h))] supports-[height:100cqh]:h-[calc(100cqh-theme(spacing.nav-h))] supports-[height:100svh]:h-[calc(100svh-theme(spacing.nav-h))] border-l  border-gray-300 __scrollbar-md">
+    <section
+      className={cn(
+        "flex-1 h-[calc(100vh-theme(spacing.nav-h))] supports-[height:100cqh]:h-[calc(100cqh-theme(spacing.nav-h))] supports-[height:100svh]:h-[calc(100svh-theme(spacing.nav-h))] border-l  border-gray-300 __scrollbar-md"
+      )}>
       {calendar_modes[calendarMode]}
     </section>
   );

diff --git a/apps/myanmar_calendar/src/components/layouts/Calendar/MonthMode/MonthCell.tsx b/apps/myanmar_calendar/src/components/layouts/Calendar/MonthMode/MonthCell.tsx
@@ -8,7 +8,7 @@ import { engToMyanmarNumber } from "@/utils/engToMyanmarNumber";
 import { modifyColorOpacity } from "@/utils/modifyColorOpacity";
 import { englishToMyanmarDate, i18n } from "burma-calendar";
 import { format, isSameMonth, isSameWeek, isToday, lastDayOfMonth } from "date-fns";
-import React, { useEffect, useState } from "react";
+import React, { Fragment, useEffect, useRef, useState } from "react";
 import { useDispatch } from "react-redux";
 
 interface MonthCellT {
@@ -19,7 +19,7 @@ interface MonthCellT {
 function MonthCell({ day, calendarState }: MonthCellT) {
   const dispatch = useDispatch();
   const { calendarLanguage, activeDate, preferance, eventCalendars } = calendarState;
-  const [dayIsToday, setDayIsToday] = useState(false);
+  const [dayIsToday, setDayIsToday] = useState(isToday(day));
 
   let activeDateObj = new Date(activeDate);
 
@@ -30,8 +30,13 @@ function MonthCell({ day, calendarState }: MonthCellT) {
   const myanmarDate = englishToMyanmarDate(day);
   const moonAlign = myanmarDate.moonPhase === "လပြည့်" || myanmarDate.moonPhase === "လကွယ်";
 
+  const dayUpdateIntervalRef = useRef<any>();
   React.useEffect(() => {
-    setDayIsToday(isToday(day));
+    dayUpdateIntervalRef.current = setInterval(() => {
+      setDayIsToday(isToday(day));
+    }, 1000 * 60 * 60 * 24);
+
+    return () => clearInterval(dayUpdateIntervalRef.current);
   }, [day]);
 
   // Eg; event_calendars(day, ["international", "publicHolidays"])
@@ -90,7 +95,7 @@ function MonthCell({ day, calendarState }: MonthCellT) {
       <div className="flex-1 __scrollbar-xs">
         <ul className=" space-y-[0.15rem] ">
           {checkedEvents.map((eventCalendar) => (
-            <>
+            <Fragment key={eventCalendar.eventType}>
               {eventCalendar.events.map((event) => (
                 // h-[1.25rem]
                 <li
@@ -114,7 +119,7 @@ function MonthCell({ day, calendarState }: MonthCellT) {
                   </span>
                 </li>
               ))}
-            </>
+            </Fragment>
           ))}
         </ul>
       </div>

diff --git a/apps/myanmar_calendar/src/components/layouts/Navbar/CalendarSlider.tsx b/apps/myanmar_calendar/src/components/layouts/Navbar/CalendarSlider.tsx
@@ -34,8 +34,10 @@ function CalendarSlider() {
     setActiveDateIsThisMonth(isThisMonth(new Date(activeDate)));
   }, [activeDate]);
 
-  useKeyPress("ArrowLeft", () => handleCalendarSlide("prev"));
-  useKeyPress("ArrowRight", () => handleCalendarSlide("next"));
+  const dayDialogTargetDay = useSelector((state: RootState) => state.modelControlState.dayDialogTargetDay);
+
+  useKeyPress("ArrowLeft", () => handleCalendarSlide("prev"), !!dayDialogTargetDay);
+  useKeyPress("ArrowRight", () => handleCalendarSlide("next"), !!dayDialogTargetDay);
 
   return (
     <div className="h-[2.5rem] flex-shrink-0 flex items-stretch overflow-hidden rounded-md border border-gray-300">

diff --git a/apps/myanmar_calendar/src/components/layouts/Sidebar/CalendarPreferanceList.tsx b/apps/myanmar_calendar/src/components/layouts/Sidebar/CalendarPreferanceList.tsx
@@ -1,32 +1,39 @@
+import { Switch } from "@/components/ui/buttons/SwitchButton";
 import { CheckList, CheckListItem } from "@/components/ui/lists/CheckList";
 import { RootState } from "@/store";
 import { updateCalendarPreferanceState } from "@/store/calendarState";
+import { camelToSentenceCase } from "@/utils/stringHelpers";
 import React from "react";
 import { useDispatch, useSelector } from "react-redux";
 
 function CalendarPreferanceList() {
   const dispatch = useDispatch();
   const calendarPreferance = useSelector((state: RootState) => state.calendarState.preferance);
 
-  const handleCheck = (event: React.ChangeEvent<HTMLInputElement>) => {
+  const handleCheck = (checked, name) => {
     dispatch(
       updateCalendarPreferanceState({
-        cellProp: event.target.name,
-        value: event.target.checked,
+        cellProp: name,
+        value: checked,
       })
     );
   };
 
   return (
     <CheckList title="SHOW">
       {Object.keys(calendarPreferance).map((propKey) => (
-        <CheckListItem
-          key={propKey}
-          name={propKey}
-          id={"show_" + propKey}
-          checked={calendarPreferance[propKey]}
-          onChange={handleCheck}
-        />
+        <li key={propKey}>
+          <label
+            htmlFor={"show_" + propKey}
+            className="flex justify-between items-center h-[2.5rem] sm2:h-[2rem] rounded-[0.25rem] cursor-pointer hover:bg-gray-100 px-2 pl-3">
+            <span className="text-[1.1rem] sm2:text-[0.9rem] first-letter:capitalize  font-normal text-gray-700 whitespace-nowrap">{camelToSentenceCase(propKey)}</span>
+            <Switch
+              id={"show_" + propKey}
+              checked={calendarPreferance[propKey]}
+              onCheckedChange={(checked) => handleCheck(checked, propKey)}
+            />
+          </label>
+        </li>
       ))}
     </CheckList>
   );

diff --git a/apps/myanmar_calendar/src/components/layouts/Sidebar/EventCalendarList.tsx b/apps/myanmar_calendar/src/components/layouts/Sidebar/EventCalendarList.tsx
@@ -8,13 +8,10 @@ function EventCalendarList() {
   const dispatch = useDispatch();
   const eventCalendars = useSelector((state: RootState) => state.calendarState.eventCalendars);
 
-  const handleCheck = (event: React.ChangeEvent<HTMLInputElement>) => {
-    console.log(event.target.checked);
-    console.log(event.target.name);
-
+  const handleCheck = (event: React.ChangeEvent<HTMLInputElement>, keyName: string) => {
     dispatch(
       updateEventCalendars({
-        event: event.target.name,
+        event: keyName,
         value: event.target.checked,
       })
     );
@@ -25,10 +22,10 @@ function EventCalendarList() {
       {Object.keys(eventCalendars).map((propKey) => (
         <CheckListItem
           key={propKey}
-          name={propKey}
+          name={eventCalendars[propKey].name}
           id={"show_" + propKey}
           checked={eventCalendars[propKey].checked}
-          onChange={handleCheck}
+          onChange={(e) => handleCheck(e, propKey)}
           tagColor={eventCalendars[propKey].tagColor}
         />
       ))}

diff --git a/apps/myanmar_calendar/src/components/layouts/Sidebar/Sidebar.tsx b/apps/myanmar_calendar/src/components/layouts/Sidebar/Sidebar.tsx
@@ -10,10 +10,11 @@ import useOnClickOutside from "@/hooks/useOnClickOutside";
 import { setSidebarOpenState } from "@/store/systemState";
 import CalendarPreferanceList from "./CalendarPreferanceList";
 import EventCalendarList from "./EventCalendarList";
+import ModelBackdrop from "@/components/ui/backdrops/ModelBackdrop";
 
 function Sidebar() {
   const dispatch = useDispatch();
-  const sidebarOpen = useSelector((state: RootState) => state.systemState.sidebarOpen);
+  const { sidebarOpen, enterMobileMode } = useSelector((state: RootState) => state.systemState);
   // const [hideSidebar, setHi]
 
   const sidebarRef = useOnClickOutside(() => {
@@ -23,30 +24,39 @@ function Sidebar() {
 
   return (
     // <section className={`flex-shrink-0 __scrollbar-sm py-3 transition-all duration-300 flex justify-center flex-row-reverse overflow-hidden absolute ${sidebarOpen ? "w-sidebar-w" : "w-0"}`}>
-    <section
-      ref={sidebarRef}
-      className={cn(
-        "absolute h-[100vh] border-r border-gray-300 top-0 z-[1] shadow-lg xl:shadow-none xl:static xl:h-[calc(100vh-theme(spacing.nav-h))] xl:border-none flex-shrink-0 transition-all duration-300 flex flex-col items-center overflow-hidden bg-white",
-        sidebarOpen ? "w-sidebar-w" : "w-0"
-      )}>
-      <div className="xl:hidden h-nav-h w-[16rem] flex justify-between items-center flex-shrink-0 pl-1">
-        <LogoLong />
-        <SidebarToggleBtn>
-          <BsArrowLeftShort size={30} />
-        </SidebarToggleBtn>
-      </div>
-      {/* w-[calc(theme(spacing.sidebar-w)-2.5rem)] */}
-      <div className="space-y-6 w-sidebar-w flex-shrink-0 py-3 pt-4 h-[calc(100%-theme(spacing.nav-h))] xl:h-full px-5 __scrollbar-sm">
-        <div className="">
-          <p className="text-[0.8rem] font-semibold text-gray-600 mb-[0.4rem]">CALENDAR LANGUAGE</p>
-          <CalendarLanguageSelectBox />
+    <>
+      <section
+        ref={sidebarRef}
+        className={cn(
+          "absolute  h-[100vh] border-r border-gray-300 top-0 z-10 shadow-lg xl:shadow-none xl:static xl:h-[calc(100vh-theme(spacing.nav-h))] xl:border-none flex-shrink-0 transition-all duration-300 flex flex-col items-center overflow-hidden bg-white -translate-x-[100%] sm2:translate-x-0",
+          enterMobileMode && `'w-[83%] max-w-[22rem]' ${sidebarOpen ? "translate-x-0" : ""}`,
+          !enterMobileMode && `${sidebarOpen ? "w-[19rem] xl:w-sidebar-w" : "w-0"}`
+        )}>
+        <div className="xl:hidden h-nav-h w-[90%] xl:w-[16rem] flex justify-between items-center flex-shrink-0 pl-1">
+          <LogoLong />
+          <SidebarToggleBtn>
+            <BsArrowLeftShort size={30} />
+          </SidebarToggleBtn>
         </div>
-        {/* => SystemLanguageSelectBox */}
-        {/* => DateJumper */}
-        <CalendarPreferanceList />
-        <EventCalendarList />
-      </div>
-    </section>
+        {/* w-[calc(theme(spacing.sidebar-w)-2.5rem)] */}
+        <div className="space-y-6 w-full min-w-[19rem] xl:min-w-[theme(spacing.sidebar-w)] xl:w-sidebar-w flex-shrink-0 py-3 pt-4 h-[calc(100%-theme(spacing.nav-h))] xl:h-full px-5 __scrollbar-sm">
+          <div className="">
+            <p className="text-[0.8rem] font-semibold text-gray-600 mb-[0.4rem]">CALENDAR LANGUAGE</p>
+            <CalendarLanguageSelectBox />
+          </div>
+          {/* => SystemLanguageSelectBox */}
+          {/* => DateJumper */}
+          <CalendarPreferanceList />
+          <EventCalendarList />
+        </div>
+      </section>
+      {enterMobileMode && (
+        <ModelBackdrop
+          show={sidebarOpen}
+          opacity="0.3"
+        />
+      )}
+    </>
   );
 }
 

diff --git a/apps/myanmar_calendar/src/components/modals/AddEventDialog.tsx/NewEventDialog.tsx b/apps/myanmar_calendar/src/components/modals/AddEventDialog.tsx/NewEventDialog.tsx
@@ -0,0 +1,62 @@
+import React, { Fragment } from "react";
+import { Dialog, Transition } from "@headlessui/react";
+import { IoMdClose } from "react-icons/io";
+import { FiMaximize2 } from "react-icons/fi";
+import { Button } from "@/components/ui/buttons/Button";
+import { HiOutlineArrowSmallRight } from "react-icons/hi2";
+import { format } from "date-fns";
+
+interface AddEventDialogProps {
+  isOpen: boolean;
+  onClose: () => void;
+  selectedDay: Date;
+}
+
+function NewEventDialog({ isOpen, onClose, selectedDay }: AddEventDialogProps) {
+  return (
+    <Transition
+      appear
+      show={isOpen}
+      as={Fragment}>
+      <Dialog
+        as="div"
+        className="relative z-10"
+        onClose={onClose}>
+        <Transition.Child
+          as={Fragment}
+          enterFrom="opacity-50  translate-x-[100%]"
+          enterTo="opacity-100 translate-x-0"
+          leaveFrom="opacity-100 translate-x-0"
+          leaveTo="opacity-0 translate-x-[100%]"
+          enter="ease-out duration-250"
+          leave="ease-in duration-200">
+          <Dialog.Panel
+            className="fixed inset-0 mx-2 ml-auto my-auto w-[27rem] h-[97%] transform overflow-hidden rounded-lg bg-white text-left align-middle shadow-lg transition-all flex flex-col border  border-gray-200 "
+            style={{
+              boxShadow: "0 14px 18px 3px rgba(100,100,100,.14), 0 9px 16px 8px rgba(100,100,100,.07), 0 11px 15px -7px rgba(100,100,100,.2)",
+            }}>
+            <div className="h-[3rem]  flex items-center justify-between px-3 bg-gray-50 border-b">
+              <button
+                onClick={() => {
+                  onClose();
+                }}>
+                <HiOutlineArrowSmallRight
+                  size={21}
+                  className="text-gray-600 hover:text-rose-500"
+                />
+              </button>
+            </div>
+            <div className="px-3">
+              <time className="flex items-center gap-2 h-[3rem]">
+                <span className="text-[1.3rem] text-gray-500">{format(selectedDay, "iii, d MMMM")}</span>
+                <span className="text-[1.3rem] text-rose-500 ">{selectedDay.getFullYear()}</span>
+              </time>
+            </div>
+          </Dialog.Panel>
+        </Transition.Child>
+      </Dialog>
+    </Transition>
+  );
+}
+
+export default NewEventDialog;