Концепция инструмента
Проблема
На данный момент не существует ни одной библиотеки готовых компонентов, на основе которой можно было бы без проблем реализовать уникальный дизайн-макет. Из существующих unstyled UI Kit очень мало добра и все они сделаны под React. Под Vue я вообще не встречал ни одного UI Kit, который можно было бы назвать unstyled. Все они прекрасно подходят для реализации админ-панелей и прочего внутреннего бизнес-инструментария. Когда же мы садимся писать интерфейс с уникальным дизайном, начинается пляска с костылями. Приходится извращаться с наложением стилей и жёсткими переопределениями, не сулящими ничего хорошего.
Ещё один неприятный нюанс - многие библиотеки для реализации части компонентов забирают их пакетами из других библиотек. Если разработчику нужно изменить стайлинг или логику какой-то глубоко вложенной внутренней части - приходится забирать в свой проект целую пачку модулей и кастомизировать у себя, разбираясь с зависимостями.
Это уже не говоря о раздутом весе модуля, от которого не спасает даже tree-shaking. Установка какой-нибудь помойки а-ля Ant Design может легко раздуть размер вашего бандла до мегабайта в несжатом виде.
Избежать этих проблем на данный момент реально только одним действенным способом - писать все компоненты самостоятельно с нуля. Из раза в раз. С каждым новым проектом.
Идея
Главная идея, основой которой послужила эта библиотека - реализация абсолютной возможности рестайлинга компонентов интерфейса, частичной возможности изменения структуры и логики.
Дополнительная идея - вложить в библиотеку обвязку для удобного взаимодействия с компонентами.
Логика компонентов минималистична, как и сами компоненты. Её основная задача - правильно скомбинировать взаимодействия между вариантами стилей для реализации любого, даже самого упоротого, не поддающегося никаким закономерностям дизайна.
Самих компонентов не будет много, их количество зависит только от логики их работы. Если логика компонентов идентична - поскльку стайлинг и структуру разработчик может переопределить - повторяться нет смысла. Например Checkbox и Toggle, Modal и Drawer - отличаются только стайлингом. В библиотеке есть Checkbox, а значит его базе можно собрать Toggle.
Реализация
В каждом компоненте есть 2 типа свойств - базовые и стилевые. Базовые всем вам хорошо известны - value, onChange итп. Стилевые - это свойства, которые определяют стили и их модификаторы. Их просто отличить - они заканчиваются на style и variants. Практически каждый элемент компонента подчинён этим свойствам. Некоторые отдельные части компонентов можно подменить на свои. Жёстко выставлена лишь абстрактная логика компонента, поэтому она минималистична и расширяема.
Модули выходят для двух самых популярных инструментов, но первоочередно новый модуль реализуется для Vue, просто потому он нравится мне больше чем React. После обкатки в storybook и тестовых песочницах модуль имплементируется для React.
На данный момент для Vue готово примерно 3/4 запланированного. Для React - половина.
Первый полноценный релиз для использования в prod пларинуется в июле 2025 года.