@dxos/plugin-sheet 0.6.13-main.548ca8d → 0.6.13-staging.1e988a3

package/src/components/Toolbar/Toolbar.tsx

@@ -2,130 +2,71 @@
 // 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 } from 'react';
 
 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 } from '../../defs';
+import { ToolbarButton, ToolbarSeparator, ToolbarToggleButton } from './common';
 import { SHEET_PLUGIN } from '../../meta';
 import { type Formatting } 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 AlignValue = 'left' | 'center' | 'right' | 'unset';
-type AlignAction = { type: 'align'; value: AlignValue };
-
-type CommentAction = { type: 'comment'; anchor: string; cellContent?: string };
+export type ToolbarActionType = 'clear' | 'highlight' | 'left' | 'center' | 'right' | 'date' | 'currency';
 
-type FormatValue = 'date' | 'currency' | 'unset';
-type FormatAction = { type: 'format'; value: FormatValue };
-
-type StyleValue = 'highlight' | 'unset';
-type StyleAction = { type: 'style'; value: StyleValue };
-
-export type ToolbarAction = StyleAction | AlignAction | FormatAction | CommentAction;
-
-export type ToolbarActionType = ToolbarAction['type'];
+export type ToolbarAction = {
+  type: ToolbarActionType;
+};
 
-export type ToolbarActionHandler = (action: ToolbarAction) => void;
+export type ToolbarActionHandler = ({ type }: ToolbarAction) => void;
 
 export type ToolbarProps = ThemedClassName<
   PropsWithChildren<{
     onAction?: ToolbarActionHandler;
-    role?: string;
   }>
 >;
 
 const [ToolbarContextProvider, useToolbarContext] = createContext<ToolbarProps>('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';
-
-const ToolbarRoot = ({ children, onAction, role, classNames }: ToolbarProps) => {
-  const { id } = useSheetContext();
-  const { hasAttention } = useAttention(id);
-
+const ToolbarRoot = ({ children, onAction, classNames }: ToolbarProps) => {
   return (
     <ToolbarContextProvider onAction={onAction}>
-      <NaturalToolbar.Root
-        classNames={[
-          ...(role === 'section'
-            ? ['z-[2] group-focus-within/section:visible', !hasAttention && 'invisible', sectionToolbarLayout]
-            : ['attention-surface']),
-          classNames,
-        ]}
-      >
-        {children}
-      </NaturalToolbar.Root>
+      <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;
+type ButtonProps = {
+  type: ToolbarActionType;
+  Icon: Icon;
   getState: (state: Formatting) => boolean;
   disabled?: (state: Formatting) => boolean;
 };
@@ -134,9 +75,9 @@ type ButtonProps<T> = {
 // Alignment
 //
 
-const formatOptions: ButtonProps<FormatValue>[] = [
-  { value: 'date', icon: 'ph--calendar--regular', getState: (state) => false },
-  { value: 'currency', icon: 'ph--currency-dollar--regular', getState: (state) => false },
+const formatOptions: ButtonProps[] = [
+  { type: 'date', Icon: Calendar, getState: (state) => false },
+  { type: 'currency', Icon: CurrencyDollar, getState: (state) => false },
 ];
 
 const Format = () => {
@@ -148,25 +89,26 @@ const Format = () => {
       type='single'
       // value={cellStyles.filter(({ getState }) => state && getState(state)).map(({ type }) => type)}
     >
-      {formatOptions.map(({ value, getState, icon }) => (
-        <ToolbarItem
-          itemType='toggleGroupItem'
-          key={value}
-          value={value}
-          icon={icon}
-          onClick={() => onAction?.({ type: 'format', value })}
+      {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 ${value} label`)}
-        </ToolbarItem>
+          {t(`toolbar ${type} label`)}
+        </ToolbarToggleButton>
       ))}
     </NaturalToolbar.ToggleGroup>
   );
 };
 
-const alignmentOptions: ButtonProps<AlignValue>[] = [
-  { value: 'left', icon: 'ph--text-align-left--regular', getState: (state) => false },
-  { value: 'center', icon: 'ph--text-align-center--regular', getState: (state) => false },
-  { value: 'right', icon: 'ph--text-align-right--regular', getState: (state) => false },
+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 = () => {
@@ -177,41 +119,50 @@ const Alignment = () => {
     <NaturalToolbar.ToggleGroup
       type='single'
       // value={cellStyles.filter(({ getState }) => state && getState(state)).map(({ type }) => type)}
-      // disabled={state?.blockType === 'codeblock'}
-      onValueChange={(value: AlignValue) => onAction?.({ type: 'align', value })}
     >
-      {alignmentOptions.map(({ value, getState, 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', getState: (state) => false },
+const styleOptions: ButtonProps[] = [
+  { type: 'clear', Icon: Eraser, getState: (state) => false },
+  { type: 'highlight', Icon: HighlighterCircle, getState: (state) => false },
 ];
 
 const Styles = () => {
-  const { onAction } = useToolbarContext('Styles');
+  const { onAction } = useToolbarContext('Alignment');
   const { t } = useTranslation(SHEET_PLUGIN);
 
   return (
-    <>
-      {styleOptions.map(({ value, getState, icon }) => (
-        <ToolbarItem
-          itemType='toggle'
-          key={value}
-          onPressedChange={(nextPressed: boolean) =>
-            onAction?.({ type: 'style', value: nextPressed ? 'highlight' : '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>
   );
 };
 
@@ -220,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?.({
-          type: 'comment',
-          anchor: 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>
   );
 };
 

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,6 +2,6 @@
 // Copyright 2024 DXOS.org
 //
 
-export * from './decorations';
-export * from './formatting-model';
-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);
+    }
+  });
+});