farshid-kit-test-123 v0.0.7
React Package Starter
This is a simple and slightly opinionated starter kit for developing and publishing React packages. It comes with a several pre-configured tools, so you could focus on coding instead of configuring a project for the nth time.
Getting started
npx degit TimMikeladze/tsup-react-package-starter my-react-package
yarn && yarn dev
โImportant note: This project uses yarn for managing dependencies.
What's included?
- โก๏ธtsup - The simplest and fastest way to bundle your TypeScript libraries. Used to bundle package as ESM and CJS modules.
- ๐ Storybook - Build UI components and pages in isolation. It streamlines UI development, testing, and documentation.
- ๐งช Jest - A testing framework for JavaScript. Preconfigured to work with TypeScript and JSX.
- ๐ผ Release-it - release-it is a command line tool to automatically generate a new GitHub Release and populates it with the changes (commits) made since the last release.
- ๐ Test & Publish via Github Actions - CI/CD workflows for your package. Run tests on every commit plus integrate with Github Releases to automate publishing package to NPM and Storybook to Github Pages.
- ๐ Commitizen โ When you commit with Commitizen, you'll be prompted to fill out any required commit fields at commit time.
- ๐ Commitlint โ Checks that your commit messages meet the conventional commit format.
- ๐ถ Husky โ Running scripts before committing.
- ๐ซ lint-staged โ Run linters on git staged files
- ๐ Renovate - Universal dependency update tool that fits into your workflows. Configured to periodically check your dependencies for updates and send automated pull requests.
- โ๏ธ ESLint - A linter for JavaScript. Includes a simple configuration for React projects based on the recommended ESLint and AirBnB configs.
Usage
Developing
Watch and rebuild code with tsup
and runs Storybook to preview your UI during development.
yarn dev
Run tests with jest
when changes are detected.
yarn test:watch
To run all tests once without watching for changes.
yarn test
Build package with tsup
for production.
yarn build
Committing
When you are ready to commit simply run the following command to get a well formatted commit message. All staged files will automatically be linted and fixed as well.
yarn commit
Publishing
Create a semantic version tag and publish to Github Releases. When a new release is detected a Github Action will automatically build the package and publish it to NPM. Additionally, a Storybook will be published to Github pages.
Learn more about how to use the release-it
command here.
yarn release
โImportant note: in order to publish package to NPM you must add your token as a Github Action secret. Learn more on how to configure your repository and publish packages through Github Actions here.
yarn add https://gitlab.com/farshidinanloo73/tsup-ui-kit#develop