@dxos/react-ui-form 0.8.3-main.672df60 → 0.8.3-staging.0fa589b

package/src/components/Form/FormActions.tsx

@@ -5,21 +5,36 @@
 import React from 'react';
 
 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';
 
+export type FormOuterSpacing = boolean | 'blockStart-0' | 'scroll-fields';
+
 export type FormActionsProps = {
   readonly?: boolean;
   onCancel?: () => void;
+  outerSpacing?: FormOuterSpacing;
 };
 
-export const FormActions = ({ readonly, onCancel }: FormActionsProps) => {
+export const FormActions = ({ readonly, onCancel, outerSpacing = true }: FormActionsProps) => {
   const { t } = useTranslation(translationKey);
   const { canSave, handleSave } = useFormContext();
 
   return (
-    <div role='none' className='flex [&_button]:grow gap-1 pli-2 pbe-2'>
+    <div
+      role='none'
+      className={mx(
+        outerSpacing === 'scroll-fields'
+          ? 'pli-cardSpacingInline mbe-cardSpacingBlock'
+          : outerSpacing
+            ? cardSpacing
+            : 'mbs-cardSpacingBlock',
+        'flex [&_button]:grow gap-1 first:mbs-0',
+      )}
+    >
       {onCancel && !readonly && (
         <IconButton data-testid='cancel-button' icon='ph--x--regular' label={t('button cancel')} onClick={onCancel} />
       )}

package/src/components/Form/FormContent.tsx

@@ -4,7 +4,7 @@
 
 import { Schema, SchemaAST, pipe } from 'effect';
 import { capitalize } from 'effect/String';
-import React, { useMemo } from 'react';
+import React, { forwardRef, useMemo } from 'react';
 
 import { createJsonPath, findNode, getDiscriminatedType, isDiscriminatedUnion } from '@dxos/effect';
 import { type ThemedClassName } from '@dxos/react-ui';
@@ -42,8 +42,8 @@ export const FormField = ({
   lookupComponent,
   Custom,
 }: FormFieldProps) => {
-  const inputProps = useInputProps(path);
   const { ast, name, type, format, title, description, options, examples, array } = property;
+  const inputProps = useInputProps(path);
 
   const label = useMemo(() => title ?? pipe(name, capitalize), [title, name]);
   const placeholder = useMemo(
@@ -169,7 +169,7 @@ export const FormField = ({
     if (typeLiteral) {
       return (
         <>
-          {!inline && <h3 className='text-lg mbs-2 mbe-1 first:mbs-0'>{label}</h3>}
+          {!inline && <h3 className={mx('text-lg mlb-inputSpacingBlock first:mbs-0')}>{label}</h3>}
           <FormFields
             schema={Schema.make(typeLiteral)}
             path={path}
@@ -187,54 +187,54 @@ export const FormField = ({
 };
 
 export type FormFieldsProps = ThemedClassName<{
-  Custom?: Partial<Record<string, InputComponent>>;
+  testId?: string;
+  readonly?: boolean;
   schema: Schema.Schema.All;
+  /**
+   * Path to the current object from the root. Used with nested forms.
+   */
   path?: (string | number)[];
   filter?: (props: SchemaProperty<any>[]) => SchemaProperty<any>[];
   sort?: string[];
-  readonly?: boolean;
   lookupComponent?: ComponentLookup;
+  /**
+   * Map of custom renderers for specific properties.
+   * Prefer lookupComponent for plugin specific input surfaces.
+   */
+  Custom?: Partial<Record<string, InputComponent>>;
   onQueryRefOptions?: QueryRefOptions;
 }>;
 
-export const FormFields = ({
-  classNames,
-  Custom,
-  schema,
-  path,
-  filter,
-  sort,
-  readonly,
-  lookupComponent,
-  onQueryRefOptions,
-}: FormFieldsProps) => {
-  const values = useFormValues(path);
-
-  const properties = useMemo(() => {
-    const props = getSchemaProperties(schema.ast, values);
-    const filtered = filter ? filter(props) : props;
-
-    return sort ? filtered.sort((a, b) => sort.indexOf(a.name) - sort.indexOf(b.name)) : filtered;
-  }, [schema, values, filter, sort]);
-
-  return (
-    // TODO(burdon): Consistent padding (with composite forms).
-    <div role='form' className={mx('p-2 is-full', classNames)}>
-      {properties
-        .map((property) => {
-          return (
-            <FormField
-              key={property.name}
-              property={property}
-              path={[...(path ?? []), property.name]}
-              readonly={readonly}
-              onQueryRefOptions={onQueryRefOptions}
-              lookupComponent={lookupComponent}
-              Custom={Custom}
-            />
-          );
-        })
-        .filter(isNotFalsy)}
-    </div>
-  );
-};
+export const FormFields = forwardRef<HTMLDivElement, FormFieldsProps>(
+  (
+    { classNames, testId, schema, path, filter, sort, readonly, lookupComponent, Custom, onQueryRefOptions },
+    forwardRef,
+  ) => {
+    const values = useFormValues(path);
+    const properties = useMemo(() => {
+      const props = getSchemaProperties(schema.ast, values);
+      const filtered = filter ? filter(props) : props;
+      return sort ? filtered.sort((a, b) => sort.indexOf(a.name) - sort.indexOf(b.name)) : filtered;
+    }, [schema, values, filter, sort]);
+
+    return (
+      <div role='form' className={mx('is-full', classNames)} ref={forwardRef}>
+        {properties
+          .map((property) => {
+            return (
+              <FormField
+                key={property.name}
+                property={property}
+                path={[...(path ?? []), property.name]}
+                readonly={readonly}
+                onQueryRefOptions={onQueryRefOptions}
+                lookupComponent={lookupComponent}
+                Custom={Custom}
+              />
+            );
+          })
+          .filter(isNotFalsy)}
+      </div>
+    );
+  },
+);

package/src/components/Form/Input.tsx

@@ -2,12 +2,13 @@
 // Copyright 2024 DXOS.org
 //
 
-import React, { type FC, type PropsWithChildren } from 'react';
+import React, { type FC } from 'react';
 
 import { 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 { Icon, Input, Tooltip } from '@dxos/react-ui';
+import { labelSpacing } from '@dxos/react-ui-stack';
+import { errorText, mx } from '@dxos/react-ui-theme';
 
 import { type FormInputStateProps } from './FormContext';
 
@@ -28,14 +29,18 @@ export type InputProps = {
  */
 export type InputComponent = FC<InputProps>;
 
-export type InputHeaderProps = PropsWithChildren<{
+export type InputHeaderProps = {
   error?: string;
-}>;
+  label: string;
+  readonly?: boolean;
+};
 
-export const InputHeader = ({ children, error }: InputHeaderProps) => {
+export const InputHeader = ({ error, label, readonly }: InputHeaderProps) => {
+  const Label = readonly ? 'span' : Input.Label;
+  const labelProps = readonly ? {} : { classNames: '!mlb-0' };
   return (
-    <div role='none' className='flex justify-between items-center mbs-2 mbe-1 first:mbs-0'>
-      {children}
+    <div role='none' className={mx('flex justify-between items-center', labelSpacing)}>
+      <Label {...labelProps}>{label}</Label>
       {error && (
         <Tooltip.Trigger asChild content={error} side='bottom'>
           <Icon icon='ph--warning--regular' size={4} classNames={errorText} />

package/src/components/Form/RefField.tsx

@@ -136,11 +136,7 @@ export const RefField = ({
   // NOTE(thure): I left both predicates in-place in case we decide to add variants which do render readonly but empty values.
   return disabled && items.length < 1 ? null : (
     <Input.Root validationValence={status}>
-      {!inputOnly && (
-        <InputHeader error={error}>
-          <Input.Label>{label}</Input.Label>
-        </InputHeader>
-      )}
+      {!inputOnly && <InputHeader error={error} label={label} />}
       <div data-no-submit>
         {disabled ? (
           items.length < 1 ? (

package/src/components/Form/custom/GeoPointInput.tsx

@@ -46,9 +46,7 @@ export const GeoPointInput = ({ type, label, disabled, getStatus, getValue, onVa
 
   return (
     <Input.Root validationValence={status}>
-      <InputHeader error={error}>
-        <Input.Label>{label}</Input.Label>
-      </InputHeader>
+      <InputHeader error={error} label={label} />
       <div role='none' className='grid grid-cols-2 gap-2'>
         <Input.TextInput
           type='text'

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

@@ -47,13 +47,15 @@ const DefaultStory = () => {
 const meta: Meta = {
   title: 'ui/react-ui-form/SelectOptionsInput',
   component: SelectOptionInput,
-  decorators: [withTheme, withLayout()],
-  parameters: { translations },
+  render: DefaultStory,
+  decorators: [withTheme, withLayout({ fullscreen: true })],
+  parameters: {
+    translations,
+  },
 };
 
 export default meta;
+
 type Story = StoryObj;
 
-export const Default: Story = {
-  render: DefaultStory,
-};
+export const Default: Story = {};

package/src/components/Form/custom/SelectOptionsInput.tsx

@@ -112,9 +112,7 @@ export const SelectOptionInput = ({ type, label, disabled, getStatus, getValue,
 
   return (
     <Input.Root validationValence={status}>
-      <InputHeader error={error}>
-        <Input.Label>{label}</Input.Label>
-      </InputHeader>
+      <InputHeader error={error} label={label} />
       <div role='none'>
         {options && (
           <List.Root items={options} isItem={(item) => true} onMove={handleMove}>

package/src/components/Form/custom/TupleInput.tsx

@@ -29,9 +29,7 @@ export const TupleInput = ({
 
   return (
     <Input.Root validationValence={status}>
-      <InputHeader error={error}>
-        <Input.Label>{label}</Input.Label>
-      </InputHeader>
+      <InputHeader error={error} label={label} />
       <div className={mx('grid gap-2', gridCols[binding.length - 1])}>
         {binding.map((prop) => (
           <Input.TextInput

package/src/components/ViewEditor/ViewEditor.stories.tsx

@@ -6,7 +6,7 @@ import '@dxos-theme';
 
 import { type Meta, type StoryObj } from '@storybook/react';
 import { Schema } from 'effect';
-import React, { useCallback, useMemo, useState } from 'react';
+import React, { useCallback, useMemo, useState, useEffect } from 'react';
 
 import { Format, type EchoSchema, toJsonSchema, TypedObject } from '@dxos/echo-schema';
 import { Filter, useQuery, useSpace } from '@dxos/react-client/echo';
@@ -17,7 +17,14 @@ import { withTheme, withLayout } from '@dxos/storybook-utils';
 
 import { ViewEditor, type ViewEditorProps } from './ViewEditor';
 import translations from '../../translations';
-import { TestLayout, TestPanel } from '../testing';
+import { TestLayout, TestPanel, VIEW_EDITOR_DEBUG_SYMBOL } from '../testing';
+
+// Type definition for debug objects exposed to tests.
+export type ViewEditorDebugObjects = {
+  schema: EchoSchema;
+  view: ViewType;
+  projection: ViewProjection;
+};
 
 type StoryProps = Pick<ViewEditorProps, 'readonly'>;
 
@@ -62,12 +69,25 @@ const DefaultStory = (props: StoryProps) => {
 
   const handleDelete = useCallback((property: string) => projection?.deleteFieldProjection(property), [projection]);
 
+  // Expose objects on window for test access.
+  useEffect(() => {
+    if (typeof window !== 'undefined' && schema && view && projection) {
+      (window as any)[VIEW_EDITOR_DEBUG_SYMBOL] = { schema, view, projection } satisfies ViewEditorDebugObjects;
+    }
+  }, [schema, view, projection]);
+
+  // NOTE(ZaymonFC): This looks awkward but it resolves an infinite parsing issue with sb.
+  const json = useMemo(
+    () => JSON.parse(JSON.stringify({ schema, view, projection })),
+    [JSON.stringify(schema), JSON.stringify(view), JSON.stringify(projection)],
+  );
+
   if (!schema || !view || !projection) {
     return <div />;
   }
 
   return (
-    <TestLayout json={{ schema, view, projection }}>
+    <TestLayout json={json}>
       <TestPanel>
         <ViewEditor
           schema={schema}
@@ -86,9 +106,7 @@ const meta: Meta<StoryProps> = {
   title: 'ui/react-ui-form/ViewEditor',
   render: DefaultStory,
   decorators: [withClientProvider({ createSpace: true }), withLayout({ fullscreen: true }), withTheme],
-  parameters: {
-    translations,
-  },
+  parameters: { translations },
 };
 
 export default meta;
@@ -98,7 +116,5 @@ type Story = StoryObj<StoryProps>;
 export const Default: Story = {};
 
 export const Readonly: Story = {
-  args: {
-    readonly: true,
-  },
+  args: { readonly: true },
 };

package/src/components/ViewEditor/ViewEditor.test.tsx

@@ -6,14 +6,31 @@ import { composeStories } from '@storybook/react';
 import { screen, cleanup, fireEvent, waitFor } from '@testing-library/react';
 import { afterEach, describe, expect, test } from 'vitest';
 
+import { EchoSchema } from '@dxos/echo-schema';
+import { ViewProjection, ViewType } from '@dxos/schema';
+
 import * as stories from './ViewEditor.stories';
+import { type ViewEditorDebugObjects } from './ViewEditor.stories';
+import { VIEW_EDITOR_DEBUG_SYMBOL } from '../testing';
 
 const { Default } = composeStories(stories);
 
+const getViewEditorDebugObjects = (): ViewEditorDebugObjects => {
+  const debugObjects = (window as any)[VIEW_EDITOR_DEBUG_SYMBOL] as ViewEditorDebugObjects;
+  expect(debugObjects).toBeDefined();
+  expect(debugObjects.schema).toBeInstanceOf(EchoSchema);
+  expect(debugObjects.view).toBeInstanceOf(ViewType);
+  expect(debugObjects.projection).toBeInstanceOf(ViewProjection);
+  return debugObjects;
+};
+
 const waitForViewEditor = async () => {
-  await waitFor(() => {
-    expect(screen.getByTestId('debug')).toBeInTheDocument();
-  });
+  await waitFor(
+    () => {
+      expect(screen.getByTestId('debug')).toBeInTheDocument();
+    },
+    { timeout: 15000 },
+  );
 };
 
 describe('ViewEditor', () => {
@@ -41,26 +58,30 @@ describe('ViewEditor', () => {
 
     fireEvent.click(screen.getByTestId('save-button'));
 
-    // Assert.
-    expect(screen.getByText('new_property')).toBeInTheDocument();
+    // Wait for the changes to propagate to both UI and schema
+    await waitFor(() => {
+      expect(screen.getByText('new_property')).toBeInTheDocument();
+    });
 
-    const debugInfo = JSON.parse(screen.getByTestId('debug').textContent!);
+    // Access the live objects directly from window using symbol.
+    const debugObjects = getViewEditorDebugObjects();
 
-    // Check schema contains new_property.
-    const schemaProperties = debugInfo.schema._storedSchema.jsonSchema.properties;
-    expect(schemaProperties.new_property).toBeDefined();
+    // Check schema contains new_property
+    const schemaProperties = debugObjects.schema.jsonSchema.properties;
+    expect(schemaProperties).toBeDefined();
+    expect(schemaProperties!.new_property).toBeDefined();
+    expect(schemaProperties!.name).toBeUndefined();
 
-    // Check view contains new_property field.
-    const newPropertyField = debugInfo.view.fields.find((field: any) => field.path === 'new_property');
+    // Check view contains new_property field
+    const newPropertyField = debugObjects.view.fields.find((field: any) => field.path === 'new_property');
     expect(newPropertyField).toBeDefined();
-    expect(newPropertyField.path).toBe('new_property');
+    expect(newPropertyField!.path).toBe('new_property');
 
-    // Check projection contains new_property.
-    const newPropertyProjection = debugInfo.projection._fieldProjections.find(
-      (proj: any) => proj.field.path === 'new_property',
-    );
+    // Check projection contains new_property
+    const fieldProjections = debugObjects.projection.getFieldProjections();
+    const newPropertyProjection = fieldProjections.find((proj: any) => proj.field.path === 'new_property');
     expect(newPropertyProjection).toBeDefined();
-    expect(newPropertyProjection.props.property).toBe('new_property');
+    expect(newPropertyProjection!.props.property).toBe('new_property');
   });
 
   test('add new property', async () => {
@@ -85,26 +106,29 @@ describe('ViewEditor', () => {
     // Save the changes
     fireEvent.click(screen.getByTestId('save-button'));
 
-    // Assert the new property exists
-    expect(screen.getByText('added_property')).toBeInTheDocument();
+    // Wait for the changes to propagate
+    await waitFor(() => {
+      expect(screen.getByText('added_property')).toBeInTheDocument();
+    });
 
-    const debugInfo = JSON.parse(screen.getByTestId('debug').textContent!);
+    // Access the live objects directly from window using symbol.
+    const debugObjects = getViewEditorDebugObjects();
 
     // Check schema contains added_property
-    const schemaProperties = debugInfo.schema._storedSchema.jsonSchema.properties;
-    expect(schemaProperties.added_property).toBeDefined();
+    const schemaProperties = debugObjects.schema.jsonSchema.properties;
+    expect(schemaProperties).toBeDefined();
+    expect(schemaProperties!.added_property).toBeDefined();
 
     // Check view contains added_property field
-    const addedPropertyField = debugInfo.view.fields.find((field: any) => field.path === 'added_property');
+    const addedPropertyField = debugObjects.view.fields.find((field: any) => field.path === 'added_property');
     expect(addedPropertyField).toBeDefined();
-    expect(addedPropertyField.path).toBe('added_property');
+    expect(addedPropertyField!.path).toBe('added_property');
 
     // Check projection contains added_property
-    const addedPropertyProjection = debugInfo.projection._fieldProjections.find(
-      (proj: any) => proj.field.path === 'added_property',
-    );
+    const fieldProjections = debugObjects.projection.getFieldProjections();
+    const addedPropertyProjection = fieldProjections.find((proj: any) => proj.field.path === 'added_property');
     expect(addedPropertyProjection).toBeDefined();
-    expect(addedPropertyProjection.props.property).toBe('added_property');
+    expect(addedPropertyProjection!.props.property).toBe('added_property');
   });
 
   test('delete property', async () => {
@@ -123,21 +147,26 @@ describe('ViewEditor', () => {
     // Click the delete button
     fireEvent.click(deleteButton);
 
-    // Assert the property is no longer visible
-    expect(screen.queryByText('name')).not.toBeInTheDocument();
+    // Wait for the changes to propagate
+    await waitFor(() => {
+      expect(screen.queryByText('name')).not.toBeInTheDocument();
+    });
 
-    const debugInfo = JSON.parse(screen.getByTestId('debug').textContent!);
+    // Access the live objects directly from window using symbol.
+    const debugObjects = getViewEditorDebugObjects();
 
     // Check schema no longer contains the name property
-    const schemaProperties = debugInfo.schema._storedSchema.jsonSchema.properties;
-    expect(schemaProperties.name).toBeUndefined();
+    const schemaProperties = debugObjects.schema.jsonSchema.properties;
+    expect(schemaProperties).toBeDefined();
+    expect(schemaProperties!.name).toBeUndefined();
 
     // Check view no longer contains the name field
-    const nameField = debugInfo.view.fields.find((field: any) => field.path === 'name');
+    const nameField = debugObjects.view.fields.find((field: any) => field.path === 'name');
     expect(nameField).toBeUndefined();
 
     // Check projection no longer contains the name property
-    const nameProjection = debugInfo.projection._fieldProjections.find((proj: any) => proj.field.path === 'name');
+    const fieldProjections = debugObjects.projection.getFieldProjections();
+    const nameProjection = fieldProjections.find((proj: any) => proj.field.path === 'name');
     expect(nameProjection).toBeUndefined();
   });
 
@@ -150,17 +179,26 @@ describe('ViewEditor', () => {
     fireEvent.click(hideButtons[0]);
 
     // Check that hiddenFields is non-empty
-    let debugInfo = JSON.parse(screen.getByTestId('debug').textContent!);
-    expect(debugInfo.view.hiddenFields.length).toBeGreaterThan(0);
-
-    // Wait for the show button to appear and click it
     await waitFor(() => {
       expect(screen.getByTestId('show-field-button')).toBeInTheDocument();
     });
+
+    // Access the live objects directly from window using symbol.
+    const debugObjects = getViewEditorDebugObjects();
+
+    // Check that hiddenFields is non-empty
+    expect(debugObjects.view.hiddenFields).toBeDefined();
+    expect(debugObjects.view.hiddenFields!.length).toBeGreaterThan(0);
+
+    // Click the show button
     fireEvent.click(screen.getByTestId('show-field-button'));
 
-    // Check that hiddenFields is empty again
-    debugInfo = JSON.parse(screen.getByTestId('debug').textContent!);
-    expect(debugInfo.view.hiddenFields.length).toBe(0);
+    // Wait for the data to update and check that hiddenFields is empty
+    await waitFor(() => {
+      expect(debugObjects.view.hiddenFields!.length).toBe(0);
+    });
+
+    // Also verify that the field is back in the visible fields list
+    expect(debugObjects.view.fields.length).toBeGreaterThan(0);
   });
 });