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

package/src/components/Form/Input.tsx

@@ -14,7 +14,7 @@ import { type FormHandler } from '../../hooks';
 /**
  * Props passed to input components.
  */
-export type InputProps<T extends BaseObject<T>> = {
+export type InputProps<T extends BaseObject> = {
   property: PropertyKey<T>;
   type: SimpleType;
   format?: FormatEnum;
@@ -26,7 +26,7 @@ export type InputProps<T extends BaseObject<T>> = {
 /**
  * Form input component.
  */
-export type InputComponent<T extends BaseObject<T>> = FC<InputProps<T>>;
+export type InputComponent<T extends BaseObject> = FC<InputProps<T>>;
 
 export type InputHeaderProps = PropsWithChildren<{
   error?: string;

package/src/components/Form/factory.tsx

@@ -12,7 +12,7 @@ import { type InputComponent } from './Input';
 /**
  * Get property input component.
  */
-export const getInputComponent = <T extends BaseObject<T>>(
+export const getInputComponent = <T extends BaseObject>(
   type: SimpleType,
   format?: FormatEnum,
 ): InputComponent<T> | undefined => {

package/src/components/ViewEditor/ViewEditor.tsx

@@ -22,7 +22,7 @@ const ViewMetaSchema = S.Struct({
   name: S.String.annotations({
     [AST.TitleAnnotationId]: 'View',
   }),
-  typename: Format.DXN.annotations({
+  type: 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.
-      typename: view.query.typename,
+      type: view.query.type,
     };
   }, [view]);
 
   const handleViewUpdate = useCallback(
-    ({ name, typename }: ViewMetaType) => {
+    ({ name, type }: ViewMetaType) => {
       requestAnimationFrame(() => {
         view.name = name;
-        view.query.typename = typename;
-        schema.updateTypename(typename);
+        view.query.type = type;
+        schema.updateTypename(type);
       });
     },
     [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} onSave={handleViewUpdate} />
+      <Form<ViewMetaType> autoFocus autoSave schema={ViewMetaSchema} values={viewValues} onSubmit={handleViewUpdate} />
 
       <div>
         {/* TODO(burdon): Clean up common form ux. */}
@@ -139,10 +139,9 @@ export const ViewEditor = ({
           projection={projection}
           field={field}
           registry={registry}
-          onSave={handleClose}
+          onClose={handleClose}
         />
       )}
-
       {!readonly && !field && (
         <div className='flex p-2 justify-center'>
           <IconButton

package/src/hooks/useForm.ts

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