@dxos/react-ui-calendar 0.8.4-main.1068cf700f

package/package.json

@@ -0,0 +1,66 @@
+{
+  "name": "@dxos/react-ui-calendar",
+  "version": "0.8.4-main.1068cf700f",
+  "description": "A calendar component.",
+  "homepage": "https://dxos.org",
+  "bugs": "https://github.com/dxos/dxos/issues",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/dxos/dxos"
+  },
+  "license": "MIT",
+  "author": "DXOS.org",
+  "type": "module",
+  "exports": {
+    ".": {
+      "source": "./src/index.ts",
+      "types": "./dist/types/src/index.d.ts",
+      "browser": "./dist/lib/browser/index.mjs",
+      "node": "./dist/lib/node-esm/index.mjs"
+    }
+  },
+  "types": "dist/types/src/index.d.ts",
+  "typesVersions": {
+    "*": {}
+  },
+  "files": [
+    "dist",
+    "src"
+  ],
+  "dependencies": {
+    "@radix-ui/react-context": "1.1.1",
+    "date-fns": "^3.3.1",
+    "react-resize-detector": "^11.0.1",
+    "react-virtualized": "^9.22.6",
+    "react-window": "^2.2.3",
+    "@dxos/async": "0.8.4-main.1068cf700f",
+    "@dxos/debug": "0.8.4-main.1068cf700f",
+    "@dxos/invariant": "0.8.4-main.1068cf700f",
+    "@dxos/log": "0.8.4-main.1068cf700f",
+    "@dxos/util": "0.8.4-main.1068cf700f"
+  },
+  "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.16",
+    "react": "~19.2.3",
+    "react-dom": "~19.2.3",
+    "vite": "7.1.9",
+    "@dxos/react-ui": "0.8.4-main.1068cf700f",
+    "@dxos/random": "0.8.4-main.1068cf700f",
+    "@dxos/ui-theme": "0.8.4-main.1068cf700f",
+    "@dxos/storybook-utils": "0.8.4-main.1068cf700f"
+  },
+  "peerDependencies": {
+    "effect": "3.19.16",
+    "react": "~19.2.3",
+    "react-dom": "~19.2.3",
+    "@dxos/react-ui": "0.8.4-main.1068cf700f",
+    "@dxos/ui-theme": "0.8.4-main.1068cf700f"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}

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

@@ -0,0 +1,76 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { type Meta, type StoryObj } from '@storybook/react-vite';
+import React from 'react';
+
+import { withTheme } from '@dxos/react-ui/testing';
+
+import { translations } from '../../translations';
+
+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>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  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.Root>
+  ),
+};
+
+export const Column: Story = {
+  render: () => (
+    <div className='absolute inset-0 flex bs-full justify-center'>
+      <Calendar.Root>
+        <Calendar.Viewport>
+          <Calendar.Toolbar />
+          <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>
+  ),
+};

package/src/components/Calendar/Calendar.tsx

@@ -0,0 +1,324 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { createContext } from '@radix-ui/react-context';
+import { type Day, addDays, differenceInWeeks, format, startOfWeek } from 'date-fns';
+import React, {
+  type Dispatch,
+  type PropsWithChildren,
+  type SetStateAction,
+  forwardRef,
+  useCallback,
+  useEffect,
+  useImperativeHandle,
+  useMemo,
+  useRef,
+  useState,
+} from 'react';
+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 { translationKey } from '../../translations';
+
+import { getDate, isSameDay } from './util';
+
+const maxRows = 50 * 100;
+const start = new Date('1970-01-01');
+const size = 48;
+const defaultWidth = 7 * size;
+
+//
+// Context
+//
+
+type CalendarEvent = {
+  type: 'scroll';
+  date: Date;
+};
+
+type CalendarContextValue = {
+  weekStartsOn: Day;
+  event: Event<CalendarEvent>;
+  index: number | undefined;
+  setIndex: Dispatch<SetStateAction<number | undefined>>;
+  selected: Date | undefined;
+  setSelected: Dispatch<SetStateAction<Date | undefined>>;
+};
+
+const [CalendarContextProvider, useCalendarContext] = createContext<CalendarContextValue>('Calendar');
+
+//
+// Controller
+//
+
+type CalendarController = {
+  scrollTo: (date: Date) => void;
+};
+
+//
+// Root
+//
+
+type CalendarRootProps = PropsWithChildren<Partial<Pick<CalendarContextValue, 'weekStartsOn'>>>;
+
+const CalendarRoot = forwardRef<CalendarController, CalendarRootProps>(
+  ({ children, weekStartsOn = 1 }, forwardedRef) => {
+    const event = useMemo(() => new Event<CalendarEvent>(), []);
+    const [selected, setSelected] = useState<Date | undefined>();
+    const [index, setIndex] = useState<number | undefined>();
+
+    useImperativeHandle(
+      forwardedRef,
+      () => ({
+        scrollTo: (date: Date) => {
+          event.emit({ type: 'scroll', date });
+        },
+      }),
+      [event],
+    );
+
+    return (
+      <CalendarContextProvider
+        weekStartsOn={weekStartsOn}
+        event={event}
+        index={index}
+        setIndex={setIndex}
+        selected={selected}
+        setSelected={setSelected}
+      >
+        {children}
+      </CalendarContextProvider>
+    );
+  },
+);
+
+//
+// Viewport
+//
+
+const CALENDAR_VIEWPORT_NAME = 'CalendarContent';
+
+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 = CALENDAR_VIEWPORT_NAME;
+
+//
+// Header
+//
+
+const CALENDAR_TOOLBAR_NAME = 'CalendarHeader';
+
+type CalendarToolbarProps = ThemedClassName;
+
+const CalendarToolbar = ({ classNames }: CalendarToolbarProps) => {
+  const { t } = useTranslation(translationKey);
+  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(), []);
+
+  const handleToday = useCallback(() => {
+    event.emit({ type: 'scroll', date: today });
+  }, [event, start, today]);
+
+  return (
+    <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={5}
+          icon='ph--calendar--regular'
+          iconOnly
+          classNames='aspect-square'
+          label={t('today button')}
+          onClick={handleToday}
+        />
+      </div>
+      <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>
+  );
+};
+
+CalendarToolbar.displayName = CALENDAR_TOOLBAR_NAME;
+
+//
+// Grid
+// TODO(burdon): Key nav.
+// TODO(burdon): Drag range.
+//
+
+const CALENDAR_GRID_NAME = 'CalendarGrid';
+
+type CalendarGridProps = ThemedClassName<{
+  rows?: number;
+  onSelect?: (event: { date: Date }) => void;
+}>;
+
+const CalendarGrid = ({ classNames, rows, onSelect }: CalendarGridProps) => {
+  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(), []);
+
+  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],
+  );
+
+  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>
+              );
+            })}
+          </div>
+          <div className={mx(getBgColor(getDate(start, index, 6, weekStartsOn)))} />
+        </div>
+      );
+    },
+    [handleDaySelect, getNumAppointments, 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 }}>
+          {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)}
+        />
+      </div>
+    </div>
+  );
+};
+
+CalendarGrid.displayName = CALENDAR_GRID_NAME;
+
+//
+// Calendar
+//
+
+export const Calendar = {
+  Root: CalendarRoot,
+  Viewport: CalendarViewport,
+  Toolbar: CalendarToolbar,
+  Grid: CalendarGrid,
+};
+
+export type { CalendarController, CalendarRootProps, CalendarViewportProps, CalendarToolbarProps, CalendarGridProps };

package/src/components/Calendar/index.ts

@@ -0,0 +1,5 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+export * from './Calendar';

package/src/components/Calendar/util.ts

@@ -0,0 +1,22 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { type Day } from 'date-fns';
+
+export const getDate = (start: Date, weekNumber: number, dayOfWeek: number, weekStartsOn: Day): Date => {
+  const result = new Date(start);
+  const startDayOfWeek = start.getDay(); // 0 = Sunday, 1 = Monday, etc.
+  const adjustedStartDay = (startDayOfWeek === 0 ? 7 : startDayOfWeek) - weekStartsOn; // Adjust for weekStartsOn.
+  result.setDate(start.getDate() - adjustedStartDay + weekNumber * 7 + dayOfWeek);
+  return result;
+};
+
+export const isSameDay = (date1: Date, date2: Date | undefined): boolean => {
+  return (
+    !!date2 &&
+    date1.getFullYear() === date2.getFullYear() &&
+    date1.getMonth() === date2.getMonth() &&
+    date1.getDate() === date2.getDate()
+  );
+};

package/src/components/index.ts

@@ -0,0 +1,5 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+export * from './Calendar';

package/src/index.ts

@@ -0,0 +1,5 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+export * from './components';

package/src/translations.ts

@@ -0,0 +1,17 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import { type Resource } from '@dxos/react-ui';
+
+export const translationKey = '@dxos/react-ui-calendar';
+
+export const translations = [
+  {
+    'en-US': {
+      [translationKey]: {
+        'today button': 'Today',
+      },
+    },
+  },
+] as const satisfies Resource[];