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

package/src/components/Form/FormContent.tsx

@@ -1,241 +0,0 @@
-//
-// Copyright 2025 DXOS.org
-//
-
-import { Schema, SchemaAST, pipe } from 'effect';
-import { capitalize } from 'effect/String';
-import React, { forwardRef, useMemo } from 'react';
-
-import { createJsonPath, findNode, getDiscriminatedType, isDiscriminatedUnion } from '@dxos/effect';
-import { type ThemedClassName } from '@dxos/react-ui';
-import { mx } from '@dxos/react-ui-theme';
-import { type SchemaProperty, getSchemaProperties } from '@dxos/schema';
-import { isNotFalsy } from '@dxos/util';
-
-import { type QueryRefOptions } from '../../hooks';
-import { getRefProps } from '../../util';
-
-import { ArrayField } from './ArrayField';
-import { SelectInput } from './Defaults';
-import { getInputComponent } from './factory';
-import { type ComponentLookup } from './Form';
-import { useFormValues, useInputProps } from './FormContext';
-import { type InputComponent } from './Input';
-import { RefField } from './RefField';
-
-export type FormFieldProps = {
-  property: SchemaProperty<any>;
-  path?: (string | number)[];
-  readonly?: boolean;
-  /** Used to indicate if input should be presented inline (e.g. for array items). */
-  inline?: boolean;
-  onQueryRefOptions?: QueryRefOptions;
-  lookupComponent?: ComponentLookup;
-  Custom?: Partial<Record<string, InputComponent>>;
-};
-
-export const FormField = ({
-  property,
-  path,
-  readonly,
-  inline,
-  onQueryRefOptions,
-  lookupComponent,
-  Custom,
-}: FormFieldProps) => {
-  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(
-    () => (examples?.length ? `Example: "${examples[0]}"` : description),
-    [examples, description],
-  );
-
-  //
-  // Registry and Custom.
-  //
-
-  const FoundComponent = lookupComponent?.({
-    prop: name,
-    schema: Schema.make(ast),
-    inputProps: {
-      type,
-      format,
-      label,
-      disabled: readonly,
-      placeholder,
-      ...inputProps,
-    },
-  });
-
-  if (FoundComponent) {
-    return FoundComponent;
-  }
-
-  const jsonPath = createJsonPath(path ?? []);
-  const CustomComponent = Custom?.[jsonPath];
-  if (CustomComponent) {
-    return (
-      <CustomComponent
-        type={type}
-        format={format}
-        label={label}
-        inputOnly={inline}
-        placeholder={placeholder}
-        disabled={readonly}
-        {...inputProps}
-      />
-    );
-  }
-
-  //
-  // Refs.
-  //
-
-  const refProps = getRefProps(property);
-  if (refProps) {
-    return (
-      <RefField
-        ast={refProps.ast}
-        array={refProps.isArray}
-        type={type}
-        format={format}
-        label={label}
-        placeholder={placeholder}
-        disabled={readonly}
-        inputOnly={inline}
-        onQueryRefOptions={onQueryRefOptions}
-        {...inputProps}
-      />
-    );
-  }
-
-  //
-  // Arrays.
-  //
-
-  if (array) {
-    return <ArrayField property={property} path={path} inputProps={inputProps} readonly={readonly} Custom={Custom} />;
-  }
-
-  //
-  // Standard Inputs.
-  //
-
-  const InputComponent = getInputComponent(type, format);
-  if (InputComponent) {
-    return (
-      <InputComponent
-        type={type}
-        format={format}
-        label={label}
-        inputOnly={inline}
-        placeholder={placeholder}
-        disabled={readonly}
-        {...inputProps}
-      />
-    );
-  }
-
-  //
-  // Select.
-  //
-
-  if (options) {
-    return (
-      <SelectInput
-        type={type}
-        format={format}
-        disabled={readonly}
-        inputOnly={inline}
-        label={label}
-        options={options.map((option) => ({ value: option, label: String(option) }))}
-        placeholder={placeholder}
-        {...inputProps}
-      />
-    );
-  }
-
-  //
-  // Nested Objects.
-  //
-
-  if (type === 'object') {
-    const baseNode = findNode(ast, isDiscriminatedUnion);
-    const typeLiteral = baseNode
-      ? getDiscriminatedType(baseNode, inputProps.getValue() as any)
-      : findNode(ast, SchemaAST.isTypeLiteral);
-
-    if (typeLiteral) {
-      return (
-        <>
-          {!inline && <h3 className={mx('text-lg mlb-inputSpacingBlock first:mbs-0')}>{label}</h3>}
-          <FormFields
-            schema={Schema.make(typeLiteral)}
-            path={path}
-            readonly={readonly}
-            onQueryRefOptions={onQueryRefOptions}
-            Custom={Custom}
-            lookupComponent={lookupComponent}
-          />
-        </>
-      );
-    }
-  }
-
-  return null;
-};
-
-export type FormFieldsProps = ThemedClassName<{
-  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[];
-  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 = 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/FormContext.tsx

@@ -1,110 +0,0 @@
-//
-// Copyright 2025 DXOS.org
-//
-
-import React, {
-  type FocusEvent,
-  type PropsWithChildren,
-  type RefObject,
-  createContext,
-  useCallback,
-  useContext,
-  useEffect,
-  useMemo,
-} from 'react';
-
-import { raise } from '@dxos/debug';
-import { type BaseObject, getValue } from '@dxos/echo-schema';
-import { type SimpleType, createJsonPath } from '@dxos/effect';
-
-import { type FormHandler, type FormOptions, useForm } from '../../hooks';
-
-type FormContextValue<T extends BaseObject> = FormHandler<T>;
-
-const FormContext = createContext<FormContextValue<any> | undefined>(undefined);
-
-export const useFormContext = <T extends BaseObject>(): FormContextValue<T> => {
-  return useContext(FormContext) ?? raise(new Error('Missing FormContext'));
-};
-
-export const useFormValues = (path: (string | number)[] = []): any => {
-  const { values: formValues } = useFormContext();
-  const jsonPath = createJsonPath(path);
-  return getValue(formValues, jsonPath) as BaseObject;
-};
-
-export type FormInputStateProps = {
-  getStatus: () => { status?: 'error'; error?: string };
-  getValue: <V>() => V | undefined;
-  onValueChange: (type: SimpleType, value: any) => void;
-  onBlur: (event: FocusEvent<HTMLElement>) => void;
-};
-
-export const useInputProps = (path: (string | number)[] = []): FormInputStateProps => {
-  const { getStatus, getValue: getFormValue, onValueChange, onTouched } = useFormContext();
-
-  const stablePath = useMemo(() => path, [Array.isArray(path) ? path.join('.') : path]);
-  return useMemo(
-    () => ({
-      getStatus: () => getStatus(stablePath),
-      getValue: () => getFormValue(stablePath),
-      onValueChange: (type: SimpleType, value: any) => onValueChange(stablePath, type, value),
-      onBlur: () => onTouched(stablePath),
-    }),
-    [getStatus, getFormValue, onValueChange, onTouched, stablePath],
-  );
-};
-
-export const FormProvider = ({
-  children,
-  formRef,
-  autoSave,
-  ...formOptions
-}: PropsWithChildren<
-  FormOptions<any> & {
-    formRef?: RefObject<HTMLDivElement>;
-    autoSave?: boolean;
-  }
->) => {
-  const form = useForm(formOptions);
-
-  const handleKeyDown = useCallback(
-    (event: KeyboardEvent) => {
-      const keyIsEnter = event.key === 'Enter';
-      const modifierUsed = event.ctrlKey || event.altKey || event.metaKey || event.shiftKey;
-      const inputIsTextarea = (event.target as HTMLElement).tagName.toLowerCase() === 'textarea';
-      const inputOptOut =
-        (event.target as HTMLElement).hasAttribute('data-no-submit') ||
-        (event.target as HTMLElement).closest('[data-no-submit]') !== null;
-
-      // Regular inputs: Submit on Enter (no modifiers).
-      const shouldSubmitRegularInput = !inputIsTextarea && keyIsEnter && !modifierUsed;
-
-      // Textareas: Submit only on Meta+Enter.
-      const shouldSubmitTextarea = inputIsTextarea && keyIsEnter && event.metaKey;
-
-      if ((shouldSubmitRegularInput || shouldSubmitTextarea) && !inputOptOut) {
-        if (!autoSave && form.canSave) {
-          form.handleSave();
-        }
-        if (autoSave && form.formIsValid) {
-          (event.target as HTMLElement).blur();
-        }
-      }
-    },
-    [form, autoSave],
-  );
-
-  useEffect(() => {
-    if (!formRef?.current) {
-      return;
-    }
-
-    const formElement = formRef.current;
-
-    formElement.addEventListener('keydown', handleKeyDown);
-    return () => formElement.removeEventListener('keydown', handleKeyDown);
-  }, [formRef, form.canSave, form.formIsValid, form.handleSave, autoSave]);
-
-  return <FormContext.Provider value={form}>{children}</FormContext.Provider>;
-};

package/src/components/Form/Input.tsx

@@ -1,51 +0,0 @@
-//
-// Copyright 2024 DXOS.org
-//
-
-import React, { type FC } from 'react';
-
-import { type FormatEnum } from '@dxos/echo-schema';
-import { type SimpleType } from '@dxos/effect';
-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';
-
-/**
- * Props passed to input components.
- */
-export type InputProps = {
-  type: SimpleType;
-  format?: FormatEnum;
-  label: string;
-  disabled?: boolean;
-  placeholder?: string;
-  inputOnly?: boolean;
-} & FormInputStateProps;
-
-/**
- * Form input component.
- */
-export type InputComponent = FC<InputProps>;
-
-export type InputHeaderProps = {
-  error?: string;
-  label: string;
-  readonly?: boolean;
-};
-
-export const InputHeader = ({ error, label, readonly }: InputHeaderProps) => {
-  const Label = readonly ? 'span' : Input.Label;
-  const labelProps = readonly ? {} : { classNames: '!mlb-0' };
-  return (
-    <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} />
-        </Tooltip.Trigger>
-      )}
-    </div>
-  );
-};

package/src/components/Form/RefField.tsx

@@ -1,214 +0,0 @@
-//
-// Copyright 2025 DXOS.org
-//
-
-import { type SchemaAST } from 'effect';
-import React, { type FocusEvent, useCallback, useMemo } from 'react';
-
-import {
-  Expando,
-  Ref,
-  ReferenceAnnotationId,
-  type ReferenceAnnotationValue,
-  getTypeAnnotation,
-} from '@dxos/echo-schema';
-import { findAnnotation } from '@dxos/effect';
-import { DXN } from '@dxos/keys';
-import { DxRefTag } from '@dxos/lit-ui/react';
-import { Input, useTranslation } from '@dxos/react-ui';
-import { TagPicker, type TagPickerItemData, type TagPickerMode } from '@dxos/react-ui-tag-picker';
-import { descriptionText, mx } from '@dxos/react-ui-theme';
-import { isNonNullable } from '@dxos/util';
-
-import { type QueryRefOptions, useQueryRefOptions } from '../../hooks';
-import { translationKey } from '../../translations';
-
-import { TextInput } from './Defaults';
-import { InputHeader, type InputProps } from './Input';
-
-type RefFieldProps = InputProps & {
-  ast?: SchemaAST.AST;
-  array?: boolean;
-  onQueryRefOptions?: QueryRefOptions;
-};
-
-export const RefField = ({
-  type,
-  label,
-  disabled,
-  placeholder,
-  inputOnly,
-  array,
-  ast,
-  getValue,
-  onBlur,
-  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, disabled, inputOnly, getValue, onBlur, onValueChange, ...restInputProps }}
-      />
-    );
-  }
-
-  const handleGetValue = useCallback((): TagPickerItemData[] => {
-    const formValue = getValue();
-
-    const unknownToRefOption = (val: unknown) => {
-      if (Ref.isRef(val)) {
-        const dxnString = val.dxn.toString();
-        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 handleSearch = useCallback(
-    (text: string, ids: string[]): TagPickerItemData[] =>
-      availableOptions
-        .filter((option) => !ids.includes(option.id))
-        .filter((option) => option.label.toLowerCase().includes(text.toLowerCase()))
-        .map((option) => ({ id: option.id, label: option.label, hue: option.hue as any })),
-    [availableOptions],
-  );
-
-  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],
-  );
-
-  const tagPickerMode: TagPickerMode = useMemo(() => (array ? 'multi-select' : 'single-select'), [array]);
-
-  if (!refTypeInfo) {
-    return null;
-  }
-
-  const { status, error } = restInputProps.getStatus();
-
-  const items = handleGetValue();
-
-  // 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} label={label} />}
-      <div data-no-submit>
-        {disabled ? (
-          items.length < 1 ? (
-            <p className={mx(descriptionText, 'mbe-2')}>{t('empty readonly ref field label')}</p>
-          ) : (
-            items.map((item) => (
-              <DxRefTag key={item.id} refid={item.id} rootclassname='mie-1' style={{ marginInlineEnd: '.25rem' }}>
-                {item.label}
-              </DxRefTag>
-            ))
-          )
-        ) : (
-          <TagPicker
-            readonly={disabled}
-            items={items}
-            mode={tagPickerMode}
-            onBlur={(event) => onBlur(event as unknown as FocusEvent<HTMLElement>)}
-            onUpdate={handleUpdate}
-            onSearch={handleSearch}
-            classNames='bg-inputSurface p-1.5 rounded-sm'
-          />
-        )}
-      </div>
-      {inputOnly && <Input.DescriptionAndValidation>{error}</Input.DescriptionAndValidation>}
-    </Input.Root>
-  );
-};
-
-const RefFieldFallback = ({
-  type,
-  label,
-  disabled,
-  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}
-      disabled={disabled}
-      placeholder={placeholder}
-      inputOnly={inputOnly}
-      getValue={handleGetValue as <V>() => V | undefined}
-      onValueChange={handleOnValueChange}
-      {...restInputProps}
-    />
-  );
-};

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

@@ -1,72 +0,0 @@
-//
-// Copyright 2024 DXOS.org
-//
-
-import React, { type ChangeEvent, useCallback, useEffect, useMemo, useState } from 'react';
-
-import { GeoLocation, type GeoPoint } from '@dxos/echo-schema';
-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, disabled, 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'>
-        <Input.TextInput
-          type='text'
-          pattern='^-?[0-9]*\.?[0-9]*$'
-          disabled={disabled}
-          placeholder={t('placeholder latitude')}
-          value={latitudeText}
-          onChange={handleCoordinateChange('latitude', setLatitudeText)}
-          onBlur={onBlur}
-        />
-        <Input.TextInput
-          type='text'
-          pattern='^-?[0-9]*\.?[0-9]*$'
-          disabled={disabled}
-          placeholder={t('placeholder longitude')}
-          value={longitudeText}
-          onChange={handleCoordinateChange('longitude', setLongitudeText)}
-          onBlur={onBlur}
-        />
-      </div>
-    </Input.Root>
-  );
-};