Document components using styleguidist

src/components/AuthUser/SignInForm/InputField/InputField.md

+Wrapper for any input field 
+
+```js
+import { SubmitHandler, useForm } from 'react-hook-form';
+const { control } = useForm();
+
+<InputField
+    name="password"
+    control={control}
+    rules={{
+    minLength: 8,
+    maxLength: 60,
+    required: {
+        value: true,
+        message: 'Insert valid password',
+    },
+    }}
+    label="Password"
+    error={false}
+    errorMessage="Insert valid password"
+/>
+
+
+```

src/components/AuthUser/SignInForm/InputField/InputField.tsx

@@ -4,16 +4,29 @@ import { Control, Controller, FieldValues } from 'react-hook-form';
 
 type Props = {
   /**
-   * Name of the elemement. ex. email, password
+   * Name of the elemement. (ex. email, password).
    */
   name: string;
+  /**
+   * Aria label.
+   */
   label: string;
+  /**
+   * Takes error from react-hook-form and is thrown if
+   * the component is not valid.
+   */
   error: boolean;
+  /**
+   * Message to display if the component is not valid.
+   */
   errorMessage: string;
   /**
-   * react-hook-form control
+   * React-hook-form control.
    */
   control: Control<FieldValues> | undefined;
+  /**
+   * Validation rules.
+   */
   rules: Partial<unknown>;
 };
 

src/components/AuthUser/SignInForm/SignInForm.tsx

@@ -3,7 +3,6 @@ import axios from 'axios';
 import { SubmitHandler, useForm } from 'react-hook-form';
 import { createStyles, makeStyles, Theme } from '@material-ui/core/styles';
 import { Button } from '@material-ui/core';
-import { DevTool } from '@hookform/devtools';
 import { InputField } from 'components/AuthUser/SignInForm/InputField/InputField';
 
 const useStyles = makeStyles((theme: Theme) =>
@@ -104,7 +103,6 @@ export const SignInForm: FC = () => {
           Sign In
         </Button>
       </form>
-      <DevTool control={control} /> {/* set up the dev tool */}
     </>
   );
 };

src/components/AuthUser/SignInForm/emailValidator.ts

-export const isEmailValid = (email: string): boolean => {
-  /**
-   * The following is the RFC 5322 valid email regex
-   * Hinted from question https://stackoverflow.com/questions/201323/how-to-validate-an-email-address-using-a-regular-expression
-   * More on http://emailregex.com/
-   */
-  // eslint-disable-next-line
-  const VALID_EMAIL_REGEX = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
-  return VALID_EMAIL_REGEX.test(String(email).toLowerCase());
-};