feat: refactor de UI/UX (fase 1) - foundations, App Shell, Storybook #37

Merged

jhony75 merged 6 commits from feature/frontend-ux-refactor-fase1 into develop 2026-09-08 02:53:23 -03:00

Conversation 0 Commits 6 Files changed 83 +6643 -1931

jhony75 commented 2026-09-08 01:46:09 -03:00

Owner

Copy link

Depende do PR #36 (ainda nao mergeado) - esta branch parte de feature/backlog-tecnico-fase1, nao de develop, porque StatusBadge ja usa STEP_STATUS_LABELS (vocabulario unico de outcome) introduzido la. Depois que o #36 for mergeado, o base deste PR pode ser trocado pra develop.

Refactor de UI/UX do frontend (completo)

Mapa completo do frontend atual + estrategia foi discutido antes de qualquer codigo. Ordem seguida: A. App Shell -> B. RunDetail -> C. Library -> D. ReportDetail -> E/F/G/H. Issue/Requirement/Technical Validation/Traceability/Analytics.

A. Foundations (SCSS) + App Shell (Sidebar) + Storybook

• styles/tokens/ + styles/foundations/ + globals.scss substituem index.css. Tokens semanticos novos convivem com os nomes antigos (alias 1:1) - codigo ainda nao tocado continua funcionando sem mudanca.
• Sidebar estavel (fundo teal escuro, position: sticky) substitui o menu horizontal: Overview / Testing (Library, Plans, Runs) / Quality (Issues, Requirements, Traceability) / EEG (Reports, Technical Validation) / Analytics / Dev Tools (so em development). "New Report"/"New Run" saem da nav global - cada lista ja tinha seu botao de criar.
• Overview (tela nova): v1 leve com dados que ja existem hoje (/api/metrics, /api/runs, /api/issues), zero grafico novo.
• Storybook (React+Vite, addon-a11y + addon-docs) documentando os componentes novos.
• Nenhuma rota mudou, nenhum componente de tela existente foi alterado alem do App.tsx.

B. RunDetail -> workspace de execucao

• Progresso primeiro: "X% completo" + barra + contagem por outcome, antes de qualquer metadata.
• Secao "Falhas" dedicada (so aparece quando ha algo pra triar).
• Metadata do run e "Adicionar cenario" viram paineis fechados por padrao - edicao/adicionar viram acoes explicitas.
• Acao destrutiva (excluir run) vai pro menu "...".
• Bug real encontrado e corrigido na verificacao visual: sidebar com corte visual ao rolar paginas altas - trocado pra position: sticky.

C. Library -> master/detail

• Lista compacta a esquerda (nome + versao), painel de detalhe a direita com Tabs (Passos/Historico/Execucoes) em vez do acordeao grande anterior.
• Acoes destrutivas atras do menu "..."; "+ Nova suite"/"+ Novo cenario" atras de toggles.

D. ReportDetail -> leitura primeiro, edicao explicita

• Tabs Overview/Tests/Findings/Evidence; campos do report so viram inputs apos "Editar", Cancelar descarta o rascunho sem chamar a API.
• Gerenciar cenarios/achados/anexos continua sempre disponivel dentro de cada aba - gestao de colecao, nao "edicao do report".
• Exportacoes (4 variantes) + Duplicar + Excluir vao pro menu "...", com "Baixar PDF" como unica acao primaria visivel.

E/F/G. IssueDetail, RequirementDetail, TechnicalValidationDetail -> mesmo padrao

• Os tres tinham o mesmo problema do ReportDetail antigo: mega-form sempre editavel. Agora abrem em leitura, com "Editar"/"Cancelar"/"Salvar alteracoes" explicitos.
• Gerenciar colecoes relacionadas (cenarios/achados vinculados ao requisito, itens do checklist da validacao, evidencias) continua sempre disponivel, fora do toggle de edicao.
• Acoes destrutivas (Apagar achado / Excluir requisito / Excluir validacao) migram pro menu "..."; "Voltar" sai dos headers - a navegacao ja e coberta pela Sidebar persistente.
• Extraido o componente ReadField (label/valor no modo leitura), reusado nas 4 telas que tem esse padrao.
• Listas puras (Issues, Requirements, Technical Validations) ficam como estao, consistentes com Runs/Plans/Reports, que tambem nao entraram neste refactor - o problema real estava nas paginas de detalhe, nao nas listas.

G/H. Traceability e Analytics (Metrics)

• PageHeader leve pra wayfinding, mesmo tratamento do Overview (sao paginas de relatorio/leitura, nao listas CRUD). Sem mudanca de logica.
• Analytics: os 5 cards de KPI manuais viram o componente StatCard compartilhado, em vez de markup duplicado.

Componentes novos (construidos so quando uma tela precisou)

Button, Badge, StatusBadge, Card, StatCard, PageHeader, EmptyState, ProgressBar, DropdownMenu, Tabs, ReadField - cada um com .tsx/.scss/.test.tsx(/.stories.tsx).

Verificacao

87 testes de frontend passando, typecheck/lint/build limpos a cada commit. Todas as telas verificadas manualmente no navegador contra dados reais (Overview, Reports, Library, Issues/IssueDetail, Requirements/RequirementDetail, Technical Validation, Traceability, Analytics, RunDetail), incluindo os fluxos de criar/editar/excluir e os menus "...".

🤖 Gerado com Claude Code

**Depende do PR #36** (ainda nao mergeado) - esta branch parte de `feature/backlog-tecnico-fase1`, nao de `develop`, porque `StatusBadge` ja usa `STEP_STATUS_LABELS` (vocabulario unico de outcome) introduzido la. Depois que o #36 for mergeado, o base deste PR pode ser trocado pra `develop`. ## Refactor de UI/UX do frontend (completo) Mapa completo do frontend atual + estrategia foi discutido antes de qualquer codigo. Ordem seguida: **A. App Shell -> B. RunDetail -> C. Library -> D. ReportDetail -> E/F/G/H. Issue/Requirement/Technical Validation/Traceability/Analytics**. ### A. Foundations (SCSS) + App Shell (Sidebar) + Storybook - `styles/tokens/` + `styles/foundations/` + `globals.scss` substituem `index.css`. Tokens semanticos novos convivem com os nomes antigos (alias 1:1) - codigo ainda nao tocado continua funcionando sem mudanca. - Sidebar estavel (fundo teal escuro, `position: sticky`) substitui o menu horizontal: Overview / Testing (Library, Plans, Runs) / Quality (Issues, Requirements, Traceability) / EEG (Reports, Technical Validation) / Analytics / Dev Tools (so em development). "New Report"/"New Run" saem da nav global - cada lista ja tinha seu botao de criar. - Overview (tela nova): v1 leve com dados que ja existem hoje (`/api/metrics`, `/api/runs`, `/api/issues`), zero grafico novo. - Storybook (React+Vite, addon-a11y + addon-docs) documentando os componentes novos. - Nenhuma rota mudou, nenhum componente de tela existente foi alterado alem do `App.tsx`. ### B. RunDetail -> workspace de execucao - Progresso primeiro: "X% completo" + barra + contagem por outcome, antes de qualquer metadata. - Secao "Falhas" dedicada (so aparece quando ha algo pra triar). - Metadata do run e "Adicionar cenario" viram paineis fechados por padrao - edicao/adicionar viram acoes explicitas. - Acao destrutiva (excluir run) vai pro menu "...". - Bug real encontrado e corrigido na verificacao visual: sidebar com corte visual ao rolar paginas altas - trocado pra `position: sticky`. ### C. Library -> master/detail - Lista compacta a esquerda (nome + versao), painel de detalhe a direita com Tabs (Passos/Historico/Execucoes) em vez do acordeao grande anterior. - Acoes destrutivas atras do menu "..."; "+ Nova suite"/"+ Novo cenario" atras de toggles. ### D. ReportDetail -> leitura primeiro, edicao explicita - Tabs Overview/Tests/Findings/Evidence; campos do report so viram inputs apos "Editar", Cancelar descarta o rascunho sem chamar a API. - Gerenciar cenarios/achados/anexos continua sempre disponivel dentro de cada aba - gestao de colecao, nao "edicao do report". - Exportacoes (4 variantes) + Duplicar + Excluir vao pro menu "...", com "Baixar PDF" como unica acao primaria visivel. ### E/F/G. IssueDetail, RequirementDetail, TechnicalValidationDetail -> mesmo padrao - Os tres tinham o mesmo problema do ReportDetail antigo: mega-form sempre editavel. Agora abrem em leitura, com "Editar"/"Cancelar"/"Salvar alteracoes" explicitos. - Gerenciar colecoes relacionadas (cenarios/achados vinculados ao requisito, itens do checklist da validacao, evidencias) continua sempre disponivel, fora do toggle de edicao. - Acoes destrutivas (Apagar achado / Excluir requisito / Excluir validacao) migram pro menu "..."; "Voltar" sai dos headers - a navegacao ja e coberta pela Sidebar persistente. - Extraido o componente `ReadField` (label/valor no modo leitura), reusado nas 4 telas que tem esse padrao. - Listas puras (Issues, Requirements, Technical Validations) ficam como estao, consistentes com Runs/Plans/Reports, que tambem nao entraram neste refactor - o problema real estava nas paginas de detalhe, nao nas listas. ### G/H. Traceability e Analytics (Metrics) - PageHeader leve pra wayfinding, mesmo tratamento do Overview (sao paginas de relatorio/leitura, nao listas CRUD). Sem mudanca de logica. - Analytics: os 5 cards de KPI manuais viram o componente `StatCard` compartilhado, em vez de markup duplicado. ### Componentes novos (construidos so quando uma tela precisou) `Button`, `Badge`, `StatusBadge`, `Card`, `StatCard`, `PageHeader`, `EmptyState`, `ProgressBar`, `DropdownMenu`, `Tabs`, `ReadField` - cada um com `.tsx`/`.scss`/`.test.tsx`(`/.stories.tsx`). ## Verificacao 87 testes de frontend passando, typecheck/lint/build limpos a cada commit. Todas as telas verificadas manualmente no navegador contra dados reais (Overview, Reports, Library, Issues/IssueDetail, Requirements/RequirementDetail, Technical Validation, Traceability, Analytics, RunDetail), incluindo os fluxos de criar/editar/excluir e os menus "...". 🤖 Gerado com [Claude Code](https://claude.com/claude-code)

jhony75 added 2 commits 2026-09-08 01:46:09 -03:00

feat: foundations SCSS + App Shell (sidebar) + primeiras primitivas de design system ... 9c8d17262e

Primeiro passo do refactor de UI/UX: infraestrutura + navegacao, sem tocar
telas de dominio ainda.

- styles/tokens + styles/foundations + globals.scss substituem index.css.
  Tokens semanticos novos (--color-bg-page, --color-text-primary, etc.)
  convivem com os nomes antigos (--bg, --ink, --signal...), redefinidos como
  alias 1:1 dos novos - o codigo existente que ainda referencia os nomes
  antigos via style={{}} inline (72+ ocorrencias) continua funcionando sem
  mudanca, migra tela por tela conforme o refactor avanca.
- AppShell/Sidebar substitui o menu horizontal (.topbar/NavDropdown) por uma
  sidebar estavel: Overview / Testing (Library, Plans, Runs) / Quality
  (Issues, Requirements, Traceability) / EEG (Reports, Technical Validation)
  / Analytics / Dev Tools (so em development, mesmo gate de antes). "New
  Report"/"New Run" saem da navegacao global - cada lista ja tem seu proprio
  botao de criar.
- Overview (nova tela): v1 leve, só com dados que ja existem hoje
  (metrics/runs/issues) - 3 KPIs, "precisa de atencao" e "runs recentes".
  Sem grafico novo. Requirement Coverage/Risk Hotspots ficam pra quando o
  backend tiver a agregacao (fora de escopo deste pass).
- Primitivas: Button, Badge, StatusBadge, Card, StatCard (com skeleton de
  loading), PageHeader, EmptyState - cada uma com .tsx/.scss/.test.tsx.

Nenhuma rota mudou, nenhuma funcionalidade foi removida - todos os 17
componentes de tela existentes continuam intactos, so passaram a renderizar
dentro do AppShell em vez do topbar antigo. Verificado manualmente no
navegador (Reports/Overview/Library/Requirements).

71 testes de frontend passando (22 novos), typecheck/lint/build limpos.

feat: adiciona Storybook para documentar componentes de design system ... d5a86f554e

Setup React+Vite (Storybook 10), com addon-a11y (acessibilidade desde o
inicio) e addon-docs. Removi do setup padrao do instalador:

- integracao addon-vitest/@vitest/browser (rodaria as stories como teste via
  Chromium real dentro do `npm test` normal) - risco desnecessario pro CI,
  que nao tem as dependencias de sistema do Chromium headless preparadas;
  Storybook continua funcionando pra visualizar/documentar componentes sem
  isso, só nao testa automaticamente por enquanto.
- addon-mcp e @chromatic-com/storybook - nao usados, dependencia de servico
  externo (Chromatic) sem necessidade concreta agora.
- boilerplate generico de exemplo (src/stories/Button|Header|Page) - trocado
  por stories reais dos componentes que ja existem: StatusBadge (7 outcomes),
  StatCard (default/trend/warning/loading/sem dado), EmptyState (zero
  resultados/com acao/erro/texto longo), Badge, Button, PageHeader, Card.

npm run storybook / npm run build-storybook validados manualmente.

jhony75 added 1 commit 2026-09-08 02:02:02 -03:00

feat: RunDetail vira workspace de execucao (progress-first, falhas primeiro) ... 15dc187764

Prioridade B do refactor - transforma o RunDetail de formulario-sempre-aberto
pra workspace de execucao:

- Header: nome do run (leitura), badge de status, "..." com a acao
  destrutiva (excluir run) - antes era um botao solto competindo com o resto.
- Progresso primeiro: "X% completo" + barra + "N / M passos", com contagem
  por outcome (Passou/Falhou/Bloqueado/...) logo abaixo - substitui a antiga
  listagem de metadata como primeira coisa da tela.
- Secao "Falhas" dedicada, só aparece quando ha algo pra triar - mesmo passo
  falho continua tambem na lista completa de cenarios (nao remove
  funcionalidade, so prioriza visualmente).
- Metadata do run (plan/build/ambiente/status/executado por + nome editavel)
  vai pra um painel "Editar detalhes do run" fechado por padrao - edicao
  agora e uma acao explicita, nao o estado inicial da tela.
- Adicionar cenario (biblioteca/HubSpot/avulso) tambem fica atras de um
  toggle "+ Adicionar cenario" em vez de sempre visivel.

Nenhuma funcionalidade foi removida: os mesmos testes de edicao/conflito
continuam passando, so precisaram abrir o painel de detalhes primeiro (esse
e exatamente o comportamento pedido - "edicao acontece explicitamente").

Duas primitivas novas, construidas so agora que uma tela realmente precisou:
- ProgressBar: barra simples com tone brand/danger.
- DropdownMenu: menu "..." pra acao secundaria/destrutiva, fecha ao clicar
  fora (mesmo padrao do antigo NavDropdown).

Corrigido durante a verificacao visual: a sidebar (position:static, esticada
via flex min-height/align-items:stretch) tinha um corte visual real ao rolar
paginas mais altas que a viewport, apesar da altura calculada estar correta
no DOM - troquei para position:sticky (padrao mais robusto pra sidebar de
app shell, também mantém a navegação visível durante o scroll do conteúdo).

80 testes de frontend passando (9 novos), typecheck/lint/build limpos.
Verificado manualmente contra um run real (5 passos, 3 outcomes diferentes)
via API + navegador.

jhony75 added 1 commit 2026-09-08 02:09:44 -03:00

feat: Library vira master/detail em vez de acordeao grande ... 7bff204e50

Prioridade C do refactor - lista compacta a esquerda (suites agrupadas +
"sem suite"), painel de detalhe a direita:

- Linha da lista mostra so nome + versao - public_id, descricao, tags,
  passos, historico e execucoes saem do acordeao expandido e vao pro painel
  de detalhe, organizados em Tabs (Passos/Historico/Execucoes) - grupos
  independentes de informacao, mesmo padrao recomendado pro refactor.
- Acoes destrutivas (excluir suite, excluir cenario) vao pra um menu "..."
  em vez de botao solto competindo com Duplicar/.feature/etc.
- "+ Nova suite" e "+ Novo cenario" ficam atras de toggles em vez de sempre
  visiveis - preparado tambem pro terreno de Shared Steps/Templates futuros
  (o painel de detalhe e o lugar natural pra eles aparecerem depois).
- Duplicar um cenario ou criar um novo agora seleciona automaticamente o
  resultado no painel de detalhe, em vez de só atualizar a lista.

Nenhuma funcionalidade removida: criar suite, criar cenario (em suite ou
avulso), exportar .feature, duplicar, excluir (suite e cenario), historico
de versoes e historico de execucao (com o aviso de instabilidade) - tudo
continua existindo, so reorganizado.

Tabs (novo Core UI): usado aqui pela primeira vez, generico o bastante pra
qualquer tela futura com grupos independentes de conteudo pra mesma entidade.

83 testes de frontend passando (Library.test.tsx reescrito pro novo fluxo
selecionar-depois-ver-detalhe; Tabs.test.tsx novo). Verificado manualmente
no navegador contra a biblioteca real (9 cenarios): selecionar, trocar tabs,
abrir o menu "..." com Duplicar/Excluir.

jhony75 added 1 commit 2026-09-08 02:21:24 -03:00

feat: ReportDetail vira leitura-primeiro com abas e edicao explicita ... ca1a1525b3

Remove o comportamento de mega-form sempre editavel: a tela abre em modo
leitura (Overview/Tests/Findings/Evidence), com edicao dos campos do
report so apos clicar em "Editar". Mesmo padrao ja validado em
RunDetail/Library (PageHeader + DropdownMenu para acoes secundarias,
Tabs para grupos de informacao independentes). Nenhum handler ou
endpoint mudou - so a organizacao da tela.

jhony75 added 1 commit 2026-09-08 02:35:18 -03:00

feat: leitura-primeiro + edicao explicita em Issue/Requirement/TechnicalValidation ... 14f8864224

Aplica o mesmo padrao ja usado em Report/Run/Library aos detalhes de
Achado, Requisito e Validacao Tecnica: os campos proprios da entidade
abrem em modo leitura e so viram formulario apos clicar em "Editar";
Cancelar descarta o rascunho. Gerenciar colecoes relacionadas (cenarios
vinculados, achados vinculados, itens do checklist, evidencias) continua
sempre disponivel, fora do toggle de edicao — mesmo raciocinio ja usado
em ReportDetail.

Extrai o helper ReadField (label/valor no modo leitura) que ate agora
so existia local em ReportDetail, para reuso nas quatro telas.

Acoes destrutivas (Apagar/Excluir) migram para o menu "..." via
DropdownMenu, com "Voltar" removido dos headers — a navegacao ja e
coberta pela Sidebar persistente, mesma decisao tomada em RunDetail e
Library.

PageHeader leve tambem em Traceability e Analytics (Metrics), como
paginas de relatorio/leitura equivalentes ao Overview — sem mudanca de
logica. Analytics ganha StatCard no lugar dos cards de KPI manuais.
Listas puras (Issues, Requirements, Technical Validations) ficam como
estao, consistentes com Runs/Plans/Reports, que tambem nao entraram
neste refactor.

Nenhum handler, endpoint ou contrato de API mudou.

jhony75 changed target branch from feature/backlog-tecnico-fase1 to develop 2026-09-08 02:37:23 -03:00

jhony75 merged commit 1e634bc0fc into develop 2026-09-08 02:53:23 -03:00

jhony75 referenced this pull request from a commit 2026-09-08 02:53:24 -03:00

Merge pull request 'feat: refactor de UI/UX (fase 1) - foundations, App Shell, Storybook' (#37) from feature/frontend-ux-refactor-fase1 into develop

jhony75 referenced this pull request from a commit 2026-09-08 03:11:38 -03:00

feat: fecha gaps do refactor de UI/UX (nav Automation + componentes de severidade/cobertura)

jhony75 referenced this pull request 2026-09-08 03:11:54 -03:00

feat: fecha gaps do refactor de UI/UX (nav Automation + componentes de severidade/cobertura) #38

Sign in to join this conversation.

Reviewers

No reviewers

Labels

Clear labels

No items

No labels

Milestone

Clear milestone

No items

No milestone

Projects

Clear projects

No items

No project

Assignees

Clear assignees

No assignees

1 participant

Notifications

Subscribe

Due date

The due date is invalid or out of range. Please use the format "yyyy-mm-dd".

No due date set.

Dependencies

No dependencies set

Reference

jhony75/eeg-qa!37

No description provided.