@dxos/plugin-sheet 0.6.13-main.ed424a1 → 0.6.13

package/src/components/ComputeGraph/ComputeGraphContextProvider.tsx

@@ -1,20 +0,0 @@
-//
-// Copyright 2024 DXOS.org
-//
-
-import React, { createContext, type PropsWithChildren } from 'react';
-
-import { type ComputeGraphRegistry } from '../../graph';
-
-export type ComputeGraphContextType = {
-  registry: ComputeGraphRegistry;
-};
-
-/**
- * The compute graph context manages a ComputeGraph for each space.
- */
-export const ComputeGraphContext = createContext<ComputeGraphContextType | undefined>(undefined);
-
-export const ComputeGraphContextProvider = ({ registry, children }: PropsWithChildren<ComputeGraphContextType>) => {
-  return <ComputeGraphContext.Provider value={{ registry }}>{children}</ComputeGraphContext.Provider>;
-};

package/src/components/FunctionEditor/FunctionEditor.tsx

@@ -1,45 +0,0 @@
-//
-// Copyright 2024 DXOS.org
-//
-
-import React from 'react';
-
-import { Icon } from '@dxos/react-ui';
-import { mx } from '@dxos/react-ui-theme';
-
-import { addressToA1Notation, rangeToA1Notation } from '../../defs';
-import { useSheetContext } from '../SheetContext';
-
-export const FunctionEditor = () => {
-  const { model, cursor, range } = useSheetContext();
-
-  let value;
-  let isFormula = false;
-  if (cursor) {
-    value = model.getCellValue(cursor);
-    if (typeof value === 'string' && value.charAt(0) === '=') {
-      value = model.graph.mapFunctionBindingFromId(model.mapFormulaIndicesToRefs(value));
-      isFormula = true;
-    } else if (value != null) {
-      value = String(value);
-    }
-  }
-
-  return (
-    <div
-      className={mx(
-        'flex shrink-0 justify-between items-center px-4 py-1 text-sm border-bs !border-separator attention-surface',
-      )}
-    >
-      <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'>
-          <Icon icon='ph--function--regular' classNames={['text-greenText', isFormula ? 'visible' : 'invisible']} />
-          <span className='font-mono'>{value}</span>
-        </div>
-      </div>
-    </div>
-  );
-};

package/src/components/FunctionEditor/index.ts

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

package/src/components/GridSheet/GridSheet.stories.tsx

@@ -1,41 +0,0 @@
-//
-// 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 { GridSheet } from './GridSheet';
-import { useComputeGraph } from '../../hooks';
-import { createTestCells, useTestSheet, withComputeGraphDecorator } from '../../testing';
-import { SheetType } from '../../types';
-import { SheetProvider } from '../SheetContext';
-
-export default {
-  title: 'plugin-sheet/GridSheet',
-  component: GridSheet,
-  decorators: [
-    withClientProvider({ types: [SheetType], createSpace: true }),
-    withComputeGraphDecorator(),
-    withTheme,
-    withLayout({ fullscreen: true, tooltips: true }),
-  ],
-};
-
-export const Basic = () => {
-  const space = useSpace();
-  const graph = useComputeGraph(space);
-  const sheet = useTestSheet(space, graph, { cells: createTestCells() });
-  if (!sheet || !graph) {
-    return null;
-  }
-
-  return (
-    <SheetProvider graph={graph} sheet={sheet}>
-      <GridSheet />
-    </SheetProvider>
-  );
-};

package/src/components/GridSheet/GridSheet.tsx

@@ -1,163 +0,0 @@
-//
-// Copyright 2024 DXOS.org
-//
-
-import React, { useCallback, useMemo, useRef, type FocusEvent, type WheelEvent } from 'react';
-
-import { useAttention } from '@dxos/react-ui-attention';
-import {
-  type DxGridElement,
-  Grid,
-  type GridContentProps,
-  editorKeys,
-  type EditorKeysProps,
-  GridCellEditor,
-  closestCell,
-} from '@dxos/react-ui-grid';
-
-import { colLabelCell, dxGridCellIndexToSheetCellAddress, rowLabelCell, useSheetModelDxGridProps } from './util';
-import { rangeToA1Notation, type CellRange, DEFAULT_COLUMNS, DEFAULT_ROWS } from '../../defs';
-import { rangeExtension, sheetExtension, type CellRangeNotifier } from '../../extensions';
-import { useUpdateFocusedCellOnThreadSelection } from '../../hooks';
-import { useSheetContext } from '../SheetContext';
-
-const initialCells = {
-  grid: {},
-  frozenColsStart: [...Array(64)].reduce((acc, _, i) => {
-    acc[`0,${i}`] = rowLabelCell(i);
-    return acc;
-  }, {}),
-  frozenRowsStart: [...Array(12)].reduce((acc, _, i) => {
-    acc[`${i},0`] = colLabelCell(i);
-    return acc;
-  }, {}),
-};
-
-const frozen = {
-  frozenColsStart: 1,
-  frozenRowsStart: 1,
-};
-
-const sheetRowDefault = { grid: { size: 32, resizeable: true } };
-const sheetColDefault = { frozenColsStart: { size: 48 }, grid: { size: 180, resizeable: true } };
-
-export const GridSheet = () => {
-  const { id, model, editing, setEditing, setCursor, setRange } = useSheetContext();
-  const dxGrid = useRef<DxGridElement | null>(null);
-  const rangeNotifier = useRef<CellRangeNotifier>();
-  const { hasAttention } = useAttention(id);
-
-  const handleFocus = useCallback(
-    (event: FocusEvent) => {
-      if (!editing) {
-        const cell = closestCell(event.target);
-        if (cell && cell.plane === 'grid') {
-          setCursor({ col: cell.col, row: cell.row });
-        }
-      }
-    },
-    [editing],
-  );
-
-  // TODO(burdon): Validate formula before closing: hf.validateFormula();
-  const handleClose = useCallback<NonNullable<EditorKeysProps['onClose']> | NonNullable<EditorKeysProps['onNav']>>(
-    (value, { key, shift }) => {
-      if (value !== undefined) {
-        model.setValue(dxGridCellIndexToSheetCellAddress(editing!.index), value);
-      }
-      setEditing(null);
-      const axis = ['Enter', 'ArrowUp', 'ArrowDown'].includes(key)
-        ? 'row'
-        : ['Tab', 'ArrowLeft', 'ArrowRight'].includes(key)
-          ? 'col'
-          : undefined;
-      const delta = key.startsWith('Arrow') ? (['ArrowUp', 'ArrowLeft'].includes(key) ? -1 : 1) : shift ? -1 : 1;
-      dxGrid.current?.refocus(axis, delta);
-    },
-    [model, editing, setEditing],
-  );
-
-  const handleAxisResize = useCallback<NonNullable<GridContentProps['onAxisResize']>>(
-    ({ axis, size, index: numericIndex }) => {
-      if (axis === 'row') {
-        const rowId = model.sheet.rows[parseInt(numericIndex)];
-        model.sheet.rowMeta[rowId] ??= {};
-        model.sheet.rowMeta[rowId].size = size;
-      } else {
-        const columnId = model.sheet.columns[parseInt(numericIndex)];
-        model.sheet.columnMeta[columnId] ??= {};
-        model.sheet.columnMeta[columnId].size = size;
-      }
-    },
-    [model],
-  );
-
-  const handleSelect = useCallback<NonNullable<GridContentProps['onSelect']>>(
-    ({ minCol, maxCol, minRow, maxRow }) => {
-      const range: CellRange = { from: { col: minCol, row: minRow } };
-      if (minCol !== maxCol || minRow !== maxRow) {
-        range.to = { col: maxCol, row: maxRow };
-      }
-      if (editing) {
-        // Update range selection in formula.
-        rangeNotifier.current?.(rangeToA1Notation(range));
-      } else {
-        // Setting range while editing causes focus to move to null, avoid doing so.
-        setRange(range.to ? range : undefined);
-      }
-    },
-    [editing],
-  );
-
-  const handleWheel = useCallback(
-    (event: WheelEvent) => {
-      if (!hasAttention) {
-        event.stopPropagation();
-      }
-    },
-    [hasAttention],
-  );
-
-  const { columns, rows } = useSheetModelDxGridProps(dxGrid, model);
-
-  const extension = useMemo(
-    () => [
-      editorKeys({ onClose: handleClose, ...(editing?.initialContent && { onNav: handleClose }) }),
-      sheetExtension({ functions: model.graph.getFunctions() }),
-      rangeExtension((fn) => (rangeNotifier.current = fn)),
-    ],
-    [model, handleClose, editing],
-  );
-
-  const getCellContent = useCallback(
-    (index: string) => {
-      const cell = dxGridCellIndexToSheetCellAddress(index);
-      return model.getCellText(cell);
-    },
-    [model],
-  );
-
-  useUpdateFocusedCellOnThreadSelection(model, dxGrid);
-
-  return (
-    <>
-      <GridCellEditor getCellContent={getCellContent} extension={extension} />
-      <Grid.Content
-        initialCells={initialCells}
-        limitColumns={DEFAULT_COLUMNS}
-        limitRows={DEFAULT_ROWS}
-        columns={columns}
-        rows={rows}
-        onAxisResize={handleAxisResize}
-        onSelect={handleSelect}
-        rowDefault={sheetRowDefault}
-        columnDefault={sheetColDefault}
-        frozen={frozen}
-        onFocus={handleFocus}
-        onWheelCapture={handleWheel}
-        className='[--dx-grid-base:var(--surface-bg)]'
-        ref={dxGrid}
-      />
-    </>
-  );
-};

package/src/components/GridSheet/index.ts

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

package/src/components/GridSheet/util.ts

@@ -1,158 +0,0 @@
-//
-// Copyright 2024 DXOS.org
-//
-
-import { type MutableRefObject, useEffect, useLayoutEffect, useState } from 'react';
-
-import { createDocAccessor } from '@dxos/react-client/echo';
-import { parseValue, cellClassesForFieldType } from '@dxos/react-ui-data';
-import {
-  type GridContentProps,
-  type DxGridElement,
-  type DxGridAxisMeta,
-  type DxGridPlane,
-  type DxGridPlaneRange,
-  type DxGridPlaneCells,
-  type DxGridCellValue,
-  colToA1Notation,
-  rowToA1Notation,
-} from '@dxos/react-ui-grid';
-import { mx } from '@dxos/react-ui-theme';
-
-import { type CellAddress, inRange, cellClassNameForRange } from '../../defs';
-import { type SheetModel } 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 projectCellProps = (model: SheetModel, col: number, row: number): DxGridCellValue => {
-  const address = { col, row };
-  const rawValue = model.getValue(address);
-  if (rawValue === undefined || rawValue === null) {
-    return { value: '' };
-  }
-  const ranges = model.sheet.ranges?.filter(({ range }) => inRange(range, address));
-  const type = model.getValueType(address);
-  const classNames = ranges?.map(cellClassNameForRange).reverse();
-
-  return { value: parseValue(type, rawValue), className: mx(cellClassesForFieldType(type), classNames) };
-};
-
-const gridCellGetter = (model: SheetModel) => {
-  // 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 = projectCellProps(model, col, row);
-        if (cell.value) {
-          cachedGridCells;
-          cachedGridCells[`${col},${row}`] = cell;
-        }
-      });
-    });
-    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) => {
-  const getGridCells = gridCellGetter(model);
-  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,
-): 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);
-    }
-    const handleCellsUpdate = () => {
-      dxGridRef.current?.requestUpdate('initialCells');
-    };
-    cellsAccessor.handle.addListener('change', handleCellsUpdate);
-    return () => cellsAccessor.handle.removeListener('change', handleCellsUpdate);
-  }, [model]);
-
-  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

@@ -1,40 +0,0 @@
-//
-// 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 { createTestCells, 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, { cells: createTestCells() });
-  if (!sheet || !graph) {
-    return null;
-  }
-
-  return <SheetContainer graph={graph} sheet={sheet} role='article' />;
-};

package/src/components/SheetContainer/SheetContainer.tsx

@@ -1,27 +0,0 @@
-//
-// Copyright 2023 DXOS.org
-//
-
-import React from 'react';
-
-import { FunctionEditor } from '../FunctionEditor';
-import { GridSheet } from '../GridSheet';
-import { SheetProvider, type SheetProviderProps } from '../SheetContext';
-import { Toolbar } from '../Toolbar';
-
-export const SheetContainer = ({ graph, sheet, role }: SheetProviderProps & { role?: string }) => {
-  return (
-    <SheetProvider sheet={sheet} graph={graph}>
-      <Toolbar.Root role={role}>
-        <Toolbar.Styles />
-        <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

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

package/src/components/SheetContext/SheetContext.tsx

@@ -1,104 +0,0 @@
-//
-// 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, useSelectThreadOnCellFocus, useThreadDecorations } from '../../hooks';
-import { type SheetModel, createDecorations } from '../../model';
-import { type SheetType } from '../../types';
-
-export type SheetContextValue = {
-  id: string;
-
-  model: SheetModel;
-
-  // 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,
-  onInfo,
-  children,
-  __gridScope,
-}: GridScopedProps<PropsWithChildren<Pick<SheetContextValue, 'onInfo' | 'model'>>>) => {
-  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,
-        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 });
-
-  return !model ? null : (
-    <Grid.Root id={fullyQualifiedId(sheet)}>
-      <SheetProviderImpl model={model} onInfo={onInfo}>
-        {children}
-      </SheetProviderImpl>
-    </Grid.Root>
-  );
-};

package/src/components/SheetContext/index.ts

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

package/src/defs/index.ts

@@ -1,7 +0,0 @@
-//
-// Copyright 2024 DXOS.org
-//
-
-export * from './types';
-export * from './util';
-export * from './sheet-range-types';

package/src/defs/sheet-range-types.ts

@@ -1,46 +0,0 @@
-//
-// Copyright 2024 DXOS.org
-//
-
-import { type ClassNameValue } from '@dxos/react-ui';
-
-import { type SheetType } from '../types';
-
-export const alignKey = 'align';
-export type AlignKey = typeof alignKey;
-export type AlignValue = 'start' | 'center' | 'end' | 'unset';
-
-export const commentKey = 'comment';
-export type CommentKey = typeof commentKey;
-export type CommentValue = string;
-
-export const styleKey = 'style';
-export type StyleKey = typeof styleKey;
-export type StyleValue = 'highlight' | 'unset';
-
-export const cellClassNameForRange = ({ key, value }: SheetType['ranges'][number]): ClassNameValue => {
-  switch (key) {
-    case 'align':
-      switch (value) {
-        case 'start':
-          return 'text-start';
-        case 'center':
-          return 'text-center';
-        case 'end':
-          return 'text-end';
-        default:
-          return undefined;
-      }
-    case 'comment':
-      return 'bg-gridComment';
-    case 'style':
-      switch (value) {
-        case 'highlight':
-          return 'bg-gridHighlight';
-        default:
-          return undefined;
-      }
-    default:
-      return undefined;
-  }
-};