feat: rewrite project in NextJS

.babelrc

@@ -0,0 +1,3 @@
+{
+  "presets": ["next/babel", "@babel/preset-typescript"]
+}

frontend/.editorconfig → .editorconfig

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

.env

@@ -0,0 +1 @@
+NEXT_PUBLIC_DEV_CHALLENGE_API_URL=http://localhost:3333

.eslintrc.json

@@ -0,0 +1,36 @@
+{
+  "env": {
+    "browser": true,
+    "es2021": true,
+    "jest": true,
+    "node": 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": 12,
+    "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-non-null-assertion": "off"
+  }
+}

.github/ISSUE_TEMPLATE/novo-desafio.md

@@ -22,6 +22,6 @@ Ex: Seu desafio será criar uma landing page sobre um site de criação de gráf
 Ex: HTML, CSS
 
 <b>5 - Informe o link do desafio no github:</b>
-O seu desafio deverá ser um template no github, contendo texto utilizado, imagens, fontes e cores. 
-Ex padrão: <a href="https://github.com/Lorenalgm/AmazingGraph">Amazing Graph</a>. 
+O seu desafio deverá ser um template no github, contendo texto utilizado, imagens, fontes e cores.
+Ex padrão: <a href="https://github.com/Lorenalgm/AmazingGraph">Amazing Graph</a>.
 Caso você não possua, pode informar mais detalhes do desafio aqui que te auxilio ou crio o repositório pra você :)

.github/workflows/ci.yml

@@ -0,0 +1,36 @@
+name: ci
+on: [pull_request]
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout Repository
+        uses: actions/checkout@v2
+
+      - name: Setup Node
+        uses: actions/setup-node@v1
+        with:
+          node-version: 14.x
+
+      - uses: actions/cache@v2
+        id: yarn-cache
+        with:
+          path: |
+            ~/cache
+            !~/cache/exclude
+            **/node_modules
+          key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}
+          restore-keys: |
+            ${{ runner.os }}-yarn-
+      - name: Install dependencies
+        run: yarn install
+
+      - name: Linting
+        run: yarn lint
+
+      - name: Typecheck
+        run: yarn typecheck
+
+      - name: Test
+        run: yarn test

frontend/.gitignore → .gitignore

@@ -8,16 +8,34 @@
 # 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
-npm-debug.log*
-yarn-debug.log*
-yarn-error.log*
-.vscode
+
+# vercel
+.vercel
+
+# sw stuff
+public/sw.js
+public/workbox-*.js
+
+# storybook
+storybook-static

.husky/.gitignore

@@ -0,0 +1 @@
+_

.husky/pre-commit

@@ -0,0 +1,5 @@
+#!/bin/sh
+. "$(dirname "$0")/_/husky.sh"
+
+npx --no-install lint-staged
+yarn lint-staged

.jest/fixtures/challenge.json

@@ -0,0 +1,29 @@
+{
+  "background": "https://i.imgur.com/7FhmLIn.png",
+  "brief": "criar um aplicativo listando os personagens da Marvel, com suas informações, habilidades e filmes! O modelo final está disponível na pasta 'design'",
+  "createdAt": "2020-06-05T21:57:46.607Z",
+  "description": "Escolha seu personagem preferido da Marvel!",
+  "dev_id": {
+    "avatar": "https://bit.ly/dan-abramov",
+    "bio": "Loading...",
+    "createdAt": "2020-06-05T21:52:04.232Z",
+    "linkedin": "in/DanAbrahmov",
+    "name": "Dan Abrahmov",
+    "position": "Facebook developer",
+    "updatedAt": "2020-06-05T21:52:04.232Z",
+    "__v": 0,
+    "_id": "1"
+  },
+  "github_url": "https://github.com/Lorenalgm/marvel-heroes",
+  "images": [
+    "https://i.imgur.com/IroCUou.png",
+    "https://i.imgur.com/efLHRzt.png"
+  ],
+  "level": "advanced",
+  "name": "Marvel Heroes",
+  "techs": ["Free choice"],
+  "type": "Mobile",
+  "updatedAt": "2020-06-05T21:57:46.607Z",
+  "__v": 0,
+  "_id": "1"
+}

.jest/fixtures/challenges.json

@@ -0,0 +1,40 @@
+[
+  {
+    "background": "https://i.imgur.com/7FhmLIn.png",
+    "brief": "criar um aplicativo listando os personagens da Marvel, com suas informações, habilidades e filmes! O modelo final está disponível na pasta 'design'",
+    "createdAt": "2020-06-05T21:57:46.607Z",
+    "description": "Escolha seu personagem preferido da Marvel!",
+    "dev_id": "1",
+    "github_url": "https://github.com/Lorenalgm/marvel-heroes",
+    "images": [
+      "https://i.imgur.com/IroCUou.png",
+      "https://i.imgur.com/efLHRzt.png"
+    ],
+    "level": "advanced",
+    "name": "Marvel Heroes",
+    "techs": ["Free choice"],
+    "type": "Mobile",
+    "updatedAt": "2020-06-05T21:57:46.607Z",
+    "__v": 0,
+    "_id": "1"
+  },
+  {
+    "background": "https://i.imgur.com/7FhmLIn.png",
+    "brief": "criar um aplicativo listando os personagens da Marvel, com suas informações, habilidades e filmes! O modelo final está disponível na pasta 'design'",
+    "createdAt": "2020-06-05T21:57:46.607Z",
+    "description": "Escolha seu personagem preferido da Marvel!",
+    "dev_id": "1",
+    "github_url": "https://github.com/Lorenalgm/marvel-heroes",
+    "images": [
+      "https://i.imgur.com/IroCUou.png",
+      "https://i.imgur.com/efLHRzt.png"
+    ],
+    "level": "advanced",
+    "name": "Marvel Heroes",
+    "techs": ["Free choice"],
+    "type": "Mobile",
+    "updatedAt": "2020-06-05T21:57:46.607Z",
+    "__v": 0,
+    "_id": "2"
+  }
+]

.jest/fixtures/contributors.json

@@ -0,0 +1,26 @@
+[
+  {
+    "avatar": "https://bit.ly/dan-abramov",
+    "bio": "Loading...",
+    "createdAt": "2020-05-18T23:46:19.420Z",
+    "github": "DanAbrahmov",
+    "linkedin": "in/DanAbrahmov",
+    "name": "Dan Abrahmov",
+    "position": "Facebook developer",
+    "updatedAt": "2020-05-18T23:46:19.420Z",
+    "__v": 0,
+    "_id": "1"
+  },
+  {
+    "avatar": "https://bit.ly/dan-abramov",
+    "bio": "Loading...",
+    "createdAt": "2020-05-18T23:46:19.420Z",
+    "github": "DanAbrahmov",
+    "linkedin": "in/DanAbrahmov",
+    "name": "Dan Abrahmov",
+    "position": "Facebook developer",
+    "updatedAt": "2020-05-18T23:46:19.420Z",
+    "__v": 0,
+    "_id": "2"
+  }
+]

.jest/mock-css.ts

@@ -0,0 +1 @@
+// file needed to fix broken tests when importing css files

.jest/mock-env-variables.ts

@@ -0,0 +1 @@
+process.env.NEXT_PUBLIC_DEV_CHALLENGE_API_URL = 'http://localhost:3333'

.jest/mock-server.ts

@@ -0,0 +1,44 @@
+import { rest } from 'msw'
+import { setupServer } from 'msw/node'
+
+const devChallengeApiUrl = process.env.NEXT_PUBLIC_DEV_CHALLENGE_API_URL
+
+import challengesMocked from './fixtures/challenges.json'
+import challengeMocked from './fixtures/challenge.json'
+import contributorsMocked from './fixtures/contributors.json'
+
+const server = setupServer(
+  // challenges
+  rest.get(`${devChallengeApiUrl}/challenges`, (_req, res, ctx) => {
+    return res(ctx.status(200), ctx.json(challengesMocked))
+  }),
+  rest.get(`${devChallengeApiUrl}/challenges/:id`, (_req, res, ctx) => {
+    return res(ctx.status(200), ctx.json(challengeMocked))
+  }),
+
+  // contributors
+  rest.get(`${devChallengeApiUrl}/devs`, (_req, res, ctx) => {
+    return res(ctx.status(200), ctx.json(contributorsMocked))
+  }),
+
+  // newsletter
+  rest.post(`${devChallengeApiUrl}/newsletter`, (_req, res, ctx) => {
+    return res(ctx.status(200))
+  }),
+
+  rest.get('*', (req, res, ctx) => {
+    console.error(`Please add request handler for ${req.url.toString()}`)
+    return res(
+      ctx.status(500),
+      ctx.json({ error: 'You must add request handler.' })
+    )
+  })
+)
+
+beforeAll(() => server.listen())
+afterAll(() => server.close())
+afterEach(() => server.resetHandlers())
+
+const urls = { devChallengeApiUrl }
+
+export { server, rest, urls }

.jest/mock-use-router.ts

@@ -0,0 +1,16 @@
+// eslint-disable-next-line @typescript-eslint/no-var-requires
+const useRouter = jest.spyOn(require('next/router'), 'useRouter')
+
+useRouter.mockImplementation(() => ({
+  push: jest.fn(() => Promise.resolve(true)),
+  prefetch: jest.fn(() => Promise.resolve(true)),
+  replace: jest.fn(() => Promise.resolve(true)),
+  query: {},
+  asPath: '',
+  route: '/',
+  events: {
+    emit: jest.fn(),
+    on: jest.fn(),
+    off: jest.fn()
+  }
+}))

.jest/next-image.mock.js

@@ -0,0 +1,10 @@
+/* eslint-disable */
+import * as nextImage from 'next/image'
+
+Object.defineProperty(nextImage, 'default', {
+  configurable: true,
+  value: (props) => {
+    const { objectFit, placeholder, blurDataURL, ...rest} = props
+    return <img {...rest} />
+  }
+})

.jest/setup.ts

@@ -0,0 +1,7 @@
+import 'next-image.mock'
+import '@testing-library/jest-dom'
+import 'jest-canvas-mock'
+
+import './mock-env-variables'
+
+import './mock-server'

.prettierrc

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

.storybook/main.js

@@ -0,0 +1,26 @@
+const path = require("path")
+
+const toPath = (_path) => path.join(process.cwd(), _path)
+
+module.exports = {
+  stories: ['../src/components/**/stories.tsx'],
+  addons: ['@storybook/addon-essentials'],
+  typescript: {
+    reactDocgen: false,
+  },
+  webpackFinal: async (config) => {
+    return {
+      ...config,
+      resolve: {
+        ...config.resolve,
+        alias: {
+          ...config.resolve.alias,
+          "@emotion/core": toPath("node_modules/@emotion/react"),
+          "emotion-theming": toPath("node_modules/@emotion/react"),
+          "components": toPath("src/components"),
+          "services": toPath("src/services"),
+        },
+      },
+    }
+  },
+};

.storybook/preview.js

@@ -0,0 +1,26 @@
+import '../.jest/next-image.mock'
+import { ChakraProvider } from '@chakra-ui/react'
+
+import theme from '../src/theme'
+import './styles.css'
+
+export const parameters = {
+  backgrounds: {
+    default: 'dark',
+    layout: 'fullscreen',
+    values: [
+      {
+        name: 'dark',
+        value: theme.colors.backgroundColor
+      }
+    ]
+  }
+}
+
+export const decorators = [
+  (Story) => (
+    <ChakraProvider resetCSS theme={theme}>
+      <Story />
+    </ChakraProvider>
+  )
+]

.storybook/styles.css

@@ -0,0 +1,3 @@
+.sb-show-main.sb-main-padded {
+  padding: 0;
+}

.vscode/settings.json

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