André Henrique

.editorconfig

@@ -1,15 +1,8 @@
 root = true
 
 [*]
-charset = utf-8
 end_of_line = lf
 insert_final_newline = true
+charset = utf-8
 indent_style = space
-indent_size = 4
-trim_trailing_whitespace = true
-
-[Makefile]
-indent_style = tab
-
-[*.md]
-trim_trailing_whitespace = false
+indent_size = 2

.eslintrc

@@ -0,0 +1,18 @@
+{
+  "env":{
+    "browser": true,
+    "node": true,
+    "jest": true
+  },
+  "extends": [
+    "plugin:@typescript-eslint/eslint-recommended",
+    "plugin:@typescript-eslint/recommended",
+    "next"
+  ],
+  "parser": "@typescript-eslint/parser",
+  "plugins": ["@typescript-eslint"],
+  "root": true,
+  "rules": {
+    "@typescript-eslint/no-var-requires": ["off"]
+  }
+}

.gitignore

@@ -0,0 +1,37 @@
+# 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
+.env.development.local
+.env.test.local
+.env.production.local
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo

.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+  "editor.formatOnSave": false,
+}

README.md

@@ -1,50 +1,22 @@
-# front-end-challenge
+# Desafio Front-End
 
-> Desafio para os futuros front-end's do [@Personare](https://github.com/Personare)
+Desafio fornecido pela [@Personare](https://github.com/Personare)
+## Para começar:
 
-## Introdução
+Faça um clone do repositório:
+```
+$ git clone https://github.com/araradev/front-end-challenge.git
+```
 
-A nossa Product Owner pensou em um produto fantástico para ser desenvolvido, e um dos desafios é criação de um jogo de Tarot.
+Execute o comando para instalar as dependências do projeto
+```
+$ npm install
+```
 
-<br>
+## Comandos 
+* **npm run dev**: Um servidor é iniciado na URL [http://localhost:3000](http://localhost:3000).
+* **npm test**: Roda os tests.
+* **npm run lint**: Procura por erros de lint.
+* **npm build**: Faz o build do projeto.
 
-**Então, essa é a sua missão!**
-
-Criar um jogo de Tarot, permitindo o sorteio de uma carta.
-
-E as especificações são:
-
-- Tela de apresentação exibindo todas as cartas com seu conteúdo visível, e com um botão para iniciar o jogo.
-- Ao clicar no botão, as cartas deverão ser viradas - escondendo o conteúdo - e embaralhadas.
-- Permitir que o usuário selecione apenas uma carta, clicando na mesma.
-- Apresentar a carta selecionada, o nome da carta e uma descrição. (a descrição pode ser um lorem ipsum)
-
-OBS: As imagens e nomes das cartas estão listadas no arquivo [`tarot.json`](tarot.json), esse arquivo deve ser consumido via _http request_. A propriedade `image` de cada carta deve ser concatenada com a propriedade `imagesUrl`, para obter o endereço final da imagem. Utilize o valor da propriedade `imageBackCard` para obter a imagem do fundo da carta.
-
-
-## Instruções
-
-1. Efetue o **fork** deste repositório e crie um branch com o seu nome. (ex: caue-alves).
-2. Após finalizar o desafio, crie um **Pull Request**.
-3. Aguarde algum contribuidor realizar o code review.
-
-
-## Pré-requisitos
-
-- Aplicação feita em React
-- Possuir testes
-- Gerar versão de produção
-- Criar micro commits ou commits por features
-	- Detalhar nos comentários dos commits as decisões tomadas.
-
-
-## Diferenciais
-
-- Boa documentação
-- Testes de componentes isolados
-
-## Dúvidas
-
-Se surgir alguma dúvida, consulte as [perguntas feitas anteriormente](https://github.com/Personare/front-end-challenge/labels/question).
-
-Caso não encontre a sua resposta, sinta-se à vontade para [abrir uma issue](https://github.com/Personare/front-end-challenge/issues/new) =]
+Link para o projeto em produção [https://front-end-challenge-chi.vercel.app](https://front-end-challenge-chi.vercel.app)

components/Button/__snapshots__/test.tsx.snap

@@ -0,0 +1,40 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`components/Button Should match snapshot 1`] = `
+.c0 {
+  -webkit-align-self: center;
+  -ms-flex-item-align: center;
+  align-self: center;
+  background-color: rgb(205,0,107);
+  color: #FFF;
+  cursor: pointer;
+  font-size: 2rem;
+  width: 95%;
+  border: none;
+  padding: 1rem;
+  margin: auto 5%;
+}
+
+.c0:active {
+  background-color: rgb(161,35,101);
+}
+
+.c0:hover {
+  background-color: rgb(161,35,101);
+}
+
+@media (min-width:768px) {
+  .c0 {
+    width: 300px;
+    font-size: 1.3rem;
+  }
+}
+
+<div>
+  <button
+    class="c0"
+  >
+    Testing button
+  </button>
+</div>
+`;

components/Button/index.tsx

@@ -0,0 +1,15 @@
+import React, {ButtonHTMLAttributes} from "react"
+import * as S from './styles'
+
+export type ButtonProps = {
+    children: React.ReactNode,
+} & ButtonHTMLAttributes<HTMLButtonElement>
+
+const Button = ({children, ...props}:ButtonProps) =>(
+  <S.Button {...props}>
+      {children}
+  </S.Button>
+)
+
+
+export default Button;

components/Button/styles.ts

@@ -0,0 +1,28 @@
+import styled from 'styled-components'
+import media from 'styled-media-query'
+import {ButtonProps} from './index'
+
+export const Button = styled.button<ButtonProps>`
+  align-self: center;
+  background-color: rgb(205, 0, 107);
+  color: #FFF;
+  cursor: pointer;
+  font-size: 2rem;
+  width: 95%;
+  border: none;
+  padding: 1rem;
+  margin: auto 5%;
+
+  &:active {
+    background-color: rgb(161, 35, 101);
+  }
+
+  &:hover {
+    background-color: rgb(161, 35, 101);
+  }
+
+  ${media.greaterThan('medium')`
+    width: 300px;
+    font-size: 1.3rem;`
+  }
+`

components/Button/test.tsx

@@ -0,0 +1,20 @@
+import { render, screen, fireEvent } from "@testing-library/react"
+import Button from './'
+
+const text = 'Testing button'
+
+describe('components/Button', () => {
+  it('Should match snapshot', () => {
+    const { container } = render(<Button>{text}</Button>)
+    expect(container).toMatchSnapshot()
+  })
+
+  it('Should call function onClick', () => {
+    const onClick = jest.fn()
+    render(<Button onClick={onClick}>{text}</Button>)
+
+    fireEvent.click(screen.getByRole('button', { name: text }))
+
+    expect(onClick).toBeCalled()
+  })
+})

components/Card/__snapshots__/test.tsx.snap

@@ -0,0 +1,105 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`components/Card Should match snapshot 1`] = `
+.c0 {
+  margin: .6rem;
+}
+
+.c1 {
+  position: relative;
+  width: 120px;
+  height: 200px;
+  -webkit-transition: -webkit-transform 606ms ease-in-out;
+  -webkit-transition: transform 606ms ease-in-out;
+  transition: transform 606ms ease-in-out;
+  -webkit-transform-style: preserve-3d;
+  -ms-transform-style: preserve-3d;
+  transform-style: preserve-3d;
+  -webkit-transform: rotateY(-180deg);
+  -ms-transform: rotateY(-180deg);
+  transform: rotateY(-180deg);
+}
+
+.c2 {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  -webkit-backface-visibility: hidden;
+  backface-visibility: hidden;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  font-size: 3rem;
+  cursor: pointer;
+  border-radius: 5px;
+}
+
+.c4 {
+  width: 120px;
+  height: 200px;
+  overflow: hidden;
+}
+
+.c3 {
+  -webkit-align-self: center;
+  -ms-flex-item-align: center;
+  align-self: center;
+  background: #420027b9;
+  border: 5px solid #ccc;
+  background-position: 50%;
+  background-repeat: no-repeat;
+  background-image: url('backCard.svg');
+  -webkit-transform: rotateY(-180deg);
+  -ms-transform: rotateY(-180deg);
+  transform: rotateY(-180deg);
+}
+
+<div>
+  <div
+    class="c0"
+  >
+    <div
+      class="c1"
+    >
+      <div
+        class="c2 c3"
+      />
+      <div
+        class="c2 c4"
+      >
+        <span
+          style="box-sizing: border-box; display: inline-block; overflow: hidden; background: none; opacity: 1; border: 0px; margin: 0px; padding: 0px; position: relative; max-width: 100%;"
+        >
+          <span
+            style="box-sizing: border-box; display: block; background: none; opacity: 1; border: 0px; margin: 0px; padding: 0px; max-width: 100%;"
+          >
+            <img
+              alt=""
+              aria-hidden="true"
+              src="data:image/svg+xml,%3csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20version=%271.1%27%20width=%27120%27%20height=%27200%27/%3e"
+              style="display: block; max-width: 100%; background: none; opacity: 1; border: 0px; margin: 0px; padding: 0px;"
+            />
+          </span>
+          <img
+            alt="test"
+            data-nimg="intrinsic"
+            decoding="async"
+            src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
+            style="position: absolute; top: 0px; left: 0px; bottom: 0px; right: 0px; box-sizing: border-box; padding: 0px; margin: auto; display: block; width: 0px; height: 0px; min-width: 100%; max-width: 100%; min-height: 100%; max-height: 100%;"
+          />
+          <noscript />
+        </span>
+      </div>
+    </div>
+  </div>
+</div>
+`;

components/Card/index.tsx

@@ -0,0 +1,28 @@
+import Image from 'next/image'
+import * as S from './styles'
+
+type CardProps = {
+  imagesUrl: string
+  name: string
+  flipped?: boolean
+  image: string
+  handleClick?:(name: string)=> void
+}
+const Card = ( {flipped = false, image, handleClick, name, imagesUrl}: CardProps) => {
+  const handleClickfn = (name: string) =>{
+    if(handleClick){
+      handleClick(name)
+    }
+  }
+  return(
+    <S.Card onClick={() => handleClickfn(name)}>           
+      <S.CardContent flipped={!flipped}>
+        <S.CardFaceBack />
+        <S.CardFaceFront>
+          <Image width={120} height={200} src={`${imagesUrl}${image}`} alt={name} />
+        </S.CardFaceFront>
+      </S.CardContent>
+    </S.Card> 
+  )
+}
+export default Card