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

package/src/components/Form/Defaults.tsx

@@ -6,14 +6,15 @@ import React, { useCallback, useEffect, useRef } from 'react';
 
 import { Input, Select, useTranslation } from '@dxos/react-ui';
 
-import { type InputProps, InputHeader } from './Input';
 import { translationKey } from '../../translations';
 
+import { InputHeader, type InputProps } from './Input';
+
 export const TextInput = ({
   type,
   label,
   inputOnly,
-  disabled,
+  readonly,
   placeholder,
   getStatus,
   getValue,
@@ -22,16 +23,16 @@ export const TextInput = ({
 }: InputProps) => {
   const { status, error } = getStatus();
 
-  return disabled && !getValue() ? null : disabled && inputOnly ? (
+  return readonly && !getValue() ? null : readonly === 'static' && inputOnly ? (
     <p>{getValue() ?? ''}</p>
   ) : (
     <Input.Root validationValence={status}>
       {!inputOnly && <InputHeader error={error} label={label} />}
-      {disabled ? (
+      {readonly === 'static' ? (
         <p>{getValue() ?? ''}</p>
       ) : (
         <Input.TextInput
-          disabled={disabled}
+          disabled={!!readonly}
           placeholder={placeholder}
           value={getValue() ?? ''}
           onChange={(event) => onValueChange(type, event.target.value)}
@@ -47,7 +48,7 @@ export const NumberInput = ({
   type,
   label,
   inputOnly,
-  disabled,
+  readonly,
   placeholder,
   getStatus,
   getValue,
@@ -56,19 +57,19 @@ export const NumberInput = ({
 }: InputProps) => {
   const { status, error } = getStatus();
 
-  return disabled && !getValue() ? null : disabled && inputOnly ? (
+  return readonly && !getValue() ? null : readonly === 'static' && inputOnly ? (
     <p>{getValue() ?? ''}</p>
   ) : (
     <Input.Root validationValence={status}>
       {!inputOnly && <InputHeader error={error} label={label} />}
-      {disabled ? (
+      {readonly === 'static' ? (
         <p>{getValue() ?? ''}</p>
       ) : (
         <Input.TextInput
           type='number'
-          disabled={disabled}
+          disabled={!!readonly}
           placeholder={placeholder}
-          value={getValue() ?? 0}
+          value={getValue()}
           onChange={(event) => onValueChange(type, event.target.value)}
           onBlur={onBlur}
         />
@@ -78,7 +79,7 @@ export const NumberInput = ({
   );
 };
 
-export const BooleanInput = ({ type, label, inputOnly, getStatus, getValue, onValueChange, disabled }: InputProps) => {
+export const BooleanInput = ({ type, label, inputOnly, getStatus, getValue, onValueChange, readonly }: InputProps) => {
   const { status, error } = getStatus();
   const checked = Boolean(getValue());
   const { t } = useTranslation(translationKey);
@@ -86,10 +87,10 @@ export const BooleanInput = ({ type, label, inputOnly, getStatus, getValue, onVa
   return (
     <Input.Root validationValence={status}>
       {!inputOnly && <InputHeader error={error} label={label} />}
-      {disabled ? (
+      {readonly === 'static' ? (
         <p>{t(checked ? 'boolean input true value' : 'boolean input false value')}</p>
       ) : (
-        <Input.Switch checked={checked} onCheckedChange={(value) => onValueChange(type, value)} />
+        <Input.Switch disabled={!!readonly} checked={checked} onCheckedChange={(value) => onValueChange(type, value)} />
       )}
       {inputOnly && <Input.DescriptionAndValidation>{error}</Input.DescriptionAndValidation>}
     </Input.Root>
@@ -104,7 +105,7 @@ export const SelectInput = ({
   type,
   label,
   inputOnly,
-  disabled,
+  readonly,
   placeholder,
   options,
   getStatus,
@@ -116,15 +117,15 @@ export const SelectInput = ({
   const value = getValue() as string | undefined;
   const handleValueChange = useCallback((value: string | number) => onValueChange(type, value), [type, onValueChange]);
 
-  return disabled && !value ? null : (
+  return readonly && !value ? null : (
     <Input.Root validationValence={status}>
       {!inputOnly && <InputHeader error={error} label={label} />}
-      {disabled ? (
+      {readonly === 'static' ? (
         <p>{options?.find(({ value: optionValue }) => optionValue === value)?.label ?? String(value)}</p>
       ) : (
         <Select.Root value={value} onValueChange={handleValueChange}>
           {/* TODO(burdon): Placeholder not working? */}
-          <Select.TriggerButton classNames='is-full' disabled={disabled} placeholder={placeholder} />
+          <Select.TriggerButton classNames='is-full' disabled={!!readonly} placeholder={placeholder} />
           <Select.Portal>
             <Select.Content>
               <Select.Viewport>
@@ -135,6 +136,7 @@ export const SelectInput = ({
                   </Select.Option>
                 ))}
               </Select.Viewport>
+              <Select.Arrow />
             </Select.Content>
           </Select.Portal>
         </Select.Root>
@@ -148,7 +150,7 @@ export const MarkdownInput = ({
   type,
   label,
   inputOnly,
-  disabled,
+  readonly,
   placeholder,
   getStatus,
   getValue,
@@ -182,15 +184,15 @@ export const MarkdownInput = ({
   return (
     <Input.Root validationValence={status}>
       {!inputOnly && <InputHeader error={error} label={label} />}
-      {disabled ? (
+      {readonly === 'static' ? (
         <p>{getValue() ?? ''}</p>
       ) : (
         <Input.TextArea
           ref={textareaRef}
-          disabled={disabled}
+          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

@@ -2,24 +2,71 @@
 // 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 { 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 { 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 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' })),
@@ -27,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' })),
@@ -36,40 +82,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} />;
-};
-
-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>
-  );
-};
+type ContactSchema = Schema.Schema.Type<typeof ContactSchema>;
 
-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 +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,
@@ -100,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',
@@ -111,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',
@@ -125,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(
@@ -150,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: {
@@ -176,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: {
@@ -194,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',
@@ -202,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: {
@@ -212,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' })),
@@ -219,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,19 +2,21 @@
 // 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 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>[];
 
@@ -27,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,
@@ -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,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
@@ -44,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}
         />
       )}