Skip to content

tric-itpc/itpc-ui-kit

BranchesTags

Repository files navigation

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.

About

No description, website, or topics provided.

Resources

Readme
Activity
Custom properties

Stars

0 stars

Watchers

0 watching

Forks

0 forks
Report repository

Releases

No releases published

Packages

No packages published

Contributors 3

  •  
  •  
  •  

Languages