@dxos/react-ui-form 0.8.2-staging.7ac8446 → 0.8.3-main.672df60

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,39 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { useCallback } from 'react';
+
+import { getObjectDXN, 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 => {
+  return 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 = getObjectDXN(object);
+          if (!dxn) {
+            return undefined;
+          }
+
+          // TODO(Zaymon): Better fallback object names?
+          const item = { dxn, label: object?.name ?? object?.id ?? '' };
+          return item;
+        })
+        .filter(isNonNullable);
+    },
+    [space],
+  );
+};

package/src/translations.ts

@@ -10,6 +10,7 @@ export default [
       [translationKey]: {
         'fields label': 'Fields',
         'hidden fields label': 'Hidden Fields',
+        'empty readonly ref field label': '(none)',
 
         // TODO(burdon): Standardize field/property.
         'button add property': 'Add property',
@@ -20,6 +21,8 @@ export default [
         'add field': 'Add field',
         'delete field': 'Delete field',
         'field limit reached': 'Maximum number of fields reached',
+        'boolean input true value': 'Yes',
+        'boolean input false value': 'No',
 
         // TODO(burdon): Factor out?
         'button cancel': 'Cancel',
@@ -52,16 +55,20 @@ export default [
         'format uri': 'URI',
         'format uuid': 'UUID',
 
-        // Placeholders
+        // Placeholders.
         'placeholder latitude': 'Latitude',
         'placeholder longitude': 'Longitude',
 
-        // SelectOptionsInput
+        // SelectOptionsInput.
         'select option label': 'Label',
         'select option label placeholder': 'Option label',
         'select option color': 'Color',
         'select option delete': 'Delete',
         'select option add': 'Add option',
+
+        // System schema message.
+        'system schema title': 'System Schema',
+        'system schema description': 'This schema is managed by the system and cannot be modified.',
       },
     },
   },

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;
+};

package/src/vitest-setup.ts

@@ -0,0 +1,11 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+// https://github.com/testing-library/jest-dom#with-vitest
+import '@testing-library/jest-dom/vitest';
+
+// https://github.com/jsdom/jsdom/issues/3368#issuecomment-1396749033
+import ResizeObserver from 'resize-observer-polyfill';
+
+global.ResizeObserver = ResizeObserver;

package/dist/types/src/components/ControlSection.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"ControlSection.d.ts","sourceRoot":"","sources":["../../../../src/components/ControlSection.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,EAAE,KAAK,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAEtD,OAAO,EAAE,KAAK,KAAK,EAA4C,MAAM,gBAAgB,CAAC;AAMtF,MAAM,MAAM,mBAAmB,GAAG,iBAAiB,CAAC;IAClD,KAAK,EAAE,KAAK,CAAC;IACb,WAAW,CAAC,EAAE,KAAK,CAAC;CACrB,CAAC,CAAC;AAEH,eAAO,MAAM,qBAAqB,2BAA4B,IAAI,CAAC,mBAAmB,EAAE,UAAU,CAAC,sBAUlG,CAAC;AAEF,eAAO,MAAM,cAAc,qCAAsC,mBAAmB,sBAOnF,CAAC;AAEF,MAAM,MAAM,iBAAiB,GAAG,iBAAiB,CAAC,EAAE,CAAC,CAAC;AAEtD,eAAO,MAAM,YAAY,iBAAkB,iBAAiB,sBAI3D,CAAC;AAEF,eAAO,MAAM,YAAY,iBAAkB,iBAAiB,sBAO3D,CAAC;AAEF,MAAM,MAAM,gBAAgB,GAAG,iBAAiB,CAAC;IAC/C,KAAK,EAAE,KAAK,CAAC;IACb,WAAW,CAAC,EAAE,KAAK,CAAC;CACrB,CAAC,CAAC;AAEH,eAAO,MAAM,kBAAkB,iHACiF,CAAC;AAKjH,eAAO,MAAM,WAAW,qCAAsC,gBAAgB,sBAY7E,CAAC;AAEF,eAAO,MAAM,gBAAgB,qCAAsC,gBAAgB,sBAoBlF,CAAC;AAEF,eAAO,MAAM,gBAAgB,qCAAsC,gBAAgB,sBAUlF,CAAC"}