@dxos/react-ui-form 0.8.4-main.1da679c → 0.8.4-main.21d9917

package/src/components/Form/{custom/SelectOptionsInput.stories.tsx → fields/SelectOptionField.stories.tsx}

@@ -2,23 +2,21 @@
 // Copyright 2025 DXOS.org
 //
 
-import '@dxos-theme';
-
 import { type Meta, type StoryObj } from '@storybook/react-vite';
-import { Schema } from 'effect';
+import * as Schema from 'effect/Schema';
 import React, { useState } from 'react';
 
-import { type SelectOption, SelectOptionSchema } from '@dxos/echo-schema';
-import { withLayout, withTheme } from '@dxos/storybook-utils';
+import { SelectOption } from '@dxos/echo/internal';
+import { withTheme } from '@dxos/react-ui/testing';
 
 import { translations } from '../../../translations';
-import { TestLayout, TestPanel } from '../../testing';
+import { TestLayout } from '../../testing';
 import { Form } from '../Form';
 
-import { SelectOptionInput } from './SelectOptionsInput';
+import { SelectOptionField } from './SelectOptionField';
 
 const schema = Schema.Struct({
-  options: Schema.Array(SelectOptionSchema).pipe(Schema.mutable),
+  options: Schema.Array(SelectOption).pipe(Schema.mutable),
 }).pipe(Schema.mutable);
 
 const DefaultStory = () => {
@@ -33,24 +31,28 @@ const DefaultStory = () => {
 
   return (
     <TestLayout>
-      <TestPanel>
-        <Form
-          schema={schema}
-          values={values}
-          onSave={(vals) => setValues(vals)}
-          Custom={{ options: SelectOptionInput }}
-        />
-      </TestPanel>
+      <Form.Root
+        schema={schema}
+        values={values}
+        fieldMap={{ options: SelectOptionField }}
+        onSave={(values) => setValues(values)}
+      >
+        <Form.Content>
+          <Form.FieldSet />
+          <Form.Actions />
+        </Form.Content>
+      </Form.Root>
     </TestLayout>
   );
 };
 
 const meta = {
-  title: 'ui/react-ui-form/SelectOptionsInput',
-  component: SelectOptionInput as any,
+  title: 'ui/react-ui-form/SelectOptionField',
+  component: SelectOptionField as any,
   render: DefaultStory,
-  decorators: [withTheme, withLayout({ fullscreen: true })],
+  decorators: [withTheme],
   parameters: {
+    layout: 'fullscreen',
     translations,
   },
 } satisfies Meta<typeof DefaultStory>;

package/src/components/Form/{custom/SelectOptionsInput.tsx → fields/SelectOptionField.tsx}

@@ -4,30 +4,37 @@
 
 import React, { type ChangeEvent, type KeyboardEvent, useCallback, useEffect, useRef, useState } from 'react';
 
-import { type SelectOption } from '@dxos/echo-schema';
+import { type SelectOption } from '@dxos/echo/internal';
 import { PublicKey } from '@dxos/keys';
 import { type ChromaticPalette, IconButton, Input, Tag, useTranslation } from '@dxos/react-ui';
 import { List } from '@dxos/react-ui-list';
 import { HuePicker } from '@dxos/react-ui-pickers';
-import { hues, subtleHover } from '@dxos/react-ui-theme';
+import { hues, osTranslations, subtleHover } from '@dxos/ui-theme';
 
 import { translationKey } from '../../../translations';
-import { InputHeader, type InputProps } from '../Input';
-
-export const SelectOptionInput = ({ type, label, readonly, getStatus, getValue, onValueChange }: InputProps) => {
+import { type FormFieldComponentProps, FormFieldLabel } from '../FormFieldComponent';
+
+export const SelectOptionField = ({
+  type,
+  readonly,
+  label,
+  getStatus,
+  getValue,
+  onValueChange,
+}: FormFieldComponentProps<SelectOption[] | undefined>) => {
+  const { t } = useTranslation(translationKey);
+  const { status, error } = getStatus();
   const [selected, setSelectedId] = useState<string | null>(null);
   const [isNewOption, setIsNewOption] = useState(false);
   const inputRef = useRef<HTMLInputElement>(null);
-  const { t } = useTranslation(translationKey);
-  const { status, error } = getStatus();
-  const options = getValue<SelectOption[] | undefined>();
+  const options = getValue();
 
   // Initialization.
   useEffect(() => {
     if (options === undefined) {
       onValueChange(type, []);
     }
-  }, [options, onValueChange, type]);
+  }, [options, type, onValueChange]);
 
   const randomHue = () => {
     const usedHues = new Set(options?.map((option) => option.color) ?? []);
@@ -88,8 +95,8 @@ export const SelectOptionInput = ({ type, label, readonly, getStatus, getValue,
     [options, type, onValueChange],
   );
 
-  const handleKeyDown = useCallback((e: KeyboardEvent<HTMLInputElement>) => {
-    if (e.key === 'Enter') {
+  const handleKeyDown = useCallback((ev: KeyboardEvent<HTMLInputElement>) => {
+    if (ev.key === 'Enter') {
       setSelectedId(null);
     }
   }, []);
@@ -111,17 +118,17 @@ export const SelectOptionInput = ({ type, label, readonly, getStatus, getValue,
 
   return (
     <Input.Root validationValence={status}>
-      <InputHeader error={error} label={label} />
+      <FormFieldLabel error={error} readonly={readonly} label={label} />
       <div role='none'>
         {options && (
           <List.Root
             items={options}
-            isItem={(item) => true}
+            isItem={(_item) => true}
             onMove={readonly ? undefined : handleMove}
             readonly={!!readonly}
           >
             {({ items }) => (
-              <div role='list' className='w-full overflow-auto'>
+              <div role='list' className='is-full overflow-auto'>
                 {items?.map((item) => (
                   <div key={item.id}>
                     <List.Item
@@ -139,7 +146,7 @@ export const SelectOptionInput = ({ type, label, readonly, getStatus, getValue,
                         <IconButton
                           iconOnly
                           variant='ghost'
-                          label={t(selected === item.id ? 'collapse label' : 'expand label', { ns: 'os' })}
+                          label={t(selected === item.id ? 'collapse label' : 'expand label', { ns: osTranslations })}
                           icon={selected === item.id ? 'ph--caret-down--regular' : 'ph--caret-right--regular'}
                           onClick={() => handleClick(item.id)}
                         />
@@ -157,7 +164,6 @@ export const SelectOptionInput = ({ type, label, readonly, getStatus, getValue,
                               onChange={handleTitleChange(item.id)}
                               onKeyDown={handleKeyDown}
                               classNames='flex-1'
-                              data-no-submit
                             />
                             <HuePicker disabled={!!readonly} value={item.color} onChange={handleColorChange(item.id)} />
                             <IconButton

package/src/components/Form/fields/TextAreaField.tsx

@@ -0,0 +1,38 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import React, { useCallback } from 'react';
+
+import { Input, type TextAreaProps } from '@dxos/react-ui';
+
+import { type FormFieldComponentProps, FormFieldWrapper } from '../FormFieldComponent';
+
+export const TextAreaField = ({
+  type,
+  readonly,
+  placeholder,
+  onValueChange,
+  onBlur,
+  ...props
+}: FormFieldComponentProps<string>) => {
+  const handleChange = useCallback<NonNullable<TextAreaProps['onChange']>>(
+    (event) => onValueChange(type, event.target.value),
+    [type, onValueChange],
+  );
+
+  return (
+    <FormFieldWrapper<string> readonly={readonly} {...props}>
+      {({ value = '' }) => (
+        <Input.TextArea
+          rows={3}
+          disabled={!!readonly}
+          placeholder={placeholder}
+          value={value}
+          onChange={handleChange}
+          onBlur={onBlur}
+        />
+      )}
+    </FormFieldWrapper>
+  );
+};

package/src/components/Form/fields/TextField.tsx

@@ -0,0 +1,38 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import React, { useCallback } from 'react';
+
+import { Input, type TextInputProps } from '@dxos/react-ui';
+
+import { type FormFieldComponentProps, FormFieldWrapper } from '../FormFieldComponent';
+
+export const TextField = ({
+  type,
+  readonly,
+  placeholder,
+  onValueChange,
+  onBlur,
+  ...props
+}: FormFieldComponentProps<string>) => {
+  const handleChange = useCallback<NonNullable<TextInputProps['onChange']>>(
+    (event) => onValueChange(type, event.target.value),
+    [type, onValueChange],
+  );
+
+  return (
+    <FormFieldWrapper<string> readonly={readonly} {...props}>
+      {({ value = '' }) => (
+        <Input.TextInput
+          noAutoFill
+          disabled={!!readonly}
+          placeholder={placeholder}
+          value={value}
+          onChange={handleChange}
+          onBlur={onBlur}
+        />
+      )}
+    </FormFieldWrapper>
+  );
+};

package/src/components/Form/{custom/TupleInput.tsx → fields/TupleField.tsx}

@@ -5,31 +5,33 @@
 import React from 'react';
 
 import { Input } from '@dxos/react-ui';
-import { mx } from '@dxos/react-ui-theme';
+import { mx } from '@dxos/ui-theme';
 import { safeParseFloat } from '@dxos/util';
 
-import { InputHeader, type InputProps } from '../Input';
+import { type FormFieldComponentProps, FormFieldLabel } from '../FormFieldComponent';
 
 const gridCols = ['grid-cols-1', 'grid-cols-2', 'grid-cols-3', 'grid-cols-4'];
 
-export const TupleInput = ({
+export const TupleField = ({
   binding,
   type,
-  label,
   readonly,
+  label,
   getStatus,
   getValue,
   onValueChange,
   onBlur,
-}: InputProps & { binding: string[] }) => {
+}: FormFieldComponentProps<Record<string, number>> & {
+  binding: string[];
+}) => {
   const { status, error } = getStatus();
 
   // TODO(burdon): Generalize number/float/string, etc.
-  const values: Record<string, number> = getValue<Record<string, number>>() ?? {};
+  const values: Record<string, number> = getValue() ?? {};
 
   return (
     <Input.Root validationValence={status}>
-      <InputHeader error={error} label={label} />
+      <FormFieldLabel error={error} readonly={readonly} label={label} />
       <div className={mx('grid gap-2', gridCols[binding.length - 1])}>
         {binding.map((prop) => (
           <Input.TextInput
@@ -37,7 +39,12 @@ export const TupleInput = ({
             type='number'
             disabled={!!readonly}
             value={values[prop]}
-            onChange={(event) => onValueChange(type, { ...values, [prop]: safeParseFloat(event.target.value, 0) })}
+            onChange={(event) => {
+              onValueChange(type, {
+                ...values,
+                [prop]: safeParseFloat(event.target.value, 0),
+              });
+            }}
             onBlur={onBlur}
           />
         ))}

package/src/components/Form/fields/index.ts

@@ -0,0 +1,15 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+export * from './ArrayField';
+export * from './BooleanField';
+export * from './GeoPointField';
+export * from './MarkdownField';
+export * from './NumberField';
+export * from './RefField';
+export * from './SelectField';
+export * from './SelectOptionField';
+export * from './TextField';
+export * from './TextAreaField';
+export * from './TupleField';

package/src/components/Form/index.ts

@@ -2,8 +2,7 @@
 // Copyright 2024 DXOS.org
 //
 
-export * from './custom';
-export * from './Defaults';
+export * from './fields';
+
 export * from './Form';
-export * from './FormContext';
-export * from './Input';
+export * from './FormFieldComponent';

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

@@ -0,0 +1,214 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { type Meta, type StoryObj } from '@storybook/react-vite';
+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 { 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 { ObjectPicker } from './ObjectPicker';
+
+faker.seed(1);
+
+const createPerson = () =>
+  Obj.make(Person.Person, {
+    fullName: faker.person.fullName(),
+  });
+
+const omitId = Schema.omit<any, any, ['id']>('id');
+const personSchema = omitId(Person.Person);
+
+// Mock functions for testing
+const mockHandleSelect = fn();
+const mockHandleCreate = fn();
+
+const DefaultStory = () => {
+  const { space } = useClientStory();
+  const [isOpen, setIsOpen] = useState(false);
+
+  // Create sample Person objects
+  useEffect(() => {
+    if (space) {
+      // Create some sample Person objects for testing
+      Array.from({ length: 10 }).forEach(() => {
+        space.db.add(createPerson());
+      });
+    }
+  }, [space]);
+
+  // Get all objects in the space (similar to BoardContainer)
+  const allObjects = useQuery(space?.db, Filter.everything());
+
+  // Map objects to options format expected by ObjectPicker
+  const options = useMemo(
+    () =>
+      allObjects.map((obj) => ({
+        id: obj.id,
+        label: obj.fullName || obj.name || obj.title || obj.id,
+        hue: 'neutral' as const,
+      })),
+    [allObjects],
+  );
+
+  const handleCreateCallback = useCallback(
+    (values: any) => {
+      console.log('[on create]', values);
+      if (!space) return;
+      const newPerson = space.db.add(Obj.make(Person.Person, values));
+      mockHandleCreate(values);
+      return newPerson;
+    },
+    [space],
+  );
+
+  return (
+    <div role='none' className='flex is-96'>
+      <ObjectPicker.Root open={isOpen} onOpenChange={setIsOpen}>
+        <ObjectPicker.Trigger asChild>
+          <Button variant='primary' data-testid='trigger' classNames='is-full'>
+            Select Person
+          </Button>
+        </ObjectPicker.Trigger>
+        <ObjectPicker.Content
+          classNames='popover-card-width'
+          options={options}
+          createSchema={personSchema}
+          createOptionLabel={['create new person label', { ns: osTranslations }]}
+          createOptionIcon='ph--user-plus--regular'
+          createInitialValuePath='fullName'
+          onCreate={handleCreateCallback}
+          onSelect={mockHandleSelect}
+        />
+      </ObjectPicker.Root>
+    </div>
+  );
+};
+
+const meta = {
+  title: 'ui/react-ui-form/ObjectPicker',
+  render: DefaultStory,
+  decorators: [
+    withTheme,
+    withClientProvider({
+      types: [Person.Person],
+      createIdentity: true,
+      createSpace: true,
+    }),
+  ],
+  parameters: {
+    layout: 'centered',
+    controls: { disable: true },
+    translations,
+  },
+} satisfies Meta<typeof DefaultStory>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+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.
+    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.
+    const listbox = await body.findByRole('listbox', undefined, { timeout: 5000 });
+    await expect(listbox).toBeVisible();
+
+    // Find the search input.
+    const searchInput = await body.findByPlaceholderText('Search…');
+    await expect(searchInput).toBeVisible();
+
+    // 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.
+    await userEvent.type(searchInput, 'John');
+
+    // 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');
+    // Note: We expect either fewer results or the same if no John exists
+
+    // Clear search and test selecting a result
+    await userEvent.clear(searchInput);
+
+    // Get the first option and click it
+    const updatedOptions = await body.findAllByRole('option');
+    const firstOption = updatedOptions[0];
+    await expect(firstOption).toBeVisible();
+
+    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.
+    await userEvent.click(triggerButton);
+
+    // 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.
+    const unrelatedTerm = 'ZxyUnrelatedName123';
+    await userEvent.type(newSearchInput, unrelatedTerm);
+
+    // Wait for the create option to appear.
+    await new Promise((resolve) => setTimeout(resolve, 200));
+
+    // 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.
+    await userEvent.click(createOption);
+
+    // 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.
+    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.
+    await expect(mockHandleCreate).toHaveBeenCalledWith({
+      fullName: unrelatedTerm,
+      addresses: [],
+      phoneNumbers: [],
+      emails: [],
+      identities: [],
+      urls: [],
+      fields: [],
+    });
+  },
+};