WhatsApp Modal Component

Um componente React de modal do WhatsApp com funcionalidades completas de chat e filtros, construído com TypeScript e Tailwind CSS.

Características

• 🎨 Interface idêntica ao WhatsApp
• 📱 Totalmente responsivo (mobile e desktop)
• 🔍 Sistema de filtros (Todas as conversas / Não lidas)
• 💬 Chat funcional com envio de mensagens
• 🔔 Contador de mensagens não lidas
• ⚡ Construído com React 19 e TypeScript
• 🎯 Componentes acessíveis com Radix UI
• 🎨 Estilizado com Tailwind CSS

Instalação

npm install whatsapp-modal-component

Importação de Estilos

Para que o componente funcione corretamente com todos os estilos, você precisa importar o arquivo CSS:

// Importe os estilos do componente
import 'whatsapp-modal-component/dist/style.css';

// Em seguida, importe o componente
import { WhatsAppModal } from 'whatsapp-modal-component';

Importante: Certifique-se de importar o arquivo CSS antes de usar o componente para garantir que todos os estilos sejam aplicados corretamente.

Compatibilidade com Projetos Legados

Se você está usando este componente em um projeto React 18 legado e o modal está perdendo suas margens, consulte o arquivo LEGACY_COMPATIBILITY.md para soluções específicas.

Solução rápida para projetos legados:

<WhatsAppModal legacyMode={true} />

Uso Básico

import { WhatsAppModal } from 'whatsapp-modal-component';
import type { Contact } from 'whatsapp-modal-component';

const contacts: Contact[] = [
  {
    id: '1',
    name: 'João Silva',
    lastMessage: 'Oi, tudo bem?',
    time: '14:30',
    avatar: 'JS',
    unread: 2
  },
  {
    id: '2',
    name: 'Maria Santos',
    lastMessage: 'Obrigada pela ajuda!',
    time: '13:45',
    avatar: 'MS'
  }
];

function App() {
  const handleContactSelect = (contact: Contact) => {
    console.log('Contato selecionado:', contact);
  };

  return (
    <WhatsAppModal
      trigger={<button>Abrir Chat</button>}
      contacts={contacts}
      onContactSelect={handleContactSelect}
    />
  );
}

Props

WhatsAppModalProps

| Prop | Tipo | Obrigatório | Descrição | |------|------|-------------|----------| | trigger | React.ReactNode | Não | Elemento que abrirá o modal | | contacts | Contact[] | Não | Lista de contatos (usa dados padrão se não fornecido) | | onContactSelect | (contact: Contact) => void | Não | Callback executado quando um contato é selecionado |

Contact Interface

interface Contact {
  id: string;
  name: string;
  lastMessage: string;
  time: string;
  avatar: string;
  unread?: number; // Número de mensagens não lidas
}

Message Interface

interface Message {
  id: string;
  text: string;
  time: string;
  sender: 'me' | 'other';
  status?: 'sent' | 'delivered' | 'read';
}

Funcionalidades

Filtros de Conversa

O componente inclui dois filtros:

• Tudo: Exibe todas as conversas
• Não lidas: Exibe apenas conversas com mensagens não lidas (unread > 0)

Responsividade

• Desktop: Sidebar sempre visível ao lado do chat
• Mobile: Sidebar desliza sobre o conteúdo com overlay
• Transições: Animações suaves entre estados

Chat Funcional

• Envio de mensagens em tempo real
• Status de mensagens (enviada, entregue, lida)
• Scroll automático para novas mensagens
• Interface de digitação com botões de ação

Dependências

Este componente requer as seguintes dependências peer:

{
  "react": "^18.0.0 || ^19.0.0",
  "react-dom": "^18.0.0 || ^19.0.0"
}

Dependências Incluídas

• @radix-ui/react-dialog - Modal acessível
• @radix-ui/react-slot - Composição de componentes
• lucide-react - Ícones
• class-variance-authority - Variantes de classe
• clsx - Utilitário de classes condicionais
• tailwind-merge - Merge de classes Tailwind

Configuração do Tailwind CSS

Certifique-se de que seu projeto tenha o Tailwind CSS configurado. Se necessário, adicione o caminho dos componentes da biblioteca:

// tailwind.config.js
module.exports = {
  content: [
    // ... seus caminhos existentes
    './node_modules/whatsapp-modal-component/dist/**/*.{js,ts,jsx,tsx}'
  ],
  // ... resto da configuração
}

Exemplos Avançados

Com Estado Personalizado

import { useState } from 'react';
import { WhatsAppModal, type Contact } from 'whatsapp-modal-component';

function ChatApp() {
  const [contacts, setContacts] = useState<Contact[]>([
    {
      id: '1',
      name: 'Suporte Técnico',
      lastMessage: 'Como posso ajudar?',
      time: '09:00',
      avatar: 'ST',
      unread: 1
    }
  ]);

  const handleContactSelect = (contact: Contact) => {
    // Marcar como lida quando selecionada
    setContacts(prev => 
      prev.map(c => 
        c.id === contact.id 
          ? { ...c, unread: 0 }
          : c
      )
    );
  };

  return (
    <div className="p-4">
      <h1>Minha Aplicação</h1>
      <WhatsAppModal
        trigger={
          <button className="bg-green-500 text-white px-4 py-2 rounded">
            💬 Abrir Chat
          </button>
        }
        contacts={contacts}
        onContactSelect={handleContactSelect}
      />
    </div>
  );
}

Licença

MIT © Rafael Bastiani

Contribuição

Contribuições são bem-vindas! Por favor, abra uma issue ou pull request no repositório do GitHub.