UrFU UI-Kit React

Библиотека React-компонентов для создания пользовательских интерфейсов в экосистеме Уральского федерального университета.

📦 Установка

npm install urfu-ui-kit-react

🚀 Быстрый старт

Базовая настройка

В библиотеку встроена библиотека стилей urfu-ui-kit-vanilla, поэтому нужно в корне проекта импортировать стили:

import "urfu-ui-kit-react/dist/style.css"

Или подключиться по ссылке конкретной версии как указано здесь: https://uikit.my1.urfu.ru/#/ui/main

Важно: Библиотека по умолчанию имеет шрифт Montserrat и полосу прокрутки, адаптивную под разные разрешения экрана. Они объявлены глобально и применяются в проекте посредством импорта библиотеки. А также стили глобально применены для тегов h1-h6.

Импорт компонентов

Импорт компонентов осуществляется по имени:

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:

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>;
}

Работа с формами

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>
  );
}

Навигация

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' }
        ]}
      />
    </>
  );
}

Модальные окна

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>
    </>
  );
}

Работа с таблицами

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. Для запуска локальной версии:

npm run sb

Документация также доступна онлайн: 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. Поделитесь своими вопросами, замечаниями и рекомендациями: Форма обратной связи