Sistema de Design TCM

Sistema de Design TCM

v1
by
V
Vijayraghavan
Sistema de Design TCM
Loading...
TCM Design System
AD
Plataforma de UI corporativa

TCM Design System

Um sistema de design abrangente, acessível e orientado por tokens para produtos corporativos, formulários complexos, fluxos de trabalho de mídia avançados e aplicações orientadas a dados.

15áreas da especificação
120+componentes e padrões
AAMeta WCAG

Acessível por padrão

Controles focados em teclado, foco visível, estados ARIA, regiões dinâmicas, suporte a movimento reduzido e modos de alto contraste.

Arquitetura componível

Tokens, componentes, estado de formulários e comportamentos são separados para que as equipes possam integrar React, Vue, Angular ou Web Components.

Escala corporativa

Padrões cobrem grades de dados densas, formulários adaptativos, gerenciadores de arquivos, pré-visualização de mídia e ferramentas para desenvolvedores.

Mapa de cobertura

Matriz de implementação da especificação

Fundação

Design Tokens e Temas

Todas as decisões visuais são orientadas por variáveis CSS que podem ser alteradas em tempo de execução sem recarregar a página.

Trocador de tema em tempo de execução

Escolha entre sistema, claro, escuro, marca personalizada ou alto contraste. As preferências são mantidas com a API de armazenamento do Miniapps quando disponível.

Pré-visualização ao vivo dos tokens

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

Categorias de tokens

Cores, tipografia, espaçamento, elevação, opacidade, gradientes, z-index, movimento e breakpoints.

Controles

Controles de entrada principais

Entradas validadas, mascaradas, com suporte a mídia e no estilo editor para construtores de formulários corporativos.

Campos padrão, numéricos e mascarados

Editor de texto rico, markdown e código

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

Upload de arquivos e imagens

Solte os arquivos aquiImagens, PDF, áudio, vídeo de até 50 MB

Seletor de cores

Área de assinatura

Data, hora e localização

Intervalo, opacidade e controles deslizantes

Preview

Tags, chips e seleção múltipla

Padrões de escolha

Controles de seleção

Controles de seleção simples, múltipla, hierárquica, geográfica, visual e em estilo assistente.

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.

Arquitetura

Arquitetura de Formulários

Formulários reativos e dinâmicos com grupos, arrays, controles aninhados, dependências, validação assíncrona e layouts adaptáveis.

Dynamic form builder

Smart wizard

  1. Profile
  2. Rules
  3. Review

Validation and state model

Interação

Botões e Ações

Ações padrão, enviar/redefinir, botões de ícone, hyperlinks, carregando, desativado, pressionado, grupos de ações e discador rápido FAB.

Developer API
Status

Feedback e Indicadores

Progresso, spinners, skeletons, toast, snackbar, alertas, notificações, badges, modais, popovers e tooltips.

Alerts and notifications

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

Progress and loading

Dados corporativos

Exibição e Controles de Dados

Tabelas, grades, edição inline, ordenação, filtragem, carregamento sob demanda, cards, listas, paginação, carrossel, galeria e reprodutores de mídia.

ServiceStatusRegionLatencyActions

Cards and lists

  • BillingUpdated 2m ago
  • IdentityHealthy
  • SearchIndexing

Carousel

Media player

Assets

Recursos avançados de mídia e arquivos

Gerenciador de arquivos, navegação por pastas, ordenação por arrastar e soltar, visualizadores de imagem/áudio/vídeo/PDF, compressão e fluxos de trabalho de conversão.

File manager tree

    Media previewer

    Select an asset

    Conversion pipeline

    1. Validate
    2. Compress
    3. Convert
    4. Publish
    Composição

    Layout e Contêineres

    Flex, grid, painéis recolhíveis, carrosséis, colunas responsivas, auto-layouts, elementos fixos e controles de overflow.

    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.
    Configurações

    Utilitários e Configurações

    Geolocalização, mapas, leitores de QR/código de barras, widgets de clima, trocadores de tema, controles de fonte/fundo/borda/sombra e modos de cor adaptativos.

    Geolocation and weather

    Location output appears here.

    QR and barcode

    Scanner-ready surface for camera integrations.

    Visual settings

    Modelo de runtime

    Formulários — eventos e gerenciamento de estado

    Ganchos de ciclo de vida, eventos de validação, dependências, vinculação assíncrona de dados, desfazer/refazer, salvamento automático, recuperação, rastreamento de estado e animações.

    Event timeline

    Undo, redo, auto-save

    Idle
    A11Y

    Acessibilidade e Usabilidade

    Práticas WCAG 2.1 AA para teclado, leitores de tela, contraste, indicadores de foco, movimento reduzido e usabilidade entre dispositivos.

    Checklist

    Live region

    Contrast AA7.8:1
    Adaptativo

    Design responsivo e adaptativo

    Layouts mobile-first, pontos de interrupção adaptativos, alvos de toque, abas deslizáveis, sobreposições compatíveis com teclado e densidade responsiva.

    Breakpoint tokens

    Touch-friendly components

    DX

    Experiência do Desenvolvedor

    Suporte a TypeScript, integrações com frameworks, playgrounds no Storybook, exportação de tokens, APIs de temas, imports modulares, scaffolding via CLI e convenções de nomenclatura.

    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