Vista General
Paquetes: @tiendana/web-foundation @tiendana/utils tiendana_uikit
Biblioteca de componentes UI reutilizables que funcionan en CSS/HTML, Angular y Flutter.
Características
✅ Multi-plataforma - Compatibles con CSS, Angular, Flutter
✅ Design system - Basados en tokens de diseño
✅ Consistente - Mismo look & feel entre plataformas
✅ Accesible - Siguiendo estándares WCAG 2.1 AA
✅ Documentado - Demos visuales y ejemplos de código
✅ Mantenible - Código limpio y bien estructurado
Componentes Disponibles
Interacciones
- Button - Botones con múltiples variantes, tamaños y estilos
- Form Element - Campo de formulario con etiqueta flotante y estados de validación
- Select - Selector con lista desplegable, búsqueda y hoja a pantalla completa en móvil
- Datepicker - Campo de fecha y su calendario desplegable
Navegación y Feedback
- Navigation - Barra de navegación con variante flotante
- Snackbar - Sistema de notificaciones con cola automática y animaciones
- Content Placeholder - Esqueletos con efecto shimmer para estados de carga
Contenido
- Blockquote - Bloques de mensajes con iconos y gradientes de borde
- Table - Tablas estilizadas con soporte para formularios
- Chip - Etiquetas compactas de estado y categoría
- Badges - Cinta de entorno de pruebas
Soporte de Plataformas
| Componente | CSS/HTML | Angular | Flutter |
|---|---|---|---|
| Button | ✅ | ✅ (CSS) | ✅ |
| Navigation | ✅ | ✅ (CSS) | ✅ |
| Snackbar | ✅ | ✅ (JavaScript puro) | ✅ |
| Blockquote | ✅ | ✅ (CSS) | ✅ |
| Table | ✅ | ✅ (CSS) | ⏳ Pendiente |
| Form Element | ✅ | ✅ (tdn-form-element) | - |
| Select | ✅ | ✅ (TdnSelect) | - |
| Datepicker | ✅ | ✅ (TdnInputDate) | - |
| Chip | ✅ | ✅ (CSS) | - |
| Content Placeholder | ✅ | ✅ (CSS) | - |
| Badges | ✅ | ✅ (CSS) | - |
Los componentes marcados como "CSS" funcionan en Angular usando las clases CSS de WebFoundation directamente en tus templates. No requieren componentes Angular específicos.
Snackbar usa JavaScript puro (@tiendana/utils) y es compatible con cualquier framework JavaScript incluyendo Angular.
Form Element, Select y Datepicker son la capa de estilos de componentes de @tiendana/ngx-core/forms: allí se aplican las clases de estado automáticamente.
Tokens de Diseño
Todos los componentes usan tokens de diseño para garantir consistencia entre plataformas:
- Colores: Paleta de marca (Forrest, Natura, Trust, etc.)
- Espaciado: Sistema de spacing (xs, sm, md, lg, xl)
- Tipografía: Host Grotesk con pesos variables
- Bordes: Border radius y border width consistentes
- Sombras: Elevación con Material 3
Consulta Fundamentos para más detalles.
Ver También
- CSS Overview - Sistema CSS completo
- Angular Overview - Componentes Angular específicos
- Foundations - Tokens de diseño
- Utilities - Funciones de utilidad