@dxos/react-ui-grid 0.8.4-main.406dc2a → 0.8.4-main.548089c

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dxos/react-ui-grid",
-  "version": "0.8.4-main.406dc2a",
+  "version": "0.8.4-main.548089c",
   "description": "React component which manages a `dx-grid` Lit web component.",
   "homepage": "https://dxos.org",
   "bugs": "https://github.com/dxos/dxos/issues",
@@ -32,27 +32,27 @@
     "@radix-ui/react-context": "1.1.1",
     "@radix-ui/react-popper": "1.2.2",
     "@radix-ui/react-use-controllable-state": "1.1.0",
-    "@dxos/lit-grid": "0.8.4-main.406dc2a",
-    "@dxos/react-ui-editor": "0.8.4-main.406dc2a",
-    "@dxos/util": "0.8.4-main.406dc2a"
+    "@dxos/lit-grid": "0.8.4-main.548089c",
+    "@dxos/react-ui-editor": "0.8.4-main.548089c",
+    "@dxos/util": "0.8.4-main.548089c"
   },
   "devDependencies": {
     "@types/react": "~19.2.2",
-    "@types/react-dom": "~19.2.1",
+    "@types/react-dom": "~19.2.2",
     "react": "~19.2.0",
     "react-dom": "~19.2.0",
     "vite": "7.1.9",
-    "@dxos/random": "0.8.4-main.406dc2a",
-    "@dxos/react-ui": "0.8.4-main.406dc2a",
-    "@dxos/react-ui-searchlist": "0.8.4-main.406dc2a",
-    "@dxos/react-ui-theme": "0.8.4-main.406dc2a",
-    "@dxos/storybook-utils": "0.8.4-main.406dc2a"
+    "@dxos/react-ui": "0.8.4-main.548089c",
+    "@dxos/random": "0.8.4-main.548089c",
+    "@dxos/react-ui-searchlist": "0.8.4-main.548089c",
+    "@dxos/react-ui-theme": "0.8.4-main.548089c",
+    "@dxos/storybook-utils": "0.8.4-main.548089c"
   },
   "peerDependencies": {
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
-    "@dxos/react-ui": "0.8.4-main.406dc2a",
-    "@dxos/react-ui-theme": "0.8.4-main.406dc2a"
+    "@dxos/react-ui": "0.8.4-main.548089c",
+    "@dxos/react-ui-theme": "0.8.4-main.548089c"
   },
   "publishConfig": {
     "access": "public"

package/src/Grid/Grid.stories.tsx

@@ -6,9 +6,11 @@ import { type Meta, type StoryObj } from '@storybook/react-vite';
 import React, { type MouseEvent, type MutableRefObject, useCallback, useRef, useState } from 'react';
 
 import { defaultRowSize } from '@dxos/lit-grid';
+import { type DxGridPlaneCells } from '@dxos/lit-grid';
 import { faker } from '@dxos/random';
 import { DropdownMenu } from '@dxos/react-ui';
-import { withTheme } from '@dxos/react-ui/testing';
+import { withLayout, withTheme } from '@dxos/react-ui/testing';
+import { toPlaneCellIndex } from '@dxos/react-ui-grid';
 import { Combobox, type ComboboxRootProps } from '@dxos/react-ui-searchlist';
 
 import { Grid, type GridContentProps, type GridEditing, type GridRootProps } from './Grid';
@@ -62,7 +64,7 @@ const GridStory = ({ initialCells, ...props }: GridStoryProps) => {
   }, []);
 
   return (
-    <div role='none' className='fixed inset-0 grid'>
+    <div role='none' className='contents'>
       <Grid.Root id='story' editing={editing} onEditingChange={handleEditingChange}>
         {/* TODO(burdon): Why is this property not just "cells" or "values" */}
         <Grid.Content {...props} initialCells={cells} onClick={handleClick} />
@@ -102,7 +104,7 @@ const GridStory = ({ initialCells, ...props }: GridStoryProps) => {
 const meta = {
   title: 'ui/react-ui-grid/Grid',
   component: GridStory,
-  decorators: [withTheme],
+  decorators: [withTheme, withLayout({ container: 'column' })],
   parameters: {
     layout: 'fullscreen',
   },
@@ -112,6 +114,8 @@ export default meta;
 
 type Story = StoryObj<typeof meta>;
 
+export const Default: Story = {};
+
 export const Basic: Story = {
   args: {
     id: 'story',
@@ -158,26 +162,47 @@ export const Basic: Story = {
   },
 };
 
-// TODO(burdon): How to make single-column?
-export const SingleColumn: Story = {
+const cellSize = 40;
+
+// TODO(burdon): Calendar.
+export const Calendar: Story = {
   args: {
     id: 'story',
-    limitColumns: 1,
+    limitColumns: 7,
     columnDefault: {
       grid: {
-        size: 180,
+        size: cellSize,
+        resizeable: false,
       },
     },
     rowDefault: {
       grid: {
-        size: defaultRowSize,
+        size: cellSize,
         resizeable: false,
       },
     },
-    columns: {
-      grid: {
-        0: { size: 200 },
-      },
+    getCells: (range, plane) => {
+      const cells: DxGridPlaneCells = {};
+      if (plane === 'grid') {
+        for (let col = range.start.col; col <= range.end.col; col++) {
+          for (let row = range.start.row; row <= range.end.row; row++) {
+            // TODO(burdon): Formatting changes when cell is selected.
+            cells[toPlaneCellIndex({ col, row })] = {
+              readonly: true,
+              accessoryHtml: '<div class="flex bs-full is-full justify-center items-center overflow-hidden">0</div>',
+              className: '',
+            };
+          }
+        }
+      }
+      return cells;
     },
   },
+  render: (args) => (
+    <div className='bs-full flex justify-center'>
+      <div className='bs-full is-[288px] border-x border-separator'>
+        <GridStory {...args} />
+      </div>
+    </div>
+  ),
 };