linting and formatting

Author: aslakhellesoy

.subrepo

@@ -24,10 +24,14 @@
   "author": "Aslak Hellesøy",
   "license": "MIT",
   "scripts": {
-    "prepare": "cpy '**/*.scss' '../dist/src' --cwd='src' --parents",
+    "prepare": "husky install && cpy '**/*.scss' '../dist/src' --cwd='src' --parents",
     "test": "mocha",
     "storybook": "start-storybook -p 6006",
-    "build-storybook": "build-storybook"
+    "build-storybook": "build-storybook",
+    "eslint-fix": "eslint --ext ts,tsx --max-warnings 0 --fix src test",
+    "eslint": "eslint --ext ts,tsx --max-warnings 0 src test",
+    "upgrade": "npm-check-updates --upgrade",
+    "pretty-quick-staged": "pretty-quick --staged"
   },
   "dependencies": {
     "@cucumber/gherkin-utils": "^7.0.0",
@@ -76,16 +80,28 @@
     "@types/node": "16.11.19",
     "@types/react": "17.0.38",
     "@types/react-dom": "17.0.11",
+    "@typescript-eslint/eslint-plugin": "5.9.0",
     "babel-loader": "8.2.3",
     "core-js": "3.20.2",
     "cpy-cli": "3.1.1",
     "css-modules-require-hook": "4.2.3",
+    "eslint": "8.6.0",
+    "eslint-config-prettier": "8.3.0",
+    "eslint-plugin-import": "2.25.4",
+    "eslint-plugin-node": "11.1.0",
+    "eslint-plugin-prettier": "4.0.0",
+    "eslint-plugin-react": "7.28.0",
+    "eslint-plugin-react-hooks": "4.3.0",
+    "eslint-plugin-simple-import-sort": "7.0.0",
+    "husky": "7.0.4",
     "glob": "7.2.0",
     "global-jsdom": "8.4.0",
     "jsdom": "19.0.0",
     "mocha": "9.1.3",
     "nyc": "15.1.0",
-    "path-browserify": "^1.0.1",
+    "path-browserify": "1.0.1",
+    "prettier": "2.5.1",
+    "pretty-quick": "3.1.3",
     "raw-loader": "4.0.2",
     "react": "17.0.2",
     "react-dom": "17.0.2",

package.json

@@ -1,4 +1,4 @@
-import React from 'react'
 import { Query as CucumberQuery } from '@cucumber/query'
+import React from 'react'
 
 export default React.createContext(new CucumberQuery())

src/CucumberQueryContext.ts

@@ -1,5 +1,5 @@
-import React from 'react'
 import * as messages from '@cucumber/messages'
+import React from 'react'
 
 export class EnvelopesQuery {
   private envelopes: messages.Envelope[] = []

src/EnvelopesQueryContext.ts

@@ -1,4 +1,4 @@
-import React from 'react'
 import { Query as GherkinQuery } from '@cucumber/gherkin-utils'
+import React from 'react'
 
 export default React.createContext(new GherkinQuery())

src/GherkinQueryContext.ts

@@ -1,5 +1,5 @@
-import React, { useState } from 'react'
 import { TestStepResultStatus as Status } from '@cucumber/messages'
+import React, { useState } from 'react'
 
 const defaultQuerySearchParam = 'search'
 const defaultHideStatusesSearchParam = 'hide'
@@ -62,7 +62,7 @@ export function searchFromURLParams(opts?: {
     query: url.searchParams.get(querySearchParam),
     hideStatuses: url.searchParams
       .getAll(hideStatusesSearchParam)
-      .filter((s) => (<any>Object).values(Status).includes(s))
+      .filter((s) => Object.values(Status).includes(s as Status))
       .map((s) => Status[s as keyof typeof Status]),
     onSearchQueryUpdated,
   }
@@ -107,9 +107,9 @@ export function useSearchQueryCtx(props: SearchQueryProps): SearchQueryCtx {
     searchQuery,
     props.onSearchQueryUpdated
       ? (query) => {
-        props.onSearchQueryUpdated && props.onSearchQueryUpdated(query)
-        setSearchQuery(query)
-      }
+          props.onSearchQueryUpdated && props.onSearchQueryUpdated(query)
+          setSearchQuery(query)
+        }
       : setSearchQuery
   )
 }

src/SearchQueryContext.ts

@@ -1,3 +1,3 @@
 import React from 'react'
 
-export default React.createContext<null|string>(null)
+export default React.createContext<null | string>(null)

src/UriContext.ts

@@ -1,4 +1,5 @@
 import * as messages from '@cucumber/messages'
+
 import toRepositoryId from './toRepositoryId'
 
 export default function ciCommitLink(ci: messages.Ci): string | null {

src/ciCommitLink.ts

@@ -1,6 +1,7 @@
 import React, { FunctionComponent } from 'react'
-import { CustomRenderingContext, CustomRenderingSupport, IncludedTheme } from './customise'
+
 import styles from './CucumberReact.module.scss'
+import { CustomRenderingContext, CustomRenderingSupport, IncludedTheme } from './customise'
 
 interface IProps {
   theme?: IncludedTheme

src/components/CucumberReact.tsx

@@ -1,8 +1,9 @@
-import React from 'react'
 import * as messages from '@cucumber/messages'
-import ciCommitLink from '../../ciCommitLink'
 import { faLink } from '@fortawesome/free-solid-svg-icons'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import React from 'react'
+
+import ciCommitLink from '../../ciCommitLink'
 
 interface IProps {
   ci: messages.Ci