@dxos/plugin-sheet 0.6.8-main.046e6cf

package/src/components/Toolbar/Toolbar.tsx

@@ -0,0 +1,198 @@
+//
+// 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 {
+  DensityProvider,
+  ElevationProvider,
+  Toolbar as NaturalToolbar,
+  type ThemedClassName,
+  useTranslation,
+} from '@dxos/react-ui';
+
+import { ToolbarButton, ToolbarSeparator, ToolbarToggleButton } from './common';
+import { SHEET_PLUGIN } from '../../meta';
+import { type Formatting } from '../../types';
+
+//
+// Root
+//
+
+export type ToolbarActionType = 'clear' | 'highlight' | 'left' | 'center' | 'right' | 'date' | 'currency';
+
+export type ToolbarAction = {
+  type: ToolbarActionType;
+};
+
+export type ToolbarActionHandler = ({ type }: ToolbarAction) => void;
+
+export type ToolbarProps = ThemedClassName<
+  PropsWithChildren<{
+    onAction?: ToolbarActionHandler;
+  }>
+>;
+
+const [ToolbarContextProvider, useToolbarContext] = createContext<ToolbarProps>('Toolbar');
+
+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>
+  );
+};
+
+// TODO(burdon): Generalize.
+// TODO(burdon): Detect and display current state.
+type ButtonProps = {
+  type: ToolbarActionType;
+  Icon: Icon;
+  getState: (state: Formatting) => boolean;
+  disabled?: (state: Formatting) => 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 Alignment = () => {
+  const { onAction } = useToolbarContext('Alignment');
+  const { t } = useTranslation(SHEET_PLUGIN);
+
+  return (
+    <NaturalToolbar.ToggleGroup
+      type='single'
+      // value={cellStyles.filter(({ getState }) => state && getState(state)).map(({ type }) => type)}
+    >
+      {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[] = [
+  { type: 'clear', Icon: Eraser, getState: (state) => false },
+  { type: 'highlight', Icon: HighlighterCircle, getState: (state) => false },
+];
+
+const Styles = () => {
+  const { onAction } = useToolbarContext('Alignment');
+  const { t } = useTranslation(SHEET_PLUGIN);
+
+  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 })}
+        >
+          {t(`toolbar ${type} label`)}
+        </ToolbarToggleButton>
+      ))}
+    </NaturalToolbar.ToggleGroup>
+  );
+};
+
+//
+// Actions
+//
+
+const Actions = () => {
+  // const { onAction } = useToolbarContext('Actions');
+  const { t } = useTranslation(SHEET_PLUGIN);
+  return (
+    <ToolbarButton
+      value='comment'
+      Icon={ChatText}
+      data-testid='editor.toolbar.comment'
+      // onClick={() => onAction?.({ type: 'comment' })}
+      // disabled={!state || state.comment || !state.selection}
+    >
+      {t('comment label')}
+    </ToolbarButton>
+  );
+};
+
+export const Toolbar = {
+  Root: ToolbarRoot,
+  Separator: ToolbarSeparator,
+  Alignment,
+  Format,
+  Styles,
+  Actions,
+};
+
+export { useToolbarContext };

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/Toolbar/index.ts

@@ -0,0 +1,5 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+export * from './Toolbar';

package/src/components/index.ts

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

package/src/index.ts

@@ -0,0 +1,9 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import { SheetPlugin } from './SheetPlugin';
+
+export default SheetPlugin;
+
+export * from './SheetPlugin';

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

@@ -0,0 +1,6 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+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, { 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);
+    }
+  });
+});