O que React para Phoenix LiveView faz?
Reproduza a interface React solicitada enquanto integra com a arquitetura do aplicativo de destino. Trate a fonte como referência visual e comportamental; siga requisitos explícitos do destino quando divergirem. Descubra convenções a partir do código, sem assumir um framework React, sistema CSS, biblioteca de componentes ou versão do Phoenix.
Estabelecer escopo e convenções
- Leia as instruções aplicáveis do repositório e a documentação relevante em ambos os projetos. Localize o ponto de entrada React, o aplicativo de destino e a rota ou componente solicitado. Os projetos podem estar em repositórios separados ou compartilhar um workspace.
- Inspecione manifests e implementações existentes para identificar estilos, componentes, fontes, temas, assets, roteamento, autenticação, acesso a dados e integração com JavaScript. Verifique se já existe uma rota, porta parcial, componente ou hook antes de criar um novo.
- Mantenha o escopo na interface atribuída e no comportamento necessário. Um mockup estático não requer novos recursos de backend; uma migração funcional requer integrações reais ou lacunas divulgadas explicitamente.
- Respeite as permissões de teste e ferramentas do usuário. Inspeção da fonte, inspeção de referência, preparação de preview, testes automatizados e QA no navegador são atividades distintas; não assuma que todas são autorizadas.
1. Inspecionar a fonte
Leia css-extraction.md. Rastreie a página, os filhos visualmente significativos, estilos, variantes de componente, assets e lógica de estado. Estabeleça:
- Layout, regras responsivas, tipografia, temas, imagens e movimento.
- Estilos efetivos após defaults de bibliotecas, sobrescritas locais, props condicionais e a cascata CSS.
- Navegação, formulários, sobreposições, carregamento, permissões, mutações, persistência e caminhos de recuperação relevantes ao escopo.
Registre um mapa de migração compacto: componente fonte → componente destino, dados/ação fonte → contexto/evento destino, token fonte → equivalente destino. Separe comportamento observado de suposições e valores de runtime não resolvidos.
Para uma solicitação de análise, entregue os resultados e pare. Para uma implementação autorizada, aponte lacunas ou desvios materiais brevemente e continue. Pergunte apenas quando uma escolha não resolvida alterar materialmente o escopo, comportamento ou fidelidade; não exija confirmação separada para decisões de tradução rotineiras.
2. Implementar no Phoenix
Leia liveview-conventions.md. Reutilize componentes de destino, layouts, contextos, autorização, tokens, assets e hooks onde eles reproduzam o resultado necessário.
- Traduza a saída renderizada e o comportamento, e não a sintaxe React ou nomes de componentes mecanicamente.
- Preserve valores visuais, regras responsivas, estados e semântica. Não substitua uma fonte, ícone, componente ou animação vagamente similar sem justificativa.
- Aplique requisitos explícitos do destino de forma consistente e explique desvios visíveis. Nunca carregue restrições de fonte, provedor de armazenamento, estrutura de rota ou nomenclatura de outro projeto para a porta.
- Mantenha estado pertencente ao servidor no LiveView e contextos; use CSS ou mecanismos existentes do cliente para comportamento visual local. Adicione hooks apenas para capacidades do navegador que precisem deles.
- Complete os estados aplicáveis de carregamento, vazio, validação, pendente, sucesso, falha, nova tentativa, permissão e recuperação. Preserve a entrada do usuário em caso de falha e evite que ações repetidas corrompam dados.
3. Revisar e entregar
Revise as alterações em relação ao mapa de migração, incluindo variantes responsivas/tema, autorização, manipulação de eventos, acessibilidade e limpeza de ciclo de vida. Verifique se os assets necessários e componentes referenciados existem.
Use comandos de verificação do projeto e ferramentas de runtime apenas quando permitido. Prepare um preview ao vivo quando autorizado. Nunca afirme verificação de runtime, visual ou de teste apenas a partir da inspeção da fonte.
Entregue de forma breve: o que foi portado, desvios materiais, mocks ou integrações ausentes, verificação realizada ou omitida, e estados que o usuário deve exercitar. Se uma dependência bloquear a conclusão, identifique-a concretamente e termine o trabalho independente dentro do escopo.