@dxos/react-ui-form 0.8.2-main.f081794 → 0.8.2-main.fbd8ed0

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 JsonProp, isMutable, toJsonSchema } 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,19 +19,19 @@ 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;
+  schema: Schema.Schema.AnyNoContext;
   view: ViewType;
   registry?: SchemaRegistry;
   readonly?: boolean;
@@ -53,8 +54,9 @@ export const ViewEditor = ({
   onDelete,
 }: ViewEditorProps) => {
   const { t } = useTranslation(translationKey);
-  const projection = useMemo(() => new ViewProjection(schema.jsonSchema, view), [schema, view]);
+  const projection = useMemo(() => new ViewProjection(toJsonSchema(schema), view), [schema, view]);
   const [field, setField] = useState<FieldType>();
+  const immutable = readonly || !isMutable(schema);
 
   // TODO(burdon): Should be reactive.
   const viewValues = useMemo(() => {
@@ -73,14 +75,14 @@ export const ViewEditor = ({
   // TODO(burdon): Check if mutable; variant of useCallback that return undefined if readonly?
 
   const handleAdd = useCallback(() => {
-    invariant(!schema.readonly);
+    invariant(!immutable);
     const field = projection.createFieldProjection();
     setField(field);
   }, [schema, view]);
 
   const handleUpdate = useCallback(
     ({ name, typename }: ViewMetaType) => {
-      invariant(!schema.readonly);
+      invariant(!immutable);
       requestAnimationFrame(() => {
         if (view.name !== name) {
           view.name = name;
@@ -96,7 +98,7 @@ export const ViewEditor = ({
 
   const handleDelete = useCallback(
     (fieldId: string) => {
-      invariant(!schema.readonly);
+      invariant(!immutable);
       if (fieldId === field?.id) {
         setField(undefined);
       }
@@ -108,7 +110,7 @@ export const ViewEditor = ({
 
   const handleMove = useCallback(
     (fromIndex: number, toIndex: number) => {
-      invariant(!schema.readonly);
+      invariant(!immutable);
       // NOTE(ZaymonFC): Using arrayMove here causes a race condition with the kanban model.
       const fields = [...view.fields];
       const [moved] = fields.splice(fromIndex, 1);
@@ -139,15 +141,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}
+        onSave={immutable ? 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,9 +158,9 @@ 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}
+          onMove={immutable ? undefined : handleMove}
         >
           {({ items: fields }) => (
             <>
@@ -179,7 +182,7 @@ export const ViewEditor = ({
                         disabled={view.fields.length <= 1}
                         onClick={() => handleHide(field.id)}
                       />
-                      {!schema.readonly && (
+                      {!immutable && (
                         <List.ItemDeleteButton
                           icon='ph--trash--regular'
                           disabled={view.fields.length <= 1}
@@ -241,7 +244,7 @@ export const ViewEditor = ({
           <IconButton
             icon='ph--plus--regular'
             label={t('button add property')}
-            onClick={schema.readonly ? undefined : handleAdd}
+            onClick={immutable ? undefined : handleAdd}
             // TODO(burdon): Show field limit in ux (not tooltip).
             disabled={view.fields.length >= VIEW_FIELD_LIMIT}
           />

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/hooks/index.ts

@@ -1,5 +1,7 @@
 //
-// Copyright 2024 DXOS.org
+// Copyright 2025 DXOS.org
 //
 
 export * from './useForm';
+export * from './useRefQueryLookupHandler';
+export * from './useQueryRefOptions';

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,9 +90,10 @@ 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(() => {
     setValues(initialValues);
   }, [initialValues]);

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