11# isp-admin-ui-kit
22
3- [ ![ npm version] ( https://img.shields.io/npm/v/isp-admin-ui-kit.svg )] ( https://www.npmjs.com/package/isp-admin-ui-kit )
4- [ ![ License] ( https://img.shields.io/badge/license-MIT-blue.svg )] ( LICENSE )
3+ [ ![ npm version] ( https://img.shields.io/npm/v/isp-admin-ui-kit.svg )] ( https://www.npmjs.com/package/isp-admin-ui-kit ) [ ![ License] ( https://img.shields.io/badge/license-MIT-blue.svg )] ( LICENSE )
54
65** isp-admin-ui-kit** — это компонент базовой админ-панели для использования в других проектах. Библиотека предоставляет готовый каркас, навигацию, управление состоянием и типовые страницы, позволяя сосредоточиться на бизнес-логике.
76
87## 📑 Содержание
98
109- [ Возможности] ( #-возможности )
1110- [ Установка и зависимости] ( #-установка-и-зависимости )
12- - [ ⚙️ Настройка Monaco Editor] ( #-настройка-monaco-editor )
11+ - [ Настройка Monaco Editor] ( #-настройка-monaco-editor )
1312- [ Быстрый старт] ( #-быстрый-старт )
1413- [ Настройка компонента AdminBase] ( #-настройка-компонента-adminbase )
1514- [ Работа с данными и Store] ( #-работа-с-данными-и-store )
@@ -74,35 +73,35 @@ npm install @monaco-editor/react antd axios dayjs monaco-editor react react-dom
7473Необходимо выполнить конфигурацию и инициализацию монико-редактора в точке входа вашего приложения (например, ` main.tsx ` или ` index.tsx ` ) ** до** рендеринга компонента ` AdminBase ` .
7574
7675``` tsx
77- import * as monaco from ' monaco-editor' ;
78- import loader from ' @ monaco-editor/react ' ;
76+ import loader from ' @ monaco-editor/react '
77+ import * as monaco from ' monaco-editor'
7978
8079// Конфигурация loader
81- loader .config ({ monaco });
80+ loader .config ({ monaco })
8281
8382// Инициализация
8483loader .init ().then (() => {
85- console .log (' Monaco Editor initialized' );
84+ console .log (' Monaco Editor initialized' )
8685 // Здесь можно запустить рендер приложения, если требуется гарантия загрузки
87- });
86+ })
8887```
8988
9089** Пример полной точки входа (` main.tsx ` ):**
9190
9291``` tsx
93- import React from ' react' ;
94- import ReactDOM from ' react-dom/client ' ;
95- import * as monaco from ' monaco-editor' ;
96- import loader from ' @monaco-editor/ react' ;
97- import { baseSetupStore , AdminBase } from ' isp-admin-ui-kit ' ;
98- import { Provider } from ' react-redux' ;
99- import { BrowserRouter } from ' react-router-dom' ;
92+ import loader from ' @monaco-editor/ react'
93+ import { baseSetupStore , AdminBase } from ' isp-admin-ui-kit '
94+ import * as monaco from ' monaco-editor'
95+ import React from ' react'
96+ import ReactDOM from ' react-dom/client '
97+ import { Provider } from ' react-redux'
98+ import { BrowserRouter } from ' react-router-dom'
10099
101100// 1. Настройка Monaco
102- loader .config ({ monaco });
101+ loader .config ({ monaco })
103102loader .init ().then (() => {
104103 // 2. Инициализация Store
105- const store = baseSetupStore ();
104+ const store = baseSetupStore ()
106105
107106 // 3. Рендер приложения
108107 ReactDOM .createRoot (document .getElementById (' root' )! ).render (
@@ -113,18 +112,18 @@ loader.init().then(() => {
113112 </BrowserRouter >
114113 </Provider >
115114 </React.StrictMode >
116- );
117- });
115+ )
116+ })
118117```
119118
120119## Настройка Monaco Worker (Vite / Rollup)
121120
122- ⚠️ Важно: Если ваше приложение или библиотека собирается через Vite или Rollup, необходимо явно подключить Monaco Workers.
123- Без этого редактор может выдавать ошибки или не работать подсветка синтаксиса.
121+ ⚠️ Важно: Если ваше приложение или библиотека собирается через Vite или Rollup, необходимо явно подключить Monaco Workers. Без этого редактор может выдавать ошибки или не работать подсветка синтаксиса.
124122
125123🔧 Пример настройки
126124
127125Добавьте конфигурацию до инициализации loader:
126+
128127``` jsx
129128import { loader } from ' @monaco-editor/react' ;
130129import * as monaco from ' monaco-editor' ;
@@ -161,11 +160,11 @@ loader.init();
161160После настройки Monaco Editor, базовое подключение выглядит следующим образом:
162161
163162``` tsx
164- import { baseSetupStore , AdminBase } from ' isp-admin-ui-kit' ;
165- import { Provider } from ' react-redux' ;
166- import { BrowserRouter } from ' react-router-dom' ;
163+ import { baseSetupStore , AdminBase } from ' isp-admin-ui-kit'
164+ import { Provider } from ' react-redux'
165+ import { BrowserRouter } from ' react-router-dom'
167166
168- const store = baseSetupStore ();
167+ const store = baseSetupStore ()
169168
170169const App = () => {
171170 return (
@@ -174,8 +173,8 @@ const App = () => {
174173 <AdminBase />
175174 </BrowserRouter >
176175 </Provider >
177- );
178- };
176+ )
177+ }
179178```
180179
181180---
@@ -186,27 +185,27 @@ const App = () => {
186185
187186### Параметры компонента
188187
189- | Название | Описание | Пример |
190- | ----------------------- | -------------------------------------------------------------------------- | -------------------------------------- |
191- | ` customRouters ` | Массив объектов маршрутов. | ` [{ route, element, label, key }] ` |
192- | ` configProviderProps ` | Пропсы для ` ConfigProvider ` (Ant Design). | ` { theme: lightTheme, locale: ru } ` |
193- | ` defaultRoutePath ` | Путь для редиректа с главной страницы (` / ` ). | ` "/modules" ` |
194- | ` excludePermissions ` | Массив пермишенов для скрытия стандартных страниц. | ` [PermissionKeysType.user_view] ` |
188+ | Название | Описание | Пример |
189+ | --- | --- | --- |
190+ | ` customRouters ` | Массив объектов маршрутов. | ` [{ route, element, label, key }] ` |
191+ | ` configProviderProps ` | Пропсы для ` ConfigProvider ` (Ant Design). | ` { theme: lightTheme, locale: ru } ` |
192+ | ` defaultRoutePath ` | Путь для редиректа с главной страницы (` / ` ). | ` "/modules" ` |
193+ | ` excludePermissions ` | Массив пермишенов для скрытия стандартных страниц. | ` [PermissionKeysType.user_view] ` |
195194
196195### Маршрутизация (` customRouters ` )
197196
198197> ⚠️ ** Важно:** Для корректной работы пунктов меню значения полей ` route ` и ` key ` ** должны совпадать** .
199198
200- | Параметр | Тип | Описание |
201- | --------------- | ------------- | ----------------------------------------------- |
202- | ` route ` | ` string ` | Путь маршрута (URL). |
203- | ` element ` | ` ReactNode ` | Компонент, отображаемый по маршруту. |
204- | ` label ` | ` string ` | Название маршрута (текст в меню). |
205- | ` key ` | ` string ` | Уникальный ключ маршрута (должен совпадать с ` route ` ). |
206- | ` permissions ` | ` string[] ` | Список разрешений для доступа. |
207- | ` icon ` | ` ReactNode ` | Иконка маршрута. |
208- | ` children ` | ` Array ` | Вложенные маршруты. |
209- | ` className ` | ` string ` | Класс для оформления пункта меню. |
199+ | Параметр | Тип | Описание |
200+ | --- | --- | --- |
201+ | ` route ` | ` string ` | Путь маршрута (URL). |
202+ | ` element ` | ` ReactNode ` | Компонент, отображаемый по маршруту. |
203+ | ` label ` | ` string ` | Название маршрута (текст в меню). |
204+ | ` key ` | ` string ` | Уникальный ключ маршрута (должен совпадать с ` route ` ). |
205+ | ` permissions ` | ` string[] ` | Список разрешений для доступа. |
206+ | ` icon ` | ` ReactNode ` | Иконка маршрута. |
207+ | ` children ` | ` Array ` | Вложенные маршруты. |
208+ | ` className ` | ` string ` | Класс для оформления пункта меню. |
210209
211210** Пример:**
212211
@@ -219,26 +218,26 @@ const customRouters = [
219218 element: <Dashboard />,
220219 permissions: [' admin' , ' user' ],
221220 icon: <DashboardIcon />,
222- className: ' red-menu' ,
223- },
224- ];
221+ className: ' red-menu'
222+ }
223+ ]
225224
226- <AdminBase customRouters = { customRouters } />;
225+ ; < AdminBase customRouters = {customRouters } / >
227226```
228227
229228### Скрытие базовых страниц (` excludePermissions ` )
230229
231230Для скрытия стандартных страниц используйте массив ` excludePermissions ` . Ключи импортируются через ` PermissionKeysType ` .
232231
233232``` tsx
234- import { PermissionKeysType } from ' isp-admin-ui-kit' ;
233+ import { PermissionKeysType } from ' isp-admin-ui-kit'
235234
236235const excludePermissions = [
237236 PermissionKeysType .user_view ,
238- PermissionKeysType .session_view ,
239- ];
237+ PermissionKeysType .session_view
238+ ]
240239
241- <AdminBase excludePermissions = { excludePermissions } />;
240+ ; < AdminBase excludePermissions = {excludePermissions } / >
242241```
243242
244243### Полный пример конфигурации
@@ -249,7 +248,7 @@ const excludePermissions = [
249248 configProviderProps = { { theme: lightTheme , locale: ru }}
250249 defaultRoutePath = " /dashboard"
251250 excludePermissions = { excludePermissions }
252- />;
251+ />
253252```
254253
255254---
@@ -259,14 +258,14 @@ const excludePermissions = [
259258### Подключение базового хранилища
260259
261260``` tsx
262- import { baseSetupStore } from ' isp-admin-ui-kit' ;
263- import { Provider } from ' react-redux' ;
261+ import { baseSetupStore } from ' isp-admin-ui-kit'
262+ import { Provider } from ' react-redux'
264263
265- const store = baseSetupStore ();
264+ const store = baseSetupStore ()
266265
267- <Provider store = { store } >
266+ ; < Provider store = {store }>
268267 <App />
269- </Provider >;
268+ < / Provider >
270269```
271270
272271### Интеграция с кастомным стором
@@ -276,18 +275,19 @@ const store = baseSetupStore();
276275``` tsx
277276const apiServices = {
278277 modulesServiceApi ,
279- UIReducer ,
280- };
278+ UIReducer
279+ }
281280
282- const store = baseSetupStore (apiServices );
281+ const store = baseSetupStore (apiServices )
283282```
284283
285284### Использование базовых API
286285
287286``` tsx
288- import { baseApiServices } from ' isp-admin-ui-kit' ;
287+ import { baseApiServices } from ' isp-admin-ui-kit'
289288
290- const { data, isLoading, isError } = baseApiServices .roleApi .useGetAllRolesQuery ();
289+ const { data, isLoading, isError } =
290+ baseApiServices .roleApi .useGetAllRolesQuery ()
291291```
292292
293293---
@@ -318,9 +318,9 @@ npm install
318318npm run build
319319```
320320
321- ### Обновление версии
321+ ### Обновление версии пакета
322322
323- Чтобы обновить версию пакета:
323+ Чтобы обновить версию пакета вручную :
324324
3253251 . Обновите значение ` version ` в ` package.json ` .
3263262 . Добавьте соответствующую запись в ` CHANGELOG.md ` .
@@ -330,6 +330,66 @@ npm run build
330330 git push
331331 ```
332332
333+ # ## Автоматическое обновление проектов
334+
335+ В репозитории представлен скрипт ` update-isp-admin-ui-kit.sh` для автоматического обновления версии пакета во всех проектах.
336+
337+ # ### Как работает скрипт
338+
339+ Скрипт:
340+
341+ 1. Читаёт конфигурацию из ` .env` файла
342+ 2. Находит текущую версию пакета из ` package.json`
343+ 3. Обновляет зависимость ` isp-admin-ui-kit` в указанных проектах
344+ 4. Выполняет ` npm install`
345+ 5. Добавляет запись в ` CHANGELOG.md`
346+ 6. Подготавливает изменения для коммита
347+
348+ # ### Использование
349+
350+ ` ` ` bash
351+ # Обновить до текущей версии
352+ ./update-isp-admin-ui-kit.sh
353+
354+ # С обновлением patch версии проекта
355+ ./update-isp-admin-ui-kit.sh --project-patch
356+
357+ # С обновлением minor версии проекта
358+ ./update-isp-admin-ui-kit.sh --project-minor
359+
360+ # С обновлением major версии проекта
361+ ./update-isp-admin-ui-kit.sh --project-major
362+ ` ` `
363+
364+ # ### Настройка
365+
366+ Перед первым запуском необходимо настроить конфигурацию:
367+
368+ 1. Создайте файл ` .env` на основе примера:
369+
370+ ` ` ` bash
371+ cp .env.example .env
372+ ` ` `
373+
374+ 2. Отредактируйте ` .env` , указав:
375+ - ` PROJECTS_DIR` — путь к директории с проектами
376+ - ` PROJECTS` — список проектов через запятую
377+
378+ # ### Пример `.env`
379+
380+ ` ` ` bash
381+ # Directory where projects are located
382+ PROJECTS_DIR=/projects-path
383+
384+ # List of projects to update (comma-separated)
385+ PROJECTS=project1,project2,project3
386+ ` ` `
387+
388+ > ** Важно:** Убедитесь, что:
389+ >
390+ > - Скрипт имеет права на выполнение: ` chmod +x update-isp-admin-ui-kit.sh`
391+ > - ` .env` файл не попадает в git (уже добавлен в ` .gitignore` )
392+
333393---
334394
335395# # 📄 Лицензия
0 commit comments