@dxos/plugin-sheet 0.6.13 → 0.6.14-main.1366248

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

@@ -0,0 +1,45 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import { type Meta } from '@storybook/react';
+import React from 'react';
+
+import { useSpace } from '@dxos/react-client/echo';
+import { withClientProvider } from '@dxos/react-client/testing';
+import { withTheme, withLayout } from '@dxos/storybook-utils';
+
+import { SheetContainer } from './SheetContainer';
+import { createTestCells, useTestSheet, withComputeGraphDecorator } from '../../testing';
+import translations from '../../translations';
+import { SheetType } from '../../types';
+import { useComputeGraph } from '../ComputeGraph';
+
+export const Basic = () => {
+  const space = useSpace();
+  const graph = useComputeGraph(space);
+  const sheet = useTestSheet(space, graph, { cells: createTestCells() });
+  if (!sheet || !space) {
+    return null;
+  }
+
+  return <SheetContainer space={space} sheet={sheet} role='article' />;
+};
+
+const meta: Meta = {
+  title: 'plugins/plugin-sheet/SheetContainer',
+  component: SheetContainer,
+  decorators: [
+    withClientProvider({ types: [SheetType], createSpace: true }),
+    withComputeGraphDecorator(),
+    withTheme,
+    withLayout({
+      fullscreen: true,
+      tooltips: true,
+      classNames: 'grid grid-cols-1 grid-rows-[min-content_minmax(0,1fr)_min-content]',
+    }),
+  ],
+  parameters: { translations },
+};
+
+export default meta;

package/src/components/SheetContainer/SheetContainer.tsx

@@ -0,0 +1,33 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import React from 'react';
+
+import { type Space } from '@dxos/react-client/echo';
+
+import { type SheetType } from '../../types';
+import { useComputeGraph } from '../ComputeGraph';
+import { FunctionEditor } from '../FunctionEditor';
+import { GridSheet } from '../GridSheet';
+import { SheetProvider } from '../SheetContext';
+import { Toolbar } from '../Toolbar';
+
+export const SheetContainer = ({ space, sheet, role }: { space: Space; sheet: SheetType; role?: string }) => {
+  const graph = useComputeGraph(space);
+
+  return graph ? (
+    <SheetProvider sheet={sheet} graph={graph}>
+      <Toolbar.Root role={role}>
+        <Toolbar.Styles />
+        <Toolbar.Alignment />
+        <Toolbar.Separator />
+        <Toolbar.Actions />
+      </Toolbar.Root>
+      <div role='none' className='border-bs border-separator grid cols-1 rows-[1fr_min-content] min-bs-0'>
+        <GridSheet />
+        <FunctionEditor />
+      </div>
+    </SheetProvider>
+  ) : null;
+};

package/src/components/SheetContainer/index.ts

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

package/src/components/SheetContext/SheetContext.tsx

@@ -0,0 +1,127 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import React, { type PropsWithChildren, createContext, useCallback, useContext, useState } from 'react';
+
+import { invariant } from '@dxos/invariant';
+import { fullyQualifiedId } from '@dxos/react-client/echo';
+import {
+  Grid,
+  type GridContentProps,
+  type GridEditing,
+  type GridScopedProps,
+  useGridContext,
+} from '@dxos/react-ui-grid';
+
+import { type ComputeGraph } from '../../compute-graph';
+import { type CellAddress, type CellRange, type CompleteCellRange } from '../../defs';
+import { type SheetModel, useSheetModel } from '../../model';
+import { type SheetType } from '../../types';
+
+export type SheetContextValue = {
+  id: string;
+
+  model: SheetModel;
+
+  // Cursor state.
+  // TODO(burdon): Cursor and range should use indices.
+  cursor?: CellAddress;
+  setCursor: (cell: CellAddress | undefined) => void;
+  range?: CellRange;
+  setRange: (range: CellRange | undefined) => void;
+  cursorFallbackRange?: CompleteCellRange;
+
+  // Editing state (undefined if not editing).
+  editing: GridEditing;
+  setEditing: (editing: GridEditing) => void;
+
+  // Active refs
+  activeRefs: GridContentProps['activeRefs'];
+  setActiveRefs: (activeRefs: GridContentProps['activeRefs']) => void;
+
+  // Events.
+  // TODO(burdon): Generalize.
+  onInfo?: () => void;
+};
+
+const SheetContext = createContext<SheetContextValue | undefined>(undefined);
+
+export const useSheetContext = (): SheetContextValue => {
+  const context = useContext(SheetContext);
+  invariant(context);
+  return context;
+};
+
+const SheetProviderImpl = ({
+  model,
+  onInfo,
+  children,
+  __gridScope,
+}: GridScopedProps<PropsWithChildren<Pick<SheetContextValue, 'onInfo' | 'model'>>>) => {
+  const { id, editing, setEditing } = useGridContext('SheetProvider', __gridScope);
+
+  const [cursor, setCursorInternal] = useState<CellAddress>();
+  const [range, setRangeInternal] = useState<CellRange>();
+  const [cursorFallbackRange, setCursorFallbackRange] = useState<CompleteCellRange>();
+  const [activeRefs, setActiveRefs] = useState<GridContentProps['activeRefs']>('');
+
+  const setCursor = useCallback(
+    (nextCursor?: CellAddress) => {
+      setCursorInternal(nextCursor);
+      setCursorFallbackRange(
+        range?.to ? (range as CompleteCellRange) : nextCursor ? { from: nextCursor!, to: nextCursor! } : undefined,
+      );
+    },
+    [range],
+  );
+  const setRange = useCallback(
+    (nextRange?: CellRange) => {
+      setRangeInternal(nextRange);
+      setCursorFallbackRange(
+        nextRange?.to ? (nextRange as CompleteCellRange) : cursor ? { from: cursor!, to: cursor! } : undefined,
+      );
+    },
+    [cursor],
+  );
+
+  return (
+    <SheetContext.Provider
+      value={{
+        id,
+        model,
+        editing,
+        setEditing,
+        cursor,
+        setCursor,
+        range,
+        setRange,
+        cursorFallbackRange,
+        activeRefs,
+        setActiveRefs,
+        // TODO(burdon): Change to event.
+        onInfo,
+      }}
+    >
+      {children}
+    </SheetContext.Provider>
+  );
+};
+
+export type SheetProviderProps = {
+  graph: ComputeGraph;
+  sheet: SheetType;
+  readonly?: boolean;
+} & Pick<SheetContextValue, 'onInfo'>;
+
+export const SheetProvider = ({ children, graph, sheet, readonly, onInfo }: PropsWithChildren<SheetProviderProps>) => {
+  const model = useSheetModel(graph, sheet, { readonly });
+
+  return !model ? null : (
+    <Grid.Root id={fullyQualifiedId(sheet)}>
+      <SheetProviderImpl model={model} onInfo={onInfo}>
+        {children}
+      </SheetProviderImpl>
+    </Grid.Root>
+  );
+};

package/src/components/SheetContext/index.ts

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

package/src/components/Toolbar/Toolbar.stories.tsx

@@ -4,6 +4,7 @@
 
 import '@dxos-theme';
 
+import { type Meta } from '@storybook/react';
 import React from 'react';
 
 import { textBlockWidth } from '@dxos/react-ui-theme';
@@ -12,7 +13,7 @@ import { withLayout, withTheme } from '@dxos/storybook-utils';
 import { Toolbar } from './Toolbar';
 import translations from '../../translations';
 
-const Story = () => {
+const DefaultStory = () => {
   return (
     <Toolbar.Root classNames={textBlockWidth}>
       <Toolbar.Alignment />
@@ -20,12 +21,14 @@ const Story = () => {
   );
 };
 
-export default {
-  title: 'plugin-sheet/Toolbar',
-  component: Toolbar,
+export const Default = {};
+
+const meta: Meta<typeof Toolbar.Root> = {
+  title: 'plugins/plugin-sheet/Toolbar',
+  component: Toolbar.Root,
+  render: DefaultStory,
   decorators: [withTheme, withLayout({ tooltips: true })],
   parameters: { translations, layout: 'fullscreen' },
-  render: (args: any) => <Story {...args} />,
 };
 
-export const Default = {};
+export default meta;