@dxos/react-ui-form 0.8.4-main.67995b8 → 0.8.4-main.70d3990

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

@@ -2,24 +2,69 @@
 // Copyright 2024 DXOS.org
 //
 
-import '@dxos-theme';
-
 import { type Meta, type StoryObj } from '@storybook/react-vite';
-import { Schema } from 'effect';
+import * as Schema from 'effect/Schema';
 import React, { useCallback, useState } from 'react';
 
-import { ContactType } from '@dxos/client/testing';
-import { type BaseObject, Expando, Format, getObjectDXN, Ref, type TypeAnnotation } from '@dxos/echo-schema';
-import { live } from '@dxos/live-object';
-import { withSurfaceVariantsLayout } from '@dxos/react-ui/testing';
-import { Testing } from '@dxos/schema/testing';
-import { withLayout, withTheme } from '@dxos/storybook-utils';
+import { Format, Obj, Ref, Type } from '@dxos/echo';
+import { type AnyProperties, type TypeAnnotation } from '@dxos/echo/internal';
+import { Tooltip } from '@dxos/react-ui';
+import { withLayoutVariants, withTheme } from '@dxos/react-ui/testing';
+import { TestSchema } from '@dxos/schema/testing';
 
-import { SelectInput } from './Defaults';
-import { Form, type FormProps } from './Form';
 import { translations } from '../../translations';
 import { TestLayout, TestPanel } from '../testing';
 
+import { SelectInput } from './Defaults';
+import { Form, type FormProps } from './Form';
+
+type StoryProps<T extends AnyProperties> = {
+  debug?: boolean;
+  schema: Schema.Schema.AnyNoContext;
+} & FormProps<T>;
+
+const DefaultStory = <T extends AnyProperties = any>({
+  debug,
+  schema,
+  values: initialValues,
+  ...props
+}: StoryProps<T>) => {
+  const [values, setValues] = useState(initialValues);
+  const handleSave = useCallback<NonNullable<FormProps<T>['onSave']>>((values) => {
+    setValues(values);
+  }, []);
+
+  if (debug) {
+    return (
+      <Tooltip.Provider>
+        <TestLayout json={{ values, schema: schema.ast }}>
+          <TestPanel>
+            <Form<T> schema={schema} values={values} onSave={handleSave} {...props} />
+          </TestPanel>
+        </TestLayout>
+      </Tooltip.Provider>
+    );
+  }
+
+  return <Form<T> schema={schema} values={values} onSave={handleSave} {...props} />;
+};
+
+const RefStory = <T extends AnyProperties = any>(props: StoryProps<T>) => {
+  const onQueryRefOptions = useCallback((typeInfo: TypeAnnotation) => {
+    switch (typeInfo.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' })),
   city: Schema.optional(Schema.String.annotations({ title: 'City' })),
@@ -27,8 +72,7 @@ const AddressSchema = Schema.Struct({
   location: Schema.optional(Format.GeoPoint.annotations({ title: 'Location' })),
 }).annotations({ title: 'Address' });
 
-// TODO(burdon): Translations?
-const TestSchema = Schema.Struct({
+const ContactSchema = Schema.Struct({
   name: Schema.optional(Schema.String.annotations({ title: 'Name' })),
   active: Schema.optional(Schema.Boolean.annotations({ title: 'Active' })),
   rank: Schema.optional(Schema.Number.annotations({ title: 'Rank' })),
@@ -36,40 +80,15 @@ const TestSchema = Schema.Struct({
   address: Schema.optional(AddressSchema),
 }).pipe(Schema.mutable);
 
-type TestType = Schema.Schema.Type<typeof TestSchema>;
-
-type StoryProps<T extends BaseObject> = { schema: Schema.Schema<T> } & FormProps<T>;
-
-const DefaultStory = <T extends BaseObject>({ schema, values: initialValues, ...props }: StoryProps<T>) => {
-  const [values, setValues] = useState(initialValues);
-  const handleSave = useCallback<NonNullable<FormProps<T>['onSave']>>((values) => {
-    setValues(values);
-  }, []);
-
-  return <Form<T> schema={schema} values={values} onSave={handleSave} {...props} />;
-};
+type ContactSchema = Schema.Schema.Type<typeof ContactSchema>;
 
-const DebugStory = <T extends BaseObject>({ schema, values: initialValues, ...props }: StoryProps<T>) => {
-  const [values, setValues] = useState(initialValues);
-  const handleSave = useCallback<NonNullable<FormProps<T>['onSave']>>((values) => {
-    setValues(values);
-  }, []);
-
-  return (
-    <TestLayout json={{ values, schema: schema.ast.toJSON() }}>
-      <TestPanel>
-        <Form<T> schema={schema} values={values} onSave={handleSave} {...props} />
-      </TestPanel>
-    </TestLayout>
-  );
-};
-
-const meta: Meta<StoryProps<any>> = {
+const meta = {
   title: 'ui/react-ui-form/Form',
-  component: Form<any>,
-  render: DebugStory,
-  decorators: [withLayout({ fullscreen: true }), withTheme],
+  component: Form as any,
+  render: DefaultStory,
+  decorators: [withTheme, withLayoutVariants()],
   parameters: {
+    layout: 'fullscreen',
     translations,
   },
   argTypes: {
@@ -78,17 +97,15 @@ const meta: Meta<StoryProps<any>> = {
       description: 'Readonly',
     },
   },
-};
+} satisfies Meta<StoryProps<any>>;
 
 export default meta;
 
-type Story<T extends BaseObject> = StoryObj<StoryProps<T>>;
+type Story = StoryObj<typeof meta>;
 
-export const Default: Story<TestType> = {
-  render: DefaultStory,
-  decorators: [withSurfaceVariantsLayout(), withTheme],
+export const Default: Story = {
   args: {
-    schema: TestSchema,
+    schema: ContactSchema,
     values: {
       name: 'DXOS',
       active: true,
@@ -100,9 +117,10 @@ export const Default: Story<TestType> = {
   },
 };
 
-export const Organization: Story<Schema.Schema.Type<typeof Testing.OrganizationSchema>> = {
+export const Organization: Story = {
   args: {
-    schema: Testing.OrganizationSchema,
+    debug: true,
+    schema: TestSchema.OrganizationSchema,
     values: {
       name: 'DXOS',
       website: 'https://dxos.org',
@@ -111,9 +129,10 @@ export const Organization: Story<Schema.Schema.Type<typeof Testing.OrganizationS
   },
 };
 
-export const OrganizationAutoSave: Story<Schema.Schema.Type<typeof Testing.OrganizationSchema>> = {
+export const OrganizationAutoSave: Story = {
   args: {
-    schema: Testing.OrganizationSchema,
+    debug: true,
+    schema: TestSchema.OrganizationSchema,
     values: {
       name: 'DXOS',
       website: 'https://dxos.org',
@@ -125,15 +144,20 @@ export const OrganizationAutoSave: Story<Schema.Schema.Type<typeof Testing.Organ
 
 // TODO(burdon): Type issue with employer reference.
 // TODO(burdon): Test table/form with compound values (e.g., address).
-// export const Contact: Story<Testing.ContactSchemaType> = {
-//   args: {
-//     // Property name is missing in type EncodedReference but required in type
-//     schema: Testing.ContactSchema,
-//     values: {
-//       name: 'Bot',
-//     },
-//   },
-// };
+// Property name is missing in type EncodedReference but required in type
+export const Person: Story = {
+  args: {
+    debug: true,
+    schema: TestSchema.Person,
+    values: {
+      name: 'Bot',
+    },
+  },
+};
+
+//
+// Union
+//
 
 const ShapeSchema = Schema.Struct({
   shape: Schema.optional(
@@ -150,10 +174,11 @@ const ShapeSchema = Schema.Struct({
   ),
 }).pipe(Schema.mutable);
 
-type ShapeType = Schema.Schema.Type<typeof ShapeSchema>;
+type ShapeSchema = Schema.Schema.Type<typeof ShapeSchema>;
 
-export const DiscriminatedShape: Story<ShapeType> = {
+export const DiscriminatedShape: StoryObj<StoryProps<ShapeSchema>> = {
   args: {
+    debug: true,
     schema: ShapeSchema,
     readonly: false,
     values: {
@@ -176,15 +201,20 @@ export const DiscriminatedShape: Story<ShapeType> = {
   },
 };
 
+//
+// Arrays
+//
+
 const ArraysSchema = Schema.Struct({
   names: Schema.Array(Schema.String.pipe(Schema.nonEmptyString())),
   addresses: Schema.Array(AddressSchema),
 }).pipe(Schema.mutable);
 
-type ArraysType = Schema.Schema.Type<typeof ArraysSchema>;
+type ArraysSchema = Schema.Schema.Type<typeof ArraysSchema>;
 
-export const Arrays: StoryObj<FormProps<ArraysType>> = {
+export const Arrays: StoryObj<StoryProps<ArraysSchema>> = {
   args: {
+    debug: true,
     schema: ArraysSchema,
     readonly: false,
     values: {
@@ -194,6 +224,34 @@ export const Arrays: StoryObj<FormProps<ArraysType>> = {
   },
 };
 
+//
+// Tuple
+//
+
+// TODO(wittjosiah): Only GeoPoint is works currently.
+const TupleSchema = Schema.Struct({
+  tuple: Schema.Tuple(Schema.Number, Schema.String, Schema.Boolean),
+  geopoint: Format.GeoPoint,
+}).pipe(Schema.mutable);
+
+type TupleSchema = Schema.Schema.Type<typeof TupleSchema>;
+
+export const Tuple: StoryObj<StoryProps<TupleSchema>> = {
+  args: {
+    debug: true,
+    schema: TupleSchema,
+    readonly: false,
+    values: {
+      tuple: [1, 'a', true],
+      geopoint: [-122.41941, 37.77492],
+    },
+  },
+};
+
+//
+// Enum
+//
+
 const ColorSchema = Schema.Struct({
   color: Schema.Union(Schema.Literal('red'), Schema.Literal('green'), Schema.Literal('blue')).annotations({
     title: 'Color',
@@ -202,8 +260,9 @@ const ColorSchema = Schema.Struct({
 
 type ColorType = Schema.Schema.Type<typeof ColorSchema>;
 
-export const Enum: StoryObj<FormProps<ColorType>> = {
+export const Enum: StoryObj<StoryProps<ColorType>> = {
   args: {
+    debug: true,
     schema: ColorSchema,
     readonly: false,
     values: {
@@ -212,55 +271,32 @@ export const Enum: StoryObj<FormProps<ColorType>> = {
   },
 };
 
+//
+// Refs
+//
+
 const RefSchema = Schema.Struct({
-  contact: Ref(ContactType).annotations({ title: 'Contact Reference' }),
-  optionalContact: Schema.optional(Ref(ContactType).annotations({ title: 'Optional Contact Reference' })),
-  refArray: Schema.optional(Schema.Array(Ref(ContactType))),
-  unknownExpando: Schema.optional(Ref(Expando).annotations({ title: 'Optional Ref to an Expando (DXN Input)' })),
+  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)' }),
+  ),
 });
 
-const contact1 = live(ContactType, { identifiers: [] });
-const contact2 = live(ContactType, { identifiers: [] });
+type RefSchema = Schema.Schema.Type<typeof RefSchema>;
 
-const RefStory = ({ values: initialValues, readonly }: FormProps<any>) => {
-  const [values, setValues] = useState(initialValues);
-  const handleSave = useCallback<NonNullable<FormProps<any>['onSave']>>((values) => {
-    setValues(values);
-  }, []);
+const contact1 = Obj.make(TestSchema.Person, { name: 'Alice' });
+const contact2 = Obj.make(TestSchema.Person, { name: 'Bob' });
 
-  const onQueryRefOptions = useCallback((typeInfo: TypeAnnotation) => {
-    switch (typeInfo.typename) {
-      case ContactType.typename:
-        return [
-          { dxn: getObjectDXN(contact1)!, label: 'John Coltraine' },
-          { dxn: getObjectDXN(contact2)!, label: 'Erykah Badu' },
-        ];
-      default:
-        return [];
-    }
-  }, []);
-
-  return (
-    <TestLayout json={{ values, schema: RefSchema.ast.toJSON() }}>
-      <TestPanel>
-        <Form
-          schema={RefSchema}
-          values={values}
-          readonly={readonly}
-          onSave={handleSave}
-          onQueryRefOptions={onQueryRefOptions}
-        />
-      </TestPanel>
-    </TestLayout>
-  );
-};
-
-export const Refs: StoryObj<FormProps<ContactType>> = {
+export const Refs: StoryObj<StoryProps<RefSchema>> = {
   render: RefStory,
   args: {
+    debug: true,
+    schema: RefSchema,
     readonly: false,
     values: {
       refArray: [Ref.make(contact1), Ref.make(contact2)],
-    } as any,
+    },
   },
 };

package/src/components/Form/Form.tsx

@@ -2,21 +2,23 @@
 // Copyright 2024 DXOS.org
 //
 
-import { type Schema } from 'effect';
-import React, { type ReactElement, useEffect, useMemo, useRef } from 'react';
+import { useFocusFinders } from '@fluentui/react-tabster';
+import type * as Schema from 'effect/Schema';
+import React, { type ReactElement, useCallback, useEffect, useRef } from 'react';
 
-import { type BaseObject, type PropertyKey } from '@dxos/echo-schema';
+import { type AnyProperties, type PropertyKey } from '@dxos/echo/internal';
 import { type ThemedClassName } from '@dxos/react-ui';
 import { cardDialogOverflow, cardSpacing } from '@dxos/react-ui-stack';
-import { type SchemaProperty } from '@dxos/schema';
+import { type ProjectionModel, type SchemaProperty } from '@dxos/schema';
+
+import { type FormHandler, type FormOptions } from '../../hooks';
 
 import { FormActions, type FormOuterSpacing } from './FormActions';
 import { FormFields, type FormFieldsProps } from './FormContent';
 import { FormProvider } from './FormContext';
-import { type InputProps, type InputComponent } from './Input';
-import { type FormOptions } from '../../hooks';
+import { type InputComponent, type InputProps } from './Input';
 
-export type PropsFilter<T extends BaseObject> = (props: SchemaProperty<T>[]) => SchemaProperty<T>[];
+export type PropsFilter<T extends AnyProperties> = (props: SchemaProperty<T>[]) => SchemaProperty<T>[];
 
 export type ComponentLookup = (args: {
   prop: string;
@@ -26,30 +28,34 @@ export type ComponentLookup = (args: {
 
 export type CustomInputMap = Partial<Record<string, InputComponent>>;
 
-export type FormProps<T extends BaseObject> = ThemedClassName<{
+export type FormProps<T extends AnyProperties> = ThemedClassName<{
+  id?: string;
   values: Partial<T>;
   // TODO(burdon): Autofocus first input.
   autoFocus?: boolean;
   // TODO(burdon): Change to JsonPath includes/excludes.
   filter?: PropsFilter<T>;
   sort?: PropertyKey<T>[];
+  projection?: ProjectionModel;
   autoSave?: boolean;
   outerSpacing?: FormOuterSpacing;
   onCancel?: () => void;
 }> &
   Pick<FormOptions<T>, 'schema' | 'onValuesChanged' | 'onValidate' | 'onSave'> &
+  // TODO(wittjosiah): This needs to support different ref field options per field.
   FormFieldsProps;
 
-export const Form = <T extends BaseObject>({
+export const Form = <T extends AnyProperties>({
   classNames,
+  id,
   testId,
   values: initialValues,
   autoFocus,
   readonly,
   autoSave,
   outerSpacing = true,
-  onCancel,
   schema,
+  onCancel,
   onValuesChanged,
   onValidate,
   onSave,
@@ -57,19 +63,27 @@ export const Form = <T extends BaseObject>({
 }: FormProps<T>) => {
   const formRef = useRef<HTMLDivElement>(null);
 
-  // TODO(burdon): Rename.
-  const handleValid = useMemo(() => (autoSave ? onSave : undefined), [autoSave, onSave]);
-
-  // Focus the first input element within this form.
+  // Focus the first focusable element within this form.
+  const { findFirstFocusable } = useFocusFinders();
   useEffect(() => {
     if (autoFocus && formRef.current) {
-      const input = formRef.current.querySelector('input');
-      if (input) {
-        input.focus();
+      const firstFocusable = findFirstFocusable(formRef.current);
+      if (firstFocusable) {
+        firstFocusable.focus();
       }
     }
   }, [autoFocus]);
 
+  // TODO(burdon): Name?
+  const handleValid = useCallback(
+    async (values: any, meta: { changed: FormHandler<T>['changed'] }) => {
+      if (autoSave) {
+        await onSave?.(values, meta);
+      }
+    },
+    [autoSave, onSave],
+  );
+
   return (
     <FormProvider
       formRef={formRef}
@@ -81,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}
@@ -99,7 +113,7 @@ export const Form = <T extends BaseObject>({
           readonly={readonly}
           schema={schema}
         />
-        {(onCancel || onSave) && !autoSave && (
+        {(onCancel || onSave) && !autoSave && !readonly && (
           <FormActions readonly={readonly} onCancel={onCancel} outerSpacing={outerSpacing} />
         )}
       </div>

package/src/components/Form/FormActions.tsx

@@ -8,9 +8,10 @@ import { IconButton, useTranslation } from '@dxos/react-ui';
 import { cardSpacing } from '@dxos/react-ui-stack';
 import { mx } from '@dxos/react-ui-theme';
 
-import { useFormContext } from './FormContext';
 import { translationKey } from '../../translations';
 
+import { useFormContext } from './FormContext';
+
 export type FormOuterSpacing = boolean | 'blockStart-0' | 'scroll-fields';
 
 export type FormActionsProps = {
@@ -36,7 +37,12 @@ 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 label')}
+          onClick={onCancel}
+        />
       )}
       {handleSave && (
         <IconButton
@@ -44,7 +50,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 label')}
           onClick={handleSave}
         />
       )}