@dxos/react-ui-form 0.8.4-main.3a94e84 → 0.8.4-main.406dc2a

package/src/components/ViewEditor/ViewEditor.tsx

@@ -2,269 +2,329 @@
 // Copyright 2024 DXOS.org
 //
 
-import { Schema } from 'effect';
-import React, { useCallback, useMemo, useState } from '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, 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, type ThemedClassName, useTranslation } from '@dxos/react-ui';
+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 { ghostHover, inputTextLabel, mx } from '@dxos/react-ui-theme';
-import { FieldSchema, type FieldType, VIEW_FIELD_LIMIT, type DataType, ProjectionModel } from '@dxos/schema';
+import { inputTextLabel, mx, subtleHover } from '@dxos/react-ui-theme';
+import {
+  type DataType,
+  FieldSchema,
+  type FieldType,
+  ProjectionModel,
+  VIEW_FIELD_LIMIT,
+  getTypenameFromQuery,
+} from '@dxos/schema';
 
 import { translationKey } from '../../translations';
 import { FieldEditor } from '../FieldEditor';
-import { Form, type FormProps } from '../Form';
+import { Form, type FormProps, type InputComponent, InputHeader, type InputProps } from '../Form';
 
-const grid = 'grid grid-cols-[32px_1fr_32px_32px] min-bs-[2.5rem]';
-
-const ViewMetaSchema = Schema.Struct({
-  typename: Format.URL.annotations({
-    title: 'Typename',
-  }),
-}).pipe(Schema.mutable);
-
-type ViewMetaType = Schema.Schema.Type<typeof ViewMetaSchema>;
+const listGrid = 'grid grid-cols-[min-content_1fr_min-content_min-content_min-content]';
+const listItemGrid = 'grid grid-cols-subgrid col-span-5';
 
 export type ViewEditorProps = ThemedClassName<
   {
     schema: Schema.Schema.AnyNoContext;
     view: DataType.View;
+    mode?: 'schema' | 'query';
     registry?: SchemaRegistry;
     readonly?: boolean;
     showHeading?: boolean;
-    onTypenameChanged?: (typename: 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'>
 >;
 
 /**
  * Schema-based object form.
  */
-export const ViewEditor = ({
-  classNames,
-  schema,
-  view,
-  registry,
-  readonly: _readonly,
-  showHeading = false,
-  onTypenameChanged,
-  onDelete,
-  outerSpacing = true,
-}: ViewEditorProps) => {
-  const { t } = useTranslation(translationKey);
-  const projection = 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 [field, setField] = useState<FieldType>();
-  const readonly = _readonly || !isMutable(schema);
+export const ViewEditor = forwardRef<ProjectionModel, ViewEditorProps>(
+  (
+    {
+      classNames,
+      schema,
+      view,
+      mode = 'schema',
+      registry,
+      readonly,
+      showHeading = false,
+      types,
+      tags,
+      onQueryChanged,
+      onDelete,
+      outerSpacing = true,
+    },
+    forwardedRef,
+  ) => {
+    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);
+      return new ProjectionModel(jsonSchema, view.projection);
+    }, [schema, JSON.stringify(view.projection)]);
+    useImperativeHandle(forwardedRef, () => projectionModel, [projectionModel]);
+    const [expandedField, setExpandedField] = useState<FieldType['id']>();
+
+    const queueTarget = Match.value(view.query.ast).pipe(
+      Match.when({ type: 'options' }, ({ options }) => {
+        return Option.fromNullable(options.queues).pipe(
+          Option.flatMap((queues) => Array.head(queues)),
+          Option.getOrUndefined,
+        );
+      }),
+      Match.orElse(() => undefined),
+    );
 
-  // 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 viewSchema = useMemo(() => {
+      const base = Schema.Struct({
+        query:
+          mode === 'schema'
+            ? Format.URL.annotations({ title: 'Record type' })
+            : QueryAST.Query.annotations({ title: 'Query' }),
+      });
 
-  const handleSelect = useCallback(
-    (field: FieldType) => {
-      if (readonly) {
-        return;
+      if (mode === 'query') {
+        return Schema.Struct({
+          name: Schema.optional(Schema.String.annotations({ title: 'Name' })),
+          ...base.fields,
+          target: Schema.optional(Schema.String.annotations({ title: 'Target Queue' })),
+        }).pipe(Schema.mutable);
       }
-      setField((f) => (f === field ? undefined : field));
-    },
-    [readonly],
-  );
 
-  // TODO(burdon): Check if mutable; variant of useCallback that return undefined if readonly?
+      return base.pipe(Schema.mutable);
+    }, [mode]);
 
-  const handleAdd = useCallback(() => {
-    invariant(!readonly);
-    const field = projection.createFieldProjection();
-    setField(field);
-  }, [schema, projection, readonly]);
+    // 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: mode === 'schema' ? getTypenameFromQuery(view.query.ast) : view.query.ast,
+        target: queueTarget,
+      }),
+      [view.name, mode, view.query.ast, queueTarget],
+    );
 
-  const handleUpdate = useCallback(
-    ({ typename }: ViewMetaType) => {
-      invariant(!readonly);
-      requestAnimationFrame(() => {
-        if (view.query.typename !== typename && !readonly) {
-          onTypenameChanged?.(typename);
-        }
-      });
-    },
-    [view.query.typename, onTypenameChanged, readonly],
-  );
+    const handleToggleField = useCallback(
+      (field: FieldType) => {
+        setExpandedField((prevExpandedFieldId) => (prevExpandedFieldId === field.id ? undefined : field.id));
+      },
+      [readonly],
+    );
 
-  const handleDelete = useCallback(
-    (fieldId: string) => {
+    // TODO(burdon): Check if mutable; variant of useCallback that return undefined if readonly?
+
+    const handleAdd = useCallback(() => {
       invariant(!readonly);
-      if (fieldId === field?.id) {
-        setField(undefined);
-      }
+      const field = projectionModel.createFieldProjection();
+      setExpandedField(field.id);
+    }, [schema, projectionModel, readonly]);
 
-      onDelete?.(fieldId);
-    },
-    [field, onDelete, readonly],
-  );
+    const handleUpdate = useCallback(
+      (values: any) => {
+        invariant(!readonly);
+        requestAnimationFrame(() => {
+          if ('name' in values && view.name !== values.name) {
+            view.name = values.name;
+            return;
+          }
 
-  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;
-    },
-    [view.projection.fields, readonly],
-  );
+          const query = mode === 'schema' ? Query.select(Filter.typename(values.query)).ast : values.query;
+          onQueryChanged?.(query, values.target);
+        });
+      },
+      [onQueryChanged, readonly, view, queueTarget, mode],
+    );
 
-  const handleClose = useCallback(() => setField(undefined), []);
+    const handleDelete = useCallback(
+      (fieldId: string) => {
+        invariant(!readonly);
+        if (fieldId === expandedField) {
+          setExpandedField(undefined);
+        }
 
-  const hiddenProperties = projection.getHiddenProperties();
+        onDelete?.(fieldId);
+      },
+      [expandedField, onDelete, readonly],
+    );
 
-  const handleHide = useCallback(
-    (fieldId: string) => {
-      setField(undefined);
-      projection.hideFieldProjection(fieldId);
-    },
-    [projection],
-  );
+    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;
+      },
+      [view.projection.fields, readonly],
+    );
 
-  const handleShow = useCallback(
-    (property: string) => {
-      setField(undefined);
-      projection.showFieldProjection(property as JsonProp);
-    },
-    [projection],
-  );
+    const handleClose = useCallback(() => setExpandedField(undefined), []);
 
-  return (
-    <div role='none' className={mx(classNames)}>
-      {readonly && (
-        <div role='none' className={mx('is-full', outerSpacing && 'plb-cardSpacingBlock pli-cardSpacingInline')}>
-          <Callout.Root valence='info'>
-            <Callout.Title>{t('system schema description')}</Callout.Title>
-          </Callout.Root>
-        </div>
-      )}
+    const handleHide = useCallback(
+      (fieldId: string) => {
+        setExpandedField(undefined);
+        projectionModel.hideFieldProjection(fieldId);
+      },
+      [projectionModel],
+    );
 
-      {/* 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}
-        onSave={handleUpdate}
-        outerSpacing={outerSpacing}
-      />
+    const handleShow = useCallback(
+      (property: string) => {
+        setExpandedField(undefined);
+        projectionModel.showFieldProjection(property as JsonProp);
+      },
+      [projectionModel],
+    );
 
-      <div role='none' className={outerSpacing ? cardSpacing : 'mlb-cardSpacingBlock'}>
-        <label className={mx(inputTextLabel)}>{t('fields label')}</label>
+    const custom = useMemo(() => (mode === 'query' ? customFields({ types, tags }) : undefined), [types, tags, mode]);
 
-        <List.Root<FieldType>
-          items={view.projection.fields}
-          isItem={Schema.is(FieldSchema)}
-          getId={(field) => field.id}
-          readonly={readonly}
-          onMove={readonly ? undefined : handleMove}
-        >
-          {({ items: fields }) => (
-            <>
-              {showHeading && (
-                <div role='heading' className={grid}>
-                  <div />
-                  <div className='flex items-center text-sm'>{t('field path label')}</div>
-                </div>
-              )}
+    return (
+      <div role='none' className={mx(classNames)}>
+        {schemaReadonly && mode === 'schema' && (
+          <Callout.Root valence='info' classNames={['mlb-cardSpacingBlock', outerSpacing && 'mli-cardSpacingInline']}>
+            <Callout.Title>{t('system schema description')}</Callout.Title>
+          </Callout.Root>
+        )}
 
-              <div role='list' className='flex flex-col is-full'>
-                {fields?.map((field) => (
-                  <List.Item<FieldType>
-                    key={field.id}
-                    item={field}
-                    classNames={mx(grid, ghostHover, 'overflow-hidden', !readonly && 'cursor-pointer')}
-                  >
-                    <List.ItemDragHandle />
-                    <List.ItemTitle onClick={() => handleSelect(field)}>{field.path}</List.ItemTitle>
-                    <List.ItemButton
-                      data-testid='hide-field-button'
-                      icon='ph--eye-slash--regular'
-                      // TDOO(burdon): Is this the correct test?
-                      disabled={view.projection.fields.length <= 1}
-                      onClick={() => handleHide(field.id)}
-                    />
-                    {/* TODO(burdon): Remove unless implement undo. */}
-                    {!readonly && (
-                      <List.ItemDeleteButton
-                        disabled={view.projection.fields.length <= 1}
-                        onClick={() => handleDelete(field.id)}
-                      />
-                    )}
-                  </List.Item>
-                ))}
-              </div>
-            </>
-          )}
-        </List.Root>
+        {/* 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<Schema.Schema.Type<typeof viewSchema>>
+          autoSave
+          schema={viewSchema}
+          values={viewValues}
+          readonly={readonly ? 'disabled-input' : false}
+          onSave={handleUpdate}
+          outerSpacing={outerSpacing}
+          Custom={custom}
+        />
 
-        {hiddenProperties.length > 0 && (
-          <>
-            <label className={mx(inputTextLabel)}>{t('hidden fields label')}</label>
+        <div role='none' className={outerSpacing ? cardSpacing : 'mlb-cardSpacingBlock'}>
+          <h2 className={mx(inputTextLabel)}>{t('fields label')}</h2>
 
-            <List.Root<string>
-              items={hiddenProperties}
-              isItem={(item): item is string => typeof item === 'string'}
-              getId={(property) => property}
-            >
-              {({ items: properties }) => (
-                <div role='list' className='flex flex-col is-full'>
-                  {properties?.map((property) => (
-                    <List.Item<string>
-                      key={property}
-                      item={property}
-                      classNames={mx(grid, ghostHover, !readonly && 'cursor-pointer')}
-                    >
-                      <List.ItemDragHandle disabled />
-                      <List.ItemTitle>{property}</List.ItemTitle>
-                      <List.ItemButton
-                        icon='ph--eye--regular'
-                        onClick={() => handleShow(property)}
-                        data-testid='show-field-button'
-                      />
-                    </List.Item>
-                  ))}
+          <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))}
+                          />
+                          {mode === 'schema' && (
+                            <>
+                              <List.ItemDeleteButton
+                                label={t('delete field label')}
+                                autoHide={false}
+                                disabled={readonly || schemaReadonly || view.projection.fields.length <= 1}
+                                onClick={() => handleDelete(field.id)}
+                                data-testid='field.delete'
+                              />
+                              <IconButton
+                                iconOnly
+                                variant='ghost'
+                                label={t('toggle expand label', { ns: 'os' })}
+                                icon={
+                                  expandedField === field.id ? 'ph--caret-down--regular' : 'ph--caret-right--regular'
+                                }
+                                onClick={() => handleToggleField(field)}
+                              />
+                            </>
+                          )}
+                        </div>
+                        {expandedField === field.id && mode === 'schema' && (
+                          <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>
-              )}
-            </List.Root>
-          </>
+              </>
+            )}
+          </List.Root>
+        </div>
+
+        {!readonly && !expandedField && mode === 'schema' && (
+          <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>
+    );
+  },
+);
 
-      {field && (
-        <FieldEditor key={field.id} projection={projection} field={field} registry={registry} onSave={handleClose} />
-      )}
+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],
+    );
 
-      {!readonly && !field && (
-        <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='flex is-full'
-          />
-        </div>
-      )}
-    </div>
-  );
-};
+    return (
+      <Input.Root>
+        <InputHeader label={props.label} />
+        <QueryForm initialQuery={props.getValue()} types={types} tags={tags} onChange={handleChange} />
+      </Input.Root>
+    );
+  },
+});

package/src/components/index.ts

@@ -2,9 +2,8 @@
 // Copyright 2024 DXOS.org
 //
 
-export * from './deprecated';
-
 export * from './ControlSection';
 export * from './FieldEditor';
 export * from './Form';
+export * from './ObjectPicker';
 export * from './ViewEditor';

package/src/components/testing.tsx

@@ -9,16 +9,22 @@ import { Card } from '@dxos/react-ui-stack';
 import { JsonFilter } from '@dxos/react-ui-syntax-highlighter';
 import { mx, textBlockWidth } from '@dxos/react-ui-theme';
 
-export const TestLayout = ({ classNames, json, children }: ThemedClassName<PropsWithChildren<{ json?: any }>>) => (
-  <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>
-);
+type TestLayoutProps = ThemedClassName<PropsWithChildren<{ json?: any }>>;
 
-export const TestPanel = ({ classNames, children }: ThemedClassName<PropsWithChildren>) => (
-  <Card.StaticRoot classNames={[textBlockWidth, classNames]}>{children}</Card.StaticRoot>
-);
+export const TestLayout = ({ classNames, children, json }: TestLayoutProps) => {
+  return (
+    <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='is-full text-xs' testId='debug' />
+    </div>
+  );
+};
+
+type TestPanelProps = ThemedClassName<PropsWithChildren>;
+
+export const TestPanel = ({ classNames, children }: TestPanelProps) => {
+  return <Card.StaticRoot classNames={[textBlockWidth, classNames]}>{children}</Card.StaticRoot>;
+};
 
 // Symbol for accessing debug objects in tests.
 export const VIEW_EDITOR_DEBUG_SYMBOL = Symbol('viewEditorDebug');

package/src/hooks/useForm.ts

@@ -2,14 +2,15 @@
 // Copyright 2025 DXOS.org
 //
 
-import { SchemaAST, type Schema } 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 SimpleType, type JsonPath, createJsonPath, fromEffectValidationPath } from '@dxos/effect';
+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';
-import { validateSchema, type ValidationError } from '@dxos/schema';
+import { type ValidationError, validateSchema } from '@dxos/schema';
 import { type MaybePromise } from '@dxos/util';
 
 /**
@@ -26,6 +27,8 @@ export type FormHandler<T extends BaseObject> = {
   changed: Record<JsonPath, boolean>;
   canSave: boolean;
   formIsValid: boolean;
+
+  // TODO(burdon): Return onSave.
   handleSave: () => void;
 
   //
@@ -201,6 +204,7 @@ export const useForm = <T extends BaseObject>({
     [values],
   );
 
+  // TODO(wittjosiah): This is causing the entire form to re-render on every change.
   const onValueChange = useCallback<FormHandler<T>['onValueChange']>(
     (path: (string | number)[], type: SimpleType, value: any) => {
       const jsonPath = createJsonPath(path);
@@ -216,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],