@dxos/react-ui-form 0.8.4-main.a4bbb77 → 0.8.4-main.ae835ea

package/src/components/ViewEditor/ViewEditor.tsx

@@ -2,26 +2,20 @@
 // Copyright 2024 DXOS.org
 //
 
-import { Array, Match, Option, Schema } from 'effect';
+import * as Array from 'effect/Array';
+import * as Match from 'effect/Match';
+import * as Option from 'effect/Option';
+import * as Schema from 'effect/Schema';
 import React, { forwardRef, useCallback, useImperativeHandle, useMemo, useState } from 'react';
 
-import { type SchemaRegistry } from '@dxos/echo-db';
-import { EchoSchema, Format, type JsonProp, isMutable, toJsonSchema } from '@dxos/echo-schema';
+import { QueryAST } from '@dxos/echo';
+import { EchoSchema, Format, type JsonProp, isMutable, toJsonSchema } from '@dxos/echo/internal';
+import { Filter, Query, type SchemaRegistry } from '@dxos/echo-db';
 import { invariant } from '@dxos/invariant';
-import {
-  Callout,
-  IconButton,
-  Input,
-  type ThemedClassName,
-  useDensityContext,
-  useElevationContext,
-  useThemeContext,
-  useTranslation,
-} from '@dxos/react-ui';
-import { Editor, createBasicExtensions, createThemeExtensions } from '@dxos/react-ui-editor';
+import { Callout, IconButton, Input, type ThemedClassName, useTranslation } from '@dxos/react-ui';
+import { QueryForm, type QueryFormProps } from '@dxos/react-ui-components';
 import { List } from '@dxos/react-ui-list';
 import { cardSpacing } from '@dxos/react-ui-stack';
-import { inputTheme } from '@dxos/react-ui-theme';
 import { inputTextLabel, mx, subtleHover } from '@dxos/react-ui-theme';
 import {
   type DataType,
@@ -29,7 +23,7 @@ import {
   type FieldType,
   ProjectionModel,
   VIEW_FIELD_LIMIT,
-  typenameFromQuery,
+  getTypenameFromQuery,
 } from '@dxos/schema';
 
 import { translationKey } from '../../translations';
@@ -47,9 +41,10 @@ export type ViewEditorProps = ThemedClassName<
     registry?: SchemaRegistry;
     readonly?: boolean;
     showHeading?: boolean;
-    onQueryChanged?: (query: string, target?: string) => void;
+    onQueryChanged?: (query: QueryAST.Query, target?: string) => void;
     onDelete?: (fieldId: string) => void;
-  } & Pick<FormProps<any>, 'outerSpacing'>
+  } & Pick<FormProps<any>, 'outerSpacing'> &
+    Pick<QueryFormProps, 'types' | 'tags'>
 >;
 
 /**
@@ -65,6 +60,8 @@ export const ViewEditor = forwardRef<ProjectionModel, ViewEditorProps>(
       registry,
       readonly,
       showHeading = false,
+      types,
+      tags,
       onQueryChanged,
       onDelete,
       outerSpacing = true,
@@ -81,18 +78,6 @@ export const ViewEditor = forwardRef<ProjectionModel, ViewEditorProps>(
     useImperativeHandle(forwardedRef, () => projectionModel, [projectionModel]);
     const [expandedField, setExpandedField] = useState<FieldType['id']>();
 
-    const serializedQuery = Match.value(mode).pipe(
-      Match.when('schema', () => typenameFromQuery(view.query.ast)),
-      Match.when('query', () => {
-        if (view.query.string) {
-          return view.query.string;
-        } else {
-          return 'Serializing query AST is not currently supported.';
-        }
-      }),
-      Match.exhaustive,
-    );
-
     const queueTarget = Match.value(view.query.ast).pipe(
       Match.when({ type: 'options' }, ({ options }) => {
         return Option.fromNullable(options.queues).pipe(
@@ -108,7 +93,7 @@ export const ViewEditor = forwardRef<ProjectionModel, ViewEditorProps>(
         query:
           mode === 'schema'
             ? Format.URL.annotations({ title: 'Record type' })
-            : Schema.String.annotations({ title: 'Query' }),
+            : QueryAST.Query.annotations({ title: 'Query' }),
       });
 
       if (mode === 'query') {
@@ -121,11 +106,16 @@ export const ViewEditor = forwardRef<ProjectionModel, ViewEditorProps>(
 
       return base.pipe(Schema.mutable);
     }, [mode]);
+
     // TODO(burdon): Need to warn user of possible consequences of editing.
     // TODO(burdon): Settings should have domain name owned by user.
     const viewValues = useMemo(
-      () => ({ name: view.name, query: serializedQuery, target: queueTarget }),
-      [view.name, serializedQuery, queueTarget],
+      () => ({
+        name: view.name,
+        query: mode === 'schema' ? getTypenameFromQuery(view.query.ast) : view.query.ast,
+        target: queueTarget,
+      }),
+      [view.name, mode, view.query.ast, queueTarget],
     );
 
     const handleToggleField = useCallback(
@@ -144,23 +134,19 @@ export const ViewEditor = forwardRef<ProjectionModel, ViewEditorProps>(
     }, [schema, projectionModel, readonly]);
 
     const handleUpdate = useCallback(
-      (values: Schema.Schema.Type<typeof viewSchema>) => {
+      (values: any) => {
         invariant(!readonly);
         requestAnimationFrame(() => {
           if ('name' in values && view.name !== values.name) {
             view.name = values.name;
+            return;
           }
 
-          const queryChanged = serializedQuery !== values.query;
-          const targetValue = 'target' in values ? values.target : undefined;
-          const targetChanged = 'target' in values && values.target && queueTarget !== targetValue;
-
-          if ((queryChanged || targetChanged) && !readonly) {
-            onQueryChanged?.(values.query, targetValue);
-          }
+          const query = mode === 'schema' ? Query.select(Filter.typename(values.query)).ast : values.query;
+          onQueryChanged?.(query, values.target);
         });
       },
-      [serializedQuery, onQueryChanged, readonly, view, queueTarget],
+      [onQueryChanged, readonly, view, queueTarget, mode],
     );
 
     const handleDelete = useCallback(
@@ -205,58 +191,7 @@ export const ViewEditor = forwardRef<ProjectionModel, ViewEditorProps>(
       [projectionModel],
     );
 
-    const custom: Partial<Record<string, InputComponent>> = useMemo(
-      () =>
-        mode === 'query'
-          ? {
-              ['query' satisfies keyof Schema.Schema.Type<typeof viewSchema>]: (props: InputProps) => {
-                const { themeMode } = useThemeContext();
-                const density = useDensityContext();
-                const elevation = useElevationContext();
-
-                // TODO(wittjosiah): Including props.onValueChange in deps causes infinite loop.
-                const handleChange = useCallback((text: string) => props.onValueChange('string', text), []);
-
-                const extensions = useMemo(
-                  () => [
-                    createBasicExtensions({ placeholder: t('query placeholder') }),
-                    createThemeExtensions({ themeMode }),
-                  ],
-                  [],
-                );
-
-                // TODO(wittjosiah): This is probably not the right way to do these styles.
-                return (
-                  <Input.Root>
-                    <InputHeader label={props.label} />
-                    <Editor
-                      classNames={mx(
-                        inputTheme.input({ density, elevation }),
-                        'flex items-center',
-                        'focus-within:bg-focusSurface focus-within:border-separator focus-within:hover:bg-focusSurface',
-                      )}
-                      extensions={extensions}
-                      value={props.getValue()}
-                      onChange={handleChange}
-                    />
-                    {/* TODO(wittjosiah): Support query editor.
-                    <QueryEditor
-                      classNames={mx(
-                        inputTheme.input({ density, elevation }),
-                        'flex items-center',
-                        'focus-within:bg-focusSurface focus-within:border-separator focus-within:hover:bg-focusSurface',
-                      )}
-                      space={space}
-                      value={props.getValue()}
-                      onChange={handleChange}
-                    /> */}
-                  </Input.Root>
-                );
-              },
-            }
-          : {},
-      [],
-    );
+    const custom = useMemo(() => (mode === 'query' ? customFields({ types, tags }) : undefined), [types, tags, mode]);
 
     return (
       <div role='none' className={mx(classNames)}>
@@ -377,3 +312,19 @@ export const ViewEditor = forwardRef<ProjectionModel, ViewEditorProps>(
     );
   },
 );
+
+const customFields = ({ types, tags }: Pick<ViewEditorProps, 'types' | 'tags'>): Record<string, InputComponent> => ({
+  query: (props: InputProps) => {
+    const handleChange = useCallback(
+      (query: Query.Any) => props.onValueChange('object', query.ast),
+      [props.onValueChange],
+    );
+
+    return (
+      <Input.Root>
+        <InputHeader label={props.label} />
+        <QueryForm initialQuery={props.getValue()} types={types} tags={tags} onChange={handleChange} />
+      </Input.Root>
+    );
+  },
+});

package/src/components/index.ts

@@ -5,4 +5,5 @@
 export * from './ControlSection';
 export * from './FieldEditor';
 export * from './Form';
+export * from './ObjectPicker';
 export * from './ViewEditor';

package/src/components/testing.tsx

@@ -13,9 +13,9 @@ type TestLayoutProps = ThemedClassName<PropsWithChildren<{ json?: any }>>;
 
 export const TestLayout = ({ classNames, children, json }: TestLayoutProps) => {
   return (
-    <div className='w-full h-full grid grid-cols-[1fr_1fr] gap-2 overflow-hidden'>
+    <div className='is-full bs-full grid grid-cols-[1fr_1fr] gap-2 overflow-hidden'>
       <div className={mx('p-4 justify-center overflow-y-auto', classNames)}>{children}</div>
-      <JsonFilter data={json} classNames='w-full text-xs' testId='debug' />
+      <JsonFilter data={json} classNames='is-full text-xs' testId='debug' />
     </div>
   );
 };

package/src/hooks/useForm.ts

@@ -2,10 +2,11 @@
 // Copyright 2025 DXOS.org
 //
 
-import { type Schema, SchemaAST } from 'effect';
+import type * as Schema from 'effect/Schema';
+import * as SchemaAST from 'effect/SchemaAST';
 import { useCallback, useEffect, useMemo, useState } from 'react';
 
-import { type BaseObject, getValue, setValue } from '@dxos/echo-schema';
+import { type BaseObject, getValue, setValue } from '@dxos/echo/internal';
 import { type JsonPath, type SimpleType, createJsonPath, fromEffectValidationPath } from '@dxos/effect';
 import { invariant } from '@dxos/invariant';
 import { log } from '@dxos/log';
@@ -219,12 +220,13 @@ export const useForm = <T extends BaseObject>({
 
       const newValues = { ...setValue(values, jsonPath, parsedValue) };
       setValues(newValues);
-      setChanged((prev) => ({ ...prev, [jsonPath]: true }));
+      const newChanged = { ...changed, [jsonPath]: true };
+      setChanged(newChanged);
       onValuesChanged?.(newValues);
 
       const isValid = validate(newValues);
       if (isValid && onValid) {
-        onValid(newValues, { changed });
+        onValid(newValues, { changed: newChanged });
       }
     },
     [values, onValuesChanged, validate, onValid, changed],

package/src/hooks/useQueryRefOptions.ts

@@ -2,12 +2,12 @@
 // 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 ChromaticPalette } from '@dxos/react-ui-types';
+import { type Palette } from '@dxos/react-ui-types';
 import { type MaybePromise } from '@dxos/util';
 
 export type RefOption = { dxn: DXN; label?: string };
@@ -16,7 +16,7 @@ export type QueryRefOptions = (type: TypeAnnotation) => MaybePromise<RefOption[]
 export type QueryTag = {
   id: string;
   label: string;
-  hue?: ChromaticPalette;
+  hue?: Palette;
 };
 
 type UseQueryRefOptionsProps = { refTypeInfo: TypeAnnotation | undefined; onQueryRefOptions?: QueryRefOptions };
@@ -25,9 +25,12 @@ type UseQueryRefOptionsProps = { refTypeInfo: TypeAnnotation | undefined; onQuer
  * 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<QueryTag[]>([]);
   const [loading, setLoading] = useState(false);
+  const [state, setState] = useState({});
+  const update = useCallback(() => setState({}), []);
 
   useEffect(() => {
     if (!refTypeInfo || !onQueryRefOptions) {
@@ -53,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, getObjectDXN } from '@dxos/echo/internal';
 import { Filter, type Space } from '@dxos/react-client/echo';
 import { isNonNullable } from '@dxos/util';
 
@@ -28,8 +29,7 @@ export const useRefQueryLookupHandler = ({ space }: UseRefQueryLookupProps): Que
             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/util/field.ts

@@ -2,7 +2,7 @@
 // Copyright 2024 DXOS.org
 //
 
-import { FormatEnum, GeoLocation, TypeEnum } from '@dxos/echo-schema';
+import { FormatEnum, GeoLocation, TypeEnum } from '@dxos/echo/internal';
 import { type ValidationError } from '@dxos/schema';
 
 /**

package/src/util/formatting.ts

@@ -4,7 +4,7 @@
 
 import { format as formatDate } from 'date-fns/format';
 
-import { FormatEnum, GeoLocation, TypeEnum } from '@dxos/echo-schema';
+import { FormatEnum, GeoLocation, TypeEnum } from '@dxos/echo/internal';
 
 type ValueFormatProps = {
   type: TypeEnum;

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 { FormatEnum, ReferenceAnnotationId } from '@dxos/echo/internal';
 import { findAnnotation } from '@dxos/effect';
 import { type SchemaProperty } from '@dxos/schema';
 

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