# Wonderbly Components

[https://wonderbly-components.herokuapp.com/](https://wonderbly-components.herokuapp.com/)

This package is a unit tested bundle of reusable components built in React.
Wonderbly website-v2 consumes these components via npm for example:

```js
import Tag from "wonderbly-components/lib/Tag";

<Tag backgroundColor="#7077CC">I'm a tag</Tag>;
```

The site repo also displays component examples via
[react-styleguidist](https://github.com/styleguidist/react-styleguidist).

### Requirements

- node
- yarn
- heroku cli & account (if deploying from repo)
- npm account (if publishing to npm)

### Setup

`yarn install`

- You will need to npm login and have access from wonderbly
- You will need to heroku login and have access from wonderbly

### Commands

```sh
yarn start
# fire up styleguide locally

yarn test
# run mocha + enzyme unit tests

yarn test:watch
# rerun tests on file changes

yarn styleguide:copy-assets
# styleguidist requires fonts as static assets from wonderbly-css
# styleguide/assets/** is ignored so these must be copied once per clean install

yarn styleguide:build
# build styleguide locally to ./styleguide-build/

yarn build
# removes ./lib folder and rebuilds production files

yarn watch
# reruns build on file changes
# should be used for local yarn linked development

yarn lint
# lint ./src/

yarn lint:fix
# fix your bad typing

npm publish
# builds and publishes the package
```

### Publishing a new version

- Ensure the changes made on the branch you're working on
  have been approved and merged into master.
- Checkout to the master branch.
- Make sure you have pulled the lastest changes so master is up to date locally
- To bump the version: `npm version [<newversion> | major | minor | patch`
- Publish package: `npm publish`
- Push the versioning commit made by npm publish to master
- Update the `package.json` of website-v2

### Deployment

Use the #deployment channel to deploy master on slack:

`/h deploy wonderbly-components to production`

You can also deploy a branch like this:

`/h deploy wonderbly-components/chore/gw_deploy-styleguide to production`

### Linking repositories

If you're working on the website and want to see changes from wonderbly-components on local website.

```sh
# in wonderbly-components register packages with yarn
yarn link
# react must be linked due to react hooks
cd node_modules/react
yarn link

# in website-v2
yarn link wonderbly-components
yarn link react

# in wonderbly-components rebuild on file change
yarn watch
```
