@dxos/react-ui-form 0.7.2 → 0.7.3-staging.0905f03

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

@@ -7,7 +7,8 @@ import '@dxos-theme';
 import { type Meta, type StoryObj } from '@storybook/react';
 import React, { useCallback, useState } from 'react';
 
-import { AST, Format, S } from '@dxos/echo-schema';
+import { AST, type BaseObject, Format, S } from '@dxos/echo-schema';
+import { Testing } from '@dxos/schema/testing';
 import { withLayout, withTheme } from '@dxos/storybook-utils';
 
 import { SelectInput } from './Defaults';
@@ -15,42 +16,42 @@ 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' });
+
 // 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(
-    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' }),
-  ),
+  address: S.optional(AddressSchema),
 }).pipe(S.mutable);
 
 type TestType = S.Schema.Type<typeof TestSchema>;
 
-type StoryProps = FormProps<TestType>;
+type StoryProps<T extends BaseObject> = { schema: S.Schema<T> } & FormProps<T>;
 
-const DefaultStory = ({ values: initialValues }: StoryProps) => {
+const DefaultStory = <T extends BaseObject>({ schema, values: initialValues }: StoryProps<T>) => {
   const [values, setValues] = useState(initialValues);
-  const handleSubmit = useCallback<NonNullable<FormProps<TestType>['onSubmit']>>((values) => {
+  const handleSave = useCallback<NonNullable<FormProps<T>['onSave']>>((values) => {
     setValues(values);
   }, []);
 
   return (
-    <TestLayout json={{ values, schema: TestSchema.ast.toJSON() }}>
+    <TestLayout json={{ values, schema: schema.ast.toJSON() }}>
       <TestPanel>
-        <Form<TestType> schema={TestSchema} values={values} onSubmit={handleSubmit} />
+        <Form<T> schema={schema} values={values} onSave={handleSave} />
       </TestPanel>
     </TestLayout>
   );
 };
 
-const meta: Meta<StoryProps> = {
+const meta: Meta<StoryProps<any>> = {
   title: 'ui/react-ui-form/Form',
   component: Form,
   render: DefaultStory,
@@ -62,10 +63,11 @@ const meta: Meta<StoryProps> = {
 
 export default meta;
 
-type Story = StoryObj<StoryProps>;
+type Story<T extends BaseObject> = StoryObj<StoryProps<T>>;
 
-export const Default: Story = {
+export const Default: Story<TestType> = {
   args: {
+    schema: TestSchema,
     values: {
       name: 'DXOS',
       active: true,
@@ -76,6 +78,33 @@ export const Default: Story = {
   },
 };
 
+// TODO(burdon): Should accept partial values.
+export const Org: Story<Testing.OrgSchemaType> = {
+  args: {
+    schema: Testing.OrgSchema,
+    values: {
+      // name: 'DXOS',
+      // website: 'https://dxos.org',
+    },
+  },
+};
+
+// 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',
+//     },
+//   },
+// };
+
+//
+// TODO(burdon): Move into separate storybook and use test types.
+//
+
 const ShapeSchema = S.Struct({
   shape: S.optional(
     S.Union(
@@ -92,11 +121,12 @@ const ShapeSchema = S.Struct({
 }).pipe(S.mutable);
 
 type ShapeType = S.Schema.Type<typeof ShapeSchema>;
+
 type DiscriminatedUnionStoryProps = FormProps<ShapeType>;
 
 const DiscriminatedUnionStory = ({ values: initialValues }: DiscriminatedUnionStoryProps) => {
   const [values, setValues] = useState(initialValues);
-  const handleSubmit = useCallback<NonNullable<FormProps<ShapeType>['onSubmit']>>((values) => {
+  const handleSave = useCallback<NonNullable<FormProps<ShapeType>['onSave']>>((values) => {
     setValues(values);
   }, []);
 
@@ -106,7 +136,7 @@ const DiscriminatedUnionStory = ({ values: initialValues }: DiscriminatedUnionSt
         <Form<ShapeType>
           schema={ShapeSchema}
           values={values}
-          onSubmit={handleSubmit}
+          onSave={handleSave}
           Custom={{
             ['shape.type' as const]: (props) => (
               <SelectInput<ShapeType>
@@ -135,3 +165,35 @@ export const DiscriminatedShape: StoryObj<DiscriminatedUnionStoryProps> = {
     },
   },
 };
+
+const ArraysSchema = S.Struct({
+  names: S.Array(S.String.pipe(S.nonEmptyString())),
+  addresses: S.Array(AddressSchema),
+}).pipe(S.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>
+  );
+};
+
+export const Arrays: StoryObj<FormProps<ArraysType>> = {
+  render: ArraysStory,
+  args: {
+    values: {
+      names: ['Alice', 'Bob'],
+      addresses: [],
+    },
+  },
+};

package/src/components/Form/Form.tsx

@@ -6,8 +6,8 @@ import { pipe } from 'effect';
 import { capitalize } from 'effect/String';
 import React, { useEffect, useMemo } from 'react';
 
-import { AST, type BaseObject, S, type PropertyKey } from '@dxos/echo-schema';
-import { findNode, getDiscriminatedType, isDiscriminatedUnion } from '@dxos/effect';
+import { AST, type BaseObject, S, type PropertyKey, type FormatEnum } from '@dxos/echo-schema';
+import { findNode, getDiscriminatedType, isDiscriminatedUnion, SimpleType } from '@dxos/effect';
 import { log } from '@dxos/log';
 import { IconButton, type ThemedClassName, useTranslation } from '@dxos/react-ui';
 import { mx } from '@dxos/react-ui-theme';
@@ -15,9 +15,9 @@ import { getSchemaProperties, type SchemaProperty } from '@dxos/schema';
 import { isNotFalsy } from '@dxos/util';
 
 import { SelectInput } from './Defaults';
-import { type InputComponent } from './Input';
+import { InputHeader, type InputComponent } from './Input';
 import { getInputComponent } from './factory';
-import { type FormOptions, useForm } from '../../hooks';
+import { type FormHandler, type FormOptions, useForm } from '../../hooks';
 import { translationKey } from '../../translations';
 
 // TODO(burdon): Rename package react-ui-form; delete react-ui-card.
@@ -28,7 +28,9 @@ export type PropsFilter<T extends BaseObject> = (props: SchemaProperty<T>[]) =>
 
 export type FormProps<T extends BaseObject> = ThemedClassName<
   {
+    // TODO(burdon): Partial<T>?
     values: T;
+
     /** Path to the current object from the root. Used with nested forms. */
     path?: string[];
 
@@ -39,18 +41,20 @@ export type FormProps<T extends BaseObject> = ThemedClassName<
     filter?: PropsFilter<T>;
     sort?: PropertyKey<T>[];
     autoSave?: boolean;
+    testId?: string;
     onCancel?: () => void;
 
     /**
      * Map of custom renderers for specific properties.
      */
     Custom?: Partial<Record<string, InputComponent<T>>>;
-  } & Pick<FormOptions<T>, 'schema' | 'onValuesChanged' | 'onValidate' | 'onSubmit'>
+  } & Pick<FormOptions<T>, 'schema' | 'onValuesChanged' | 'onValidate' | 'onSave'>
 >;
 
 /**
  * General purpose form component that displays field controls based on the given schema.
  */
+// TODO(burdon): Area to show general validation errors.
 export const Form = <T extends BaseObject>({
   classNames,
   schema,
@@ -60,21 +64,21 @@ export const Form = <T extends BaseObject>({
   filter,
   sort,
   autoSave,
+  testId,
   onValuesChanged,
   onValidate,
-  onSubmit,
+  onSave,
   onCancel,
   Custom,
 }: FormProps<T>) => {
-  const { t } = useTranslation(translationKey);
-  const onValid = useMemo(() => (autoSave ? onSubmit : undefined), [autoSave, onSubmit]);
-  const { canSubmit, values, errors, handleSubmit, ...inputProps } = useForm<T>({
+  const onValid = useMemo(() => (autoSave ? onSave : undefined), [autoSave, onSave]);
+  const { canSave, values, errors, handleSave, ...inputProps } = useForm<T>({
     schema,
     initialValues,
     onValuesChanged,
     onValidate,
     onValid,
-    onSubmit,
+    onSave,
   });
 
   // Filter and sort props.
@@ -98,15 +102,16 @@ export const Form = <T extends BaseObject>({
   }, [errors]);
 
   return (
-    <div role='form' className={mx('flex flex-col w-full gap-2 py-2', classNames)}>
+    <div role='form' className={mx('flex flex-col w-full gap-2 py-2', classNames)} data-testid={testId}>
       {properties
         .map((property) => {
-          const { ast, name, type, format, title, description, examples, options } = property;
+          const { ast, name, type, format, title, description, examples, options, array } = property;
           const key = [...path, name];
-          const label = pipe(title ?? name, capitalize);
+          const label = title ?? pipe(name, capitalize);
           const placeholder = examples?.length ? `Example: "${examples[0]}"` : description;
 
           // Get generic input.
+          // TODO(ZaymonFC): We might need to switch this to using globs since we're now indexing into arrays.
           let InputComponent = Custom?.[key.join('.')];
           if (!InputComponent) {
             // Select.
@@ -128,6 +133,26 @@ export const Form = <T extends BaseObject>({
             }
 
             InputComponent = getInputComponent<T>(type, format);
+
+            // TODO(ZaymonFC): Array handling is inelegant. We need to push this complexity down into SDK/Schema.
+            if (array) {
+              return (
+                <ArrayField
+                  key={name}
+                  name={name}
+                  type={type}
+                  array={true}
+                  label={label}
+                  ast={ast}
+                  values={values}
+                  format={format}
+                  readonly={readonly}
+                  placeholder={placeholder}
+                  inputProps={inputProps}
+                  Custom={Custom}
+                />
+              );
+            }
           }
 
           if (!InputComponent) {
@@ -176,25 +201,187 @@ export const Form = <T extends BaseObject>({
           );
         })
         .filter(isNotFalsy)}
+      {(onCancel || onSave) && !autoSave && (
+        <FormActions onCancel={onCancel} onSubmit={handleSave} canSubmit={canSave} readonly={readonly} />
+      )}
+    </div>
+  );
+};
 
-      {(onCancel || onSubmit) && !autoSave && (
-        <div role='none' className='flex justify-center'>
-          <div role='none' className={mx(onCancel && !readonly && 'grid grid-cols-2 gap-2')}>
-            {onCancel && !readonly && (
-              <IconButton icon='ph--x--regular' label={t('button cancel')} onClick={onCancel} />
-            )}
-            {onSubmit && (
-              <IconButton
-                type='submit'
-                disabled={!canSubmit}
-                icon='ph--check--regular'
-                label={t('button save')}
-                onClick={handleSubmit}
-              />
-            )}
+type ArrayFieldProps<T extends BaseObject> = {
+  name: PropertyKey<T>;
+  type: SimpleType;
+  array: true;
+  label: string;
+  ast: AST.AST;
+  values: Record<string, any>;
+  format?: FormatEnum;
+  readonly?: boolean;
+  placeholder?: string;
+  inputProps: Pick<FormHandler<T>, 'getStatus' | 'getValue' | 'onValueChange' | 'onBlur'>;
+  Custom?: Partial<Record<string, InputComponent<T>>>;
+};
+
+const ArrayField = <T extends BaseObject>({
+  name,
+  type,
+  label,
+  ast,
+  values,
+  format,
+  readonly,
+  placeholder,
+  inputProps,
+  Custom,
+}: ArrayFieldProps<T>) => {
+  const { t } = useTranslation(translationKey);
+  const arrayValues = (values[name] ?? []) as any[];
+  const key = [name];
+
+  // TODO(ZaymonFC): Should this unwrapping happen at a lower level?
+  const tupleType = findNode(ast, AST.isTupleType);
+  const elementType = (tupleType as AST.TupleType | undefined)?.rest[0]?.type;
+
+  if (type === 'object' && elementType) {
+    const baseNode = findNode(elementType, isDiscriminatedUnion);
+    const typeLiteral = baseNode
+      ? getDiscriminatedType(baseNode, values[name] as any)
+      : findNode(elementType, AST.isTypeLiteral);
+
+    if (typeLiteral) {
+      const schema = S.make(typeLiteral);
+
+      return (
+        <div key={name} role='none' className={mx(padding)}>
+          <InputHeader>{label}</InputHeader>
+          <div role='none' className='flex flex-col gap-1'>
+            {arrayValues.map((value, index) => {
+              return (
+                <div key={index} role='none' className='flex items-center gap-1'>
+                  <div role='none' className='flex-1'>
+                    <Form<any>
+                      schema={schema}
+                      path={[...key, index.toString()]}
+                      values={value}
+                      onValuesChanged={(childValues) => {
+                        const newValues = [...arrayValues];
+                        newValues[index] = childValues;
+                        inputProps.onValueChange(name, 'object', newValues);
+                      }}
+                      Custom={Custom as any}
+                    />
+                  </div>
+                  <IconButton
+                    icon='ph--trash--regular'
+                    iconOnly
+                    label={t('button remove')}
+                    onClick={() => {
+                      const newValues = arrayValues.filter((_, i) => i !== index);
+                      inputProps.onValueChange(name, type, newValues);
+                    }}
+                  />
+                </div>
+              );
+            })}
+          </div>
+          <div role='none' className='flex justify-between items-center plb-1'>
+            <IconButton
+              icon='ph--plus--regular'
+              iconOnly
+              label={t('button add')}
+              onClick={() => {
+                const newValues = [...arrayValues, {}];
+                inputProps.onValueChange(name, type, newValues);
+              }}
+            />
           </div>
         </div>
-      )}
+      );
+    }
+    return (
+      <div key={name} role='none'>
+        Nested form not supported in arrays, yet.
+      </div>
+    );
+  }
+
+  const InputComponent = getInputComponent<T>(type, format);
+  if (!InputComponent) {
+    return null;
+  }
+
+  return (
+    <div role='none' key='meta-input' className={mx(padding)}>
+      <InputHeader>{label}</InputHeader>
+      <div role='none' className='flex flex-col gap-1'>
+        {arrayValues.map((_, index) => (
+          <div key={index} role='none' className='flex items-start gap-1'>
+            <div role='none' className='flex-1'>
+              <InputComponent
+                type={type}
+                format={format}
+                label={label}
+                inputOnly
+                property={`${name}.${index}`}
+                disabled={readonly}
+                placeholder={placeholder}
+                {...inputProps}
+              />
+            </div>
+            <IconButton
+              icon='ph--trash--regular'
+              iconOnly
+              label={t('button remove')}
+              onClick={() => {
+                const newValues = arrayValues.filter((_, i) => i !== index);
+                inputProps.onValueChange(name, type, newValues);
+              }}
+            />
+          </div>
+        ))}
+      </div>
+      <div role='none' className='flex justify-between items-center plb-1'>
+        <IconButton
+          icon='ph--plus--regular'
+          iconOnly
+          label={t('button add')}
+          onClick={() => {
+            const newValues = [...arrayValues, SimpleType.getDefaultValue(type)];
+            inputProps.onValueChange(name, type, newValues);
+          }}
+        />
+      </div>
+    </div>
+  );
+};
+
+type FormActionsProps = {
+  readonly?: boolean;
+  canSubmit: boolean;
+  onCancel?: () => void;
+  onSubmit: () => void;
+};
+
+export const FormActions = ({ onCancel, onSubmit, canSubmit, readonly }: FormActionsProps) => {
+  const { t } = useTranslation(translationKey);
+
+  return (
+    <div role='none' className='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} />
+        )}
+        {onSubmit && (
+          <IconButton
+            type='submit'
+            data-testid='save-button'
+            disabled={!canSubmit}
+            icon='ph--check--regular'
+            label={t('button save')}
+            onClick={onSubmit}
+          />
+        )}
+      </div>
     </div>
   );
 };

package/src/components/Form/Input.tsx

@@ -4,23 +4,24 @@
 
 import React, { type FC, type PropsWithChildren } from 'react';
 
-import { type BaseObject, type FormatEnum, type PropertyKey } from '@dxos/echo-schema';
+import { type BaseObject, type FormatEnum } from '@dxos/echo-schema';
 import { type SimpleType } from '@dxos/effect';
 import { Icon, Tooltip } from '@dxos/react-ui';
 import { errorText } from '@dxos/react-ui-theme';
 
-import { type FormHandler } from '../../hooks';
+import { type FormPath, type FormHandler } from '../../hooks';
 
 /**
  * Props passed to input components.
  */
 export type InputProps<T extends BaseObject> = {
-  property: PropertyKey<T>;
+  property: FormPath<T>;
   type: SimpleType;
   format?: FormatEnum;
-  label: string;
+  label?: string;
   disabled?: boolean;
   placeholder?: string;
+  inputOnly?: boolean;
 } & Pick<FormHandler<T>, 'getStatus' | 'getValue' | 'onValueChange' | 'onBlur'>;
 
 /**

package/src/components/ViewEditor/ViewEditor.tsx

@@ -22,7 +22,7 @@ const ViewMetaSchema = S.Struct({
   name: S.String.annotations({
     [AST.TitleAnnotationId]: 'View',
   }),
-  type: Format.DXN.annotations({
+  typename: Format.DXN.annotations({
     [AST.TitleAnnotationId]: 'Typename',
   }),
 }).pipe(S.mutable);
@@ -60,16 +60,16 @@ export const ViewEditor = ({
       name: view.name,
       // TODO(burdon): Need to warn user of possible consequences of editing.
       // TODO(burdon): Settings should have domain name owned by user.
-      type: view.query.type,
+      typename: view.query.type,
     };
   }, [view]);
 
   const handleViewUpdate = useCallback(
-    ({ name, type }: ViewMetaType) => {
+    ({ name, typename }: ViewMetaType) => {
       requestAnimationFrame(() => {
         view.name = name;
-        view.query.type = type;
-        schema.updateTypename(type);
+        view.query.type = typename;
+        schema.updateTypename(typename);
       });
     },
     [view, schema],
@@ -95,7 +95,7 @@ export const ViewEditor = ({
 
   return (
     <div role='none' className={mx('flex flex-col w-full divide-y divide-separator', classNames)}>
-      <Form<ViewMetaType> autoFocus autoSave schema={ViewMetaSchema} values={viewValues} onSubmit={handleViewUpdate} />
+      <Form<ViewMetaType> autoFocus autoSave schema={ViewMetaSchema} values={viewValues} onSave={handleViewUpdate} />
 
       <div>
         {/* TODO(burdon): Clean up common form ux. */}
@@ -139,9 +139,10 @@ export const ViewEditor = ({
           projection={projection}
           field={field}
           registry={registry}
-          onClose={handleClose}
+          onSave={handleClose}
         />
       )}
+
       {!readonly && !field && (
         <div className='flex p-2 justify-center'>
           <IconButton

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

@@ -7,11 +7,11 @@ import '@dxos-theme';
 import { type Meta, type StoryObj } from '@storybook/react';
 import React from 'react';
 
-import { create } from '@dxos/echo-schema';
-import { testData, testView, TestSchema, type TestType } from '@dxos/schema/testing';
-import { withTheme, withLayout } from '@dxos/storybook-utils';
+import { create } from '@dxos/live-object';
+import { testData, TestSchema, testView, type TestType } from '@dxos/schema/testing';
+import { withLayout, withTheme } from '@dxos/storybook-utils';
 
-import { type DeprecatedFormProps, DeprecatedForm } from './Form';
+import { DeprecatedForm, type DeprecatedFormProps } from './Form';
 import translations from '../../translations';
 import { TestLayout, TestPanel } from '../testing';