UIComposer

UIComposer é uma extensão para VSCode que oferece uma experiência de desenvolvimento WYSIWYG (What You See Is What You Get) para componentes React TSX, permitindo visualizar os componentes em tempo real enquanto você codifica.

🚀 Funcionalidades

Visualização de Componentes

• Preview em tempo real dos componentes React TSX
• Atualização automática ao editar o código
• Três modos de visualização:
  • Painel lateral integrado
  • Visualização no editor (split view)
  • Visualização em aba separada
• CodeLens para fácil acesso ao preview a partir do editor

Suporte a Bibliotecas UI

UIComposer oferece suporte nativo para várias bibliotecas de UI populares:

• React puro - Para componentes React sem bibliotecas externas
• Tailwind CSS - Componentes com classes do Tailwind
• Shadcn/UI - Componentes baseados no Tailwind
• Material UI - Componentes com estilo Material Design
• Ant Design - Biblioteca de componentes empresariais

Manipulação de Props

• Define props de teste para seus componentes usando comentários especiais
• Formato simples de JSON para definir dados de teste
• Visualiza componentes com dados realistas sem precisar modificar o código

/** @preview-props {
  "texto": "Olá Mundo!",
  "cor": "blue", 
  "contador": 5,
  "usuario": {"nome": "João", "email": "joao@exemplo.com"},
  "ativo": true
} */
export function MeuComponente({ texto, cor, contador, usuario, ativo }) {
  // Seu componente usando as props
}

Teste Responsivo

• Presets de dispositivos para visualizar em tamanhos comuns (mobile, tablet, desktop)
• Dimensões personalizadas para testar tamanhos específicos de viewport
• Redimensionamento dinâmico para testar comportamento responsivo
• Ideal para desenvolver interfaces adaptáveis a diferentes tamanhos de tela

Tratamento de Erros

• Overlay de erros exibindo mensagens de erro claras
• Console de debug integrado
• Detecção inteligente de problemas comuns de renderização

Sistema de Licenciamento

• Período de trial de 7 dias para testar todas as funcionalidades
• Sistema de ativação seguro com armazenamento criptografado de chaves
• Mensagens claras sobre status da licença

📋 Requisitos

• VSCode 1.85.0 ou superior
• Arquivos TypeScript React (.tsx)

⚙️ Configurações

Esta extensão contribui com as seguintes configurações:

• uiComposer.uiLibrary: Selecione a biblioteca de UI para renderização
  • none: React puro (padrão)
  • tailwind: Tailwind CSS
  • shadcn: Shadcn/UI (Tailwind + componentes)

🔧 Instalação

1. Abra o VSCode
2. Pressione Ctrl+Shift+X (Windows/Linux) ou Cmd+Shift+X (Mac) para abrir a visualização de Extensões
3. Pesquise por "UIComposer"
4. Clique em Instalar

🔍 Como Usar

Visualização Básica

1. Abra um arquivo TSX contendo um componente React
2. Clique no ícone UIComposer na barra de atividades
3. O painel de preview será aberto, mostrando seu componente em tempo real
4. Faça alterações no código e veja o preview atualizar automaticamente

Usando Props de Teste

1. Adicione um comentário especial no formato /** @preview-props {...} */ no seu componente
2. Defina os valores das props em formato JSON dentro do comentário
3. O preview exibirá seu componente com as props definidas

Mudando a Biblioteca UI

1. Abra as configurações do VSCode (Ctrl+, ou Cmd+,)
2. Pesquise por "UIComposer"
3. Selecione a biblioteca de UI desejada no dropdown

Testando Layout Responsivo

1. No preview do componente, use o dropdown para selecionar um tamanho de dispositivo predefinido
2. Alternativamente, defina dimensões personalizadas nas caixas de entrada e clique em "Aplicar"
3. O componente será renderizado no tamanho de viewport selecionado
4. Você também pode redimensionar manualmente o contêiner arrastando suas bordas

📝 Notas de Lançamento

0.1.0

Lançamento inicial do UIComposer:

• Visualização básica de componentes
• Suporte para múltiplas bibliotecas UI
• Sistema de props via comentários
• Tratamento avançado de erros
• Sistema de trial/ativação
• Teste de layout responsivo com presets de dispositivos

🤝 Contribuições

Contribuições são bem-vindas! Sinta-se à vontade para enviar um Pull Request.

📄 Licença

Este projeto está licenciado sob a Licença MIT - veja o arquivo LICENSE para detalhes.