# React Components

A collection of React components which are shared across products.


## Licence

Copyright 2017 CoreFiling S.A.R.L.

Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

    http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.


## Installation

```bash
npm install -S @cfl/react-components
```


## Dependencies

There are some CSS dependencies which consumers must provide themselves:

* [Bootstrap](http://getbootstrap.com/)
* [Material Icons](https://fonts.googleapis.com/icon?family=Material+Icons)

In addition, some components require a Radium `StyleRoot` component to [wrap the application](https://github.com/FormidableLabs/radium/tree/master/docs/api#styleroot-component)


## Example Usage

Usage in TypeScript:

```jsx
import { Card } from '@cfl/react-components';

function MyComponent(props: {}): JSX.Element {
  return (
    <Card />
  );
}
```


### Icons

```jsx
import { CheckIcon } from '@cfl/react-components/icons';

function MyComponent(props: {}): JSX.Element {
  return (
    <CheckIcon />
  );
}
```


## Development

### Setup

```bash
npm install
```

### Build

```bash
npm pack # produces `react-components-$VERSION.tgz`
```

### Storybook

```bash
npm config set react-components:storybook-port $PORT # optional, defaults to 9001
npm start
```

We use [storybook](https://www.npmjs.com/package/@kadira/storybook) to provide a development environment for components. Next to each component (e.g., `Foo` in `foo.tsx`), there is a story file (e.g., `foo.story.tsx`) which renders the component in different ways to demonstrate its features.

### Running Tests

#### Single Run

```bash
npm test
```

#### Watch Tests

```bash
npm run dev:test
```

#### Debug Tests

```bash
npm install -g node
npm run test:mocha -- --debug-brk
node-inspector
```

Then go to http://localhost:8080/?port=5858, which will allow you to debug the application.

It's usually worth adding a `debugger;` statement to the top of one of your spec files, so you can continue execution until your files are loaded.