@dxos/react-ui-form 0.8.4-main.70d3990 → 0.8.4-main.74a063c4e0

package/src/components/ObjectPicker/ObjectPicker.tsx

@@ -3,24 +3,31 @@
 //
 
 import type * as Schema from 'effect/Schema';
-import React, { type KeyboardEvent, type MouseEvent, forwardRef, useCallback, useMemo, useState } from 'react';
+import React, { type KeyboardEvent, forwardRef, useCallback, useState } from 'react';
 
-import { Icon, Popover, type ThemedClassName, useTranslation } from '@dxos/react-ui';
-import { Combobox } from '@dxos/react-ui-searchlist';
+import { type Palette, Popover, type ThemedClassName, useTranslation } from '@dxos/react-ui';
+import { Combobox, useSearchListInput, useSearchListResults } from '@dxos/react-ui-search';
 
-import { type QueryTag } from '../../hooks';
 import { translationKey } from '../../translations';
 import { Form } from '../Form';
+import { type FormFieldMap } from '../Form/FormFieldComponent';
+
+export type RefOption = {
+  id: string;
+  label: string;
+  hue?: Palette;
+};
 
 export type ObjectPickerContentProps = ThemedClassName<{
-  options: QueryTag[];
+  options: RefOption[];
   selectedIds?: string[];
-  createSchema?: Schema.Schema.AnyNoContext;
   createOptionLabel?: [string, { ns: string }];
   createOptionIcon?: string;
+  createSchema?: Schema.Schema.AnyNoContext;
   createInitialValuePath?: string;
-  onSelect: (id: string) => void;
+  createFieldMap?: FormFieldMap;
   onCreate?: (values: any) => void;
+  onSelect: (id: string) => void;
 }>;
 
 const ObjectPickerContent = forwardRef<HTMLDivElement, ObjectPickerContentProps>(
@@ -32,46 +39,35 @@ const ObjectPickerContent = forwardRef<HTMLDivElement, ObjectPickerContentProps>
       createOptionLabel,
       createOptionIcon,
       createInitialValuePath,
+      createFieldMap,
       onSelect,
       onCreate,
       ...props
     },
-    ref,
+    forwardedRef,
   ) => {
     const { t } = useTranslation(translationKey);
-
-    const [searchString, setSearchString] = useState('');
     const [showForm, setShowForm] = useState(false);
+    const [formInitialValue, setFormInitialValue] = useState<string>('');
+
+    const { results, handleSearch } = useSearchListResults({
+      items: options,
+    });
 
     const handleFormSave = useCallback(
       (values: any) => {
         onCreate?.(values);
         setShowForm(false);
-        setSearchString('');
+        setFormInitialValue('');
       },
       [onCreate],
     );
 
     const handleFormCancel = useCallback(() => {
       setShowForm(false);
-      setSearchString('');
+      setFormInitialValue('');
     }, []);
 
-    // TODO(thure): The following click and keydown handlers are necessary because `onSelect` is called after the
-    //  Popover is already closed. Augment/refactor CmdK, if possible, to facilitate stopping event default
-    //  and propagation.
-
-    const handleClick = useCallback(
-      (event: MouseEvent) => {
-        if (createSchema && (event.target as HTMLElement).closest('[data-value="__create__"]')) {
-          event.stopPropagation();
-          event.preventDefault();
-          setShowForm(true);
-        }
-      },
-      [createSchema],
-    );
-
     const handleKeyDown = useCallback(
       (event: KeyboardEvent) => {
         if (
@@ -83,78 +79,107 @@ const ObjectPickerContent = forwardRef<HTMLDivElement, ObjectPickerContentProps>
         ) {
           event.stopPropagation();
           event.preventDefault();
+          // Get the current query from the input element
+          const input = (event.currentTarget as HTMLElement).querySelector('input[type="text"]') as HTMLInputElement;
+          const currentQuery = input?.value || '';
+          setFormInitialValue(currentQuery);
           setShowForm(true);
         }
       },
       [createSchema],
     );
 
-    const labelById = useMemo(
-      () =>
-        options.reduce((acc: Record<string, string>, option) => {
-          acc[option.id.toLowerCase()] = option.label.toLowerCase();
-          return acc;
-        }, {}),
-      [options],
-    );
-
-    return (
-      <Combobox.Content
-        {...props}
-        ref={ref}
-        filter={(value, search) => (value === '__create__' || labelById[value]?.includes(search.toLowerCase()) ? 1 : 0)}
-        onClickCapture={handleClick}
-        onKeyDownCapture={handleKeyDown}
-      >
-        {showForm && createSchema ? (
+    if (showForm && createSchema) {
+      return (
+        <Combobox.Content {...props} onSearch={handleSearch} onKeyDownCapture={handleKeyDown} ref={forwardedRef}>
           <Popover.Viewport>
-            <Form
+            <Form.Root
+              testId='create-referenced-object-form'
               schema={createSchema}
-              values={createInitialValuePath ? { [createInitialValuePath]: searchString } : {}}
+              defaultValues={createInitialValuePath ? { [createInitialValuePath]: formInitialValue } : {}}
+              fieldMap={createFieldMap}
               onSave={handleFormSave}
               onCancel={handleFormCancel}
-              testId='create-referenced-object-form'
-            />
+            >
+              <Form.Viewport>
+                <Form.Content>
+                  <Form.FieldSet />
+                  <Form.Actions />
+                </Form.Content>
+              </Form.Viewport>
+            </Form.Root>
           </Popover.Viewport>
-        ) : (
-          <>
-            <Combobox.Input
-              placeholder={t('ref field combobox input placeholder')}
-              value={searchString}
-              onValueChange={setSearchString}
-              autoFocus
+          <Combobox.Arrow />
+        </Combobox.Content>
+      );
+    }
+
+    return (
+      <Combobox.Content {...props} onSearch={handleSearch} onKeyDownCapture={handleKeyDown} ref={forwardedRef}>
+        <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'
+            />
+          ))}
+          {createSchema && onCreate && (
+            <CreateItem
+              createOptionLabel={createOptionLabel}
+              createOptionIcon={createOptionIcon ?? 'ph--plus--regular'}
+              onCreateItemSelect={(query: string) => {
+                setFormInitialValue(query);
+                setShowForm(true);
+              }}
             />
-            <Combobox.List>
-              {options.map((option) => (
-                <Combobox.Item
-                  key={option.id}
-                  value={option.id}
-                  onSelect={() => onSelect(option.id)}
-                  classNames='flex items-center gap-2'
-                >
-                  <span className='grow'>{option.label}</span>
-                  {selectedIds?.includes(option.id) && <Icon icon='ph--check--regular' />}
-                </Combobox.Item>
-              ))}
-              {searchString.length > 0 && createOptionLabel && createOptionIcon && createSchema && onCreate && (
-                <Combobox.Item value='__create__' classNames='flex items-center gap-2'>
-                  <Icon icon={createOptionIcon} />
-                  {t(createOptionLabel[0], { ns: createOptionLabel[1].ns, text: searchString })}
-                </Combobox.Item>
-              )}
-            </Combobox.List>
-          </>
-        )}
+          )}
+        </Combobox.List>
         <Combobox.Arrow />
       </Combobox.Content>
     );
   },
 );
 
-ObjectPickerContent.displayName = 'ObjectPickerContent';
+const CreateItem = ({
+  createOptionLabel,
+  createOptionIcon,
+  onCreateItemSelect,
+}: {
+  createOptionLabel?: [string, { ns: string }];
+  createOptionIcon: string;
+  onCreateItemSelect: (query: string) => void;
+}) => {
+  const { t } = useTranslation(translationKey);
+  const { query } = useSearchListInput();
+
+  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,
+  Portal: Combobox.Portal,
   Trigger: Combobox.Trigger,
   VirtualTrigger: Combobox.VirtualTrigger,
   Content: ObjectPickerContent,

package/src/components/Settings/Settings.stories.tsx

@@ -0,0 +1,55 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import { type Meta, type StoryObj } from '@storybook/react-vite';
+import React from 'react';
+
+import { random } from '@dxos/random';
+import { Button, Input } from '@dxos/react-ui';
+import { withLayout, withTheme } from '@dxos/react-ui/testing';
+
+import { translations } from '../../translations';
+import { Settings } from './Settings';
+
+random.seed(132);
+
+const DefaultStory = () => {
+  return (
+    <Settings.Viewport>
+      <Settings.Section title='Settings' description={random.lorem.paragraphs(1)}>
+        <Settings.Item title={random.lorem.sentence(2)} description={random.lorem.paragraphs(1)}>
+          <Input.TextInput placeholder='Input' />
+        </Settings.Item>
+        <Settings.Item title={random.lorem.sentence(2)} description={random.lorem.paragraphs(2)}>
+          <Input.Switch />
+        </Settings.Item>
+        <Settings.Item title={random.lorem.sentence(3)} description={random.lorem.paragraphs(2)}>
+          <Button>Test</Button>
+        </Settings.Item>
+      </Settings.Section>
+      <Settings.Section title='Panel Example'>
+        <Settings.Panel>
+          <h3 className='text-lg mb-2'>Members</h3>
+          <p className='text-description'>Content inside a panel.</p>
+        </Settings.Panel>
+      </Settings.Section>
+    </Settings.Viewport>
+  );
+};
+
+const meta = {
+  title: 'ui/react-ui-form/Settings',
+  render: DefaultStory,
+  decorators: [withTheme(), withLayout({ layout: 'fullscreen' })],
+  parameters: {
+    layout: 'fullscreen',
+    translations,
+  },
+} satisfies Meta;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};

package/src/components/Settings/Settings.tsx

@@ -0,0 +1,129 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import React, { type PropsWithChildren } from 'react';
+
+import { Input, type Label, ScrollArea, type ThemedClassName, toLocalizedString, useTranslation } from '@dxos/react-ui';
+import { composable, composableProps, mx } from '@dxos/ui-theme';
+
+import { translationKey } from '../../translations';
+
+const SETTINGS_ROOT_NAME = 'Settings.Root';
+const SETTINGS_VIEWPORT_NAME = 'Settings.Viewport';
+const SETTINGS_SECTION_NAME = 'Settings.Section';
+const SETTINGS_PANEL_NAME = 'Settings.Panel';
+const SETTINGS_ITEM_NAME = 'Settings.Item';
+
+//
+// Root (headless — no styling, no scroll).
+//
+
+type SettingsRootProps = ThemedClassName<PropsWithChildren>;
+
+const SettingsRoot = ({ children, classNames }: SettingsRootProps) => {
+  return <div className={mx('flex flex-col gap-2', classNames)}>{children}</div>;
+};
+
+SettingsRoot.displayName = SETTINGS_ROOT_NAME;
+
+//
+// Viewport (scroll area + padding + document layout).
+//
+
+const SettingsViewport = composable<HTMLDivElement>(({ children, ...props }, forwardedRef) => {
+  return (
+    <ScrollArea.Root {...composableProps(props)} orientation='vertical' centered thin ref={forwardedRef}>
+      <ScrollArea.Viewport classNames='px-4 pointer-coarse:px-2'>
+        <div role='none' className='dx-document flex flex-col gap-2 py-4'>
+          {children}
+        </div>
+      </ScrollArea.Viewport>
+    </ScrollArea.Root>
+  );
+});
+
+SettingsViewport.displayName = SETTINGS_VIEWPORT_NAME;
+
+//
+// Section (title + optional description + children with spacing).
+//
+
+type SettingsSectionProps = PropsWithChildren<{
+  title: Label;
+  description?: Label;
+}>;
+
+const SettingsSection = ({ title, description, children }: SettingsSectionProps) => {
+  const { t } = useTranslation(translationKey);
+  return (
+    <>
+      <h2 className='px-trim-md mt-trim-md text-xl'>{toLocalizedString(title, t)}</h2>
+      {description && <p className='px-trim-md text-description'>{toLocalizedString(description, t)}</p>}
+      <div className='w-full pt-trim-md space-y-trim-md'>{children}</div>
+    </>
+  );
+};
+
+SettingsSection.displayName = SETTINGS_SECTION_NAME;
+
+//
+// Panel (bordered card container).
+//
+
+type SettingsPanelProps = ThemedClassName<PropsWithChildren>;
+
+const SettingsPanel = ({ classNames, children }: SettingsPanelProps) => {
+  return (
+    <div role='none' className={mx('flex flex-col gap-3 p-trim-md border border-separator rounded-sm', classNames)}>
+      {children}
+    </div>
+  );
+};
+
+SettingsPanel.displayName = SETTINGS_PANEL_NAME;
+
+//
+// Item (label + optional description + control, proper label semantics).
+//
+
+type SettingsItemProps = PropsWithChildren<{
+  title: Label;
+  description?: Label;
+}>;
+
+const SettingsItem = ({ title, description = '', children }: SettingsItemProps) => {
+  const { t } = useTranslation(translationKey);
+
+  return (
+    <Input.Root>
+      <SettingsPanel classNames='grid grid-cols-1 md:grid-cols-[1fr_1fr] gap-x-trim-lg gap-y-0'>
+        <Input.Label classNames='pb-trim-md text-base-surface-text text-lg md:col-span-2'>
+          {toLocalizedString(title, t)}
+        </Input.Label>
+        <Input.DescriptionAndValidation>
+          <Input.Description classNames='text-base text-description'>
+            {toLocalizedString(description, t)}
+          </Input.Description>
+        </Input.DescriptionAndValidation>
+        <div role='none' className='text-end py-1'>
+          {children}
+        </div>
+      </SettingsPanel>
+    </Input.Root>
+  );
+};
+
+SettingsItem.displayName = SETTINGS_ITEM_NAME;
+
+//
+// Settings
+//
+
+export const Settings = {
+  Root: SettingsRoot,
+  Viewport: SettingsViewport,
+  Section: SettingsSection,
+  Panel: SettingsPanel,
+  Item: SettingsItem,
+};

package/src/components/{ControlSection → Settings}/index.ts

@@ -2,4 +2,4 @@
 // Copyright 2025 DXOS.org
 //
 
-export * from './ControlSection';
+export * from './Settings';

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

@@ -6,25 +6,25 @@ 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 QueryAST, Tag, Type } from '@dxos/echo';
-import { type EchoSchema, Format } from '@dxos/echo/internal';
+import { DXN, Filter, JsonSchema, Obj, Query, type QueryAST, Tag, Type } from '@dxos/echo';
+import { type View } from '@dxos/echo';
+import { type EchoSchema, Format, type Mutable } from '@dxos/echo/internal';
 import { useQuery } from '@dxos/react-client/echo';
-import { useClientProvider, withClientProvider } from '@dxos/react-client/testing';
+import { useClientStory, withClientProvider } from '@dxos/react-client/testing';
 import { useAsyncEffect } from '@dxos/react-ui';
-import { withTheme } from '@dxos/react-ui/testing';
-import { type ProjectionModel, View, getTypenameFromQuery } from '@dxos/schema';
-import { Employer, Organization, Person, Project } from '@dxos/types';
+import { withLayout, withTheme } from '@dxos/react-ui/testing';
+import { type ProjectionModel, ViewModel, getTypenameFromQuery } from '@dxos/schema';
+import { Employer, Organization, Person, Pipeline } from '@dxos/types';
 
 import { translations } from '../../translations';
-import { TestLayout, TestPanel, VIEW_EDITOR_DEBUG_SYMBOL } from '../testing';
-
+import { TestLayout, 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: Pipeline.Pipeline.typename, label: 'Project' },
   { value: Employer.Employer.typename, label: 'Employer' },
 ];
 
@@ -35,15 +35,15 @@ export type ViewEditorDebugObjects = {
   projection: ProjectionModel;
 };
 
-type StoryProps = Pick<ViewEditorProps, 'readonly' | 'mode'>;
+type DefaultStoryProps = Pick<ViewEditorProps, 'readonly' | 'mode'>;
 
-const DefaultStory = (props: StoryProps) => {
-  const { space } = useClientProvider();
+const DefaultStory = (props: DefaultStoryProps) => {
+  const { space } = useClientStory();
   const [schema, setSchema] = useState<EchoSchema>();
   const [view, setView] = useState<View.View>();
   const projectionRef = useRef<ProjectionModel>(null);
 
-  const tags = useQuery(space, Filter.type(Tag.Tag));
+  const tags = useQuery(space?.db, Filter.type(Tag.Tag));
 
   useAsyncEffect(async () => {
     if (space) {
@@ -52,8 +52,8 @@ const DefaultStory = (props: StoryProps) => {
         email: Format.Email,
         salary: Format.Currency(),
       }).pipe(
-        Type.Obj({
-          typename: 'example.com/type/Test',
+        Type.object({
+          typename: 'com.example.type.test',
           version: '0.1.0',
         }),
       );
@@ -63,17 +63,17 @@ const DefaultStory = (props: StoryProps) => {
         description: Schema.String,
         completed: Schema.Boolean,
       }).pipe(
-        Type.Obj({
-          typename: 'example.com/type/Alternate',
+        Type.object({
+          typename: 'com.example.type.alternate',
           version: '0.1.0',
         }),
       );
 
       const [testSchema] = await space.db.schemaRegistry.register([TestSchema, AlternateSchema]);
-      const view = View.make({
+      const view = ViewModel.make({
         name: 'Test',
         query: Query.select(Filter.type(TestSchema)),
-        jsonSchema: Type.toJsonSchema(TestSchema),
+        jsonSchema: JsonSchema.toJsonSchema(TestSchema),
       });
 
       setSchema(testSchema);
@@ -89,8 +89,10 @@ const DefaultStory = (props: StoryProps) => {
 
       if (props.mode === 'tag') {
         const queue = target && DXN.tryParse(target) ? target : undefined;
-        const query = queue ? Query.fromAst(newQuery).options({ queues: [queue] }) : Query.fromAst(newQuery);
-        view.query.ast = query.ast;
+        const query = queue ? Query.fromAst(newQuery).from({ queues: [queue] }) : Query.fromAst(newQuery);
+        Obj.change(view, (obj) => {
+          obj.query.ast = query.ast as Mutable<typeof query.ast>;
+        });
 
         const typename = getTypenameFromQuery(query.ast);
         const [newSchema] = await space.db.schemaRegistry.query({ typename }).run();
@@ -98,14 +100,18 @@ const DefaultStory = (props: StoryProps) => {
           return;
         }
 
-        const newView = View.make({
+        const newView = ViewModel.make({
           query,
           jsonSchema: newSchema.jsonSchema,
         });
-        view.projection = Obj.getSnapshot(newView).projection;
+        Obj.change(view, (obj) => {
+          obj.projection = Obj.getSnapshot(newView).projection as Mutable<typeof obj.projection>;
+        });
         setSchema(() => newSchema);
       } else {
-        view.query.ast = newQuery;
+        Obj.change(view, (obj) => {
+          obj.query.ast = newQuery as Mutable<typeof newQuery>;
+        });
         schema.updateTypename(getTypenameFromQuery(newQuery));
       }
     },
@@ -140,20 +146,18 @@ const DefaultStory = (props: StoryProps) => {
 
   return (
     <TestLayout json={json}>
-      <TestPanel>
-        <ViewEditor
-          ref={projectionRef}
-          schema={schema}
-          view={view}
-          registry={space?.db.schemaRegistry}
-          mode={props.mode}
-          readonly={props.readonly}
-          types={types}
-          tags={tags}
-          onQueryChanged={updateViewQuery}
-          onDelete={handleDelete}
-        />
-      </TestPanel>
+      <ViewEditor
+        ref={projectionRef}
+        schema={schema}
+        view={view}
+        registry={space?.db.schemaRegistry}
+        mode={props.mode}
+        readonly={props.readonly}
+        types={types}
+        tags={tags}
+        onQueryChanged={updateViewQuery}
+        onDelete={handleDelete}
+      />
     </TestLayout>
   );
 };
@@ -171,7 +175,8 @@ const meta = {
         space.db.add(Tag.make({ label: 'New' }));
       },
     }),
-    withTheme,
+    withTheme(),
+    withLayout({ layout: 'fullscreen' }),
   ],
   parameters: {
     layout: 'fullscreen',

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

@@ -6,11 +6,11 @@ import { composeStories } from '@storybook/react';
 import { cleanup, fireEvent, screen, waitFor } from '@testing-library/react';
 import { afterEach, describe, expect, test } from 'vitest';
 
+import { View } from '@dxos/echo';
 import { EchoSchema, isInstanceOf } from '@dxos/echo/internal';
-import { ProjectionModel, View } from '@dxos/schema';
+import { ProjectionModel } from '@dxos/schema';
 
 import { VIEW_EDITOR_DEBUG_SYMBOL } from '../testing';
-
 import * as stories from './ViewEditor.stories';
 import { type ViewEditorDebugObjects } from './ViewEditor.stories';
 
@@ -54,7 +54,7 @@ describe('ViewEditor', () => {
     const nameField = screen.getByText('name');
     fireEvent.click(nameField);
 
-    const fieldInput = screen.getByPlaceholderText('Field name.');
+    const fieldInput = screen.getByPlaceholderText('Property name');
     fireEvent.change(fieldInput, { target: { value: 'new_property' } });
 
     fireEvent.click(screen.getByTestId('save-button'));
@@ -89,12 +89,12 @@ describe('ViewEditor', () => {
     await Default.run();
     await waitForViewEditor();
 
-    // Click the add property button.
+    // Click the add property button. The new field is auto-expanded by handleAdd.
     const addButton = screen.getByText('Add property');
     fireEvent.click(addButton);
 
     // Fill out the property field.
-    const fieldInput = screen.getByPlaceholderText('Field name.');
+    const fieldInput = screen.getByPlaceholderText('Property name');
     fireEvent.change(fieldInput, { target: { value: 'added_property' } });
 
     // Click the format combo box and select the first option.