Skip to main content

Contributing Guide

How to Report Issues​

If you encounter a bug, inconsistency, or any problem while using Qbit Design, follow these steps to report it:

  1. Identify and document the issue: Reproduce the issue and collect relevant details such as error messages, screenshots, and steps to replicate the problem.
  2. Visit the official issues page: Visit the official issues page or the bug report section on the website.
  3. Submit the issue: Click on the "New Issue" button and provide the following details:
    • Issue title: A concise summary of the problem.
    • Description: A detailed explanation of the issue, including steps to reproduce, expected behavior, and actual behavior.
    • Attachments: Upload any screenshots, logs, or other files to support your report.
  4. Confirmation: You will receive a confirmation email within seven days acknowledging your report.
  5. Resolution: The Qbit team will review your issue and notify you once it has been resolved or if additional information is needed.

Proposing a Change​

We welcome suggestions and improvements to make Qbit Design even better. To propose a change:

  1. Analyze Your Idea: Clearly define your proposed change, including its purpose, benefits, and any potential impact on existing features.
  2. Open a Discussion: Start a discussion by creating a post in the "Discussions" tab of the Qbit GitHub Repository.
  3. Draft a Proposal: Once your idea gains support, draft a detailed proposal, including:
    • The problem your change addresses.
    • How your change improves the library.
    • Any implementation details or examples.
  4. Submit the Proposal: Create a new issue titled "Proposal: [Your Idea]" and attach your detailed proposal.
  5. Review Process: The Qbit team will evaluate your proposal, and you’ll receive updates on its status.

Pull Requests​

We sincerely appreciate your contributions to Qbit Design! Your efforts help improve the framework, making it more efficient, user-friendly, and robust for developers worldwide. Whether you're fixing bugs, enhancing features, or improving documentation, every contribution plays a vital role in the project's success. To ensure a seamless collaboration, please follow these steps when submitting a pull request (PR):

  1. Fork the Repository: Go to the Qbit GitHub Repository and click the "Fork" button to create a copy under your account.

  2. Clone the Repository:

    git clone https://github.com/your-username/qbit.git

  3. Install Dependencies and Run Commands:

    # Install dependencies
    pnpm install

    # Run development server
    pnpm dev

    # Run tests
    pnpm test

    # Run Storybook
    pnpm storybook

    # Build project
    pnpm build

  4. Folder structure for creating a new element or skin:

    Project file
    ├── src
    │   └── skins
    │       ├── default skins
    │       │    └── element skins folder
    │       │         └── element skins
    │       └── optional skin
    │            └── element skins folder
    │                 ├── other skins for the element
    │                 ├── other skins for the element

  5. Commit and Push Considerations:

    • Follow Conventional Commits
    • Ensure test cases have a pass rate above 70%
    • Use the branch naming format: feature/ACEL-1234/feature-branch
    • Husky & ESLint will validate code before pushing
    • Install required extensions on your VS Code: Prettier, SonarQube, NPM Intellisense, GitLens, Git Graph.
    • Submit pull requests to the dev branch
    • Engage in GitHub conversations for reviews
    • Successfully merged branches will be deleted

Development Workflow​

Qbit Design is an easy-to-implement element library with a logical and design-separated architecture. Follow these steps to integrate it:

  1. Install Qbit:

    pnpm install qbit

  2. Import the Required Element:

    import Element from '@qbit/Element';

  3. Use the Element in Your Component:


    # creating a sample function for pass in onclick props


    # creating a sample function for pass in onclick props

    const SampleFunction = () => {
        alert('It’s done');
    }

    <div>
        <QbitElement renderer={ElementSkin} onClick={SampleFunction} props={props} />
    </div>

  4. Apply Skins:

    import CustomSkin from '@skins/designedSkin';
    import QbitSkin from '@qbit/defaultSkins';

    <Element renderers={{ renderer: QbitSkin, childRenderer: CustomSkin }}>
        <Children props={props} />
    </Element>

  5. Run the Project:

    pnpm dev

Development Tools​

Supported Browsers for Testing​