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

package/src/components/Form/custom/SelectOptionsInput.stories.tsx

@@ -1,62 +0,0 @@
-//
-// Copyright 2025 DXOS.org
-//
-
-import '@dxos-theme';
-
-import { type Meta, type StoryObj } from '@storybook/react-vite';
-import { Schema } from 'effect';
-import React, { useState } from 'react';
-
-import { type SelectOption, SelectOptionSchema } from '@dxos/echo-schema';
-import { withLayout, withTheme } from '@dxos/storybook-utils';
-
-import { translations } from '../../../translations';
-import { TestLayout, TestPanel } from '../../testing';
-import { Form } from '../Form';
-
-import { SelectOptionInput } from './SelectOptionsInput';
-
-const schema = Schema.Struct({
-  options: Schema.Array(SelectOptionSchema).pipe(Schema.mutable),
-}).pipe(Schema.mutable);
-
-const DefaultStory = () => {
-  const [values, setValues] = useState<{ options: SelectOption[] }>({
-    // TODO(Zaymon): Pick colors from our limited set.
-    options: [
-      { id: 'opt_1', title: 'First option', color: 'amber' },
-      { id: 'opt_2', title: 'Second option', color: 'emerald' },
-      { id: 'opt_3', title: 'Third option', color: 'rose' },
-    ],
-  });
-
-  return (
-    <TestLayout>
-      <TestPanel>
-        <Form
-          schema={schema}
-          values={values}
-          onSave={(vals) => setValues(vals)}
-          Custom={{ options: SelectOptionInput }}
-        />
-      </TestPanel>
-    </TestLayout>
-  );
-};
-
-const meta: Meta = {
-  title: 'ui/react-ui-form/SelectOptionsInput',
-  component: SelectOptionInput,
-  render: DefaultStory,
-  decorators: [withTheme, withLayout({ fullscreen: true })],
-  parameters: {
-    translations,
-  },
-};
-
-export default meta;
-
-type Story = StoryObj;
-
-export const Default: Story = {};

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

@@ -1,47 +0,0 @@
-//
-// Copyright 2024 DXOS.org
-//
-
-import React from 'react';
-
-import { Input } from '@dxos/react-ui';
-import { mx } from '@dxos/react-ui-theme';
-import { safeParseFloat } from '@dxos/util';
-
-import { InputHeader, type InputProps } from '../Input';
-
-const gridCols = ['grid-cols-1', 'grid-cols-2', 'grid-cols-3', 'grid-cols-4'];
-
-export const TupleInput = ({
-  binding,
-  type,
-  label,
-  disabled,
-  getStatus,
-  getValue,
-  onValueChange,
-  onBlur,
-}: InputProps & { binding: string[] }) => {
-  const { status, error } = getStatus();
-
-  // TODO(burdon): Generalize number/float/string, etc.
-  const values: Record<string, number> = getValue<Record<string, number>>() ?? {};
-
-  return (
-    <Input.Root validationValence={status}>
-      <InputHeader error={error} label={label} />
-      <div className={mx('grid gap-2', gridCols[binding.length - 1])}>
-        {binding.map((prop) => (
-          <Input.TextInput
-            key={prop}
-            type='number'
-            disabled={disabled}
-            value={values[prop]}
-            onChange={(event) => onValueChange(type, { ...values, [prop]: safeParseFloat(event.target.value, 0) })}
-            onBlur={onBlur}
-          />
-        ))}
-      </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-schema';
-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/components/deprecated/Form.stories.tsx

@@ -1,63 +0,0 @@
-//
-// Copyright 2024 DXOS.org
-//
-
-import '@dxos-theme';
-
-import { type Meta, type StoryObj } from '@storybook/react-vite';
-import React from 'react';
-
-import { live } from '@dxos/live-object';
-import { TestSchema, type TestType, testData, testView } from '@dxos/schema/testing';
-import { withLayout, withTheme } from '@dxos/storybook-utils';
-
-import { translations } from '../../translations';
-import { TestLayout, TestPanel } from '../testing';
-
-import { DeprecatedForm, type DeprecatedFormProps } from './Form';
-
-const DefaultStory = (props: DeprecatedFormProps) => (
-  <TestLayout json={{ props }}>
-    <TestPanel>
-      <DeprecatedForm {...props} />
-    </TestPanel>
-  </TestLayout>
-);
-
-const meta: Meta<typeof DefaultStory> = {
-  title: 'ui/react-ui-form/DeprecatedForm',
-  component: DeprecatedForm,
-  render: DefaultStory,
-  decorators: [withLayout({ fullscreen: true }), withTheme],
-  parameters: {
-    translations,
-  },
-};
-
-export default meta;
-
-type Story = StoryObj<DeprecatedFormProps<TestType>>;
-
-export const Default: Story = {
-  args: {
-    object: live(testData),
-    projection: live(testView).projection,
-    schema: TestSchema,
-  },
-};
-
-export const Empty: Story = {
-  args: {
-    projection: live(testView).projection,
-    schema: TestSchema,
-  },
-};
-
-export const Readonly: Story = {
-  args: {
-    object: live(testData),
-    projection: live(testView).projection,
-    schema: TestSchema,
-    readonly: true,
-  },
-};

package/src/components/deprecated/Form.tsx

@@ -1,119 +0,0 @@
-//
-// Copyright 2024 DXOS.org
-//
-
-import { Option, type Schema, SchemaAST, pipe } from 'effect';
-import React, { useState } from 'react';
-
-import { findProperty } from '@dxos/effect';
-import { Input, type TextInputProps as NativeTextInputProps, type ThemedClassName } from '@dxos/react-ui';
-import { mx } from '@dxos/react-ui-theme';
-import { type Projection, getFieldValue, setFieldValue } from '@dxos/schema';
-
-export type DeprecatedFormProps<T extends {} = {}> = ThemedClassName<{
-  projection: Projection;
-  object: T;
-  schema?: Schema.Schema<T>;
-  readonly?: boolean;
-}>;
-
-/**
- * Schema-based object form.
- */
-export const DeprecatedForm = <T extends {} = {}>({
-  classNames,
-  projection,
-  object,
-  schema,
-  readonly,
-}: DeprecatedFormProps<T>) => {
-  return (
-    <div role='none' className={mx('flex flex-col w-full gap-2 p-2', classNames)}>
-      {projection.fields.map((field) => {
-        const prop = schema && findProperty(schema, field.path);
-        const title = (prop && pipe(SchemaAST.getTitleAnnotation(prop), Option.getOrUndefined)) ?? '';
-        const description = (prop && pipe(SchemaAST.getDescriptionAnnotation(prop), Option.getOrUndefined)) ?? title;
-        // const format =
-        //   (prop && (getPatternAnnotation(prop) ?? (SchemaAST.isNumberKeyword(prop) && RealNumberFormat))) || undefined;
-
-        //
-        // Boolean
-        //
-
-        if (prop && SchemaAST.isBooleanKeyword(prop)) {
-          const value = object && getFieldValue(object, field);
-          const onChange = (checked: boolean) => {
-            setFieldValue(object, field, checked);
-          };
-
-          return (
-            <div key={field.path} className='flex flex-col w-full gap-1'>
-              <Input.Root>
-                <Input.Label classNames='px-1'>{title}</Input.Label>
-                <Input.Switch disabled={readonly} checked={!!value} onCheckedChange={(checked) => onChange(checked)} />
-              </Input.Root>
-            </div>
-          );
-        }
-
-        //
-        // Strings
-        // TODO(burdon): Other types:
-        //  - RichText editor
-        //  - Numbers (with formatting: commas, currency, etc.)
-        //  - Date (https://ark-ui.com/react/docs/components/date-picker)
-        //  - Enum (single/multi-select)
-        //
-
-        const value = object ? getFieldValue(object, field) : undefined;
-
-        return (
-          <div key={field.path} className='flex flex-col w-full gap-1'>
-            <Input.Root>
-              <Input.Label classNames='px-1'>{title}</Input.Label>
-              <TextInput
-                disabled={readonly}
-                placeholder={description}
-                // format={format}
-                value={value ? String(value) : ''}
-                onChange={(event) => setFieldValue(object, field, event.target.value)}
-              />
-            </Input.Root>
-          </div>
-        );
-      })}
-    </div>
-  );
-};
-
-type TextInputProps = {
-  // format?: PatternAnnotation;
-} & Omit<NativeTextInputProps, 'style'>;
-
-/**
- * @deprecated
- */
-// TODO(burdon): Remove.
-// TODO(burdon): Use schema validation directly.
-const TextInput = ({ onChange, ...props }: TextInputProps) => {
-  const [valid, _setValid] = useState(true);
-
-  const handleChange: NativeTextInputProps['onChange'] = (ev) => {
-    // const text = ev.target.value;
-    // if (!format?.filter || text.match(format.filter)) {
-    onChange?.(ev);
-    //   if (format?.valid) {
-    //     setValid(format.valid.test(text));
-    //   }
-    // }
-  };
-
-  return (
-    <Input.TextInput
-      {...props}
-      // TODO(burdon): validationValence on Input.
-      style={valid ? {} : ({ '--tw-ring-color': 'red' } as any)}
-      onChange={handleChange}
-    />
-  );
-};

package/src/components/deprecated/FormInput.tsx

@@ -1,71 +0,0 @@
-//
-// Copyright 2023 DXOS.org
-//
-
-import React, { type JSX, type PropsWithChildren } from 'react';
-
-import { Input, type ThemedClassName } from '@dxos/react-ui';
-import { mx, textBlockWidth } from '@dxos/react-ui-theme';
-
-/**
- * @deprecated
- */
-export const DeprecatedFormContainer = ({ children, classNames }: ThemedClassName<PropsWithChildren>) => {
-  return (
-    <div role='none' className='container-max-width p-4 justify-center overflow-x-hidden overflow-y-auto'>
-      <div role='form' className={mx('flex flex-col', textBlockWidth, classNames)}>
-        {children}
-      </div>
-    </div>
-  );
-};
-
-export type DeprecatedFormInputProps = {
-  label: string;
-  description?: JSX.Element;
-  secondary?: JSX.Element;
-};
-
-/**
- * @deprecated
- */
-export const DeprecatedFormInput = ({
-  label,
-  description,
-  secondary,
-  children,
-}: PropsWithChildren<DeprecatedFormInputProps>) => {
-  const primary = (
-    <div role='none' className='flex w-full gap-4 py-1'>
-      <Input.Root>
-        <div role='none' className='flex flex-col w-full'>
-          <Input.Label classNames='flex min-bs-[--rail-action] items-center' style={{ fontSize: 'unset' }}>
-            {label}
-          </Input.Label>
-          {description && (
-            <Input.DescriptionAndValidation classNames='mbs-0.5'>
-              <Input.Description>{description}</Input.Description>
-            </Input.DescriptionAndValidation>
-          )}
-        </div>
-
-        <div role='none'>
-          <div role='none' className='flex min-bs-[--rail-action] items-center'>
-            {children}
-          </div>
-        </div>
-      </Input.Root>
-    </div>
-  );
-
-  if (secondary) {
-    return (
-      <div role='none'>
-        {primary}
-        {secondary}
-      </div>
-    );
-  }
-
-  return primary;
-};

package/src/components/deprecated/index.ts

@@ -1,5 +0,0 @@
-//
-// Copyright 2024 DXOS.org
-//
-
-export * from './FormInput';

package/src/hooks/useForm.ts

@@ -1,293 +0,0 @@
-//
-// Copyright 2025 DXOS.org
-//
-
-import { type Schema, SchemaAST } from 'effect';
-import { useCallback, useEffect, useMemo, useState } from 'react';
-
-import { type BaseObject, getValue, setValue } from '@dxos/echo-schema';
-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],
-  );
-
-  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>,
-  );
-};