# Brickblock UI & Core Components
This repo is a private npm package that gets consumed by other projects as an npm dependency

**NOTE: Please make sure to read through our [Developer Handbook](https://git.brickblock-dev.io/core/dev-handbook) before committing code to this repo.**<br>
It contains information about coding styleguides, deployment documentation etc.

## How to use Components and CSS from this repo in other projects

### Components
1. Install this repo as an npm package with:

	```sh
	yarn add git+ssh://git@git.brickblock-dev.io:core/brickblock-ui.git#<git-tag-number>
	```

2. Import components with:

	```js
	import { Button } from 'brickblock-ui'
	```

3. Use components as you would use any other react component:

	```js
	<Button someCustomProp="someValue">Launch Rocket to Mars</Button>
	```

### CSS
TODO: This is not done, yet. First we need to create CSS exports and then describe how to use them here.

## How to run
This is a react-storybook project that doesn't have a normal dev server.
Instead, `yarn start` will fire up `react-storybook` on http://localhost:8080

### 0) Prerequisites

#### Chronic
Chronic runs a command quietly unless it fails to suppress overly verbose output
It's part of [moreutils](https://joeyh.name/code/moreutils/) and can be installed:
- macOS: `$ brew install moreutils`
- Debian: https://packages.debian.org/sid/utils/moreutils
- Ubuntu: https://packages.ubuntu.com/search?keywords=moreutils
- Alpine: https://pkgs.alpinelinux.org/package/edge/testing/x86/moreutils

#### [Node.js](https://nodejs.org/en/)

#### [Yarn](https://github.com/yarnpkg/yarn)

### 1) Setup
```sh
yarn
```

### 2a) Run locally

```sh
yarn start
```

### 2b) Run with docker

```sh
yarn build:docker
yarn start:docker
```


## How to run tests & other healthchecks
**Quickstart:** Run `yarn healthcheck` to execute all of the below in one go!

### Tests & Coverage
Runs all tests, generates a coverage report and checks our test coverage is above the threshold specified in `jest-config.js`

```sh
yarn test
```

**Hint:** in Windows Git Bash flag `--no-watchman` must be added

### Linters
Runs `eslint` on JavaScript files and `stylelint` on styles

```sh
yarn lint
```

### Flow
Checks for typing errors with flow

```sh
yarn flow
```

### Vulnerability Check
Runs [snyk](https://snyk.io) to check for vulnerabilities in our npm dependencies

```sh
yarn vulnerability-check
```

### List open TODOs and FIXMEs
Parses all `*.js`, `*.css` and `*.sol` files for the keywords `TODO` & `FIXME` and prints them out in a list

```sh
yarn todo
```

## How to release a new version

0. **Rebase with origin/master**
  ```sh
  git rebase origin/master
  ```

2. **Create new release**

  ```sh
  # Use major, minor or patch depending on how much has changed (follow semver)
  # Syntax: npm version major|minor|patch, for example:
  npm version patch
  ```

3. **Use in other projects**
  Update tag version of the `brickblock-ui` npm package in other projects
