TVUIKit

Современный UI-кит на React для проектов The Void Community

TVUIKit — это библиотека React-компонентов, построенная с использованием Tailwind CSS. Она предоставляет набор переиспользуемых, доступных и настраиваемых компонентов для быстрой разработки современных пользовательских интерфейсов с темной темой по умолчанию.

✨ Возможности

• 🎨 Готовые компоненты: Кнопки, поля ввода, выпадающие меню, модальные окна, переключатели, прогресс-бары и многое другое
• 🌙 Темная тема: Все компоненты используют темную тему с кастомными CSS-переменными
• 🎯 Кастомизация: Легкая настройка через пропсы и CSS-переменные
• 📱 Адаптивность: Все компоненты responsive-ready
• ⚡ Производительность: Оптимизированные компоненты с минимальным бандлом
• 🔧 TypeScript: Полная поддержка TypeScript с типами
• ♿ Доступность: Компоненты разработаны с учетом a11y

📦 Установка

npm install tvuikit
# или
yarn add tvuikit
# или
pnpm add tvuikit

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

import { Button, Input, Modal } from "tvuikit";
import "tvuikit/index.css";

function App() {
  const [isOpen, setIsOpen] = useState(false);

  return (
    <div className="p-8 bg-(--bg-default) text-(--fg-text)">
      <Button variant="primary" onClick={() => setIsOpen(true)}>
        Открыть модалку
      </Button>

      <Input placeholder="Введите текст" className="mt-4" />

      <Modal isOpen={isOpen} onClose={() => setIsOpen(false)}>
        <div className="p-6">
          <h2 className="text-2xl mb-4">Пример модального окна</h2>
          <p>Содержимое модального окна</p>
        </div>
      </Modal>
    </div>
  );
}

Прогресс-индикаторы

| Компонент | Описание | | ----------------------------- | ---------------------------- | | LinearProgress | Линейный прогресс-бар | | CircleProgress | Круговой индикатор загрузки | | EllipsisProgress | Анимированные точки загрузки | | IndeterminateLinearProgress | Неопределенный прогресс-бар |

Вспомогательные компоненты

| Компонент | Описание | | ----------- | ---------------------------------------------------- | | Wrapper | Контейнер для контента | | Guildline | Демонстрационные компоненты для типографики и кнопок |

Переменные дизайн-системы

| Экспорт | Описание | | -------------- | ----------------------------------------------- | | VARIABLES | Цвета, шрифты и другие константы дизайн-системы | | borderRadius | Стандартный радиус скругления |

🎨 Дизайн-система

CSS-переменные

Библиотека использует CSS-переменные для управления темой:

:root {
  /* Фоны */
  --bg-default: #0a0a0a;
  --bg-component: #00000065;
  --bg-smooth: #111111;
  --bg-card: #27272780;

  /* Текст */
  --fg-default: #ededed;
  --fg-text: #ededed;
  --fg-mini-text: #ededed40;
  --fg-component: #272727;

  /* Цвета кнопок */
  --color-default: #ededed;
  --color-primary: #2aff6a;
  --color-danger: #ff0000;
  --color-secondary: #000000;
  --color-tetriary: #000000;
}

🛠 Разработка

Предварительные требования

• Node.js 18+
• npm/yarn/pnpm

Клонирование и установка

git clone https://github.com/The-Void-Community/tvuikit.git
cd tvuikit
npm install

🏗 Архитектура

Технологический стек

• React 19 — UI библиотека
• TypeScript — Типизация
• Tailwind CSS 4 — Стилизация через утилитарные классы
• Vite — Сборка и development server
• Storybook — Документация компонентов
• ESLint + Prettier — Линтинг и форматирование

Структура проекта

tvuikit/
├── src/
│   ├── components/     # Компоненты библиотеки
│   ├── styles/         # Стили и CSS переменные
│   ├── utils/          # Вспомогательные функции
│   └── index.ts        # Главный файл экспортов
├── .storybook/         # Конфигурация Storybook
├── dist/               # Собранные файлы (генерируется)
└── package.json

📄 Лицензия

MIT © The Void Community. Подробнее в файле LICENSE.

👥 Участие в разработке

Мы приветствуем вклад! Пожалуйста, ознакомьтесь с нашим Руководством по вкладу для подробностей.

1. Форкните репозиторий
2. Создайте ветку для новой функции (git checkout -b feature/amazing-feature)
3. Зафиксируйте изменения (git commit -m 'Add amazing feature')
4. Запушьте в ветку (git push origin feature/amazing-feature)
5. Откройте Pull Request

🤝 Сообщество

• GitHub: The-Void-Community/tvuikit
• Issues: Сообщите об ошибках или предложите функции
• Discussions: Присоединяйтесь к обсуждению

🙏 Благодарности

• Вдохновлено HeroUI и MaterialUI
• Собрано с помощью Vite
• Стилизовано с помощью Tailwind CSS
• Документировано с помощью Storybook

Разработано FOCKUSTY • Часть The Void Community

📞 Поддержка

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

• Откройте issue на GitHub
• Свяжитесь с разработчиком: [email protected]