Дизайн-система в коде даёт проекту вторую сторону: код. FISYCO читает ваш ui-kit из репозитория, сопоставляет его компоненты с библиотекой компонентов из Figma и показывает, где код и макет расходятся. Здесь описано, как её подключить и что FISYCO при этом читает.
Перед началом
- Вы мейнтейнер проекта, владелец или администратор пространства.
- К проекту подключён репозиторий. См. Подключение репозитория. Для GitHub мастер показывает все репозитории, к которым есть доступ у приложения FISYCO, поэтому ui-kit может лежать в отдельном репозитории. Для GitLab и Bitbucket мастер предлагает репозиторий проекта.
- В проекте есть библиотека компонентов: это макет, с которым сверяется код. См. Библиотека компонентов.
- Компоненты написаны на React. FISYCO читает файлы
.tsxи.jsx.
Пройдите мастер подключения
- Откройте проект. В разделе Из кода найдите карточку Дизайн-система в коде и нажмите Подключить.
- Репозиторий: выберите, откуда читать код, и нажмите Далее.
- Папка ui-kit: FISYCO покажет папки, похожие на ui-kit, с оценкой уверенности и причинами. Выберите папку и нажмите Подключить и проиндексировать.
- Макет: нажмите Подключить хотя бы у одной библиотеки компонентов, затем Далее. Без неё коду не с чем сверяться.
- Источники: подключите библиотеки токенов, иконок и иллюстраций, которые нужно учитывать, и нажмите Далее.
- Первая индексация: прогресс обновляется сам. Когда индекс собран, нажмите Открыть дизайн-систему.
Над списком папок указана ветка. Это Целевая ветка проекта, а если поле пустое, то main. На этом шаге FISYCO читает только пути, без содержимого файлов.
Если ни одна папка не похожа на дизайн-систему, обычно ui-kit лежит в другом репозитории. Нажмите Назад и выберите его.
Можно выбрать и Начать без репозитория. Тогда дизайн-система следит за изменениями компонентов в Figma и сообщает о ломающих. Сверка с кодом, расхождения и патчи появятся с репозиторием.
Источники: какие библиотеки читает дизайн-система
Библиотека учитывается, только когда она подключена. По умолчанию не берётся ничего.
Аудит пропускает выходную папку подключённой библиотеки, а библиотека видит своё применение в коде. Сама библиотека не меняется: синхронизация и доставка идут как раньше. Чтобы поменять источники позже, откройте дизайн-систему, затем Настройки, и воспользуйтесь переключателями в карточках Макет и Источники.
Продуктовые репозитории
Если ui-kit выходит пакетом, продукты, которые его используют, живут в других репозиториях. Добавьте их на вкладке Настройки, в карточке Продуктовые репозитории: вставьте адрес репозитория и нажмите Подключить.
- FISYCO читает их доступом проекта. Для GitHub установка приложения FISYCO должна включать каждый такой репозиторий.
- Там собирается только применение: какие компоненты вызываются, где и как часто. Импорты узнаются по имени пакета ui-kit. Имя берётся из ближайшего
package.jsonв папке ui-kit или выше. - Продуктовые репозитории читаются после каждой индексации дизайн-системы. В строке видно состояние и коммит последней индексации или причину, по которой чтение не удалось.
Что делает первая индексация
Первый прогон читает дерево репозитория, берёт снимок из Figma, читает файлы кода и сохраняет индекс. По пути:
- Файлы в папке ui-kit читаются целиком. Остальных
.tsxи.jsxчитается не больше 600; тесты, истории и конфиги пропускаются. - Компоненты попадают в индекс: имена, пропсы, оси и значения вариантов, стили по вариантам.
- Компоненты кода сопоставляются с макетом, находятся структурные расхождения.
- Считаются обходы: цвета мимо токенов, инлайн-SVG вместо иконок из библиотеки, дубли компонентов.
- Считаются применение подключённых библиотек и оценка здоровья.
На вкладке Настройки карточка Индекс показывает папку ui-kit и ветку, последний прогон и его коммит, найденные компоненты и просканированные файлы. Кнопка Переиндексировать запускает прогон вручную.
Дальше индекс обновляется сам. Новый прогон запускает push в отслеживаемую ветку, если он затронул ui-kit, файлы .tsx, .jsx или package.json. Кроме того, раз в 30 минут FISYCO проверяет ветку на случай, если вебхук молчит.
Что FISYCO читает и чего не делает никогда
FISYCO читает репозиторий через API вашего Git-провайдера: дерево путей, папку ui-kit, остальные файлы .tsx и .jsx и корневой package.json.
Ваш код FISYCO никогда не запускает. Ничего не собирается и не рендерится: всё, что он знает, получено разбором файлов.
В индексе хранятся имена, пути, номера строк, пропсы, значения вариантов, значения стилей и счётчики применения. Текст кода не хранится никогда: ни тел функций, ни строковых литералов, ни строк мест вызова. Хранятся последние 30 индексаций.
Кнопка Удалить дизайн-систему на вкладке Настройки удаляет всё, что выведено из репозитория. Библиотеки остаются.