@dxos/react-ui-form 0.8.4-main.fd6878d → 0.8.4-staging.60fe92afc8

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

@@ -0,0 +1,173 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import * as Option from 'effect/Option';
+import * as SchemaAST from 'effect/SchemaAST';
+import React, { useCallback } from 'react';
+
+import { Ref } from '@dxos/echo';
+import { SchemaEx } from '@dxos/effect';
+import { useTranslation } from '@dxos/react-ui';
+
+import { translationKey } from '#translations';
+
+import { getFormProperties } from '../../../util';
+import { useFormValues } from '../Form';
+import { FormField, IconBlock, 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 = SchemaEx.getArrayElementType(type);
+  const { onValueChange } = inputProps;
+  const values = useFormValues(ArrayField.displayName, path, () => []);
+
+  const getDefaultObjectValue = (typeNode: SchemaAST.AST): any => {
+    const baseNode = SchemaEx.findNode(typeNode, SchemaEx.isDiscriminatedUnion);
+    const typeLiteral = baseNode
+      ? SchemaEx.getDiscriminatedType(baseNode, {})
+      : SchemaEx.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 =
+      SchemaEx.isNestedType(type) && elementType ? getDefaultObjectValue(elementType) : getDefaultValue(elementType);
+    // `values` is `undefined` on first render for arrays whose parent path
+    // hasn't been materialised in the form values yet (e.g. `package.repos`
+    // when the form starts with no `package`). `useFormValues`'s default-
+    // value effect would eventually backfill it to `[]`, but until then the
+    // old `values && ...` guard silently swallowed the click. Treat a
+    // missing array as empty so Add always produces `[defaultValue]`.
+    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;
+  }
+
+  const renderItemAsObject = elementType && SchemaEx.isNestedType(elementType) && !Ref.isRefType(elementType);
+
+  return (
+    <>
+      {(layout !== 'static' || (values && values.length > 0)) && (
+        <div className='flex items-center gap-2'>
+          <div className='flex-1 min-w-0'>
+            <FormFieldLabel readonly={readonly} label={label} path={SchemaEx.createJsonPath(path ?? [])} asChild />
+          </div>
+          {!readonly && layout !== 'static' && (
+            <IconBlock inline icon='ph--plus--regular' label={t('add-item.button')} onClick={handleAdd} />
+          )}
+        </div>
+      )}
+
+      <div className='flex flex-col'>
+        {values?.map((_, index) => {
+          const isLast = index === values.length - 1;
+
+          // Object items: each row contains a recursively-rendered FormField
+          //   (multiple sub-rows for the object's fields) wrapped in a border,
+          //   with the delete button bottom-aligned next to it.
+          // Scalar items: a single-row inline FormField with a center-aligned
+          //   delete button. Refs and primitive arrays use this layout.
+          const fieldField = (
+            <FormField
+              {...props}
+              autoFocus={isLast}
+              type={elementType}
+              // Suppress the per-item header for object items only — the recursive
+              // form already renders labels for each sub-field. Scalar items
+              // (refs, primitives) keep the parent name so inline-layout
+              // children (e.g. RefField) have a real label to use as a
+              // fallback placeholder.
+              {...(renderItemAsObject && { name: null })}
+              path={[...(path ?? []), index]}
+              readonly={readonly || layout === 'static'}
+              layout={renderItemAsObject ? (layout === 'static' ? 'static' : undefined) : 'inline'}
+            />
+          );
+
+          return (
+            <div key={index} className='grid grid-cols-[1fr_min-content] items-center mb-1 last:mb-form-gap'>
+              {fieldField}
+              {!readonly && layout !== 'static' && (
+                <IconBlock
+                  inline={!renderItemAsObject}
+                  icon='ph--x--regular'
+                  label={t('remove-item.button')}
+                  onClick={() => handleDelete(index)}
+                />
+              )}
+            </div>
+          );
+        })}
+      </div>
+    </>
+  );
+};
+
+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 && SchemaEx.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/DateField.tsx

@@ -0,0 +1,101 @@
+//
+// Copyright 2026 DXOS.org
+//
+
+import { format as formatDate } from 'date-fns';
+import React, { useCallback } from 'react';
+
+import { Format } from '@dxos/echo';
+import { Input } from '@dxos/react-ui';
+
+import { type FormFieldComponentProps, FormFieldWrapper } from '../FormFieldComponent';
+
+/**
+ * Stored value shapes:
+ * - `Format.DateTime` -> ISO 8601 (`2018-11-13T20:20:39.000Z`).
+ * - `Format.Date`     -> `YYYY-MM-DD`.
+ * - `Format.Time`     -> `HH:mm:ss`.
+ *
+ * Segmented input value shapes (react-aria-components-backed):
+ * - `Input.DateTime` -> `YYYY-MM-DDTHH:mm` in local time.
+ * - `Input.Date`     -> `YYYY-MM-DD`.
+ * - `Input.Time`     -> `HH:mm`.
+ */
+
+/** ISO 8601 → `YYYY-MM-DDTHH:mm` in the user's local timezone. */
+const isoToLocalDateTime = (value: string | undefined): string => {
+  if (!value) {
+    return '';
+  }
+  const date = new Date(value);
+  if (Number.isNaN(date.getTime())) {
+    return '';
+  }
+  return formatDate(date, "yyyy-MM-dd'T'HH:mm");
+};
+
+/** `YYYY-MM-DDTHH:mm` (local) → ISO 8601 with timezone. */
+const localDateTimeToIso = (value: string): string | undefined => {
+  if (!value) {
+    return undefined;
+  }
+  // Treat the input as local time. `new Date('YYYY-MM-DDTHH:mm')` parses as local.
+  const date = new Date(value);
+  return Number.isNaN(date.getTime()) ? undefined : date.toISOString();
+};
+
+export const DateField = ({
+  type,
+  format,
+  readonly,
+  placeholder: _placeholder,
+  onValueChange,
+  onBlur: _onBlur,
+  ...props
+}: FormFieldComponentProps<string>) => {
+  const handleSimpleChange = useCallback((next: string) => onValueChange(type, next), [type, onValueChange]);
+
+  const handleDateTimeChange = useCallback(
+    (next: string) => {
+      const iso = localDateTimeToIso(next);
+      onValueChange(type, iso as string);
+    },
+    [type, onValueChange],
+  );
+
+  return (
+    <FormFieldWrapper<string> readonly={readonly} format={format} {...props}>
+      {({ value }) => {
+        switch (format) {
+          case Format.TypeFormat.Date:
+            return (
+              <div className='grid grid-cols-[minmax(0,1fr)_min-content] items-stretch gap-1'>
+                <Input.Date
+                  classNames='min-w-0 overflow-hidden'
+                  disabled={!!readonly}
+                  value={value ?? ''}
+                  onValueChange={handleSimpleChange}
+                />
+                <Input.TriggerIcon classNames='h-full' />
+              </div>
+            );
+          case Format.TypeFormat.Time:
+            return <Input.Time disabled={!!readonly} value={value ?? ''} onValueChange={handleSimpleChange} />;
+          case Format.TypeFormat.DateTime:
+          default:
+            return (
+              <div className='grid grid-cols-[minmax(0,1fr)_min-content] items-stretch gap-1'>
+                <Input.DateTime
+                  classNames='min-w-0 overflow-hidden'
+                  disabled={!!readonly}
+                  value={isoToLocalDateTime(value)}
+                  onValueChange={handleDateTimeChange}
+                />
+                <Input.TriggerIcon classNames='h-full' />
+              </div>
+            );
+        }
+      }}
+    </FormFieldWrapper>
+  );
+};

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

@@ -0,0 +1,124 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import React, { type ChangeEvent, useCallback, useEffect, useMemo, useState } from 'react';
+
+import { GeoLocation, type GeoPoint } from '@dxos/echo/Format';
+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,
+  jsonPath,
+  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} path={jsonPath} asChild />
+      )}
+      {layout === 'static' ? (
+        <LatLng {...value} />
+      ) : (
+        <div className='grid grid-cols-2 gap-form-gap'>
+          <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-form-gap'>
+      <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/InlineRefField.tsx

@@ -0,0 +1,138 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { useAtomValue } from '@effect-atom/atom-react';
+import React, { useCallback, useMemo } from 'react';
+
+import { type Database, Obj, Ref, Type } from '@dxos/echo';
+import { useType as defaultUseType } from '@dxos/echo-react';
+import { ReferenceAnnotationId, type ReferenceAnnotationValue } from '@dxos/echo/Annotation';
+import { SchemaEx } from '@dxos/effect';
+import { DXN, URI } from '@dxos/keys';
+import { Button, Icon, Input, useTranslation } from '@dxos/react-ui';
+
+import { translationKey } from '#translations';
+
+import { Form, omitId } from '../Form';
+import { FormFieldLabel } from '../FormFieldComponent';
+import { type RefFieldProps } from './RefField';
+
+/**
+ * Renders a referenced object's own fields inline (a nested form bound to the
+ * target) rather than the {@link RefField} picker. Activated by
+ * `FormInlineAnnotation.set(true)` on the `Ref` property.
+ *
+ * The nested form edits the target object directly: each changed path is
+ * written back via `Obj.setValue` within an `Obj.update`, mirroring
+ * `ObjectProperties` (without the synthetic meta-tags row).
+ */
+export const InlineRefField = (props: RefFieldProps) => {
+  const {
+    type,
+    readonly,
+    label,
+    jsonPath,
+    layout,
+    db,
+    getValue,
+    onValueChange,
+    onCreate,
+    useType = defaultUseType,
+  } = props;
+  const { t } = useTranslation(translationKey);
+
+  const reference = getValue() as Ref.Ref<any> | undefined;
+  const typename = useMemo(
+    () => (type ? SchemaEx.findAnnotation<ReferenceAnnotationValue>(type, ReferenceAnnotationId)?.typename : undefined),
+    [type],
+  );
+
+  // Empty ref: offer to create the referenced object so the inline form has a target.
+  const createType = useType(db, typename ? DXN.make(typename) : undefined);
+  const handleCreate = useCallback(async () => {
+    if (!createType || !onCreate) {
+      return;
+    }
+    const newObject = await onCreate(createType, {});
+    if (newObject) {
+      onValueChange(type, Ref.make(newObject));
+    }
+  }, [createType, onCreate, type, onValueChange]);
+
+  if (readonly && !reference) {
+    return null;
+  }
+
+  return (
+    <Input.Root>
+      {layout !== 'inline' && <FormFieldLabel readonly={readonly} label={label} path={jsonPath} />}
+      {reference ? (
+        <InlineForm reference={reference} db={db} readonly={readonly} useType={useType} />
+      ) : (
+        !readonly &&
+        onCreate && (
+          <Button classNames='w-full gap-form-gap' disabled={!createType || !db} onClick={() => void handleCreate()}>
+            <Icon icon='ph--plus--regular' size={4} />
+            <span>{label || t('ref-field.placeholder')}</span>
+          </Button>
+        )
+      )}
+    </Input.Root>
+  );
+};
+
+type InlineFormProps = {
+  reference: Ref.Ref<any>;
+  db?: Database.Database;
+  readonly?: boolean;
+  // Accepts both the generic `defaultUseType` and `RefFieldProps['useType']`.
+  useType?: (db?: Database.Database, typeUri?: URI.URI) => Type.AnyEntity | undefined;
+};
+
+const InlineForm = ({ reference, db, readonly, useType = defaultUseType }: InlineFormProps) => {
+  const target = useAtomValue(useMemo(() => reference.atom, [reference]));
+  const typeUri = target ? Obj.getTypeURI(target) : undefined;
+  const typeFromRegistry = useType(db, typeUri);
+  const targetType = (target && Obj.getType(target)) || typeFromRegistry;
+  // Drop the ECHO `id` property (mirrors `ObjectProperties` via `withMetaTags`);
+  // otherwise the nested form renders an "Id" field. Hidden fields
+  // (`FormInputAnnotation.set(false)`) are already filtered by the field set.
+  const formSchema = useMemo(() => (targetType ? omitId(Type.getSchema(targetType)) : undefined), [targetType]);
+  const defaultValues = useMemo(() => (target ? { ...target } : {}), [target]);
+
+  // `formSchema` is resolved at runtime (the referenced object's schema), so the
+  // form's value type is not statically known here — `any` at this form-value
+  // boundary mirrors `ObjectProperties`. Each changed path is written back to the
+  // live target via `Obj.setValue`.
+  const handleChange = useCallback(
+    (values: any, { isValid, changed }: { isValid: boolean; changed: Record<SchemaEx.JsonPath, boolean> }) => {
+      if (!isValid || !target) {
+        return;
+      }
+      const changedPaths = (Object.keys(changed) as SchemaEx.JsonPath[]).filter((path) => changed[path]);
+      if (changedPaths.length === 0) {
+        return;
+      }
+      Obj.update(target, () => {
+        for (const path of changedPaths) {
+          const parts = SchemaEx.splitJsonPath(path);
+          Obj.setValue(target, parts, Obj.getValue(values, parts));
+        }
+      });
+    },
+    [target],
+  );
+
+  if (!target || !formSchema) {
+    return null;
+  }
+
+  return (
+    <Form.Root db={db} schema={formSchema} defaultValues={defaultValues as any} onValuesChanged={handleChange}>
+      <Form.Content>
+        <Form.FieldSet collapsible readonly={readonly} />
+      </Form.Content>
+    </Form.Root>
+  );
+};