[dev-next-project] Guilherme Mansur, Reinado pereira, Leonardo Araújo, Vitor Teixeira

.eslintrc.json

@@ -0,0 +1,3 @@
+{
+  "extends": "next/core-web-vitals"
+}

.github/workflows/nextjs.yml

@@ -0,0 +1,93 @@
+# Sample workflow for building and deploying a Next.js site to GitHub Pages
+#
+# To get started with Next.js see: https://nextjs.org/docs/getting-started
+#
+name: Deploy Next.js site to Pages
+
+on:
+  # Runs on pushes targeting the default branch
+  push:
+    branches: ["worktable"]
+
+  # Allows you to run this workflow manually from the Actions tab
+  workflow_dispatch:
+
+# Sets permissions of the GITHUB_TOKEN to allow deployment to GitHub Pages
+permissions:
+  contents: read
+  pages: write
+  id-token: write
+
+# Allow only one concurrent deployment, skipping runs queued between the run in-progress and latest queued.
+# However, do NOT cancel in-progress runs as we want to allow these production deployments to complete.
+concurrency:
+  group: "pages"
+  cancel-in-progress: false
+
+jobs:
+  # Build job
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+      - name: Detect package manager
+        id: detect-package-manager
+        run: |
+          if [ -f "${{ github.workspace }}/yarn.lock" ]; then
+            echo "manager=yarn" >> $GITHUB_OUTPUT
+            echo "command=install" >> $GITHUB_OUTPUT
+            echo "runner=yarn" >> $GITHUB_OUTPUT
+            exit 0
+          elif [ -f "${{ github.workspace }}/package.json" ]; then
+            echo "manager=npm" >> $GITHUB_OUTPUT
+            echo "command=ci" >> $GITHUB_OUTPUT
+            echo "runner=npx --no-install" >> $GITHUB_OUTPUT
+            exit 0
+          else
+            echo "Unable to determine package manager"
+            exit 1
+          fi
+      - name: Setup Node
+        uses: actions/setup-node@v4
+        with:
+          node-version: "20"
+          cache: ${{ steps.detect-package-manager.outputs.manager }}
+      - name: Setup Pages
+        uses: actions/configure-pages@v5
+        with:
+          # Automatically inject basePath in your Next.js configuration file and disable
+          # server side image optimization (https://nextjs.org/docs/api-reference/next/image#unoptimized).
+          #
+          # You may remove this line if you want to manage the configuration yourself.
+          static_site_generator: next
+      - name: Restore cache
+        uses: actions/cache@v4
+        with:
+          path: |
+            .next/cache
+          # Generate a new cache whenever packages or source files change.
+          key: ${{ runner.os }}-nextjs-${{ hashFiles('**/package-lock.json', '**/yarn.lock') }}-${{ hashFiles('**.[jt]s', '**.[jt]sx') }}
+          # If source files changed but packages didn't, rebuild from a prior cache.
+          restore-keys: |
+            ${{ runner.os }}-nextjs-${{ hashFiles('**/package-lock.json', '**/yarn.lock') }}-
+      - name: Install dependencies
+        run: ${{ steps.detect-package-manager.outputs.manager }} ${{ steps.detect-package-manager.outputs.command }}
+      - name: Build with Next.js
+        run: ${{ steps.detect-package-manager.outputs.runner }} next build
+      - name: Upload artifact
+        uses: actions/upload-pages-artifact@v3
+        with:
+          path: ./out
+
+  # Deployment job
+  deploy:
+    environment:
+      name: github-pages
+      url: ${{ steps.deployment.outputs.page_url }}
+    runs-on: ubuntu-latest
+    needs: build
+    steps:
+      - name: Deploy to GitHub Pages
+        id: deployment
+        uses: actions/deploy-pages@v4

.gitignore

@@ -0,0 +1,37 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+.yarn/install-state.gz
+
+# testing
+/coverage
+
+# next.js
+/.next/
+# /out/
+# /dist/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# local env files
+.env*.local
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts

.stylelintrc.json

@@ -0,0 +1,6 @@
+{
+    "extends": "stylelint-config-standard",
+    "plugins": [],
+    "ignoreFiles": ["**/*.html", "**/*.js"]
+  }
+

README.md

@@ -1,51 +1,43 @@
-# Dev na Prática (Desafio 01)
+# Frontend Next.js App
 
-## Desafio Trybe - Destaques do Mês
+Este repositório contém uma aplicação frontend desenvolvida em Next.js. É um site simples, porém impactante, que exibe as pessoas destaques do mês atual, com links para seus feitos notáveis. Além disso, o site contém uma página separada para visualizar o histórico de meses anteriores.
 
-Bem-vindo ao Desafio Trybe - Destaques do Mês! Este projeto tem como objetivo criar um site informativo para destacar as pessoas estudante e formadas que se destacaram em um determinado mês na Trybe. O site será implantado no GitHub Pages para fácil deploy, acesso e visualização.
+### Scripts Disponíveis
 
-## Objetivo do Projeto
+```bash
+npm run dev        # Inicia o servidor de desenvolvimento do Next.js.
+```
 
-O objetivo deste projeto é criar um site simples, porém impactante, que exiba as pessoas destaques do mês atual, com links para seus feitos notáveis. Além disso, o site deve conter uma página separada para visualizar o histórico de meses anteriores.
+```bash
+npm run build      # Compila a aplicação para produção.
+```
 
-## Requisitos
+```bash
+npm start          # Inicia a aplicação em um ambiente de produção.
+```
 
-### Página Principal (Destaques do Mês)
-- **Lista de Destaques:** Exibir uma lista das pessoas destacadas do mês, incluindo seus nomes, imagens e links para seus projetos e/ou conquistas.
-- **Design Responsivo:** Garantir que o site seja responsivo, proporcionando uma experiência agradável em diferentes dispositivos.
+```bash
+npm run lint       # Executa a verificação de linting usando o Next.js.
+```
 
-### Página de Histórico
-- **Histórico Mensal:** Criar uma página separada para exibir os destaques dos meses anteriores, organizados de forma nítida e acessível.
-- **Navegação Intuitiva:** Permitir que as pessoas usuárias naveguem facilmente entre a página principal e a página de histórico.
-
-### Deploy: ###
-- Realizar o deploy do site no GitHub Pages para que seja facilmente acessível pela comunidade Trybe.
+```bash
+npm run lint:css   # Executa a verificação de linting específica para arquivos CSS usando o Stylelint.
+```
 
-### Tecnologia: ###
-- É um desafio de frontend, e o React deverá ser utilizado para o desenvolvimento do Site.
-- Será permitido o uso de libs que facilitam a integração com github pages.
-- Os dados e informações devem ser lidos de arquivos estáticos, já que não haverá um serviço de backend
-- As atualizações das informações do site serão feitas com a adição ou alterção desses arquivos estáticos.
-- A identidade visual do site deve ter sinergia com a identidade visual do site da Trybe: www.betrybe.com
+```bash
+npm test           # Executa os testes da aplicação utilizando o Jest.
+```
 
-## Avaliação dos Projetos Submetidos
+### Como Utilizar
 
-Os projetos submetidos serão avaliados com base nos seguintes critérios:
-1. **Implementação dos Requisitos:** Verificar se todos os requisitos do projeto foram atendidos conforme especificado na descrição, incluindo a página principal com os destaques do mês, a página de histórico e a navegação entre elas.
-2. **Qualidade do Código:** Avaliar a qualidade do código-fonte, incluindo boas práticas de programação, legibilidade, organização e modularidade.
-3. **Design e Usabilidade:** Analisar o design visual do site, incluindo layout, estilo, uso de cores e fontes, bem como a experiência do usuário, garantindo uma navegação intuitiva e agradável. 
-4. **Responsividade:** Verificar se o site é responsivo e se adapta de forma adequada a diferentes tamanhos de tela e dispositivos, proporcionando uma experiência consistente para todos os usuários.
-6. **Documentação e Comentários:** Avaliar a presença de documentação nítida (README) e comentários significativos no código, facilitando a compreensão e manutenção do projeto por outros desenvolvedores, e garantido uma boa descrição do processo para atualização do conteúdo.
+1. Clone este repositório.
+2. Instale as dependências do projeto: `npm install`.
+3. Execute os scripts conforme necessário para desenvolver, construir, executar e testar a aplicação.
 
-Os projetos serão avaliados de forma justa e imparcial, levando em consideração o esforço, a criatividade e a qualidade do trabalho realizado. As pessoas participantes são encorajadas a se esforçarem ao máximo e a aproveitarem a oportunidade para aprender e aprimorar suas habilidades de desenvolvimento web, além de enriquecerem seu portfólio.
-
-
-## Como Submeter sua Solução:
-1. Faça um fork deste repositório.
-2. Clone o repositório forkado para a sua máquina local.
-3. Crie uma branch para seu grupo desenvolver suas alterações.
-4. Após a conclusão do desenvolvimento, abra um Pull Request para revisão.
-
-**Observação:** O fork do repositório é importante para que vocês consigam configurar o github pages com a branch da solução e assim conseguirem validar o site no github pages.
+### Observações
 
+- Certifique-se de ter o Node.js e o npm instalados globalmente em seu sistema.
+- Este projeto utiliza Next.js para a construção de aplicativos da web do lado do servidor e Jest para testes de unidade.
+- O linting é configurado para manter a consistência no código-fonte, garantindo boas práticas de programação.
+- Os testes são essenciais para garantir a integridade e qualidade do código.
 

__tests__/AboutPhrase.test.tsx

@@ -0,0 +1,19 @@
+import '@testing-library/jest-dom'
+import { render, screen } from '@testing-library/react'
+import AboutPhrase from '../src/components/AboutPhrase'
+import React from 'react'
+
+describe('AboutPhrase component', () => {
+  it('Should return AboutPhrase in the component.', () => {
+    render(<AboutPhrase name='Pedro' phrase='cheguei' about='xxxxxxx' date='18-04-2001' />)
+
+    const heading = screen.getByText('Pedro')
+
+    expect(heading).toBeInTheDocument()
+
+    const phrase = screen.getByText('cheguei')
+
+    expect(phrase).toBeInTheDocument()
+
+  })
+})

__tests__/Card.test.tsx

@@ -0,0 +1,18 @@
+import '@testing-library/jest-dom'
+import { render, screen } from '@testing-library/react'
+import { CardItem } from '../src/components/Card'
+import { User } from './mock/User'
+import React from 'react'
+
+describe('Card component', () => {
+  it('Should return Card in the component.', () => {
+    render(<CardItem project={User.projects[0]}/>)
+
+    const backgroundImageDiv = screen.getByTestId('background-image-div');
+
+    expect(backgroundImageDiv).toBeInTheDocument();
+    expect(backgroundImageDiv).toHaveClass('absolute inset-0 bg-cover bg-center');
+    expect(backgroundImageDiv).toHaveStyle({ backgroundImage: 'url(/aprendizagem.jpeg)' });
+
+  })
+})

__tests__/Footer.test.tsx

@@ -0,0 +1,19 @@
+import '@testing-library/jest-dom'
+import { render, screen } from '@testing-library/react'
+import Footer from '../src/components/Footer'
+import React from 'react'
+
+describe('Footer component', () => {
+  it('Should return component Footer.', () => {
+    render(<Footer />)
+
+    const heading = screen.getByText('Idealizadores:')
+
+    const msg = screen.getByText('Links úteis:');
+
+    expect(heading).toBeInTheDocument()
+
+    expect(msg).toBeInTheDocument()
+
+  })
+})

__tests__/HeadLine.test.tsx

@@ -0,0 +1,15 @@
+import '@testing-library/jest-dom'
+import { render, screen } from '@testing-library/react'
+import HeadLine from '../src/components/Headline'
+import React from 'react'
+
+describe('Component HeadLine', () => {
+  it('Should return HeadLine component.', () => {
+    render(<HeadLine title='title'/>)
+
+    const heading = screen.getByText('title')
+
+    expect(heading).toBeInTheDocument()
+
+  })
+})

__tests__/ImageSvg.test.tsx

@@ -0,0 +1,16 @@
+import '@testing-library/jest-dom'
+import { render, screen } from '@testing-library/react'
+import ImageSvg from '../src/components/ImageSvg'
+import React from 'react'
+
+describe('Component ImageSvg', () => {
+  it('Should return ImageSvg component.', () => {
+    render(<ImageSvg image='/eli.jpeg' linkedin='linkedin.com'/>)
+
+    const backgroundImageDiv = screen.getByTestId('testId-image') as HTMLImageElement;;
+
+    expect(backgroundImageDiv).toBeInTheDocument();
+    expect(backgroundImageDiv).toHaveClass('rounded-[40px] w-48 md:w-[240px] lg:w-70 group-hover:opacity-10');
+    expect(backgroundImageDiv.src).toEqual('http://localhost/_next/image?url=%2Feli.jpeg&w=256&q=75');
+  })
+})

__tests__/Index.test.tsx

@@ -0,0 +1,15 @@
+import '@testing-library/jest-dom'
+import { render, screen } from '@testing-library/react'
+import Home from '../src/pages/index'
+import React from 'react'
+
+describe('Page index', () => {
+  it('Should return initial cards in the page.', () => {
+    render(<Home />)
+
+    const heading = screen.getByText('EXPLORANDO A CATEGORIA')
+
+    expect(heading).toBeInTheDocument()
+
+  })
+})

__tests__/Student.test.tsx

@@ -0,0 +1,25 @@
+import '@testing-library/jest-dom'
+import { render, screen } from '@testing-library/react'
+import Student from '../src/components/Student'
+import StudentReverse from '../src/components/StudentReverse'
+import { User } from './mock/User'
+import React from 'react'
+
+describe('Student component', () => {
+  it('Should return Student in the component.', () => {
+    render(<Student image='/eli.jpeg' student_user={User}/>)
+
+    const name = screen.getAllByText('Pedro');
+
+    expect(name[0]).toBeInTheDocument();
+
+  })
+  it('Should return StudentReverse in the component.', () => {
+    render(<StudentReverse image='/eli.jpeg' student_user={User}/>)
+
+    const name = screen.getAllByText('Pedro');
+
+    expect(name[0]).toBeInTheDocument();
+  })
+
+})