@dxos/react-ui-table 0.8.4-main.2e9d522 → 0.8.4-main.3c1ae3b

package/src/testing/useTestTableModel.ts

@@ -2,40 +2,49 @@
 // Copyright 2025 DXOS.org
 //
 
-import { useCallback, useMemo, useRef } from 'react';
+import { type RefObject, useCallback, useMemo, useRef } from 'react';
 
-import { isMutable, toJsonSchema } from '@dxos/echo-schema';
+import { type Type } from '@dxos/echo';
+import { isMutable } from '@dxos/echo/internal';
 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 { Filter, type Space, useQuery, useSchema } from '@dxos/react-client/echo';
 import { useClientProvider } from '@dxos/react-client/testing';
-import { DataType, ProjectionModel } from '@dxos/schema';
+import { type ProjectionModel, getTypenameFromQuery } from '@dxos/schema';
 
 import { type TableController } from '../components';
-import { useTableModel, useAddRow } from '../hooks';
-import { TablePresentation } from '../model';
+import { useAddRow, useProjectionModel, useTableModel } from '../hooks';
+import { type TableModel, TablePresentation } from '../model';
+import { Table } from '../types';
 
 faker.seed(0); // NOTE(ZaymonFC): Required for smoke tests.
 
+export type TestTableModel<T extends Type.Entity.Any = Type.Entity.Any> = {
+  schema: T | undefined;
+  table: Table.Table | undefined;
+  projection: ProjectionModel | undefined;
+  tableRef: RefObject<TableController | null>;
+  model: TableModel | undefined;
+  presentation: TablePresentation | undefined;
+  space: Space | undefined;
+  handleInsertRow: () => void;
+  handleSaveView: () => void;
+  handleDeleteRows: (rowIndex: number, objects: any[]) => void;
+  handleDeleteColumn: (fieldId: string) => void;
+};
+
 /**
  * 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();
+export const useTestTableModel = <T extends Type.Entity.Any = Type.Entity.Any>(): TestTableModel<T> => {
   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 tables = useQuery(space, Filter.type(Table.Table));
+  const table = tables.at(0);
+  const typename = table?.view.target?.query ? getTypenameFromQuery(table.view.target.query.ast) : undefined;
+  const schema = useSchema<T>(space, typename);
+  const projection = useProjectionModel(schema, table);
 
   const features = useMemo(
     () => ({
@@ -79,8 +88,7 @@ export const useTestTableModel = () => {
   );
 
   const model = useTableModel({
-    view,
-    schema: jsonSchema,
+    object: table,
     projection,
     features,
     rows: filteredObjects,
@@ -92,7 +100,8 @@ export const useTestTableModel = () => {
   });
 
   const handleInsertRow = useCallback(() => {
-    model?.insertRow();
+    const insertResult = model?.insertRow();
+    tableRef.current?.handleInsertRowResult?.(insertResult);
   }, [model]);
 
   const handleSaveView = useCallback(() => {
@@ -107,13 +116,12 @@ export const useTestTableModel = () => {
 
   return {
     schema,
-    view,
+    table,
     projection,
     tableRef,
     model,
     presentation,
     space,
-    client,
     handleInsertRow,
     handleSaveView,
     handleDeleteRows,

package/src/translations.ts

@@ -14,8 +14,8 @@ export const translations = [
         'create object label': 'Create table',
         'table name placeholder': 'Table name',
         'settings title': 'Table settings',
-        'table schema label': 'Schema',
-        'new schema': 'New schema',
+        'table schema label': 'Type',
+        'new schema': 'New type',
         'continue label': 'Continue',
         'create stack section label': 'Create table',
         'add row label': 'Add row',

package/src/types/Table.ts

@@ -0,0 +1,90 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import * as Match from 'effect/Match';
+import * as Schema from 'effect/Schema';
+import * as SchemaAST from 'effect/SchemaAST';
+
+import { Obj, Ref, Type } from '@dxos/echo';
+import { FormInputAnnotation, type JsonPath, type JsonSchemaType, LabelAnnotation } from '@dxos/echo/internal';
+import { View, ViewAnnotation } from '@dxos/schema';
+
+const TableSchema = Schema.Struct({
+  name: Schema.String.pipe(Schema.optional),
+
+  view: Type.Ref(View.View).pipe(FormInputAnnotation.set(false)),
+
+  sizes: Schema.Record({
+    // TODO(wittjosiah): Should be JsonPath.
+    key: Schema.String,
+    value: Schema.Number,
+  }).pipe(Schema.mutable, FormInputAnnotation.set(false)),
+}).pipe(
+  Type.Obj({
+    typename: 'dxos.org/type/Table',
+    version: '0.2.0',
+  }),
+  LabelAnnotation.set(['name']),
+  ViewAnnotation.set(true),
+);
+
+export interface Table extends Schema.Schema.Type<typeof TableSchema> {}
+export interface TableEncoded extends Schema.Schema.Encoded<typeof TableSchema> {}
+export const Table: Schema.Schema<Table, TableEncoded> = TableSchema;
+
+type MakeProps = Omit<Partial<Obj.MakeProps<typeof Table>>, 'view'> & {
+  view: View.View;
+  /** Required to auto-size columns. */
+  jsonSchema?: JsonSchemaType;
+};
+
+/**
+ * Make a table as a view of a data set.
+ */
+export const make = ({ name, sizes = {}, view, jsonSchema }: MakeProps): Table => {
+  const table = Obj.make(Table, { name, view: Ref.make(view), sizes });
+
+  // Preset sizes.
+  if (jsonSchema) {
+    const schema = Type.toEffectSchema(jsonSchema);
+    const properties = SchemaAST.getPropertySignatures(schema.ast);
+    for (const property of properties) {
+      const name = property.name.toString() as JsonPath;
+      if (sizes?.[name]) {
+        table.sizes[name] = sizes[name];
+        continue;
+      }
+
+      Match.type<SchemaAST.AST>().pipe(
+        Match.when({ _tag: 'BooleanKeyword' }, () => {
+          table.sizes[name] = 100;
+        }),
+        Match.when({ _tag: 'NumberKeyword' }, () => {
+          table.sizes[name] = 100;
+        }),
+        Match.orElse(() => {
+          // Noop.
+        }),
+      )(property.type);
+    }
+  }
+
+  return table;
+};
+
+//
+// V1
+//
+
+export const TableV1 = Schema.Struct({
+  sizes: Schema.Record({
+    key: Schema.String,
+    value: Schema.Number,
+  }).pipe(Schema.mutable),
+}).pipe(
+  Type.Obj({
+    typename: 'dxos.org/type/Table',
+    version: '0.1.0',
+  }),
+);

package/src/types/index.ts

@@ -2,4 +2,4 @@
 // Copyright 2025 DXOS.org
 //
 
-export * from './schema';
+export * as Table from './Table';

package/src/util/dynamic-table.ts

@@ -2,20 +2,16 @@
 // Copyright 2025 DXOS.org
 //
 
-import { type Schema } from 'effect';
-
-import { Obj } from '@dxos/echo';
-import { getTypename, toJsonSchema } from '@dxos/echo-schema';
-import type { JsonSchemaType, SortDirectionType } from '@dxos/echo-schema';
+import { Filter, type JsonSchema, Obj, Query, Ref, Type } from '@dxos/echo';
 import {
-  createView,
-  type DataType,
-  getSchemaFromPropertyDefinitions,
   ProjectionModel,
   type SchemaPropertyDefinition,
+  type SortDirectionType,
+  View,
+  getSchemaFromPropertyDefinitions,
 } from '@dxos/schema';
 
-import { TableView } from '../types';
+import { Table } from '../types';
 
 // TODO(ZaymonFC): Upstream these extra fields to SchemaPropertyDefinition to enhance schema-tools schema creation.
 type PropertyDisplayProps = {
@@ -31,21 +27,21 @@ export type TablePropertyDefinition = SchemaPropertyDefinition & Partial<Propert
  */
 // TODO(burdon): Remove variance.
 export const getBaseSchema = ({
+  schema,
   typename,
   properties,
   jsonSchema,
-  schema,
 }: {
+  schema?: Type.Entity.Any;
   typename?: string;
   properties?: TablePropertyDefinition[];
-  jsonSchema?: JsonSchemaType;
-  schema?: Schema.Schema.AnyNoContext;
-}): { typename: string; jsonSchema: JsonSchemaType } => {
+  jsonSchema?: JsonSchema.JsonSchema;
+}): { typename: string; jsonSchema: JsonSchema.JsonSchema } => {
   if (typename && properties) {
     const schema = getSchemaFromPropertyDefinitions(typename, properties);
     return { typename: schema.typename, jsonSchema: schema.jsonSchema };
   } else if (schema) {
-    return { typename: getTypename(schema)!, jsonSchema: toJsonSchema(schema) };
+    return { typename: Type.getTypename(schema)!, jsonSchema: Type.toJsonSchema(schema) };
   } else if (typename && jsonSchema) {
     return { typename, jsonSchema };
   } else {
@@ -54,34 +50,32 @@ export const getBaseSchema = ({
 };
 
 export const makeDynamicTable = ({
-  typename,
   jsonSchema,
   properties,
 }: {
-  typename: string;
-  jsonSchema: JsonSchemaType;
+  jsonSchema: JsonSchema.JsonSchema;
   properties?: TablePropertyDefinition[];
-}): { projection: ProjectionModel; view: DataType.View } => {
-  const table = Obj.make(TableView, { sizes: {} });
-  const view = createView({
-    typename,
+}): { projection: ProjectionModel; object: Table.Table } => {
+  const view = View.make({
+    query: Query.select(Filter.everything()),
     jsonSchema,
-    presentation: table,
     ...(properties && { fields: properties.map((property) => property.name) }),
   });
+  const object = Obj.make(Table.Table, { view: Ref.make(view), sizes: {} });
 
   const projection = new ProjectionModel(jsonSchema, view.projection);
+  projection.normalizeView();
   if (properties && projection.fields) {
-    setProperties(view, projection, table, properties);
+    setProperties(view, projection, object, properties);
   }
 
-  return { projection, view };
+  return { projection, object };
 };
 
 const setProperties = (
-  view: DataType.View,
+  view: View.View,
   projection: ProjectionModel,
-  table: TableView,
+  table: Table.Table,
   properties: TablePropertyDefinition[],
 ) => {
   for (const property of properties) {
@@ -101,7 +95,7 @@ const setProperties = (
 
       if (property.sort) {
         const fieldId = field.id;
-        view.query.sort = [{ fieldId, direction: property.sort }];
+        view.sort = [{ fieldId, direction: property.sort }];
       }
     }
   }

package/src/util/index.ts

@@ -4,7 +4,6 @@
 
 export * from './dynamic-table';
 export * from './signals';
-export * from './table';
 export * from './table-buttons';
 export * from './table-controls';
 export * from './schema';

package/src/util/schema.ts

@@ -2,8 +2,8 @@
 // Copyright 2025 DXOS.org
 //
 
-import { Schema } from 'effect';
-import { isTypeLiteral, TypeLiteral } from 'effect/SchemaAST';
+import * as Schema from 'effect/Schema';
+import * as SchemaAST from 'effect/SchemaAST';
 
 /**
  * Creates a narrowed schema from an original schema that only includes
@@ -20,14 +20,14 @@ export const narrowSchema = <S extends Schema.Schema.AnyNoContext>(
 ): Schema.Schema<unknown, unknown> | undefined => {
   const ast = (schema as any)?.ast;
 
-  if (isTypeLiteral(ast)) {
+  if (SchemaAST.isTypeLiteral(ast)) {
     // Filter property signatures that match any of the provided paths
     const propertySignatures = ast.propertySignatures.filter((signature) => paths.includes(signature.name.toString()));
 
     // If we found at least one matching property
     if (propertySignatures.length > 0) {
       // Create a new TypeLiteral with only the matching properties
-      const narrowType = new TypeLiteral(propertySignatures, []);
+      const narrowType = new SchemaAST.TypeLiteral(propertySignatures, []);
       return Schema.make(narrowType);
     }
   }

package/src/util/table-buttons.ts

@@ -26,7 +26,7 @@ const createButton = ({
   disabled = false,
   icon,
   testId,
-  type = 'primary',
+  type: _type = 'primary',
 }: {
   attr: string;
   data: Record<string, string>;
@@ -39,8 +39,7 @@ const createButton = ({
     .map(([k, v]) => `${k}="${v}"`)
     .join(' ');
 
-  const positionClass = type === 'primary' ? 'inline-end-2' : 'inline-end-9';
-  return `<button ${attr} data-testid="${testId}" class="dx-button is-6 pli-0.5 min-bs-0 absolute inset-block-1 ${positionClass}" ${dataAttrs} ${disabled ? 'disabled' : ''}><svg data-size="4"><use href="/icons.svg#${icon}"/></svg></button>`;
+  return `<button ${attr} data-testid="${testId}" class="dx-button is-6 aspect-square pli-0.5 min-bs-0" ${dataAttrs} ${disabled ? 'disabled' : ''} data-dx-grid-action="accessory"><svg data-size="4"><use href="/icons.svg#${icon}"/></svg></button>`;
 };
 
 const addColumnButton = {
@@ -67,6 +66,7 @@ const columnSettingsButton = {
       icon: columnSettingsButton.icon,
       data: {
         'data-field-id': fieldId,
+        'data-variant': 'ghost',
       },
       testId: 'table-column-settings-button',
     });
@@ -130,6 +130,7 @@ const saveDraftRowButton = {
       disabled,
       data: {
         'data-row-index': rowIndex.toString(),
+        'data-variant': 'primary',
       },
       testId: 'table-save-draft-row-button',
     });

package/src/util/table-controls.ts

@@ -3,6 +3,8 @@
 //
 
 // Core types.
+import { accessoryHandlesPointerdownAttrs } from '@dxos/lit-grid';
+
 export type TableControl = 'checkbox' | 'switch';
 
 export type ControlData =
@@ -41,7 +43,7 @@ const renderInput = (
   preventToggle = false,
   testId: string,
 ) => {
-  return `<input type="checkbox" class="${baseClass}" ${renderAttributes(attrs)} ${checked ? 'checked' : ''} ${preventToggle ? 'onclick="return false"' : ''} ${disabled ? 'disabled' : ''} data-testid="${testId}"/>`;
+  return `<input type="checkbox" class="${baseClass}" ${renderAttributes(attrs)} ${checked ? 'checked' : ''} ${preventToggle ? 'onclick="return false"' : ''} ${disabled ? 'disabled' : ''} data-testid="${testId}" data-dx-grid-action="accessory"/>`;
 };
 
 export const CheckboxStory = ({
@@ -64,6 +66,7 @@ export const SwitchStory = ({ colIndex, rowIndex, checked = false, disabled = fa
     [CONTROL_IDENTIFIERS.switch]: '',
     'data-row-index': rowIndex.toString(),
     'data-col-index': colIndex.toString(),
+    ...accessoryHandlesPointerdownAttrs,
   };
 
   return renderInput(BASE_CLASSES.switch, attrs, checked, disabled, true, 'table-switch');