Eslint validation and jest installation

.eslintrc

@@ -4,6 +4,7 @@
     "es2021": true,
     "jest": true
   },
+  "ignorePatterns": ["src/styles/**"],
   "extends": [
     "plugin:react/recommended",
     "standard"

package.json

@@ -5,7 +5,7 @@
     "dev": "vite",
     "build": "vite build",
     "serve": "vite preview",
-    "test": "eslint src && jest -i"
+    "test": "eslint 'src/**' && jest -i"
   },
   "dependencies": {
     "firebase": "8.3.2",

src/components/Bars.jsx

@@ -1,3 +1,5 @@
+import { PropTypes } from 'prop-types'
+
 import styles from '@styles/components/Bars.module.css'
 
 const Bars = ({ data, days }) => {
@@ -28,4 +30,9 @@ const Bars = ({ data, days }) => {
   )
 }
 
+Bars.propTypes = {
+  data: PropTypes.objectOf(PropTypes.arrayOf(PropTypes.number)).isRequired,
+  days: PropTypes.arrayOf(PropTypes.string).isRequired,
+}
+
 export default Bars

src/components/Button.jsx

@@ -1,3 +1,5 @@
+import { PropTypes } from 'prop-types'
+
 import styles from '@styles/components/Button.module.css'
 
 const Button = ({
@@ -6,8 +8,7 @@ const Button = ({
   thin = false,
   primary = false,
   secondary = false,
-  to = null,
-  onClick = () => {}
+  onClick = () => {},
 }) => {
   const className = styles.button +
     (grow ? ` ${styles.grow}` : '') +
@@ -18,4 +19,13 @@ const Button = ({
   return <button className={className} onClick={onClick}>{children}</button>
 }
 
+Button.propTypes = {
+  children: PropTypes.node.isRequired,
+  grow: PropTypes.bool,
+  thin: PropTypes.bool,
+  primary: PropTypes.bool,
+  secondary: PropTypes.bool,
+  onClick: PropTypes.func,
+}
+
 export default Button

src/components/Calendar.jsx

@@ -1,3 +1,5 @@
+import { PropTypes } from 'prop-types'
+
 import styles from '@styles/components/Calendar.module.css'
 
 const weekDays = ['MON', 'TUE', 'WED', 'THU', 'FRI', 'SAT', 'SUN']
@@ -23,4 +25,10 @@ const Stats = ({ data, days, firstDayOfWeek }) => (
   </div>
 )
 
+Stats.propTypes = {
+  data: PropTypes.objectOf(PropTypes.arrayOf(PropTypes.number)).isRequired,
+  days: PropTypes.arrayOf(PropTypes.string).isRequired,
+  firstDayOfWeek: PropTypes.number.isRequired,
+}
+
 export default Stats

src/components/Footer.jsx

@@ -1,4 +1,5 @@
 import { useContext } from 'react'
+import { PropTypes } from 'prop-types'
 import { DrawContext } from 'react-drawarea'
 
 import Button from '@components/Button'
@@ -13,7 +14,7 @@ const Footer = ({
   isSolved,
   handleRestart,
   handleSolve,
-  handleSuccess
+  handleSuccess,
 }) => {
   const { undo, reset } = useContext(DrawContext)
 
@@ -57,4 +58,13 @@ const Footer = ({
   )
 }
 
+Footer.propTypes = {
+  isCompleted: PropTypes.bool.isRequired,
+  isLoading: PropTypes.bool.isRequired,
+  isSolved: PropTypes.bool.isRequired,
+  handleRestart: PropTypes.func.isRequired,
+  handleSolve: PropTypes.func.isRequired,
+  handleSuccess: PropTypes.func.isRequired,
+}
+
 export default Footer

src/components/Header.jsx

@@ -1,4 +1,5 @@
 import { useLocation } from 'wouter'
+import { PropTypes } from 'prop-types'
 
 import Button from '@components/Button'
 import { ChartIcon, LogInIcon, LogOutIcon } from '@components/icons'
@@ -50,4 +51,8 @@ const Header = ({ isCompleted }) => {
   )
 }
 
+Header.propTypes = {
+  isCompleted: PropTypes.bool.isRequired,
+}
+
 export default Header

src/components/Loading.jsx

@@ -1,3 +1,5 @@
+import { PropTypes } from 'prop-types'
+
 import styles from '@styles/components/Loading.module.css'
 
 const Loading = ({ small = false }) => (
@@ -6,4 +8,6 @@ const Loading = ({ small = false }) => (
   </div>
 )
 
+Loading.propTypes = { small: PropTypes.bool }
+
 export default Loading

src/components/Modal.jsx

@@ -1,3 +1,4 @@
+import { PropTypes } from 'prop-types'
 
 import Button from '@components/Button'
 import { CloseIcon, TickIcon } from '@components/icons'
@@ -14,4 +15,10 @@ const Modal = ({ message, onClose, onConfirm }) => (
   </div>
 )
 
+Modal.propTypes = {
+  message: PropTypes.string.isRequired,
+  onClose: PropTypes.func.isRequired,
+  onConfirm: PropTypes.func.isRequired,
+}
+
 export default Modal

src/components/Numbers.jsx

@@ -1,3 +1,5 @@
+import { PropTypes } from 'prop-types'
+
 import styles from '@styles/components/Numbers.module.css'
 
 const Numbers = ({ numbers, isSolved }) => (
@@ -10,4 +12,9 @@ const Numbers = ({ numbers, isSolved }) => (
   </div>
 )
 
+Numbers.propTypes = {
+  numbers: PropTypes.arrayOf(PropTypes.number).isRequired,
+  isSolved: PropTypes.bool.isRequired,
+}
+
 export default Numbers

src/components/Result.jsx

@@ -1,5 +1,9 @@
+import { PropTypes } from 'prop-types'
+
 import styles from '@styles/components/Result.module.css'
 
 const Result = ({ value }) => <div className={styles.result}>{value}</div>
 
+Result.propTypes = { value: PropTypes.number.isRequired }
+
 export default Result

src/components/icons/ChartIcon.jsx

@@ -1,3 +1,5 @@
+import { PropTypes } from 'prop-types'
+
 const ChartIcon = ({ color = '#ffffff' }) => (
   <svg
     xmlns='http://www.w3.org/2000/svg'
@@ -7,10 +9,15 @@ const ChartIcon = ({ color = '#ffffff' }) => (
   >
     <path d='M0 0h24v24H0V0z' fill='none' />
     <path
-      d='M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zM8 17c-.55 0-1-.45-1-1v-5c0-.55.45-1 1-1s1 .45 1 1v5c0 .55-.45 1-1 1zm4 0c-.55 0-1-.45-1-1V8c0-.55.45-1 1-1s1 .45 1 1v8c0 .55-.45 1-1 1zm4 0c-.55 0-1-.45-1-1v-2c0-.55.45-1 1-1s1 .45 1 1v2c0 .55-.45 1-1 1z'
+      d='M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zM8
+      17c-.55 0-1-.45-1-1v-5c0-.55.45-1 1-1s1 .45 1 1v5c0 .55-.45 1-1 1zm4 0c-.55
+      0-1-.45-1-1V8c0-.55.45-1 1-1s1 .45 1 1v8c0 .55-.45 1-1 1zm4 0c-.55
+      0-1-.45-1-1v-2c0-.55.45-1 1-1s1 .45 1 1v2c0 .55-.45 1-1 1z'
       fill={`${color}`}
     />
   </svg>
 )
 
+ChartIcon.propTypes = { color: PropTypes.string }
+
 export default ChartIcon

src/components/icons/CloseIcon.jsx

@@ -1,3 +1,5 @@
+import { PropTypes } from 'prop-types'
+
 const CloseIcon = ({ color = '#ffffff' }) => (
   <svg
     xmlns='http://www.w3.org/2000/svg'
@@ -6,10 +8,14 @@ const CloseIcon = ({ color = '#ffffff' }) => (
     height={48}
   >
     <path
-      d='M18.3 5.71a.996.996 0 00-1.41 0L12 10.59 7.11 5.7A.996.996 0 105.7 7.11L10.59 12 5.7 16.89a.996.996 0 101.41 1.41L12 13.41l4.89 4.89a.996.996 0 101.41-1.41L13.41 12l4.89-4.89c.38-.38.38-1.02 0-1.4z'
+      d='M18.3 5.71a.996.996 0 00-1.41 0L12 10.59 7.11 5.7A.996.996 0 105.7 7.11L10.59
+      12 5.7 16.89a.996.996 0 101.41 1.41L12 13.41l4.89 4.89a.996.996 0 101.41-1.41L13.41
+      12l4.89-4.89c.38-.38.38-1.02 0-1.4z'
       fill={`${color}`}
     />
   </svg>
 )
 
+CloseIcon.propTypes = { color: PropTypes.string }
+
 export default CloseIcon

src/components/icons/LeftIcon.jsx

@@ -1,3 +1,5 @@
+import { PropTypes } from 'prop-types'
+
 const LeftIcon = ({ color = '#ffffff' }) => (
   <svg
     xmlns='http://www.w3.org/2000/svg'
@@ -7,10 +9,13 @@ const LeftIcon = ({ color = '#ffffff' }) => (
   >
     <path d='M0 0h24v24H0V0z' fill='none' />
     <path
-      d='M14.71 6.71a.996.996 0 00-1.41 0L8.71 11.3a.996.996 0 000 1.41l4.59 4.59a.996.996 0 101.41-1.41L10.83 12l3.88-3.88c.39-.39.38-1.03 0-1.41z'
+      d='M14.71 6.71a.996.996 0 00-1.41 0L8.71 11.3a.996.996 0 000 1.41l4.59
+      4.59a.996.996 0 101.41-1.41L10.83 12l3.88-3.88c.39-.39.38-1.03 0-1.41z'
       fill={`${color}`}
     />
   </svg>
 )
 
+LeftIcon.propTypes = { color: PropTypes.string }
+
 export default LeftIcon

src/components/icons/LogInIcon.jsx

@@ -1,3 +1,5 @@
+import { PropTypes } from 'prop-types'
+
 const LogInIcon = ({ color = '#ffffff' }) => (
   <svg
     xmlns='http://www.w3.org/2000/svg'
@@ -7,10 +9,17 @@ const LogInIcon = ({ color = '#ffffff' }) => (
   >
     <path d='M0 0h24v24H0V0z' fill='none' />
     <path
-      d='M24 15c0-2.64-2.05-4.78-4.65-4.96A7.49 7.49 0 0012 4c-1.33 0-2.57.36-3.65.97l1.49 1.49C10.51 6.17 11.23 6 12 6c3.04 0 5.5 2.46 5.5 5.5v.5H19a2.996 2.996 0 011.79 5.4l1.41 1.41c1.09-.92 1.8-2.27 1.8-3.81zM3.71 4.56a.996.996 0 000 1.41l2.06 2.06h-.42a5.99 5.99 0 00-5.29 6.79C.46 17.84 3.19 20 6.22 20h11.51l1.29 1.29a.996.996 0 101.41-1.41L5.12 4.56a.996.996 0 00-1.41 0zM6 18c-2.21 0-4-1.79-4-4s1.79-4 4-4h1.73l8 8H6z'
+      d='M24 15c0-2.64-2.05-4.78-4.65-4.96A7.49 7.49 0 0012 4c-1.33
+      0-2.57.36-3.65.97l1.49 1.49C10.51 6.17 11.23 6 12 6c3.04 0 5.5 2.46 5.5
+      5.5v.5H19a2.996 2.996 0 011.79 5.4l1.41 1.41c1.09-.92 1.8-2.27 1.8-3.81zM3.71
+      4.56a.996.996 0 000 1.41l2.06 2.06h-.42a5.99 5.99 0 00-5.29 6.79C.46 17.84 3.19 20
+      6.22 20h11.51l1.29 1.29a.996.996 0 101.41-1.41L5.12 4.56a.996.996 0 00-1.41 0zM6
+      18c-2.21 0-4-1.79-4-4s1.79-4 4-4h1.73l8 8H6z'
       fill={`${color}`}
     />
   </svg>
 )
 
+LogInIcon.propTypes = { color: PropTypes.string }
+
 export default LogInIcon

src/components/icons/LogOutIcon.jsx

@@ -1,3 +1,5 @@
+import { PropTypes } from 'prop-types'
+
 const LogOutIcon = ({ color = '#ffffff' }) => (
   <svg
     xmlns='http://www.w3.org/2000/svg'
@@ -7,10 +9,15 @@ const LogOutIcon = ({ color = '#ffffff' }) => (
   >
     <path d='M0 0h24v24H0V0z' fill='none' />
     <path
-      d='M19.35 10.04A7.49 7.49 0 0012 4C9.11 4 6.6 5.64 5.35 8.04A5.994 5.994 0 000 14c0 3.31 2.69 6 6 6h13c2.76 0 5-2.24 5-5 0-2.64-2.05-4.78-4.65-4.96zm-8.64 6.25a.996.996 0 01-1.41 0L7.2 14.2a.996.996 0 111.41-1.41L10 14.18l4.48-4.48a.996.996 0 111.41 1.41l-5.18 5.18z'
+      d='M19.35 10.04A7.49 7.49 0 0012 4C9.11 4 6.6 5.64 5.35 8.04A5.994 5.994 0 000 14c0
+      3.31 2.69 6 6 6h13c2.76 0 5-2.24 5-5 0-2.64-2.05-4.78-4.65-4.96zm-8.64
+      6.25a.996.996 0 01-1.41 0L7.2 14.2a.996.996 0 111.41-1.41L10
+      14.18l4.48-4.48a.996.996 0 111.41 1.41l-5.18 5.18z'
       fill={`${color}`}
     />
   </svg>
 )
 
+LogOutIcon.propTypes = { color: PropTypes.string }
+
 export default LogOutIcon

src/components/icons/RestartIcon.jsx

@@ -1,3 +1,5 @@
+import { PropTypes } from 'prop-types'
+
 const RestartIcon = ({ color = '#ffffff' }) => (
   <svg
     xmlns='http://www.w3.org/2000/svg'
@@ -6,10 +8,16 @@ const RestartIcon = ({ color = '#ffffff' }) => (
     height={48}
   >
     <path
-      d='M17.65 6.35a7.95 7.95 0 00-6.48-2.31c-3.67.37-6.69 3.35-7.1 7.02C3.52 15.91 7.27 20 12 20a7.98 7.98 0 007.21-4.56c.32-.67-.16-1.44-.9-1.44-.37 0-.72.2-.88.53a5.994 5.994 0 01-6.8 3.31c-2.22-.49-4.01-2.3-4.48-4.52A6.002 6.002 0 0112 6c1.66 0 3.14.69 4.22 1.78l-1.51 1.51c-.63.63-.19 1.71.7 1.71H19c.55 0 1-.45 1-1V6.41c0-.89-1.08-1.34-1.71-.71l-.64.65z'
+      d='M17.65 6.35a7.95 7.95 0 00-6.48-2.31c-3.67.37-6.69 3.35-7.1 7.02C3.52 15.91 7.27
+      20 12 20a7.98 7.98 0 007.21-4.56c.32-.67-.16-1.44-.9-1.44-.37 0-.72.2-.88.53a5.994
+      5.994 0 01-6.8 3.31c-2.22-.49-4.01-2.3-4.48-4.52A6.002 6.002 0 0112 6c1.66 0
+      3.14.69 4.22 1.78l-1.51 1.51c-.63.63-.19 1.71.7 1.71H19c.55 0
+      1-.45 1-1V6.41c0-.89-1.08-1.34-1.71-.71l-.64.65z'
       fill={`${color}`}
     />
   </svg>
 )
 
+RestartIcon.propTypes = { color: PropTypes.string }
+
 export default RestartIcon

src/components/icons/RightIcon.jsx

@@ -1,3 +1,5 @@
+import { PropTypes } from 'prop-types'
+
 const RightIcon = ({ color = '#ffffff' }) => (
   <svg
     xmlns='http://www.w3.org/2000/svg'
@@ -7,10 +9,13 @@ const RightIcon = ({ color = '#ffffff' }) => (
   >
     <path d='M0 0h24v24H0V0z' fill='none' />
     <path
-      d='M9.29 6.71a.996.996 0 000 1.41L13.17 12l-3.88 3.88a.996.996 0 101.41 1.41l4.59-4.59a.996.996 0 000-1.41L10.7 6.7c-.38-.38-1.02-.38-1.41.01z'
+      d='M9.29 6.71a.996.996 0 000 1.41L13.17 12l-3.88 3.88a.996.996 0 101.41
+      1.41l4.59-4.59a.996.996 0 000-1.41L10.7 6.7c-.38-.38-1.02-.38-1.41.01z'
       fill={`${color}`}
     />
   </svg>
 )
 
+RightIcon.propTypes = { color: PropTypes.string }
+
 export default RightIcon

src/components/icons/TickIcon.jsx

@@ -1,3 +1,5 @@
+import { PropTypes } from 'prop-types'
+
 const TickIcon = ({ color = '#ffffff' }) => (
   <svg
     xmlns='http://www.w3.org/2000/svg'
@@ -6,10 +8,13 @@ const TickIcon = ({ color = '#ffffff' }) => (
     height={48}
   >
     <path
-      d='M18 6.7l-8.48 8.48-3.54-3.54a.996.996 0 10-1.41 1.41l4.24 4.24c.39.39 1.02.39 1.41 0l9.18-9.18a.999.999 0 00-.01-1.42c-.37-.38-1-.38-1.39.01z'
+      d='M18 6.7l-8.48 8.48-3.54-3.54a.996.996 0 10-1.41 1.41l4.24 4.24c.39.39 1.02.39
+      1.41 0l9.18-9.18a.999.999 0 00-.01-1.42c-.37-.38-1-.38-1.39.01z'
       fill={`${color}`}
     />
   </svg>
 )
 
+TickIcon.propTypes = { color: PropTypes.string }
+
 export default TickIcon

src/components/icons/UndoIcon.jsx

@@ -1,3 +1,5 @@
+import { PropTypes } from 'prop-types'
+
 const UndoIcon = ({ color = '#ffffff' }) => (
   <svg
     xmlns='http://www.w3.org/2000/svg'
@@ -6,10 +8,15 @@ const UndoIcon = ({ color = '#ffffff' }) => (
     height={48}
   >
     <path
-      d='M5.4 10.91c3.9-3.88 10.23-3.88 14.12.02 1.09 1.09 1.9 2.4 2.39 3.82.21.61-.26 1.25-.91 1.25h-.1c-.42 0-.77-.28-.91-.67a7.93 7.93 0 00-1.88-2.99C15 9.23 9.93 9.22 6.81 12.32l1.97 1.97c.63.63.18 1.71-.71 1.71H3.49c-.55 0-1-.45-1-1v-4.59c0-.89 1.08-1.34 1.71-.71l1.2 1.21z'
+      d='M5.4 10.91c3.9-3.88 10.23-3.88 14.12.02 1.09 1.09 1.9 2.4 2.39 3.82.21.61-.26
+      1.25-.91 1.25h-.1c-.42 0-.77-.28-.91-.67a7.93 7.93 0 00-1.88-2.99C15 9.23 9.93 9.22
+      6.81 12.32l1.97 1.97c.63.63.18 1.71-.71 1.71H3.49c-.55 0-1-.45-1-1v-4.59c0-.89
+      1.08-1.34 1.71-.71l1.2 1.21z'
       fill={`${color}`}
     />
   </svg>
 )
 
+UndoIcon.propTypes = { color: PropTypes.string }
+
 export default UndoIcon

src/components/icons/index.js

@@ -17,5 +17,5 @@ export {
   RestartIcon,
   RightIcon,
   TickIcon,
-  UndoIcon
+  UndoIcon,
 }

src/constants/routes.js

@@ -3,5 +3,5 @@ export const ROUTE_STATS = '/stats'
 
 export const ROUTES = {
   MAIN: ROUTE_MAIN,
-  STATS: ROUTE_STATS
+  STATS: ROUTE_STATS,
 }