Краткое описание данного npm пакета:

Данный пакет представляет из себя библиотеку из 12 кастомизируемых(10 шт.) и некастомизируемых(2шт.) React компонентов.

Список компонентов:

1. BottomButton - кастомизируемый;
2. Checkbox - кастомизируемый;
3. Counter - кастомизируемый;
4. Dropdown - кастомизируемый;
5. Searchbar - кастомизируемый;
6. NavigateHeader - кастомизируемый;
7. CustomSwiper - кастомизируемый;
8. ModalWindow - кастомизируемый;
9. Input - некастомизируемый;
10. CustomIMG - некастомизируемый, сложная модель;
11. Favorite - кастомизируемый, сложная модель;
12. Table - кастомизируемый, сложная модель.

Также компоненты делятся еще на 2 типа: 1) со сложными моделями(требуют большие массивы данных(Table), либо связь с сервером (CustomIMG, Favorite)), 2) с простыми моделями(можно использовать в приложениях, не использующих сеть/большие массивы данных).

Для установки требуется прописать в терминале команду: "npm i npm-vrit-custom-uikit".

Для подключения в ваш реакт проект элементы необходимо заимпортировать. Для импорта библиотечных компонентов в ваш компонент необходимо сделать импорт: import "name" from "npm-vrit-custom-uikit"; , где "name" - название необходимого компонента из библиотеки.

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

1)Кастомизируемые компоненты:

BottomButton, Checkbox, Counter, Dropdown, Searchbar, NavigateHeader, CustomSwiper, Favorite, ModalWindow, Table.

Все кастомизируемые компоненты можно стилизовать, закидывая в пропсы атрибуты, которые начинаются на "style_". Подраздел "Подключение" гласит о том, что базово требуют компоненты при использовании в вашем компоненте.

BottomButton:

1. style_wrapper - обертка
2. style_main - содержимое

Checkbox:

Подключение:

const [checked,setChecked] = useState(false);

1. style_image_container - контейнер
2. style_checkbox_label - стилизация надписи рядом с чекбоксом
3. style_checkbox_input - стилизация инпута (?)
4. style_image - стилизация картинки

Counter:

Подключение:

const [counterValue,setCounterValue] = useState(0);

1. style_wrapper - обертка
2. style_images - стилизация картинок плюса и минуса
3. style_p - стилизация числа-счетчика
4. picPlusSrc - путь к кастомной картинке плюса
5. picMinusSrc - путь к кастомной картинке минуса

Dropdown:

Подключение:

interface IDDoptions{
key:string;
name:string;
visible?: boolean;
}

const [shop,setShop] = useState("1");

const DDoptions:IDDoptions[] =[{key:"2",name:"two"},{key: "3",name: "three"}];
<Dropdown
    options={DDoptions}
    value={shop}
    valueSetter={setShop}
    ...
/>

1. style_container - контейнер;
2. style_dropDownDisplay - стилизация главного поля;
3. style_arrow_image - стилизация картинки стрелки;
4. style_list - стилизация выпадающего списка;
5. style_list_elem - стилизация элемента выпадающего списка;
6. dropDownIconSrc - путь к кастомной картинке со стрелкой;
7. errorIconSrc - путь к кастомной картинке с иконкой ошибки;

NavigateHeader:

1. style_wrapper - обертка;
2. style_title - стилизация названия хедера;
3. style_trash - стилизация картинки мусорки;
4. style_arrow - стилизация картинки стрелки "обратно";

CustomSwiper:

Подключение:

items - массив из JSX элементов

1. withDynamicDots - с динамическими точками;
2. withClickableDots - на точки можно нажимать;
3. withPagination - с точкамии;
4. withLoop - с петлей (бесконечный свайпер);
5. slidesPerView - сколько слайдов уместится в поле зрения;
6. spaceIncrement - то, на сколько будет увеличиваться расстояние между слайдами при увеличении разрешения экрана;
7. spaceBetween - расстояние между блоками;
8. withTitle - с заголовком;
9. RouteIntoTitle - если в заголовке должен быть путь-маршрутизатор, то его вставить в этот атрибут;
10. style_title_div - стилизует контейнер заголовка;
11. style_title - стилизует сам заголовок;
12. style_swiper_slide - стилизация слайда;
13. style_swiper - главный стилизатор, также работает с глобальными переменными свайпера:

    "--swiper-pagination-color": "#e707ba", - цвет точек;
    "--swiper-pagination-bullet-inactive-color": "#1328b9", - цвет неактивных точек;
    "--swiper-pagination-bullet-inactive-opacity": "1", - прозрачность неактивных точек;
    "--swiper-pagination-bullet-size": "16px", - размер точек;
    "--swiper-pagination-bullet-horizontal-gap": "6px" - расстояние между точками;

Table:

Подключение:

interface IRowElement{
    visible:boolean[];
    filter:any[];
    content: any;
}

1. style_table_container - обертка самой таблицы;
2. style_header_container - обертка хедера таблицы;
3. style_header_color - только цветовые значения хедера;
4. style_header_lines - вертикальные линии в хедере;

Favorite:

Подключение:

Необходимо иметь функцию по типу Promise: WatchListSwitch: (id: string)=>any;

style_main - размер сердца;

ModalWindow:

Подключение:

const [openModal,setOpenModal] = useState(false);

const OpenModalHandler = () => {
    setOpenModal(true);
}
const CloseModalHandler = () => {
    setOpenModal(false);
}
<div onClick={OpenModalHandler}>
{openModal && <ModalWindow onClose={CloseModalHandler} ... />}
</div>

1. onlyConfirm - опция чтобы бло только "OK";
2. textToOnlyConfirm - текст для одной опции (что вместо "OK");
3. textForYes - текст для согласия;
4. textForNo - текст для отрицания;
5. style_close_wrapper - стилизация всей области экрана кроме модального окна(то, что затемняется);
6. style_modal_wrapper - обертка;
7. style_modal_container - контейнер с модальным окном;
8. style_modal_title - стилизация контейнера с заголовком;
9. style_modal_text - стилизация контейнера с текстом;
10. style_modal_horiz_line - стилизация горизонтальной линии, которая отделяет опции от основной части модального окна;
11. style_modal_onlyConfirm_button - стилизация контейнера с "OK";
12. style_modal_close_container - стилизация контейнера для картинки с крестиком;
13. style_modal_close_icon - стилизация картинки с крестиком;
14. style_modal_agree - стилизация контейнера с согласием;
15. style_modal_disagree - стилизация контейнера с отрицанием;
16. style_modal_vert_line - стилизация вертикальной линии между "да" и "нет";

Searchbar:

1. style_wrapper - обертка;
2. style_SearchbarInner - стилизация контейнера, который хранит поле ввода (как бы border);
3. style_SearchbarLogo - картинка поиска;
4. style_SearchbarInput - стилизация поля ввода;

2)Некастомизируемые компоненты:

Input, CustomIMG

Input:

Подключение:

const [input,setInput] = useState("");
onChange={(event) => setInput(event.target.value)}

типы масок на инпут:

1. "text" - обычный текст;
2. "number" - только числа;
3. "telephone" - номер телефона;
4. "inputMask" - кастом маска;
5. "password" - пароль, скрывается точками;

CustomIMG

Необходим адрес сервера