boilerplatedev/ladle-react-starter

A minimal starter repository for a publishable React based UI library. Uses Ladle for story based development.

ladle-react-starter

A minimal starter repository for a publishable React based UI library. Uses Ladle for story based development. Comes setup with TailwindCSS. Ladle is a great fast Vite.js based alternative to Storybook.

The focus is on making sure the developer experience is the best while building with this library.

Features

• Story based development using Ladle. Which is a faster Vite.js based alternative to Storybook.
• Comes setup for TailwindCSS development. Can be easily switched out to support other frameworks.
• Git Hooks using Husky that lint and run tests before changes are pushed.
• Source Code Lint using ESLint and Prettier.
• Commit Message linting with commitlint. Setup to use the conventional style of commit messages.
• To help developers automatically write good commit messages, commitizen is fully setup to use the conventional style of commit messages.
  • Additionally, devmoji has been setup to emojify commit messages. These are also setup as a prepare-commit-msg git hook. If you wish to remove it, please update .husky/prepare-commit-msg and package.json.
• Release with semantic-release. If you use a proper Commit Message format, you'll never have to manually version and publish NPM packages again.
• Test with Jest.
• Builds using Rollup.
• GitHub Action to build and release to NPM automatically.

How to Use?

• Search ladle-react-starter and replace it with your custom package name.

• Search Abhishek Bhardwaj and replace it with your name.

• Check .releaserc to enable/disable the semantic-release plugins you may or may not want. The following plugins are initially setup:

  • @semantic-release/commit-analyzer
  • @semantic-release/release-notes-generator
  • @semantic-release/changelog
  • @semantic-release/npm
  • @semantic-release/github
  • @semantic-release/git

• The GitHub action will automatically generate release notes and a changelog. It will also automatically publish to NPM and also make a TAR ball and add it to GitHub Releases. To use it properly, please generate the following tokens:

  • GITHUB_TOKEN - Generate a Personal Access Token that you can use to authenticate your own user.

    • When using the GITHUB_TOKEN, the minimum required permissions are:

      - `contents`: write to be able to publish a GitHub release
      - `issues`: write to be able to comment on released issues
      - `pull-requests`: write to be able to comment on released pull requests
      

  • NPM_TOKEN - Generate an access token on NPMJS.com to automatically publish the release.

• To skip CI, add skip ci to commit message.

• To skip release, add skip release to commit message.

Helpful Commands

Commands	Description
build	Uses Rollup to build the source directory and places the output in dist/. Builds both ESM and CJS.
dev:commit	Launches an interactive terminal-based commit message writer. Uses commitizen.
dev	Launches Ladle's Dev server and opens Chrome at https://localhost:6789.
ladle:build	Builds a static Ladle site and places it in the build/ folder. You may then host it anywhere you like.
ladle:build:run	Runs the static Ladle site placed in the build/ folder.
dev:open-bundle-visualizer	Rollup is configured to generate an HTML file that lets you visualize and analyze your Rollup bundle to see which modules are taking up space in the final exported bundle. The file is rollup-plugin-visualizer-stats.html and this command will automatically open it up in your default browser.
test	Runs the Jest based test-suite.
test:ci	To run tests in CI environments.
lint	Runs ESLint / Prettier to lint source code and display the issues.
format	Runs ESLint / Prettier to lint source code and automatically format what can be fixed.
clean	Deletes all auto-generated files and cleans up the folder.
typecheck	Basically runs tsc with noEmit enabled to check if Typescript has any issues. If there are issues, they're printed on console for the developer to correct.