Smart Input System

Sistema de inputs inteligentes construido con Next.js para mejorar la experiencia de captura en formularios.

Este proyecto demuestra como combinar:

• Formateo en tiempo real.
• Validaciones ligeras en frontend.
• Feedback visual inmediato al usuario.
• Estado limpio para enviar al backend.

Importante: la validacion de negocio y seguridad final siempre debe ocurrir en backend.

Que hace este proyecto

La demo renderiza un formulario con cuatro campos:

• name
• lastName
• email
• password

Cada campo aplica reglas segun su tipo (dataType):

• name y lastName: elimina numeros, normaliza espacios y capitaliza palabras.
• email: valida formato con regex y pinta estados valid/invalid.
• password: valida 3 reglas (minimo 6, mayuscula, numero), muestra checklist y permite toggle ver/ocultar.

Ademas, se muestra en pantalla el payload resultante (formState) para visualizar exactamente que datos se enviarian al backend.

Stack tecnologico

• Next.js 16 (App Router)
• React 19
• TypeScript (modo strict)
• Tailwind CSS v4
• ESLint con configuracion next/core-web-vitals y next/typescript
• react-icons

Arquitectura de componentes

El sistema sigue una estructura inspirada en Atomic Design:

src/components/smart-input-system/
	atoms/
		InputChecks.tsx            # Checklist visual de password
	molecules/
		smartInput.tsx             # Input inteligente reutilizable
	organisms/
		smart-input-system-demo.tsx # Pantalla demo y estado del formulario
	shared/
		formatters.ts              # Formateadores
		validators.ts              # Validadores
		type.ts                    # Tipos compartidos

Flujo general

1. El componente SmartInput recibe dataType, value y onChange.
2. handleChange decide si formatea o valida segun el tipo de dato.
3. Retorna el valor procesado al estado padre.
4. El componente padre mantiene el estado unificado del formulario.

Requisitos

• Node.js 20+
• npm 10+ (o yarn/pnpm/bun)

Levantar el proyecto

npm install
npm run dev

Abrir en navegador:

http://localhost:3000

Scripts disponibles

npm run dev    # entorno local
npm run build  # build de produccion
npm run start  # correr build
npm run lint   # analisis estatico

Guia rapida para extender el sistema

Si quieres agregar un nuevo tipo de input inteligente (por ejemplo phone):

1. Agrega el nuevo literal al tipo DataType en shared/type.ts.
2. Crea su formatter o validator en shared/formatters.ts o shared/validators.ts.
3. Integra la logica en handleChange de molecules/smartInput.tsx.
4. Usa el nuevo dataType desde el formulario demo u otro formulario real.

Buenas practicas recomendadas

• Mantener validaciones de UX en frontend, validaciones de negocio en backend.
• Evitar reglas complejas embebidas en UI; moverlas a shared/.
• Agregar pruebas unitarias para formatters y validators al crecer el sistema.
• Mantener nombres de dataType cortos, consistentes y semanticos.

Estado actual del repositorio

Este repositorio esta orientado a demostracion y evolucion de un componente reutilizable.

Siguiente paso sugerido para produccion:

• extraer SmartInput como paquete interno compartido,
• sumar tests (unit + integration),
• y conectar con formularios reales del dominio.