Introducción
gluBox es una librería de componentes React para dashboards y aplicaciones internas (ERP, facturación, inventario, etc.).
Qué incluye hoy
| Componente | Documentación |
|---|---|
| Sidebar | sidebar |
| TextBox, Select, DateBox, RangeDateBox | formularios |
| Button, CheckButton, OptionGroup | botones |
| Popup, Toast | overlays |
Listado completo: Componentes.
Navegación
- Sidebar — Menú dinámico desde API, RBAC, 3 niveles, temas, modo colapsado e iconos personalizables.
Formularios
- TextBox, Select, DateBox, RangeDateBox — Campos con variantes visuales, estados de error, label outlined (sobre el borde) y temas.
Botones y selección
- Button, CheckButton, OptionGroup — Acciones, toggles y grupos de opción exclusiva.
Overlays
- Popup, Toast — Diálogos modales y notificaciones con tipos de eventos exportados.
Documentación
| Guía | Contenido |
|---|---|
| Instalación | npm, CSS, temas, TypeScript |
| Temas y apariencia | data-theme, data-mode, prop theme, presets |
| Tipos de eventos | Handlers exportados (*OnChangeHandler, etc.) |
| Esquema del menú (API) | Contrato JSON para backend |
| Integración con routing | React Router, guards, registro de rutas |
| Formularios | TextBox, Select, fechas, label outlined |
| Botones | Button, CheckButton, OptionGroup |
| Overlays | Popup, Toast |
| Sidebar (referencia) | Props, temas, RBAC |
Requisitos
- React 18+
- TypeScript recomendado
Demo local
bash
git clone https://github.com/solivoo/gluebox.git
cd gluebox
pnpm install
pnpm dev # Playground interactivo en /componentes/*
pnpm docs:dev # Esta documentaciónFlujo típico de integración
- Instalar
gluboxe importarglubox/style.cssy un tema (glubox/themes/default.css). - Configurar
data-themeydata-modeen<html>. - Consumir
MenuConfigdesde tu API (esquema). - Conectar Sidebar con
activePath/onNavigate(routing). - Usar controles de formulario con el mismo sistema de temas.
- Validar permisos en rutas (403) y en el backend.