Système de conception TCM

Système de conception TCM

v1
by
V
Vijayraghavan
Système de conception TCM
Loading...
TCM Design System
AD
Plateforme d’interface entreprise

Système de design TCM

Un système de design complet, accessible et piloté par des jetons pour les produits d’entreprise, les formulaires complexes, les flux de travail de médias riches et les applications à forte intensité de données.

15domaines de spécification
120+composants et modèles
AAcible WCAG

Accessible par défaut

Commandes axées sur le clavier, focus visible, états ARIA, régions dynamiques, prise en charge de la réduction des animations et modes à contraste élevé.

Architecture composable

Les jetons, composants, états de formulaire et comportements sont séparés afin que les équipes puissent intégrer React, Vue, Angular ou des composants Web.

Échelle entreprise

Les modèles couvrent des grilles de données denses, des formulaires adaptatifs, des gestionnaires de fichiers, des aperçus de médias et des outils pour développeurs.

Carte de couverture

Matrice de mise en œuvre des spécifications

Fondation

Design Tokens & Thématisation

Toutes les décisions visuelles sont pilotées par des variables CSS qui peuvent être modifiées à l’exécution sans recharger la page.

Commutateur de thème à l’exécution

Choisissez système, clair, sombre, marque personnalisée ou contraste élevé. Les préférences sont conservées avec l’API de stockage Miniapps lorsque celle-ci est disponible.

Aperçu en direct des jetons

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

Catégories de jetons

Couleurs, typographie, espacement, élévation, opacité, dégradés, z-index, mouvement et points de rupture.

Contrôles

Contrôles de saisie principaux

Champs validés, masqués, compatibles avec les médias et de type éditeur pour les générateurs de formulaires d’entreprise.

Champs standards, numériques et masqués

Éditeur de texte riche, markdown et code

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

Téléversement de fichiers et d’images

Déposez les fichiers iciImages, PDF, audio, vidéo jusqu’à 50 Mo

Sélecteur de couleur

Pavé de signature

Date, heure et localisation

Plages, opacité et curseurs

Preview

Étiquettes, puces et sélection multiple

Modèles de choix

Contrôles de sélection

Contrôles de sélection uniques, multiples, hiérarchiques, géographiques, visuels et par assistant.

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.

Architecture

Architecture des formulaires

Formulaires réactifs et dynamiques avec groupes, tableaux, contrôles imbriqués, dépendances, validation asynchrone et mises en page adaptatives.

Dynamic form builder

Smart wizard

  1. Profile
  2. Rules
  3. Review

Validation and state model

Interaction

Boutons & actions

Actions standard, envoi/réinitialisation, boutons d’icône, hyperliens, chargement, désactivé, enfoncé, groupes d’actions et menu d’action flottant (FAB).

Developer API
Statut

Retours & indicateurs

Progression, indicateurs de chargement, squelettes, toasts, snackbars, alertes, notifications, badges, fenêtres modales, popovers et info‑bulles.

Alerts and notifications

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

Progress and loading

Données d’entreprise

Affichage & contrôles de données

Tableaux, grilles, édition en ligne, tri, filtrage, chargement différé, cartes, listes, pagination, carrousel, galerie et lecteurs multimédias.

ServiceStatusRegionLatencyActions

Cards and lists

  • BillingUpdated 2m ago
  • IdentityHealthy
  • SearchIndexing

Carousel

Media player

Ressources

Fonctionnalités avancées pour les fichiers et les médias

Gestionnaire de fichiers, navigation dans les dossiers, classement par glisser-déposer, aperçus image/audio/vidéo/PDF, compression et flux de conversion.

File manager tree

    Media previewer

    Select an asset

    Conversion pipeline

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

    Disposition et conteneurs

    Flex, grille, panneaux repliables, carrousels, colonnes responsives, dispositions automatiques, éléments fixes et contrôles de débordement.

    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.
    Paramètres

    Utilitaires & Paramètres

    Géolocalisation, cartes, scanners QR/code-barres, widgets météo, changeurs de thème, contrôles de police/arrière-plan/bordure/ombre et modes de couleur adaptatifs.

    Geolocation and weather

    Location output appears here.

    QR and barcode

    Scanner-ready surface for camera integrations.

    Visual settings

    Modèle d’exécution

    Formulaires — gestion des événements et de l’état

    Hooks de cycle de vie, événements de validation, dépendances, liaison de données asynchrone, annuler/rétablir, enregistrement automatique, récupération, suivi d’état et animations.

    Event timeline

    Undo, redo, auto-save

    Idle
    A11Y

    Accessibilité & ergonomie

    Pratiques WCAG 2.1 AA pour le clavier, les lecteurs d’écran, le contraste, les indicateurs de focus, la réduction des animations et l’ergonomie multi‑appareils.

    Checklist

    Live region

    Contrast AA7.8:1
    Adaptatif

    Design réactif et adaptatif

    Mises en page mobile-first, points de rupture adaptatifs, cibles tactiles, onglets balayables, superpositions adaptées au clavier et densité réactive.

    Breakpoint tokens

    Touch-friendly components

    DX

    Expérience développeur

    Prise en charge TypeScript, intégrations de frameworks, bacs à sable Storybook, export des jetons, API de thématisation, imports modulaires, génération par CLI et conventions de nommage.

    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