ui-admin-lib 1.0.0 → 1.1.0

package/README.md

@@ -1,477 +1,473 @@
-# UI Admin Library
-
-Библиотека для быстрого создания административных панелей на React с полным CRUD функционалом. Создайте полноценную админку всего в несколько строк кода!
-
-## Установка
-
-```bash
-npm install ui-admin-lib
-```
-
-## Использование
-
-Создайте админ-панель в несколько строк:
-
-```tsx
-import { AdminPanel, CrudService } from 'ui-admin-lib'
-import 'ui-admin-lib/styles'
-
-// 1. Создайте сервис для работы с API
-const userService = new CrudService({
-  baseUrl: 'https://api.example.com/users',
-  headers: {
-    'Authorization': 'Bearer YOUR_TOKEN'
-  }
-})
-
-// 2. Определите модель
-const userModel = {
-  name: 'users',
-  label: 'Пользователи',
-  service: userService,
-  columns: [
-    { key: 'id', title: 'ID', dataIndex: 'id' },
-    { key: 'name', title: 'Имя', dataIndex: 'name' },
-    { key: 'email', title: 'Email', dataIndex: 'email' },
-  ],
-  fields: [
-    { name: 'name', label: 'Имя', type: 'text', required: true },
-    { name: 'email', label: 'Email', type: 'email', required: true },
-  ],
-}
-
-// 3. Используйте AdminPanel
-function App() {
-  return (
-    <AdminPanel
-      title="Моя админка"
-      models={[userModel]}
-      login={{
-        onSubmit: async (username, password) => {
-          // Ваша логика авторизации
-        },
-      }}
-    />
-  )
-}
-```
-
-Всё! AdminPanel автоматически создаст:
-- Страницу входа
-- Боковую навигацию
-- Таблицы с данными
-- Формы для создания/редактирования
-- Полный CRUD функционал
-
-## Полный пример конфигурации
-
-Вот полный пример с несколькими моделями и всеми возможностями:
-
-```tsx
-import { AdminPanel, CrudService, AdminModel } from 'ui-admin-lib'
-import type { Column, FormField } from 'ui-admin-lib'
-import 'ui-admin-lib/styles'
-
-// Типы данных
-interface User {
-  id: number
-  name: string
-  email: string
-  role: string
-  active: boolean
-}
-
-interface Product {
-  id: number
-  title: string
-  price: number
-  category: string
-  inStock: boolean
-}
-
-// Создание сервисов для работы с API
-const userService = new CrudService<User>({
-  baseUrl: 'https://api.example.com/users',
-  headers: {
-    'Authorization': 'Bearer YOUR_TOKEN',
-    'Content-Type': 'application/json'
-  },
-  // Опционально: кастомные URL для операций
-  getListUrl: () => 'https://api.example.com/users',
-  getDetailUrl: (id) => `https://api.example.com/users/${id}`,
-  getCreateUrl: () => 'https://api.example.com/users',
-  getUpdateUrl: (id) => `https://api.example.com/users/${id}`,
-  getDeleteUrl: (id) => `https://api.example.com/users/${id}`,
-  // Опционально: трансформация данных
-  transformRequest: (data) => data, // Преобразование перед отправкой
-  transformResponse: (data) => data, // Преобразование после получения
-})
-
-const productService = new CrudService<Product>({
-  baseUrl: 'https://api.example.com/products',
-  headers: {
-    'Authorization': 'Bearer YOUR_TOKEN'
-  }
-})
-
-// Конфигурация модели пользователей
-const userModel: AdminModel<User> = {
-  name: 'users',
-  label: 'Пользователи',
-  service: userService,
-  columns: [
-    { key: 'id', title: 'ID', dataIndex: 'id' },
-    { key: 'name', title: 'Имя', dataIndex: 'name' },
-    { key: 'email', title: 'Email', dataIndex: 'email' },
-    {
-      key: 'role',
-      title: 'Роль',
-      dataIndex: 'role',
-      render: (value) => value.charAt(0).toUpperCase() + value.slice(1),
-    },
-    {
-      key: 'active',
-      title: 'Активен',
-      dataIndex: 'active',
-      render: (value) => (value ? 'Да' : 'Нет'),
-    },
-  ] as Column<User>[],
-  fields: [
-    { name: 'name', label: 'Имя', type: 'text', required: true, placeholder: 'Введите имя' },
-    { name: 'email', label: 'Email', type: 'email', required: true, placeholder: 'Введите email' },
-    {
-      name: 'role',
-      label: 'Роль',
-      type: 'select',
-      required: true,
-      options: [
-        { value: 'admin', label: 'Администратор' },
-        { value: 'user', label: 'Пользователь' },
-      ],
-    },
-    { name: 'active', label: 'Активен', type: 'checkbox' },
-  ] as FormField[],
-  // Опционально: кастомная функция получения ID
-  getItemId: (item) => item.id,
-}
-
-// Конфигурация модели товаров
-const productModel: AdminModel<Product> = {
-  name: 'products',
-  label: 'Товары',
-  service: productService,
-  columns: [
-    { key: 'id', title: 'ID', dataIndex: 'id' },
-    { key: 'title', title: 'Название', dataIndex: 'title' },
-    {
-      key: 'price',
-      title: 'Цена',
-      dataIndex: 'price',
-      render: (value) => `${value.toLocaleString('ru-RU')} ₽`,
-    },
-    { key: 'category', title: 'Категория', dataIndex: 'category' },
-    {
-      key: 'inStock',
-      title: 'В наличии',
-      dataIndex: 'inStock',
-      render: (value) => (value ? 'Да' : 'Нет'),
-    },
-  ] as Column<Product>[],
-  fields: [
-    { name: 'title', label: 'Название', type: 'text', required: true },
-    { name: 'price', label: 'Цена', type: 'number', required: true },
-    { name: 'category', label: 'Категория', type: 'text', required: true },
-    { name: 'inStock', label: 'В наличии', type: 'checkbox' },
-  ] as FormField[],
-}
-
-// Использование
-function App() {
-  return (
-    <AdminPanel
-      title="Админ панель"
-      logo={<span>Мой Логотип</span>} // Опционально: кастомный логотип
-      models={[userModel, productModel]}
-      login={{
-        onSubmit: async (username, password) => {
-          // Ваша логика авторизации
-          const response = await fetch('https://api.example.com/auth/login', {
-            method: 'POST',
-            headers: { 'Content-Type': 'application/json' },
-            body: JSON.stringify({ username, password }),
-          })
-          if (!response.ok) {
-            throw new Error('Неверное имя пользователя или пароль')
-          }
-          const data = await response.json()
-          // Сохраните токен
-          localStorage.setItem('token', data.token)
-        },
-      }}
-      user={{
-        name: 'Администратор', // Опционально: имя пользователя в header
-        onLogout: () => {
-          // Опционально: обработчик выхода
-          localStorage.removeItem('token')
-        },
-      }}
-    />
-  )
-}
-```
-
-## Типы полей форм
-
-Поддерживаются следующие типы полей в `FormField`:
-
-- `text` - Текстовое поле
-- `email` - Email поле
-- `number` - Числовое поле
-- `password` - Поле пароля
-- `textarea` - Многострочное поле
-- `select` - Выпадающий список (требует `options`)
-- `checkbox` - Чекбокс
-- `radio` - Радиокнопки (требует `options`)
-
-Пример конфигурации поля:
-
-```tsx
-{
-  name: 'fieldName',           // Имя поля (обязательно)
-  label: 'Метка поля',          // Метка поля (обязательно)
-  type: 'text',                 // Тип поля (опционально, по умолчанию 'text')
-  required: true,               // Обязательное поле (опционально)
-  placeholder: 'Подсказка',     // Подсказка (опционально)
-  disabled: false,              // Отключено (опционально)
-  options: [                    // Опции для select/radio (обязательно для этих типов)
-    { value: 'value1', label: 'Метка 1' },
-    { value: 'value2', label: 'Метка 2' },
-  ],
-}
-```
-
-## Быстрый старт
-
-```bash
-npm install ui-admin-lib
-```
-
-```tsx
-import { AdminPanel, CrudService } from 'ui-admin-lib'
-import 'ui-admin-lib/styles'
-
-const userService = new CrudService({
-  baseUrl: 'https://api.example.com/users',
-})
-
-const userModel = {
-  name: 'users',
-  label: 'Пользователи',
-  service: userService,
-  columns: [
-    { key: 'id', title: 'ID', dataIndex: 'id' },
-    { key: 'name', title: 'Имя', dataIndex: 'name' },
-  ],
-  fields: [
-    { name: 'name', label: 'Имя', type: 'text', required: true },
-  ],
-}
-
-function App() {
-  return <AdminPanel models={[userModel]} />
-}
-```
-
-## Демо приложение
-
-Запустите демо приложение для просмотра всех возможностей:
-
-```bash
-git clone <repository-url>
-cd ui-admin-lib
-npm install
-npm run demo
-```
-
-Откройте http://localhost:3000 в браузере.
-
-**Вход:**
-- Логин: `admin`
-- Пароль: `admin`
-
-## Основные компоненты
-
-### AdminPanel
-Главный компонент для создания админ-панели. Принимает конфигурацию и автоматически создает:
-- Страницу входа
-- Боковую навигацию
-- Таблицы с данными
-- Формы создания/редактирования
-- Операции CRUD (Create, Read, Update, Delete)
-
-### CrudService
-Утилита для работы с REST API. Поддерживает любые форматы ответов API.
-
-### Низкоуровневые компоненты
-
-### Layout (Макет)
-- `PageLayout` - Основной layout с header, sidebar и content
-- `Header` - Шапка страницы
-- `Sidebar` - Боковая панель
-- `Content` - Основная область контента
-
-### Form (Формы)
-- `Button` - Кнопка (варианты: primary, success, danger, ghost)
-- `Input` - Поле ввода текста
-- `Select` - Выпадающий список
-- `Textarea` - Многострочное поле ввода
-- `Checkbox` - Чекбокс
-- `Radio` - Радиокнопка
-- `Label` - Метка для полей формы
-
-### Table (Таблицы)
-- `DataTable` - Таблица данных с колонками и строками
-
-### Modal (Модальные окна)
-- `Modal` - Модальное окно
-
-### Navigation (Навигация)
-- `Menu` - Меню навигации
-- `Breadcrumbs` - Хлебные крошки
-- `Tabs` - Вкладки
-
-### Utility (Утилиты)
-- `Card` - Карточка
-- `Toast` / `ToastContainer` - Уведомления
-- `Loading` - Индикатор загрузки
-- `Badge` - Значок/бейдж
-
-## API Reference
-
-### AdminPanel
-
-Главный компонент для создания админ-панели.
-
-```tsx
-<AdminPanel
-  title?: string              // Заголовок админ-панели (по умолчанию "Админ панель")
-  logo?: React.ReactNode      // Кастомный логотип
-  models: AdminModel[]        // Массив моделей для отображения
-  login?: {                   // Конфигурация авторизации (опционально)
-    onSubmit: (username: string, password: string) => Promise<void> | void
-  }
-  user?: {                    // Информация о пользователе (опционально)
-    name?: string             // Имя пользователя в header
-    onLogout?: () => void     // Обработчик выхода
-  }
-/>
-```
-
-### AdminModel
-
-Конфигурация модели данных.
-
-```tsx
-interface AdminModel<T = any> {
-  name: string                           // Уникальное имя модели
-  label: string                          // Отображаемое название
-  service: CrudService<T>                // Сервис для работы с API
-  columns: Column<T>[]                   // Колонки таблицы
-  fields: FormField[]                    // Поля формы
-  getItemId?: (item: T) => string | number  // Функция получения ID (опционально)
-}
-```
-
-### CrudService
-
-Класс для работы с REST API.
-
-```tsx
-new CrudService<T>({
-  baseUrl: string                        // Базовый URL API
-  getListUrl?: (params?: any) => string  // URL для получения списка (опционально)
-  getDetailUrl?: (id) => string          // URL для получения элемента (опционально)
-  getCreateUrl?: () => string            // URL для создания (опционально)
-  getUpdateUrl?: (id) => string          // URL для обновления (опционально)
-  getDeleteUrl?: (id) => string          // URL для удаления (опционально)
-  transformRequest?: (data) => any       // Трансформация запроса (опционально)
-  transformResponse?: (data) => T        // Трансформация ответа (опционально)
-  headers?: Record<string, string>       // Заголовки запросов (опционально)
-})
-```
-
-Методы:
-- `getList(params?)` - Получить список элементов
-- `getDetail(id)` - Получить элемент по ID
-- `create(data)` - Создать новый элемент
-- `update(id, data)` - Обновить элемент
-- `delete(id)` - Удалить элемент
-
-### Column
-
-Конфигурация колонки таблицы.
-
-```tsx
-interface Column<T> {
-  key: string                            // Уникальный ключ колонки
-  title: string                          // Заголовок колонки
-  dataIndex?: string                     // Поле данных для отображения
-  render?: (value: any, record: T, index: number) => React.ReactNode  // Кастомный рендер
-  width?: number | string                // Ширина колонки
-  align?: 'left' | 'center' | 'right'   // Выравнивание
-}
-```
-
-### FormField
-
-Конфигурация поля формы.
-
-```tsx
-interface FormField {
-  name: string                           // Имя поля
-  label: string                          // Метка поля
-  type?: 'text' | 'email' | 'number' | 'password' | 'textarea' | 'select' | 'checkbox' | 'radio'
-  options?: Array<{ value: string | number; label: string }>  // Опции для select/radio
-  required?: boolean                     // Обязательное поле
-  placeholder?: string                   // Подсказка
-  disabled?: boolean                     // Отключено
-}
-```
-
-## Разработка
-
-```bash
-# Установка зависимостей
-npm install
-
-# Сборка библиотеки
-npm run build
-
-# Запуск демо приложения
-npm run demo
-
-# Линтинг
-npm run lint
-```
-
-## Публикация в npm
-
-```bash
-# Убедитесь что все изменения закоммичены
-git add .
-git commit -m "Prepare for release"
-
-# Обновите версию (если нужно)
-npm version patch  # или minor, major
-
-# Соберите библиотеку
-npm run build
-
-# Опубликуйте
-npm publish
-```
-
-## Лицензия
-
-MIT
-
+# UI Admin Library
+
+Library for quickly creating admin panels in React with full CRUD functionality. Create a complete admin panel in just a few lines of code!
+
+## Installation
+
+```bash
+npm install ui-admin-lib
+```
+
+## Usage
+
+Create an admin panel in a few lines:
+
+```tsx
+import { AdminPanel, CrudService } from 'ui-admin-lib'
+import 'ui-admin-lib/styles'
+
+// 1. Create a service for working with API
+const userService = new CrudService({
+  baseUrl: 'https://api.example.com/users',
+})
+
+// 2. Define a model
+const userModel = {
+  name: 'users',
+  label: 'Users',
+  service: userService,
+  columns: [
+    { key: 'id', title: 'ID', dataIndex: 'id' },
+    { key: 'name', title: 'Name', dataIndex: 'name' },
+    { key: 'email', title: 'Email', dataIndex: 'email' },
+  ],
+  fields: [
+    { name: 'name', label: 'Name', type: 'text', required: true },
+    { name: 'email', label: 'Email', type: 'email', required: true },
+  ],
+}
+
+// 3. Use AdminPanel
+function App() {
+  return (
+    <AdminPanel
+      title="My Admin"
+      models={[userModel]}
+      login={{
+        onSubmit: async (username, password) => {
+          // Your authorization logic
+        },
+      }}
+    />
+  )
+}
+```
+
+That's it! AdminPanel will automatically create:
+- Login page
+- Sidebar navigation
+- Data tables
+- Create/edit forms
+- Full CRUD functionality
+
+## Full Configuration Example
+
+Here's a complete example with multiple models and all features:
+
+```tsx
+import { AdminPanel, CrudService, AdminModel } from 'ui-admin-lib'
+import type { Column, FormField } from 'ui-admin-lib'
+import 'ui-admin-lib/styles'
+
+// Data types
+interface User {
+  id: number
+  name: string
+  email: string
+  role: string
+  active: boolean
+}
+
+interface Product {
+  id: number
+  title: string
+  price: number
+  category: string
+  inStock: boolean
+}
+
+// Create services for working with API
+const userService = new CrudService<User>({
+  baseUrl: 'https://api.example.com/users',
+  headers: {
+    'Authorization': 'Bearer YOUR_TOKEN',
+    'Content-Type': 'application/json'
+  },
+  // Optional: custom URLs for operations
+  getListUrl: () => 'https://api.example.com/users',
+  getDetailUrl: (id) => `https://api.example.com/users/${id}`,
+  getCreateUrl: () => 'https://api.example.com/users',
+  getUpdateUrl: (id) => `https://api.example.com/users/${id}`,
+  getDeleteUrl: (id) => `https://api.example.com/users/${id}`,
+  // Optional: data transformation
+  transformRequest: (data) => data, // Transform before sending
+  transformResponse: (data) => data, // Transform after receiving
+})
+
+const productService = new CrudService<Product>({
+  baseUrl: 'https://api.example.com/products',
+  headers: {
+    'Authorization': 'Bearer YOUR_TOKEN'
+  }
+})
+
+// User model configuration
+const userModel: AdminModel<User> = {
+  name: 'users',
+  label: 'Users',
+  service: userService,
+  columns: [
+    { key: 'id', title: 'ID', dataIndex: 'id' },
+    { key: 'name', title: 'Name', dataIndex: 'name' },
+    { key: 'email', title: 'Email', dataIndex: 'email' },
+    {
+      key: 'role',
+      title: 'Role',
+      dataIndex: 'role',
+      render: (value) => value.charAt(0).toUpperCase() + value.slice(1),
+    },
+    {
+      key: 'active',
+      title: 'Active',
+      dataIndex: 'active',
+      render: (value) => (value ? 'Yes' : 'No'),
+    },
+  ] as Column<User>[],
+  fields: [
+    { name: 'name', label: 'Name', type: 'text', required: true, placeholder: 'Enter name' },
+    { name: 'email', label: 'Email', type: 'email', required: true, placeholder: 'Enter email' },
+    {
+      name: 'role',
+      label: 'Role',
+      type: 'select',
+      required: true,
+      options: [
+        { value: 'admin', label: 'Administrator' },
+        { value: 'user', label: 'User' },
+      ],
+    },
+    { name: 'active', label: 'Active', type: 'checkbox' },
+  ] as FormField[],
+  // Optional: custom ID getter function
+  getItemId: (item) => item.id,
+}
+
+// Product model configuration
+const productModel: AdminModel<Product> = {
+  name: 'products',
+  label: 'Products',
+  service: productService,
+  columns: [
+    { key: 'id', title: 'ID', dataIndex: 'id' },
+    { key: 'title', title: 'Title', dataIndex: 'title' },
+    {
+      key: 'price',
+      title: 'Price',
+      dataIndex: 'price',
+      render: (value) => `$${value.toLocaleString('en-US')}`,
+    },
+    { key: 'category', title: 'Category', dataIndex: 'category' },
+    {
+      key: 'inStock',
+      title: 'In Stock',
+      dataIndex: 'inStock',
+      render: (value) => (value ? 'Yes' : 'No'),
+    },
+  ] as Column<Product>[],
+  fields: [
+    { name: 'title', label: 'Title', type: 'text', required: true },
+    { name: 'price', label: 'Price', type: 'number', required: true },
+    { name: 'category', label: 'Category', type: 'text', required: true },
+    { name: 'inStock', label: 'In Stock', type: 'checkbox' },
+  ] as FormField[],
+}
+
+// Usage
+function App() {
+  return (
+    <AdminPanel
+      title="Admin Panel"
+      logo={<span>My Logo</span>} // Optional: custom logo
+      models={[userModel, productModel]}
+      login={{
+        onSubmit: async (username, password) => {
+          // Your authorization logic
+          const response = await fetch('https://api.example.com/auth/login', {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({ username, password }),
+          })
+          if (!response.ok) {
+            throw new Error('Invalid username or password')
+          }
+          const data = await response.json()
+          // Save token
+          localStorage.setItem('token', data.token)
+        },
+      }}
+      user={{
+        name: 'Administrator', // Optional: user name in header
+        onLogout: () => {
+          // Optional: logout handler
+          localStorage.removeItem('token')
+        },
+      }}
+    />
+  )
+}
+```
+
+## Form Field Types
+
+The following field types are supported in `FormField`:
+
+- `text` - Text field
+- `email` - Email field
+- `number` - Number field
+- `password` - Password field
+- `textarea` - Multi-line field
+- `select` - Dropdown list (requires `options`)
+- `checkbox` - Checkbox
+- `radio` - Radio buttons (requires `options`)
+
+Field configuration example:
+
+```tsx
+{
+  name: 'fieldName',           // Field name (required)
+  label: 'Field Label',        // Field label (required)
+  type: 'text',                // Field type (optional, default 'text')
+  required: true,              // Required field (optional)
+  placeholder: 'Hint',         // Placeholder (optional)
+  disabled: false,             // Disabled (optional)
+  options: [                   // Options for select/radio (required for these types)
+    { value: 'value1', label: 'Label 1' },
+    { value: 'value2', label: 'Label 2' },
+  ],
+}
+```
+
+## Quick Start
+
+```bash
+npm install ui-admin-lib
+```
+
+```tsx
+import { AdminPanel, CrudService } from 'ui-admin-lib'
+import 'ui-admin-lib/styles'
+
+const userService = new CrudService({
+  baseUrl: 'https://api.example.com/users',
+})
+
+const userModel = {
+  name: 'users',
+  label: 'Users',
+  service: userService,
+  columns: [
+    { key: 'id', title: 'ID', dataIndex: 'id' },
+    { key: 'name', title: 'Name', dataIndex: 'name' },
+  ],
+  fields: [
+    { name: 'name', label: 'Name', type: 'text', required: true },
+  ],
+}
+
+function App() {
+  return <AdminPanel models={[userModel]} />
+}
+```
+
+## Demo Application
+
+Run the demo application to see all features:
+
+```bash
+git clone <repository-url>
+cd ui-admin-lib
+npm install
+npm run demo
+```
+
+Open http://localhost:3000 in your browser.
+
+**Login:**
+- Username: `admin`
+- Password: `admin`
+
+## Core Components
+
+### AdminPanel
+Main component for creating admin panels. Accepts configuration and automatically creates:
+- Login page
+- Sidebar navigation
+- Data tables
+- Create/edit forms
+- CRUD operations (Create, Read, Update, Delete)
+
+### CrudService
+Utility for working with REST API. Supports any API response formats.
+
+### Low-level Components
+
+### Layout
+- `PageLayout` - Main layout with header, sidebar and content
+- `Header` - Page header
+- `Sidebar` - Sidebar panel
+- `Content` - Main content area
+
+### Form
+- `Button` - Button (variants: primary, success, danger, ghost)
+- `Input` - Text input field
+- `Select` - Dropdown list
+- `Textarea` - Multi-line input field
+- `Checkbox` - Checkbox
+- `Radio` - Radio button
+- `Label` - Form field label
+
+### Table
+- `DataTable` - Data table with columns and rows
+
+### Modal
+- `Modal` - Modal dialog
+
+### Navigation
+- `Menu` - Navigation menu
+- `Breadcrumbs` - Breadcrumb navigation
+- `Tabs` - Tabs
+
+### Utility
+- `Card` - Card component
+- `Toast` / `ToastContainer` - Notifications
+- `Loading` - Loading spinner
+- `Badge` - Badge component
+
+## API Reference
+
+### AdminPanel
+
+Main component for creating admin panels.
+
+```tsx
+<AdminPanel
+  title?: string              // Admin panel title (default: "Admin Panel")
+  logo?: React.ReactNode      // Custom logo
+  models: AdminModel[]        // Array of models to display
+  login?: {                   // Authorization configuration (optional)
+    onSubmit: (username: string, password: string) => Promise<void> | void
+  }
+  user?: {                    // User information (optional)
+    name?: string             // User name in header
+    onLogout?: () => void     // Logout handler
+  }
+/>
+```
+
+### AdminModel
+
+Data model configuration.
+
+```tsx
+interface AdminModel<T = any> {
+  name: string                           // Unique model name
+  label: string                          // Display name
+  service: CrudService<T>                // Service for working with API
+  columns: Column<T>[]                   // Table columns
+  fields: FormField[]                    // Form fields
+  getItemId?: (item: T) => string | number  // ID getter function (optional)
+}
+```
+
+### CrudService
+
+Class for working with REST API.
+
+```tsx
+new CrudService<T>({
+  baseUrl: string                        // Base API URL
+  getListUrl?: (params?: any) => string  // URL for getting list (optional)
+  getDetailUrl?: (id) => string          // URL for getting item (optional)
+  getCreateUrl?: () => string            // URL for creating (optional)
+  getUpdateUrl?: (id) => string          // URL for updating (optional)
+  getDeleteUrl?: (id) => string          // URL for deleting (optional)
+  transformRequest?: (data) => any       // Request transformation (optional)
+  transformResponse?: (data) => T        // Response transformation (optional)
+  headers?: Record<string, string>       // Request headers (optional)
+})
+```
+
+Methods:
+- `getList(params?)` - Get list of items
+- `getDetail(id)` - Get item by ID
+- `create(data)` - Create new item
+- `update(id, data)` - Update item
+- `delete(id)` - Delete item
+
+### Column
+
+Table column configuration.
+
+```tsx
+interface Column<T> {
+  key: string                            // Unique column key
+  title: string                          // Column title
+  dataIndex?: string                     // Data field to display
+  render?: (value: any, record: T, index: number) => React.ReactNode  // Custom render
+  width?: number | string                // Column width
+  align?: 'left' | 'center' | 'right'   // Alignment
+}
+```
+
+### FormField
+
+Form field configuration.
+
+```tsx
+interface FormField {
+  name: string                           // Field name
+  label: string                          // Field label
+  type?: 'text' | 'email' | 'number' | 'password' | 'textarea' | 'select' | 'checkbox' | 'radio'
+  options?: Array<{ value: string | number; label: string }>  // Options for select/radio
+  required?: boolean                     // Required field
+  placeholder?: string                   // Placeholder
+  disabled?: boolean                     // Disabled
+}
+```
+
+## Development
+
+```bash
+# Install dependencies
+npm install
+
+# Build library
+npm run build
+
+# Run demo application
+npm run demo
+
+# Linting
+npm run lint
+```
+
+## Publishing to npm
+
+```bash
+# Make sure all changes are committed
+git add .
+git commit -m "Prepare for release"
+
+# Update version (if needed)
+npm version patch  # or minor, major
+
+# Build library
+npm run build
+
+# Publish
+npm publish
+```
+
+## License
+
+MIT

package/package.json

@@ -1,64 +1,64 @@
-{
-  "name": "ui-admin-lib",
-  "version": "1.0.0",
-  "description": "UI библиотека для создания административных панелей на React",
-  "main": "./dist/index.js",
-  "module": "./dist/index.esm.js",
-  "types": "./dist/index.d.ts",
-  "exports": {
-    ".": {
-      "import": "./dist/index.esm.js",
-      "require": "./dist/index.js",
-      "types": "./dist/index.d.ts"
-    },
-    "./styles": "./dist/styles.css"
-  },
-  "files": [
-    "dist",
-    "README.md"
-  ],
-  "scripts": {
-    "dev": "vite",
-    "build": "vite build",
-    "preview": "vite preview",
-    "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
-    "demo": "cd demo && npm install && npm run dev",
-    "demo:build": "cd demo && npm install && npm run build"
-  },
-  "peerDependencies": {
-    "react": "^18.0.0",
-    "react-dom": "^18.0.0"
-  },
-  "devDependencies": {
-    "@types/react": "^18.2.43",
-    "@types/react-dom": "^18.2.17",
-    "@typescript-eslint/eslint-plugin": "^6.14.0",
-    "@typescript-eslint/parser": "^6.14.0",
-    "@vitejs/plugin-react": "^4.2.1",
-    "eslint": "^8.55.0",
-    "eslint-plugin-react-hooks": "^4.6.0",
-    "eslint-plugin-react-refresh": "^0.4.5",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "typescript": "^5.2.2",
-    "vite": "^5.0.8",
-    "vite-plugin-dts": "^3.6.4"
-  },
-  "keywords": [
-    "react",
-    "admin",
-    "crud",
-    "admin-panel",
-    "dashboard",
-    "ui-library",
-    "typescript",
-    "react-components"
-  ],
-  "author": "",
-  "license": "MIT",
-  "repository": {
-    "type": "git",
-    "url": ""
-  }
-}
-
+{
+  "name": "ui-admin-lib",
+  "version": "1.1.0",
+  "description": "Library for quickly creating admin panels in React with full CRUD functionality",
+  "main": "./dist/index.js",
+  "module": "./dist/index.esm.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/index.esm.js",
+      "require": "./dist/index.js",
+      "types": "./dist/index.d.ts"
+    },
+    "./styles": "./dist/styles.css"
+  },
+  "files": [
+    "dist",
+    "README.md"
+  ],
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview",
+    "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
+    "demo": "cd demo && npm install && npm run dev",
+    "demo:build": "cd demo && npm install && npm run build"
+  },
+  "peerDependencies": {
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0"
+  },
+  "devDependencies": {
+    "@types/react": "^18.2.43",
+    "@types/react-dom": "^18.2.17",
+    "@typescript-eslint/eslint-plugin": "^6.14.0",
+    "@typescript-eslint/parser": "^6.14.0",
+    "@vitejs/plugin-react": "^4.2.1",
+    "eslint": "^8.55.0",
+    "eslint-plugin-react-hooks": "^4.6.0",
+    "eslint-plugin-react-refresh": "^0.4.5",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "typescript": "^5.2.2",
+    "vite": "^5.0.8",
+    "vite-plugin-dts": "^3.6.4"
+  },
+  "keywords": [
+    "react",
+    "admin",
+    "crud",
+    "admin-panel",
+    "dashboard",
+    "ui-library",
+    "typescript",
+    "react-components"
+  ],
+  "author": "",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": ""
+  }
+}
+