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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dxos/react-ui-calendar",
-  "version": "0.8.4-main.bc674ce",
+  "version": "0.8.4-main.c85a9c8dae",
   "description": "A calendar component.",
   "homepage": "https://dxos.org",
   "bugs": "https://github.com/dxos/dxos/issues",
@@ -33,32 +33,31 @@
     "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/debug": "0.8.4-main.c85a9c8dae",
+    "@dxos/invariant": "0.8.4-main.c85a9c8dae",
+    "@dxos/log": "0.8.4-main.c85a9c8dae",
+    "@dxos/util": "0.8.4-main.c85a9c8dae",
+    "@dxos/async": "0.8.4-main.c85a9c8dae"
   },
   "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.19.16",
     "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.c85a9c8dae",
+    "@dxos/react-ui": "0.8.4-main.c85a9c8dae",
+    "@dxos/ui-theme": "0.8.4-main.c85a9c8dae",
+    "@dxos/storybook-utils": "0.8.4-main.c85a9c8dae"
   },
   "peerDependencies": {
-    "effect": "3.19.11",
+    "effect": "3.19.16",
     "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/ui-theme": "0.8.4-main.c85a9c8dae",
+    "@dxos/react-ui": "0.8.4-main.c85a9c8dae"
   },
   "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' })],
   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

@@ -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
 //
 
+const CALENDAR_TOOLBAR_NAME = 'CalendarHeader';
+
 type CalendarToolbarProps = ThemedClassName;
 
-const CalendarToolbar = ({ classNames }: CalendarToolbarProps) => {
+const CalendarToolbar = ({ classNames, ...props }: CalendarToolbarProps) => {
   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,8 +117,9 @@ const CalendarToolbar = ({ classNames }: CalendarToolbarProps) => {
 
   return (
     <div
+      {...props}
       role='none'
-      className={mx('shink-0 is-full grid grid-cols-3 items-center bg-barSurface', classNames)}
+      className={mx('shrink-0 w-full m-auto grid grid-cols-3 items-center bg-toolbar-surface', classNames)}
       style={{ width: defaultWidth }}
     >
       <div className='flex justify-start'>
@@ -152,7 +139,7 @@ const CalendarToolbar = ({ classNames }: CalendarToolbarProps) => {
   );
 };
 
-CalendarToolbar.displayName = 'CalendarHeader';
+CalendarToolbar.displayName = CALENDAR_TOOLBAR_NAME;
 
 //
 // Grid
@@ -160,13 +147,15 @@ CalendarToolbar.displayName = 'CalendarHeader';
 // 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(CalendarGrid.displayName);
+const CalendarGrid = ({ classNames, rows, onSelect, ...props }: 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);
@@ -219,11 +208,21 @@ const CalendarGrid = ({ classNames, rows, onSelect }: CalendarGridProps) => {
 
   const rowRenderer = useCallback<ListRowRenderer>(
     ({ key, index, style }) => {
-      const getBgColor = (date: Date) => date.getMonth() % 2 === 0 && 'bg-modalSurface';
+      const getBgColor = (date: Date) => date.getMonth() % 2 === 0 && 'bg-modal-surface';
       return (
-        <div key={key} role='none' style={style} className='is-full grid grid-cols-[1fr_max-content_1fr] snap-center'>
+        <div
+          key={key}
+          {...props}
+          role='none'
+          style={style}
+          className='w-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)` }}>
+          <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 num = getNumAppointments(date);
@@ -247,7 +246,7 @@ const CalendarGrid = ({ classNames, rows, onSelect }: CalendarGridProps) => {
                   {border && (
                     <div
                       role='none'
-                      className={mx('absolute top-0 left-0 is-full bs-full border-2 rounded-full', border)}
+                      className={mx('absolute top-0 left-0 w-full h-full border-2 rounded-full', border)}
                     />
                   )}
                   {num > 0 && (
@@ -269,10 +268,10 @@ const CalendarGrid = ({ classNames, rows, onSelect }: CalendarGridProps) => {
   );
 
   return (
-    <div role='none' className={mx('flex flex-col bs-full is-full justify-center overflow-hidden', classNames)}>
+    <div role='none' className={mx('flex flex-col h-full w-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 }}>
+      <div role='none' className='flex justify-center bg-group-surface'>
+        <div role='none' className='flex w-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}
@@ -282,12 +281,12 @@ const CalendarGrid = ({ classNames, rows, onSelect }: CalendarGridProps) => {
       </div>
 
       {/* Grid */}
-      <div role='none' className='flex flex-col bs-full is-full justify-center overflow-hidden' ref={containerRef}>
+      <div role='none' className='flex flex-col h-full w-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'
+          className='[&>div]:snap-y scrollbar-none outline-hidden'
           width={width}
           height={maxHeight ?? height}
           rowCount={maxRows}
@@ -302,7 +301,7 @@ const CalendarGrid = ({ classNames, rows, onSelect }: CalendarGridProps) => {
   );
 };
 
-CalendarGrid.displayName = 'CalendarGrid';
+CalendarGrid.displayName = CALENDAR_GRID_NAME;
 
 //
 // Calendar
@@ -310,9 +309,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 };