Add husky pre-commit hook to lint and test

Currently the test suite runs in a few sections and is pretty quick.
A push to main will auto-deploy so currently keeping checks local
with git hooks instead of a CI environment.

This commit also ignores the prop-type rules for existing components.
In the future this should be done or typed with typescript.

Author: chadian

.eslintrc.js

@@ -16,6 +16,7 @@ module.exports = {
   plugins: ['react', 'prettier'],
   rules: {
     'prettier/prettier': 'error',
+    'react/no-unescaped-entities': ['error', { forbid: ['>', '}'] }],
   },
   settings: {
     react: {

.husky/pre-commit

@@ -0,0 +1,5 @@
+#!/bin/sh
+. "$(dirname "$0")/_/husky.sh"
+
+yarn lint
+yarn test

components/button.js

@@ -1,3 +1,4 @@
+/* eslint-disable react/prop-types */
 import React from 'react';
 import { useTheme } from '../hooks/theme/index';
 

components/content/section.js

@@ -1,3 +1,4 @@
+/* eslint-disable react/prop-types */
 import React from 'react';
 
 export function SectionHeading({ children }) {

components/link.js

@@ -1,3 +1,4 @@
+/* eslint-disable react/prop-types */
 import React from 'react';
 import { default as NextLink } from 'next/link';
 import { useTheme } from '../hooks/theme/index';

components/modal.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import FocusLock from 'react-focus-lock';
 
+// eslint-disable-next-line react/prop-types
 export default function Modal({ children, onClose }) {
   const classNames = [
     'fixed',

components/rhythm-edit/rhythm-edit.js

@@ -1,3 +1,5 @@
+/* eslint-disable react/prop-types */
+
 import React, { useState } from 'react';
 import Button from '../button';
 import { denominatorTerm } from '../../utils/denominator-term';

components/rhythm-edit/validated-wrapper.js

@@ -4,6 +4,7 @@ let errorIdCount = 0;
 
 const getErrorIdCount = () => errorIdCount;
 
+// eslint-disable-next-line react/prop-types
 export function ValidationWrapper({ hasSubmitted, error, children }) {
   const errorId = `vw-error-${getErrorIdCount()}`;
   const showError = hasSubmitted && error;

components/rhythm-list.js

@@ -3,6 +3,7 @@ import Rhythm from './rhythm/rhythm';
 import Button from './button';
 import { useRhythms } from '../hooks/rhythms';
 
+// eslint-disable-next-line react/prop-types
 export default function RhythmList({ onEdit }) {
   const [rhythms, rhythmsDispatch] = useRhythms();
 

components/rhythm/rhythm.js

@@ -1,3 +1,4 @@
+/* eslint-disable react/prop-types */
 import React from 'react';
 import Occurrence from './occurrence';
 import { numeratorTerm } from '../../utils/numerator-term';

hooks/rhythms/index.js

@@ -89,6 +89,7 @@ function rhythmsReducer(rhythms, action) {
   }
 }
 
+// eslint-disable-next-line react/prop-types
 export const RhythmsProvider = ({ children }) => {
   const initialRhythms = initializeRhythms();
   const [rhythms, dispatch] = useReducer(rhythmsReducer, initialRhythms);

hooks/theme/index.js

@@ -9,6 +9,7 @@ export { themeKeys, themeDefinitions };
 
 const ThemeContext = createContext();
 
+// eslint-disable-next-line react/prop-types
 export const ThemeProvider = ({ value, children }) => {
   const { theme: localStorageTheme } = getLocalStorageTheme() ?? {};
   const initialThemeName = value ?? localStorageTheme ?? DEFAULT_THEME;

package.json

@@ -9,7 +9,8 @@
     "test": "jest",
     "lint": "eslint \"**/*.js\"",
     "storybook": "start-storybook -p 6006",
-    "build-storybook": "build-storybook"
+    "build-storybook": "build-storybook",
+    "prepare": "husky install"
   },
   "dependencies": {
     "chroma-js": "^2.1.1",
@@ -38,6 +39,7 @@
     "eslint-config-prettier": "^8.3.0",
     "eslint-plugin-prettier": "^3.4.0",
     "eslint-plugin-react": "^7.23.2",
+    "husky": "^7.0.0",
     "jest": "^26.6.3",
     "jest-localstorage-mock": "^2.4.9",
     "jest-transform-css": "^2.1.0",

pages/_app.js

@@ -6,6 +6,7 @@ import { ThemeProvider } from '../hooks/theme/index';
 import Link from '../components/link';
 import { useEffect } from 'react';
 
+// eslint-disable-next-line react/prop-types
 function NextApp({ Component, pageProps }) {
   useEffect(() => {
     // This prevents a vertical shift of content when navigating

pages/home.js

@@ -11,6 +11,7 @@ import {
   SectionParagraph,
 } from '../components/content/section';
 
+// eslint-disable-next-line react/prop-types
 function Highlight({ children }) {
   const [theme] = useTheme();
 

yarn.lock

@@ -6850,6 +6850,11 @@ human-signals@^1.1.1:
   resolved "https://registry.yarnpkg.com/human-signals/-/human-signals-1.1.1.tgz#c5b1cd14f50aeae09ab6c59fe63ba3395fe4dfa3"
   integrity sha512-SEQu7vl8KjNL2eoGBLF3+wAjpsNfA9XMlXAYj/3EdaNfAlxKthD1xjEQfGOUhllCGGJVNY34bRr6lPINhNjyZw==
 
+husky@^7.0.0:
+  version "7.0.0"
+  resolved "https://registry.yarnpkg.com/husky/-/husky-7.0.0.tgz#3dbd5d28e76234689ee29bb41e048f28e3e46616"
+  integrity sha512-xK7lO0EtSzfFPiw+oQncQVy/XqV7UVVjxBByc+Iv5iK3yhW9boDoWgvZy3OGo48QKg/hUtZkzz0hi2HXa0kn7w==
+
 iconv-lite@0.4.24:
   version "0.4.24"
   resolved "https://registry.yarnpkg.com/iconv-lite/-/iconv-lite-0.4.24.tgz#2022b4b25fbddc21d2f524974a474aafe733908b"