timmikeladzetimmikeladze
151

Tsup React Package Starter

screenshot of Tsup React Package Starter
react

Develop & publish React or Typescript packages with ease. PostCSS, Vitest & Storybook support out of the box. Integrates with Github releases and automatically publishes to NPM. Code is built using tsup.

Github

Overview:

React Package Starter is a simple and opinionated starter kit for developing and publishing React packages. It comes pre-configured with various tools to streamline the development process and eliminate the need for repetitive configuration. The kit includes features such as tsup for bundling TypeScript libraries, Yalc for package linking, Storybook for UI component development, Jest for testing, and various other tools for automation and code quality.

Features:

  • tsup: Bundles TypeScript libraries as ESM and CJS modules.
  • Yalc: Better workflow for package authors, allowing local package development and simulation of publishing and installation.
  • Storybook: Streamlines UI development, testing, and documentation by building UI components and pages in isolation.
  • Jest: A testing framework preconfigured to work with TypeScript and JSX.
  • Release-it: A command-line tool for automatically generating GitHub releases and populating them with changes since the last release.
  • Github Actions: CI/CD workflows for testing and publishing packages to NPM and Storybook.
  • Commitizen: Prompts users to fill out required commit fields for well-formatted commit messages.
  • Commitlint: Ensures commit messages meet the conventional commit format.
  • Husky: Runs scripts before committing.
  • lint-staged: Runs linters on git staged files.
  • Renovate: Universal dependency update tool that periodically checks for dependency updates and sends automated pull requests.
  • ESLint: A linter for JavaScript with a simple configuration for React projects.
  • Prettier: An opinionated code formatter.

Summary:

React Package Starter is a convenient starter kit for developing and publishing React packages. It eliminates the need for repetitive project configuration by providing pre-configured tools and workflows. With features such as bundling, testing, documentation, automation, and code quality, developers can focus on coding instead of setting up the project.

react
React

React is a widely used JavaScript library for building user interfaces and single-page applications. It follows a component-based architecture and uses a virtual DOM to efficiently update and render UI components

eslint
Eslint

ESLint is a linter for JavaScript that analyzes code to detect and report on potential problems and errors, as well as enforce consistent code style and best practices, helping developers to write cleaner, more maintainable code.

Storybook

Storybook is a tool for developing and testing UI components in isolation. It provides a sandbox environment where you can experiment with different props and states to see how your component responds.

typescript
Typescript

TypeScript is a superset of JavaScript, providing optional static typing, classes, interfaces, and other features that help developers write more maintainable and scalable code. TypeScript's static typing system can catch errors at compile-time, making it easier to build and maintain large applications.