@dxos/react-ui-form 0.8.2-main.f11618f → 0.8.2-staging.42af850

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

@@ -5,38 +5,40 @@
 import '@dxos-theme';
 
 import { type Meta, type StoryObj } from '@storybook/react';
+import { Schema } from 'effect';
 import React, { useCallback, useState } from 'react';
 
 import { ContactType } from '@dxos/client/testing';
-import { AST, type BaseObject, Expando, Format, getDXN, Ref, S, type TypeAnnotation } from '@dxos/echo-schema';
+import { type BaseObject, Expando, Format, getDXN, 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 { withTheme } from '@dxos/storybook-utils';
 
 import { SelectInput } from './Defaults';
 import { Form, type FormProps } from './Form';
 import translations from '../../translations';
 import { TestLayout, TestPanel } from '../testing';
 
-const AddressSchema = S.Struct({
-  street: S.optional(S.String.annotations({ [AST.TitleAnnotationId]: 'Street' })),
-  city: S.optional(S.String.annotations({ [AST.TitleAnnotationId]: 'City' })),
-  zip: S.optional(S.String.pipe(S.pattern(/^\d{5}(-\d{4})?$/)).annotations({ [AST.TitleAnnotationId]: 'ZIP' })),
-  location: S.optional(Format.GeoPoint.annotations({ [AST.TitleAnnotationId]: 'Location' })),
-}).annotations({ [AST.TitleAnnotationId]: 'Address' });
+const AddressSchema = Schema.Struct({
+  street: Schema.optional(Schema.String.annotations({ title: 'Street' })),
+  city: Schema.optional(Schema.String.annotations({ title: 'City' })),
+  zip: Schema.optional(Schema.String.pipe(Schema.pattern(/^\d{5}(-\d{4})?$/)).annotations({ title: 'ZIP' })),
+  location: Schema.optional(Format.GeoPoint.annotations({ title: 'Location' })),
+}).annotations({ title: 'Address' });
 
 // TODO(burdon): Translations?
-const TestSchema = S.Struct({
-  name: S.optional(S.String.annotations({ [AST.TitleAnnotationId]: 'Name' })),
-  active: S.optional(S.Boolean.annotations({ [AST.TitleAnnotationId]: 'Active' })),
-  rank: S.optional(S.Number.annotations({ [AST.TitleAnnotationId]: 'Rank' })),
-  website: S.optional(Format.URL.annotations({ [AST.TitleAnnotationId]: 'Website' })),
-  address: S.optional(AddressSchema),
-}).pipe(S.mutable);
+const TestSchema = 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' })),
+  website: Schema.optional(Format.URL.annotations({ title: 'Website' })),
+  address: Schema.optional(AddressSchema),
+}).pipe(Schema.mutable);
 
-type TestType = S.Schema.Type<typeof TestSchema>;
+type TestType = Schema.Schema.Type<typeof TestSchema>;
 
-type StoryProps<T extends BaseObject> = { schema: S.Schema<T> } & FormProps<T>;
+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);
@@ -44,6 +46,15 @@ const DefaultStory = <T extends BaseObject>({ schema, values: initialValues, ...
     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>
@@ -56,11 +67,17 @@ const DefaultStory = <T extends BaseObject>({ schema, values: initialValues, ...
 const meta: Meta<StoryProps<any>> = {
   title: 'ui/react-ui-form/Form',
   component: Form,
-  render: DefaultStory,
-  decorators: [withLayout({ fullscreen: true, tooltips: true }), withTheme],
+  render: DebugStory,
+  decorators: [withTheme],
   parameters: {
     translations,
   },
+  argTypes: {
+    readonly: {
+      control: 'boolean',
+      description: 'Readonly',
+    },
+  },
 };
 
 export default meta;
@@ -68,6 +85,8 @@ export default meta;
 type Story<T extends BaseObject> = StoryObj<StoryProps<T>>;
 
 export const Default: Story<TestType> = {
+  render: DefaultStory,
+  decorators: [withSurfaceVariantsLayout(), withTheme],
   args: {
     schema: TestSchema,
     values: {
@@ -77,6 +96,7 @@ export const Default: Story<TestType> = {
         zip: '11205',
       },
     },
+    readonly: false,
   },
 };
 
@@ -85,8 +105,9 @@ export const Organization: Story<Testing.Organization> = {
     schema: Testing.OrganizationSchema,
     values: {
       name: 'DXOS',
-      // website: 'https://dxos.org',
+      website: 'https://dxos.org',
     },
+    readonly: false,
   },
 };
 
@@ -95,9 +116,10 @@ export const OrganizationAutoSave: Story<Testing.Organization> = {
     schema: Testing.OrganizationSchema,
     values: {
       name: 'DXOS',
-      // website: 'https://dxos.org',
+      website: 'https://dxos.org',
     },
     autoSave: true,
+    readonly: false,
   },
 };
 
@@ -113,96 +135,58 @@ export const OrganizationAutoSave: Story<Testing.Organization> = {
 //   },
 // };
 
-//
-// TODO(burdon): Move into separate storybook and use test types.
-//
-
-const ShapeSchema = S.Struct({
-  shape: S.optional(
-    S.Union(
-      S.Struct({
-        type: S.Literal('circle').annotations({ [AST.TitleAnnotationId]: 'Type' }),
-        radius: S.optional(S.Number.annotations({ [AST.TitleAnnotationId]: 'Radius' })),
+const ShapeSchema = Schema.Struct({
+  shape: Schema.optional(
+    Schema.Union(
+      Schema.Struct({
+        type: Schema.Literal('circle').annotations({ title: 'Type' }),
+        radius: Schema.optional(Schema.Number.annotations({ title: 'Radius' })),
       }),
-      S.Struct({
-        type: S.Literal('square').annotations({ [AST.TitleAnnotationId]: 'Type' }),
-        size: S.optional(S.Number.pipe(S.nonNegative()).annotations({ [AST.TitleAnnotationId]: 'Size' })),
+      Schema.Struct({
+        type: Schema.Literal('square').annotations({ title: 'Type' }),
+        size: Schema.optional(Schema.Number.pipe(Schema.nonNegative()).annotations({ title: 'Size' })),
       }),
-    ).annotations({ [AST.TitleAnnotationId]: 'Shape' }),
+    ).annotations({ title: 'Shape' }),
   ),
-}).pipe(S.mutable);
+}).pipe(Schema.mutable);
 
-type ShapeType = S.Schema.Type<typeof ShapeSchema>;
+type ShapeType = Schema.Schema.Type<typeof ShapeSchema>;
 
-type DiscriminatedUnionStoryProps = FormProps<ShapeType>;
-
-const DiscriminatedUnionStory = ({ values: initialValues }: DiscriminatedUnionStoryProps) => {
-  const [values, setValues] = useState(initialValues);
-  const handleSave = useCallback<NonNullable<FormProps<ShapeType>['onSave']>>((values) => {
-    setValues(values);
-  }, []);
-
-  return (
-    <TestLayout json={{ values, schema: ShapeSchema.ast.toJSON() }}>
-      <TestPanel>
-        <Form<ShapeType>
-          schema={ShapeSchema}
-          values={values}
-          onSave={handleSave}
-          Custom={{
-            ['shape.type' as const]: (props) => (
-              <SelectInput
-                {...props}
-                options={['circle', 'square'].map((value) => ({
-                  value,
-                  label: value,
-                }))}
-              />
-            ),
-          }}
-        />
-      </TestPanel>
-    </TestLayout>
-  );
-};
-
-export const DiscriminatedShape: StoryObj<DiscriminatedUnionStoryProps> = {
-  render: DiscriminatedUnionStory,
+export const DiscriminatedShape: Story<ShapeType> = {
   args: {
+    schema: ShapeSchema,
+    readonly: false,
     values: {
       shape: {
         type: 'circle',
         radius: 5,
       },
     },
+    Custom: {
+      ['shape.type' as const]: (props) => (
+        <SelectInput
+          {...props}
+          options={['circle', 'square'].map((value) => ({
+            value,
+            label: value,
+          }))}
+        />
+      ),
+    },
   },
 };
 
-const ArraysSchema = S.Struct({
-  names: S.Array(S.String.pipe(S.nonEmptyString())),
-  addresses: S.Array(AddressSchema),
-}).pipe(S.mutable);
+const ArraysSchema = Schema.Struct({
+  names: Schema.Array(Schema.String.pipe(Schema.nonEmptyString())),
+  addresses: Schema.Array(AddressSchema),
+}).pipe(Schema.mutable);
 
-type ArraysType = S.Schema.Type<typeof ArraysSchema>;
-
-const ArraysStory = ({ values: initialValues }: FormProps<ArraysType>) => {
-  const [values, setValues] = useState(initialValues);
-  const handleSave = useCallback<NonNullable<FormProps<ArraysType>['onSave']>>((values) => {
-    setValues(values);
-  }, []);
-
-  return (
-    <TestLayout json={{ values, schema: ArraysSchema.ast.toJSON() }}>
-      <TestPanel>
-        <Form<ArraysType> schema={ArraysSchema} values={values} onSave={handleSave} />
-      </TestPanel>
-    </TestLayout>
-  );
-};
+type ArraysType = Schema.Schema.Type<typeof ArraysSchema>;
 
 export const Arrays: StoryObj<FormProps<ArraysType>> = {
-  render: ArraysStory,
   args: {
+    schema: ArraysSchema,
+    readonly: false,
     values: {
       names: ['Alice', 'Bob'],
       addresses: [],
@@ -210,53 +194,40 @@ export const Arrays: StoryObj<FormProps<ArraysType>> = {
   },
 };
 
-const ColorSchema = S.Struct({
-  color: S.Union(S.Literal('red'), S.Literal('green'), S.Literal('blue')).annotations({
-    [AST.TitleAnnotationId]: 'Color',
+const ColorSchema = Schema.Struct({
+  color: Schema.Union(Schema.Literal('red'), Schema.Literal('green'), Schema.Literal('blue')).annotations({
+    title: 'Color',
   }),
-}).pipe(S.mutable);
-
-type ColorType = S.Schema.Type<typeof ColorSchema>;
-
-const EnumStory = ({ values: initialValues }: FormProps<ColorType>) => {
-  const [values, setValues] = useState(initialValues);
-  const handleSave = useCallback<NonNullable<FormProps<ColorType>['onSave']>>((values) => {
-    setValues(values);
-  }, []);
+}).pipe(Schema.mutable);
 
-  return (
-    <TestLayout json={{ values, schema: ColorSchema.ast.toJSON() }}>
-      <TestPanel>
-        <Form<ColorType> schema={ColorSchema} values={values} onSave={handleSave} />
-      </TestPanel>
-    </TestLayout>
-  );
-};
+type ColorType = Schema.Schema.Type<typeof ColorSchema>;
 
 export const Enum: StoryObj<FormProps<ColorType>> = {
-  render: EnumStory,
   args: {
+    schema: ColorSchema,
+    readonly: false,
     values: {
       color: 'red',
     },
   },
 };
 
-const RefSchema = S.Struct({
+const RefSchema = Schema.Struct({
   contact: Ref(ContactType).annotations({ title: 'Contact Reference' }),
-  optionalContact: S.optional(Ref(ContactType).annotations({ title: 'Optional Contact Reference' })),
-  unknownExpando: S.optional(Ref(Expando).annotations({ title: 'Optional Ref to an Expando (DXN Input)' })),
+  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)' })),
 });
 
-const RefStory = ({ values: initialValues }: FormProps<any>) => {
+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 contact1 = live(ContactType, { identifiers: [] });
-  const contact2 = live(ContactType, { identifiers: [] });
-
   const onQueryRefOptions = useCallback((typeInfo: TypeAnnotation) => {
     switch (typeInfo.typename) {
       case ContactType.typename:
@@ -272,7 +243,13 @@ const RefStory = ({ values: initialValues }: FormProps<any>) => {
   return (
     <TestLayout json={{ values, schema: RefSchema.ast.toJSON() }}>
       <TestPanel>
-        <Form schema={RefSchema} values={values} onSave={handleSave} onQueryRefOptions={onQueryRefOptions} />
+        <Form
+          schema={RefSchema}
+          values={values}
+          readonly={readonly}
+          onSave={handleSave}
+          onQueryRefOptions={onQueryRefOptions}
+        />
       </TestPanel>
     </TestLayout>
   );
@@ -280,5 +257,10 @@ const RefStory = ({ values: initialValues }: FormProps<any>) => {
 
 export const Refs: StoryObj<FormProps<ContactType>> = {
   render: RefStory,
-  args: { values: {} },
+  args: {
+    readonly: false,
+    values: {
+      refArray: [Ref.make(contact1), Ref.make(contact2)],
+    } as any,
+  },
 };

package/src/components/Form/Form.tsx

@@ -2,9 +2,10 @@
 // Copyright 2024 DXOS.org
 //
 
+import { type Schema } from 'effect';
 import React, { type ReactElement, useEffect, useMemo, useRef } from 'react';
 
-import { type BaseObject, type S, type PropertyKey } from '@dxos/echo-schema';
+import { type BaseObject, type PropertyKey } from '@dxos/echo-schema';
 import { type ThemedClassName } from '@dxos/react-ui';
 import { mx } from '@dxos/react-ui-theme';
 import { type SchemaProperty } from '@dxos/schema';
@@ -13,14 +14,13 @@ import { FormActions } from './FormActions';
 import { FormFields } from './FormContent';
 import { FormProvider } from './FormContext';
 import { type InputProps, type InputComponent } from './Input';
-import { type QueryRefOptions } from './RefField';
-import { type FormOptions } from '../../hooks';
+import { type FormOptions, type QueryRefOptions } from '../../hooks';
 
 export type PropsFilter<T extends BaseObject> = (props: SchemaProperty<T>[]) => SchemaProperty<T>[];
 
 export type ComponentLookup = (args: {
   prop: string;
-  schema: S.Schema<any>;
+  schema: Schema.Schema<any>;
   inputProps: InputProps;
 }) => ReactElement | undefined;
 
@@ -95,8 +95,7 @@ export const Form = <T extends BaseObject>({
       onValid={onValid}
       onSave={onSave}
     >
-      {/* TODO(burdon): Remove padding. */}
-      <div ref={formRef} role='none' className={mx('p-2', classNames)} data-testid={testId}>
+      <div ref={formRef} role='none' className={mx('flex flex-col gap-4', classNames)} data-testid={testId}>
         <FormFields
           schema={schema}
           path={path}

package/src/components/Form/FormActions.tsx

@@ -5,7 +5,6 @@
 import React from 'react';
 
 import { IconButton, useTranslation } from '@dxos/react-ui';
-import { mx } from '@dxos/react-ui-theme';
 
 import { useFormContext } from './FormContext';
 import { translationKey } from '../../translations';
@@ -15,27 +14,25 @@ export type FormActionsProps = {
   onCancel?: () => void;
 };
 
-export const FormActions = ({ onCancel, readonly }: FormActionsProps) => {
+export const FormActions = ({ readonly, onCancel }: FormActionsProps) => {
   const { t } = useTranslation(translationKey);
   const { canSave, handleSave } = useFormContext();
 
   return (
-    <div role='none' className='mt-2 flex justify-center'>
-      <div role='none' className={mx(onCancel && !readonly && 'grid grid-cols-2 gap-2')}>
-        {onCancel && !readonly && (
-          <IconButton data-testid='cancel-button' icon='ph--x--regular' label={t('button cancel')} onClick={onCancel} />
-        )}
-        {handleSave && (
-          <IconButton
-            type='submit'
-            data-testid='save-button'
-            disabled={!canSave}
-            icon='ph--check--regular'
-            label={t('button save')}
-            onClick={handleSave}
-          />
-        )}
-      </div>
+    <div role='none' className='flex [&_button]:grow gap-1'>
+      {onCancel && !readonly && (
+        <IconButton data-testid='cancel-button' icon='ph--x--regular' label={t('button cancel')} onClick={onCancel} />
+      )}
+      {handleSave && (
+        <IconButton
+          type='submit'
+          data-testid='save-button'
+          disabled={!canSave}
+          icon='ph--check--regular'
+          label={t('button save')}
+          onClick={handleSave}
+        />
+      )}
     </div>
   );
 };

package/src/components/Form/FormContent.tsx

@@ -2,12 +2,12 @@
 // Copyright 2025 DXOS.org
 //
 
-import { pipe } from 'effect';
+import { Schema, SchemaAST, pipe } from 'effect';
 import { capitalize } from 'effect/String';
 import React, { useMemo } from 'react';
 
-import { AST, S } from '@dxos/echo-schema';
 import { createJsonPath, findNode, getDiscriminatedType, isDiscriminatedUnion } from '@dxos/effect';
+import { type ThemedClassName } from '@dxos/react-ui';
 import { mx } from '@dxos/react-ui-theme';
 import { getSchemaProperties, type SchemaProperty } from '@dxos/schema';
 import { isNotFalsy } from '@dxos/util';
@@ -17,8 +17,10 @@ import { SelectInput } from './Defaults';
 import { type ComponentLookup } from './Form';
 import { useInputProps, useFormValues } from './FormContext';
 import { type InputComponent } from './Input';
-import { RefField, type QueryRefOptions } from './RefField';
+import { RefField } from './RefField';
 import { getInputComponent } from './factory';
+import { type QueryRefOptions } from '../../hooks';
+import { getRefProps } from '../../util';
 
 export type FormFieldProps = {
   property: SchemaProperty<any>;
@@ -49,9 +51,13 @@ export const FormField = ({
     [examples, description],
   );
 
+  //
+  // Registry and Custom.
+  //
+
   const FoundComponent = lookupComponent?.({
     prop: name,
-    schema: S.make(ast),
+    schema: Schema.make(ast),
     inputProps: {
       type,
       format,
@@ -63,7 +69,7 @@ export const FormField = ({
   });
 
   if (FoundComponent) {
-    return <div role='none'>{FoundComponent}</div>;
+    return FoundComponent;
   }
 
   const jsonPath = createJsonPath(path ?? []);
@@ -82,79 +88,97 @@ export const FormField = ({
     );
   }
 
+  //
+  // Refs.
+  //
+
+  const refProps = getRefProps(property);
+  if (refProps) {
+    return (
+      <RefField
+        ast={refProps.ast}
+        array={refProps.isArray}
+        type={type}
+        format={format}
+        label={label}
+        placeholder={placeholder}
+        disabled={readonly}
+        inputOnly={inline}
+        onQueryRefOptions={onQueryRefOptions}
+        {...inputProps}
+      />
+    );
+  }
+
+  //
+  // Arrays.
+  //
+
   if (array) {
     return <ArrayField property={property} path={path} inputProps={inputProps} readonly={readonly} Custom={Custom} />;
   }
 
+  //
+  // Standard Inputs.
+  //
+
   const InputComponent = getInputComponent(type, format);
   if (InputComponent) {
     return (
-      <div role='none'>
-        <InputComponent
-          type={type}
-          format={format}
-          label={label}
-          inputOnly={inline}
-          placeholder={placeholder}
-          disabled={readonly}
-          {...inputProps}
-        />
-      </div>
+      <InputComponent
+        type={type}
+        format={format}
+        label={label}
+        inputOnly={inline}
+        placeholder={placeholder}
+        disabled={readonly}
+        {...inputProps}
+      />
     );
   }
 
-  if (options) {
-    return (
-      <div role='none'>
-        <SelectInput
-          type={type}
-          format={format}
-          disabled={readonly}
-          inputOnly={inline}
-          label={label}
-          options={options.map((option) => ({ value: option, label: String(option) }))}
-          placeholder={placeholder}
-          {...inputProps}
-        />
-      </div>
-    );
-  }
+  //
+  // Select.
+  //
 
-  // TODO(ZaymonFC): Extract this to it's own component.
-  if (format === 'ref') {
+  if (options) {
     return (
-      <RefField
-        ast={ast}
+      <SelectInput
         type={type}
+        format={format}
+        disabled={readonly}
+        inputOnly={inline}
         label={label}
-        readonly={readonly}
+        options={options.map((option) => ({ value: option, label: String(option) }))}
         placeholder={placeholder}
-        inline={inline}
-        onQueryRefOptions={onQueryRefOptions}
-        inputProps={inputProps}
+        {...inputProps}
       />
     );
   }
 
+  //
+  // Nested Objects.
+  //
+
   if (type === 'object') {
     const baseNode = findNode(ast, isDiscriminatedUnion);
     const typeLiteral = baseNode
       ? getDiscriminatedType(baseNode, inputProps.getValue() as any)
-      : findNode(ast, AST.isTypeLiteral);
+      : findNode(ast, SchemaAST.isTypeLiteral);
 
     if (typeLiteral) {
       return (
-        <div role='none'>
-          {!inline && <h3 className='text-lg mbs-2 mbe-1'>{label}</h3>}
+        <>
+          {!inline && <h3 className='text-lg mbs-2 mbe-1 first:mbs-0'>{label}</h3>}
           <FormFields
-            schema={S.make(typeLiteral)}
+            schema={Schema.make(typeLiteral)}
             path={path}
             readonly={readonly}
             onQueryRefOptions={onQueryRefOptions}
             Custom={Custom}
             lookupComponent={lookupComponent}
           />
-        </div>
+        </>
       );
     }
   }
@@ -162,27 +186,28 @@ export const FormField = ({
   return null;
 };
 
-export type FormContentProps = {
-  schema: S.Schema.All;
+export type FormFieldsProps = ThemedClassName<{
+  Custom?: Partial<Record<string, InputComponent>>;
+  schema: Schema.Schema.All;
   path?: (string | number)[];
   filter?: (props: SchemaProperty<any>[]) => SchemaProperty<any>[];
   sort?: string[];
   readonly?: boolean;
-  onQueryRefOptions?: QueryRefOptions;
   lookupComponent?: ComponentLookup;
-  Custom?: Partial<Record<string, InputComponent>>;
-};
+  onQueryRefOptions?: QueryRefOptions;
+}>;
 
 export const FormFields = ({
+  classNames,
+  Custom,
   schema,
   path,
   filter,
   sort,
   readonly,
-  onQueryRefOptions,
   lookupComponent,
-  Custom,
-}: FormContentProps) => {
+  onQueryRefOptions,
+}: FormFieldsProps) => {
   const values = useFormValues(path);
 
   const properties = useMemo(() => {
@@ -193,7 +218,8 @@ export const FormFields = ({
   }, [schema, values, filter, sort]);
 
   return (
-    <div role='form' className={mx('flex flex-col w-full gap-2')}>
+    // TODO(burdon): Consistent padding (with composite forms).
+    <div role='form' className={mx('p-2 is-full', classNames)}>
       {properties
         .map((property) => {
           return (