Boticario's Challenge - Diego Martins

.eslintrc.json

@@ -0,0 +1,42 @@
+{
+  "env": {
+      "browser": true,
+      "es6": true
+  },
+  "settings": {
+    "react": {
+      "version": "detect"
+    }
+  },
+  "extends": [
+      "eslint:recommended",
+      "plugin:react/recommended",
+      "plugin:@typescript-eslint/eslint-recommended",
+      "plugin:prettier/recommended"
+  ],
+  "globals": {
+      "Atomics": "readonly",
+      "SharedArrayBuffer": "readonly"
+  },
+  "parser": "@typescript-eslint/parser",
+  "parserOptions": {
+      "ecmaFeatures": {
+          "jsx": true
+      },
+      "ecmaVersion": 2018,
+      "sourceType": "module"
+  },
+  "plugins": [
+      "react",
+      "@typescript-eslint",
+      "react-hooks"
+  ],
+  "rules": {
+    "no-unused-vars": "off",
+    "react-hooks/rules-of-hooks": "error",
+    "react-hooks/exhaustive-deps": "warn",
+    "react/prop-types": "off",
+    "@typescript-eslint/explicit-module-boundary-types": "off",
+    "@typescript-eslint/no-unused-vars": "error"
+  }
+}

.gitignore

@@ -18,6 +18,9 @@
 .env.test.local
 .env.production.local
 
+# doc
+/docs
+
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*

README.md

@@ -1,41 +1,148 @@
-## Frontend Test
+# Boticário's Challenge
 
-Faça um fork deste repositório e finalizar o teste, submeta um pull request para o repositório que nosso time será notificado.
+![Boticário](https://i.pinimg.com/originals/b5/e2/eb/b5e2eb7bbd8afbcc5c8e41c84188cfc5.png 'Boticário challenge')
 
-O teste consiste em um checkout simples contendo 3 passos (carrinho, pagamento e sucesso) [Veja o Layout](https://projects.invisionapp.com/prototype/font-test-cji0j0khf005c1t0132358e8k)
+## Powered by
 
-**Faça quando quiser/puder (madrugada, fim de semana, etc)**
+[![Written in TypeScript](https://cdn.iconscout.com/icon/free/png-128/typescript-1-1175078.png 'Written in TypeScript')](http://www.typescriptlang.org)
+[![Tested with Jest](https://d2eip9sf3oo6c2.cloudfront.net/tags/images/000/000/940/square_128/jestlogo.png 'Tested with Jest')](https://jestjs.io/)
+![Uses Javascript as programming language](https://sabe.io/classes/javascript/icon.png)
+[![Documentation built by TypeDoc](https://typedoc.org/images/logo-128.png 'Documentation built by TypeDoc')](https://typedoc.org)
 
-### Requerimentos
+![BuildStatus](https://img.shields.io/badge/Build-Passing-brightgreen.svg 'Building Status') ![BuiltBy](https://img.shields.io/badge/TypeScript-Lovers-black.svg 'img.shields.io') ![ForTheBadge](https://img.shields.io/badge/Using-Badges-red.svg 'ForTheBadge')
 
-- Pixel perfect ([nesse link](https://projects.invisionapp.com/prototype/font-test-cji0j0khf005c1t0132358e8k), você pode inspecionar para ver espaçamentos, fonte, tamanho, etc)
-- A aplicação precisa ser responsiva, utilizando o conceito de mobile-first. Use sua imaginação para entregar uma experiência boa no desktop.
-- Renderize cada passo em uma URL única (lib de rotas).
+[![Conventional Commits](https://img.shields.io/badge/Conventional%20Commits-1.0.0-yellow.svg)](https://conventionalcommits.org)
+[![Commitizen friendly](https://img.shields.io/badge/commitizen-friendly-brightgreen.svg)](http://commitizen.github.io/cz-cli/)
 
+This application is a checkout simulation based on three steps.
 
-### Passo 1 - Carrinho:
-  - Consuma o [esse endpoint](http://www.mocky.io/v2/5b15c4923100004a006f3c07) e liste os itens do carrinho, bem como o resumo do carrinho;
-  - Persista o conteúdo do JSON para ser usado nas próximas etapas;
+In the initial page, cart data is requested from the API and saved on store. In the second step, we have a payment form to receive user's payment data. When user inputs your payment data and submit the form, the application is redirected to the last step: confirmation. In this step, we show a summary of order for the user.
 
-### Passo 2 - Pagamento: 
-  - Exiba um form com campos de cartão de crédito com validação em cada campo;
-  - Habilite o botão de Finalizar Pedido apenas se o form esteja válido;
+## Built With
 
-### Passo 3 - Sucesso: 
-  - Todo o conteúdo deverá ser exibido a partir dos dados persistidos;
-
-### O que vamos avaliar:
-  - Organização do código;
-  - Mensagens (em inglês) e mudanças nos commits;
-  - Composição/reutilização de componentes;
-  - Testes unitários;
-  - O motivo de ter escolhido cada tech da stack;
-  - Como rodar sua aplicação ;)
+- [React](https://reactjs.org/) - The Javascript library used to build user interface
+- [Create React App](https://create-react-app.dev/docs/getting-started/) - A React Starter Kit
+- [Styled Components](https://www.styled-components.com/) - A tool to create Styled React components
+- [Typescript](https://www.typescriptlang.org/) - A typed superset of Javascript that compiles to plain Javascript
+- [Jest](https://jestjs.io/) - A tool to test Javascript code
+- [Hook Form](https://react-hook-form.com/) - A complementary tool to make easy the creation of React forms
 
-### Diferenciais:
-  - Split bundle por rota (cada step ter um bundle separado para otimizar a performance);
-  - CSS in JS;
-  - React;
+## Getting Started
 
-### Fim:
-Ao finalizar o teste, submeta um pull request para o repositório que nosso time será notificado. Se tiver alguma observação, escreva no pull request.
+These instructions will guide you to run on your local machine for development and testing purposes. See deployment for notes on how to deploy the project on a live system.
+
+### Prerequisites
+
+Before start, you need to install NodeJS (you can download files [here](https://nodejs.org/en/download/)).
+
+> **_NOTE:_** The use of newer versions of Node is recommended
+
+If you need specific instructions to install NodeJS for a specific Operational System, see more on the following links:
+
+Windows: https://treehouse.github.io/installation-guides/windows/node-windows.html
+
+Linux: https://tecadmin.net/install-latest-nodejs-npm-on-ubuntu/
+
+MacOS: https://blog.teamtreehouse.com/install-node-js-npm-mac
+
+### Installing & Running
+
+Go to the project's folder and install project's dependencies using the following command in a terminal of your choice:
+
+```bash
+$ cd YOURFOLDERNAME
+$ npm install
+```
+
+Finally we can run the project using the following command:
+
+```bash
+$ npm start
+```
+
+## Running the tests
+
+To test the code I'm using [Jest](https://jestjs.io/docs/en/getting-started) and [Testing Library](https://testing-library.com/) (for React components).
+
+I made the decision to place test files near from your source files, instead of in a "\_\_test\_\_" folder. For this reason, a "component.test.tsx" will be near, in the same folder of "component.tsx", for example.
+
+To run all of our unit tests you need to run the following command:
+
+```bash
+$ npm test
+```
+
+> **_NOTE:_** The test will be running in watch mode. To run all test's files, press "a" key.
+
+> **_NOTE:_** In watch mode, you can filter tests by parameters such as file name, test name and other options... To know more about this options, see this section: https://jestjs.io/docs/en/watch-plugins#watch-menu-integration
+
+To get test coverage you need to run the following command:
+
+```bash
+$ npm run coverage
+```
+
+> **_NOTE:_** By default, a coverage table will be generated in YOURFOLDERNAME/coverage/Icov-report/index.html
+
+## Deployment
+
+To create a production build, you must run the following command:
+
+```bash
+$ npm run build
+```
+
+> **_NOTE:_** After builds the application, the script will create the project's documentation.
+
+To build the application and serve the built version you must run the following command:
+
+```bash
+$ npm run serve
+```
+
+### NPM Scripts
+
+- `npm run build`: Creates a production build using react-app-rewired.
+- `npm run coverage`: Generates a folder with test coverage.
+- `npm start`: Runs the application for development.
+- `npm serve`: Creates a production build and serve the application.
+- `npm run docs`: Creates code's documentation using TypeDoc.
+- `npm run lint`: Run lint tools to check the code.
+- `npm run postbuild`: Generates application's documentation.
+- `npm test`: Runs Jest testing.
+- `npm run eject`: Encapsulates all of the npm modules it is using internally, so that your package.json will be very clean and simple without you having to worry about it.
+
+### Folder's structure (main files and folders):
+
+```
+project
+├── build - Production build
+├── coverage - Coverage files by Jest
+├── docs - Code's documentation
+├── node_modules
+├── public
+├── src
+│   ├── redux - Redux modules and containers
+│   ├── routes - React Router's definitions
+│   ├── screens - App's pages
+│   ├── shared - Shared code (eg.: helpers)
+│   ├── ui
+│       ├── assets - Image files
+│       ├── components - React Components
+│       ├── layouts - Layouts for App's pages
+        └── theme - Colors and fonts definitions
+│   ├── App.tsx - App main component
+│   ├── index.tsx - App entry point
+│   ├── serviceWorker.js - Service Worker config
+│   ├── setupTests.js - A cfg to run before tests
+│   └── react-app-env.d.ts
+├── package.json
+├── paths.json - Typescript path aliases
+├── README.md
+├── tsconfig.json
+└── typedoc.json
+```
+
+### Theming
+
+To improve the application's maitenance I made the decision to create a theme's file to be provided for <App />. Thus, future developments related to design system become easier.

package.json

@@ -3,26 +3,35 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
-    "@testing-library/jest-dom": "^4.2.4",
-    "@testing-library/react": "^9.3.2",
-    "@testing-library/user-event": "^7.1.2",
     "react": "^17.0.1",
     "react-dom": "^17.0.1",
-    "react-scripts": "3.4.4"
+    "react-hook-form": "^6.14.1",
+    "react-input-mask": "^2.0.4",
+    "react-redux": "^7.2.2",
+    "react-router-dom": "^5.2.0",
+    "react-scripts": "3.4.4",
+    "redux": "^4.0.5",
+    "redux-actions": "^2.6.5",
+    "redux-saga": "^1.1.3",
+    "styled-components": "^5.2.1"
   },
   "scripts": {
-    "start": "react-scripts start",
     "build": "react-scripts build",
-    "test": "react-scripts test",
+    "postbuild": "npm run docs",
     "coverage": "react-scripts test --coverage --watchAll=false",
-    "eject": "react-scripts eject"
+    "docs": "typedoc --options typedoc.json ./src",
+    "eject": "react-scripts eject",
+    "lint": "eslint --fix --max-warnings=0",
+    "start": "react-scripts start",
+    "test": "react-scripts test --env=jest-environment-jsdom-sixteen",
+    "serve": "npm run build && npx serve -s build"
   },
   "eslintConfig": {
     "extends": "react-app"
   },
   "lint-staged": {
-    "src/**/*.{js,jsx,ts,tsx,json,css,scss,md}": [
-      "prettier --write"
+    "*.{ts,tsx}": [
+      "npm run lint"
     ]
   },
   "husky": {
@@ -43,8 +52,31 @@
     ]
   },
   "devDependencies": {
+    "@testing-library/jest-dom": "^4.2.4",
+    "@testing-library/react": "^11.2.3",
+    "@testing-library/user-event": "^7.1.2",
+    "@types/jest": "^26.0.15",
+    "@types/react": "^16.9.53",
+    "@types/react-dom": "^16.9.8",
+    "@types/react-input-mask": "^3.0.0",
+    "@types/react-redux": "^7.1.9",
+    "@types/react-router-dom": "^5.1.6",
+    "@types/redux-actions": "^2.6.1",
+    "@types/redux-mock-store": "^1.0.2",
+    "@types/styled-components": "^5.1.4",
+    "@types/testing-library__jest-dom": "^5.9.5",
+    "eslint-config-prettier": "^6.13.0",
+    "eslint-plugin-prettier": "^3.1.4",
+    "eslint-plugin-react": "^7.21.5",
+    "eslint-plugin-react-hooks": "^4.2.0",
     "husky": "^4.3.0",
+    "jest-environment-jsdom-sixteen": "^1.0.3",
+    "jest-styled-components": "^7.0.3",
     "lint-staged": "^10.4.2",
-    "prettier": "^2.1.2"
+    "prettier": "^2.1.2",
+    "redux-devtools-extension": "^2.13.8",
+    "redux-mock-store": "^1.5.4",
+    "typedoc": "^0.19.2",
+    "typescript": "4.0.3"
   }
 }

src/App.tsx

@@ -0,0 +1,27 @@
+import React from 'react'
+import { BrowserRouter } from 'react-router-dom'
+import { Provider } from 'react-redux'
+import { ThemeProvider } from 'styled-components'
+
+import Routes from './routes'
+import store from './redux/store'
+import theme from './ui/theme'
+import GlobalStyle from './ui/theme/global-style'
+import Layout from './ui/layouts/checkout'
+
+function App() {
+  return (
+    <Provider store={store}>
+      <ThemeProvider theme={theme}>
+        <GlobalStyle />
+        <BrowserRouter>
+          <Layout>
+            <Routes />
+          </Layout>
+        </BrowserRouter>
+      </ThemeProvider>
+    </Provider>
+  )
+}
+
+export default App

src/index.js → src/index.tsx

@@ -1,7 +1,7 @@
 import React, { StrictMode } from 'react'
 import ReactDOM from 'react-dom'
-import './index.css'
 import App from './App'
+
 import * as serviceWorker from './serviceWorker'
 
 const Strict = () => (

src/react-app-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="react-scripts" />