@dxos/react-ui-form 0.8.4-main.8360d9e660 → 0.8.4-main.8baae0fced

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

@@ -7,24 +7,24 @@ import * as Schema from 'effect/Schema';
 import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import { expect, fn, userEvent, within } from 'storybook/test';
 
-import { Obj } from '@dxos/echo';
-import { faker } from '@dxos/random';
-import { Filter, useQuery } from '@dxos/react-client/echo';
+import { Filter, Obj } from '@dxos/echo';
+import { random } from '@dxos/random';
+import { useQuery } from '@dxos/react-client/echo';
 import { useClientStory, withClientProvider } from '@dxos/react-client/testing';
 import { Button } from '@dxos/react-ui';
 import { withTheme } from '@dxos/react-ui/testing';
 import { Person } from '@dxos/types';
 import { osTranslations } from '@dxos/ui-theme';
 
-import { translations } from '../../translations';
+import { translations } from '#translations';
 
 import { ObjectPicker } from './ObjectPicker';
 
-faker.seed(1);
+random.seed(1);
 
 const createPerson = () =>
   Obj.make(Person.Person, {
-    fullName: faker.person.fullName(),
+    fullName: random.person.fullName(),
   });
 
 const omitId = Schema.omit<any, any, ['id']>('id');
@@ -48,7 +48,7 @@ const DefaultStory = () => {
     }
   }, [space]);
 
-  // Get all objects in the space (similar to BoardContainer)
+  // Get all objects in the space (similar to BoardArticle)
   const allObjects = useQuery(space?.db, Filter.everything());
 
   // Map objects to options format expected by ObjectPicker
@@ -65,7 +65,9 @@ const DefaultStory = () => {
   const handleCreateCallback = useCallback(
     (values: any) => {
       console.log('[on create]', values);
-      if (!space) return;
+      if (!space) {
+        return;
+      }
       const newPerson = space.db.add(Obj.make(Person.Person, values));
       mockHandleCreate(values);
       return newPerson;
@@ -74,7 +76,7 @@ const DefaultStory = () => {
   );
 
   return (
-    <div role='none' className='flex w-96'>
+    <div className='w-96'>
       <ObjectPicker.Root open={isOpen} onOpenChange={setIsOpen}>
         <ObjectPicker.Trigger asChild>
           <Button variant='primary' data-testid='trigger' classNames='w-full'>
@@ -85,7 +87,7 @@ const DefaultStory = () => {
           classNames='dx-card-popover-width'
           options={options}
           createSchema={personSchema}
-          createOptionLabel={['create new person label', { ns: osTranslations }]}
+          createOptionLabel={['create-new-person.label', { ns: osTranslations }]}
           createOptionIcon='ph--user-plus--regular'
           createInitialValuePath='fullName'
           onCreate={handleCreateCallback}

package/src/components/ObjectPicker/ObjectPicker.tsx

@@ -6,10 +6,13 @@ import type * as Schema from 'effect/Schema';
 import React, { type KeyboardEvent, forwardRef, useCallback, useState } from 'react';
 
 import { type Palette, Popover, type ThemedClassName, useTranslation } from '@dxos/react-ui';
-import { Combobox, useSearchListInput, useSearchListResults } from '@dxos/react-ui-searchlist';
+import { Combobox } from '@dxos/react-ui-list';
+import { useSearchListResults } from '@dxos/react-ui-search';
+
+import { translationKey } from '#translations';
 
-import { translationKey } from '../../translations';
 import { Form } from '../Form';
+import { type FormFieldMap } from '../Form/FormFieldComponent';
 
 export type RefOption = {
   id: string;
@@ -24,36 +27,18 @@ export type ObjectPickerContentProps = ThemedClassName<{
   createOptionIcon?: string;
   createSchema?: Schema.Schema.AnyNoContext;
   createInitialValuePath?: string;
-  onCreate?: (values: any) => void;
+  createFieldMap?: FormFieldMap;
+  /**
+   * Persist a newly-created object given the form values. May be async (e.g.
+   * to write to a database). The Promise is awaited before the inline create
+   * form is collapsed back to the picker list, so consumers can complete
+   * follow-up work (assign the new ref to a parent slot, close the popover)
+   * before the picker UI re-renders.
+   */
+  onCreate?: (values: any) => unknown | Promise<unknown>;
   onSelect: (id: string) => void;
 }>;
 
-const CreateItem = ({
-  createOptionLabel,
-  createOptionIcon,
-  onCreateItemSelect,
-}: {
-  createOptionLabel: [string, { ns: string }];
-  createOptionIcon: string;
-  onCreateItemSelect: (query: string) => void;
-}) => {
-  const { t } = useTranslation(translationKey);
-  const { query } = useSearchListInput();
-
-  return (
-    <Combobox.Item
-      value='__create__'
-      label={t(createOptionLabel[0], { ns: createOptionLabel[1].ns, text: query })}
-      icon={createOptionIcon}
-      classNames='flex items-center gap-2'
-      closeOnSelect={false}
-      onSelect={() => {
-        onCreateItemSelect(query);
-      }}
-    />
-  );
-};
-
 const ObjectPickerContent = forwardRef<HTMLDivElement, ObjectPickerContentProps>(
   (
     {
@@ -63,23 +48,24 @@ const ObjectPickerContent = forwardRef<HTMLDivElement, ObjectPickerContentProps>
       createOptionLabel,
       createOptionIcon,
       createInitialValuePath,
+      createFieldMap,
       onSelect,
       onCreate,
       ...props
     },
-    ref,
+    forwardedRef,
   ) => {
     const { t } = useTranslation(translationKey);
     const [showForm, setShowForm] = useState(false);
     const [formInitialValue, setFormInitialValue] = useState<string>('');
 
-    const { results, handleSearch } = useSearchListResults({
+    const { results, query, handleSearch } = useSearchListResults({
       items: options,
     });
 
     const handleFormSave = useCallback(
-      (values: any) => {
-        onCreate?.(values);
+      async (values: any) => {
+        await onCreate?.(values);
         setShowForm(false);
         setFormInitialValue('');
       },
@@ -112,14 +98,15 @@ const ObjectPickerContent = forwardRef<HTMLDivElement, ObjectPickerContentProps>
       [createSchema],
     );
 
-    return (
-      <Combobox.Content {...props} ref={ref} onSearch={handleSearch} onKeyDownCapture={handleKeyDown}>
-        {showForm && createSchema ? (
+    if (showForm && createSchema) {
+      return (
+        <Combobox.Content {...props} onKeyDownCapture={handleKeyDown} ref={forwardedRef}>
           <Popover.Viewport>
             <Form.Root
               testId='create-referenced-object-form'
               schema={createSchema}
-              values={createInitialValuePath ? { [createInitialValuePath]: formInitialValue } : {}}
+              defaultValues={createInitialValuePath ? { [createInitialValuePath]: formInitialValue } : {}}
+              fieldMap={createFieldMap}
               onSave={handleFormSave}
               onCancel={handleFormCancel}
             >
@@ -131,40 +118,80 @@ const ObjectPickerContent = forwardRef<HTMLDivElement, ObjectPickerContentProps>
               </Form.Viewport>
             </Form.Root>
           </Popover.Viewport>
-        ) : (
-          <>
-            <Combobox.Input placeholder={t('ref field combobox input placeholder')} autoFocus />
-            <Combobox.List>
-              {results.map((option) => (
-                <Combobox.Item
-                  key={option.id}
-                  value={option.id}
-                  label={option.label}
-                  checked={selectedIds?.includes(option.id)}
-                  onSelect={() => onSelect(option.id)}
-                  classNames='flex items-center gap-2'
-                />
-              ))}
-              {createOptionLabel && createOptionIcon && createSchema && onCreate && (
-                <CreateItem
-                  createOptionLabel={createOptionLabel}
-                  createOptionIcon={createOptionIcon}
-                  onCreateItemSelect={(query: string) => {
-                    setFormInitialValue(query);
-                    setShowForm(true);
-                  }}
-                />
-              )}
-            </Combobox.List>
-          </>
-        )}
+          <Combobox.Arrow />
+        </Combobox.Content>
+      );
+    }
+
+    return (
+      <Combobox.Content {...props} onKeyDownCapture={handleKeyDown} ref={forwardedRef}>
+        <Combobox.Input
+          placeholder={t('ref-field-combobox-input.placeholder')}
+          autoFocus
+          value={query}
+          onValueChange={handleSearch}
+        />
+        <Combobox.List>
+          {results.map((option) => (
+            <Combobox.Item
+              key={option.id}
+              value={option.id}
+              label={option.label}
+              checked={selectedIds?.includes(option.id)}
+              onSelect={() => onSelect(option.id)}
+              classNames='flex items-center gap-2'
+            />
+          ))}
+          {createSchema && onCreate && (
+            <CreateItem
+              query={query}
+              createOptionLabel={createOptionLabel}
+              createOptionIcon={createOptionIcon ?? 'ph--plus--regular'}
+              onCreateItemSelect={(currentQuery: string) => {
+                setFormInitialValue(currentQuery);
+                setShowForm(true);
+              }}
+            />
+          )}
+        </Combobox.List>
         <Combobox.Arrow />
       </Combobox.Content>
     );
   },
 );
 
-ObjectPickerContent.displayName = 'ObjectPickerContent';
+const CreateItem = ({
+  query,
+  createOptionLabel,
+  createOptionIcon,
+  onCreateItemSelect,
+}: {
+  query: string;
+  createOptionLabel?: [string, { ns: string }];
+  createOptionIcon: string;
+  onCreateItemSelect: (query: string) => void;
+}) => {
+  const { t } = useTranslation(translationKey);
+
+  const label = createOptionLabel
+    ? t(createOptionLabel[0], { ns: createOptionLabel[1].ns, text: query })
+    : t('create-option.label');
+
+  return (
+    <Combobox.Item
+      value='__create__'
+      label={label}
+      icon={createOptionIcon}
+      classNames='flex items-center gap-2'
+      closeOnSelect={false}
+      onSelect={() => {
+        onCreateItemSelect(query);
+      }}
+    />
+  );
+};
+
+ObjectPickerContent.displayName = 'ObjectPicker.Content';
 
 export const ObjectPicker = {
   Root: Combobox.Root,

package/src/components/ObjectProperties/ObjectProperties.stories.tsx

@@ -0,0 +1,362 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import { type Meta, type StoryObj } from '@storybook/react-vite';
+import * as Schema from 'effect/Schema';
+import React, { useEffect } from 'react';
+import { expect, userEvent, within } from 'storybook/test';
+
+import { Annotation, Filter, Obj, Ref, Tag, Type } from '@dxos/echo';
+import { FormInputAnnotation, LabelAnnotation } from '@dxos/echo/internal';
+import { useQuery } from '@dxos/react-client/echo';
+import { useClientStory, withClientProvider } from '@dxos/react-client/testing';
+import { Panel } from '@dxos/react-ui';
+import { Loading, withLayout, withTheme } from '@dxos/react-ui/testing';
+import { FactoryAnnotation, type FactoryFn } from '@dxos/schema';
+import { Pipeline } from '@dxos/types';
+
+import { translations } from '#translations';
+
+import { OBJECT_PROPERTIES_DEBUG_SYMBOL } from '../testing';
+import { ObjectProperties } from './ObjectProperties';
+
+//
+// Test-only schemas exercising a non-Tag ref-array. `Article.authors` is the
+// case the generic create flow currently fails on: the picker creates an
+// Author in the DB but never wires the new Ref into the array slot.
+//
+
+const Author = Schema.Struct({
+  name: Schema.String,
+}).pipe(
+  Type.object({
+    typename: 'org.dxos.test.author',
+    version: '0.1.0',
+  }),
+  LabelAnnotation.set(['name']),
+  Annotation.IconAnnotation.set({ icon: 'ph--user--regular', hue: 'blue' }),
+);
+type Author = Schema.Schema.Type<typeof Author>;
+
+const Article = Schema.Struct({
+  title: Schema.String.pipe(Schema.optional),
+  authors: Schema.Array(Ref.Ref(Author)),
+}).pipe(
+  Type.object({
+    typename: 'org.dxos.test.article',
+    version: '0.1.0',
+  }),
+  LabelAnnotation.set(['title']),
+  Annotation.IconAnnotation.set({ icon: 'ph--article--regular', hue: 'green' }),
+);
+type Article = Schema.Schema.Type<typeof Article>;
+
+//
+// `Note` mirrors the `Subscription.Feed` shape: a required `Ref` field
+// (`backing`) is hidden from the form via `FormInputAnnotation.set(false)`,
+// so `Obj.make(Note, values)` from the picker would reject because the form
+// values can't satisfy the schema. A `FactoryAnnotation` constructs the
+// backing object and links it at create time. `cursor` is an optional hidden
+// field included to exercise the same path for non-required hidden fields.
+//
+const NoteBacking = Schema.Struct({}).pipe(Type.object({ typename: 'org.dxos.test.note-backing', version: '0.1.0' }));
+type NoteBacking = Schema.Schema.Type<typeof NoteBacking>;
+
+const Note = Schema.Struct({
+  title: Schema.String,
+  cursor: Schema.String.pipe(FormInputAnnotation.set(false), Schema.optional),
+  backing: Ref.Ref(NoteBacking).pipe(FormInputAnnotation.set(false)),
+}).pipe(
+  Type.object({
+    typename: 'org.dxos.test.note',
+    version: '0.1.0',
+  }),
+  LabelAnnotation.set(['title']),
+  Annotation.IconAnnotation.set({ icon: 'ph--note--regular', hue: 'amber' }),
+  FactoryAnnotation.set(((values: any) =>
+    Obj.make(Note, { ...values, backing: Ref.make(Obj.make(NoteBacking, {})) })) as FactoryFn),
+);
+type Note = Schema.Schema.Type<typeof Note>;
+
+const Notebook = Schema.Struct({
+  name: Schema.String.pipe(Schema.optional),
+  notes: Schema.Array(Ref.Ref(Note)),
+}).pipe(
+  Type.object({
+    typename: 'org.dxos.test.notebook',
+    version: '0.1.0',
+  }),
+  LabelAnnotation.set(['name']),
+  Annotation.IconAnnotation.set({ icon: 'ph--notebook--regular', hue: 'amber' }),
+);
+type Notebook = Schema.Schema.Type<typeof Notebook>;
+
+//
+// Stories.
+//
+
+export type ObjectPropertiesDebug = {
+  /** Live database the story is rendering against. */
+  db: ReturnType<typeof useClientStory>['space'] extends infer S ? (S extends { db: infer D } ? D : never) : never;
+  /** Object whose properties are being edited. */
+  object: Obj.Unknown;
+};
+
+const PipelineStory = () => {
+  const { space } = useClientStory();
+  const [object] = useQuery(space?.db, Filter.type(Pipeline.Pipeline));
+
+  useEffect(() => {
+    if (typeof window !== 'undefined' && space?.db && object) {
+      (window as any)[OBJECT_PROPERTIES_DEBUG_SYMBOL] = { db: space.db, object } satisfies ObjectPropertiesDebug;
+    }
+  }, [space, object]);
+
+  if (!object) {
+    return <Loading />;
+  }
+  return (
+    <Panel.Root>
+      <Panel.Content asChild>
+        <ObjectProperties object={object} />
+      </Panel.Content>
+    </Panel.Root>
+  );
+};
+
+const ArticleStory = () => {
+  const { space } = useClientStory();
+  const [object] = useQuery(space?.db, Filter.type(Article));
+
+  useEffect(() => {
+    if (typeof window !== 'undefined' && space?.db && object) {
+      (window as any)[OBJECT_PROPERTIES_DEBUG_SYMBOL] = { db: space.db, object } satisfies ObjectPropertiesDebug;
+    }
+  }, [space, object]);
+
+  if (!object) {
+    return <Loading />;
+  }
+  return (
+    <Panel.Root>
+      <Panel.Content asChild>
+        <ObjectProperties object={object} />
+      </Panel.Content>
+    </Panel.Root>
+  );
+};
+
+const meta = {
+  title: 'ui/react-ui-form/ObjectProperties',
+  component: ObjectProperties as any,
+  decorators: [withTheme(), withLayout({ layout: 'column' })],
+  parameters: {
+    layout: 'fullscreen',
+    translations,
+  },
+} satisfies Meta<typeof PipelineStory>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+const pipelineDecorators = [
+  withClientProvider({
+    createIdentity: true,
+    createSpace: true,
+    types: [Pipeline.Pipeline, Tag.Tag],
+    onCreateSpace: async ({ space }) => {
+      space.db.add(Pipeline.make());
+      space.db.add(Tag.make({ label: 'Tag 1' }));
+      space.db.add(Tag.make({ label: 'Tag 2' }));
+      space.db.add(Tag.make({ label: 'Tag 3' }));
+    },
+  }),
+];
+
+const articleDecorators = [
+  withClientProvider({
+    createIdentity: true,
+    createSpace: true,
+    types: [Article, Author, Tag.Tag],
+    onCreateSpace: async ({ space }) => {
+      space.db.add(Obj.make(Article, { title: 'Untitled article', authors: [] }));
+    },
+  }),
+];
+
+const NotebookStory = () => {
+  const { space } = useClientStory();
+  const [object] = useQuery(space?.db, Filter.type(Notebook));
+
+  useEffect(() => {
+    if (typeof window !== 'undefined' && space?.db && object) {
+      (window as any)[OBJECT_PROPERTIES_DEBUG_SYMBOL] = { db: space.db, object } satisfies ObjectPropertiesDebug;
+    }
+  }, [space, object]);
+
+  if (!object) {
+    return <Loading />;
+  }
+  return (
+    <Panel.Root>
+      <Panel.Content asChild>
+        <ObjectProperties object={object} />
+      </Panel.Content>
+    </Panel.Root>
+  );
+};
+
+const notebookDecorators = [
+  withClientProvider({
+    createIdentity: true,
+    createSpace: true,
+    types: [Notebook, Note, NoteBacking, Tag.Tag],
+    onCreateSpace: async ({ space }) => {
+      space.db.add(Obj.make(Notebook, { name: 'Untitled notebook', notes: [] }));
+    },
+  }),
+];
+
+/**
+ * Default Pipeline form — manual exploration. Includes the Tags picker (which
+ * is the only ref-array path that currently works end-to-end, by virtue of
+ * `Tag.Tag` being special-cased in `ObjectProperties.handleCreate`).
+ */
+export const Default: Story = {
+  render: PipelineStory,
+  decorators: pipelineDecorators,
+};
+
+/**
+ * Tag-creation play. Walks the inline create flow against the Tags picker and
+ * leaves the magazine in the post-Save state for assertions to inspect via
+ * `OBJECT_PROPERTIES_DEBUG_SYMBOL`.
+ *
+ * Expected end-state (currently passes):
+ *   - new Tag.Tag exists in the DB with `label === "PinnedTag"`
+ *   - `Obj.getMeta(object).tags` includes its DXN.
+ */
+export const CreateTagPlay: Story = {
+  render: PipelineStory,
+  decorators: pipelineDecorators,
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    const body = within(document.body);
+
+    // Tags is `Schema.Array(Ref.Ref(Tag.Tag))` and starts empty, so it renders
+    // as an "Add item" button — same shape as any other ref-array. Click it
+    // to materialise an empty slot, then open the slot's picker.
+    const addButton = await canvas.findByRole('button', { name: /add/i }, { timeout: 10_000 });
+    await userEvent.click(addButton);
+    await new Promise((resolve) => setTimeout(resolve, 250));
+
+    const comboboxes = await canvas.findAllByRole('combobox', undefined, { timeout: 10_000 });
+    await expect(comboboxes.length).toBeGreaterThan(0);
+    await userEvent.click(comboboxes[0]);
+
+    const search = await body.findByPlaceholderText(/search/i, undefined, { timeout: 5000 });
+    await userEvent.type(search, 'PinnedTag');
+
+    // The Tag picker localises the create option as "Add tag" (no text suffix
+    // — the translation has no `{{text}}` placeholder), so match on /add/.
+    const createOption = await body.findByRole('option', { name: /add/i }, { timeout: 3000 });
+    await userEvent.click(createOption);
+
+    const form = await body.findByTestId('create-referenced-object-form', undefined, { timeout: 5000 });
+    const labelInput = await within(form).findByLabelText(/^label$/i);
+    await userEvent.clear(labelInput);
+    await userEvent.type(labelInput, 'PinnedTag');
+    await userEvent.click(await within(form).findByTestId('save-button'));
+
+    // Allow async state updates to flush before the test asserts.
+    await new Promise((resolve) => setTimeout(resolve, 250));
+  },
+};
+
+/**
+ * Ref-array creation play. Walks Add → Open → Create → Save against
+ * `Article.authors`. After the fix, the new Author should be persisted AND
+ * wired into `article.authors[0]`. Today it persists to the DB but the array
+ * slot stays empty.
+ */
+export const CreateRefArrayPlay: Story = {
+  render: ArticleStory,
+  decorators: articleDecorators,
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    const body = within(document.body);
+
+    // ObjectProperties extends Article with the BaseSchema's `tags` array, so
+    // the form has two "Add item" buttons (Tags + Authors). Pick the last one
+    // — Authors comes after Tags in the rendered order.
+    const addButtons = await canvas.findAllByRole('button', { name: /add/i }, { timeout: 10_000 });
+    await userEvent.click(addButtons[addButtons.length - 1]);
+    await new Promise((resolve) => setTimeout(resolve, 250));
+
+    // Open the empty slot's combobox.
+    const comboboxes = await canvas.findAllByRole('combobox', undefined, { timeout: 10_000 });
+    await expect(comboboxes.length).toBeGreaterThan(0);
+    await userEvent.click(comboboxes[0]);
+
+    const search = await body.findByPlaceholderText(/search/i, undefined, { timeout: 5000 });
+    await userEvent.type(search, 'Ada Lovelace');
+
+    // Author has no `createOptionLabel` → option falls back to "Create".
+    const createOption = await body.findByRole('option', { name: /create/i }, { timeout: 3000 });
+    await userEvent.click(createOption);
+
+    const form = await body.findByTestId('create-referenced-object-form', undefined, { timeout: 5000 });
+    const nameInput = await within(form).findByLabelText(/^name$/i);
+    await userEvent.clear(nameInput);
+    await userEvent.type(nameInput, 'Ada Lovelace');
+    await userEvent.click(await within(form).findByTestId('save-button'));
+
+    await new Promise((resolve) => setTimeout(resolve, 250));
+  },
+};
+
+/**
+ * Ref-array creation against a schema with a hidden required field. `Note`
+ * mirrors the shape of `Subscription.Feed`: the form omits `backing` (a
+ * required `Ref` annotated `FormInputAnnotation.set(false)`) but the schema
+ * requires it. Without `omitHiddenFormFields` + `FactoryAnnotation`, the
+ * form's validator would reject Save and the popover would never close.
+ *
+ * Expected end-state after the fix:
+ *   - new Note exists in DB with a synthesised `backing` ref
+ *   - `notebook.notes[0]` references the new Note
+ *   - the create form is gone
+ */
+export const CreateHiddenFieldPlay: Story = {
+  render: NotebookStory,
+  decorators: notebookDecorators,
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    const body = within(document.body);
+
+    // Two "Add item" buttons (Tags + Notes) — Notes comes second.
+    const addButtons = await canvas.findAllByRole('button', { name: /add/i }, { timeout: 10_000 });
+    await userEvent.click(addButtons[addButtons.length - 1]);
+    await new Promise((resolve) => setTimeout(resolve, 250));
+
+    const comboboxes = await canvas.findAllByRole('combobox', undefined, { timeout: 10_000 });
+    await expect(comboboxes.length).toBeGreaterThan(0);
+    await userEvent.click(comboboxes[0]);
+
+    const search = await body.findByPlaceholderText(/search/i, undefined, { timeout: 5000 });
+    await userEvent.type(search, 'Ideas');
+
+    const createOption = await body.findByRole('option', { name: /create/i }, { timeout: 3000 });
+    await userEvent.click(createOption);
+
+    const form = await body.findByTestId('create-referenced-object-form', undefined, { timeout: 5000 });
+    const titleInput = await within(form).findByLabelText(/^title$/i);
+    await userEvent.clear(titleInput);
+    await userEvent.type(titleInput, 'Ideas');
+    await userEvent.click(await within(form).findByTestId('save-button'));
+
+    await new Promise((resolve) => setTimeout(resolve, 250));
+  },
+};