@dxos/react-ui-form 0.8.1 → 0.8.2-main.2f9c567

package/src/components/Form/FormContent.tsx

@@ -1,12 +1,11 @@
 //
-// Copyright 2024 DXOS.org
+// Copyright 2025 DXOS.org
 //
 
-import { pipe } from 'effect';
+import { Schema, SchemaAST, pipe } from 'effect';
 import { capitalize } from 'effect/String';
 import React, { useMemo } from 'react';
 
-import { AST, S } from '@dxos/echo-schema';
 import { createJsonPath, findNode, getDiscriminatedType, isDiscriminatedUnion } from '@dxos/effect';
 import { mx } from '@dxos/react-ui-theme';
 import { getSchemaProperties, type SchemaProperty } from '@dxos/schema';
@@ -17,29 +16,29 @@ import { SelectInput } from './Defaults';
 import { type ComponentLookup } from './Form';
 import { useInputProps, useFormValues } from './FormContext';
 import { type InputComponent } from './Input';
+import { RefField, type QueryRefOptions } from './RefField';
 import { getInputComponent } from './factory';
 
-export type FormContentProps = {
-  schema: S.Schema.All;
-  path?: (string | number)[];
-  filter?: (props: SchemaProperty<any>[]) => SchemaProperty<any>[];
-  sort?: string[];
-  readonly?: boolean;
-  lookupComponent?: ComponentLookup;
-  Custom?: Partial<Record<string, InputComponent>>;
-};
-
 export type FormFieldProps = {
   property: SchemaProperty<any>;
   path?: (string | number)[];
   readonly?: boolean;
   /** Used to indicate if input should be presented inline (e.g. for array items). */
   inline?: boolean;
+  onQueryRefOptions?: QueryRefOptions;
   lookupComponent?: ComponentLookup;
   Custom?: Partial<Record<string, InputComponent>>;
 };
 
-export const FormField = ({ property, path, readonly, inline, lookupComponent, Custom }: FormFieldProps) => {
+export const FormField = ({
+  property,
+  path,
+  readonly,
+  inline,
+  onQueryRefOptions,
+  lookupComponent,
+  Custom,
+}: FormFieldProps) => {
   const inputProps = useInputProps(path);
   const { ast, name, type, format, title, description, options, examples, array } = property;
 
@@ -51,7 +50,7 @@ export const FormField = ({ property, path, readonly, inline, lookupComponent, C
 
   const FoundComponent = lookupComponent?.({
     prop: name,
-    schema: S.make(ast),
+    schema: Schema.make(ast),
     inputProps: {
       type,
       format,
@@ -120,17 +119,40 @@ export const FormField = ({ property, path, readonly, inline, lookupComponent, C
     );
   }
 
+  // TODO(ZaymonFC): Extract this to it's own component.
+  if (format === 'ref') {
+    return (
+      <RefField
+        ast={ast}
+        type={type}
+        label={label}
+        readonly={readonly}
+        placeholder={placeholder}
+        inline={inline}
+        onQueryRefOptions={onQueryRefOptions}
+        inputProps={inputProps}
+      />
+    );
+  }
+
   if (type === 'object') {
     const baseNode = findNode(ast, isDiscriminatedUnion);
     const typeLiteral = baseNode
       ? getDiscriminatedType(baseNode, inputProps.getValue() as any)
-      : findNode(ast, AST.isTypeLiteral);
+      : findNode(ast, SchemaAST.isTypeLiteral);
 
     if (typeLiteral) {
       return (
         <div role='none'>
-          {!inline && <div>{label}</div>}
-          <FormFields schema={S.make(typeLiteral)} path={path} readonly={readonly} Custom={Custom} />
+          {!inline && <h3 className='text-lg mbs-2 mbe-1'>{label}</h3>}
+          <FormFields
+            schema={Schema.make(typeLiteral)}
+            path={path}
+            readonly={readonly}
+            onQueryRefOptions={onQueryRefOptions}
+            Custom={Custom}
+            lookupComponent={lookupComponent}
+          />
         </div>
       );
     }
@@ -139,7 +161,27 @@ export const FormField = ({ property, path, readonly, inline, lookupComponent, C
   return null;
 };
 
-export const FormFields = ({ schema, path, filter, sort, readonly, lookupComponent, Custom }: FormContentProps) => {
+export type FormContentProps = {
+  schema: Schema.Schema.All;
+  path?: (string | number)[];
+  filter?: (props: SchemaProperty<any>[]) => SchemaProperty<any>[];
+  sort?: string[];
+  readonly?: boolean;
+  onQueryRefOptions?: QueryRefOptions;
+  lookupComponent?: ComponentLookup;
+  Custom?: Partial<Record<string, InputComponent>>;
+};
+
+export const FormFields = ({
+  schema,
+  path,
+  filter,
+  sort,
+  readonly,
+  onQueryRefOptions,
+  lookupComponent,
+  Custom,
+}: FormContentProps) => {
   const values = useFormValues(path);
 
   const properties = useMemo(() => {
@@ -159,6 +201,7 @@ export const FormFields = ({ schema, path, filter, sort, readonly, lookupCompone
               property={property}
               path={[...(path ?? []), property.name]}
               readonly={readonly}
+              onQueryRefOptions={onQueryRefOptions}
               lookupComponent={lookupComponent}
               Custom={Custom}
             />

package/src/components/Form/FormContext.tsx

@@ -2,7 +2,15 @@
 // Copyright 2025 DXOS.org
 //
 
-import React, { createContext, useContext, useEffect, useMemo, type FocusEvent, type PropsWithChildren } from 'react';
+import React, {
+  createContext,
+  type RefObject,
+  useContext,
+  useEffect,
+  useMemo,
+  type FocusEvent,
+  type PropsWithChildren,
+} from 'react';
 
 import { raise } from '@dxos/debug';
 import { type BaseObject, getValue } from '@dxos/echo-schema';
@@ -53,7 +61,7 @@ export const FormProvider = ({
   ...formOptions
 }: PropsWithChildren<
   FormOptions<any> & {
-    formRef?: React.RefObject<HTMLDivElement>;
+    formRef?: RefObject<HTMLDivElement>;
     autoSave?: boolean;
   }
 >) => {

package/src/components/Form/RefField.tsx

@@ -0,0 +1,152 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { type SchemaAST } from 'effect';
+import React, { useEffect, useState } from 'react';
+
+import {
+  Expando,
+  getTypeAnnotation,
+  Ref,
+  ReferenceAnnotationId,
+  type ReferenceAnnotationValue,
+  type TypeAnnotation,
+} from '@dxos/echo-schema';
+import { findAnnotation, type SimpleType } from '@dxos/effect';
+import { DXN } from '@dxos/keys';
+import { refFromDXN } from '@dxos/live-object';
+import { log } from '@dxos/log';
+import { type MaybePromise } from '@dxos/util';
+
+import { SelectInput, TextInput } from './Defaults';
+import { type FormInputStateProps } from './FormContext';
+
+export type QueryRefOptions = (type: TypeAnnotation) => MaybePromise<{ dxn: DXN; label?: string }[]>;
+
+type RefFieldProps = {
+  ast: SchemaAST.AST;
+  type: SimpleType;
+  label: string;
+  readonly?: boolean;
+  placeholder?: string;
+  inline?: boolean;
+  onQueryRefOptions?: QueryRefOptions;
+  inputProps: FormInputStateProps;
+};
+
+export const RefField = ({
+  ast,
+  type,
+  label,
+  readonly,
+  placeholder,
+  inline,
+  onQueryRefOptions,
+  inputProps,
+}: RefFieldProps) => {
+  const { getValue, onValueChange, ...restInputProps } = inputProps;
+  const refTypeInfo = findAnnotation<ReferenceAnnotationValue>(ast, ReferenceAnnotationId);
+  const [refOptions, setRefOptions] = useState<Array<{ value: string; label?: string }>>([]);
+  const [loading, setLoading] = useState(false);
+
+  useEffect(() => {
+    if (!refTypeInfo || !onQueryRefOptions) {
+      return;
+    }
+
+    const fetchOptions = async () => {
+      setLoading(true);
+      try {
+        const options = await onQueryRefOptions(refTypeInfo);
+        setRefOptions(
+          options.map((option) => ({
+            label: option.label,
+            value: option.dxn.toString(),
+          })),
+        );
+      } catch (error) {
+        log.error('Failed to fetch ref options:', error);
+        setRefOptions([]);
+      } finally {
+        setLoading(false);
+      }
+    };
+
+    void fetchOptions();
+  }, [refTypeInfo, onQueryRefOptions]);
+
+  if (!refTypeInfo) {
+    return null;
+  }
+
+  // If ref type is expando, fall back to taking a DXN in string format.
+  if (refTypeInfo.typename === getTypeAnnotation(Expando)?.typename || !onQueryRefOptions) {
+    const handleOnValueChange = (_type: any, dxnString: string) => {
+      const dxn = DXN.tryParse(dxnString);
+      if (dxn) {
+        onValueChange?.('object', refFromDXN(dxn));
+      } else if (dxnString === '') {
+        onValueChange?.('object', undefined);
+      } else {
+        onValueChange?.('string', dxnString);
+      }
+    };
+
+    const handleGetValue = () => {
+      const formValue = getValue();
+      if (typeof formValue === 'string') {
+        return formValue;
+      }
+      if (Ref.isRef(formValue)) {
+        return formValue.dxn.toString();
+      }
+
+      return undefined;
+    };
+
+    return (
+      <TextInput
+        type={type}
+        label={label}
+        disabled={readonly}
+        placeholder={placeholder}
+        inputOnly={inline}
+        getValue={handleGetValue as <V>() => V | undefined}
+        onValueChange={handleOnValueChange}
+        {...restInputProps}
+      />
+    );
+  }
+
+  const handleGetValue = () => {
+    const formValue = getValue();
+
+    if (Ref.isRef(formValue)) {
+      return formValue.dxn.toString();
+    }
+
+    return undefined;
+  };
+
+  const handleValueChanged = (_type: any, dxnString: string) => {
+    const dxn = DXN.parse(dxnString);
+    const ref = refFromDXN(dxn);
+
+    onValueChange('object', ref);
+  };
+
+  return (
+    <SelectInput
+      type={type}
+      label={label}
+      disabled={readonly || loading}
+      placeholder={loading ? 'Loading options...' : placeholder}
+      inputOnly={inline}
+      getValue={handleGetValue as <V>() => V | undefined}
+      onValueChange={handleValueChanged}
+      options={refOptions}
+      {...restInputProps}
+    />
+  );
+};

package/src/components/Form/custom/GeoPointInput.tsx

@@ -2,7 +2,7 @@
 // Copyright 2024 DXOS.org
 //
 
-import React, { useCallback, useState, useEffect, useMemo } from 'react';
+import React, { useCallback, useState, useEffect, useMemo, type ChangeEvent } from 'react';
 
 import { type GeoPoint, GeoLocation } from '@dxos/echo-schema';
 import { Input, useTranslation } from '@dxos/react-ui';
@@ -28,7 +28,7 @@ export const GeoPointInput = ({ type, label, disabled, getStatus, getValue, onVa
 
   const handleCoordinateChange = useCallback(
     (coordinateType: keyof Pick<GeoLocation, 'longitude' | 'latitude'>, setText: (text: string) => void) =>
-      (event: React.ChangeEvent<HTMLInputElement>) => {
+      (event: ChangeEvent<HTMLInputElement>) => {
         const inputText = event.target.value;
         setText(inputText);
         if (inputText !== '' && inputText !== '-') {

package/src/components/Form/custom/SelectOptionsInput.stories.tsx

@@ -5,9 +5,10 @@
 import '@dxos-theme';
 
 import { type Meta, type StoryObj } from '@storybook/react';
+import { Schema } from 'effect';
 import React, { useState } from 'react';
 
-import { S, SelectOptionSchema, type SelectOption } from '@dxos/echo-schema';
+import { SelectOptionSchema, type SelectOption } from '@dxos/echo-schema';
 import { withLayout, withTheme } from '@dxos/storybook-utils';
 
 import { SelectOptionInput } from './SelectOptionsInput';
@@ -15,9 +16,9 @@ import translations from '../../../translations';
 import { TestLayout, TestPanel } from '../../testing';
 import { Form } from '../Form';
 
-const schema = S.Struct({
-  options: S.Array(SelectOptionSchema).pipe(S.mutable),
-}).pipe(S.mutable);
+const schema = Schema.Struct({
+  options: Schema.Array(SelectOptionSchema).pipe(Schema.mutable),
+}).pipe(Schema.mutable);
 
 const DefaultStory = () => {
   const [values, setValues] = useState<{ options: SelectOption[] }>({

package/src/components/Form/custom/SelectOptionsInput.tsx

@@ -2,7 +2,7 @@
 // Copyright 2025 DXOS.org
 //
 
-import React, { useCallback, useEffect, useState, type ChangeEvent, useRef } from 'react';
+import React, { type ChangeEvent, type KeyboardEvent, useCallback, useEffect, useState, useRef } from 'react';
 
 import { type SelectOption } from '@dxos/echo-schema';
 import { PublicKey } from '@dxos/keys';
@@ -89,7 +89,7 @@ export const SelectOptionInput = ({ type, label, disabled, getStatus, getValue,
     [options, type, onValueChange],
   );
 
-  const handleKeyDown = useCallback((e: React.KeyboardEvent<HTMLInputElement>) => {
+  const handleKeyDown = useCallback((e: KeyboardEvent<HTMLInputElement>) => {
     if (e.key === 'Enter') {
       setSelectedId(null);
     }

package/src/components/Form/index.ts

@@ -3,8 +3,8 @@
 //
 
 export * from './custom';
-
 export * from './Defaults';
 export * from './Form';
 export * from './FormContext';
 export * from './Input';
+export { type QueryRefOptions } from './RefField';

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

@@ -5,9 +5,10 @@
 import '@dxos-theme';
 
 import { type Meta, type StoryObj } from '@storybook/react';
+import { Schema } from 'effect';
 import React, { useCallback, useMemo, useState } from 'react';
 
-import { Format, type EchoSchema, S, toJsonSchema, TypedObject } from '@dxos/echo-schema';
+import { Format, type EchoSchema, toJsonSchema, TypedObject } from '@dxos/echo-schema';
 import { Filter, useQuery, useSpace } from '@dxos/react-client/echo';
 import { withClientProvider } from '@dxos/react-client/testing';
 import { useAsyncEffect } from '@dxos/react-ui';
@@ -26,7 +27,7 @@ const DefaultStory = () => {
   useAsyncEffect(async () => {
     if (space) {
       class TestSchema extends TypedObject({ typename: 'example.com/type/Test', version: '0.1.0' })({
-        name: S.String,
+        name: Schema.String,
         email: Format.Email,
         salary: Format.Currency(),
       }) {}

package/src/components/ViewEditor/ViewEditor.tsx

@@ -2,10 +2,11 @@
 // Copyright 2024 DXOS.org
 //
 
+import { Schema, SchemaAST } from 'effect';
 import React, { useCallback, useMemo, useState } from 'react';
 
 import { type SchemaRegistry } from '@dxos/echo-db';
-import { AST, Format, type BaseSchema, S, type JsonProp } from '@dxos/echo-schema';
+import { Format, type BaseSchema, type JsonProp } from '@dxos/echo-schema';
 import { invariant } from '@dxos/invariant';
 import { IconButton, type ThemedClassName, useTranslation } from '@dxos/react-ui';
 import { List } from '@dxos/react-ui-list';
@@ -18,16 +19,16 @@ import { Form } from '../Form';
 
 const grid = 'grid grid-cols-[32px_1fr_32px] min-bs-[2.5rem]';
 
-const ViewMetaSchema = S.Struct({
-  name: S.String.annotations({
-    [AST.TitleAnnotationId]: 'View',
+const ViewMetaSchema = Schema.Struct({
+  name: Schema.String.annotations({
+    [SchemaAST.TitleAnnotationId]: 'View',
   }),
   typename: Format.URL.annotations({
-    [AST.TitleAnnotationId]: 'Typename',
+    [SchemaAST.TitleAnnotationId]: 'Typename',
   }),
-}).pipe(S.mutable);
+}).pipe(Schema.mutable);
 
-type ViewMetaType = S.Schema.Type<typeof ViewMetaSchema>;
+type ViewMetaType = Schema.Schema.Type<typeof ViewMetaSchema>;
 
 export type ViewEditorProps = ThemedClassName<{
   schema: BaseSchema;
@@ -139,15 +140,16 @@ export const ViewEditor = ({
   );
 
   return (
-    <div role='none' className={mx('flex flex-col w-full divide-y divide-separator', classNames)}>
+    <div role='none' className={mx('grid grid-rows-[1fr_1fr] min-bs-0', classNames)}>
       <Form<ViewMetaType>
         autoSave
         schema={ViewMetaSchema}
         values={viewValues}
         onSave={schema.readonly ? undefined : handleUpdate}
+        classNames='min-bs-0 overflow-y-auto'
       />
 
-      <div>
+      <div role='none' className='border-bs border-separator min-bs-0 overflow-y-auto'>
         {/* TODO(burdon): Clean up common form ux. */}
         <div role='none' className='p-2'>
           <label className={mx(inputTextLabel)}>{t('fields label')}</label>
@@ -155,7 +157,7 @@ export const ViewEditor = ({
 
         <List.Root<FieldType>
           items={view.fields}
-          isItem={S.is(FieldSchema)}
+          isItem={Schema.is(FieldSchema)}
           getId={(field) => field.id}
           onMove={schema.readonly ? undefined : handleMove}
         >

package/src/components/deprecated/Form.stories.tsx

@@ -7,7 +7,7 @@ import '@dxos-theme';
 import { type Meta, type StoryObj } from '@storybook/react';
 import React from 'react';
 
-import { create } from '@dxos/live-object';
+import { live } from '@dxos/live-object';
 import { testData, TestSchema, testView, type TestType } from '@dxos/schema/testing';
 import { withLayout, withTheme } from '@dxos/storybook-utils';
 
@@ -39,23 +39,23 @@ type Story = StoryObj<DeprecatedFormProps<TestType>>;
 
 export const Default: Story = {
   args: {
-    object: create(testData),
-    view: create(testView),
+    object: live(testData),
+    view: live(testView),
     schema: TestSchema,
   },
 };
 
 export const Empty: Story = {
   args: {
-    view: create(testView),
+    view: live(testView),
     schema: TestSchema,
   },
 };
 
 export const Readonly: Story = {
   args: {
-    object: create(testData),
-    view: create(testView),
+    object: live(testData),
+    view: live(testView),
     schema: TestSchema,
     readonly: true,
   },

package/src/components/deprecated/Form.tsx

@@ -2,7 +2,7 @@
 // Copyright 2024 DXOS.org
 //
 
-import { SchemaAST as AST, type Schema as S, Option, pipe } from 'effect';
+import { SchemaAST, type Schema, Option, pipe } from 'effect';
 import React, { useState } from 'react';
 
 import { findProperty } from '@dxos/effect';
@@ -13,7 +13,7 @@ import { type ViewType, getFieldValue, setFieldValue } from '@dxos/schema';
 export type DeprecatedFormProps<T extends {} = {}> = ThemedClassName<{
   view: ViewType;
   object: T;
-  schema?: S.Schema<T>;
+  schema?: Schema.Schema<T>;
   readonly?: boolean;
 }>;
 
@@ -31,16 +31,16 @@ export const DeprecatedForm = <T extends {} = {}>({
     <div role='none' className={mx('flex flex-col w-full gap-2 p-2', classNames)}>
       {view.fields.map((field) => {
         const prop = schema && findProperty(schema, field.path);
-        const title = (prop && pipe(AST.getTitleAnnotation(prop), Option.getOrUndefined)) ?? '';
-        const description = (prop && pipe(AST.getDescriptionAnnotation(prop), Option.getOrUndefined)) ?? title;
+        const title = (prop && pipe(SchemaAST.getTitleAnnotation(prop), Option.getOrUndefined)) ?? '';
+        const description = (prop && pipe(SchemaAST.getDescriptionAnnotation(prop), Option.getOrUndefined)) ?? title;
         // const format =
-        //   (prop && (getPatternAnnotation(prop) ?? (AST.isNumberKeyword(prop) && RealNumberFormat))) || undefined;
+        //   (prop && (getPatternAnnotation(prop) ?? (SchemaAST.isNumberKeyword(prop) && RealNumberFormat))) || undefined;
 
         //
         // Boolean
         //
 
-        if (prop && AST.isBooleanKeyword(prop)) {
+        if (prop && SchemaAST.isBooleanKeyword(prop)) {
           const value = object && getFieldValue(object, field);
           const onChange = (checked: boolean) => {
             setFieldValue(object, field, checked);

package/src/components/deprecated/FormInput.tsx

@@ -12,7 +12,7 @@ import { mx, textBlockWidth } from '@dxos/react-ui-theme';
  */
 export const DeprecatedFormContainer = ({ children, classNames }: ThemedClassName<PropsWithChildren>) => {
   return (
-    <div role='none' className='w-full p-4 justify-center overflow-x-hidden overflow-y-auto'>
+    <div role='none' className='container-max-width p-4 justify-center overflow-x-hidden overflow-y-auto'>
       <div role='form' className={mx('flex flex-col', textBlockWidth, classNames)}>
         {children}
       </div>

package/src/components/index.ts

@@ -3,6 +3,7 @@
 //
 
 export * from './deprecated';
+
 export * from './ControlSection';
 export * from './FieldEditor';
 export * from './Form';

package/src/hooks/index.ts

@@ -3,3 +3,4 @@
 //
 
 export * from './useForm';
+export * from './useRefQueryLookupHandler';

package/src/hooks/useForm.ts

@@ -2,7 +2,7 @@
 // Copyright 2025 DXOS.org
 //
 
-import { SchemaAST as AST, type Schema as S } from 'effect';
+import { SchemaAST, type Schema } from 'effect';
 import { useCallback, useEffect, useMemo, useState } from 'react';
 
 import { type BaseObject, getValue, setValue } from '@dxos/echo-schema';
@@ -45,7 +45,7 @@ export interface FormOptions<T extends BaseObject> {
   /**
    * Effect schema (Type literal).
    */
-  schema: S.Schema<T>;
+  schema: Schema.Schema<T, any>;
 
   /**
    * Initial values (which may not pass validation).
@@ -90,7 +90,7 @@ export const useForm = <T extends BaseObject>({
   onValid,
   onSave,
 }: FormOptions<T>): FormHandler<T> => {
-  invariant(AST.isTypeLiteral(schema.ast));
+  invariant(SchemaAST.isTypeLiteral(schema.ast));
 
   const [values, setValues] = useState<Partial<T>>(initialValues);
   useEffect(() => {

package/src/hooks/useRefQueryLookupHandler.ts

@@ -0,0 +1,43 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { useCallback } from 'react';
+
+import { getDXN, type TypeAnnotation } from '@dxos/echo-schema';
+import { Filter, type Space } from '@dxos/react-client/echo';
+import { isNonNullable } from '@dxos/util';
+
+import { type QueryRefOptions } from '../components';
+
+type UseRefQueryLookupProps = {
+  space?: Space;
+};
+
+export const useRefQueryLookupHandler = ({ space }: UseRefQueryLookupProps): QueryRefOptions => {
+  const handleRefQueryLookup = useCallback(
+    async (typeInfo: TypeAnnotation) => {
+      if (!space) {
+        return [];
+      }
+      const query = space.db.query(Filter.typename(typeInfo.typename));
+      const { objects } = await query.run();
+
+      return objects
+        .map((object) => {
+          const dxn = getDXN(object);
+          if (!dxn) {
+            return undefined;
+          }
+
+          // TODO(Zaymon): Better fallback object names?
+          const item = { dxn, label: object?.name ?? object?.id ?? '' };
+          return item;
+        })
+        .filter(isNonNullable);
+    },
+    [space],
+  );
+
+  return handleRefQueryLookup;
+};