feat: adiciona o formulário, estilização, responsividade e schema

2023-01-20 19:47:39 -03:00 · 2023-01-20 19:47:39 -03:00 · d45a5c9e52
commit d45a5c9e52
parent f54602f929
7 changed files with 401 additions and 50 deletions
--- a/desafio-react-e-typescript/package.json
+++ b/desafio-react-e-typescript/package.json
@ -10,12 +10,14 @@
    "@types/node": "^16.18.11",
    "@types/react": "^18.0.27",
    "@types/react-dom": "^18.0.10",
+    "formik": "^2.2.9",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-scripts": "5.0.1",
    "sass": "^1.57.1",
    "typescript": "^4.9.4",
-    "web-vitals": "^2.1.4"
+    "web-vitals": "^2.1.4",
+    "yup": "^0.32.11"
  },
  "scripts": {
    "start": "react-scripts start",
--- a/desafio-react-e-typescript/src/components/Body/Body.module.scss
+++ b/desafio-react-e-typescript/src/components/Body/Body.module.scss
@ -95,64 +95,185 @@
      }
    }

-    .menu-list-container > div {
-      width: 100%;
-    }
-
-    .description-container {
-      padding-top: 10px;
-      margin: 0px 0px 0px 30px;
+    .form-wrapper {
+      max-height: 100vh;
+      margin-left: 30px;

      @media screen and (max-width: 1024px) {
-        padding: unset;
        margin: unset;
      }

      h2 {
-        font-family: "Roboto", sans-serif;
-        font-weight: 700;
-        font-size: 24px;
-        line-height: 28px;
-        color: #292929;
        margin-bottom: 12px;

-        @media screen and (min-width: 2500px) {
-          font-size: 48px;
-          line-height: 56px;
-          margin: unset;
-          margin-bottom: 12px;
-        }
-
        @media screen and (max-width: 1024px) {
-          text-align: center;
          margin-top: 30px;
-          margin-bottom: 12px;
+          text-align: center;
        }
      }

-      p {
-        font-family: "Roboto", sans-serif;
-        font-size: 13px;
-        line-height: 15px;
-        color: #7d7d7d;
-        margin-bottom: 20px;
+      form {
+        width: 100%;
+      }

-        @media screen and (min-width: 2500px) {
-          font-size: 26px;
-          line-height: 30px;
+      .form-col {
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        margin-bottom: 12px;
+
+        label {
+          font-family: "Roboto", sans-serif;
+          font-size: 14px;
+          line-height: 16px;
+          color: #100d0e;
+          margin: 0 0 12px 15px;
        }

-        @media screen and (max-width: 1024px) {
+        input {
+          height: 46px;
+          border: 1px solid black;
+          border-radius: 25px;
+          padding: 15px 0px 15px 20px;
+
+          &::placeholder {
+            font-family: "Roboto", sans-serif;
+            font-size: 14px;
+            line-height: 16px;
+            color: #b9b7b7;
+          }
+        }
+        .form-invalid-feedback {
+          position: absolute;
+          right: 0;
+          margin-right: 20px;
+          font-weight: 400;
          font-size: 12px;
-          line-height: 18px;
+          line-height: 14px;
+          text-align: right;
+          color: #ff0000;
        }
      }

-      .description-parag {
-        @media screen and (max-width: 1024px) {
-          display: none;
+      .form-terms {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        margin-bottom: 12px;
+
+        label {
+          display: flex;
+          align-items: center;
+          margin-right: 4px;
+
+          span {
+            color: red;
+            margin-right: 3.5px;
+          }
+
+          a {
+            text-decoration: none;
+            color: #100d0e;
+            h3 {
+              font-family: "Roboto", sans-serif;
+              font-size: 14px;
+              font-weight: 400;
+              line-height: 16px;
+              text-decoration: underline;
+            }
+          }
+          input {
+            width: 18px;
+            height: 18px;
+          }
        }
      }
+
+      button {
+        width: 100%;
+        height: 52px;
+        border: 1px solid black;
+        border-radius: 25px;
+        background-color: black;
+        color: white;
+        font-family: "Roboto", sans-serif;
+        font-size: 16px;
+        line-height: 19px;
+        letter-spacing: 0.05em;
+        text-transform: uppercase;
+        cursor: pointer;
+
+        &:hover {
+          filter: brightness(80%);
+        }
+      }
+    }
+
+    .form-success {
+      font-family: "Roboto", sans-serif;
+      font-size: 12px;
+      line-height: 14px;
+      color: #008000;
+    }
+  }
+
+  .menu-list-container > div {
+    width: 100%;
+  }
+
+  .description-container {
+    padding-top: 10px;
+    margin: 0px 0px 0px 30px;
+
+    @media screen and (max-width: 1024px) {
+      padding: unset;
+      margin: unset;
+    }
+
+    h2 {
+      font-family: "Roboto", sans-serif;
+      font-weight: 700;
+      font-size: 24px;
+      line-height: 28px;
+      color: #292929;
+      margin-bottom: 12px;
+
+      @media screen and (min-width: 2500px) {
+        font-size: 48px;
+        line-height: 56px;
+        margin: unset;
+        margin-bottom: 12px;
+      }
+
+      @media screen and (max-width: 1024px) {
+        text-align: center;
+        margin-top: 30px;
+        margin-bottom: 12px;
+      }
+    }
+
+    p {
+      font-family: "Roboto", sans-serif;
+      font-size: 13px;
+      line-height: 15px;
+      color: #7d7d7d;
+      margin-bottom: 20px;
+
+      @media screen and (min-width: 2500px) {
+        font-size: 26px;
+        line-height: 30px;
+      }
+
+      @media screen and (max-width: 1024px) {
+        font-size: 12px;
+        line-height: 18px;
+      }
+    }
+
+    .description-parag {
+      @media screen and (max-width: 1024px) {
+        display: none;
+      }
    }
  }
 }
--- a/desafio-react-e-typescript/src/components/Body/Tabs/Contato.tsx
+++ b/desafio-react-e-typescript/src/components/Body/Tabs/Contato.tsx
@ -1,7 +1,129 @@
-import React from "react";
+import React, { useState } from "react";
+
+import styles from "../Body.module.scss";
+
+import { Formik, Form, Field, ErrorMessage } from "formik";
+import FormSchema from "../../../schema/FormSchema";
+
+interface IFormikValues {
+  name: string;
+  email: string;
+  cpf: string;
+  nascimento: string;
+  telefone: string;
+  instagram: string;
+  terms: string;
+}
+
+const initialValues = {
+  name: "",
+  email: "",
+  cpf: "",
+  nascimento: "",
+  telefone: "",
+  instagram: "",
+  terms: "",
+};

 const Contato = () => {
-  return <div className=""></div>;
+  const handleFormikSubmit = (values: IFormikValues) => {};
+  const [success, isSuccess] = useState(false);
+  return (
+    <div className={styles["form-wrapper"]}>
+      <Formik
+        onSubmit={(values, { resetForm }) => {
+          handleFormikSubmit(values);
+          resetForm();
+          isSuccess(true);
+        }}
+        initialValues={initialValues}
+        validationSchema={FormSchema}
+      >
+        {
+          <Form>
+            <h2 className="">Preencha o Formulário</h2>
+            <div className={styles["form-col"]}>
+              <label htmlFor="name">Nome</label>
+              <ErrorMessage
+                component="span"
+                name="name"
+                className={styles["form-invalid-feedback"]}
+              />
+              <Field id="name" name="name" placeholder="Seu nome completo" />
+            </div>
+            <div className={styles["form-col"]}>
+              <label htmlFor="email">E-mail</label>
+              <Field id="email" name="email" placeholder="Seu e-mail" />
+              <ErrorMessage
+                component="span"
+                name="email"
+                className={styles["form-invalid-feedback"]}
+              />
+            </div>
+            <div className={styles["form-col"]}>
+              <label htmlFor="cpf">CPF</label>
+              <Field id="cpf" name="cpf" placeholder="000.000.000-00" />
+              <ErrorMessage
+                component="span"
+                name="cpf"
+                className={styles["form-invalid-feedback"]}
+              />
+            </div>
+            <div className={styles["form-col"]}>
+              <label htmlFor="nascimento">Data de Nascimento:</label>
+              <Field
+                id="nascimento"
+                name="nascimento"
+                placeholder="00.00.0000"
+              />
+              <ErrorMessage
+                component="span"
+                name="nascimento"
+                className={styles["form-invalid-feedback"]}
+              />
+            </div>
+            <div className={styles["form-col"]}>
+              <label htmlFor="telefone">Telefone:</label>
+              <Field
+                id="telefone"
+                name="telefone"
+                placeholder="(00) 00000-0000"
+              />
+              <ErrorMessage
+                component="span"
+                name="telefone"
+                className={styles["form-invalid-feedback"]}
+              />
+            </div>
+            <div className={styles["form-col"]}>
+              <label htmlFor="instagram">Instagram</label>
+              <Field id="instagram" name="instagram" placeholder="@seuuser" />
+              <ErrorMessage
+                component="span"
+                name="instagram"
+                className={styles["form-invalid-feedback"]}
+              />
+            </div>
+            <div className={styles["form-terms"]}>
+              <label htmlFor="terms">
+                <span className={styles["asterisk"]}>*</span>
+                <a href="/">
+                  <h3>Declaro que li e aceito</h3>
+                </a>
+              </label>
+              <Field type="checkbox" id="terms" name="terms" required />
+            </div>
+            <button type="submit">Cadastre-se</button>
+            {success && (
+              <span className={styles["form-success"]}>
+                *Formulário enviado com sucesso!
+              </span>
+            )}
+          </Form>
+        }
+      </Formik>
+    </div>
+  );
 };

 export { Contato };
--- a/desafio-react-e-typescript/src/components/Footer/Footer.tsx
+++ b/desafio-react-e-typescript/src/components/Footer/Footer.tsx
@ -1,17 +1,13 @@
 import React, { useState, useEffect } from "react";

 import { Newsletter } from "../Newsletter/Newsletter";
-import { Accordion } from "../Footer/Accordion/Accordion";
-
-import styles from "./Footer.module.scss";
+import { Accordion } from "./Accordion/Accordion";

 import facebook from "../../assets/images/facebookicon.svg";
 import instagram from "../../assets/images/instagramicon.svg";
 import twitter from "../../assets/images/twittericon.svg";
 import youtube from "../../assets/images/youtubeicon.svg";
 import linkedin from "../../assets/images/linkedinicon.svg";
-import whatsapp from "../../assets/images/whatsappicon.svg";
-import gototop from "../../assets/images/gotopicon.svg";
 import mastercard from "../../assets/images/mastericon.svg";
 import visa from "../../assets/images/visaicon.svg";
 import diners from "../../assets/images/dinersicon.svg";
@ -20,8 +16,12 @@ import hiper from "../../assets/images/hipericon.svg";
 import pagseguro from "../../assets/images/pagseguroicon.svg";
 import boleto from "../../assets/images/boletoicon.svg";
 import vtex from "../../assets/images/vtexicon.svg";
+import whatsapp from "../../assets/images/whatsappicon.svg";
 import vtexpowered from "../../assets/images/vtexpowered.svg";
 import m3developed from "../../assets/images/m3developed.svg";
+import gototop from "../../assets/images/gotopicon.svg";
+
+import styles from "./Footer.module.scss";

 const Footer = () => {
  const [visible, setVisible] = useState(false);
@ -162,9 +162,11 @@ const Footer = () => {
            </a>
          </button>
          <button className={styles["button-icon"]}>
-            <a href="#header">
-              <img src={gototop} alt="" className={styles["go-top-icon"]} />
-            </a>
+            {visible && (
+              <a href="#header">
+                <img src={gototop} alt="" className={styles["go-top-icon"]} />
+              </a>
+            )}
          </button>
        </div>
      </div>
--- a/desafio-react-e-typescript/src/global.css
+++ b/desafio-react-e-typescript/src/global.css
@ -1,3 +1,4 @@
+@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap");
 * {
  box-sizing: border-box;
  padding: 0;
--- a/desafio-react-e-typescript/src/schema/FormSchema.ts
+++ b/desafio-react-e-typescript/src/schema/FormSchema.ts
@ -0,0 +1,30 @@
+import * as Yup from "yup";
+
+export default Yup.object().shape({
+  name: Yup.string()
+    .required("*Campo Obrigatório")
+    .min(3, "Insira um nome válido"),
+  email: Yup.string()
+    .matches(
+      /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+.[a-zA-Z]{2,}$/,
+      "E-mail Inválido"
+    )
+    .required("*Campo Obrigatório"),
+  cpf: Yup.string()
+    .matches(/^(?:\d{3}\.){2}\d{3}-?\d{2}$/, "CPF inválido")
+    .required("*Campo obrigatório"),
+  nascimento: Yup.string()
+    .matches(
+      /^(?:0[1-9]|[12]\d|3[01])([/.-])(?:0[1-9]|1[012])\1(?:19|20)\d\d$/,
+      "Data de Nascimento inválida"
+    )
+    .required("*Campo Obrigatório"),
+  telefone: Yup.string()
+    .matches(/^(\d{2})\D*(\d{5}|\d{4})\D*(\d{4})$/, "Número Inválido")
+    .required("*Campo Obrigatório"),
+  instagram: Yup.string().matches(
+    /(?:@)(\w(?:(?:\w|(?:\.(?!\.))){0,28}(?:\w))?)/,
+    "Nome de usuário não é valido"
+  ),
+  terms: Yup.boolean().oneOf([true], "você deve aceitar os termos").required(),
+});
--- a/desafio-react-e-typescript/yarn.lock
+++ b/desafio-react-e-typescript/yarn.lock
@ -1029,7 +1029,7 @@
    "@babel/helper-validator-option" "^7.18.6"
    "@babel/plugin-transform-typescript" "^7.18.6"

-"@babel/runtime@^7.11.2", "@babel/runtime@^7.12.5", "@babel/runtime@^7.16.3", "@babel/runtime@^7.20.7", "@babel/runtime@^7.8.4", "@babel/runtime@^7.9.2":
+"@babel/runtime@^7.11.2", "@babel/runtime@^7.12.5", "@babel/runtime@^7.15.4", "@babel/runtime@^7.16.3", "@babel/runtime@^7.20.7", "@babel/runtime@^7.8.4", "@babel/runtime@^7.9.2":
  version "7.20.7"
  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.20.7.tgz#fcb41a5a70550e04a7b708037c7c32f7f356d8fd"
  integrity sha512-UF0tvkUtxwAgZ5W/KrkHf0Rn0fdnLDU9ScxBrEVNUprE/MzirjK4MJUX1/BVDv00Sv8cljtukVK1aky++X1SjQ==
@ -1979,6 +1979,11 @@
  resolved "https://registry.yarnpkg.com/@types/json5/-/json5-0.0.29.tgz#ee28707ae94e11d2b827bcbe5270bcea7f3e71ee"
  integrity sha512-dRLjCWHYg4oaA77cxO64oO+7JwCwnIzkZPdrrC71jQmQtlhM556pwKo5bUzqvZndkVbeFLIIi+9TC40JNF5hNQ==

+"@types/lodash@^4.14.175":
+  version "4.14.191"
+  resolved "https://registry.yarnpkg.com/@types/lodash/-/lodash-4.14.191.tgz#09511e7f7cba275acd8b419ddac8da9a6a79e2fa"
+  integrity sha512-BdZ5BCCvho3EIXw6wUCXHe7rS53AIDPLE+JzwgT+OsJk53oBfbSmZZ7CX4VaRoN78N+TJpFi9QPlfIVNmJYWxQ==
+
 "@types/mime@*":
  version "3.0.1"
  resolved "https://registry.yarnpkg.com/@types/mime/-/mime-3.0.1.tgz#5f8f2bca0a5863cb69bc0b0acd88c96cb1d4ae10"
@ -3545,6 +3550,11 @@ deep-is@^0.1.3, deep-is@~0.1.3:
  resolved "https://registry.yarnpkg.com/deep-is/-/deep-is-0.1.4.tgz#a6f2dce612fadd2ef1f519b73551f17e85199831"
  integrity sha512-oIPzksmTg4/MriiaYGO+okXDT7ztn/w3Eptv/+gSIdMdKsJo0u4CfYNFJPy+4SKMuCqGw2wxnA+URMg3t8a/bQ==

+deepmerge@^2.1.1:
+  version "2.2.1"
+  resolved "https://registry.yarnpkg.com/deepmerge/-/deepmerge-2.2.1.tgz#5d3ff22a01c00f645405a2fbc17d0778a1801170"
+  integrity sha512-R9hc1Xa/NOBi9WRVUWg19rl1UB7Tt4kuPd+thNJgFZoxXsTz7ncaPaeIm+40oSGuP33DfMb4sZt1QIGiJzC4EA==
+
 deepmerge@^4.2.2:
  version "4.2.2"
  resolved "https://registry.yarnpkg.com/deepmerge/-/deepmerge-4.2.2.tgz#44d2ea3679b8f4d4ffba33f03d865fc1e7bf4955"
@ -4504,6 +4514,19 @@ form-data@^3.0.0:
    combined-stream "^1.0.8"
    mime-types "^2.1.12"

+formik@^2.2.9:
+  version "2.2.9"
+  resolved "https://registry.yarnpkg.com/formik/-/formik-2.2.9.tgz#8594ba9c5e2e5cf1f42c5704128e119fc46232d0"
+  integrity sha512-LQLcISMmf1r5at4/gyJigGn0gOwFbeEAlji+N9InZF6LIMXnFNkO42sCI8Jt84YZggpD4cPWObAZaxpEFtSzNA==
+  dependencies:
+    deepmerge "^2.1.1"
+    hoist-non-react-statics "^3.3.0"
+    lodash "^4.17.21"
+    lodash-es "^4.17.21"
+    react-fast-compare "^2.0.1"
+    tiny-warning "^1.0.2"
+    tslib "^1.10.0"
+
 forwarded@0.2.0:
  version "0.2.0"
  resolved "https://registry.yarnpkg.com/forwarded/-/forwarded-0.2.0.tgz#2269936428aad4c15c7ebe9779a84bf0b2a81811"
@ -4778,6 +4801,13 @@ he@^1.2.0:
  resolved "https://registry.yarnpkg.com/he/-/he-1.2.0.tgz#84ae65fa7eafb165fddb61566ae14baf05664f0f"
  integrity sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw==

+hoist-non-react-statics@^3.3.0:
+  version "3.3.2"
+  resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz#ece0acaf71d62c2969c2ec59feff42a4b1a85b45"
+  integrity sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==
+  dependencies:
+    react-is "^16.7.0"
+
 hoopy@^0.1.4:
  version "0.1.4"
  resolved "https://registry.yarnpkg.com/hoopy/-/hoopy-0.1.4.tgz#609207d661100033a9a9402ad3dea677381c1b1d"
@ -6087,6 +6117,11 @@ locate-path@^6.0.0:
  dependencies:
    p-locate "^5.0.0"

+lodash-es@^4.17.21:
+  version "4.17.21"
+  resolved "https://registry.yarnpkg.com/lodash-es/-/lodash-es-4.17.21.tgz#43e626c46e6591b7750beb2b50117390c609e3ee"
+  integrity sha512-mKnC+QJ9pWVzv+C4/U3rRsHapFfHvQFoFB92e52xeyGMcX6/OlIl78je1u8vePzYZSkkogMPJ2yjxxsb89cxyw==
+
 lodash.debounce@^4.0.8:
  version "4.0.8"
  resolved "https://registry.yarnpkg.com/lodash.debounce/-/lodash.debounce-4.0.8.tgz#82d79bff30a67c4005ffd5e2515300ad9ca4d7af"
@ -6309,6 +6344,11 @@ multicast-dns@^7.2.5:
    dns-packet "^5.2.2"
    thunky "^1.0.2"

+nanoclone@^0.2.1:
+  version "0.2.1"
+  resolved "https://registry.yarnpkg.com/nanoclone/-/nanoclone-0.2.1.tgz#dd4090f8f1a110d26bb32c49ed2f5b9235209ed4"
+  integrity sha512-wynEP02LmIbLpcYw8uBKpcfF6dmg2vcpKqxeH5UcoKEYdExslsdUA4ugFauuaeYdTB76ez6gJW8XAZ6CgkXYxA==
+
 nanoid@^3.3.4:
  version "3.3.4"
  resolved "https://registry.yarnpkg.com/nanoid/-/nanoid-3.3.4.tgz#730b67e3cd09e2deacf03c027c81c9d9dbc5e8ab"
@ -7347,6 +7387,11 @@ prop-types@^15.8.1:
    object-assign "^4.1.1"
    react-is "^16.13.1"

+property-expr@^2.0.4:
+  version "2.0.5"
+  resolved "https://registry.yarnpkg.com/property-expr/-/property-expr-2.0.5.tgz#278bdb15308ae16af3e3b9640024524f4dc02cb4"
+  integrity sha512-IJUkICM5dP5znhCckHSv30Q4b5/JA5enCtkRHYaOVOAocnH/1BQEYTC5NMfT3AVl/iXKdr3aqQbQn9DxyWknwA==
+
 proxy-addr@~2.0.7:
  version "2.0.7"
  resolved "https://registry.yarnpkg.com/proxy-addr/-/proxy-addr-2.0.7.tgz#f19fe69ceab311eeb94b42e70e8c2070f9ba1025"
@ -7476,7 +7521,12 @@ react-error-overlay@^6.0.11:
  resolved "https://registry.yarnpkg.com/react-error-overlay/-/react-error-overlay-6.0.11.tgz#92835de5841c5cf08ba00ddd2d677b6d17ff9adb"
  integrity sha512-/6UZ2qgEyH2aqzYZgQPxEnz33NJ2gNsnHA2o5+o4wW9bLM/JYQitNP9xPhsXwC08hMMovfGe/8retsdDsczPRg==

-react-is@^16.13.1:
+react-fast-compare@^2.0.1:
+  version "2.0.4"
+  resolved "https://registry.yarnpkg.com/react-fast-compare/-/react-fast-compare-2.0.4.tgz#e84b4d455b0fec113e0402c329352715196f81f9"
+  integrity sha512-suNP+J1VU1MWFKcyt7RtjiSWUjvidmQSlqu+eHslq+342xCbGTYmC0mEhPCOHxlW0CywylOC1u2DFAT+bv4dBw==
+
+react-is@^16.13.1, react-is@^16.7.0:
  version "16.13.1"
  resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"
  integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==
@ -8484,6 +8534,11 @@ thunky@^1.0.2:
  resolved "https://registry.yarnpkg.com/thunky/-/thunky-1.1.0.tgz#5abaf714a9405db0504732bbccd2cedd9ef9537d"
  integrity sha512-eHY7nBftgThBqOyHGVN+l8gF0BucP09fMo0oO/Lb0w1OF80dJv+lDVpXG60WMQvkcxAkNybKsrEIE3ZtKGmPrA==

+tiny-warning@^1.0.2:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/tiny-warning/-/tiny-warning-1.0.3.tgz#94a30db453df4c643d0fd566060d60a875d84754"
+  integrity sha512-lBN9zLN/oAf68o3zNXYrdCt1kP8WsiGW8Oo2ka41b2IM5JL/S1CTyX1rW0mb/zSuJun0ZUrDxx4sqvYS2FWzPA==
+
 tmpl@1.0.5:
  version "1.0.5"
  resolved "https://registry.yarnpkg.com/tmpl/-/tmpl-1.0.5.tgz#8683e0b902bb9c20c4f726e3c0b69f36518c07cc"
@ -8506,6 +8561,11 @@ toidentifier@1.0.1:
  resolved "https://registry.yarnpkg.com/toidentifier/-/toidentifier-1.0.1.tgz#3be34321a88a820ed1bd80dfaa33e479fbb8dd35"
  integrity sha512-o5sSPKEkg/DIQNmH43V0/uerLrpzVedkUh8tGNvaeXpfpuwjKenlSox/2O/BTlZUtEe+JG7s5YhEz608PlAHRA==

+toposort@^2.0.2:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/toposort/-/toposort-2.0.2.tgz#ae21768175d1559d48bef35420b2f4962f09c330"
+  integrity sha512-0a5EOkAUp8D4moMi2W8ZF8jcga7BgZd91O/yabJCFY8az+XSzeGyTKs0Aoo897iV1Nj6guFq8orWDS96z91oGg==
+
 tough-cookie@^4.0.0:
  version "4.1.2"
  resolved "https://registry.yarnpkg.com/tough-cookie/-/tough-cookie-4.1.2.tgz#e53e84b85f24e0b65dd526f46628db6c85f6b874"
@ -8545,7 +8605,7 @@ tsconfig-paths@^3.14.1:
    minimist "^1.2.6"
    strip-bom "^3.0.0"

-tslib@^1.8.1:
+tslib@^1.10.0, tslib@^1.8.1:
  version "1.14.1"
  resolved "https://registry.yarnpkg.com/tslib/-/tslib-1.14.1.tgz#cf2d38bdc34a134bcaf1091c41f6619e2f672d00"
  integrity sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==
@ -9279,3 +9339,16 @@ yocto-queue@^0.1.0:
  version "0.1.0"
  resolved "https://registry.yarnpkg.com/yocto-queue/-/yocto-queue-0.1.0.tgz#0294eb3dee05028d31ee1a5fa2c556a6aaf10a1b"
  integrity sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==
+
+yup@^0.32.11:
+  version "0.32.11"
+  resolved "https://registry.yarnpkg.com/yup/-/yup-0.32.11.tgz#d67fb83eefa4698607982e63f7ca4c5ed3cf18c5"
+  integrity sha512-Z2Fe1bn+eLstG8DRR6FTavGD+MeAwyfmouhHsIUgaADz8jvFKbO/fXc2trJKZg+5EBjh4gGm3iU/t3onKlXHIg==
+  dependencies:
+    "@babel/runtime" "^7.15.4"
+    "@types/lodash" "^4.14.175"
+    lodash "^4.17.21"
+    lodash-es "^4.17.21"
+    nanoclone "^0.2.1"
+    property-expr "^2.0.4"
+    toposort "^2.0.2"