Notes on maintaining an internal React component library

Записки мейнтейнера внутреннего ui-kit команды DigitalOcean.

Автор описывает практики и прицнипы, которые считает основопологающими для создания хорошего ui-kit'а. Большая часть советов - правильные и хорошие.
Часть советов, на мой взгляд, не то что неправильные, просто очень субьективны и в некоторых контекстах могут причинить вред.

Философия ui-kit:
- Должно быть легко перенести дизайн в код
- Компонент должен быть черным ящиком для родителя, использующего его
- Решение в ui-kit'е должны быть одновременным очевидными, простыми и правильно в большинстве случаев
- Делать плохие вещи должно быть как минимум некомфортно, как максимум - невозможно.

Советы:
- У kit'а должен быть мейнтейнер или группа мейнтейнеров. Без мейнтейнерства измененися будут вноситься абы как, что через какое-то время сделает использование системы невозможной
- Интерфейс компонента должен лаконично представлять варианты использования компонента. Т.е. условно по одним пропсам можно понять, как компонент можно использовать
- Компонент не должен позиционировать себя сам
- Компоненту следует занимать все доступное горизонтальное пространство. Ограничения по размеру накладывает клиентский код.
- Не следует предоставлять API для изменения стилей. Однако, иногда следует все таки добавить для разработчиков для очень редких кейсов максимально неудобное API. И им должно быть очевидно что то, что они делают - неправильно и надо идти заводить задачу на команду ui-kit'а.
- Не следует стараться быть максимально похожими на базовые элементы
- Избегайте spread оператора в JSX
- Композиция компонентов должна быть бесплатной.
- Перед удалением чего-то из библиотеки, лучше пару мажорных версий обьявлять это как deprecated
- Код-моды позволяют ускорить массовые изменения по коду.
- Анализируйте то, как используются ваши компоненты. Лучше делайте это автоматически.
- Пишите скриншот-тесты

Я прошелся только по заголовкам. Вообще там в каждом пункте достаточно много мыслей про то, почему так стоит делать, с примерами кода. Если вы разарабываете ui-kit - must read.

https://www.gabe.pizza/notes-on-component-libraries/

#development #ui-kit