chore(release tool): improve release toolchain (#225)

* chore(git hooks): install husky

* chore(lint): setup commitlint

* chore(commitizen): make rfd commitizen friendly

* docs(commitizen): add git commit guidelines

* chore(release tool): setup release-it

* docs(semver): mention we use semver in the contributing guide

* chore(renovate): make sure commit message follow conventional commit spec

* ci(commitlint): make sure to lint commit messages

.czrc

@@ -0,0 +1,3 @@
+{
+  "path": "@commitlint/cz-commitlint"
+}

.eslintignore

@@ -1,6 +1,7 @@
 # Generated files
 
 # https://github.com/eslint/eslint/issues/8429#issuecomment-355967308
+!.release-it.js
 !.storybook
 !.stylelintrc.js
 !**/*.eslintrc.js

.eslintrc.js

@@ -205,6 +205,7 @@ module.exports = {
         'a11y-audit-parse.js',
         'browser-test-harness.js',
         'babel.config.js',
+        'commitlint.config.js',
         'jest.config.js',
         'lighthouse.config.js',
         'rollup.config.js',

.github/workflows/commitlint.yml

@@ -0,0 +1,15 @@
+name: Lint Commit Messages
+on:
+  pull_request:
+  push:
+    branches:
+      - main
+
+jobs:
+  commitlint:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v2
+        with:
+          fetch-depth: 0
+      - uses: wagoid/commitlint-github-action@v4

.husky/commit-msg

@@ -0,0 +1,4 @@
+#!/bin/sh
+. "$(dirname "$0")/_/husky.sh"
+
+yarn commitlint --edit $1

.husky/prepare-commit-msg

@@ -0,0 +1,9 @@
+#!/bin/sh
+. "$(dirname "$0")/_/husky.sh"
+
+if [ "$SKIP_PREPARE_COMMIT_MSG" = "true" ]; then
+  echo "SKIP_PREPARE_COMMIT_MSG env variable is set to 'true', skipping prepare-commit-msg"
+  exit 0
+fi
+
+exec < /dev/tty && yarn cz --hook || true

.release-it.js

@@ -0,0 +1,84 @@
+/* eslint-disable no-template-curly-in-string */
+
+module.exports = {
+  git: {
+    commitMessage: 'chore: release ${version}',
+    tagName: 'v${version}',
+  },
+  npm: {
+    publish: true,
+  },
+  github: {
+    release: true,
+  },
+  plugins: {
+    '@release-it/conventional-changelog': {
+      infile: 'CHANGELOG.md',
+      preset: {
+        name: 'conventionalcommits',
+        types: [
+          {
+            type: 'chore',
+            section: 'Others 🔧',
+            hidden: false,
+          },
+          {
+            type: 'revert',
+            section: 'Reverts ◀',
+            hidden: false,
+          },
+          {
+            type: 'feat',
+            section: 'Features 🔥',
+            hidden: false,
+          },
+          {
+            type: 'fix',
+            section: 'Bug Fixes 🛠',
+            hidden: false,
+          },
+          {
+            type: 'improvement',
+            section: 'Feature Improvements 🛠',
+            hidden: false,
+          },
+          {
+            type: 'docs',
+            section: 'Docs 📃',
+            hidden: false,
+          },
+          {
+            type: 'style',
+            section: 'Styling 🎨',
+            hidden: false,
+          },
+          {
+            type: 'refactor',
+            section: 'Code Refactoring 🖌',
+            hidden: false,
+          },
+          {
+            type: 'perf',
+            section: 'Performance Improvements 🏎',
+            hidden: false,
+          },
+          {
+            type: 'test',
+            section: 'Tests 🧪',
+            hidden: false,
+          },
+          {
+            type: 'build',
+            section: 'Build System 🏗',
+            hidden: false,
+          },
+          {
+            type: 'ci',
+            section: 'CI 🛠',
+            hidden: false,
+          },
+        ],
+      },
+    },
+  },
+};

CONTRIBUTING.md

@@ -2,6 +2,8 @@
 
 Thanks for considering contributing to `@react-forked/dnd`! ❤️
 
+Do not forget to read our [git commit guidelines](#-git-commit-guidelines) beforehand.
+
 There are a few categories of contribution so we'll go through them individually.
 
 ## Documentation
@@ -29,6 +31,15 @@ If you are interested in making a large contribution to this library there is so
 
 The online courses listed are no free - feel free to seek out alternatives if you want to. We recommend the egghead.io courses because they are quite comprehensive.
 
+### Git commit guidelines
+
+We have very precise rules over how our git commit messages can be formatted. This leads to **more readable messages** that are easy to follow when looking through the **project history**. But also, we use the git commit messages to **generate the change log**. This project adheres to [Semantic Versioning 2.0](http://semver.org/).
+
+The commit message formatting can be added using a typical git workflow or through the use of a CLI
+wizard ([Commitizen](https://github.com/commitizen/cz-cli)). To use the wizard, run `yarn cz` or `git commit` in your terminal after staging your changes in git.
+
+The format of each commit must follow the [Conventional Commits specification](https://www.conventionalcommits.org/en/v1.0.0/).
+
 ### General knowledge
 
 - [You Don't Know JS](https://github.com/getify/You-Dont-Know-JS): This is an amazing resource that I recommend all the time. It is great for having a deeper understanding of the JavaScript language.

README.md

@@ -9,6 +9,8 @@
 
 [![CircleCI branch](https://img.shields.io/circleci/project/github/react-forked/dnd/main.svg)](https://circleci.com/gh/react-forked/dnd/tree/main)
 [![npm](https://img.shields.io/npm/v/@react-forked/dnd.svg)](https://www.npmjs.com/package/@react-forked/dnd)
+[![Conventional Commits](https://img.shields.io/badge/Conventional%20Commits-1.0.0-blue.svg)](https://conventionalcommits.org)
+[![Commitizen friendly](https://img.shields.io/badge/commitizen-friendly-blue.svg)](http://commitizen.github.io/cz-cli/)
 
 ![quote application example](https://user-images.githubusercontent.com/2182637/53614150-efbed780-3c2c-11e9-9204-a5d2e746faca.gif)
 

commitlint.config.js

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

package.json

@@ -37,6 +37,8 @@
     "prettier_target": "*.{js,jsx,ts,tsx,md,json} src/**/*.{js,jsx,ts,tsx,md,json} test/**/*.{js,jsx,ts,tsx,md,json} docs/**/*.{js,jsx,ts,tsx,md,json} stories/**/*.{js,jsx,ts,tsx,md,json} cypress/**/*.{js,jsx,ts,tsx,md,json} csp-server/**/*.{js,jsx,ts,tsx,md,json}"
   },
   "scripts": {
+    "prepare": "husky install",
+    "release": "cross-env SKIP_PREPARE_COMMIT_MSG=true release-it",
     "test:accessibility": "lighthouse http://localhost:9002/iframe.html?id=single-vertical-list--basic --no-enable-error-reporting --config-path=lighthouse.config.js --chrome-flags='--headless' --output=json --output=html --output-path=./test-reports/lighthouse/a11y.json && node a11y-audit-parse.js",
     "test": "yarn test:react-17 && yarn test:react-16",
     "test:react-16": "REACT_VERSION=16 jest --config ./jest.config.js",
@@ -83,10 +85,14 @@
     "@babel/preset-env": "7.16.11",
     "@babel/preset-react": "7.16.7",
     "@babel/preset-typescript": "7.16.7",
+    "@commitlint/cli": "16.2.1",
+    "@commitlint/config-conventional": "16.2.1",
+    "@commitlint/cz-commitlint": "16.2.1",
     "@emotion/babel-preset-css-prop": "11.2.0",
     "@emotion/eslint-plugin": "11.7.0",
     "@emotion/react": "11.8.1",
     "@emotion/styled": "11.8.1",
+    "@release-it/conventional-changelog": "4.2.2",
     "@rollup/plugin-babel": "5.3.1",
     "@rollup/plugin-commonjs": "21.0.2",
     "@rollup/plugin-json": "4.1.0",
@@ -121,6 +127,7 @@
     "babel-loader": "8.2.3",
     "babel-plugin-dev-expression": "0.2.3",
     "babel-plugin-module-resolver": "4.1.0",
+    "commitizen": "4.2.4",
     "cross-env": "7.0.3",
     "csstype": "3.0.10",
     "cypress": "9.5.0",
@@ -144,6 +151,7 @@
     "eslint-plugin-storybook": "0.5.7",
     "fast-glob": "3.2.11",
     "fs-extra": "10.0.1",
+    "husky": "7.0.4",
     "jest": "27.5.1",
     "jest-axe": "5.0.1",
     "jest-junit": "13.0.0",
@@ -160,6 +168,7 @@
     "react-test-renderer": "17.0.2",
     "react-virtualized": "9.22.3",
     "react-window": "1.8.6",
+    "release-it": "14.12.5",
     "require-from-string": "2.0.2",
     "rimraf": "3.0.2",
     "rollup": "2.68.0",

renovate.json5

@@ -1,6 +1,8 @@
 {
   extends: ["config:base", ":prConcurrentLimitNone"],
 
+  commitMessageAction: "update",
+  commitMessagePrefix: "chore(deps):",
   labels: ["dependencies"],
 
   packageRules: [
@@ -13,11 +15,13 @@
       matchManagers: ["npm"],
       matchDepTypes: ["devDependencies"],
       rangeStrategy: "pin",
+      commitMessagePrefix: "chore(dev-deps):",
     },
     {
       matchManagers: ["npm"],
       matchDepTypes: ["peerDependencies"],
       rangeStrategy: "widen",
+      commitMessagePrefix: "chore(peer-deps):",
     },
   ],
 }