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

package/src/components/Toolbar/Toolbar.tsx

@@ -2,265 +2,167 @@
 // Copyright 2024 DXOS.org
 //
 
+import {
+  type Icon,
+  Calendar,
+  ChatText,
+  CurrencyDollar,
+  Eraser,
+  HighlighterCircle,
+  TextAlignCenter,
+  TextAlignLeft,
+  TextAlignRight,
+} from '@phosphor-icons/react';
 import { createContext } from '@radix-ui/react-context';
-import React, { type PropsWithChildren, useCallback, useMemo } from 'react';
+import React, { type PropsWithChildren } from 'react';
 
-import { useIntentDispatcher } from '@dxos/app-framework';
 import {
-  Icon,
+  DensityProvider,
+  ElevationProvider,
   Toolbar as NaturalToolbar,
-  useTranslation,
-  Tooltip,
-  type ToolbarToggleGroupItemProps as NaturalToolbarToggleGroupItemProps,
-  type ToolbarButtonProps as NaturalToolbarButtonProps,
-  type ToolbarToggleProps as NaturalToolbarToggleProps,
   type ThemedClassName,
+  useTranslation,
 } from '@dxos/react-ui';
-import { useAttention } from '@dxos/react-ui-attention';
-import { nonNullable } from '@dxos/util';
 
-import {
-  addressToIndex,
-  type AlignKey,
-  type AlignValue,
-  type CommentKey,
-  type CommentValue,
-  inRange,
-  type StyleKey,
-  type StyleValue,
-} from '../../defs';
+import { ToolbarButton, ToolbarSeparator, ToolbarToggleButton } from './common';
 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>
-  );
-};
+import { type Formatting } from '../../types';
 
 //
 // 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 ToolbarActionType = 'clear' | 'highlight' | 'left' | 'center' | 'right' | 'date' | 'currency';
 
-export type ToolbarActionType = ToolbarAction['key'];
+export type ToolbarAction = {
+  type: ToolbarActionType;
+};
 
-export type ToolbarActionHandler = (action: ToolbarAction) => void;
+export type ToolbarActionHandler = ({ type }: ToolbarAction) => void;
 
 export type ToolbarProps = ThemedClassName<
   PropsWithChildren<{
-    role?: string;
+    onAction?: ToolbarActionHandler;
   }>
 >;
 
-const [ToolbarContextProvider, useToolbarContext] = createContext<{ onAction: (action: ToolbarAction) => void }>(
-  'Toolbar',
-);
-
-// TODO(Zan): Factor out, copied this from MarkdownPlugin.
-const sectionToolbarLayout =
-  'bs-[--rail-action] bg-[--sticky-bg] sticky block-start-0 __-block-start-px transition-opacity';
-
-type Range = SheetType['ranges'][number];
-
-const ToolbarRoot = ({ children, role, classNames }: ToolbarProps) => {
-  const { id, model, range, cursor } = useSheetContext();
-  const { hasAttention } = useAttention(id);
-  const dispatch = useIntentDispatcher();
-
-  // TODO(Zan): Centralise the toolbar action handler. Current implementation in stories.
-  const handleAction = useCallback(
-    (action: ToolbarAction) => {
-      switch (action.key) {
-        case 'align':
-          if (cursor) {
-            const index = model.sheet.ranges?.findIndex(
-              (range) => range.key === action.key && inRange(range.range, cursor),
-            );
-            const nextRange = range ? { from: range.from, to: range.to ?? range.from } : { from: cursor, to: cursor };
-            const nextRangeEntity = {
-              range: nextRange as Range['range'],
-              key: action.key,
-              value: action.value,
-            };
-            if (index < 0) {
-              model.sheet.ranges?.push(nextRangeEntity);
-            } else {
-              model.sheet.ranges?.splice(index, 1, nextRangeEntity);
-            }
-          }
-          break;
-        case 'style':
-          if (action.value === 'unset') {
-            const index = model.sheet.ranges?.findIndex((range) => range.key === action.key);
-            if (index >= 0) {
-              model.sheet.ranges?.splice(index, 1);
-            }
-          } else if (range || cursor) {
-            const nextRange = range ? { from: range.from, to: range.to ?? range.from } : { from: cursor, to: cursor };
-            model.sheet.ranges?.push({
-              range: nextRange as Range['range'],
-              key: action.key,
-              value: action.value,
-            });
-          }
-          break;
-        case 'comment': {
-          // TODO(Zan): We shouldn't hardcode the action ID.
-          void dispatch({
-            action: 'dxos.org/plugin/thread/action/create',
-            data: {
-              cursor: action.value,
-              name: action.cellContent,
-              subject: model.sheet,
-            },
-          });
-        }
-      }
-    },
-    [model.sheet, range, cursor, dispatch],
-  );
+const [ToolbarContextProvider, useToolbarContext] = createContext<ToolbarProps>('Toolbar');
 
+const ToolbarRoot = ({ children, onAction, classNames }: ToolbarProps) => {
   return (
-    <ToolbarContextProvider onAction={handleAction}>
-      <NaturalToolbar.Root
-        classNames={[
-          ...(role === 'section'
-            ? ['z-[2] group-focus-within/section:visible', !hasAttention && 'invisible', sectionToolbarLayout]
-            : ['attention-surface']),
-          classNames,
-        ]}
-      >
-        {children}
-      </NaturalToolbar.Root>
+    <ToolbarContextProvider onAction={onAction}>
+      <DensityProvider density='fine'>
+        <ElevationProvider elevation='chrome'>
+          <NaturalToolbar.Root classNames={['is-full shrink-0 overflow-x-auto overflow-y-hidden p-1', classNames]}>
+            {children}
+          </NaturalToolbar.Root>
+        </ElevationProvider>
+      </DensityProvider>
     </ToolbarContextProvider>
   );
 };
 
 // TODO(burdon): Generalize.
 // TODO(burdon): Detect and display current state.
-type ButtonProps<T> = {
-  value: T;
-  icon: string;
-  disabled?: (state: Range) => boolean;
+type ButtonProps = {
+  type: ToolbarActionType;
+  Icon: Icon;
+  getState: (state: Formatting) => boolean;
+  disabled?: (state: Formatting) => 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 formatOptions: ButtonProps[] = [
+  { type: 'date', Icon: Calendar, getState: (state) => false },
+  { type: 'currency', Icon: CurrencyDollar, getState: (state) => false },
 ];
 
-const Alignment = () => {
-  const { cursor, model } = useSheetContext();
-  const { onAction } = useToolbarContext('Alignment');
+const Format = () => {
+  const { onAction } = useToolbarContext('Format');
   const { t } = useTranslation(SHEET_PLUGIN);
 
-  const value = useMemo(
-    () =>
-      cursor
-        ? model.sheet.ranges?.find(({ range, key }) => key === 'alignment' && inRange(range, cursor))?.value
-        : undefined,
-    [cursor, model.sheet.ranges],
+  return (
+    <NaturalToolbar.ToggleGroup
+      type='single'
+      // value={cellStyles.filter(({ getState }) => state && getState(state)).map(({ type }) => type)}
+    >
+      {formatOptions.map(({ type, getState, Icon }) => (
+        <ToolbarToggleButton
+          key={type}
+          value={type}
+          Icon={Icon}
+          // disabled={state?.blockType === 'codeblock'}
+          // onClick={state ? () => onAction?.({ type, data: !getState(state) }) : undefined}
+          onClick={() => onAction?.({ type })}
+        >
+          {t(`toolbar ${type} label`)}
+        </ToolbarToggleButton>
+      ))}
+    </NaturalToolbar.ToggleGroup>
   );
+};
+
+const alignmentOptions: ButtonProps[] = [
+  { type: 'left', Icon: TextAlignLeft, getState: (state) => false },
+  { type: 'center', Icon: TextAlignCenter, getState: (state) => false },
+  { type: 'right', Icon: TextAlignRight, getState: (state) => false },
+];
+
+const Alignment = () => {
+  const { onAction } = useToolbarContext('Alignment');
+  const { t } = useTranslation(SHEET_PLUGIN);
 
   return (
     <NaturalToolbar.ToggleGroup
       type='single'
-      value={value}
-      onValueChange={(value: AlignValue) => onAction?.({ key: 'align', value })}
+      // value={cellStyles.filter(({ getState }) => state && getState(state)).map(({ type }) => type)}
     >
-      {alignmentOptions.map(({ value, icon }) => (
-        <ToolbarItem itemType='toggleGroupItem' key={value} value={value} icon={icon}>
-          {t(`toolbar ${value} label`)}
-        </ToolbarItem>
+      {alignmentOptions.map(({ type, getState, Icon }) => (
+        <ToolbarToggleButton
+          key={type}
+          value={type}
+          Icon={Icon}
+          // disabled={state?.blockType === 'codeblock'}
+          // onClick={state ? () => onAction?.({ type, data: !getState(state) }) : undefined}
+          onClick={() => onAction?.({ type })}
+        >
+          {t(`toolbar ${type} label`)}
+        </ToolbarToggleButton>
       ))}
     </NaturalToolbar.ToggleGroup>
   );
 };
 
-const styleOptions: ButtonProps<StyleValue>[] = [{ value: 'highlight', icon: 'ph--highlighter--regular' }];
+const styleOptions: ButtonProps[] = [
+  { type: 'clear', Icon: Eraser, getState: (state) => false },
+  { type: 'highlight', Icon: HighlighterCircle, getState: (state) => false },
+];
 
 const Styles = () => {
-  const { cursor, model } = useSheetContext();
-  const { onAction } = useToolbarContext('Styles');
+  const { onAction } = useToolbarContext('Alignment');
   const { t } = useTranslation(SHEET_PLUGIN);
 
-  const activeValues = useMemo(
-    () =>
-      cursor
-        ? model.sheet.ranges
-            ?.filter(({ range, key }) => key === 'style' && inRange(range, cursor))
-            .reduce((acc, { value }) => {
-              acc.add(value);
-              return acc;
-            }, new Set())
-        : undefined,
-    [cursor, model.sheet.ranges],
-  );
-
   return (
-    <>
-      {styleOptions.map(({ value, icon }) => (
-        <ToolbarItem
-          itemType='toggle'
-          key={value}
-          pressed={activeValues?.has(value)}
-          onPressedChange={(nextPressed: boolean) => onAction?.({ key: 'style', value: nextPressed ? value : 'unset' })}
-          icon={icon}
+    <NaturalToolbar.ToggleGroup
+      type='single'
+      // value={cellStyles.filter(({ getState }) => state && getState(state)).map(({ type }) => type)}
+    >
+      {styleOptions.map(({ type, getState, Icon }) => (
+        <ToolbarToggleButton
+          key={type}
+          value={type}
+          Icon={Icon}
+          // disabled={state?.blockType === 'codeblock'}
+          // onClick={state ? () => onAction?.({ type, data: !getState(state) }) : undefined}
+          onClick={() => onAction?.({ type })}
         >
-          {t(`toolbar ${value} label`)}
-        </ToolbarItem>
+          {t(`toolbar ${type} label`)}
+        </ToolbarToggleButton>
       ))}
-    </>
+    </NaturalToolbar.ToggleGroup>
   );
 };
 
@@ -269,51 +171,18 @@ const Styles = () => {
 //
 
 const Actions = () => {
-  const { onAction } = useToolbarContext('Actions');
-  const { cursor, range, model } = useSheetContext();
+  // const { onAction } = useToolbarContext('Actions');
   const { t } = useTranslation(SHEET_PLUGIN);
-
-  const overlapsCommentAnchor = (model.sheet.threads ?? [])
-    .filter(nonNullable)
-    .filter((thread) => thread.status !== 'resolved')
-    .some((thread) => {
-      if (!cursor) {
-        return false;
-      }
-      return addressToIndex(model.sheet, cursor) === thread.anchor;
-    });
-
-  const hasCursor = !!cursor;
-  const cursorOnly = hasCursor && !range && !overlapsCommentAnchor;
-
-  const tooltipLabelKey = !hasCursor
-    ? 'no cursor label'
-    : overlapsCommentAnchor
-      ? 'selection overlaps existing comment label'
-      : range
-        ? 'comment ranges not supported label'
-        : 'comment label';
-
   return (
-    <ToolbarItem
-      itemType='button'
+    <ToolbarButton
       value='comment'
-      icon='ph--chat-text--regular'
+      Icon={ChatText}
       data-testid='editor.toolbar.comment'
-      onClick={() => {
-        if (!cursor) {
-          return;
-        }
-        return onAction?.({
-          key: 'comment',
-          value: addressToIndex(model.sheet, cursor),
-          cellContent: model.getCellText(cursor),
-        });
-      }}
-      disabled={!cursorOnly || overlapsCommentAnchor}
+      // onClick={() => onAction?.({ type: 'comment' })}
+      // disabled={!state || state.comment || !state.selection}
     >
-      {t(tooltipLabelKey)}
-    </ToolbarItem>
+      {t('comment label')}
+    </ToolbarButton>
   );
 };
 
@@ -321,6 +190,7 @@ export const Toolbar = {
   Root: ToolbarRoot,
   Separator: ToolbarSeparator,
   Alignment,
+  Format,
   Styles,
   Actions,
 };

package/src/components/Toolbar/common.tsx

@@ -0,0 +1,72 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import { type Icon } from '@phosphor-icons/react';
+import React from 'react';
+
+import {
+  Toolbar as NaturalToolbar,
+  Tooltip,
+  type ToolbarButtonProps as NaturalToolbarButtonProps,
+  type ToolbarToggleGroupItemProps as NaturalToolbarToggleGroupItemProps,
+} from '@dxos/react-ui';
+import { getSize } from '@dxos/react-ui-theme';
+
+// TODO(burdon): Factor out in common with react-ui-editor.
+
+export const iconStyles = getSize(5);
+export const buttonStyles = 'min-bs-0 p-2';
+export const tooltipProps = { side: 'top' as const, classNames: 'z-10' };
+
+export const ToolbarSeparator = () => <div role='separator' className='grow' />;
+
+//
+// ToolbarButton
+//
+
+type ToolbarButtonProps = NaturalToolbarButtonProps & { Icon: Icon };
+
+export const ToolbarButton = ({ Icon, children, ...props }: ToolbarButtonProps) => {
+  return (
+    <Tooltip.Root>
+      <Tooltip.Trigger asChild>
+        <NaturalToolbar.Button variant='ghost' {...props} classNames={buttonStyles}>
+          <Icon className={iconStyles} />
+          <span className='sr-only'>{children}</span>
+        </NaturalToolbar.Button>
+      </Tooltip.Trigger>
+      <Tooltip.Portal>
+        <Tooltip.Content {...tooltipProps}>
+          {children}
+          <Tooltip.Arrow />
+        </Tooltip.Content>
+      </Tooltip.Portal>
+    </Tooltip.Root>
+  );
+};
+
+//
+// ToolbarToggleButton
+//
+
+export type ToolbarToggleButtonProps = NaturalToolbarToggleGroupItemProps & { Icon: Icon };
+
+export const ToolbarToggleButton = ({ Icon, children, ...props }: ToolbarToggleButtonProps) => {
+  return (
+    <Tooltip.Root>
+      <Tooltip.Trigger asChild>
+        <NaturalToolbar.ToggleGroupItem variant='ghost' {...props} classNames={buttonStyles}>
+          <Icon className={iconStyles} />
+          <span className='sr-only'>{children}</span>
+        </NaturalToolbar.ToggleGroupItem>
+      </Tooltip.Trigger>
+      <Tooltip.Portal>
+        <Tooltip.Content {...tooltipProps}>
+          {children}
+          <Tooltip.Arrow />
+        </Tooltip.Content>
+      </Tooltip.Portal>
+    </Tooltip.Root>
+  );
+};

package/src/components/index.ts

@@ -5,8 +5,6 @@
 import React from 'react';
 
 export * from './ComputeGraph';
-export * from './GridSheet';
-export * from './SheetContext';
 
 // Lazily load components for content surfaces.
 export const SheetContainer = React.lazy(() => import('./SheetContainer'));

package/src/meta.tsx

@@ -0,0 +1,18 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import { GridNine, type IconProps } from '@phosphor-icons/react';
+import React from 'react';
+
+import { pluginMeta } from '@dxos/app-framework';
+
+export const SHEET_PLUGIN = 'dxos.org/plugin/sheet';
+
+export default pluginMeta({
+  id: SHEET_PLUGIN,
+  name: 'Sheet',
+  description: 'A simple spreadsheet plugin.',
+  iconComponent: (props: IconProps) => <GridNine {...props} />,
+  iconSymbol: 'ph--grid-nine--regular',
+});

package/src/model/index.ts

@@ -2,5 +2,6 @@
 // Copyright 2024 DXOS.org
 //
 
-export * from './decorations';
-export * from './sheet-model';
+export * from './functions';
+export * from './model';
+export * from './types';

package/src/model/model.browser.test.ts

@@ -0,0 +1,100 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import { expect } from 'chai';
+import { describe, test } from 'vitest';
+
+import { SheetModel } from './model';
+import { addressFromA1Notation, rangeFromA1Notation } from './types';
+import { createComputeGraph } from '../components';
+import { createSheet, ValueTypeEnum } from '../types';
+
+// TODO(burdon): Test undo (e.g., clear cells).
+
+/**
+ * VITEST_ENV=chrome p vitest --watch
+ * NOTE: Browser test required for hyperformula due to raw translation files.
+ */
+describe('model', () => {
+  const createModel = async () => {
+    const graph = createComputeGraph();
+    const sheet = createSheet();
+    const model = new SheetModel(graph, sheet, undefined, { rows: 5, columns: 5 });
+    await model.initialize();
+    return model;
+  };
+
+  test('create', async () => {
+    const model = await createModel();
+    expect(model.bounds).to.deep.eq({ rows: 5, columns: 5 });
+    model.setValue(addressFromA1Notation('A1'), 100);
+    const value = model.getValue(addressFromA1Notation('A1'));
+    expect(value).to.eq(100);
+  });
+
+  test('map formula', async () => {
+    const model = await createModel();
+    const x1 = model.mapFormulaRefsToIndices('=SUM(A1:A3)');
+    const x2 = model.mapFormulaIndicesToRefs(x1);
+    expect(x2).to.eq('=SUM(A1:A3)');
+  });
+
+  test('dates', async () => {
+    const model = await createModel();
+    const cell = addressFromA1Notation('A1');
+    model.setValue(cell, '=NOW()');
+    const type = model.getValueType(cell);
+    expect(type).to.eq(ValueTypeEnum.DateTime);
+    const value = model.getValue(cell);
+    const date = model.toLocalDate(value as number);
+    const now = new Date();
+    expect(date.getUTCFullYear()).to.eq(now.getUTCFullYear());
+    expect(date.getUTCMonth()).to.eq(now.getUTCMonth());
+    expect(date.getUTCDate()).to.eq(now.getUTCDate());
+  });
+
+  test('formula', async () => {
+    const model = await createModel();
+
+    // Nested formula.
+    {
+      model.setValue(addressFromA1Notation('A1'), 100);
+      model.setValue(addressFromA1Notation('A2'), 200);
+      model.setValue(addressFromA1Notation('A3'), '=SUM(A1:A2)');
+      model.setValue(addressFromA1Notation('A4'), '=SUM(A1:A3)');
+      const value = model.getValue(addressFromA1Notation('A4'));
+      expect(value).to.eq(600);
+      // console.log(JSON.stringify(model.sheet.cells, undefined, 2));
+
+      const cells = model.getCellValues(rangeFromA1Notation('A1:A4'));
+      expect(cells).to.deep.eq([
+        [100],
+        [200],
+        [model.mapFormulaRefsToIndices('=SUM(A1:A2)')],
+        [model.mapFormulaRefsToIndices('=SUM(A1:A3)')],
+      ]);
+      // console.log(JSON.stringify(model.sheet.cells, undefined, 2));
+      // console.log(cells);
+    }
+
+    // Insert row.
+    {
+      model.insertRows(2, 1);
+      model.setValue(addressFromA1Notation('A3'), 400);
+      const value = model.getValue(addressFromA1Notation('A5'));
+      expect(value).to.eq(1000);
+
+      const cells = model.getCellValues(rangeFromA1Notation('A1:A5'));
+      expect(cells).to.deep.eq([
+        [100],
+        [200],
+        [400],
+        [model.mapFormulaRefsToIndices('=SUM(A1:A2)')],
+        [model.mapFormulaRefsToIndices('=SUM(A1:A4)')],
+      ]);
+      // console.log(JSON.stringify(model.sheet.cells, undefined, 2));
+      // console.log(cells);
+    }
+  });
+});