isp-admin-ui-kit v0.4.2

Описание

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

Команды

• npm install — установка зависимостей.
• npm build — сборка пакета.

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

Для обновления версии необходимо:

1. Поднять версию в package.json.
2. Прописать изменения в CHANGELOG.md.

Установка библиотеки в другие проекты

npm install isp-admin-ui-kit

Дополнительные библиотеки, необходимые для работы 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

Библиотека isp-admin-ui-kit работает с следующими зависимостями:

@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

Подключение базового стора

1. Импортируйте baseSetupStore из пакета.
2. Настройте store в вашем проекте:

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

const store = baseSetupStore();

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

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

baseSetupStore принимает необязательный параметр apiServices, который позволяет интегрировать пользовательские редьюсеры и слайсеры.

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

const apiServices = {
  modulesServiceApi,
  UIReducer,
};

const store = baseSetupStore(apiServices);

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

Базовая интеграция темы Ant Design встроена. Для добавления динамических стилей для кастомных компонентов используйте переменные Ant Design.

Дополнительные пропсы для ConfigProvider можно передать через параметр configProviderProps.

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

import AdminBase from 'isp-admin-ui-kit';
import { lightTheme, eng } from 'some-theme-library';

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

Настройка роутеров

Компонент AdminBase поддерживает настройку пользовательских роутеров через параметр customRouters.

Важный момент

Для корректной инициализации пунктов меню, связанных со страницами, необходимо, чтобы значения полей route и key совпадали.

Параметры customRouters

* - необязательный параметр

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

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

<AdminBase customRouters={customRouters}/>;

Работа с компонентом AdminBase

Вы можете использовать компонент AdminBase в своём проекте с настройкой следующих параметров:

 <AdminBase/> 

• С настройкой роутеров и темы:

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