@trenary/ui

This library is a collection of reusable UI components for my projects. There's no real system or pattern in place, just a hodge-podge of random components/ideas that I've come up with. If it inspires you, or you somehow find any of it useful, then hell yeah please tell me about it!

Getting Started

pnpm install @trenary/ui

Developing

Watch and rebuild code with tsup and runs Storybook to preview your UI during development.

pnpm run dev

Building

Build package with tsup for production.

pnpm run build

Linking/Testing

Often times you want to link the package you're developing to another project locally to test it out to circumvent the need to publish it to NPM.

For this we use yalc which is a tool for local package development and simulating the publishing and installation of packages. Make sure it is globally installed, then in a project where you want to consume your package simply run:

yalc add my-react-package

Releasing, tagging & publishing to NPM

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.

pnpm run release

What tools are used?

• 📦pnpm - Fast, disk space efficient package manager
• ⚡️tsup - The simplest and fastest way to bundle your TypeScript libraries. Used to bundle package as ESM and CJS modules.
• 🔗 Yalc - Better workflow than npm link for package authors.
• 📖 Storybook - Build UI components and pages in isolation. It streamlines UI development, testing, and documentation.
• 🔼 Release-it - A command line tool to automatically generate a new GitHub/NPM Release
• 🐙 Github Actions - CI/CD workflows that integrate with Github Releases to automate publishing the package to NPM and Storybook to Github Pages.
• ☑️ ESLint - A linter for JavaScript.
• 🎨 Prettier - An opinionated code formatter.