refactor(calendar): use React components for calendar cell content

heroui-inc · Jan 2, 2025 · de1e4fa · de1e4fa
2 parents 84a85d7 + d92468a
commit de1e4fa
Show file tree

Hide file tree

Showing 10 changed files with 128 additions and 154 deletions.
diff --git a/apps/docs/content/components/calendar/custom-cell-content.raw.jsx b/apps/docs/content/components/calendar/custom-cell-content.raw.jsx
@@ -0,0 +1,50 @@
+import React from "react";
+import {
+  Calendar,
+  CalendarCellContent,
+  CalendarCellHeader,
+  CalendarCellBody,
+} from "@nextui-org/react";
+
+export default function App() {
+  return (
+    <Calendar calendarWidth={400}>
+      {(date) => (
+        <CalendarCellContent>
+          <CalendarCellHeader />
+          <CalendarCellBody>
+            <div className="flex flex-col w-full text-tiny gap-0.5 px-0.5">
+              {date.day % 7 === 0 && (
+                <span
+                  aria-label="Calendar event"
+                  className="bg-red-500/20 w-full rounded-md px-1 text-red-400 line-clamp-1"
+                  role="status"
+                >
+                  MTG
+                </span>
+              )}
+              {date.day % 5 === 0 && (
+                <span
+                  aria-label="calendar event"
+                  className="bg-green-500/20 w-full rounded-md px-1 text-green-400 line-clamp-1"
+                  role="status"
+                >
+                  MTG
+                </span>
+              )}
+              {date.day % 3 === 0 && (
+                <span
+                  aria-label="calendar event"
+                  className="bg-yellow-500/20 w-full rounded-md px-1 text-yellow-400 line-clamp-1"
+                  role="status"
+                >
+                  MTG
+                </span>
+              )}
+            </div>
+          </CalendarCellBody>
+        </CalendarCellContent>
+      )}
+    </Calendar>
+  );
+}
diff --git a/apps/docs/content/components/calendar/custom-cell-content.ts b/apps/docs/content/components/calendar/custom-cell-content.ts
diff --git a/apps/docs/content/components/calendar/custom-cell-content.tsx b/apps/docs/content/components/calendar/custom-cell-content.tsx
@@ -0,0 +1,9 @@
+import App from "./custom-cell-content.raw.jsx?raw";
+
+const react = {
+  "/App.jsx": App,
+};
+
+export default {
+  ...react,
+};
diff --git a/apps/docs/content/components/range-calendar/custom-cell-content.raw.jsx b/apps/docs/content/components/range-calendar/custom-cell-content.raw.jsx
@@ -0,0 +1,49 @@
+import {
+  RangeCalendar,
+  CalendarCellContent,
+  CalendarCellHeader,
+  CalendarCellBody,
+} from "@nextui-org/react";
+
+export default function App() {
+  return (
+    <RangeCalendar calendarWidth={400}>
+      {(date) => (
+        <CalendarCellContent>
+          <CalendarCellHeader />
+          <CalendarCellBody>
+            <div className="flex flex-col w-full text-tiny gap-0.5 px-0.5">
+              {date.day % 7 === 0 && (
+                <span
+                  aria-label="calendar event"
+                  className="bg-red-500/20 w-full rounded-md px-1 text-red-400 line-clamp-1"
+                  role="status"
+                >
+                  MTG
+                </span>
+              )}
+              {date.day % 5 === 0 && (
+                <span
+                  aria-label="calendar event"
+                  className="bg-green-500/20 w-full rounded-md px-1 text-green-400 line-clamp-1"
+                  role="status"
+                >
+                  MTG
+                </span>
+              )}
+              {date.day % 3 === 0 && (
+                <span
+                  aria-label="calendar event"
+                  className="bg-yellow-500/20 w-full rounded-md px-1 text-yellow-400 line-clamp-1"
+                  role="status"
+                >
+                  MTG
+                </span>
+              )}
+            </div>
+          </CalendarCellBody>
+        </CalendarCellContent>
+      )}
+    </RangeCalendar>
+  );
+}
diff --git a/apps/docs/content/components/range-calendar/custom-cell-content.ts b/apps/docs/content/components/range-calendar/custom-cell-content.ts
diff --git a/apps/docs/content/components/range-calendar/custom-cell-content.tsx b/apps/docs/content/components/range-calendar/custom-cell-content.tsx
@@ -0,0 +1,9 @@
+import App from "./custom-cell-content.raw.jsx?raw";
+
+const react = {
+  "/App.jsx": App,
+};
+
+export default {
+  ...react,
+};
diff --git a/packages/components/calendar/src/calendar-cell-header.tsx b/packages/components/calendar/src/calendar-cell-header.tsx
@@ -43,7 +43,7 @@ export const CalendarCellHeader = ({children}: CalendarCellHeaderProps) => {
       data-selection-start={dataAttr(isSelectionStart)}
     >
       <span
-        className={slots?.cellHeader({class: classNames?.cellButton})}
+        className={slots?.cellHeader({class: classNames?.cellHeader})}
         data-disabled={dataAttr(isDisabled && !isInvalid)}
         data-focus-visible={dataAttr(isFocused && isFocusVisible)}
         data-hover={dataAttr(isHovered)}
@@ -61,7 +61,7 @@ export const CalendarCellHeader = ({children}: CalendarCellHeaderProps) => {
         data-today={dataAttr(isToday)}
         data-unavailable={dataAttr(isUnavailable)}
       >
-        {children ? children : date.day}
+        {children || date.day}
       </span>
     </div>
   );

diff --git a/packages/components/calendar/stories/calendar.stories.tsx b/packages/components/calendar/stories/calendar.stories.tsx
@@ -284,16 +284,16 @@ const CustomCellTemplate = (args: CalendarProps) => {
                 <div className="flex flex-col w-full text-tiny gap-0.5 px-0.5">
                   {date.day % 7 === 0 && (
                     <span
-                      aria-label="Birthday event"
+                      aria-label="calendar event"
                       className="bg-red-500/20 w-full rounded-md px-1 text-red-400 line-clamp-1"
                       role="status"
                     >
-                      Birth day
+                      MTG
                     </span>
                   )}
                   {date.day % 5 === 0 && (
                     <span
-                      aria-label="Birthday event"
+                      aria-label="calendar event"
                       className="bg-green-500/20 w-full rounded-md px-1 text-green-400 line-clamp-1"
                       role="status"
                     >
@@ -302,7 +302,7 @@ const CustomCellTemplate = (args: CalendarProps) => {
                   )}
                   {date.day % 3 === 0 && (
                     <span
-                      aria-label="Birthday event"
+                      aria-label="calendar event"
                       className="bg-yellow-500/20 w-full rounded-md px-1 text-yellow-400 line-clamp-1"
                       role="status"
                     >

diff --git a/packages/components/calendar/stories/range-calendar.stories.tsx b/packages/components/calendar/stories/range-calendar.stories.tsx
@@ -319,16 +319,16 @@ const CustomCellTemplate = (args: RangeCalendarProps) => {
                 <div className="flex flex-col w-full text-tiny gap-0.5 px-0.5">
                   {date.day % 7 === 0 && (
                     <span
-                      aria-label="Birthday event"
+                      aria-label="calendar event"
                       className="bg-red-500/20 w-full rounded-md px-1 text-red-400 line-clamp-1"
                       role="status"
                     >
-                      Birth day
+                      MTG
                     </span>
                   )}
                   {date.day % 5 === 0 && (
                     <span
-                      aria-label="Birthday event"
+                      aria-label="calendar event"
                       className="bg-green-500/20 w-full rounded-md px-1 text-green-400 line-clamp-1"
                       role="status"
                     >
@@ -337,7 +337,7 @@ const CustomCellTemplate = (args: RangeCalendarProps) => {
                   )}
                   {date.day % 3 === 0 && (
                     <span
-                      aria-label="Birthday event"
+                      aria-label="calendar event"
                       className="bg-yellow-500/20 w-full rounded-md px-1 text-yellow-400 line-clamp-1"
                       role="status"
                     >

diff --git a/packages/core/theme/src/components/calendar.ts b/packages/core/theme/src/components/calendar.ts
@@ -46,6 +46,7 @@ const calendar = tv({
       "data-[unavailable=true]:text-default-300",
       "data-[unavailable=true]:cursor-default",
       "data-[unavailable=true]:line-through",
+      ...dataFocusVisibleClasses,
     ],
     cellBody: "w-full h-full",
     pickerWrapper: