@dxos/react-ui-form 0.8.4-main.5ea62a8 → 0.8.4-main.66e292d

package/src/hooks/useQueryRefOptions.ts

@@ -2,26 +2,35 @@
 // Copyright 2025 DXOS.org
 //
 
-import { useEffect, useState } from 'react';
+import { useCallback, useEffect, useState } from 'react';
 
-import { type TypeAnnotation } from '@dxos/echo-schema';
+import { type TypeAnnotation } from '@dxos/echo/internal';
 import { type DXN } from '@dxos/keys';
 import { log } from '@dxos/log';
-import { type TagPickerItemData } from '@dxos/react-ui-tag-picker';
+import { type Palette } from '@dxos/react-ui-types';
 import { type MaybePromise } from '@dxos/util';
 
 export type RefOption = { dxn: DXN; label?: string };
 export type QueryRefOptions = (type: TypeAnnotation) => MaybePromise<RefOption[]>;
 
+export type QueryTag = {
+  id: string;
+  label: string;
+  hue?: Palette;
+};
+
 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.
  */
+// TODO(wittjosiah): This should be a reactive query so that the options are always up to date.
 export const useQueryRefOptions = ({ refTypeInfo, onQueryRefOptions }: UseQueryRefOptionsProps) => {
-  const [options, setOptions] = useState<TagPickerItemData[]>([]);
+  const [options, setOptions] = useState<QueryTag[]>([]);
   const [loading, setLoading] = useState(false);
+  const [state, setState] = useState({});
+  const update = useCallback(() => setState({}), []);
 
   useEffect(() => {
     if (!refTypeInfo || !onQueryRefOptions) {
@@ -47,7 +56,7 @@ export const useQueryRefOptions = ({ refTypeInfo, onQueryRefOptions }: UseQueryR
     };
 
     void fetchOptions();
-  }, [refTypeInfo, onQueryRefOptions]);
+  }, [refTypeInfo, onQueryRefOptions, state]);
 
-  return { options, loading };
+  return { options, update, loading };
 };

package/src/hooks/useRefQueryLookupHandler.ts

@@ -4,7 +4,8 @@
 
 import { useCallback } from 'react';
 
-import { type TypeAnnotation, getObjectDXN } from '@dxos/echo-schema';
+import { Obj } from '@dxos/echo';
+import { type TypeAnnotation } from '@dxos/echo/internal';
 import { Filter, type Space } from '@dxos/react-client/echo';
 import { isNonNullable } from '@dxos/util';
 
@@ -18,18 +19,17 @@ export const useRefQueryLookupHandler = ({ space }: UseRefQueryLookupProps): Que
       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);
+          const dxn = Obj.getDXN(object);
           if (!dxn) {
             return undefined;
           }
 
-          // TODO(Zaymon): Better fallback object names?
-          const item = { dxn, label: object?.name ?? object?.id ?? '' };
+          const item = { dxn, label: Obj.getLabel(object) ?? object?.id ?? '' };
           return item;
         })
         .filter(isNonNullable);

package/src/translations.ts

@@ -15,7 +15,7 @@ export const translations = [
         'empty readonly ref field label': '(none)',
 
         // TODO(burdon): Standardize field/property.
-        'button add property': 'Add property',
+        'add property button label': 'Add property',
         'field property label': 'Property',
         'field property placeholder': 'Property name',
         'field format label': 'Type',
@@ -28,12 +28,13 @@ export const translations = [
         'show field label': 'Show field',
         'hide field label': 'Hide field',
         'delete field label': 'Delete field',
+        'ref field combobox input placeholder': 'Search…',
         'ref field placeholder_one': 'Select…',
         'ref field placeholder_other': 'Select items…',
 
         // TODO(burdon): Factor out?
-        'button cancel': 'Cancel',
-        'button save': 'Save',
+        'cancel button label': 'Cancel',
+        'save button label': 'Save',
 
         // FormatEnum
         'format boolean': 'Boolean',
@@ -48,7 +49,7 @@ export const translations = [
         'format hostname': 'Hostname',
         'format integer': 'Integer',
         'format json': 'JSON',
-        'format latlng': 'Geopoint',
+        'format lnglat': 'Geopoint',
         'format markdown': 'Markdown',
         'format percent': 'Percent',
         'format ref': 'Reference',
@@ -77,9 +78,9 @@ export const translations = [
         'select option add': 'Add option',
 
         // System schema message.
-        'system schema title': 'System record type',
+        'system schema title': 'System type',
         'system schema description':
-          'This is a system record type and cannot be modified, though the view can still be configured.',
+          'This is a system type and cannot be modified, though the view can still be configured.',
       },
     },
   },

package/src/util/field.ts

@@ -2,7 +2,7 @@
 // Copyright 2024 DXOS.org
 //
 
-import { FormatEnum, GeoLocation, TypeEnum } from '@dxos/echo-schema';
+import { Format, GeoLocation, TypeEnum } from '@dxos/echo/internal';
 import { type ValidationError } from '@dxos/schema';
 
 /**
@@ -13,7 +13,7 @@ import { type ValidationError } from '@dxos/schema';
  */
 export type ParseProps = {
   type?: TypeEnum;
-  format?: FormatEnum;
+  format?: Format.TypeFormat;
   value: any;
 };
 
@@ -57,31 +57,31 @@ export const parseValue = ({ type, format, value }: ParseProps) => {
   }
 
   switch (format) {
-    case FormatEnum.Boolean:
+    case Format.TypeFormat.Boolean:
       return parseScalar(TypeEnum.Boolean);
 
-    case FormatEnum.Number:
-    case FormatEnum.Percent:
-    case FormatEnum.Currency:
+    case Format.TypeFormat.Number:
+    case Format.TypeFormat.Percent:
+    case Format.TypeFormat.Currency:
       return parseScalar(TypeEnum.Number);
 
-    case FormatEnum.String:
-    case FormatEnum.Markdown: {
+    case Format.TypeFormat.String:
+    case Format.TypeFormat.Markdown: {
       return parseScalar(TypeEnum.String);
     }
 
-    case FormatEnum.Ref:
-      throw new Error(`unexpected format: ${FormatEnum.Ref}`);
+    case Format.TypeFormat.Ref:
+      throw new Error(`unexpected format: ${Format.TypeFormat.Ref}`);
 
-    case FormatEnum.DateTime:
-    case FormatEnum.Date:
-    case FormatEnum.Time:
-    case FormatEnum.Timestamp: {
+    case Format.TypeFormat.DateTime:
+    case Format.TypeFormat.Date:
+    case Format.TypeFormat.Time:
+    case Format.TypeFormat.Timestamp: {
       const date = new Date(value as string | number);
       return isNaN(date.getTime()) ? null : date;
     }
 
-    case FormatEnum.GeoPoint: {
+    case Format.TypeFormat.GeoPoint: {
       // Parse string in format "lat,long" to GeoPoint [longitude, latitude].
       if (typeof value === 'string') {
         // Only keep digits, decimal points, minus signs, and commas.
@@ -108,23 +108,23 @@ export const parseValue = ({ type, format, value }: ParseProps) => {
 // TODO(burdon): Type and format.
 export type CellClassesForFieldTypeProps = {
   type?: TypeEnum;
-  format?: FormatEnum;
+  format?: Format.TypeFormat;
 };
 
 export const cellClassesForFieldType = ({ type, format }: CellClassesForFieldTypeProps): string[] | undefined => {
   switch (format || type) {
-    case FormatEnum.Markdown:
+    case Format.TypeFormat.Markdown:
       return undefined;
-    case FormatEnum.Time:
-    case FormatEnum.Timestamp:
-    case FormatEnum.DateTime:
-    case FormatEnum.Date:
-    case FormatEnum.Duration:
+    case Format.TypeFormat.Time:
+    case Format.TypeFormat.Timestamp:
+    case Format.TypeFormat.DateTime:
+    case Format.TypeFormat.Date:
+    case Format.TypeFormat.Duration:
       return ['font-mono', 'text-right'];
-    case FormatEnum.Currency:
+    case Format.TypeFormat.Currency:
       return ['text-right'];
-    case FormatEnum.JSON:
-    case FormatEnum.DID:
+    case Format.TypeFormat.JSON:
+    case Format.TypeFormat.DID:
       return ['font-mono'];
     case TypeEnum.Number:
     case TypeEnum.Boolean:

package/src/util/formatting.ts

@@ -4,11 +4,11 @@
 
 import { format as formatDate } from 'date-fns/format';
 
-import { FormatEnum, GeoLocation, TypeEnum } from '@dxos/echo-schema';
+import { Format, GeoLocation, TypeEnum } from '@dxos/echo/internal';
 
 type ValueFormatProps = {
   type: TypeEnum;
-  format?: FormatEnum | undefined;
+  format?: Format.TypeFormat | undefined;
   value: any;
   locale?: string | undefined;
 };
@@ -41,20 +41,20 @@ export const formatForDisplay = ({ type, format, value, locale = undefined }: Va
   }
 
   switch (format) {
-    case FormatEnum.Boolean: {
+    case Format.TypeFormat.Boolean: {
       return formatScalar(TypeEnum.Boolean);
     }
-    case FormatEnum.Number: {
+    case Format.TypeFormat.Number: {
       return formatScalar(TypeEnum.Number);
     }
-    case FormatEnum.String:
-    case FormatEnum.Ref: {
+    case Format.TypeFormat.String:
+    case Format.TypeFormat.Ref: {
       return formatScalar(TypeEnum.String);
     }
-    case FormatEnum.Percent: {
+    case Format.TypeFormat.Percent: {
       return `${(value as number) * 100}%`;
     }
-    case FormatEnum.Currency: {
+    case Format.TypeFormat.Currency: {
       // TODO(burdon): Get from property annotation.
       return (value as number).toLocaleString(locale, {
         style: 'currency',
@@ -63,28 +63,28 @@ export const formatForDisplay = ({ type, format, value, locale = undefined }: Va
         maximumFractionDigits: 2,
       });
     }
-    case FormatEnum.Date: {
+    case Format.TypeFormat.Date: {
       try {
         return formatDate(new Date(value as number), 'yyyy-MM-dd');
       } catch (error) {
         return 'Invalid Date';
       }
     }
-    case FormatEnum.Time: {
+    case Format.TypeFormat.Time: {
       try {
         return formatDate(new Date(value as number), 'HH:mm:ss');
       } catch (error) {
         return 'Invalid Time';
       }
     }
-    case FormatEnum.DateTime: {
+    case Format.TypeFormat.DateTime: {
       try {
         return formatDate(new Date(value as number), 'yyyy-MM-dd HH:mm:ss');
       } catch (error) {
         return 'Invalid DateTime';
       }
     }
-    case FormatEnum.GeoPoint: {
+    case Format.TypeFormat.GeoPoint: {
       if (value === null || value === undefined) {
         return '';
       }
@@ -125,31 +125,31 @@ export const formatForEditing = ({ type, format, value, locale = undefined }: Va
   }
 
   switch (format) {
-    case FormatEnum.Boolean:
-    case FormatEnum.Number:
-    case FormatEnum.String:
-    case FormatEnum.Ref: {
+    case Format.TypeFormat.Boolean:
+    case Format.TypeFormat.Number:
+    case Format.TypeFormat.String:
+    case Format.TypeFormat.Ref: {
       return formatScalar(type);
     }
-    case FormatEnum.Percent: {
+    case Format.TypeFormat.Percent: {
       return String(value * 100);
     }
-    case FormatEnum.Currency: {
+    case Format.TypeFormat.Currency: {
       return String(value);
     }
-    case FormatEnum.DateTime: {
+    case Format.TypeFormat.DateTime: {
       const date = new Date(value as number);
       return date.toISOString();
     }
-    case FormatEnum.Date: {
+    case Format.TypeFormat.Date: {
       const date = new Date(value as number);
       return date.toISOString().split('T')[0];
     }
-    case FormatEnum.Time: {
+    case Format.TypeFormat.Time: {
       const date = new Date(value as number);
       return date.toISOString().split('T')[1].split('.')[0];
     }
-    case FormatEnum.GeoPoint: {
+    case Format.TypeFormat.GeoPoint: {
       // Handle null or undefined
       if (value === null || value === undefined) {
         return '';

package/src/util/refs.ts

@@ -2,9 +2,9 @@
 // Copyright 2025 DXOS.org
 //
 
-import { type SchemaAST } from 'effect';
+import type * as SchemaAST from 'effect/SchemaAST';
 
-import { FormatEnum, ReferenceAnnotationId } from '@dxos/echo-schema';
+import { Format, ReferenceAnnotationId } from '@dxos/echo/internal';
 import { findAnnotation } from '@dxos/effect';
 import { type SchemaProperty } from '@dxos/schema';
 
@@ -18,11 +18,6 @@ type RefProps = {
 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);
@@ -34,5 +29,10 @@ export const getRefProps = (property: SchemaProperty<any>): RefProps | undefined
     }
   }
 
+  // Direct reference.
+  if (format === Format.TypeFormat.Ref) {
+    return { ast, isArray: false };
+  }
+
   return undefined;
 };

package/src/util/schema.ts

@@ -2,13 +2,11 @@
 // Copyright 2025 DXOS.org
 //
 
-import { SchemaAST } from 'effect';
+import * as SchemaAST from 'effect/SchemaAST';
 
 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;
+  return (tupleType as SchemaAST.TupleType | undefined)?.rest[0]?.type;
 };