Описание

Данная либа (ui-lib) была скомпонована с помощью пакета tsdx (https://github.com/jaredpalmer/tsdx).

Название пакета - eda-kuda-ui.

Для корректного добавления компонентов (чтобы собрался пакет) в библиотеку нужно:

• сделать экспорт этого компонента внутри src/index.tsx;

Ниже приведен пример:

файл: src/components/button/Button.tsx

const Button = () => <button></button>;

export default Button;

файл: src/index.tsx

export { default as Button } from './components/button/Button';

Использование

Ниже приведен пример использования

import { Button } from 'eda-kuda-ui';

Компоненты

Ниже приведено краткое описание параметров, которые принимают компоненты.

Button

size (необязательный параметр) - задает размер шрифта, внутренние отступы и радиус скругления границы кнопки (в rem-единицах измерения). Принимает элемент enum ButtonSize (например, ButtonSize.SMALL);

variant (необязательный параметр) - задает вариант отображения кнопки (варианты:

• ButtonVariant.SOLID - с заливкой заднего фона и границей, их цвета совпадают,
• ButtonVariant.GHOST - заливка отсутствует, цвета имеют граница и цвет текста,
• ButtonVariant.TEXT - заливка и граница отсутствует, цвет имеет только текст);

icon (необязательный параметр) - позволяет добавить иконку в кнопку. Принимает в качестве значения элемент из enum ICONS;

color (необязательный параметр) - задает цвет иконке (значения аналогичны CSS-цветам);

reverse (необязательный параметр) - меняет местами текст кнопки и иконку (по умолчанию иконка расположена слева - false);

liquid (необязательный параметр) - будет ли кнопка отображаться как блочный элемент (по умолчанию false);

justifyContent (необязательный параметр) - как будет выравниваться содержимое (текст + иконка) кнопки. Принимает элемент enum JustifyContent (например,JustifyContent.START);

buttonColor (необязательный параметр) - задает цветовую схему кнопки (цвет границы + заливка + текст). Принимает элемент кнопки ButtonColorSchemeType (например, ButtonColorSchemeType.PRIMARY).

CheckBox

checked - является ли чекбокс нажатым;

onChange - принимает функцию, которая при клике выполняется;

label (необязательный параметр) - добавляет описание чекбокса (по умолчанию пустая строка);

id - задает идентификатор для чекбокса (по умолчанию пустая строка);

labelLeft (необязательный параметр) - данное значение задает, находится ли подпись к чекбоксу слева (по умолчанию false).

CheckBoxSwitch

checked - является ли чекбокс нажатым;

onChange - принимает функцию, которая при клике выполняется;

id - задает идентификатор для чекбокса (по умолчанию пустая строка);

label (необязательный параметр) - добавляет описание чекбокса (по умолчанию пустая строка);

labelLeft (необязательный параметр) - данное значение задает, находится ли подпись к чекбоксу слева относительно чекбокса (по умолчанию false).

DatePicker

icon (необязательный параметр) - задает, будет ли отображаться иконка календаря в input;

maxWidth (необязательный параметр) - задает максимальную ширину инпута календаря. По умолчанию пустая строка;

value - задает объект выбранной даты (имеет поле date типа Date и isDateSelected - булево значение);

onDateChange (необязательный параметр) - функция, которая выполняется при выборе даты.

Dropdown

optionItems - массив элементов, из которых будет формироваться выпадающий список. Элемент этого массива представляет собой объект с полями name (текст элемента) и onClick() - функция, выполняющаяся при нажатии на элемент списка;

referenceRef - ссылка на элемент, при нажатии на который выпадаюший список раскрывается.

GeneralTable

Компонент принимает в себя columns и data.

columns - данные, которые описывают структуру таблицы( в частности, колонки). По своей структуре это массив объектов:

• Header - разметка(текст или компонент), которая будет отображаться внутри заголовка колонки. Если внутри заголовка будет компонент то нужно задать свойство Cell внутри этого же объекта.

• accessor - поле (строка), по которому компонент GeneralTable будет понимать, какое поле из переданного объекта внутри data должно быть в этой колонке.

• align (необязательный параметр) - задает выравнивание заголовку(center,left,right).

• Cell (необязательный параметр) - компонент, который будет рендерится внутри ячейки;

• maxWidth (необязательный параметр) - задает максимальную ширину столбца;

• disableSortBy (необязательный параметр) - отключает сортировку по мин/макс значению в колонке;

Эти данные (columns) нужно мемоизировать (например, использовать const memoizedColumns = useMemo(() => columns),[]).

data - данные(ряды в таблице, которые будут отображаться). Структура представляет массив с полями, названия которых зависят от значений accessor внутри массива columns. Например, если columns будет иметь такую структуру,

const columns = [
  {
    Header: "Имя",
    accessor: "name"
  },
  {
    Header: "Телефон",
    accessor: "phone"
  },
  {
    Header: "Почта",
    accessor: "email"
  }
]

то data будет массив из объектов со следующими полями:

const data = [
  {
    name: "Sergio",
    email: "[email protected]",
    phone: "+5436232"
  },
  {
    name: "Pedro",
    email: "[email protected]",
    phone: "+555555"
  },
  ....
]

Icon

name - задает, какая иконка будет отображаться. Принимает элемент enum ICONS;

color (необязательный параметр) - задает цвет иконки (по умолчанию #000);

size (необязательный параметр) - задает размер иконки (строка, по умолчанию 2rem);

className (необязательный параметр) - добавляет классы иконке (по умолчанию пустая строка);

alt (необязательный параметр) - добавляет подпись к иконке, если иконка не загрузилась (по умолчанию пустая строка).

Indicator

color (необязательный параметр) - задает цвет индикатора. Принимает элемент enum IndicatorColors, по умолчанию IndicatorColors.ACTIVE;

size (необязательный параметр) - задает размер индикатора. Строка, по умолчанию равна 0.5rem.

Input

color (необязательный параметр) - задает цвет иконки и текста внутри инпута. По умолчанию пустая строка;

label (необязательный параметр) - добавляет подпись сверху инпута. По умолчанию пустая строка;

value (необязательный параметр) - Задает значение инпута. По умолчанию пустая строка;

icon (необязательный параметр) - позволяет добавить иконку слева от значения. По умолчанию не установлена, принимает элемент enum ICONS;

fontSize (необязательный параметр) - устанавливает размер иконки. По умолчанию 1rem;

maxWidth (необязательный параметр) - ограничивает максимальную ширину инпута. По умолчанию пустая строка(размер не ограничен);

id - задает идентификатор инпута;

readOnly (необязательный параметр) - задает, можно ли вводить текст в инпут. По умолчанию false;

reverse (необязательный параметр) - задает порядок расположения текста и иконки. По умолчанию false(иконка расположена слева от текста);

bgColor (необязательный параметр) - задает цвет заливки инпута. По умолчанию цвет #f5f5f5;

onInputChange (необязательный параметр) - функция, которая выполняется при изменении значения инпута.

Примечание: в случае передачи свойства type со значением "password" добавляется кнопка для скрытия/отображения вводимого пароля.

InputImg

id - задает идентификатор инпута;

onChange - функция,которая выполняется при изменении значения инпута;

value (необязательный параметр) - задает изображение, которое будет отображаться в инпуте;

width (необязательный параметр) - задает ширину инпута. По умолчанию 250px.

InputSelect

icon (необязательный параметр) - позволяет выбрать, какая иконка будет отображаться в правом углу. По умолчанию иконка не задана, принимает элемент enum ICONS;

fontSize (необязательный параметр) - устанавливает размер иконки. По умолчанию 1rem;

color (необязательный параметр) - задает цвет иконки. Принимает строку;

children - дочерние элементы (теги <option>), из которых формируется компонент;

maxWidth (необязательный параметр) - задает максимальную ширину выпадающего инпута. По умолчанию пустая строка (ширина не ограничена).

InputTextArea

maxWidth (необязательный параметр) - задает макс ширину инпута. По умолчанию пустая строка (ширина не ограничена);

height (необязательный параметр) - задает макс высоту инпута. По умолчанию 7.75rem;

onTextChange - функция, которая вызывается при изменении значения инпута;

value - задает значение инпута.

Modal

onClose - функция, которая вызывается при закрытии модального окна;

children - теги или компоненты, которые отображаются при открытии модального окна;

open - задает, открыто ли по умолчанию модальное окно.

Tag

variant (необязательный параметр) - задает цвета отображения тега. Принимает элементы TagColorScheme, по умолчанию установлено TagColorScheme.NEUTRAL;

text - задает текст тега.