Adaptador Visual de Componente shadcn

# Adaptador Visual de Componente shadcn ## Objetivo Refatorar o componente `${component_name}` existente localizado em `${component_file_path}` para corresponder ao design visual, estrutura e comportamento do componente de referência disponível em: > ${install_command:bunx --bun shadcn@latest add accordion} ${reference_url:} ← opcional; deixe em branco se não houver página de documentação NÃO substitua a lógica de negócio, a interface de props existente ou os padrões de busca de dados. Preserve-os. Adapte apenas a camada visual: estrutura de marcação, nomes de classes, animações e atributos de acessibilidade. ## Etapa 1 - Analisar o Componente Existente Antes de escrever qualquer código: 1. Leia o código-fonte completo de `${component_file_path}`. 2. Mapeie: - Todas as props e seus tipos (interfaces TypeScript ou PropTypes). - Variáveis de estado internas (`useState`, `useReducer`, fatias Zustand, etc.). - Provedores de contexto ou hooks personalizados consumidos. - Componentes filhos renderizados e onde eles vivem. - Handlers de eventos e callbacks expostos ao pai. 3. Liste cada import - sinalize qualquer um que entrará em conflito ou poderá ser substituído pelo primitivo shadcn. Produza uma tabela de auditoria breve antes de tocar em qualquer código: | Item | Valor atual | Ação | |------|--------------|--------| | Props | ... | manter / renomear / remover | | Estado | ... | manter / migrar | | Contexto/Hooks | ... | manter / substituir | | Sub-componentes | ... | manter / substituir | | Dependências | ... | manter / instalar / remover | ## Etapa 2 - Resolução de Dependências Execute o comando de instalação diretamente: ${install_command} Após o comando ser concluído, os arquivos gerados aparecerão em ${components_dir:components/ui}/. Prossiga para a Etapa 3 usando esses arquivos. ## Etapa 3 - Revisar o Componente de Referência SE ${reference_url} for fornecido → busque-o e extraia a especificação visual como antes. SE ${reference_url} estiver em branco → leia os arquivos baixados pelo comando CLI na Etapa 2 e extraia as mesmas informações diretamente do código-fonte: - esquema de variantes cva - atributos data-state / data-disabled - classes de animação/transição - papéis ARIA e props - padrões de uso de cn() ## Etapa 4 - Refatorar o Componente Aplique a estrutura visual da Etapa 3 ao componente existente da Etapa 1. ### Regras: - ✅ Mantenha todos os nomes e tipos de props existentes, a menos que exista um equivalente shadcn direto. - ✅ Mantenha toda a busca de dados, lógica de negócio e callbacks. - ✅ Envolva os primitivos Radix usando `forwardRef` e espalhe `...props` para preservar a flexibilidade. - ✅ Use `cn()` para toda a mesclagem de className - nunca concatenação de strings. - ✅ Exporte sub-componentes compostos nomeados se o componente de referência os usar (por exemplo, `Accordion`, `AccordionItem`, `AccordionTrigger`, `AccordionContent`). - ❌ NÃO importe o arquivo shadcn gerado e o re-exporte - construa o primitivo inline no arquivo refatorado para manter a lógica co-localizada. - ❌ NÃO adicione classes Tailwind que não estejam presentes no componente de referência sem instrução explícita. ### Comportamento responsivo (`${responsive_breakpoints:sm md lg}`): Aplique classes responsivas mobile-first. Confirme se os breakpoints atuais em `tailwind.config.ts` correspondem à convenção do projeto. Se a referência usar container queries, instale `@tailwindcss/container-queries`. ## Etapa 5 - Provedores de Contexto e Hooks Se o componente de referência exigir um provedor de contexto (por exemplo, `ToastProvider`, `TooltipProvider`): 1. Verifique se ele já está montado em `${provider_file:app/layout.tsx}` ou `${provider_file:app/providers.tsx}`. 2. Se não estiver, adicione-o ao arquivo de layout apropriado. Forneça o diff exato. 3. Se um hook personalizado for necessário (por exemplo, `useToast`, `useDialog`), coloque-o em `${hooks_dir:hooks/}` e importe-o de lá. ## Etapa 6 - Perguntas de Esclarecimento (pergunte antes de gerar se desconhecido) Se qualquer um dos itens a seguir não puder ser determinado a partir do código existente, pergunte antes de escrever: 1. **Dados/props**: Qual formato de dados será passado? (Forneça um objeto de exemplo se útil.) 2. **Gerenciamento de estado**: O estado do componente é local ou gerenciado externamente (Zustand, Redux, React Query)? 3. **Assets**: Há imagens, logotipos ou ícones personalizados necessários não cobertos pelo lucide-react? 4. **Responsivo**: Qual é o layout esperado nos breakpoints `${responsive_breakpoints:sm md lg}`? 5. **Posicionamento**: Onde na árvore de rotas/layout do aplicativo este componente viverá? (Importante para o posicionamento do provedor de contexto.) ## Etapa 7 - Formato de Saída Forneça o resultado como: 1. **`${component_file_path}`** - arquivo completo do componente refatorado. 2. **`${components_dir:components/ui}/${shadcn_component_slug}.tsx`** - primitivo shadcn (apenas se necessário e não gerado pelo CLI). 3. **`lib/utils.ts`** - apenas se precisar ser criado ou atualizado. 4. **Diff de layout/provedor** - apenas se um provedor precisar ser adicionado. 5. Uma seção curta de **notas de migração** listando: - Dependências removidas - Props renomeadas (se houver) - Quaisquer etapas manuais necessárias (por exemplo, adicionar variáveis CSS ao `globals.css`) ## Variáveis CSS Tailwind (tokens de design shadcn) Confirme se `globals.css` contém as propriedades personalizadas CSS necessárias. Se o componente de referência usar tokens como `--radius`, `--background`, `--foreground`, `--primary`, `--ring`, acrescente as variáveis ausentes. Use o conjunto de tokens padrão shadcn para `${color_theme:zinc}` a menos que o projeto já defina um tema personalizado. ## Restrições - Framework: **${framework:Next.js 14+ App Router}** - Estilização: **Tailwind CSS ${tailwind_version:3}** apenas - sem estilos inline, sem módulos CSS, sem styled-components. - TypeScript: **modo estrito**. Todo código novo deve ser totalmente tipado. - Não faça upgrade ou downgrade de nenhuma versão de dependência existente, a menos que haja um conflito direto de peer.