ds-coverage
ds-coverage считает по импортам, какая доля каталога дизайн-системы задействована в коде, какие экспорты не используются и где рядом появились локальные компоненты с теми же именами.
Зачем
В репозитории может лежать дизайн-система на сорок компонентов, а продуктовые экраны рядом всё равно собирают из своих Button и Modal. На ревью это всплывает поздно.
ds-coverage проходит по импортам и показывает три вещи: какие компоненты системы реально используются, какие лежат мёртвым грузом и где в продукте написали локальный дубль с тем же именем.
Установка
# Run directly (no install)
npx @andrewaitken/ds-coverage src/ --ds @acme/ui
# Or install globally
npm i -g @andrewaitken/ds-coverageЗапуск
# Basic scan
ds-coverage src/ --ds @acme/ui
# Multiple packages
ds-coverage . --ds @acme/ui,@acme/icons
# With component inventory (finds unused)
ds-coverage src/ --ds @acme/ui --inventory components.json
# Markdown report
ds-coverage src/ --ds @acme/ui --format markdown --out coverage.md
# CI threshold (fail below 70%)
ds-coverage src/ --ds @acme/ui --inventory components.json --min 70Параметры
| Флаг | По умолчанию | Описание |
|---|---|---|
| [path] | . | Папка для проверки |
| --ds <packages> | — | Имена пакетов системы через запятую (обязательно) |
| --inventory <file> | — | JSON со всеми компонентами системы |
| --format <type> | terminal | terminal | markdown | json |
| --out <file> | — | Записать отчёт в файл |
| --min <percent> | — | Ошибка, если покрытие ниже порога |
| --version | Показать версию | |
| --help | Показать справку |
Что измеряет
- Используемые компонентыСколько компонентов из инвентаря системы хотя бы раз импортировано в коде
- Всего импортовСколько раз пакет системы импортировали по файлам проекта
- Локальные компонентыКомпоненты из относительных путей — кандидаты на вынос в систему
- Дубли по имениЛокальные компоненты с тем же именем, что у системных — сигнал возможной повторной реализации
- НеиспользуемыеЭкспорты системы, которые нигде не импортированы (нужен
--inventory)
Под «покрытием» здесь понимается именно доля задействованного каталога системы (например, 34 из 39 экспортируемых компонентов = 87%) и карта совпадений имён, а не оценка визуального качества экранов.
Системой пользуются
Команда, которая использует почти весь каталог системы:
| Значение | Что значит |
|---|---|
| 34 | Компоненты системы |
| 87% | Доля каталога в импортах |
| 0 | Дубли |
Design System Coverage Report
──────────────────────────────
Package: @acme/ui
Components used: 34 of 39 (87%)
Total imports: 412
Unused components: Alert, Breadcrumb, Stepper, Timeline, Tree
─────────────────────────────
Files scanned: 186
DS component uses: 412
Custom components: 12
Top used:
Button (142)
Text (98)
Card (67)
Input (45)
Badge (38)Систему обходят
Код, где систему обходят:
| Значение | Что значит |
|---|---|
| 12 | Компоненты системы |
| 31% | Покрытие |
| 5 | Дубли |
Package: @acme/ui
Components used: 12 of 39 (31%)
Total imports: 54
Unused components: 27 components never imported
─────────────────────────────
Files scanned: 340
DS component uses: 54
Custom components: 89
⚠ Possible dupes: Button, Modal, Badge, Card, Input
Least used (1-2 imports):
Tooltip (2)
Accordion (1)
Tabs (1)Инвентарь
Чтобы найти неиспользуемые компоненты, передай JSON со всеми экспортами пакета системы:
Формат массива
["Button", "Card", "Modal", "Tooltip", "Badge", "Input", "Select"]Формат объекта
{
"components": ["Button", "Card", "Modal", "Tooltip", "Badge"]
}Можно указать index-файл пакета: ds-coverage сам разберёт экспорты.
CI
# GitHub Actions
- name: Check DS adoption
run: npx @andrewaitken/ds-coverage src/ --ds @acme/ui --inventory components.json --min 60
# Generate PR report
- name: DS Coverage Report
run: npx @andrewaitken/ds-coverage src/ --ds @acme/ui --format markdown --out coverage.md--min завершается с кодом 1, если покрытие ниже порога.