registers-react-library
Version:
A library of React components for ONS registers projects, using the external ONS pattern library.
103 lines (64 loc) • 3.04 kB
Markdown
# registers-react-library
[](./LICENSE) [](https://travis-ci.org/ONSdigital/registers-react-library) [](https://coveralls.io/github/ONSdigital/registers-react-library?branch=develop) [](https://www.versioneye.com/user/projects/59e49c0d0fb24f213b61dc12) [](https://badge.fury.io/js/registers-react-library)
React library for common components across Registers user interfaces. We have taken some of the external ONS patterns from the [ons-pattern-library-starter](http://onsdigital.github.io/ons-pattern-library-starter/) repository and wrapped them in dynamic React components.
[This](https://myappincome.co.uk/how-to-create-local-npm-package-of-react-components/) tutorial was used to help setup up the project.
## Using this Module
1. Install the module using NPM.
```shell
npm install --save registers-react-library
```
2. Import the component you want to use.
```javascript
import { Button } from 'registers-react-library';
```
3. Check the [storybook](https://onsdigital.github.io/registers-react-library) for details of what props to pass in.
## Environment Setup
Install NPM, it is included with Node.js ([Download](https://nodejs.org/en/))
## Testing the module locally
1. Clone this repository
```shell
git clone https://github.com/ONSdigital/registers-react-library.git
```
2. Install the local `registers-react-library` module
```shell
npm install --save /path/to/registers-react-library
```
3. Import the component you want to use
```javascript
import { Button } from 'registers-react-library';
<Button
id="logoutButton"
size="thin"
text="Logout"
onClick={() => alert('Clicked logout button...')}
ariaLabel="Logout Button"
type="submit"
/>
```
4. When you make changes to `registers-react-library`, make sure you run the `npm install` command from step 2 again.
## Running the Storybook
```shell
npm run storybook
```
You can access the storybook at [localhost:9001](http://localhost:9001).
## Deploy the Storybook to Github Pages
```shell
npm run build-storybook
npm run deploy-storybook
```
You can access the deployed Storybook [here](https://onsdigital.github.io/registers-react-library).
## Testing
To run the Enzyme tests (using Jest as a test runner), run the following command:
```shell
npm run test
```
## Linting
To run the linter, run the following command:
```shell
npm run lint
```
## Contributing
See [CONTRIBUTING](./CONTRIBUTING.md) for details.
## License
Copyright © 2017, Office for National Statistics (https://www.ons.gov.uk)
Released under MIT license, see [LICENSE](./LICENSE) for details.