@dxos/react-ui-form 0.8.2-main.fbd8ed0 → 0.8.2-staging.4d6ad0f

package/src/components/FieldEditor/FieldEditor.test.tsx

@@ -0,0 +1,49 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { composeStories } from '@storybook/react';
+import { screen, cleanup, fireEvent, act } from '@testing-library/react';
+import { afterEach, describe, expect, test } from 'vitest';
+
+import * as stories from './FieldEditor.stories';
+
+const { Default } = composeStories(stories);
+
+describe('FieldEditor', () => {
+  afterEach(() => {
+    cleanup();
+  });
+
+  test('update field type', async () => {
+    await Default.run();
+
+    expect(screen.getByText('Type format')).toBeInTheDocument();
+    expect(screen.getByText('String')).toBeInTheDocument();
+
+    {
+      const debug = JSON.parse(screen.getByTestId('debug').textContent!);
+      const name = debug.props.projection._schema.properties.name;
+      expect(name.type).toBe('string');
+      expect(name.description).toBe('Full name.');
+    }
+
+    fireEvent.click(screen.getByRole('combobox'));
+    const options = screen.getAllByRole('option');
+    const option = options.find((option) => option.textContent === 'Number');
+    fireEvent.click(option!);
+    expect(screen.getByText('Number')).toBeInTheDocument();
+
+    await act(async () => {
+      fireEvent.click(screen.getByTestId('save-button'));
+    });
+
+    {
+      const debug = JSON.parse(screen.getByTestId('debug').textContent!);
+      const name = debug.props.projection._schema.properties.name;
+      expect(name.type).toBe('number');
+      expect(name.format).toBe('number');
+      expect(name.description).toBe('Full name.');
+    }
+  });
+});

package/src/components/FieldEditor/FieldEditor.tsx

@@ -79,6 +79,7 @@ export const FieldEditor = ({ view, projection, field, registry, onSave, onCance
         }
         return { fieldSchema };
       });
+
       setReferenceSchema((prev) => {
         if (_props.referenceSchema !== prev?.typename) {
           const newSchema = schemas.find((schema) => schema.typename === _props.referenceSchema);
@@ -129,7 +130,7 @@ export const FieldEditor = ({ view, projection, field, registry, onSave, onCance
     onSave();
   }, [onSave]);
 
-  const Custom: Partial<Record<string, InputComponent>> = useMemo(
+  const custom: Partial<Record<string, InputComponent>> = useMemo(
     () => ({
       ['format' satisfies keyof PropertyType]: (props) => (
         <SelectInput
@@ -187,7 +188,7 @@ export const FieldEditor = ({ view, projection, field, registry, onSave, onCance
       onValidate={handleValidate}
       onSave={handleSave}
       onCancel={handleCancel}
-      Custom={Custom}
+      Custom={custom}
     />
   );
 };

package/src/components/Form/ArrayField.tsx

@@ -4,12 +4,11 @@
 
 import { SchemaAST, pipe } from 'effect';
 import { capitalize } from 'effect/String';
-import React, { useCallback } from 'react';
+import React, { Fragment, useCallback } from 'react';
 
 import { findNode, getDiscriminatedType, isDiscriminatedUnion, SimpleType } from '@dxos/effect';
 import { invariant } from '@dxos/invariant';
 import { IconButton, useTranslation } from '@dxos/react-ui';
-import { mx } from '@dxos/react-ui-theme';
 import { getSchemaProperties, type SchemaProperty } from '@dxos/schema';
 
 import { type ComponentLookup } from './Form';
@@ -19,8 +18,6 @@ import { InputHeader, type InputComponent } from './Input';
 import { translationKey } from '../../translations';
 import { findArrayElementType } from '../../util';
 
-const padding = 'px-2';
-
 type ArrayFieldProps = {
   property: SchemaProperty<any>;
   readonly?: boolean;
@@ -70,38 +67,58 @@ export const ArrayField = ({ property, readonly, path, inputProps, Custom, looku
     return null;
   }
 
-  return (
-    <div role='none' className={mx(padding)}>
+  return readonly && values.length < 1 ? null : (
+    <>
       <InputHeader>{label}</InputHeader>
-      <div role='none' className='flex flex-col gap-1'>
-        {values.map((_value, index) => (
-          <div key={index} role='none' className='flex items-center gap-1'>
-            <div role='none' className='flex-1'>
-              <FormField
-                property={{
-                  ...property,
-                  array: false, // NOTE(ZaymonFC): This breaks arrays of arrays but ¯\_(ツ)_/¯. Ping me if you need that.
-                  ast: elementType,
-                }}
-                path={[...(path ?? []), index]}
-                readonly={readonly}
-                inline
-                Custom={Custom}
-                lookupComponent={lookupComponent}
-              />
-            </div>
-            <IconButton
-              icon='ph--trash--regular'
-              iconOnly
-              label={t('button remove')}
-              onClick={() => handleRemove(index)}
+      <div
+        role='none'
+        className={
+          readonly
+            ? 'flex flex-wrap gap-1 mlb-1'
+            : values.length > 0
+              ? 'grid gap-1 grid-cols-[1fr_min-content] mlb-1'
+              : 'hidden'
+        }
+      >
+        {values.map((_value, index) => {
+          const field = (
+            <FormField
+              property={{
+                ...property,
+                array: false, // NOTE(ZaymonFC): This breaks arrays of arrays but ¯\_(ツ)_/¯. Ping me if you need that.
+                ast: elementType,
+              }}
+              path={[...(path ?? []), index]}
+              readonly={readonly}
+              inline
+              Custom={Custom}
+              lookupComponent={lookupComponent}
             />
-          </div>
-        ))}
-      </div>
-      <div role='none' className='flex justify-between items-center plb-1'>
-        <IconButton icon='ph--plus--regular' iconOnly label={t('button add')} onClick={handleAdd} />
+          );
+          return readonly ? (
+            field
+          ) : (
+            <Fragment key={index}>
+              <div role='none'>{field}</div>
+              <IconButton
+                icon='ph--trash--regular'
+                iconOnly
+                label={t('button remove')}
+                onClick={() => handleRemove(index)}
+                classNames='self-center'
+              />
+            </Fragment>
+          );
+        })}
       </div>
-    </div>
+      {!readonly && (
+        <IconButton
+          classNames='is-full mlb-1 flex'
+          icon='ph--plus--regular'
+          label={t('add field')}
+          onClick={handleAdd}
+        />
+      )}
+    </>
   );
 };

package/src/components/Form/Defaults.tsx

@@ -4,9 +4,10 @@
 
 import React, { useCallback, useEffect, useRef } from 'react';
 
-import { Input, Select } from '@dxos/react-ui';
+import { Input, Select, useTranslation } from '@dxos/react-ui';
 
 import { type InputProps, InputHeader } from './Input';
+import { translationKey } from '../../translations';
 
 export const TextInput = ({
   type,
@@ -21,20 +22,26 @@ export const TextInput = ({
 }: InputProps) => {
   const { status, error } = getStatus();
 
-  return (
+  return disabled && !getValue() ? null : disabled && inputOnly ? (
+    <p>{getValue() ?? ''}</p>
+  ) : (
     <Input.Root validationValence={status}>
       {!inputOnly && (
         <InputHeader error={error}>
           <Input.Label>{label}</Input.Label>
         </InputHeader>
       )}
-      <Input.TextInput
-        disabled={disabled}
-        placeholder={placeholder}
-        value={getValue() ?? ''}
-        onChange={(event) => onValueChange(type, event.target.value)}
-        onBlur={onBlur}
-      />
+      {disabled ? (
+        <p>{getValue() ?? ''}</p>
+      ) : (
+        <Input.TextInput
+          disabled={disabled}
+          placeholder={placeholder}
+          value={getValue() ?? ''}
+          onChange={(event) => onValueChange(type, event.target.value)}
+          onBlur={onBlur}
+        />
+      )}
       {inputOnly && <Input.Validation>{error}</Input.Validation>}
     </Input.Root>
   );
@@ -53,29 +60,36 @@ export const NumberInput = ({
 }: InputProps) => {
   const { status, error } = getStatus();
 
-  return (
+  return disabled && !getValue() ? null : disabled && inputOnly ? (
+    <p>{getValue() ?? ''}</p>
+  ) : (
     <Input.Root validationValence={status}>
       {!inputOnly && (
         <InputHeader error={error}>
           <Input.Label>{label}</Input.Label>
         </InputHeader>
       )}
-      <Input.TextInput
-        type='number'
-        disabled={disabled}
-        placeholder={placeholder}
-        value={getValue() ?? 0}
-        onChange={(event) => onValueChange(type, event.target.value)}
-        onBlur={onBlur}
-      />
+      {disabled ? (
+        <p>{getValue() ?? ''}</p>
+      ) : (
+        <Input.TextInput
+          type='number'
+          disabled={disabled}
+          placeholder={placeholder}
+          value={getValue() ?? 0}
+          onChange={(event) => onValueChange(type, event.target.value)}
+          onBlur={onBlur}
+        />
+      )}
       {inputOnly && <Input.DescriptionAndValidation>{error}</Input.DescriptionAndValidation>}
     </Input.Root>
   );
 };
 
-export const BooleanInput = ({ type, label, inputOnly, getStatus, getValue, onValueChange }: InputProps) => {
+export const BooleanInput = ({ type, label, inputOnly, getStatus, getValue, onValueChange, disabled }: InputProps) => {
   const { status, error } = getStatus();
   const checked = Boolean(getValue());
+  const { t } = useTranslation(translationKey);
 
   return (
     <Input.Root validationValence={status}>
@@ -84,7 +98,11 @@ export const BooleanInput = ({ type, label, inputOnly, getStatus, getValue, onVa
           <Input.Label>{label}</Input.Label>
         </InputHeader>
       )}
-      <Input.Switch checked={checked} onCheckedChange={(value) => onValueChange(type, value)} />
+      {disabled ? (
+        <p>{t(checked ? 'boolean input true value' : 'boolean input false value')}</p>
+      ) : (
+        <Input.Switch checked={checked} onCheckedChange={(value) => onValueChange(type, value)} />
+      )}
       {inputOnly && <Input.DescriptionAndValidation>{error}</Input.DescriptionAndValidation>}
     </Input.Root>
   );
@@ -110,29 +128,33 @@ export const SelectInput = ({
   const value = getValue() as string | undefined;
   const handleValueChange = useCallback((value: string | number) => onValueChange(type, value), [type, onValueChange]);
 
-  return (
+  return disabled && !value ? null : (
     <Input.Root validationValence={status}>
       {!inputOnly && (
         <InputHeader error={error}>
           <Input.Label>{label}</Input.Label>
         </InputHeader>
       )}
-      <Select.Root value={value} onValueChange={handleValueChange}>
-        {/* TODO(burdon): Placeholder not working? */}
-        <Select.TriggerButton classNames='is-full' disabled={disabled} placeholder={placeholder} />
-        <Select.Portal>
-          <Select.Content>
-            <Select.Viewport>
-              {options?.map(({ value, label }) => (
-                // NOTE: Numeric values are converted to and from strings.
-                <Select.Option key={String(value)} value={String(value)}>
-                  {label ?? String(value)}
-                </Select.Option>
-              ))}
-            </Select.Viewport>
-          </Select.Content>
-        </Select.Portal>
-      </Select.Root>
+      {disabled ? (
+        <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.Portal>
+            <Select.Content>
+              <Select.Viewport>
+                {options?.map(({ value, label }) => (
+                  // NOTE: Numeric values are converted to and from strings.
+                  <Select.Option key={String(value)} value={String(value)}>
+                    {label ?? String(value)}
+                  </Select.Option>
+                ))}
+              </Select.Viewport>
+            </Select.Content>
+          </Select.Portal>
+        </Select.Root>
+      )}
       {inputOnly && <Input.DescriptionAndValidation>{error}</Input.DescriptionAndValidation>}
     </Input.Root>
   );
@@ -180,17 +202,21 @@ export const MarkdownInput = ({
           <Input.Label>{label}</Input.Label>
         </InputHeader>
       )}
-      <Input.TextArea
-        ref={textareaRef}
-        disabled={disabled}
-        placeholder={placeholder}
-        value={getValue() ?? ''}
-        classNames={'min-bs-auto max-h-40 overflow-auto'}
-        onChange={(event) => onValueChange(type, event.target.value)}
-        onBlur={onBlur}
-        style={{ resize: 'none' }}
-        spellCheck={false}
-      />
+      {disabled ? (
+        <p>{getValue() ?? ''}</p>
+      ) : (
+        <Input.TextArea
+          ref={textareaRef}
+          disabled={disabled}
+          placeholder={placeholder}
+          value={getValue() ?? ''}
+          classNames={'min-bs-auto max-h-40 overflow-auto'}
+          onChange={(event) => onValueChange(type, event.target.value)}
+          onBlur={onBlur}
+          style={{ resize: 'none' }}
+          spellCheck={false}
+        />
+      )}
       {inputOnly && <Input.Validation>{error}</Input.Validation>}
     </Input.Root>
   );