Vision General de la Biblioteca de Componentes
Vision general de la biblioteca de componentes de Certexi con 112+ widgets, 53 campos de formulario y 42 primitivas de UI construidos sobre Radix UI y Tailwind CSS.
Última actualización: 2025-02-18
Vision General de la Biblioteca de Componentes
Certexi incluye una extensa biblioteca de componentes construida sobre primitivas de Radix UI y Tailwind CSS. La biblioteca proporciona todo lo necesario para aplicaciones empresariales de logistica — desde primitivas basicas de UI hasta widgets especificos del dominio.
Vista Previa del Dashboard en Vivo
Vea la biblioteca de componentes en accion — el dashboard de KPIs compone Cards, Badges, barras de Progress y componentes de graficas personalizados en una vista operativa real.
Dashboard de KPIs — contadores animados, tendencias de utilizacion y graficas de rendimiento construidos completamente con componentes de la biblioteca.
Estadisticas de la Biblioteca
| Categoria | Cantidad | Descripcion |
|---|---|---|
| Primitivas de UI | 42 | Botones, inputs, dialogos, tarjetas, alertas |
| Campos de Formulario | 53 | Texto, numero, fecha, select, carga de archivos, campos personalizados |
| Widgets | 112+ | Graficas, multimedia, IoT, Nextcloud, automatizacion |
| Total | 200+ | Componentes listos para produccion |
Arquitectura
La biblioteca de componentes sigue una arquitectura en capas:
Sistema de Diseno
Fundamentos
- Tipografia: Familia Inter con 6 variantes de peso
- Colores: Paleta neutra basada en Slate con azul primario, configurable via variables CSS
- Espaciado: Sistema de cuadricula de 4px (base 0.25rem)
- Bordes: Bordes consistentes de 1px con radio configurable
- Sombras: Sistema de elevacion de 5 niveles
Temas
Todos los componentes soportan modo oscuro via la variante dark: de Tailwind. El tema se controla a nivel de aplicacion y persiste entre sesiones.
Accesibilidad
- Cumple WCAG 2.1 AA
- Soporte completo de navegacion por teclado
- Compatible con lectores de pantalla (atributos ARIA)
- Indicadores de foco en todos los elementos interactivos
- Soporte de movimiento reducido via
prefers-reduced-motion
Categorias de Componentes
Primitivas de UI
Bloques de construccion basicos. Todas las primitivas documentadas y disponibles en el playground:
| Componente | Descripcion |
|---|---|
| Button | Variantes primary, secondary, outline, ghost, link |
| Input | Inputs de texto, numero, email, contrasena |
| Textarea | Input de texto multi-linea |
| Label | Etiquetas de formulario con accesibilidad |
| Card | Card, CardHeader, CardTitle, CardDescription, CardContent |
| Badge | Badges de estado y conteo |
| Alert | Alert, AlertTitle, AlertDescription |
| Dialog | Modal con DialogTrigger, DialogContent, DialogHeader, DialogFooter |
| Select | SelectTrigger, SelectValue, SelectContent, SelectItem, SelectGroup, SelectLabel |
| Tabs | Tabs, TabsList, TabsTrigger, TabsContent |
| Progress | Barra de progreso (value/max) |
| Tooltip | Tooltips al pasar el cursor |
| Dropdown Menu | Menus de contexto |
| Accordion | Secciones colapsables |
| Avatar | Avatares de usuario |
| Separator | Divisores visuales |
| Switch | Interruptor toggle |
| Checkbox | Input checkbox |
| Radio Group | Grupos de radio buttons |
| Slider | Slider de rango |
| Calendar | Selector de fecha |
| Popover | Contenido popover |
| Collapsible | Contenido expandir/colapsar |
| Skeleton | Placeholders de carga |
| Scroll Area | Scrollbars personalizados |
| Theme Toggle | Modo oscuro/claro |
| Language Selector | Selector de idioma (es/en) |
Campos de Formulario
Sistema de formularios dirigido por esquemas con 53 tipos de campo, validacion integrada y layout automatico. Soporta validacion basada en JSON Schema y Zod.
Widgets
Componentes especificos del dominio organizados por categoria: graficas, reproductores multimedia, integraciones sociales, controles IoT, conectores Nextcloud y herramientas de automatizacion.
Playground Interactivo
Demos en vivo de componentes con props editables y vista previa en tiempo real.
Uso
Todos los componentes se importan desde los directorios de componentes del proyecto:
// Primitives
import { Button } from '@/components/ui/button';
import { Card, CardHeader, CardContent } from '@/components/ui/card';
import { Dialog, DialogContent, DialogTrigger } from '@/components/ui/dialog';
// Form fields
import { Input } from '@/components/ui/input';
import { Select, SelectContent, SelectItem } from '@/components/ui/select';
// Domain widgets
import { MotionClipControl } from '@/components/iot/motion-clip-control';
import { UtilizationWidget } from '@/components/whms/dashboard/utilization-widget';