@visiion/forms-library 1.0.0

package/README.md

@@ -0,0 +1,261 @@
+# @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
+
+```bash
+pnpm install @visiion/forms-library
+# o
+npm install @visiion/forms-library
+# o
+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
+
+El componente principal para crear formularios dinámicos:
+
+```tsx
+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: 'ejemplo@correo.com',
+      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:
+
+```tsx
+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:
+
+```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'] }
+];
+```
+
+## Utilidades
+
+### Validación de RUT
+
+```tsx
+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:
+
+```tsx
+<GenericForm 
+  config={config} 
+  className="my-custom-form"
+/>
+```
+
+## Desarrollo
+
+```bash
+# Instalar dependencias
+pnpm install
+
+# Desarrollo
+pnpm run dev
+
+# Build
+pnpm run build
+
+# Lint
+pnpm run lint
+
+# Formatear código
+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] 

package/dist/components/Common/NavigationButton.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { NavigationButtonProps } from '../../types';
+declare const NavigationButton: React.FC<NavigationButtonProps>;
+export default NavigationButton;

package/dist/components/Common/index.d.ts

@@ -0,0 +1 @@
+export { default as NavigationButton } from './NavigationButton';

package/dist/components/Forms/GenericForm.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+import { IFormConfig } from '../../types';
+interface IGenericFormProps {
+    config: IFormConfig;
+    stepperData?: any;
+    onStepComplete?: (stepNumber: number) => void;
+    changeActiveStep?: (step: number) => void;
+    loading?: boolean;
+    className?: string;
+}
+export declare const GenericForm: React.FC<IGenericFormProps>;
+export {};

package/dist/components/Forms/index.d.ts

@@ -0,0 +1 @@
+export { GenericForm } from './GenericForm';

package/dist/components/Inputs/Alert.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+type AlertType = 'info' | 'warning' | 'error';
+interface CustomAlertProps {
+    type?: AlertType | 'warning' | 'info' | 'error' | string;
+    text: string | null;
+    icon?: React.FC<any> | string;
+    className?: string;
+    iconClassName?: string;
+    textClassName?: string;
+}
+declare const Alert: React.FC<CustomAlertProps>;
+export default Alert;

package/dist/components/Inputs/CheckboxInput.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+import { IFormField } from '../../types';
+interface CheckboxInputProps {
+    field: IFormField;
+    value: boolean;
+    onChange: (e: React.ChangeEvent<HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement>) => void;
+    error?: string;
+}
+declare const CheckboxInput: React.FC<CheckboxInputProps>;
+export default CheckboxInput;

package/dist/components/Inputs/DynamicInput.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+import { IFormField } from '../../types';
+interface DynamicInputProps {
+    field: IFormField;
+    value: any;
+    onChange: (e: React.ChangeEvent<HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement>) => void;
+    error?: string;
+}
+declare const DynamicInput: React.FC<DynamicInputProps>;
+export default DynamicInput;

package/dist/components/Inputs/InputWrapper.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { InputWrapperProps } from '../../types';
+declare const InputWrapper: React.FC<InputWrapperProps>;
+export default InputWrapper;

package/dist/components/Inputs/RutInput.d.ts

@@ -0,0 +1,15 @@
+import React from 'react';
+import { IFormField } from '../../types';
+interface RutInputProps {
+    field: IFormField;
+    value: any;
+    onChange: (e: React.ChangeEvent<HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement>) => void;
+    error?: string;
+    onSearch?: (value: string | any) => void;
+    disabled?: boolean;
+    placeholder?: string;
+    minLength?: number;
+    maxLength?: number;
+}
+declare const RutInput: React.FC<RutInputProps>;
+export default RutInput;

package/dist/components/Inputs/SelectInput.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+import { IFormField } from '../../types';
+interface SelectInputProps {
+    field: IFormField;
+    value: string | number;
+    onChange: (e: React.ChangeEvent<HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement>) => void;
+    error?: string;
+}
+declare const SelectInput: React.FC<SelectInputProps>;
+export default SelectInput;

package/dist/components/Inputs/TextInput.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+import { IFormField } from '../../types';
+interface TextInputProps {
+    field: IFormField;
+    value: string | number;
+    onChange: (e: React.ChangeEvent<HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement>) => void;
+    error?: string;
+}
+declare const TextInput: React.FC<TextInputProps>;
+export default TextInput;

package/dist/components/Inputs/TextareaInput.d.ts

@@ -0,0 +1,20 @@
+import React from 'react';
+import { IFormField } from '../../types';
+interface TextareaInputProps {
+    field?: IFormField;
+    value?: string;
+    onChange?: (e: React.ChangeEvent<HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement>) => void;
+    error?: string;
+    id?: string;
+    name?: string;
+    label?: string;
+    placeholder?: string;
+    className?: string;
+    disabled?: boolean;
+    required?: boolean;
+    maxLength?: number;
+    rows?: number;
+    tooltip?: string;
+}
+declare const TextareaInput: React.FC<TextareaInputProps>;
+export default TextareaInput;

package/dist/components/Inputs/index.d.ts

@@ -0,0 +1,8 @@
+export { default as TextInput } from './TextInput';
+export { default as SelectInput } from './SelectInput';
+export { default as CheckboxInput } from './CheckboxInput';
+export { default as TextareaInput } from './TextareaInput';
+export { default as RutInput } from './RutInput';
+export { default as Alert } from './Alert';
+export { default as DynamicInput } from './DynamicInput';
+export { default as InputWrapper } from './InputWrapper';

package/dist/index.d.ts

@@ -0,0 +1,6 @@
+export { GenericForm } from './components/Forms';
+export { TextInput, SelectInput, CheckboxInput, TextareaInput, RutInput, Alert, DynamicInput, InputWrapper, } from './components/Inputs';
+export { NavigationButton } from './components/Common';
+export type { IFormField, IFormConfig, IStepProps, ResponseOnSearch, NavigationButtonProps, DynamicInputProps, InputWrapperProps, StepperContextType, ValidationRule, CommonValidations, } from './types';
+export { createValidationSchema, commonValidations, } from './utils/validationSchemas';
+export { clean as cleanRut, formatRut, validate as validateRut, maskRut, validateOnlyNumbersAndLetters, } from './utils/rut';