ITPC UI Kit

Демонстрация storybook

Установка

// with npm
npm install itpc-ui-kit

// with yarn
yarn add itpc-ui-kit

Запуск в режиме разработки

// with npm
npm i
npm run storybook

// with yarn
yarn
yarn storybook

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

import React, { useState } from "react"
import { Button } from "itpc-ui-kit"

const MyComponent: React.FC = () => {
  const [isOpen, setIsOpen] = useState<boolean>(false)

  return <Button onPress={() => setIsOpen(!isOpen)}>Click!</Button>
}

Описание компонентов

Accordion

Accordion состоит из нескольких элементов

1. Accordion - компонент-обертка, необходимая для рендера списка аккордионов
2. AccordionItem - элемент списка
3. AccordionHeader - заголовок
4. AccordionBody - тело аккордиона (выпадающая часть)
5. AccordionArrow - стилизованная стрелка

Props

<Accordion> Props

Название	Тип	Описание	Значение по умолчанию	Возможные значения
className	string undefined	CSS класс	''	Любая строка
children	React.ReactNode undefined	children

<AccordionItem> Props

Название	Тип	Описание	Значение по умолчанию	Возможные значения
children	React.ReactNode undefined	children

<AccordionHeader> Props

Название	Тип	Описание	Значение по умолчанию	Возможные значения
id	string undefined	-	'itpc-accordion-header'	Любая строка
isOpened	boolean	Флаг открытия	-	true false
isActive	boolean undefined	Флаг выбора (активный/неактивный)	false	true false
onPress	(e?: React.MouseEvent<HTMLDivElement, MouseEvent>) => void undefined	Обработчик клика	-	Любая функция
children	React.ReactNode undefined	children

<AccordionBody> Props

Название	Тип	Описание	Значение по умолчанию	Возможные значения
isOpened	boolean	Флаг открытия	-	true false
children	React.ReactNode undefined	children

<AccordionArrow> Props

Название	Тип	Описание	Значение по умолчанию	Возможные значения
isOpened	boolean	Флаг открытия	-	true false

Пример

import React, { useState } from "react"
import {
  Accordion,
  AccordionBody,
  AccordionHeader,
  AccordionItem,
  AccordionArrow,
} from "itpc-ui-kit"

const MyComponent: React.FC = () => {
  const [opened, setOpened] = useState<boolean>(false)

  const handleOpened = (): void => {
    setOpened(!opened)
  }

  return (
    <Accordion>
      <AccordionItem>
        <AccordionHeader id={"1"} isOpened={opened} onPress={handleOpened}>
          Header
          <AccordionArrow isOpened={opened} />
        </AccordionHeader>
        <AccordionBody isOpened={opened}>Body</AccordionBody>
      </AccordionItem>
    </Accordion>
  )
}

---

Button

Props

Название	Тип	Описание	Значение по умолчанию	Возможные значения
type	string undefined	Тип	'button'	'button', 'submit', 'reset'
variant	string undefined	Цвет	''	'white', 'red'
disabled	boolean``undefined	Блокировка	false	'true', 'false'
onPress	(e?: React.MouseEvent<HTMLButtonElement>) => void	Обработчик клика	-
className	string undefined	CSS класс	''	Любая строка
children	React.ReactNode undefined		-

Пример

import React, { useState } from "react"
import { Button } from "itpc-ui-kit"

const MyComponent: React.FC = () => {
  const [isOpen, setIsOpen] = useState<boolean>(false)

  const onHandleIsOpen = (): void => {
    setIsOpen(!isOpen)
  }

  return (
    <Button onPress={onHandleIsOpen} variant={isOpen ? "purple" : "red"}>
      {isOpen ? "Purple" : "Red"} button
    </Button>
  )
}

---

ButtonRound

ButtonRound - это круглая кнопка. Она не предназначена для вставки в нее текста. Для корректной работы, в качестве children лучше использовать иконку

Props

Название	Тип	Описание	Значение по умолчанию	Возможные значения
type	string undefined	Тип	'button'	'button', 'submit', 'reset'
disabled	boolean undefined	Блокировка	false	'true', 'false'
tooltip	string undefined	Подпись при наведении	-	'true', 'false'
onPress	(e?: React.MouseEvent<HTMLButtonElement>) => void undefined	Обработчик клика	-
className	string undefined	CSS класс	''	Любая строка
children	React.ReactNode undefined		-

Пример

import React from "react"
import { ButtonRound } from "itpc-ui-kit"

const MyComponent: React.FC = () => {
  return (
    <ButtonRound disabled={disabled}>
      <i />
    </ButtonRound>
  )
}

---

Card

Props

Название	Тип	Описание	Значение по умолчанию	Возможные значения
title	string undefined	Заголовок карточки	-	Любая строка
isBordered	boolean undefined	Флаг выделения карточки. Поменяет цвет border	false	'true', 'false'
className	string undefined	CSS класс	''	Любая строка
children	React.ReactNode undefined		-

Пример

import React from "react"
import { Card } from "itpc-ui-kit"

const MyComponent: React.FC = () => {
  return (
    <Card isBordered title="My card">
      <form>
        <p>My form</p>
        <button>Test</button>
      </form>
    </Card>
  )
}

---

Checkbox

Props

Название	Тип	Описание	Значение по умолчанию	Возможные значения
id	string	-	-	Любая строка
name	string	-	-	Любая строка
type	string undefined	Тип кнопки	'checkbox'	'checkbox', 'radio'
variant	InputCheckboxVariant	Вариант стилизации	'android'	'android' 'ios' 'round' 'square'
labelPosition	InputCheckboxLabelPosition	Позиция подписи чекбокса	'right'	'left' 'right' 'all'
disabled	boolean undefined	Блокировка чекбокса	false	true false
labelLeft	string undefined	Значение левой подписи (если нет, то по дефолту возьмет из label)	undefined	Любая строка
label	string undefined	Значение подписи	undefined	Любая строка
isBlurLabelLeft	boolean undefined	Блюр левой подписи	false	true false
isBlurLabelRight	boolean undefined	Блюр правой подписи	false	true false
isBlurCheckbox	boolean undefined	Блюр всего чекбокса	false	true false
isChecked	boolean undefined	Выбран ли чекбокс	false	true false
onClick	(e: React.ChangeEvent<HTMLInputElement>) => void undefined	Обработчик клика	undefined
inputAttr	HTMLAttributes<HTMLInputElement>	Атрибуты input	undefined
labelAttr	HTMLAttributes<HTMLSpanElement>	Атрибуты label	undefined
className	string undefined	CSS класс	''	Любая строка

Пример

import React, { useState } from "react"
import { Checkbox } from "itpc-ui-kit"

const MyComponent: React.FC = () => {
  const [checkedFirst, setCheckedFirst] = useState<boolean>(false)
  const [checkedSecond, setCheckedSecond] = useState<boolean>(false)

  const handleCheckedFirst = (): void => {
    setCheckedFirst(!checkedFirst)
  }

  const handleCheckedSecond = (): void => {
    setCheckedSecond(!checkedSecond)
  }

  return (
    <>
      <Checkbox
        {...args}
        name="1"
        isChecked={checkedFirst}
        onClick={handleCheckedFirst}
      />
      <Checkbox
        {...args}
        name="1"
        isChecked={checkedSecond}
        onClick={handleCheckedSecond}
      />
    </>
  )
}

---

DatePicker

Компонент для ввода даты и времени. В качестве value необходимо передавать строку, состоящую только из чисел

Календарь основан на работе библиотеки react-number-format v.4.9.1

Например, если дата соответствует значению - 01.01.2000, то в качестве value необходимо передать 01012000.

Пример возвращаемого значения:

{
  value: '01012000',
  formattedValues: '01.01.2000'
}

Props

Название	Тип	Описание	Значение по умолчанию	Возможные значения
id	string	-	-	Любая строка
name	string	-	-	Любая строка
value	string undefined	Значение инпута	''	Строки, содержащие только числа: 10102010
activeDates	string[] undefined	Список дат, которые должны быть доступны. Остальные даты будут заблокированы для выбора	undefined	["2000-01-01"]
disabledDates	string[] undefined	Список дат, которые должны быть заблокированы. Остальные даты будут доступны для выбора	undefined	["2000-01-01"]
disabledAfterDate	string undefined	Дата, после которой необходимо заблокировать выбор дат (не включительно)	undefined	"2000-01-01"
disabledBeforeDate	string undefined	Дата, перед которой необходимо заблокировать выбор дат (не включительно)	undefined	"2000-01-01"
disabledDaysOfWeek	number[] undefined	Дни недели, которые необходимо заблокировать. Понедельник - 1, воскресенье - 7	undefined	[6,7]
disabled	boolean undefined	Флаг блокировки ввода	false	'true', 'false'
disabledSelectMonth	boolean undefined	Флаг блокировки выбора месяца	false	'true', 'false'
disabledSelectYear	boolean undefined	Флаг блокировки выбора года	false	'true', 'false'
placeholder	string undefined	Подпись инпута	''	Любая строка
validationState	ValidationState undefined	Значение, определяющее валидность значения инпута	'valid'	'valid' 'invalid'
errorMessage	string undefined	Текст ошибки при не валидности значения инпута	''	Любая строка
className	string undefined	CSS класс	''	Любая строка
isIconClickable	boolean undefined	Флаг, определяющий возможность открытия календаря по клику на иконку	false	'true', 'false'
offsetYear	number undefined	Число, определяющее какое количество лет от текущего года показывать в календаре	10	Любое число
withTime	boolean undefined	Флаг, определяющий будет ли значение в инпуте включать время	false	'true', 'false'
isShowIcon	boolean undefined	Флаг, определяющий будет показываться иконка календаря в инпуте	true	'true', 'false'
scrollToYear	number	Значение года, определяющее до какого года необходимо проскроллить список годов. По дефолту будет скроллить на текущее значение года и даты (value)	undefined	2000
yearsFromTo	[number, number]	Список из двух годов. По нему определяется промежуток годов для выбора. "from" должно быть меньше или равно "to"	undefined	[2000, 2001], [2000, 2040]
onBlur	() => void undefined	Событие onBlur, передаваемое инпуту	-
onFocus	() => void undefined	Событие onFocus, передаваемое инпуту	-
onChange	(values: FormattedValues, event: React.SyntheticEvent<HTMLInputElement> or React.SyntheticEvent<HTMLButtonElement> or React.SyntheticEvent<HTMLTableDataCellElement>, info: IInfo) => void undefined	Событие onChange, передаваемое инпуту	-

Пример

import React, { useState } from "react"
import { DatePicker } from "itpc-ui-kit"

const MyComponent: React.FC = () => {
  const [date, setDate] = useState<FormattedValues>({
    value: "",
    formattedValue: "",
  })

  const onChange = (inputValue: FormattedValues): void => {
    setDate(inputValue)
  }

  return <DatePicker value={date.value} onChange={onChange} offsetYear={100} />
}

---

ErrorMessage

Props

Название	Тип	Описание	Значение по умолчанию	Возможные значения
className	string undefined	CSS класс	''	Любая строка
children	React.ReactNode undefined		-

Пример

import React from "react"
import { ErrorMessage } from 'itpc-ui-kit'

const MyComponent: React.FC = () => <ErrorMessage>My error text<ErrorMessage/>

---

Modal

Modal состоит из нескольких элементов

1. Modal - модальное окно с заголовком
2. ModalContent - тело модального окна
3. ModalFooter - подвал модального окна

Props

<Modal> Props

Название	Тип	Описание	Значение по умолчанию	Возможные значения
title	string	Заголовок модального окна	-	Любая строка
isOpen	boolean	Флаг открытия модального окна	-	'true', 'false'
isOverlayClickable	boolean	Флаг, определяющий возможность закрыть модальное окно по клику на оверлей	''	Любая строка
onClose	() => void	Метод закрытия модального окна	''	Любая строка
iconClose	React.ReactNode undefined	Иконка крестика модального окна	''	Любая строка
className	string undefined	CSS класс	''	Любая строка
children	React.ReactNode undefined	children

<ModalContent> Props

Название	Тип	Описание	Значение по умолчанию	Возможные значения
className	string undefined	CSS класс	''	Любая строка
children	React.ReactNode undefined	children

<ModalFooter> Props

Название	Тип	Описание	Значение по умолчанию	Возможные значения
className	string undefined	CSS класс	''	Любая строка
children	React.ReactNode undefined	children

Пример

import React, { useState } from "react"
import { Button, Modal, ModalContent, ModalFooter } from "itpc-ui-kit"

const MyComponent: React.FC = () => {
  const [isOpenModal, setIsOpenModal] = useState<boolean>(false)

  const close = (): void => {
    setIsOpenModal(false)
  }

  return (
    <Modal isOpen={isOpenModal} onClose={close}>
      <ModalContent>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit.
      </ModalContent>
      <ModalFooter>
        <Button variant="white" onPress={close}>
          Cancel
        </Button>
        <Button onPress={close}>Ok</Button>
      </ModalFooter>
    </Modal>
  )
}

---

MultiSelectField

Props

Название	Тип	Описание	Значение по умолчанию	Возможные значения
items	Item[]	Список элементов для выбора	-	Item[]
selectedItems	string undefined	Список выбранных элементов	''	Любая строка
placeholder	string undefined	Подпись	''	Любая строка
disabled	boolean undefined	Флаг блокировки выбора	false	'true', 'false'
className	string undefined	CSS класс	''	Любая строка
onChange	(values: string[]) => void	Метод выбора элементов	-

Пример

import React, { useState } from "react"
import { MultiSelectField, Item } from "itpc-ui-kit"

const mockItems: Item[] = [
  {
    id: "1",
    value: "Cat",
  },
  {
    id: "2",
    value: "Dog",
  },
  {
    id: "3",
    value: "Duck",
  },
  {
    id: "4",
    value: "Bear",
  },
  {
    id: "5",
    value: "Mouse",
  },
  {
    id: "6",
    value: "Tiger",
  },
  {
    id: "7",
    value: "Lion",
  },
]

const MyComponent: React.FC = () => {
  const [selectedItems, setSelectedItems] = useState<Item[] | []>([
    {
      id: "1",
      value: "Cat",
    },
  ])

  const onChange = (values: string[]): void => {
    setSelectedItems(mockItems.filter((item) => values.includes(item.id)))
  }

  return (
    <MultiSelectField
      {...args}
      items={mockItems}
      selectedItems={selectedItems.map((item) => item.id)}
      onChange={onChange}
    />
  )
}

---

NumberField

Компонент для ввода числовых значений. В качестве value необходимо передавать строку, состоящую только из чисел

NumberField основан на работе библиотеки react-number-format v.4.9.1

Например, если значение соответствует - 01.01.2000, то в качестве value необходимо передать 01012000.

Пример возвращаемого значения:

{
  value: '01012000',
  formattedValues: '01.01.2000'
}

Props

Название	Тип	Описание	Значение по умолчанию	Возможные значения
id	string	-	-	Любая строка
name	string	-	-	Любая строка
value	string undefined	Значение инпута	''	Строки, содержащие только числа: 10102010
disabled	boolean undefined	Флаг блокировки ввода	false	'true', 'false'
placeholder	string undefined	Подпись инпута	''	Любая строка
validationState	ValidationState undefined	Значение, определяющее валидность значения инпута	'valid'	'valid' 'invalid'
errorMessage	string undefined	Текст ошибки при не валидности значения инпута	''	Любая строка
className	string undefined	CSS класс	''	Любая строка
format	string undefined 1	Формат ввода. Определяет вид вводимого значения	''	Любая строка (Например: '####-####-##')
mask	string undefined	Маска ввода. Пустые значения заменит этой маской	'_'	Любая строка
prefix	string undefined	Маска перед значением инпута.	''	Любая строка
suffix	string undefined	Маска после значением инпута.	''	Любая строка
allowEmptyFormatting	boolean undefined	Флаг, определяющий, показывать ли маску ввода при пустом значении	'true'	'true', 'false'
allowNegative	boolean undefined	Флаг, определяющий, можно ли вводить отрицательные величины	'false'	'true', 'false'
onBlur	() => void undefined	Событие onBlur, передаваемое инпуту	-
onFocus	() => void undefined	Событие onFocus, передаваемое инпуту	-
onChange	(values: FormattedValues, event?: React.SyntheticEvent<HTMLInputElement>) => void undefined	Событие onChange, передаваемое инпуту	-
getInputRef	((el: HTMLInputElement) => void) React.Ref<any> undefined	Метод, возвращающий ref инпута	-
replaceValue	(value: string) => string undefined	Функция для замены значения, игнорируя маску. Например при вводе значения в инпут мы хотим удалять определенные символы. Тогда реализация будет такой (value: string) => value.replace(regexp, replacedValue)	(value: string) => value

Пример

import React, { useState } from "react"
import { FormattedValues, NumberField } from "itpc-ui-kit"

const MyComponent: React.FC = () => {
  const [date, setDate] = useState<FormattedValues>({
    value: "",
    formattedValue: "",
  })

  const onChange = (inputValue: FormattedValues): void => {
    setDate(inputValue)
  }

  return (
    <NumberField
      id="itpc-number-field-id"
      name="itpc-number-field-name"
      value={date.value}
      onChange={onChange}
    />
  )
}

---

Pagination

Props

Название	Тип	Описание	Значение по умолчанию	Возможные значения
step	number undefined	Шаг пагинации	10	Любое число
dataLength	number	Длина массива, данные которого необходимо разделить	-	Любое число
className	string undefined	CSS класс	''	Любая строка
callback	(pagination: PaginationResult) => void	Результат пагинации. Возвращает значения, на основании которого разделяется массив	-

Пример

import React, { useState } from "react"
import { Pagination, PaginationResult } from "itpc-ui-kit"

const MyComponent: React.FC = () => {
  const [start, setStart] = useState<number>(0)
  const [end, setEnd] = useState<number>(0)

  const paginationResult = (pagination: PaginationResult): void => {
    setStart(pagination.start)
    setEnd(pagination.end)
  }

  return (
    <Pagination
      step={10}
      dataLength={mockItems.length}
      callback={paginationResult}
    />
  )
}

---

Popup

Props

Название	Тип	Описание	Значение по умолчанию	Возможные значения
title	string	Заголовок поп-апа	-	Любая строка
isOpen	boolean	Флаг открытия поп-апа	-	'true', 'false'
size	PopupSize	Определяет размер поп-апа. С телом или без.	'normal'	'small' 'normal'
variant	PopupVariant	Определяет тип поп-апа. По-умолчанию, ошибка, предупреждение или успех. В зависимости от типа, будет соответствующий цвет поп-апа.	'default'	'default' 'error' 'warning' 'success'
position	PopupPosition	Определяет позицию поп-апа	'center-center'	'top-left' 'top-center' 'top-right' 'center-left' 'center-center' 'center-right' 'bottom-left' 'bottom-center' 'bottom-right'
className	string undefined	CSS класс	''	Любая строка
children	React.ReactNode undefined	children
onClose	() => void	Метод закрытия поп-апа

Пример

import React, { useState } from "react"
import { Popup } from "itpc-ui-kit"

const MyComponent: React.FC = () => {
  const [isOpen, setIsOpen] = useState<boolean>(false)

  const close = (): void => {
    setIsOpen(false)
  }

  return (
    <Popup title="My popup" isOpen={isOpen} onClose={close}>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ipsum est
      sagittis, odio tincidunt ipsum, lorem cras mollis.
    </Popup>
  )
}

---

Preloader

Индикация загрузки в виде круга

Props

Название	Тип	Описание	Значение по умолчанию	Возможные значения
className	string undefined	CSS класс	''	Любая строка

Пример

import React, { useState } from "react"
import { Preloader } from "itpc-ui-kit"

const MyComponent: React.FC = () => <Preloader />

---

SearchField

Props

Название	Тип	Описание	Значение по умолчанию	Возможные значения
defaultItem	string undefined	Id выбранного элемента по умолчанию	-	Id элемента из списка
items	Item[]	Список элементов для выбора	-	Item[]
placeholder	string undefined	Подпись	''	Любая строка
isLoading	boolean	Флаг статуса загрузки	-	'true', 'false'
isClear	boolean undefined	Флаг принудительного очищения	false	'true', 'false'
className	string undefined	CSS класс	''	Любая строка
handleClear	() => void undefined	Метод очищения элементов	-
fetchData	(value: string) => Promise<void> undefined	Метод отправки запроса на получение списка элементов	-
onChange	(id: string) => void	Метод выбора элемента	-

Пример

import React, { useState } from "react"
import { SearchField, Item } from "itpc-ui-kit"

const mockItems: Item[] = [
  {
    id: "1",
    value: "Cat",
  },
  {
    id: "2",
    value: "Dog",
  },
  {
    id: "3",
    value: "Duck",
  },
  {
    id: "4",
    value: "Bear",
  },
  {
    id: "5",
    value: "Mouse",
  },
  {
    id: "6",
    value: "Tiger",
  },
  {
    id: "7",
    value: "Lion",
  },
]

const MyComponent: React.FC = () => {
  const [items, setItems] = useState<Item[]>([])
  const [isLoading, setIsLoading] = useState<boolean>(false)
  const [selectedItem, setSelectedItem] = useState<Item | null>(null)

  const onChange = (id: string): void => {
    setSelectedItem(items.find((item) => item.id === id) ?? null)
  }

  const fetchData = async (value: string) => {
    setIsLoading(true)
    await setTimeout(() => {
      setItems(mockItems)
      setIsLoading(false)
    }, 2000)
  }

  const clear = (): void => {
    setSelectedItem(null)
    setItems([])
  }

  return (
    <SearchField
      items={items}
      isLoading={isLoading}
      onChange={onChange}
      fetchData={fetchData}
      handleClear={clear}
    />
  )
}

---

SelectField

Props

Название	Тип	Описание	Значение по умолчанию	Возможные значения
defaultItemId	string undefined	Id выбранного элемента по умолчанию	-	Id элемента из списка
items	Item[]	Список элементов для выбора	-	Item[]
placeholder	string undefined	Подпись	''	Любая строка
disabled	boolean undefined	Флаг блокировки выбора	false	'true', 'false'
className	string undefined	CSS класс	''	Любая строка
onChange	(value: string) => void	Метод выбора элемента	-

Пример

import React, { useState } from "react"
import { SearchField, Item } from "itpc-ui-kit"

const mockItems: Item[] = [
  {
    id: "1",
    value: "Cat",
  },
  {
    id: "2",
    value: "Dog",
  },
  {
    id: "3",
    value: "Duck",
  },
  {
    id: "4",
    value: "Bear",
  },
  {
    id: "5",
    value: "Mouse",
  },
  {
    id: "6",
    value: "Tiger",
  },
  {
    id: "7",
    value: "Lion",
  },
]

const MyComponent: React.FC = () => {
  const [selectedItem, setSelectedItem] = useState<Item | null>(null)

  const onChange = (id: string): void => {
    setSelectedItem(mockItems.find((item) => item.id === id) ?? null)
  }

  return (
    <SelectField
      items={mockItems}
      defaultItemId={selectedItem?.id}
      onChange={onChange}
    />
  )
}

---

Table

Table состоит из нескольких элементов

1. Table - таблица
2. TableHeader - заголовок таблицы
3. TableBody - тело таблицы
4. TableFooter - подвал таблицы
5. Row - строка таблицы
6. Column - ячейка заголовка таблицы
7. Cell - ячейка тела таблицы

Props

<Table> Props

Название	Тип	Описание	Значение по умолчанию	Возможные значения
id	string undefined	-	''	Любая строка
title	string undefined	Подпись таблицы	-	Любая строка
className	string undefined	CSS класс	''	Любая строка
children	React.ReactNode undefined	children

<TableHeader> Props

Название	Тип	Описание	Значение по умолчанию	Возможные значения
id	string undefined	-	''	Любая строка
children	React.ReactNode undefined	children

<TableBody> Props

Название	Тип	Описание	Значение по умолчанию	Возможные значения
children	React.ReactNode undefined	children

<TableFooter> Props

Название	Тип	Описание	Значение по умолчанию	Возможные значения
children	React.ReactNode undefined	children

<Row> Props

Название	Тип	Описание	Значение по умолчанию	Возможные значения
id	string undefined	-	''	Любая строка
children	React.ReactNode undefined	children
onPressRow	(event?: React.MouseEvent<HTMLTableRowElement>) => void undefined	Обработчик клика по строке

<Column> Props

Название	Тип	Описание	Значение по умолчанию	Возможные значения
id	string undefined	-	''	Любая строка
children	React.ReactNode undefined	children
onPressColumn	(event?: React.MouseEvent<HTMLTableCellElement>) => void undefined	Обработчик клика по ячейке заголовка таблицы

<Cell> Props

Название	Тип	Описание	Значение по умолчанию	Возможные значения
id	string undefined	-	''	Любая строка
children	React.ReactNode undefined	children
onPressCell	(event?: React.MouseEvent<HTMLTableCellElement>) => void undefined	Обработчик клика по ячейке тела таблицы

Пример

import React from "react"
import {
  Cell,
  Column,
  Row,
  Table,
  TableBody,
  TableHeader,
  TableProps,
} from "itpc-ui-kit"

const MyComponent: React.FC = () => {
  return (
    <Table>
      <TableHeader>
        <Row>
          <Column>#</Column>
          <Column>Head 2</Column>
          <Column>Head 3</Column>
        </Row>
      </TableHeader>
      <TableBody>
        <Row>
          <Cell>1</Cell>
          <Cell>Column 2</Cell>
          <Cell>Column 3</Cell>
        </Row>
        <Row>
          <Cell>2</Cell>
          <Cell>Column 2</Cell>
          <Cell>Column 3</Cell>
        </Row>
        <Row>
          <Cell>3</Cell>
          <Cell>Column 2</Cell>
          <Cell>Column 3</Cell>
        </Row>
      </TableBody>
    </Table>
  )
}

---

Tabs

Props

Название	Тип	Описание	Значение по умолчанию	Возможные значения
items	TabsItem[]	Список элементов для переключения	-	Item[]
disabled	boolean undefined	Флаг блокировки переключения	false	'true', 'false'
className	string undefined	CSS класс	''	Любая строка
changeActiveTab	(value: id) => void	Метод переключения вкладок	-
...props	[key: string]: unknown	Пропсы, которые передаются компоненту TabsItem	-

Пример

import React, { useState } from "react"
import { Tabs, TabsItem } from "itpc-ui-kit"

const items: TabsItem[] = [
  {
    title: "First",
    content: <div>First tab</div>,
  },
  {
    title: "Second",
    content: <div>Second tab</div>,
  },
  {
    title: "Third",
    content: <div>Third tab</div>,
  },
]

const MyComponent: React.FC = () => <Tabs items={items} />

---

Text

Props

Название	Тип	Описание	Значение по умолчанию	Возможные значения
className	string undefined	CSS класс	''	Любая строка
children	React.ReactNode undefined	children

Пример

import React from "react"
import { Text } from "itpc-ui-kit"

const MyComponent: React.FC = () => <Text>My text</Text>

---

TextAreaField

Props

Название	Тип	Описание	Значение по умолчанию	Возможные значения
id	string	-	-	Любая строка
name	string	-	-	Любая строка
value	string undefined	Значение инпута	''	Любая строка
disabled	boolean undefined	Флаг блокировки ввода	false	'true', 'false'
placeholder	string undefined	Подпись инпута	''	Любая строка
validationState	ValidationState undefined	Значение, определяющее валидность значения инпута	'valid'	'valid' 'invalid'
errorMessage	string undefined	Текст ошибки при не валидности значения инпута	''	Любая строка
maxHeight	number undefined	Максимальная высота поля в px	-	Любая строка
className	string undefined	CSS класс	''	Любая строка
onBlur	() => void undefined	Событие onBlur, передаваемое инпуту	-
onFocus	() => void undefined	Событие onFocus, передаваемое инпуту	-
onChange	(values: FormattedValues) => void undefined	Событие onChange, передаваемое инпуту	-

Пример

import React, { useState } from "react"
import { TextAreaField } from "itpc-ui-kit"

const MyComponent: React.FC = () => {
  const [value, setValue] = useState<string>("")

  const onChange = (valueInput: string): void => {
    setValue(valueInput)
  }

  return <TextAreaField value={value} onChange={onChange} />
}

---

TextField

Props

Название	Тип	Описание	Значение по умолчанию	Возможные значения
id	string	-	-	Любая строка
name	string	-	-	Любая строка
value	string undefined	Значение инпута	''	Любая строка
type	InputType undefined	Тип инпута	'text'	'password', 'text'
state	InputState undefined	Состояние инпута инпута. В зависимости от состояния, будет показана соответствующая иконка	'default'	'default', 'cancel', 'loading', 'success', 'warning'
disabled	boolean undefined	Флаг блокировки ввода	false	'true', 'false'
placeholder	string undefined	Подпись инпута	''	Любая строка
validationState	ValidationState undefined	Значение, определяющее валидность значения инпута	'valid'	'valid' 'invalid'
errorMessage	string undefined	Текст ошибки при не валидности значения инпута	''	Любая строка
maxLength	number undefined	Максимальная длина значения в инпуте	-	Любая строка
className	string undefined	CSS класс	''	Любая строка
onBlur	() => void undefined	Событие onBlur, передаваемое инпуту	-
onFocus	() => void undefined	Событие onFocus, передаваемое инпуту	-
onChange	(values: FormattedValues) => void undefined	Событие onChange, передаваемое инпуту	-
onClickIcon	() => void undefined	Событие onClick, передаваемое иконке инпута	-

Пример

import React, { useState } from "react"
import { TextField } from "itpc-ui-kit"

const MyComponent: React.FC = () => {
  const [value, setValue] = useState<string>("")

  const onChange = (valueInput: string): void => {
    setValue(valueInput)
  }

  return <TextField value={value} onChange={onChange} />
}

---

Утилитарные типы

// UIKitColors - цвета, используемые в ките
enum UIKitColors {
  black = "#000",
  green = "#4DB04D",
  grey = "#B2B7C7",
  greyLight = "#E5E5E5",
  white = "#FFF",
  redDark = "#C9184A",
  red = "#D42564",
  yellow = "#DCB21E",
  purple = "#5C53AC",
  purpleLight = "#6F65CB",
}

// FormattedValues - интерфейс для работы с компонентами ввода, где подразумевается ввод только чисел.  Используется в NumberField, DatePicker
interface FormattedValues {
  value: string
  formattedValue: string
}

// Item - интерфейс описывает элемент выпадающего списка. Используется в SelectField, MultiSelectField, SearchField
interface Item {
  id: string
  value: string
}

// TabsItem - интерфейс описывает элемент таба. Используется в Tabs
interface TabsItem {
  title: string
  content: React.ReactElement<React.ReactNode>
}

// PaginationResult - интерфейс описывает возвращаемое значение элемента Pagination.
interface PaginationResult {
  currentPage?: number
  start: number
  end: number
}

License

The MIT License.