{"id":26155674,"url":"https://github.com/programmer-network/yail","last_synced_at":"2025-12-26T00:47:01.652Z","repository":{"id":205608342,"uuid":"714647583","full_name":"Programmer-Network/yail","owner":"Programmer-Network","description":"Programmer Network's official UI library","archived":false,"fork":false,"pushed_at":"2024-05-12T08:29:03.000Z","size":1621,"stargazers_count":32,"open_issues_count":3,"forks_count":5,"subscribers_count":0,"default_branch":"master","last_synced_at":"2024-05-12T10:17:37.891Z","etag":null,"topics":["component-library","components-react","react-components","ui","ui-components","ui-design","uikit"],"latest_commit_sha":null,"homepage":"https://yail.programmer.network","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Programmer-Network.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":".github/CODEOWNERS","security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2023-11-05T13:49:14.000Z","updated_at":"2024-07-12T23:27:42.671Z","dependencies_parsed_at":"2023-11-14T16:45:25.594Z","dependency_job_id":"d6a37872-ae36-4474-b115-87b7ef53f454","html_url":"https://github.com/Programmer-Network/yail","commit_stats":null,"previous_names":["programmer-network/luigui","programmer-network/yail"],"tags_count":210,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Programmer-Network%2Fyail","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Programmer-Network%2Fyail/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Programmer-Network%2Fyail/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Programmer-Network%2Fyail/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Programmer-Network","download_url":"https://codeload.github.com/Programmer-Network/yail/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248842671,"owners_count":21170403,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["component-library","components-react","react-components","ui","ui-components","ui-design","uikit"],"created_at":"2025-03-11T08:58:17.073Z","updated_at":"2025-12-26T00:47:01.646Z","avatar_url":"https://github.com/Programmer-Network.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Yail\n\n[![lint-and-test-pr](https://github.com/Programmer-Network/yail/actions/workflows/ci.yaml/badge.svg)](https://github.com/Programmer-Network/yail/actions/workflows/ci.yaml)\n\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"./assets/images/yail-logo.png\"\u003e\n\u003c/p\u003e\n\n## 🎨Yail's [Storybook](https://yail.programmer.network)\n\n_Yail_ is the official UI library of\n[Programmer Network](https://programmer.network), crafted for developers who\nprioritize simplicity and efficiency. Embracing a minimalist approach, _Yail_ is\nnow open-sourced to share its straightforward and effective design ethos with\nthe broader community. Here’s what makes _Yail_ stand out:\n\n- **Minimalistic Design**: _Yail_ focuses on the essentials to deliver a\n  user-friendly experience free from unnecessary complexity.\n- **Tailored with Tailwind-CSS**: Integrating Tailwind-CSS, _Yail_ offers\n  intuitive styling options, enabling you to create visually appealing web\n  projects effortlessly.\n- **Ease of Maintenance**: We prioritize hassle-free maintenance, making _Yail_\n  as easy to manage as it is to implement.\n\nOriginally developed for [Programmer Network](https://programmer.network), we\ndecided to open source _Yail_ due to the growing interest from the community.\nWhether you're working on small-scale projects or large applications, _Yail_\nprovides the tools for building elegant, responsive, and accessible UIs with\nminimal overhead.\n\nFor an in-depth look at what _Yail_ offers, the Storybook is a good starting\npoint. It documents the current set of UI components and their usage patterns.\nYou can visit our [🖌️Storybook](https://yail.programmer.network) to review the\nimplemented features and components.\n\nYail is _yet another interface library_ used by\n[Programmer Network 💻🤓](https://programmer.network).\n\n## Prerequisites\n\nBefore you begin, ensure you have met the following requirements:\n\n- [Node.js](https://nodejs.org/en/): Use [nvm](https://github.com/nvm-sh/nvm) to\n  switch to the version specified in the [.nvmrc](./.nvmrc) file. To ensure\n  you're using the correct version of Node.js for this project, run `nvm use` in\n  the project directory.\n- [pnpm](https://pnpm.io/): Install pnpm globally with `npm install -g pnpm`.\n\n## Getting Started\n\n### Usage\n\n#### Installation\n\nTo integrate Yail into your project, install it using your preferred package\nmanager. For example, with `pnpm`, you can add it as follows:\n\n```bash\npnpm add @programmer_network/yail\n```\n\n#### Incorporating Components into Your Project\n\nAfter installation, you can start using Yail components in your React project.\n\nTo ensure proper styling with Tailwind CSS, include the CSS file generated by\nYail in your project.\n\n```css\n@import \"@programmer_network/yail/dist/yail.css\";\n```\n\nHere's how you can import a component:\n\n```jsx\nimport { Button } from \"@programmer_network/yail\";\n```\n\n#### Exploring Components with Storybook\n\nYail provides a comprehensive component showcase through Storybook. To explore\nthese components, start the Storybook server:\n\n```bash\npnpm storybook\n```\n\n## Contributing to Yail\n\nWe welcome contributions to Yail! Here's how you can set up the project locally\nfor development.\n\n### Setting Up the Development Environment\n\n**Clone the Repository**\n\nFirst, clone the repository to your local machine:\n\n```bash\ngit clone https://github.com/Programmer-Network/yail.git\ncd yail\n```\n\n**Install Dependencies**\n\nUse `pnpm` to install all necessary dependencies:\n\n```bash\npnpm install\n```\n\n**Running the Development Server**\n\nTo start the development server, run:\n\n```bash\npnpm dev\n```\n\nThis command will launch Vite's development server. You can then make changes to\nthe library, and Vite will automatically reload these changes.\n\nView your changes inside storybook:\n\n```bash\npnpm storybook\n```\n\n### Running Tests\n\nYail uses Vitest for testing. To run tests, use the following commands:\n\n**Run all tests:**\n\n```bash\npnpm test\n```\n\n**Run tests in watch mode:**\n\n```bash\npnpm test:watch\n```\n\n### Linting and Code Formatting\n\nTo ensure code consistency, we use ESLint and Prettier. Run these before\ncommitting your changes:\n\n**To lint your code:**\n\n```bash\npnpm lint:fix\n```\n\n**To format your code:**\n\n```bash\npnpm format\n```\n\n### Creating a Pull Request\n\nOnce you've made your changes:\n\n1. Fork the repository.\n2. Create a new branch for your changes.\n3. Commit your changes and push them to your fork.\n4. Open a pull request against the `master` branch of the\n   `Programmer-Network/yail` repository.\n\nPlease provide a clear description of the changes in your pull request.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fprogrammer-network%2Fyail","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fprogrammer-network%2Fyail","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fprogrammer-network%2Fyail/lists"}