add TS declaration file

Author: llauderesv

src/example/Form/index.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import useForm from '../../lib';
+import useForm from 'lib';
 import './index.css';
 
 function Form() {
@@ -12,50 +12,6 @@ function Form() {
     confirm_password: { value: '', error: '' },
   };
 
-  // Create your own validationStateSchema
-  // stateSchema property should be the same in validationStateSchema
-  // in-order a validation to works in your input.
-  const stateValidatorSchema = {
-    first_name: {
-      required: true,
-      validator: {
-        func: (value) => /^[a-zA-Z]+$/.test(value),
-        error: 'Invalid first name format.',
-      },
-    },
-    last_name: {
-      required: true,
-      validator: {
-        func: (value) => /^[a-zA-Z]+$/.test(value),
-        error: 'Invalid last name format.',
-      },
-    },
-    tags: {
-      validator: {
-        func: (value) => /^(,?\w{3,})+$/.test(value),
-        error: 'Invalid tag format.',
-      },
-    },
-    password: {
-      required: true,
-      compare: {
-        to: 'confirm_password',
-        error: 'Password does not match to confirm password',
-      },
-      validator: {
-        func: (value) => /^[a-zA-Z]+$/.test(value),
-        error: 'Password does not meet the requirement',
-      },
-    },
-    confirm_password: {
-      required: true,
-      validator: {
-        func: (value, values) => value === values.password,
-        error: 'Confirm Password does not match to Password',
-      },
-    },
-  };
-
   const onSubmitForm = (state) => {
     alert(JSON.stringify(state, null, 2));
   };
@@ -67,7 +23,50 @@ function Form() {
     handleOnChange,
     handleOnSubmit,
     disable,
-  } = useForm(stateSchema, stateValidatorSchema, onSubmitForm);
+  } = useForm(
+    stateSchema,
+    {
+      first_name: {
+        required: true,
+        validator: {
+          func: (value) => /^[a-zA-Z]+$/.test(value),
+          error: 'Invalid first name format.',
+        },
+      },
+      last_name: {
+        required: true,
+        validator: {
+          func: (value) => /^[a-zA-Z]+$/.test(value),
+          error: 'Invalid last name format.',
+        },
+      },
+      tags: {
+        validator: {
+          func: (value) => /^(,?\w{3,})+$/.test(value),
+          error: 'Invalid tag format.',
+        },
+      },
+      confirm_password: {
+        required: true,
+        validator: {
+          func: (value, values) => value === values.password,
+          error: 'Confirm Password does not match to Password',
+        },
+      },
+      password: {
+        required: true,
+        compare: {
+          to: 'confirm_password',
+          error: 'Password does not match to confirm password',
+        },
+        validator: {
+          func: (value) => /^[a-zA-Z]+$/.test(value),
+          error: 'Password does not meet the requirement',
+        },
+      },
+    },
+    onSubmitForm
+  );
 
   const { first_name, last_name, tags, password, confirm_password } = values;
 

src/lib/index.d.ts

@@ -0,0 +1,40 @@
+import React from 'react';
+
+interface StateSchemaProp {
+  value: string | number;
+  error: string;
+}
+
+interface Validator {
+  func(param: any): boolean;
+  error: string;
+}
+
+interface ValidatorSchema<T> {
+  required?: boolean;
+  validator?: Validator;
+  compare?: { to: keyof T; error: string };
+}
+
+type ReturnValue<T> = {
+  values: { [P in keyof T]: any };
+  errors: { [P in keyof T]: any };
+  dirty: { [P in keyof T]: any };
+  handleOnChange(event: React.ChangeEvent<HTMLInputElement>): void;
+  handleOnSubmit(event: React.FormEvent<HTMLFormElement>): void;
+  disable: boolean;
+};
+
+export type StateSchema<T> = {
+  [P in keyof T]: StateSchemaProp;
+};
+
+export type StateValidatorSchema<T> = {
+  [P in keyof T]: ValidatorSchema<T>;
+};
+
+export default function useForm<T>(
+  stateSchema: StateSchema<T>,
+  stateValidatorSchema: StateValidatorSchema<T>,
+  onSubmitForm?: () => void
+): ReturnValue<T>;

tsconfig.json

@@ -0,0 +1,24 @@
+{
+  "compilerOptions": {
+    "baseUrl": "./src",
+    "alwaysStrict": true,
+    "esModuleInterop": true,
+    "module": "ESNext",
+    "target": "ES5",
+    "outDir": "./dist",
+    "lib": ["ESNext", "ES6", "DOM"],
+    "strict": true,
+    "allowJs": true,
+    "skipLibCheck": true,
+    "allowSyntheticDefaultImports": true,
+    "forceConsistentCasingInFileNames": true,
+    "moduleResolution": "Node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+  },
+  "formatCodeOptions": {
+    "indentSize": 2,
+    "tabSize": 2
+  },
+  "include": ["src"]
+}