migration finished

src/examples/form/ui.tsx

@@ -8,9 +8,10 @@ const FormUI = ({
   setForm,
   loading,
   errors,
+  onSubmit,
 }: T.FormUIProps<FormDataShape>) => {
   return (
-    <>
+    <form onSubmit={onSubmit}>
       <Inputs.InputWrapper error={errors["firstName"]}>
         <Inputs.Input
           value={form.firstName}
@@ -33,7 +34,7 @@ const FormUI = ({
       <button disabled={loading} type="submit" className="btn btn-primary">
         Send
       </button>
-    </>
+    </form>
   );
 };
 

src/examples/simple-list/list-add/form.tsx

@@ -1,9 +1,9 @@
-import React from 'react';
-import { FormUIProps } from '../../../lib/form/type';
+import React from "react";
+import { FormUIProps } from "../../../lib/form/type";
 
-import * as Inputs from '../../../components/form/inputs';
-import FormWrapper from '../../../lib/form/form-wrapper';
-import Icon from '../../../components/icon';
+import * as Inputs from "../../../components/form/inputs";
+import FormWrapper from "../../../lib/form/form-wrapper";
+import Icon from "../../../components/icon";
 
 export interface FormDataShape {
   name: string;
@@ -13,28 +13,29 @@ const FormUI = ({
   form,
   setForm,
   loading,
-  errors
+  onSubmit,
+  errors,
 }: FormUIProps<FormDataShape>) => {
   return (
-    <>
+    <form onSubmit={onSubmit}>
       <div className="input-group mb-3">
         <Inputs.Input
           value={form.name}
-          onChange={name => setForm({ ...form, name })}
+          onChange={(name) => setForm({ ...form, name })}
           disabled={loading}
-          placeholder={'Name'}
-          errors={errors['name']}
+          placeholder={"Name"}
+          errors={errors["name"]}
         />
         <button
-          disabled={loading || form.name === '' || !form.name}
+          disabled={loading || form.name === "" || !form.name}
           className="btn btn-outline-primary"
           type="button"
           id="button-addon1"
         >
           <Icon name="plus" /> Add
         </button>
       </div>
-    </>
+    </form>
   );
 };
 
@@ -44,7 +45,7 @@ const apiCall = async (a: FormDataShape) =>
   Promise.resolve(Math.random() * 100);
 
 const Form = FormWrapper<FormDataShape, number>(FormUI, shape, apiCall, {
-  resetAfterSubmit: true
+  resetAfterSubmit: true,
 });
 
 export default Form;

src/examples/simple-list/list-form/form.tsx

@@ -15,9 +15,10 @@ const FormUI = ({
   setForm,
   loading,
   errors,
+  onSubmit,
 }: FormUIProps<FormDataShape>) => {
   return (
-    <>
+    <form onSubmit={onSubmit}>
       <Inputs.InputWrapper label="Name" error={errors["name"]}>
         <Inputs.Input
           value={form.name}
@@ -44,7 +45,7 @@ const FormUI = ({
       >
         <Icon name="plus" /> Add
       </button>
-    </>
+    </form>
   );
 };
 

src/examples/superadmin/user/authentication/form.tsx

@@ -15,9 +15,10 @@ const FormUI = ({
   setForm,
   loading,
   errors,
+  onSubmit,
 }: FormUIProps<FormDataShape>) => {
   return (
-    <>
+    <form onSubmit={onSubmit}>
       <Inputs.InputWrapper label="Value" error={errors["value"]}>
         <Inputs.Input
           value={form.value}
@@ -55,7 +56,7 @@ const FormUI = ({
       >
         <Icon name="plus" /> Add
       </button>
-    </>
+    </form>
   );
 };
 

src/lib/form/form-wrapper.tsx

@@ -5,7 +5,6 @@ import * as T from "./type";
 import * as Validation from "@nexys/validation";
 
 import { FormWrapper as F2 } from "./generator2";
-import { FormUIProps } from "./generator2/type";
 
 export interface FormWrapperProps<A, Out> {
   onSuccess?: (data: A, out?: Out) => void;
@@ -26,7 +25,7 @@ interface FormWrapperOptions {
  */
 const FormWrapper =
   <FormShape, Out = any>(
-    FormUIInput: (props: FormUIProps<FormShape>) => JSX.Element,
+    FormUIInput: (props: T.FormUIProps<FormShape>) => JSX.Element,
     shape: Validation.Type.Shape,
     asyncCall?: (data: FormShape) => Promise<Out>,
     { resetAfterSubmit = true }: Partial<FormWrapperOptions> = {}

src/lib/form/generator/ui.tsx

@@ -12,9 +12,15 @@ export interface FormUIGeneratorProps {
 const FormUIGenerator =
   ({ InputGeneric, InputWrapper, Button }: FormUIGeneratorProps) =>
   <A,>(def: T.FormDef<A>[]) =>
-  ({ form, setForm, loading, errors }: T.FormUIProps<A>): JSX.Element => {
+  ({
+    form,
+    setForm,
+    loading,
+    errors,
+    onSubmit,
+  }: T.FormUIProps<A>): JSX.Element => {
     return (
-      <>
+      <form onSubmit={onSubmit}>
         {def.map((item, i) => {
           const Input = InputGeneric(item.uiType);
 
@@ -35,7 +41,7 @@ const FormUIGenerator =
         })}
 
         <Button />
-      </>
+      </form>
     );
   };
 

src/lib/form/generator2/components/buttons.tsx

@@ -1,4 +1,4 @@
-import { SubmitButtonProps } from "../type";
+import { SubmitButtonProps } from "../../type";
 import Spinner from "./spinner";
 
 const getButtonClassName = (context?: "primary") => {

src/lib/form/generator2/components/index.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 
-import * as T from "./type";
+import * as T from "../../type";
 import { isNotPartial } from "./utils";
 
 interface FormWrapperProps<A, B> {
@@ -62,8 +62,8 @@ export const FormWrapper = <A, B>({
   return (
     <FormUI
       loading={loading}
-      formData={formData}
-      setFormData={setFormData}
+      form={formData}
+      setForm={setFormData}
       errors={errors}
       onSubmit={handleSubmit}
     >
@@ -97,9 +97,9 @@ export const generateFormUI =
               <Input
                 disabled={props.loading}
                 placeholder={placeholder}
-                value={props.formData[name]}
+                value={props.form[name]}
                 onChange={(value) =>
-                  props.setFormData({ ...props.formData, [name]: value })
+                  props.setForm({ ...props.form, [name]: value })
                 }
               />
             </Wrapper>

src/lib/form/generator2/components/inputs.tsx

@@ -4,7 +4,7 @@ import {
   OptionUnit,
   UXType,
   WrapperProps,
-} from "../type";
+} from "../../type";
 
 export const Wrapper = ({ label, info, error, children }: WrapperProps) => (
   <div className="p-2 ">
@@ -71,7 +71,7 @@ export const InputOptions = <Id,>({
   value,
   onChange,
   options,
-}: InputOptionProps<OptionUnit<Id>, Id>) => {
+}: InputOptionProps<OptionUnit<Id>, any>) => {
   const handleChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
     const v = e.target.value;
 
@@ -105,13 +105,13 @@ export const InputOptionsScalar = <Id,>({
   value,
   onChange,
   options,
-}: InputOptionProps<Id, Id>) => {
+}: InputOptionProps<Id, any>) => {
   const f = options.find((x) => x.id === value);
   return (
     <InputOptions
       options={options}
       value={f}
-      onChange={(v) => onChange(v.id)}
+      onChange={(v) => onChange(v?.id)}
     />
   );
 };

src/lib/form/generator2/index.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 
-import * as T from "./type";
-import { isNotPartial } from "./utils";
+import * as T from "../type";
+import { isNotPartial } from "../utils";
 import { FormErrorsGeneric } from "../type";
 
 interface FormWrapperProps<A, B> {

src/lib/form/type.ts

@@ -7,7 +7,7 @@ export type FormOptionSets<A> = {
   [k in keyof A]?: { id: number | string; name: string }[];
 };
 
-export interface FormUIProps<FormShape> {
+interface FormUIPropsCore<FormShape> {
   loading: boolean;
   form: Partial<FormShape>;
   errors: FormErrorsGeneric<FormShape>;
@@ -17,12 +17,7 @@ export interface FormUIProps<FormShape> {
   setForm: (f: Partial<FormShape>) => void;
 }
 
-export interface FormUIProp2s<FormShape> {
-  loading: boolean;
-  form: Partial<FormShape>;
-  errors: FormErrorsGeneric<FormShape>;
-  options?: FormOptionSets<FormShape>;
-  setForm: (x: Partial<FormShape>) => void;
+export interface FormUIProps<FormShape> extends FormUIPropsCore<FormShape> {
   onSubmit: (e: React.FormEvent<HTMLFormElement>) => void;
   children?: JSX.Element;
 }

src/lib/form/utils.ts

@@ -1,4 +1,4 @@
-import { FormDef, FormUIType } from "./type";
+import { FormDef, FormErrors, FormUIType } from "./type";
 import * as Validation from "@nexys/validation";
 
 export const enumToOptions = <A>(keys: {
@@ -8,10 +8,10 @@ export const enumToOptions = <A>(keys: {
     .filter((x) => !isNaN(Number(x)))
     .map((x) => ({ id: Number(x) as any as A, name: keys[Number(x)] }));
 
-export const isA = <A>(
-  a: Partial<A>,
-  formErrors: { [k in keyof A]?: string }
-): a is A => Object.keys(formErrors).length === 0;
+export const isNotPartial = <A>(
+  formData: Partial<A>,
+  formErrors: FormErrors<A>
+): formData is A => Object.keys(formErrors).length === 0;
 
 const getType = (uiType: FormUIType) => {
   if ([FormUIType.SelectNumber, FormUIType.Number].includes(uiType)) {