npm package: @hatchd/react-components
Description: The Hatchd React component library
Author: Hatchd Devteam
Latest version: 0.1.8

# Hatchd React Component Lib

This is a react component library that contains useful reusable compontnets for usage in React apps put together by [Hatchd](https://hatchd.com.au).

This project was bootstrapped with [TSDX](https://github.com/jaredpalmer/tsdx).

> If you’re new to TypeScript and React, checkout [this handy cheatsheet](https://github.com/sw-yx/react-typescript-cheatsheet/)

## Installing

Checkout the project
```
git clone git@bitbucket.org:hatchd/hatchd-react-components.git
```

cd into the directory
```
cd ./hatchd-react-components
```

To install all dependencies run
```
yarn
```

## Workflow

To launch storybook
```
yarn storybook
```

This loads the stories from `./stories` and launched a storybook server at [http://localhost:6006](http://localhost:6006)

> NOTE: Stories should reference the components as if using the library, similar to the example playground. This means importing from the root project directory. This has been aliased in the tsconfig and the storybook webpack config as a helper.

## Pushing to master

Pushing to `master` will automatically publish to NPM and build storybook to [https://hatchd-react-components.netlify.app](https://hatchd-react-components.netlify.app).

> Note: Remember to increase the version number in package.json otherwise the pipeline will fail.

## How the pipeline works

The pipeline is stored in `bitbucket-pipelines.yml`.

The pipeline uses the bitbicket [npm publish pipe](https://confluence.atlassian.com/bitbucket/deploy-to-npm-967317547.html) and the [netlify-cli](https://docs.netlify.com/cli/get-started/#manual-deploys) deploy command to both publish to NPM and deploy storybook to Netlify when you push to the `master` branch.

The keys for these services are stored in the pipelines env vars which and be edited and updated [here](https://bitbucket.org/hatchd/hatchd-react-components/addon/pipelines/deployments). (Click the little settings cog icon on the right).

### NPM

Should they ever need to be changed the npm tokens can be setup here `https://www.npmjs.com/settings/[your npm username]/tokens`

Create a new one and add it to / edit the env var named `NPM_TOKEN` in bitbucket.

### Netlify

The Netlify tokens can be created [here](https://app.netlify.com/user/applications). (Click new access token).

Create a new one and add it to / edit the env var named `NPM_TOKEN` in bitbucket.

Its also worth noting the netlify site ID is stored in `./.netlify/state.json`. You can change the site that storybook is built to by changing this ID.

# Other helpful info

## Useful commands

To do a one-off build run
```
yarn build
```

To run tests run
```
yarn test
```

To just watch the files without launching storybook run
```
yarn start
```

To build storybook on its own run
```
yarn storybook:build
```

### Note that the following are available but should not have to be used as the bitbucket pipeline handles this when pushing to the master branch.

> Please note you will need to login to the hatchd NPM account (or be a team member of the NPM account) and login to the hatchd netlify account to use these commands.

To deploy storybook to netlify
```
yarn publish:storybook
```

To deploy to NPM
```
yarn publish:npm
```

To deploy to netlify and npm
```
yarn deploy
```

## Configuration

Code quality is [set up for you](https://github.com/palmerhq/tsdx/pull/45/files) with `prettier`, `husky`, and `lint-staged`. Adjust the respective fields in `package.json` accordingly.

## Optimizations

Please see the main `tsdx` [optimizations docs](https://github.com/palmerhq/tsdx#optimizations). In particular, know that you can take advantage of development-only optimizations:

```js
// ./types/index.d.ts
declare var __DEV__: boolean;

// inside your code...
if (__DEV__) {
  console.log('foo');
}
```

You can also choose to install and use [invariant](https://github.com/palmerhq/tsdx#invariant) and [warning](https://github.com/palmerhq/tsdx#warning) functions.

## Module Formats

CJS, ESModules, and UMD module formats are supported.

The appropriate paths are configured in `package.json` and `dist/index.js` accordingly. Please report if any issues are found.

## Named Exports

Per Palmer Group guidelines, [always use named exports.](https://github.com/palmerhq/typescript#exports) Code split inside your React app instead of your React library.