Конвенция имён компонентов

Действуй как maintainer design system. Спроектируй и применяй конвенцию имён компонентов для {{library_path}} ({{framework}}). Цель — чтобы junior за 30 секунд понял, какой компонент брать, а не плодил MyButton2.

1. Аудит текущего состояния

1. Собери список всех компонентов в {{library_path}}: имя, путь, экспорт (default / named).
2. Найди подозрительные паттерны:
   • Цифры в конце: Button2, CardNew, ModalV2
   • Префиксы автора/команды: MyButton, AppCard, TempModal
   • Дубликаты с разной капитализацией: Dropdown и DropDown
   • Синонимы на одну роль: Popup / Modal / Dialog / Overlay
3. Сгенерируй таблицу: компонент | проблема | предлагаемое имя.

2. Правила именования

Базовое имя — существительное, PascalCase

• Button, Card, Avatar, Dialog. Без артиклей и глаголов.
• Если домен — добавь как префикс: UserAvatar, OrderCard. Доменные компоненты живут не в ui/, а в features/.

Варианты по контенту — суффикс

• IconButton — кнопка только с иконкой.
• SplitButton — кнопка + dropdown.
• ButtonGroup — контейнер для серии кнопок.
• ButtonLink — кнопка-ссылка (визуально кнопка, семантически <a>).

Composite / составные — namespace через точку

• Card.Header, Card.Body, Card.Footer — части одного компонента.
• Dialog.Trigger, Dialog.Content, Dialog.Close — связанные роли.
• Экспортируем как Card с присвоенными свойствами.

Префиксы — только когда нужно различить роль

• Base* — низкоуровневый headless: BaseButton, BaseInput. Не используется в продукте напрямую.
• With* — HOC: WithTooltip, WithAuth. Указывает на функцию-обёртку.
• As* — рендер-проп / polymorphic: Button as="a", не отдельный компонент.

Запреты

• ❌ Цифры в имени: Button2, ModalV3.
• ❌ Префиксы команды / автора: MyX, AppX, TempX.
• ❌ Префиксы технологии: ReactCard, TSDialog.
• ❌ Аббревиатуры без расшифровки в docs: DDM, TBR.

3. Что делать с дубликатами

• Если 2 компонента делают одно и то же — выбери канон, второй пометь deprecated (см. /design/component-deprecation-flow).
• Если у компонентов разная семантика, но похожие имена — добавь различающий суффикс: Modal (блокирующий) vs Drawer (с боку) vs Popover (привязан к якорю).
• Если синонимы оправданы — задокументируй в README матрицу: "Когда использовать что".

4. Namespacing для больших систем

• Префикс пакета: @acme/ui-button, @acme/ui-form-input.
• В TS типах: type ButtonProps, type ButtonVariant — рядом с компонентом.
• Для CSS-классов: BEM или data-component="Button" — чтобы grep по data-component находил всё.

Формат вывода

1. Таблица аудита текущих имён.
2. Финальная конвенция (≤ 1 страницы README).
3. Список переименований с миграцией: OldName → NewName + одна команда codemod.
4. Cheatsheet: «надо назвать новый компонент → задай 3 вопроса → имя».

Anti-patterns (do NOT)

• ❌ Не используй New, Old, V2, Final, Real в имени.
• ❌ Не называй по визуалу (BlueButton, BigCard) — визуал меняется, имя нет.
• ❌ Не плоди Button, PrimaryButton, SecondaryButton — это одна сущность с props variant.
• ❌ Не смешивай домен и UI: PaymentButton живёт в features/payment, не в ui/.
• ❌ Не вводи новую конвенцию без миграции старого — иначе через месяц два мира.
• ❌ Не оставляй MyButton2 «потому что используется в трёх местах». Переименуй сейчас.