@visiion/forms-library 1.1.0 → 1.1.2

package/README.md

@@ -12,16 +12,6 @@ npm install @visiion/forms-library
 yarn add @visiion/forms-library
 ```
 
-## Características
-
-- 📝 **Formularios dinámicos**: Crea formularios basados en configuración JSON
-- 🎨 **Componentes personalizables**: Estilos con Tailwind CSS
-- ✅ **Validación integrada**: Validación con Yup
-- 🧩 **Modular**: Usa solo los componentes que necesites
-- 🇨🇱 **Soporte para RUT**: Validación y formateo de RUT chileno
-- 📱 **Responsive**: Diseño adaptable a diferentes pantallas
-- 🔧 **TypeScript**: Tipado completo para mejor DX
-
 ## Uso Básico
 
 ### GenericForm
@@ -29,76 +19,76 @@ yarn add @visiion/forms-library
 El componente principal para crear formularios dinámicos:
 
 ```tsx
-import React from 'react';
-import { GenericForm, IFormConfig } from '@visiion/forms-library';
+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',
+  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',
+      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'] }
-      ]
+        { 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: 'ejemplo@correo.com',
+      id: "email",
+      name: "email",
+      type: "text",
+      label: "Correo electrónico",
+      placeholder: "ejemplo@correo.com",
       required: true,
       validations: [
-        { type: 'required', params: ['El email es requerido'] },
-        { type: 'email', params: ['Email inválido'] }
-      ]
+        { 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',
+      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'] }
-      ]
-    }
+        { type: "required", params: ["El RUT es requerido"] },
+        { type: "custom", params: ["rut", "RUT inválido"] },
+      ],
+    },
   ],
   navigation: {
-    containerClass: 'flex justify-between',
+    containerClass: "flex justify-between",
     buttons: [
       {
-        key: 'back',
-        direction: 'back',
-        label: 'Volver',
-        onClick: 'handleBack',
-        show: true
+        key: "back",
+        direction: "back",
+        label: "Volver",
+        onClick: "handleBack",
+        show: true,
       },
       {
-        key: 'next',
-        direction: 'next',
-        label: 'Siguiente',
-        onClick: 'handleNext',
-        show: true
-      }
-    ]
+        key: "next",
+        direction: "next",
+        label: "Siguiente",
+        onClick: "handleNext",
+        show: true,
+      },
+    ],
   },
   onNext: (formData) => {
-    console.log('Datos del formulario:', formData);
+    console.log("Datos del formulario:", formData);
   },
   onBack: () => {
-    console.log('Volver');
-  }
+    console.log("Volver");
+  },
 };
 
 function App() {
@@ -117,20 +107,20 @@ export default App;
 También puedes usar los componentes individualmente:
 
 ```tsx
-import React, { useState } from 'react';
-import { TextInput, RutInput, SelectInput } from '@visiion/forms-library';
+import React, { useState } from "react";
+import { TextInput, RutInput, SelectInput } from "@visiion/forms-library";
 
 function MyForm() {
   const [formData, setFormData] = useState({
-    name: '',
-    rut: '',
-    country: ''
+    name: "",
+    rut: "",
+    country: "",
   });
 
   const handleChange = (e) => {
     setFormData({
       ...formData,
-      [e.target.name]: e.target.value
+      [e.target.name]: e.target.value,
     });
   };
 
@@ -138,39 +128,39 @@ function MyForm() {
     <form className="space-y-4">
       <TextInput
         field={{
-          id: 'name',
-          name: 'name',
-          type: 'text',
-          label: 'Nombre',
-          placeholder: 'Ingrese su nombre'
+          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'
+          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',
+          id: "country",
+          name: "country",
+          type: "select",
+          label: "País",
           options: [
-            { value: 'cl', label: 'Chile' },
-            { value: 'ar', label: 'Argentina' },
-            { value: 'pe', label: 'Perú' }
-          ]
+            { value: "cl", label: "Chile" },
+            { value: "ar", label: "Argentina" },
+            { value: "pe", label: "Perú" },
+          ],
         }}
         value={formData.country}
         onChange={handleChange}
@@ -196,12 +186,12 @@ La librería soporta múltiples tipos de validación:
 
 ```tsx
 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'] }
+  { 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"] },
 ];
 ```
 
@@ -210,12 +200,12 @@ const validations = [
 ### Validación de RUT
 
 ```tsx
-import { validateRut, formatRut, cleanRut } from '@visiion/forms-library';
+import { validateRut, formatRut, cleanRut } from "@visiion/forms-library";
 
-const rut = '12345678-9';
+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'
+const formatted = formatRut("123456789"); // '12.345.678-9'
+const clean = cleanRut("12.345.678-9"); // '123456789'
 ```
 
 ## Personalización
@@ -223,10 +213,7 @@ const clean = cleanRut('12.345.678-9'); // '123456789'
 La librería usa Tailwind CSS para los estilos. Puedes personalizar los componentes pasando clases CSS personalizadas:
 
 ```tsx
-<GenericForm 
-  config={config} 
-  className="my-custom-form"
-/>
+<GenericForm config={config} className="my-custom-form" />
 ```
 
 ## Desarrollo
@@ -248,14 +235,6 @@ pnpm run lint
 pnpm run format
 ```
 
-## Contribuir
-
-1. Fork del proyecto
-2. Crea una rama para tu feature (`git checkout -b feature/AmazingFeature`)
-3. Commit tus cambios (`git commit -m 'Add some AmazingFeature'`)
-4. Push a la rama (`git push origin feature/AmazingFeature`)
-5. Abre un Pull Request
-
 ## Licencia
 
-MIT © [Visiion Team] 
+MIT © [Visiion Team]