@dxos/plugin-sheet 0.6.12-main.f9d0246 → 0.6.12-staging.0b4bb48

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/GridSheet/GridSheet.stories.tsx

@@ -1,36 +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 { useTestSheet, withComputeGraphDecorator } from '../../testing';
-import { SheetType } from '../../types';
-
-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);
-  if (!sheet || !space) {
-    return null;
-  }
-
-  return <GridSheet graph={graph} sheet={sheet} />;
-};

package/src/components/GridSheet/GridSheet.tsx

@@ -1,153 +0,0 @@
-//
-// Copyright 2024 DXOS.org
-//
-
-import React, { useCallback, useMemo, useRef } from 'react';
-
-import {
-  type DxGridElement,
-  Grid,
-  type GridContentProps,
-  type GridScopedProps,
-  useGridContext,
-} from '@dxos/react-ui-grid';
-
-import { dxGridCellIndexToSheetCellAddress, useSheetModelDxGridProps } from './util';
-import { rangeToA1Notation, type CellRange } from '../../defs';
-import { type ComputeGraph } from '../../graph';
-import { useFormattingModel, useSheetModel, type UseSheetModelOptions } from '../../hooks';
-import { type SheetModel, type FormattingModel } from '../../model';
-import { type SheetType } from '../../types';
-import {
-  CellEditor,
-  type CellEditorProps,
-  type CellRangeNotifier,
-  editorKeys,
-  type EditorKeysProps,
-  rangeExtension,
-  sheetExtension,
-} from '../CellEditor';
-
-const GridSheetCellEditor = ({
-  model,
-  extension,
-  __gridScope,
-}: GridScopedProps<Pick<CellEditorProps, 'extension'> & { model: SheetModel }>) => {
-  const { id, editing, setEditing, editBox } = useGridContext('GridSheetCellEditor', __gridScope);
-  const cell = dxGridCellIndexToSheetCellAddress(editing);
-
-  return editing ? (
-    <CellEditor
-      variant='grid'
-      value={editing.initialContent ?? (cell ? model.getCellText(cell) : undefined)}
-      autoFocus
-      box={editBox}
-      onBlur={() => setEditing(null)}
-      extension={extension}
-      gridId={id}
-    />
-  ) : null;
-};
-
-const sheetRowDefault = { size: 32, resizeable: true };
-const sheetColDefault = { size: 180, resizeable: true };
-
-const GridSheetImpl = ({
-  model,
-  formatting,
-  __gridScope,
-}: GridScopedProps<{ model: SheetModel; formatting: FormattingModel }>) => {
-  const { editing, setEditing } = useGridContext('GridSheetCellEditor', __gridScope);
-  const dxGrid = useRef<DxGridElement | null>(null);
-  const rangeNotifier = useRef<CellRangeNotifier>();
-
-  // 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)!, 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 }) => {
-      if (editing) {
-        const range: CellRange = { from: { col: minCol, row: minRow } };
-        if (minCol !== maxCol || minRow !== maxRow) {
-          range.to = { col: maxCol, row: maxRow };
-        }
-        // Update range selection in formula.
-        rangeNotifier.current?.(rangeToA1Notation(range));
-      }
-    },
-    [editing],
-  );
-
-  const { columns, rows } = useSheetModelDxGridProps(dxGrid, model, formatting);
-
-  const extension = useMemo(
-    () => [
-      editorKeys({ onClose: handleClose, ...(editing?.initialContent && { onNav: handleClose }) }),
-      sheetExtension({ functions: model.graph.getFunctions() }),
-      rangeExtension((fn) => (rangeNotifier.current = fn)),
-    ],
-    [model, handleClose, editing],
-  );
-
-  return (
-    <>
-      <GridSheetCellEditor model={model} extension={extension} />
-      <Grid.Content
-        initialCells={{}}
-        columns={columns}
-        rows={rows}
-        onAxisResize={handleAxisResize}
-        onSelect={handleSelect}
-        rowDefault={sheetRowDefault}
-        columnDefault={sheetColDefault}
-        ref={dxGrid}
-      />
-    </>
-  );
-};
-
-export type GridSheetProps = { graph?: ComputeGraph; sheet?: SheetType } & UseSheetModelOptions;
-
-export const GridSheet = ({ graph, sheet, ...options }: GridSheetProps) => {
-  const model = useSheetModel(graph, sheet, options);
-  const formatting = useFormattingModel(model);
-  if (!model || !formatting) {
-    return null;
-  }
-
-  return (
-    <Grid.Root id={model.id}>
-      <GridSheetImpl model={model} formatting={formatting} />
-    </Grid.Root>
-  );
-};

package/src/components/GridSheet/util.ts

@@ -1,108 +0,0 @@
-//
-// Copyright 2024 DXOS.org
-//
-
-import { type MutableRefObject, useEffect, useLayoutEffect, useState } from 'react';
-
-import { createDocAccessor } from '@dxos/react-client/echo';
-import {
-  type GridEditing,
-  type GridContentProps,
-  type DxGridElement,
-  type DxGridCells,
-  type DxGridAxisMeta,
-  type DxGridRange,
-} 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 = (gridEditing: GridEditing): CellAddress | null => {
-  if (!gridEditing) {
-    return null;
-  }
-  const [colStr, rowStr] = gridEditing.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[numericIndex] = { size: model.sheet.columnMeta[columnId].size, resizeable: true };
-    }
-    return acc;
-  }, {});
-};
-
-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[numericIndex] = { size: model.sheet.rowMeta[rowId].size, resizeable: true };
-    }
-    return acc;
-  }, {});
-};
-
-const cellGetter = (model: SheetModel, formatting: FormattingModel) => {
-  // TODO(thure): Actually use the cache.
-  let _cachedBounds: DxGridRange | null = null;
-  const cachedCells: DxGridCells = {};
-  return (nextBounds: DxGridRange): DxGridCells => {
-    [...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) {
-          cachedCells[`${col},${row}`] = { value: cell.value, className: mx(cell.classNames) };
-        }
-      });
-    });
-    _cachedBounds = nextBounds;
-    return cachedCells;
-  };
-};
-
-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/Sheet/decorations.ts

@@ -1,62 +0,0 @@
-//
-// Copyright 2024 DXOS.org
-//
-
-import { create } from '@dxos/echo-schema';
-
-export type Decoration = {
-  type: string;
-  /**
-   * A wrapping render function to encapsulate cell content. This function is applied between
-   * the cell's border and its padding/layout/content, allowing for custom rendering or
-   * additional elements to be inserted around the cell's main content.
-   */
-  decorate?: (props: { children: React.ReactNode }) => React.ReactNode;
-  /**
-   * An array of CSS class names to be applied to the content of the SheetCell.
-   * These classes can be used to style the cell's content independently of its structure.
-   */
-  classNames?: string[];
-  cellIndex: string;
-};
-
-export const createDecorations = () => {
-  // Reactive object to hold decorations
-  // TODO(Zan): Use CELL ID's to key the decoration map.
-  // TODO(Zan): Consider maintaining an index of decorations by type.
-  const { decorations } = create<{ decorations: Record<string, Decoration[]> }>({ decorations: {} });
-
-  const addDecoration = (cellIndex: string, decorator: Decoration) => {
-    decorations[cellIndex] = [...(decorations[cellIndex] || []), decorator];
-  };
-
-  const removeDecoration = (cellIndex: string, type?: string) => {
-    if (type) {
-      decorations[cellIndex] = (decorations[cellIndex] || []).filter((d) => d.type !== type);
-    } else {
-      delete decorations[cellIndex];
-    }
-  };
-
-  // TODO(Zan): I should check if returning the a value from a map in a deep signal is a reactive slice.
-  const getDecorationsForCell = (cellIndex: string): Decoration[] | undefined => {
-    return decorations[cellIndex];
-  };
-
-  const getAllDecorations = (): Decoration[] => {
-    const result: Decoration[] = [];
-    for (const decoratorArray of Object.values(decorations)) {
-      for (const decorator of decoratorArray) {
-        result.push(decorator);
-      }
-    }
-    return result;
-  };
-
-  return {
-    addDecoration,
-    removeDecoration,
-    getDecorationsForCell,
-    getAllDecorations,
-  } as const;
-};

package/src/components/Sheet/threads.tsx

@@ -1,205 +0,0 @@
-//
-// Copyright 2024 DXOS.org
-//
-
-import { effect } from '@preact/signals-core';
-import React, { type PropsWithChildren, useCallback, useEffect, useMemo } from 'react';
-
-import { type IntentResolver, LayoutAction, useIntentDispatcher, useIntentResolver } from '@dxos/app-framework';
-import { debounce } from '@dxos/async';
-import { fullyQualifiedId } from '@dxos/react-client/echo';
-import { Icon, useTranslation } from '@dxos/react-ui';
-
-import { type Decoration } from './decorations';
-import { useSheetContext } from './sheet-context';
-import { addressFromIndex, addressToIndex, type CellAddress, closest } from '../../defs';
-import { SHEET_PLUGIN } from '../../meta';
-
-// TODO(burdon): Move into folder; split hooks.
-
-const CommentIndicator = () => {
-  return (
-    <div
-      role='none'
-      className='absolute top-0 right-0 w-0 h-0 border-t-8 border-l-8 border-t-cmCommentSurface border-l-transparent'
-    />
-  );
-};
-
-const ThreadedCellWrapper = ({ children }: PropsWithChildren) => {
-  const dispatch = useIntentDispatcher();
-  const [isHovered, setIsHovered] = React.useState(false);
-  const { t } = useTranslation(SHEET_PLUGIN);
-
-  const handleClick = React.useCallback(
-    (_event: React.MouseEvent) => {
-      void dispatch({ action: LayoutAction.SET_LAYOUT, data: { element: 'complementary', state: true } });
-    },
-    [dispatch],
-  );
-
-  return (
-    <div
-      role='none'
-      className='relative h-full is-full'
-      onMouseEnter={() => {
-        setIsHovered(true);
-      }}
-      onMouseLeave={() => {
-        setIsHovered(false);
-      }}
-    >
-      <CommentIndicator />
-      {isHovered && (
-        <div className='absolute inset-0 flex items-center justify-end pr-1'>
-          <button
-            className='ch-button text-xs min-bs-0 p-1'
-            onClick={handleClick}
-            aria-label={t('open comment for sheet cell')}
-          >
-            <Icon icon='ph--chat--regular' aria-hidden={true} />
-          </button>
-        </div>
-      )}
-      {children}
-    </div>
-  );
-};
-
-const createThreadDecoration = (cellIndex: string, threadId: string, sheetId: string): Decoration => {
-  return {
-    type: 'comment',
-    cellIndex,
-    decorate: (props) => <ThreadedCellWrapper {...props} />,
-  };
-};
-
-// TODO(burdon): Factor out hooks.
-
-const useUpdateCursorOnThreadSelection = () => {
-  const { setCursor, model } = useSheetContext();
-
-  const handleScrollIntoView: IntentResolver = useCallback(
-    ({ action, data }) => {
-      switch (action) {
-        case LayoutAction.SCROLL_INTO_VIEW: {
-          if (!data?.id || data?.cursor === undefined || data?.id !== fullyQualifiedId(model.sheet)) {
-            return;
-          }
-
-          // TODO(Zan): Everywhere we refer to the cursor in a thread context should change to `anchor`.
-          const cellAddress = addressFromIndex(model.sheet, data.cursor);
-          setCursor(cellAddress);
-        }
-      }
-    },
-    [model.sheet, setCursor],
-  );
-
-  useIntentResolver(SHEET_PLUGIN, handleScrollIntoView);
-};
-
-const useSelectThreadOnCursorChange = () => {
-  const { cursor, model } = useSheetContext();
-  const dispatch = useIntentDispatcher();
-
-  const activeThreads = useMemo(
-    () =>
-      model.sheet.threads?.filter(
-        (thread): thread is NonNullable<typeof thread> => !!thread && thread.status === 'active',
-      ) ?? [],
-    [JSON.stringify(model.sheet.threads)],
-  );
-
-  const activeThreadAddresses = useMemo(
-    () =>
-      activeThreads
-        .map((thread) => thread.anchor)
-        .filter((anchor): anchor is NonNullable<typeof anchor> => anchor !== undefined)
-        .map((anchor) => addressFromIndex(model.sheet, anchor)),
-    [activeThreads, model.sheet],
-  );
-
-  const selectClosestThread = useCallback(
-    (cellAddress: CellAddress) => {
-      if (!cellAddress || !activeThreads) {
-        return;
-      }
-
-      const closestThreadAnchor = closest(cellAddress, activeThreadAddresses);
-      if (closestThreadAnchor) {
-        const closestThread = activeThreads.find(
-          (thread) => thread && thread.anchor === addressToIndex(model.sheet, closestThreadAnchor),
-        );
-
-        if (closestThread) {
-          void dispatch([
-            { action: 'dxos.org/plugin/thread/action/select', data: { current: fullyQualifiedId(closestThread) } },
-          ]);
-        }
-      }
-    },
-    [dispatch, activeThreads, activeThreadAddresses, model.sheet],
-  );
-
-  const debounced = useMemo(() => {
-    return debounce((cursor: CellAddress) => requestAnimationFrame(() => selectClosestThread(cursor)), 50);
-  }, [selectClosestThread]);
-
-  useEffect(() => {
-    if (!cursor) {
-      return;
-    }
-    debounced(cursor);
-  }, [cursor, selectClosestThread]);
-};
-
-const useThreadDecorations = () => {
-  const { decorations, model } = useSheetContext();
-  const sheet = useMemo(() => model.sheet, [model.sheet]);
-  const sheetId = useMemo(() => fullyQualifiedId(sheet), [sheet]);
-
-  useEffect(() => {
-    const unsubscribe = effect(() => {
-      const activeThreadAnchors = new Set<string>();
-      if (!sheet.threads) {
-        return;
-      }
-
-      // Process active threads
-      for (const thread of sheet.threads) {
-        if (!thread || thread.anchor === undefined || thread.status === 'resolved') {
-          continue;
-        }
-
-        activeThreadAnchors.add(thread.anchor);
-        const index = thread.anchor;
-
-        // Add decoration only if it doesn't already exist
-        const existingDecorations = decorations.getDecorationsForCell(index);
-        if (!existingDecorations || !existingDecorations.some((d) => d.type === 'comment')) {
-          decorations.addDecoration(index, createThreadDecoration(index, thread.id, sheetId));
-        }
-      }
-
-      // Remove decorations for resolved or deleted threads
-      for (const decoration of decorations.getAllDecorations()) {
-        if (decoration.type !== 'comment') {
-          continue;
-        }
-
-        if (!activeThreadAnchors.has(decoration.cellIndex)) {
-          decorations.removeDecoration(decoration.cellIndex, 'comment');
-        }
-      }
-    });
-
-    return () => unsubscribe();
-  });
-};
-
-export const useThreads = () => {
-  useUpdateCursorOnThreadSelection();
-  useSelectThreadOnCursorChange();
-  useThreadDecorations();
-};

package/src/defs/index.ts

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