Yail

🎨Yail's Storybook

Yail is the official UI library of Programmer Network, crafted for developers who prioritize simplicity and efficiency. Embracing a minimalist approach, Yail is now open-sourced to share its straightforward and effective design ethos with the broader community. Here’s what makes Yail stand out:

• Minimalistic Design: Yail focuses on the essentials to deliver a user-friendly experience free from unnecessary complexity.
• Tailored with Tailwind-CSS: Integrating Tailwind-CSS, Yail offers intuitive styling options, enabling you to create visually appealing web projects effortlessly.
• Ease of Maintenance: We prioritize hassle-free maintenance, making Yail as easy to manage as it is to implement.

Originally developed for Programmer Network, we decided to open source Yail due to the growing interest from the community. Whether you're working on small-scale projects or large applications, Yail provides the tools for building elegant, responsive, and accessible UIs with minimal overhead.

For an in-depth look at what Yail offers, the Storybook is a good starting point. It documents the current set of UI components and their usage patterns. You can visit our 🖌️Storybook to review the implemented features and components.

Yail is yet another interface library used by Programmer Network 💻🤓.

Prerequisites

Before you begin, ensure you have met the following requirements:

• Node.js: Use nvm to switch to the version specified in the .nvmrc file. To ensure you're using the correct version of Node.js for this project, run nvm use in the project directory.
• pnpm: Install pnpm globally with npm install -g pnpm.

Getting Started

Usage

Installation

To integrate Yail into your project, install it using your preferred package manager. For example, with pnpm, you can add it as follows:

pnpm add @programmer_network/yail

Incorporating Components into Your Project

After installation, you can start using Yail components in your React project.

To ensure proper styling with Tailwind CSS, include the CSS file generated by Yail in your project.

@import "@programmer_network/yail/dist/style.css";

Here's how you can import a component:

import { Button } from "@programmer_network/yail";

Exploring Components with Storybook

Yail provides a comprehensive component showcase through Storybook. To explore these components, start the Storybook server:

pnpm storybook

Contributing to Yail

We welcome contributions to Yail! Here's how you can set up the project locally for development.

Setting Up the Development Environment

Clone the Repository

First, clone the repository to your local machine:

git clone https://github.com/Programmer-Network/yail.git
cd yail

Install Dependencies

Use pnpm to install all necessary dependencies:

pnpm install

Running the Development Server

To start the development server, run:

pnpm dev

This command will launch Vite's development server. You can then make changes to the library, and Vite will automatically reload these changes.

View your changes inside storybook:

pnpm storybook

Running Tests

Yail uses Vitest for testing. To run tests, use the following commands:

Run all tests:

pnpm test

Run tests in watch mode:

pnpm test:watch

Linting and Code Formatting

To ensure code consistency, we use ESLint and Prettier. Run these before committing your changes:

To lint your code:

pnpm lint:fix

To format your code:

pnpm format

Creating a Pull Request

Once you've made your changes:

1. Fork the repository.
2. Create a new branch for your changes.
3. Commit your changes and push them to your fork.
4. Open a pull request against the master branch of the Programmer-Network/yail repository.

Please provide a clear description of the changes in your pull request.

Thank you for contributing to Yail!