@dxos/react-ui-form 0.8.2-main.12df754 → 0.8.2-main.30e4dbb

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/useQueryRefOptions.ts

@@ -0,0 +1,53 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { useEffect, useState } from 'react';
+
+import { type TypeAnnotation } from '@dxos/echo-schema';
+import { type DXN } from '@dxos/keys';
+import { log } from '@dxos/log';
+import { type TagPickerItemData } from '@dxos/react-ui-tag-picker';
+import { type MaybePromise } from '@dxos/util';
+
+export type RefOption = { dxn: DXN; label?: string };
+export type QueryRefOptions = (type: TypeAnnotation) => MaybePromise<RefOption[]>;
+
+type UseQueryRefOptionsProps = { refTypeInfo: TypeAnnotation | undefined; onQueryRefOptions?: QueryRefOptions };
+
+/**
+ * Hook to query reference options based on type information.
+ * Used internally within forms to fetch and format reference options for reference fields.
+ */
+export const useQueryRefOptions = ({ refTypeInfo, onQueryRefOptions }: UseQueryRefOptionsProps) => {
+  const [options, setOptions] = useState<TagPickerItemData[]>([]);
+  const [loading, setLoading] = useState(false);
+
+  useEffect(() => {
+    if (!refTypeInfo || !onQueryRefOptions) {
+      return;
+    }
+
+    const fetchOptions = async () => {
+      setLoading(true);
+      try {
+        const fetchedOptions = await onQueryRefOptions(refTypeInfo);
+        setOptions(
+          fetchedOptions.map((option) => {
+            const dxn = option.dxn.toString() as string;
+            return { id: dxn, label: option.label ?? dxn, hue: 'neutral' as any };
+          }),
+        );
+      } catch (error) {
+        log.error('Failed to fetch ref options:', error);
+        setOptions([]);
+      } finally {
+        setLoading(false);
+      }
+    };
+
+    void fetchOptions();
+  }, [refTypeInfo, onQueryRefOptions]);
+
+  return { options, loading };
+};

package/src/hooks/useRefQueryLookupHandler.ts

@@ -0,0 +1,41 @@
+//
+// 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 './useQueryRefOptions';
+
+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;
+};

package/src/util/formatting.ts

@@ -64,13 +64,25 @@ export const formatForDisplay = ({ type, format, value, locale = undefined }: Va
       });
     }
     case FormatEnum.Date: {
-      return formatDate(new Date(value as number), 'yyyy-MM-dd');
+      try {
+        return formatDate(new Date(value as number), 'yyyy-MM-dd');
+      } catch (error) {
+        return 'Invalid Date';
+      }
     }
     case FormatEnum.Time: {
-      return formatDate(new Date(value as number), 'HH:mm:ss');
+      try {
+        return formatDate(new Date(value as number), 'HH:mm:ss');
+      } catch (error) {
+        return 'Invalid Time';
+      }
     }
     case FormatEnum.DateTime: {
-      return formatDate(new Date(value as number), 'yyyy-MM-dd HH:mm:ss');
+      try {
+        return formatDate(new Date(value as number), 'yyyy-MM-dd HH:mm:ss');
+      } catch (error) {
+        return 'Invalid DateTime';
+      }
     }
     case FormatEnum.GeoPoint: {
       if (value === null || value === undefined) {

package/src/util/index.ts

@@ -1,6 +1,8 @@
 //
-// Copyright 2024 DXOS.org
+// Copyright 2025 DXOS.org
 //
 
 export * from './field';
 export * from './formatting';
+export * from './refs';
+export * from './schema';

package/src/util/refs.ts

@@ -0,0 +1,38 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { type SchemaAST } from 'effect';
+
+import { FormatEnum, ReferenceAnnotationId } from '@dxos/echo-schema';
+import { findAnnotation } from '@dxos/effect';
+import { type SchemaProperty } from '@dxos/schema';
+
+import { findArrayElementType } from './schema';
+
+type RefProps = {
+  ast: SchemaAST.AST;
+  isArray: boolean;
+};
+
+export const getRefProps = (property: SchemaProperty<any>): RefProps | undefined => {
+  const { ast, format, array } = property;
+
+  // Direct reference.
+  if (format === FormatEnum.Ref) {
+    return { ast, isArray: false };
+  }
+
+  // Array of references.
+  if (array) {
+    const elementType = findArrayElementType(ast);
+    if (elementType) {
+      const annotation = findAnnotation(elementType, ReferenceAnnotationId);
+      if (annotation) {
+        return { ast: elementType, isArray: true };
+      }
+    }
+  }
+
+  return undefined;
+};

package/src/util/schema.ts

@@ -0,0 +1,14 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { SchemaAST } from 'effect';
+
+import { findNode } from '@dxos/effect';
+
+export const findArrayElementType = (ast: SchemaAST.AST) => {
+  const tupleType = findNode(ast, SchemaAST.isTupleType);
+  const elementType = (tupleType as SchemaAST.TupleType | undefined)?.rest[0]?.type;
+
+  return elementType;
+};