diff --git a/.eslintrc.json b/.eslintrc.json new file mode 100644 index 0000000..bffb357 --- /dev/null +++ b/.eslintrc.json @@ -0,0 +1,3 @@ +{ + "extends": "next/core-web-vitals" +} diff --git a/.github/workflows/nextjs.yml b/.github/workflows/nextjs.yml new file mode 100644 index 0000000..3638f6d --- /dev/null +++ b/.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 diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..88b624a --- /dev/null +++ b/.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 diff --git a/.stylelintrc.json b/.stylelintrc.json new file mode 100644 index 0000000..c2f7f19 --- /dev/null +++ b/.stylelintrc.json @@ -0,0 +1,6 @@ +{ + "extends": "stylelint-config-standard", + "plugins": [], + "ignoreFiles": ["**/*.html", "**/*.js"] + } + \ No newline at end of file diff --git a/README.md b/README.md index 88bb259..4330b1b 100644 --- a/README.md +++ b/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. diff --git a/__tests__/AboutPhrase.test.tsx b/__tests__/AboutPhrase.test.tsx new file mode 100644 index 0000000..0185ec3 --- /dev/null +++ b/__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() + + const heading = screen.getByText('Pedro') + + expect(heading).toBeInTheDocument() + + const phrase = screen.getByText('cheguei') + + expect(phrase).toBeInTheDocument() + + }) +}) \ No newline at end of file diff --git a/__tests__/Card.test.tsx b/__tests__/Card.test.tsx new file mode 100644 index 0000000..e24c340 --- /dev/null +++ b/__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() + + 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)' }); + + }) +}) \ No newline at end of file diff --git a/__tests__/Footer.test.tsx b/__tests__/Footer.test.tsx new file mode 100644 index 0000000..4c437a2 --- /dev/null +++ b/__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(