Hatchd React Component Lib

This is a react component library that contains useful reusable compontnets for usage in React apps put together by Hatchd.

This project was bootstrapped with TSDX.

If you’re new to TypeScript and React, checkout this handy cheatsheet

Installing

Checkout the project

git clone [email protected]: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

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.

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 and the netlify-cli 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. (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. (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 with prettier, husky, and lint-staged. Adjust the respective fields in package.json accordingly.

Optimizations

Please see the main tsdx optimizations docs. In particular, know that you can take advantage of development-only optimizations:

// ./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 and 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. Code split inside your React app instead of your React library.