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

package/src/components/Form/RefField.tsx

@@ -1,269 +0,0 @@
-//
-// Copyright 2025 DXOS.org
-//
-
-import type * as Schema from 'effect/Schema';
-import type * as SchemaAST from 'effect/SchemaAST';
-import React, { useCallback, useMemo } from 'react';
-
-import {
-  type EchoSchema,
-  Expando,
-  Ref,
-  ReferenceAnnotationId,
-  type ReferenceAnnotationValue,
-  getTypeAnnotation,
-} from '@dxos/echo/internal';
-import { findAnnotation } from '@dxos/effect';
-import { DXN } from '@dxos/keys';
-import { type DxTagPickerItemClick } from '@dxos/lit-ui';
-import { DxAnchor, DxTagPickerItem } 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 { TextInput } from './Defaults';
-import { InputHeader, type InputProps } from './Input';
-
-export type RefFieldProps = InputProps & {
-  ast?: SchemaAST.AST;
-  array?: boolean;
-  createOptionLabel?: [string, { ns: string }];
-  createOptionIcon?: string;
-  onCreate?: (values: any) => void;
-  createSchema?: Schema.Schema.AnyNoContext;
-  createInitialValuePath?: string;
-  onQueryRefOptions?: QueryRefOptions;
-  schema?: EchoSchema;
-};
-
-// TODO(thure): Is this a standard that should be better canonized?
-const isRefSnapShot = (val: any): val is { '/': string } => {
-  return typeof val === 'object' && typeof (val as any)?.['/'] === 'string';
-};
-
-export const RefField = ({
-  type,
-  label,
-  readonly,
-  placeholder,
-  inputOnly,
-  array,
-  ast,
-  getValue,
-  createOptionLabel,
-  createOptionIcon,
-  onBlur,
-  onCreate,
-  createSchema,
-  createInitialValuePath,
-  onQueryRefOptions,
-  onValueChange,
-  ...restInputProps
-}: RefFieldProps) => {
-  const { t } = useTranslation(translationKey);
-  const refTypeInfo = useMemo(
-    () => (ast ? findAnnotation<ReferenceAnnotationValue>(ast, ReferenceAnnotationId) : undefined),
-    [ast],
-  );
-  const { options: availableOptions, loading: _loading } = useQueryRefOptions({ refTypeInfo, onQueryRefOptions });
-
-  if ((refTypeInfo && refTypeInfo?.typename === getTypeAnnotation(Expando)?.typename) || !onQueryRefOptions) {
-    // If ref type is expando, fall back to taking a DXN in string format.
-    return (
-      <RefFieldFallback
-        {...{ type, label, placeholder, readonly, inputOnly, getValue, onBlur, onValueChange, ...restInputProps }}
-      />
-    );
-  }
-
-  const handleGetValue = useCallback(() => {
-    const formValue = getValue();
-
-    const unknownToRefOption = (val: unknown) => {
-      const isRef = Ref.isRef(val);
-      if (isRef || isRefSnapShot(val)) {
-        const dxnString = isRef ? val.dxn.toString() : val['/'];
-        const matchingOption = availableOptions.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 [];
-  }, [getValue, availableOptions, array]);
-
-  const handleUpdate = useCallback(
-    (ids: string[]) => {
-      if (ids.length === 0) {
-        onValueChange('object', undefined);
-        return;
-      }
-
-      const refs = ids
-        .map((id) => {
-          const item = availableOptions.find((option) => option.id === id);
-          if (item) {
-            const dxn = DXN.parse(item.id);
-            return Ref.fromDXN(dxn);
-          }
-          return null;
-        })
-        .filter(isNonNullable);
-
-      if (array) {
-        onValueChange('object', refs);
-      } else {
-        onValueChange('object', refs[0]);
-      }
-    },
-    [availableOptions, array, onValueChange],
-  );
-
-  if (!refTypeInfo) {
-    return null;
-  }
-
-  const { status, error } = restInputProps.getStatus();
-
-  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],
-  );
-
-  // NOTE(thure): I left both predicates in-place in case we decide to add variants which do render readonly but empty values.
-  return readonly && items.length < 1 ? null : (
-    <Input.Root validationValence={status}>
-      {!inputOnly && <InputHeader error={error} label={label} />}
-      <div data-no-submit>
-        {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>
-              <Button variant='ghost' classNames='is-full text-start gap-2'>
-                <div role='none' className='grow'>
-                  {items?.length ? (
-                    items?.map((item) => (
-                      <DxTagPickerItem
-                        key={item.id}
-                        itemId={item.id}
-                        label={item.label}
-                        {...(item.hue ? { hue: item.hue } : {})}
-                        removeLabel={t('remove item label')}
-                        onItemClick={(event: DxTagPickerItemClick) => {
-                          if (event.action === 'remove') {
-                            toggleSelect(item.id);
-                          }
-                        }}
-                      />
-                    ))
-                  ) : (
-                    <span className='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
-              options={availableOptions}
-              selectedIds={selectedIds}
-              onSelect={toggleSelect}
-              createSchema={createSchema}
-              createOptionLabel={createOptionLabel}
-              createOptionIcon={createOptionIcon}
-              createInitialValuePath={createInitialValuePath}
-              onCreate={onCreate}
-            />
-          </ObjectPicker.Root>
-        )}
-      </div>
-      {inputOnly && <Input.DescriptionAndValidation>{error}</Input.DescriptionAndValidation>}
-    </Input.Root>
-  );
-};
-
-const RefFieldFallback = ({
-  type,
-  label,
-  readonly,
-  placeholder,
-  inputOnly,
-  getValue,
-  onValueChange,
-  ...restInputProps
-}: InputProps) => {
-  const handleOnValueChange = (_type: any, dxnString: string) => {
-    const dxn = DXN.tryParse(dxnString);
-    if (dxn) {
-      onValueChange?.('object', Ref.fromDXN(dxn));
-    } else if (dxnString === '') {
-      onValueChange?.('object', undefined);
-    } else {
-      onValueChange?.('string', dxnString);
-    }
-  };
-
-  const handleGetValue = () => {
-    const formValue = getValue();
-    if (typeof formValue === 'string') {
-      return formValue;
-    }
-    if (Ref.isRef(formValue)) {
-      return formValue.dxn.toString();
-    }
-
-    return undefined;
-  };
-
-  return (
-    <TextInput
-      type={type}
-      label={label}
-      readonly={readonly}
-      placeholder={placeholder}
-      inputOnly={inputOnly}
-      getValue={handleGetValue as <V>() => V | undefined}
-      onValueChange={handleOnValueChange}
-      {...restInputProps}
-    />
-  );
-};

package/src/components/Form/custom/GeoPointInput.tsx

@@ -1,80 +0,0 @@
-//
-// 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 { InputHeader, type InputProps } from '../Input';
-
-export const GeoPointInput = ({ type, label, readonly, getStatus, getValue, onValueChange, onBlur }: InputProps) => {
-  const { t } = useTranslation(translationKey);
-  const { status, error } = getStatus();
-  const geoPoint = useMemo<GeoPoint>(() => getValue<GeoPoint>() ?? [0, 0], [getValue]);
-  const geoLocation = useMemo(() => GeoLocation.fromGeoPoint(geoPoint), [geoPoint]);
-
-  const [longitudeText, setLongitudeText] = useState(geoLocation.longitude?.toString());
-  const [latitudeText, setLatitudeText] = useState(geoLocation.latitude?.toString());
-
-  useEffect(() => {
-    const location = GeoLocation.fromGeoPoint(geoPoint);
-    setLongitudeText(location.longitude.toString());
-    setLatitudeText(location.latitude.toString());
-  }, [geoPoint]);
-
-  const handleCoordinateChange = 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<GeoPoint>() ?? [0, 0]);
-            const newLocation = { ...currentLocation, [coordinateType]: coord };
-            const newValue = GeoLocation.toGeoPoint(newLocation);
-            onValueChange(type, newValue);
-          }
-        }
-      },
-    [getValue, onValueChange, type],
-  );
-
-  return (
-    <Input.Root validationValence={status}>
-      <InputHeader error={error} label={label} />
-      <div role='none' className='grid grid-cols-2 gap-2'>
-        <div role='none'>
-          <Input.Label>{t('latitude label')}</Input.Label>
-          <Input.TextInput
-            type='number'
-            step='0.00001'
-            min='-90'
-            max='90'
-            disabled={!!readonly}
-            value={latitudeText}
-            onChange={handleCoordinateChange('latitude', setLatitudeText)}
-            onBlur={onBlur}
-          />
-        </div>
-        <div role='none'>
-          <Input.Label>{t('longitude label')}</Input.Label>
-          <Input.TextInput
-            type='number'
-            step='0.00001'
-            min='-180'
-            max='180'
-            disabled={!!readonly}
-            value={longitudeText}
-            onChange={handleCoordinateChange('longitude', setLongitudeText)}
-            onBlur={onBlur}
-          />
-        </div>
-      </div>
-    </Input.Root>
-  );
-};

package/src/components/Form/custom/index.ts

@@ -1,7 +0,0 @@
-//
-// Copyright 2024 DXOS.org
-//
-
-export * from './GeoPointInput';
-export * from './SelectOptionsInput';
-export * from './TupleInput';

package/src/components/Form/factory.tsx

@@ -1,31 +0,0 @@
-//
-// Copyright 2024 DXOS.org
-//
-
-import { FormatEnum } from '@dxos/echo/internal';
-import { type SimpleType } from '@dxos/effect';
-
-import { GeoPointInput } from './custom';
-import { BooleanInput, MarkdownInput, NumberInput, TextInput } from './Defaults';
-import { type InputComponent } from './Input';
-
-/**
- * Get property input component.
- */
-export const getInputComponent = (type: SimpleType, format?: FormatEnum | string): InputComponent | undefined => {
-  switch (format) {
-    case FormatEnum.GeoPoint:
-      return GeoPointInput;
-    case FormatEnum.Markdown:
-      return MarkdownInput;
-  }
-
-  switch (type) {
-    case 'string':
-      return TextInput;
-    case 'number':
-      return NumberInput;
-    case 'boolean':
-      return BooleanInput;
-  }
-};

package/src/hooks/useForm.ts

@@ -1,295 +0,0 @@
-//
-// Copyright 2025 DXOS.org
-//
-
-import type * as Schema from 'effect/Schema';
-import * as SchemaAST from 'effect/SchemaAST';
-import { useCallback, useEffect, useMemo, useState } from 'react';
-
-import { type BaseObject, getValue, setValue } from '@dxos/echo/internal';
-import { type JsonPath, type SimpleType, createJsonPath, fromEffectValidationPath } from '@dxos/effect';
-import { invariant } from '@dxos/invariant';
-import { log } from '@dxos/log';
-import { type ValidationError, validateSchema } from '@dxos/schema';
-import { type MaybePromise } from '@dxos/util';
-
-/**
- * Return type from `useForm` hook.
- */
-export type FormHandler<T extends BaseObject> = {
-  //
-  // Form state management.
-  //
-
-  values: Partial<T>;
-  errors: Record<JsonPath, string>;
-  touched: Record<JsonPath, boolean>;
-  changed: Record<JsonPath, boolean>;
-  canSave: boolean;
-  formIsValid: boolean;
-
-  // TODO(burdon): Return onSave.
-  handleSave: () => void;
-
-  //
-  // Form input component helpers.
-  //
-
-  getStatus: (path: string | (string | number)[]) => { status?: 'error'; error?: string };
-  getValue: <V>(path: (string | number)[]) => V | undefined;
-  onValueChange: <V>(path: (string | number)[], type: SimpleType, value: V) => void;
-  onTouched: (path: (string | number)[]) => void;
-};
-
-/**
- * Hook options.
- */
-export interface FormOptions<T extends BaseObject> {
-  /**
-   * Effect schema (Type literal).
-   */
-  schema: Schema.Schema<T, any>;
-
-  /**
-   * Initial values (which may not pass validation).
-   */
-  initialValues: Partial<T>;
-
-  /**
-   * Callback for value changes. Note: This is called even when values are invalid.
-   * Sometimes the parent component may want to know about changes even if the form is
-   * in an invalid state.
-   */
-  onValuesChanged?: (values: Partial<T>) => void;
-
-  /**
-   * Custom validation function that runs only after schema validation passes.
-   * Use this for complex validation logic that can't be expressed in the schema.
-   * @returns Array of validation errors, or undefined if validation passes
-   */
-  // TODO(burdon): Change to key x value?
-  onValidate?: (values: T) => ValidationError[] | undefined;
-
-  /**
-   * Called when the form is valid.
-   */
-  onValid?: (values: T, meta: { changed: FormHandler<T>['changed'] }) => void;
-
-  /**
-   * Called when the form is submitted and passes validation.
-   */
-  onSave?: (values: T, meta: { changed: FormHandler<T>['changed'] }) => MaybePromise<void>;
-}
-
-/**
- * Creates a hook for managing form state, including values, validation, and submission.
- * Deeply integrated with `@dxos/schema` for schema-based validation.
- */
-export const useForm = <T extends BaseObject>({
-  schema,
-  initialValues,
-  onValuesChanged,
-  onValidate,
-  onValid,
-  onSave,
-}: FormOptions<T>): FormHandler<T> => {
-  invariant(SchemaAST.isTypeLiteral(schema.ast));
-
-  const [values, setValues] = useState<Partial<T>>(initialValues);
-
-  useEffect(() => {
-    setValues(initialValues);
-  }, [initialValues]);
-
-  const [touched, setTouched] = useState<Record<JsonPath, boolean>>(createKeySet(initialValues, false));
-  const [changed, setChanged] = useState<Record<JsonPath, boolean>>(createKeySet(initialValues, false));
-  const [errors, setErrors] = useState<Record<JsonPath, string>>({});
-  const [saving, setSaving] = useState(false);
-
-  //
-  // Validation.
-  //
-
-  const validate = useCallback(
-    (values: Partial<T>): values is T => {
-      let errors: ValidationError[] = validateSchema(schema, values) ?? [];
-      if (errors.length === 0 && onValidate) {
-        const validatedValues = values as T;
-        errors = onValidate(validatedValues) ?? [];
-      }
-
-      setErrors(flatMap(errors));
-      const valid = errors.length === 0;
-      return valid;
-    },
-    [schema, onValidate],
-  );
-
-  // Validate on schema change.
-  const [schemaDirty, setSchemaDirty] = useState(false);
-  useEffect(() => setSchemaDirty(true), [schema]);
-  useEffect(() => {
-    if (schemaDirty) {
-      validate(values);
-      setSchemaDirty(false);
-    }
-  }, [values, schemaDirty]);
-
-  const formIsValid = useMemo(() => {
-    return Object.keys(errors).length === 0;
-  }, [errors]);
-
-  /**
-   * NOTE: We can submit if there is no touched field that has an error.
-   * Basically, if there's a validation message visible in the form, submit should be disabled.
-   */
-  const canSave = useMemo(
-    () =>
-      !saving &&
-      // Check if any error paths that are touched have errors.
-      !Object.entries(touched).some(
-        ([path, isTouched]) =>
-          isTouched &&
-          Object.keys(errors).some(
-            (errorPath) => errorPath === path || errorPath.startsWith(`${path}.`) || errorPath.startsWith(`${path}[`),
-          ),
-      ),
-    [touched, errors, saving],
-  );
-
-  const handleSave = useCallback(async () => {
-    if (validate(values)) {
-      setSaving(true);
-      try {
-        await onSave?.(values, { changed });
-      } finally {
-        setSaving(false);
-      }
-    }
-  }, [values, validate, onSave, changed]);
-
-  //
-  // Fields.
-  //
-
-  const getStatus = useCallback<FormHandler<T>['getStatus']>(
-    (path) => {
-      const jsonPath = Array.isArray(path) ? createJsonPath(path) : path;
-      const matchingError = Object.entries(errors).find(
-        ([errorPath]) =>
-          errorPath === jsonPath || errorPath.startsWith(`${jsonPath}.`) || errorPath.startsWith(`${jsonPath}[`),
-      );
-
-      // Only show errors for touched fields.
-      const isTouched = touched[jsonPath as JsonPath];
-      if (!isTouched) {
-        return {
-          status: undefined,
-          error: undefined,
-        };
-      }
-
-      return {
-        status: matchingError ? 'error' : undefined,
-        error: matchingError ? matchingError[1] : undefined,
-      };
-    },
-    [errors, touched],
-  );
-
-  const getFormValue = useCallback<FormHandler<T>['getValue']>(
-    <V>(path: (string | number)[]): V | undefined => {
-      return getValue(values, createJsonPath(path));
-    },
-    [values],
-  );
-
-  // TODO(wittjosiah): This is causing the entire form to re-render on every change.
-  const onValueChange = useCallback<FormHandler<T>['onValueChange']>(
-    (path: (string | number)[], type: SimpleType, value: any) => {
-      const jsonPath = createJsonPath(path);
-      let parsedValue = value;
-      try {
-        if (type === 'number') {
-          parsedValue = parseFloat(value as string) || 0;
-        }
-      } catch (err) {
-        log.catch(err);
-        parsedValue = undefined;
-      }
-
-      const newValues = { ...setValue(values, jsonPath, parsedValue) };
-      setValues(newValues);
-      setChanged((prev) => ({ ...prev, [jsonPath]: true }));
-      onValuesChanged?.(newValues);
-
-      const isValid = validate(newValues);
-      if (isValid && onValid) {
-        onValid(newValues, { changed });
-      }
-    },
-    [values, onValuesChanged, validate, onValid, changed],
-  );
-
-  const onTouched = useCallback(
-    (path: (string | number)[]) => {
-      const jsonPath = createJsonPath(path);
-      setTouched((touched) => ({ ...touched, [jsonPath]: true }));
-      validate(values);
-    },
-    [validate, values],
-  );
-
-  return useMemo(
-    () => ({
-      // State.
-      values,
-      errors,
-      touched,
-      changed,
-      canSave,
-      formIsValid,
-
-      // Actions.
-      handleSave,
-
-      // Field utils.
-      getStatus,
-      getValue: getFormValue,
-      onValueChange,
-      onTouched,
-    }),
-    [
-      values,
-      errors,
-      touched,
-      changed,
-      canSave,
-      formIsValid,
-      handleSave,
-      getStatus,
-      getFormValue,
-      onValueChange,
-      onTouched,
-    ],
-  );
-};
-
-const createKeySet = <T extends BaseObject, V>(obj: T, value: V): Record<JsonPath, V> => {
-  invariant(obj);
-  return Object.keys(obj).reduce((acc, key) => ({ ...acc, [key]: value }), {} as Record<JsonPath, V>);
-};
-
-const flatMap = (errors: ValidationError[]) => {
-  return errors.reduce(
-    (result, { path, message }) => {
-      // Convert the validation error path format to our JsonPath format.
-      const jsonPath = fromEffectValidationPath(path);
-      if (!(jsonPath in result)) {
-        result[jsonPath] = message;
-      }
-      return result;
-    },
-    {} as Record<JsonPath, string>,
-  );
-};