Entrega do projeto

.editorconfig

@@ -0,0 +1,12 @@
+# EditorConfig is awesome: https://EditorConfig.org
+
+# top-most EditorConfig file
+root = true
+
+[*]
+indent_style = space
+indent_size = 2
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = false
+insert_final_newline = true

.eslintrc.json

@@ -0,0 +1,38 @@
+{
+    "env": {
+        "browser": true,
+        "es2021": true
+    },
+    "settings": {
+      "react":{
+        "version": "detect"
+      }
+    },
+    "extends": [
+        "eslint:recommended",
+        "plugin:react/recommended",
+        "plugin:@typescript-eslint/recommended",
+        "plugin:prettier/recommended"
+    ],
+    "parser": "@typescript-eslint/parser",
+    "parserOptions": {
+        "ecmaFeatures": {
+            "jsx": true
+        },
+        "ecmaVersion": "latest",
+        "sourceType": "module"
+    },
+    "plugins": [
+        "react",
+        "@typescript-eslint",
+        "react-hooks"
+    ],
+    "rules": {
+      "react-hooks/rules-of-hooks": "error",
+      "react-hooks/exhaustive-deps": "warn",
+      "react/prop-types": "off",
+      "react/react-in-jsx-scope": "off",
+      "@typescript-eslint/explicit-module-boundary-types" :"off", 
+      "@typescript-eslint/no-empty-interface":"off"
+    }
+}

.gitignore

@@ -0,0 +1,23 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# production
+/build
+
+# misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*

.prettierrc.json

@@ -0,0 +1,5 @@
+{
+  "trailingComma": "none",
+  "semi":true,
+  "singleQuote": true
+}

.vscode/settings.json

@@ -0,0 +1,6 @@
+{
+  "editor.formatOnSave": false,
+  "editor.codeActionsOnSave": {
+    "source.fixAll.eslint": true
+  }
+}

README.md

@@ -1,87 +1,47 @@
-# Desafio para Frontend Developer na DoroTech
-
-Somos uma empresa com clientes que atuam em vários segmentos do mercado, com diferentes tecnologias, culturas e desafios.
-
-Gostamos de compor nossos times com profissionais multidisciplinares, que tenham alta capacidade de aprendizado, sejam detalhistas, resilientes, questionadores e curiosos. 
-Você, como **Frontend Developer**, será o responsável por implementar, dar manutenção, aplicar correções e propor soluções em projetos de software.
-
-## Orientações
-Para executar o desafio de **Frontend Developer**, você **deverá utilizar framework React**, seguindo o [passo a passo](https://github.com/dorotech/frontend-test#etapas) para a execução, atendendo aos [critérios de aceitação](https://github.com/dorotech/frontend-test#crit%C3%A9rios-de-aceita%C3%A7%C3%A3o).
-
-## Desafio
-Nossa equipe é apaixonada por **Rick and Morty**, o seu desafio será criar uma aplicação utilizando a API pública da série [https://rickandmortyapi.com/](https://rickandmortyapi.com/), para exibir a lista de  personagens. 
-Veja a documentação [https://rickandmortyapi.com/documentation/#rest](https://rickandmortyapi.com/documentation/#rest).
-
-Os requisitos da aplicação:
-
-- Como usuário, desejo visualizar na página inicial, uma lista de 20 personagens incialmente, contendo **foto**, **nome** e **status**, com o tamanho da paginação sendo dinamica, podendo ser selecionando, 5, 10 ou 20 itens por vez.
-- Como usuário, desejo clicar em um personagem da lista, para visualizar informações detalhadas. (seja criativo a api contem diversas informaçoes)
-- Como usuário, desejo filtrar os personagens por **nome**, **gênero**, **espécie** e **status**, alguns filtros são enums, seja criativo.
-- Como usuário, desejo combinar varios filtros.
-- Como usuário, gostaria de ter uma forma de acessar a imagem do pensonagem, abrindo a imagem em uma nova aba.
-
-## Etapas
-
-#### 1 - Fazer um fork desse repositório
-
-![https://github.com/dorotech/frontend-test/raw/main/img/print-tutorial-1.png](https://github.com/dorotech/frontend-test/raw/main/img/print-tutorial-1.png)
-
-
-#### 2 - Criar um branch com o seu primeiro e último nome
-```bash
-git checkout -b joao-silva
-```
-
-#### 3 - Escreva a documentação da sua aplicação
-Você deve, substituir o conteúdo do arquivo **README.md** e escrever a documentação da sua aplicação, com os seguintes tópicos: 
-- **Projeto**: Descreva o projeto e como você o executou. Seja objetivo.
-- **Tecnologias**: Descreva quais tecnologias foram utilizadas, enumerando versões (se necessário) e os links para suas documentações,  qual guia de estilos de código você utilizou com o link para a sua documentação, quais bibliotecas instalou e porque.
-- **Como rodar**: Descreva como iniciar a sua aplicação
-- **Link** para acessar o projeto.
-
-#### 4 - Faça uma Pull Request
-Após implementada a solução, crie uma [pull request](https://github.com/dorotech/frontend-test/pulls) com o seu projeto para esse repositório, avise o recrutador.
-
-## Critérios de Aceitação
-Para que seu teste tenha o mínimo necessário que atenda aos requisitos esperados, ele deve:
-- Atender ao que foi proposto no [Desafio](https://github.com/dorotech/frontend-test#Desafio).
-- Utilização de pré-processadores CSS (Sass, Less).
-- Interfaces responsivas para desktop, tablets e smartphones.
-- Compatibilidade entre browsers.
-- Padrão de escrita CSS (BEM, OOCSS, SMACSS).
-- Código TS escrito com base em algum guia de estilos: [AirBnB Standards](https://github.com/airbnb/javascript) ou [TypeScript Google Guide](https://google.github.io/styleguide/tsguide.html).
-- Utilizar padrões semânticos em mensagens de commit. (Gostamos do padrão de commits do repositório [AngularJS](http://karma-runner.github.io/3.0/dev/git-commit-msg.html))
-- Projeto feito upload: [Firebase hosting](https://firebase.google.com/docs/hosting/quickstart?hl=pt-br) ou [GitHub Pages](https://pages.github.com/).
-- Caso você nao consiga completar tudo e tenha algum receio, não se preocupe, iremos avaliar o que foi entregue, mesmo com pendências.
-- O diferencial para este desafio: layout, ux e ui, bem como implementação de boas práticas de segurança, performance e/ou estrutura.
-- [JSDOC](https://jsdoc.app/) nos principais itens do projeto. 
-
-
-## Dicas e Informações Valiosas
-
-#### O que gostaríamos de ver em seu teste:
-- Upload do projeto em um seviço de hospedagem.
-- Convenção de nome em classes, objetos, variáveis, métodos e etc.
-- layout encantador
-- Faça commits regulares. Eles são melhores do que um commit gigantesco. Gostaríamos de ver commits organizados e padronizados, então capriche neles!
-- uso de libs como bootstrap, material, Evergreen e etc...
-- Hooks é bem-vindo.
-- Animações, Sobras, Menus, componentes de Libs de UX implementados. 
-- Projeto feito usando TypeScript
-- **Bônus 1** Dark Mode, implementação sendo um botão que mude o padrão de cores da pagina para escuro e claro com 1 click. 
-- **Bônus 2** QueryParams para buscas, quando uma busca e realizada, exibir na url o parametro da busca realizado, caso recaregar a pagina com a url, usar o parametro para preencher os itens da pagina.
-- **Bônus 3** Listagem de favoritos, com algum mecanismo de cache.
-- **Bônus 4** Outros filtros além dos sugeridos na descrição inicial
-- **Bônus 5** Github action como serviço de publicação do projeto pronto.
-
-**Observação:** Nenhum dos itens acima é obrigatório.
-
-#### O que o seu Teste não deve ter:
-- Saber que não foi você quem implementou o projeto.
-- Varias bibliotecas instaladas sem uso.
-- Falta de organização de código.
-- Falta de documentação.
-- Nome de variáveis sem sentido ou sem padrão de nomes.
-- Histórico de commits desorganizado e despadronizado.
-
-## Boa Sorte!! 
+# Projeto
+Uma pagina simples para listagem de personagem do **The Rick and Morty**.
+
+
+Para o desenvolvimento quebrei cada item em minitarefa assim ficava focado em apenas 1 item por vez.
+
+
+
+Utilizei um padrão diferente do convencional a onde cada pagina contem apenas o seu HTML e todo o items de estados e funções fica isolado, facilitando a manutenção
+
+## Tecnologias
+* [React](https://reactjs.org/docs/getting-started.html)
+* [Styled Component](https://styled-components.com/docs)
+* [Typescript](https://www.typescriptlang.org/docs/handbook/typescript-in-5-minutes.html)
+* [CRA](https://create-react-app.dev/docs/getting-started)
+* [Axios](https://axios-http.com/ptbr/docs/intro)
+* [Eslint](https://eslint.org/docs/latest/)
+* [Prettier](https://prettier.io/docs/en/index.html)
+* [React-Icons](https://react-icons.github.io/react-icons)
+
+## Como rodar
+
+#### Dependências
+---
+Necessário node 14 e o yarn 1.0 no mínimo
+
+* Recomendo o uso do NVM para gerência a versão do node 
+
+Caso use
+[windows](https://github.com/coreybutler/nvm-windows)
+
+Caso use 
+[linux](https://github.com/nvm-sh/nvm)
+
+Após a instalação rode **npm i -G yarn**
+
+Após fazer a instalação das ferramentas, rode o comando **yarn** para baixar todas as dependências do projeto
+
+Iniciando o projeto 
+**yarn start**
+
+### Problemas com lint 
+Caso tenha problemas com o eslint rode o comando **yarn lint**
+
+## Link
+[Acesso](https://andersonbsilvagroup.online/)
+[Vercel](https://frontend-test-mocha.vercel.app/)

package.json

@@ -0,0 +1,57 @@
+{
+  "name": "web",
+  "version": "0.1.0",
+  "private": true,
+  "dependencies": {
+    "@testing-library/jest-dom": "^5.14.1",
+    "@testing-library/react": "^13.0.0",
+    "@testing-library/user-event": "^13.2.1",
+    "@types/jest": "^27.0.1",
+    "@types/node": "^16.7.13",
+    "@types/react": "^18.0.0",
+    "@types/react-dom": "^18.0.0",
+    "axios": "^0.27.2",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-icons": "^4.4.0",
+    "react-scripts": "5.0.1",
+    "styled-components": "^5.3.5",
+    "typescript": "^4.4.2",
+    "web-vitals": "^2.1.0"
+  },
+  "scripts": {
+    "start": "react-scripts start",
+    "build": "react-scripts build",
+    "eject": "react-scripts eject",
+    "lint": "npx eslint src --fix"
+  },
+  "eslintConfig": {
+    "extends": [
+      "react-app",
+      "react-app/jest"
+    ]
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  },
+  "devDependencies": {
+    "@types/styled-components": "^5.1.25",
+    "@typescript-eslint/eslint-plugin": "^5.30.6",
+    "@typescript-eslint/parser": "^5.30.6",
+    "eslint": "^8.19.0",
+    "eslint-config-prettier": "^8.5.0",
+    "eslint-plugin-prettier": "^4.2.1",
+    "eslint-plugin-react": "^7.30.1",
+    "eslint-plugin-react-hooks": "^4.6.0",
+    "prettier": "2.7.1"
+  }
+}

public/index.html

@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html lang="pt-BR">
+  <head>
+    <meta charset="utf-8" />
+
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+
+    <title>React - Test</title>
+
+  </head>
+  <body>
+    <noscript>You need to enable JavaScript to run this app.</noscript>
+    <div id="root"></div>
+
+  </body> 
+</html>

src/App.tsx

@@ -0,0 +1,27 @@
+import { ThemeProvider } from 'styled-components';
+import { ThemeDark } from './Themes/Dark';
+import { ThemeLight } from './Themes/Light';
+import { GlobalStyles } from './Themes/globals';
+
+import { Home } from './Pages/Home';
+import { useState } from 'react';
+
+function App() {
+  const [themeMode, setThemeMode] = useState<'DARK' | 'LIGHT'>('DARK');
+
+  function alterTheme() {
+    setThemeMode((oldState) => (oldState === 'DARK' ? 'LIGHT' : 'DARK'));
+  }
+
+  return (
+    <ThemeProvider theme={themeMode === 'DARK' ? ThemeDark : ThemeLight}>
+      <Home
+        alterTheme={alterTheme}
+        darkModeIsActived={themeMode === 'DARK' ? true : false}
+      />
+      <GlobalStyles themeMode={themeMode} />
+    </ThemeProvider>
+  );
+}
+
+export default App;

src/Components/ButtonTheme/index.tsx

@@ -0,0 +1,30 @@
+import { Container } from './styles';
+
+interface ISwaper {
+  active?: boolean;
+  alterActive: () => void;
+}
+
+export function ButtonTheme({ active = false, alterActive }: ISwaper) {
+  if (active) {
+    return (
+      <Container className="active" onClick={alterActive}>
+        <div>
+          <span>ON</span>
+          <span className="ball active"></span>
+        </div>
+        <small>Dark Mode</small>
+      </Container>
+    );
+  }
+
+  return (
+    <Container onClick={alterActive}>
+      <div>
+        <span className="ball"></span>
+        <span>OFF</span>
+      </div>
+      <small>White Mode</small>
+    </Container>
+  );
+}