feat: add pre-commit hooks using husky

Based on usage in
City-of-Helsinki/palvelutarjotin-ui@0d9089a

refs HCRC-187

Author: karisal-anders

.husky/.gitignore

@@ -0,0 +1 @@
+_

.husky/commit-msg

@@ -0,0 +1 @@
+npx --no-install commitlint --edit "$1"

.husky/pre-commit

@@ -0,0 +1,2 @@
+yarn doctoc . -u
+yarn lint-staged --relative

README.md

@@ -1,5 +1,39 @@
 # React Helsinki Headless CMS
 
+React UI component library to visualize [Headless CMS](https://github.com/City-of-Helsinki/headless-cms)
+data using [Helsinki Design System](https://github.com/City-of-Helsinki/helsinki-design-system).
+
+<!-- START doctoc generated TOC please keep comment here to allow auto update -->
+<!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE -->
+**Table of Contents**
+
+- [Introduction](#introduction)
+  - [The known clients that are using this library](#the-known-clients-that-are-using-this-library)
+- [Installation](#installation)
+- [Development](#development)
+  - [When to develop](#when-to-develop)
+  - [Available scripts](#available-scripts)
+  - [Development environments](#development-environments)
+  - [Module structure](#module-structure)
+  - [Husky Git Hooks](#husky-git-hooks)
+    - [Pre-commit Hook](#pre-commit-hook)
+    - [Commit-msg Hook](#commit-msg-hook)
+  - [CI](#ci)
+  - [CD](#cd)
+  - [Storybook](#storybook)
+  - [Apollo](#apollo)
+  - [NextJS](#nextjs)
+  - [Use as a application dependency](#use-as-a-application-dependency)
+  - [Build](#build)
+  - [Releasing new versions](#releasing-new-versions)
+- [Testing](#testing)
+  - [Testing in IDE terminal](#testing-in-ide-terminal)
+- [Usage](#usage)
+- [Publishing new versions](#publishing-new-versions)
+- [Known issues](#known-issues)
+
+<!-- END doctoc generated TOC please keep comment here to allow auto update -->
+
 ## Introduction
 
 React Helsinki Headless CMS - is a highly customized component library based on [HDS](https://github.com/City-of-Helsinki/helsinki-design-system). It is designed for Helsinki City Web applications which are using preconfigured Wordpress Headless CMS environments (compatible with the library). This library is a set of unified visual components for Pages, Artciles, Artcicle Archives which provide:
@@ -81,6 +115,36 @@ This library consists of three modules.
 - Apollo module that wraps core module components with logic that is able to fetch data with the help of an `ApolloClient` instance.
 - Nextjs module that provides utilities when working with `Nextjs` and `Apollo`.
 
+### Husky Git Hooks
+
+This project uses [Husky](https://typicode.github.io/husky/#/) to manage Git hooks. Husky is configured to run specific scripts before committing changes to ensure code quality and consistency.
+
+#### Pre-commit Hook
+
+The pre-commit hook is configured to run the following commands:
+
+```sh
+yarn doctoc .
+yarn lint-staged --relative
+```
+
+- `yarn doctoc .`: This command updates the table of contents in your markdown files.
+- `yarn lint-staged --relative`: This command runs linting on staged files to ensure they meet the project's coding standards. The lint-staged configuration can be found from [package.json](./package.json).
+  - Using `--relative` flag to reduce command line length,
+    as the combined length of all the absolute paths for a large commit can get quite long
+
+> NOTE: `doctoc` and `husky` does not work seamlessly together, since the `doctoc` does update the TOCs of the markdown files, but does not reject the pre-commit hook execution, and only leaves the refactored files as unstaged in Git.
+
+#### Commit-msg Hook
+
+The commit-msg hook is configured to run the following command:
+
+```sh
+npx --no-install commitlint --edit "$1"
+```
+
+- `npx --no-install commitlint --edit "$1"`: This command uses [Commitlint](https://commitlint.js.org/#/) to lint commit messages based on the project's commit message conventions. This repo follows the [Conventional Commits](#conventional-commits).
+
 ### CI
 
 Checks

commitlint.config.mjs

@@ -0,0 +1,27 @@
+export default {
+  extends: ['@commitlint/config-conventional'],
+  ignores: [(message) => message.includes('Signed-off-by: dependabot[bot]')],
+  rules: {
+    'header-max-length': [2, 'always', 72],
+    'body-max-line-length': [2, 'always', 72],
+    'body-leading-blank': [2, 'always'],
+    'type-enum': [
+      2,
+      'always',
+      [
+        'build',
+        'chore',
+        'ci',
+        'deps',
+        'docs',
+        'feat',
+        'fix',
+        'perf',
+        'refactor',
+        'revert',
+        'style',
+        'test',
+      ],
+    ],
+  },
+};

package.json

@@ -6,12 +6,14 @@
   "module": "index.js",
   "types": "index.d.ts",
   "scripts": {
+    "prepare": "husky",
     "dev": "yarn storybook",
     "dev:no-open": "yarn storybook --no-open",
     "typecheck": "tsc --project ./tsconfig.json --noEmit",
     "lint": "yarn eslint \"src/**/*.{ts,tsx}\" && yarn prettier ./src -c",
     "lint-fix": "yarn eslint \"src/**/*.{ts,tsx}\" --fix && yarn prettier ./src -w",
     "test": "jest",
+    "test:staged": "jest --findRelatedTests --passWithNoTests",
     "test-storybook": "test-storybook",
     "test:coverage": "jest --coverage",
     "build": "rollup -c --bundleConfigAsCjs",
@@ -66,6 +68,8 @@
     "@babel/preset-react": "^7.25.9",
     "@babel/preset-typescript": "^7.26.0",
     "@chromatic-com/storybook": "^4.1.2",
+    "@commitlint/cli": "^20.2.0",
+    "@commitlint/config-conventional": "^20.2.0",
     "@graphql-codegen/cli": "^5.0.3",
     "@graphql-codegen/typescript": "^4.1.1",
     "@graphql-codegen/typescript-operations": "^4.3.1",
@@ -110,10 +114,12 @@
     "git-rev-sync": "^3.0.2",
     "graphql": "^16.9.0",
     "hds-react": "4.8.1",
+    "husky": "^9.1.7",
     "identity-obj-proxy": "^3.0.0",
     "jest": "^29.7.0",
     "jest-axe": "^9.0.0",
     "jest-fetch-mock": "^3.0.3",
+    "lint-staged": "^16.2.7",
     "msw-storybook-addon": "^2.0.6",
     "postcss": "^8.4.49",
     "postcss-scss": "^4.0.9",
@@ -140,6 +146,7 @@
   "dependencies": {
     "classnames": "^2.5.1",
     "date-fns": "^4.1.0",
+    "doctoc": "^2.2.1",
     "hds-design-tokens": "^4.8.1",
     "html-entities": "^2.5.2",
     "html-react-parser": "^4.2.9",
@@ -151,5 +158,12 @@
   },
   "msw": {
     "workerDirectory": "public"
+  },
+  "lint-staged": {
+    "src/**/*.{js,jsx,ts,tsx,cjs,mjs}": [
+      "eslint --fix",
+      "prettier --write",
+      "yarn test:staged"
+    ]
   }
-}
+}