isp-admin-ui-kit

isp-admin-ui-kit — это компонент базовой админ-панели для использования в других проектах.

📆 Установка и сборка

Установка зависимостей

npm install

Сборка пакета

npm run build

🚀 Установка библиотеки в проект

npm install isp-admin-ui-kit

Дополнительные библиотеки, необходимые для работы

npm install @monaco-editor/react antd axios dayjs monaco-editor react react-dom react-hook-form react-router-dom react-redux @reduxjs/toolkit

Версии зависимостей:

@monaco-editor/react ^4.6.0
antd >=5.12.2
axios ^1.7.7
dayjs ^1.11.10
monaco-editor ^0.52.0
react >=18.2.0
react-dom >=18.2.0
react-hook-form ^7.54.0
react-router-dom ^6.22.3
react-redux ^9.1.0
@reduxjs/toolkit ^2.2.3

🧹 Подключение базового хранилища (store)

import { baseSetupStore } from 'isp-admin-ui-kit';
import { Provider } from 'react-redux';
import AdminBase from 'isp-admin-ui-kit';

const store = baseSetupStore();

<Provider store={store}>
  <AdminBase/>
</Provider>;

Интеграция с кастомным стором

baseSetupStore принимает параметр apiServices для подключения пользовательских редьюсеров и RTK Query сервисов:

const apiServices = {
  modulesServiceApi,
  UIReducer,
};

const store = baseSetupStore(apiServices);

🎨 Подключение темы

Библиотека использует тему Ant Design. Вы можете передать дополнительные параметры в ConfigProvider через проп configProviderProps:

<AdminBase configProviderProps={{ theme: lightTheme, locale: eng }}/>

🗺 Настройка маршрутов (роутеров)

Компонент AdminBase поддерживает кастомную маршрутизацию через параметр customRouters.

⚠️ Для корректной работы пунктов меню route и key должны совпадать!

Структура объекта маршрута (customRouters)

| Название | Тип | Описание | |-----------------|-------------|------------------------------------------------| | route * | string | Путь маршрута | | element * | ReactNode | Компонент, отображаемый по маршруту | | label | string | Название маршрута (текст в меню) | | key | string | Уникальный ключ маршрута (используется в меню) | | permissions | string[] | Список разрешений для доступа к маршруту | | icon * | ReactNode | Иконка маршрута | | children * | Array | Вложенные маршруты | | className * | string | Класс для оформления пункта меню |

Пример:

const customRouters = [
  {
    route: '/dashboard',
    element: <Dashboard/>,
    label: 'Dashboard',
    key: 'dashboard',
    permissions: ['admin', 'user'],
    icon: <DashboardIcon/>,
    className: 'red-menu',
  },
];

🗺 Скрытие базовых страниц

Компонент AdminBase поддерживает параметр excludePermissions: массив с пермишенами, страницы по которым необходимо скрыть, сами пермишены можно получить через импорт PermissionKeysType из библиотеки

Пример использования:

import { PermissionKeysType } from 'isp-admin-ui-kit'
const excludePermissions = [PermissionKeysType.user_view, PermissionKeysType.session_view]

  < AdminBase
excludePermissions = { excludePermissions }
/>;

🧱 Параметры компонента AdminBase

Вы можете использовать AdminBase с разными параметрами:

| Название | Описание | Пример | |-----------------------|---------------------------------------------------------------------|----------------------------------------------------------| | customRouters | Массив объектов маршрутов | customRouters={[{ route, element, label, key, ... }]} | | configProviderProps | Пропсы для ConfigProvider из библиотеки antd | configProviderProps={{ theme: lightTheme, locale: ru }} | | defaultRoutePath | Путь, на который будет редирект при открытии / (главной страницы) | defaultRoutePath="/modules" | | excludePermissions | Массив пермишенов (PermissionKeysType) для сокрытия | excludePermissions={[PermissionKeysType.user_view, ...]} |

Пример использования:

<AdminBase
  customRouters={customRouters}
  configProviderProps={{ theme: lightTheme, locale: ru }}
  defaultRoutePath="/dashboard"
  excludePermissions={excludePermissions}
/>;

📋 Обновление версии

Чтобы обновить версию пакета:

1. Обновите значение version в package.json.
2. Добавьте соответствующую запись в CHANGELOG.md.