Form component React + TypeScript + TailwindCSS

Descripción

FormComponent es un componente de formulario flexible y personalizable construido con React, TypeScript y TailwindCSS. Este componente te permite crear formularios rápidamente y de manera eficiente, con la capacidad de personalizar los inputs, el título del formulario y el texto del botón de envío. Además, cuenta con soporte para children, permitiéndote agregar contenido adicional abajo del formulario, como enlaces para registro de nuevos usuarios o métodos alternativos de inicio de sesión.

Características

• Inputs Personalizables: Define los campos de entrada del formulario según tus necesidades, especificando etiquetas, tipos, nombres, IDs y más.
• Título Personalizable: Establece el título del formulario para que se adapte a su propósito específico.
• Texto del Botón Personalizable: Personaliza el texto del botón de envío para que sea claro y relevante para los usuarios.
• Soporte para Children: Añade contenido adicional en el footer del formulario, ideal para enlaces, instrucciones adicionales o métodos alternativos de autenticación.
• Estilizado con TailwindCSS: Aprovecha las utilidades de TailwindCSS para un diseño rápido y responsivo.

Instalación

Puedes instalar el paquete utilizando npm. Ejecuta el siguiente comando en tu terminal:

npm install @modular-web/rc-form

O si prefieres usar Yarn, puedes instalarlo con el siguiente comando:

yarn add @modular-web/rc-form

Props

| Prop | Tipo | Descripción | Opcional | |--------------|-------------------------------|--------------------------------|-----------| | title | string | El título del formulario | No | | textButton | string | El texto del botón de envío | No | | inputs | Array<{...}> | Lista de objetos de entrada que definen los campos del formulario | Sí | | submit | (data: { values: any; event?: FormEvent<HTMLFormElement> }) => void | Función que se llama cuando se envía el formulario. Incluye valores y evento | Sí | | Children | JSX | Aquí puedes agregar cualquier jsx debajo del formulario | Sí |

Composición del Array inputs

| Prop | Tipo | Descripción | Opcional | |------------|------------|-------------------|----------| | id | string | Identificador único para el campo | No | | name | string | Nombre del campo | No | | type | string | Tipo de campo (ej: 'text', 'password', etc.) | No | | required | boolean | Si el campo es obligatorio | No | | label | string | Etiqueta para el campo | Sí | | className| string | Clases de CSS (ej: 'text-[#333]') | Sí | | placeholder| string | Texto de marcador de posición en el campo | Sí | | clearable| boolean | Si se puede limpiar el campo (por defecto false) | Sí | | toggleable| boolean | Mostrar/ocultar contraseña (solo aplica para campos de tipo password)| Sí | | pattern | string | Patrón para validar la entrada | Sí |

Ejemplo de uso:

import React from 'react';
import {FormComponent, Inputs} from '@modular-web/rc-form';

const inputs:Array<Inputs> = [
  {
    // Campos obligatorios
    id: 'username',
    name: 'username',
    type: 'text',
    required: true,
    // Campos opcionales
    label: 'Username',
    className: 'text-[#333]', // Clases de tailwindcss
    placeholder: 'Ingresa tu username',
    clearable: true, // Si quieres activar el limpiar el campo
  },
  // ... Agrega todos los campos que necesites
]

function App() {
  return (
    <FormComponent
      title="Iniciar Sesión"
      textButton="Iniciar Sesión"
      inputs={inputs}
      submit={({values, event}) => {
        console.log("Es un JSON", event, values);
      }}
    />
  );
};

export default App;

En este ejemplo:

• Importamos el componente FormComponent y el tipo Inputs desde el paquete @modular-web/rc-form.
• Definimos un arreglo de inputs con los campos necesarios para el formulario.
• Utilizamos el componente FormComponent en el componente principal App, pasando las propiedades title, textButton, inputs y submit.

Contribuir

Si desea contribuir a este proyecto, por favor sigue los siguientes pasos:

1. Haz un fork del repositorio.
2. Crea una nueva rama (git checkout -b feature/nueva-funconalidad).
3. Realiza tus cambios y haz commit (git commit -m 'Añadir nueva funcionalidad').
4. Sube tus cambios (git push origin feature/nueva-funcionalidad).
5. Abre un Pull Request.

Licencia

Este proyecto está licenciado bajo la Licencia MIT. Para más detalles, consulta el archivo LICENSE. MIT