# pk-rtu-mirea-ui-library

> Library of UI components used for the site of the admissions office of RTU MIREA

Latest version **1.0.32** (published 2022-03-04) · MIT license · 0 weekly downloads

## Install

```sh
npm install pk-rtu-mirea-ui-library
pnpm add pk-rtu-mirea-ui-library
yarn add pk-rtu-mirea-ui-library
bun add pk-rtu-mirea-ui-library
```

## Health

**Score 20/100 (F)** — status: abandoned.

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.32 |
| Published | 2022-03-04 |
| First published | 2021-10-09 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Node | >=10 |
| Dependencies | 2 |
| Unpacked size | 447.9 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | slavaklevleev |
| Maintainers | slavaklevleev |

## Links

- npm: https://www.npmjs.com/package/pk-rtu-mirea-ui-library
- Repository: https://github.com/slavaklevleev/pk-rtu-mirea-ui-library
- Homepage: https://github.com/slavaklevleev/pk-rtu-mirea-ui-library#readme
- Issues: https://github.com/slavaklevleev/pk-rtu-mirea-ui-library/issues
- npm.io page: https://npm.io/package/pk-rtu-mirea-ui-library

## Dependencies (2)

- [styled-components](https://npm.io/package/styled-components.md) ^5.3.1
- [react-animate-height](https://npm.io/package/react-animate-height.md) ^2.0.23

## Recent versions

- 1.0.32 (latest) — 2022-03-04
- 1.0.31 — 2022-02-28
- 1.0.30 — 2022-02-28
- 1.0.29 — 2022-02-26
- 1.0.28 — 2022-02-26
- 1.0.27 — 2022-02-26
- 1.0.26 — 2022-02-25
- 1.0.25 — 2022-02-17
- 1.0.24 — 2022-02-17
- 1.0.23 — 2022-02-17
- 1.0.22 — 2022-02-15
- 1.0.21 — 2022-02-15
- 1.0.20 — 2022-02-11
- 1.0.19 — 2022-02-10
- 1.0.18 — 2021-11-30
- … 18 more at https://npm.io/package/pk-rtu-mirea-ui-library/versions

## README

# pk-rtu-mirea-ui-library

> Library of UI components used for the site of the admissions office of RTU MIREA

[![NPM](https://img.shields.io/npm/v/pk-rtu-mirea-ui-library.svg)](https://www.npmjs.com/package/pk-rtu-mirea-ui-library) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)

This UI library was developed for using at sites of admission committee RTU MIREA. Here you can find different UI Components such as:

- Loading screen
- Button
- Text field
- Select dropdown
- Tag element
- Mobile Pop Up (beta)

## Install

```bash
npm install --save pk-rtu-mirea-ui-library
```

## Usage

After installation you can start create your amazing products. Here is the example:

```jsx
import React from 'react'

import { Loading } from 'pk-rtu-mirea-ui-library'

const App = () => {
  return (
    <Loading fullscreen />
  )
}
```

Let's look at each component separately

### Loading screen
This is a simple screen that can be displayed while loading data

#### Props

| Option  | Description  | Value  | Default value  |
|:----------|:----------|:----------|:----------|
| fullscreen    | This option allows you to position the loading screen in the center of the browser window.     | Bool    | false|
| text    | This option allows you to display the text on the loading screen    | String    | "Пожалуйста, подождите! Идет загрузка..." |

#### Example

```jsx
import React from 'react'

import { Loading } from 'pk-rtu-mirea-ui-library'

const App = () => {
  return (
    <Loading text={"Please wait..."} fullscreen />
  )
}
```

### Tag

This is a simple tag

#### Props

| Option    | Description| Value     | Default value|
|:----------|:-----------|:----------|:-------------|
| fullWidth | Sets width of tag to 100% of parent     | Bool    | false    |
| wordWrap  | Sets white-space to 'break-spaces'     | Bool    | false    |
| size      |  Sets the size of the tag     | 'small', 'medium' or 'large'    | 'medium'    |
| bgColor   | Sets background color of tag     | String (hex color)    | #f9b233    |
| textColor | Sets text color of tag     | String (hex color)    | #fff    |
| children  | Content of tag     | Children    | -    |
| hint  | Shows hint on hover     | JSx element    | -    |
| hintPosition  | Set position of hint based on parent     | 'top', 'left', 'right', 'bottom'    | 'left;    |
| crossButton | Enables cross in tag | Bool  | false |
| handleCross | Function on cross clicking  | Func  | - |
| crossColor | Sets color of cross | String  | #ffffff |


#### Example

```jsx
import React from 'react'

import { Tag } from 'pk-rtu-mirea-ui-library'

const App = () => {
  return (
    <Tag 
      size={'small'}
      bgColor={"#000"}
      textColor={"#fff"}
      wordWrap
      fullWidth
    >
      <p>My Tag</p>
    </Tag>
  )
}
```

### Button

This is button component

#### Props

| Option    | Description| Value     | Default value|
|:----------|:-----------|:----------|:-------------|
| fullWidth | Sets width of button to 100% of parent     | Bool    | false    |
| fullHeight | Sets height of button to 100% of parent     | Bool    | false    |
| size      |  Sets the size of the button     | 'small', 'medium' or 'large'    | 'medium'    |
| bgColor   | Sets background color of tag     | String (hex color)    | #f9b233    |
| textColor | Sets text color color of tag     | String (hex color)    | #fff    |
| disabled    | Makes the button inactive    | Bool    | false    |
| onClick    | Function at the push of a button    | func    | ()=>{}|
| children  | Content of button     | Children    | -    |

#### Example

```jsx
import React from 'react'

import { Button } from 'pk-rtu-mirea-ui-library'

const App = () => {
  return (
    <Button 
      size='small'
      bgColor='#000'
      textColor='#fff'
      onClick={() => { handleClear(); this.handleClearLocal(); }}
      disabled
      fullWidth
      fullHeight
    >
      <p>My Button </p>
    </Button>
  )
}
```

### TextField
#### Props
| Option    | Description| Value     | Default value|
|:----------|:----------|:----------|:----------|
| fullHeight | Sets height of button to 100% of parent     | Bool    | false    |
| size      |  Sets the size of the button     | 'small' or 'medium'    | 'medium'|
| onChange    | Function at the changing value    | Func    | ()=>{}    |
| placeholder   | Text when value == ""    | String    | -    |
| value    | Value of text field    | String    | -    |

#### Example

```jsx
import React from 'react'

import { TextField } from 'pk-rtu-mirea-ui-library'

const App = () => {
  return (
    <TextField
      placeholder={"Поиск..."}
      size={"medium"}
      value={searchText}
      onChange={this.searchHandle}
      fullHeight
    />
  )
}
```

### Select
#### Props
>Bold is for required options

| Option          | Description| Value     | Default value|
|:----------------|:-----------|:----------|:-------------|
| **list**        | List of displayed items     | Array of objects    | -    |
| **valueKey**        | Key of value in list of items     | String    | -   |
| **onChange**        | List item selection function      | Func    | -    |
| placeholder     | Text of Select header when value is undefined     | String    | -    |
| displayValue    | Text of Select header when value is not undefined     | String    | -  |
| selectValue     | User-selected value     | Object    | -    |
| isMulti         | Sets the ability to select multiple items     | Bool    | false    |
| size            | Sets the size of the Select     | 'small' or 'medium'    | 'medium'|
| textColor   | Set color of text   | string    |  #000   |
| selectColor     | Background of item on hover     | String    | #f9b233    |
| searchable      | Sets the ability to search in a dropdown list     | Bool    | false    |
| noWrapSelectHeader| Sets white-space of Select header to 'break-spaces'    | Bool    | false    |
| fullHeight      | Sets height of button to 100% of parent     | Bool    | false    |
| disabled        | Makes the button inactive    | Bool    | false    |
| disabledAlert   | Text of alert if disabled == true     | Bool    | -    |
| listIcon   | Sets the ability to display svg icon    | Bool    | false    |
| iconArray   | Array of svg icons (listItem.id == List.id)    | Array    | -    |
| iconColor   | Set color of svg icon   | string    |  #f9b233   |

#### Example

```jsx
import React, { useState } from 'react'

import { Select } from 'pk-rtu-mirea-ui-library'
import radio from "./img/radio.svg"
import it from './img/it.svg'
import chem from './img/chem.svg'
import law from './img/law.svg'

const List = [
  { id: 1, val: 'text 1' },
  { id: 2, val: 'text 2' },
  { id: 3, val: 'text 3' },
  { id: 4, val: 'text 4' }
]

const iconArray=[
  { id: 1, path: radio },
  { id: 2, path: it },
  { id: 3, path: chem },
  { id: 4, path: law }
]

const App = () => {
  const [object, setObject] = useState({})

  return (
    <Select
      placeholder={'Not selected...'}
      selectValue={object}
      displayValue={object.val}
      list={List}
      valueKey={"val"}
      onChange={setObject}
      fullHeight
      disabled
      disabledAlert={"ha-ha select is disabled"}
    />
  )
}
```

### Mobile Pop Up (beta)
#### Props

| Option    | Description| Value     | Default value|
|:----------|:----------|:----------|:----------|
| buttonText| Text of button for open Pop Up    | String    | -    |
| header    | Header of Pop Up    | String    | -    |
| children  | Content of Pop Up    | Children    | -   |


#### Example

```jsx
import React from 'react'

import { MobilePopUp } from 'pk-rtu-mirea-ui-library'

const App = () => {
  return (
    <MobilePopUp buttonText={'Open'} header={'Header'}>
      <p>Hi 1</p>
    </MobilePopUp>
  )
}
```


## License

MIT © [slavaklevleev](https://github.com/slavaklevleev)

---
_Source: https://npm.io/package/pk-rtu-mirea-ui-library · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._