@megamodel/register-form

Formulário de registro reutilizável e altamente customizável para sites da Mega Model, construído com React, Next.js e shadcn/ui.

✨ Features

• 🎯 Validação Robusta - Validação em tempo real com Zod
• 📱 Totalmente Responsivo - Interface adaptativa para mobile e desktop
• 🎨 Customizável - Integração completa com Tailwind CSS e shadcn/ui
• 🌐 i18n Ready - Mensagens em português brasileiro
• 📊 Analytics - Captura automática de UTM params e dados de dispositivo
• ♿ Acessível - Componentes com ARIA attributes
• 🔒 Type-Safe - Totalmente tipado com TypeScript
• 🚀 Performance - Bundle otimizado com code splitting

📦 Instalação

npm install @megamodel/register-form

🚀 Quick Start

1. Instale as dependências do shadcn/ui

npx shadcn@latest add button calendar command dialog drawer form input label popover select

2. Configure as variáveis de ambiente

NEXT_PUBLIC_API_URL=https://api.megamodel.com.br
NEXT_PUBLIC_API_TOKEN=seu-token-aqui
NEXT_PUBLIC_SITE_ID=123

3. Use o componente

import { MegaRegisterForm } from '@megamodel/register-form'

export default function RegisterPage() {
	return (
		<div className='container mx-auto px-4 py-8'>
			<h1>Faça sua inscrição</h1>

			<MegaRegisterForm
				apiUrl={process.env.NEXT_PUBLIC_API_URL!}
				apiToken={process.env.NEXT_PUBLIC_API_TOKEN!}
				siteId={process.env.NEXT_PUBLIC_SITE_ID!}
			/>
		</div>
	)
}

📚 Documentação Completa

• Getting Started - Guia de instalação e configuração
• API Reference - Documentação completa da API
• Examples - Exemplos de uso avançados
• Styling - Guia de personalização visual

🎯 Props

Obrigatórias

| Prop | Tipo | Descrição | |------|------|-----------| | apiUrl | string | URL base da API | | apiToken | string | Token de autenticação Bearer | | siteId | string \| number | ID do site para registro |

Opcionais

| Prop | Tipo | Descrição | |------|------|-----------| | onSuccess | (data: FormData) => void | Callback de sucesso | | onError | (error: Error) => void | Callback de erro | | className | string | Classes CSS adicionais |

📋 Campos do Formulário

O formulário coleta:

• ✅ Nome completo
• ✅ E-mail
• ✅ WhatsApp (com máscara)
• ✅ Data de nascimento (input + calendário)
• ✅ Gênero (5 opções)
• ✅ Estado (busca inteligente)
• ✅ Cidade (carregamento dinâmico)
• ✅ Nome do responsável (condicional para < 18 anos)

Dados coletados automaticamente:

• 🌐 IP do cliente
• 💻 Informações do dispositivo (navegador, SO)
• 📊 Parâmetros UTM (tracking)
• 🔗 Referrer e User Agent

🎨 Exemplo Avançado

'use client'

import { MegaRegisterForm, FormData } from '@megamodel/register-form'
import { useRouter } from 'next/navigation'
import { toast } from 'sonner'

export default function RegisterPage() {
	const router = useRouter()

	const handleSuccess = (data: FormData) => {
		toast.success(`Bem-vindo, ${data.name}!`)
		router.push('/obrigado')
	}

	const handleError = (error: Error) => {
		toast.error('Erro ao processar inscrição')
		console.error(error)
	}

	return (
		<div className='max-w-2xl mx-auto'>
			<MegaRegisterForm
				apiUrl={process.env.NEXT_PUBLIC_API_URL!}
				apiToken={process.env.NEXT_PUBLIC_API_TOKEN!}
				siteId='mega-experience'
				onSuccess={handleSuccess}
				onError={handleError}
				className='bg-card p-6 rounded-lg shadow-lg'
			/>
		</div>
	)
}

🔧 Requisitos

• React >= 18.0.0
• React DOM >= 18.0.0
• Next.js >= 14.0.0
• shadcn/ui components instalados

🏗️ Build

Para fazer build do package:

cd packages/register-form
npm install
npm run build

Isso gerará os arquivos em dist/:

• index.js (CommonJS)
• index.mjs (ES Modules)
• index.d.ts (TypeScript definitions)

📝 Validação

O formulário usa Zod para validação com as seguintes regras:

• Nome: Mínimo 3 caracteres
• E-mail: Formato válido
• WhatsApp: Formato (99) 99999-9999
• Data de nascimento: Data válida
• Gênero: Seleção obrigatória
• Estado: Seleção obrigatória
• Cidade: Seleção obrigatória
• Responsável: Obrigatório se idade < 18 anos

🌐 API Endpoints

O package espera os seguintes endpoints na API:

GET /states

Retorna lista de estados brasileiros

GET /cities/{stateId}

Retorna lista de cidades de um estado

POST /leads/register

Envia os dados do formulário

🎨 Customização

O formulário é totalmente customizável através do sistema de temas do shadcn/ui:

<MegaRegisterForm
	apiUrl='...'
	apiToken='...'
	siteId='...'
	className='custom-form-styles'
/>

Veja o Guia de Styling para mais detalhes.

🤝 Contribuindo

Este é um package interno da Mega Model. Para sugestões ou problemas, entre em contato com a equipe de desenvolvimento.

📄 Licença

UNLICENSED - Propriedade exclusiva da Mega Model. Todos os direitos reservados.

🔗 Links Úteis

• shadcn/ui
• React Hook Form
• Zod
• Tailwind CSS

Desenvolvido com ❤️ pela equipe Mega Model