🐺 Wolves League UI

Wolves League UI is a proof of concept of a component library.

🎯 Goals

The goal of this project is to create a component library (almost) from the ground up with these principles in mind:

Accessibility
Easy to Maintain/Develop
Easy to Use
No need for TailwindCSS in the project using this library

🏗️ Structure

This project is a monorepo using Turborepo and PNPM Workspaces.

These are the packages present in the packages folder:

docs: Storybook app to showcase and document all components
eslint-config: ESLint configuration and rules to be used by all other packages
react: The actual implementation of the components using React
tokens: Values related to styles separated from any framework or tool so it can be reused anywhere
ts-config: TypeScript configuration to be used by all other packages

🔧 Tools

PNPM
Turborepo
Tsup
Changesets
TypeScript
ESLint
Prettier
React
RadixUI
TailwindCSS
Tailwind Variants
Storybook

🎨 Styles

Since I am not a designer, the styles applied to the components are purely based on my personal preferences, which may not align with established design guidelines.

⚙️ Development

Development environment:

Run the following command to start the development environment, which includes watching all packages, including Storybook:

pnpm dev

Lint

Use this command to run linting checks on the codebase:

pnpm lint

Build

Execute this command to build the project:

pnpm build

Version and release packages

To manage versioning and releases, follow these steps:

Run the Changesets CLI to choose which packages to version and add a description:

pnpm changeset

Change the versions of selected packages and creates CHANGELOG.md files:

pnpm version-packages

Publish the packages to NPM:

pnpm release

daniellmiranda/wolves-league-ui