# React Components
[See latest components here.](https://brighthr.github.io/BrightComponents/)
## Developing with WebApp
Npm allows you to point at any github branch, develop your component first, push to your branch, and point WebApp bright-components to that branch.
In order to do that, update `package.json` with the commit hash you require and do an `npm install`.
`"bright-components": "github:brighthr/brightcomponents#eff943143d40f95cf0cc2695ca888bce8f95dc04"`
It is also possible to use the branch name, but if you push further commits you'll need to use `npm update`:
`"bright-components": "github:brighthr/brightcomponents#test-version"`
Once demoed and tested, merge your bright-components PR to master.
Update the reference in WebApp to point to published version.
## Component Library
We use [Styleguidist](https://github.com/styleguidist/react-styleguidist) to provide living documentation for the components.
Run `npm run styleguide` and then hit
[http://localhost:6060](http://localhost:6060). This will update as you add to your component.
## Windows devs
You'll probably want to run the following commands within the repo to ensure consistent line endings, since whilst Git will convert them for you, the linter expects LF, not CLRF:
```bash
$ git config core.eol lf
$ git config core.autocrlf input
$ git checkout-index --force --all
```
# Generating icons
Create a new directory `icons` in root, if one does not already exist on your local machine.
Add the `icon.svg` to this folder.
Run the genIcons.js script with the following command `npm run genIcons`.
Delete `icon.svg` from the `icons` directory.
# Versioning
We use semactic-release package to automate versioning and deployment to NPM. Commit messages [should adhere to conventions here.](https://github.com/semantic-release/semantic-release#commit-message-format)
Here is an example of the release type that will be done based on a commit messages:
Patch Release:
`fix(pencil): stop graphite breaking when too much pressure applied`
Feature Release:
`feat(pencil): add graphiteWidth option`
Breaking Release:
`feat(Modal): add new required prop to Modal`
`BREAKING CHANGE: All modals need GA prop now.`
* When you squash and merge a PR onto master, make sure you put a "BREAKING CHANGE:" line in the commit message section.
