npm package: @piggytechng/component-library
Description: A repository of components
Author: piggytech
Latest version: 2.0.3


# piggytech-ui-component-library

[![npm version](https://img.shields.io/npm/v/axios.svg?style=flat-square)](https://www.npmjs.org/package/piggytech-ui-component-library)
![Build status](https://github.com/axios/axios/actions/workflows/ci.yml/badge.svg)

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](#features)
  - [Browser Support](#browser-support)
  - [Installing](#installing)
  - [Components](#components) 
  - [Credits](#credits)
  - [License](#license)

## Features

- Make [XMLHttpRequests](https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest) from the browser

## Browser Support

![Chrome](https://raw.githubusercontent.com/alrra/browser-logos/main/src/chrome/chrome_48x48.png) | ![Firefox](https://raw.githubusercontent.com/alrra/browser-logos/main/src/firefox/firefox_48x48.png) | ![Safari](https://raw.githubusercontent.com/alrra/browser-logos/main/src/safari/safari_48x48.png) | ![Opera](https://raw.githubusercontent.com/alrra/browser-logos/main/src/opera/opera_48x48.png) | ![Edge](https://raw.githubusercontent.com/alrra/browser-logos/main/src/edge/edge_48x48.png) | ![IE](https://raw.githubusercontent.com/alrra/browser-logos/master/src/archive/internet-explorer_9-11/internet-explorer_9-11_48x48.png) |
--- | --- | --- | --- | --- | --- |
Latest ✔ | Latest ✔ | Latest ✔ | Latest ✔ | Latest ✔ | 11 ✔ |

[![Browser Matrix](https://saucelabs.com/open_sauce/build_matrix/axios.svg)](https://saucelabs.com/u/axios)

## Installing

```javascript
//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
```



<!-- Using jsDelivr CDN:

```html
<script src=""></script>
``` -->




## Components
See full usage examples [here](https://piggytechcomponentlibrary.netlify.app) from the browser.

- ### Alert
  This is used for showing alerts to the user

  ```javascript
  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](https://piggytechcomponentlibrary.netlify.app/?path=/story/piggyvest-button--primary-button) 
  
  ```javascript
  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](https://piggytechcomponentlibrary.netlify.app/?path=/story/piggyvest-input--with-placeholder)
  
  ```javascript
  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](https://piggytechcomponentlibrary.netlify.app/?path=/story/piggyvest-textarea--with-placeholder)
  
  ```javascript
  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](https://piggytechcomponentlibrary.netlify.app/?path=/story/piggyvest-select--default)
  
  ```javascript
  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](https://piggytechcomponentlibrary.netlify.app/?path=/story/piggyvest-checkbox--checkbox-default)
  
    ```javascript
  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](https://piggytechcomponentlibrary.netlify.app/?path=/story/piggyvest-switch--switch-default)
  
    ```javascript
  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](https://piggytechcomponentlibrary.netlify.app/?path=/story/piggyvest-modal--modal-with-header)
  
  ```javascript
  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
  <!-- [Demo](https://piggytechcomponentlibrary.netlify.app/?path=/story/piggyvest-switch--switch-default) -->
  
    ```javascript
  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](LICENSE)