Create SignUpForm

src/components/AuthUser/SignUpForm/SignUpForm.test.tsx

+import React from 'react';
+import { render } from '@testing-library/react';
+import { SignUpForm } from './SignUpForm';
+
+describe('<SignUpForm />', () => {
+  it('should render form', () => {
+    const wrapper = render(<SignUpForm />);
+    expect(wrapper.queryByTestId('Form')).toBeTruthy();
+  });
+});

src/components/AuthUser/SignUpForm/SignUpForm.tsx

+import React, { FC } from 'react';
+import { SubmitHandler, useForm } from 'react-hook-form';
+import { Button } from '@material-ui/core';
+import { InputField } from 'components/AuthUser/InputField/InputField';
+import { useStyles } from 'components/AuthUser/SignUpForm/useStyles';
+
+export const SignUpForm: FC = () => {
+  interface FormData {
+    firstName: string;
+    lastName: string;
+    phoneNumber: number;
+    homeAddress: string;
+    cardNumber: number;
+    email: string;
+    password: string;
+  }
+
+  const { control, errors, handleSubmit } = useForm<FormData>();
+
+  const onSubmit: SubmitHandler<FormData> = (values: FormData) => {
+    // Submit data
+  };
+
+  const classes = useStyles();
+  return (
+    <>
+      <form
+        className={classes.form}
+        onSubmit={handleSubmit(onSubmit)}
+        data-testid="Form"
+      >
+        <InputField
+          name="firstName"
+          control={control}
+          rules={{
+            validate: (value: string) => /^[A-Za-z]$/.test(value),
+            required: {
+              value: true,
+              message: 'firstName is not valid',
+            },
+          }}
+          label="Email"
+          error={!!errors.firstName}
+          errorMessage="Insert firstName"
+        />
+
+        <InputField
+          name="lastName"
+          control={control}
+          rules={{
+            validate: (value: string) => /^[A-Za-z]$/.test(value),
+            required: {
+              value: true,
+              message: 'lastName is not valid',
+            },
+          }}
+          label="Email"
+          error={!!errors.lastName}
+          errorMessage="Insert lastName"
+        />
+
+        <InputField
+          name="phoneNumber"
+          control={control}
+          rules={{
+            validate: (value: string) => /^[/d]$/.test(value),
+            required: {
+              value: true,
+              message: 'phoneNumber is not valid',
+            },
+          }}
+          label="Email"
+          error={!!errors.phoneNumber}
+          errorMessage="Insert phoneNumber"
+        />
+
+        <InputField
+          name="cardNumber"
+          control={control}
+          rules={{
+            validate: (value: string) => /^[/d]$/.test(value),
+            required: {
+              value: true,
+              message: 'cardNumber is not valid',
+            },
+          }}
+          label="cardNumber"
+          error={!!errors.cardNumber}
+          errorMessage="Insert cardNumber"
+        />
+
+        <InputField
+          name="homeAddress"
+          control={control}
+          rules={{
+            validate: (value: string) => /^[A-Za-z]$/.test(value),
+            required: {
+              value: true,
+              message: 'homeAddress is not valid',
+            },
+          }}
+          label="Email"
+          error={!!errors.homeAddress}
+          errorMessage="Insert homeAddress"
+        />
+
+        <InputField
+          name="email"
+          control={control}
+          rules={{
+            validate: (value: string) =>
+              /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i.test(value),
+            required: {
+              value: true,
+              message: 'Email is not valid',
+            },
+          }}
+          label="Email"
+          error={!!errors.email}
+          errorMessage="Insert email"
+        />
+
+        <InputField
+          name="password"
+          control={control}
+          rules={{
+            minLength: 8,
+            maxLength: 60,
+            required: {
+              value: true,
+              message: 'Insert valid password',
+            },
+          }}
+          label="Password"
+          error={!!errors.password}
+          errorMessage="Insert valid password"
+        />
+
+        <Button
+          data-testid="Submit"
+          type="submit"
+          fullWidth
+          variant="contained"
+          color="primary"
+          className={classes.submit}
+        >
+          Sign Up
+        </Button>
+      </form>
+    </>
+  );
+};

src/components/AuthUser/SignUpForm/useStyles.ts

+import { createStyles, makeStyles, Theme } from '@material-ui/core/styles';
+
+export const useStyles = makeStyles((theme: Theme) =>
+  createStyles({
+    root: {
+      '& > *': {
+        margin: theme.spacing(0),
+      },
+    },
+    form: {
+      width: '100%', // Fix IE 11 issue.
+      marginTop: theme.spacing(1),
+    },
+    submit: {
+      margin: theme.spacing(3, 0, 2),
+    },
+  }),
+);