chore: Add commitlint to verify commit message format (#21)

README.md

@@ -233,6 +233,16 @@ const App = () => {
 
 The process to grant microphone access permissions is automatically managed by the hook (internally used by the `Vocal` component).
 
-## Todos
+## Contributing
 
--   Add a connector management to plug external speech-to-text services in
+Contributions are warmly welcomed:
+- Fork the repository
+- Create a feature branch (preferred name convention: `[feature type]_[imperative verb]-[description of the feature]`)
+- Develop the feature AND write the tests (or write the tests AND develop the feature)
+- Commit your changes using [Angular Git Commit Guidelines](https://github.com/angular/angular.js/blob/master/DEVELOPERS.md#-git-commit-guidelines)
+- Submit a Pull Request
+
+## Roadmap
+
+- Add a connector management to plug external speech-to-text services in
+- Accept more ways to customize children

commitlint.config.js

@@ -0,0 +1,7 @@
+module.exports = {
+	extends: ['@commitlint/config-conventional'],
+	rules: {
+		'subject-case': [2, 'always', ['sentence-case']],
+		'scope-case': [2, 'always', ['lower-case', 'upper-case']]
+	},
+}

package.json

@@ -30,6 +30,8 @@
     "@babel/plugin-transform-runtime": "^7.10.1",
     "@babel/preset-env": "^7.10.2",
     "@babel/preset-react": "^7.10.1",
+    "@commitlint/cli": "^9.1.1",
+    "@commitlint/config-conventional": "^9.1.1",
     "@rollup/plugin-babel": "^5.0.2",
     "@rollup/plugin-commonjs": "^12.0.0",
     "@rollup/plugin-node-resolve": "^8.0.0",
@@ -70,7 +72,8 @@
   },
   "husky": {
     "hooks": {
-      "pre-commit": "yarn test:ci && yarn prettier"
+      "pre-commit": "yarn test:ci && yarn prettier",
+      "commit-msg": "commitlint -E HUSKY_GIT_PARAMS"
     }
   },
   "release": {

src/components/Icon.js

@@ -3,7 +3,13 @@ import PropTypes from 'prop-types'
 
 const Icon = ({ color, activeColor, isActive }) => {
 	return (
-		<svg data-testid="__icon-root__" xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 24 24">
+		<svg
+			data-testid="__icon-root__"
+			xmlns="http://www.w3.org/2000/svg"
+			width="100%"
+			height="100%"
+			viewBox="0 0 24 24"
+		>
 			<g>
 				<path
 					data-testid="__icon-path__"
@@ -19,13 +25,13 @@ const Icon = ({ color, activeColor, isActive }) => {
 Icon.propTypes = {
 	color: PropTypes.string,
 	activeColor: PropTypes.string,
-	isActive: PropTypes.bool
+	isActive: PropTypes.bool,
 }
 
 Icon.defaultProps = {
 	color: 'black',
 	activeColor: 'red',
-	isActive: false
+	isActive: false,
 }
 
 export default Icon

src/components/__tests__/Icon.test.js

@@ -19,7 +19,7 @@ describe('Icon', () => {
 
 	it('renders component color', () => {
 		const color = 'green'
-		const { queryByTestId } = render(getInstance({color}))
+		const { queryByTestId } = render(getInstance({ color }))
 		expect(queryByTestId('__icon-path__')).toHaveAttribute('fill', color)
 	})