TCM Design System

TCM Design System

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

TCM Design System

Sistem desain yang komprehensif, dapat diakses, dan digerakkan oleh token untuk produk enterprise, formulir kompleks, alur kerja media kaya, dan aplikasi dengan data berat.

15area spesifikasi
120+komponen & pola
AATarget WCAG

Dapat diakses secara bawaan

Kontrol berfokus pada keyboard, fokus yang terlihat, status ARIA, live region, dukungan pengurangan gerakan, dan mode kontras tinggi.

Arsitektur komposabel

Token, komponen, status formulir, dan perilaku dipisahkan sehingga tim dapat mengintegrasikan React, Vue, Angular, atau Web Components.

Skala enterprise

Pola mencakup grid data padat, formulir adaptif, pengelola berkas, pratinjau media, dan tooling pengembang.

Peta cakupan

Matriks implementasi spesifikasi

Fondasi

Design Tokens & Theming

Semua keputusan visual dikendalikan oleh variabel CSS yang dapat diubah saat runtime tanpa memuat ulang halaman.

Pengganti tema saat runtime

Pilih sistem, terang, gelap, merek kustom, atau kontras tinggi. Preferensi akan disimpan dengan Miniapps storage API jika tersedia.

Pratinjau token langsung

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

Kategori token

Warna, tipografi, spasi, elevasi, opasitas, gradasi, z-index, gerakan, dan breakpoint.

Kontrol

Kontrol Input Inti

Input tervalidasi, bertopeng, mampu media, dan bergaya editor untuk pembuat formulir perusahaan.

Bidang standar, numerik, dan bertopeng

Teks kaya, markdown, dan editor kode

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

Unggah file dan gambar

Letakkan file di siniGambar, PDF, audio, video hingga 50MB

Pemilih warna

Pad tanda tangan

Tanggal, waktu, dan pelokalan

Rentang, opasitas, dan penggeser

Preview

Tag, chip, dan multi-pilih

Pola pilihan

Kontrol Seleksi

Kontrol seleksi tunggal, ganda, hierarkis, geografis, visual, dan bergaya wizard.

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.

Arsitektur

Arsitektur Formulir

Formulir reaktif dan dinamis dengan grup, array, kontrol bertingkat, dependensi, validasi async, dan tata letak adaptif.

Dynamic form builder

Smart wizard

  1. Profile
  2. Rules
  3. Review

Validation and state model

Interaksi

Tombol & Aksi

Aksi standar, kirim/reset, tombol ikon, hyperlink, pemuatan, dinonaktifkan, ditekan, grup aksi, dan FAB speed dial.

Developer API
Status

Umpan Balik & Indikator

Progres, pemintal, kerangka (skeleton), toast, snackbar, peringatan, notifikasi, lencana, modal, popover, dan tooltip.

Alerts and notifications

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

Progress and loading

Data perusahaan

Kontrol Tampilan & Data

Tabel, grid, penyuntingan sebaris, pengurutan, pemfilteran, pemuatan lambat, kartu, daftar, paginasi, karusel, galeri, dan pemutar media.

ServiceStatusRegionLatencyActions

Cards and lists

  • BillingUpdated 2m ago
  • IdentityHealthy
  • SearchIndexing

Carousel

Media player

Aset

Fitur Media & File Lanjutan

Manajer file, navigasi folder, pengurutan seret-dan-lepas, pratinjau gambar/audio/video/PDF, kompresi, dan alur kerja konversi.

File manager tree

    Media previewer

    Select an asset

    Conversion pipeline

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

    Tata Letak & Kontainer

    Flex, grid, panel dapat diciutkan, carousel, kolom responsif, tata letak otomatis, elemen lengket, dan kontrol 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.
    Pengaturan

    Utilitas & Pengaturan

    Geolokasi, peta, pemindai QR/barcode, widget cuaca, pengganti tema, kontrol font/latar/border/bayangan, dan mode warna adaptif.

    Geolocation and weather

    Location output appears here.

    QR and barcode

    Scanner-ready surface for camera integrations.

    Visual settings

    Model runtime

    Formulir — Manajemen Peristiwa & State

    Lifecycle hook, peristiwa validasi, dependensi, binding data async, undo/redo, penyimpanan otomatis, pemulihan, pelacakan state, dan animasi.

    Event timeline

    Undo, redo, auto-save

    Idle
    A11Y

    Aksesibilitas & Kegunaan

    Praktik WCAG 2.1 AA untuk keyboard, pembaca layar, kontras, indikator fokus, gerakan berkurang, dan kegunaan lintas perangkat.

    Checklist

    Live region

    Contrast AA7.8:1
    Adaptif

    Desain Responsif & Adaptif

    Tata letak mobile-first, breakpoint adaptif, target sentuh, tab yang dapat digeser, overlay ramah keyboard, dan kepadatan responsif.

    Breakpoint tokens

    Touch-friendly components

    DX

    Pengalaman Pengembang

    Dukungan TypeScript, integrasi kerangka kerja, playground Storybook, ekspor token, API tema, impor modular, scaffolding CLI, dan konvensi penamaan.

    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