diff --git a/docs/content/1.getting-started/6.contributing.md b/docs/content/1.getting-started/6.contributing.md new file mode 100644 index 0000000000..7b5bf1cbeb --- /dev/null +++ b/docs/content/1.getting-started/6.contributing.md @@ -0,0 +1,188 @@ +--- +title: Contributing +description: Learn how to contribute to Nuxt UI. +--- + +## Overview + +Nuxt UI thrives thanks to its fantastic community ❤️, which contributes by submitting issues, creating pull requests, and offering valuable feedback. + +Before reporting a bug or reporting a feature, please make sure that you have read through our documentation and existing [issues](https://github.com/nuxt/ui/issues). + +## Submitting a Pull Request + +### 1. 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. + +### 2. Local Development Setup + +To begin local development, follow these steps: + +1. Clone the `nuxt/ui` repository to your local machine: + +```sh +git clone https://github.com/nuxt/ui.git +``` + +2. Install dependencies and prepare the project: + +```sh +pnpm install +pnpm run dev:prepare +``` + +3. To configure your local development environment, use the following commands: + +- To work on the **documentation** in the `docs` folder, run: + +```sh +pnpm run dev +``` + +- To test the components located in the `playground` folder within `app.vue`, run: + +```sh +pnpm run play +``` + +#### IDE Setup + +We recommend using VS Code along with the ESLint extension. You can enable auto-fix and formatting when saving your code. Here's how: + +```json +{ + "editor.codeActionsOnSave": { + "source.fixAll": false, + "source.fixAll.eslint": true + } +} +``` + +You can also use the `lint` command: + +```sh +pnpm run lint # check for linting errors +pnpm run lint:fix # fix linting errors +``` + +#### No Prettier + +Since ESLint is already configured to format the code, there's no need for duplicating functionality with Prettier. + +If you have Prettier installed in your editor, we recommend disabling it to avoid conflicts. + +#### Type Checking + +We use TypeScript for type checking. You can use the `typecheck` command to check for type errors: + +```sh +pnpm run typecheck +``` + +### 3. Commit Conventions + +Use Conventional Commits for commit messages with the following format: + +``` +(optional scope): + +[optional body] + +[optional footer(s)] +``` + +#### Types + +- `feat` : for new features. +- `fix` : for bug fixes. +- `refactor` : for code changes that are neither bug fixes nor new features. +- `perf` : for code refactoring that improves performance. +- `test` : for code related to automatic testing. +- `style` : for refactoring related to code style (not for CSS). +- `docs` : for changes related to documentation. +- `chore` : for anything else. + +#### Scope + +Where the change occurred (e.g., `Table`, `Alert`, `Accordion`, etc.). + +#### Description + +A summary of the changes made. + +#### Examples + +``` +feat(Alert): new component +chore(Table): improve accessibility +docs: migrate to @nuxt/ui-pro +``` + +### 4. Making the Pull Request + +- Follow the guide for creating a pull request and ensure your PR's title adheres to the Commit Convention. Mention any related issues in the PR description. + +- Multiple commits are fine; no need to rebase or force push. We'll use `Squash and Merge` when merging. + +- Ensure linting and make tests manually before submitting the PR. Avoid making unrelated changes. + +### 5. After You've Made a Pull Request + +We'll review it promptly. If assigned to a maintainer, they'll review it carefully. Ignore the red text; it's for tracking purposes. + +## Project Structure + +In this project, you'll find a variety of folders and files that serve different purposes. Here's an overview of the main ones: + +- **Documentation - `docs`** : + +The documentation is located in the `docs` folder. It's a Nuxt app that uses the `@nuxt/content` module to generate the documentation pages from Markdown files. Here's a breakdown of its structure: + +``` +docs/ +├── components/ +│ ├── examples/ # Components used in documentation as examples +│ └── themes/ # Components used in the examples page in the theming section +├── content/ # Documentation, separated into categories according to component types +│ ├── 1.getting-started/ +│ │ ├── 1.index.md +│ │ ├── 2.installation.md +│ │ ├── ... etc +│ ├── 2.elements/ # The category of components, which are elements +│ │ ├── 1.accordion.md # Docs for a single component (i.e., accordion) +│ │ ├── 2.alert.md +│ │ ├── ... etc +└── ... etc +``` + +- **Components - `src`** : + +The components are located in the `src` folder. It's separated into categories according to component types. Here's a breakdown of its structure: + +``` +src/ +├── runtime/ +│ ├── composables/ # Composable functions used in components +│ ├── components/ # Components folder, separated into categories according to component types +│ │ ├── data/ # The category of components, which are data related +│ │ │ ├── table.vue/ # Table component +│ │ │ ├── elements/ # Elements category +│ │ │ │ ├── ...etc/ +│ │ │ └── ... etc/ +│ │ ├── plugins/ # Plugins used in components +│ │ ├── utils/ # Utility functions used on the components page (e.g., lodash) +│ │ ├── types/ # Types used in components +│ │ │ ├── accordion.d.ts/ # [componentName].d.ts type used for single component +│ │ │ ├── avatar.d.ts/ +│ │ │ └── ... etc/ +│ │ ├── ui.config.ts/ # Configuration file used to apply styles to every component +├── colors.ts/ # Everything related to color functions (e.g., safelistByComponent, generateSafelist) +└── ... etc/ # Other files and folders +``` + +## Thanks + +Thank you again for being interested in this project! You are awesome! ❤️ diff --git a/docs/content/1.getting-started/6.roadmap.md b/docs/content/1.getting-started/7.roadmap.md similarity index 100% rename from docs/content/1.getting-started/6.roadmap.md rename to docs/content/1.getting-started/7.roadmap.md