@dxos/plugin-sheet 0.8.4-main.f9ba587 → 0.8.4-staging.60fe92afc8

package/src/components/GridSheet/SheetCellEditor.stories.tsx

@@ -1,93 +0,0 @@
-//
-// Copyright 2024 DXOS.org
-//
-
-import '@dxos-theme';
-
-import { type Meta } from '@storybook/react-vite';
-import React, { useEffect, useMemo, useState } from 'react';
-
-import { Client } from '@dxos/client';
-import { createDocAccessor } from '@dxos/client/echo';
-import { defaultFunctions } from '@dxos/compute';
-import { getRegisteredFunctionNames } from '@dxos/compute/testing';
-import { automerge } from '@dxos/react-ui-editor';
-import { CellEditor, type CellEditorProps } from '@dxos/react-ui-grid';
-import { withTheme } from '@dxos/storybook-utils';
-
-import { sheetExtension } from '../../extensions';
-import { createSheet, SheetType } from '../../types';
-
-type StoryProps = CellEditorProps;
-
-const Story = ({ value, ...props }: StoryProps) => {
-  const extension = useMemo(() => {
-    const functionNames = getRegisteredFunctionNames();
-    const functions = defaultFunctions.filter(({ name }) => functionNames.includes(name));
-    return [sheetExtension({ functions })];
-  }, []);
-
-  return <CellEditor {...props} value={value} extension={extension} />;
-};
-
-const AutomergeStory = ({ value, ...props }: StoryProps) => {
-  const cell = 'A1';
-  const [object, setObject] = useState<SheetType>();
-  useEffect(() => {
-    setTimeout(async () => {
-      const client = new Client({ types: [SheetType] });
-      await client.initialize();
-      await client.halo.createIdentity();
-      const space = await client.spaces.create();
-
-      const sheet = createSheet();
-      sheet.name = 'Test';
-      sheet.cells[cell] = { value };
-      space.db.add(sheet);
-      setObject(sheet);
-    });
-  }, [value]);
-
-  const extension = useMemo(() => {
-    if (!object) {
-      return [];
-    }
-
-    const functionNames = getRegisteredFunctionNames();
-    const functions = defaultFunctions.filter(({ name }) => functionNames.includes(name));
-    const accessor = createDocAccessor(object, ['cells', cell, 'value']);
-    return [automerge(accessor), sheetExtension({ functions })];
-  }, [object]);
-
-  return <CellEditor {...props} value={value} extension={extension} />;
-};
-
-export const Default = {};
-
-export const AutoComplete = {
-  args: {
-    value: '=SUM',
-  },
-};
-
-export const Formatting = {
-  args: {
-    value: '=SUM(A1:A2, 100, TRUE, "100", SUM(A1:A2, B1:B2))',
-  },
-};
-
-export const Automerge = {
-  render: (args: StoryProps) => <AutomergeStory {...args} />,
-  args: {
-    value: '=SUM(A1:A2, 100, TRUE, "100", SUM(A1:A2, B1:B2))',
-  },
-};
-
-const meta: Meta = {
-  title: 'plugins/plugin-sheet/CellEditor',
-  component: CellEditor,
-  decorators: [withTheme],
-  render: (args: StoryProps) => <Story {...args} />,
-};
-
-export default meta;

package/src/components/RangeList/RangeList.tsx

@@ -1,60 +0,0 @@
-//
-// Copyright 2024 DXOS.org
-//
-
-import { Schema } from 'effect';
-import React, { useCallback } from 'react';
-
-import { rangeToA1Notation } from '@dxos/compute';
-import { Callout, useTranslation } from '@dxos/react-ui';
-import { List } from '@dxos/react-ui-list';
-import { ghostHover } from '@dxos/react-ui-theme';
-
-import { SHEET_PLUGIN } from '../../meta';
-import { rangeFromIndex } from '../../types';
-import { Range, type SheetType } from '../../types';
-
-export type RangeListProps = {
-  sheet: SheetType;
-};
-
-export const RangeList = ({ sheet }: RangeListProps) => {
-  const { t } = useTranslation(SHEET_PLUGIN);
-  // TODO(thure): Implement similar to comments, #8121
-  const handleSelectRange = (range: Range) => {};
-  const handleDeleteRange = useCallback(
-    (range: Range) => {
-      const index = sheet.ranges.findIndex((sheetRange) => sheetRange === range);
-      sheet.ranges.splice(index, 1);
-    },
-    [sheet],
-  );
-  return (
-    <>
-      <h2 className='mbs-cardSpacingBlock mbe-labelSpacingBlock text-sm font-semibold'>{t('range list heading')}</h2>
-      {sheet.ranges.length < 1 ? (
-        <Callout.Root>
-          <Callout.Title>{t('no ranges message')}</Callout.Title>
-        </Callout.Root>
-      ) : (
-        <List.Root<Range> items={sheet.ranges} isItem={Schema.is(Range)}>
-          {({ items: ranges }) =>
-            ranges.map((range, i) => (
-              <List.Item key={i} item={range} classNames={['p-2', ghostHover]}>
-                <List.ItemDragHandle />
-                <List.ItemTitle onClick={() => handleSelectRange(range)}>
-                  {t('range title', {
-                    position: rangeToA1Notation(rangeFromIndex(sheet, range.range)),
-                    key: t(`range key ${range.key} label`),
-                    value: t(`range value ${range.value} label`),
-                  })}
-                </List.ItemTitle>
-                <List.ItemDeleteButton onClick={() => handleDeleteRange(range)} />
-              </List.Item>
-            ))
-          }
-        </List.Root>
-      )}
-    </>
-  );
-};

package/src/components/SheetContainer/SheetContainer.stories.tsx

@@ -1,89 +0,0 @@
-//
-// Copyright 2024 DXOS.org
-//
-
-import '@dxos-theme';
-
-import { type Meta } from '@storybook/react-vite';
-import React from 'react';
-
-import { Capabilities, contributes, createResolver, IntentPlugin } from '@dxos/app-framework';
-import { withPluginManager } from '@dxos/app-framework/testing';
-import { GraphPlugin } from '@dxos/plugin-graph';
-import { fullyQualifiedId, useSpace } from '@dxos/react-client/echo';
-import { withClientProvider } from '@dxos/react-client/testing';
-import { AttendableContainer } from '@dxos/react-ui-attention';
-import { withAttention } from '@dxos/react-ui-attention/testing';
-import { withTheme, withLayout } from '@dxos/storybook-utils';
-
-import { SheetContainer } from './SheetContainer';
-import { createTestCells, useTestSheet, withComputeGraphDecorator } from '../../testing';
-import { translations } from '../../translations';
-import { SheetAction, SheetType } from '../../types';
-import { useComputeGraph } from '../ComputeGraph';
-import { RangeList } from '../RangeList';
-
-export const Basic = () => {
-  const space = useSpace();
-  const graph = useComputeGraph(space);
-  const sheet = useTestSheet(space, graph, { cells: createTestCells() });
-  if (!sheet || !space) {
-    return null;
-  }
-
-  return (
-    <AttendableContainer id={fullyQualifiedId(sheet)} classNames='contents'>
-      <SheetContainer space={space} sheet={sheet} role='article' ignoreAttention />
-    </AttendableContainer>
-  );
-};
-
-export const Spec = () => {
-  const space = useSpace();
-  const graph = useComputeGraph(space);
-  const sheet = useTestSheet(space, graph, { cells: { A1: { value: 'Ready' } } });
-  if (!sheet || !space) {
-    return null;
-  }
-
-  return (
-    <AttendableContainer id={fullyQualifiedId(sheet)} classNames='contents'>
-      <div role='none' className='grid grid-rows-[66%_33%] grid-cols-1'>
-        <SheetContainer space={space} sheet={sheet} role='article' ignoreAttention />
-        <div role='none' data-testid='grid.range-list'>
-          <RangeList sheet={sheet} />
-        </div>
-      </div>
-    </AttendableContainer>
-  );
-};
-
-const meta: Meta = {
-  title: 'plugins/plugin-sheet/SheetContainer',
-  component: SheetContainer,
-  decorators: [
-    withClientProvider({ types: [SheetType], createSpace: true }),
-    withComputeGraphDecorator(),
-    withTheme,
-    withLayout({ fullscreen: true, classNames: 'grid' }),
-    withAttention,
-    // TODO(wittjosiah): Consider whether we should refactor component so story doesn't need to depend on intents.
-    withPluginManager({
-      plugins: [IntentPlugin(), GraphPlugin()],
-      capabilities: [
-        contributes(
-          Capabilities.IntentResolver,
-          createResolver({
-            intent: SheetAction.DropAxis,
-            resolve: ({ model, axis, axisIndex }) => {
-              model[axis === 'col' ? 'dropColumn' : 'dropRow'](axisIndex);
-            },
-          }),
-        ),
-      ],
-    }),
-  ],
-  parameters: { translations },
-};
-
-export default meta;

package/src/components/SheetContainer/SheetContainer.tsx

@@ -1,36 +0,0 @@
-//
-// Copyright 2023 DXOS.org
-//
-
-import React from 'react';
-
-import { fullyQualifiedId, type Space } from '@dxos/react-client/echo';
-import { StackItem } from '@dxos/react-ui-stack';
-
-import { type SheetType } from '../../types';
-import { useComputeGraph } from '../ComputeGraph';
-import { FunctionEditor } from '../FunctionEditor';
-import { GridSheet } from '../GridSheet';
-import { SheetProvider } from '../SheetContext';
-import { SheetToolbar } from '../SheetToolbar';
-
-export type SheetContainerProps = {
-  space: Space;
-  sheet: SheetType;
-  role?: string;
-  ignoreAttention?: boolean;
-};
-
-export const SheetContainer = ({ space, sheet, role, ignoreAttention }: SheetContainerProps) => {
-  const graph = useComputeGraph(space);
-
-  return graph ? (
-    <SheetProvider sheet={sheet} graph={graph} ignoreAttention={ignoreAttention}>
-      <StackItem.Content toolbar statusbar {...(role === 'section' && { classNames: 'aspect-video' })}>
-        <SheetToolbar id={fullyQualifiedId(sheet)} />
-        <GridSheet />
-        <FunctionEditor />
-      </StackItem.Content>
-    </SheetProvider>
-  ) : null;
-};

package/src/components/SheetContainer/index.ts

@@ -1,7 +0,0 @@
-//
-// Copyright 2024 DXOS.org
-//
-
-import { SheetContainer } from './SheetContainer';
-
-export default SheetContainer;

package/src/components/SheetContext/index.ts

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

package/src/types/schema.ts

@@ -1,61 +0,0 @@
-//
-// Copyright 2023 DXOS.org
-//
-
-import { Schema } from 'effect';
-
-import { Type } from '@dxos/echo';
-
-export const CellValue = Schema.Struct({
-  // TODO(burdon): How to store dates (datetime, date, time), percentages, etc.
-  //  Consider import/export; natural access for other plugins. Special handling for currency (precision).
-  // TODO(burdon): Automerge (long string) or short string or number.
-  value: Schema.Any,
-});
-
-export type CellValue = Schema.Schema.Type<typeof CellValue>;
-
-// TODO(burdon): IMPORTANT: Reconcile with Field definition.
-export const Range = Schema.Struct({
-  range: Schema.String,
-  key: Schema.String,
-  value: Schema.String,
-});
-
-export type Range = Schema.Schema.Type<typeof Range>;
-
-// TODO(burdon): Visibility, locked, frozen, etc.
-export const RowColumnMeta = Schema.Struct({
-  size: Schema.optional(Schema.Number),
-});
-
-// TODO(burdon): Reconcile col/column (across packages).
-// TODO(burdon): Index to all updates when rows/columns are inserted/deleted.
-export const SheetType = Schema.Struct({
-  name: Schema.optional(Schema.String),
-
-  // Sparse map of cells referenced by index.
-  cells: Schema.mutable(Schema.Record({ key: Schema.String, value: Schema.mutable(CellValue) })),
-
-  // Ordered row indices.
-  rows: Schema.mutable(Schema.Array(Schema.String)),
-
-  // Ordered column indices.
-  columns: Schema.mutable(Schema.Array(Schema.String)),
-
-  // Row metadata referenced by index.
-  rowMeta: Schema.mutable(Schema.Record({ key: Schema.String, value: Schema.mutable(RowColumnMeta) })),
-
-  // Column metadata referenced by index.
-  columnMeta: Schema.mutable(Schema.Record({ key: Schema.String, value: Schema.mutable(RowColumnMeta) })),
-
-  // Cell formatting referenced by indexed range.
-  ranges: Schema.mutable(Schema.Array(Range)),
-}).pipe(
-  Type.Obj({
-    typename: 'dxos.org/type/Sheet',
-    version: '0.1.0',
-  }),
-);
-
-export interface SheetType extends Schema.Schema.Type<typeof SheetType> {}