@piggytechng/component-library

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