b-esmaili / component-library-bilorplate

React TypeScript NPM Boilerplate

This is a boilerplate project for writing React NPM modules (or component libraries) in TypeScript. The code is compiled and published to NPM via CircleCI v2 Workflows and Github Releases.

This boilderplate includes a Storybook to visualize and demonstrate your components. The Storybook is automatically deployed to Zeit once configured (see the Storybook for this template here). This allows you to test each PR visually and in isolation.

Features

• TypeScript with automatic linting via ESLint + Prettier
• Unit testing with Jest + Enzyme
• Storybook + hot reloading, including the addons Actions, Knobs, Storysource, Notes, Viewport, Console, and Centered. I have also included various utilities for creating stories.
• Automatic Storybook deployment to Zeit via Now for GitHub for all branches and PRs
• Continuous Integration via Circle CI
• NPM publishing via GitHub Releases (version must follow the v.*.*.* pattern)
• Editor settings for VS Code
• Bootstrap & Reactstrap
• Yarn

Usage

1. Fork or clone this repository
2. If using VS Code, install recommended extensions
3. yarn install
4. yarn start
5. Create your components
6. Export your components in index.ts
7. Publish your module by creating a new GitHub Release (with a v.*.*.* version number). CircleCI will automatically build and deploy.

yarn Scripts

• test - run unit tests
• test:cover - run unit tests with test coverage
• lint - check eslint and prettier rules
• lint:fix - autofix unmet eslint and prettier rules
• local-pack - create the tgz package locally to test consumers without publishing
• start - start the storybook server and automatically open in browser
• compile - standard typescript compile tsc
• now-build - used by Zeit when building your storybook for deployment (do not rename this script)

Before each commit, husky and lint-staged will automatically lint your staged ts, tsx, js, jsx files.

Configuration

Circle CI

You need to configure one environment variable in CircleCI, for publishing to NPM.

• NPM_TOKEN

Zeit

You need to authorize Zeit with your GitHub account to enable automatic deployments. Once configured, you can enable Zeit to deploy any repository that contains a now.json file.

Dependabot (optional)

I recommend enabling Dependabot on this repository to keep your dependencies up to date. Each dependency update will be created as a PR, which will automatically validate via Circle CI and you can manually validate via Zeit.

License

This code is released under the MIT license - feel free to use it.

Contribute

Please contribute any improvements or fixes to this project!

To make sure you have a pleasant experience, please read the code of conduct. It outlines core values and beliefs and will make working together a happier experience.