Saltar al contenido principal

Sistema de Diseño Tiendana

Bienvenido a la documentación completa del Sistema de Diseño Tiendana. Un lenguaje de diseño unificado y librería de componentes para Angular, Flutter y CSS/HTML.

¿Qué es el Sistema de Diseño Tiendana?​

El Sistema de Diseño Tiendana es un sistema de diseño multi-plataforma que asegura experiencias de usuario consistentes en aplicaciones web y móviles. Construido sobre una base de tokens de diseño derivados del manual de marca de Tiendana, proporciona:

Librerías Privadas de Tiendana​

Conjunto de librerías internas que proporcionan funcionalidades reutilizables y componentes especializados para el ecosistema de aplicaciones Tiendana.

Esta documentación corresponde a estas versiones:

PaqueteVersión
@tiendana/web-foundation^0.5.5
@tiendana/ngx-core^0.9.0
@tiendana/utils^0.5.0

@tiendana/api-types es dependencia de @tiendana/utils y dependencia peer de @tiendana/ngx-core (>=1.x.x).

@tiendana/web-foundation

Framework Agnostic

Sistema de diseño basado en el manual de marca de Tiendana. Proporciona estilos CSS, tokens de diseño y componentes visuales agnósticos al framework.

Características principales:
  • Design tokens del manual de marca
  • Sistema de colores Natura y Forrest
  • Tipografía Host Grotesk
  • Componentes CSS puros
  • Compatible con cualquier framework

@tiendana/ngx-core

Angular 19+

Librería moderna orientada a componentes Angular que proporciona directivas, servicios, pipes y componentes UI especializados. Utiliza signals, standalone components y el nuevo control flow.

Características principales:
  • Componentes UI con signals
  • Standalone components (sin NgModules)
  • Directivas reutilizables optimizadas
  • Pipes para transformación de datos
  • Un punto de entrada por área: ui, forms, pipes, validators, tracking y logomark
  • Analítica de producto con tdnTrack y TrackingService
  • El logomark animado como tdn-logomark
  • Tag Input, Country Display y más

@tiendana/utils

Framework Agnostic

Librería JavaScript pura sin dependencias de frameworks, diseñada para ser utilizada en cualquier proyecto web (React, Vue.js, Angular, Vanilla JS, etc.).

Características principales:
  • Funciones utilitarias JavaScript
  • Helpers para manipulación de datos
  • Validadores y formateadores
  • Tree-shakeable (sideEffects: false)
  • El logomark de Tiendana en @tiendana/utils/logomark
  • Solo depende de @tiendana/api-types (tipos)
  • Compatible con React, Vue.js, Angular

@tiendana/api-types

TypeScript

Definiciones de tipos, interfaces y enums compartidos que representan los modelos de datos de la API privada de Tiendana. Garantiza consistencia de tipos en todo el ecosistema.

Características principales:
  • Tipos TypeScript completos
  • Enums de estados y categorías
  • Interfaces de modelos de DB
  • Validación en tiempo de compilación
  • Dependencia de utils y peer de ngx-core

tiendana_uikit

Flutter

Librería de widgets y componentes para Flutter que implementa el Sistema de Diseño Tiendana para aplicaciones móviles iOS y Android.

Características principales:
  • Widgets nativos de Flutter
  • Implementación de tokens de diseño
  • Soporte para temas claro y oscuro
  • Iconografía y tipografía integradas
  • Componentes adaptativos
Paquetes Privados

Todos los paquetes npm @tiendana/* están alojados en AWS CodeArtifact privado. Autentica npm con Tiendana CLI (tdn auth npm) antes de instalar. Ver Configuración de CodeArtifact.

Logomark​

El logomark de Tiendana vive en @tiendana/utils/logomark como el custom element <tdn-logomark>, con su motor de expresiones, exportación a archivos y colourways según el fondo. En Angular se usa con signals desde @tiendana/ngx-core/logomark.

Tracking​

@tiendana/ngx-core/tracking ofrece analítica de producto con la directiva tdnTrack, TrackingService y AmplitudeProvider. Ver Tracking.

Primeros Pasos​

Elige tu plataforma para comenzar:

🅰️ Angular

Componentes, directivas, pipes y validadores para Angular 19+

🦋 Flutter

Widgets y utilidades para aplicaciones móviles y web en Flutter

🎨 CSS/HTML

Componentes CSS puros y utilidades JavaScript

Principios de Diseño​

Todos los componentes en todas las plataformas siguen los mismos principios de diseño:

  • Basado en tokens: Todos los valores de estilo provienen de tokens de diseño
  • Consistente: Misma apariencia en Angular, Flutter y CSS
  • Accesible: Componentes compatibles con WCAG 2.1 AA
  • Responsive: Layouts adaptativos mobile-first
  • Modo oscuro: Soporte integrado para temas claros y oscuros
  • Modular: Usa solo lo que necesitas

Estructura de la Documentación​

📚 Fundamentos​

Elementos de diseño básicos compartidos entre todas las plataformas:

  • Colores, tipografía, espaciado y tokens
  • Principios de diseño y guías de marca

🧩 Componentes​

Componentes UI con ejemplos para todas las plataformas:

  • Botones, inputs, tarjetas y más
  • Demos interactivos y ejemplos de código

🅰️ Específico de Angular​

Características únicas de Angular:

  • Componentes y directivas de UI, formularios y errores
  • Pipes para transformación de datos
  • Validadores de formularios
  • Tracking y analítica de producto
  • El componente tdn-logomark

🦋 Específico de Flutter​

Características únicas de Flutter:

  • Widgets personalizados
  • Utilidades específicas de Flutter

🎨 Específico de CSS​

Características únicas de CSS:

  • Clases utilitarias
  • Mixins y funciones SCSS

🛠️ Utilidades​

Utilidades JavaScript/TypeScript de @tiendana/utils:

  • Manipulación de datos (deepMerge, distinct, etc.)
  • Helpers de validación
  • Utilidades del navegador
  • El logomark de Tiendana y su motor de expresiones

Enlaces Rápidos​