React MFE Shell
Shell de micro frontends con sistema de diseno completo, 24 componentes, 666 tests y cumplimiento WCAG AA. Publicado en npm como @jonmatum/react-mfe-shell.
¿Qué es?
Un shell de micro frontends listo para producción con un sistema de diseno integral, componentes de formulario y accesibilidad como prioridad. Publicado en npm como @jonmatum/react-mfe-shell.
El proyecto incluye 14 componentes atómicos y 10 moleculares, siguiendo principios de diseno atómico con TypeScript estricto y Tailwind CSS.
Componentes
Atómicos (14)
Avatar, Badge, Button, Code, Divider, FeatureChip, Heading, Icon, Input, Label, LoadingSpinner, Paragraph, Switch y Text.
Moleculares (10)
Card, Checkbox, FileUpload, FormField, Modal, Radio, SearchBox, Select, SwitchField y Textarea.
Características clave
- 666 tests con cobertura superior al 75%
- WCAG AA — cumplimiento completo de accesibilidad
- Sistema de temas — modos claro, oscuro y sistema con persistencia
- Design tokens — colores, espaciado y tipografía consistentes
- Tree shakeable — importa solo lo que necesitas
- Tres modos de integración — zero-config, preset de Tailwind o CSS-in-JS
¿Por qué importa?
Demuestra cómo construir un sistema de diseno compartido para arquitecturas de micro frontends con estándares de producción: accesibilidad, temas, validación de formularios y métricas automatizadas de calidad.
Referencias
- Repositorio en GitHub — jonmatum, 2025. Código fuente y documentación.
- Paquete en npm — jonmatum, 2025. Paquete publicado.
- Demo interactivo — jonmatum, 2025. Showcase de componentes.
Contenido relacionado
- Monorepos
Estrategia de organización de código donde múltiples proyectos coexisten en un único repositorio, compartiendo dependencias, configuración y herramientas de build.
- Micro Frontends
Patrón arquitectónico que extiende los microservicios al frontend, permitiendo que equipos independientes desarrollen y desplieguen partes de una aplicación web de forma autónoma.
- React
Biblioteca de JavaScript para construir interfaces de usuario mediante componentes declarativos y reutilizables, con un ecosistema que abarca desde SPAs hasta aplicaciones full-stack con Server Components.