@dxos/plugin-sheet 0.6.13 → 0.6.14-main.7bd9c89

package/src/components/Toolbar/Toolbar.tsx

@@ -2,167 +2,265 @@
 // 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 React, { type PropsWithChildren, useCallback, useMemo } from 'react';
 
+import { useIntentDispatcher } from '@dxos/app-framework';
 import {
-  DensityProvider,
-  ElevationProvider,
+  Icon,
   Toolbar as NaturalToolbar,
-  type ThemedClassName,
   useTranslation,
+  Tooltip,
+  type ToolbarToggleGroupItemProps as NaturalToolbarToggleGroupItemProps,
+  type ToolbarButtonProps as NaturalToolbarButtonProps,
+  type ToolbarToggleProps as NaturalToolbarToggleProps,
+  type ThemedClassName,
 } from '@dxos/react-ui';
+import { useAttention } from '@dxos/react-ui-attention';
+import { nonNullable } from '@dxos/util';
 
-import { ToolbarButton, ToolbarSeparator, ToolbarToggleButton } from './common';
+import {
+  addressToIndex,
+  type AlignKey,
+  type AlignValue,
+  type CommentKey,
+  type CommentValue,
+  inRange,
+  type StyleKey,
+  type StyleValue,
+} from '../../defs';
 import { SHEET_PLUGIN } from '../../meta';
-import { type Formatting } from '../../types';
+import { type SheetType } from '../../types';
+import { useSheetContext } from '../SheetContext';
 
 //
-// Root
+// 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
 //
 
-export type ToolbarActionType = 'clear' | 'highlight' | 'left' | 'center' | 'right' | 'date' | 'currency';
+type ToolbarItemProps =
+  | (NaturalToolbarButtonProps & { itemType: 'button'; icon: string })
+  | (NaturalToolbarToggleGroupItemProps & { itemType: 'toggleGroupItem'; icon: string })
+  | (NaturalToolbarToggleProps & { itemType: 'toggle'; icon: string });
 
-export type ToolbarAction = {
-  type: ToolbarActionType;
+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>
+  );
 };
 
-export type ToolbarActionHandler = ({ type }: ToolbarAction) => void;
+//
+// 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 = ToolbarAction['key'];
+
+export type ToolbarActionHandler = (action: ToolbarAction) => void;
 
 export type ToolbarProps = ThemedClassName<
   PropsWithChildren<{
-    onAction?: ToolbarActionHandler;
+    role?: string;
   }>
 >;
 
-const [ToolbarContextProvider, useToolbarContext] = createContext<ToolbarProps>('Toolbar');
+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 ToolbarRoot = ({ children, onAction, classNames }: ToolbarProps) => {
   return (
-    <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 onAction={handleAction}>
+      <NaturalToolbar.Root
+        classNames={[
+          ...(role === 'section'
+            ? ['z-[2] group-focus-within/section:visible', !hasAttention && 'invisible', sectionToolbarLayout]
+            : ['attention-surface']),
+          classNames,
+        ]}
+      >
+        {children}
+      </NaturalToolbar.Root>
     </ToolbarContextProvider>
   );
 };
 
 // TODO(burdon): Generalize.
 // TODO(burdon): Detect and display current state.
-type ButtonProps = {
-  type: ToolbarActionType;
-  Icon: Icon;
-  getState: (state: Formatting) => boolean;
-  disabled?: (state: Formatting) => boolean;
+type ButtonProps<T> = {
+  value: T;
+  icon: string;
+  disabled?: (state: Range) => boolean;
 };
 
 //
 // Alignment
 //
 
-const formatOptions: ButtonProps[] = [
-  { type: 'date', Icon: Calendar, getState: (state) => false },
-  { type: 'currency', Icon: CurrencyDollar, getState: (state) => false },
-];
-
-const Format = () => {
-  const { onAction } = useToolbarContext('Format');
-  const { t } = useTranslation(SHEET_PLUGIN);
-
-  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 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);
 
+  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)}
+      value={value}
+      onValueChange={(value: AlignValue) => onAction?.({ key: 'align', value })}
     >
-      {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>
+      {alignmentOptions.map(({ value, icon }) => (
+        <ToolbarItem itemType='toggleGroupItem' key={value} value={value} icon={icon}>
+          {t(`toolbar ${value} label`)}
+        </ToolbarItem>
       ))}
     </NaturalToolbar.ToggleGroup>
   );
 };
 
-const styleOptions: ButtonProps[] = [
-  { type: 'clear', Icon: Eraser, getState: (state) => false },
-  { type: 'highlight', Icon: HighlighterCircle, getState: (state) => false },
-];
+const styleOptions: ButtonProps<StyleValue>[] = [{ value: 'highlight', icon: 'ph--highlighter--regular' }];
 
 const Styles = () => {
-  const { onAction } = useToolbarContext('Alignment');
+  const { cursor, model } = useSheetContext();
+  const { onAction } = useToolbarContext('Styles');
   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 (
-    <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 })}
+    <>
+      {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}
         >
-          {t(`toolbar ${type} label`)}
-        </ToolbarToggleButton>
+          {t(`toolbar ${value} label`)}
+        </ToolbarItem>
       ))}
-    </NaturalToolbar.ToggleGroup>
+    </>
   );
 };
 
@@ -171,18 +269,51 @@ const Styles = () => {
 //
 
 const Actions = () => {
-  // const { onAction } = useToolbarContext('Actions');
+  const { onAction } = useToolbarContext('Actions');
+  const { cursor, range, model } = useSheetContext();
   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 (
-    <ToolbarButton
+    <ToolbarItem
+      itemType='button'
       value='comment'
-      Icon={ChatText}
+      icon='ph--chat-text--regular'
       data-testid='editor.toolbar.comment'
-      // onClick={() => onAction?.({ type: 'comment' })}
-      // disabled={!state || state.comment || !state.selection}
+      onClick={() => {
+        if (!cursor) {
+          return;
+        }
+        return onAction?.({
+          key: 'comment',
+          value: addressToIndex(model.sheet, cursor),
+          cellContent: model.getCellText(cursor),
+        });
+      }}
+      disabled={!cursorOnly || overlapsCommentAnchor}
     >
-      {t('comment label')}
-    </ToolbarButton>
+      {t(tooltipLabelKey)}
+    </ToolbarItem>
   );
 };
 
@@ -190,7 +321,6 @@ export const Toolbar = {
   Root: ToolbarRoot,
   Separator: ToolbarSeparator,
   Alignment,
-  Format,
   Styles,
   Actions,
 };

package/src/components/index.ts

@@ -2,9 +2,10 @@
 // Copyright 2023 DXOS.org
 //
 
-import React from 'react';
+import { lazy } from 'react';
 
 export * from './ComputeGraph';
+export * from './GridSheet';
+export * from './SheetContext';
 
-// Lazily load components for content surfaces.
-export const SheetContainer = React.lazy(() => import('./SheetContainer'));
+export const SheetContainer = lazy(() => import('./SheetContainer'));

package/src/defs/index.ts

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

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

@@ -0,0 +1,46 @@
+//
+// 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;
+  }
+};

package/src/{model → defs}/types.test.ts

@@ -3,15 +3,14 @@
 //
 
 import { getIndices, sortByIndex, getIndicesBelow, getIndicesAbove, getIndicesBetween } from '@tldraw/indices';
-import { expect } from 'chai';
-import { describe, test } from 'vitest';
+import { describe, expect, test } from 'vitest';
 
 import { inRange, addressFromA1Notation, addressToA1Notation, rangeFromA1Notation, rangeToA1Notation } from './types';
 
 describe('cell', () => {
   test('posToA1Notation', () => {
-    expect(addressToA1Notation({ column: 0, row: 0 })).to.eq('A1');
-    expect(addressFromA1Notation('C2')).to.deep.eq({ column: 2, row: 1 });
+    expect(addressToA1Notation({ col: 0, row: 0 })).to.eq('A1');
+    expect(addressFromA1Notation('C2')).to.deep.eq({ col: 2, row: 1 });
   });
 
   test('rangeToA1Notation', () => {
@@ -56,19 +55,19 @@ describe('cell', () => {
     // Values.
     const cells: Record<string, any> = {};
     const setCell = (cell: string, value: any) => {
-      const { column, row } = addressFromA1Notation(cell);
+      const { col, row } = addressFromA1Notation(cell);
       // Reallocate if > current bounds.
-      if (column >= columns.length) {
-        insertIndex(columns, column);
+      if (col >= columns.length) {
+        insertIndex(columns, col);
       }
       if (row >= rows.length) {
         insertIndex(rows, row);
       }
-      const index = `${columns[column]}@${rows[row]}`;
+      const index = `${columns[col]}@${rows[row]}`;
       cells[index] = value;
     };
 
-    expect(addressFromA1Notation('A1')).to.deep.eq({ column: 0, row: 0 });
+    expect(addressFromA1Notation('A1')).to.deep.eq({ col: 0, row: 0 });
 
     expect(columns).to.deep.eq(['a1', 'a2', 'a3', 'a4', 'a5']);
     insertIndex(columns, 7);

package/src/{model → defs}/types.ts

@@ -4,33 +4,43 @@
 
 import { invariant } from '@dxos/invariant';
 
-export const MAX_COLUMNS = 26 * 26;
+export const DEFAULT_ROWS = 50;
+export const DEFAULT_COLUMNS = 26;
+
+export const MAX_ROWS = 500;
+export const MAX_COLUMNS = 26 * 2;
+
+export type CellAddress = { col: number; row: number };
 
-export type CellAddress = { column: number; row: number };
 export type CellRange = { from: CellAddress; to?: CellAddress };
 
+export type CellIndex = string;
+
+export type CellContentValue = number | string | boolean | null;
+
 export const posEquals = (a: CellAddress | undefined, b: CellAddress | undefined) => {
-  return a?.column === b?.column && a?.row === b?.row;
+  return a?.col === b?.col && a?.row === b?.row;
 };
 
-export const columnLetter = (column: number): string => {
-  invariant(column < MAX_COLUMNS, `Invalid column: ${column}`);
+export const columnLetter = (col: number): string => {
+  invariant(col < MAX_COLUMNS, `Invalid column: ${col}`);
   return (
-    (column >= 26 ? String.fromCharCode('A'.charCodeAt(0) + Math.floor(column / 26) - 1) : '') +
-    String.fromCharCode('A'.charCodeAt(0) + (column % 26))
+    (col >= 26 ? String.fromCharCode('A'.charCodeAt(0) + Math.floor(col / 26) - 1) : '') +
+    String.fromCharCode('A'.charCodeAt(0) + (col % 26))
   );
 };
 
-export const addressToA1Notation = ({ column, row }: CellAddress): string => {
-  return `${columnLetter(column)}${row + 1}`;
+export const addressToA1Notation = ({ col, row }: CellAddress): string => {
+  return `${columnLetter(col)}${row + 1}`;
 };
 
+// TODO(burdon): See simpleCellAddressFromString
 export const addressFromA1Notation = (ref: string): CellAddress => {
   const match = ref.match(/([A-Z]+)(\d+)/);
   invariant(match, `Invalid notation: ${ref}`);
   return {
     row: parseInt(match[2], 10) - 1,
-    column: match[1].split('').reduce((acc, c) => acc * 26 + c.charCodeAt(0) - 'A'.charCodeAt(0) + 1, 0) - 1,
+    col: match[1].split('').reduce((acc, c) => acc * 26 + c.charCodeAt(0) - 'A'.charCodeAt(0) + 1, 0) - 1,
   };
 };
 
@@ -59,13 +69,13 @@ export const inRange = (range: CellRange | undefined, cell: CellAddress): boolea
     return false;
   }
 
-  const { column: c1, row: r1 } = from;
-  const { column: c2, row: r2 } = to;
+  const { col: c1, row: r1 } = from;
+  const { col: c2, row: r2 } = to;
   const cMin = Math.min(c1, c2);
   const cMax = Math.max(c1, c2);
   const rMin = Math.min(r1, r2);
   const rMax = Math.max(r1, r2);
 
-  const { column, row } = cell;
-  return column >= cMin && column <= cMax && row >= rMin && row <= rMax;
+  const { col, row } = cell;
+  return col >= cMin && col <= cMax && row >= rMin && row <= rMax;
 };