Год назад в SoftwareBrothers мы начали разработку AdminBro — универсальной панели администратора для приложений Node.js.

Нашей целью было создать инструмент, который позволит разработчикам javascript по всему миру добавлять в свои приложения расширенные, красивые и полнофункциональные панели администратора за несколько минут.

Таким образом, мы надеялись, что этот инструмент значительно увеличит внедрение Node.js, особенно в мире стартапов.

С тех пор AdminBro стал довольно популярным, и сегодня мы рады сообщить о выпуске долгожданной версии two-point-O, которая выглядит так:

Что вы можете найти в версии 2.0

Design System — с легкостью создавайте собственные функции прямо сейчас

Теперь весь пользовательский интерфейс панели администратора и компоненты, стоящие за ней, следуют принципам атомарного дизайна.

Короче говоря, теперь вы можете повторно использовать все компоненты пользовательского интерфейса AdminBro, которые были разделены на 2 основные группы: Атомы (такие как Значок, Кнопка, Значок и т. д.) и Molecules (например, DatePicker, DropZone, Pagination и т. д.).

Ядром Дизайн-системы является Тема-объект. С помощью styled-components и styled-system теперь вы можете легко создавать сложные компоненты с адаптивным макетом.

Приведу пару примеров:

<Button>Click me</Button>
<Button size="icon" variant="primary" rounded>
    <Icon icon="Save" />
</Button>

дает

<Box boxShadow="card" padding="xl">
    <H4>Card Title</H4>
    <Text>This is text below the title</Text>
</Box>

дает

Все компоненты можно найти в нашей документации. Обязательно ознакомьтесь с ними.

React Hooks и смарт-компоненты

Компоненты Design System — не единственное обновление интерфейса, которое мы сделали. Теперь вы можете повторно использовать наши смарт-компоненты и хуки React и быстро создавать весь уровень приложения.

Итак, допустим, вы хотите создать пользовательскую форму, которая создает новых пользователей в системе.

Теперь для этого можно использовать хук useRecord с BasePropertyComponent.

BasePropertyComponent отобразит все ваши поля, такие как имя пользователя, адрес электронной почты и т. д. (все, что вы хотите), где useRecord отправит данные в серверную часть AdminBro и сохранит/обновит запись. В случае каких-либо ошибок проверки они будут напечатаны BasePropertyComponent.

И все это без написания ни строчки кода на бэкенде.

Взгляните на пример в Документации, чтобы увидеть, как это может работать.

I18n

Поскольку все больше людей, не говорящих по-английски, используют AdminBro, мы добавили поддержку I18n.

С помощью TranslateFunctions (доступного как на внешнем, так и на внутреннем интерфейсе) теперь вы можете перевести все приложение на свой язык.

I18n также дает вам возможность изменить любой произвольный текст в пользовательском интерфейсе.

Взгляните на документацию файла Locale здесь и наши стандартные английские переводы.

Поддержка Firebase

Попутно мы запустили отдельный плагин, который позволяет запускать экземпляры AdminBro в Firebase Cloud Functions. Мы надеемся, что это сделает AdminBro идеальным выбором для стартапов, когда стоимость и время доставки имеют решающее значение.

Некоторые другие вещи

Так как мы переписали весь интерфейс — мы добавили небольшие изменения в пользовательский интерфейс. Взгляните на пример приложения, чтобы увидеть, как оно выглядит прямо сейчас.

Что дальше

Мы также почистили Страницу проблем в репозитории AdminBro GitHub и добавили несколько потрясающих новых функций. Если вам нравится идея AdminBro — автоматизированного интерфейса администратора для приложений Node.js — попробуйте его в своем проекте и не забудьте запустить репозиторий.