# Heartwood React Components

## Local Setup

- Clone the repo

```
git clone git@github.com:sprucelabsai/sprucebot-react-heartwood.git
```

- Install NPM modules

```
yarn
```

- Run the project

The project comes with an `.env.example` file, but you'll need to create your own `.env` file in the root directory and set your environments there. To get started quickly, you can set the hosts like so:

```
DEVTOOLSHOST=http://localhost:3001
LOG_LEVEL=warn
PERFTOOLS=true
HOST=http://localhost:3000
APIHOST=http://localhost:3000
```

And then run:

```
npm run storybook
```

## Environment Variables

Environment variables may be defined via export or command line.

```
# Use stylesheets to override imported styles and do simple theming
STYLESHEETS=http://192.168.104.239:3000/stylesheets/global.css,https://some-client/styles.css

# Valid levels (in order) are: trace, debug, info, warn, error
LOG_LEVEL=debug

# Turns on https://github.com/garbles/why-did-you-update
PERFTOOLS=true

# The host for this project.  Used for redirection and pathing
HOST=https://local.sprucebot.ai

# The api host (if applicable)
APIHOST=https://local-api.sprucebot.ai

# The devtools host
DEVTOOLSHOST=https://local-devtools.sprucebot.ai
```

## Editor Plugins

We recommend using the following plugins to enhance the development experience:

- Flow https://github.com/flowtype/flow-for-vscode
- Prettier https://github.com/esbenp/prettier-vscode
- Stylelint https://github.com/shinnn/vscode-stylelint
- ESLint https://github.com/Microsoft/vscode-eslint