🚀 React TextFormField Component

📝 Descripción

Este es un componente de entrada de texto inspirado en el TextFormField de Flutter, diseñado para ser reutilizable en proyectos de React con Tailwind CSS.

Incluye compatibilidad con iconos a la izquierda y derecha, cambios de color en focus, soporte para deshabilitar el campo y personalización de estilos con clsx y tailwind-merge.

🚀 Requisitos previos

Antes de comenzar, asegúrate de tener instalados:

• Node.js (versión recomendada: 18 o superior) 👉 Descargar Node.js

• pnpm (si no lo tienes, instálalo con el siguiente comando)

  npm install -g pnpm

📦 Instalación

Clona el repositorio y luego instala las dependencias:

git clone https://github.com/JorgeAntonio/component-js.git
cd component-js
pnpm install

🎨 Configuración de Tailwind CSS

Si Tailwind no está configurado, instálalo con:

pnpm install tailwindcss @tailwindcss/vite

Y en index.css, importa Tailwind:

@tailwind base;
@tailwind components;
@tailwind utilities;

🔌 Instalación de dependencias adicionales

Este proyecto usa clsx y tailwind-merge para gestionar clases dinámicamente y lucide-react para iconos:

pnpm install tailwind-merge
pnpm install clsx
pnpm add lucide-react

🚀 Levantar el proyecto

Para iniciar el servidor de desarrollo, usa:

pnpm dev

El proyecto se ejecutará en http://localhost:5173 por defecto.

⚡ Construcción para producción

Si deseas generar los archivos optimizados para producción:

pnpm build

Los archivos generados se almacenarán en la carpeta dist/.

🧪 Ejecutar el servidor de producción

Después de construir el proyecto, puedes previsualizarlo con:

pnpm preview

Esto simula cómo se serviría en un entorno real.

🛠️ Linting y formateo

Para verificar el código con ESLint:

pnpm lint

Para formatearlo con Prettier (si está configurado):

pnpm format

🤝 Contribuciones

¡Las contribuciones son bienvenidas! Si deseas mejorar este componente o agregar nuevas funcionalidades:

1. Haz un fork del repositorio.
2. Crea una nueva rama con tu mejora:

   git checkout -b feature/nueva-funcionalidad

3. Realiza tus cambios y confirma los commits:

   git commit -m "Agrega nueva funcionalidad"

4. Sube los cambios a tu repositorio:

   git push origin feature/nueva-funcionalidad

5. Abre un Pull Request en este repositorio.

🚀 ¡Gracias por usar este componente! Si tienes alguna sugerencia, no dudes en abrir un issue.