Contribution

Pohon UI thrives thanks to its incredible community ❤️. We welcome all contributions through bug reports, pull requests, and feedback to help make this library even better.

AI assistance

We provide contributing guidelines through AGENTS.md for AI assistants to help you contribute to Pohon UI. It is automatically picked up by all AI coding agents and guides through component structure, theming patterns, testing conventions, and documentation guidelines.

Project structure

Here's an overview of the key directories and files in the Pohon UI project structure:

Documentation

The documentation lives in its own repository, vinicunca/docs, a Nuxt app using @nuxt/content to generate pages from Markdown files. It hosts the docs of every Vinicunca package, with Pohon UI under content/pohon. See the Nuxt Content documentation for details on how it works. Here's a breakdown of its structure:

├── app/
│   ├── assets/
│   ├── components/
│   │   └── content/
│   │       └── examples   # Components used in documentation as examples
│   ├── composables/
│   └── ...
└── content/
    ├── pohon/
    │   ├── 1.getting-started
    │   ├── 2.components   # Components documentation
    │   ├── 3.composables
    │   └── 4.typography
    └── ...                # Other Vinicunca packages (akar, unocss-variants...)

To work on the documentation, clone vinicunca/docs next to your pohon clone, install its dependencies and run pnpm dev.

Module

The module code resides in the src folder. Here's a breakdown of its structure:

├── plugins/
├── runtime/
│   ├── components/        # Where all the components are located
│   │   ├── Accordion.vue
│   │   ├── Alert.vue
│   │   └── ...
│   ├── composables/
│   ├── locale/
│   ├── plugins/
│   ├── types/
│   ├── utils/
│   └── vue/
│       ├── components/
│       └── plugins/
├── theme/                 # This where the theme for each component is located
│   ├── accordion.ts       # Theme for Accordion component
│   ├── alert.ts
│   └── ...
├── utils/
└── module.ts

Submit a Pull Request (PR)

Before you start, check if there's an existing issue describing the problem or feature request you're working on. If there is, please leave a comment on the issue to let us know you're working on it.

If there isn't, open a new issue to discuss the problem or feature.

Local development

To begin local development, follow these steps:

git clone https://github.com/vinicunca/pohon.git

corepack enable

pnpm install

pnpm run dev:prepare

pnpm run dev

pnpm run dev:vue

IDE Setup

We recommend using VSCode alongside the ESLint extension. You can enable auto-fix and formatting when saving your code. Here's how:

{
  "editor.codeActionsOnSave": {
    "source.fixAll": "never",
    "source.fixAll.eslint": "explicit"
  },
  "prettier.enable": false
}

Linting

You can use the lint command to check for linting errors:

pnpm run lint # check for linting errors
pnpm run lint:fix # fix linting errors

Type checking

We use TypeScript for type checking. You can use the typecheck command to check for type errors:

pnpm run typecheck

Testing

Before submitting a PR, ensure that you run the tests:

pnpm run test

If you add or update a locale, check it stays consistent with the others (message keys, placeholders, name and direction) by running:

pnpm test locale --run

Commit conventions

We use Conventional Commits for commit messages, which allows a changelog to be auto-generated based on the commits. Please read the guide through if you aren't familiar with it already.

• Use fix and feat for code changes that affect functionality or logic
• Use docs for documentation changes and chore for maintenance tasks

Making a Pull Request

• Follow along the instructions provided when creating a PR
• Ensure your PR's title adheres to the Conventional Commits since it will be used once the code is merged.
• Multiple commits are fine; no need to rebase or force push. We'll use Squash and Merge when merging.
• Ensure lint, typecheck and tests work before submitting the PR. Avoid making unrelated changes.

We'll review it promptly. If assigned to a maintainer, they'll review it carefully. Ignore the red text; it's for tracking purposes.

Thanks

Thank you again for being interested in this project! You are awesome! ❤️