npm package: @monsterinc/ui-components
Description: Is a DEMO, TESTING PURPOSE PACKAGE ONLY, DON'T USE IT (IS JUST FOR TESTING, NOT A FULL PACKAGE).
Latest version: 0.0.3

# UI Components Test (Demo, dont use it for now)

Is a DEMO, TESTING PURPOSE PACKAGE ONLY, DON'T USE IT (IS JUST FOR TESTING, NOT A FULL PACKAGE).

This repository is a lightweight solution for testing and showcasing UI components using [Ladle](https://www.ladle.dev/), an alternative to Storybook. It provides an efficient way to develop and document UI components with a focus on speed and simplicity.

## Features

### 1. Ladle Integration

Ladle is a modern, lightweight tool for building UI component libraries. It offers:

- **Faster builds**: Compared to Storybook, Ladle has significantly reduced startup times.
- **Simplified configuration**: Minimal setup to get started.
- **Interactive component testing**: Live reloading and props manipulation directly in the browser.

### 2. npm Package

This repository is structured as an npm package, enabling:

- Easy sharing and reuse of UI components across projects.
- Versioning and dependency management.

### 3. Precommit Validations

To maintain code quality, the repository integrates precommit checks using:

- **[Husky](https://typicode.github.io/husky/)**: Adds git hooks to automate tasks like linting and testing before commits.
- **[lint-staged](https://github.com/okonet/lint-staged)**: Ensures only staged files are linted and formatted during commits, improving performance.

## Commits conventions

This project follows the commit conventions base on the standar of **Git Commit Message Convention**. Some examples could be:

```bash
feat(TICKET_NUMBER): brief description of the change
```

### Common commit types:

- `feat`: Used for new features.
- `fix`: Fixing errors.
- `chore`: minor code changes.
- `docs`: Documentation changes.
- `style`: Could be ui styled changes.
- `refactor`: Improvements on the code that does not change functionality.
- `test`: Add or fix a test.

### 4. Testing with Vitest

The project uses **[Vitest](https://vitest.dev/)** for unit testing, achieving:

- **High coverage**: Over 90% test coverage across the codebase.
- **Fast test execution**: Optimized for performance with instant feedback during development.
- **Integration with modern tools**: Seamless TypeScript and framework support.

To run tests:

````bash
npm run test

## Getting Started

### Prerequisites

Ensure you have the following installed:

- [Node.js](https://nodejs.org/) (v16 or later)
- npm or Yarn

### Installation

Clone the repository and install dependencies:

```bash
git clone https://github.com/your-repo/ui-components.git
cd ui-components
npm install
````

### TO CONSUME THE NPM PACKAGE YOU MUST TO INSTALL @nextui-org/react and make the setup to work properly on your project.

### Running Ladle

To start the Ladle development server:

```bash
npm run ladle
```

Visit `http://localhost:61000` in your browser to interact with the components.

### Building the Package

To build the package for distribution:

```bash
npm run build
```

The compiled files will be available in the `dist/` directory.

### Precommit Hooks

Precommit hooks are automatically installed via Husky. Before each commit, the following checks are run:

- **Linting**: Ensures code adheres to the defined ESLint rules.
- **Formatting**: Automatically formats staged files using Prettier.
- **coverage**: run coverage check to ensure that you fit the coverage %.
- **ts checks**: run typescript checks to ensure that you dont have any error.

## Directory Structure

```plaintext
ui-components/
├── src/                # Source files for components
├── stories/            # Ladle stories for components
├── dist/               # Compiled package output
├── .husky/             # Husky configuration for git hooks
├── .eslintrc.js        # ESLint configuration
├── .prettierrc         # Prettier configuration
├── package.json        # Project metadata and scripts
├── README.md           # Project documentation
└── tsconfig.json       # TypeScript configuration
```

## Scripts

- `npm run ladle`: Starts the Ladle development server.
- `npm run build`: Builds the package for distribution.
- `npm run lint`: Runs linting on the codebase.
- `npm run format`: Formats the codebase using Prettier.
- `npm run test`: Run unit tests.
- `npm run test:coverage`: Run coverage.

## Why Ladle?

Ladle is a lightweight alternative to Storybook, designed for speed and simplicity. It reduces the overhead of traditional UI development workflows while retaining the essential features needed to create and test components interactively.

## Contributing

We welcome contributions! To get started:

1. Fork the repository.
2. Create a new branch: `git checkout -b feature-name`.
3. Make your changes and commit them: `git commit -m 'Add new feature'`.
4. Push to the branch: `git push origin feature-name`.
5. Open a pull request.

## License

This project is licensed under the MIT License. See the [LICENSE](LICENSE) file for details.

---

Happy coding! 🚀