@dxos/plugin-sheet 0.6.12 → 0.6.13-main.548ca8d

package/src/components/{CellEditor/CellEditor.stories.tsx → GridSheet/SheetCellEditor.stories.tsx}

@@ -4,18 +4,19 @@
 
 import '@dxos-theme';
 
-import { HyperFormula } from 'hyperformula';
 import React, { useEffect, useMemo, useState } from 'react';
 
 import { Client } from '@dxos/client';
 import { createDocAccessor, type EchoReactiveObject } from '@dxos/client/echo';
 import { automerge } from '@dxos/react-ui-editor';
+import { CellEditor, type CellEditorProps } from '@dxos/react-ui-grid';
 import { withTheme } from '@dxos/storybook-utils';
 
-import { CellEditor, type CellEditorProps } from './CellEditor';
-import { sheetExtension } from './extension';
-import { defaultFunctions } from '../../model';
-import { createSheet, SheetType } from '../../types';
+import { HyperFormula } from '#hyperformula';
+import { createSheet } from '../../defs';
+import { sheetExtension } from '../../extensions';
+import { defaultFunctions } from '../../graph';
+import { SheetType } from '../../types';
 
 export default {
   title: 'plugin-sheet/CellEditor',
@@ -41,14 +42,13 @@ const AutomergeStory = ({ value, ...props }: StoryProps) => {
   const [object, setObject] = useState<EchoReactiveObject<SheetType>>();
   useEffect(() => {
     setTimeout(async () => {
-      const client = new Client();
+      const client = new Client({ types: [SheetType] });
       await client.initialize();
       await client.halo.createIdentity();
       const space = await client.spaces.create();
-      client.addTypes([SheetType]);
 
       const sheet = createSheet();
-      sheet.title = 'Test';
+      sheet.name = 'Test';
       sheet.cells[cell] = { value };
       space.db.add(sheet);
       setObject(sheet);

package/src/components/GridSheet/index.ts

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

package/src/components/GridSheet/util.ts

@@ -0,0 +1,144 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import { type MutableRefObject, useEffect, useLayoutEffect, useState } from 'react';
+
+import { createDocAccessor } from '@dxos/react-client/echo';
+import {
+  type GridContentProps,
+  type DxGridElement,
+  type DxGridAxisMeta,
+  type DxGridPlane,
+  type DxGridPlaneRange,
+  type DxGridPlaneCells,
+  colToA1Notation,
+  rowToA1Notation,
+} from '@dxos/react-ui-grid';
+import { mx } from '@dxos/react-ui-theme';
+
+import { type CellAddress } from '../../defs';
+import { type SheetModel, type FormattingModel } from '../../model';
+
+export const dxGridCellIndexToSheetCellAddress = (index: string): CellAddress => {
+  const [colStr, rowStr] = index.split(',');
+  return {
+    col: parseInt(colStr),
+    row: parseInt(rowStr),
+  };
+};
+
+const createDxGridColumns = (model: SheetModel): DxGridAxisMeta => {
+  return model.sheet.columns.reduce(
+    (acc: DxGridAxisMeta, columnId, numericIndex) => {
+      if (model.sheet.columnMeta[columnId] && model.sheet.columnMeta[columnId].size) {
+        acc.grid[numericIndex] = { size: model.sheet.columnMeta[columnId].size, resizeable: true };
+      }
+      return acc;
+    },
+    { grid: {} },
+  );
+};
+
+const createDxGridRows = (model: SheetModel): DxGridAxisMeta => {
+  return model.sheet.rows.reduce(
+    (acc: DxGridAxisMeta, rowId, numericIndex) => {
+      if (model.sheet.rowMeta[rowId] && model.sheet.rowMeta[rowId].size) {
+        acc.grid[numericIndex] = { size: model.sheet.rowMeta[rowId].size, resizeable: true };
+      }
+      return acc;
+    },
+    { grid: {} },
+  );
+};
+
+const gridCellGetter = (model: SheetModel, formatting: FormattingModel) => {
+  // TODO(thure): Actually use the cache.
+  const cachedGridCells: DxGridPlaneCells = {};
+  return (nextBounds: DxGridPlaneRange): DxGridPlaneCells => {
+    [...Array(nextBounds.end.col - nextBounds.start.col)].forEach((_, c0) => {
+      return [...Array(nextBounds.end.row - nextBounds.start.row)].forEach((_, r0) => {
+        const col = nextBounds.start.col + c0;
+        const row = nextBounds.start.row + r0;
+        const cell = formatting.getFormatting({ col, row });
+        if (cell.value) {
+          cachedGridCells;
+          cachedGridCells[`${col},${row}`] = { value: cell.value, className: mx(cell.classNames) };
+        }
+      });
+    });
+    return cachedGridCells;
+  };
+};
+
+export const rowLabelCell = (row: number) => ({
+  value: rowToA1Notation(row),
+  className: 'text-end !pie-1',
+  resizeHandle: 'row',
+});
+
+export const colLabelCell = (col: number) => ({ value: colToA1Notation(col), resizeHandle: 'col' });
+
+const cellGetter = (model: SheetModel, formatting: FormattingModel) => {
+  const getGridCells = gridCellGetter(model, formatting);
+  return (nextBounds: DxGridPlaneRange, plane: DxGridPlane): DxGridPlaneCells => {
+    switch (plane) {
+      case 'grid':
+        return getGridCells(nextBounds);
+      case 'frozenColsStart':
+        return [...Array(nextBounds.end.row - nextBounds.start.row)].reduce((acc, _, r0) => {
+          const r = nextBounds.start.row + r0;
+          acc[`0,${r}`] = rowLabelCell(r);
+          return acc;
+        }, {});
+      case 'frozenRowsStart':
+        return [...Array(nextBounds.end.col - nextBounds.start.col)].reduce((acc, _, c0) => {
+          const c = nextBounds.start.col + c0;
+          acc[`${c},0`] = colLabelCell(c);
+          return acc;
+        }, {});
+      default:
+        return {};
+    }
+  };
+};
+
+export const useSheetModelDxGridProps = (
+  dxGridRef: MutableRefObject<DxGridElement | null>,
+  model: SheetModel,
+  formatting: FormattingModel,
+): Pick<GridContentProps, 'columns' | 'rows'> => {
+  const [columns, setColumns] = useState<DxGridAxisMeta>(createDxGridColumns(model));
+  const [rows, setRows] = useState<DxGridAxisMeta>(createDxGridColumns(model));
+
+  useLayoutEffect(() => {
+    const cellsAccessor = createDocAccessor(model.sheet, ['cells']);
+    if (dxGridRef.current) {
+      dxGridRef.current.getCells = cellGetter(model, formatting);
+    }
+    const handleCellsUpdate = () => {
+      dxGridRef.current?.requestUpdate('initialCells');
+    };
+    cellsAccessor.handle.addListener('change', handleCellsUpdate);
+    return () => cellsAccessor.handle.removeListener('change', handleCellsUpdate);
+  }, [model, formatting]);
+
+  useEffect(() => {
+    const columnMetaAccessor = createDocAccessor(model.sheet, ['columnMeta']);
+    const rowMetaAccessor = createDocAccessor(model.sheet, ['rowMeta']);
+    const handleColumnMetaUpdate = () => {
+      setColumns(createDxGridColumns(model));
+    };
+    const handleRowMetaUpdate = () => {
+      setRows(createDxGridRows(model));
+    };
+    columnMetaAccessor.handle.addListener('change', handleColumnMetaUpdate);
+    rowMetaAccessor.handle.addListener('change', handleRowMetaUpdate);
+    return () => {
+      columnMetaAccessor.handle.removeListener('change', handleColumnMetaUpdate);
+      rowMetaAccessor.handle.removeListener('change', handleRowMetaUpdate);
+    };
+  }, [model]);
+
+  return { columns, rows };
+};

package/src/components/SheetContainer/SheetContainer.stories.tsx

@@ -0,0 +1,40 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import React from 'react';
+
+import { useSpace } from '@dxos/react-client/echo';
+import { withClientProvider } from '@dxos/react-client/testing';
+import { withTheme, withLayout } from '@dxos/storybook-utils';
+
+import { SheetContainer } from './SheetContainer';
+import { useComputeGraph } from '../../hooks';
+import { useTestSheet, withComputeGraphDecorator } from '../../testing';
+import { SheetType } from '../../types';
+
+export default {
+  title: 'plugin-sheet/SheetContainer',
+  component: SheetContainer,
+  decorators: [
+    withClientProvider({ types: [SheetType], createSpace: true }),
+    withComputeGraphDecorator(),
+    withTheme,
+    withLayout({
+      fullscreen: true,
+      tooltips: true,
+      classNames: 'grid grid-cols-1 grid-rows-[min-content_minmax(0,1fr)_min-content]',
+    }),
+  ],
+};
+
+export const Basic = () => {
+  const space = useSpace();
+  const graph = useComputeGraph(space);
+  const sheet = useTestSheet(space, graph);
+  if (!sheet || !graph) {
+    return null;
+  }
+
+  return <SheetContainer graph={graph} sheet={sheet} role='article' />;
+};

package/src/components/SheetContainer/SheetContainer.tsx

@@ -0,0 +1,52 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import React, { useCallback } from 'react';
+
+import { useIntentDispatcher } from '@dxos/app-framework';
+
+import { FunctionEditor } from '../FunctionEditor';
+import { GridSheet } from '../GridSheet';
+import { SheetProvider, type SheetProviderProps } from '../SheetContext';
+import { Toolbar, type ToolbarAction } from '../Toolbar';
+
+export const SheetContainer = ({ graph, sheet, role }: SheetProviderProps & { role?: string }) => {
+  const dispatch = useIntentDispatcher();
+
+  // TODO(Zan): Centralise the toolbar action handler. Current implementation in stories.
+  const handleAction = useCallback(
+    (action: ToolbarAction) => {
+      switch (action.type) {
+        case 'comment': {
+          // TODO(Zan): We shouldn't hardcode the action ID.
+          void dispatch({
+            action: 'dxos.org/plugin/thread/action/create',
+            data: {
+              cursor: action.anchor,
+              name: action.cellContent,
+              subject: sheet,
+            },
+          });
+        }
+      }
+    },
+    [sheet, dispatch],
+  );
+
+  return (
+    <SheetProvider sheet={sheet} graph={graph}>
+      <Toolbar.Root onAction={handleAction} role={role}>
+        <Toolbar.Styles />
+        <Toolbar.Format />
+        <Toolbar.Alignment />
+        <Toolbar.Separator />
+        <Toolbar.Actions />
+      </Toolbar.Root>
+      <div role='none' className='border-bs border-separator grid cols-1 rows-[1fr_min-content] min-bs-0'>
+        <GridSheet />
+        <FunctionEditor />
+      </div>
+    </SheetProvider>
+  );
+};

package/src/components/SheetContainer/index.ts

@@ -0,0 +1,7 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import { SheetContainer } from './SheetContainer';
+
+export default SheetContainer;

package/src/components/SheetContext/SheetContext.tsx

@@ -0,0 +1,108 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import React, { type PropsWithChildren, createContext, useContext, useMemo, useState } from 'react';
+
+import { invariant } from '@dxos/invariant';
+import { fullyQualifiedId } from '@dxos/react-client/echo';
+import { Grid, useGridContext, type GridScopedProps, type GridEditing } from '@dxos/react-ui-grid';
+
+import { type CellAddress, type CellRange } from '../../defs';
+import { type ComputeGraph } from '../../graph';
+import { useSheetModel, useFormattingModel, useSelectThreadOnCellFocus, useThreadDecorations } from '../../hooks';
+import { type FormattingModel, type SheetModel, createDecorations } from '../../model';
+import { type SheetType } from '../../types';
+
+export type SheetContextValue = {
+  id: string;
+
+  model: SheetModel;
+  formatting: FormattingModel;
+
+  // Cursor state.
+  // TODO(burdon): Cursor and range should use indices.
+  cursor?: CellAddress;
+  setCursor: (cell: CellAddress | undefined) => void;
+  range?: CellRange;
+  setRange: (range: CellRange | undefined) => void;
+
+  // Editing state (undefined if not editing).
+  editing: GridEditing;
+  setEditing: (editing: GridEditing) => void;
+
+  // Events.
+  // TODO(burdon): Generalize.
+  onInfo?: () => void;
+
+  // Decorations.
+  decorations: ReturnType<typeof createDecorations>;
+};
+
+const SheetContext = createContext<SheetContextValue | null>(null);
+
+export const useSheetContext = (): SheetContextValue => {
+  const context = useContext(SheetContext);
+  invariant(context);
+  return context;
+};
+
+const SheetProviderImpl = ({
+  model,
+  formatting,
+  onInfo,
+  children,
+  __gridScope,
+}: GridScopedProps<PropsWithChildren<Pick<SheetContextValue, 'onInfo' | 'model' | 'formatting'>>>) => {
+  const { id, editing, setEditing } = useGridContext('SheetProvider', __gridScope);
+
+  // TODO(Zan): Impl. set range and set cursor that scrolls to that cell or range if it is not visible.
+  const decorations = useMemo(() => createDecorations(), []);
+
+  // TODO(thure): Reconnect these.
+  const [cursor, setCursor] = useState<CellAddress>();
+  const [range, setRange] = useState<CellRange>();
+
+  useSelectThreadOnCellFocus(model, cursor);
+  useThreadDecorations(model, decorations);
+
+  return (
+    <SheetContext.Provider
+      value={{
+        id,
+        model,
+        formatting,
+        editing,
+        setEditing,
+        cursor,
+        setCursor,
+        range,
+        setRange,
+        // TODO(burdon): Change to event.
+        onInfo,
+        decorations,
+      }}
+    >
+      {children}
+    </SheetContext.Provider>
+  );
+};
+
+export type SheetProviderProps = {
+  graph: ComputeGraph;
+  sheet: SheetType;
+  readonly?: boolean;
+} & Pick<SheetContextValue, 'onInfo'>;
+
+export const SheetProvider = ({ children, graph, sheet, readonly, onInfo }: PropsWithChildren<SheetProviderProps>) => {
+  const model = useSheetModel(graph, sheet, { readonly });
+  const formatting = useFormattingModel(model);
+
+  return !model || !formatting ? null : (
+    <Grid.Root id={fullyQualifiedId(sheet)}>
+      <SheetProviderImpl model={model} formatting={formatting} onInfo={onInfo}>
+        {children}
+      </SheetProviderImpl>
+    </Grid.Root>
+  );
+};

package/src/components/SheetContext/index.ts

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