React Components

See latest components here.

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 to provide living documentation for the components.

Run npm run styleguide and then hit 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:

$ 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.

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 ModalBREAKING 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.