@dxos/react-ui-form 0.8.4-main.5ea62a8 → 0.8.4-main.60689f5b1c

package/src/components/ViewEditor/ViewEditor.tsx

@@ -2,102 +2,261 @@
 // Copyright 2024 DXOS.org
 //
 
-import { Schema } from 'effect';
-import React, { useCallback, useMemo, useState } from 'react';
+import { RegistryContext } from '@effect-atom/atom-react';
+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, useContext, useImperativeHandle, useMemo, useState } from 'react';
 
-import { type SchemaRegistry } from '@dxos/echo-db';
-import { EchoSchema, Format, type JsonProp, isMutable, toJsonSchema } from '@dxos/echo-schema';
+import { Entity, Feed, Filter, Format, Obj, Query, QueryAST, Ref, type SchemaRegistry, View } from '@dxos/echo';
+import { EchoSchema, type JsonProp, isMutable, toJsonSchema } from '@dxos/echo/internal';
 import { invariant } from '@dxos/invariant';
-import { Callout, IconButton, type ThemedClassName, useTranslation } from '@dxos/react-ui';
+import { useObject, useQuery } from '@dxos/react-client/echo';
+import { IconButton, Input, Message, 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 { inputTextLabel, mx, subtleHover } from '@dxos/react-ui-theme';
-import { type DataType, FieldSchema, type FieldType, ProjectionModel, VIEW_FIELD_LIMIT } from '@dxos/schema';
+import {
+  ParentLabelAnnotation,
+  ProjectionModel,
+  VIEW_FIELD_LIMIT,
+  createEchoChangeCallback,
+  getTypenameFromQuery,
+} from '@dxos/schema';
+import { mx, osTranslations } from '@dxos/ui-theme';
 
-import { translationKey } from '../../translations';
-import { FieldEditor } from '../FieldEditor';
-import { Form, type FormProps } from '../Form';
-
-const listGrid = 'grid grid-cols-[min-content_1fr_min-content_min-content_min-content]';
-const listItemGrid = 'grid grid-cols-subgrid col-span-5';
+import { translationKey } from '#translations';
 
-const ViewMetaSchema = Schema.Struct({
-  typename: Format.URL.annotations({
-    title: 'Record type',
-  }),
-}).pipe(Schema.mutable);
-
-type ViewMetaType = Schema.Schema.Type<typeof ViewMetaSchema>;
+import { FieldEditor } from '../FieldEditor';
+import {
+  Form,
+  type FormFieldComponent,
+  type FormFieldComponentProps,
+  FormFieldLabel,
+  type FormFieldMap,
+  type FormRootProps,
+} from '../Form';
 
 export type ViewEditorProps = ThemedClassName<
   {
     schema: Schema.Schema.AnyNoContext;
-    view: DataType.View;
-    registry?: SchemaRegistry;
-    readonly?: boolean;
+    view: View.View;
+    mode?: 'schema' | 'tag';
+    registry?: SchemaRegistry.SchemaRegistry;
     showHeading?: boolean;
-    onTypenameChanged?: (typename: string) => void;
+    onQueryChanged?: (query: QueryAST.Query, target?: string) => void;
     onDelete?: (fieldId: string) => void;
-  } & Pick<FormProps<any>, 'outerSpacing'>
+  } & Pick<QueryFormProps, 'types' | 'tags'> &
+    Pick<FormRootProps<any>, 'readonly' | 'db'>
 >;
 
 /**
  * Schema-based object form.
  */
-export const ViewEditor = ({
-  classNames,
-  schema,
-  view,
-  registry,
-  readonly,
-  showHeading = false,
-  onTypenameChanged,
-  onDelete,
-  outerSpacing = true,
-}: ViewEditorProps) => {
+export const ViewEditor = forwardRef<ProjectionModel, ViewEditorProps>(
+  (
+    {
+      classNames,
+      schema,
+      view,
+      mode = 'schema',
+      registry,
+      db,
+      readonly,
+      showHeading = false,
+      types,
+      tags,
+      onQueryChanged,
+      onDelete,
+    },
+    forwardedRef,
+  ) => {
+    const atomRegistry = useContext(RegistryContext);
+    const schemaReadonly = !isMutable(schema);
+    const { t } = useTranslation(translationKey);
+
+    const projectionModel = useMemo(() => {
+      // Use reactive and mutable version of json schema when schema is mutable.
+      const jsonSchema = schema instanceof EchoSchema ? schema.jsonSchema : toJsonSchema(schema);
+
+      // Always use createEchoChangeCallback since the view is ECHO-backed.
+      // Pass schema only when mutable to allow schema mutations.
+      const change = createEchoChangeCallback(view, schema instanceof EchoSchema ? schema : undefined);
+
+      const model = new ProjectionModel({
+        registry: atomRegistry,
+        view,
+        baseSchema: jsonSchema,
+        change,
+      });
+
+      return model;
+    }, [atomRegistry, schema, view]);
+
+    useImperativeHandle(forwardedRef, () => projectionModel, [projectionModel]);
+
+    const queueTarget = Match.value(view.query.ast).pipe(
+      Match.when({ type: 'from' }, ({ from }) => {
+        if (from._tag !== 'scope') {
+          return undefined;
+        }
+        return Option.fromNullable(from.scope.feeds).pipe(
+          Option.flatMap((feeds) => Array.head(feeds)),
+          Option.map(String),
+          Option.getOrUndefined,
+        );
+      }),
+      Match.orElse(() => undefined),
+    );
+
+    const feeds = useQuery(db, Filter.type(Feed.Feed));
+
+    const targetRef = useMemo(() => {
+      if (!queueTarget) {
+        return undefined;
+      }
+      const feed = feeds.find((feed) => Feed.getQueueDxn(feed)?.toString() === queueTarget);
+      return feed ? Ref.fromDXN(Entity.getDXN(feed)) : undefined;
+    }, [queueTarget, feeds]);
+
+    const viewSchema = useMemo(() => {
+      const base = Schema.Struct({
+        query:
+          mode === 'schema'
+            ? Format.URL.annotations({ title: 'Record type' })
+            : QueryAST.Query.annotations({ title: 'Query' }),
+      });
+
+      if (mode === 'tag') {
+        return Schema.Struct({
+          ...base.fields,
+          // TODO(wittjosiah): Replace Type.Feed with Dataset.Dataset when Ref.Ref supports unions.
+          target: Ref.Ref(Feed.Feed).pipe(
+            Schema.annotations({ title: 'Target Feed' }),
+            ParentLabelAnnotation.set(true),
+            Schema.optional,
+          ),
+        }).pipe(Schema.mutable);
+      }
+
+      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(
+      () => ({
+        query: mode === 'schema' ? getTypenameFromQuery(view.query.ast) : view.query.ast,
+        target: targetRef,
+      }),
+      [mode, view.query.ast, targetRef],
+    );
+
+    const fieldMap = useMemo<FormFieldMap | undefined>(
+      () => (mode === 'tag' ? customFields({ types, tags }) : undefined),
+      [mode, types, tags],
+    );
+
+    const handleUpdate = useCallback(
+      (values: any) => {
+        const targetValue = values.target;
+        let feedDXN: string | undefined;
+
+        if (Ref.isRef(targetValue)) {
+          const targetDXN = targetValue.dxn.toString();
+          const feed = feeds.find((feed) => Obj.getDXN(feed).toString() === targetDXN);
+          if (feed) {
+            feedDXN = Feed.getQueueDxn(feed)?.toString();
+          }
+        }
+
+        // TODO(wittjosiah): Deep-clone the AST to plain JS or ECHO proxy arrays become objects with numeric keys.
+        const query =
+          mode === 'schema'
+            ? Query.select(Filter.typename(values.query)).ast
+            : JSON.parse(JSON.stringify(values.query));
+        onQueryChanged?.(query, feedDXN);
+      },
+      [onQueryChanged, mode, feeds],
+    );
+
+    const handleDelete = useCallback(
+      (fieldId: string) => {
+        invariant(!readonly);
+        onDelete?.(fieldId);
+      },
+      [onDelete, readonly],
+    );
+
+    return (
+      <div className={mx(classNames)}>
+        {/* If readonly is set, then the callout is not needed. */}
+        {schemaReadonly && !readonly && (
+          <Message.Root valence='info' classNames='my-form-padding'>
+            <Message.Title>{t('system-schema.description')}</Message.Title>
+          </Message.Root>
+        )}
+
+        {/* TODO(burdon): Is the form read-only or just the schema? */}
+        <Form.Root schema={viewSchema} values={viewValues} fieldMap={fieldMap} db={db} onValuesChanged={handleUpdate}>
+          <Form.FieldSet />
+
+          <FormFieldLabel label={t('fields.label')} asChild />
+          <FieldList
+            schema={schema}
+            view={view}
+            registry={registry}
+            readonly={readonly}
+            showHeading={showHeading}
+            onDelete={handleDelete}
+          />
+        </Form.Root>
+      </div>
+    );
+  },
+);
+
+type FieldListProps = Pick<ViewEditorProps, 'schema' | 'view' | 'registry' | 'readonly' | 'showHeading' | 'onDelete'>;
+
+const FieldList = ({ schema, view, registry, readonly, showHeading = false, onDelete }: FieldListProps) => {
+  const atomRegistry = useContext(RegistryContext);
   const schemaReadonly = !isMutable(schema);
   const { t } = useTranslation(translationKey);
+
+  // Subscribe to view changes for reactivity.
+  const [viewSnapshot] = useObject(view);
+
   const projectionModel = useMemo(() => {
     // Use reactive and mutable version of json schema when schema is mutable.
     const jsonSchema = schema instanceof EchoSchema ? schema.jsonSchema : toJsonSchema(schema);
-    return new ProjectionModel(jsonSchema, view.projection);
-  }, [schema, view.projection]);
-  const [expandedField, setExpandedField] = useState<FieldType['id']>();
-
-  // TODO(burdon): Should be reactive.
-  const viewValues = useMemo(() => {
-    return {
-      // TODO(burdon): Need to warn user of possible consequences of editing.
-      // TODO(burdon): Settings should have domain name owned by user.
-      typename: view.query.typename,
-    };
-  }, [view.query.typename]);
 
-  const handleToggleField = useCallback(
-    (field: FieldType) => {
-      setExpandedField((prevExpandedFieldId) => (prevExpandedFieldId === field.id ? undefined : field.id));
-    },
-    [readonly],
-  );
+    // Always use createEchoChangeCallback since the view is ECHO-backed.
+    // Pass schema only when mutable to allow schema mutations.
+    const change = createEchoChangeCallback(view, schema instanceof EchoSchema ? schema : undefined);
+
+    const model = new ProjectionModel({
+      registry: atomRegistry,
+      view,
+      baseSchema: jsonSchema,
+      change,
+    });
 
-  // TODO(burdon): Check if mutable; variant of useCallback that return undefined if readonly?
+    return model;
+  }, [atomRegistry, schema, view]);
+
+  const [expandedField, setExpandedField] = useState<View.FieldType['id']>();
 
   const handleAdd = useCallback(() => {
     invariant(!readonly);
     const field = projectionModel.createFieldProjection();
     setExpandedField(field.id);
-  }, [schema, projectionModel, readonly]);
+  }, [projectionModel, readonly]);
 
-  const handleUpdate = useCallback(
-    ({ typename }: ViewMetaType) => {
-      invariant(!readonly);
-      requestAnimationFrame(() => {
-        if (view.query.typename !== typename && !readonly) {
-          onTypenameChanged?.(typename);
-        }
-      });
+  const handleToggleField = useCallback(
+    (field: View.FieldType) => {
+      setExpandedField((prevExpandedFieldId) => (prevExpandedFieldId === field.id ? undefined : field.id));
     },
-    [view.query.typename, onTypenameChanged, readonly],
+    [readonly],
   );
 
   const handleDelete = useCallback(
@@ -115,13 +274,15 @@ export const ViewEditor = ({
   const handleMove = useCallback(
     (fromIndex: number, toIndex: number) => {
       invariant(!readonly);
-      // NOTE(ZaymonFC): Using arrayMove here causes a race condition with the kanban model.
-      const fields = [...view.projection.fields];
-      const [moved] = fields.splice(fromIndex, 1);
-      fields.splice(toIndex, 0, moved);
-      view.projection.fields = fields;
+      Obj.update(view, (view) => {
+        // NOTE(ZaymonFC): Using arrayMove here causes a race condition with the kanban model.
+        const fields = [...view.projection.fields];
+        const [moved] = fields.splice(fromIndex, 1);
+        fields.splice(toIndex, 0, moved);
+        view.projection.fields = fields;
+      });
     },
-    [view.projection.fields, readonly],
+    [view, readonly],
   );
 
   const handleClose = useCallback(() => setExpandedField(undefined), []);
@@ -142,112 +303,111 @@ export const ViewEditor = ({
     [projectionModel],
   );
 
-  return (
-    <div role='none' className={mx(classNames)}>
-      {schemaReadonly && (
-        <Callout.Root
-          valence='info'
-          classNames={['is-full mlb-cardSpacingBlock', outerSpacing && 'mli-cardSpacingInline']}
-        >
-          <Callout.Title>{t('system schema description')}</Callout.Title>
-        </Callout.Root>
-      )}
+  if (!viewSnapshot) {
+    return null;
+  }
 
-      {/* TODO(burdon): Is the form read-only or just the schema? */}
-      {/* TODO(burdon): Readonly fields should take up the same space as editable fields (just be ghosted). */}
-      <Form<ViewMetaType>
-        autoSave
-        schema={ViewMetaSchema}
-        values={viewValues}
-        readonly={readonly ? 'disabled-input' : false}
-        onSave={handleUpdate}
-        outerSpacing={outerSpacing}
-      />
-
-      <div role='none' className={outerSpacing ? cardSpacing : 'mlb-cardSpacingBlock'}>
-        <h2 className={mx(inputTextLabel)}>{t('fields label')}</h2>
-
-        <List.Root<FieldType>
-          items={view.projection.fields}
-          isItem={Schema.is(FieldSchema)}
-          getId={(field) => field.id}
-          onMove={readonly ? undefined : handleMove}
-          readonly={readonly}
-        >
-          {({ items: fields }) => (
-            <>
-              {showHeading && <h3 className='text-sm'>{t('field path label')}</h3>}
-              <div role='list' className={listGrid}>
-                {fields?.map((field) => {
-                  const hidden = field.visible === false;
-                  return (
-                    <List.Item<FieldType>
-                      key={field.id}
-                      item={field}
-                      classNames={listItemGrid}
-                      aria-expanded={expandedField === field.id}
-                    >
-                      <div role='none' className={mx(subtleHover, listItemGrid, 'rounded-sm cursor-pointer min-bs-10')}>
-                        <List.ItemDragHandle disabled={readonly} />
-                        <List.ItemTitle classNames={hidden && 'text-subdued'} onClick={() => handleToggleField(field)}>
-                          {field.path}
-                        </List.ItemTitle>
-                        <List.ItemButton
-                          label={t(hidden ? 'show field label' : 'hide field label')}
-                          data-testid={hidden ? 'show-field-button' : 'hide-field-button'}
-                          icon={hidden ? 'ph--eye-closed--regular' : 'ph--eye--regular'}
-                          autoHide={false}
-                          disabled={readonly || (!hidden && projectionModel.fields.length <= 1)}
-                          onClick={() => (hidden ? handleShow(field.path) : handleHide(field.id))}
-                        />
-                        {/* TODO(burdon): Remove unless implement undo. */}
+  return (
+    <List.Root<View.FieldType>
+      items={viewSnapshot.projection.fields as View.FieldType[]}
+      isItem={Schema.is(View.FieldSchema)}
+      getId={(field) => field.id}
+      onMove={readonly ? undefined : handleMove}
+      readonly={readonly}
+    >
+      {({ items: fields }) => (
+        <>
+          {showHeading && <h3 className='text-sm'>{t('field-path.label')}</h3>}
+          <div role='list' className='grid grid-cols-[min-content_1fr_min-content_min-content_min-content]'>
+            {fields?.map((field) => {
+              const hidden = field.visible === false;
+              return (
+                <List.Item<View.FieldType>
+                  key={field.id}
+                  item={field}
+                  classNames={'grid grid-cols-subgrid col-span-5'}
+                  aria-expanded={expandedField === field.id}
+                >
+                  <div className='grid grid-cols-subgrid col-span-5 rounded-xs cursor-pointer min-h-10 dx-hover'>
+                    <List.ItemDragHandle disabled={readonly || schemaReadonly} />
+                    <List.ItemTitle classNames={hidden && 'text-subdued'} onClick={() => handleToggleField(field)}>
+                      {field.path}
+                    </List.ItemTitle>
+                    <List.ItemIconButton
+                      label={t(hidden ? 'show-field.label' : 'hide-field.label')}
+                      data-testid={hidden ? 'show-field-button' : 'hide-field-button'}
+                      icon={hidden ? 'ph--eye-closed--regular' : 'ph--eye--regular'}
+                      autoHide={false}
+                      disabled={readonly || (!hidden && projectionModel.getFields().length <= 1)}
+                      onClick={() => (hidden ? handleShow(field.path) : handleHide(field.id))}
+                    />
+                    {!readonly && (
+                      <>
                         <List.ItemDeleteButton
-                          label={t('delete field label')}
+                          label={t('delete-field.label')}
                           autoHide={false}
-                          disabled={readonly || schemaReadonly || view.projection.fields.length <= 1}
+                          disabled={readonly || schemaReadonly || viewSnapshot.projection.fields.length <= 1}
                           onClick={() => handleDelete(field.id)}
                           data-testid='field.delete'
                         />
-                        <IconButton
+                        <List.ItemIconButton
                           iconOnly
                           variant='ghost'
-                          label={t('toggle expand label', { ns: 'os' })}
+                          label={t('toggle-expand.label', { ns: osTranslations })}
                           icon={expandedField === field.id ? 'ph--caret-down--regular' : 'ph--caret-right--regular'}
                           onClick={() => handleToggleField(field)}
+                          data-testid='field.toggle'
                         />
-                      </div>
-                      {expandedField === field.id && (
-                        <div role='none' className='col-span-5 mbs-1 mbe-1 border border-separator rounded-md'>
-                          <FieldEditor
-                            readonly={readonly || schemaReadonly ? 'disabled-input' : false}
-                            projection={projectionModel}
-                            field={field}
-                            registry={registry}
-                            onSave={handleClose}
-                          />
-                        </div>
-                      )}
-                    </List.Item>
-                  );
-                })}
-              </div>
-            </>
+                      </>
+                    )}
+                  </div>
+                  {expandedField === field.id && !readonly && (
+                    <div className='col-span-full mt-1 mb-1 border border-separator rounded-md'>
+                      <FieldEditor
+                        readonly={readonly || schemaReadonly}
+                        registry={registry}
+                        projection={projectionModel}
+                        field={field}
+                        onSave={handleClose}
+                      />
+                    </div>
+                  )}
+                </List.Item>
+              );
+            })}
+          </div>
+          {!readonly && !expandedField && (
+            <div className='my-form-padding'>
+              <IconButton
+                icon='ph--plus--regular'
+                label={t('add-property-button.label')}
+                onClick={handleAdd}
+                disabled={viewSnapshot.projection.fields.length >= VIEW_FIELD_LIMIT}
+                classNames='w-full'
+              />
+            </div>
           )}
-        </List.Root>
-      </div>
-
-      {!readonly && !expandedField && (
-        <div role='none' className={outerSpacing ? cardSpacing : 'mlb-cardSpacingBlock'}>
-          <IconButton
-            icon='ph--plus--regular'
-            label={t('button add property')}
-            onClick={readonly ? undefined : handleAdd}
-            // TODO(burdon): Show field limit in ux (not tooltip).
-            disabled={view.projection.fields.length >= VIEW_FIELD_LIMIT}
-            classNames='is-full'
-          />
-        </div>
+        </>
       )}
-    </div>
+    </List.Root>
   );
 };
+
+const customFields = ({
+  types,
+  tags,
+}: Pick<ViewEditorProps, 'types' | 'tags'>): Record<string, FormFieldComponent> => ({
+  query: ({ type, readonly, label, getValue, onValueChange }: FormFieldComponentProps) => {
+    const handleChange = useCallback<NonNullable<QueryFormProps['onChange']>>(
+      (query) => onValueChange(type, query.ast),
+      [onValueChange],
+    );
+
+    return (
+      <Input.Root>
+        <FormFieldLabel readonly={readonly} label={label} />
+        <QueryForm initialQuery={getValue()} types={types} tags={tags} onChange={handleChange} />
+      </Input.Root>
+    );
+  },
+});

package/src/components/index.ts

@@ -2,7 +2,10 @@
 // Copyright 2024 DXOS.org
 //
 
-export * from './ControlSection';
 export * from './FieldEditor';
 export * from './Form';
+export * from './ObjectForm';
+export * from './ObjectPicker';
+export * from './ObjectProperties';
+export * from './Settings';
 export * from './ViewEditor';

package/src/components/testing.tsx

@@ -5,27 +5,40 @@
 import React, { type PropsWithChildren } from 'react';
 
 import { type ThemedClassName } from '@dxos/react-ui';
-import { Card } from '@dxos/react-ui-stack';
-import { JsonFilter } from '@dxos/react-ui-syntax-highlighter';
-import { mx, textBlockWidth } from '@dxos/react-ui-theme';
+import { Syntax } from '@dxos/react-ui-syntax-highlighter';
+import { composableProps, slottable } from '@dxos/ui-theme';
 
-type TestLayoutProps = ThemedClassName<PropsWithChildren<{ json?: any }>>;
+type TestLayoutProps = PropsWithChildren<{ json?: any }>;
 
-export const TestLayout = ({ classNames, children, json }: TestLayoutProps) => {
+export const TestLayout = ({ children, json }: TestLayoutProps) => {
   return (
-    <div className='w-full h-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' />
+    <div className='dx-container grid grid-cols-[1fr_1fr] p-4 gap-4'>
+      <TestPanel>{children}</TestPanel>
+      <TestPanel>
+        <Syntax.Root data={json}>
+          <Syntax.Content>
+            <Syntax.Filter />
+            <Syntax.Viewport>
+              <Syntax.Code testId='debug' classNames='text-xs' />
+            </Syntax.Viewport>
+          </Syntax.Content>
+        </Syntax.Root>
+      </TestPanel>
     </div>
   );
 };
 
 type TestPanelProps = ThemedClassName<PropsWithChildren>;
 
-export const TestPanel = ({ classNames, children }: TestPanelProps) => {
-  return <Card.StaticRoot classNames={[textBlockWidth, classNames]}>{children}</Card.StaticRoot>;
-};
+const TestPanel = slottable<HTMLDivElement, TestPanelProps>(({ children }, forwardedRef) => {
+  return (
+    <div {...composableProps({ classNames: 'dx-container bg-modal-surface rounded-md' })} ref={forwardedRef}>
+      {children}
+    </div>
+  );
+});
 
 // Symbol for accessing debug objects in tests.
 export const VIEW_EDITOR_DEBUG_SYMBOL = Symbol('viewEditorDebug');
 export const FIELD_EDITOR_DEBUG_SYMBOL = Symbol('fieldEditorDebug');
+export const OBJECT_PROPERTIES_DEBUG_SYMBOL = Symbol('objectPropertiesDebug');

package/src/hooks/index.ts

@@ -2,6 +2,5 @@
 // Copyright 2025 DXOS.org
 //
 
-export * from './useForm';
-export * from './useRefQueryLookupHandler';
-export * from './useQueryRefOptions';
+export * from './useFormHandler';
+export * from './useKeyHandler';