@elcrm/alert

React-библиотека алертов для elCRM в стиле iOS: Promise API, Confirm, иконки и кастомизация через CSS-переменные.

Установка

npm install @elcrm/alert
# или
bun add @elcrm/alert

Peer-зависимости: react ≥ 18, react-dom ≥ 18.

Быстрый старт

import { Alert } from "@elcrm/alert";
import "@elcrm/alert/style.css";
import "@elcrm/alert/light.css"; // или dark.css

function App() {
    const show = async () => {
        const result = await Alert.Send({
            title: "Заголовок",
            text: "Текст сообщения",
        });
        if (result.confirmed) {
            // подтверждено
        }
    };

    return (
        <>
            <button onClick={show}>Показать</button>
            <Alert.Init />
        </>
    );
}

Обязательно смонтируйте <Alert.Init /> в корне приложения.

API

Alert.Init

Корневой рендер текущего алерта. Добавьте один раз в приложение.

Alert.Send(content, callback?, cancel?)

Показать алерт. Без callback возвращает Promise<AlertResult>; с callback — void (обратная совместимость).

| Поле | Тип | Описание | | ---------------- | --------------------------------------------- | --------------------------------------------- | | title | string | Заголовок | | text | string | Текст | | icon | "success" \| "error" \| "warning" \| "info" | Иконка | | button | string \| AlertButton | Одна кнопка | | buttons | AlertButton[] | Несколько кнопок | | classNames | string | Доп. CSS-классы на overlay | | closeOnOverlay | boolean | Закрытие кликом по фону (по умолчанию true) | | closeOnEscape | boolean | Закрытие по Escape (по умолчанию true) |

type AlertButton = {
    label: string;
    color?: "blue" | "red" | "default";
    action?: "confirm" | "cancel" | string;
    onClick?: () => void;
};

type AlertResult = {
    confirmed: boolean;
    action?: string;
};

Alert.Confirm(content)

Диалог с кнопками «Отмена» / «Подтвердить». Возвращает Promise<boolean>.

const ok = await Alert.Confirm({
    title: "Удалить файл?",
    text: "Это действие нельзя отменить",
    icon: "warning",
});

Примеры

Иконка

await Alert.Send({
    title: "Успех!",
    text: "Файл сохранён",
    icon: "success",
});

Несколько кнопок

const result = await Alert.Send({
    title: "Выберите действие",
    text: "Что сделать с файлом?",
    buttons: [
        { label: "Отмена", action: "cancel", color: "default" },
        { label: "Изменить", action: "edit", color: "blue" },
        { label: "Удалить", action: "delete", color: "red" },
    ],
});
console.log(result.action);

Callback API

Alert.Send(
    { title: "Заголовок", text: "Текст" },
    () => console.log("Подтверждено"),
    () => console.log("Отменено"),
);

Темы и CSS

import "@elcrm/alert/style.css";
import "@elcrm/alert/light.css"; // body[data-theme="light"]
import "@elcrm/alert/dark.css"; // body[data-theme="dark"]

document.body.setAttribute("data-theme", "dark");

| Переменная | Назначение | | ----------------------------- | ----------------- | | --alert-color | Цвет текста | | --alert-overlay | Фон overlay | | --alert-overlay-filter | blur overlay | | --alert-background | Фон окна | | --alert-radius | Скругление | | --alert-shadow | Тень | | --alert-filter | blur окна | | --alert-separator-color | Разделитель | | --alert-button-* | Стили кнопок | | --alert-button-color-blue | Синяя кнопка | | --alert-button-color-red | Красная кнопка | | --alert-button-color-default| Обычная кнопка |

Поведение

• SSR-безопасно (без DOM не рендерится)
• Portal в document.body, блокировка скролла
• ARIA (alertdialog), focus trap, Escape
• Анимация появления / закрытия (~200 ms)

Лицензия

MIT © MaSkal