pk-rtu-mirea-ui-library

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