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, 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: Adds git hooks to automate tasks like linting and testing before commits.
• 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:

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 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:

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:

npm run ladle

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

Building the Package

To build the package for distribution:

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

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 file for details.

Happy coding! 🚀