📦 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:

``bash npm install libreria-componentes-spyc`

Usa Yarn:

`bash yarn add libreria-componentes-spyc`

`⚒️ Uso basico`

Primero importar el componente que se desea agregar.

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

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

`🧩 Componentes disponibles`

Los componentes disponibles para uso personalizable son los siguientes:

`bash 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:

`bash npm run storybook`

`⚙️ Props comunes (ejemplo: Boton)`

Ejemplo de propiedades en el componente de boton

`bash 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

⚒️ Uso basico

Primero importar el componente que se desea agregar.

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

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

🧩 Componentes disponibles

Los componentes disponibles para uso personalizable son los siguientes:

bash
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.

⚙️ Props comunes (ejemplo: Boton)

Ejemplo de propiedades en el componente de boton

bash
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

bash
ISC © SPYC - Todos los derechos reservados.