dev.md

Чек-лист компонента

• Поддержан asChild, если компонент предполагает юзкейсы с полиморфным компонентом
• Во внутренние элементы компонента прокинут innerClassNames
• Указнан displayName
• Компонент обернут в forwardRef
• Типы/интерфейсы экспортированы наружу
• Пропы компонента соответствуют пропам ДС в фигме (одинаковый нейминг, одинаковые значения)
• Написан readme в директории компонента с кратким описанием и примерами
• Селекторы css имеют минимально возможную специфичность

Нейминг css переменных

CSS переменные составляются по следующему правилу: --Префикс-скоуп__элемент_свойство:

• Префикс: --MaxUi
• Скоуп:
  • --MaxUi-Button — переменная, которая используется в компоненте Button
  • --MaxUi-external — переменная используется для проброса значений в дочерние элементы, например, фон Counter внутри Button
• Элемент, опционально: --MaxUi__iconBefore — переменная для внутреннего элемента iconBefore в Button
• Свойство: --MaxUi-Button_foreground, --MaxUi-Button__iconBefore_background

Структура компонента

• Component.tsx
• Component.module.scss
• index.ts — экспорт компонента и типов наружу
• helpers.ts — содержит хелперы, которые используются только в этом компоненте
• /parts — внутренние саб-компоненты, которые используются только в родительском компоненте

Knowledges

• Токены из фигмы экспортируются через плагин variables2css