@dxos/react-ui-table 0.8.4-main.7ace549 → 0.8.4-main.937b3ca

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

@@ -6,18 +6,18 @@ import { type Meta, type StoryObj } from '@storybook/react-vite';
 import * as Schema from 'effect/Schema';
 import React, { useCallback } from 'react';
 
-import { Annotation, Format, Obj, type QueryAST, Type } from '@dxos/echo';
-import { PropertyMetaAnnotationId } from '@dxos/echo/internal';
+import { Annotation, type Database, Format, Obj, type QueryAST, Type } from '@dxos/echo';
+import { type Mutable, PropertyMetaAnnotationId } from '@dxos/echo/internal';
 import { invariant } from '@dxos/invariant';
 import { faker } from '@dxos/random';
 import { PublicKey } from '@dxos/react-client';
-import { type Space } from '@dxos/react-client/echo';
 import { withClientProvider } from '@dxos/react-client/testing';
 import { withTheme } from '@dxos/react-ui/testing';
 import { ViewEditor, translations as formTranslations } from '@dxos/react-ui-form';
 import { SyntaxHighlighter } from '@dxos/react-ui-syntax-highlighter';
 import { View, getSchemaFromPropertyDefinitions, getTypenameFromQuery } from '@dxos/schema';
 import { TestSchema, createObjectFactory } from '@dxos/schema/testing';
+import { withRegistry } from '@dxos/storybook-utils';
 
 import { useTestTableModel } from '../../testing';
 import { translations } from '../../translations';
@@ -51,7 +51,7 @@ const Example = Schema.Struct({
     title: 'Parent',
   }),
 }).pipe(
-  Type.Obj({ typename: `example.com/type/${PublicKey.random().truncate()}`, version: '0.1.0' }),
+  Type.object({ typename: `example.com/type/${PublicKey.random().truncate()}`, version: '0.1.0' }),
   Annotation.LabelAnnotation.set(['name']),
 );
 interface Example extends Schema.Schema.Type<typeof Example> {}
@@ -59,12 +59,12 @@ interface Example extends Schema.Schema.Type<typeof Example> {}
 const StoryViewEditor = ({
   view,
   schema,
-  space,
+  db,
   handleDeleteColumn,
 }: {
   view?: View.View;
   schema?: Schema.Schema.AnyNoContext;
-  space?: Space;
+  db?: Database.Database;
   handleDeleteColumn: (fieldId: string) => void;
 }) => {
   const handleQueryChanged = useCallback(
@@ -73,7 +73,9 @@ const StoryViewEditor = ({
       invariant(Type.isMutable(schema));
       schema.updateTypename(getTypenameFromQuery(newQuery));
       invariant(view);
-      view.query.ast = newQuery;
+      Obj.change(view, (v) => {
+        v.query.ast = newQuery as Mutable<typeof newQuery>;
+      });
     },
     [schema, view],
   );
@@ -84,7 +86,7 @@ const StoryViewEditor = ({
 
   return (
     <ViewEditor
-      registry={space?.db.schemaRegistry}
+      registry={db?.schemaRegistry}
       schema={schema}
       view={view}
       onQueryChanged={handleQueryChanged}
@@ -98,18 +100,8 @@ const StoryViewEditor = ({
 //
 
 const DefaultStory = () => {
-  const {
-    space,
-    schema,
-    table,
-    tableRef,
-    model,
-    presentation,
-    client,
-    handleInsertRow,
-    handleSaveView,
-    handleDeleteColumn,
-  } = useTestTableModel();
+  const { db, schema, table, tableRef, model, presentation, handleInsertRow, handleSaveView, handleDeleteColumn } =
+    useTestTableModel();
 
   if (!schema || !table?.view.target) {
     return <div />;
@@ -122,21 +114,15 @@ const DefaultStory = () => {
         <TableComponent.Root>
           <TableComponent.Main
             ref={tableRef}
+            schema={schema}
             model={model}
             presentation={presentation}
-            schema={schema}
-            client={client}
             ignoreAttention
           />
         </TableComponent.Root>
       </div>
       <div className='flex flex-col bs-full border-l border-separator overflow-y-auto'>
-        <StoryViewEditor
-          view={table.view.target}
-          schema={schema}
-          space={space}
-          handleDeleteColumn={handleDeleteColumn}
-        />
+        <StoryViewEditor view={table.view.target} schema={schema} db={db} handleDeleteColumn={handleDeleteColumn} />
         <SyntaxHighlighter language='json' className='text-xs'>
           {JSON.stringify({ view: table.view.target, schema }, null, 2)}
         </SyntaxHighlighter>
@@ -158,18 +144,21 @@ const meta = {
   render: DefaultStory,
   decorators: [
     withTheme,
+    withRegistry,
     withClientProvider({
       types: [View.View, Table.Table],
       createIdentity: true,
       createSpace: true,
-      onCreateSpace: async ({ client, space }) => {
+      onCreateSpace: async ({ space }) => {
         const [schema] = await space.db.schemaRegistry.register([Example]);
-        const { view, jsonSchema } = await View.makeFromSpace({ client, space, typename: schema.typename });
+        const { view, jsonSchema } = await View.makeFromDatabase({ db: space.db, typename: schema.typename });
         const table = Table.make({ view, jsonSchema });
-        view.projection.fields = [
-          view.projection.fields.find((field: any) => field.path === 'name')!,
-          ...view.projection.fields.filter((field: any) => field.path !== 'name'),
-        ];
+        Obj.change(view, (v) => {
+          v.projection.fields = [
+            v.projection.fields.find((field) => field.path === 'name')!,
+            ...v.projection.fields.filter((field) => field.path !== 'name'),
+          ];
+        });
 
         space.db.add(table);
 
@@ -207,8 +196,11 @@ export const StaticSchema: StoryObj = {
       types: [View.View, Table.Table],
       createIdentity: true,
       createSpace: true,
-      onCreateSpace: async ({ client, space }) => {
-        const { view, jsonSchema } = await View.makeFromSpace({ client, space, typename: TestSchema.Person.typename });
+      onCreateSpace: async ({ space }) => {
+        const { view, jsonSchema } = await View.makeFromDatabase({
+          db: space.db,
+          typename: TestSchema.Person.typename,
+        });
         const table = Table.make({ view, jsonSchema });
         space.db.add(table);
 
@@ -237,7 +229,7 @@ const ContactWithArrayOfEmails = Schema.Struct({
     ),
   ),
 }).pipe(
-  Type.Obj({
+  Type.object({
     typename: 'dxos.org/type/ContactWithArrayOfEmails',
     version: '0.1.0',
   }),
@@ -250,10 +242,9 @@ export const ArrayOfObjects: StoryObj = {
       types: [View.View, Table.Table, TestSchema.Person, TestSchema.Organization, ContactWithArrayOfEmails],
       createIdentity: true,
       createSpace: true,
-      onCreateSpace: async ({ client, space }) => {
-        const { view, jsonSchema } = await View.makeFromSpace({
-          client,
-          space,
+      onCreateSpace: async ({ space }) => {
+        const { view, jsonSchema } = await View.makeFromDatabase({
+          db: space.db,
           typename: ContactWithArrayOfEmails.typename,
         });
         const table = Table.make({ view, jsonSchema });
@@ -282,7 +273,7 @@ export const Tags: Meta<StoryProps> = {
       types: [View.View, Table.Table],
       createIdentity: true,
       createSpace: true,
-      onCreateSpace: async ({ client, space }) => {
+      onCreateSpace: async ({ space }) => {
         // Configure schema.
         const typename = 'example.com/SingleSelect';
         const selectOptions = [
@@ -310,7 +301,7 @@ export const Tags: Meta<StoryProps> = {
         const [storedSchema] = await space.db.schemaRegistry.register([schema]);
 
         // Initialize table.
-        const { view, jsonSchema } = await View.makeFromSpace({ client, space, typename });
+        const { view, jsonSchema } = await View.makeFromDatabase({ db: space.db, typename });
         const table = Table.make({ view, jsonSchema });
         space.db.add(table);