🎯 Heroes of Chess Components

---

📋 Tabla de Contenidos

- 📖 Documentación
- 🚀 Instalación
- 💡 Uso Básico
- 🧩 Componentes
- 🎨 Providers
- 🪝 Hooks
- 🛠️ Desarrollo
- 📦 Publicación
- 🤝 Contribución

---

📖 Documentación

La librería heroes-of-chess-components es una colección de componentes React reutilizables diseñados específicamente para el ecosistema de aplicaciones Heroes of Chess. Proporciona una interfaz consistente y un sistema de diseño unificado para todas las aplicaciones de la plataforma.

$3

- 🎨 40+ Componentes UI listos para usar
- 🎯 TypeScript Ready con tipado completo
- 💅 Styled Components para máxima personalización
- 🚀 Tree Shaking - solo importa lo que necesitas
- 📱 Responsive Design - compatible con dispositivos móviles
- 🎭 Theme Provider sistema de temas integrado
- 🪝 Custom Hooks para funcionalidades comunes
- ⚡ Performance Optimized para aplicaciones rápidas

---

🚀 Instalación

$3

``bash
npm install heroes-of-chess-components
`

$3

`bash
yarn add heroes-of-chess-components
`

$3

Asegúrate de tener instaladas las siguientes dependencias peer:

`bash
npm install react react-dom styled-components
`

---

💡 Uso Básico

$3

Envuelve tu aplicación con el HProviders para acceder a todos los providers:

`jsx
import React from 'react';
import { HProviders } from 'heroes-of-chess-components';
import App from './App';

function Root() {
return (



);
}

export default Root;
`

$3

`jsx
// Importación individual (recomendado para tree shaking)
import { HButton, HInput, HModal } from 'heroes-of-chess-components';

// Importación completa
import * as HocComponents from 'heroes-of-chess-components';
`

$3

`jsx
import React, { useState } from 'react';
import { HButton, HInput, HModal } from 'heroes-of-chess-components';

function MyComponent() {
const [isModalOpen, setIsModalOpen] = useState(false);
const [inputValue, setInputValue] = useState('');

return (

placeholder="Ingresa tu nombre"
value={inputValue}
onChange={(e) => setInputValue(e.target.value)}
/>

text="Abrir Modal"
onClick={() => setIsModalOpen(true)}
background="linear-gradient(45deg, #667eea 0%, #764ba2 100%)"
/>

isOpen={isModalOpen}
onClose={() => setIsModalOpen(false)}
title="¡Bienvenido!"
>

Hola {inputValue || 'Usuario'}!

);
}
`

---

🧩 Componentes

$3

#### 🔘 Botones e Interacción
- HButton - Botón principal con múltiples variantes
- HCircularButton - Botón circular con icono
- HCircularTextButton - Botón circular con texto
- HToggleButton - Botón de alternancia
- HToggleButtonCustom - Botón de alternancia personalizable

#### 📝 Formularios e Inputs
- HInput - Input de texto con validación
- HInputArea - Área de texto multilinea
- HSearchInput - Input de búsqueda con funcionalidades avanzadas
- HDropdown - Selector desplegable
- HRadio - Botones de radio personalizados
- HSlider - Control deslizante

#### 🏗️ Layout y Contenedores
- HBox - Contenedor flexible con Flexbox
- HBackground - Fondo personalizable
- HBlackBack - Fondo negro semitransparente
- HCards - Sistema de tarjetas

#### 🪟 Modales y Overlays
- HModal - Modal principal con animaciones
- HModalData - Modal para mostrar datos
- HModalSecurityCode - Modal de código de seguridad
- HPopUp - Popup ligero y rápido

#### 📅 Calendarios y Fechas
- HCalendar - Calendario básico
- HCalendarStyled - Calendario estilizado
- HClientCalendar - Calendario para clientes
- HClientMyReservations - Gestión de reservas

#### 🎯 Navegación y UI
- HNavbar - Barra de navegación
- HTabs - Sistema de pestañas
- HPagination - Paginación
- HAccordion - Acordeón expandible

#### 📊 Indicadores y Progress
- HLoaderSpinner - Indicador de carga
- HProgressBar - Barra de progreso
- HScoreBar - Barra de puntuación
- HCoinLabel - Etiqueta de monedas

#### 🎨 Tipografía y Texto
- HTitle - Títulos estilizados
- HText - Texto con estilos predefinidos

#### 🎬 Media y Animaciones
- HVideoPlayer - Reproductor de video
- HLevelUpAnimation - Animación de subida de nivel
- HInitBackgroundAnimation - Animación de fondo inicial

#### 🔐 Autenticación
- HLogin - Componente de inicio de sesión

---

🎨 Providers

$3

Proporciona el sistema de temas para toda la aplicación:

`jsx
import { HThemeProvider, HThemeContext } from 'heroes-of-chess-components';

// Usar el provider




// Consumir el contexto
const { theme, toggleTheme } = useContext(HThemeContext);
`

$3

Gestiona el estado global de loading spinners:

`jsx
import { HSpinnerProvider, HSpinnerContext } from 'heroes-of-chess-components';

// Usar el provider




// Consumir el contexto
const { showSpinner, hideSpinner, isLoading } = useContext(HSpinnerContext);
`

$3

Provider principal que combina todos los providers:

`jsx
import { HProviders } from 'heroes-of-chess-components';




`

---

🪝 Hooks

La librería incluye hooks personalizados para funcionalidades comunes:

$3

`jsx
import { useArchetype } from 'heroes-of-chess-components';

const archetypeData = useArchetype('STRATEGIST');
`

$3

`jsx
import { useBooking } from 'heroes-of-chess-components';

const { booking, isValid, validationErrors } = useBooking(bookingData);
`

$3

`jsx
import { useCharacters } from 'heroes-of-chess-components';

const character = useCharacters('ALEX');
`

$3

`jsx
import { useDates } from 'heroes-of-chess-components';

const dateUtilities = useDates();
`

$3

`jsx
import { useDebounce } from 'heroes-of-chess-components';

const debouncedValue = useDebounce(value, 300);
`

$3

`jsx
import { useMobile } from 'heroes-of-chess-components';

const { isMobile, windowSize } = useMobile();
`

$3

`jsx
import { usePuzzleAttributes } from 'heroes-of-chess-components';

const puzzleData = usePuzzleAttributes('fork');
`

$3

`jsx
import { useSounds } from 'heroes-of-chess-components';

const { playSound, stopAllSounds, setGlobalVolume } = useSounds();
`

---

🛠️ Desarrollo

$3

1. Clonar el repositorio
`bash
git clone
cd heroes-of-chess-components
`

2. Instalar dependencias
`bash
npm install
`

3. Ejecutar en modo desarrollo
`bash
npm run dev
`

$3

`bash
npm run dev # Servidor de desarrollo
npm run build # Construir para producción
npm run lint # Ejecutar linter
npm run preview # Vista previa de la build
`

$3

`
heroes-of-chess-components/
├── src/
│ ├── lib/
│ │ ├── HocComponents/ # Componentes principales
│ │ ├── providers/ # Context providers
│ │ ├── hooks/ # Custom hooks
│ │ ├── styles/ # Estilos globales
│ │ ├── functions/ # Utilidades
│ │ ├── data/ # Datos estáticos
│ │ └── assets/ # Recursos estáticos
│ └── HocComponentsPlayground.jsx # Playground de desarrollo
├── docs/ # Documentación de componentes
├── dist/ # Build de producción
└── public/ # Archivos públicos
`

---

📦 Publicación

$3

`bash
npm run build
`

$3

1. Actualizar versión
`bash
npm version patch|minor|major
`

2. Publicar
`bash
npm publish --access public
`

---

🤝 Contribución

$3

1. Crear la estructura del componente
`
src/lib/HocComponents/MyComponent/
├── MyComponent.jsx
├── MyComponent.styled.js
└── index.js
`

2. Exportar en el index principal
`jsx
// src/lib/HocComponents/index.js
export { default as MyComponent } from './MyComponent/MyComponent';
`

3. Crear documentación
`markdown

MyComponent

Descripción del componente...
``

$3

- Seguir las convenciones de nomenclatura existentes
- Incluir PropTypes o TypeScript types
- Escribir documentación completa
- Añadir ejemplos de uso
- Mantener compatibilidad con versiones anteriores

---

📄 Licencia

Esta librería es parte del ecosistema Heroes of Chess y está destinada para uso interno del proyecto.

---

📞 Soporte

Para soporte técnico o preguntas sobre la librería:

- 📧 Email: support@heroesofchess.com
- 📱 Discord: Heroes of Chess Development
- 🐛 Issues: GitHub Issues

---


- HCards
- HCoinLabel
- HDropdown
- HInput
- HLoaderSpinner
- HLogin
- HModal
- HModalSecurityCode
- HNavbar
- HPagination
- HPopUp
- HRadio
- HSearchInput
- HTabs
- HTitle
- HToggleButton