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

package/src/testing/useTestTableModel.ts

@@ -0,0 +1,122 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { useCallback, useMemo, useRef } from 'react';
+
+import { isMutable, toJsonSchema } from '@dxos/echo-schema';
+import { useGlobalFilteredObjects } from '@dxos/plugin-search';
+import { faker } from '@dxos/random';
+import { useClient } from '@dxos/react-client';
+import { Filter, useQuery, useSchema } from '@dxos/react-client/echo';
+import { useClientProvider } from '@dxos/react-client/testing';
+import { DataType, ProjectionModel } from '@dxos/schema';
+
+import { type TableController } from '../components';
+import { useTableModel, useAddRow } from '../hooks';
+import { TablePresentation } from '../model';
+
+faker.seed(0); // NOTE(ZaymonFC): Required for smoke tests.
+
+/**
+ * Custom hook to create and manage a test table model for storybook demonstrations.
+ * Provides table data, schema, and handlers for table operations.
+ */
+export const useTestTableModel = () => {
+  const client = useClient();
+  const { space } = useClientProvider();
+
+  const views = useQuery(space, Filter.type(DataType.View));
+  const view = useMemo(() => views.at(0), [views]);
+  const schema = useSchema(client, space, view?.query.typename);
+  const jsonSchema = useMemo(() => (schema ? toJsonSchema(schema) : undefined), [schema]);
+
+  const projection = useMemo(() => {
+    if (schema && view?.projection) {
+      return new ProjectionModel(toJsonSchema(schema), view.projection);
+    }
+  }, [schema, view?.projection]);
+
+  const features = useMemo(
+    () => ({
+      selection: { enabled: true, mode: 'multiple' as const },
+      dataEditable: true,
+      schemaEditable: schema && isMutable(schema),
+    }),
+    [schema],
+  );
+
+  const objects = useQuery(space, schema ? Filter.type(schema) : Filter.nothing());
+  const filteredObjects = useGlobalFilteredObjects(objects);
+
+  const tableRef = useRef<TableController>(null);
+  const handleCellUpdate = useCallback((cell: any) => {
+    tableRef.current?.update?.(cell);
+  }, []);
+
+  const handleRowOrderChange = useCallback(() => {
+    tableRef.current?.update?.();
+  }, []);
+
+  const addRow = useAddRow({ space, schema });
+
+  const handleDeleteRows = useCallback(
+    (_: number, objects: any[]) => {
+      for (const object of objects) {
+        space?.db.remove(object);
+      }
+    },
+    [space],
+  );
+
+  const handleDeleteColumn = useCallback(
+    (fieldId: string) => {
+      if (projection) {
+        projection.deleteFieldProjection(fieldId);
+      }
+    },
+    [projection],
+  );
+
+  const model = useTableModel({
+    view,
+    schema: jsonSchema,
+    projection,
+    features,
+    rows: filteredObjects,
+    onInsertRow: addRow,
+    onDeleteRows: handleDeleteRows,
+    onDeleteColumn: handleDeleteColumn,
+    onCellUpdate: handleCellUpdate,
+    onRowOrderChange: handleRowOrderChange,
+  });
+
+  const handleInsertRow = useCallback(() => {
+    model?.insertRow();
+  }, [model]);
+
+  const handleSaveView = useCallback(() => {
+    model?.saveView();
+  }, [model]);
+
+  const presentation = useMemo(() => {
+    if (model) {
+      return new TablePresentation(model);
+    }
+  }, [model]);
+
+  return {
+    schema,
+    view,
+    projection,
+    tableRef,
+    model,
+    presentation,
+    space,
+    client,
+    handleInsertRow,
+    handleSaveView,
+    handleDeleteRows,
+    handleDeleteColumn,
+  };
+};

package/src/translations.ts

@@ -2,9 +2,11 @@
 // Copyright 2023 DXOS.org
 //
 
-export const translationKey = 'table';
+import { type Resource } from '@dxos/react-ui';
 
-export default [
+export const translationKey = 'react-ui-table';
+
+export const translations = [
   {
     'en-US': {
       [translationKey]: {
@@ -32,4 +34,4 @@ export default [
       },
     },
   },
-] as const;
+] as const satisfies Resource[];

package/src/types/index.ts

@@ -1,5 +1,5 @@
 //
-// Copyright 2024 DXOS.org
+// Copyright 2025 DXOS.org
 //
 
-export * from './table';
+export * from './schema';

package/src/types/schema.ts

@@ -0,0 +1,16 @@
+//
+// 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/dynamic-table.ts

@@ -4,18 +4,18 @@
 
 import { type Schema } from 'effect';
 
-import { Obj, Ref } from '@dxos/echo';
+import { Obj } from '@dxos/echo';
 import { getTypename, toJsonSchema } from '@dxos/echo-schema';
 import type { JsonSchemaType, SortDirectionType } from '@dxos/echo-schema';
 import {
   createView,
+  type DataType,
   getSchemaFromPropertyDefinitions,
-  ViewProjection,
-  type ViewType,
+  ProjectionModel,
   type SchemaPropertyDefinition,
 } from '@dxos/schema';
 
-import { TableType } from '../types';
+import { TableView } from '../types';
 
 // TODO(ZaymonFC): Upstream these extra fields to SchemaPropertyDefinition to enhance schema-tools schema creation.
 type PropertyDisplayProps = {
@@ -61,32 +61,34 @@ export const makeDynamicTable = ({
   typename: string;
   jsonSchema: JsonSchemaType;
   properties?: TablePropertyDefinition[];
-}): { table: TableType; projection: ViewProjection } => {
+}): { projection: ProjectionModel; view: DataType.View } => {
+  const table = Obj.make(TableView, { sizes: {} });
   const view = createView({
-    name: 'dynamic-table',
     typename,
     jsonSchema,
+    presentation: table,
     ...(properties && { fields: properties.map((property) => property.name) }),
   });
 
-  const table = Obj.make(TableType, { name: 'dynamic-table', view: Ref.make(view) });
-  const projection = new ViewProjection(jsonSchema, view);
-  if (properties && view.fields) {
-    setProperties(view, projection, properties);
+  const projection = new ProjectionModel(jsonSchema, view.projection);
+  if (properties && projection.fields) {
+    setProperties(view, projection, table, properties);
   }
 
-  return {
-    table,
-    projection,
-  };
+  return { projection, view };
 };
 
-const setProperties = (view: ViewType, projection: ViewProjection, properties: TablePropertyDefinition[]) => {
+const setProperties = (
+  view: DataType.View,
+  projection: ProjectionModel,
+  table: TableView,
+  properties: TablePropertyDefinition[],
+) => {
   for (const property of properties) {
-    const field = view.fields.find((field) => field.path === property.name);
+    const field = projection.fields.find((field) => field.path === property.name);
     if (field) {
       if (property.size !== undefined) {
-        field.size = property.size;
+        table.sizes[field.path] = property.size;
       }
 
       if (property.title !== undefined) {

package/src/util/table-buttons.ts

@@ -2,13 +2,14 @@
 // Copyright 2024 DXOS.org
 //
 
-export type TableButton = 'columnSettings' | 'rowMenu' | 'newColumn' | 'referencedCell' | 'sort';
+export type TableButton = 'columnSettings' | 'rowMenu' | 'newColumn' | 'referencedCell' | 'sort' | 'saveDraftRow';
 
 export const BUTTON_IDENTIFIERS: { [K in TableButton]: string } = {
   columnSettings: 'data-table-column-settings-button',
   newColumn: 'data-table-new-column-button',
   referencedCell: 'data-table-ref-cell-button',
   rowMenu: 'data-table-row-menu-button',
+  saveDraftRow: 'data-table-save-draft-row-button',
   sort: 'data-table-sort-button',
 } as const;
 
@@ -16,6 +17,7 @@ type ButtonData =
   | { type: 'columnSettings'; fieldId: string }
   | { type: 'newColumn'; disabled?: boolean }
   | { type: 'rowMenu'; rowIndex: number }
+  | { type: 'saveDraftRow'; rowIndex: number; disabled?: boolean }
   | { type: 'sort'; fieldId: string; direction?: 'asc' | 'desc' };
 
 const createButton = ({
@@ -118,9 +120,30 @@ const sortButton = {
   }),
 } as const;
 
+const saveDraftRowButton = {
+  attr: BUTTON_IDENTIFIERS.saveDraftRow,
+  icon: 'ph--floppy-disk--regular',
+  render: ({ rowIndex, disabled }: Omit<Extract<ButtonData, { type: 'saveDraftRow' }>, 'type'>) => {
+    return createButton({
+      attr: BUTTON_IDENTIFIERS.saveDraftRow,
+      icon: saveDraftRowButton.icon,
+      disabled,
+      data: {
+        'data-row-index': rowIndex.toString(),
+      },
+      testId: 'table-save-draft-row-button',
+    });
+  },
+  getData: (el: HTMLElement): Extract<ButtonData, { type: 'saveDraftRow' }> => ({
+    type: 'saveDraftRow',
+    rowIndex: Number(el.getAttribute('data-row-index')!),
+  }),
+} as const;
+
 export const tableButtons = {
   addColumn: addColumnButton,
   columnSettings: columnSettingsButton,
   rowMenu: rowMenuButton,
+  saveDraftRow: saveDraftRowButton,
   sort: sortButton,
 } as const;

package/src/util/table.ts

@@ -2,126 +2,48 @@
 // Copyright 2024 DXOS.org
 //
 
-import { Schema } from 'effect';
+import { Match } from 'effect';
 
-import {
-  type EchoSchema,
-  Format,
-  FormatEnum,
-  type JsonPath,
-  type JsonProp,
-  Ref,
-  TypedObject,
-  TypeEnum,
-} from '@dxos/echo-schema';
-import { type Client, PublicKey } from '@dxos/react-client';
-import { live, type Space } from '@dxos/react-client/echo';
-import { createFieldId, createView, getSchemaProperties, ViewProjection, type ViewType } from '@dxos/schema';
+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 { type TableType } from '../types';
+import { TableView } from '../types';
 
-// TODO(ZaymonFC): We don't need the client anymore.
-type InitialiseTableProps = {
-  client: Client;
-  space: Space;
-  table: TableType;
-  typename?: string;
-  initialRow?: boolean;
+type CreateTableProps = Omit<CreateViewFromSpaceProps, 'presentation'> & {
+  sizes?: Record<string, number>;
 };
 
-export const initializeTable = async ({
-  client,
-  space,
-  table,
-  typename,
-  initialRow = true,
-}: InitialiseTableProps): Promise<Schema.Schema.AnyNoContext> => {
-  if (typename) {
-    const schema = await space.db.graph.getSchemaByTypename(typename, space.db);
-    if (!schema) {
-      throw new Error(`Schema not found: ${typename}`);
+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;
     }
 
-    const fields = getSchemaProperties(schema.ast).map((prop) => prop.name);
-
-    table.view = Ref.make(
-      createView({
-        // TODO(ZaymonFC): Don't hardcode name?
-        name: 'View',
-        typename: schema.typename,
-        jsonSchema: schema.jsonSchema,
-        fields,
+    Match.type<SimpleType>().pipe(
+      Match.when('boolean', () => {
+        table.sizes[property.name as JsonPath] = 100;
       }),
-    );
-
-    return schema;
-  } else {
-    const [schema] = await space.db.schemaRegistry.register([createContactSchema()]);
-    const fields = ContactFields;
-
-    table.view = Ref.make(
-      createView({
-        name: 'View',
-        typename: schema.typename,
-        jsonSchema: schema.jsonSchema,
-        fields,
+      Match.when('number', () => {
+        table.sizes[property.name as JsonPath] = 100;
       }),
-    );
-
-    createProjection(schema, table.view.target!);
-
-    if (initialRow) {
-      // TODO(burdon): Last (first) row should not be in db and should be managed by the model.
-      space.db.add(live(schema, {}));
-    }
-
-    return schema;
+      Match.orElse(() => {
+        // Noop.
+      }),
+    )(property.type);
   }
-};
-
-const createContactSchema = () =>
-  TypedObject({
-    typename: `example.com/type/${PublicKey.random().truncate()}`,
-    version: '0.1.0',
-  })({
-    name: Schema.optional(Schema.String).annotations({ title: 'Name' }),
-    active: Schema.optional(Schema.Boolean).annotations({ title: 'Active' }),
-    email: Schema.optional(Format.Email),
-    salary: Schema.optional(Format.Currency()).annotations({ title: 'Salary' }),
-  });
-
-const ContactFields = ['name', 'email', 'salary', 'active'];
-
-const createProjection = (schema: EchoSchema, view: ViewType): ViewProjection => {
-  const projection = new ViewProjection(schema.jsonSchema, view);
-  projection.setFieldProjection({
-    field: {
-      id: view.fields.find((f) => f.path === 'salary')!.id,
-      path: 'salary' as JsonPath,
-      size: 150,
-    },
-  });
-  projection.setFieldProjection({
-    field: {
-      id: view.fields.find((f) => f.path === 'active')!.id,
-      path: 'active' as JsonPath,
-      size: 100,
-    },
-  });
-  projection.setFieldProjection({
-    field: {
-      id: createFieldId(),
-      path: 'manager' as JsonPath,
-      referencePath: 'name' as JsonPath,
-    },
-    props: {
-      property: 'manager' as JsonProp,
-      type: TypeEnum.Ref,
-      format: FormatEnum.Ref,
-      referenceSchema: schema.typename,
-      title: 'Manager',
-    },
-  });
 
-  return projection;
+  return { jsonSchema, view };
 };

package/dist/lib/browser/chunk-TL7CKQQV.mjs

@@ -1,27 +0,0 @@
-// packages/ui/react-ui-table/src/types/table.ts
-import { Schema } from "effect";
-import { Type } from "@dxos/echo";
-import { ObjectId, Ref, Expando, LabelAnnotation } from "@dxos/echo-schema";
-import { ViewType } from "@dxos/schema";
-var TableSchema = Schema.Struct({
-  id: ObjectId,
-  name: Schema.optional(Schema.String),
-  view: Schema.optional(Ref(ViewType)),
-  // TODO(burdon): Document why threads is included here?
-  threads: Schema.optional(Schema.Array(Ref(
-    Expando
-    /* ThreadType */
-  )))
-}).pipe(LabelAnnotation.set([
-  "name"
-]));
-var TableType = TableSchema.pipe(Type.Obj({
-  typename: "dxos.org/type/Table",
-  version: "0.1.0"
-}));
-
-export {
-  TableSchema,
-  TableType
-};
-//# sourceMappingURL=chunk-TL7CKQQV.mjs.map

package/dist/lib/browser/chunk-TL7CKQQV.mjs.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../../src/types/table.ts"],
-  "sourcesContent": ["//\n// Copyright 2024 DXOS.org\n//\n\nimport { Schema } from 'effect';\n\n// import { ThreadType } from '@dxos/plugin-space/types';\nimport { Type } from '@dxos/echo';\nimport { ObjectId, Ref, Expando, LabelAnnotation } from '@dxos/echo-schema';\nimport { ViewType } from '@dxos/schema';\n\nexport const TableSchema = Schema.Struct({\n  id: ObjectId,\n  name: Schema.optional(Schema.String),\n  view: Schema.optional(Ref(ViewType)),\n  // TODO(burdon): Document why threads is included here?\n  threads: Schema.optional(Schema.Array(Ref(Expando /* ThreadType */))),\n}).pipe(LabelAnnotation.set(['name']));\n\n// TODO(burdon): Move out of react-ui-xxx.\nexport const TableType = TableSchema.pipe(\n  Type.Obj({\n    typename: 'dxos.org/type/Table',\n    version: '0.1.0',\n  }),\n);\nexport interface TableType extends Schema.Schema.Type<typeof TableType> {}\n"],
-  "mappings": ";AAIA,SAASA,cAAc;AAGvB,SAASC,YAAY;AACrB,SAASC,UAAUC,KAAKC,SAASC,uBAAuB;AACxD,SAASC,gBAAgB;AAElB,IAAMC,cAAcC,OAAOC,OAAO;EACvCC,IAAIC;EACJC,MAAMJ,OAAOK,SAASL,OAAOM,MAAM;EACnCC,MAAMP,OAAOK,SAASG,IAAIC,QAAAA,CAAAA;;EAE1BC,SAASV,OAAOK,SAASL,OAAOW,MAAMH;IAAII;;EAAsB,CAAA,CAAA;AAClE,CAAA,EAAGC,KAAKC,gBAAgBC,IAAI;EAAC;CAAO,CAAA;AAG7B,IAAMC,YAAYjB,YAAYc,KACnCI,KAAKC,IAAI;EACPC,UAAU;EACVC,SAAS;AACX,CAAA,CAAA;",
-  "names": ["Schema", "Type", "ObjectId", "Ref", "Expando", "LabelAnnotation", "ViewType", "TableSchema", "Schema", "Struct", "id", "ObjectId", "name", "optional", "String", "view", "Ref", "ViewType", "threads", "Array", "Expando", "pipe", "LabelAnnotation", "set", "TableType", "Type", "Obj", "typename", "version"]
-}

package/dist/lib/node/chunk-O2VPBNS5.cjs

@@ -1,50 +0,0 @@
-"use strict";
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
-var __copyProps = (to, from, except, desc) => {
-  if (from && typeof from === "object" || typeof from === "function") {
-    for (let key of __getOwnPropNames(from))
-      if (!__hasOwnProp.call(to, key) && key !== except)
-        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
-  }
-  return to;
-};
-var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-var chunk_O2VPBNS5_exports = {};
-__export(chunk_O2VPBNS5_exports, {
-  TableSchema: () => TableSchema,
-  TableType: () => TableType
-});
-module.exports = __toCommonJS(chunk_O2VPBNS5_exports);
-var import_effect = require("effect");
-var import_echo = require("@dxos/echo");
-var import_echo_schema = require("@dxos/echo-schema");
-var import_schema = require("@dxos/schema");
-var TableSchema = import_effect.Schema.Struct({
-  id: import_echo_schema.ObjectId,
-  name: import_effect.Schema.optional(import_effect.Schema.String),
-  view: import_effect.Schema.optional((0, import_echo_schema.Ref)(import_schema.ViewType)),
-  // TODO(burdon): Document why threads is included here?
-  threads: import_effect.Schema.optional(import_effect.Schema.Array((0, import_echo_schema.Ref)(
-    import_echo_schema.Expando
-    /* ThreadType */
-  )))
-}).pipe(import_echo_schema.LabelAnnotation.set([
-  "name"
-]));
-var TableType = TableSchema.pipe(import_echo.Type.Obj({
-  typename: "dxos.org/type/Table",
-  version: "0.1.0"
-}));
-// Annotate the CommonJS export names for ESM import in node:
-0 && (module.exports = {
-  TableSchema,
-  TableType
-});
-//# sourceMappingURL=chunk-O2VPBNS5.cjs.map

package/dist/lib/node/chunk-O2VPBNS5.cjs.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../../src/types/table.ts"],
-  "sourcesContent": ["//\n// Copyright 2024 DXOS.org\n//\n\nimport { Schema } from 'effect';\n\n// import { ThreadType } from '@dxos/plugin-space/types';\nimport { Type } from '@dxos/echo';\nimport { ObjectId, Ref, Expando, LabelAnnotation } from '@dxos/echo-schema';\nimport { ViewType } from '@dxos/schema';\n\nexport const TableSchema = Schema.Struct({\n  id: ObjectId,\n  name: Schema.optional(Schema.String),\n  view: Schema.optional(Ref(ViewType)),\n  // TODO(burdon): Document why threads is included here?\n  threads: Schema.optional(Schema.Array(Ref(Expando /* ThreadType */))),\n}).pipe(LabelAnnotation.set(['name']));\n\n// TODO(burdon): Move out of react-ui-xxx.\nexport const TableType = TableSchema.pipe(\n  Type.Obj({\n    typename: 'dxos.org/type/Table',\n    version: '0.1.0',\n  }),\n);\nexport interface TableType extends Schema.Schema.Type<typeof TableType> {}\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAIA,oBAAuB;AAGvB,kBAAqB;AACrB,yBAAwD;AACxD,oBAAyB;AAElB,IAAMA,cAAcC,qBAAOC,OAAO;EACvCC,IAAIC;EACJC,MAAMJ,qBAAOK,SAASL,qBAAOM,MAAM;EACnCC,MAAMP,qBAAOK,aAASG,wBAAIC,sBAAAA,CAAAA;;EAE1BC,SAASV,qBAAOK,SAASL,qBAAOW,UAAMH;IAAII;;EAAsB,CAAA,CAAA;AAClE,CAAA,EAAGC,KAAKC,mCAAgBC,IAAI;EAAC;CAAO,CAAA;AAG7B,IAAMC,YAAYjB,YAAYc,KACnCI,iBAAKC,IAAI;EACPC,UAAU;EACVC,SAAS;AACX,CAAA,CAAA;",
-  "names": ["TableSchema", "Schema", "Struct", "id", "ObjectId", "name", "optional", "String", "view", "Ref", "ViewType", "threads", "Array", "Expando", "pipe", "LabelAnnotation", "set", "TableType", "Type", "Obj", "typename", "version"]
-}