UI library using React + Storybook with TypeScript and Jest

This is a boilerplate project for writing React NPM modules (or component libraries) in TypeScript + Storybook.

This boilderplate includes a Storybook to visualize and demonstrate your components.

Features

• TypeScript with automatic linting via ESLint + Prettier
• Unit testing with Jest + @testing-library/react
• Storybook + hot reloading, including the addons Actions, Knobs, Storysource, Notes, Viewport, Console, and Centered.

Usage

1. Fork or clone this repository
2. If using VS Code, install recommended extensions
3. npm install
4. npm run start:storybook
5. Create your components
6. Export your components in index.ts
7. npm build To build your React components befor deploying to NPM.
8. npm publish Publish your module.

After puplish

To do...

npm 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
• start:storybook - start the storybook server and automatically open in browser
• build - for deployment
• build:storybook - run this command to build your storybook
• npm publish - run this command to publish your packages to npm

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

Configuration

npm login

npm login

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.