@dxos/react-ui-form 0.8.4-main.c4373fc → 0.8.4-main.c85a9c8dae

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

@@ -0,0 +1,149 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import * as Option from 'effect/Option';
+import * as SchemaAST from 'effect/SchemaAST';
+import React, { Fragment, useCallback } from 'react';
+
+import { findNode, getArrayElementType, getDiscriminatedType, isDiscriminatedUnion, isNestedType } from '@dxos/effect';
+import { IconButton, useTranslation } from '@dxos/react-ui';
+
+import { translationKey } from '../../../translations';
+import { getFormProperties } from '../../../util';
+import { useFormValues } from '../Form';
+import { FormField, type FormFieldProps } from '../FormField';
+import { FormFieldLabel, type FormFieldStateProps } from '../FormFieldComponent';
+
+export type ArrayFieldProps = {
+  label: string;
+  fieldProps: FormFieldStateProps;
+} & FormFieldProps;
+
+export const ArrayField = ({
+  type,
+  path,
+  label,
+  readonly,
+  layout,
+  fieldProps: inputProps,
+  ...props
+}: ArrayFieldProps) => {
+  const { t } = useTranslation(translationKey);
+  const elementType = getArrayElementType(type);
+  const { onValueChange } = inputProps;
+  const values = useFormValues(ArrayField.displayName, path, () => []);
+
+  const getDefaultObjectValue = (typeNode: SchemaAST.AST): any => {
+    const baseNode = findNode(typeNode, isDiscriminatedUnion);
+    const typeLiteral = baseNode ? getDiscriminatedType(baseNode, {}) : findNode(typeNode, SchemaAST.isTypeLiteral);
+    if (!typeLiteral) {
+      return {};
+    }
+
+    return Object.fromEntries(
+      getFormProperties(typeLiteral).map((prop) => {
+        const defaultValue = SchemaAST.getDefaultAnnotation(prop.type).pipe((annotation) =>
+          Option.getOrUndefined(annotation),
+        );
+        return [prop.name, defaultValue];
+      }),
+    );
+  };
+
+  const handleAdd = useCallback(() => {
+    const defaultValue =
+      isNestedType(type) && elementType ? getDefaultObjectValue(elementType) : getDefaultValue(elementType);
+    values && onValueChange(type, [...values, defaultValue]);
+  }, [onValueChange, type, elementType, values]);
+
+  const handleDelete = useCallback(
+    (idx: number) => {
+      onValueChange(
+        type,
+        values?.filter((_, i) => i !== idx),
+      );
+    },
+    [onValueChange, type, values],
+  );
+
+  if (!elementType || ((readonly || layout === 'static') && values && values.length < 1)) {
+    return null;
+  }
+
+  return (
+    <>
+      {(layout !== 'static' || (values && values.length > 0)) && (
+        <FormFieldLabel readonly={readonly} label={label} asChild />
+      )}
+
+      <div role='none' className='flex flex-col gap-2'>
+        {values?.map((_, index) => {
+          return (
+            <div role='none' key={index} className='grid grid-cols-[1fr_min-content] gap-2 last:mb-3'>
+              <FormField
+                autoFocus={index === values.length - 1}
+                type={elementType}
+                path={[...(path ?? []), index]}
+                readonly={readonly || layout === 'static'}
+                layout='inline'
+                {...props}
+              />
+
+              {!readonly && layout !== 'static' && (
+                <div role='none' className='flex flex-col h-full justify-end'>
+                  {/* NOTE: Aligns with center of last field if multi-field object. */}
+                  <div role='none' className='flex items-center h-[2rem]'>
+                    <IconButton
+                      icon='ph--x--regular'
+                      iconOnly
+                      label={t('button remove')}
+                      onClick={() => handleDelete(index)}
+                      classNames='self-center'
+                    />
+                  </div>
+                </div>
+              )}
+            </div>
+          );
+        })}
+      </div>
+
+      {/* TODO(burdon): Get label from schema. */}
+      {!readonly && layout !== 'static' && (
+        <IconButton classNames='flex w-full' icon='ph--plus--regular' label={t('add field')} onClick={handleAdd} />
+      )}
+    </>
+  );
+};
+
+ArrayField.displayName = 'Form.ArrayField';
+
+/**
+ * Returns the default empty value for a given AST.
+ * Used for initializing new array values etc.
+ */
+// TODO(wittjosiah): Factor out?
+export const getDefaultValue = (ast?: SchemaAST.AST): any => {
+  switch (ast?._tag) {
+    case 'StringKeyword': {
+      return '';
+    }
+    case 'NumberKeyword': {
+      return 0;
+    }
+    case 'BooleanKeyword': {
+      return false;
+    }
+    case 'Suspend': {
+      return getDefaultValue(ast.f());
+    }
+    default: {
+      if (ast && isNestedType(ast)) {
+        return {};
+      } else {
+        throw new Error(`Unsupported type: ${ast?._tag}`);
+      }
+    }
+  }
+};

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

@@ -0,0 +1,22 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import React, { useCallback } from 'react';
+
+import { Input, type SwitchProps } from '@dxos/react-ui';
+
+import { type FormFieldComponentProps, FormFieldWrapper } from '../FormFieldComponent';
+
+export const BooleanField = ({ type, readonly, onValueChange, ...props }: FormFieldComponentProps<boolean>) => {
+  const handleChange = useCallback<NonNullable<SwitchProps['onCheckedChange']>>(
+    (value) => onValueChange?.(type, value),
+    [type, onValueChange],
+  );
+
+  return (
+    <FormFieldWrapper<boolean> readonly={readonly} {...props}>
+      {({ value }) => <Input.Switch disabled={!!readonly} checked={value} onCheckedChange={handleChange} />}
+    </FormFieldWrapper>
+  );
+};

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

@@ -0,0 +1,120 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import React, { type ChangeEvent, useCallback, useEffect, useMemo, useState } from 'react';
+
+import { GeoLocation, type GeoPoint } from '@dxos/echo/internal';
+import { Input, useTranslation } from '@dxos/react-ui';
+import { safeParseFloat } from '@dxos/util';
+
+import { translationKey } from '../../../translations';
+import { type FormFieldComponentProps, FormFieldLabel } from '../FormFieldComponent';
+
+export const GeoPointField = ({
+  type,
+  label,
+  readonly,
+  layout,
+  getStatus,
+  getValue,
+  onValueChange,
+  onBlur,
+}: FormFieldComponentProps<GeoPoint>) => {
+  const { t } = useTranslation(translationKey);
+  const { status, error } = getStatus();
+  const geoPoint = useMemo<GeoPoint>(() => getValue() ?? [0, 0], [getValue]);
+  const value = useMemo(() => GeoLocation.fromGeoPoint(geoPoint), [geoPoint]);
+
+  const [longitudeText, setLongitudeText] = useState(value.longitude?.toString());
+  const [latitudeText, setLatitudeText] = useState(value.latitude?.toString());
+  useEffect(() => {
+    const location = GeoLocation.fromGeoPoint(geoPoint);
+    setLongitudeText(location.longitude?.toString());
+    setLatitudeText(location.latitude?.toString());
+  }, [geoPoint]);
+
+  const handleChange = useCallback(
+    (coordinateType: keyof Pick<GeoLocation, 'longitude' | 'latitude'>, setText: (text: string) => void) =>
+      (event: ChangeEvent<HTMLInputElement>) => {
+        const inputText = event.target.value;
+        setText(inputText);
+        if (inputText !== '' && inputText !== '-') {
+          const coord = safeParseFloat(inputText);
+          if (coord !== undefined && !isNaN(coord)) {
+            const currentLocation = GeoLocation.fromGeoPoint(getValue() ?? [0, 0]);
+            const newLocation = { ...currentLocation, [coordinateType]: coord };
+            const newValue = GeoLocation.toGeoPoint(newLocation);
+            onValueChange(type, newValue);
+          }
+        }
+      },
+    [type, getValue, onValueChange],
+  );
+
+  if ((readonly || layout === 'static') && !value?.latitude && !value?.longitude) {
+    return null;
+  }
+
+  return (
+    <Input.Root validationValence={status}>
+      {layout !== 'inline' && <FormFieldLabel error={error} readonly={readonly} label={label} asChild />}
+      {layout === 'static' ? (
+        <LatLng {...value} />
+      ) : (
+        <div role='none' className='grid grid-cols-2 gap-2'>
+          <div>
+            <Input.Root>
+              {layout !== 'inline' && <Input.Label>{t('latitude label')}</Input.Label>}
+              <Input.TextInput
+                type='number'
+                step='0.00001'
+                min='-90'
+                max='90'
+                disabled={!!readonly}
+                placeholder={t('latitude placeholder')}
+                value={latitudeText ?? ''}
+                onChange={handleChange('latitude', setLatitudeText)}
+                onBlur={onBlur}
+              />
+            </Input.Root>
+          </div>
+          <div>
+            <Input.Root>
+              {layout !== 'inline' && <Input.Label>{t('longitude label')}</Input.Label>}
+              <Input.TextInput
+                type='number'
+                step='0.00001'
+                min='-180'
+                max='180'
+                disabled={!!readonly}
+                placeholder={t('longitude placeholder')}
+                value={longitudeText ?? ''}
+                onChange={handleChange('longitude', setLongitudeText)}
+                onBlur={onBlur}
+              />
+            </Input.Root>
+          </div>
+        </div>
+      )}
+    </Input.Root>
+  );
+};
+
+const LatLng = ({ latitude = 0, longitude = 0 }: GeoLocation) => {
+  const latHem = latitude >= 0 ? 'N' : 'S';
+  const lngHem = longitude >= 0 ? 'E' : 'W';
+
+  return (
+    <span className='inline-flex items-center gap-1'>
+      <span>
+        <span>{Math.abs(latitude).toFixed(5)}</span>
+        <span className='text-subdued'>°{latHem}</span>
+      </span>
+      <span>
+        <span>{Math.abs(longitude).toFixed(5)}</span>
+        <span className='text-subdued'>°{lngHem}</span>
+      </span>
+    </span>
+  );
+};

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-h-auto max-h-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,189 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import '@dxos/lit-ui/dx-tag-picker.pcss';
+
+import React, { useCallback, useMemo } from 'react';
+
+import { type Database, Entity, Filter, Obj, Ref, Type } from '@dxos/echo';
+import { ReferenceAnnotationId, type ReferenceAnnotationValue } from '@dxos/echo/internal';
+import { useQuery, useSchema as useSchema$ } from '@dxos/echo-react';
+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 { mx } from '@dxos/ui-theme';
+
+import { translationKey } from '../../../translations';
+import { ObjectPicker, type ObjectPickerContentProps, type RefOption } from '../../ObjectPicker';
+import { omitId } from '../Form';
+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';
+};
+
+const defaultGetOptions: NonNullable<RefFieldProps['getOptions']> = (results) =>
+  results.map((result) => {
+    const id = Entity.getDXN(result).toString();
+    const label = Entity.getLabel(result);
+    return { id, label: label ?? id };
+  });
+
+const defaultResultsHook: NonNullable<RefFieldProps['resultsHook']> = (db, typename) =>
+  useQuery(
+    db,
+    typename
+      ? // For Ref.Ref(Obj.Unknown) we want to show all objects.
+        typename === Type.getTypename(Obj.Unknown)
+        ? Filter.everything()
+        : Filter.typename(typename)
+      : Filter.nothing(),
+  );
+
+export type RefFieldProps = FormFieldComponentProps &
+  Pick<ObjectPickerContentProps, 'createOptionLabel' | 'createOptionIcon' | 'createInitialValuePath'> & {
+    db?: Database.Database;
+    resultsHook?: (db?: Database.Database, typename?: string) => Entity.Any[];
+    schemaHook?: (db?: Database.Database, typename?: string) => Type.AnyEntity;
+    getOptions?: (objects: Entity.Any[]) => RefOption[];
+    onCreate?: (schema: Type.AnyEntity, values: any) => void;
+  };
+
+export const RefField = (props: RefFieldProps) => {
+  const {
+    type,
+    readonly,
+    label,
+    placeholder,
+    layout,
+    getStatus,
+    getValue,
+    createOptionLabel,
+    createOptionIcon,
+    createInitialValuePath,
+    db,
+    resultsHook: useResults = defaultResultsHook,
+    schemaHook: useSchema = useSchema$,
+    getOptions = defaultGetOptions,
+    onCreate,
+    onValueChange,
+  } = props;
+  const { t } = useTranslation(translationKey);
+  const { status, error } = getStatus();
+
+  const typename = useMemo(
+    () => (type ? findAnnotation<ReferenceAnnotationValue>(type, ReferenceAnnotationId)?.typename : undefined),
+    [type],
+  );
+
+  const results = useResults(db, typename);
+  const options = useMemo(() => getOptions(results), [results, getOptions]);
+
+  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;
+    };
+
+    return unknownToRefOption(formValue);
+  }, [options, getValue]);
+
+  const handleUpdate = useCallback(
+    (id: string | undefined) => {
+      const item = options.find((option) => option.id === id);
+      const ref = item ? Ref.fromDXN(DXN.parse(item.id)) : undefined;
+      onValueChange(type, ref);
+    },
+    [options, type, onValueChange],
+  );
+
+  const item = handleGetValue();
+  const selectedIds = useMemo(() => (item ? [item.id] : []), [item]);
+  const createSchema = useSchema(db, typename);
+
+  const handleCreate = useCallback(
+    (values: any) => {
+      if (createSchema && onCreate) {
+        onCreate(createSchema, values);
+      }
+    },
+    [createSchema, onCreate],
+  );
+
+  const handleSelect = useCallback(
+    (id: string) => {
+      if (item?.id === id) {
+        handleUpdate(undefined);
+      } else {
+        handleUpdate(id);
+      }
+    },
+    [item, handleUpdate],
+  );
+
+  if (!typename || ((readonly || layout === 'static') && !item)) {
+    return null;
+  }
+
+  return (
+    <Input.Root validationValence={status}>
+      {layout !== 'inline' && <FormFieldLabel error={error} readonly={readonly} label={label} />}
+      <div>
+        {readonly ? (
+          !item ? (
+            <p className={mx('text-description', 'mb-2')}>{t('empty readonly ref field label')}</p>
+          ) : (
+            <DxAnchor key={item.id} dxn={item.id} rootclassname='me-1'>
+              {item.label}
+            </DxAnchor>
+          )
+        ) : (
+          <ObjectPicker.Root>
+            <ObjectPicker.Trigger asChild classNames='p-0'>
+              {item ? (
+                <div className='flex gap-2 w-full'>
+                  <Input.Root key={item.id}>
+                    <Input.TextInput value={item.label} readOnly classNames='w-full' />
+                  </Input.Root>
+                </div>
+              ) : (
+                <Button classNames='w-full text-start gap-2'>
+                  <div role='none' className='grow overflow-hidden'>
+                    <span className='flex truncate text-description'>{placeholder ?? t('ref field placeholder')}</span>
+                  </div>
+                  <Icon size={3} icon='ph--caret-down--bold' />
+                </Button>
+              )}
+            </ObjectPicker.Trigger>
+            <ObjectPicker.Portal>
+              <ObjectPicker.Content
+                classNames='dx-card-popover-width'
+                options={options}
+                selectedIds={selectedIds}
+                createSchema={createSchema && omitId(createSchema)}
+                createOptionLabel={createOptionLabel}
+                createOptionIcon={createOptionIcon}
+                createInitialValuePath={createInitialValuePath}
+                onCreate={handleCreate}
+                onSelect={handleSelect}
+              />
+            </ObjectPicker.Portal>
+          </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='w-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>
+  );
+};