@dxos/plugin-sheet 0.6.10 → 0.6.11-staging.32b42e4

package/src/components/Sheet/Sheet.stories.tsx

@@ -11,15 +11,15 @@ import { Client } from '@dxos/client';
 import { type EchoReactiveObject } from '@dxos/echo-schema';
 import { log } from '@dxos/log';
 import { getSpace, type Space } from '@dxos/react-client/echo';
-import { Button, Tooltip } from '@dxos/react-ui';
+import { Button } from '@dxos/react-ui';
 import { mx } from '@dxos/react-ui-theme';
-import { withTheme, withFullscreen } from '@dxos/storybook-utils';
+import { withTheme, withLayout } from '@dxos/storybook-utils';
 
 import { Sheet } from './Sheet';
 import { type SizeMap } from './grid';
 import { useSheetContext } from './sheet-context';
-import { SheetModel } from '../../model';
-import { ValueTypeEnum, type CellValue, createSheet, SheetType } from '../../types';
+import { createTestSheet, testSheetName } from '../../testing';
+import { ValueTypeEnum, SheetType } from '../../types';
 import { type ComputeGraph, createComputeGraph } from '../ComputeGraph';
 // TODO(wittjosiah): Refactor. This is not exported from ./components due to depending on ECHO.
 import { ComputeGraphContext, ComputeGraphContextProvider, useComputeGraph } from '../ComputeGraph/graph-context';
@@ -99,8 +99,6 @@ const SheetWithToolbar = ({ debug, space }: { debug?: boolean; space: Space }) =
   );
 };
 
-const testSheetName = 'test';
-
 const withGraphDecorator: Decorator = (Story) => {
   const [graphs, setGraphs] = useState<Record<string, ComputeGraph>>({});
 
@@ -124,7 +122,7 @@ const withGraphDecorator: Decorator = (Story) => {
 export default {
   title: 'plugin-sheet/Sheet',
   component: Sheet,
-  decorators: [withGraphDecorator, withTheme, withFullscreen({ classNames: 'inset-4' })],
+  decorators: [withTheme, withLayout({ fullscreen: true, tooltips: true, classNames: 'inset-4' }), withGraphDecorator],
 };
 
 export const Default = () => {
@@ -136,11 +134,9 @@ export const Default = () => {
   }
 
   return (
-    <Tooltip.Provider>
-      <Sheet.Root sheet={sheet} space={space} onInfo={() => setDebug((debug) => !debug)}>
-        <SheetWithToolbar debug={debug} space={space} />
-      </Sheet.Root>
-    </Tooltip.Provider>
+    <Sheet.Root sheet={sheet} space={space} onInfo={() => setDebug((debug) => !debug)}>
+      <SheetWithToolbar debug={debug} space={space} />
+    </Sheet.Root>
   );
 };
 
@@ -263,34 +259,6 @@ const Cell = ({ className, label }: { className?: string; label: string }) => (
   <div className={mx('flex items-center justify-center border', className)}>{label}</div>
 );
 
-const createCells = (): Record<string, CellValue> => ({
-  B1: { value: 'Qty' },
-  B3: { value: 1 },
-  B4: { value: 2 },
-  B5: { value: 3 },
-  B7: { value: 'Total' },
-
-  C1: { value: 'Price' },
-  C3: { value: 2_000 },
-  C4: { value: 2_500 },
-  C5: { value: 3_000 },
-  C7: { value: '=SUMPRODUCT(B2:B6, C2:C6)' },
-  // C8: { value: '=C7*CRYPTO(D7)' },
-  C8: { value: '=C7*TEST()' },
-
-  D7: { value: 'USD' },
-  D8: { value: 'BTC' },
-
-  E3: { value: '=TODAY()' },
-  E4: { value: '=NOW()' },
-
-  F1: { value: `=${testSheetName}!A1` }, // Ref test sheet.
-  F3: { value: true },
-  F4: { value: false },
-  F5: { value: '8%' },
-  F6: { value: '$10000' },
-});
-
 const useTestSheet = () => {
   const { graphs, setGraph } = useContext(ComputeGraphContext);
   const [sheet, setSheet] = useState<EchoReactiveObject<SheetType>>();
@@ -307,13 +275,7 @@ const useTestSheet = () => {
         setGraph(space.id, graph);
       }
 
-      const sheet = createSheet();
-      const model = new SheetModel(graph, sheet);
-      await model.initialize();
-      model.setValues(createCells());
-      model.sheet.columnMeta[model.sheet.columns[0]] = { size: 100 };
-      await model.destroy();
-
+      const sheet = await createTestSheet({ graph });
       space.db.add(sheet);
       setSheet(sheet);
     });

package/src/components/Sheet/Sheet.tsx

@@ -40,7 +40,7 @@ import { debounce } from '@dxos/async';
 import { fullyQualifiedId, createDocAccessor } from '@dxos/client/echo';
 import { log } from '@dxos/log';
 import { type ThemedClassName } from '@dxos/react-ui';
-import { createAttendableAttributes } from '@dxos/react-ui-attention';
+import { createAttendableAttributes, useHasAttention } from '@dxos/react-ui-attention';
 import { mx } from '@dxos/react-ui-theme';
 
 import {
@@ -112,13 +112,11 @@ import {
  *  - Update formula ranges by selection.
  */
 
-// TODO(burdon): Factor out fragments.
 const fragments = {
-  axis: 'bg-neutral-50 text-neutral-800 dark:bg-neutral-800 dark:text-neutral-200 text-xs select-none',
-  axisSelected: 'bg-neutral-100 dark:bg-neutral-900 text-black dark:text-white',
-  cell: 'dark:bg-neutral-850',
-  cellSelected: 'bg-neutral-50 dark:bg-neutral-900 text-black dark:text-white border !border-primary-500',
-  border: 'border-neutral-200 dark:border-neutral-700',
+  axis: 'bg-axisSurface text-axisText text-xs select-none',
+  axisSelected: 'bg-attention text-baseText',
+  cell: 'bg-gridCell',
+  cellSelected: 'bg-gridCellSelected text-baseText border !border-accentSurface',
 };
 
 //
@@ -244,7 +242,6 @@ const SheetMain = forwardRef<HTMLDivElement, SheetMainProps>(({ classNames, numR
       role='none'
       className={mx(
         'grid grid-cols-[calc(var(--rail-size)-2px)_1fr] grid-rows-[32px_1fr_32px] bs-full is-full overflow-hidden',
-        fragments.border,
         classNames,
       )}
     >
@@ -345,7 +342,7 @@ const GridCorner = (props: { className?: string } & Pick<DOMAttributes<HTMLDivEl
 
 const MovingOverlay = ({ label }: { label: string }) => {
   return (
-    <div className='flex w-full h-full justify-center items-center text-sm p-1 bg-primary-500/50 cursor-pointer'>
+    <div className='flex w-full h-full justify-center items-center text-sm p-1 bg-gridOverlay cursor-pointer'>
       {label}
     </div>
   );
@@ -425,7 +422,7 @@ const SheetRows = forwardRef<HTMLDivElement, SheetRowsProps>(
       <div className='relative flex grow overflow-hidden'>
         {/* Fixed border. */}
         <div
-          className={mx('z-20 absolute inset-0 border-y pointer-events-none', fragments.border)}
+          className={mx('z-20 absolute inset-0 border-y border-gridLine pointer-events-none')}
           style={{ width: axisWidth }}
         />
 
@@ -520,8 +517,7 @@ const GridRowCell = ({ idx, index, label, size, resize, selected, onSelect, onRe
         {...listeners}
         className={mx(
           'flex h-full items-center justify-center cursor-pointer',
-          'border-t focus-visible:outline-none',
-          fragments.border,
+          'border-t border-gridLine focus-visible:outline-none',
           fragments.axis,
           selected && fragments.axisSelected,
           isDragging && fragments.axisSelected,
@@ -532,11 +528,11 @@ const GridRowCell = ({ idx, index, label, size, resize, selected, onSelect, onRe
 
         {/* Drop indicator. */}
         {over?.id === idx && !isDragging && (
-          <div className='z-20 absolute top-0 w-full min-h-[4px] border-b-4 border-primary-500' />
+          <div className='z-20 absolute top-0 w-full min-h-[4px] border-b-4 border-accentSurface' />
         )}
 
         {/* Resize indicator. */}
-        {resizing && <div className='z-20 absolute bottom-0 w-full min-h-[4px] border-b-4 border-primary-500' />}
+        {resizing && <div className='z-20 absolute bottom-0 w-full min-h-[4px] border-b-4 border-accentSurface' />}
       </div>
     </Resizable>
   );
@@ -588,7 +584,7 @@ const SheetColumns = forwardRef<HTMLDivElement, SheetColumnsProps>(
       <div className='relative flex grow overflow-hidden'>
         {/* Fixed border. */}
         <div
-          className={mx('z-20 absolute inset-0 border-x pointer-events-none', fragments.border)}
+          className={mx('z-20 absolute inset-0 border-x border-gridLine pointer-events-none')}
           style={{ height: axisHeight }}
         />
 
@@ -684,8 +680,7 @@ const GridColumnCell = ({ idx, index, label, size, resize, selected, onSelect, o
         {...listeners}
         className={mx(
           'flex h-full items-center justify-center cursor-pointer',
-          'border-l focus-visible:outline-none',
-          fragments.border,
+          'border-l border-gridLine focus-visible:outline-none',
           fragments.axis,
           selected && fragments.axisSelected,
           isDragging && fragments.axisSelected,
@@ -696,11 +691,11 @@ const GridColumnCell = ({ idx, index, label, size, resize, selected, onSelect, o
 
         {/* Drop indicator. */}
         {over?.id === idx && !isDragging && (
-          <div className='z-20 absolute left-0 h-full min-w-[4px] border-l-4 border-primary-500' />
+          <div className='z-20 absolute left-0 h-full min-w-[4px] border-l-4 border-accentSurface' />
         )}
 
         {/* Resize indicator. */}
-        {resizing && <div className='z-20 absolute right-0 h-full min-h-[4px] border-l-4 border-primary-500' />}
+        {resizing && <div className='z-20 absolute right-0 h-full min-h-[4px] border-l-4 border-accentSurface' />}
       </div>
     </Resizable>
   );
@@ -860,18 +855,17 @@ const SheetGrid = forwardRef<HTMLDivElement, SheetGridProps>(
     });
 
     // TODO(burdon): Prevent scroll if not attended.
-    const qualifiedSubjectId = fullyQualifiedId(model.sheet);
-    const attendableAttrs = createAttendableAttributes(qualifiedSubjectId);
-    // const attended = useHasAttention(qualifiedSubjectId);
-    const attended = true;
+    const id = fullyQualifiedId(model.sheet);
+    const attendableAttrs = createAttendableAttributes(id);
+    const hasAttention = useHasAttention(id);
 
     return (
       <div ref={containerRef} role='grid' className='relative flex grow overflow-hidden'>
         {/* Fixed border. */}
-        <div className={mx('z-20 absolute inset-0 border pointer-events-none', fragments.border)} />
+        <div className={mx('z-20 absolute inset-0 border border-gridLine pointer-events-none')} />
 
         {/* Grid scroll container. */}
-        <div ref={scrollerRef} className={mx('grow', attended && 'overflow-auto scrollbar-thin')}>
+        <div ref={scrollerRef} className={mx('grow', hasAttention && 'overflow-auto scrollbar-thin')}>
           {/* Scroll content. */}
           <div
             className='relative select-none'
@@ -991,7 +985,7 @@ const SelectionOverlay = ({ root }: { root: HTMLDivElement }) => {
     <div
       role='none'
       style={bounds}
-      className='z-10 absolute pointer-events-none bg-primary-500/20 border border-primary-500/50'
+      className='z-10 absolute pointer-events-none bg-gridSelectionOverlay border border-gridOverlay'
     />
   );
 };
@@ -1018,10 +1012,8 @@ const SheetCell = ({ id, cell, style, active, onSelect }: SheetCellProps) => {
       role='cell'
       style={style}
       className={mx(
-        'flex w-full h-full truncate items-center border cursor-pointer',
-        'px-2 py-1',
+        'flex w-full h-full px-2 py-1 truncate items-center border border-gridLine cursor-pointer',
         fragments.cell,
-        fragments.border,
         active && ['z-20', fragments.cellSelected],
         classNames,
       )}
@@ -1093,13 +1085,13 @@ const SheetStatusBar = () => {
   }
 
   return (
-    <div className={mx('flex shrink-0 justify-between items-center px-4 py-1 text-sm border-x', fragments.border)}>
+    <div className={mx('flex shrink-0 justify-between items-center px-4 py-1 text-sm border-x border-gridLine')}>
       <div className='flex gap-4 items-center'>
         <div className='flex w-16 items-center font-mono'>
           {(range && rangeToA1Notation(range)) || (cursor && addressToA1Notation(cursor))}
         </div>
         <div className='flex gap-2 items-center'>
-          <FunctionIcon className={mx('text-green-500', isFormula ? 'visible' : 'invisible')} />
+          <FunctionIcon className={mx('text-greenText', isFormula ? 'visible' : 'invisible')} />
           <span className='font-mono'>{value}</span>
         </div>
       </div>
@@ -1129,8 +1121,7 @@ const SheetDebug = () => {
     <div
       className={mx(
         'z-20 absolute right-0 top-20 bottom-20 w-[30rem] overflow-auto scrollbar-thin',
-        'border text-xs bg-neutral-50 dark:bg-black text-cyan-500 font-mono p-1 opacity-80',
-        fragments.border,
+        'border border-gridLine text-xs bg-neutral-50 dark:bg-black text-cyan-500 font-mono p-1 opacity-80',
       )}
     >
       <pre className='whitespace-pre-wrap'>

package/src/components/Sheet/formatting.ts

@@ -51,7 +51,7 @@ export class FormattingModel {
       case ValueTypeEnum.Boolean: {
         return {
           value: (value as boolean).toLocaleString().toUpperCase(),
-          classNames: [...classNames, value ? '!text-green-500' : '!text-orange-500'],
+          classNames: [...classNames, value ? '!text-greenText' : '!text-orangeText'],
         };
       }
 

package/src/components/SheetContainer.tsx

@@ -13,19 +13,18 @@ const SheetContainer = ({
   sheet,
   space,
   role,
-  coordinate = { part: 'main', entryId: '' },
+  remoteFunctionUrl,
 }: SheetRootProps & { role?: string; coordinate?: LayoutCoordinate }) => {
   return (
     <div
       role='none'
       className={mx(
         'flex',
-        role === 'article' && 'row-span-2', // TODO(burdon): Container with toolbar.
+        role === 'article' && 'row-span-2',
         role === 'section' && 'aspect-square border-y border-is border-separator',
-        coordinate.part !== 'solo' && 'border-is border-separator',
       )}
     >
-      <Sheet.Root sheet={sheet} space={space}>
+      <Sheet.Root sheet={sheet} space={space} remoteFunctionUrl={remoteFunctionUrl}>
         <Sheet.Main />
       </Sheet.Root>
     </div>

package/src/components/Toolbar/Toolbar.stories.tsx

@@ -6,29 +6,24 @@ import '@dxos-theme';
 
 import React from 'react';
 
-import { Tooltip } from '@dxos/react-ui';
 import { textBlockWidth } from '@dxos/react-ui-theme';
-import { withTheme } from '@dxos/storybook-utils';
+import { withLayout, withTheme } from '@dxos/storybook-utils';
 
 import { Toolbar } from './Toolbar';
 import translations from '../../translations';
 
 const Story = () => {
   return (
-    <Tooltip.Provider>
-      <div role='none' className='fixed inset-0 flex flex-col'>
-        <Toolbar.Root classNames={textBlockWidth}>
-          <Toolbar.Alignment />
-        </Toolbar.Root>
-      </div>
-    </Tooltip.Provider>
+    <Toolbar.Root classNames={textBlockWidth}>
+      <Toolbar.Alignment />
+    </Toolbar.Root>
   );
 };
 
 export default {
   title: 'plugin-sheet/Toolbar',
   component: Toolbar,
-  decorators: [withTheme],
+  decorators: [withTheme, withLayout({ tooltips: true })],
   parameters: { translations, layout: 'fullscreen' },
   render: (args: any) => <Story {...args} />,
 };

package/src/model/model.ts

@@ -21,9 +21,8 @@ import { createIndices, RangeException, ReadonlyException } from './util';
 import { type ComputeGraph } from '../components';
 import { type CellScalarValue, type CellValue, type SheetType, ValueTypeEnum } from '../types';
 
-// TODO(burdon): Defaults or Max?
-const DEFAULT_ROWS = 500;
-const DEFAULT_COLUMNS = 26 * 2;
+const DEFAULT_ROWS = 100;
+const DEFAULT_COLUMNS = 26;
 
 export type CellIndex = string;
 

package/src/testing.ts

@@ -0,0 +1,50 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import { type ComputeGraph, createComputeGraph } from './components';
+import { SheetModel } from './model';
+import { createSheet, type CellValue } from './types';
+
+export const testSheetName = 'test';
+
+export const createCells = (): Record<string, CellValue> => ({
+  B1: { value: 'Qty' },
+  B3: { value: 1 },
+  B4: { value: 2 },
+  B5: { value: 3 },
+  B7: { value: 'Total' },
+
+  C1: { value: 'Price' },
+  C3: { value: 2_000 },
+  C4: { value: 2_500 },
+  C5: { value: 3_000 },
+  C7: { value: '=SUMPRODUCT(B2:B6, C2:C6)' },
+  // C8: { value: '=C7*CRYPTO(D7)' },
+  C8: { value: '=C7*TEST()' },
+
+  D7: { value: 'USD' },
+  D8: { value: 'BTC' },
+
+  E3: { value: '=TODAY()' },
+  E4: { value: '=NOW()' },
+
+  F1: { value: `=${testSheetName}!A1` }, // Ref test sheet.
+  F3: { value: true },
+  F4: { value: false },
+  F5: { value: '8%' },
+  F6: { value: '$10000' },
+});
+
+export const createTestSheet = async ({
+  name,
+  graph = createComputeGraph(),
+}: { name?: string; graph?: ComputeGraph } = {}) => {
+  const sheet = createSheet(name);
+  const model = new SheetModel(graph, sheet);
+  await model.initialize();
+  model.setValues(createCells());
+  model.sheet.columnMeta[model.sheet.columns[0]] = { size: 100 };
+  await model.destroy();
+  return sheet;
+};

package/src/types.ts

@@ -83,6 +83,8 @@ export const RowColumnMeta = S.Struct({
 });
 
 // TODO(burdon): Index to all updates when rows/columns are inserted/deleted.
+// TODO(wittjosiah): Migrate typename to remove `Type` suffix.
+// TODO(wittjosiah): Rename title to name to align with other schemas.
 export class SheetType extends TypedObject({ typename: 'dxos.org/type/SheetType', version: '0.1.0' })({
   title: S.optional(S.String),