@dxos/react-ui-calendar 0.8.4-main.bc674ce → 0.8.4-main.bcb3aa67d6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dxos/react-ui-calendar",
-  "version": "0.8.4-main.bc674ce",
+  "version": "0.8.4-main.bcb3aa67d6",
   "description": "A calendar component.",
   "homepage": "https://dxos.org",
   "bugs": "https://github.com/dxos/dxos/issues",
@@ -29,36 +29,35 @@
   ],
   "dependencies": {
     "@radix-ui/react-context": "1.1.1",
-    "date-fns": "^3.3.1",
+    "date-fns": "^3.6.0",
     "react-resize-detector": "^11.0.1",
     "react-virtualized": "^9.22.6",
     "react-window": "^2.2.3",
-    "@dxos/debug": "0.8.4-main.bc674ce",
-    "@dxos/async": "0.8.4-main.bc674ce",
-    "@dxos/invariant": "0.8.4-main.bc674ce",
-    "@dxos/log": "0.8.4-main.bc674ce",
-    "@dxos/util": "0.8.4-main.bc674ce"
+    "@dxos/async": "0.8.4-main.bcb3aa67d6",
+    "@dxos/invariant": "0.8.4-main.bcb3aa67d6",
+    "@dxos/util": "0.8.4-main.bcb3aa67d6",
+    "@dxos/log": "0.8.4-main.bcb3aa67d6",
+    "@dxos/debug": "0.8.4-main.bcb3aa67d6"
   },
   "devDependencies": {
     "@types/react": "~19.2.7",
     "@types/react-dom": "~19.2.3",
     "@types/react-virtualized": "^9.22.3",
-    "@types/react-window": "^2.0.0",
-    "effect": "3.19.11",
+    "effect": "3.20.0",
     "react": "~19.2.3",
     "react-dom": "~19.2.3",
-    "vite": "7.1.9",
-    "@dxos/random": "0.8.4-main.bc674ce",
-    "@dxos/react-ui": "0.8.4-main.bc674ce",
-    "@dxos/storybook-utils": "0.8.4-main.bc674ce",
-    "@dxos/ui-theme": "0.8.4-main.bc674ce"
+    "vite": "^7.1.11",
+    "@dxos/random": "0.8.4-main.bcb3aa67d6",
+    "@dxos/react-ui": "0.8.4-main.bcb3aa67d6",
+    "@dxos/ui-theme": "0.8.4-main.bcb3aa67d6",
+    "@dxos/storybook-utils": "0.8.4-main.bcb3aa67d6"
   },
   "peerDependencies": {
-    "effect": "3.19.11",
+    "effect": "3.20.0",
     "react": "~19.2.3",
     "react-dom": "~19.2.3",
-    "@dxos/react-ui": "0.8.4-main.bc674ce",
-    "@dxos/ui-theme": "0.8.4-main.bc674ce"
+    "@dxos/react-ui": "0.8.4-main.bcb3aa67d6",
+    "@dxos/ui-theme": "0.8.4-main.bcb3aa67d6"
   },
   "publishConfig": {
     "access": "public"

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

@@ -5,7 +5,8 @@
 import { type Meta, type StoryObj } from '@storybook/react-vite';
 import React from 'react';
 
-import { withTheme } from '@dxos/react-ui/testing';
+import { Panel } from '@dxos/react-ui';
+import { withLayout, withTheme } from '@dxos/react-ui/testing';
 
 import { translations } from '../../translations';
 
@@ -14,9 +15,7 @@ import { Calendar } from './Calendar';
 const meta = {
   title: 'ui/react-ui-calendar/Calendar',
   component: Calendar.Grid,
-  decorators: [withTheme],
   parameters: {
-    layout: 'centered',
     translations,
   },
 } satisfies Meta<typeof Calendar.Grid>;
@@ -26,51 +25,27 @@ export default meta;
 type Story = StoryObj<typeof meta>;
 
 export const Default: Story = {
+  decorators: [withTheme(), withLayout({ layout: 'centered' })],
   render: () => (
     <Calendar.Root>
-      <Calendar.Viewport>
-        <Calendar.Toolbar />
-        <Calendar.Grid rows={6} />
-      </Calendar.Viewport>
-    </Calendar.Root>
-  ),
-};
-
-export const Border: Story = {
-  render: () => (
-    <Calendar.Root>
-      <Calendar.Viewport classNames='bg-modalSurface border border-separator rounded'>
-        <Calendar.Toolbar />
-        <Calendar.Grid rows={6} />
-      </Calendar.Viewport>
+      <Calendar.Toolbar />
+      <Calendar.Grid rows={6} />
     </Calendar.Root>
   ),
 };
 
 export const Column: Story = {
+  decorators: [withTheme(), withLayout({ layout: 'column', classNames: 'w-auto' })],
   render: () => (
-    <div className='absolute inset-0 flex bs-full justify-center'>
-      <Calendar.Root>
-        <Calendar.Viewport>
+    <Calendar.Root>
+      <Panel.Root>
+        <Panel.Toolbar asChild>
           <Calendar.Toolbar />
+        </Panel.Toolbar>
+        <Panel.Content asChild>
           <Calendar.Grid />
-        </Calendar.Viewport>
-      </Calendar.Root>
-    </div>
-  ),
-};
-
-export const Mobile: Story = {
-  render: () => (
-    <div className='absolute inset-0 flex bs-full justify-center'>
-      <div className='flex bs-full is-[400px] justify-center'>
-        <Calendar.Root>
-          <Calendar.Viewport classNames='is-full'>
-            <Calendar.Toolbar />
-            <Calendar.Grid />
-          </Calendar.Viewport>
-        </Calendar.Root>
-      </div>
-    </div>
+        </Panel.Content>
+      </Panel.Root>
+    </Calendar.Root>
   ),
 };

package/src/components/Calendar/Calendar.tsx

@@ -3,7 +3,7 @@
 //
 
 import { createContext } from '@radix-ui/react-context';
-import { type Day, addDays, differenceInWeeks, format, startOfWeek } from 'date-fns';
+import { type Day, addDays, differenceInWeeks, format, startOfDay, startOfWeek } from 'date-fns';
 import React, {
   type Dispatch,
   type PropsWithChildren,
@@ -20,8 +20,8 @@ import { useResizeDetector } from 'react-resize-detector';
 import { List, type ListProps, type ListRowRenderer } from 'react-virtualized';
 
 import { Event } from '@dxos/async';
-import { Icon, IconButton, type ThemedClassName, useTranslation } from '@dxos/react-ui';
-import { mx } from '@dxos/ui-theme';
+import { IconButton, useTranslation } from '@dxos/react-ui';
+import { composable, composableProps, mx } from '@dxos/ui-theme';
 
 import { translationKey } from '../../translations';
 
@@ -97,31 +97,17 @@ const CalendarRoot = forwardRef<CalendarController, CalendarRootProps>(
   },
 );
 
-//
-// Viewport
-//
-
-type CalendarViewportProps = PropsWithChildren<ThemedClassName>;
-
-const CalendarViewport = ({ children, classNames }: CalendarViewportProps) => {
-  return (
-    <div role='none' className={mx('flex flex-col items-center overflow-hidden bg-inputSurface', classNames)}>
-      {children}
-    </div>
-  );
-};
-
-CalendarViewport.displayName = 'CalendarContent';
-
 //
 // Header
 //
 
-type CalendarToolbarProps = ThemedClassName;
+const CALENDAR_TOOLBAR_NAME = 'CalendarHeader';
+
+type CalendarToolbarProps = {};
 
-const CalendarToolbar = ({ classNames }: CalendarToolbarProps) => {
+const CalendarToolbar = composable<HTMLDivElement, CalendarToolbarProps>(({ classNames, ...props }, forwardedRef) => {
   const { t } = useTranslation(translationKey);
-  const { weekStartsOn, event, index, selected } = useCalendarContext(CalendarToolbar.displayName);
+  const { weekStartsOn, event, index, selected } = useCalendarContext(CALENDAR_TOOLBAR_NAME);
   const top = useMemo(() => getDate(start, index ?? 0, 6, weekStartsOn), [index, weekStartsOn]);
   const today = useMemo(() => new Date(), []);
 
@@ -131,18 +117,20 @@ const CalendarToolbar = ({ classNames }: CalendarToolbarProps) => {
 
   return (
     <div
-      role='none'
-      className={mx('shink-0 is-full grid grid-cols-3 items-center bg-barSurface', classNames)}
+      {...composableProps(props, {
+        role: 'none',
+        classNames: ['shrink-0 grid! grid-cols-3 items-center bg-toolbar-surface', classNames],
+      })}
+      ref={forwardedRef}
       style={{ width: defaultWidth }}
     >
       <div className='flex justify-start'>
         <IconButton
           variant='ghost'
-          size={5}
           icon='ph--calendar--regular'
           iconOnly
           classNames='aspect-square'
-          label={t('today button')}
+          label={t('today.button')}
           onClick={handleToday}
         />
       </div>
@@ -150,9 +138,9 @@ const CalendarToolbar = ({ classNames }: CalendarToolbarProps) => {
       <div className='flex justify-end p-2 text-description'>{(selected ?? top).getFullYear()}</div>
     </div>
   );
-};
+});
 
-CalendarToolbar.displayName = 'CalendarHeader';
+CalendarToolbar.displayName = CALENDAR_TOOLBAR_NAME;
 
 //
 // Grid
@@ -160,149 +148,149 @@ CalendarToolbar.displayName = 'CalendarHeader';
 // TODO(burdon): Drag range.
 //
 
-type CalendarGridProps = ThemedClassName<{
+const CALENDAR_GRID_NAME = 'CalendarGrid';
+
+type CalendarGridProps = {
   rows?: number;
+  /** Dates to highlight on the grid. Each date that appears in this array receives a border indicator. */
+  dates?: Date[];
   onSelect?: (event: { date: Date }) => void;
-}>;
-
-const CalendarGrid = ({ classNames, rows, onSelect }: CalendarGridProps) => {
-  const { weekStartsOn, event, setIndex, selected, setSelected } = useCalendarContext(CalendarGrid.displayName);
-  const { ref: containerRef, width = 0, height = 0 } = useResizeDetector();
-  const maxHeight = rows ? rows * size : undefined;
-  const listRef = useRef<List>(null);
-  const today = useMemo(() => new Date(), []);
+};
 
-  const [initialized, setInitialized] = useState(false);
-  useEffect(() => {
-    const index = differenceInWeeks(today, start);
-    listRef.current?.scrollToRow(index);
-  }, [initialized, start, today]);
-
-  useEffect(() => {
-    return event.on((event) => {
-      switch (event.type) {
-        case 'scroll': {
-          const index = differenceInWeeks(event.date, start);
-          listRef.current?.scrollToRow(index);
-          break;
+const CalendarGrid = composable<HTMLDivElement, CalendarGridProps>(
+  ({ classNames, rows, dates = [], onSelect, ...props }, forwardedRef) => {
+    const { weekStartsOn, event, setIndex, selected, setSelected } = useCalendarContext(CALENDAR_GRID_NAME);
+    const { ref: containerRef, width = 0, height = 0 } = useResizeDetector();
+    const maxHeight = rows ? rows * size : undefined;
+    const listRef = useRef<List>(null);
+    const today = useMemo(() => new Date(), []);
+
+    // Build a set of ISO date strings (YYYY-MM-DD) for O(1) per-cell lookup.
+    const dateSet = useMemo(() => new Set(dates.map((date) => startOfDay(date).toISOString())), [dates]);
+
+    const hasDate = useCallback((date: Date) => dateSet.has(startOfDay(date).toISOString()), [dateSet]);
+
+    const [initialized, setInitialized] = useState(false);
+    useEffect(() => {
+      const index = differenceInWeeks(today, start);
+      listRef.current?.scrollToRow(index);
+    }, [initialized, start, today]);
+
+    useEffect(() => {
+      return event.on((event) => {
+        switch (event.type) {
+          case 'scroll': {
+            const index = differenceInWeeks(event.date, start);
+            listRef.current?.scrollToRow(index);
+            break;
+          }
         }
-      }
-    });
-  }, [event]);
-
-  const days = useMemo(() => {
-    const weekStart = startOfWeek(new Date(), { weekStartsOn });
-    return Array.from({ length: 7 }, (_, i) => {
-      const day = addDays(weekStart, i);
-      return format(day, 'EEE'); // Short day name (Mon, Tue, etc.)
-    });
-  }, []);
-
-  // 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));
-      onSelect?.({ date });
-    },
-    [onSelect],
-  );
+      });
+    }, [event]);
+
+    const days = useMemo(() => {
+      const weekStart = startOfWeek(new Date(), { weekStartsOn });
+      return Array.from({ length: 7 }, (_, i) => {
+        const day = addDays(weekStart, i);
+        return format(day, 'EEE'); // Short day name (Mon, Tue, etc.)
+      });
+    }, []);
+
+    // TODO(burdon): Get info by range.
+
+    const handleDaySelect = useCallback(
+      (date: Date) => {
+        setSelected((current) => (isSameDay(date, current) ? undefined : date));
+        onSelect?.({ date });
+      },
+      [onSelect],
+    );
 
-  const handleScroll = useCallback<NonNullable<ListProps['onScroll']>>((info) => {
-    setIndex(Math.round(info.scrollTop / size));
-  }, []);
-
-  const rowRenderer = useCallback<ListRowRenderer>(
-    ({ key, index, style }) => {
-      const getBgColor = (date: Date) => date.getMonth() % 2 === 0 && 'bg-modalSurface';
-      return (
-        <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)
-                  ? 'border-amber-500'
-                  : undefined;
-
-              return (
-                <div
-                  key={i}
-                  role='none'
-                  className={mx('relative flex justify-center items-center cursor-pointer', getBgColor(date))}
-                  onClick={() => handleDaySelect(date)}
-                >
-                  <span className='text-description'>{date.getDate()}</span>
-                  {!border && date.getDate() === 1 && (
-                    <span className='absolute top-0 text-xs text-description'>{format(date, 'MMM')}</span>
-                  )}
-                  {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>
-              );
-            })}
+    const handleScroll = useCallback<NonNullable<ListProps['onScroll']>>((info) => {
+      setIndex(Math.round(info.scrollTop / size));
+    }, []);
+
+    const rowRenderer = useCallback<ListRowRenderer>(
+      ({ key, index, style }) => {
+        const getBgColor = (date: Date) => date.getMonth() % 2 === 0 && 'bg-modal-surface';
+        return (
+          <div key={key} role='none' style={style} className='grid'>
+            <div
+              role='none'
+              className='grid grid-cols-7 bg-input-surface'
+              style={{ gridTemplateColumns: `repeat(7, ${size}px)` }}
+            >
+              {Array.from({ length: 7 }).map((_, i) => {
+                const date = getDate(start, index, i, weekStartsOn);
+                const border = isSameDay(date, selected)
+                  ? 'border-primary-500'
+                  : isSameDay(date, today)
+                    ? 'border-amber-500'
+                    : hasDate(date)
+                      ? 'border-neutral-700 border-dashed'
+                      : undefined;
+
+                return (
+                  <div
+                    key={i}
+                    role='none'
+                    className={mx('relative flex justify-center items-center cursor-pointer', getBgColor(date))}
+                    onClick={() => handleDaySelect(date)}
+                  >
+                    <span className='text-description'>{date.getDate()}</span>
+                    {!border && date.getDate() === 1 && (
+                      <span className='absolute top-0 text-xs text-description'>{format(date, 'MMM')}</span>
+                    )}
+                    {border && <div role='none' className={mx('absolute inset-1 border-2 rounded-full', border)} />}
+                  </div>
+                );
+              })}
+            </div>
           </div>
-          <div className={mx(getBgColor(getDate(start, index, 6, weekStartsOn)))} />
-        </div>
-      );
-    },
-    [handleDaySelect, getNumAppointments, selected, weekStartsOn],
-  );
+        );
+      },
+      [handleDaySelect, hasDate, selected, weekStartsOn],
+    );
 
-  return (
-    <div role='none' className={mx('flex flex-col bs-full is-full justify-center overflow-hidden', classNames)}>
-      {/* Day labels */}
-      <div role='none' className='flex justify-center bg-groupSurface'>
-        <div role='none' className='flex is-full grid grid-cols-7' style={{ width: defaultWidth }}>
+    return (
+      <div
+        {...composableProps(props, {
+          role: 'none',
+          classNames: ['flex flex-col h-full w-full justify-center overflow-hidden', classNames],
+        })}
+        ref={forwardedRef}
+      >
+        {/* Day of week labels */}
+        <div role='none' className='grid w-full grid-cols-7' style={{ width: defaultWidth }}>
           {days.map((date, i) => (
             <div key={i} role='none' className='flex justify-center p-2 text-sm font-thin'>
               {date}
             </div>
           ))}
         </div>
-      </div>
 
-      {/* Grid */}
-      <div role='none' className='flex flex-col bs-full is-full justify-center overflow-hidden' ref={containerRef}>
-        <List
-          ref={listRef}
-          role='none'
-          // TODO(burdon): Snap isn't working.
-          className='[&>div]:snap-y scrollbar-none outline-none'
-          width={width}
-          height={maxHeight ?? height}
-          rowCount={maxRows}
-          rowHeight={size}
-          rowRenderer={rowRenderer}
-          scrollToAlignment='start'
-          onScroll={handleScroll}
-          onRowsRendered={() => setInitialized(true)}
-        />
+        {/* Grid */}
+        <div role='none' className='flex flex-col h-full w-full justify-center overflow-hidden' ref={containerRef}>
+          <List
+            ref={listRef}
+            role='none'
+            className='scrollbar-none outline-hidden'
+            width={width}
+            height={maxHeight ?? height}
+            rowCount={maxRows}
+            rowHeight={size}
+            rowRenderer={rowRenderer}
+            scrollToAlignment='start'
+            onScroll={handleScroll}
+            onRowsRendered={() => setInitialized(true)}
+          />
+        </div>
       </div>
-    </div>
-  );
-};
+    );
+  },
+);
 
-CalendarGrid.displayName = 'CalendarGrid';
+CalendarGrid.displayName = CALENDAR_GRID_NAME;
 
 //
 // Calendar
@@ -310,9 +298,8 @@ CalendarGrid.displayName = 'CalendarGrid';
 
 export const Calendar = {
   Root: CalendarRoot,
-  Viewport: CalendarViewport,
   Toolbar: CalendarToolbar,
   Grid: CalendarGrid,
 };
 
-export type { CalendarController, CalendarRootProps, CalendarViewportProps, CalendarToolbarProps, CalendarGridProps };
+export type { CalendarController, CalendarRootProps, CalendarToolbarProps, CalendarGridProps };

package/src/translations.ts

@@ -10,7 +10,7 @@ export const translations = [
   {
     'en-US': {
       [translationKey]: {
-        'today button': 'Today',
+        'today.button': 'Today',
       },
     },
   },