Skip to main content

Third-Party libraries

This document provides an overview of the third-party libraries and tools integrated into our project in-depth. Each library and tool has been carefully selected to optimize development efficiency, enhance testing reliability, and maintain consistent code quality. Below is a breakdown of functionalities and how they contribute to the development workflow.

Products Used​

1. Vitest​

We use Vitest as our primary testing framework. Vitest is a modern and fast test runner specifically designed for frontend applications, making it an excellent choice for our project.

Key Features:​

  • Blazing-fast test execution: Vitest offers near-instant test results with hot module replacement (HMR) support.
  • Seamless TypeScript support: Ensures type safety when writing and running tests.
  • Rich built-in API: Includes utilities for mocking, spies, and assertions.
  • Watch mode: Runs tests automatically when changes are detected.

Running Tests​

To execute tests in this project, use the following command:

npm run test

For a deeper dive into its functionalities, refer to the Vitest documentation.

2. ESLint​

ESLint is utilized to enforce coding standards, identify potential issues, and maintain code consistency across the project.

Key Benefits:​

  • Automated linting: Detects and fixes code inconsistencies.
  • Customizable ruleset: Supports TypeScript and industry best practices.
  • Prevention of syntax and logic errors: Ensures high-quality code before merging.

Running ESLint​

To manually run ESLint and check for issues, use:

npm run lint

For detailed configurations, refer to our .eslintrc file.

3. Husky​

Husky is used to automate pre-commit and pre-push hooks, ensuring that all code follows predefined standards before being committed.

Why We Use Husky:​

  • Prevents broken code from entering the repository.
  • Runs linting and testing before commits.
  • Enhances development workflow by catching issues early.

Example:​

Before a commit is finalized, Husky can run:

  • ESLint validation on staged files.
  • Tests to verify functionality.

For setup details, check our husky.config.js file & Husky docs.

4. Conventional Commits​

We follow the Conventional Commits specification to maintain a clear, structured, and meaningful commit history.

Commit Message Format:​

type(scope): description

[optional body]
[optional footer]
  • Type: Represents the category of the commit (feat, fix, docs, chore, etc.).
  • Scope: (Optional) Specifies the affected module or functionality.
  • Description: A concise summary of the change.

Example Commit Messages:​

feat(auth): add user login functionality
fix(api): resolve timeout issue in data fetching

This structured approach enhances clarity, integrates well with semantic versioning, and simplifies changelog generation.

For more details, refer to the Conventional Commits specification.

5. Storybook​

Storybook is an interactive UI development environment that allows us to build, test, and document components in isolation.

Why Use Storybook?​

  • Component exploration: Developers can interactively browse and test components.
  • Live documentation: Displays supported props, variations, and usage guidelines.
  • Enhanced collaboration: Team members and stakeholders can review components easily.

Running Storybook​

To start Storybook locally, run:

npm run storybook

For further details, check the Storybook documentation.

6. TypeScript​

Our project is fully developed using TypeScript, which enhances maintainability and reduces runtime errors.

Key Benefits:​

  • Static typing: Detects issues at compile time rather than runtime.
  • Improved IntelliSense: Enhances code navigation and autocompletion.
  • Refactoring support: Simplifies changes across large codebases.

Running TypeScript Compilation​

To compile the project and check for type errors, use:

npm run build

Configurations for TypeScript can be found in the tsconfig.json file.

7. Tailwind CSS​

Tailwind CSS is our preferred styling framework, offering a utility-first approach to designing UI components efficiently.

Key Advantages:​

  • Rapid development: Avoids writing custom CSS by utilizing predefined utility classes.
  • Highly customizable: Allows modification of colors, spacing, and typography through tailwind.config.js.
  • Responsive by default: Built-in utilities for handling different screen sizes.

Using Tailwind​

To generate the necessary styles, run:

npm run build:css

For more styling options and advanced features, check the Tailwind CSS documentation.

Summary​

By leveraging these tools and libraries, we ensure high code quality, maintainable workflows, and an efficient development experience. Each of these third-party libraries plays a crucial role in streamlining Qbit Design development and maintenance.

For any questions or issues regarding these libraries, refer to their official documentation or or reach out to our community