@dxos/react-ui-form 0.8.4-main.3c1ae3b → 0.8.4-main.3eb6e50203

package/package.json

@@ -1,9 +1,13 @@
 {
   "name": "@dxos/react-ui-form",
-  "version": "0.8.4-main.3c1ae3b",
+  "version": "0.8.4-main.3eb6e50203",
   "description": "Data components.",
   "homepage": "https://dxos.org",
   "bugs": "https://github.com/dxos/dxos/issues",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/dxos/dxos"
+  },
   "license": "MIT",
   "author": "DXOS.org",
   "type": "module",
@@ -24,60 +28,60 @@
     "src"
   ],
   "dependencies": {
-    "@atlaskit/pragmatic-drag-and-drop": "^1.4.0",
-    "@atlaskit/pragmatic-drag-and-drop-hitbox": "^1.0.3",
-    "@fluentui/react-tabster": "^9.24.2",
-    "@preact-signals/safe-react": "^0.9.0",
-    "@preact/signals-react": "^3.2.0",
+    "@atlaskit/pragmatic-drag-and-drop": "1.7.7",
+    "@atlaskit/pragmatic-drag-and-drop-hitbox": "1.1.0",
+    "@effect-atom/atom-react": "^0.5.0",
+    "@fluentui/react-tabster": "9.26.11",
     "@radix-ui/react-context": "1.1.1",
-    "@radix-ui/react-use-controllable-state": "^1.2.2",
+    "@radix-ui/react-use-controllable-state": "1.1.0",
     "date-fns": "^3.3.1",
     "jsonpath": "^1.1.1",
-    "@dxos/async": "0.8.4-main.3c1ae3b",
-    "@dxos/debug": "0.8.4-main.3c1ae3b",
-    "@dxos/echo": "0.8.4-main.3c1ae3b",
-    "@dxos/echo-db": "0.8.4-main.3c1ae3b",
-    "@dxos/effect": "0.8.4-main.3c1ae3b",
-    "@dxos/echo-query": "0.8.4-main.3c1ae3b",
-    "@dxos/invariant": "0.8.4-main.3c1ae3b",
-    "@dxos/keys": "0.8.4-main.3c1ae3b",
-    "@dxos/lit-ui": "0.8.4-main.3c1ae3b",
-    "@dxos/live-object": "0.8.4-main.3c1ae3b",
-    "@dxos/log": "0.8.4-main.3c1ae3b",
-    "@dxos/react-client": "0.8.4-main.3c1ae3b",
-    "@dxos/react-ui-components": "0.8.4-main.3c1ae3b",
-    "@dxos/react-ui-editor": "0.8.4-main.3c1ae3b",
-    "@dxos/react-ui-pickers": "0.8.4-main.3c1ae3b",
-    "@dxos/react-ui-stack": "0.8.4-main.3c1ae3b",
-    "@dxos/react-ui-types": "0.8.4-main.3c1ae3b",
-    "@dxos/react-ui-searchlist": "0.8.4-main.3c1ae3b",
-    "@dxos/schema": "0.8.4-main.3c1ae3b",
-    "@dxos/types": "0.8.4-main.3c1ae3b",
-    "@dxos/util": "0.8.4-main.3c1ae3b",
-    "@dxos/react-ui-list": "0.8.4-main.3c1ae3b"
+    "tabster": "^8.5.5",
+    "@dxos/echo-query": "0.8.4-main.3eb6e50203",
+    "@dxos/echo-react": "0.8.4-main.3eb6e50203",
+    "@dxos/async": "0.8.4-main.3eb6e50203",
+    "@dxos/effect": "0.8.4-main.3eb6e50203",
+    "@dxos/invariant": "0.8.4-main.3eb6e50203",
+    "@dxos/echo": "0.8.4-main.3eb6e50203",
+    "@dxos/keys": "0.8.4-main.3eb6e50203",
+    "@dxos/lit-ui": "0.8.4-main.3eb6e50203",
+    "@dxos/log": "0.8.4-main.3eb6e50203",
+    "@dxos/react-client": "0.8.4-main.3eb6e50203",
+    "@dxos/react-ui-editor": "0.8.4-main.3eb6e50203",
+    "@dxos/react-ui-list": "0.8.4-main.3eb6e50203",
+    "@dxos/react-ui-mosaic": "0.8.4-main.3eb6e50203",
+    "@dxos/react-ui-pickers": "0.8.4-main.3eb6e50203",
+    "@dxos/react-ui-searchlist": "0.8.4-main.3eb6e50203",
+    "@dxos/react-ui-stack": "0.8.4-main.3eb6e50203",
+    "@dxos/schema": "0.8.4-main.3eb6e50203",
+    "@dxos/types": "0.8.4-main.3eb6e50203",
+    "@dxos/ui-types": "0.8.4-main.3eb6e50203",
+    "@dxos/util": "0.8.4-main.3eb6e50203",
+    "@dxos/react-ui-components": "0.8.4-main.3eb6e50203",
+    "@dxos/debug": "0.8.4-main.3eb6e50203"
   },
   "devDependencies": {
     "@types/jsonpath": "^0.2.4",
-    "@types/react": "~19.2.2",
-    "@types/react-dom": "~19.2.2",
-    "effect": "3.18.3",
+    "@types/react": "~19.2.7",
+    "@types/react-dom": "~19.2.3",
+    "effect": "3.19.16",
     "fast-check": "^3.19.0",
-    "react": "~19.2.0",
-    "react-dom": "~19.2.0",
+    "react": "~19.2.3",
+    "react-dom": "~19.2.3",
     "vite": "7.1.9",
-    "@dxos/echo-signals": "0.8.4-main.3c1ae3b",
-    "@dxos/random": "0.8.4-main.3c1ae3b",
-    "@dxos/react-ui-theme": "0.8.4-main.3c1ae3b",
-    "@dxos/react-ui-syntax-highlighter": "0.8.4-main.3c1ae3b",
-    "@dxos/react-ui": "0.8.4-main.3c1ae3b",
-    "@dxos/storybook-utils": "0.8.4-main.3c1ae3b"
+    "@dxos/random": "0.8.4-main.3eb6e50203",
+    "@dxos/react-client": "0.8.4-main.3eb6e50203",
+    "@dxos/react-ui-syntax-highlighter": "0.8.4-main.3eb6e50203",
+    "@dxos/react-ui": "0.8.4-main.3eb6e50203",
+    "@dxos/storybook-utils": "0.8.4-main.3eb6e50203",
+    "@dxos/ui-theme": "0.8.4-main.3eb6e50203"
   },
   "peerDependencies": {
-    "effect": "^3.13.3",
-    "react": "^19.0.0",
-    "react-dom": "^19.0.0",
-    "@dxos/react-ui": "0.8.4-main.3c1ae3b",
-    "@dxos/react-ui-theme": "0.8.4-main.3c1ae3b"
+    "effect": "3.19.16",
+    "react": "~19.2.3",
+    "react-dom": "~19.2.3",
+    "@dxos/react-ui": "0.8.4-main.3eb6e50203",
+    "@dxos/ui-theme": "0.8.4-main.3eb6e50203"
   },
   "publishConfig": {
     "access": "public"

package/src/components/FieldEditor/FieldEditor.stories.tsx

@@ -5,11 +5,12 @@
 import { type Meta, type StoryObj } from '@storybook/react-vite';
 import React, { useEffect, useMemo } from 'react';
 
+import { Filter, Query } from '@dxos/echo';
 import { createEchoSchema } from '@dxos/echo/testing';
 import { log } from '@dxos/log';
 import { withTheme } from '@dxos/react-ui/testing';
-import { ProjectionModel } from '@dxos/schema';
-import { Example, testView } from '@dxos/schema/testing';
+import { ProjectionModel, View, createEchoChangeCallback } from '@dxos/schema';
+import { Example } from '@dxos/schema/testing';
 
 import { translations } from '../../translations';
 import { FIELD_EDITOR_DEBUG_SYMBOL, TestLayout } from '../testing';
@@ -22,32 +23,57 @@ export type FieldEditorDebugObjects = {
   projection: ProjectionModel;
 };
 
-const DefaultStory = (props: FieldEditorProps) => {
+// TODO(wittjosiah): ECHO objects don't work when passed via Storybook args.
+const useTestProjection = () => {
+  return useMemo(() => {
+    const schema = createEchoSchema(Example);
+    const view = View.make({
+      name: 'Test',
+      query: Query.select(Filter.type(Example)),
+      jsonSchema: schema.jsonSchema,
+    });
+    const projection = new ProjectionModel({
+      view,
+      baseSchema: schema.jsonSchema,
+      change: createEchoChangeCallback(view, schema),
+    });
+    projection.normalizeView();
+    return { view, projection };
+  }, []);
+};
+
+const DefaultStory = () => {
+  const { view, projection } = useTestProjection();
+
   const handleComplete: FieldEditorProps['onSave'] = () => {
-    log.info('onClose', { props });
+    log.info('onClose');
+  };
+
+  const props: FieldEditorProps = {
+    projection,
+    field: view.projection.fields[0],
+    onSave: handleComplete,
   };
 
   // Expose objects on window for test access.
   useEffect(() => {
-    props.projection.normalizeView();
-
     if (typeof window !== 'undefined') {
       (window as any)[FIELD_EDITOR_DEBUG_SYMBOL] = {
         props,
-        projection: props.projection,
+        projection,
       } satisfies FieldEditorDebugObjects;
     }
-  }, [props, props.projection]);
+  }, [props, projection]);
 
   // NOTE(ZaymonFC): This looks awkward but it resolves an infinite parsing issue with sb.
   const json = useMemo(
-    () => JSON.parse(JSON.stringify({ props, projection: props.projection })),
-    [JSON.stringify(props), JSON.stringify(props.projection)],
+    () => JSON.parse(JSON.stringify({ props, projection })),
+    [JSON.stringify(props), JSON.stringify(projection)],
   );
 
   return (
     <TestLayout json={json}>
-      <FieldEditor {...props} onSave={handleComplete} />
+      <FieldEditor {...props} />
     </TestLayout>
   );
 };
@@ -56,7 +82,7 @@ const meta = {
   title: 'ui/react-ui-form/FieldEditor',
   component: FieldEditor as any,
   render: DefaultStory,
-  decorators: [withTheme],
+  decorators: [withTheme()],
   parameters: {
     layout: 'fullscreen',
     translations,
@@ -70,9 +96,4 @@ export default meta;
 
 type Story = StoryObj<typeof meta>;
 
-export const Default: Story = {
-  args: {
-    projection: new ProjectionModel(createEchoSchema(Example).jsonSchema, testView.projection),
-    field: testView.projection.fields[0],
-  },
-};
+export const Default: Story = {};

package/src/components/FieldEditor/FieldEditor.tsx

@@ -4,7 +4,7 @@
 
 import React, { useCallback, useEffect, useMemo, useState } from 'react';
 
-import { type SchemaRegistry } from '@dxos/echo';
+import { Obj, type SchemaRegistry } from '@dxos/echo';
 import { type EchoSchema, Format, FormatEnums, formatToType } from '@dxos/echo/internal';
 import { type SchemaProperty } from '@dxos/effect';
 import { log } from '@dxos/log';
@@ -25,6 +25,7 @@ export type FieldEditorProps = {
   projection: ProjectionModel;
   field: FieldType;
   registry?: SchemaRegistry.SchemaRegistry;
+  view?: Obj.Unknown;
   onSave: () => void;
   onCancel?: () => void;
 } & Pick<FormRootProps<any>, 'readonly'>;
@@ -32,7 +33,7 @@ export type FieldEditorProps = {
 /**
  * Displays a Form representing the metadata for a given `Field` and `View`.
  */
-export const FieldEditor = ({ readonly, projection, field, registry, onSave, onCancel }: FieldEditorProps) => {
+export const FieldEditor = ({ readonly, projection, field, registry, view, onSave, onCancel }: FieldEditorProps) => {
   const { t } = useTranslation(translationKey);
   const [props, setProps] = useState<PropertyType>(projection.getFieldProjection(field.id).props);
   useEffect(() => setProps(projection.getFieldProjection(field.id).props), [field, projection]);
@@ -136,7 +137,7 @@ export const FieldEditor = ({ readonly, projection, field, registry, onSave, onC
 
   const handleValidate = useCallback<NonNullable<FormRootProps<PropertyType>['onValidate']>>(
     ({ property }) => {
-      if (property && projection.fields.find((f) => f.path === property && f.path !== field.path)) {
+      if (property && projection.getFields().find((f) => f.path === property && f.path !== field.path)) {
         return [
           {
             path: 'property',
@@ -145,15 +146,21 @@ export const FieldEditor = ({ readonly, projection, field, registry, onSave, onC
         ];
       }
     },
-    [projection.fields, field],
+    [projection.getFields(), field],
   );
 
   const handleSave = useCallback<NonNullable<FormRootProps<PropertyType>['onSave']>>(
     (props) => {
-      projection.setFieldProjection({ field, props });
+      if (view) {
+        Obj.change(view, () => {
+          projection.setFieldProjection({ field, props });
+        });
+      } else {
+        projection.setFieldProjection({ field, props });
+      }
       onSave();
     },
-    [projection, field, onSave],
+    [projection, field, view, onSave],
   );
 
   const handleCancel = useCallback<NonNullable<FormRootProps<PropertyType>['onCancel']>>(() => {

package/src/components/Form/Form-old.stories.tsx

@@ -6,7 +6,7 @@ import { type Meta, type StoryObj } from '@storybook/react-vite';
 import * as Schema from 'effect/Schema';
 import React, { useCallback, useState } from 'react';
 
-import { Format, Obj, Ref, Type } from '@dxos/echo';
+import { Format } from '@dxos/echo';
 import { type AnyProperties } from '@dxos/echo/internal';
 import { Tooltip } from '@dxos/react-ui';
 import { withLayoutVariants, withTheme } from '@dxos/react-ui/testing';
@@ -61,21 +61,21 @@ const DefaultStory = <T extends AnyProperties = any>({
   );
 };
 
-const RefStory = <T extends AnyProperties = any>(props: StoryProps<T>) => {
-  const onQueryRefOptions = useCallback<NonNullable<FormRootProps<T>['onQueryRefOptions']>>(({ typename }) => {
-    switch (typename) {
-      case TestSchema.Person.typename:
-        return [
-          { dxn: Obj.getDXN(contact1), label: 'Alice' },
-          { dxn: Obj.getDXN(contact2), label: 'Bob' },
-        ];
-      default:
-        return [];
-    }
-  }, []);
-
-  return <DefaultStory<T> onQueryRefOptions={onQueryRefOptions} {...props} />;
-};
+// const RefStory = <T extends AnyProperties = any>(props: StoryProps<T>) => {
+//   const onQueryRefOptions = useCallback<NonNullable<FormRootProps<T>['onQueryRefOptions']>>(({ typename }) => {
+//     switch (typename) {
+//       case TestSchema.Person.typename:
+//         return [
+//           { dxn: Obj.getDXN(contact1), label: 'Alice' },
+//           { dxn: Obj.getDXN(contact2), label: 'Bob' },
+//         ];
+//       default:
+//         return [];
+//     }
+//   }, []);
+
+//   return <DefaultStory<T> onQueryRefOptions={onQueryRefOptions} {...props} />;
+// };
 
 const AddressSchema = Schema.Struct({
   street: Schema.optional(Schema.String.annotations({ title: 'Street' })),
@@ -98,7 +98,7 @@ const meta = {
   title: 'ui/react-ui-form/Form-Old',
   component: Form.Root as any,
   render: DefaultStory,
-  decorators: [withTheme, withLayoutVariants()],
+  decorators: [withTheme(), withLayoutVariants()],
   parameters: {
     layout: 'fullscreen',
     translations,
@@ -287,28 +287,28 @@ export const Enum: StoryObj<StoryProps<ColorType>> = {
 // Refs
 //
 
-const RefSchema = Schema.Struct({
-  contact: Type.Ref(TestSchema.Person).annotations({ title: 'Contact Reference' }),
-  optionalContact: Schema.optional(Type.Ref(TestSchema.Person).annotations({ title: 'Optional Contact Reference' })),
-  refArray: Schema.optional(Schema.Array(Type.Ref(TestSchema.Person))),
-  unknownExpando: Schema.optional(
-    Type.Ref(Type.Expando).annotations({ title: 'Optional Ref to an Expando (DXN Input)' }),
-  ),
-});
-
-type RefSchema = Schema.Schema.Type<typeof RefSchema>;
-
-const contact1 = Obj.make(TestSchema.Person, { name: 'Alice' });
-const contact2 = Obj.make(TestSchema.Person, { name: 'Bob' });
-
-export const Refs: StoryObj<StoryProps<RefSchema>> = {
-  render: RefStory,
-  args: {
-    debug: true,
-    schema: RefSchema,
-    readonly: false,
-    values: {
-      refArray: [Ref.make(contact1), Ref.make(contact2)],
-    },
-  },
-};
+// const RefSchema = Schema.Struct({
+//   contact: Type.Ref(TestSchema.Person).annotations({ title: 'Contact Reference' }),
+//   optionalContact: Schema.optional(Type.Ref(TestSchema.Person).annotations({ title: 'Optional Contact Reference' })),
+//   refArray: Schema.optional(Schema.Array(Type.Ref(TestSchema.Person))),
+//   unknownExpando: Schema.optional(
+//     Type.Ref(TestSchema.Expando).annotations({ title: 'Optional Ref to an Expando (DXN Input)' }),
+//   ),
+// });
+
+// type RefSchema = Schema.Schema.Type<typeof RefSchema>;
+
+// const contact1 = Obj.make(TestSchema.Person, { name: 'Alice' });
+// const contact2 = Obj.make(TestSchema.Person, { name: 'Bob' });
+
+// export const Refs: StoryObj<StoryProps<RefSchema>> = {
+//   render: RefStory,
+//   args: {
+//     debug: true,
+//     schema: RefSchema,
+//     readonly: false,
+//     values: {
+//       refArray: [Ref.make(contact1), Ref.make(contact2)],
+//     },
+//   },
+// };

package/src/components/Form/Form.stories.tsx

@@ -6,13 +6,13 @@ import { type Meta, type StoryObj } from '@storybook/react-vite';
 import * as Schema from 'effect/Schema';
 import React, { useCallback, useState } from 'react';
 
-import { Annotation, Filter, Format, Obj, Tag, Type } from '@dxos/echo';
+import { Annotation, Format, Obj, Tag, Type } from '@dxos/echo';
 import { type AnyProperties } from '@dxos/echo/internal';
 import { log } from '@dxos/log';
 import { useClient } from '@dxos/react-client';
 import { withClientProvider } from '@dxos/react-client/testing';
 import { Tooltip } from '@dxos/react-ui';
-import { withTheme } from '@dxos/react-ui/testing';
+import { withLayout, withTheme } from '@dxos/react-ui/testing';
 
 import { translations } from '../../translations';
 import { TestLayout } from '../testing';
@@ -22,7 +22,7 @@ import { type ExcludeId, Form, type FormRootProps, omitId } from './Form';
 const Organization = Schema.Struct({
   name: Schema.String.pipe(Schema.minLength(1)).annotations({ title: 'Full name' }),
 }).pipe(
-  Type.Obj({
+  Type.object({
     typename: 'example.com/type/Organization', // TODO(burdon): Change all types to /schema
     version: '0.1.0',
   }),
@@ -64,7 +64,7 @@ const Person = Schema.Struct({
     }),
   ),
 }).pipe(
-  Type.Obj({
+  Type.object({
     typename: 'dxos.org/type/Person', // TODO(burdon): Change all types to /schema
     version: '0.1.0',
   }),
@@ -80,10 +80,10 @@ type StoryProps<T extends AnyProperties> = {
 const DefaultStory = <T extends AnyProperties = AnyProperties>({
   debug,
   schema,
-  values: valuesParam,
+  values: valuesProp,
   ...props
 }: StoryProps<T>) => {
-  const [values, setValues] = useState<Partial<T>>(valuesParam ?? {});
+  const [values, setValues] = useState<Partial<T>>(valuesProp ?? {});
   const client = useClient();
   const space = client.spaces.default;
 
@@ -94,17 +94,9 @@ const DefaultStory = <T extends AnyProperties = AnyProperties>({
 
   const handleCancel = useCallback<NonNullable<FormRootProps<T>['onCancel']>>(() => {
     log.info('cancel');
-    setValues(valuesParam ?? {});
+    setValues(valuesProp ?? {});
   }, []);
 
-  const handleQueryRefOptions = useCallback<NonNullable<FormRootProps<T>['onQueryRefOptions']>>(
-    async ({ typename }) => {
-      const objects = await space.db.query(Filter.typename(typename)).run();
-      return objects.map((result: any) => ({ dxn: Obj.getDXN(result), label: Obj.getLabel(result) }));
-    },
-    [space],
-  );
-
   return (
     <Tooltip.Provider>
       <TestLayout json={{ values, schema: schema.ast }}>
@@ -112,9 +104,9 @@ const DefaultStory = <T extends AnyProperties = AnyProperties>({
           debug={debug}
           schema={schema}
           values={values}
+          db={space.db}
           onSave={handleSave}
           onCancel={handleCancel}
-          onQueryRefOptions={handleQueryRefOptions}
           {...props}
         >
           <Form.Viewport>
@@ -135,7 +127,10 @@ const meta = {
   render: DefaultStory,
 
   decorators: [
-    withTheme,
+    withTheme(),
+    withLayout({
+      layout: 'fullscreen',
+    }),
     withClientProvider({
       createIdentity: true,
       createSpace: true,