Урок 4: Варианты и композиция — один компонент, много форм
У вас есть `PrimaryButton`, `SecondaryButton`, `GhostButton` — три компонента с одной и той же скопированной разметкой. Продакт-менеджер просит скруглить углы у всех, и вы правите три файла. Этот урок научит вас создавать один `Button` с prop-свойством `variant`, которое сопоставляется с классами на
Варианты — как меню в кофейне: есть одна машина, и вы выбираете размер и молоко. Вы не покупаете отдельную машину под каждый напиток — вы составляете нужное из одних и тех же частей.
- вариант компонента
- Одна из нескольких форм одного и того же компонента — `primary`, `secondary`, `ghost`, — выбираемая через prop-свойство, а не отдельным компонентом на каждую форму.
- карта вариантов
- Объект, сопоставляющий каждое значение prop-свойства с его классами (часто через `cva`), — единый источник истины для всех форм компонента.
- композиция
- Построение поведения из составных частей (props, варианты) вместо дублирования кода — добавление формы это новая запись в карте, а не новый файл.
- стилизация на основе props
- Выбор стиля из значений prop-свойств (`variant`, `size`), переводимых в классы, — так что API компонента описывает намерение, а не список классов.
