Дизайн-система
Вопрос
Спроектируй библиотеку компонентов на несколько продуктов и команд.
Веди разговор вслух, как на секции. Начинать с решения - главная ошибка: первые полторы минуты только вопросы.
Попробуйте сами
Ответьте вслух за 2 минуты, как на собесе. Потом сверьтесь с тезисами: что прозвучало, а что нет.
Показать ответ и разбор
Коротко
Что должно прозвучать в ответе
уточнил число продуктов, команд и нужна ли темизация
токены отдельно от компонентов: цвета, отступы, типографика в переменных CSS
компоненты не знают о бизнес-логике и не ходят в сеть
публичный API компонента продуман: пробрасываются ...rest и ref
составные компоненты вместо десятка булевых пропсов
версионирование и правила ломающих изменений
доступность встроена в компоненты, а не остаётся потребителю
как компонент попадает в библиотеку: критерий, а не «показалось общим»
Что могут спросить следом
- Как выкатывать ломающие изменения, если библиотекой пользуются пять команд?
- Где граница между дизайн-системой и продуктовыми компонентами?
- Как сделать тёмную тему на токенах?
Разбор
Слои называются сразу: токены → примитивы → компоненты → шаблоны. Токены в переменных CSS дают темизацию без пересборки и переживают смену библиотеки - это самая долгоживущая часть.
Компонент библиотеки не знает о бизнесе: не ходит в сеть, не знает про пользователя, не содержит текстов на конкретном языке. Как только знает - он больше не переиспользуемый.
API компонента - то, где дизайн-системы умирают. Двадцать булевых пропсов означают,
что каждая новая задача правит общий компонент. Лечение - композиция и составные компоненты
(Select, Select.Option), ...rest и forwardRef по умолчанию, чтобы обёртка вела себя
как нативный элемент.
Доступность встроена: если модалка из библиотеки не умеет ловушку фокуса, её сделают неправильно во всех пяти продуктах.
Организационно: правила ломающих изменений, канал миграции и критерий попадания - компонент едет в библиотеку на третьем продукте, а не на первом «кажется, общее».
Ответьте сами, а не прочитайте
В тренажёре вопрос попадёт в повторения и вернётся, когда начнёт забываться. Плюс билеты с зачётом: 20 вопросов, не больше 2 ошибок.