Назад

Компоненты · Средняя

Документировать контракт компонента

Описать props, события, ограничения и примеры использования компонента.

Компоненты: визуальный контекст этапа
Аудиопересказ пунктаПолная версия материала для прослушивания
Прослушано 0%
Скачать

Быстро понять за 2 минуты

Описать props, события, ограничения и примеры использования компонента.

Главная пользаДокументация снижает неправильное использование компонента и ускоряет onboarding.
Первое действиеОпишите обязательные и опциональные props.
Готово, когдаЕсть примеры использования.

Контекст

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

ЦельДокументация снижает неправильное использование компонента и ускоряет onboarding.
ДействиеОпишите обязательные и опциональные props.
ПроверкаЕсть примеры использования.

Что это дает

Документация снижает неправильное использование компонента и ускоряет onboarding.

Как выполнить

  1. Опишите обязательные и опциональные props.
  2. Добавьте примеры типовых сценариев.
  3. Зафиксируйте ограничения и accessibility требования.

Критерии приемки

  • Есть примеры использования.
  • Props понятны без чтения внутреннего кода.
  • Ограничения явно указаны.

Типичные ошибки

  • Документировать только красивый пример.
  • Не описывать controlled/uncontrolled режим.
  • Не обновлять docs после изменения API компонента.

Инструменты

StorybookMDXTypeScript

Рабочий артефакт

UI inventory

Карта компонентов

Список компонентов, их props, variants, states и связь с дизайн-системой.

  • Components
  • Variants
  • Duplication
  • Design tokens

Контроль качества

Артефакт

Карта компонентов

Метрика проверки

Есть примеры использования.

Когда пересматривать

После изменения пользовательского сценария, дизайна, API-контрактов, релизов и замечаний по доступности.

Что передать дальше

Сценарий, состояние интерфейса, источник данных, критерии доступности, тесты и ограничения адаптива.

Перед отметкой выполнено: Есть примеры использования.

Как применять

Начинайте с пользовательского действия и состояния интерфейса. Затем проверьте данные, адаптивность, доступность, ошибки и производительность. Хороший frontend-пункт помогает понять, что увидит пользователь, как интерфейс поведет себя в крайних состояниях и чем подтверждается качество реализации.

Режим обучения

Прочитайте материал, прослушайте аудио и проверьте понимание по коротким вопросам. Ответ раскрывается после попытки сформулировать его самостоятельно.

1. Какую основную пользу должен дать этот пункт?
2. Какой первый практический шаг нужно выполнить?
3. По какому критерию можно понять, что пункт выполнен?