Resumen
Librería moderna de componentes React con TypeScript, diseñada con enfoque en simplicidad, accesibilidad y
extensibilidad. Incluye componentes fundamentales para aplicaciones web modernas con soporte completo de ARIA,
múltiples variantes temáticas (light, dark, holographic, transparent) y API consistente.
Objetivos
• Proporcionar componentes React modernos y accesibles listos para producción.
• Ofrecer API simple y consistente para facilitar la adopción.
• Garantizar accesibilidad total con soporte ARIA completo.
• Permitir personalización mediante className y múltiples variantes.
• Mantener código TypeScript tipado sin ambigüedades.
Componentes principales
La librería incluye 38+ componentes listos para producción:
Formularios y Entrada: Input, Select, SearchBar, Toggle, Slider, Checkbox integrados.
Botones: Button (con animaciones pulse, shake, glow, wave), SocialButton (Google, Facebook,
GitHub, etc.), Badge, Chip.
Navegación: Navbar, Sidebar, Breadcrumb, Tabs, Pagination, Stepper, Dropdown, Drawer.
Contenedores: Card, ProductCard, Container, Grid, GridItem, Accordion.
Feedback: Modal, Alert, Toast, Tooltip, Spinner, ProgressBar, Skeleton, SkeletonCard.
Diseño: Typography (h1-h6, p, span), Divider, Spacer, Header.
Usuario: Avatar, UserProfile, LoginForm completo con OAuth.
Hooks: useToast para notificaciones programáticas.
Cada componente con múltiples variantes, tamaños y soporte completo de accesibilidad ARIA.
Características destacadas por componente
Button: 6 variantes (solid, outline, ghost, link), 3 tamaños, 4 animaciones, loading state,
iconos left/right, circular, fullWidth.
Modal: 6 posiciones (center, top, bottom, left, right, corners), 4 tamaños, 6 animaciones
(fade, slide, zoom), closeOnEscape, closeOnClickOutside.
LoginForm: Layout centered o with-side-image, OAuth buttons integrados, remember me, forgot
password, error handling.
Grid: 1-12 columnas, responsive (mobile/tablet breakpoints), gap configurable, align/justify
items.
Accordion, Tabs, Modal: Navegación por teclado completa (flechas, Home, End, Escape).
Toast: 9 posiciones, auto-dismiss configurable, actions personalizables, animaciones
suaves.
Skeleton: 4 variantes (text, circular, rectangular, rounded), animaciones pulse/wave,
multi-line support.
Sistema de variantes
Todos los componentes aceptan prop variant con opciones:
• light: Tema claro con fondo blanco/gris suave
• dark: Tema oscuro con fondos profundos
• holographic: Efectos de gradiente iridiscente
• transparent-light: Fondo transparente con texto claro
• transparent-dark: Fondo transparente con texto oscuro
Además, props size (small, medium, large) y className para extensión de estilos.
Accesibilidad (ARIA)
Accordion: aria-expanded en botones, aria-controls vinculando botón con panel, role="region" en
contenido.
Tabs: role="tablist"/"tab"/"tabpanel", aria-selected, aria-controls, gestión completa por
teclado.
Modal: role="dialog", aria-modal="true", aria-labelledby para título, cierre con Escape.
Input/Select: aria-invalid cuando state="error" para lectores de pantalla.
Todos los componentes interactivos con focus visible y keyboard navigation.
Instalación y uso
Instalación vía npm: npm install prismatik-ui
Importar estilos compilados: import 'prismatik-ui/styles.css'
Importar componentes: import { Button, Card, Modal } from 'prismatik-ui'
Requisitos: React 18+ y React DOM 18+.
Soporte dual package (ESM y CommonJS) con types incluidos.
Stack tecnológico
Core: React 18, TypeScript 5 con tipado estricto.
Estilos: CSS Modules para encapsulación, compilados a dist/styles.css.
Build: Rollup para dual package (ESM + CJS), generación de types.
Desarrollo: forwardRef donde aplica, API consistente, sin abreviaciones confusas.
Publicación: npm con exports configurados, tipos en dist/types/index.d.ts.
Convenciones de desarrollo
Código TypeScript completamente tipado sin any.
forwardRef en componentes que necesitan ref forwarding.
API consistente: variant, size, className en todos los componentes aplicables.
Enfoque en simplicidad, legibilidad y mantenibilidad del código.
CSS Modules para evitar conflictos de estilo globales.
Estado del proyecto
Librería funcional publicada en npm como prismatik-ui.
Sitio de documentación en desarrollo.
Disponible para instalación y uso en proyectos React actuales.
Publicación en npm
Paquete disponible en
npmjs.com/package/prismatik-ui.
Dual package con soporte ESM y CommonJS.
Types incluidos para autocompletado en TypeScript.
Estilos compilados listos para importar.