Pets UI Library

Librería de componentes UI React personalizada para aplicación de microservicios Pets.

Características

• Botones con múltiples variantes y estados
• Campos de entrada con validación
• Componentes de búsqueda avanzados
• Sistema de diseño con colores y fuentes personalizadas
• Totalmente responsive y accesible
• Construido con React y CSS Variables
• Fácil de personalizar y extender

Instalación

npm install pets-ui-lib

# o
yarn add pets-ui-lib

Uso Básico

import React from 'react';
import { Button, Input, SearchInput } from 'pets-ui-lib';
// Importar los estilos
import 'pets-ui-lib/dist/styles/pets-ui-lib.css';

function App() {
  return (
    <div>
      <Button variant="primary">Click me</Button>
      <Input placeholder="Ingrese su nombre" />
      <SearchInput placeholder="Buscar..." />
    </div>
  );
}

Componentes

Button

Botón con múltiples variantes, tamaños y estados.

<Button 
  variant="primary" 
  size="md" 
  disabled={false}
  loading={false}
  icon={<Plus />}
  iconPosition="left"
  fullWidth={false}
  rounded={false}
  onClick={handleClick}
>
  Botón
</Button>

Variantes:

• primary - Botón primario
• secondary - Botón secundario
• accent - Botón de acento
• success - Botón de éxito
• warning - Botón de advertencia
• error - Botón de error
• info - Botón de información
• outline-primary - Botón contorno primario
• outline-secondary - Botón contorno secundario
• ghost - Botón fantasma
• link - Botón estilo enlace

Tamaños:

• sm - Pequeño
• md - Mediano (default)
• lg - Grande

Input

Campo de entrada con validación y múltiples variantes.

<Input
  type="text"
  placeholder="Ingrese texto"
  value={value}
  onChange={handleChange}
  size="md"
  variant="default"
  error={false}
  errorMessage="Campo requerido"
  success={false}
  successMessage="Campo válido"
  icon={<User />}
  iconPosition="left"
  fullWidth={false}
  disabled={false}
/>

Variantes:

• default - Estilo por defecto
• filled - Fondo relleno
• underlined - Estilo subrayado

Tamaños:

• sm - Pequeño
• md - Mediano (default)
• lg - Grande

SearchInput

Campo de búsqueda con debounce y botón de limpiar.

<SearchInput
  placeholder="Buscar..."
  value={searchValue}
  onChange={handleSearch}
  onClear={handleClear}
  size="md"
  variant="default"
  fullWidth={false}
  disabled={false}
  showClearButton={true}
  debounceMs={300}
/>

Personalización

La librería utiliza variables CSS que puedes sobreescribir:

:root {
  /* Colores primarios */
  --color-primary: #8b5cf6;
  --color-secondary: #06b6d4;
  --color-accent: #f59e0b;
  
  /* Fuentes */
  --font-family-primary: 'Poppins', sans-serif;
  --font-family-secondary: 'Roboto', sans-serif;
  --font-family-accent: 'Montserrat', sans-serif;
  
  /* Espaciado */
  --spacing-1: 0.25rem;
  --spacing-2: 0.5rem;
  --spacing-3: 0.75rem;
  --spacing-4: 1rem;
  
  /* Bordes */
  --border-radius-md: 0.375rem;
  --border-radius-lg: 0.5rem;
  --border-radius-xl: 0.75rem;
}

Desarrollo

Prerrequisitos

• Node.js 18+
• React 18+ o 19+

Instalación Local

git clone <repository-url>
cd pets-ui-lib
npm install

Scripts

# Desarrollo con watch
npm run dev

# Build para producción
npm run build

# Ejecutar tests
npm test

# Tests con watch
npm run test:watch

# Coverage de tests
npm run test:coverage

# Iniciar demo local
npm run demo

Estructura del Proyecto

pets-ui-lib/
├── src/
│   ├── components/          # Componentes UI
│   │   ├── Button/
│   │   ├── Input/
│   │   └── SearchInput/
│   ├── styles/              # Estilos globales
│   │   ├── variables.css
│   │   └── base.css
│   ├── demo/                # Demo interactivo
│   └── index.js             # Export principal
├── tests/                   # Tests unitarios
├── dist/                    # Build de producción
├── rollup.config.js         # Configuración de Rollup
└── package.json

Dependencias

Peer Dependencies

• react: ^18.0.0 || ^19.0.0
• react-dom: ^18.0.0 || ^19.0.0

Dev Dependencies

• @rollup/plugin-babel
• @rollup/plugin-commonjs
• @rollup/plugin-node-resolve
• @rollup/plugin-terser
• @testing-library/jest-dom
• @testing-library/react
• @testing-library/user-event
• @vitejs/plugin-react
• jest
• rollup
• rollup-plugin-css-bundle
• rollup-plugin-peer-deps-external
• rollup-plugin-postcss
• vite

Licencia

MIT License - ver archivo LICENSE para detalles.

Contribución

1. Fork el proyecto
2. Crear una rama (git checkout -b feature/nueva-funcionalidad)
3. Commit los cambios (git commit -am 'Agregar nueva funcionalidad')
4. Push a la rama (git push origin feature/nueva-funcionalidad)
5. Crear un Pull Request

Soporte

Para reportar issues o solicitar características, por favor crear un issue en el repositorio del proyecto.