enВойти в Senler

Senler UI

Кратко

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

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

Установка

Установите опубликованную версию напрямую из GitHub с фиксированным тегом для повторяемых сборок:

npm install https://github.com/SenlerBot/senler-ui/archive/refs/tags/v0.7.2.tar.gz
npm install react@^19 react-dom@^19 lucide-react

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

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

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

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

@import "tailwindcss";
@import "@senlerio/ui/fonts.css";
@import "@senlerio/ui/tailwind.css";
@import "@senlerio/ui/themes/senler.css";
@source "../node_modules/@senlerio/ui/dist";

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

themes/senler.css подключает общую палитру Senler, включая цвета тёмной темы. Если у приложения собственная палитра, этот импорт можно пропустить. Режим выбирает приложение или Senler Bridge: класс .dark на корневом элементе включает тёмные цвета.

Путь в @source задаётся относительно CSS-файла: пример рассчитан на src/styles.css. Он нужен, чтобы Tailwind включил классы компонентов установленной библиотеки.

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

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

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

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

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

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

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

Установите Bridge отдельно:

npm install https://github.com/SenlerBot/senler-bridge/archive/refs/tags/v1.0.1.tar.gz
import "@senlerio/ui/browser-compat";
import { createSenlerBridgeClient } from "@senlerio/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.

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

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

Предыдущая
Приложение через User MCP
Далее
Виджет