Чеклист ревью нового компонента

Действуй как maintainer design system. Сделай гейт-ревью PR {{pr_link}} для компонента {{component}}. Не пропускай, пока все ключевые пункты не зелёные. Каждое замечание — конкретное, со ссылкой на файл/строку.

1. API sanity

• Имя соответствует конвенции (см. /design/component-naming-convention). Никаких Button2, MyX.
• Props < 10 на верхнем уровне. Если больше — есть ли реальная потребность или это «свалка опций»?
• Нет boolean-flag взрыва. Вместо isPrimary + isSecondary + isDanger — variant: 'primary' | 'secondary' | 'danger'.
• Polymorphic where it makes sense: <Button as="a" href="..."> вместо отдельного ButtonLink.
• Управляемое + неуправляемое: есть и value+onChange, и defaultValue.
• ref прокинут наружу через forwardRef (для form-элементов обязательно).
• Children API консистентен с остальной библиотекой (slots vs render-props vs compound).
• Нет утечки внутренних props — ...rest фильтруется через valid HTML attrs.

2. Accessibility

• Семантический HTML: <button> для кнопок, <a> для навигации, не <div onClick>.
• Доступное имя у каждого интерактивного: visible text, aria-label, aria-labelledby.
• Клавиатурная навигация: Tab, Enter, Space, Esc, стрелки где уместно.
• Фокус-индикатор: visible, контрастный, не outline: none без замены.
• ARIA правильно: role, aria-expanded, aria-haspopup, aria-controls — там где нужно, и нигде больше.
• Screen reader тест: VoiceOver / NVDA читает разумно? Объявляет состояние (expanded/checked)?
• Touch-target ≥ 44×44 для мобильных интерактивных элементов.
• Контраст текста и фокус-индикатора ≥ 4.5:1 в light и dark.
• Reduced motion: респектит prefers-reduced-motion.

3. RTL и i18n

• Логические свойства: margin-inline-start вместо margin-left, padding-inline вместо padding-left/right.
• Иконки направленные (стрелки, chevron'ы) флипаются в RTL.
• Иконки «недирекциональные» (галочка, крестик) НЕ флипаются.
• Текст не обрезается на длинных переводах (немецкий +30%, японский: вертикальные знаки препинания).
• Числа и даты идут через Intl, не hard-coded.

4. Темизация

• Только семантические токены (layer 2). Никаких #fff / rgb(...) в коде компонента.
• Работает во всех axes: light/dark, density, brand (см. /design/theming-beyond-dark-mode).
• Не тянется в layer 1 (var(--gray-900) напрямую) — только через семантику.
• Screenshot в каждой теме приложен к PR.

5. Минимизация поверхности

• CSS не использует !important (кроме доказанных edge-кейсов).
• z-index — из токенов, не magic numbers.
• Нет global selectors (* { ... }, body { ... }) внутри компонента.
• Анимации через токены ease/duration, не inline cubic-bezier.

6. Docs и storybook

• README: что это, когда брать, когда НЕ брать, ссылки на похожие.
• Storybook story на каждый variant и state (default, hover, focus, disabled, loading, error).
• Контрол для всех ключевых props в storybook.
• MDX docs с примером кода, который можно скопировать.
• Changelog entry добавлен.

7. Тесты

• Unit-тесты на API: render, props, callbacks.
• A11y тесты: jest-axe или @axe-core/playwright — 0 violations.
• Keyboard interaction: userEvent.tab(), userEvent.keyboard('{Enter}').
• Visual regression snapshot (Chromatic / Playwright).
• Edge cases: пустые children, очень длинный текст, очень короткий.

Формат ревью

Один комментарий на PR в формате:

## Review of {{component}}
Status: ✅ ready / ⚠️ needs changes / ❌ blocked

### Blockers (must fix)
- file.tsx:L42 — ...

### Should fix
- file.tsx:L80 — ...

### Nice to have
- ...

### Approved areas
- API surface looks tight
- A11y passes axe

Anti-patterns (do NOT)

• ❌ Аппрув без проверки в dark mode. Минимум одна тема падёт.
• ❌ «Покрытие тестами 90%» как зелёный сигнал — покрытие ≠ корректность поведения.
• ❌ «Добавь size-prop потом» — поверхность API замораживается в первом релизе. Добавляй сейчас или докажи что не нужен.
• ❌ Пропустить storybook story «потому что docs есть» — story = живой контракт.
• ❌ outline: none без замены фокус-стиля — мгновенный блок.
• ❌ Игнорить i18n потому что «пока только английский» — переписывать всю CSS через год.
• ❌ Принимать компонент без forwardRef для form-элементов — сломает интеграцию с RHF / Formik.
• ❌ Одобрять API с 15 boolean-props — рефактор будет дороже первоначальной разработки.