piggytech-ui-component-library

Piggytech Internal UI Component Library based

Brief

This is a collection of various piggytech UI components built by the Piggytech Frontend Engineering team for faster and simpler web UI development.

Questions

For help and support questions, please reach out to us. This issue list of this repo is exclusively for bug reports and feature requests.

Note

Component lib version ~0.9.0 is compatible with typescript version ~3.7.2, while component lib version ~1.0.0 is a breaking change that makes use of typescript ~4.7.0.

Table of Contents

• Features
• Browser Support
• Installing
• Components
• Credits
• License

Features

• Make XMLHttpRequests from the browser

Browser Support

| | | | | | --- | --- | --- | --- | --- | --- | Latest ✔ | Latest ✔ | Latest ✔ | Latest ✔ | Latest ✔ | 11 ✔ |

Installing

//npm
$ npm install piggytech-ui-component-library

//yarn
$ yarn add piggytech-ui-component-library

//pnpm
$ pnpm add piggytech-ui-component-library

//bower
$ bower install piggytech-ui-component-library

Components

See full usage examples here from the browser.

• Alert

  This is used for showing alerts to the user

  import {Alert} from "@piggytech-ui-component-library"
  
  // usage examples
  Alert.success("You have successfully. Done that");
  Alert.info("You have successfully. Done that");
  Alert.error("You have successfully. Done that");
  Alert.alert("loading", "qwertyu");

  type "success" | "error" | "info" | "loading" | "warn" options header: optional, actionBtnText: optional, message: String

• Button

  Demo

  import {Button} from "@piggytech-ui-component-library"
  
  //usage examples
  <Button>Piggyvest</Button>
  <Button color="#000">Blackbell</Button>

  Props | name | Type | Description |Required|Default| |-------------|-----------------------|---------------------------|--------|-------| |id | string | Id selector | no| | |variant |"primary","secondary","tertiary"| button type |no|"primary"| |type |"button","reset","submit"| specify type of button default is "button" |no|"button"| |className | string | custom css |no|| |disabled|boolean|Removes the ability to click or target the component|no|false| |loading|boolean|disables button and shows a loader on it|no|false| |color|string|specify button color|no|"#0d60d8"| |children|ReactNode|This accepts slot components/html|no|| |borderRadius|string|change button border radius|no||
  |style|CSSProperties|custom css for target button|no|{}|

  Note: other button native attributes like "onClick" are still accessable

• Input

  Demo

  import {Input} from "@piggytech-ui-component-library"
    
  //usage examples
  <Input></Input>
  
  <Input
   label="Tap here & enter .. (e.g 5000)"
   style={{ background: "whitesmoke" }}
   placeholder="Tap here & enter .. (e.g 5000)"
  /></Input>

  Props | name | Type | Description |Required|Default| |-------------|-----------------------|---------------------------|--------|-------| |id | string | Id selector | no| | |label|string|set the label for the input field|no|| |placeholder|set placeholder text for the input field|| |name|set name for the input field|no|| |type|can be "email", "text", "number" and so on (refer to native types)|no|"text"| |autofocus|automatically focus on the input when it is rendered|no|false| |value|"string" or "number"|set default value for input|no|| |style|CSSProperties|css styling for the input|no|| |labelStyle|CSSProperties|css styling for the input label|no|| |icon|boolean|show icon inside input|no|false| |disabled|boolean|change interaction with component|no|false| |rounded|boolean|add border radius to component|no|false| |borderRadius|string|set border radius of element|no|"5px"| |color|string|set input color of element|no|| |outlineColor|string|set outline color of input|no|| |backgroundColor|string|set background color of element|no|| |height|string|set height of input|no|| |width|string|set width of input|no|"100%"| |onChange|method|a callback functions that brings out the value inputed|no||

  Note: other input native attributes like "onClick" are still accessable

• Textarea

  Demo

  import {Textarea} from "@piggytech-ui-component-library"
    
  //usage examples
  <Textarea></Textarea>
  
  <Textarea
   name="business-address"
   label="Business Address"
   style={{ background: "whitesmoke" }}
   placeholder="Enter your business address"
  ></Textarea>

  Props | name | Type | Description |Required|Default| |-------------|-----------------------|---------------------------|--------|-------| |id | string | Id selector | no| | |label|string|set the label for the input field|no|| |placeholder|set placeholder text for the input field|| |name|set name for the input field|no|| |autofocus|automatically focus on the input when it is rendered|no|false| |value|"string" or "number"|set default value for input|no|| |style|CSSProperties|css styling for the input|no|| |labelStyle|CSSProperties|css styling for the input label|no|| |disabled|boolean|change interaction with component|no|false| |rounded|boolean|add border radius to component|no|false| |borderRadius|string|set border radius of element|no|"5px"| |color|string|set input color of element|no|| |outlineColor|string|set outline color of input|no|| |backgroundColor|string|set background color of element|no|| |height|string|set height of input|no|| |width|string|set width of input|no|"100%"| |onChange|method|a callback functions that brings out the value inputed|no||

  Note: other textarea native attributes like "onClick" are still accessable

• Select

  Demo

  import {Select} from "@piggytech-ui-component-library"
    
  //usage examples
  <Select></Select>
  
  <Select
   name="business-type"
   label="Business Type"
   style={{ background: "whitesmoke" }}
   options={['Fintech','Edtech']}
   placeholder="Select your business type"
  ></Select>

  Props | name | Type | Description |Required|Default| |-------------|-----------------------|---------------------------|--------|-------| |id | string | Id selector | no| | |label|string|set the label for the input field|no|| |placeholder|set placeholder text for the input field|| |name|set name for the input field|no|| |value|"string"|set default value for target component|no|| |style|CSSProperties|css styling for the target component|no|| |labelStyle|CSSProperties|css styling for the input label|no|| |isDisabled|boolean|change interaction with component|no|false| |borderRadius|string|set border radius of element|no|"5px"| |color|string|set input color of element|no|| |selectedColor|string|set the selected option color of element|no|| |outlineColor|string|set outline color of input|no|| |backgroundColor|string|set background color of element|no|| |height|string|set height of input|no|| |width|string|set width of input|no|"100%"| |options|Array|refer to react-select component options|no|| |onChange|method|a callback functions that brings out the value inputed|no||

• Checkbox

  Demo

  import {Checkbox} from "@piggytech-ui-component-library"
  
  //usage examples
  <Checkbox></Checkbox>
  
  <Checkbox  label="Keep me logged in", color="#f72585"></Checkbox>
  

  Props | name | Type | Description |Required|Default| |-------------|-----------------------|---------------------------|--------|-------| |label|string|The label shown alongside the checkbox|yes|| |checked|boolean|state of the checkbox|no|false| |color|string|color of the checkbox when active|no|| |onChange|event|callback function returning the state of the checkbox when acted upon|no||

• Switch

  Demo

  import {Switch} from "@piggytech-ui-component-library"
  
  //usage examples
  <Switch></Switch>
  
  <Switch value={true} color="#f72585"></Switch>
  

  Props | name | Type | Description |Required|Default| |-------------|-----------------------|---------------------------|--------|-------| |color|string|color for the switch when it is active|no|| |value|boolean|set default state of the switch|no|false| |outlineColor|string|set outline color of element|no|| |containerStyle|CSSProperties|css styling for the input|no|| |onChange|event|callback function returning the state of the element when acted upon|no||

• Modal

  Demo

  import {Modal} from "@piggytech-ui-component-library"
    
  //usage examples
  <Modal></Modal>
  
  <Modal isOpen={true} >
  <!-- Modal content -->
  </Modal>
    

  Props | name | Type | Description |Required|Default| |-------------|-----------------------|---------------------------|--------|-------| |id | string | Id selector | no| | |showOverlayBackgroundColor|boolean|show overlay back|no|false| |outlineColor|string|set outline color of element|no|| |contentStyle|CSSProperties|css styling for the modal body|no|| |overlayStyle|CSSProperties|css styling for the modal overlay|no|| |children|ReactNode|This accepts slot components/html|no|| |onRequestClose|event|callback function called when the modal is cloed|no||

• Loader

  import {Loader} from "@piggytech-ui-component-library"
  
  //usage example
  <Loader color="#f72585"></Loader>
  
  

  Props | name | Type | Description |Required|Default| |-------------|-----------------------|---------------------------|--------|-------| |color|string|color of the loader|no||

Credits

PiggyTech Engineering Team

License

MIT