merge branch to main

about.md

@@ -0,0 +1 @@
+teste front end

api/package.json

@@ -7,7 +7,9 @@
     "start": "json-graphql-server db.js --p 3333"
   },
   "dependencies": {
+    "axios": "^1.4.0",
     "faker": "^5.5.3",
-    "json-graphql-server": "^2.2.3"
+    "json-graphql-server": "^2.2.3",
+    "react-query": "^3.39.3"
   }
 }

capputeeno/.eslintrc.json

@@ -0,0 +1,3 @@
+{
+  "extends": "next/core-web-vitals"
+}

capputeeno/.gitignore

@@ -0,0 +1,35 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# local env files
+.env*.local
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts

capputeeno/README.md

@@ -0,0 +1,34 @@
+This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
+
+## Getting Started
+
+First, run the development server:
+
+```bash
+npm run dev
+# or
+yarn dev
+# or
+pnpm dev
+```
+
+Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+
+You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
+
+This project uses [`next/font`](https://nextjs.org/docs/basic-features/font-optimization) to automatically optimize and load Inter, a custom Google Font.
+
+## Learn More
+
+To learn more about Next.js, take a look at the following resources:
+
+- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
+- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
+
+You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
+
+## Deploy on Vercel
+
+The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
+
+Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.

capputeeno/app/.env

@@ -0,0 +1 @@
+NEXT_PUBLIC_API_URL=http://localhost:3333

capputeeno/app/components/arrow-icon.tsx

@@ -0,0 +1,7 @@
+export function ArrowIcon(){
+    return (
+        <svg width="24" height="24" viewBox="0 0 24 24" fill="black" xmlns="http://www.w3.org/2000/svg">
+        <path d="M8 10L12 14L16 10" stroke="#737380" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
+        </svg>
+    )
+}

capputeeno/app/components/cart-control.tsx

@@ -0,0 +1,31 @@
+import { useLocalStorage } from "../hooks/useLocalStorage";
+import { Product } from "../types/product";
+import { CartIcon } from "./cart-icon";
+import { styled } from "styled-components";
+
+const CartCount = styled.span`
+    width: 17px;
+    height: 17px;
+    background-color: var(--delete-color);
+    color: white;
+
+    position: absolute;
+    right: -10px;
+    top: 50%;
+`
+
+const Container = styled.div`
+    position: relative;
+`
+
+
+export function CartControl() {
+    const { value } = useLocalStorage('cart-items', [] as Product[]); // Provide the default value here
+
+    return (
+      <div>
+        <CartIcon />
+        {value?.length && <CartCount>{value.length}</CartCount>}
+      </div>
+    );
+  }

capputeeno/app/components/cart-icon.tsx

@@ -0,0 +1,10 @@
+export function CartIcon(){
+    return(
+        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <path d="M4 7V5C4 4.44772 4.44772 4 5 4H19C19.5523 4 20 4.44772 20 5V7" stroke="#737380" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
+        <path fill-rule="evenodd" clip-rule="evenodd" d="M20 7H4C3.44772 7 3 7.44772 3 8V19C3 20.1046 3.89543 21 5 21H19C20.1046 21 21 20.1046 21 19V8C21 7.44772 20.5523 7 20 7Z" stroke="#737380" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+        <path d="M16 11C16 13.2091 14.2091 15 12 15C9.79086 15 8 13.2091 8 11" stroke="#737380" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
+        </svg>
+    )
+}
+

capputeeno/app/components/filter-bar.tsx

@@ -0,0 +1,25 @@
+"use client"
+
+import { styled } from "styled-components";
+import { FilterByType } from "./filter-by-type";
+import { FilterbyPriority } from "./filter-by-priority";
+
+interface FilterBarProps {
+
+}
+
+const FilterContainer = styled.div`
+    display: flex;
+    width: 100%;
+    align-items: start;
+    justify-content: space-between;
+`
+
+export function FilterBar(props : FilterBarProps){
+    return(
+        <FilterContainer>
+            <FilterByType/>
+            <FilterbyPriority/>
+        </FilterContainer>
+    )
+}

capputeeno/app/components/filter-by-priority.tsx

@@ -0,0 +1,84 @@
+import { styled } from "styled-components"
+import { ArrowIcon } from "./arrow-icon"
+import { useState } from "react"
+import { useFilter } from "../hooks/useFilter"
+import { PriorityTypes } from "../types/priority-types"
+
+interface FilterbyPriorityProps {
+
+}
+
+export const FilterContainer = styled.div`
+    display:flex;
+    align-items: center;
+    justify-content: flex-start;
+    position: relative;
+
+    button {
+        border: none;
+        background: transparent;
+        cursor: pointer;
+        font-family: inherited;
+        font-weight: 400;
+        font-size: 14px;
+        line-height: 22px;
+        color: var(--text-dark);
+
+        display: flex;
+        align-items: center;
+        justofy-content: center;
+    }
+`
+
+const CaixaSelecao = styled.ul`
+    position: absolute;
+    width: 176px;
+    cursor: pointer;
+    background: #FFFFFF;
+    box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.1);
+    border-radius: 4px;
+    padding: 12px 16px;
+
+    list-style: none;
+
+    top: 100%;
+
+    li {
+        color: var(--text-dark);
+        font-weight: 400;
+        font-size: 14px;
+        line-height: 22px
+    }
+`
+
+
+export function FilterbyPriority(props: FilterbyPriorityProps){
+    const [isOpen, setIsOpen] = useState(false)
+    const { setPriority } = useFilter()
+
+    const handleOpen = () => setIsOpen((prev: boolean) => !prev)
+
+    const handleUpdatePriority = (value: PriorityTypes) => {
+        setPriority(value)
+        setIsOpen(false)
+    }
+
+/*O operador lógico "&&" é usado para fazer uma verificação condicional. 
+Se o valor à esquerda (neste caso, isOpen) for avaliado como verdadeiro (ou seja, true), 
+o valor à direita do "&&" será retornado. 
+Caso contrário, se o valor à esquerda for avaliado como falso (ou seja, false),
+ o valor à direita não será avaliado e a expressão retornará false. */
+    return(
+        <FilterContainer>
+            <button onClick={handleOpen}>Organizar por<ArrowIcon/></button>
+            {isOpen && 
+            <CaixaSelecao>
+                <li onClick={() => handleUpdatePriority(PriorityTypes.NEWS)}>Novidades</li>
+                <li onClick={() => handleUpdatePriority(PriorityTypes.BIGGEST_PRICE)}>Preço:Maior-menor</li>
+                <li onClick={() => handleUpdatePriority(PriorityTypes.MINOR_PRICE)}>Preço:Menor-maior</li>
+                <li onClick={() => handleUpdatePriority(PriorityTypes.POPULARITY)}>Mais vendidos</li>
+            </CaixaSelecao>}
+        </FilterContainer>
+
+    )
+} 

capputeeno/app/components/filter-by-type.tsx

@@ -0,0 +1,48 @@
+"use client"
+import { styled } from "styled-components";
+import { useContext } from "react";
+import { useFilter } from "../hooks/useFilter";
+import { FilterType } from "../types/filter-types";
+
+interface FilterItemProps {
+    selected: boolean
+}
+
+const FilterList = styled.ul`
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 40px;
+    list-style: none;
+`
+
+
+const FilterItem = styled.li<FilterItemProps>`
+    font-family: inherit;
+    font-style: normal;
+    font-weight: ${props => props.selected ? '600' : '400'};
+    font-size: 16px
+    line-height: 22px;
+    text-align: center;
+    text-transform: uppercase;
+    cursor: pointer;
+
+    color: var(--text-dark);
+
+    border-bottom: ${props => props.selected ? '4px solid var(--orange-low)' : null }
+`
+
+export function FilterByType(){
+    const { type, setType } = useFilter();
+
+    const handleChangeType = (value: FilterType) => {
+        setType(value)
+    }
+    return(
+        <FilterList>
+            <FilterItem selected={type === FilterType.ALL} onClick={() => handleChangeType(FilterType.ALL)}>Todos os produtos</FilterItem>
+            <FilterItem selected={type === FilterType.SHIRT} onClick={() => handleChangeType(FilterType.SHIRT)}>Camisetas</FilterItem>
+            <FilterItem selected={type === FilterType.MUG} onClick={() => handleChangeType(FilterType.MUG)}>Canecas</FilterItem>
+        </FilterList>
+    )
+}

capputeeno/app/components/header.tsx

@@ -0,0 +1,41 @@
+"use client"
+
+import { styled } from "styled-components"
+
+import { Saira_Stencil_One } from "next/font/google"
+import { PrimaryInputWSearchIcon } from "./primary-input"
+
+
+const sairaStencil = Saira_Stencil_One({
+    weight: ['400'],
+    subsets: ['latin'] 
+})
+
+interface HeaderProps {
+
+}
+
+const TagHeader = styled.header`
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 20px 160px;
+`
+
+const Logo = styled.a`
+    color: var(--logo-color);
+    font-weight: 400;
+    font-size: 40px;
+    line-height: 150%;
+`
+
+export function Header(props: HeaderProps){
+    return(
+        <TagHeader>
+            <Logo className={sairaStencil.className}>Online store com typescript e next js</Logo>
+            <div>
+                <PrimaryInputWSearchIcon placeholder="Pesquise aqui"/>
+            </div>
+        </TagHeader>
+    )
+}

capputeeno/app/components/primary-input.tsx

@@ -0,0 +1,40 @@
+import { InputHTMLAttributes } from "react";
+import { styled } from "styled-components";
+import { SearchIcon } from "./search-icon";
+
+export const PrimaryInput = styled.input`
+    width: 352px;
+    border-radius: 8px;
+    border: none;
+    padding: 10px 16px;
+
+    background-color: var(--bg-secondary);
+
+    font-family: inherit;
+    font-weight: 400;
+    font-size: 14px;
+    line-height: 22px;
+`
+
+const InputContainer = styled.div`
+    position: relative;
+    width: 352px;
+
+    svg {
+        position: absolute;
+        right: 20px;
+        top: 50%;
+        transform: translateY(-50%);
+    }
+`
+
+interface InputProps extends InputHTMLAttributes<HTMLInputElement> {}
+
+export function PrimaryInputWSearchIcon(props: InputProps){
+    return (
+       <InputContainer>
+           <PrimaryInput {...props}/>
+            <SearchIcon/>
+       </InputContainer>
+    )
+}