CDB-108 feat: implementa página de Guia do Usuário com navegação sidebar e DARK MODE by mariana-lins · Pull Request #20 · CodeDontBlow/Tecsys-frontend

mariana-lins · 2025-11-24T00:03:15Z

Implementação da Página de Guia do Usuário e dark mode

Tipo de Pull Request:

Nova Funcionalidade (Feature)

Referência da Task

Jira/Ticket: CDB-108

Descrição das Alterações - Changelog

Criação da página de Guia do Usuário (UserGuide.jsx e UserGuide.module.css)
Adição de rota /user-guide no sistema de rotas
Implementação de sidebar de navegação com seções clicáveis
Criação de conteúdo explicativo completo sobre o sistema Descriptum:
- Visão Geral do sistema e suas funcionalidades
- Passo 1: Carregar Pedido (upload de PDF)
- Passo 2: Processar Pedido (extração automática)
- Passo 3: Editar Resultados (revisão e exportação)
- Banco de Dados (histórico, produtos, fornecedores e fabricantes)
Atualização do link "Guia de Uso" na Navbar para redirecionar à nova página
Adição de funcionalidade onClick no botão "Ver Guia de Uso" da Homepage
Implementação de design responsivo para diferentes tamanhos de tela
Criação de seção CTA (Call-to-Action) para iniciar o processo de extração
Centralização das regras de dark mode no arquivo dark-mode.css seguindo padrão do projeto

Instruções de Teste

Passos para testar:

Execute npm run dev para iniciar o servidor
Acesse http://localhost:5173 na homepage
Clique no botão "Ver Guia de Uso" ou no link "Guia de Uso" na Navbar
Verifique a navegação lateral (sidebar) clicando nas diferentes seções
Teste a rolagem suave entre seções
Alterne entre modo claro e escuro para validar os contrastes
Clique no botão "Começar a Extrair" no final da página
Teste a responsividade em diferentes tamanhos de tela

Resultado esperado:

Página de guia completa e funcional com todas as seções navegáveis
Navegação lateral destacando a seção ativa
Conteúdo bem estruturado com instruções claras e visuais
Bom contraste e legibilidade em ambos os modos (claro e escuro)
Todos os botões e links funcionando corretamente
Layout responsivo adaptando-se a diferentes dispositivos

Observações

A página foi desenvolvida seguindo o padrão de design existente no sistema
Todos os cards informativos, boxes de dicas e seções utilizam as variáveis CSS do tema
As regras de dark mode foram adicionadas ao arquivo centralizado dark-mode.css mantendo a organização do projeto
Futuras melhorias podem incluir:
- Adicionar vídeos tutoriais ou GIFs demonstrativos
- Implementar busca interna na documentação
- Adicionar FAQ (Perguntas Frequentes)
- Criar versão em outros idiomas (inglês/espanhol)

…no arquivo dark-mode.css

Copilot

Pull request overview

This pull request introduces a comprehensive User Guide page to help users navigate the Descriptum system, along with a complete dark mode implementation. The guide provides step-by-step instructions for the extraction workflow, from uploading PDFs to managing the database.

Key changes:

New UserGuide page component with fixed sidebar navigation and detailed instructional content
Full dark mode system with CSS styling and vanilla JavaScript toggle functionality
Updated navigation links and routes to access the new guide page

Reviewed changes

Copilot reviewed 9 out of 9 changed files in this pull request and generated 13 comments.

Show a summary per file

File	Description
src/pages/UserGuide/UserGuide.jsx	New user guide page component with sidebar navigation and comprehensive instructional sections
src/pages/UserGuide/UserGuide.module.css	Styling for the user guide page including layout, cards, and responsive design
src/styles/dark-mode.css	Complete dark mode CSS implementation with theme-specific styling for all components
src/scripts/darkModeToggle.js	Vanilla JavaScript for dark mode toggle button creation and theme management
src/routes.jsx	Added route configuration for the new user guide page
src/components/Navbar/Navbar.jsx	Updated navigation link to point to the user guide page
src/pages/Homepage/Homepage.jsx	Added onClick handler to navigate to user guide
src/main.jsx	Imported dark mode toggle script for initialization
src/index.css	Added import for dark mode CSS styles

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

src/pages/UserGuide/UserGuide.module.css

src/styles/dark-mode.css

src/pages/UserGuide/UserGuide.jsx

src/styles/dark-mode.css

src/scripts/darkModeToggle.js

src/pages/UserGuide/UserGuide.jsx

… UserGuide

Copilot

Pull request overview

Copilot reviewed 9 out of 9 changed files in this pull request and generated 4 comments.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

src/pages/UserGuide/UserGuide.jsx

src/styles/dark-mode.css

src/scripts/darkModeToggle.js

src/pages/UserGuide/UserGuide.jsx

Copilot

Pull request overview

Copilot reviewed 11 out of 11 changed files in this pull request and generated 3 comments.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

src/index.css

src/pages/UserGuide/UserGuide.jsx

src/styles/dark-mode.css

…arning for dark mode toggle button attempts

Copilot

Pull request overview

Copilot reviewed 11 out of 11 changed files in this pull request and generated 14 comments.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

src/pages/UserGuide/UserGuide.jsx

src/pages/Homepage/Homepage.module.css

src/pages/UserGuide/UserGuide.module.css

src/pages/UserGuide/UserGuide.jsx

src/pages/UserGuide/UserGuide.module.css

src/scripts/darkModeToggle.js

src/styles/dark-mode.css

src/scripts/darkModeToggle.js

mariana-lins · 2025-11-24T01:54:25Z

📋 Resumo das Mudanças

Este PR inicialmente focava apenas na implementação da página de Guia do Usuário, mas durante o desenvolvimento integrou e refatorou todo o código de dark mode que estava na branch feat/dark-mode.

✨ Funcionalidades Implementadas

1. Página Guia do Usuário (`/user-guide`)

✅ Sidebar de navegação fixa com 5 seções
✅ Scroll automático ao clicar nos links da sidebar
✅ Indicador visual da seção ativa (debounce de 100ms)
✅ Layout responsivo (mobile/tablet/desktop)
✅ Integração completa com sistema de dark mode

2. Dark Mode (migrado e refatorado da branch `feat/dark-mode`)

✅ Toggle via botão injetado no navbar
✅ Persistência no localStorage
✅ Suporte completo a navegação por teclado (Enter/Space)
✅ Error handling robusto para localStorage
✅ Prevenção de FOUC (Flash of Unstyled Content)
✅ Estilos centralizados em dark-mode.css

🐛 Correções do Code Review (13+ issues resolvidos)

Performance & Memory

✅ useRef para timeoutId: Previne memory leaks em useEffect
✅ Debounce no scroll handler: Reduz chamadas de 100+/s para 3-5/s
✅ Removido universal selector: [data-theme="dark"] * removido de dark-mode.css

Acessibilidade (ARIA)

✅ aria-label adicionado em todos os links da sidebar
✅ aria-current="location": Indica seção ativa (antes usava "true"/"false" incorretamente)
✅ Navegação por teclado: Dark mode toggle responde a Enter e Space

CSS & Design System

✅ CSS Variables: Substituídas todas as cores hardcoded (#eff6ff, #fbbf24, etc) por variáveis do colors.css
✅ Variáveis indefinidas corrigidas: --background-primary, --text-primary, --royal-blue-* substituídas por variáveis reais
✅ !important removido: De .ctaSection no componente (mantido apenas em dark-mode.css para overrides globais)
✅ Estilos duplicados eliminados: Regras de Homepage movidas de dark-mode.css para Homepage.module.css

Error Handling & Robustez

✅ try-catch em localStorage: Previne crashes em modo privado/storage cheio
✅ console.warn: Logs informativos quando navbar não é encontrado ou localStorage falha
✅ Magic numbers eliminados: 20 → MAX_BUTTON_CREATION_ATTEMPTS com documentação

Bug Fixes

✅ Race condition resolvida: Removido setActiveSection() manual do scrollToSection (deixa o scroll handler gerenciar)
✅ Z-index hierarchy: Footer (200) agora aparece acima da sidebar (100)
✅ Ícones redundantes removidos: FontAwesome removido de listas numeradas (CSS counter já exibe números)

Refatoração

✅ Encapsulamento mantido: Estilos específicos de Homepage permanecem em Homepage.module.css mesmo no dark mode
✅ Cleanup de useEffect: Função de limpeza cancela timeout pendente ao desmontar componente

📦 Arquivos Modificados

Criados

src/pages/UserGuide/UserGuide.jsx
src/pages/UserGuide/UserGuide.module.css

Modificados (Dark Mode)

src/scripts/darkModeToggle.js - Error handling, keyboard support, constantes nomeadas
src/styles/dark-mode.css - Removido universal selector e estilos duplicados
src/pages/Homepage/Homepage.module.css - Adicionados estilos dark mode para <b> e <abbr>
src/components/Footer/Footer.module.css - Ajuste de z-index

Modificados (Integração)

src/routes.jsx - Rota /user-guide adicionada
src/components/Navbar/Navbar.jsx - Link para página do guia
src/pages/Homepage/Homepage.jsx - Handler onClick para navegação

🔄 Status da Branch `feat/dark-mode`

A branch feat/dark-mode contém os commits iniciais:

47ae36e - feat: implementação tema escuro
c60b031 - feat: correção dark mode styles

Todo esse código foi:

✅ Migrado para feat/user-guide-page
✅ Refatorado com correções do code review
✅ Testado e validado

Ação necessária: Fechar PR da branch feat/dark-mode pois todo o código está neste PR com melhorias aplicadas. OK - FEITO

✅ Validações Realizadas

✅ Build sem erros
✅ Dark mode funcional em todas as páginas
✅ Navegação da sidebar com scroll tracking
✅ Responsividade em mobile/tablet/desktop
✅ Acessibilidade (ARIA, keyboard navigation)
✅ Performance otimizada (debounce, sem memory leaks)
✅ Error handling robusto (localStorage, DOM queries)

- Restaura passagem de dados NCMs para TableEdit via navigation state - Restaura funcionalidade de cancelamento de processo no DragDrop - Reverte mudanças desnecessárias de formatação no Dropdown - Garante compatibilidade com integração backend existente

- Sincroniza TableEdit.jsx com integração backend completa - Branch foi criada antes dos commits de integração API - Garante funcionamento correto com backend na apresentação - Mantém todas funcionalidades: API calls, useEffect, location state

mariana-lins added 3 commits November 23, 2025 20:17

feat: implementação tema escuro

47ae36e

feat: correção dark mode styles para navbar, cards, e buttons

c60b031

feat CBD-108: página guia do usuário

3c7a961

mariana-lins requested a review from Copilot November 24, 2025 00:04

Copilot started reviewing on behalf of mariana-lins November 24, 2025 00:04 View session

CBD-108 refactor: centraliza regras de dark mode da página UserGuide …

4367c65

…no arquivo dark-mode.css

Copilot finished reviewing on behalf of mariana-lins November 24, 2025 00:09

Copilot AI reviewed Nov 24, 2025

View reviewed changes

CDB-108 fix: corrige problemas identificados no code review da página…

114561c

… UserGuide

mariana-lins requested a review from Copilot November 24, 2025 00:23

Copilot started reviewing on behalf of mariana-lins November 24, 2025 00:23 View session

Copilot finished reviewing on behalf of mariana-lins November 24, 2025 00:24

Copilot AI reviewed Nov 24, 2025

View reviewed changes

src/pages/UserGuide/UserGuide.jsx Outdated Show resolved Hide resolved

src/styles/dark-mode.css Outdated Show resolved Hide resolved

src/scripts/darkModeToggle.js Show resolved Hide resolved

src/pages/UserGuide/UserGuide.jsx Outdated Show resolved Hide resolved

mariana-lins added 2 commits November 23, 2025 21:43

CDB-108 fix: implementa correções do code review

ab4b03a

CDB-108 fix: corrige z-index do footer para ficar acima da sidebar

cbb2347

mariana-lins requested a review from Copilot November 24, 2025 00:49

Copilot started reviewing on behalf of mariana-lins November 24, 2025 00:50 View session

Copilot finished reviewing on behalf of mariana-lins November 24, 2025 00:51

Copilot AI reviewed Nov 24, 2025

View reviewed changes

src/index.css Show resolved Hide resolved

src/pages/UserGuide/UserGuide.jsx Show resolved Hide resolved

src/styles/dark-mode.css Outdated Show resolved Hide resolved

Copilot AI mentioned this pull request Nov 24, 2025

[WIP] WIP on user guide page improvements for CDB-108 #21

Closed

CodeDontBlow deleted a comment from Copilot AI Nov 24, 2025

CDB-108 feat: improve scroll handling and cleanup in UserGuide; add w…

b1ab7fb

…arning for dark mode toggle button attempts

mariana-lins requested a review from Copilot November 24, 2025 01:08

Copilot started reviewing on behalf of mariana-lins November 24, 2025 01:08 View session

Copilot finished reviewing on behalf of mariana-lins November 24, 2025 01:12

Copilot AI reviewed Nov 24, 2025

View reviewed changes

mariana-lins changed the title ~~CDB-108 Feat/user guide page~~ CDB-108 feat: implementa página de Guia do Usuário com navegação sidebar e dark mode Nov 24, 2025

mariana-lins mentioned this pull request Nov 24, 2025

CDB-113 Feat/dark mode #19

Closed

1 task

mariana-lins changed the title ~~CDB-108 feat: implementa página de Guia do Usuário com navegação sidebar e dark mode~~ CDB-108 feat: implementa página de Guia do Usuário com navegação sidebar e DARK MODE Nov 24, 2025

CDB-108 fix: implementação do review

cd026a5

mariana-lins added 2 commits November 23, 2025 23:23

Conversation

mariana-lins commented Nov 24, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Implementação da Página de Guia do Usuário e dark mode

Tipo de Pull Request:

Referência da Task

Descrição das Alterações - Changelog

Instruções de Teste

Observações

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

mariana-lins commented Nov 24, 2025

📋 Resumo das Mudanças

✨ Funcionalidades Implementadas

1. Página Guia do Usuário (/user-guide)

2. Dark Mode (migrado e refatorado da branch feat/dark-mode)

🐛 Correções do Code Review (13+ issues resolvidos)

Performance & Memory

Acessibilidade (ARIA)

CSS & Design System

Error Handling & Robustez

Bug Fixes

Refatoração

📦 Arquivos Modificados

Criados

Modificados (Dark Mode)

Modificados (Integração)

🔄 Status da Branch feat/dark-mode

✅ Validações Realizadas

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

mariana-lins commented Nov 24, 2025 •

edited

Loading

1. Página Guia do Usuário (`/user-guide`)

2. Dark Mode (migrado e refatorado da branch `feat/dark-mode`)

🔄 Status da Branch `feat/dark-mode`