Revert "New features: year mode & week mode (#38)" (#39)

This reverts commit 7fbee34.

apps/myanmar_calendar/src/assets/styles/globals.css

@@ -72,12 +72,8 @@
     /* outline: 1px solid violet; */
     @apply border-border;
   }
-  html {
-    overflow: hidden;
-  }
   body {
     @apply bg-background text-foreground;
-    overflow: hidden;
   }
 
   button {

apps/myanmar_calendar/src/assets/styles/scroll.css

@@ -30,7 +30,7 @@ html {
 /* SCROLLBAR 2 */
 .__scrollbar-md {
   scrollbar-width: thin;
-  /* overflow-x: hidden; */
+  overflow-x: hidden;
   overflow-y: scroll;
   overflow: overlay;
 }

apps/myanmar_calendar/src/components/MyanmarCalendar.tsx

@@ -9,7 +9,7 @@ import LanguageMenu, { Language } from "./LanguageMenu";
 import DayDialog from "./modals/DayDialog";
 import { getLocalTime } from "@/utils/helpers";
 import useKeyPress from "../hooks/useKeyPress";
-import { ContextMenu, ContextMenuContent, ContextMenuItem, ContextMenuShortcut, ContextMenuTrigger } from "@/components/ui/menus/context-menu";
+import { ContextMenu, ContextMenuContent, ContextMenuItem, ContextMenuShortcut, ContextMenuTrigger } from "@/components/ui/context-menu";
 
 const colStartClasses = ["", "col-start-2", "col-start-3", "col-start-4", "col-start-5", "col-start-6", "col-start-7"];
 

apps/myanmar_calendar/src/components/MyanmarCalendar2.tsx

@@ -7,7 +7,7 @@ function MyanmarCalendar2() {
   return (
     <>
       <Header />
-      <main className="h-[calc(100vh-theme(spacing.nav-h))] supports-[height:100cqh]:h-[calc(100cqh-theme(spacing.nav-h))] supports-[height:100dvh]:h-[calc(100svh-theme(spacing.nav-h))] flex items-stretch ">
+      <main className="h-[calc(100vh-theme(spacing.nav-h))] flex items-stretch">
         <Sidebar />
         <Calendar />
       </main>

apps/myanmar_calendar/src/components/layouts/Calendar/Calendar.tsx

@@ -2,9 +2,9 @@ import { RootState } from "@/store";
 import React from "react";
 import { useSelector } from "react-redux";
 
-import WeekMode from "./WeekMode/WeekMode";
-import MonthMode from "./MonthMode/MonthMode";
-import YearMode from "./YearMode/YearMode";
+import WeekMode from "./WeekMode";
+import MonthMode from "./MonthMode";
+import YearMode from "./YearMode";
 
 const calendar_modes = {
   W: <WeekMode />,
@@ -15,11 +15,7 @@ const calendar_modes = {
 function Calendar() {
   const calendarMode = useSelector((state: RootState) => state.calendarState.calendarMode);
 
-  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">
-      {calendar_modes[calendarMode]}
-    </section>
-  );
+  return <section className="flex-1 h-[calc(100vh-theme(spacing.nav-h))] border-l  border-gray-300 __scrollbar-md">{calendar_modes[calendarMode]}</section>;
 }
 
 export default Calendar;

apps/myanmar_calendar/src/components/layouts/Calendar/MonthMode/MonthCell.tsx → apps/myanmar_calendar/src/components/layouts/Calendar/Cells/MonthCell.tsx

@@ -5,8 +5,8 @@ import { LANGUAGE_ENUM } from "@/type-models/calendarState.type";
 import { engToMyanmarNumber } from "@/utils/engToMyanmarNumber";
 import { getLocalTime } from "@/utils/helpers";
 import { englishToMyanmarDate, i18n } from "burma-calendar";
-import { format, isSameMonth, isSameWeek, isToday, lastDayOfMonth } from "date-fns";
-import React, { useState } from "react";
+import { format, isSameMonth, isThisMonth, isToday } from "date-fns";
+import React from "react";
 import { useDispatch } from "react-redux";
 
 interface MonthCellT {
@@ -15,54 +15,39 @@ interface MonthCellT {
 }
 
 function MonthCell({ day, calendarState }: MonthCellT) {
+  const { calendarLanguage, activeDate, monthCellProps } = calendarState;
   const dispatch = useDispatch();
-  const { calendarLanguage, activeDate, preferance } = calendarState;
-  const [dayIsToday, setDayIsToday] = useState(false);
-
-  let activeDateObj = new Date(activeDate);
-
-  const dayBelongsInActiveMonth = isSameMonth(day, activeDateObj);
-  const dayIsInEndWeek = isSameWeek(lastDayOfMonth(activeDateObj), day);
+  const dayIsToday = isToday(getLocalTime(day));
+  const dayIncludeInActiveMonth = isSameMonth(day, new Date(activeDate));
 
   const mmDate = i18n(engToMyanmarNumber(englishToMyanmarDate(day).date), "myanmar", "myanmar" as any);
   const myanmar_calendar = englishToMyanmarDate(day);
   const moonAlign = myanmar_calendar.moonPhase === "လပြည့်" || myanmar_calendar.moonPhase === "လကွယ်";
 
-  React.useEffect(() => {
-    setDayIsToday(isToday(day));
-  }, [day]);
-
   return (
     <div
-      className={cn(
-        "border-b border-r flex flex-col items-stretch border-gray-300 p-2 py-[0.25rem] pb-[0.3rem]  min-h-[8.5rem] hover:bg-gray-50",
-        dayIsInEndWeek ? "min-h-[8.65rem] pb-[0.45rem]" : ""
-      )}
+      className={`border-b border-r flex flex-col items-stretch border-gray-300 p-2 py-[0.25rem] pb-[0.3rem] min-h-[8.5rem] hover:bg-gray-50`}
       onClick={() => {
         dispatch(setDayDialongTargetDay(day.toISOString()));
       }}>
       {/* ------ CELL TOP ------- */}
       <div className=" flex justify-between items-start ">
-        <time
-          dateTime={format(day, "yyyy-MM-dd")}
-          className={cn("flex justify-start -mt-[0.05rem] text-gray-500 flex-1 text-[0.92rem] leading-5", dayBelongsInActiveMonth ? "text-gray-500" : "text-gray-300")}>
-          {mmDate}
-        </time>
+        <time className={cn("flex justify-start -mt-[0.05rem] text-gray-500 flex-1 text-[0.92rem] leading-5", dayIncludeInActiveMonth ? "text-gray-500" : "text-gray-300")}>{mmDate}</time>
         <time
           className={cn(
             "flex justify-center items-center font-semibold text-[1.12rem]  h-[1.6rem] leading-7",
-            dayBelongsInActiveMonth ? "text-gray-600" : "text-gray-300",
+            dayIncludeInActiveMonth ? "text-gray-600" : "text-gray-300",
             dayIsToday ? "text-gray-50 bg-red-500" : " ",
             format(day, "d") == "1" ? "rounded-md px-[0.35rem]" : "rounded-full w-[1.6rem]"
           )}
-          dateTime={format(day, "yyyy-MM-dd")}>
+          dateTime={day.toLocaleDateString()}>
           {format(day, "d")}{" "}
           {format(day, "d") == "1" && (
-            <span className={cn("text-[1.12rem] ml-[0.3rem]", dayBelongsInActiveMonth ? "text-gray-600" : "text-gray-300", dayIsToday ? "text-gray-100" : "")}>{format(day, "MMM")}</span>
+            <span className={cn("text-[1.12rem] ml-[0.3rem]", dayIncludeInActiveMonth ? "text-gray-600" : "text-gray-300", dayIsToday ? "text-gray-100" : "")}>{format(day, "MMM")}</span>
           )}
         </time>
         {/* ASTRO */}
-        <div className={cn("flex flex-1 self-stretch min-w-[1.5rem] justify-end items-center gap-1 transition-all", preferance.astro ? "opacity-100" : "opacity-0")}>
+        <div className={cn("flex flex-1 self-stretch min-w-[1.5rem] justify-end items-center gap-1 transition-all duration-200", monthCellProps.astro ? "opacity-100" : "opacity-0")}>
           {/* long text on large screen */}
           <span className={`hidden md3:inline text-[0.65rem] whitespace-nowrap ${myanmar_calendar.pyathada ? "text-red-500" : "text-blue-500"}`}>
             {myanmar_calendar.pyathada || myanmar_calendar.yatyaza}
@@ -77,13 +62,9 @@ function MonthCell({ day, calendarState }: MonthCellT) {
 
       {/* ------ CELL BOTTOM ------- */}
       <div className="flex justify-between items-center h-[1.1rem]">
-        <ul>
-          <li>
-            <p></p>
-          </li>
-        </ul>
+        <div></div>
         {/* MOON PHASE */}
-        <div className={cn("flex gap-1 items-center transition-all", preferance.moonPhase ? "opacity-100" : "opacity-0")}>
+        <div className={cn("flex gap-1 items-center transition-all duration-200", monthCellProps.moonPhase ? "opacity-100" : "opacity-0")}>
           {(mmDate == "၁" || moonAlign) && (
             <span className="hidden md2:inline text-[0.68rem] leading-[1.3rem] text-gray-600 whitespace-nowrap overflow-x-hidden">
               {myanmar_calendar.month}

apps/myanmar_calendar/src/components/layouts/Calendar/Cells/YearCell.tsx

@@ -0,0 +1,7 @@
+import React from "react";
+
+function YearCell() {
+  return <div>YearCell</div>;
+}
+
+export default YearCell;

apps/myanmar_calendar/src/components/layouts/Calendar/MonthMode/MonthMode.tsx → apps/myanmar_calendar/src/components/layouts/Calendar/MonthMode.tsx

@@ -2,20 +2,16 @@ import { RootState } from "@/store";
 import { WEEK_DAYS } from "@/utils/constants";
 import { getLocalTime } from "@/utils/helpers";
 import { eachDayOfInterval, endOfMonth, endOfWeek, startOfMonth, startOfWeek } from "date-fns";
-import React, { useEffect, useState } from "react";
+import React from "react";
 import { useSelector } from "react-redux";
-import MonthCell from "./MonthCell";
+import MonthCell from "./Cells/MonthCell";
 import { cn } from "@/lib/utils";
 
 function MonthMode() {
   const calendarState = useSelector((state: RootState) => state.calendarState);
   const { activeDate, calendarLanguage, ...rest } = calendarState;
-  const [activeDateObj, setActiveDateObj] = useState<Date>();
-
-  useEffect(() => {
-    setActiveDateObj(new Date(activeDate));
-  }, [activeDate]);
 
+  const activeDateObj = new Date(activeDate);
   let days = eachDayOfInterval({
     start: startOfWeek(startOfMonth(getLocalTime(activeDateObj))),
     end: endOfWeek(endOfMonth(getLocalTime(activeDateObj))),
@@ -36,7 +32,7 @@ function MonthMode() {
         ))}
       </div>
       {/* min-h-[41rem] */}
-      <div className="w-full h-[calc(100%-2.25rem)]  grid grid-cols-[repeat(7,minmax(auto,1fr))] grid-flow-row-dense">
+      <div className="w-full h-[calc(100%-2.25rem)]  grid grid-cols-7 grid-flow-row-dense">
         {days.map((day, dayIdx) => (
           <MonthCell
             key={day.toString()}

apps/myanmar_calendar/src/components/layouts/Calendar/WeekMode.tsx

@@ -0,0 +1,8 @@
+import React from "react";
+import CommingSoonBanner from "./CommingSoonBanner";
+
+function WeekMode() {
+  return <CommingSoonBanner title="Week Mode" />;
+}
+
+export default WeekMode;

apps/myanmar_calendar/src/components/layouts/Calendar/YearMode.tsx

@@ -0,0 +1,8 @@
+import React from "react";
+import CommingSoonBanner from "./CommingSoonBanner";
+
+function YearMode() {
+  return <CommingSoonBanner title="Year Mode" />;
+}
+
+export default YearMode;