urfu-ui-kit-react 1.4.11 → 1.5.0

package/README.md

@@ -1,30 +1,278 @@
-# React + TypeScript + Vite
-
-This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
-
-Currently, two official plugins are available:
-
-- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
-- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
-
-## Expanding the ESLint configuration
-
-If you are developing a production application, we recommend updating the configuration to enable type aware lint rules:
-
-- Configure the top-level `parserOptions` property like this:
-
-```js
-export default {
-  // other rules...
-  parserOptions: {
-    ecmaVersion: 'latest',
-    sourceType: 'module',
-    project: ['./tsconfig.json', './tsconfig.node.json'],
-    tsconfigRootDir: __dirname,
-  },
-}
-```
-
-- Replace `plugin:@typescript-eslint/recommended` to `plugin:@typescript-eslint/recommended-type-checked` or `plugin:@typescript-eslint/strict-type-checked`
-- Optionally add `plugin:@typescript-eslint/stylistic-type-checked`
-- Install [eslint-plugin-react](https://github.com/jsx-eslint/eslint-plugin-react) and add `plugin:react/recommended` & `plugin:react/jsx-runtime` to the `extends` list
+# UrFU UI-Kit React
+
+Библиотека React-компонентов для создания пользовательских интерфейсов в экосистеме Уральского федерального университета.
+
+## 📦 Установка
+
+```bash
+npm install urfu-ui-kit-react
+# или
+yarn add urfu-ui-kit-react
+```
+
+## 🚀 Быстрый старт
+
+### Базовая настройка
+
+В библиотеку встроена библиотека стилей `urfu-ui-kit-vanilla`, поэтому нужно в корне проекта импортировать стили:
+
+```javascript
+import "urfu-ui-kit-react/dist/style.css"
+```
+
+Или подключиться по ссылке конкретной версии как указано здесь: [https://uikit.my1.urfu.ru/#/ui/main](https://uikit.my1.urfu.ru/#/ui/main)
+
+**Важно:** Библиотека по умолчанию имеет шрифт Montserrat и полосу прокрутки, адаптивную под разные разрешения экрана. Они объявлены глобально и применяются в проекте посредством импорта библиотеки. А также стили глобально применены для тегов `h1-h6`.
+
+### Импорт компонентов
+
+Импорт компонентов осуществляется по имени:
+
+```javascript
+import { 
+  Button, 
+  InputText, 
+  Select, 
+  Checkbox, 
+  Preloader, 
+  Message, 
+  Tooltip 
+} from "urfu-ui-kit-react";
+```
+
+## 📚 Компоненты
+
+### Формы и ввод данных
+
+- **InputText** — текстовое поле ввода
+- **InputNumber** — поле ввода чисел
+- **InputFile** — загрузка файлов
+- **InputExpandTextarea** — расширяемое текстовое поле
+- **Textarea** — многострочное текстовое поле
+- **Select** — выпадающий список
+- **SearchSelect** — поисковый выпадающий список
+- **Multiselect** — множественный выбор
+- **Checkbox** — чекбокс
+- **Radio** — радиокнопка
+- **Search** — поле поиска
+- **Calendar** — календарь для выбора даты
+
+### Навигация и структура
+
+- **Menu** — боковое меню навигации
+- **Tabs** — вкладки
+- **Accordion** — аккордеон
+- **TreeView** — древовидное представление данных
+
+### Отображение данных
+
+- **Table** — таблица с поддержкой сортировки, фильтрации и виртуализации
+- **FilterTable** — таблица с расширенными возможностями фильтрации
+- **Status** — индикатор статуса
+- **Icon** — иконки
+- **Message** — сообщения (информация, предупреждение, ошибка, успех)
+- **Preloader** — индикатор загрузки
+
+### Взаимодействие
+
+- **Button** — кнопка
+- **Modal** — модальное окно
+- **Tooltip** — всплывающая подсказка
+- **NotificationProvider** и **useNotification** — система уведомлений
+
+## 💡 Примеры использования
+
+### Система уведомлений
+
+Для использования системы уведомлений, добавьте `NotificationProvider`:
+
+```jsx
+import { NotificationProvider, useNotification } from 'urfu-ui-kit-react';
+
+function App() {
+  return (
+    <NotificationProvider>
+      {/* Ваше приложение */}
+    </NotificationProvider>
+  );
+}
+
+// Использование в компонентах
+function MyComponent() {
+  const { showNotification } = useNotification();
+  
+  const handleClick = () => {
+    showNotification('success', 'Операция выполнена успешно!');
+  };
+
+  return <button onClick={handleClick}>Показать уведомление</button>;
+}
+```
+
+### Работа с формами
+
+```jsx
+import { 
+  InputText, 
+  Select, 
+  Checkbox, 
+  Radio,
+  Button 
+} from 'urfu-ui-kit-react';
+
+function MyForm() {
+  return (
+    <form>
+      <InputText 
+        title="Имя"
+        required
+      />
+      <Select
+        title="Выберите опцию"
+        options={[
+          { value: '1', label: 'Опция 1' },
+          { value: '2', label: 'Опция 2' }
+        ]}
+      />
+      <Checkbox
+        title="Согласие"
+        required
+      />
+      <Radio
+        title="Выберите вариант"
+        options={[
+          { value: '1', label: 'Вариант 1' },
+          { value: '2', label: 'Вариант 2' }
+        ]}
+      />
+      <Button type="submit">Отправить</Button>
+    </form>
+  );
+}
+```
+
+### Навигация
+
+```jsx
+import { Menu, Tabs } from 'urfu-ui-kit-react';
+
+function Navigation() {
+  return (
+    <>
+      <Menu
+        menuData={[
+          { title: 'Главная', id: 'home' },
+          { title: 'Раздел', id: 'section' }
+        ]}
+      />
+      <Tabs
+        tabs={[
+          { title: 'Вкладка 1', id: 'tab1' },
+          { title: 'Вкладка 2', id: 'tab2' }
+        ]}
+      />
+    </>
+  );
+}
+```
+
+### Модальные окна
+
+```jsx
+import { Modal, Button } from 'urfu-ui-kit-react';
+import { useState } from 'react';
+
+function MyModal() {
+  const [isOpen, setIsOpen] = useState(false);
+
+  return (
+    <>
+      <Button onClick={() => setIsOpen(true)}>
+        Открыть модальное окно
+      </Button>
+      <Modal
+        isOpen={isOpen}
+        onClose={() => setIsOpen(false)}
+        title="Заголовок"
+      >
+        Содержимое модального окна
+      </Modal>
+    </>
+  );
+}
+```
+
+### Работа с таблицами
+
+```jsx
+import { Table } from 'urfu-ui-kit-react';
+
+function DataTable() {
+  const columns = [
+    { key: 'name', title: 'Имя' },
+    { key: 'age', title: 'Возраст' },
+    { key: 'city', title: 'Город' }
+  ];
+
+  const data = [
+    { name: 'Иван', age: 25, city: 'Екатеринбург' },
+    { name: 'Мария', age: 30, city: 'Москва' }
+  ];
+
+  return (
+    <Table
+      columns={columns}
+      data={data}
+      sortable
+    />
+  );
+}
+```
+
+## 📖 Документация
+
+Полная документация с примерами использования всех компонентов доступна в Storybook. Для запуска локальной версии:
+
+```bash
+npm run sb
+```
+
+Документация также доступна онлайн: [https://uikit.my1.urfu.ru](https://uikit.my1.urfu.ru)
+
+## 🎨 Особенности
+
+- **TypeScript** — полная поддержка типов
+- **Адаптивность** — все компоненты адаптированы под разные разрешения экрана
+- **Виртуализация** — поддержка виртуализации для больших списков и таблиц
+- **Доступность** — компоненты разработаны с учетом принципов доступности
+- **Кастомизация** — гибкая настройка компонентов через пропсы
+
+## 🔧 Требования
+
+- React ^18.3.1
+- React DOM ^18.3.1
+
+## 📝 История версий
+
+Библиотека активно развивается. Основные изменения:
+
+- **v1.4.11** — текущая версия
+- Добавлена поддержка Tooltip с различными позициями (слева, снизу, сверху)
+- Улучшена работа с календарем и фильтрацией таблиц
+- Добавлена виртуализация для таблиц и селектов
+- Расширены возможности FilterTable
+- Добавлен компонент TreeView с поиском
+- Улучшена система уведомлений
+- Множество исправлений и оптимизаций
+
+## 🤝 Поддержка
+
+При возникновении проблем или вопросов:
+
+1. Проверьте документацию компонентов в Storybook
+2. Изучите примеры использования
+3. Поделитесь своими вопросами, замечаниями и рекомендациями: [Форма обратной связи](https://lk-form.my1.urfu.ru/uikit-feedback/submit)
+
+## 📄 Лицензия
+
+Apache-2.0