aeroclub-ui

Библиотека фронт компонентов

---

в данном репозитории представлены компоненты для использования в проектах и их дальнейшей модификации с удобством шаринга их между командами

---

инструкция для использования:

• в корневой папке проекта сделать клон проекта помеченный как саб репозиторий: git submodule add https://github.com/aeroclub-it/aeroclub-frontend-components path-to-src
• в реакт приложении папка сабрепо должна лежать в папке src или можно настроить webpack.config чтобы сборщик смотрел наружу папки
• для регистрации изменений в сабрепо (будь то отдельный коммит или пуш в мастер ветку) необходимо проделать привычные шаги, в терминале с открытой папкой сабмодуля
• когда изменения заапрувлены тестировщиками мерджим новую ветку в мастер и отправляем ее
• в случае если привычные команды не сработали, проверьте терминал, возможно гит дал подсказку какую комнаду использовать
• дополнительные инструкции можно найти по ссылке https://git-scm.com/book/ru/v2/Инструменты-Git-Подмодули

---

Папки:

• fonts: содержит шрифты, css файл с их подключением
• ui: дизайн компоненты готовые к использованию

---

UI

• avatar: компонент с аватаром(круглым) и функционал по плейсхолдингу инициалов (Имени фамилии) если изображение не передано
• badge: компонент с всплывашкой при наведении на элемент
• button: компонент кнопки
• calendar: компонент календаря. Требуемые библиотеки для использования: mui, react-date-range,
• cat-plug: компонент с заглушкой в виде котика
• сharts: графики
• checkbox чекбоксы
• confirmationPopup: модальное всплывающее окно с подтверждением чего либо
• form: конструктор формы с полями различного вида и обработчиком ошибок
• google-map: карта гугл
• icon-with-counter: иконка со счетчиком
• icons: коллекция иконок. Большинство иконок импортируются в формате js кода как свг для их кастомизации(цвет, размер и тд)
• info-message: информационное сообщение в виде карточки с цветом статуса выводимого сообщения
• input: инпут
• list-element: элементы перечисления (с раскрывашкой и радио инпуты)
• modal: модальное окно
• modal-right: модальное окно которое открывается справа у пользователя
• modal-window-big: большая модалка
• modal-window-small: маленькая модалка
• no-data-overlay: слой для вывода сообщения если нет данных
• person-block: блок с информацией о пользователе (аватарка, имя, фамилия и тд)
• popup: попапчик
• progress-bar: линия с отображением прогресса чего-либо (полоса загрузки)
• select: селект. Требуемые библиотеки react-select.
• simple-select: упрощенный селект. Требуемые библиотеки react-select.
• skeleton-overlay: скелетон
• spinner: спиннер
• status-item: элемент с информацией о статусе чего либо
• three-dots-loading: загрузка с появляющимися-исчезающими тремя точками
• toggle: переключатель право-лево (рычаг)
• tooltip: всплывашка при наведении