TCM Design System

TCM Design System

v1
by
V
Vijayraghavan
TCM Design System
Loading...
TCM Design System
AD
Piattaforma UI enterprise

TCM Design System

Un sistema di design completo, accessibile e basato su token per prodotti enterprise, moduli complessi, flussi di lavoro multimediali avanzati e applicazioni ad alta densità di dati.

15aree della specifica
120+componenti e pattern
AAObiettivo WCAG

Accessibile per impostazione predefinita

Controlli ottimizzati per la tastiera, focus visibile, stati ARIA, regioni live, supporto per riduzione dei movimenti e modalità ad alto contrasto.

Architettura componibile

Token, componenti, stato dei moduli e comportamenti sono separati così che i team possano integrare React, Vue, Angular o Web Components.

Scalabilità enterprise

I pattern coprono data grid densi, moduli adattivi, file manager, anteprime multimediali e strumenti per sviluppatori.

Mappa di copertura

Matrice di implementazione delle specifiche

Fondazione

Design Token e Tematizzazione

Tutte le decisioni visive sono guidate da variabili CSS che possono essere cambiate a runtime senza ricaricare la pagina.

Selettore tema a runtime

Scegli sistema, chiaro, scuro, brand personalizzato o alto contrasto. Le preferenze vengono salvate con le API di archiviazione Miniapps quando disponibili.

Anteprima token in tempo reale

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

Categorie di token

Colori, tipografia, spaziatura, elevazione, opacità, sfumature, z-index, movimento e breakpoint.

Controlli

Controlli di input principali

Input convalidati, mascherati, compatibili con i media e in stile editor per builder di form aziendali.

Campi standard, numerici e mascherati

Editor di testo formattato, markdown e codice

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

Caricamento di file e immagini

Rilascia i file quiImmagini, PDF, audio, video fino a 50 MB

Selettore colore

Tavoletta per firme

Data, ora e localizzazione

Intervallo, opacità e cursori

Preview

Tag, chip e selezione multipla

Pattern di scelta

Controlli di selezione

Controlli di selezione singola, multipla, gerarchica, geografica, visiva e in stile procedura guidata.

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.

Architettura

Architettura dei form

Form reattivi e dinamici con gruppi, array, controlli annidati, dipendenze, validazione asincrona e layout adattivi.

Dynamic form builder

Smart wizard

  1. Profile
  2. Rules
  3. Review

Validation and state model

Interazione

Pulsanti e azioni

Azioni standard, invio/reset, pulsanti icona, collegamenti ipertestuali, caricamento, disabilitato, premuto, gruppi di azioni e FAB speed dial.

Developer API
Stato

Feedback e indicatori

Avanzamento, spinner, scheletri, toast, snackbar, avvisi, notifiche, badge, modali, popover e tooltip.

Alerts and notifications

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

Progress and loading

Dati aziendali

Controlli di visualizzazione e dati

Tabelle, griglie, modifica in linea, ordinamento, filtro, lazy loading, schede, elenchi, paginazione, carosello, galleria e lettori multimediali.

ServiceStatusRegionLatencyActions

Cards and lists

  • BillingUpdated 2m ago
  • IdentityHealthy
  • SearchIndexing

Carousel

Media player

Risorse

Funzionalità avanzate per media e file

Gestione file, navigazione tra cartelle, ordinamento tramite trascinamento, anteprime di immagini/audio/video/PDF, compressione e flussi di lavoro di conversione.

File manager tree

    Media previewer

    Select an asset

    Conversion pipeline

    1. Validate
    2. Compress
    3. Convert
    4. Publish
    Composizione

    Layout e contenitori

    Flex, griglia, pannelli comprimibili, caroselli, colonne responsive, layout automatici, elementi fissi e controlli di 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.
    Impostazioni

    Utility e Impostazioni

    Geolocalizzazione, mappe, lettori QR/barcode, widget meteo, selettori di tema, controlli di font/sfondo/bordo/ombra e modalità colore adattive.

    Geolocation and weather

    Location output appears here.

    QR and barcode

    Scanner-ready surface for camera integrations.

    Visual settings

    Modello di runtime

    Moduli — Gestione di eventi e stato

    Hook di ciclo di vita, eventi di convalida, dipendenze, binding di dati asincroni, annulla/ripristina, salvataggio automatico, ripristino, tracciamento dello stato e animazioni.

    Event timeline

    Undo, redo, auto-save

    Idle
    A11Y

    Accessibilità e usabilità

    Pratiche WCAG 2.1 AA per tastiera, screen reader, contrasto, indicatori di focus, riduzione del movimento e usabilità multi-dispositivo.

    Checklist

    Live region

    Contrast AA7.8:1
    Adattivo

    Design responsive e adattivo

    Layout mobile-first, breakpoint adattivi, target touch, schede scorrevoli, overlay compatibili con la tastiera e densità reattiva.

    Breakpoint tokens

    Touch-friendly components

    DX

    Esperienza sviluppatore

    Supporto TypeScript, integrazioni con framework, playground Storybook, esportazione di token, API di theming, import modulari, CLI scaffolding e convenzioni di naming.

    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