Merge branch 'develop' into 5-criando-componentes

.dockerignore

@@ -0,0 +1,10 @@
+node_modules
+npm-debug.log
+Dockerfile*
+docker-compose*
+.dockerignore
+.git
+.gitignore
+README.md
+LICENSE
+.vscode

Dockerfile

@@ -1,9 +1,5 @@
 FROM node:alpine
 
-ARG YARN_PARAMS
-
-ENV YARN_COMMAND=$YARN_PARAMS
-
 WORKDIR /app
 
 COPY frontend/package.json /app
@@ -16,4 +12,4 @@ COPY frontend/ /app
 
 EXPOSE 3000
 
-CMD yarn $YARN_COMMAND
+CMD [ "/bin/sh", "-c", "yarn build && yarn serve" ]

README.md

@@ -41,21 +41,41 @@ Se SIM, insira um manual (ou um script) para auxiliar ainda mais os interessados
 
 ## Informações Complementares 
 
-## Como rodar
+## Ambientes
+### Local
+**[Disponível na porta 3000.](http://localhost:3000/)**
 
-#### Build
+### Ambiente de homologação
+**[Disponível no Heroku]()**
 
-```bash
-$ docker-compose build
-```
+### Ambiente de produção
+**[Disponível no Heroku]()**
+
+***
+## Colocando no ar localmente
 
-#### Run service
+- Caso esteja utilizando o vscode para desenvolver:
+1. Instalar as dependências da aplicação:
+```shell
+    yarn
+```
+2. Rodar a aplicação:
+```shell
+    yarn start
+```
 
-```bash
-$ docker-compose up
+- Caso esteja utilizando outras formas para desenvolver ou queira somente rodar a aplicação:
+1. Build:
+```shell
+    docker-compose build
+```
+2. Rodar a aplicação:
+```shell
+    docker-compose up
 ```
 
-#### Parar o docker
+## Rodando os testes
 
-```bash
-$ docker-compose down
+```shell
+    yarn test
+```

docker-compose.yml

@@ -6,12 +6,12 @@ services:
     build:
       context: .
       dockerfile: Dockerfile
-      args:
-        YARN_PARAMS: start
     environment:
       CHOKIDAR_USEPOLLING: "true"
+    stdin_open: true
     volumes:
       - /app/node_modules
       - ./frontend:/app
     ports:
       - 3000:3000
+    command: /bin/sh -c "yarn start"

frontend/.editorconfig

@@ -0,0 +1,9 @@
+root = true
+
+[*]
+indent_style = space
+indent_size = 2
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true
+end_of_line = lf

frontend/.eslintignore

@@ -0,0 +1,6 @@
+**/*.js
+node_modules
+build
+/src/react-app-env.d.ts
+/src/reportWebVitals.ts
+/*.js

frontend/.eslintrc.json

@@ -0,0 +1,65 @@
+{
+  "env": {
+    "browser": true,
+    "es6": true,
+    "jest": true
+  },
+  "extends": [
+    "plugin:react/recommended",
+    "airbnb",
+    "plugin:@typescript-eslint/recommended",
+    "prettier/@typescript-eslint",
+    "plugin:prettier/recommended"
+  ],
+  "globals": {
+    "Atomics": "readonly",
+    "SharedArrayBuffer": "readonly"
+  },
+  "parser": "@typescript-eslint/parser",
+  "parserOptions": {
+    "ecmaFeatures": {
+      "jsx": true
+    },
+    "ecmaVersion": 2018,
+    "sourceType": "module"
+  },
+  "plugins": ["react", "react-hooks", "@typescript-eslint", "prettier"],
+  "rules": {
+    "prettier/prettier": "error",
+    "react/jsx-one-expression-per-line": "off",
+    "react/jsx-props-no-spreading": "off",
+    "react/prop-types": "off",
+    "react-hooks/rules-of-hooks": "error",
+    "react-hooks/exhaustive-deps": "warn",
+    "no-unused-expressions": "off",
+    "react/jsx-filename-extension": [1, { "extensions": [".tsx"] }],
+    "import/prefer-default-export": "off",
+    "import/no-duplicates": "off",
+    "@typescript-eslint/interface-name-prefix": [
+      "error",
+      {
+        "prefixWithI": "always"
+      }
+    ],
+    "@typescript-eslint/camelcase": "off",
+    "@typescript-eslint/explicit-function-return-type": [
+      "error",
+      {
+        "allowExpressions": true
+      }
+    ],
+    "import/extensions": [
+      "error",
+      "ignorePackages",
+      {
+        "ts": "never",
+        "tsx": "never"
+      }
+    ]
+  },
+  "settings": {
+    "import/resolver": {
+      "typescript": {}
+    }
+  }
+}

frontend/config-overrides.js

@@ -0,0 +1,9 @@
+const jestConfig = require('./jest.config');
+
+module.exports = {
+  jest(config) {
+    config.preset = jestConfig.preset;
+    config.reporters = jestConfig.reporters;
+    return config;
+  },
+};

frontend/jest.config.js

@@ -0,0 +1,10 @@
+module.exports = {
+  preset: 'ts-jest',
+  setupFilesAfterEnv: ['@testing-library/jest-native/extend-expect'],
+  moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'json', 'node'],
+  setupFiles: ['./jest.setup.js'],
+  moduleNameMapper: {
+    '\\.(jpg|ico|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$':
+      '<rootDir>/src/__mocks__/fileMock.ts',
+  },
+};

frontend/package.json

@@ -1,33 +1,59 @@
 {
-  "name": "my-app",
+  "name": "ta-na-mesa",
   "version": "0.1.0",
-  "private": true,
   "dependencies": {
-    "@testing-library/jest-dom": "^5.11.4",
-    "@testing-library/react": "^11.1.0",
-    "@testing-library/user-event": "^12.1.10",
-    "@types/jest": "^27.0.1",
-    "@types/node": "^16.6.2",
-    "@types/react": "^17.0.19",
-    "@types/react-dom": "^17.0.9",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
-    "react-scripts": "4.0.3",
-    "styled-components": "^5.3.1",
-    "typescript": "^4.3.5",
-    "web-vitals": "^1.0.1"
+    "@testing-library/jest-dom": "^4.2.4",
+    "@testing-library/react": "^9.3.2",
+    "@testing-library/user-event": "^7.1.2",
+    "@types/jest": "^24.0.0",
+    "@types/node": "^12.0.0",
+    "@types/react": "^16.9.0",
+    "@types/react-dom": "^16.9.0",
+    "@types/react-modal": "^3.10.5",
+    "@unform/core": "^2.1.0",
+    "@unform/web": "^2.1.0",
+    "axios": "^0.19.2",
+    "react": "^16.13.1",
+    "react-dom": "^16.13.1",
+    "react-icons": "^3.10.0",
+    "react-modal": "^3.11.2",
+    "react-router-dom": "^5.2.0",
+    "react-scripts": "3.4.1",
+    "styled-components": "^5.1.0",
+    "typescript": "~3.7.2",
+    "yup": "^0.29.0"
+  },
+  "devDependencies": {
+    "@types/react-router-dom": "^5.1.4",
+    "@types/styled-components": "^5.1.0",
+    "@types/yup": "^0.26.36",
+    "@typescript-eslint/eslint-plugin": "^2.28.0",
+    "@typescript-eslint/parser": "^2.28.0",
+    "axios-mock-adapter": "^1.18.1",
+    "eslint": "^6.8.0",
+    "eslint-config-airbnb": "^18.1.0",
+    "eslint-config-prettier": "^6.10.1",
+    "eslint-import-resolver-typescript": "^2.0.0",
+    "eslint-plugin-import": "^2.20.1",
+    "eslint-plugin-jsx-a11y": "^6.2.3",
+    "eslint-plugin-prettier": "^3.1.3",
+    "eslint-plugin-react": "^7.19.0",
+    "eslint-plugin-react-hooks": "^2.5.0",
+    "jest-environment-jsdom-sixteen": "^1.0.3",
+    "json-server": "^0.16.1",
+    "prettier": "^2.0.4",
+    "react-app-rewired": "^2.1.6",
+    "ts-jest": "^26.0.0"
   },
   "scripts": {
-    "start": "react-scripts start",
-    "build": "react-scripts build",
-    "test": "react-scripts test",
+    "start": "react-app-rewired start",
+    "build": "rm -rf build && react-app-rewired build",
+    "serve": "serve -s build",
+    "test": "react-app-rewired test --watchAll --passWithNoTests",
     "eject": "react-scripts eject"
   },
   "eslintConfig": {
-    "extends": [
-      "react-app",
-      "react-app/jest"
-    ]
+    "extends": "react-app"
   },
   "browserslist": {
     "production": [
@@ -40,8 +66,5 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
-  },
-  "devDependencies": {
-    "@types/styled-components": "^5.1.13"
   }
 }

frontend/prettier.config.js

@@ -0,0 +1,7 @@
+module.exports = {
+  singleQuote: true,
+  trailingComma: 'all',
+	arrowParens: 'avoid',
+  tabWidth: 2,
+  semi: true
+}

frontend/public/index.html

@@ -11,9 +11,11 @@
     />
     <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
     <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-    <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700&display=swap" rel="stylesheet">
+    <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&family=Poppins:wght@400;500;600;700&display=swap" rel="stylesheet">
+
     <title>Tá na Mesa</title>
   </head>
   <body>

frontend/src/App.tsx

@@ -1,13 +1,12 @@
 import React from 'react';
 
-import GlobalStyle from 'styles/global';
-
-import NavBar from 'components/NavBar';
+import Routes from './routes/index';
+import GlobalStyle from './styles/global';
 
 const App: React.FC = () => {
   return (
     <>
-      <NavBar />
+      <Routes />
       <GlobalStyle />
     </>
   );

frontend/src/__tests__/pages/App.test.tsx

@@ -0,0 +1,11 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import App from '../../App';
+
+describe('App', () => {
+  it('render ta na mesa application name', () => {
+    const { getByText } = render(<App />);
+    const linkElement = getByText('Tá Na Mesa');
+    expect(linkElement).toBeInTheDocument();
+  });
+});

frontend/src/index.tsx

@@ -6,5 +6,5 @@ ReactDOM.render(
   <React.StrictMode>
     <App />
   </React.StrictMode>,
-  document.getElementById('root')
+  document.getElementById('root'),
 );

frontend/src/pages/Home/index.tsx

@@ -0,0 +1,11 @@
+import React from 'react';
+
+const Home: React.FC = () => {
+  return (
+    <>
+      <h1>Tá na Mesa</h1>
+    </>
+  );
+};
+
+export default Home;

frontend/src/pages/Home/styles.ts

@@ -0,0 +1 @@
+import styled from 'styled-components';

frontend/src/routes/index.tsx

@@ -0,0 +1,16 @@
+import React from 'react';
+import { BrowserRouter, Switch, Route } from 'react-router-dom';
+
+import Home from '../pages/Home';
+
+const Routes: React.FC = () => {
+  return (
+    <BrowserRouter>
+      <Switch>
+        <Route exact path="/" component={Home} />
+      </Switch>
+    </BrowserRouter>
+  );
+};
+
+export default Routes;

frontend/src/setupTests.ts

@@ -2,4 +2,4 @@
 // allows you to do things like:
 // expect(element).toHaveTextContent(/react/i)
 // learn more: https://github.com/testing-library/jest-dom
-import '@testing-library/jest-dom';
+import '@testing-library/jest-dom/extend-expect';