📦 Librería de Componentes SPYC

Librería de componentes reutilizables de la organización SAC, pensada para facilitar el desarrollo de interfaces consistentes y modernas.

Compatible con React +16.0. Incluye componentes visuales como botones, pestañas, inputs y más.

🚀 Instalación

Usa NPM:

npm install libreria-componentes-spyc

Usa Yarn:

yarn add libreria-componentes-spyc

⚒️ Uso basico

Primero importar el componente que se desea agregar.

import React from 'react';
import { LibreriaComponentesSpyc } from 'libreria-componentes-spyc';
import 'libreria-componentes-spyc/dist/index.css';

function App() {
  return (
    <LibreriaComponentesSpyc.Boton
        chevron="izquierda"
        color="#ffffff"
        fondo="#409968"
        onClick={() => {}}
        tamanoLetra="24px"
        titulo="Boton"
    />
  );
}

🧩 Componentes disponibles

Los componentes disponibles para uso personalizable son los siguientes:

Boton: botón personalizable con color, íconos y chevron.
Caja: campo de texto controlado color, icono.
CasillaVerificacion: tipo de controlador checkbox y radio.
IndicadorEspera: componente animado de espera.
ListaOpciones: historial de navegacion animado.
ModalGenerico: componente para mostrar modal detalle.
PantallaError: componente para mostrar contenido emergente.
Pestania: tabs para navegación de contenido.
Spinner: componente de espera animado de acuerdo al negocio.
Titulo: titulo personalizable con color y fondo.  

📚 Documentación completa

Puedes ver todos los componentes y sus props en nuestra 📖 Storybook online (opcional). Si estás trabajando localmente:

npm run storybook

⚙️ Props comunes (ejemplo: Boton)

Ejemplo de propiedades en el componente de boton

Propiedad   Tipo    Requerido   Descripción
titulo      string      ✅      Texto del botón
onClick     func        ❌      Función al hacer clic
fondo       string      ❌      Color de fondo
color       string      ❌      Color del texto
chevron     string      ❌      Flecha(izquierda o derecha)
base64      string      ❌      Imagen en base64
desactivado bool        ❌      Desactiva el botón

📃 Licencia

ISC © SPYC - Todos los derechos reservados.