Senler UI

Кратко

Senler UI — библиотека React 19 для интерфейсов, совместимых с Senler. В неё входят общие стили и дизайн-токены, компоненты форм, кнопок, таблиц, диалогов и меню, элементы компоновки, а также типизированный Senler Bridge для встроенных страниц и конфигураторов приложений.

Используйте библиотеку, если интерфейс приложения должен выглядеть и вести себя согласованно с Senler. Авторизация приложения и доступ к API настраиваются отдельно: Senler UI отвечает только за интерфейс и взаимодействие встроенной страницы с родительским окном.

Установка

Устанавливайте текущую версию напрямую из GitHub. При первой установке npm возьмёт актуальное состояние основной ветки, а package-lock.json зафиксирует конкретный commit для повторяемых сборок:

npm install github:SenlerBot/senler-ui
npm install react@^19 react-dom@^19 lucide-react

Подключение стилей

Если Senler UI формирует все стили приложения, один раз импортируйте готовый файл в точке входа:

import "@senler/ui/styles.css";

Если приложение уже собирает собственный Tailwind CSS, подключите интеграцию в основном CSS-файле после tailwindcss:

@import "tailwindcss";
@import "@senler/ui/fonts.css";
@import "@senler/ui/tailwind.css";

Выберите один из этих вариантов. Одновременное подключение полного styles.css и собственной Tailwind-сборки создаёт дублирующиеся стили.

Использование компонентов

Импортируйте компоненты из корневого пакета и собирайте из них интерфейс как из обычных React-компонентов:

import { Button, Input } from "@senler/ui";

export function ContactForm() {
  return (
    <form>
      <Input name="email" type="email" placeholder="Email" />
      <Button type="submit">Сохранить</Button>
    </form>
  );
}

Названия компонентов, варианты отображения и готовые примеры проверяйте в Storybook. Для более узких импортов библиотека также предоставляет пути @senler/ui/atoms/*, @senler/ui/compound/* и @senler/ui/layout/*.

Встроенная страница приложения

Для интерфейса, открытого внутри Senler, используйте @senler/ui/bridge, а не собственные вызовы window.postMessage. Bridge проверяет адрес родительского окна, передаёт начальные язык и тему, сообщает об их изменениях без перезагрузки iframe и синхронизирует высоту страницы, если контейнер поддерживает изменение размера.

import "@senler/ui/browser-compat";
import { createSenlerBridgeClient } from "@senler/ui/bridge";

const bridge = createSenlerBridgeClient({
  parentOrigin: "https://senler.io",
});

bridge.onContextChange(({ ui }) => {
  // ui.language: "ru" | "en"
  // ui.theme: "light" | "dark"
});

await bridge.connect();

Синхронизация высоты включена по умолчанию: Bridge отслеживает изменения документа и передаёт кабинету новую высоту. Это используется, например, встроенной формой шага автоматизации в боковой панели. Для намеренно фиксированного iframe её можно отключить параметром syncFrameSize: false.

Импорт @senler/ui/browser-compat должен выполняться до кода приложения. OAuth и подписанная сессия запуска остаются границей авторизации: токены Senler и секреты приложения через Bridge не передаются. Настройка iframe описана в разделе «Встроенная страница».

Исходный код и Storybook

• Исходный код и инструкция по подключению Senler UI
• Storybook Senler UI — каталог компонентов с примерами, состояниями и доступными параметрами.