Davi Oliveira - Teste Frontend

react-app/.eslintrc.json

@@ -0,0 +1,22 @@
+{
+  "env": {
+    "browser": true,
+    "es2021": true
+  },
+  "extends": [
+    "plugin:react/recommended",
+    "standard",
+    "prettier/@typescript-eslint",
+    "plugin:prettier/recommended"
+  ],
+  "parser": "@typescript-eslint/parser",
+  "parserOptions": {
+    "ecmaFeatures": {
+      "jsx": true
+    },
+    "ecmaVersion": 12,
+    "sourceType": "module"
+  },
+  "plugins": ["react", "@typescript-eslint"],
+  "rules": {}
+}

react-app/.gitignore

@@ -0,0 +1,5 @@
+node_modules
+.DS_Store
+dist
+dist-ssr
+*.local

react-app/.prettierrc

@@ -0,0 +1,6 @@
+{
+  "trailingComma": "es5",
+  "tabWidth": 2,
+  "semi": false,
+  "singleQuote": true
+}

react-app/__tests__/components/Button.test.tsx

@@ -0,0 +1,18 @@
+import * as renderer from 'react-test-renderer'
+import { Button } from '../../src/components/Button'
+
+describe('<Button /> component', () => {
+  test('should renders correctly', async () => {
+    const props = {
+      title: 'Test',
+      isLoading: false,
+      onClick: () => {
+        return
+      },
+    }
+
+    const tree = renderer.create(<Button {...props} />).toJSON()
+
+    expect(tree).toMatchSnapshot()
+  })
+})

react-app/__tests__/components/Card.test.tsx

@@ -0,0 +1,9 @@
+import * as renderer from 'react-test-renderer'
+import { Card } from '../../src/components/Card'
+
+describe('<Card /> component', () => {
+  test('should renders correctly', async () => {
+    const tree = renderer.create(<Card />).toJSON()
+    expect(tree).toMatchSnapshot()
+  })
+})

react-app/__tests__/components/Input.test.tsx

@@ -0,0 +1,15 @@
+import * as renderer from 'react-test-renderer'
+import { Input } from '../../src/components/Input'
+
+describe('<Input /> component', () => {
+  test('should renders correctly', async () => {
+    const props = {
+      title: 'Email',
+      ref: null,
+    }
+
+    const tree = renderer.create(<Input {...props} />).toJSON()
+
+    expect(tree).toMatchSnapshot()
+  })
+})

react-app/__tests__/components/SnackBar.test.tsx

@@ -0,0 +1,12 @@
+import * as renderer from 'react-test-renderer'
+import { SnackBar } from '../../src/components/Snackbar'
+
+describe('<SnackBar /> component', () => {
+  test('should renders correctly', async () => {
+    const props = {
+      title: 'Test',
+    }
+    const tree = renderer.create(<SnackBar {...props} />).toJSON()
+    expect(tree).toMatchSnapshot()
+  })
+})

react-app/__tests__/components/Title.test.tsx

@@ -0,0 +1,11 @@
+import * as renderer from 'react-test-renderer'
+import { Title } from '../../src/components/Title'
+
+describe('<Title /> component', () => {
+  test('should renders correctly', async () => {
+    const tree = renderer.create(<Title>Test</Title>).toJSON()
+    expect(tree).toMatchSnapshot({
+      children: expect.arrayContaining(['Test']),
+    })
+  })
+})

react-app/__tests__/components/__snapshots__/Button.test.tsx.snap

@@ -0,0 +1,10 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<Button /> component should renders correctly 1`] = `
+<button
+  className="button"
+  onClick={[Function]}
+>
+  Test
+</button>
+`;

react-app/__tests__/components/__snapshots__/Card.test.tsx.snap

@@ -0,0 +1,7 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<Card /> component should renders correctly 1`] = `
+<div
+  className="container"
+/>
+`;

react-app/__tests__/components/__snapshots__/Input.test.tsx.snap

@@ -0,0 +1,17 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<Input /> component should renders correctly 1`] = `
+<div
+  className="wrapper"
+>
+  <input
+    className="floating-input"
+    placeholder="Email"
+  />
+  <span
+    className="floating-label"
+  >
+    Email
+  </span>
+</div>
+`;

react-app/__tests__/components/__snapshots__/SnackBar.test.tsx.snap

@@ -0,0 +1,9 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<SnackBar /> component should renders correctly 1`] = `
+<div
+  className="snackbar"
+>
+  Test
+</div>
+`;

react-app/__tests__/components/__snapshots__/Title.test.tsx.snap

@@ -0,0 +1,13 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<Title /> component should renders correctly 1`] = `
+Object {
+  "children": ArrayContaining [
+    "Test",
+  ],
+  "props": Object {
+    "className": "title",
+  },
+  "type": "h1",
+}
+`;

react-app/index.html

@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/src/favicon.ico" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Lato:wght@300;400;700&display=swap"
+      rel="stylesheet"
+    />
+    <title>MasterTech App</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>

react-app/jest.setup.ts

@@ -0,0 +1 @@
+import '@testing-library/jest-dom'

react-app/package.json

@@ -0,0 +1,61 @@
+{
+  "version": "0.0.0",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc && vite build",
+    "serve": "vite preview",
+    "test": "jest",
+    "test:watch": "jest --watch"
+  },
+  "jest": {
+    "transform": {
+      "^.+\\.tsx?$": "ts-jest"
+    },
+    "testRegex": "(/__tests__/.*|(\\.|/)(test|spec))\\.(jsx?|tsx?)$",
+    "moduleFileExtensions": [
+      "ts",
+      "tsx",
+      "js",
+      "jsx",
+      "json",
+      "node"
+    ],
+    "moduleNameMapper": {
+      "\\.(css|scss)$": "identity-obj-proxy"
+    }
+  },
+  "dependencies": {
+    "axios": "^0.21.1",
+    "react": "^17.0.0",
+    "react-dom": "^17.0.0",
+    "react-router-dom": "^5.2.0"
+  },
+  "devDependencies": {
+    "@testing-library/jest-dom": "^5.13.0",
+    "@testing-library/react": "^11.2.7",
+    "@types/jest": "^26.0.23",
+    "@types/react": "^17.0.0",
+    "@types/react-dom": "^17.0.0",
+    "@types/react-router-dom": "^5.1.7",
+    "@types/react-test-renderer": "^17.0.1",
+    "@typescript-eslint/eslint-plugin": "^4.26.1",
+    "@typescript-eslint/parser": "^4.26.1",
+    "@vitejs/plugin-react-refresh": "^1.3.1",
+    "eslint": "^7.28.0",
+    "eslint-config-prettier": "^8.3.0",
+    "eslint-config-standard": "^16.0.3",
+    "eslint-plugin-import": "^2.23.4",
+    "eslint-plugin-node": "^11.1.0",
+    "eslint-plugin-prettier": "^3.4.0",
+    "eslint-plugin-promise": "^5.1.0",
+    "eslint-plugin-react": "^7.24.0",
+    "identity-obj-proxy": "^3.0.0",
+    "jest": "^27.0.4",
+    "prettier": "^2.3.1",
+    "react-test-renderer": "^17.0.2",
+    "sass": "^1.34.1",
+    "ts-jest": "^27.0.3",
+    "typescript": "^4.3.2",
+    "vite": "^2.3.7"
+  }
+}

react-app/src/App.tsx

@@ -0,0 +1,18 @@
+import { FC } from 'react'
+import { Router } from 'react-router-dom'
+import { history } from './helpers/history'
+import { Routes } from './routes'
+import { AuthProvider } from './context/AuthContext'
+import { SnackBarProvider } from './context/SnackBarContext'
+
+export const App: FC = () => {
+  return (
+    <AuthProvider>
+      <SnackBarProvider>
+        <Router history={history}>
+          <Routes />
+        </Router>
+      </SnackBarProvider>
+    </AuthProvider>
+  )
+}

react-app/src/components/Button/index.scss

@@ -0,0 +1,41 @@
+@use "../../themes/variables.scss" as theme;
+
+.button {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: none;
+  border: none;
+  padding: 10px;
+  background-color: theme.$color-yellow-primary;
+  box-shadow: theme.$shadow;
+  color: black;
+  @extend .text-lg;
+  font-weight: theme.$font-bold;
+  width: 100%;
+  max-width: 100px;
+  margin: theme.$margin-default;
+  cursor: pointer;
+  transition: transform 0.25s ease, box-shadow 0.25s ease,
+    background-color 0.25s ease;
+}
+
+.button:hover {
+  transform: translate3d(0px, -1px, 0px);
+  box-shadow: 0 7px 14px rgba(50, 50, 93, 0.1), 0 3px 6px rgba(0, 0, 0, 0.08);
+}
+
+.donut-spinner {
+  border: 4px solid white;
+  border-left-color: black;
+  border-radius: 50%;
+  width: 20px;
+  height: 20px;
+  animation: donut-spin 1.2s linear infinite;
+}
+
+@keyframes donut-spin {
+  to {
+    transform: rotate(1turn);
+  }
+}

react-app/src/components/Button/index.tsx

@@ -0,0 +1,20 @@
+import { ButtonHTMLAttributes, FC } from 'react'
+import './index.scss'
+
+type ButtonProps = ButtonHTMLAttributes<HTMLButtonElement> & {
+  title: string
+  isLoading: boolean
+}
+
+export const Button: FC<ButtonProps> = ({
+  children,
+  title,
+  isLoading,
+  ...props
+}) => {
+  return (
+    <button className="button" {...props}>
+      {isLoading ? <div className="donut-spinner" /> : title}
+    </button>
+  )
+}

react-app/src/components/Card/index.tsx

@@ -0,0 +1,6 @@
+import { FC } from 'react'
+import './styles.scss'
+
+export const Card: FC = ({ children }) => {
+  return <div className="container">{children}</div>
+}

react-app/src/components/Card/styles.scss

@@ -0,0 +1,14 @@
+@use "../../themes/variables.scss" as theme;
+
+.container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: space-around;
+  width: 85vw;
+  max-width: 600px;
+  height: auto;
+  background-color: #fff;
+  box-shadow: theme.$shadow;
+  padding: 15px;
+}

react-app/src/components/Input/index.tsx

@@ -0,0 +1,22 @@
+import { FC, forwardRef, HTMLProps, InputHTMLAttributes } from 'react'
+import './styles.scss'
+
+type InputProps = HTMLProps<HTMLInputElement> & {
+  title: string
+}
+
+export const Input = forwardRef<HTMLInputElement, InputProps>(
+  ({ title, ...props }, ref) => {
+    return (
+      <div className="wrapper">
+        <input
+          className="floating-input"
+          ref={ref}
+          placeholder={title}
+          {...props}
+        />
+        <span className="floating-label">{title}</span>
+      </div>
+    )
+  }
+)