@dxos/react-ui-table 0.8.4-main.c1de068 → 0.8.4-main.c85a9c8dae

package/src/components/Table/relations.stories.tsx

@@ -1,116 +0,0 @@
-//
-// Copyright 2025 DXOS.org
-//
-
-import '@dxos-theme';
-
-import { type StoryObj, type Meta } from '@storybook/react-vite';
-import React, { useEffect, useMemo, useState } from 'react';
-
-import { Type } from '@dxos/echo';
-import { type JsonSchemaType } from '@dxos/echo-schema';
-import { faker } from '@dxos/random';
-import { useClient } from '@dxos/react-client';
-import { useClientProvider, withClientProvider } from '@dxos/react-client/testing';
-import { DataType } from '@dxos/schema';
-import { createAsyncGenerator, type ValueGenerator } from '@dxos/schema/testing';
-import { withLayout, withTheme } from '@dxos/storybook-utils';
-
-import { Table } from './Table';
-import { useTableModel } from '../../hooks';
-import { type TableFeatures, TablePresentation, type TableRow } from '../../model';
-import { translations } from '../../translations';
-import { TableView } from '../../types';
-import { createTable } from '../../util';
-
-faker.seed(1);
-const generator: ValueGenerator = faker as any;
-
-// TODO(burdon): Many-to-many relations.
-// TODO(burdon): Mutable and immutable views.
-// TODO(burdon): Reconcile schemas types and utils (see API PR).
-// TODO(burdon): Base type for T (with id); see ECHO API PR?
-const useTestModel = <S extends Type.Obj.Any>(schema: S, count: number) => {
-  const client = useClient();
-  const { space } = useClientProvider();
-  const [view, setView] = useState<DataType.View>();
-  const [jsonSchema, setJsonSchema] = useState<JsonSchemaType>();
-
-  const features = useMemo<TableFeatures>(
-    () => ({ schemaEditable: false, dataEditable: true, selection: { enabled: false } }),
-    [],
-  );
-
-  useEffect(() => {
-    if (!space) {
-      return;
-    }
-
-    const timeout = setTimeout(async () => {
-      const { jsonSchema, view } = await createTable({ client, space, typename: Type.getTypename(schema) });
-      setJsonSchema(jsonSchema);
-      setView(view);
-    });
-    return () => clearTimeout(timeout);
-  }, [client, space, schema]);
-
-  const model = useTableModel<TableRow>({ view, schema: jsonSchema, rows: [], features });
-  useEffect(() => {
-    if (!model || !space) {
-      return;
-    }
-
-    const objectGenerator = createAsyncGenerator(generator, schema, { db: space?.db, force: true });
-    void objectGenerator.createObjects(count).then((objects) => {
-      model.setRows(objects);
-    });
-  }, [model, space]);
-
-  const presentation = useMemo(() => {
-    if (!model) {
-      return;
-    }
-
-    return new TablePresentation(model);
-  }, [model]);
-
-  return { model, presentation };
-};
-
-const DefaultStory = () => {
-  const client = useClient();
-  const { model: orgModel, presentation: orgPresentation } = useTestModel(DataType.Organization, 50);
-  const { model: contactModel, presentation: contactPresentation } = useTestModel(DataType.Person, 50);
-
-  return (
-    <div className='is-full bs-full grid grid-cols-2 divide-x divide-separator'>
-      <Table.Root>
-        <Table.Main model={orgModel} presentation={orgPresentation} client={client} ignoreAttention />
-      </Table.Root>
-      <Table.Root>
-        <Table.Main model={contactModel} presentation={contactPresentation} client={client} ignoreAttention />
-      </Table.Root>
-    </div>
-  );
-};
-
-const meta: Meta<typeof DefaultStory> = {
-  title: 'ui/react-ui-table/relations',
-  render: DefaultStory,
-  parameters: { translations, controls: { disable: true } },
-  decorators: [
-    withClientProvider({
-      types: [DataType.View, DataType.Organization, DataType.Person, TableView],
-      createIdentity: true,
-      createSpace: true,
-    }),
-    withTheme,
-    withLayout({ fullscreen: true }),
-  ],
-};
-
-export default meta;
-
-type Story = StoryObj<typeof DefaultStory>;
-
-export const Default: Story = {};

package/src/components/TableCellEditor/extension.ts

@@ -1,61 +0,0 @@
-//
-// Copyright 2024 DXOS.org
-//
-
-import {
-  autocompletion,
-  pickedCompletion,
-  type CompletionContext,
-  type CompletionResult,
-} from '@codemirror/autocomplete';
-import { type Extension } from '@codemirror/state';
-import { EditorView } from '@codemirror/view';
-
-export type CompletionOptions = {
-  debug?: boolean;
-  onQuery: (text: string) => Promise<CompletionResult['options']>;
-  onMatch: (data: any) => void;
-};
-
-/**
- * Autocomplete Codemirror extension.
- * https://codemirror.net/docs/ref/#autocomplete.autocompletion
- */
-export const completion = ({ debug, onQuery, onMatch }: CompletionOptions): Extension => {
-  return [
-    EditorView.theme({
-      '.cm-completionDialog': {
-        width: 'var(--dx-gridCellWidth)',
-      },
-    }),
-
-    autocompletion({
-      icons: false,
-      activateOnTyping: true,
-      closeOnBlur: !debug,
-      override: [
-        async (context: CompletionContext): Promise<CompletionResult> => {
-          const text = context.state.doc.toString();
-          return {
-            from: 0,
-            options: await onQuery(text),
-          };
-        },
-      ],
-
-      // TODO(burdon): Consts from grid (to line-up with grid).
-      tooltipClass: () => 'cm-completionDialog !mt-[8px] !-ml-[4px] [&>ul]:!max-h-[264px]',
-      optionClass: () => 'flex h-[33px] items-center',
-    }),
-
-    // Check for accepted completion metadata in the transaction.
-    EditorView.updateListener.of((update) => {
-      update.transactions.forEach((tr) => {
-        const completion = tr.annotation(pickedCompletion);
-        if (completion) {
-          onMatch((completion as any).data);
-        }
-      });
-    }),
-  ];
-};

package/src/model/table-sorting.ts

@@ -1,216 +0,0 @@
-//
-// Copyright 2025 DXOS.org
-//
-
-import { computed, signal, type Signal, type ReadonlySignal } from '@preact/signals-core';
-import orderBy from 'lodash.orderby';
-
-import { getValue, FormatEnum, TypeEnum, type SortDirectionType, type FieldSortType } from '@dxos/echo-schema';
-import { formatForDisplay } from '@dxos/react-ui-form';
-import type { PropertyType, FieldType, DataType, ProjectionModel } from '@dxos/schema';
-
-import { type TableRow } from './table-model';
-
-/**
- * Represents the local sort state.
- * - undefined: No local sort set, fallback to view sort.
- * - cleared: Sort explicitly cleared by user.
- * - active: Active local sort with sort configuration.
- */
-type LocalSort = { type: 'cleared' } | { type: 'active'; sort: FieldSortType } | undefined;
-
-/**
- * Manages table sorting functionality through display and data index mapping.
- *
- * When a table is sorted, rows visually reorder but we need to maintain references
- * to the original data positions. This is handled through two types of indices:
- *
- * - Display indices: The visual positions after sorting
- * - Data indices: The original positions in the source data
- *
- * The _displayToDataIndex map maintains these relationships, enabling lookups
- * between visual and source positions.
- *
- * Example mapping between display and data indices:
- *
- * Original Data:        Sorted Display:       Mapping: (Display → Data)
- * ┌──────────────┐      ┌──────────────┐      ┌────────┐
- * │ 0: "Banana"  │  =>  │ 0: "Apple"   │  =>  │ 0 => 1 │
- * │ 1: "Apple"   │  =>  │ 1: "Banana"  │  =>  │ 1 => 0 │
- * │ 2: "Cherry"  │  =>  │ 2: "Cherry"  │  =>  │ 2 => 2 │
- * └──────────────┘      └──────────────┘      └────────┘
- */
-export class TableSorting<T extends TableRow> {
-  private readonly _displayToDataIndex = new Map<number, number>();
-  private readonly _rows: Signal<T[]>;
-  private readonly _localSort = signal<LocalSort>(undefined);
-  private readonly _isDirty: ReadonlySignal<boolean>;
-  public readonly sortedRows: ReadonlySignal<T[]>;
-
-  constructor(
-    rows: Signal<T[]>,
-    private readonly _view: DataType.View,
-    private readonly _projection: ProjectionModel,
-  ) {
-    this._rows = rows;
-    this._isDirty = computed(() => {
-      const local = this._localSort.value;
-      const viewSort = this._view.query.sort?.[0];
-      if (local?.type === 'cleared') {
-        return viewSort !== undefined;
-      }
-      if (local?.type === 'active') {
-        if (!viewSort) {
-          return true;
-        }
-        return local.sort.fieldId !== viewSort.fieldId || local.sort.direction !== viewSort.direction;
-      }
-      return false;
-    });
-    this.sortedRows = this.initialiseSortedRows();
-  }
-
-  /**
-   * @reactive
-   * @returns Local sort if present, falls back to view sort.
-   */
-  public get sorting(): FieldSortType | undefined {
-    const local = this._localSort.value;
-    if (local?.type === 'cleared') {
-      return undefined;
-    }
-    if (local?.type === 'active') {
-      return local.sort;
-    }
-
-    return this._view.query.sort?.[0];
-  }
-
-  /**
-   * @reactive
-   * @returns Whether local sort differs from view sort.
-   */
-  public get isDirty(): boolean {
-    return this._isDirty.value;
-  }
-
-  public getDataIndex(displayIndex: number): number {
-    return this._displayToDataIndex.get(displayIndex) ?? displayIndex;
-  }
-
-  public setSort(fieldId: string, direction: SortDirectionType): void {
-    this._localSort.value = {
-      type: 'active',
-      sort: { fieldId, direction },
-    };
-  }
-
-  public toggleSort(fieldId: string): void {
-    if (!this.sorting || this.sorting.fieldId !== fieldId) {
-      return;
-    }
-
-    switch (this.sorting.direction) {
-      case 'asc': {
-        this.setSort(fieldId, 'desc');
-        break;
-      }
-      case 'desc': {
-        this.setSort(fieldId, 'asc');
-        break;
-      }
-    }
-  }
-
-  public clearSort(): void {
-    this._localSort.value = { type: 'cleared' };
-  }
-
-  public save(): void {
-    if (this._localSort.value !== undefined) {
-      if (this._localSort.value.type === 'active') {
-        this._view.query.sort = [this._localSort.value.sort];
-      } else {
-        this._view.query.sort = [];
-      }
-      this._localSort.value = undefined;
-    }
-  }
-
-  //
-  // Initialisation.
-  //
-
-  private initialiseSortedRows(): ReadonlySignal<T[]> {
-    return computed(() => {
-      this._displayToDataIndex.clear();
-      const sort = this.sorting;
-      if (!sort) {
-        return this._rows.value;
-      }
-
-      const field = this._projection.fields.find((f) => f.id === sort.fieldId);
-      if (!field) {
-        return this._rows.value;
-      }
-
-      const { props } = this._projection.getFieldProjection(field.id);
-
-      const dataWithIndices = this._rows.value.map((item, index) => {
-        const sortValue = this.getSortValue(props, field, item);
-        const isEmpty = !(props.type === TypeEnum.Boolean) && (sortValue == null || sortValue === '');
-
-        return { item, index, value: sortValue, isEmpty };
-      });
-
-      const ordered = orderBy(dataWithIndices, ['isEmpty', 'value'], ['asc', sort.direction]);
-
-      ordered.forEach(({ index: dataIndex }, displayIndex) => {
-        if (displayIndex !== dataIndex) {
-          this._displayToDataIndex.set(displayIndex, dataIndex);
-        }
-      });
-
-      return ordered.map(({ item }) => item);
-    });
-  }
-
-  private getSortValue(props: PropertyType, field: FieldType, item: T) {
-    const { type, format } = props;
-    const value = getValue(item, field.path);
-
-    if (type === TypeEnum.Boolean) {
-      return !!value; // Coerce null/undefined to false for booleans.
-    }
-    if (type === TypeEnum.Number) {
-      return value;
-    }
-    if (value == null) {
-      return value;
-    }
-
-    /**
-     * For single select fields, the sort value is determined by the index of the option in the
-     * options array. This ensures sort order matches the configured option order.
-     */
-    if (format === FormatEnum.SingleSelect) {
-      const options = props.options;
-      if (!options) {
-        return undefined;
-      }
-
-      const option = options.find((option) => option.id === value);
-      return option ? options.indexOf(option) : undefined;
-    }
-
-    // TODO(ZaymonFC): Should we format this returned value for display based on the referenced prop format?
-    //   Right now we're going to be sorting based on the raw values.
-    //   Maybe we need to recurse this function with the referenced prop format and field?
-    if (format === FormatEnum.Ref && field.referencePath) {
-      const refValue = getValue(value.target, field.referencePath);
-      return refValue;
-    }
-
-    return formatForDisplay({ type, format, value });
-  }
-}

package/src/types/schema.ts

@@ -1,16 +0,0 @@
-//
-// Copyright 2025 DXOS.org
-//
-
-import { Schema } from 'effect';
-
-import { Type } from '@dxos/echo';
-import { JsonPath } from '@dxos/effect';
-
-export const TableView = Schema.Struct({
-  sizes: Schema.Record({
-    key: JsonPath,
-    value: Schema.Number,
-  }).pipe(Schema.mutable),
-}).pipe(Type.Obj({ typename: 'dxos.org/type/TableView', version: '0.1.0' }));
-export type TableView = Schema.Schema.Type<typeof TableView>;

package/src/util/table.ts

@@ -1,49 +0,0 @@
-//
-// Copyright 2024 DXOS.org
-//
-
-import { Match } from 'effect';
-
-import { Obj } from '@dxos/echo';
-import { type JsonPath, toEffectSchema, type JsonSchemaType } from '@dxos/echo-schema';
-import { type SimpleType } from '@dxos/effect';
-import { type CreateViewFromSpaceProps, type DataType, createViewFromSpace, getSchemaProperties } from '@dxos/schema';
-
-import { TableView } from '../types';
-
-type CreateTableProps = Omit<CreateViewFromSpaceProps, 'presentation'> & {
-  sizes?: Record<string, number>;
-};
-
-export const createTable = async ({
-  sizes,
-  ...props
-}: CreateTableProps): Promise<{ jsonSchema: JsonSchemaType; view: DataType.View }> => {
-  const table = Obj.make(TableView, { sizes: {} });
-  const { jsonSchema, view } = await createViewFromSpace({ ...props, presentation: table });
-
-  // Preset sizes.
-  const schema = toEffectSchema(jsonSchema);
-  const shouldIncludeId = props.fields?.find((field) => field === 'id') !== undefined;
-  const properties = getSchemaProperties(schema.ast, {}, shouldIncludeId);
-  for (const property of properties) {
-    if (sizes?.[property.name]) {
-      table.sizes[property.name as JsonPath] = sizes[property.name];
-      continue;
-    }
-
-    Match.type<SimpleType>().pipe(
-      Match.when('boolean', () => {
-        table.sizes[property.name as JsonPath] = 100;
-      }),
-      Match.when('number', () => {
-        table.sizes[property.name as JsonPath] = 100;
-      }),
-      Match.orElse(() => {
-        // Noop.
-      }),
-    )(property.type);
-  }
-
-  return { jsonSchema, view };
-};