@visiion/forms-library

Una librería de componentes de formularios reutilizables construida con React y TypeScript, diseñada para crear formularios dinámicos y flexibles.

Instalación

pnpm install @visiion/forms-library
# o
npm install @visiion/forms-library
# o
yarn add @visiion/forms-library

Importar Estilos

Para que los componentes se vean correctamente, necesitas importar los estilos CSS de la librería en tu aplicación:

// En tu archivo principal (por ejemplo, App.tsx o index.tsx)
import "@visiion/forms-library/dist/index.css";

Uso Básico

GenericForm

El componente principal para crear formularios dinámicos:

import React from "react";
import { GenericForm, IFormConfig } from "@visiion/forms-library";

const config: IFormConfig = {
  id: "example-form",
  title: "Formulario de Ejemplo",
  subtitle: "Complete la información solicitada",
  fields: [
    {
      id: "name",
      name: "name",
      type: "text",
      label: "Nombre completo",
      placeholder: "Ingrese su nombre",
      required: true,
      validations: [
        { type: "required", params: ["El nombre es requerido"] },
        { type: "min", params: ["3", "Mínimo 3 caracteres"] },
      ],
    },
    {
      id: "email",
      name: "email",
      type: "text",
      label: "Correo electrónico",
      placeholder: "[email protected]",
      required: true,
      validations: [
        { type: "required", params: ["El email es requerido"] },
        { type: "email", params: ["Email inválido"] },
      ],
    },
    {
      id: "rut",
      name: "rut",
      type: "rut",
      label: "RUT",
      placeholder: "12.345.678-9",
      required: true,
      validations: [
        { type: "required", params: ["El RUT es requerido"] },
        { type: "custom", params: ["rut", "RUT inválido"] },
      ],
    },
  ],
  navigation: {
    containerClass: "flex justify-between",
    buttons: [
      {
        key: "back",
        direction: "back",
        label: "Volver",
        onClick: "handleBack",
        show: true,
      },
      {
        key: "next",
        direction: "next",
        label: "Siguiente",
        onClick: "handleNext",
        show: true,
      },
    ],
  },
  onNext: (formData) => {
    console.log("Datos del formulario:", formData);
  },
  onBack: () => {
    console.log("Volver");
  },
};

function App() {
  return (
    <div className="max-w-4xl mx-auto p-6">
      <GenericForm config={config} />
    </div>
  );
}

export default App;

Componentes Individuales

También puedes usar los componentes individualmente:

import React, { useState } from "react";
import { TextInput, RutInput, SelectInput } from "@visiion/forms-library";

function MyForm() {
  const [formData, setFormData] = useState({
    name: "",
    rut: "",
    country: "",
  });

  const handleChange = (e) => {
    setFormData({
      ...formData,
      [e.target.name]: e.target.value,
    });
  };

  return (
    <form className="space-y-4">
      <TextInput
        field={{
          id: "name",
          name: "name",
          type: "text",
          label: "Nombre",
          placeholder: "Ingrese su nombre",
        }}
        value={formData.name}
        onChange={handleChange}
      />

      <RutInput
        field={{
          id: "rut",
          name: "rut",
          type: "rut",
          label: "RUT",
          placeholder: "12.345.678-9",
        }}
        value={formData.rut}
        onChange={handleChange}
      />

      <SelectInput
        field={{
          id: "country",
          name: "country",
          type: "select",
          label: "País",
          options: [
            { value: "cl", label: "Chile" },
            { value: "ar", label: "Argentina" },
            { value: "pe", label: "Perú" },
          ],
        }}
        value={formData.country}
        onChange={handleChange}
      />
    </form>
  );
}

Tipos de Campos Disponibles

• text: Campo de texto simple
• textarea: Área de texto multilínea
• select: Lista desplegable
• checkbox: Casilla de verificación
• rut: Campo especializado para RUT chileno
• alert: Mensaje de alerta
• subtitle: Subtítulo de sección

Validaciones

La librería soporta múltiples tipos de validación:

const validations = [
  { type: "required", params: ["Campo requerido"] },
  { type: "min", params: ["5", "Mínimo 5 caracteres"] },
  { type: "max", params: ["100", "Máximo 100 caracteres"] },
  { type: "email", params: ["Email inválido"] },
  { type: "pattern", params: ["^[0-9]+$", "Solo números"] },
  { type: "custom", params: ["rut", "RUT inválido"] },
];

Utilidades

Validación de RUT

import { validateRut, formatRut, cleanRut } from "@visiion/forms-library";

const rut = "12345678-9";
const isValid = validateRut(rut); // true/false
const formatted = formatRut("123456789"); // '12.345.678-9'
const clean = cleanRut("12.345.678-9"); // '123456789'

Personalización

La librería usa Tailwind CSS para los estilos. Puedes personalizar los componentes pasando clases CSS personalizadas:

<GenericForm config={config} className="my-custom-form" />

Desarrollo

# Instalar dependencias
pnpm install

# Desarrollo
pnpm run dev

# Build
pnpm run build

# Lint
pnpm run lint

# Formatear código
pnpm run format

Licencia

MIT © [Visiion Team]