tvuikit 0.7.1 → 0.8.1

package/README.md

@@ -1,36 +1,190 @@
-# tvuikit
+# TVUIKit
 
-- UI кит от The Void!
+[![npm version](https://img.shields.io/npm/v/tvuikit)](https://www.npmjs.com/package/tvuikit)
+[![license](https://img.shields.io/npm/l/tvuikit)](LICENSE)
+[![React](https://img.shields.io/badge/React-19.2-blue)](https://react.dev/)
+[![TypeScript](https://img.shields.io/badge/TypeScript-5.9-blue)](https://www.typescriptlang.org/)
+[![Storybook](https://img.shields.io/badge/Storybook-10.2-FF4785)](https://storybook.js.org/)
+[![Tailwind CSS](https://img.shields.io/badge/Tailwind-4.1-06B6D4)](https://tailwindcss.com/)
 
-## Разработчик
+> Современный UI-кит на React для проектов The Void Community
 
-- [The Void Community](https://github.com/The-Void-Community)
-  - ([FOCKUSTY](https://github.com/FOCKUSTY))
+TVUIKit — это библиотека React-компонентов, построенная с использованием Tailwind CSS. Она предоставляет набор переиспользуемых, доступных и настраиваемых компонентов для быстрой разработки современных пользовательских интерфейсов с темной темой по умолчанию.
 
-## Репозиторий
+## ✨ Возможности
 
-- [tvuikit](https://github.com/The-Void-Community/tvuikit)
+- **🎨 Готовые компоненты**: Кнопки, поля ввода, выпадающие меню, модальные окна, переключатели, прогресс-бары и многое другое
+- **🌙 Темная тема**: Все компоненты используют темную тему с кастомными CSS-переменными
+- **🎯 Кастомизация**: Легкая настройка через пропсы и CSS-переменные
+- **📱 Адаптивность**: Все компоненты responsive-ready
+- **⚡ Производительность**: Оптимизированные компоненты с минимальным бандлом
+- **🔧 TypeScript**: Полная поддержка TypeScript с типами
+- **♿ Доступность**: Компоненты разработаны с учетом a11y
 
-### У нас есть
+## 📦 Установка
 
-- `Active` — Аналог `Activity` из React, но более удобный
-- `Background` — idk зачем, но пусть будет :)
-- `Button` — Очень крутая кнопка!
-- `Checkbox`, `Radio` и `Switch`
-- `Input` и `Textarea`
-- `Wrapper` — Это для storybook больше, но вдруг пригодится
-- `Modal` — Удобное модальное окно, наверное, надо тестить
+```bash
+npm install tvuikit
+# или
+yarn add tvuikit
+# или
+pnpm add tvuikit
+```
 
-#### Используем
+## 🚀 Быстрый старт
 
-- [Tailwind CSS](https://tailwindcss.com)
-- [Vite](https://vite.dev)
-- [React](https://react.dev)
-- [Storybook](https://storybook.js.org)
-- [Eslint](https://eslint.org)
-- [Prettier](https://prettier.io)
+```tsx
+import { Button, Input, Modal } from "tvuikit";
+import "tvuikit/index.css";
 
-#### Вдохновение
+function App() {
+  const [isOpen, setIsOpen] = useState(false);
 
-- [HeroUI](https://www.heroui.com)
-- [MaterialUI](https://mui.com)
+  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-переменные для управления темой:
+
+```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
+
+### Клонирование и установка
+
+```bash
+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](https://github.com/The-Void-Community). Подробнее в файле [LICENSE](LICENSE).
+
+## 👥 Участие в разработке
+
+Мы приветствуем вклад! Пожалуйста, ознакомьтесь с нашим [Руководством по вкладу](CONTRIBUTING.md) для подробностей.
+
+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](https://github.com/The-Void-Community/tvuikit)
+- **Issues**: [Сообщите об ошибках или предложите функции](https://github.com/The-Void-Community/tvuikit/issues)
+- **Discussions**: [Присоединяйтесь к обсуждению](https://github.com/The-Void-Community/tvuikit/discussions)
+
+## 🙏 Благодарности
+
+- Вдохновлено [HeroUI](https://www.heroui.com) и [MaterialUI](https://mui.com)
+- Собрано с помощью [Vite](https://vitejs.dev/)
+- Стилизовано с помощью [Tailwind CSS](https://tailwindcss.com/)
+- Документировано с помощью [Storybook](https://storybook.js.org/)
+
+---
+
+**Разработано [FOCKUSTY](https://fockusty.netlify.app) • Часть [The Void Community](https://github.com/The-Void-Community)**
+
+## 📞 Поддержка
+
+По вопросам использования библиотеки:
+
+- Откройте [issue](https://github.com/The-Void-Community/tvuikit/issues) на GitHub
+- Свяжитесь с разработчиком: [viserd.yt@gmail.com](mailto:viserd.yt@gmail.com)

package/dist/components/dropdown/index.stories.d.ts

@@ -1,7 +1,7 @@
 import { Meta, StoryObj } from '@storybook/react';
 import { Dropdown } from '.';
 declare const meta: Meta<typeof Dropdown>;
-export default meta;
 type Story = StoryObj<typeof Dropdown>;
 export declare const Default: Story;
 export declare const WithCustomTrigger: Story;
+export default meta;

package/dist/components/index.d.ts

@@ -8,4 +8,5 @@ export * from './modal';
 export * from './progress';
 export * from './switch';
 export * from './wrapper';
+export * from './notification';
 export * as Guildline from './guideline';

package/dist/components/notification/index.d.ts

@@ -0,0 +1,2 @@
+export * from './notification.component';
+export * from './use-notifications.hook';

package/dist/components/notification/index.stories.d.ts

@@ -0,0 +1,8 @@
+import { Meta, StoryObj } from '@storybook/react-vite';
+import { Notifications } from './notifications.component';
+import { Notification } from './notification.component';
+declare const meta: Meta<typeof Notification>;
+type Story = StoryObj<typeof Notification>;
+export declare const Default: Story;
+export declare const NotificationsTest: StoryObj<typeof Notifications>;
+export default meta;

package/dist/components/notification/notification.component.d.ts

@@ -0,0 +1,14 @@
+import { DetailedHTMLProps, HTMLAttributes, ReactNode } from 'react';
+export type NotificationProps = ({
+    text?: ReactNode | null | undefined;
+    closed?: true;
+} | {
+    text: ReactNode;
+    closed?: false;
+}) & {
+    close: (id: string) => void;
+    overwriteClassName?: boolean;
+    disablePositionAndInset?: boolean;
+    id?: string;
+} & Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "children" | "id">;
+export declare const Notification: ({ text, closed, className, disablePositionAndInset, id, close, ...props }: NotificationProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/notification/notifications.component.d.ts

@@ -0,0 +1 @@
+export declare const Notifications: () => import("react/jsx-runtime").JSX.Element;

package/dist/components/notification/use-notifications.hook.d.ts

@@ -0,0 +1,31 @@
+import { ReactNode } from 'react';
+import { NotificationProps } from './notification.component';
+export type NotificationType = NotificationProps & {
+    id: string;
+};
+type FunctionOfNotificationParameter = (data: {
+    current: ExtendedNotificationType;
+    count: number;
+    queue: ExtendedNotificationType[];
+}) => ReactNode;
+type NotificateParameter = ReactNode | FunctionOfNotificationParameter;
+type ExtendedNotificationType = Omit<NotificationType, "text"> & {
+    text: NotificateParameter;
+};
+/**
+ * @param duration duration of notification in miliseconds
+ * @param delay delay between notifications in miliseconds
+ */
+export declare const useNotifications: (duration: number, delay?: number) => {
+    NotificationComponent: import('react').ReactPortal;
+    notifications: import('react').RefObject<{
+        [key: string]: NotificationType;
+    }>;
+    notificate: (data: NotificateParameter) => void;
+    count: import('react').RefObject<number>;
+    queue: ExtendedNotificationType[];
+    current: ExtendedNotificationType | null;
+    closeAll: () => void;
+    close: (id: string) => boolean | undefined;
+};
+export {};