pk-rtu-mirea-ui-library

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

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

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

Usage

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

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

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

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

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

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

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

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