✍️CONTRIBUTING.md

This is a basic contribution guide for the project.

About

Welcome! We really appreciate that you checked out the contributing guide. This means you are thinking of contributing to this project. Well, you are at the right place.

  • If you are a beginner to Git/GitHub and Open Source, this project serves as a great start for you to learn.

Project Structure

Before you start contributing to any project it is important to understand the folder structure for that project. For this project, the details are as follows:

  1. .github/workflows - This folder is related to CI/CD to this repository. When there is a new push on the main branch, it automatically publishes the package to the NPM registry.

  2. Components - This folder contains all the components and their related code present in the Hartan library.

  3. Hooks - This folder contains all the custom hooks inside the Hartan library.

  4. images - This folder contains all the custom hooks inside the Hartan library.

  5. index.js - The entry point to this project, containing import and exports.

Installation and Making Changes

For installation and local setup, follow these steps:

  • Fork this repository.

  • Clone the forked repository.

    git clone https://github.com/your_username/react-hartan
  • Run the following command to open the cloned project directory and install the dependencies.

    cd project_folder_name
    npm install
  • Create a test folder inside the cloned project directory to test out your components locally.

    mkdir your_test_folder_name
  • Now set up a react project inside your test folder using tool of your choice (we use Vite) and follow the instructions accordingly.

    cd your_test_folder_name
    npm create vite@latest 
  • Let's get back to our root folder from test folder.

    cd ..
  • Before you start making you changes, remember to check out the issues page. If you find a relevant issue which you can solve, go ahead. If you do not find a relevant issue and have a new one in mind, just create one and start working on it.

  • Now, create a working branch to start making your changes.

     git checkout -b your-new-branch-name
  • Commit your changes. Make sure to add a descriptive commit message.

    git commit -m "your_message"
  • When you're finished with the changes, create a pull request, also known as a PR. Be sure to describe in detail what all changes were made and try to reference to the issue as well.

  • After the review and required changes, if any asked for, your PR will be merged.

  • Congratulations!! 🎉🎉 You and your code are now part of the Hartan Library.

Adding and Modifying Components


Add New Components

  • Create a new folder inside the Components folder. Your folder name resembles the name of the component.

  • Create two files inside your created folder, namely your_component_name.jsx and your_component_name.module.css, the component code and it's styling respectively.

  • Remember to make your component responsive as well and for preview you can use your test folder to check out your component.

  • After you are happy with your component, open the index.js file and add your component there in alphabetical order.

Modify Existing Components

  • All the components reside in the Components folder.

  • If you want to modify some existing code, just open a new issue and describe the changes you are thinking, and we will discuss over it.

  • If approved, you can move further to make changes otherwise we will drop the idea.

Adding and Modifying Hooks


Add New Hooks

  • All the hooks are inside the Hooks folder, but only some of them are for public use and others are only for internal use.

  • Create a new file with .js extension inside the Hooks folder. Your file name should match the name of your component.

  • If this is a public hook, then remember to add it in the index.js file as you did with you component.

Modify Existing Hooks

  • All the hooks reside in the Hooks folder.

  • If you want to modify some existing code, just open a new issue and describe the changes you are thinking, and we will discuss over it.

  • If approved, you can move further to make changes otherwise we will drop the idea.

Anything Else


  • For anything else, follow the same process as above. Open a new issue and let's discuss.

Notes

  • If you are a beginner, I would recommend you to use VS Code. Also, see this.

  • Try to keep your codebase in sync with main codebase to avoid code conflicts.

  • Do not make changes directly to the main branch. Always create a new branch and then start making changes.

    • For directly publishing a local branch to a remote Git repository from terminal, use:

     git push -u origin <branch>
  • Open the Pull Request or PR from the published branch.

Last updated