Sistema de diseño TCM

Sistema de diseño TCM

v1
by
V
Vijayraghavan
Sistema de diseño TCM
Loading...
Sistema de diseño TCM
AD
Plataforma de interfaz empresarial

Sistema de diseño TCM

Un sistema de diseño integral, accesible y basado en tokens para productos empresariales, formularios complejos, flujos de trabajo de medios enriquecidos y aplicaciones con gran volumen de datos.

15áreas de la especificación
120+componentes y patrones
AAobjetivo WCAG

Accesible por defecto

Controles optimizados para teclado, enfoque visible, estados ARIA, regiones en vivo, compatibilidad con movimiento reducido y modos de alto contraste.

Arquitectura componible

Tokens, componentes, estado de formularios y comportamientos están separados para que los equipos puedan integrar React, Vue, Angular o Web Components.

Escala empresarial

Los patrones cubren cuadrículas de datos densas, formularios adaptativos, administradores de archivos, vistas previas de medios y herramientas para desarrolladores.

Mapa de cobertura

Matriz de implementación de la especificación

Fundamentos

Design Tokens y Temas

Todas las decisiones visuales están impulsadas por variables CSS que se pueden cambiar en tiempo de ejecución sin recargar la página.

Selector de tema en tiempo de ejecución

Elige sistema, claro, oscuro, marca personalizada o alto contraste. Las preferencias se guardan con la API de almacenamiento de Miniapps cuando está disponible.

Vista previa en vivo de tokens

Healthy Warning
:root { --tcm-color-primary: ...; --tcm-radius-md: ...; }

Categorías de tokens

Colores, tipografía, espaciado, elevación, opacidad, degradados, z-index, movimiento y puntos de quiebre.

Controles

Controles de entrada principales

Entradas validadas, enmascaradas, con soporte para medios y estilo editor para creadores de formularios empresariales.

Campos estándar, numéricos y enmascarados

Editor de texto enriquecido, markdown y código

<tcm-input required validation="email" />

Carga de archivos e imágenes

Suelta los archivos aquíImágenes, PDF, audio, video de hasta 50 MB

Selector de color

Panel de firma

Fecha, hora y localización

Rango, opacidad y controles deslizantes

Preview

Etiquetas, chips y selección múltiple

Patrones de elección

Controles de selección

Controles de selección simples, múltiples, jerárquicos, geográficos, visuales y tipo asistente.

Checkbox, radio, toggles

Selectors

Icon, font, shape, pattern

Tree view

    • Colors
    • Typography
    • Motion
    • Inputs
    • Data Grid
    • Overlays

Stepper

  1. Account
  2. Permissions
  3. Review

Tabs and accordion

Advanced options

Expandable panels support keyboard access and nested content.

Arquitectura

Arquitectura de formularios

Formularios reactivos y dinámicos con grupos, arreglos, controles anidados, dependencias, validación asíncrona y diseños adaptativos.

Dynamic form builder

Smart wizard

  1. Profile
  2. Rules
  3. Review

Validation and state model

Interacción

Botones y acciones

Acciones estándar, enviar/restablecer, botones de ícono, hipervínculos, carga, deshabilitado, presionado, grupos de acciones y marcador de posición de FAB.

Developer API
Estado

Comentarios e indicadores

Progreso, indicadores de carga, esqueletos, toast, snackbar, alertas, notificaciones, insignias, modales, popovers y tooltips.

Alerts and notifications

Scheduled maintenance Sunday 02:00 UTC.
Storage quota is above 95%.
Database connection failed. Retrying.

Progress and loading

Datos empresariales

Controles de visualización y datos

Tablas, cuadrículas, edición en línea, ordenamiento, filtrado, carga diferida, tarjetas, listas, paginación, carrusel, galería y reproductores de medios.

ServiceStatusRegionLatencyActions

Cards and lists

  • BillingUpdated 2m ago
  • IdentityHealthy
  • SearchIndexing

Carousel

Media player

Recursos

Funciones avanzadas de medios y archivos

Administrador de archivos, navegación por carpetas, orden mediante arrastrar y soltar, previsualizadores de imagen/audio/video/PDF, compresión y flujos de trabajo de conversión.

File manager tree

    Media previewer

    Select an asset

    Conversion pipeline

    1. Validate
    2. Compress
    3. Convert
    4. Publish
    Composición

    Diseño y contenedores

    Flex, grid, paneles plegables, carruseles, columnas responsivas, diseños automáticos, elementos fijos y controles de desbordamiento.

    Responsive auto-layout playground

    Flex area
    Grid area
    Sticky area
    Overflow area
    Collapsible panel

    Panels use semantic disclosure patterns and retain keyboard accessibility.

    Overflow controls

    Wide content inside a contained scroll region with clear affordances.
    Configuración

    Utilidades y configuración

    Geolocalización, mapas, escáneres de QR/códigos de barras, widgets del clima, selectores de tema, controles de fuente/fondo/borde/sombra y modos de color adaptativos.

    Geolocation and weather

    Location output appears here.

    QR and barcode

    Scanner-ready surface for camera integrations.

    Visual settings

    Modelo de ejecución

    Formularios — eventos y gestión de estado

    Ganchos de ciclo de vida, eventos de validación, dependencias, enlace de datos asíncrono, deshacer/rehacer, guardado automático, recuperación, seguimiento de estado y animaciones.

    Event timeline

    Undo, redo, auto-save

    Idle
    Accesibilidad

    Accesibilidad y usabilidad

    Prácticas WCAG 2.1 AA para teclado, lectores de pantalla, contraste, indicadores de foco, movimiento reducido y usabilidad entre dispositivos.

    Checklist

    Live region

    Contrast AA7.8:1
    Adaptativo

    Diseño responsivo y adaptativo

    Diseños mobile-first, puntos de quiebre adaptativos, objetivos táctiles, pestañas deslizables, superposiciones compatibles con teclado y densidad adaptable.

    Breakpoint tokens

    Touch-friendly components

    Experiencia de desarrollo

    Experiencia del desarrollador

    Compatibilidad con TypeScript, integraciones con frameworks, entornos de prueba en Storybook, exportación de tokens, APIs de tematización, importaciones modulares, generación con CLI y convenciones de nombres.

    TypeScript component API

    import { Button, ThemeProvider } from '@tcm/design-system';

<ThemeProvider mode="system" tokens={customTokens}>
  <Button variant="primary" loading={saving}>Save</Button>
</ThemeProvider>

    CLI and token export

    npx tcm-ui generate component data-grid
npx tcm-ui tokens export --format figma
npx tcm-ui storybook start