@dxos/react-ui-form 0.8.4-main.406dc2a → 0.8.4-main.548089c

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dxos/react-ui-form",
-  "version": "0.8.4-main.406dc2a",
+  "version": "0.8.4-main.548089c",
   "description": "Data components.",
   "homepage": "https://dxos.org",
   "bugs": "https://github.com/dxos/dxos/issues",
@@ -32,50 +32,51 @@
     "@radix-ui/react-context": "1.1.1",
     "date-fns": "^3.3.1",
     "jsonpath": "^1.1.1",
-    "@dxos/async": "0.8.4-main.406dc2a",
-    "@dxos/debug": "0.8.4-main.406dc2a",
-    "@dxos/echo": "0.8.4-main.406dc2a",
-    "@dxos/echo-db": "0.8.4-main.406dc2a",
-    "@dxos/echo-query": "0.8.4-main.406dc2a",
-    "@dxos/effect": "0.8.4-main.406dc2a",
-    "@dxos/invariant": "0.8.4-main.406dc2a",
-    "@dxos/keys": "0.8.4-main.406dc2a",
-    "@dxos/live-object": "0.8.4-main.406dc2a",
-    "@dxos/lit-ui": "0.8.4-main.406dc2a",
-    "@dxos/log": "0.8.4-main.406dc2a",
-    "@dxos/react-client": "0.8.4-main.406dc2a",
-    "@dxos/react-ui-components": "0.8.4-main.406dc2a",
-    "@dxos/react-ui-editor": "0.8.4-main.406dc2a",
-    "@dxos/react-ui-list": "0.8.4-main.406dc2a",
-    "@dxos/react-ui-pickers": "0.8.4-main.406dc2a",
-    "@dxos/react-ui-searchlist": "0.8.4-main.406dc2a",
-    "@dxos/react-ui-types": "0.8.4-main.406dc2a",
-    "@dxos/schema": "0.8.4-main.406dc2a",
-    "@dxos/react-ui-stack": "0.8.4-main.406dc2a",
-    "@dxos/util": "0.8.4-main.406dc2a"
+    "@dxos/async": "0.8.4-main.548089c",
+    "@dxos/debug": "0.8.4-main.548089c",
+    "@dxos/echo": "0.8.4-main.548089c",
+    "@dxos/echo-query": "0.8.4-main.548089c",
+    "@dxos/echo-db": "0.8.4-main.548089c",
+    "@dxos/invariant": "0.8.4-main.548089c",
+    "@dxos/effect": "0.8.4-main.548089c",
+    "@dxos/keys": "0.8.4-main.548089c",
+    "@dxos/lit-ui": "0.8.4-main.548089c",
+    "@dxos/log": "0.8.4-main.548089c",
+    "@dxos/react-client": "0.8.4-main.548089c",
+    "@dxos/live-object": "0.8.4-main.548089c",
+    "@dxos/react-ui-components": "0.8.4-main.548089c",
+    "@dxos/react-ui-pickers": "0.8.4-main.548089c",
+    "@dxos/react-ui-editor": "0.8.4-main.548089c",
+    "@dxos/react-ui-searchlist": "0.8.4-main.548089c",
+    "@dxos/react-ui-stack": "0.8.4-main.548089c",
+    "@dxos/react-ui-list": "0.8.4-main.548089c",
+    "@dxos/schema": "0.8.4-main.548089c",
+    "@dxos/react-ui-types": "0.8.4-main.548089c",
+    "@dxos/types": "0.8.4-main.548089c",
+    "@dxos/util": "0.8.4-main.548089c"
   },
   "devDependencies": {
     "@types/jsonpath": "^0.2.4",
     "@types/react": "~19.2.2",
-    "@types/react-dom": "~19.2.1",
+    "@types/react-dom": "~19.2.2",
     "effect": "3.18.3",
     "fast-check": "^3.19.0",
     "react": "~19.2.0",
     "react-dom": "~19.2.0",
     "vite": "7.1.9",
-    "@dxos/echo-signals": "0.8.4-main.406dc2a",
-    "@dxos/random": "0.8.4-main.406dc2a",
-    "@dxos/react-ui": "0.8.4-main.406dc2a",
-    "@dxos/react-ui-syntax-highlighter": "0.8.4-main.406dc2a",
-    "@dxos/react-ui-theme": "0.8.4-main.406dc2a",
-    "@dxos/storybook-utils": "0.8.4-main.406dc2a"
+    "@dxos/echo-signals": "0.8.4-main.548089c",
+    "@dxos/random": "0.8.4-main.548089c",
+    "@dxos/react-ui": "0.8.4-main.548089c",
+    "@dxos/react-ui-syntax-highlighter": "0.8.4-main.548089c",
+    "@dxos/react-ui-theme": "0.8.4-main.548089c",
+    "@dxos/storybook-utils": "0.8.4-main.548089c"
   },
   "peerDependencies": {
     "effect": "^3.13.3",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
-    "@dxos/react-ui": "0.8.4-main.406dc2a",
-    "@dxos/react-ui-theme": "0.8.4-main.406dc2a"
+    "@dxos/react-ui": "0.8.4-main.548089c",
+    "@dxos/react-ui-theme": "0.8.4-main.548089c"
   },
   "publishConfig": {
     "access": "public"

package/src/components/Form/Defaults.tsx

@@ -192,7 +192,7 @@ export const MarkdownInput = ({
           disabled={!!readonly}
           placeholder={placeholder}
           value={getValue() ?? ''}
-          classNames={'min-bs-auto max-h-40 overflow-auto'}
+          classNames={'min-bs-auto max-bs-40 overflow-auto'}
           onChange={(event) => onValueChange(type, event.target.value)}
           onBlur={onBlur}
           style={{ resize: 'none' }}

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

@@ -54,7 +54,7 @@ const DefaultStory = <T extends BaseObject = any>({
 const RefStory = <T extends BaseObject = any>(props: StoryProps<T>) => {
   const onQueryRefOptions = useCallback((typeInfo: TypeAnnotation) => {
     switch (typeInfo.typename) {
-      case ContactType.typename:
+      case Testing.Person.typename:
         return [
           { dxn: getObjectDXN(contact1)!, label: 'John Coltraine' },
           { dxn: getObjectDXN(contact2)!, label: 'Erykah Badu' },
@@ -147,10 +147,10 @@ export const OrganizationAutoSave: Story = {
 // TODO(burdon): Type issue with employer reference.
 // TODO(burdon): Test table/form with compound values (e.g., address).
 // Property name is missing in type EncodedReference but required in type
-export const Contact: Story = {
+export const Person: Story = {
   args: {
     debug: true,
-    schema: Testing.ContactSchema,
+    schema: Testing.Person,
     values: {
       name: 'Bot',
     },

package/src/components/Form/Form.tsx

@@ -29,6 +29,7 @@ export type ComponentLookup = (args: {
 export type CustomInputMap = Partial<Record<string, InputComponent>>;
 
 export type FormProps<T extends BaseObject> = ThemedClassName<{
+  id?: string;
   values: Partial<T>;
   // TODO(burdon): Autofocus first input.
   autoFocus?: boolean;
@@ -46,6 +47,7 @@ export type FormProps<T extends BaseObject> = ThemedClassName<{
 
 export const Form = <T extends BaseObject>({
   classNames,
+  id,
   testId,
   values: initialValues,
   autoFocus,
@@ -93,7 +95,7 @@ export const Form = <T extends BaseObject>({
       onValid={handleValid}
       onSave={onSave}
     >
-      <div role='none' className='contents' data-testid={testId}>
+      <div role='none' className='contents' {...(id && { 'data-object-id': id })} data-testid={testId}>
         <FormFields
           {...props}
           ref={formRef}

package/src/components/Form/FormActions.tsx

@@ -37,7 +37,7 @@ export const FormActions = ({ readonly, onCancel, outerSpacing = true }: FormAct
       )}
     >
       {onCancel && !readonly && (
-        <IconButton data-testid='cancel-button' icon='ph--x--regular' label={t('button cancel')} onClick={onCancel} />
+        <IconButton data-testid='cancel-button' icon='ph--x--regular' label={t('cancel button')} onClick={onCancel} />
       )}
       {handleSave && (
         <IconButton
@@ -45,7 +45,7 @@ export const FormActions = ({ readonly, onCancel, outerSpacing = true }: FormAct
           data-testid='save-button'
           disabled={!canSave}
           icon='ph--check--regular'
-          label={t('button save')}
+          label={t('save button')}
           onClick={handleSave}
         />
       )}

package/src/components/Form/custom/SelectOptionsInput.tsx

@@ -121,7 +121,7 @@ export const SelectOptionInput = ({ type, label, readonly, getStatus, getValue,
             readonly={!!readonly}
           >
             {({ items }) => (
-              <div role='list' className='w-full overflow-auto'>
+              <div role='list' className='is-full overflow-auto'>
                 {items?.map((item) => (
                   <div key={item.id}>
                     <List.Item

package/src/components/ObjectPicker/ObjectPicker.stories.tsx

@@ -13,7 +13,7 @@ import { Filter, useQuery } from '@dxos/react-client/echo';
 import { useClientProvider, withClientProvider } from '@dxos/react-client/testing';
 import { Button } from '@dxos/react-ui';
 import { withTheme } from '@dxos/react-ui/testing';
-import { DataType } from '@dxos/schema';
+import { Person } from '@dxos/types';
 
 import { translations } from '../../translations';
 
@@ -22,12 +22,12 @@ import { ObjectPicker } from './ObjectPicker';
 faker.seed(1);
 
 const createPerson = () =>
-  Obj.make(DataType.Person, {
+  Obj.make(Person.Person, {
     fullName: faker.person.fullName(),
   });
 
 const omitId = Schema.omit<any, any, ['id']>('id');
-const personSchema = omitId(DataType.Person);
+const personSchema = omitId(Person.Person);
 
 // Mock functions for testing
 const mockHandleSelect = fn();
@@ -65,7 +65,7 @@ const DefaultStory = () => {
     (values: any) => {
       console.log('[on create]', values);
       if (!space) return;
-      const newPerson = space.db.add(Obj.make(DataType.Person, values));
+      const newPerson = space.db.add(Obj.make(Person.Person, values));
       mockHandleCreate(values);
       return newPerson;
     },
@@ -101,7 +101,7 @@ const meta = {
   decorators: [
     withTheme,
     withClientProvider({
-      types: [DataType.Person],
+      types: [Person.Person],
       createIdentity: true,
       createSpace: true,
     }),

package/src/components/ViewEditor/ViewEditor.stories.tsx

@@ -12,7 +12,8 @@ import { useQuery } from '@dxos/react-client/echo';
 import { useClientProvider, withClientProvider } from '@dxos/react-client/testing';
 import { useAsyncEffect } from '@dxos/react-ui';
 import { withTheme } from '@dxos/react-ui/testing';
-import { DataType, type ProjectionModel, createView, getTypenameFromQuery } from '@dxos/schema';
+import { type ProjectionModel, View, getTypenameFromQuery } from '@dxos/schema';
+import { Employer, Organization, Person, Project } from '@dxos/types';
 
 import { translations } from '../../translations';
 import { TestLayout, TestPanel, VIEW_EDITOR_DEBUG_SYMBOL } from '../testing';
@@ -21,16 +22,16 @@ import { ViewEditor, type ViewEditorProps } from './ViewEditor';
 
 const types = [
   // TODO(burdon): Get label from annotation.
-  { value: Type.getTypename(DataType.Organization), label: 'Organization' },
-  { value: Type.getTypename(DataType.Person), label: 'Person' },
-  { value: Type.getTypename(DataType.Project), label: 'Project' },
-  { value: Type.getTypename(DataType.Employer), label: 'Employer' },
+  { value: Organization.Organization.typename, label: 'Organization' },
+  { value: Person.Person.typename, label: 'Person' },
+  { value: Type.getTypename(Project.Project), label: 'Project' },
+  { value: Employer.Employer.typename, label: 'Employer' },
 ];
 
 // Type definition for debug objects exposed to tests.
 export type ViewEditorDebugObjects = {
   schema: EchoSchema;
-  view: DataType.View;
+  view: View.View;
   projection: ProjectionModel;
 };
 
@@ -39,7 +40,7 @@ type StoryProps = Pick<ViewEditorProps, 'readonly' | 'mode'>;
 const DefaultStory = (props: StoryProps) => {
   const { space } = useClientProvider();
   const [schema, setSchema] = useState<EchoSchema>();
-  const [view, setView] = useState<DataType.View>();
+  const [view, setView] = useState<View.View>();
   const projectionRef = useRef<ProjectionModel>(null);
 
   const tags = useQuery(space, Filter.type(Tag.Tag));
@@ -69,9 +70,9 @@ const DefaultStory = (props: StoryProps) => {
       );
 
       const [testSchema] = await space.db.schemaRegistry.register([TestSchema, AlternateSchema]);
-      const view = createView({
+      const view = View.make({
         name: 'Test',
-        query: Query.select(Filter.typename(TestSchema.typename)),
+        query: Query.select(Filter.type(TestSchema)),
         jsonSchema: Type.toJsonSchema(TestSchema),
         presentation: Obj.make(Type.Expando, {}),
       });
@@ -98,7 +99,7 @@ const DefaultStory = (props: StoryProps) => {
           return;
         }
 
-        const newView = createView({
+        const newView = View.make({
           query,
           jsonSchema: newSchema.jsonSchema,
           presentation: Obj.make(Type.Expando, {}),

package/src/components/ViewEditor/ViewEditor.test.tsx

@@ -7,7 +7,7 @@ import { cleanup, fireEvent, screen, waitFor } from '@testing-library/react';
 import { afterEach, describe, expect, test } from 'vitest';
 
 import { EchoSchema, isInstanceOf } from '@dxos/echo/internal';
-import { DataType, ProjectionModel } from '@dxos/schema';
+import { ProjectionModel, View } from '@dxos/schema';
 
 import { VIEW_EDITOR_DEBUG_SYMBOL } from '../testing';
 
@@ -20,7 +20,7 @@ const getViewEditorDebugObjects = (): ViewEditorDebugObjects => {
   const debugObjects = (window as any)[VIEW_EDITOR_DEBUG_SYMBOL] as ViewEditorDebugObjects;
   expect(debugObjects).toBeDefined();
   expect(debugObjects.schema).toBeInstanceOf(EchoSchema);
-  expect(isInstanceOf(DataType.View, debugObjects.view)).toBeTruthy();
+  expect(isInstanceOf(View.View, debugObjects.view)).toBeTruthy();
   expect(debugObjects.projection).toBeInstanceOf(ProjectionModel);
   return debugObjects;
 };

package/src/components/ViewEditor/ViewEditor.tsx

@@ -18,11 +18,11 @@ 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,
+  type View,
   getTypenameFromQuery,
 } from '@dxos/schema';
 
@@ -36,8 +36,8 @@ const listItemGrid = 'grid grid-cols-subgrid col-span-5';
 export type ViewEditorProps = ThemedClassName<
   {
     schema: Schema.Schema.AnyNoContext;
-    view: DataType.View;
-    mode?: 'schema' | 'query';
+    view: View.View;
+    mode?: 'schema' | 'query' | 'named-query';
     registry?: SchemaRegistry;
     readonly?: boolean;
     showHeading?: boolean;
@@ -96,10 +96,13 @@ export const ViewEditor = forwardRef<ProjectionModel, ViewEditorProps>(
             : QueryAST.Query.annotations({ title: 'Query' }),
       });
 
-      if (mode === 'query') {
-        return Schema.Struct({
+      if (mode === 'query' || mode === 'named-query') {
+        const name = Schema.Struct({
           name: Schema.optional(Schema.String.annotations({ title: 'Name' })),
-          ...base.fields,
+        });
+
+        return Schema.Struct({
+          ...(mode === 'named-query' ? { ...name.fields, ...base.fields } : base.fields),
           target: Schema.optional(Schema.String.annotations({ title: 'Target Queue' })),
         }).pipe(Schema.mutable);
       }
@@ -300,7 +303,7 @@ export const ViewEditor = forwardRef<ProjectionModel, ViewEditorProps>(
           <div role='none' className={outerSpacing ? cardSpacing : 'mlb-cardSpacingBlock'}>
             <IconButton
               icon='ph--plus--regular'
-              label={t('button add property')}
+              label={t('add property button')}
               onClick={readonly ? undefined : handleAdd}
               // TODO(burdon): Show field limit in ux (not tooltip).
               disabled={view.projection.fields.length >= VIEW_FIELD_LIMIT}

package/src/translations.ts

@@ -15,7 +15,7 @@ export const translations = [
         'empty readonly ref field label': '(none)',
 
         // TODO(burdon): Standardize field/property.
-        'button add property': 'Add property',
+        'add property button': 'Add property',
         'field property label': 'Property',
         'field property placeholder': 'Property name',
         'field format label': 'Type',
@@ -33,8 +33,7 @@ export const translations = [
         'ref field placeholder_other': 'Select items…',
 
         // TODO(burdon): Factor out?
-        'button cancel': 'Cancel',
-        'button save': 'Save',
+        'save button': 'Save',
 
         // FormatEnum
         'format boolean': 'Boolean',

package/src/util/refs.ts

@@ -18,11 +18,6 @@ type RefProps = {
 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);
@@ -34,5 +29,10 @@ export const getRefProps = (property: SchemaProperty<any>): RefProps | undefined
     }
   }
 
+  // Direct reference.
+  if (format === FormatEnum.Ref) {
+    return { ast, isArray: false };
+  }
+
   return undefined;
 };