form-demaker 🐸

Una librería React moderna y flexible para generar formularios dinámicos de manera declarativa, con validación integrada mediante Zod y estilos con Chakra UI.

📋 Descripción

form-demaker es una solución completa para crear formularios en React sin escribir HTML repetitivo. Define tus campos mediante una configuración simple y obtén formularios validados, responsivos y accesibles automáticamente.

✨ Características principales

• 🎯 Declarativo: Define tu formulario con una configuración JSON
• ✅ Validación integrada: Powered by Zod y React Hook Form
• 🎨 Chakra UI: Componentes estilizados y accesibles out-of-the-box
• 📱 Responsive: Grilla adaptable para cualquier dispositivo
• 🔧 TypeScript: Totalmente tipado para mejor DX
• 🧪 Testeado: Incluye suite de tests con Vitest

🚀 Requisitos previos

• Node.js: v18 o superior
• Gestor de paquetes: npm, yarn o pnpm

📦 Instalación

# npm
npm install form-demaker

# yarn
yarn add form-demaker

# pnpm
pnpm add form-demaker

Peer Dependencies

La librería requiere que tengas instaladas las siguientes dependencias en tu proyecto:

npm install react react-dom @chakra-ui/react @emotion/react react-hook-form @hookform/resolvers zod

🎯 Uso rápido

import { FormDemaker, Provider } from 'form-demaker';

function App() {
  const inputs = [
    {
      name: 'email',
      label: 'Correo electrónico',
      inputType: 'text',
      placeholder: '[email protected]',
      rules: { required: 'El email es requerido' }
    },
    {
      name: 'password',
      label: 'Contraseña',
      inputType: 'password',
      rules: { 
        required: 'La contraseña es requerida',
        minLength: { value: 8, message: 'Mínimo 8 caracteres' }
      }
    }
  ];

  const handleSubmit = (data) => {
    console.log('Datos del formulario:', data);
  };

  return (
    <Provider>
      <FormDemaker
        inputs={inputs}
        onSubmit={handleSubmit}
        columns={1}
        withSubmitButton
      />
    </Provider>
  );
}

📚 API Principal

<FormDemaker />

| Prop | Tipo | Descripción | Por defecto | |------|------|-------------|-------------| | inputs | InputConfig[] | Configuración de los campos del formulario | [] | | onSubmit | (data) => void | Callback al enviar el formulario | - | | defaultValues | object | Valores iniciales del formulario | {} | | columns | number | Número de columnas en la grilla | 2 | | withSubmitButton | boolean | Mostrar botón de envío automático | false | | loadingForm | boolean | Estado de carga del formulario | false | | gridProps | GridProps | Props adicionales para la grilla | {} |

🤝 Contribuciones

¡Las contribuciones son bienvenidas! Si deseas colaborar:

1. Fork el repositorio
2. Crea una rama para tu feature (git checkout -b feature/amazing-feature)
3. Commit tus cambios (git commit -m 'Add some amazing feature')
4. Push a la rama (git push origin feature/amazing-feature)
5. Abre un Pull Request

Guías de contribución

• Asegúrate de que los tests pasen antes de hacer PR
• Sigue las convenciones de código del proyecto (ESLint)
• Documenta cambios significativos en el PR
• Añade tests para nuevas funcionalidades

📝 Licencia

Este proyecto está bajo la licencia MIT. Ver el archivo LICENSE para más detalles.

👤 Autor

Pablo Gallina

🔗 Enlaces útiles

• Documentación completa
• Documentación de React Hook Form
• Documentación de Zod
• Documentación de Chakra UI
• Documentación de date-fns
• Documentación de Downshift
• Documentación de React Day Picker