Merge pull request 'feat: refatoração de componentes' (#10) from feature/refactor into main

Reviewed-on: #10

package-lock.json

@@ -19,6 +19,7 @@
         "node-sass": "^7.0.3",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
+        "react-modal": "^3.16.1",
         "react-scripts": "5.0.1",
         "typescript": "^4.9.4",
         "web-vitals": "^2.1.4",
@@ -7816,6 +7817,11 @@
         "url": "https://github.com/sindresorhus/execa?sponsor=1"
       }
     },
+    "node_modules/exenv": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/exenv/-/exenv-1.2.2.tgz",
+      "integrity": "sha512-Z+ktTxTwv9ILfgKCk32OX3n/doe+OcLTRtqK9pcL+JsP3J1/VW8Uvl4ZjLlKqeW4rzK4oesDOGMEMRIZqtP4Iw=="
+    },
     "node_modules/exit": {
       "version": "0.1.2",
       "resolved": "https://registry.npmjs.org/exit/-/exit-0.1.2.tgz",
@@ -15077,6 +15083,29 @@
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
       "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w=="
     },
+    "node_modules/react-lifecycles-compat": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz",
+      "integrity": "sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA=="
+    },
+    "node_modules/react-modal": {
+      "version": "3.16.1",
+      "resolved": "https://registry.npmjs.org/react-modal/-/react-modal-3.16.1.tgz",
+      "integrity": "sha512-VStHgI3BVcGo7OXczvnJN7yT2TWHJPDXZWyI/a0ssFNhGZWsPmB8cF0z33ewDXq4VfYMO1vXgiv/g8Nj9NDyWg==",
+      "dependencies": {
+        "exenv": "^1.2.0",
+        "prop-types": "^15.7.2",
+        "react-lifecycles-compat": "^3.0.0",
+        "warning": "^4.0.3"
+      },
+      "engines": {
+        "node": ">=8"
+      },
+      "peerDependencies": {
+        "react": "^0.14.0 || ^15.0.0 || ^16 || ^17 || ^18",
+        "react-dom": "^0.14.0 || ^15.0.0 || ^16 || ^17 || ^18"
+      }
+    },
     "node_modules/react-refresh": {
       "version": "0.11.0",
       "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.11.0.tgz",
@@ -17528,6 +17557,14 @@
         "makeerror": "1.0.12"
       }
     },
+    "node_modules/warning": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/warning/-/warning-4.0.3.tgz",
+      "integrity": "sha512-rpJyN222KWIvHJ/F53XSZv0Zl/accqHR8et1kpaMTD/fLCRxtV8iX8czMzY7sVZupTI3zcUTg8eycS2kNF9l6w==",
+      "dependencies": {
+        "loose-envify": "^1.0.0"
+      }
+    },
     "node_modules/watchpack": {
       "version": "2.4.0",
       "resolved": "https://registry.npmjs.org/watchpack/-/watchpack-2.4.0.tgz",
@@ -24042,6 +24079,11 @@
         "strip-final-newline": "^2.0.0"
       }
     },
+    "exenv": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/exenv/-/exenv-1.2.2.tgz",
+      "integrity": "sha512-Z+ktTxTwv9ILfgKCk32OX3n/doe+OcLTRtqK9pcL+JsP3J1/VW8Uvl4ZjLlKqeW4rzK4oesDOGMEMRIZqtP4Iw=="
+    },
     "exit": {
       "version": "0.1.2",
       "resolved": "https://registry.npmjs.org/exit/-/exit-0.1.2.tgz",
@@ -29161,6 +29203,22 @@
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
       "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w=="
     },
+    "react-lifecycles-compat": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz",
+      "integrity": "sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA=="
+    },
+    "react-modal": {
+      "version": "3.16.1",
+      "resolved": "https://registry.npmjs.org/react-modal/-/react-modal-3.16.1.tgz",
+      "integrity": "sha512-VStHgI3BVcGo7OXczvnJN7yT2TWHJPDXZWyI/a0ssFNhGZWsPmB8cF0z33ewDXq4VfYMO1vXgiv/g8Nj9NDyWg==",
+      "requires": {
+        "exenv": "^1.2.0",
+        "prop-types": "^15.7.2",
+        "react-lifecycles-compat": "^3.0.0",
+        "warning": "^4.0.3"
+      }
+    },
     "react-refresh": {
       "version": "0.11.0",
       "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.11.0.tgz",
@@ -31008,6 +31066,14 @@
         "makeerror": "1.0.12"
       }
     },
+    "warning": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/warning/-/warning-4.0.3.tgz",
+      "integrity": "sha512-rpJyN222KWIvHJ/F53XSZv0Zl/accqHR8et1kpaMTD/fLCRxtV8iX8czMzY7sVZupTI3zcUTg8eycS2kNF9l6w==",
+      "requires": {
+        "loose-envify": "^1.0.0"
+      }
+    },
     "watchpack": {
       "version": "2.4.0",
       "resolved": "https://registry.npmjs.org/watchpack/-/watchpack-2.4.0.tgz",

package.json

@@ -14,6 +14,7 @@
     "node-sass": "^7.0.3",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-modal": "^3.16.1",
     "react-scripts": "5.0.1",
     "typescript": "^4.9.4",
     "web-vitals": "^2.1.4",

src/components/Footer/FooterSelosDev/FooterSelosDev.tsx

@@ -1,17 +1,17 @@
 import React from "react"
 import styleSelosDev from "./FooterSelosDev.module.scss"
 
-import masterCard from "../../../assets/img/master.svg"
-import visaCard from "../../../assets/img/visa.svg"
-import americanCard from "../../../assets/img/american-express.svg"
-import eloCard from "../../../assets/img/elo.svg"
-import hiperCard from "../../../assets/img/hiper.svg"
-import paypalCard from "../../../assets/img/paypal.svg"
-import boletoCard from "../../../assets/img/boleto.svg"
-import vtexCertifiedCard from "../../../assets/img/vtex.svg"
+import masterCard from "./assets/master.svg"
+import visaCard from "./assets/visa.svg"
+import americanCard from "./assets/american-express.svg"
+import eloCard from "./assets/elo.svg"
+import hiperCard from "./assets/hiper.svg"
+import paypalCard from "./assets/paypal.svg"
+import boletoCard from "./assets/boleto.svg"
+import vtexCertifiedCard from "./assets/vtex.svg"
 
-import vtexDev from "../../../assets/img/vtex-dev.svg"
-import m3 from "../../../assets/img/m3.svg"
+import vtexDev from "./assets/vtex-dev.svg"
+import m3 from "./assets/m3.svg"
 
 export const FooterSelosDev = () => {
 

src/components/Footer/LinksFooter/Links/Link.tsx

@@ -0,0 +1,15 @@
+import React from "react";
+
+interface linkProps {
+    text: string;
+    href: string;
+}
+
+export const Link = (props: linkProps) => {
+
+    const { href, text } = props;
+
+    return <li><a href={href}>{text}</a></li>
+}
+
+export default Link;

src/components/Footer/LinksFooter/LinksFooter.tsx

@@ -1,13 +1,13 @@
 import React, { useState, useEffect } from "react"
 import styleLink from "./LinksFooter.module.scss"
-
-import facebook from "../../../assets/img/facebook.svg"
-import instagram from "../../../assets/img/instagram.svg"
-import twitter from "../../../assets/img/twitter.svg"
-import youtube from "../../../assets/img/youtube.svg"
-import linkedlin from "../../../assets/img/linkedlin.svg"
-
-import titleLinks from "../../../assets/img/titleLinks.svg"
+import { Title } from "./Titles/Title"
+import { ReactComponent as Facebook } from "./assets/facebook.svg"
+import { ReactComponent as Instagram } from "./assets/instagram.svg"
+import { ReactComponent as Twitter } from "./assets/twitter.svg"
+import { ReactComponent as Youtube } from "./assets/youtube.svg"
+import { ReactComponent as Linkedlin } from "./assets/linkedlin.svg"
+import titleLinks from "./assets/titleLinks.svg"
+import { Link } from "./Links/Link"
 
 export const LinksFooter = () => {
 
@@ -54,60 +54,64 @@ export const LinksFooter = () => {
     return (
         <section className={styleLink["container"]}>
             <div className={styleLink["container__links"]}>
-
                 <div className={styleLink["container__links__rodape"]}>
-                    <h2
+                    < Title
                         onClick={() => handleListInstitucional(openInstitucional)}
-                        className={styleLink["container__links__rodape__title"]}>
-                        Institucional
+                        text="Institucional"
+                        className={styleLink["container__links__rodape__title"]}
+                        src={titleLinks}
+                        alt="Imagem expandir lista"
+                        type="button"
+                        ariaLabel="Exibir lista" />
 
-                        <button>
-                            <img src={titleLinks} alt="Imagem para expandir lista" />
-                        </button>
-                    </h2>
                     {openInstitucional &&
                         <ul className={styleLink["container__links__rodape__institucional"]}>
-                            <li><a href="/teste">Quem Somos</a></li>
-                            <li><a href="/teste">Política de Privacidade</a></li>
-                            <li><a href="/teste">Segurança</a></li>
-                            <li><a href="/teste">Seja um Revendedor</a></li>
+                            <Link href="/" text="Quem Somos" />
+                            <Link href="/" text="Política de Privacidade" />
+                            <Link href="/" text="Segurança" />
+                            <Link href="/" text="Seja um Revendedor" />
                         </ul>
                     }
-
                 </div>
 
                 <div className={styleLink["container__links__rodape"]}>
-                    <h2 onClick={() => handleListDuvidas(openDuvidas)} className={styleLink["container__links__rodape__title"]}>Dúvidas
-                        <button>
-                            <img src={titleLinks} alt="Imagem para expandir lista" />
-                        </button>
-                    </h2>
+                    < Title
+                        onClick={() => handleListDuvidas(openDuvidas)}
+                        text="Dúvidas"
+                        className={styleLink["container__links__rodape__title"]}
+                        src={titleLinks}
+                        alt="Imagem expandir lista"
+                        type="button"
+                        ariaLabel="Exibir lista" />
 
                     {openDuvidas &&
                         <ul className={styleLink["container__links__rodape__duvidas"]}>
-                            <li><a href="/teste">Entrega</a></li>
-                            <li><a href="/teste">Pagamento</a></li>
-                            <li><a href="/teste">Trocas e Devoluções</a></li>
-                            <li><a href="/teste">Dúvidas Frequentes</a></li>
+                            <Link href="/" text="Entrega" />
+                            <Link href="/" text="Pagamento" />
+                            <Link href="/" text="Trocas e Devoluções" />
+                            <Link href="/" text="Dúvidas Frequentes" />
                         </ul>
                     }
                 </div>
 
                 <div className={styleLink["container__links__rodape"]}>
-                    <h2 onClick={() => handleFaleConosco(openFaleConosco)} className={styleLink["container__links__rodape__title"]}>Fale Conosco
-                        <button className={styleLink["button"]}>
-                            <img src={titleLinks} alt="Imagem para expandir lista" />
-                        </button>
-                    </h2>
+                    < Title
+                        onClick={() => handleFaleConosco(openFaleConosco)}
+                        text="Fale Conosco"
+                        className={styleLink["container__links__rodape__title"]}
+                        src={titleLinks}
+                        alt="Imagem expandir lista"
+                        type="button"
+                        ariaLabel="Exibir lista" />
+
                     {openFaleConosco &&
                         <ul className={styleLink["container__links__rodape__fale-conosco"]}>
-                            <li><a href="/teste">Atendimento ao Consumidor</a></li>
-                            <li><a href="/teste">{"(11) 4159 9504"}</a></li>
-                            <li><a href="/teste">Atendimento Online</a></li>
-                            <li><a href="/teste">{"(11) 99433-8825"}</a></li>
+                            <Link href="/" text="Atendimento ao Consumidor" />
+                            <Link href="/" text="(11) 4159 9504" />
+                            <Link href="/" text="Atendimento Online" />
+                            <Link href="/" text="(11) 99433-8825" />
                         </ul>
                     }
-
                 </div>
             </div>
 
@@ -116,7 +120,7 @@ export const LinksFooter = () => {
                     <li>
                         <a href="/">
                             <figure>
-                                <img className={styleLink["facebook"]} src={facebook} alt="Imagem Facebook" />
+                                <Facebook className={styleLink["facebook"]} title="Imagem Facebook" />
                             </figure>
                         </a>
                     </li>
@@ -124,7 +128,7 @@ export const LinksFooter = () => {
                     <li>
                         <a href="/">
                             <figure>
-                                <img className={styleLink["instagram"]} src={instagram} alt="Imagem Instagram" />
+                                <Instagram className={styleLink["instagram"]} title="Imagem Instagram" />
                             </figure>
                         </a>
                     </li>
@@ -132,7 +136,7 @@ export const LinksFooter = () => {
                     <li>
                         <a href="/">
                             <figure>
-                                <img className={styleLink["twitter"]} src={twitter} alt="Imagem Twitter" />
+                                <Twitter className={styleLink["twitter"]} title="Imagem Twitter" />
                             </figure>
                         </a>
                     </li>
@@ -140,7 +144,7 @@ export const LinksFooter = () => {
                     <li>
                         <a href="/">
                             <figure>
-                                <img className={styleLink["youtube"]} src={youtube} alt="Imagem Youtube" />
+                                <Youtube className={styleLink["youtube"]} title="Imagem Youtube" />
                             </figure>
                         </a>
                     </li>
@@ -148,7 +152,7 @@ export const LinksFooter = () => {
                     <li>
                         <a href="/">
                             <figure>
-                                <img className={styleLink["linkedlin"]} src={linkedlin} alt="Imagem Linkedlin" />
+                                <Linkedlin className={styleLink["linkedlin"]} title="Imagem Linkedlin" />
                             </figure>
                         </a>
                     </li>

src/components/Footer/LinksFooter/NetWorks/NetWork.tsx

@@ -0,0 +1,25 @@
+import React from "react"
+
+interface netWorkProps {
+    style: string;
+    src: string;
+    alt: string;
+    href: string;
+}
+
+const NetWork = (props: netWorkProps) => {
+
+    const { style, src, alt, href } = props;
+
+    return (
+        <li>
+            <a href={href}>
+                <figure>
+                    <img className={style} src={src} alt={alt} />
+                </figure>
+            </a>
+        </li>
+    )
+}
+
+export default NetWork;

src/components/Footer/LinksFooter/Titles/Title.tsx

@@ -0,0 +1,28 @@
+import React, { MouseEventHandler } from "react";
+
+interface tituloProps {
+    className: string;
+    src: string;
+    alt: string;
+    text: string;
+    ariaLabel: string;
+    onClick: MouseEventHandler;
+    type: "button";
+}
+
+export const Title = (props: tituloProps) => {
+    const { text, className, src, alt, onClick, ariaLabel, type } = props;
+
+    return (
+        <>
+            <h2 onClick={onClick} className={className}>
+                {text}
+                <button aria-label={ariaLabel} type={type}>
+                    <img src={src} alt={alt} />
+                </button>
+            </h2>
+        </>
+    )
+}
+
+export default Title;

src/components/Footer/Newsletter/Newsletter.tsx

@@ -10,7 +10,7 @@ export const Newsletter = () => {
                 <form>
                     <div className={styleNewsletter["container__wrapper__input-button"]}>
                         <input type="email" placeholder="E-mail" />
-                        <button type="submit">
+                        <button type="submit" aria-label="Eviar e-mail">
                             ENVIAR
                         </button>
                     </div>

src/components/Header/Header.module.scss

@@ -94,7 +94,7 @@
           right: 17px;
         }
 
-        img {
+        .search-svg {
           height: 18px;
           width: 18px;
           color: var(--black-200);
@@ -142,13 +142,65 @@
           height: 54.68px;
         }
 
-        img {
+        .cart-svg {
           width: 100%;
+          height: 28px;
+
+          @media (min-width: 2500px) {
+            width: 54.68px;
+            height: 54.68px;
+          }
         }
       }
     }
   }
 
+  &__form-input-button {
+    background: var(--black);
+    position: relative;
+    padding: 0 16px 25px;
+    display: flex;
+
+    @media (min-width: 1025px) {
+      display: none;
+    }
+
+    &__input {
+      width: 100%;
+      height: 36px;
+      border: 2px solid var(--white-100);
+      border-radius: 5px;
+      padding: 10px 40px 10px 16px;
+
+      font-weight: 400;
+      font-size: 14px;
+      line-height: 16px;
+      font-family: var(--font-roboto);
+
+      &::placeholder {
+        color: var(--gray-100);
+      }
+    }
+
+    &__button {
+      position: absolute;
+      z-index: 10;
+      border: none;
+      background: transparent;
+      outline: none;
+      top: 8px;
+      right: 30px;
+      width: 18px;
+      height: 18px;
+
+      img {
+        width: 18px;
+        height: 18px;
+        color: var(--black-200);
+      }
+    }
+  }
+
   .container-nav {
     background-color: var(--black);
     padding: 14px 100.32px 14px 100px;

src/components/Header/Header.tsx

@@ -1,14 +1,10 @@
 import React from "react";
 import { InputMenuMobile } from "./InputMenuMobile/InputMenuMobile"
 import { MenuHamburguer } from "./MenuHamburguer/MenuHamburguer"
-
 import styleHeader from "./Header.module.scss"
-
-import logo from "../../assets/img/logo-m3.png"
-import cart from "../../assets/img/cart.svg"
-import search from "../../assets/img/search.svg"
-
-
+import logo from "./assets/logo-m3.png"
+import { ReactComponent as Cart } from "./assets/cart.svg"
+import { ReactComponent as Search } from "./assets/search.svg"
 
 export function Header() {
 
@@ -31,14 +27,14 @@ export function Header() {
                         placeholder="Buscar...">
                     </input>
                     <button className={styleHeader["button-search"]}>
-                        <img src={search} alt="Lupa de pesquisa" />
+                        <Search className={styleHeader["search-svg"]} title="Lupa de pesquisa" />
                     </button>
                 </div>
 
                 <div className={styleHeader["container__wrapper__container-login-cart"]}>
                     <p>ENTRAR</p>
                     <button>
-                        <img src={cart} alt="Carrinho" />
+                        <Cart className={styleHeader["cart-svg"]} title="Carrinho" />
                     </button>
                 </div>
 

src/components/Header/InputMenuMobile/InputMenuMobile.tsx

@@ -1,7 +1,6 @@
 import React from "react";
 import styleInput from "./inputMenuMobile.module.scss"
-
-import search from "../../../assets/img/search.svg"
+import { ReactComponent as Search } from "../assets/search.svg"
 
 export const InputMenuMobile = () => {
     return (
@@ -16,8 +15,7 @@ export const InputMenuMobile = () => {
             <button
                 type="submit"
                 className={styleInput["container__form-input-button__button"]}>
-
-                <img src={search} alt="Icone de busca" />
+                <Search className={styleInput["container__form-input-button__button__svg"]} title="Icone de busca" />
             </button>
         </form>
 

src/components/Header/InputMenuMobile/inputMenuMobile.module.scss

@@ -37,7 +37,7 @@
       width: 18px;
       height: 18px;
 
-      img {
+      &__svg {
         width: 18px;
         height: 18px;
         color: var(--black-200);

src/components/Header/MenuHamburguer/MenuHamburguer.tsx

@@ -1,8 +1,8 @@
 import React, { useState } from "react";
 import styleMenu from "./MenuHamburguer.module.scss"
 
-import hamburguer from "../../../assets/img/hamburguer.svg"
-import closeMenu from "../../../assets/img/close.svg"
+import hamburguer from "../assets/hamburguer.svg"
+import closeMenu from "../assets/close.svg"
 
 export const MenuHamburguer = () => {
 

src/global.scss

@@ -1,17 +1,4 @@
 //VARIABLES
-:root {
-  --font-roboto: "Roboto", sans-serif;
-
-  --black: #000000;
-  --black-100: #303030;
-  --black-200: #292929;
-
-  --white: #ffffff;
-  --white-100: #f0f0f0;
-
-  --gray-100: #c4c4c4;
-  --gray-200: #e5e5e5;
-}
 
 * {
   box-sizing: border-box;

src/index.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import ReactDOM from 'react-dom/client';
+import './variables.scss'
 import './global.scss';
 import { Home } from './pages/Home';
 

src/variables.scss

@@ -0,0 +1,13 @@
+:root {
+  --font-roboto: "Roboto", sans-serif;
+
+  --black: #000000;
+  --black-100: #303030;
+  --black-200: #292929;
+
+  --white: #ffffff;
+  --white-100: #f0f0f0;
+
+  --gray-100: #c4c4c4;
+  --gray-200: #e5e5e5;
+}