@dxos/react-ui-table 0.8.4-main.d05673bc65 → 0.8.4-main.d9fc60f731

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

@@ -6,25 +6,25 @@ import { type Meta, type StoryObj } from '@storybook/react-vite';
 import * as Schema from 'effect/Schema';
 import React, { useCallback } from 'react';
 
-import { Annotation, type Database, Format, Obj, type QueryAST, Ref, Type } from '@dxos/echo';
-import { View } from '@dxos/echo';
+import { DXN, Annotation, type Database, Format, Obj, type QueryAST, Ref, Type, View } from '@dxos/echo';
 import { type Mutable, PropertyMetaAnnotationId } from '@dxos/echo/internal';
 import { invariant } from '@dxos/invariant';
-import { faker } from '@dxos/random';
+import { random } from '@dxos/random';
 import { PublicKey } from '@dxos/react-client';
 import { withClientProvider } from '@dxos/react-client/testing';
 import { Panel, ScrollArea } from '@dxos/react-ui';
+import { ViewEditor } from '@dxos/react-ui-form';
+import { translations as formTranslations } from '@dxos/react-ui-form/translations';
+import { JsonHighlighter } from '@dxos/react-ui-syntax-highlighter';
 import { withLayout, 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 { ViewModel, getSchemaFromPropertyDefinitions, getTypenameFromQuery } from '@dxos/schema';
+import { ViewModel, getSchemaFromPropertyDefinitions } from '@dxos/schema';
 import { TestSchema, createObjectFactory } from '@dxos/schema/testing';
 import { withRegistry } from '@dxos/storybook-utils';
 
+import { translations } from '#translations';
+
 import { useTestTableModel } from '../../testing';
-import { translations } from '../../translations';
 import { Table } from '../../types';
-
 import { Table as TableComponent } from './Table';
 
 const Example = Schema.Struct({
@@ -52,10 +52,11 @@ const Example = Schema.Struct({
     title: 'Parent',
   }),
 }).pipe(
-  Type.object({ typename: `com.example.type.${PublicKey.random().truncate()}`, version: '0.1.0' }),
   Annotation.LabelAnnotation.set(['name']),
+  // NSID last segment must start with a letter (DXN spec), so prefix the random hex.
+  Type.makeObject(DXN.make(`com.example.type.example${PublicKey.random().truncate()}`, '0.1.0')),
 );
-interface Example extends Schema.Schema.Type<typeof Example> {}
+interface Example extends Type.InstanceType<typeof Example> {}
 
 const StoryViewEditor = ({
   view,
@@ -64,18 +65,17 @@ const StoryViewEditor = ({
   handleDeleteColumn,
 }: {
   view?: View.View;
-  schema?: Schema.Schema.AnyNoContext;
+  schema?: Type.AnyEntity;
   db?: Database.Database;
   handleDeleteColumn: (fieldId: string) => void;
 }) => {
   const handleQueryChanged = useCallback(
     (newQuery: QueryAST.Query) => {
       invariant(schema);
-      invariant(Type.isMutable(schema));
-      schema.updateTypename(getTypenameFromQuery(newQuery));
+      invariant(Type.getDatabase(schema) != null);
       invariant(view);
-      Obj.change(view, (v) => {
-        v.query.ast = newQuery as Mutable<typeof newQuery>;
+      Obj.update(view, (view) => {
+        view.query.ast = newQuery as Mutable<typeof newQuery>;
       });
     },
     [schema, view],
@@ -87,8 +87,8 @@ const StoryViewEditor = ({
 
   return (
     <ViewEditor
-      registry={db?.schemaRegistry}
-      schema={schema}
+      registry={db?.graph.registry}
+      type={schema}
       view={view}
       onQueryChanged={handleQueryChanged}
       onDelete={handleDeleteColumn}
@@ -119,7 +119,7 @@ const DefaultStory = () => {
 
   return (
     <div className='grow grid grid-cols-[1fr_350px]'>
-      <TableComponent.Root>
+      <TableComponent.Root ref={tableRef}>
         <Panel.Root>
           <Panel.Toolbar asChild>
             <TableComponent.Toolbar
@@ -129,8 +129,7 @@ const DefaultStory = () => {
             />
           </Panel.Toolbar>
           <Panel.Content asChild>
-            <TableComponent.Main
-              ref={tableRef}
+            <TableComponent.Content
               schema={schema}
               model={model}
               presentation={presentation}
@@ -143,16 +142,14 @@ const DefaultStory = () => {
       <ScrollArea.Root orientation='vertical' classNames='border-l border-separator'>
         <ScrollArea.Viewport>
           <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>
+          <JsonHighlighter data={{ view: table.view.target, schema }} classNames='text-xs' />
         </ScrollArea.Viewport>
       </ScrollArea.Root>
     </div>
   );
 };
 
-type StoryProps = { rows?: number };
+type DefaultStoryProps = { rows?: number };
 
 //
 // Story definitions.
@@ -172,13 +169,16 @@ const meta = {
       createIdentity: true,
       createSpace: true,
       onCreateSpace: async ({ space }) => {
-        const [schema] = await space.db.schemaRegistry.register([Example]);
-        const { view, jsonSchema } = await ViewModel.makeFromDatabase({ db: space.db, typename: schema.typename });
+        const type = await space.db.addType(Example);
+        const { view, jsonSchema } = await ViewModel.makeFromDatabase({
+          db: space.db,
+          typename: Type.getTypename(type),
+        });
         const table = Table.make({ view, jsonSchema });
-        Obj.change(view, (v) => {
-          v.projection.fields = [
-            v.projection.fields.find((field) => field.path === 'name')!,
-            ...v.projection.fields.filter((field) => field.path !== 'name'),
+        Obj.update(view, (view) => {
+          view.projection.fields = [
+            view.projection.fields.find((field) => field.path === 'name')!,
+            ...view.projection.fields.filter((field) => field.path !== 'name'),
           ];
         });
 
@@ -186,10 +186,10 @@ const meta = {
 
         Array.from({ length: 10 }).map(() => {
           return space.db.add(
-            Obj.make(schema, {
-              name: faker.lorem.sentence(),
-              status: faker.helpers.arrayElement(['todo', 'in-progress', 'done'] as const),
-              description: faker.lorem.paragraph(),
+            Obj.make(type, {
+              name: random.lorem.sentence(),
+              status: random.helpers.arrayElement(['todo', 'in-progress', 'done'] as const),
+              description: random.lorem.paragraph(),
             }),
           );
         });
@@ -221,12 +221,12 @@ export const StaticSchema: StoryObj = {
       onCreateSpace: async ({ space }) => {
         const { view, jsonSchema } = await ViewModel.makeFromDatabase({
           db: space.db,
-          typename: TestSchema.Person.typename,
+          typename: Type.getTypename(TestSchema.Person),
         });
         const table = Table.make({ view, jsonSchema });
         space.db.add(table);
 
-        const factory = createObjectFactory(space.db, faker as any);
+        const factory = createObjectFactory(space.db, random as any);
         await factory([
           { type: TestSchema.Person, count: 10 },
           // { type: TestSchema.Organization, count: 1 },
@@ -250,12 +250,7 @@ const ContactWithArrayOfEmails = Schema.Struct({
       }),
     ),
   ),
-}).pipe(
-  Type.object({
-    typename: 'org.dxos.type.contact-with-array-of-emails',
-    version: '0.1.0',
-  }),
-);
+}).pipe(Type.makeObject(DXN.make('org.dxos.type.contactWithArrayOfEmails', '0.1.0')));
 
 export const ArrayOfObjects: StoryObj = {
   render: DefaultStory,
@@ -267,12 +262,12 @@ export const ArrayOfObjects: StoryObj = {
       onCreateSpace: async ({ space }) => {
         const { view, jsonSchema } = await ViewModel.makeFromDatabase({
           db: space.db,
-          typename: ContactWithArrayOfEmails.typename,
+          typename: Type.getTypename(ContactWithArrayOfEmails),
         });
         const table = Table.make({ view, jsonSchema });
         space.db.add(table);
 
-        const factory = createObjectFactory(space.db, faker as any);
+        const factory = createObjectFactory(space.db, random as any);
         await factory([
           // { type: TestSchema.Person, count: 10 },
           // { type: TestSchema.Organization, count: 1 },
@@ -287,7 +282,7 @@ export const ArrayOfObjects: StoryObj = {
   },
 };
 
-export const Tags: Meta<StoryProps> = {
+export const Tags: Meta<DefaultStoryProps> = {
   title: 'ui/react-ui-table/Table',
   render: DefaultStory,
   decorators: [
@@ -297,7 +292,7 @@ export const Tags: Meta<StoryProps> = {
       createSpace: true,
       onCreateSpace: async ({ space }) => {
         // Configure schema.
-        const typename = 'com.example.type.single-select';
+        const typename = 'com.example.type.singleSelect';
         const selectOptions = [
           { id: 'one', title: 'One', color: 'emerald' },
           { id: 'two', title: 'Two', color: 'blue' },
@@ -308,7 +303,7 @@ export const Tags: Meta<StoryProps> = {
 
         const selectOptionIds = selectOptions.map((o) => o.id);
 
-        const schema = getSchemaFromPropertyDefinitions(typename, [
+        const type = getSchemaFromPropertyDefinitions(typename, [
           {
             name: 'single',
             format: Format.TypeFormat.SingleSelect,
@@ -320,7 +315,7 @@ export const Tags: Meta<StoryProps> = {
             config: { options: selectOptions },
           },
         ]);
-        const [storedSchema] = await space.db.schemaRegistry.register([schema]);
+        const storedType = await space.db.addType(type);
 
         // Initialize table.
         const { view, jsonSchema } = await ViewModel.makeFromDatabase({ db: space.db, typename });
@@ -330,9 +325,9 @@ export const Tags: Meta<StoryProps> = {
         // Populate.
         Array.from({ length: 10 }).map(() => {
           return space.db.add(
-            Obj.make(storedSchema, {
-              single: faker.helpers.arrayElement([...selectOptionIds, undefined]),
-              multiple: faker.helpers.randomSubset(selectOptionIds),
+            Obj.make(Type.assertObject(storedType), {
+              single: random.helpers.arrayElement([...selectOptionIds, undefined]),
+              multiple: random.helpers.randomSubset(selectOptionIds),
             }),
           );
         });