How to Contribute

We are thrilled that you are interested in contributing to Ignix UI! Your contributions are invaluable in making this project better for everyone. This guide will walk you through the entire process, from setting up your environment to submitting a high-quality pull request.

Table of Contents

• Code of Conduct
• Finding Something to Work On
• Contribution Workflow
  • 1. Setup Your Environment
  • 2. Create a Branch
  • 3. Develop in Storybook (The Fun Part!)
  • 4. Register Your Component
  • 5. Add Documentation
  • 6. Write Unit Tests
  • 7. Commit and Push Your Changes
  • 8. Create a Pull Request
• Code Review Process
• Licensing

---

Code of Conduct

We are committed to fostering a welcoming and inclusive community. Before contributing, please take a moment to review our Code of Conduct.

---

Finding Something to Work On

1. Explore the Issues: Head over to our issue tracker. This is the best place to find tasks.
2. Good First Issues: Look for issues tagged with good first issue or help wanted. These are specifically prepared for new contributors.
3. Propose a New Feature: If you have an idea for a new component or feature, please open an issue first. This allows us to discuss the feature and make sure it aligns with the project's goals before you start working on it.

---

Contribution Workflow

1. Setup Your Environment

First, get the project running on your local machine.

• Fork the repository: Click the "Fork" button at the top-right of the Ignix UI repository.
• Clone your forked repository:

  git clone https://github.com/your-username/ignix-ui.git
  cd ignix-ui
• Install dependencies: This project uses pnpm as its package manager.

  pnpm install

2. Create a Branch

Create a new branch for your changes. A descriptive name helps us understand what you're working on.

• For new features: feature/short-feature-description
• For bug fixes: fix/short-bug-description

# Example for a new feature
git checkout -b feature/add-avatar-component

# Example for a bug fix
git checkout -b fix/button-alignment-issue

3. Develop in Storybook (The Fun Part!)

We use Storybook as our primary development environment. It allows you to build and test components in complete isolation, which is faster and more efficient.

• Create Component Files: Navigate to apps/storybook/src/components/ and create a new directory for your component (e.g., button). Inside, create your component file (e.g., Button.tsx).

• Create a Story File: In the same directory, create a story file named [component-name].stories.tsx (e.g., Button.stories.tsx). This file will contain different visual test cases for your component.

  Example button.stories.tsx:

   import { Button } from '.';
  
  export default {
    title: 'Components/Button',
    component: Button,
    parameters: {
      layout: 'centered',
    },
    tags: ['autodocs'],
    argTypes: {
      variant: {
        control: { type: 'select' },
        options: ['default', 'destructive', 'outline', 'secondary', 'ghost', 'link', 'subtle', 'elevated', 'glass', 'neon', 'pill', 'none'],
      },
      size: {
        control: { type: 'select' },
        options: ['xs', 'sm', 'md', 'lg', 'xl', 'icon'],
      },
    },
  };
  
  export const Default = {
    args: {
      children: 'Click Me',
      variant: 'default',
      size: 'md',
    },
  };
  
  export const Success = {
    args: {
      children: 'Success',
      variant: 'success',
    },
  };
  
  export const Outline = {
    args: {
      children: 'Cancel',
      variant: 'outline',
    },
  };

• Launch Storybook: Run the Storybook server from the root directory.

  pnpm storybook

  This will open a new browser tab. You can now build, view, and test your component in real-time!

4. Register Your Component

Once your component is built and works correctly in Storybook, register it so it can be used by others.

• Open packages/registry/components/ and create a new directory for your component (e.g., button).
• Open packages/registry/registry.json.
• Add a new entry for your component, following the structure of the existing components.

5. Add Documentation

Now that your component is complete, add documentation for it.

• Create a new MDX file in apps/docs/docs/components/ (e.g., button.mdx).
• Describe what your component does and provide usage examples.
• Add a link to your new documentation page in the sidebar by editing the apps/docs/sidebars.ts file.

6. Write Unit Tests

We require tests for all new features to maintain code quality.

• Add test cases for your component in a file located alongside the component source code.
• Ensure all tests pass before submitting your changes.

  pnpm test

7. Commit and Push Your Changes

• Stage and Commit: Add your changes and write a clear, descriptive commit message that follows the Conventional Commits specification.

  git add .
  git commit -m "feat(component): add new avatar component with storybook and tests"
• Push to Your Fork:

  git push origin feature/add-avatar-component

8. Create a Pull Request

• Go to your forked repository on GitHub and click "Compare & pull request".
• Set the base branch to development.
• Fill out the Pull Request (PR) template with all the required information.
• Click "Create pull request" to submit it for review.

---

Code Review Process

• Once your PR is submitted, one or more maintainers will review it.
• If changes are requested, simply make the updates on your branch and push them. Your PR will update automatically.
• Once the PR is approved, a maintainer will merge it. Congratulations! 🎉

---

Licensing

By contributing to Ignix UI, you agree that your contributions will be licensed under the project's MIT License.