Тестовое покрытие на данный момент - 0.0%.

Ссылка на npm: https://www.npmjs.com/package/yutu-ui-lib

Публикация новой версии:

1. Внести изменения в код библиотеки.
2. Если добавлен новый UI-компонент — не забыть импортировать его в src/index.ts, чтобы он стал доступен при установке библиотеки. Также в каждом новом UI-компоненте указывай ссылку на макет Figma (см. пример в YButton.tsx).
3. Обновить версию в package.json
   Пример: "version": "0.1.21" → "version": "0.1.22"
4. Сделать git pull ветки main
5. Выполнить сборку библиотеки: npm run build
6. Закоммитить и запушить изменения в Git
7. Если не зарегистрированы в npm — зарегистрироваться и получить доступ к публикации библиотеки.
8. Опубликовать пакет в npm: npm publish

Обновление библиотеки в другом проекте:

1. Перейти в нужный проект (где используется yutu-ui-lib)
2. Удалить папки зависимостей: rm -rf node_modules package-lock.json
3. Установить обновления: npm install

Инструкция по использованию Storybook в библиотеке компонентов

1. Запуск Storybook Для локального просмотра компонентов: npm run storybook

2. Структура и размещение историй Для каждого компонента создаётся отдельный файл с историей. Истории располагаются рядом с компонентом или в папке stories. Имя файла должно оканчиваться на .stories.tsx

3. Названия историй Название истории в Storybook задаётся через поле title, и должно отражать структуру библиотеки: например как у меня в примере в YButton.stories.tsx: "title: 'YButton'"

   Это нужно для удобной навигации в дереве компонентов Storybook.

4. Использование аргументов (Args) Для настройки пропсов компонента в Storybook используются args.

   Все основные параметры (например, disabled, loading, variant, size) должны быть описаны через argTypes.

   Это позволяет управлять состоянием компонента прямо в интерфейсе Storybook.

CSS-префиксы

Все классы автоматически получают префикс yutu-.

• Если нужно исключить класс из префиксации, используйте :global() (CSS Modules)
• Для переопределения префикса измените vite.config.ts/css/modules/generateScopedName

Реализованные компоненты:

1. YButton Компонент кнопки, предназначенный для вызова действий в пользовательском интерфейсе

2. YDropdown Содержит компоненты Dropdown и DropdownItem, реализует универсальное выпадающее меню с поддержкой кастомизации, управления и доступности

3. Ytabs Компонент для организации контента в виде вкладок с возможностью переключения между ними

4. YScrollContainer Компонент-обертка для динамичного и кроссбраузерного скролла

5. YAvatar Компонент аватара пользователя для отображения изображения или инициала

6. YAvatarGroup Компонент для показа списка аватаров

7. YText Компонент для вывода текста

8. YTable Компонент для вывода таблицы

9. YModalWrapper Для модальных окон, где содержимое может превышать высоту экрана, тело рекомендуется оборачивать в компонент YModalBody. Он обеспечивает корректный скролл внутри модалки и не влияет на шапку (YModalHeader) и футер (YModalFooter).

10. YInput Компонент Текстовое поле

11. YCheckbox Компонент для чекбокса

12. YAvatarFilter Компонент для фильтра по аватарам

13. YTooltip Компонент подсказок при наведении на элемент

14. YToast Компонент для показа toast-сообщений

15. YSelectionList Компонент для показа списка выбора