🐺 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

✅ To-do

• Button
• Tooltip
• Dialog
• Checkbox
• Switch
• Slider
• Input
• Accordion
• Avatar
• Autocomplete
• Dropdown Menu
• Progress
• Radio
• Scroll Area
• Select
• Separator
• Toast