Reusable React Components for Heroes of Chess Apps
npm install heroes-of-chess-componentsheroes-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.
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...
``