@dxos/react-ui-table 0.8.4-main.67995b8 → 0.8.4-main.70d3990

package/src/components/TableCellEditor/TableCellEditor.stories.tsx

@@ -2,100 +2,60 @@
 // Copyright 2024 DXOS.org
 //
 
-import '@dxos-theme';
-
 import { type Meta, type StoryObj } from '@storybook/react-vite';
-import React, { useEffect, useMemo, useState } from 'react';
+import React from 'react';
 
 import { Obj } from '@dxos/echo';
-import { type EchoSchema, isMutable } from '@dxos/echo-schema';
-import { invariant } from '@dxos/invariant';
 import { faker } from '@dxos/random';
-import { Filter, useQuery } from '@dxos/react-client/echo';
-import { useClientProvider, withClientProvider } from '@dxos/react-client/testing';
-import { defaultRowSize, Grid, type GridEditing } from '@dxos/react-ui-grid';
-import { createDefaultSchema, DataType } from '@dxos/schema';
-import { withLayout, withTheme } from '@dxos/storybook-utils';
+import { withClientProvider } from '@dxos/react-client/testing';
+import { withTheme } from '@dxos/react-ui/testing';
+import { Grid, type GridEditing, defaultRowSize } from '@dxos/react-ui-grid';
+import { View } from '@dxos/schema';
+import { Task } from '@dxos/types';
 
-import { TableCellEditor, type TableCellEditorProps } from './TableCellEditor';
-import { useTableModel } from '../../hooks';
-import { type TableFeatures } from '../../model';
+import { useTestTableModel } from '../../testing';
 import { translations } from '../../translations';
-import { TableView } from '../../types';
-import { createTable } from '../../util';
+import { Table } from '../../types';
+
+import { TableCellEditor } from './TableCellEditor';
 
 type StoryProps = {
   editing: GridEditing;
 };
 
 const DefaultStory = ({ editing }: StoryProps) => {
-  const { space } = useClientProvider();
-  invariant(space);
-
-  const views = useQuery(space, Filter.type(DataType.View));
-  const [view, setView] = useState<DataType.View>();
-  const [schema, setSchema] = useState<EchoSchema>();
-  useEffect(() => {
-    if (space && views.length && !view) {
-      const view = views[0];
-      setView(view);
-      setSchema(space.db.schemaRegistry.getSchema(view.query.typename!));
-    }
-  }, [space, views, view]);
-
-  const features: Partial<TableFeatures> = useMemo(
-    () => ({
-      selection: { enabled: true, mode: 'multiple' },
-      dataEditable: true,
-      schemaEditable: schema && isMutable(schema),
-    }),
-    [schema],
-  );
+  const { model, table } = useTestTableModel();
 
-  const model = useTableModel({ view, schema: schema?.jsonSchema, features });
-
-  const handleQuery: TableCellEditorProps['onQuery'] = async ({ field }) => {
-    // TODO(dmaretskyi): If no schema query nothing
-    const { objects } = await space.db.query(schema ? Filter.type(schema) : Filter.everything()).run();
-    return objects.map((obj) => {
-      const label = obj[field.referencePath ?? 'id'];
-      return {
-        label,
-        data: obj,
-      };
-    });
-  };
-
-  if (!model || !schema || !view) {
+  if (!model || !table) {
     return <div />;
   }
 
   return (
-    <div className='flex w-[300px] border border-separator' style={{ height: defaultRowSize }}>
+    <div className='flex is-[300px] border border-separator' style={{ height: defaultRowSize }}>
       <Grid.Root id='test' editing={editing}>
-        <TableCellEditor model={model} onQuery={handleQuery} />
+        <TableCellEditor model={model} schema={Task.Task} />
       </Grid.Root>
     </div>
   );
 };
 
-const meta: Meta<StoryProps> = {
+const meta = {
   title: 'ui/react-ui-table/TableCellEditor',
   component: DefaultStory,
   render: DefaultStory,
-  parameters: { translations, layout: 'centered' },
   decorators: [
+    withTheme,
     withClientProvider({
-      types: [DataType.View, TableView],
+      types: [View.View, Task.Task, Table.Table],
       createIdentity: true,
       createSpace: true,
-      onSpaceCreated: async ({ client, space }) => {
-        const schema = createDefaultSchema();
-        const { view } = await createTable({ client, space, typename: schema.typename });
-        space.db.add(view);
+      onCreateSpace: async ({ client, space }) => {
+        const { view, jsonSchema } = await View.makeFromSpace({ client, space, typename: Task.Task.typename });
+        const table = Table.make({ view, jsonSchema });
+        space.db.add(table);
         Array.from({ length: 10 }).forEach(() => {
           space.db.add(
-            Obj.make(schema, {
+            Obj.make(Task.Task, {
               title: faker.person.fullName(),
               status: faker.helpers.arrayElement(['todo', 'in-progress', 'done'] as const),
               description: faker.lorem.sentence(),
@@ -104,14 +64,16 @@ const meta: Meta<StoryProps> = {
         });
       },
     }),
-    withTheme,
-    withLayout(),
   ],
-};
+  parameters: {
+    translations,
+    layout: 'centered',
+  },
+} satisfies Meta<typeof DefaultStory>;
 
 export default meta;
 
-type Story = StoryObj<StoryProps>;
+type Story = StoryObj<typeof meta>;
 
 export const Default: Story = {
   args: {

package/src/components/TableCellEditor/TableCellEditor.tsx

@@ -3,64 +3,59 @@
 //
 
 import { type Completion } from '@codemirror/autocomplete';
-import { type Schema } from 'effect/Schema';
-import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { EditorView } from '@codemirror/view';
+import type * as Schema from 'effect/Schema';
+import React, { useCallback, useMemo, useRef, useState } from 'react';
 
-import { FormatEnum, TypeEnum } from '@dxos/echo-schema';
+import { debounce } from '@dxos/async';
+import type { Client } from '@dxos/client';
+import { Format, TypeEnum } from '@dxos/echo/internal';
 import { invariant } from '@dxos/invariant';
-import { type DxGrid } from '@dxos/lit-grid';
-import { useThemeContext } from '@dxos/react-ui';
-import { createMarkdownExtensions } from '@dxos/react-ui-editor';
+import { type DxGridAxis, type DxGridPosition } from '@dxos/lit-grid';
 import {
-  cellQuery,
-  editorKeys,
-  parseCellIndex,
-  useGridContext,
-  type DxGridPlanePosition,
+  type EditorBlurHandler,
   type EditorKeyEvent,
   type EditorKeyOrBlurHandler,
-  type EditorBlurHandler,
   GridCellEditor,
   type GridCellEditorProps,
   type GridScopedProps,
+  editorKeys,
+  parseCellIndex,
+  useGridContext,
 } from '@dxos/react-ui-grid';
-import { tagPicker, createLinks } from '@dxos/react-ui-tag-picker';
 import { type FieldProjection } from '@dxos/schema';
 
-import { CellValidationMessage } from './CellValidationMessage';
-import { FormCellEditor } from './FormCellEditor';
-import { completion } from './extension';
-import { type TableModel, type ModalController } from '../../model';
+import { type ModalController, type TableModel } from '../../model';
 
-const newValue = Symbol.for('newValue');
+import { CellValidationMessage } from './CellValidationMessage';
+import { FormCellEditor, type OnCreateHandler } from './FormCellEditor';
 
 /**
  * Option to create new object/value.
  */
-export const createOption = (text: string) => ({ [newValue]: true, text });
-
-const isCreateOption = (data: any) => typeof data === 'object' && data[newValue];
-
 export type QueryResult = Pick<Completion, 'label'> & { data: any };
 
 export type TableCellEditorProps = {
   model?: TableModel;
   modals?: ModalController;
-  schema?: Schema.AnyNoContext;
-  onEnter?: (cell: DxGridPlanePosition) => void;
-  onFocus?: DxGrid['refocus'];
+  schema?: Schema.Schema.AnyNoContext;
+  onFocus?: (axis?: DxGridAxis, delta?: -1 | 0 | 1, cell?: DxGridPosition) => void;
+  onCreate?: OnCreateHandler;
   onSave?: () => void;
-  onQuery?: (field: FieldProjection, text: string) => Promise<QueryResult[]>;
+  client?: Client;
 };
 
+const adaptValidationMessage = (message: string | null) =>
+  message ? (message.endsWith('is missing') ? 'Can’t be blank' : message) : null;
+
 export const TableValueEditor = ({
   model,
   modals,
   schema,
-  onEnter,
   onFocus,
   onSave,
-  onQuery,
+  onCreate,
+  client,
   __gridScope,
 }: GridScopedProps<TableCellEditorProps>) => {
   const { editing } = useGridContext('TableValueEditor', __gridScope);
@@ -79,8 +74,9 @@ export const TableValueEditor = ({
 
   if (
     fieldProjection?.props.type === TypeEnum.Array ||
-    fieldProjection?.props.format === FormatEnum.SingleSelect
-    // TODO(thure): Support `FormatEnum.MultiSelect`
+    fieldProjection?.props.format === Format.TypeFormat.SingleSelect ||
+    fieldProjection?.props.format === Format.TypeFormat.Ref
+    // TODO(thure): Support `Format.TypeFormat.MultiSelect`
   ) {
     return (
       <FormCellEditor
@@ -89,40 +85,30 @@ export const TableValueEditor = ({
         schema={schema}
         __gridScope={__gridScope}
         onSave={onSave}
+        onCreate={onCreate}
+        client={client}
+        modals={modals}
       />
     );
   }
 
   // For all other types, use the existing cell editor
-  return (
-    <TableCellEditor
-      model={model}
-      modals={modals}
-      onEnter={onEnter}
-      onFocus={onFocus}
-      onQuery={onQuery}
-      onSave={onSave}
-      __gridScope={__gridScope}
-    />
-  );
+  return <TableCellEditor model={model} modals={modals} onFocus={onFocus} onSave={onSave} __gridScope={__gridScope} />;
 };
 
-const editorSlots = { scroller: { className: '!plb-[--dx-grid-cell-editor-padding-block]' } };
+const editorSlots = { scroll: { className: '!plb-[--dx-grid-cell-editor-padding-block]' } };
 
 export const TableCellEditor = ({
   model,
   modals,
-  onEnter,
   onFocus,
-  onQuery,
   onSave,
   __gridScope,
 }: GridScopedProps<TableCellEditorProps>) => {
-  const { id: gridId, editing, setEditing } = useGridContext('TableCellEditor', __gridScope);
+  const { editing, setEditing } = useGridContext('TableCellEditor', __gridScope);
   const suppressNextBlur = useRef(false);
-  const { themeMode } = useThemeContext();
-  const [_validationError, setValidationError] = useState<string | null>(null);
-  const [_validationVariant, setValidationVariant] = useState<'error' | 'warning'>('error');
+  const [validationError, setValidationError] = useState<string | null>(null);
+  const [validationVariant, setValidationVariant] = useState<'error' | 'warning'>('error');
 
   const fieldProjection = useMemo<FieldProjection | undefined>(() => {
     if (!model || !editing) {
@@ -136,38 +122,6 @@ export const TableCellEditor = ({
     return fieldProjection;
   }, [model, editing]);
 
-  useEffect(() => {
-    // Check for existing validation errors when editing starts (for draft rows).
-    if (!model || !editing || !fieldProjection) {
-      setValidationError(null);
-      return;
-    }
-
-    const cell = parseCellIndex(editing.index);
-    const { row, col } = cell;
-
-    if (model.isDraftCell(cell)) {
-      const field = model.projection.fields[col];
-      const hasValidationError = model.hasDraftRowValidationError(row, field.path);
-
-      if (hasValidationError) {
-        const draftRows = model.draftRows.value;
-        if (row >= 0 && row < draftRows.length) {
-          const draftRow = draftRows[row];
-          const validationError = draftRow.validationErrors?.find((error) => error.path === field.path);
-          if (validationError) {
-            setValidationError(validationError.message);
-            setValidationVariant('warning');
-          }
-        }
-      } else {
-        setValidationError(null);
-      }
-    } else {
-      setValidationError(null);
-    }
-  }, [model, editing, fieldProjection]);
-
   const handleEnter = useCallback(
     async (value: any) => {
       if (!model || !editing) {
@@ -180,28 +134,34 @@ export const TableCellEditor = ({
       if (validationResult.valid) {
         setValidationError(null);
         model.setCellData(cell, value);
-        onEnter?.(cell);
         onFocus?.();
         setEditing(null);
         onSave?.();
       } else {
-        setValidationError(validationResult.error);
+        setValidationError(adaptValidationMessage(validationResult.error));
         setValidationVariant('error');
       }
     },
-    [model, editing, onEnter, onFocus, setEditing],
+    [model, editing, onFocus, setEditing],
   );
 
   const handleBlur = useCallback<EditorBlurHandler>(
     async (value) => {
-      if (!model || !editing) {
-        return;
-      }
       if (suppressNextBlur.current) {
         suppressNextBlur.current = false;
+      } else if (model && editing) {
+        // Save silently if validation passes
+        const cell = parseCellIndex(editing.index);
+        if (value !== undefined) {
+          const result = await model.validateCellData(cell, value);
+          if (result.valid) {
+            setValidationError(null);
+            model.setCellData(cell, value);
+            setEditing(null);
+            onSave?.();
+          }
+        }
       }
-
-      // Don't save on blur - let handleClose handle validation and saving
     },
     [model, editing],
   );
@@ -213,25 +173,25 @@ export const TableCellEditor = ({
       }
 
       const cell = parseCellIndex(editing.index);
-
       if (value !== undefined) {
         // Pre-commit validation check.
         const result = await model.validateCellData(cell, value);
 
         if (result.valid) {
+          suppressNextBlur.current = true;
           setValidationError(null);
           model.setCellData(cell, value);
           setEditing(null);
           onSave?.();
-          onEnter?.(cell);
           if (event && onFocus) {
-            onFocus(determineNavigationAxis(event), determineNavigationDelta(event));
+            onFocus(determineNavigationAxis(event), determineNavigationDelta(event), cell);
           }
         } else {
           setValidationError(result.error);
           setValidationVariant('error');
         }
       } else {
+        suppressNextBlur.current = true;
         setValidationError(null);
         setEditing(null);
         onSave?.();
@@ -240,154 +200,48 @@ export const TableCellEditor = ({
         }
       }
     },
-    [model, editing, onFocus, onEnter, fieldProjection, setEditing, onSave],
+    [model, editing, onFocus, fieldProjection, setEditing, onSave],
   );
 
-  const extension = useMemo(() => {
+  const extensions = useMemo(() => {
     if (!fieldProjection) {
       return [];
     }
 
-    const extension = [
+    const extensions = [
       editorKeys({
         onClose: handleClose,
         ...(editing?.initialContent && { onNav: handleClose }),
       }),
     ];
-
-    const format = fieldProjection.props.format;
-
-    if (format === FormatEnum.SingleSelect || format === FormatEnum.MultiSelect) {
-      // TODO(ZaymonFC): Reconcile this with the TagPicker component?
-      // Add markdown extensions needed by tag picker.
-      extension.push(createMarkdownExtensions({ themeMode }));
-
-      const options = fieldProjection.props.options || [];
-
-      const mode = format === FormatEnum.SingleSelect ? ('single-select' as const) : ('multi-select' as const);
-
-      extension.push(
-        tagPicker({
-          mode,
-          keymap: false,
-          onSearch: (text, selectedIds) => {
-            return options
-              .filter(
-                (option) =>
-                  selectedIds.indexOf(option.id) === -1 &&
-                  (text.length === 0 || option.title.toLowerCase().includes(text.toLowerCase())),
-              )
-              .map((option) => ({
-                id: option.id,
-                label: option.title,
-                hue: option.color as any,
-              }));
-          },
-          onUpdate: (ids) => {
-            if (model && editing) {
-              if (ids.length === 0) {
-                return;
-              }
-              if (mode === 'single-select') {
-                void handleEnter(ids[0]);
+    // Add validation extension to handle content changes.
+    if (model && editing) {
+      extensions.push(
+        EditorView.updateListener.of(
+          debounce((update) => {
+            const content = update.state.doc.toString();
+            const cell = parseCellIndex(editing.index);
+
+            // Perform validation on content change.
+            void model.validateCellData(cell, content).then((result) => {
+              if (result.valid) {
+                setValidationError(null);
               } else {
-                void handleEnter(ids);
+                setValidationError(result.error);
+                setValidationVariant('error');
               }
-            }
-          },
-        }),
+            });
+          }, 10),
+        ),
       );
     }
 
-    if (onQuery) {
-      switch (fieldProjection.props.format) {
-        case FormatEnum.Ref: {
-          extension.push([
-            completion({
-              onQuery: (text) => onQuery(fieldProjection, text),
-              onMatch: (data) => {
-                if (model && editing && modals) {
-                  if (isCreateOption(data)) {
-                    const { field, props } = fieldProjection;
-                    if (props.referenceSchema) {
-                      suppressNextBlur.current = true;
-                      modals.openCreateRef(
-                        props.referenceSchema,
-                        document.querySelector(cellQuery(editing.index, gridId)),
-                        {
-                          [field.referencePath!]: data.text,
-                        },
-                        (data) => {
-                          void handleEnter(data);
-                        },
-                      );
-                    }
-                  } else {
-                    void handleEnter(data);
-                  }
-                }
-              },
-            }),
-          ]);
-          break;
-        }
-      }
-    }
-
-    return extension;
-  }, [model, modals, editing, fieldProjection, handleClose, themeMode]);
+    return extensions;
+  }, [model, modals, editing, fieldProjection, handleClose]);
 
   const getCellContent = useCallback<GridCellEditorProps['getCellContent']>(() => {
     if (model && editing) {
       const cell = parseCellIndex(editing.index);
-      const { col } = cell;
-      const field = model.projection.fields[col];
-      const fieldProjection = model.projection.getFieldProjection(field.id);
-
-      if (
-        fieldProjection?.props.format === FormatEnum.SingleSelect ||
-        fieldProjection?.props.format === FormatEnum.MultiSelect
-      ) {
-        const value = model.getCellData(cell);
-
-        if (value !== undefined) {
-          const options = fieldProjection.props.options || [];
-
-          if (fieldProjection.props.format === FormatEnum.MultiSelect) {
-            const tagItems = value
-              .split(',')
-              .map((id: string) => {
-                const option = options.find((o) => o.id === id);
-                if (option) {
-                  return {
-                    id,
-                    label: option.title,
-                    hue: option.color as any,
-                  };
-                }
-                return undefined;
-              })
-              .filter((item: any): item is { id: any; label: string; hue: any } => item !== undefined);
-
-            return createLinks(tagItems);
-          } else {
-            const option = options.find((o) => o.id === value);
-
-            if (option) {
-              const tagItem = {
-                id: value,
-                label: option.title,
-                hue: option.color as any,
-              };
-
-              return createLinks([tagItem]);
-            }
-          }
-        }
-
-        return '';
-      }
-
       const value = model.getCellData(cell);
       return value !== undefined ? String(value) : '';
     }
@@ -395,12 +249,8 @@ export const TableCellEditor = ({
 
   return (
     <>
-      <CellValidationMessage
-        validationError={_validationError}
-        variant={_validationVariant}
-        __gridScope={__gridScope}
-      />
-      <GridCellEditor extension={extension} getCellContent={getCellContent} onBlur={handleBlur} slots={editorSlots} />
+      <CellValidationMessage validationError={validationError} variant={validationVariant} __gridScope={__gridScope} />
+      <GridCellEditor extensions={extensions} getCellContent={getCellContent} onBlur={handleBlur} slots={editorSlots} />
     </>
   );
 };

package/src/components/TableCellEditor/index.ts

@@ -3,3 +3,4 @@
 //
 
 export * from './TableCellEditor';
+export { type OnCreateHandler } from './FormCellEditor';