@dxos/react-ui-form 0.7.1 → 0.7.2-main.f1adc9f

package/src/components/Form/Form.tsx

@@ -2,16 +2,19 @@
 // Copyright 2024 DXOS.org
 //
 
+import { pipe } from 'effect';
+import { capitalize } from 'effect/String';
 import React, { useEffect, useMemo } from 'react';
 
-import { AST, S } from '@dxos/echo-schema';
+import { AST, type BaseObject, S, type PropertyKey } from '@dxos/echo-schema';
 import { findNode, getDiscriminatedType, isDiscriminatedUnion } from '@dxos/effect';
 import { log } from '@dxos/log';
 import { IconButton, type ThemedClassName, useTranslation } from '@dxos/react-ui';
 import { mx } from '@dxos/react-ui-theme';
-import { getSchemaProperties, type PropertyKey, type SchemaProperty } from '@dxos/schema';
+import { getSchemaProperties, type SchemaProperty } from '@dxos/schema';
 import { isNotFalsy } from '@dxos/util';
 
+import { SelectInput } from './Defaults';
 import { type InputComponent } from './Input';
 import { getInputComponent } from './factory';
 import { type FormOptions, useForm } from '../../hooks';
@@ -21,9 +24,9 @@ import { translationKey } from '../../translations';
 
 const padding = 'px-2';
 
-export type PropsFilter<T extends Object> = (props: SchemaProperty<T>[]) => SchemaProperty<T>[];
+export type PropsFilter<T extends BaseObject<T>> = (props: SchemaProperty<T>[]) => SchemaProperty<T>[];
 
-export type FormProps<T extends object> = ThemedClassName<
+export type FormProps<T extends BaseObject<T>> = ThemedClassName<
   {
     values: T;
     /** Path to the current object from the root. Used with nested forms. */
@@ -42,13 +45,13 @@ export type FormProps<T extends object> = ThemedClassName<
      * Map of custom renderers for specific properties.
      */
     Custom?: Partial<Record<string, InputComponent<T>>>;
-  } & Pick<FormOptions<T>, 'schema' | 'onValuesChanged' | 'onValidate' | 'onSubmit'>
+  } & Pick<FormOptions<T>, 'schema' | 'onValuesChanged' | 'onValidate' | 'onSave'>
 >;
 
 /**
  * General purpose form component that displays field controls based on the given schema.
  */
-export const Form = <T extends object = {}>({
+export const Form = <T extends BaseObject<T>>({
   classNames,
   schema,
   values: initialValues,
@@ -59,24 +62,24 @@ export const Form = <T extends object = {}>({
   autoSave,
   onValuesChanged,
   onValidate,
-  onSubmit,
+  onSave,
   onCancel,
   Custom,
 }: FormProps<T>) => {
   const { t } = useTranslation(translationKey);
-  const onValid = useMemo(() => (autoSave ? onSubmit : undefined), [autoSave, onSubmit]);
-  const { canSubmit, values, errors, handleSubmit, ...inputProps } = useForm<T>({
+  const onValid = useMemo(() => (autoSave ? onSave : undefined), [autoSave, onSave]);
+  const { canSave, values, errors, handleSave, ...inputProps } = useForm<T>({
     schema,
     initialValues,
     onValuesChanged,
     onValidate,
     onValid,
-    onSubmit,
+    onSave,
   });
 
   // Filter and sort props.
   // TODO(burdon): Move into useForm?
-  const props = useMemo(() => {
+  const properties = useMemo(() => {
     const props = getSchemaProperties<T>(schema.ast, values);
     const filtered = filter ? filter(props) : props;
     const findIndex = (props: PropertyKey<T>[], prop: PropertyKey<T>) => {
@@ -96,25 +99,50 @@ export const Form = <T extends object = {}>({
 
   return (
     <div role='form' className={mx('flex flex-col w-full gap-2 py-2', classNames)}>
-      {props
-        .map(({ prop, name, type, format, title, description, examples }) => {
-          // Custom property allows for sub forms.
-          // TODO(burdon): Use Select control if options are present in annotation?
+      {properties
+        .map((property) => {
+          const { ast, name, type, format, title, description, examples, options } = property;
           const key = [...path, name];
-          const InputComponent = Custom?.[key.join('.')] ?? getInputComponent<T>(type, format);
+          const label = title ?? pipe(name, capitalize);
+          const placeholder = examples?.length ? `Example: "${examples[0]}"` : description;
+
+          // Get generic input.
+          let InputComponent = Custom?.[key.join('.')];
+          if (!InputComponent) {
+            // Select.
+            if (options) {
+              return (
+                <div key={name} role='none' className={padding}>
+                  <SelectInput
+                    type={type}
+                    format={format}
+                    property={name}
+                    disabled={readonly}
+                    label={label}
+                    options={options.map((option) => ({ value: option, label: String(option) }))}
+                    placeholder={placeholder}
+                    {...inputProps}
+                  />
+                </div>
+              );
+            }
+
+            InputComponent = getInputComponent<T>(type, format);
+          }
+
           if (!InputComponent) {
             // Recursively render form.
             if (type === 'object') {
-              const baseNode = findNode(prop.type, isDiscriminatedUnion);
+              const baseNode = findNode(ast, isDiscriminatedUnion);
               const typeLiteral = baseNode
                 ? getDiscriminatedType(baseNode, values[name] as any)
-                : findNode(prop.type, AST.isTypeLiteral);
+                : findNode(ast, AST.isTypeLiteral);
 
               if (typeLiteral) {
                 const schema = S.make(typeLiteral);
                 return (
                   <div key={name} role='none'>
-                    <div className={padding}>{title ?? name}</div>
+                    <div className={padding}>{label}</div>
                     <Form<any>
                       schema={schema}
                       path={key}
@@ -133,8 +161,6 @@ export const Form = <T extends object = {}>({
             return null;
           }
 
-          const placeholder = examples?.length ? `Example: ${examples[0]}` : description;
-
           return (
             <div key={name} role='none' className={padding}>
               <InputComponent
@@ -142,7 +168,7 @@ export const Form = <T extends object = {}>({
                 format={format}
                 property={name}
                 disabled={readonly}
-                label={title ?? name}
+                label={label}
                 placeholder={placeholder}
                 {...inputProps}
               />
@@ -151,21 +177,19 @@ export const Form = <T extends object = {}>({
         })
         .filter(isNotFalsy)}
 
-      {/* {errors && <div className='overflow-hidden text-sm'>{JSON.stringify(errors)}</div>} */}
-
-      {(onCancel || onSubmit) && !autoSave && (
+      {(onCancel || onSave) && !autoSave && (
         <div role='none' className='flex justify-center'>
           <div role='none' className={mx(onCancel && !readonly && 'grid grid-cols-2 gap-2')}>
             {onCancel && !readonly && (
               <IconButton icon='ph--x--regular' label={t('button cancel')} onClick={onCancel} />
             )}
-            {onSubmit && (
+            {onSave && (
               <IconButton
                 type='submit'
-                disabled={!canSubmit}
+                disabled={!canSave}
                 icon='ph--check--regular'
                 label={t('button save')}
-                onClick={handleSubmit}
+                onClick={handleSave}
               />
             )}
           </div>

package/src/components/Form/Input.tsx

@@ -4,33 +4,29 @@
 
 import React, { type FC, type PropsWithChildren } from 'react';
 
-import { type FormatEnum } from '@dxos/echo-schema';
+import { type BaseObject, type FormatEnum, type PropertyKey } from '@dxos/echo-schema';
 import { type SimpleType } from '@dxos/effect';
 import { Icon, Tooltip } from '@dxos/react-ui';
 import { errorText } from '@dxos/react-ui-theme';
-import { type PropertyKey } from '@dxos/schema';
 
 import { type FormHandler } from '../../hooks';
 
 /**
  * Props passed to input components.
  */
-export type InputProps<T extends object = {}> = {
+export type InputProps<T extends BaseObject<T>> = {
   property: PropertyKey<T>;
   type: SimpleType;
   format?: FormatEnum;
   label: string;
   disabled?: boolean;
   placeholder?: string;
-  // TODO(burdon): Provide from annotations? E.g., enum.
-  options?: Array<{ value: string | number; label?: string }>;
 } & Pick<FormHandler<T>, 'getStatus' | 'getValue' | 'onValueChange' | 'onBlur'>;
 
 /**
  * Form input component.
  */
-// TODO(burdon): Remove generic from inputs.
-export type InputComponent<T extends object = {}> = FC<InputProps<T>>;
+export type InputComponent<T extends BaseObject<T>> = FC<InputProps<T>>;
 
 export type InputHeaderProps = PropsWithChildren<{
   error?: string;

package/src/components/Form/factory.tsx

@@ -2,23 +2,23 @@
 // Copyright 2024 DXOS.org
 //
 
-import { FormatEnum } from '@dxos/echo-schema';
+import { type BaseObject, FormatEnum } from '@dxos/echo-schema';
 import { type SimpleType } from '@dxos/effect';
 
-import { LatLngInput } from './Custom';
+import { GeiPointInput } from './Custom';
 import { BooleanInput, NumberInput, TextInput } from './Defaults';
 import { type InputComponent } from './Input';
 
 /**
  * Get property input component.
  */
-export const getInputComponent = <T extends object>(
+export const getInputComponent = <T extends BaseObject<T>>(
   type: SimpleType,
   format?: FormatEnum,
 ): InputComponent<T> | undefined => {
   switch (format) {
     case FormatEnum.LatLng:
-      return LatLngInput;
+      return GeiPointInput;
   }
 
   switch (type) {

package/src/components/ViewEditor/ViewEditor.stories.tsx

@@ -10,8 +10,7 @@ import React, { useCallback, useEffect, useState } from 'react';
 import { Format, type MutableSchema, S, toJsonSchema, TypedObject } from '@dxos/echo-schema';
 import { useSpace } from '@dxos/react-client/echo';
 import { withClientProvider } from '@dxos/react-client/testing';
-import { ViewProjection, createView } from '@dxos/schema';
-import { type ViewType } from '@dxos/schema';
+import { type ViewType, ViewProjection, createView } from '@dxos/schema';
 import { withTheme, withLayout } from '@dxos/storybook-utils';
 
 import { ViewEditor } from './ViewEditor';

package/src/components/ViewEditor/ViewEditor.tsx

@@ -22,7 +22,7 @@ const ViewMetaSchema = S.Struct({
   name: S.String.annotations({
     [AST.TitleAnnotationId]: 'View',
   }),
-  type: Format.DXN.annotations({
+  typename: Format.DXN.annotations({
     [AST.TitleAnnotationId]: 'Typename',
   }),
 }).pipe(S.mutable);
@@ -60,16 +60,16 @@ export const ViewEditor = ({
       name: view.name,
       // TODO(burdon): Need to warn user of possible consequences of editing.
       // TODO(burdon): Settings should have domain name owned by user.
-      type: view.query.type,
+      typename: view.query.typename,
     };
   }, [view]);
 
   const handleViewUpdate = useCallback(
-    ({ name, type }: ViewMetaType) => {
+    ({ name, typename }: ViewMetaType) => {
       requestAnimationFrame(() => {
         view.name = name;
-        view.query.type = type;
-        schema.updateTypename(type);
+        view.query.typename = typename;
+        schema.updateTypename(typename);
       });
     },
     [view, schema],
@@ -95,7 +95,7 @@ export const ViewEditor = ({
 
   return (
     <div role='none' className={mx('flex flex-col w-full divide-y divide-separator', classNames)}>
-      <Form<ViewMetaType> autoFocus autoSave schema={ViewMetaSchema} values={viewValues} onSubmit={handleViewUpdate} />
+      <Form<ViewMetaType> autoFocus autoSave schema={ViewMetaSchema} values={viewValues} onSave={handleViewUpdate} />
 
       <div>
         {/* TODO(burdon): Clean up common form ux. */}
@@ -139,9 +139,10 @@ export const ViewEditor = ({
           projection={projection}
           field={field}
           registry={registry}
-          onClose={handleClose}
+          onSave={handleClose}
         />
       )}
+
       {!readonly && !field && (
         <div className='flex p-2 justify-center'>
           <IconButton

package/src/hooks/useForm.ts

@@ -4,15 +4,16 @@
 
 import { type FocusEvent, useCallback, useEffect, useMemo, useState } from 'react';
 
+import { type BaseObject, type PropertyKey } from '@dxos/echo-schema';
 import { type SimpleType, type S } from '@dxos/effect';
 import { invariant } from '@dxos/invariant';
 import { log } from '@dxos/log';
-import { validateSchema, type PropertyKey, type ValidationError } from '@dxos/schema';
+import { validateSchema, type ValidationError } from '@dxos/schema';
 
 /**
  * Return type from `useForm` hook.
  */
-export type FormHandler<T extends object = {}> = {
+export type FormHandler<T extends BaseObject<T>> = {
   //
   // Form state management.
   //
@@ -21,8 +22,8 @@ export type FormHandler<T extends object = {}> = {
   errors: Record<PropertyKey<T>, string>;
   touched: Record<PropertyKey<T>, boolean>;
   changed: Record<PropertyKey<T>, boolean>;
-  canSubmit: boolean;
-  handleSubmit: () => void;
+  canSave: boolean;
+  handleSave: () => void;
 
   //
   // Form input component helpers.
@@ -37,7 +38,7 @@ export type FormHandler<T extends object = {}> = {
 /**
  * Hook options.
  */
-export interface FormOptions<T extends object> {
+export interface FormOptions<T extends BaseObject<T>> {
   schema: S.Schema<T>;
 
   // TODO(burdon): Are these reactive?
@@ -66,20 +67,20 @@ export interface FormOptions<T extends object> {
   /**
    * Called when the form is submitted and passes validation.
    */
-  onSubmit?: (values: T, meta: { changed: FormHandler<T>['changed'] }) => void;
+  onSave?: (values: T, meta: { changed: FormHandler<T>['changed'] }) => 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 object>({
+export const useForm = <T extends BaseObject<T>>({
   schema,
   initialValues,
   onValuesChanged,
   onValidate,
   onValid,
-  onSubmit,
+  onSave,
 }: FormOptions<T>): FormHandler<T> => {
   const [values, setValues] = useState<T>(initialValues);
   useEffect(() => {
@@ -122,7 +123,7 @@ export const useForm = <T extends object>({
    * 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 canSubmit = useMemo(
+  const canSave = useMemo(
     () =>
       Object.keys(values).every(
         (property) => touched[property as PropertyKey<T>] === false || !errors[property as PropertyKey<T>],
@@ -130,11 +131,11 @@ export const useForm = <T extends object>({
     [values, touched, errors],
   );
 
-  const handleSubmit = useCallback(() => {
+  const handleSave = useCallback(() => {
     if (validate(values)) {
-      onSubmit?.(values, { changed });
+      onSave?.(values, { changed });
     }
-  }, [values, validate, onSubmit]);
+  }, [values, validate, onSave]);
 
   //
   // Fields.
@@ -184,7 +185,7 @@ export const useForm = <T extends object>({
 
       // TODO(Zan): This should be configurable behavior.
       if (event.relatedTarget?.getAttribute('type') === 'submit') {
-        // NOTE: We do this here instead of onSubmit because the blur event is triggered before the submit event
+        // NOTE: We do this here instead of onSave because the blur event is triggered before the submit event
         //  and results in the submit button being disabled when the form is invalid.
         setTouched(createKeySet(values, true));
       }
@@ -200,8 +201,8 @@ export const useForm = <T extends object>({
     errors,
     touched,
     changed,
-    canSubmit,
-    handleSubmit,
+    canSave,
+    handleSave,
 
     // Field utils.
     getStatus,
@@ -211,12 +212,12 @@ export const useForm = <T extends object>({
   } satisfies FormHandler<T>;
 };
 
-const createKeySet = <T extends object, V>(obj: T, value: V): Record<PropertyKey<T>, V> => {
+const createKeySet = <T extends BaseObject<T>, V>(obj: T, value: V): Record<PropertyKey<T>, V> => {
   invariant(obj);
   return Object.keys(obj).reduce((acc, key) => ({ ...acc, [key]: value }), {} as Record<PropertyKey<T>, V>);
 };
 
-const flatMap = <T extends object>(errors: ValidationError[]) => {
+const flatMap = <T extends BaseObject<T>>(errors: ValidationError[]) => {
   return errors.reduce(
     (result, { path, message }) => {
       if (!(path in result)) {