Система дизайна TCM

Система дизайна TCM

v1
by
V
Vijayraghavan
Система дизайна TCM
Loading...
TCM Design System
AD
Платформа интерфейса для предприятий

Система дизайна TCM

Комплексная, доступная, управляемая токенами дизайн‑система для корпоративных продуктов, сложных форм, рабочих процессов с богатыми медиа и приложений с большим объёмом данных.

15области спецификаций
120+компоненты и паттерны
AAцель WCAG

Доступно по умолчанию

Управление с клавиатуры, видимая фокусировка, состояния ARIA, живые области, поддержка уменьшенного движения и режимы высокого контраста.

Компонентная архитектура

Токены, компоненты, состояние форм и поведения разделены, поэтому команды могут интегрировать React, Vue, Angular или веб-компоненты.

Масштаб для предприятий

Паттерны охватывают плотные таблицы данных, адаптивные формы, файловые менеджеры, предпросмотр мультимедиа и инструменты для разработчиков.

Карта покрытия

Матрица реализации спецификаций

Основы

Дизайн‑токены и темизация

Все визуальные решения управляются CSS‑переменными, которые можно переключать во время выполнения без перезагрузки страницы.

Переключатель темы во время выполнения

Выберите системную, светлую, тёмную, пользовательский бренд или высокую контрастность. Настройки сохраняются через Miniapps storage API, когда он доступен.

Живой предпросмотр токенов

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

Категории токенов

Цвета, шрифты, расстояния, подъём (elevation), непрозрачность, градиенты, z-index, анимация и брейкпоинты.

Элементы управления

Базовые элементы ввода

Проверяемые, маскируемые, поддерживающие медиа и редактороподобные поля ввода для корпоративных конструкторов форм.

Стандартные, числовые и маскированные поля

Редактор форматированного текста, Markdown и кода

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

Загрузка файлов и изображений

Перетащите файлы сюдаИзображения, PDF, аудио, видео до 50 МБ

Выбор цвета

Панель подписи

Дата, время и локализация

Диапазон, непрозрачность и ползунки

Preview

Теги, чипсы и множественный выбор

Паттерны выбора

Элементы управления выбором

Элементы выбора с одним, множественным, иерархическим, географическим, визуальным и пошаговым (мастер) выбором.

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.

Архитектура

Архитектура форм

Реактивные и динамические формы с группами, массивами, вложенными контролами, зависимостями, асинхронной валидацией и адаптивными макетами.

Dynamic form builder

Smart wizard

  1. Profile
  2. Rules
  3. Review

Validation and state model

Взаимодействие

Кнопки и действия

Стандартные действия, отправка/сброс, кнопки-значки, гиперссылки, загрузка, отключённые и нажатые состояния, группы действий и кнопка быстрого набора (FAB).

Developer API
Статус

Обратная связь и индикаторы

Индикаторы выполнения, спиннеры, скелетоны, тосты, снэкбары, предупреждения, уведомления, бейджи, модальные окна, поповеры и тултипы.

Alerts and notifications

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

Progress and loading

Корпоративные данные

Отображение и элементы управления данными

Таблицы, таблицы‑сетки, встроенное редактирование, сортировка, фильтрация, ленивые загрузки, карточки, списки, пагинация, карусель, галерея и медиаплееры.

ServiceStatusRegionLatencyActions

Cards and lists

  • BillingUpdated 2m ago
  • IdentityHealthy
  • SearchIndexing

Carousel

Media player

Ресурсы

Расширенные функции работы с медиа и файлами

Файловый менеджер, навигация по папкам, сортировка перетаскиванием, просмотр изображений/аудио/видео/PDF, сжатие и конвертация файлов.

File manager tree

    Media previewer

    Select an asset

    Conversion pipeline

    1. Validate
    2. Compress
    3. Convert
    4. Publish
    Композиция

    Макеты и контейнеры

    Flex, grid, складывающиеся панели, карусели, адаптивные колонки, автокомпоновка, фиксированные элементы и управление переполнением.

    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.
    Настройки

    Утилиты и настройки

    Геолокация, карты, сканеры QR/штрих‑кодов, виджеты погоды, переключатели тем, управление шрифтами/фоном/границами/тенями и адаптивные цветовые режимы.

    Geolocation and weather

    Location output appears here.

    QR and barcode

    Scanner-ready surface for camera integrations.

    Visual settings

    Модель выполнения

    Формы — события и управление состоянием

    Хуки жизненного цикла, события валидации, зависимости, асинхронное привязка данных, отмена/повтор, авто‑сохранение, восстановление, отслеживание состояния и анимации.

    Event timeline

    Undo, redo, auto-save

    Idle
    Доступность

    Доступность и удобство использования

    Практики WCAG 2.1 AA для клавиатуры, экранных дикторов, контраста, индикаторов фокуса, уменьшенного движения и межустройственной удобства.

    Checklist

    Live region

    Contrast AA7.8:1
    Адаптивность

    Адаптивный и отзывчивый дизайн

    Мобильные в первую очередь макеты, адаптивные брейкпоинты, целевые области для касаний, прокручиваемые свайпом вкладки, удобные для клавиатуры оверлеи и адаптивная плотность.

    Breakpoint tokens

    Touch-friendly components

    Опыт разработчика

    Опыт разработчика

    Поддержка TypeScript, интеграции с фреймворками, песочницы Storybook, экспорт токенов, API для темизации, модульные импорты, генерация через CLI и соглашения об именовании.

    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