chore!: add conventional commits linter and husky

.github/workflows/commit-message-lint.yml

@@ -0,0 +1,26 @@
+name: Lint Commit Messages
+
+on: 
+  push:
+  pull_request:
+
+jobs:
+  commitlint:
+    runs-on: ubuntu-latest
+
+    steps:
+    - name: Check out the repository
+      uses: actions/checkout@v2
+      with:
+        fetch-depth: 0  # Ensures commit history is pulled
+
+    - name: Install Node.js
+      uses: actions/setup-node@v2
+      with:
+        node-version: 'lts/*'
+
+    - name: Install Dependencies
+      run: yarn install
+
+    - name: Lint Commit Messages
+      run: npx commitlint --from=HEAD~1 --to=HEAD --verbose

.husky/commit-msg

@@ -0,0 +1,4 @@
+#!/usr/bin/env sh
+. "$(dirname -- "$0")/_/husky.sh"
+
+npx --no-install commitlint --edit $1

CHANGELOG.md

@@ -16,8 +16,11 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Changed
 
+- Enforced Conventional Commits for commit messages (#327). This is a BREAKING CHANGE because any commit messages that do not follow the Conventional Commits format will not be accepted by the repository. Please see the [Conventional Commits](https://www.conventionalcommits.org/en/v1.0.0/) website for more information.
+
 ### Chores
 
+- Added new sections and examples of how to use the Conventional Commits format to the CONTRIBUTING file (#327).
 - Added instructions on how to take a screenshot in in GitHub bug report and pull request templates (#307).
 - Commented out the instructions on GitHub templates so that users can keep it while adding new content (#308).
 - Added lineplot, stacked bar, dodged bar, and normalized dodge bar info to the README (#310).

CONTRIBUTING.md

@@ -26,7 +26,7 @@ To get started, please follow these steps:
 
 1. Open the project in VS Code.
 
-1. Install all the recommended extensions.
+1. Install all the recommended VSCode extensions.
 
 1. Install `npm` if you don't have it already.
 
@@ -42,6 +42,8 @@ npm install -g yarn
 yarn install
 ```
 
+1. Run `npx husky install` to activate the Git hooks for commit message verification.
+
 1. Make changes.
 
 1. Run `yarn format` to format the code.
@@ -56,7 +58,7 @@ yarn install
 
 1. Test the new features locally.
 
-1. Commit your changes and push them to your forked repository.
+1. Commit your changes and push them to your forked repository (please read [Committing Your Changes](#committing-your-changes) section to learn more about the conventional commits).
 
 1. Create a pull request to the main repository.
 
@@ -72,18 +74,65 @@ Please follow these guidelines when contributing to the project:
 - Write tests for new features and bug fixes.
 - Update the documentation as needed in `CHANGELOG.md`.
 
-## Code Style and Formatting
+### Code Style and Formatting
 
 We use ESLint to enforce a consistent code style and formatting. Please run `yarn lint` before committing your changes to ensure that your code meets the standards.
 
-## Tests
+### Tests
 
 We use Jest for unit testing. Please run `yarn test` before committing your changes to ensure that your changes do not break any existing tests.
 
-## Documentation
+### Documentation
 
 We use jsdoc for documentation. Please update the relevant documentation in js files when making changes to the project.
 
+### Committing Your Changes
+
+We use [conventional commits](https://www.conventionalcommits.org/) to maintain a clear and consistent commit history. Here's how to write a conventional commit message:
+
+#### Format
+
+Each commit message should follow this format: `<type>[optional scope]: <description>`
+
+- **Types**: Describes the type of change you're making. Common types include:
+  - `feat`: Introduces a new feature.
+  - `fix`: Fixes a bug.
+  - `docs`: Documentation changes.
+  - `style`: Code style changes (formatting, missing semi-colons, etc. – does not affect code logic).
+  - `refactor`: Code changes that neither fixes a bug nor adds a feature.
+  - `perf`: Performance improvements.
+  - `test`: Adding or correcting tests.
+  - `chore`: Routine tasks, maintenance, and other non-production changes.
+  - `ci`: Changes to our CI configuration files and scripts, specifically for GitHub Actions.
+- **Scope**: (Optional) A word or two describing where the change happens, like `login`, `signup`, etc.
+- **Description**: A succinct description of the change in lowercase.
+
+#### Denoting a Breaking Change
+
+To denote a breaking change, include an exclamation mark `!` before the colon.
+  - Example: `feat(database)!: remove deprecated methods`
+
+#### Mentioning Issue Numbers
+
+If your commit addresses a specific issue, mention the issue number at the end of the commit message.
+  - Example: `fix(file-upload): correct MIME type handling, closes #123`
+
+#### Examples
+
+- `feat(authentication): add JWT token support`
+- `fix(api): resolve data retrieval issue`
+- `docs(readme): update installation instructions`
+- `style(header): adjust layout spacing`
+- `refactor(user-profile): streamline user data processing`
+- `perf(image-loading): optimize image caching`
+- `chore(dependencies): update lodash to 4.17.21`
+- `test(login): add additional unit tests for password reset`
+- `ci(github-actions): update build and deployment workflow`
+
+#### Commit Message Linting
+
+When you commit your changes, Husky and Commitlint will automatically check your commit messages. If your message does not meet the conventional commit format, the commit will be rejected, and you'll need to modify the message.
+
 ## Code of Conduct
 
 Please note that this project is released with a Contributor Code of Conduct. By participating in this project you agree to abide by its terms.

commitlint.config.js

@@ -0,0 +1,3 @@
+module.exports = {
+  extends: ['@commitlint/config-conventional'],
+};

package.json

@@ -4,11 +4,13 @@
   "description": "maidr: Multimodal Access and Interactive Data Representation. maidr is a system for non-visual access and control of statistical charts. It aims to provide an inclusive experience for users with visual impairments by offering multiple modes of interaction: braille, text, and sonification. This comprehensive  approach enhances the accessibility of data visualization and encourages a multi-model exploration on visualization. Check out the current build: [MAIDR Demo](https://uiuc-ischool-accessible-computing-lab.github.io/maidr/user_study_pilot/intro.html).",
   "main": "dist/maidr.js",
   "scripts": {
+    "prepare": "husky install",
     "build": "gulp",
     "test": "jest",
     "lint": "eslint src/**/*.{js,jsx}",
     "format": "prettier --write .",
-    "docs": "jsdoc -c jsdoc.json"
+    "docs": "jsdoc -c jsdoc.json",
+    "commitlint": "commitlint"
   },
   "files": [
     "dist/*"
@@ -25,6 +27,9 @@
   },
   "homepage": "https://github.com/uiuc-ischool-accessible-computing-lab/maidr#readme",
   "devDependencies": {
+    "@commitlint/cli": "^18.4.3",
+    "@commitlint/config-conventional": "^18.4.3",
+    "commitlint": "18.4.3",
     "eslint": "^8.43.0",
     "eslint-config-prettier": "^8.8.0",
     "eslint-plugin-prettier": "^4.2.1",
@@ -34,6 +39,7 @@
     "gulp-concat-css": "^3.1.0",
     "gulp-rename": "^2.0.0",
     "gulp-terser": "^2.1.0",
+    "husky": "^8.0.3",
     "jest": "^29.7.0",
     "jest-environment-jsdom": "^29.7.0",
     "jsdoc": "^4.0.2",