@dxos/react-ui-form 0.8.4-main.2e9d522 → 0.8.4-main.3c1ae3b

package/src/components/Form/fields/MarkdownField.tsx

@@ -0,0 +1,78 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import React, { useCallback, useEffect, useRef } from 'react';
+
+import { Input, type TextAreaProps } from '@dxos/react-ui';
+
+import { type FormFieldComponentProps, FormFieldLabel } from '../FormFieldComponent';
+
+export const MarkdownField = ({
+  type,
+  readonly,
+  label,
+  placeholder,
+  layout,
+  getStatus,
+  getValue,
+  onValueChange,
+  onBlur,
+}: FormFieldComponentProps) => {
+  const { status, error } = getStatus();
+  const textareaRef = useRef<HTMLTextAreaElement>(null);
+
+  // TODO(ZaymonFC): If we start using `Enter` for form submission, we should prevent default behavior here
+  //  since we're using a textarea element and the user needs to be able to enter new lines.
+
+  const adjustHeight = useCallback(() => {
+    const textarea = textareaRef.current;
+    if (textarea) {
+      textarea.style.blockSize = 'auto'; // For measurement.
+      textarea.style.blockSize = `${textarea.scrollHeight + 2}px`;
+    }
+  }, []);
+
+  // Adjust height on initial render.
+  useEffect(() => {
+    adjustHeight();
+  }, [adjustHeight]);
+
+  // Adjust height when the content changes.
+  useEffect(() => {
+    adjustHeight();
+  }, [getValue(), adjustHeight]);
+
+  const handleChange = useCallback<NonNullable<TextAreaProps['onChange']>>(
+    (event) => onValueChange(type, event.target.value),
+    [type, onValueChange],
+  );
+
+  const value = getValue();
+  if ((readonly || layout === 'static') && !value) {
+    return null;
+  }
+
+  // TODO(burdon): Use Markdown Editor.
+  return (
+    <Input.Root validationValence={status}>
+      {layout !== 'inline' && <FormFieldLabel error={error} readonly={readonly} label={label} />}
+      {layout === 'static' ? (
+        <p>{value}</p>
+      ) : (
+        <Input.TextArea
+          ref={textareaRef}
+          disabled={!!readonly}
+          placeholder={placeholder}
+          value={value ?? ''}
+          classNames={'min-bs-auto max-bs-40 overflow-auto'}
+          onChange={handleChange}
+          onBlur={onBlur}
+          style={{ resize: 'none' }}
+          spellCheck={false}
+        />
+      )}
+      {layout === 'full' && <Input.Validation>{error}</Input.Validation>}
+    </Input.Root>
+  );
+};

package/src/components/Form/fields/NumberField.tsx

@@ -0,0 +1,39 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import React, { useCallback } from 'react';
+
+import { Input, type TextInputProps } from '@dxos/react-ui';
+import { safeParseFloat } from '@dxos/util';
+
+import { type FormFieldComponentProps, FormFieldWrapper } from '../FormFieldComponent';
+
+export const NumberField = ({
+  type,
+  readonly,
+  placeholder,
+  onValueChange,
+  onBlur,
+  ...props
+}: FormFieldComponentProps<number>) => {
+  const handleChange = useCallback<NonNullable<TextInputProps['onChange']>>(
+    (event) => onValueChange(type, safeParseFloat(event.target.value) || 0),
+    [type, onValueChange],
+  );
+
+  return (
+    <FormFieldWrapper<number> readonly={readonly} {...props}>
+      {({ value = '' }) => (
+        <Input.TextInput
+          type='number'
+          disabled={!!readonly}
+          placeholder={placeholder}
+          value={value}
+          onChange={handleChange}
+          onBlur={onBlur}
+        />
+      )}
+    </FormFieldWrapper>
+  );
+};

package/src/components/Form/fields/RefField.tsx

@@ -0,0 +1,206 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import '@dxos/lit-ui/dx-tag-picker.pcss';
+
+import type * as Schema from 'effect/Schema';
+import React, { useCallback, useMemo } from 'react';
+
+import { Ref } from '@dxos/echo';
+import { ReferenceAnnotationId, type ReferenceAnnotationValue } from '@dxos/echo/internal';
+import { findAnnotation } from '@dxos/effect';
+import { DXN } from '@dxos/keys';
+import { DxAnchor } from '@dxos/lit-ui/react';
+import { Button, Icon, Input, useTranslation } from '@dxos/react-ui';
+import { descriptionText, mx } from '@dxos/react-ui-theme';
+import { isNonNullable } from '@dxos/util';
+
+import { type QueryRefOptions, useQueryRefOptions } from '../../../hooks';
+import { translationKey } from '../../../translations';
+import { ObjectPicker } from '../../ObjectPicker';
+import { type FormFieldComponentProps, FormFieldLabel } from '../FormFieldComponent';
+
+// TODO(burdon): Factor out.
+const isRefSnapShot = (val: any): val is { '/': string } => {
+  return typeof val === 'object' && typeof (val as any)?.['/'] === 'string';
+};
+
+export type RefFieldProps = FormFieldComponentProps & {
+  // TODO(wittjosiah): Remove this. Array is handled upstream.
+  array?: boolean;
+  createOptionLabel?: [string, { ns: string }];
+  createOptionIcon?: string;
+  createSchema?: Schema.Schema.AnyNoContext;
+  createInitialValuePath?: string;
+  onCreate?: (values: any) => void;
+  onQueryRefOptions?: QueryRefOptions;
+};
+
+export const RefField = (props: RefFieldProps) => {
+  const {
+    type,
+    readonly,
+    label,
+    placeholder,
+    layout,
+    getStatus,
+    getValue,
+    array,
+    createOptionLabel,
+    createOptionIcon,
+    createSchema,
+    createInitialValuePath,
+    onCreate,
+    onQueryRefOptions,
+    onValueChange,
+  } = props;
+  const { t } = useTranslation(translationKey);
+  const { status, error } = getStatus();
+
+  const typename = useMemo(
+    () => (type ? findAnnotation<ReferenceAnnotationValue>(type, ReferenceAnnotationId)?.typename : undefined),
+    [type],
+  );
+
+  // TODO(burdon): Query items on demand.
+  const { options, update: updateOptions } = useQueryRefOptions({ typename, onQueryRefOptions });
+
+  const handleGetValue = useCallback(() => {
+    const formValue = getValue();
+
+    const unknownToRefOption = (value: unknown) => {
+      const isRef = Ref.isRef(value);
+      if (isRef || isRefSnapShot(value)) {
+        const dxnString = isRef ? value.dxn.toString() : value['/'];
+        const matchingOption = options.find((option) => option.id === dxnString);
+        if (matchingOption) {
+          return matchingOption;
+        }
+      }
+      return undefined;
+    };
+
+    if (array && Array.isArray(formValue)) {
+      return formValue.map(unknownToRefOption).filter(isNonNullable) ?? [];
+    }
+
+    const option = unknownToRefOption(formValue);
+    if (option) {
+      return [option];
+    }
+
+    return [];
+  }, [options, array, getValue]);
+
+  const handleUpdate = useCallback(
+    (ids: string[]) => {
+      if (ids.length === 0) {
+        onValueChange(type, undefined);
+        return;
+      }
+
+      const refs = ids
+        .map((id) => {
+          const item = options.find((option) => option.id === id);
+          if (item) {
+            const dxn = DXN.parse(item.id);
+            return Ref.fromDXN(dxn);
+          }
+          return null;
+        })
+        .filter(isNonNullable);
+
+      if (array) {
+        onValueChange(type, refs);
+      } else {
+        onValueChange(type, refs[0]);
+      }
+    },
+    [options, type, array, onValueChange],
+  );
+
+  const handleCreate = useCallback(
+    (values: any) => {
+      onCreate?.(values);
+      updateOptions();
+    },
+    [onCreate, updateOptions],
+  );
+
+  const items = handleGetValue();
+  const selectedIds = useMemo(() => items.map((i: any) => i.id), [items]);
+  const toggleSelect = useCallback(
+    (id: string) => {
+      if (array) {
+        const nextIds = selectedIds.includes(id) ? selectedIds.filter((x) => x !== id) : [...selectedIds, id];
+        handleUpdate(nextIds);
+      } else {
+        if (selectedIds[0] === id) {
+          handleUpdate([]);
+        } else {
+          handleUpdate([id]);
+        }
+      }
+    },
+    [array, selectedIds, handleUpdate],
+  );
+
+  if (!typename || ((readonly || layout === 'static') && items.length < 1)) {
+    return null;
+  }
+
+  return (
+    <Input.Root validationValence={status}>
+      {layout !== 'inline' && <FormFieldLabel error={error} readonly={readonly} label={label} />}
+      <div>
+        {readonly ? (
+          items.length < 1 ? (
+            <p className={mx(descriptionText, 'mbe-2')}>{t('empty readonly ref field label')}</p>
+          ) : (
+            items.map((item) => (
+              <DxAnchor key={item.id} refid={item.id} rootclassname='mie-1'>
+                {item.label}
+              </DxAnchor>
+            ))
+          )
+        ) : (
+          <ObjectPicker.Root>
+            <ObjectPicker.Trigger asChild classNames='p-0'>
+              {items?.length === 1 ? (
+                <div className='flex gap-2 is-full'>
+                  {items?.map((item) => (
+                    <Input.Root key={item.id}>
+                      <Input.TextInput value={item.label} readOnly classNames='is-full' />
+                    </Input.Root>
+                  ))}
+                </div>
+              ) : (
+                <Button classNames='is-full text-start gap-2'>
+                  <div role='none' className='grow overflow-hidden'>
+                    <span className='flex truncate text-description'>
+                      {placeholder ?? t('ref field placeholder', { count: array ? 99 : 1 })}
+                    </span>
+                  </div>
+                  <Icon size={3} icon='ph--caret-down--bold' />
+                </Button>
+              )}
+            </ObjectPicker.Trigger>
+            <ObjectPicker.Content
+              classNames='popover-card-width'
+              options={options}
+              selectedIds={selectedIds}
+              createSchema={createSchema}
+              createOptionLabel={createOptionLabel}
+              createOptionIcon={createOptionIcon}
+              createInitialValuePath={createInitialValuePath}
+              onCreate={handleCreate}
+              onSelect={toggleSelect}
+            />
+          </ObjectPicker.Root>
+        )}
+      </div>
+      {layout === 'full' && <Input.DescriptionAndValidation>{error}</Input.DescriptionAndValidation>}
+    </Input.Root>
+  );
+};

package/src/components/Form/fields/SelectField.tsx

@@ -0,0 +1,65 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import React, { useCallback } from 'react';
+
+import { Input, Select, type SelectRootProps } from '@dxos/react-ui';
+
+import { type FormFieldComponentProps, FormFieldLabel } from '../FormFieldComponent';
+
+export type SelectFieldOptions = FormFieldComponentProps & {
+  options?: Array<{ value: string | number; label?: string }>;
+};
+
+export const SelectField = ({
+  type,
+  readonly,
+  label,
+  layout,
+  placeholder,
+  options,
+  getStatus,
+  getValue,
+  onValueChange,
+}: SelectFieldOptions) => {
+  const { status, error } = getStatus();
+  const value = getValue() as string | undefined;
+
+  const handleValueChange = useCallback<NonNullable<SelectRootProps['onValueChange']>>(
+    (value) => onValueChange(type, value),
+    [type, onValueChange],
+  );
+
+  if ((readonly || layout === 'static') && value == null) {
+    return null;
+  }
+
+  return (
+    <Input.Root validationValence={status}>
+      {layout !== 'inline' && <FormFieldLabel error={error} readonly={readonly} label={label} />}
+      {layout === 'static' ? (
+        <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={!!readonly} 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.Arrow />
+            </Select.Content>
+          </Select.Portal>
+        </Select.Root>
+      )}
+      {layout === 'full' && <Input.DescriptionAndValidation>{error}</Input.DescriptionAndValidation>}
+    </Input.Root>
+  );
+};

package/src/components/Form/{custom/SelectOptionsInput.stories.tsx → fields/SelectOptionField.stories.tsx}

@@ -2,22 +2,21 @@
 // Copyright 2025 DXOS.org
 //
 
-import '@dxos-theme';
-
 import { type Meta, type StoryObj } from '@storybook/react-vite';
-import { Schema } from 'effect';
+import * as Schema from 'effect/Schema';
 import React, { useState } from 'react';
 
-import { SelectOptionSchema, type SelectOption } from '@dxos/echo-schema';
-import { withLayout, withTheme } from '@dxos/storybook-utils';
+import { SelectOption } from '@dxos/echo/internal';
+import { withTheme } from '@dxos/react-ui/testing';
 
-import { SelectOptionInput } from './SelectOptionsInput';
 import { translations } from '../../../translations';
-import { TestLayout, TestPanel } from '../../testing';
+import { TestLayout } from '../../testing';
 import { Form } from '../Form';
 
+import { SelectOptionField } from './SelectOptionField';
+
 const schema = Schema.Struct({
-  options: Schema.Array(SelectOptionSchema).pipe(Schema.mutable),
+  options: Schema.Array(SelectOption).pipe(Schema.mutable),
 }).pipe(Schema.mutable);
 
 const DefaultStory = () => {
@@ -32,30 +31,34 @@ const DefaultStory = () => {
 
   return (
     <TestLayout>
-      <TestPanel>
-        <Form
-          schema={schema}
-          values={values}
-          onSave={(vals) => setValues(vals)}
-          Custom={{ options: SelectOptionInput }}
-        />
-      </TestPanel>
+      <Form.Root
+        schema={schema}
+        values={values}
+        fieldMap={{ options: SelectOptionField }}
+        onSave={(values) => setValues(values)}
+      >
+        <Form.Content>
+          <Form.FieldSet />
+          <Form.Actions />
+        </Form.Content>
+      </Form.Root>
     </TestLayout>
   );
 };
 
-const meta: Meta = {
-  title: 'ui/react-ui-form/SelectOptionsInput',
-  component: SelectOptionInput,
+const meta = {
+  title: 'ui/react-ui-form/SelectOptionField',
+  component: SelectOptionField as any,
   render: DefaultStory,
-  decorators: [withTheme, withLayout({ fullscreen: true })],
+  decorators: [withTheme],
   parameters: {
+    layout: 'fullscreen',
     translations,
   },
-};
+} satisfies Meta<typeof DefaultStory>;
 
 export default meta;
 
-type Story = StoryObj;
+type Story = StoryObj<typeof meta>;
 
 export const Default: Story = {};

package/src/components/Form/{custom/SelectOptionsInput.tsx → fields/SelectOptionField.tsx}

@@ -2,33 +2,39 @@
 // Copyright 2025 DXOS.org
 //
 
-import React, { type ChangeEvent, type KeyboardEvent, useCallback, useEffect, useState, useRef } from 'react';
+import React, { type ChangeEvent, type KeyboardEvent, useCallback, useEffect, useRef, useState } from 'react';
 
-import { type SelectOption } from '@dxos/echo-schema';
+import { type SelectOption } from '@dxos/echo/internal';
 import { PublicKey } from '@dxos/keys';
-import { type ChromaticPalette, Icon, IconButton, Input, Tag, Toolbar, useTranslation } from '@dxos/react-ui';
+import { type ChromaticPalette, IconButton, Input, Tag, useTranslation } from '@dxos/react-ui';
 import { List } from '@dxos/react-ui-list';
 import { HuePicker } from '@dxos/react-ui-pickers';
-import { hues, mx } from '@dxos/react-ui-theme';
+import { hues, subtleHover } from '@dxos/react-ui-theme';
 
 import { translationKey } from '../../../translations';
-import { InputHeader, type InputProps } from '../Input';
-
-// TODO(ZaymonFC): Handle disabled.
-export const SelectOptionInput = ({ type, label, disabled, getStatus, getValue, onValueChange }: InputProps) => {
+import { type FormFieldComponentProps, FormFieldLabel } from '../FormFieldComponent';
+
+export const SelectOptionField = ({
+  type,
+  readonly,
+  label,
+  getStatus,
+  getValue,
+  onValueChange,
+}: FormFieldComponentProps<SelectOption[] | undefined>) => {
+  const { t } = useTranslation(translationKey);
+  const { status, error } = getStatus();
   const [selected, setSelectedId] = useState<string | null>(null);
   const [isNewOption, setIsNewOption] = useState(false);
   const inputRef = useRef<HTMLInputElement>(null);
-  const { t } = useTranslation(translationKey);
-  const { status, error } = getStatus();
-  const options = getValue<SelectOption[] | undefined>();
+  const options = getValue();
 
   // Initialization.
   useEffect(() => {
     if (options === undefined) {
       onValueChange(type, []);
     }
-  }, [options, onValueChange, type]);
+  }, [options, type, onValueChange]);
 
   const randomHue = () => {
     const usedHues = new Set(options?.map((option) => option.color) ?? []);
@@ -89,8 +95,8 @@ export const SelectOptionInput = ({ type, label, disabled, getStatus, getValue,
     [options, type, onValueChange],
   );
 
-  const handleKeyDown = useCallback((e: KeyboardEvent<HTMLInputElement>) => {
-    if (e.key === 'Enter') {
+  const handleKeyDown = useCallback((ev: KeyboardEvent<HTMLInputElement>) => {
+    if (ev.key === 'Enter') {
       setSelectedId(null);
     }
   }, []);
@@ -112,53 +118,56 @@ export const SelectOptionInput = ({ type, label, disabled, getStatus, getValue,
 
   return (
     <Input.Root validationValence={status}>
-      <InputHeader error={error} label={label} />
+      <FormFieldLabel error={error} readonly={readonly} label={label} />
       <div role='none'>
         {options && (
-          <List.Root items={options} isItem={(item) => true} onMove={handleMove}>
+          <List.Root
+            items={options}
+            isItem={(_item) => true}
+            onMove={readonly ? undefined : handleMove}
+            readonly={!!readonly}
+          >
             {({ items }) => (
-              <div role='list' className='w-full overflow-auto'>
+              <div role='list' className='is-full overflow-auto'>
                 {items?.map((item) => (
                   <div key={item.id}>
                     <List.Item
                       role='button'
                       item={item}
-                      classNames={['p-1 plb-2', 'flex flex-col', 'cursor-pointer', 'hover:bg-hoverOverlay']}
+                      classNames={[subtleHover, 'flex flex-col cursor-pointer rounded-sm']}
                       aria-expanded={selected === item.id}
                     >
                       <div className='flex items-center'>
-                        <List.ItemDragHandle />
+                        <List.ItemDragHandle disabled={!!readonly} />
                         <List.ItemTitle onClick={() => handleClick(item.id)} classNames='flex-1'>
                           {/* TODO(ZaymonFC): Move spacer into Tag component. */}
                           <Tag palette={item.color as ChromaticPalette}>{item.title || '\u200b'}</Tag>
                         </List.ItemTitle>
-                        <Icon
+                        <IconButton
+                          iconOnly
+                          variant='ghost'
+                          label={t(selected === item.id ? 'collapse label' : 'expand label', { ns: 'os' })}
                           icon={selected === item.id ? 'ph--caret-down--regular' : 'ph--caret-right--regular'}
                           onClick={() => handleClick(item.id)}
                         />
                       </div>
                       {selected === item.id && (
-                        <div className='mis-4 mbs-2 flex flex-col gap-1'>
+                        <div className='pli-cardSpacingInline plb-cardSpacingBlock flex flex-col gap-1 density-fine'>
                           {/* 16px to match drag handle width. */}
                           <Input.Label classNames='text-xs'>{t('select option label')}</Input.Label>
-                          <div className='flex flex-row items-center gap-1'>
+                          <div className='grid grid-cols-[1fr_min-content_min-content] gap-1'>
                             <Input.TextInput
+                              disabled={!!readonly}
                               placeholder={t('select option label placeholder')}
                               ref={selected === item.id ? inputRef : undefined}
                               value={item.title}
                               onChange={handleTitleChange(item.id)}
                               onKeyDown={handleKeyDown}
                               classNames='flex-1'
-                              data-no-submit
                             />
-                            <Toolbar.Root classNames='p-0 m-0 !is-auto'>
-                              <HuePicker
-                                value={item.color}
-                                onChange={handleColorChange(item.id)}
-                                rootVariant='toolbar-button'
-                              />
-                            </Toolbar.Root>
+                            <HuePicker disabled={!!readonly} value={item.color} onChange={handleColorChange(item.id)} />
                             <IconButton
+                              disabled={!!readonly}
                               icon='ph--trash--fill'
                               iconOnly
                               label={t('select option delete')}
@@ -170,18 +179,14 @@ export const SelectOptionInput = ({ type, label, disabled, getStatus, getValue,
                     </List.Item>
                   </div>
                 ))}
-                <div role='listitem'>
-                  <div
-                    role='button'
-                    className={mx('p-1 plb-2', 'flex flex-col', 'cursor-pointer', 'hover:bg-hoverOverlay')}
-                    onClick={handleAdd}
-                  >
-                    <div className='flex items-center gap-1'>
-                      <Icon icon='ph--plus--regular' />
-                      <span className='text-sm'>{t('select option add')}</span>
-                    </div>
-                  </div>
-                </div>
+                <IconButton
+                  variant='ghost'
+                  icon='ph--plus--regular'
+                  label={t('select option add')}
+                  onClick={handleAdd}
+                  disabled={!!readonly}
+                  classNames='is-full'
+                />
               </div>
             )}
           </List.Root>

package/src/components/Form/fields/TextAreaField.tsx

@@ -0,0 +1,38 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import React, { useCallback } from 'react';
+
+import { Input, type TextAreaProps } from '@dxos/react-ui';
+
+import { type FormFieldComponentProps, FormFieldWrapper } from '../FormFieldComponent';
+
+export const TextAreaField = ({
+  type,
+  readonly,
+  placeholder,
+  onValueChange,
+  onBlur,
+  ...props
+}: FormFieldComponentProps<string>) => {
+  const handleChange = useCallback<NonNullable<TextAreaProps['onChange']>>(
+    (event) => onValueChange(type, event.target.value),
+    [type, onValueChange],
+  );
+
+  return (
+    <FormFieldWrapper<string> readonly={readonly} {...props}>
+      {({ value = '' }) => (
+        <Input.TextArea
+          rows={3}
+          disabled={!!readonly}
+          placeholder={placeholder}
+          value={value}
+          onChange={handleChange}
+          onBlur={onBlur}
+        />
+      )}
+    </FormFieldWrapper>
+  );
+};