feat(form): Adicionando o formik

package.json

@@ -11,13 +11,15 @@
     "@types/react": "^18.0.26",
     "@types/react-dom": "^18.0.10",
     "bootstrap": "^5.2.3",
+    "formik": "^2.2.9",
     "node-sass": "^7.0.3",
     "react": "^18.2.0",
     "react-bootstrap": "^2.7.0",
     "react-dom": "^18.2.0",
     "react-scripts": "5.0.1",
     "typescript": "^4.9.4",
-    "web-vitals": "^2.1.4"
+    "web-vitals": "^2.1.4",
+    "yup": "^0.32.11"
   },
   "scripts": {
     "start": "react-scripts start",

src/components/FormInput/FormInput.tsx

@@ -0,0 +1,82 @@
+import React from "react";
+import { useFormik } from "formik";
+import styles from "./formInput.module.scss";
+
+const FormInput = () => {
+  const formik = useFormik({
+    initialValues: {
+      nome: "",
+      email: "",
+      cpf: "",
+      nascimento: "",
+      tel: "",
+      instagram: "",
+    },
+    onSubmit: function (values) {
+      alert(`You are registered! Name: ${values.nome}. Email: ${values.email}. Profession: ${values.cpf}. 
+              Age: ${values.nascimento}`);
+    },
+  });
+
+  return (
+    <div className={styles["form"]}>
+      <form onSubmit={formik.handleSubmit}>
+        <h2>Preencha o formulário</h2>
+        <ul className={styles["form-itens"]}>
+          <li className={styles["form-item"]}>
+            <label>Nome</label>
+            <input
+              type="text"
+              placeholder="Seu nome completo"
+              value={formik.values.nome}
+            />
+          </li>
+          <li className={styles["form-item"]}>
+            <label>E-mail</label>
+            <input
+              type="text"
+              placeholder="Seu email"
+              value={formik.values.email}
+            />
+          </li>
+          <li className={styles["form-item"]}>
+            <label>CPF</label>
+            <input
+              type="text"
+              placeholder="000.000.000-00"
+              value={formik.values.cpf}
+            />
+          </li>
+
+          <li className={styles["form-item"]}>
+            <label>Data de Nascimento</label>
+            <input
+              type="text"
+              placeholder="00.00.00"
+              value={formik.values.nascimento}
+            />
+          </li>
+          <li className={styles["form-item"]}>
+            <label>Telefone</label>
+            <input
+              type="text"
+              placeholder="(00)00000-0000"
+              value={formik.values.tel}
+            />
+          </li>
+          <li className={styles["form-item"]}>
+            <label>Instagram</label>
+            <input
+              type="text"
+              placeholder="@seuuser"
+              value={formik.values.instagram}
+            />
+          </li>
+        </ul>
+        <button>Cadastre-se</button>
+      </form>
+    </div>
+  );
+};
+
+export { FormInput };

src/components/FormInput/formInput.module.scss

@@ -0,0 +1,9 @@
+.form {
+  display: flex;
+  flex-direction: column;
+}
+.form-item {
+  display: flex;
+  flex-direction: column;
+  margin-bottom: 10px;
+}

src/pages/Home.tsx

@@ -1,10 +1,10 @@
 import React from "react";
-import { Newsletter } from "../components/Newsletter/Newsletter";
+import { FormInput } from "../components/FormInput/FormInput";
 
 const Home = () => {
   return (
     <div>
-      <Newsletter></Newsletter>
+      <FormInput></FormInput>
     </div>
   );
 };