react-skillbars/README.md

React NPM library containing skill bars with full color customizations and responsive layout.

<div align="center">
<h1>react-skillbars</h1>
<h2>
<a href="https://github.com/crisboarna/react-skillbars/actions/workflows/merge_main.yaml">
  <img alt="ci" src="https://github.com/crisboarna/react-skillbars/actions/workflows/merge_main.yaml/badge.svg">
</a>
<a href="https://snyk.io/test/github/crisboarna/react-skillbars">
  <img alt="snyk" src="https://snyk.io/test/github/crisboarna/react-skillbars/badge.svg?targetFile=package.json">
</a>
<a href="https://codecov.io/gh/crisboarna/react-skillbars">
  <img alt="codecov" src="https://img.shields.io/codecov/c/github/crisboarna/react-skillbars.svg">
</a>
<a href="https://www.npmjs.com/package/react-skillbars">
  <img alt="npm" src="https://img.shields.io/npm/v/react-skillbars.svg">
</a>
<a href="http://opensource.org/licenses/MIT">
  <img alt="license" src="https://img.shields.io/github/license/crisboarna/react-skillbars">
</a>
<a href="https://github.com/semantic-release/semantic-release">
  <img alt="semantic-release" src="https://img.shields.io/badge/%20%20%F0%9F%93%A6%F0%9F%9A%80-semantic--release-e10079.svg?style=flat-square)">
</a>
<a href="http://commitizen.github.io/cz-cli/">
  <img alt="commitizen" src="https://img.shields.io/badge/commitizen-friendly-brightgreen.svg?style=flat-square)">
</a>
<img src="https://badges.frapsoft.com/os/v1/open-source.svg?v=103">
<a href="https://github.com/crisboarna/react-skillbars">
  <img alt="stars" src="https://img.shields.io/github/stars/crisboarna/react-skillbars.svg">
</a>
<a href="https://github.com/crisboarna/react-skillbars">
  <img alt="issues" src="https://img.shields.io/github/issues/crisboarna/react-skillbars.svg">
</a>
<a href="https://github.com/crisboarna">
  <img alt="madeby" src="https://img.shields.io/badge/made%20by-crisboarna-blue.svg" >
</a>
<a href="https://github.com/crisboarna/react-skillbars/pulls">
  <img alt="prs" src="https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat">
</a>
<img alt="logo" src="./packages/docs/static/img/readme-logo.gif" width="100%">
</h2>
</div>

# Documentation & Demo
Documentation and demo can be found [here](https://crisboarna.github.io/react-skillbars)

# Table of Contents

* [Installation](#installation)
* [Description](#description)
  * [Parameter naming](#parameter-naming)
* [Setup](#setup)
* [Development](#development)
  * [Linting](#linting)
  * [Testing](#testing)
* [How To Contribute](#how-to-contribute)
  * [Bots used](#bots-used)
* [License](#license)


# Installation
With `yarn`
```shell
yarn add react-skillbars
```

or with `npm`
```shell
npm install react-skillbars
```

# Setup
Import
```typescript
import ReactSkillbar from 'react-skillbars';
```

# Development
## Linting
```shell
yarn lib:lint
```

## Testing
```shell
yarn lib:test
```
`jest` is used for as the testing framework.


Testing coverage is enforced via the `jest.config.js` to 100% across the board.

# How to Contribute

1. Clone repo and create a new branch:
```shell
git checkout https://github.com/crisboarna/react-skillbars -b name_for_new_branch`.
````
2. Make changes and test
3. Submit Pull Request with comprehensive description of changes

## Bots used
To facilitate development the following bots are integrated into the repository:
1. [Request Info](https://github.com/behaviorbot/request-info)
2. [Semantic Pull Requests](https://github.com/apps/semantic-pull-requests)
2. [Welcome](https://github.com/apps/welcome)
3. [Snyk](https://github.com/marketplace/snyk)
4. [Todo](https://github.com/apps/todo)

## License
[![CC0](https://licensebuttons.net/p/zero/1.0/88x31.png)](https://creativecommons.org/publicdomain/zero/1.0/)

Full license details can be found in [LICENSE.md](./LICENSE.md)