# VERACITY Common Components Library (CCL)
A component library for building applications on the [Veracity](https://www.veracity.com) Platform.

Please read the [Contribute](/contribute) page for information about reporting bugs and issues.

## Installation
Install using node or yarn

```bash
npm i @veracity/ui-react
yarn add @veracity/ui-react
```

If you are using TypeScript in your client project you need to add 
```json
	"allowSyntheticDefaultImports": true
```
to your `tsconfig.json` file. We are currently only exporting es5 versions of this package for broader compatibility.

## Requirements
- Webpack, TypeScript or similar bundler
- SASS

This library requires webpack or an equivalent bundler that understands `JS` and `SCSS` import statements. Styling of compoents is done through `SCSS` internally and your webpack config must therefore support bundling of such files.

### Webpack support for SCSS
To support SCSS files in your webpack bundle you must install `node-sass` and `sass-loader` then add a rule for them within your webpack config.

```bash
npm i -D node-sass sass-loader css-loader
```

```javascript
// In your webpack config add a rule for SCSS files that includes the node_modules folder.
{
	test: /\.scss$/,
	use: [
		{
			loader: 'sass-loader'
		}
	]
}
```

```javascript
// Optionally if you want to use CSS modules locally you need to have a separate rule for this libraries scss files
// as they will not work correctly if they are modularized.
{ // CSS modules for local SCSS files
	test: /\.scss$/,
	exclude: /(node_modules|\.global\.scss)/,
	use: [
		{
			loader: 'css-loader',
			options: {
				modules: true,
				importLoaders: 1
			}
		},
		{
			loader: 'sass-loader'
		}
	]
},
{ // No CSS modules for files loader from node_modules
	test: /\/node_modules\/.+?\.scss$/,
	use: [
		{
			loader: 'sass-loader'
		}
	]
}
```

## Usage
Simply import the component you require and use it as any other component.

```javascript
import React from 'react';
import Button from '@veracity/ui-react/Button'; // Always use direct imports to minimize the final package size

export class MyComponent extends React.PureComponent{
	render(){
		return (
			<div>Hello world <Button>Click me</Button></div>
		)
	}
};

export default MyComponent;
```

## Documentation and demo
The documentation and component demos have been combined into a single demo page. The demo is available [here](http://go.veracity.com/ccl).