# eda-kuda-ui > Данная либа (ui-lib) была скомпонована с помощью пакета tsdx (https://github.com/jaredpalmer/tsdx). Latest version **0.5.7** (published 2022-05-18) · MIT license · 0 weekly downloads ## Install ```sh npm install eda-kuda-ui pnpm add eda-kuda-ui yarn add eda-kuda-ui bun add eda-kuda-ui ``` ## Health **Score 30/100 (F)** — status: abandoned. Positive: has types; esm support; no vulnerabilities; high quality score. Warnings: low downloads; pre 1.0. Negative: abandoned; low maintenance score. ## Facts | | | |---|---| | Version | 0.5.7 | | Published | 2022-05-18 | | First published | 2022-01-13 | | Weekly downloads | 0 | | License | MIT | | TypeScript types | bundled | | Module format | ESM + CommonJS | | Node | >=10 | | Dependencies | 6 | | Unpacked size | 576.1 KB | | Known vulnerabilities | 0 (+2 in 1 direct dependencies) | | Install scripts | no | | Author | sevtukhov-exceed | | Maintainers | shimonevt-exceed | ## Links - npm: https://www.npmjs.com/package/eda-kuda-ui - npm.io page: https://npm.io/package/eda-kuda-ui ## Dependencies (6) - [moment](https://npm.io/package/moment.md) 2.29.1 - [react-table](https://npm.io/package/react-table.md) ^7.7.0 - [@popperjs/core](https://npm.io/package/@popperjs/core.md) ^2.11.2 - [styled-components](https://npm.io/package/styled-components.md) ^5.3.3 - [@types/react-table](https://npm.io/package/@types/react-table.md) ^7.7.9 - [@types/styled-components](https://npm.io/package/@types/styled-components.md) ^5.1.20 ## Recent versions - 0.5.7 (latest) — 2022-05-18 - 0.5.6 — 2022-05-18 - 0.5.5 — 2022-05-16 - 0.5.4 — 2022-04-15 - 0.5.3 — 2022-04-12 - 0.5.2 — 2022-04-05 - 0.5.1 — 2022-04-04 - 0.5.0 — 2022-04-01 - 0.4.9 — 2022-03-28 - 0.4.8 — 2022-03-28 - 0.4.52 — 2022-03-28 - 0.4.51 — 2022-03-28 - 0.4.7 — 2022-03-25 - 0.4.6 — 2022-03-18 - 0.4.5 — 2022-03-18 - … 38 more at https://npm.io/package/eda-kuda-ui/versions ## README ## Описание Данная либа (ui-lib) была скомпонована с помощью пакета tsdx (https://github.com/jaredpalmer/tsdx). Название пакета - eda-kuda-ui. Для корректного добавления компонентов (чтобы собрался пакет) в библиотеку нужно: - сделать экспорт этого компонента внутри src/index.tsx; Ниже приведен пример: файл: `src/components/button/Button.tsx` ``` const 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: "user1@mail.ru", phone: "+5436232" }, { name: "Pedro", email: "user3@mail.ru", 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` - дочерние элементы (теги `