@dxos/react-ui-form 0.8.4-main.fd6878d → 0.8.4-main.fffef41

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

@@ -2,18 +2,17 @@
 // 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, Ref, type TypeAnnotation, getObjectDXN } from '@dxos/echo-schema';
-import { live } from '@dxos/live-object';
-import { withSurfaceVariantsLayout } from '@dxos/react-ui/testing';
+import { type Type } from '@dxos/echo';
+import { type BaseObject, Expando, Format, Ref, type TypeAnnotation, getObjectDXN } from '@dxos/echo/internal';
+import { live } from '@dxos/echo/internal';
+import { Tooltip } from '@dxos/react-ui';
+import { withLayoutVariants, withTheme } from '@dxos/react-ui/testing';
 import { Testing } from '@dxos/schema/testing';
-import { withLayout, withTheme } from '@dxos/storybook-utils';
 
 import { translations } from '../../translations';
 import { TestLayout, TestPanel } from '../testing';
@@ -21,6 +20,53 @@ import { TestLayout, TestPanel } from '../testing';
 import { SelectInput } from './Defaults';
 import { Form, type FormProps } from './Form';
 
+type StoryProps<T extends BaseObject> = {
+  debug?: boolean;
+  schema: Type.Obj.Any;
+} & FormProps<T>;
+
+const DefaultStory = <T extends BaseObject = 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 BaseObject = any>(props: StoryProps<T>) => {
+  const onQueryRefOptions = useCallback((typeInfo: TypeAnnotation) => {
+    switch (typeInfo.typename) {
+      case Testing.Person.typename:
+        return [
+          { dxn: getObjectDXN(contact1)!, label: 'John Coltraine' },
+          { dxn: getObjectDXN(contact2)!, label: 'Erykah Badu' },
+        ];
+      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' })),
@@ -28,8 +74,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' })),
@@ -37,40 +82,15 @@ const TestSchema = Schema.Struct({
   address: Schema.optional(AddressSchema),
 }).pipe(Schema.mutable);
 
-type TestType = Schema.Schema.Type<typeof TestSchema>;
+type ContactSchema = Schema.Schema.Type<typeof ContactSchema>;
 
-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} />;
-};
-
-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: {
@@ -79,17 +99,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,
@@ -101,8 +119,9 @@ export const Default: Story<TestType> = {
   },
 };
 
-export const Organization: Story<Schema.Schema.Type<typeof Testing.OrganizationSchema>> = {
+export const Organization: Story = {
   args: {
+    debug: true,
     schema: Testing.OrganizationSchema,
     values: {
       name: 'DXOS',
@@ -112,8 +131,9 @@ 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: {
+    debug: true,
     schema: Testing.OrganizationSchema,
     values: {
       name: 'DXOS',
@@ -126,15 +146,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: Testing.Person,
+    values: {
+      name: 'Bot',
+    },
+  },
+};
+
+//
+// Union
+//
 
 const ShapeSchema = Schema.Struct({
   shape: Schema.optional(
@@ -151,10 +176,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: {
@@ -177,15 +203,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: {
@@ -195,6 +226,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',
@@ -203,8 +262,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: {
@@ -213,6 +273,10 @@ 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' })),
@@ -220,48 +284,19 @@ const RefSchema = Schema.Struct({
   unknownExpando: Schema.optional(Ref(Expando).annotations({ title: 'Optional Ref to an Expando (DXN Input)' })),
 });
 
+type RefSchema = Schema.Schema.Type<typeof RefSchema>;
+
 const contact1 = live(ContactType, { identifiers: [] });
 const contact2 = live(ContactType, { identifiers: [] });
 
-const RefStory = ({ values: initialValues, readonly }: FormProps<any>) => {
-  const [values, setValues] = useState(initialValues);
-  const handleSave = useCallback<NonNullable<FormProps<any>['onSave']>>((values) => {
-    setValues(values);
-  }, []);
-
-  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,15 +2,16 @@
 // 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 BaseObject, 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 FormOptions } from '../../hooks';
+import { type FormHandler, type FormOptions } from '../../hooks';
 
 import { FormActions, type FormOuterSpacing } from './FormActions';
 import { FormFields, type FormFieldsProps } from './FormContent';
@@ -28,29 +29,33 @@ 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;
   // 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>({
   classNames,
+  id,
   testId,
   values: initialValues,
   autoFocus,
   readonly,
   autoSave,
   outerSpacing = true,
-  onCancel,
   schema,
+  onCancel,
   onValuesChanged,
   onValidate,
   onSave,
@@ -58,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}
@@ -82,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}
         />
       )}