@dxos/react-ui-calendar 0.8.4-main.548089c → 0.8.4-main.e8ec1fe

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dxos/react-ui-calendar",
-  "version": "0.8.4-main.548089c",
+  "version": "0.8.4-main.e8ec1fe",
   "description": "A calendar component.",
   "homepage": "https://dxos.org",
   "bugs": "https://github.com/dxos/dxos/issues",
@@ -31,11 +31,11 @@
     "react-resize-detector": "^11.0.1",
     "react-virtualized": "^9.22.6",
     "react-window": "^2.2.3",
-    "@dxos/async": "0.8.4-main.548089c",
-    "@dxos/debug": "0.8.4-main.548089c",
-    "@dxos/log": "0.8.4-main.548089c",
-    "@dxos/invariant": "0.8.4-main.548089c",
-    "@dxos/util": "0.8.4-main.548089c"
+    "@dxos/async": "0.8.4-main.e8ec1fe",
+    "@dxos/debug": "0.8.4-main.e8ec1fe",
+    "@dxos/invariant": "0.8.4-main.e8ec1fe",
+    "@dxos/util": "0.8.4-main.e8ec1fe",
+    "@dxos/log": "0.8.4-main.e8ec1fe"
   },
   "devDependencies": {
     "@types/react": "~19.2.2",
@@ -46,17 +46,17 @@
     "react": "~19.2.0",
     "react-dom": "~19.2.0",
     "vite": "7.1.9",
-    "@dxos/random": "0.8.4-main.548089c",
-    "@dxos/react-ui": "0.8.4-main.548089c",
-    "@dxos/react-ui-theme": "0.8.4-main.548089c",
-    "@dxos/storybook-utils": "0.8.4-main.548089c"
+    "@dxos/random": "0.8.4-main.e8ec1fe",
+    "@dxos/react-ui": "0.8.4-main.e8ec1fe",
+    "@dxos/react-ui-theme": "0.8.4-main.e8ec1fe",
+    "@dxos/storybook-utils": "0.8.4-main.e8ec1fe"
   },
   "peerDependencies": {
     "effect": "3.13.3",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
-    "@dxos/react-ui": "0.8.4-main.548089c",
-    "@dxos/react-ui-theme": "0.8.4-main.548089c"
+    "@dxos/react-ui": "0.8.4-main.e8ec1fe",
+    "@dxos/react-ui-theme": "0.8.4-main.e8ec1fe"
   },
   "publishConfig": {
     "access": "public"

package/src/components/Calendar/Calendar.stories.tsx

@@ -29,7 +29,7 @@ export const Default: Story = {
   render: () => (
     <Calendar.Root>
       <Calendar.Viewport>
-        <Calendar.Header />
+        <Calendar.Toolbar />
         <Calendar.Grid rows={6} />
       </Calendar.Viewport>
     </Calendar.Root>
@@ -40,7 +40,7 @@ export const Border: Story = {
   render: () => (
     <Calendar.Root>
       <Calendar.Viewport classNames='bg-modalSurface border border-separator rounded'>
-        <Calendar.Header />
+        <Calendar.Toolbar />
         <Calendar.Grid rows={6} />
       </Calendar.Viewport>
     </Calendar.Root>
@@ -52,7 +52,7 @@ export const Column: Story = {
     <div className='absolute inset-0 flex bs-full justify-center'>
       <Calendar.Root>
         <Calendar.Viewport>
-          <Calendar.Header />
+          <Calendar.Toolbar />
           <Calendar.Grid />
         </Calendar.Viewport>
       </Calendar.Root>
@@ -66,7 +66,7 @@ export const Mobile: Story = {
       <div className='flex bs-full is-[400px] justify-center'>
         <Calendar.Root>
           <Calendar.Viewport classNames='is-full'>
-            <Calendar.Header />
+            <Calendar.Toolbar />
             <Calendar.Grid />
           </Calendar.Viewport>
         </Calendar.Root>

package/src/components/Calendar/Calendar.tsx

@@ -20,7 +20,7 @@ import { useResizeDetector } from 'react-resize-detector';
 import { List, type ListProps, type ListRowRenderer } from 'react-virtualized';
 
 import { Event } from '@dxos/async';
-import { IconButton, type ThemedClassName, useTranslation } from '@dxos/react-ui';
+import { Icon, IconButton, type ThemedClassName, useTranslation } from '@dxos/react-ui';
 import { mx } from '@dxos/react-ui-theme';
 
 import { translationKey } from '../../translations';
@@ -117,11 +117,11 @@ CalendarViewport.displayName = 'CalendarContent';
 // Header
 //
 
-type CalendarHeaderProps = ThemedClassName;
+type CalendarToolbarProps = ThemedClassName;
 
-const CalendarHeader = ({ classNames }: CalendarHeaderProps) => {
+const CalendarToolbar = ({ classNames }: CalendarToolbarProps) => {
   const { t } = useTranslation(translationKey);
-  const { weekStartsOn, event, index, selected } = useCalendarContext(CalendarHeader.displayName);
+  const { weekStartsOn, event, index, selected } = useCalendarContext(CalendarToolbar.displayName);
   const top = useMemo(() => getDate(start, index ?? 0, 6, weekStartsOn), [index, weekStartsOn]);
   const today = useMemo(() => new Date(), []);
 
@@ -130,11 +130,15 @@ const CalendarHeader = ({ classNames }: CalendarHeaderProps) => {
   }, [event, start, today]);
 
   return (
-    <div role='none' className={mx('shink-0 is-full grid grid-cols-3', classNames)} style={{ width: defaultWidth }}>
+    <div
+      role='none'
+      className={mx('shink-0 is-full grid grid-cols-3 items-center bg-barSurface', classNames)}
+      style={{ width: defaultWidth }}
+    >
       <div className='flex justify-start'>
         <IconButton
           variant='ghost'
-          size={6}
+          size={5}
           icon='ph--calendar--regular'
           iconOnly
           classNames='aspect-square'
@@ -142,13 +146,13 @@ const CalendarHeader = ({ classNames }: CalendarHeaderProps) => {
           onClick={handleToday}
         />
       </div>
-      <span className='flex justify-center p-2'>{format(selected ?? top, 'MMMM')}</span>
-      <span className='flex justify-end p-2'>{(selected ?? top).getFullYear()}</span>
+      <div className='flex justify-center p-2 text-description'>{format(selected ?? top, 'MMMM')}</div>
+      <div className='flex justify-end p-2 text-description'>{(selected ?? top).getFullYear()}</div>
     </div>
   );
 };
 
-CalendarHeader.displayName = 'CalendarHeader';
+CalendarToolbar.displayName = 'CalendarHeader';
 
 //
 // Grid
@@ -194,6 +198,13 @@ const CalendarGrid = ({ classNames, rows, onSelect }: CalendarGridProps) => {
     });
   }, []);
 
+  // TODO(burdon): Get info by range.
+  // TODO(burdon): Border marker for "all day events?"
+  const getNumAppointments = useCallback((_date: Date) => {
+    // return Math.floor(Math.random() * 10);
+    return 0;
+  }, []);
+
   const handleDaySelect = useCallback(
     (date: Date) => {
       setSelected((current) => (isSameDay(date, current) ? undefined : date));
@@ -210,11 +221,12 @@ const CalendarGrid = ({ classNames, rows, onSelect }: CalendarGridProps) => {
     ({ key, index, style }) => {
       const getBgColor = (date: Date) => date.getMonth() % 2 === 0 && 'bg-modalSurface';
       return (
-        <div key={key} style={style} className='is-full grid grid-cols-[1fr_max-content_1fr] snap-center'>
-          <div className={mx(getBgColor(getDate(start, index, 0, weekStartsOn)))} />
-          <div className='grid grid-cols-7' style={{ gridTemplateColumns: `repeat(7, ${size}px)` }}>
+        <div key={key} role='none' style={style} className='is-full grid grid-cols-[1fr_max-content_1fr] snap-center'>
+          <div role='none' className={mx(getBgColor(getDate(start, index, 0, weekStartsOn)))} />
+          <div role='none' className='grid grid-cols-7' style={{ gridTemplateColumns: `repeat(7, ${size}px)` }}>
             {Array.from({ length: 7 }).map((_, i) => {
               const date = getDate(start, index, i, weekStartsOn);
+              const num = getNumAppointments(date);
               const border = isSameDay(date, selected)
                 ? 'border-primary-500'
                 : isSameDay(date, today)
@@ -224,6 +236,7 @@ const CalendarGrid = ({ classNames, rows, onSelect }: CalendarGridProps) => {
               return (
                 <div
                   key={i}
+                  role='none'
                   className={mx('relative flex justify-center items-center cursor-pointer', getBgColor(date))}
                   onClick={() => handleDaySelect(date)}
                 >
@@ -232,7 +245,17 @@ const CalendarGrid = ({ classNames, rows, onSelect }: CalendarGridProps) => {
                     <span className='absolute top-0 text-xs text-description'>{format(date, 'MMM')}</span>
                   )}
                   {border && (
-                    <div className={mx('absolute top-0 left-0 is-full bs-full border-2 rounded-full', border)} />
+                    <div
+                      role='none'
+                      className={mx('absolute top-0 left-0 is-full bs-full border-2 rounded-full', border)}
+                    />
+                  )}
+                  {num > 0 && (
+                    <Icon
+                      classNames='absolute bottom-0'
+                      icon={num > 3 ? 'ph--dots-three--regular' : 'ph--dot--regular'}
+                      size={5}
+                    />
                   )}
                 </div>
               );
@@ -242,7 +265,7 @@ const CalendarGrid = ({ classNames, rows, onSelect }: CalendarGridProps) => {
         </div>
       );
     },
-    [handleDaySelect, selected, weekStartsOn],
+    [handleDaySelect, getNumAppointments, selected, weekStartsOn],
   );
 
   return (
@@ -257,6 +280,7 @@ const CalendarGrid = ({ classNames, rows, onSelect }: CalendarGridProps) => {
           ))}
         </div>
       </div>
+
       {/* Grid */}
       <div role='none' className='flex flex-col bs-full is-full justify-center overflow-hidden' ref={containerRef}>
         <List
@@ -287,8 +311,8 @@ CalendarGrid.displayName = 'CalendarGrid';
 export const Calendar = {
   Root: CalendarRoot,
   Viewport: CalendarViewport,
-  Header: CalendarHeader,
+  Toolbar: CalendarToolbar,
   Grid: CalendarGrid,
 };
 
-export type { CalendarController, CalendarRootProps, CalendarViewportProps, CalendarHeaderProps, CalendarGridProps };
+export type { CalendarController, CalendarRootProps, CalendarViewportProps, CalendarToolbarProps, CalendarGridProps };