@codeplex-sac/formularios

v0.1.8

Published

5 days ago

Biblioteca de componentes de formulario para aplicaciones React, basada en **Material UI**. Todos los inputs siguen la API en **Español** de la suite `@codeplex-sac/*`.

0High
0Medium
0Low

b_manuel

codeplexdev

@codeplex-sac/formularios

Biblioteca de componentes de formulario para aplicaciones React, basada en Material UI. Todos los inputs siguen la API en Español de la suite @codeplex-sac/*.

Instalación

bun add @codeplex-sac/formularios @codeplex-sac/tema @mui/material @emotion/react @emotion/styled

[!IMPORTANT] Envuelve la aplicación con CodeplexProveedorTema de @codeplex-sac/tema para que los estilos funcionen correctamente.

Componentes

CodeplexCampoTexto

Entrada de texto con iconos, validación visual y soporte multilinea.

Ejemplo:

import { CodeplexCampoTexto } from '@codeplex-sac/formularios';

export const Ejemplo = () => (
  <CodeplexCampoTexto
    etiqueta="Correo electrónico"
    marcador="[email protected]"
    tipo="email"
    anchoCompleto
  />
);

CodeplexCampoNumero

Campo numérico con botones de incremento/decremento integrados.

Ejemplo:

import { CodeplexCampoNumero } from '@codeplex-sac/formularios';

export const Ejemplo = () => (
  <CodeplexCampoNumero
    etiqueta="Cantidad"
    minimo={1}
    maximo={100}
    paso={1}
    valor={5}
    alCambiar={(val) => console.log(val)}
  />
);

CodeplexSelector

Dropdown con búsqueda, selección múltiple y opción de crear nuevo elemento.

Ejemplo:

import { CodeplexSelector } from '@codeplex-sac/formularios';

const roles = [
  { valor: 'admin', etiqueta: 'Administrador' },
  { valor: 'usuario', etiqueta: 'Usuario' },
];

export const Ejemplo = () => (
  <CodeplexSelector
    etiqueta="Rol"
    opciones={roles}
    buscable
    alCambiar={(val) => console.log(val)}
  />
);

Props: | Propiedad | Tipo | Por defecto | Descripción | | :--- | :--- | :--- | :--- | | etiqueta | string | — | Label del selector. | | opciones | { valor, etiqueta, deshabilitado? }[] | [] | Lista de opciones. | | valor | string \| number | — | Valor seleccionado. | | alCambiar | SelectChangeEvent handler | — | Evento de selección. | | buscable | boolean | false | Activa filtro de búsqueda. | | marcador | string | — | Placeholder del buscador. | | textoAyuda | ReactNode | — | Texto informativo bajo el selector. | | mensajeError | string | — | Texto de error. | | alCrearNuevo | () => void | — | Muestra botón "Crear nuevo" al final. | | textoCrearNuevo | string | 'Crear nuevo' | Texto del botón de creación. | | anchoCompleto | boolean | false | Ocupa el 100% del contenedor. |

CodeplexAutocompletado

Selector con búsqueda en tiempo real y soporte para opciones asíncronas.

Ejemplo:

import { CodeplexAutocompletado } from '@codeplex-sac/formularios';

const paises = [
  { etiqueta: 'Perú', valor: 'PE' },
  { etiqueta: 'Chile', valor: 'CL' },
];

export const Ejemplo = () => (
  <CodeplexAutocompletado
    etiqueta="País"
    opciones={paises}
    alCambiar={(val) => console.log(val)}
  />
);

CodeplexCasilla

Checkbox personalizado con estados indeterminado y múltiples variantes visuales.

Ejemplo:

import { CodeplexCasilla } from '@codeplex-sac/formularios';

export const Ejemplo = () => (
  <CodeplexCasilla
    etiqueta="Acepto los términos y condiciones"
    seleccionado={false}
    alCambiar={(_, val) => console.log(val)}
  />
);

CodeplexGrupoRadio

Conjunto de opciones mutuamente excluyentes con diseño personalizado.

Ejemplo:

import { CodeplexGrupoRadio } from '@codeplex-sac/formularios';

const opciones = [
  { valor: 'mensual', etiqueta: 'Mensual' },
  { valor: 'anual', etiqueta: 'Anual' },
];

export const Ejemplo = () => (
  <CodeplexGrupoRadio
    etiqueta="Facturación"
    opciones={opciones}
    valor="mensual"
    alCambiar={(val) => console.log(val)}
  />
);

Props: | Propiedad | Tipo | Por defecto | Descripción | | :--- | :--- | :--- | :--- | | etiqueta | string | — | Título del grupo. | | opciones | { valor, etiqueta, deshabilitado? }[] | [] | Lista de radios. | | valor | any | — | Valor seleccionado. | | alCambiar | (valor: any) => void | — | Callback al cambiar. | | orientacion | 'horizontal' \| 'vertical' | 'vertical' | Disposición de los radios. | | color | 'primario' \| 'secundario' \| 'error' \| 'exito' \| 'advertencia' \| 'info' | 'primario' | Color del radio activo. | | deshabilitado | boolean | false | Deshabilita todo el grupo. |

CodeplexInterruptor

Control de encendido/apagado (Switch) con soporte de etiquetas y colores semánticos.

Ejemplo:

import { CodeplexInterruptor } from '@codeplex-sac/formularios';

export const Ejemplo = () => (
  <CodeplexInterruptor
    etiqueta="Notificaciones activas"
    seleccionado={true}
    color="exito"
    alCambiar={(_, val) => console.log(val)}
  />
);

CodeplexDeslizador

Selector de valor o rango numérico con etiqueta de valor flotante.

Ejemplo:

import { CodeplexDeslizador } from '@codeplex-sac/formularios';

export const Ejemplo = () => (
  <CodeplexDeslizador
    etiqueta="Porcentaje de descuento"
    minimo={0}
    maximo={100}
    paso={5}
    valor={25}
  />
);

CodeplexListaTransferencia

Dos columnas que permiten mover elementos entre listas con búsqueda integrada.

Ejemplo:

import { CodeplexListaTransferencia } from '@codeplex-sac/formularios';

const empleados = [
  { id: 1, texto: 'Ana García' },
  { id: 2, texto: 'Carlos López' },
];

export const Ejemplo = () => (
  <CodeplexListaTransferencia
    izquierda={empleados}
    tituloIzquierda="Disponibles"
    tituloDerecha="Asignados al proyecto"
    buscable
    alCambiar={(izq, der) => console.log(izq, der)}
  />
);

CodeplexAreaTextoAjustable

Textarea que crece automáticamente con el contenido.

Ejemplo:

import { CodeplexAreaTextoAjustable } from '@codeplex-sac/formularios';

export const Ejemplo = () => (
  <CodeplexAreaTextoAjustable
    etiqueta="Descripción"
    filasMinimas={3}
    filasMaximas={8}
    anchoCompleto
  />
);

CodeplexCargadorArchivos

Zona de carga de archivos con drag & drop, validación de tipo y tamaño, y lista de archivos cargados.

Ejemplo:

import { CodeplexCargadorArchivos } from '@codeplex-sac/formularios';

export const Ejemplo = () => (
  <CodeplexCargadorArchivos
    tiposAceptados={['image/*', '.pdf']}
    tamanoMaximoMb={5}
    multiple
    alCargar={(archivos) => console.log(archivos)}
  />
);

CodeplexSelectorColor

Selector de color con paleta de swatches, input hex y selector nativo del navegador.

Ejemplo:

import { CodeplexSelectorColor } from '@codeplex-sac/formularios';

export const Ejemplo = () => (
  <CodeplexSelectorColor
    valor="#3B82F6"
    alCambiar={(color) => console.log(color)}
  />
);

Personalización

Todos los componentes heredan la configuración de CodeplexProveedorTema. Los colores, radios y sombras se toman del tema activo.

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme

@codeplex-sac/formularios

Instalación

Componentes

CodeplexCampoTexto

CodeplexCampoNumero

CodeplexSelector

CodeplexAutocompletado

CodeplexCasilla

CodeplexGrupoRadio

CodeplexInterruptor

CodeplexDeslizador

CodeplexListaTransferencia

CodeplexAreaTextoAjustable

CodeplexCargadorArchivos

CodeplexSelectorColor

Personalización

Licencia