@dxos/react-ui-form 0.8.3-main.7f5a14c → 0.8.3-staging.0fa589b

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={mx('text-lg mlb-card-spacing-block 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('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

@@ -17,10 +17,7 @@ import { withTheme, withLayout } from '@dxos/storybook-utils';
 
 import { ViewEditor, type ViewEditorProps } from './ViewEditor';
 import translations from '../../translations';
-import { TestLayout, TestPanel } from '../testing';
-
-// Symbol for accessing debug objects in tests.
-export const VIEW_EDITOR_DEBUG_SYMBOL = Symbol('viewEditorDebug');
+import { TestLayout, TestPanel, VIEW_EDITOR_DEBUG_SYMBOL } from '../testing';
 
 // Type definition for debug objects exposed to tests.
 export type ViewEditorDebugObjects = {

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

@@ -10,7 +10,8 @@ import { EchoSchema } from '@dxos/echo-schema';
 import { ViewProjection, ViewType } from '@dxos/schema';
 
 import * as stories from './ViewEditor.stories';
-import { VIEW_EDITOR_DEBUG_SYMBOL, type ViewEditorDebugObjects } from './ViewEditor.stories';
+import { type ViewEditorDebugObjects } from './ViewEditor.stories';
+import { VIEW_EDITOR_DEBUG_SYMBOL } from '../testing';
 
 const { Default } = composeStories(stories);
 

package/src/components/ViewEditor/ViewEditor.tsx

@@ -8,16 +8,17 @@ import React, { useCallback, useMemo, useState } from 'react';
 import { type SchemaRegistry } from '@dxos/echo-db';
 import { EchoSchema, Format, type JsonProp, isMutable, toJsonSchema } from '@dxos/echo-schema';
 import { invariant } from '@dxos/invariant';
-import { Icon, IconButton, Message, type ThemedClassName, useTranslation } from '@dxos/react-ui';
+import { Callout, IconButton, type ThemedClassName, useTranslation } from '@dxos/react-ui';
 import { List } from '@dxos/react-ui-list';
+import { cardSpacing } from '@dxos/react-ui-stack';
 import { ghostHover, inputTextLabel, mx } from '@dxos/react-ui-theme';
 import { FieldSchema, type FieldType, type ViewType, ViewProjection, VIEW_FIELD_LIMIT } from '@dxos/schema';
 
 import { translationKey } from '../../translations';
 import { FieldEditor } from '../FieldEditor';
-import { Form } from '../Form';
+import { Form, type FormProps } from '../Form';
 
-const grid = 'grid grid-cols-[32px_1fr_32px] min-bs-[2.5rem]';
+const grid = 'grid grid-cols-[32px_1fr_32px_32px] min-bs-[2.5rem]';
 
 const ViewMetaSchema = Schema.Struct({
   name: Schema.String.annotations({
@@ -30,15 +31,17 @@ const ViewMetaSchema = Schema.Struct({
 
 type ViewMetaType = Schema.Schema.Type<typeof ViewMetaSchema>;
 
-export type ViewEditorProps = ThemedClassName<{
-  schema: Schema.Schema.AnyNoContext;
-  view: ViewType;
-  registry?: SchemaRegistry;
-  readonly?: boolean;
-  showHeading?: boolean;
-  onTypenameChanged?: (typename: string) => void;
-  onDelete?: (fieldId: string) => void;
-}>;
+export type ViewEditorProps = ThemedClassName<
+  {
+    schema: Schema.Schema.AnyNoContext;
+    view: ViewType;
+    registry?: SchemaRegistry;
+    readonly?: boolean;
+    showHeading?: boolean;
+    onTypenameChanged?: (typename: string) => void;
+    onDelete?: (fieldId: string) => void;
+  } & Pick<FormProps<any>, 'outerSpacing'>
+>;
 
 /**
  * Schema-based object form.
@@ -48,10 +51,11 @@ export const ViewEditor = ({
   schema,
   view,
   registry,
-  readonly,
+  readonly: _readonly,
   showHeading = false,
   onTypenameChanged,
   onDelete,
+  outerSpacing = true,
 }: ViewEditorProps) => {
   const { t } = useTranslation(translationKey);
   const projection = useMemo(() => {
@@ -60,7 +64,7 @@ export const ViewEditor = ({
     return new ViewProjection(jsonSchema, view);
   }, [schema, view]);
   const [field, setField] = useState<FieldType>();
-  const immutable = readonly || !isMutable(schema);
+  const readonly = _readonly || !isMutable(schema);
 
   // TODO(burdon): Should be reactive.
   const viewValues = useMemo(() => {
@@ -74,60 +78,60 @@ export const ViewEditor = ({
 
   const handleSelect = useCallback(
     (field: FieldType) => {
-      if (immutable) {
+      if (readonly) {
         return;
       }
       setField((f) => (f === field ? undefined : field));
     },
-    [immutable],
+    [readonly],
   );
 
   // TODO(burdon): Check if mutable; variant of useCallback that return undefined if readonly?
 
   const handleAdd = useCallback(() => {
-    invariant(!immutable);
+    invariant(!readonly);
     const field = projection.createFieldProjection();
     setField(field);
-  }, [schema, view]);
+  }, [schema, view, readonly]);
 
   const handleUpdate = useCallback(
     ({ name, typename }: ViewMetaType) => {
-      invariant(!immutable);
+      invariant(!readonly);
       requestAnimationFrame(() => {
         if (view.name !== name) {
           view.name = name;
         }
 
-        if (view.query.typename !== typename && !immutable) {
+        if (view.query.typename !== typename && !readonly) {
           onTypenameChanged?.(typename);
         }
       });
     },
-    [schema, view, onTypenameChanged, immutable],
+    [schema, view, onTypenameChanged, readonly],
   );
 
   const handleDelete = useCallback(
     (fieldId: string) => {
-      invariant(!immutable);
+      invariant(!readonly);
       if (fieldId === field?.id) {
         setField(undefined);
       }
 
       onDelete?.(fieldId);
     },
-    [schema, field, onDelete],
+    [schema, field, onDelete, readonly],
   );
 
   const handleMove = useCallback(
     (fromIndex: number, toIndex: number) => {
-      invariant(!immutable);
+      invariant(!readonly);
       // NOTE(ZaymonFC): Using arrayMove here causes a race condition with the kanban model.
       const fields = [...view.fields];
       const [moved] = fields.splice(fromIndex, 1);
       fields.splice(toIndex, 0, moved);
       view.fields = fields;
     },
-    [schema, view.fields],
+    [schema, view.fields, readonly],
   );
 
   const handleClose = useCallback(() => setField(undefined), []);
@@ -151,36 +155,35 @@ export const ViewEditor = ({
   );
 
   return (
-    <div role='none' className={mx('overflow-y-auto', classNames)}>
-      {immutable && (
-        <div role='none' className='mbe-card-spacing-block'>
-          <Message.Root valence='neutral' className='rounded'>
-            <Message.Title>
-              <Icon icon='ph--info--regular' size={5} classNames='inline' /> {t('system schema title')}
-            </Message.Title>
-            <Message.Body>{t('system schema description')}</Message.Body>
-          </Message.Root>
+    <div role='none' className={mx(classNames)}>
+      {readonly && (
+        <div role='none' className={mx('is-full', outerSpacing && 'plb-cardSpacingBlock pli-cardSpacingInline')}>
+          <Callout.Root valence='info'>
+            <Callout.Title>{t('system schema description')}</Callout.Title>
+          </Callout.Root>
         </div>
       )}
+
+      {/* TODO(burdon): Is the form read-only or just the schema? */}
+      {/* TODO(burdon): Readonly fields should take up the same space as editable fields (just be ghosted). */}
       <Form<ViewMetaType>
         autoSave
         schema={ViewMetaSchema}
         values={viewValues}
+        readonly={readonly}
         onSave={handleUpdate}
-        classNames='min-bs-0 overflow-y-auto'
+        outerSpacing={outerSpacing}
       />
 
-      <div role='none' className='min-bs-0 overflow-y-auto'>
-        {/* TODO(burdon): Clean up common form ux. */}
-        <div role='none' className='pli-card-spacing-inline mlb-card-spacing-block'>
-          <label className={mx(inputTextLabel)}>{t('fields label')}</label>
-        </div>
+      <div role='none' className={outerSpacing ? cardSpacing : 'mlb-cardSpacingBlock'}>
+        <label className={mx(inputTextLabel)}>{t('fields label')}</label>
 
         <List.Root<FieldType>
           items={view.fields}
           isItem={Schema.is(FieldSchema)}
           getId={(field) => field.id}
-          onMove={immutable ? undefined : handleMove}
+          readonly={readonly}
+          onMove={readonly ? undefined : handleMove}
         >
           {({ items: fields }) => (
             <>
@@ -191,30 +194,29 @@ export const ViewEditor = ({
                 </div>
               )}
 
-              <div role='list' className='flex flex-col w-full'>
+              <div role='list' className='flex flex-col is-full'>
                 {fields?.map((field) => (
                   <List.Item<FieldType>
                     key={field.id}
                     item={field}
-                    classNames={mx(grid, ghostHover, !immutable && 'cursor-pointer')}
+                    classNames={mx(grid, ghostHover, 'overflow-hidden', !readonly && 'cursor-pointer')}
                   >
                     <List.ItemDragHandle />
                     <List.ItemTitle onClick={() => handleSelect(field)}>{field.path}</List.ItemTitle>
-                    <div className='flex items-center gap-2 -ml-4'>
-                      <List.ItemButton
-                        icon='ph--eye-slash--regular'
+                    <List.ItemButton
+                      data-testid='hide-field-button'
+                      icon='ph--eye-slash--regular'
+                      // TDOO(burdon): Is this the correct test?
+                      disabled={view.fields.length <= 1}
+                      onClick={() => handleHide(field.id)}
+                    />
+                    {/* TODO(burdon): Remove unless implement undo. */}
+                    {!readonly && (
+                      <List.ItemDeleteButton
                         disabled={view.fields.length <= 1}
-                        onClick={() => handleHide(field.id)}
-                        data-testid='hide-field-button'
+                        onClick={() => handleDelete(field.id)}
                       />
-                      {!immutable && (
-                        <List.ItemDeleteButton
-                          icon='ph--trash--regular'
-                          disabled={view.fields.length <= 1}
-                          onClick={() => handleDelete(field.id)}
-                        />
-                      )}
-                    </div>
+                    )}
                   </List.Item>
                 ))}
               </div>
@@ -223,10 +225,8 @@ export const ViewEditor = ({
         </List.Root>
 
         {hiddenProperties.length > 0 && (
-          <div>
-            <div role='none' className='pli-card-spacing-inline mlb-card-spacing-block'>
-              <label className={mx(inputTextLabel)}>{t('hidden fields label')}</label>
-            </div>
+          <>
+            <label className={mx(inputTextLabel)}>{t('hidden fields label')}</label>
 
             <List.Root<string>
               items={hiddenProperties}
@@ -234,14 +234,14 @@ export const ViewEditor = ({
               getId={(property) => property}
             >
               {({ items: properties }) => (
-                <div role='list' className='flex flex-col w-full'>
+                <div role='list' className='flex flex-col is-full'>
                   {properties?.map((property) => (
                     <List.Item<string>
                       key={property}
                       item={property}
-                      classNames={mx(grid, ghostHover, !immutable && 'cursor-pointer')}
+                      classNames={mx(grid, ghostHover, !readonly && 'cursor-pointer')}
                     >
-                      <div />
+                      <List.ItemDragHandle disabled />
                       <List.ItemTitle>{property}</List.ItemTitle>
                       <List.ItemButton
                         icon='ph--eye--regular'
@@ -253,7 +253,7 @@ export const ViewEditor = ({
                 </div>
               )}
             </List.Root>
-          </div>
+          </>
         )}
       </div>
 
@@ -269,11 +269,11 @@ export const ViewEditor = ({
       )}
 
       {!readonly && !field && (
-        <div role='none' className='pli-card-spacing-chrome mlb-card-spacing-chrome'>
+        <div role='none' className={outerSpacing ? cardSpacing : 'mlb-cardSpacingBlock'}>
           <IconButton
             icon='ph--plus--regular'
             label={t('button add property')}
-            onClick={immutable ? undefined : handleAdd}
+            onClick={readonly ? undefined : handleAdd}
             // TODO(burdon): Show field limit in ux (not tooltip).
             disabled={view.fields.length >= VIEW_FIELD_LIMIT}
             classNames='flex is-full'

package/src/components/testing.tsx

@@ -5,16 +5,21 @@
 import React, { type PropsWithChildren } from 'react';
 
 import { type ThemedClassName } from '@dxos/react-ui';
+import { Card } from '@dxos/react-ui-stack';
 import { JsonFilter } from '@dxos/react-ui-syntax-highlighter';
-import { mx } from '@dxos/react-ui-theme';
-
-export const TestPanel = ({ classNames, children }: ThemedClassName<PropsWithChildren>) => (
-  <div className={mx('w-full max-w-[30rem] border border-separator p-2 rounded', classNames)}>{children}</div>
-);
+import { mx, textBlockWidth } from '@dxos/react-ui-theme';
 
 export const TestLayout = ({ classNames, json, children }: ThemedClassName<PropsWithChildren<{ json?: any }>>) => (
-  <div className='w-full h-full grid grid-cols-[1fr_1fr]'>
-    <div className={mx('m-2 justify-center overflow-y-auto', classNames)}>{children}</div>
+  <div className='w-full h-full grid grid-cols-[1fr_1fr] gap-2 overflow-hidden'>
+    <div className={mx('p-4 justify-center overflow-y-auto', classNames)}>{children}</div>
     <JsonFilter data={json} classNames='w-full text-xs' testId='debug' />
   </div>
 );
+
+export const TestPanel = ({ classNames, children }: ThemedClassName<PropsWithChildren>) => (
+  <Card.Content classNames={[textBlockWidth, classNames]}>{children}</Card.Content>
+);
+
+// Symbol for accessing debug objects in tests.
+export const VIEW_EDITOR_DEBUG_SYMBOL = Symbol('viewEditorDebug');
+export const FIELD_EDITOR_DEBUG_SYMBOL = Symbol('fieldEditorDebug');

package/src/translations.ts

@@ -35,6 +35,7 @@ export default [
         'format date-time': 'DateTime',
         'format did': 'DID',
         'format duration': 'Duration',
+        'format dxn': 'DXN',
         'format email': 'Email',
         'format formula': 'Formula',
         'format hostname': 'Hostname',
@@ -47,12 +48,14 @@ export default [
         'format regex': 'RegExp',
         'format string': 'String',
         'format single-select': 'Select',
+        'format multi-select': 'Multi-select',
         'format text': 'Long text',
         'format time': 'Time',
         'format timestamp': 'Timestamp',
         'format user': 'User',
         'format number': 'Number',
         'format uri': 'URI',
+        'format url': 'URL',
         'format uuid': 'UUID',
 
         // Placeholders.
@@ -68,7 +71,7 @@ export default [
 
         // System schema message.
         'system schema title': 'System Schema',
-        'system schema description': 'This schema is managed by the system and cannot be modified.',
+        'system schema description': 'This is a system schema and cannot be modified.',
       },
     },
   },