@dxos/react-ui-form 0.8.4-main.406dc2a → 0.8.4-main.4668b7de9b

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

@@ -0,0 +1,77 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import React, { useCallback } from 'react';
+
+import { Icon, Input, Select, type SelectRootProps } from '@dxos/react-ui';
+import { getStyles } from '@dxos/ui-theme';
+
+import { type FormFieldComponentProps, FormFieldLabel } from '../FormFieldComponent';
+
+export type SelectFieldOptions = FormFieldComponentProps & {
+  options?: Array<{ value: string | number; label?: string; secondaryLabel?: string; icon?: string; iconHue?: string }>;
+};
+
+export const SelectField = ({
+  type,
+  readonly,
+  label,
+  jsonPath,
+  layout,
+  placeholder,
+  options,
+  getStatus,
+  getValue,
+  onValueChange,
+}: SelectFieldOptions) => {
+  const { status, error } = getStatus();
+  const value = getValue() as string | undefined;
+
+  const handleValueChange = useCallback<NonNullable<SelectRootProps['onValueChange']>>(
+    (value) => onValueChange(type, value),
+    [type, onValueChange],
+  );
+
+  if ((readonly || layout === 'static') && value == null) {
+    return null;
+  }
+
+  return (
+    <Input.Root validationValence={status}>
+      {layout !== 'inline' && <FormFieldLabel error={error} readonly={readonly} label={label} path={jsonPath} />}
+      {layout === 'static' ? (
+        <p>{options?.find(({ value: optionValue }) => optionValue === value)?.label ?? String(value)}</p>
+      ) : (
+        <Select.Root value={value} onValueChange={handleValueChange}>
+          {/* TODO(burdon): Placeholder not working? */}
+          <Select.TriggerButton classNames='w-full' disabled={!!readonly} placeholder={placeholder} />
+          <Select.Portal>
+            <Select.Content>
+              <Select.Viewport>
+                {options?.map(({ value, label, secondaryLabel, icon, iconHue }) => (
+                  // NOTE: Numeric values are converted to and from strings.
+                  <Select.Option key={String(value)} value={String(value)}>
+                    <span className='flex items-center flex-row gap-2'>
+                      {icon && <Icon icon={icon} classNames={getIconHueStyles(iconHue)} />}
+                      {label ?? String(value)}
+                      {secondaryLabel && <span className='text-subdued text-xs'>{secondaryLabel}</span>}
+                    </span>
+                  </Select.Option>
+                ))}
+              </Select.Viewport>
+              <Select.Arrow />
+            </Select.Content>
+          </Select.Portal>
+        </Select.Root>
+      )}
+      {layout === 'full' && <Input.DescriptionAndValidation>{error}</Input.DescriptionAndValidation>}
+    </Input.Root>
+  );
+};
+
+const getIconHueStyles = (iconHue?: string): string | undefined => {
+  const styles = iconHue ? getStyles(iconHue) : undefined;
+
+  return styles?.fg;
+};

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

@@ -6,17 +6,17 @@ import { type Meta, type StoryObj } from '@storybook/react-vite';
 import * as Schema from 'effect/Schema';
 import React, { useState } from 'react';
 
-import { type SelectOption, SelectOptionSchema } from '@dxos/echo/internal';
-import { withTheme } from '@dxos/react-ui/testing';
+import { SelectOption } from '@dxos/echo/internal';
+import { withLayout, withTheme } from '@dxos/react-ui/testing';
 
-import { translations } from '../../../translations';
-import { TestLayout, TestPanel } from '../../testing';
-import { Form } from '../Form';
+import { translations } from '#translations';
 
-import { SelectOptionInput } from './SelectOptionsInput';
+import { TestLayout } from '../../testing';
+import { Form } from '../Form';
+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 = () => {
@@ -31,23 +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.Viewport>
+          <Form.Content>
+            <Form.FieldSet />
+            <Form.Actions />
+          </Form.Content>
+        </Form.Viewport>
+      </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],
+  decorators: [withTheme(), withLayout({ layout: 'fullscreen' })],
   parameters: {
     layout: 'fullscreen',
     translations,

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

@@ -9,25 +9,34 @@ 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 } from '@dxos/ui-theme';
 
-import { translationKey } from '../../../translations';
-import { InputHeader, type InputProps } from '../Input';
+import { translationKey } from '#translations';
 
-export const SelectOptionInput = ({ type, label, readonly, getStatus, getValue, onValueChange }: InputProps) => {
+import { type FormFieldComponentProps, FormFieldLabel } from '../FormFieldComponent';
+
+export const SelectOptionField = ({
+  type,
+  readonly,
+  label,
+  jsonPath,
+  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 +97,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,12 +120,12 @@ export const SelectOptionInput = ({ type, label, readonly, getStatus, getValue,
 
   return (
     <Input.Root validationValence={status}>
-      <InputHeader error={error} label={label} />
-      <div role='none'>
+      <FormFieldLabel error={error} readonly={readonly} label={label} path={jsonPath} />
+      <div>
         {options && (
           <List.Root
             items={options}
-            isItem={(item) => true}
+            isItem={(_item) => true}
             onMove={readonly ? undefined : handleMove}
             readonly={!!readonly}
           >
@@ -127,7 +136,7 @@ export const SelectOptionInput = ({ type, label, readonly, getStatus, getValue,
                     <List.Item
                       role='button'
                       item={item}
-                      classNames={[subtleHover, 'flex flex-col cursor-pointer rounded-sm']}
+                      classNames='flex flex-col cursor-pointer rounded-xs dx-hover'
                       aria-expanded={selected === item.id}
                     >
                       <div className='flex items-center'>
@@ -139,32 +148,30 @@ 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)}
                         />
                       </div>
                       {selected === item.id && (
-                        <div className='pli-cardSpacingInline plb-cardSpacingBlock flex flex-col gap-1 density-fine'>
-                          {/* 16px to match drag handle width. */}
-                          <Input.Label classNames='text-xs'>{t('select option label')}</Input.Label>
-                          <div className='grid grid-cols-[1fr_min-content_min-content] gap-1'>
+                        <div className='flex flex-col p-form-padding gap-form-gap dx-density-md'>
+                          <Input.Label classNames='text-sm'>{t('select-option.label')}</Input.Label>
+                          <div className='grid grid-cols-[1fr_min-content_min-content] gap-form-gap'>
                             <Input.TextInput
                               disabled={!!readonly}
-                              placeholder={t('select option label placeholder')}
+                              placeholder={t('select-option-label.placeholder')}
                               ref={selected === item.id ? inputRef : undefined}
                               value={item.title}
                               onChange={handleTitleChange(item.id)}
                               onKeyDown={handleKeyDown}
                               classNames='flex-1'
-                              data-no-submit
                             />
                             <HuePicker disabled={!!readonly} value={item.color} onChange={handleColorChange(item.id)} />
                             <IconButton
                               disabled={!!readonly}
                               icon='ph--trash--fill'
                               iconOnly
-                              label={t('select option delete')}
+                              label={t('select-option-delete.button')}
                               onClick={() => handleDelete(item.id)}
                             />
                           </div>
@@ -176,10 +183,10 @@ export const SelectOptionInput = ({ type, label, readonly, getStatus, getValue,
                 <IconButton
                   variant='ghost'
                   icon='ph--plus--regular'
-                  label={t('select option add')}
+                  label={t('select-option-add.button')}
                   onClick={handleAdd}
                   disabled={!!readonly}
-                  classNames='is-full'
+                  classNames='w-full'
                 />
               </div>
             )}

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={5}
+          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,
+  onBlur,
+  onValueChange,
+  ...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}
+          onBlur={onBlur}
+          onChange={handleChange}
+        />
+      )}
+    </FormFieldWrapper>
+  );
+};

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

@@ -5,39 +5,47 @@
 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,
+  jsonPath,
   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} />
-      <div className={mx('grid gap-2', gridCols[binding.length - 1])}>
+      <FormFieldLabel error={error} readonly={readonly} label={label} path={jsonPath} />
+      <div className={mx('grid gap-form-gap', gridCols[binding.length - 1])}>
         {binding.map((prop) => (
           <Input.TextInput
             key={prop}
             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,17 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+export * from './ArrayField';
+export * from './BooleanField';
+export * from './DateField';
+export * from './GeoPointField';
+export * from './InlineRefField';
+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,10 @@
 // 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';
+export * from './FormTooltipsContext';
+export * from './meta-tags';
+export * from './Layout';

package/src/components/Form/meta-tags.test.ts

@@ -0,0 +1,47 @@
+//
+// Copyright 2026 DXOS.org
+//
+
+import * as Schema from 'effect/Schema';
+import * as SchemaAST from 'effect/SchemaAST';
+import { describe, test } from 'vitest';
+
+import { Obj, Ref, Tag } from '@dxos/echo';
+
+import { META_TAGS_KEY, withMetaTags } from './meta-tags';
+
+// A feed-host schema whose own `tags` field is a `TagIndex` record (tagId -> objectId[]), not an
+// array — mirrors plugin-commerce `Search`, plugin-inbox `Mailbox`, plugin-feed `Subscription`.
+const TagIndexHost = Schema.Struct({
+  name: Schema.String.pipe(Schema.optional),
+  tags: Schema.Record({ key: Schema.String, value: Schema.Array(Obj.ID) }).pipe(Schema.optional),
+});
+
+const propertyNames = (schema: Schema.Schema.AnyNoContext): string[] =>
+  SchemaAST.getPropertySignatures(schema.ast).map((property) => property.name.toString());
+
+describe('withMetaTags', () => {
+  test('keying meta-tags as `tags` collides with a schema-declared `tags` record (regression)', ({ expect }) => {
+    // The pre-fix shape: splice a `tags: Array<Ref<Tag>>` onto a schema that already declares `tags`.
+    // `Schema.extend` cannot merge an array with a record at the same key, hence the companion crash:
+    // "overlapping types at path: [\"tags\"]".
+    expect(() =>
+      Schema.Struct({ tags: Schema.Array(Ref.Ref(Tag.Tag)).pipe(Schema.optional) }).pipe(Schema.extend(TagIndexHost)),
+    ).toThrow(/tags/i);
+  });
+
+  test('splices meta-tags under `_tags` without colliding with a schema-declared `tags`', ({ expect }) => {
+    const schema = withMetaTags(TagIndexHost);
+    const names = propertyNames(schema);
+    expect(names).toContain(META_TAGS_KEY);
+    expect(names).toContain('tags');
+    expect(names).not.toContain('id');
+  });
+
+  test('still splices meta-tags onto a schema with no `tags` field', ({ expect }) => {
+    const Plain = Schema.Struct({ name: Schema.String });
+    const names = propertyNames(withMetaTags(Plain));
+    expect(names).toContain(META_TAGS_KEY);
+    expect(names).toContain('name');
+  });
+});

package/src/components/Form/meta-tags.ts

@@ -0,0 +1,33 @@
+//
+// Copyright 2026 DXOS.org
+//
+
+import * as Schema from 'effect/Schema';
+
+import { Ref, Tag } from '@dxos/echo';
+
+import { omitId } from './Form';
+
+/**
+ * Form-field key for the synthetic meta-tags array spliced into property/create forms.
+ *
+ * An object's tags live in `Obj.getMeta(obj).tags` (off-schema), so the form surfaces them as an
+ * extra field rather than reading the schema. The key is underscore-prefixed so it never collides
+ * with a `tags` field an object schema declares itself — e.g. a `TagIndex` record on a feed host,
+ * whose `tags` is `Record<tagId, objectId[]>`, not an array. Extending such a schema with a `tags`
+ * array threw "overlapping types at path: [\"tags\"]"; the disjoint `_tags` key avoids it. The
+ * human-facing label is restored via the `title` annotation on {@link withMetaTags}.
+ */
+export const META_TAGS_KEY = '_tags';
+
+/**
+ * Splices the synthetic meta-tags array (an object's `meta.tags`, surfaced as {@link Tag} refs) onto
+ * a schema for editing and drops `id`. Keyed by {@link META_TAGS_KEY} so it never collides with a
+ * `tags` field the schema declares itself.
+ */
+export const withMetaTags = (schema: Schema.Schema.AnyNoContext) =>
+  omitId(
+    Schema.Struct({
+      [META_TAGS_KEY]: Schema.Array(Ref.Ref(Tag.Tag)).pipe(Schema.annotations({ title: 'Tags' }), Schema.optional),
+    }).pipe(Schema.extend(schema)),
+  );

package/src/components/ObjectForm/ObjectForm.tsx

@@ -0,0 +1,109 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import React, { useCallback, useMemo } from 'react';
+
+import { Obj, Ref, Tag, Type } from '@dxos/echo';
+import { type JsonPath, splitJsonPath } from '@dxos/echo/internal';
+import { invariant } from '@dxos/invariant';
+import { HuePicker } from '@dxos/react-ui-pickers';
+
+import { translationKey } from '#translations';
+
+import { Form, type FormFieldMap, META_TAGS_KEY, withMetaTags } from '../Form';
+
+export type ObjectFormProps = {
+  type: Type.AnyEntity;
+  object: Obj.Unknown;
+};
+
+const createFieldMap: FormFieldMap = {
+  hue: ({ type, label, layout, getValue, onValueChange }) => {
+    const handleChange = useCallback((nextHue: string) => onValueChange(type, nextHue), [onValueChange, type]);
+    const handleReset = useCallback(() => onValueChange(type, undefined), [onValueChange, type]);
+    return (
+      <>
+        {layout !== 'inline' && <Form.Label label={label} />}
+        <HuePicker value={getValue()} onChange={handleChange} onReset={handleReset} />
+      </>
+    );
+  },
+};
+
+export const ObjectForm = ({ object, type }: ObjectFormProps) => {
+  const db = Obj.getDatabase(object);
+  const meta = Obj.getMeta(object);
+  // `meta.tags` already holds `Ref<Tag>`s (materialized by the database handler).
+  const tags = [...meta.tags];
+  const values = useMemo(() => ({ [META_TAGS_KEY]: tags, ...object }), [object, tags]);
+  const formSchema = useMemo(() => withMetaTags(Type.getSchema(type)), [type]);
+
+  const handleCreate = useCallback((type: Type.AnyEntity, values: any) => {
+    invariant(db);
+    invariant(Type.isObject(type));
+    const newObject = db.add(Obj.make(type, values));
+    if (Obj.instanceOf(Tag.Tag, newObject)) {
+      Obj.update(object, (object) => {
+        Obj.getMeta(object).tags = [...Obj.getMeta(object).tags, Ref.make(newObject)];
+      });
+    }
+  }, []);
+
+  // TODO(wittjosiah): Use FormRootProps type.
+  const handleChange = useCallback(
+    (
+      { [META_TAGS_KEY]: metaTags, ...values }: any,
+      { isValid, changed }: { isValid: boolean; changed: Record<JsonPath, boolean> },
+    ) => {
+      if (!isValid) {
+        return;
+      }
+
+      const changedPaths = Object.keys(changed).filter((path) => changed[path as JsonPath]) as JsonPath[];
+
+      // Handle meta-tags separately using Obj.update.
+      const hasTagsChange = changedPaths.some((path) => splitJsonPath(path)[0] === META_TAGS_KEY);
+      if (hasTagsChange) {
+        Obj.update(object, (object) => {
+          // Copy so later in-place form mutations don't bypass the `Obj.update` boundary.
+          Obj.getMeta(object).tags = Array.isArray(metaTags) ? [...(metaTags as Ref.Ref<Tag.Tag>[])] : [];
+        });
+      }
+
+      // Handle other property changes.
+      const nonTagPaths = changedPaths.filter((path) => splitJsonPath(path)[0] !== META_TAGS_KEY);
+      if (nonTagPaths.length > 0) {
+        Obj.update(object, () => {
+          for (const path of nonTagPaths) {
+            const parts = splitJsonPath(path);
+            const value = Obj.getValue(values, parts);
+            Obj.setValue(object, parts, value);
+          }
+        });
+      }
+    },
+    [object],
+  );
+
+  return (
+    <Form.Root
+      schema={formSchema}
+      defaultValues={values}
+      createTypename={Type.getTypename(Tag.Tag)}
+      createOptionIcon='ph--plus--regular'
+      createOptionLabel={['add-tag.label', { ns: translationKey }]}
+      createInitialValuePath='label'
+      createFieldMap={createFieldMap}
+      db={db}
+      onValuesChanged={handleChange}
+      onCreate={handleCreate}
+    >
+      <Form.Viewport>
+        <Form.Content>
+          <Form.FieldSet />
+        </Form.Content>
+      </Form.Viewport>
+    </Form.Root>
+  );
+};

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

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