style: @commitlint with husky integration (#3499)

We are using @commitlint/config-angular
Be aware that with this change, "chore" type is not
allowed anymore.

.huskyrc

@@ -0,0 +1,5 @@
+{
+  "hooks": {
+    "commit-msg": "commitlint -E HUSKY_GIT_PARAMS"
+  }
+}

CONTRIBUTING.md

@@ -2,11 +2,11 @@
 
 We are always looking for quality contributions and will be happy to accept your Pull Requests as long as they adhere to some basic rules:
 
-* Please make sure that your contribution fits well in the project's context:
-  * we are aiming at rebuilding bootstrap components in pure Angular, without any dependencies on any external JavaScript library;
-  * the only dependency should be bootstrap CSS and its markup structure
-* Please assure that you are submitting quality code, specifically make sure that:
-  * your component has accompanying tests and all the tests are passing
-  * your PR doesn't break the build; check the Travis-CI build status after opening a PR and push corrective commits if anything goes wrong
-  * your commits conform to the conventions established [here](https://github.com/stevemao/conventional-changelog-angular/blob/master/convention.md)
-  * your component follows all the conventions stated [here](https://github.com/ng-bootstrap/ng-bootstrap/wiki/Contributions%3A-Code-conventions)
+- Please make sure that your contribution fits well in the project's context:
+  - we are aiming at rebuilding bootstrap components in pure Angular, without any dependencies on any external JavaScript library;
+  - the only dependency should be bootstrap CSS and its markup structure
+- Please assure that you are submitting quality code, specifically make sure that:
+  - your component has accompanying tests and all the tests are passing
+  - your PR doesn't break the build; check the Travis-CI build status after opening a PR and push corrective commits if anything goes wrong
+  - your commits conform to the conventions established [here](DEVELOPER.md#commit-messages)
+  - your component follows all the conventions stated [here](https://github.com/ng-bootstrap/ng-bootstrap/wiki/Contributions%3A-Code-conventions)

DEVELOPER.md

@@ -3,12 +3,13 @@
 This document describes how to set up your development environment to build and test ng-bootstrap.
 It also explains the basic mechanics of using `git`, `node` and `yarn`.
 
-* [Prerequisite Software](#prerequisite-software)
-* [Getting the Sources](#getting-the-sources)
-* [Installing Dependencies](#installing-dependencies)
-* [Project Structure](#project-structure)
-* [Useful commands](#useful-commands)
-* [Formatting](#clang-format)
+- [Prerequisite Software](#prerequisite-software)
+- [Getting the Sources](#getting-the-sources)
+- [Installing Dependencies](#installing-dependencies)
+- [Project Structure](#project-structure)
+- [Useful commands](#useful-commands)
+- [Formatting](#clang-format)
+- [Commit Messages](#commit-messages)
 
 See the [contribution guidelines](https://github.com/ng-bootstrap/ng-bootstrap/blob/master/CONTRIBUTING.md)
 if you'd like to contribute to ng-bootstrap.
@@ -18,16 +19,18 @@ if you'd like to contribute to ng-bootstrap.
 Before you can build and test ng-bootstrap, you must install and configure the
 following products on your development machine:
 
-* [Git](http://git-scm.com) and/or the **GitHub app** (for [Mac](http://mac.github.com) or
+- [Git](http://git-scm.com) and/or the **GitHub app** (for [Mac](http://mac.github.com) or
   [Windows](http://windows.github.com)); [GitHub's Guide to Installing
   Git](https://help.github.com/articles/set-up-git) is a good source of information.
 
-* [Node.js](https://nodejs.org), (version `>=8.9.0`) which is used to run tests, and generate distributable files. Depending on your system, you can install Node either from 
+- [Node.js](https://nodejs.org), (version `>=8.9.0`) which is used to run tests, and generate distributable files. Depending on your system, you can install Node either from
   source or as a pre-packaged bundle.
 
-* We use [Yarn](https://yarnpkg.com) (version `>=1.3.0`) to manage dependencies. Please, see installation instructions on their site.
+- We use [Yarn](https://yarnpkg.com) (version `>=1.3.0`) to manage dependencies. Please, see installation instructions on their site.
 
-* We use [Chrome](https://www.google.com/chrome/) to run our tests.
+- We use [Chrome](https://www.google.com/chrome/) to run our tests.
+
+- We use [Commit Lint](https://commitlint.js.org) with [Husky](https://github.com/typicode/husky) to make sure our commit messages are following [some common rules](#commit-messages).
 
 ## Getting the Sources
 
@@ -63,10 +66,11 @@ yarn
 ## Project Structure
 
 We use [`@angular/cli`](https://cli.angular.io) to build both ng-bootstrap library and demo site. There are several Angular CLI projects inside the checked out code:
-* `ng-bootstrap` - the ng-bootstrap library itself, sources are located in directly in the `src` folder
-* `demo` - the demo site deployed at [https://ng-bootstrap.github.io](https://ng-bootstrap.github.io), sources are in `demo/src`
-* `e2e test app` - an application used to run e2e tests for the library, sources are in `e2e-app/src`
-* `ssr test app` - a simple one-paged application for Server Side Rendering tests, sources are in `ssr-app/src` 
+
+- `ng-bootstrap` - the ng-bootstrap library itself, sources are located in directly in the `src` folder
+- `demo` - the demo site deployed at [https://ng-bootstrap.github.io](https://ng-bootstrap.github.io), sources are in `demo/src`
+- `e2e test app` - an application used to run e2e tests for the library, sources are in `e2e-app/src`
+- `ssr test app` - a simple one-paged application for Server Side Rendering tests, sources are in `ssr-app/src`
 
 ## Useful Commands
 
@@ -78,16 +82,16 @@ Serves the demo site locally in dev mode at [http://localhost:4200/](http://loca
 
 #### `yarn build`
 
-Builds both library and demo site in production mode. The library will be built in Angular Package format in `dist` folder. The demo site will be built in `demo/dist` folder.   
+Builds both library and demo site in production mode. The library will be built in Angular Package format in `dist` folder. The demo site will be built in `demo/dist` folder.
 
 #### `yarn tdd`
 
 Runs unit tests for the library in watch mode without any additional checks
 
 **Note**: If you want to only run a single test you can alter the test you wish to run by changing
- `it` to `fit` or `describe` to `fdescribe`. This will only run that individual test and make it
- much easier to debug. `xit` and `xdescribe` can also be useful to exclude a test and a group of
- tests respectively.
+`it` to `fit` or `describe` to `fdescribe`. This will only run that individual test and make it
+much easier to debug. `xit` and `xdescribe` can also be useful to exclude a test and a group of
+tests respectively.
 
 #### `yarn test`
 
@@ -106,12 +110,11 @@ Builds, runs and e2e tests a simple server-side rendered application with all ng
 
 Runs exactly the same suite of actions as the CI server, so you might want to do it before opening a PR
 
-
 #### `yarn check-format`
 
 Checks that your source code is properly formatted without running anything else (see next section)
 
-You can inspect `package.json` scripts section for a full list of commands available. 
+You can inspect `package.json` scripts section for a full list of commands available.
 
 ## Formatting with <a name="clang-format">clang-format</a>
 
@@ -130,35 +133,59 @@ Your life will be easier if you include the formatter in your standard workflow.
 likely forget to check the formatting, and waste time waiting for a build on Travis that fails due
 to some whitespace difference.
 
-* Install clang-format with `npm install -g clang-format`.
-* Use `clang-format -i [file name]` to format a file (or multiple).
+- Install clang-format with `npm install -g clang-format`.
+- Use `clang-format -i [file name]` to format a file (or multiple).
   Note that `clang-format` tries to load a `clang-format` node module close to the sources being
   formatted, or from the `$CWD`, and only then uses the globally installed one - so the version used
   should automatically match the one required by the project.
   Use `clang-format -version` in case you get confused.
-* Use `yarn check-format` to check if your code is `clang-format` clean. This also gives
+- Use `yarn check-format` to check if your code is `clang-format` clean. This also gives
   you a command line to format your code.
-* `clang-format` also includes a git hook, run `git clang-format` to format all files you
+- `clang-format` also includes a git hook, run `git clang-format` to format all files you
   touched.
-* You can run this as a **git pre-commit hook** to automatically format your delta regions when you
+- You can run this as a **git pre-commit hook** to automatically format your delta regions when you
   commit a change. In the ng-bootstrap repo, run
 
 ```shell
     $ echo -e '#!/bin/sh\nexec git clang-format' > .git/hooks/pre-commit
     $ chmod u+x !$
 ```
 
-* **WebStorm** can run clang-format on the current file.
+- **WebStorm** can run clang-format on the current file.
   1. Under Preferences, open Tools > External Tools.
   1. Plus icon to Create Tool
   1. Fill in the form:
-    - Name: clang-format
-    - Description: Format
-    - Synchronize files after execution: checked
-    - Open console: not checked
-    - Show in: Editor menu
-    - Program: [path to clang-format, try `$ echo $(npm config get prefix)/bin/clang-format`]
-    - Parameters: `-i -style=file $FilePath$`
-    - Working directory: `$ProjectFileDir$`
-* `clang-format` integrations are also available for many popular editors (`vim`, `emacs`,
+  - Name: clang-format
+  - Description: Format
+  - Synchronize files after execution: checked
+  - Open console: not checked
+  - Show in: Editor menu
+  - Program: [path to clang-format, try `$ echo $(npm config get prefix)/bin/clang-format`]
+  - Parameters: `-i -style=file $FilePath$`
+  - Working directory: `$ProjectFileDir$`
+- `clang-format` integrations are also available for many popular editors (`vim`, `emacs`,
   `Sublime Text`, etc.).
+
+## Commit messages
+
+#### Pre-requisites
+
+For Conventional Commit Messages to be working with [CommitLint](https://commitlint.js.org/) you have to make sure everything is installed properly:
+
+- You have a fresh install, you just cloned the repository following the steps described in this readme?
+  **you should be fine**.
+
+- Your project folder is a long standing one, cloned a long time ago?
+  - Make sure to remove any previous `commit-msg` or `prepare-commit-msg` hooks you might have inside `.git/hooks` directory.
+  - Install manually [Husky](https://github.com/typicode/husky) by executing this command:
+    ```bash
+    > npx husky install
+    ```
+
+In both cases you can validate your local installation by trying to commit something. (guides available [here](https://commitlint.js.org/#/guides-local-setup))
+
+#### Scopes
+
+We maintain dynamic custom scopes on the project. Valid scopes correspond to the name of our widgets or the 2 generic terms _"demo"_ & _"demos"_.
+
+Anything else won't pass commitlint validation.

commitlint.config.js

@@ -0,0 +1,17 @@
+const fs = require('fs');
+
+/*
+  Let's get widget names as valid list of scopes.
+  Adding also demo & demos as valid too.
+*/
+const scopes = [
+  "demo", "demos", ...fs.readdirSync("./src", {withFileTypes: true})
+                       .filter(d => d.isDirectory())
+                       .filter(d => !["test", "util"].includes(d.name))
+                       .map(d => d.name)
+];
+
+module.exports = {
+  extends: ['@commitlint/config-angular'],
+  rules: {"scope-enum": [2, 'always', scopes]}
+};

package.json

@@ -9,7 +9,6 @@
   },
   "scripts": {
     "preinstall": "node misc/preinstall.js",
-    "commitmsg": "node misc/validate-commit.js",
     "build": "yarn ngb:build && yarn demo:build",
     "test": "yarn check-format && yarn ngb:lint && yarn ngb:test",
     "tdd": "yarn ngb:tdd",
@@ -73,6 +72,8 @@
     "@angular/platform-browser-dynamic": "8.2.4",
     "@angular/platform-server": "8.2.4",
     "@angular/router": "8.2.4",
+    "@commitlint/cli": "8.3.4",
+    "@commitlint/config-angular": "8.3.4",
     "@nguniversal/express-engine": "8.1.1",
     "@nguniversal/module-map-ngfactory-loader": "8.1.1",
     "@types/express": "^4.16.1",
@@ -95,6 +96,7 @@
     "fs-extra": "^8.0.0",
     "gh-pages": "^2.0.1",
     "glob": "^7.1.1",
+    "husky": "4.0.7",
     "jasmine": "~3.4.0",
     "jasmine-core": "~3.4.0",
     "jasmine-spec-reporter": "~4.2.1",