@dxos/plugin-sheet 0.7.4 → 0.7.5-labs.071a3e2

package/src/components/SheetObjectSettings.tsx

@@ -1,38 +0,0 @@
-//
-// Copyright 2024 DXOS.org
-//
-
-import React from 'react';
-
-import { SPACE_PLUGIN } from '@dxos/plugin-space/meta';
-import { Input, useTranslation } from '@dxos/react-ui';
-
-import { RangeList } from './RangeList';
-import { type SheetType } from '../types';
-
-export type SheetObjectSettingsProps = {
-  sheet: SheetType;
-};
-
-export const SheetObjectSettings = ({ sheet }: SheetObjectSettingsProps) => {
-  const { t } = useTranslation(SPACE_PLUGIN);
-
-  // TODO(burdon): Standardize forms.
-  return (
-    <>
-      <div role='form' className='flex flex-col w-full p-2 gap-1'>
-        <Input.Root>
-          <Input.Label>{t('name label')}</Input.Label>
-          <Input.TextInput
-            placeholder={t('name placeholder')}
-            value={sheet.name ?? ''}
-            onChange={(event) => {
-              sheet.name = event.target.value;
-            }}
-          />
-        </Input.Root>
-      </div>
-      <RangeList sheet={sheet} />
-    </>
-  );
-};

package/src/components/Toolbar/Toolbar.tsx

@@ -1,346 +0,0 @@
-//
-// Copyright 2024 DXOS.org
-//
-
-import { createContext } from '@radix-ui/react-context';
-import React, { type PropsWithChildren, useCallback } from 'react';
-
-import { useIntentDispatcher } from '@dxos/app-framework';
-import {
-  Icon,
-  type ThemedClassName,
-  Toolbar as NaturalToolbar,
-  type ToolbarButtonProps as NaturalToolbarButtonProps,
-  type ToolbarToggleGroupItemProps as NaturalToolbarToggleGroupItemProps,
-  type ToolbarToggleProps as NaturalToolbarToggleProps,
-  Tooltip,
-  useTranslation,
-} from '@dxos/react-ui';
-import { useAttention } from '@dxos/react-ui-attention';
-import { nonNullable } from '@dxos/util';
-
-import {
-  alignKey,
-  type AlignKey,
-  type AlignValue,
-  type CommentKey,
-  type CommentValue,
-  inRange,
-  rangeFromIndex,
-  rangeToIndex,
-  styleKey,
-  type StyleKey,
-  type StyleValue,
-} from '../../defs';
-import { completeCellRangeToThreadCursor } from '../../integrations';
-import { SHEET_PLUGIN } from '../../meta';
-import { type SheetType } from '../../types';
-import { useSheetContext } from '../SheetContext';
-
-//
-// Buttons
-//
-
-const buttonStyles = 'min-bs-0 p-2';
-const tooltipProps = { side: 'bottom' as const, classNames: 'z-10' };
-
-const ToolbarSeparator = () => <div role='separator' className='grow' />;
-
-//
-// ToolbarItem
-//
-
-type ToolbarItemProps =
-  | (NaturalToolbarButtonProps & { itemType: 'button'; icon: string })
-  | (NaturalToolbarToggleGroupItemProps & { itemType: 'toggleGroupItem'; icon: string })
-  | (NaturalToolbarToggleProps & { itemType: 'toggle'; icon: string });
-
-export const ToolbarItem = ({ itemType, icon, children, ...props }: ToolbarItemProps) => {
-  const Invoker =
-    itemType === 'toggleGroupItem'
-      ? NaturalToolbar.ToggleGroupItem
-      : itemType === 'toggle'
-        ? NaturalToolbar.Toggle
-        : NaturalToolbar.Button;
-  return (
-    <Tooltip.Root>
-      <Tooltip.Trigger asChild>
-        {/* TODO(thure): type the props spread better. */}
-        <Invoker variant='ghost' {...(props as any)} classNames={buttonStyles}>
-          <Icon icon={icon} size={5} />
-          <span className='sr-only'>{children}</span>
-        </Invoker>
-      </Tooltip.Trigger>
-      <Tooltip.Portal>
-        <Tooltip.Content {...tooltipProps}>
-          {children}
-          <Tooltip.Arrow />
-        </Tooltip.Content>
-      </Tooltip.Portal>
-    </Tooltip.Root>
-  );
-};
-
-//
-// Root
-//
-
-type AlignAction = { key: AlignKey; value: AlignValue };
-type CommentAction = { key: CommentKey; value: CommentValue; cellContent?: string };
-type StyleAction = { key: StyleKey; value: StyleValue };
-
-export type ToolbarAction = StyleAction | AlignAction | CommentAction;
-export type ToolbarActionAnnotated = ToolbarAction & { unset?: boolean };
-
-export type ToolbarActionType = ToolbarAction['key'];
-
-export type ToolbarActionHandler = (action: ToolbarActionAnnotated) => void;
-
-export type ToolbarProps = ThemedClassName<
-  PropsWithChildren<{
-    role?: string;
-  }>
->;
-
-const [ToolbarContextProvider, useToolbarContext] = createContext<{
-  onAction: (action: ToolbarActionAnnotated) => void;
-}>('Toolbar');
-
-type Range = SheetType['ranges'][number];
-
-const ToolbarRoot = ({ children, role, classNames }: ToolbarProps) => {
-  const { id, model, cursorFallbackRange, cursor } = useSheetContext();
-  const { hasAttention } = useAttention(id);
-  const dispatch = useIntentDispatcher();
-
-  // TODO(Zan): Externalize the toolbar action handler. E.g., Toolbar/keys should both fire events.
-  const handleAction = useCallback(
-    (action: ToolbarActionAnnotated) => {
-      switch (action.key) {
-        case 'alignment':
-          if (cursorFallbackRange) {
-            const index =
-              model.sheet.ranges?.findIndex(
-                (range) =>
-                  range.key === action.key &&
-                  inRange(rangeFromIndex(model.sheet, range.range), cursorFallbackRange.from),
-              ) ?? -1;
-            const nextRangeEntity = {
-              range: rangeToIndex(model.sheet, cursorFallbackRange),
-              key: action.key,
-              value: action.value,
-            };
-            if (index < 0) {
-              model.sheet.ranges?.push(nextRangeEntity);
-            } else if (model.sheet.ranges![index].value === action.value) {
-              model.sheet.ranges?.splice(index, 1);
-            } else {
-              model.sheet.ranges?.splice(index, 1, nextRangeEntity);
-            }
-          }
-          break;
-        case 'style':
-          if (action.unset) {
-            const index = model.sheet.ranges?.findIndex(
-              (range) =>
-                range.key === action.key &&
-                cursorFallbackRange &&
-                inRange(rangeFromIndex(model.sheet, range.range), cursorFallbackRange.from),
-            );
-            if (index >= 0) {
-              model.sheet.ranges?.splice(index, 1);
-            }
-          } else if (cursorFallbackRange) {
-            model.sheet.ranges?.push({
-              range: rangeToIndex(model.sheet, cursorFallbackRange),
-              key: action.key,
-              value: action.value,
-            });
-          }
-          break;
-        case 'comment': {
-          // TODO(Zan): We shouldn't hardcode the action ID.
-          if (cursorFallbackRange) {
-            void dispatch({
-              action: 'dxos.org/plugin/thread/action/create',
-              data: {
-                cursor: completeCellRangeToThreadCursor(cursorFallbackRange),
-                name: action.cellContent,
-                subject: model.sheet,
-              },
-            });
-          }
-        }
-      }
-    },
-    [model.sheet, cursorFallbackRange, cursor, dispatch],
-  );
-
-  return (
-    <ToolbarContextProvider onAction={handleAction}>
-      <NaturalToolbar.Root classNames={['pli-0.5 attention-surface', !hasAttention && 'opacity-20', classNames]}>
-        {children}
-      </NaturalToolbar.Root>
-    </ToolbarContextProvider>
-  );
-};
-
-// TODO(burdon): Generalize.
-// TODO(burdon): Detect and display current state.
-type ButtonProps<T> = {
-  value: T;
-  icon: string;
-  disabled?: (state: Range) => boolean;
-};
-
-//
-// Alignment
-//
-
-const alignmentOptions: ButtonProps<AlignValue>[] = [
-  { value: 'start', icon: 'ph--text-align-left--regular' },
-  { value: 'center', icon: 'ph--text-align-center--regular' },
-  { value: 'end', icon: 'ph--text-align-right--regular' },
-];
-
-const Alignment = () => {
-  const { cursor, model } = useSheetContext();
-  const { onAction } = useToolbarContext('Alignment');
-  const { t } = useTranslation(SHEET_PLUGIN);
-
-  // TODO(thure): Can this O(n) call be memoized?
-  const value = cursor
-    ? model.sheet.ranges?.findLast(
-        ({ range, key }) => key === alignKey && inRange(rangeFromIndex(model.sheet, range), cursor),
-      )?.value
-    : undefined;
-
-  return (
-    <NaturalToolbar.ToggleGroup
-      type='single'
-      value={
-        // TODO(thure): providing `undefined` leaves the last item active which was active rather than showing none.
-        value ?? 'never'
-      }
-      onValueChange={(value: AlignValue) => onAction?.({ key: alignKey, value })}
-    >
-      {alignmentOptions.map(({ value, icon }) => (
-        <ToolbarItem
-          itemType='toggleGroupItem'
-          key={value}
-          value={value}
-          icon={icon}
-          data-testid={`grid.toolbar.${alignKey}.${value}`}
-        >
-          {t('toolbar action label', {
-            key: t(`range key ${alignKey} label`),
-            value: t(`range value ${value} label`),
-          })}
-        </ToolbarItem>
-      ))}
-    </NaturalToolbar.ToggleGroup>
-  );
-};
-
-const styleOptions: ButtonProps<StyleValue>[] = [
-  { value: 'highlight', icon: 'ph--highlighter--regular' },
-  { value: 'softwrap', icon: 'ph--paragraph--regular' },
-];
-
-const Styles = () => {
-  const { cursorFallbackRange, model } = useSheetContext();
-  const { onAction } = useToolbarContext('Styles');
-  const { t } = useTranslation(SHEET_PLUGIN);
-
-  // TODO(thure): Can this O(n) call be memoized?
-  const activeValues = cursorFallbackRange
-    ? model.sheet.ranges
-        ?.filter(
-          ({ range, key }) => key === 'style' && inRange(rangeFromIndex(model.sheet, range), cursorFallbackRange.from),
-        )
-        .reduce((acc, { value }) => {
-          acc.add(value);
-          return acc;
-        }, new Set())
-    : undefined;
-
-  return (
-    <>
-      {styleOptions.map(({ value, icon }) => (
-        <ToolbarItem
-          itemType='toggle'
-          key={value}
-          pressed={activeValues?.has(value)}
-          onPressedChange={(nextPressed: boolean) => {
-            onAction?.({ key: 'style', value, unset: !nextPressed });
-          }}
-          icon={icon}
-        >
-          {t('toolbar action label', {
-            key: t(`range key ${styleKey} label`),
-            value: t(`range value ${value} label`),
-          })}
-        </ToolbarItem>
-      ))}
-    </>
-  );
-};
-
-//
-// Actions
-//
-
-const Actions = () => {
-  const { onAction } = useToolbarContext('Actions');
-  const { cursorFallbackRange, cursor, model } = useSheetContext();
-  const { t } = useTranslation(SHEET_PLUGIN);
-
-  // TODO(thure): Can this O(n) call be memoized?
-  const overlapsCommentAnchor = (model.sheet.threads ?? [])
-    .filter(nonNullable)
-    .filter((thread) => thread.status !== 'resolved')
-    .some((thread) => {
-      if (!cursorFallbackRange) {
-        return false;
-      }
-      return rangeToIndex(model.sheet, cursorFallbackRange) === thread.anchor;
-    });
-
-  const tooltipLabelKey = !cursor
-    ? 'no cursor label'
-    : overlapsCommentAnchor
-      ? 'selection overlaps existing comment label'
-      : 'comment label';
-
-  return (
-    <ToolbarItem
-      itemType='button'
-      value='comment'
-      icon='ph--chat-text--regular'
-      data-testid='editor.toolbar.comment'
-      onClick={() => {
-        if (!cursorFallbackRange) {
-          return;
-        }
-        return onAction?.({
-          key: 'comment',
-          value: rangeToIndex(model.sheet, cursorFallbackRange),
-          cellContent: model.getCellText(cursorFallbackRange.from),
-        });
-      }}
-      disabled={!cursorFallbackRange || overlapsCommentAnchor}
-    >
-      {t(tooltipLabelKey)}
-    </ToolbarItem>
-  );
-};
-
-export const Toolbar = {
-  Root: ToolbarRoot,
-  Separator: ToolbarSeparator,
-  Alignment,
-  Styles,
-  Actions,
-};
-
-export { useToolbarContext };

package/src/compute-graph/compute-graph-registry.ts

@@ -1,90 +0,0 @@
-//
-// Copyright 2024 DXOS.org
-//
-
-import type { FunctionPluginDefinition } from 'hyperformula';
-import type { ConfigParams } from 'hyperformula/typings/ConfigParams';
-import type { FunctionTranslationsPackage } from 'hyperformula/typings/interpreter';
-import defaultsDeep from 'lodash.defaultsdeep';
-
-import { type SpaceId, type Space } from '@dxos/client/echo';
-import { Resource } from '@dxos/context';
-import { invariant } from '@dxos/invariant';
-import { log } from '@dxos/log';
-
-import { HyperFormula } from '#hyperformula';
-import { ComputeGraph } from './compute-graph';
-import { EdgeFunctionPlugin, EdgeFunctionPluginTranslations, type FunctionContextOptions } from './functions';
-
-export type ComputeGraphPlugin = {
-  plugin: FunctionPluginDefinition;
-  translations: FunctionTranslationsPackage;
-};
-
-export type ComputeGraphOptions = {
-  plugins?: ComputeGraphPlugin[];
-} & Partial<FunctionContextOptions> &
-  Partial<ConfigParams>;
-
-export const defaultOptions: ComputeGraphOptions = {
-  licenseKey: 'gpl-v3',
-};
-
-export const defaultPlugins: ComputeGraphPlugin[] = [
-  {
-    plugin: EdgeFunctionPlugin,
-    translations: EdgeFunctionPluginTranslations,
-  },
-];
-
-/**
- * Manages a collection of ComputeGraph instances for each space.
- *
- * [ComputePlugin] => [ComputeGraphRegistry] => [ComputeGraph(Space)] => [ComputeNode(Object)]
- *
- * NOTE: The ComputeGraphRegistry manages the hierarchy of resources via its root Context.
- * NOTE: The package.json file defines the packaged #hyperformula module.
- */
-// TODO(burdon): Move graph into separate plugin; isolate HF deps.
-export class ComputeGraphRegistry extends Resource {
-  private readonly _graphs = new Map<SpaceId, ComputeGraph>();
-
-  private readonly _options: ComputeGraphOptions;
-
-  constructor(options: ComputeGraphOptions = { plugins: defaultPlugins }) {
-    super();
-    this._options = defaultsDeep({}, options, defaultOptions);
-    this._options.plugins?.forEach(({ plugin, translations }) => {
-      HyperFormula.registerFunctionPlugin(plugin, translations);
-    });
-  }
-
-  getGraph(spaceId: SpaceId): ComputeGraph | undefined {
-    return this._graphs.get(spaceId);
-  }
-
-  getOrCreateGraph(space: Space): ComputeGraph {
-    let graph = this._graphs.get(space.id);
-    if (!graph) {
-      log('create graph', { space: space.id });
-      graph = this.createGraph(space);
-    }
-
-    return graph;
-  }
-
-  createGraph(space: Space): ComputeGraph {
-    invariant(!this._graphs.has(space.id), `ComputeGraph already exists for space: ${space.id}`);
-    const hf = HyperFormula.buildEmpty(this._options);
-    const graph = new ComputeGraph(hf, space, this._options);
-    this._graphs.set(space.id, graph);
-    return graph;
-  }
-
-  protected override async _close() {
-    for (const graph of this._graphs.values()) {
-      await graph.close();
-    }
-    this._graphs.clear();
-  }
-}

package/src/compute-graph/compute-graph.test.ts

@@ -1,87 +0,0 @@
-//
-// Copyright 2024 DXOS.org
-//
-
-import { type CellValue } from 'hyperformula';
-import { afterEach, beforeEach, describe, expect, test } from 'vitest';
-
-import { Trigger } from '@dxos/async';
-import { create, fullyQualifiedId } from '@dxos/client/echo';
-import { FunctionType } from '@dxos/plugin-script/types';
-
-import { DetailedCellError } from '#hyperformula';
-import { TestBuilder } from './testing';
-
-describe('ComputeGraph', () => {
-  let testBuilder: TestBuilder;
-  beforeEach(async () => {
-    testBuilder = new TestBuilder({ types: [FunctionType] });
-    await testBuilder.open();
-  });
-  afterEach(async () => {
-    await testBuilder.close();
-  });
-
-  test('map functions', async () => {
-    const space = await testBuilder.client.spaces.create();
-    const graph = testBuilder.registry.createGraph(space);
-    await graph.open();
-
-    // Create script.
-    const trigger = new Trigger();
-    graph.update.once(() => trigger.wake());
-    const functionObject = space.db.add(create(FunctionType, { name: 'test', version: '0.0.1', binding: 'TEST' }));
-    await trigger.wait();
-    const functions = graph.getFunctions({ echo: true });
-    expect(functions).to.toHaveLength(1);
-
-    const id = graph.mapFunctionBindingToId('TEST()');
-    expect(id).to.eq(`${fullyQualifiedId(functionObject)}()`);
-  });
-
-  test('cross-node references', async () => {
-    const space = await testBuilder.client.spaces.create();
-    const graph = testBuilder.registry.createGraph(space);
-
-    // Create nodes.
-    const node1 = await graph.getOrCreateNode('node-1').open();
-    const node2 = await graph.getOrCreateNode('node-2').open();
-    expect(graph.hf.getSheetNames()).to.toHaveLength(2);
-
-    {
-      node1.graph.hf.setCellContents({ sheet: node1.sheetId, row: 0, col: 0 }, [[100, 200, 300, '=SUM(A1:C1)']]);
-      node2.graph.hf.setCellContents({ sheet: node2.sheetId, row: 0, col: 0 }, "='node-1'!D1");
-      const value1 = node1.graph.hf.getCellValue({ sheet: node1.sheetId, col: 3, row: 0 });
-      const value2 = node2.graph.hf.getCellValue({ sheet: node2.sheetId, col: 0, row: 0 });
-      expect(value1).to.eq(value2);
-    }
-
-    // Get updated event.
-    const trigger = new Trigger<CellValue>();
-    node2.update.on(({ change }) => {
-      const value = node2.graph.hf.getCellValue({ sheet: node2.sheetId, col: 0, row: 0 });
-      expect(value).to.eq(change?.newValue);
-      trigger.wake(value);
-    });
-
-    {
-      node1.graph.hf.setCellContents({ sheet: node1.sheetId, row: 0, col: 0 }, 400);
-      const value1 = node1.graph.hf.getCellValue({ sheet: node1.sheetId, col: 3, row: 0 });
-      const value2 = await trigger.wait();
-      expect(value1).to.eq(value2);
-    }
-  });
-
-  // TODO(burdon): Dynamically load node/model based on dependencies.
-  //  - Create dependency then close model.
-  test('dynamic loading', async () => {
-    const space = await testBuilder.client.spaces.create();
-    const graph = testBuilder.registry.createGraph(space);
-
-    const node1 = await graph.getOrCreateNode('node-1').open();
-    node1.graph.hf.setCellContents({ sheet: node1.sheetId, row: 0, col: 0 }, "='node-2'!A1");
-    const value1 = node1.graph.hf.getCellValue({ sheet: node1.sheetId, col: 0, row: 0 });
-    expect(value1).to.be.instanceof(DetailedCellError);
-    expect((value1 as DetailedCellError).type).to.eq('REF');
-  });
-});