@dxos/react-ui-form 0.8.4-main.5ad4a44 → 0.8.4-main.66e292d

package/src/components/ObjectPicker/ObjectPicker.stories.tsx

@@ -9,12 +9,11 @@ import { expect, fn, userEvent, within } from 'storybook/test';
 
 import { Obj } from '@dxos/echo';
 import { faker } from '@dxos/random';
-import { useClient } from '@dxos/react-client';
 import { Filter, useQuery } from '@dxos/react-client/echo';
 import { useClientProvider, withClientProvider } from '@dxos/react-client/testing';
 import { Button } from '@dxos/react-ui';
 import { withTheme } from '@dxos/react-ui/testing';
-import { DataType } from '@dxos/schema';
+import { Person } from '@dxos/types';
 
 import { translations } from '../../translations';
 
@@ -23,19 +22,18 @@ import { ObjectPicker } from './ObjectPicker';
 faker.seed(1);
 
 const createPerson = () =>
-  Obj.make(DataType.Person, {
+  Obj.make(Person.Person, {
     fullName: faker.person.fullName(),
   });
 
 const omitId = Schema.omit<any, any, ['id']>('id');
-const personSchema = omitId(DataType.Person);
+const personSchema = omitId(Person.Person);
 
 // Mock functions for testing
 const mockHandleSelect = fn();
 const mockHandleCreate = fn();
 
 const DefaultStory = () => {
-  const client = useClient();
   const { space } = useClientProvider();
   const [isOpen, setIsOpen] = useState(false);
 
@@ -67,7 +65,7 @@ const DefaultStory = () => {
     (values: any) => {
       console.log('[on create]', values);
       if (!space) return;
-      const newPerson = space.db.add(Obj.make(DataType.Person, values));
+      const newPerson = space.db.add(Obj.make(Person.Person, values));
       mockHandleCreate(values);
       return newPerson;
     },
@@ -103,7 +101,7 @@ const meta = {
   decorators: [
     withTheme,
     withClientProvider({
-      types: [DataType.Person],
+      types: [Person.Person],
       createIdentity: true,
       createSpace: true,
     }),
@@ -119,37 +117,39 @@ export default meta;
 
 type Story = StoryObj<typeof meta>;
 
-export const Default: Story = {
+export const Default: Story = {};
+
+export const WithTest: Story = {
   play: async ({ canvasElement }) => {
     const canvas = within(canvasElement);
     const body = within(document.body);
 
-    // Find and click the trigger button
+    // Find and click the trigger button.
     const triggerButton = await canvas.findByTestId('trigger', undefined, { timeout: 5000 });
     await expect(triggerButton).toBeVisible();
     await userEvent.click(triggerButton);
 
-    // Check that the listbox renders when the trigger is clicked
+    // Check that the listbox renders when the trigger is clicked.
     const listbox = await body.findByRole('listbox', undefined, { timeout: 5000 });
     await expect(listbox).toBeVisible();
 
-    // Find the search input
+    // Find the search input.
     const searchInput = await body.findByPlaceholderText('Search…');
     await expect(searchInput).toBeVisible();
 
-    // Test searching filters the results - get initial options count
+    // Test searching filters the results - get initial options count.
     const initialOptions = await body.findAllByRole('option');
     const initialCount = initialOptions.length;
     await expect(initialCount).toBeGreaterThan(0);
 
-    // Type a search term that should filter results
+    // Type a search term that should filter results.
     await userEvent.type(searchInput, 'John');
 
-    // Wait a moment for filtering
+    // Wait a moment for filtering.
     await new Promise((resolve) => setTimeout(resolve, 100));
 
     // Check that results are filtered (should be fewer options)
-    const filteredOptions = await body.findAllByRole('option');
+    const _filteredOptions = await body.findAllByRole('option');
     // Note: We expect either fewer results or the same if no John exists
 
     // Clear search and test selecting a result
@@ -160,46 +160,46 @@ export const Default: Story = {
     const firstOption = updatedOptions[0];
     await expect(firstOption).toBeVisible();
 
-    const firstOptionText = await firstOption.textContent;
+    const _firstOptionText = firstOption.textContent;
     await userEvent.click(firstOption);
 
     // Check that clicking a result fires onSelect with that id
     // The onSelect should have been called with the selected option's id
     await expect(mockHandleSelect).toHaveBeenCalled();
 
-    // Re-open the picker to test create functionality
+    // Re-open the picker to test create functionality.
     await userEvent.click(triggerButton);
 
-    // Wait for listbox to appear again
+    // Wait for listbox to appear again.
     const newListbox = await body.findByRole('listbox', undefined, { timeout: 5000 });
     await expect(newListbox).toBeVisible();
 
     const newSearchInput = await body.findByPlaceholderText('Search…');
 
-    // Test searching an unrelated term provides the __create__ option
+    // Test searching an unrelated term provides the __create__ option.
     const unrelatedTerm = 'ZxyUnrelatedName123';
     await userEvent.type(newSearchInput, unrelatedTerm);
 
-    // Wait for the create option to appear
+    // Wait for the create option to appear.
     await new Promise((resolve) => setTimeout(resolve, 200));
 
-    // Look for the create option
+    // Look for the create option.
     const createOption = await body.findByRole('option', undefined, { timeout: 3000 });
     await expect(createOption).toBeVisible();
 
-    // Click the create option - this should change state to the form field
+    // Click the create option - this should change state to the form field.
     await userEvent.click(createOption);
 
-    // Check that clicking that option changes state to the form field
+    // Check that clicking that option changes state to the form field.
     const form = await body.findByTestId('create-referenced-object-form', undefined, { timeout: 5000 });
     await expect(form).toBeVisible();
 
-    // Find and click the save button
+    // Find and click the save button.
     const saveButton = await within(form).findByTestId('save-button');
     await expect(saveButton).toBeVisible();
     await userEvent.click(saveButton);
 
-    // Check that clicking the save button calls onCreate with expected values
+    // Check that clicking the save button calls onCreate with expected values.
     await expect(mockHandleCreate).toHaveBeenCalledWith({
       fullName: unrelatedTerm,
     });

package/src/components/ObjectPicker/ObjectPicker.tsx

@@ -6,7 +6,7 @@ import type * as Schema from 'effect/Schema';
 import React, { type KeyboardEvent, type MouseEvent, forwardRef, useCallback, useMemo, useState } from 'react';
 
 import { Icon, Popover, type ThemedClassName, useTranslation } from '@dxos/react-ui';
-import { PopoverCombobox } from '@dxos/react-ui-searchlist';
+import { Combobox } from '@dxos/react-ui-searchlist';
 
 import { type QueryTag } from '../../hooks';
 import { translationKey } from '../../translations';
@@ -99,7 +99,7 @@ const ObjectPickerContent = forwardRef<HTMLDivElement, ObjectPickerContentProps>
     );
 
     return (
-      <PopoverCombobox.Content
+      <Combobox.Content
         {...props}
         ref={ref}
         filter={(value, search) => (value === '__create__' || labelById[value]?.includes(search.toLowerCase()) ? 1 : 0)}
@@ -118,15 +118,15 @@ const ObjectPickerContent = forwardRef<HTMLDivElement, ObjectPickerContentProps>
           </Popover.Viewport>
         ) : (
           <>
-            <PopoverCombobox.Input
+            <Combobox.Input
               placeholder={t('ref field combobox input placeholder')}
               value={searchString}
               onValueChange={setSearchString}
               autoFocus
             />
-            <PopoverCombobox.List>
+            <Combobox.List>
               {options.map((option) => (
-                <PopoverCombobox.Item
+                <Combobox.Item
                   key={option.id}
                   value={option.id}
                   onSelect={() => onSelect(option.id)}
@@ -134,19 +134,19 @@ const ObjectPickerContent = forwardRef<HTMLDivElement, ObjectPickerContentProps>
                 >
                   <span className='grow'>{option.label}</span>
                   {selectedIds?.includes(option.id) && <Icon icon='ph--check--regular' />}
-                </PopoverCombobox.Item>
+                </Combobox.Item>
               ))}
               {searchString.length > 0 && createOptionLabel && createOptionIcon && createSchema && onCreate && (
-                <PopoverCombobox.Item value='__create__' classNames='flex items-center gap-2'>
+                <Combobox.Item value='__create__' classNames='flex items-center gap-2'>
                   <Icon icon={createOptionIcon} />
                   {t(createOptionLabel[0], { ns: createOptionLabel[1].ns, text: searchString })}
-                </PopoverCombobox.Item>
+                </Combobox.Item>
               )}
-            </PopoverCombobox.List>
+            </Combobox.List>
           </>
         )}
-        <PopoverCombobox.Arrow />
-      </PopoverCombobox.Content>
+        <Combobox.Arrow />
+      </Combobox.Content>
     );
   },
 );
@@ -154,8 +154,8 @@ const ObjectPickerContent = forwardRef<HTMLDivElement, ObjectPickerContentProps>
 ObjectPickerContent.displayName = 'ObjectPickerContent';
 
 export const ObjectPicker = {
-  Root: PopoverCombobox.Root,
-  Trigger: PopoverCombobox.Trigger,
-  VirtualTrigger: PopoverCombobox.VirtualTrigger,
+  Root: Combobox.Root,
+  Trigger: Combobox.Trigger,
+  VirtualTrigger: Combobox.VirtualTrigger,
   Content: ObjectPickerContent,
 };

package/src/components/ViewEditor/ViewEditor.stories.tsx

@@ -6,35 +6,45 @@ import { type Meta, type StoryObj } from '@storybook/react-vite';
 import * as Schema from 'effect/Schema';
 import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 
-import { DXN, Filter, Obj, Query, Type } from '@dxos/echo';
-import { type EchoSchema, Format, toJsonSchema } from '@dxos/echo/internal';
-import { QueryBuilder } from '@dxos/echo-query';
-import { useSpace } from '@dxos/react-client/echo';
-import { withClientProvider } from '@dxos/react-client/testing';
+import { DXN, Filter, Obj, Query, type QueryAST, Tag, Type } from '@dxos/echo';
+import { type EchoSchema, Format } from '@dxos/echo/internal';
+import { useQuery } from '@dxos/react-client/echo';
+import { useClientProvider, withClientProvider } from '@dxos/react-client/testing';
 import { useAsyncEffect } from '@dxos/react-ui';
 import { withTheme } from '@dxos/react-ui/testing';
-import { type DataType, type ProjectionModel, createView, getTypenameFromQuery } from '@dxos/schema';
+import { type ProjectionModel, View, getTypenameFromQuery } from '@dxos/schema';
+import { Employer, Organization, Person, Project } from '@dxos/types';
 
 import { translations } from '../../translations';
 import { TestLayout, TestPanel, VIEW_EDITOR_DEBUG_SYMBOL } from '../testing';
 
 import { ViewEditor, type ViewEditorProps } from './ViewEditor';
 
+const types = [
+  // TODO(burdon): Get label from annotation.
+  { value: Organization.Organization.typename, label: 'Organization' },
+  { value: Person.Person.typename, label: 'Person' },
+  { value: Type.getTypename(Project.Project), label: 'Project' },
+  { value: Employer.Employer.typename, label: 'Employer' },
+];
+
 // Type definition for debug objects exposed to tests.
 export type ViewEditorDebugObjects = {
   schema: EchoSchema;
-  view: DataType.View;
+  view: View.View;
   projection: ProjectionModel;
 };
 
 type StoryProps = Pick<ViewEditorProps, 'readonly' | 'mode'>;
 
 const DefaultStory = (props: StoryProps) => {
-  const space = useSpace();
+  const { space } = useClientProvider();
   const [schema, setSchema] = useState<EchoSchema>();
-  const [view, setView] = useState<DataType.View>();
+  const [view, setView] = useState<View.View>();
   const projectionRef = useRef<ProjectionModel>(null);
 
+  const tags = useQuery(space, Filter.type(Tag.Tag));
+
   useAsyncEffect(async () => {
     if (space) {
       const TestSchema = Schema.Struct({
@@ -60,12 +70,10 @@ const DefaultStory = (props: StoryProps) => {
       );
 
       const [testSchema] = await space.db.schemaRegistry.register([TestSchema, AlternateSchema]);
-      const view = createView({
+      const view = View.make({
         name: 'Test',
         query: Query.select(Filter.type(TestSchema)),
-        queryString: 'Query.select(Filter.type(TestSchema))',
-        jsonSchema: toJsonSchema(TestSchema),
-        presentation: Obj.make(Type.Expando, {}),
+        jsonSchema: Type.toJsonSchema(TestSchema),
       });
 
       setSchema(testSchema);
@@ -74,38 +82,31 @@ const DefaultStory = (props: StoryProps) => {
   }, [space]);
 
   const updateViewQuery = useCallback(
-    async (queryString: string, target?: string) => {
+    async (newQuery: QueryAST.Query, target?: string) => {
       if (!schema || !view || !space) {
         return;
       }
 
-      if (props.mode === 'query') {
-        view.query.string = queryString;
-
-        const builder = new QueryBuilder();
-        const filter = builder.build(queryString) ?? Filter.nothing();
+      if (props.mode === 'tag') {
         const queue = target && DXN.tryParse(target) ? target : undefined;
-        const newQuery = queue ? Query.select(filter).options({ queues: [queue] }) : Query.select(filter);
-        view.query.ast = newQuery.ast;
+        const query = queue ? Query.fromAst(newQuery).options({ queues: [queue] }) : Query.fromAst(newQuery);
+        view.query.ast = query.ast;
 
-        const typename = getTypenameFromQuery(newQuery.ast);
+        const typename = getTypenameFromQuery(query.ast);
         const [newSchema] = await space.db.schemaRegistry.query({ typename }).run();
         if (!newSchema) {
           return;
         }
 
-        const newView = createView({
-          query: newQuery,
+        const newView = View.make({
+          query,
           jsonSchema: newSchema.jsonSchema,
-          presentation: Obj.make(Type.Expando, {}),
         });
         view.projection = Obj.getSnapshot(newView).projection;
         setSchema(() => newSchema);
       } else {
-        const typename = queryString;
-        const newQuery = Query.select(Filter.typename(typename));
-        view.query.ast = newQuery.ast;
-        schema.updateTypename(typename);
+        view.query.ast = newQuery;
+        schema.updateTypename(getTypenameFromQuery(newQuery));
       }
     },
     [view, schema],
@@ -147,6 +148,8 @@ const DefaultStory = (props: StoryProps) => {
           registry={space?.db.schemaRegistry}
           mode={props.mode}
           readonly={props.readonly}
+          types={types}
+          tags={tags}
           onQueryChanged={updateViewQuery}
           onDelete={handleDelete}
         />
@@ -158,7 +161,18 @@ const DefaultStory = (props: StoryProps) => {
 const meta = {
   title: 'ui/react-ui-form/ViewEditor',
   render: DefaultStory,
-  decorators: [withClientProvider({ createSpace: true }), withTheme],
+  decorators: [
+    withClientProvider({
+      createSpace: true,
+      types: [Tag.Tag],
+      onCreateSpace: ({ space }) => {
+        space.db.add(Tag.make({ label: 'Important' }));
+        space.db.add(Tag.make({ label: 'Investor' }));
+        space.db.add(Tag.make({ label: 'New' }));
+      },
+    }),
+    withTheme,
+  ],
   parameters: {
     layout: 'fullscreen',
     translations,
@@ -177,8 +191,8 @@ export const Readonly: Story = {
   },
 };
 
-export const QueryMode: Story = {
+export const TagQueryMode: Story = {
   args: {
-    mode: 'query',
+    mode: 'tag',
   },
 };

package/src/components/ViewEditor/ViewEditor.test.tsx

@@ -7,7 +7,7 @@ import { cleanup, fireEvent, screen, waitFor } from '@testing-library/react';
 import { afterEach, describe, expect, test } from 'vitest';
 
 import { EchoSchema, isInstanceOf } from '@dxos/echo/internal';
-import { DataType, ProjectionModel } from '@dxos/schema';
+import { ProjectionModel, View } from '@dxos/schema';
 
 import { VIEW_EDITOR_DEBUG_SYMBOL } from '../testing';
 
@@ -20,7 +20,7 @@ const getViewEditorDebugObjects = (): ViewEditorDebugObjects => {
   const debugObjects = (window as any)[VIEW_EDITOR_DEBUG_SYMBOL] as ViewEditorDebugObjects;
   expect(debugObjects).toBeDefined();
   expect(debugObjects.schema).toBeInstanceOf(EchoSchema);
-  expect(isInstanceOf(DataType.View, debugObjects.view)).toBeTruthy();
+  expect(isInstanceOf(View.View, debugObjects.view)).toBeTruthy();
   expect(debugObjects.projection).toBeInstanceOf(ProjectionModel);
   return debugObjects;
 };
@@ -134,7 +134,8 @@ describe('ViewEditor', () => {
     expect(addedPropertyProjection!.props.property).toBe('added_property');
   });
 
-  test('delete property', async () => {
+  // TODO(mykola): Fix flaky test.
+  test('delete property', { retry: 2 }, async () => {
     await Default.run();
     await waitForViewEditor();