@dxos/react-ui-calendar 0.8.4-staging.ac66bdf99f → 0.9.1-main.c7dcc2e112

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dxos/react-ui-calendar",
-  "version": "0.8.4-staging.ac66bdf99f",
+  "version": "0.9.1-main.c7dcc2e112",
   "description": "A calendar component.",
   "homepage": "https://dxos.org",
   "bugs": "https://github.com/dxos/dxos/issues",
@@ -8,21 +8,27 @@
     "type": "git",
     "url": "https://github.com/dxos/dxos"
   },
-  "license": "MIT",
+  "license": "FSL-1.1-Apache-2.0",
   "author": "DXOS.org",
   "type": "module",
+  "imports": {
+    "#translations": "./src/translations.ts"
+  },
   "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"
+    },
+    "./translations": {
+      "source": "./src/translations.ts",
+      "types": "./dist/types/src/translations.d.ts",
+      "browser": "./dist/lib/browser/translations.mjs",
+      "node": "./dist/lib/node-esm/translations.mjs"
     }
   },
   "types": "dist/types/src/index.d.ts",
-  "typesVersions": {
-    "*": {}
-  },
   "files": [
     "dist",
     "src"
@@ -33,31 +39,31 @@
     "react-resize-detector": "^11.0.1",
     "react-virtualized": "^9.22.6",
     "react-window": "^2.2.3",
-    "@dxos/async": "0.8.4-staging.ac66bdf99f",
-    "@dxos/log": "0.8.4-staging.ac66bdf99f",
-    "@dxos/invariant": "0.8.4-staging.ac66bdf99f",
-    "@dxos/util": "0.8.4-staging.ac66bdf99f",
-    "@dxos/debug": "0.8.4-staging.ac66bdf99f"
+    "@dxos/async": "0.9.1-main.c7dcc2e112",
+    "@dxos/invariant": "0.9.1-main.c7dcc2e112",
+    "@dxos/log": "0.9.1-main.c7dcc2e112",
+    "@dxos/debug": "0.9.1-main.c7dcc2e112",
+    "@dxos/util": "0.9.1-main.c7dcc2e112"
   },
   "devDependencies": {
     "@types/react": "~19.2.7",
     "@types/react-dom": "~19.2.3",
     "@types/react-virtualized": "^9.22.3",
-    "effect": "3.20.0",
+    "effect": "3.21.3",
     "react": "~19.2.3",
     "react-dom": "~19.2.3",
-    "vite": "^7.1.11",
-    "@dxos/random": "0.8.4-staging.ac66bdf99f",
-    "@dxos/react-ui": "0.8.4-staging.ac66bdf99f",
-    "@dxos/storybook-utils": "0.8.4-staging.ac66bdf99f",
-    "@dxos/ui-theme": "0.8.4-staging.ac66bdf99f"
+    "vite": "^8.0.16",
+    "@dxos/random": "0.9.1-main.c7dcc2e112",
+    "@dxos/react-ui": "0.9.1-main.c7dcc2e112",
+    "@dxos/storybook-utils": "0.9.1-main.c7dcc2e112",
+    "@dxos/ui-theme": "0.9.1-main.c7dcc2e112"
   },
   "peerDependencies": {
-    "effect": "3.20.0",
+    "effect": "3.21.3",
     "react": "~19.2.3",
     "react-dom": "~19.2.3",
-    "@dxos/react-ui": "0.8.4-staging.ac66bdf99f",
-    "@dxos/ui-theme": "0.8.4-staging.ac66bdf99f"
+    "@dxos/react-ui": "0.9.1-main.c7dcc2e112",
+    "@dxos/ui-theme": "0.9.1-main.c7dcc2e112"
   },
   "publishConfig": {
     "access": "public"

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

@@ -3,13 +3,15 @@
 //
 
 import { type Meta, type StoryObj } from '@storybook/react-vite';
-import React from 'react';
+import { addDays, addMinutes, format, startOfDay, startOfWeek } from 'date-fns';
+import React, { useMemo, useRef, useState } from 'react';
 
 import { Panel } from '@dxos/react-ui';
 import { withLayout, withTheme } from '@dxos/react-ui/testing';
 
-import { translations } from '../../translations';
-import { Calendar } from './Calendar';
+import { translations } from '#translations';
+
+import { Calendar, type CalendarEvent, type Range as DateRange } from './Calendar';
 
 const meta = {
   title: 'ui/react-ui-calendar/Calendar',
@@ -33,6 +35,24 @@ export const Default: Story = {
   ),
 };
 
+export const Range: Story = {
+  decorators: [withTheme(), withLayout({ layout: 'centered' })],
+  render: () => {
+    const [range, setRange] = useState<DateRange | undefined>();
+    return (
+      <div className='flex flex-col gap-2'>
+        <Calendar.Root>
+          <Calendar.Toolbar />
+          <Calendar.Grid rows={6} onSelectRange={({ range }) => setRange(range)} />
+        </Calendar.Root>
+        <div className='text-sm text-description text-center'>
+          {range ? `${format(range.from, 'PP')} → ${format(range.to, 'PP')}` : 'Drag across days to select a range.'}
+        </div>
+      </div>
+    );
+  },
+};
+
 export const Column: Story = {
   decorators: [withTheme(), withLayout({ layout: 'column', classNames: 'w-auto' })],
   render: () => (
@@ -48,3 +68,43 @@ export const Column: Story = {
     </Calendar.Root>
   ),
 };
+
+export const Week: StoryObj<typeof Calendar.Week> = {
+  decorators: [withTheme(), withLayout({ layout: 'column', classNames: 'w-auto' })],
+  render: () => {
+    const idRef = useRef(100);
+    const initial = useMemo<CalendarEvent[]>(() => {
+      const weekStart = startOfWeek(new Date(), { weekStartsOn: 1 });
+      const at = (dayOffset: number, hour: number, minute = 0) =>
+        addMinutes(startOfDay(addDays(weekStart, dayOffset)), hour * 60 + minute);
+      return [
+        { id: '1', title: 'Standup', start: at(1, 9, 0), end: at(1, 9, 30) },
+        { id: '2', title: 'Design review', start: at(1, 9, 15), end: at(1, 10, 30) },
+        { id: '3', title: 'Lunch', start: at(2, 12, 0), end: at(2, 13, 0) },
+        { id: '4', title: '1:1', start: at(3, 14, 0), end: at(3, 15, 0) },
+        { id: '5', title: 'Focus', start: at(3, 14, 30), end: at(3, 16, 0) },
+        { id: '6', title: 'Planning', start: at(4, 10, 0), end: at(4, 11, 30) },
+      ];
+    }, []);
+    const [events, setEvents] = useState<CalendarEvent[]>(initial);
+
+    return (
+      <Calendar.Root>
+        <Panel.Root>
+          <Panel.Toolbar asChild>
+            <Calendar.Toolbar />
+          </Panel.Toolbar>
+          <Calendar.Week
+            events={events}
+            onEventCreate={({ start, end }) =>
+              setEvents((current) => [...current, { id: `${idRef.current++}`, title: 'New event', start, end }])
+            }
+            onEventUpdate={({ id, start, end }) =>
+              setEvents((current) => current.map((event) => (event.id === id ? { ...event, start, end } : event)))
+            }
+          />
+        </Panel.Root>
+      </Calendar.Root>
+    );
+  },
+};