@dxos/react-ui-form 0.7.2 → 0.7.3-main.2dd075e

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/components/deprecated/Form.stories.tsx

@@ -7,11 +7,11 @@ import '@dxos-theme';
 import { type Meta, type StoryObj } from '@storybook/react';
 import React from 'react';
 
-import { create } from '@dxos/echo-schema';
-import { testData, testView, TestSchema, type TestType } from '@dxos/schema/testing';
-import { withTheme, withLayout } from '@dxos/storybook-utils';
+import { create } from '@dxos/live-object';
+import { testData, TestSchema, testView, type TestType } from '@dxos/schema/testing';
+import { withLayout, withTheme } from '@dxos/storybook-utils';
 
-import { type DeprecatedFormProps, DeprecatedForm } from './Form';
+import { DeprecatedForm, type DeprecatedFormProps } from './Form';
 import translations from '../../translations';
 import { TestLayout, TestPanel } from '../testing';
 

package/src/hooks/useForm.ts

@@ -22,8 +22,8 @@ export type FormHandler<T extends BaseObject> = {
   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.
@@ -39,9 +39,16 @@ export type FormHandler<T extends BaseObject> = {
  * Hook options.
  */
 export interface FormOptions<T extends BaseObject> {
+  /**
+   * Effect schema.
+   */
+  // TODO(burdon): Change to S.Struct<T>?
   schema: S.Schema<T>;
 
-  // TODO(burdon): Are these reactive?
+  /**
+   * Initial values (which may not pass validation).
+   */
+  // TODO(burdon): Should be partial?
   initialValues: T;
 
   /**
@@ -56,7 +63,7 @@ export interface FormOptions<T extends BaseObject> {
    * 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.
+  // TODO(burdon): Change to key x value?
   onValidate?: (values: T) => ValidationError[] | undefined;
 
   /**
@@ -67,7 +74,7 @@ export interface FormOptions<T extends BaseObject> {
   /**
    * 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;
 }
 
 /**
@@ -80,7 +87,7 @@ export const useForm = <T extends BaseObject>({
   onValuesChanged,
   onValidate,
   onValid,
-  onSubmit,
+  onSave,
 }: FormOptions<T>): FormHandler<T> => {
   const [values, setValues] = useState<T>(initialValues);
   useEffect(() => {
@@ -123,7 +130,7 @@ export const useForm = <T extends BaseObject>({
    * 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>],
@@ -131,11 +138,11 @@ export const useForm = <T extends BaseObject>({
     [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.
@@ -185,7 +192,7 @@ export const useForm = <T extends BaseObject>({
 
       // 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));
       }
@@ -201,8 +208,8 @@ export const useForm = <T extends BaseObject>({
     errors,
     touched,
     changed,
-    canSubmit,
-    handleSubmit,
+    canSave,
+    handleSave,
 
     // Field utils.
     getStatus,