Fix failing master lint (#3640)

* Fix husky by updating husky configuration
* fix CSS lint by updating a CSS file
* fix TS lint by reinstalling `package-lock.json` and clear the rest of the errors

.husky/pre-commit

@@ -0,0 +1 @@
+yarn format-staged && yarn lint-staged

package.json

@@ -21,7 +21,8 @@
     "link-check": "repo-link-check -c config/link-check/config.yml",
     "link-check-diff": "repo-link-check -c config/link-check/config.yml -d master",
     "link-check-dev-server": "repo-link-check -c config/link-check/config.yml -r http://localhost:3000",
-    "link-check-exclude": "repo-link-check -c config/link-check/config.yml --unused-patterns-only"
+    "link-check-exclude": "repo-link-check -c config/link-check/config.yml --unused-patterns-only",
+    "prepare": "husky install"
   },
   "repository": {
     "type": "git",
@@ -111,7 +112,6 @@
     "@types/react-instantsearch-dom": "^6.12.3",
     "@types/react-popover": "^0.5.3",
     "@types/react-slick": "^0.23.8",
-    "@types/rehype-react": "^6.0.0",
     "@typescript-eslint/eslint-plugin": "^5.26.0",
     "@typescript-eslint/parser": "^5.26.0",
     "autoprefixer": "^10.4.7",
@@ -149,7 +149,7 @@
     "gatsby-transformer-remark": "^5.15.0",
     "gatsby-transformer-sharp": "^4.15.0",
     "hast-util-select": "^5.0.2",
-    "husky": "^8.0.1",
+    "husky": "^8.0.0",
     "iframe-resizer-react": "^1.1.0",
     "jest": "^28.1.0",
     "lint-staged": "^12.4.2",
@@ -170,11 +170,6 @@
     "typescript": "^4.7.2",
     "unist-util-remove-position": "^4.0.1"
   },
-  "husky": {
-    "hooks": {
-      "pre-commit": "yarn format-staged && yarn lint-staged"
-    }
-  },
   "lint-staged": {
     "*.{js,ts,tsx,json}": [
       "eslint"

src/@dvcorg/gatsby-theme-iterative/components/LayoutHeader/Nav/Popup/index.tsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { PropsWithChildren } from 'react'
 import cn from 'classnames'
 
 import Link from '@dvcorg/gatsby-theme-iterative/src/components/Link'
@@ -14,10 +14,12 @@ export interface IPopupProps {
   closePopup: () => void
 }
 
-export const BasePopup: React.FC<{
-  className?: string
-  isVisible: boolean
-}> = ({ children, isVisible, className }) => (
+export const BasePopup: React.FC<
+  PropsWithChildren<{
+    className?: string
+    isVisible: boolean
+  }>
+> = ({ children, isVisible, className }) => (
   <div className={cn(styles.popup, isVisible && styles.visible, className)}>
     {children}
   </div>
@@ -58,7 +60,7 @@ export const OtherPopup: React.FC<IPopupProps> = ({
             key={i}
             onClick={closePopup}
           >
-            {text}
+            {text as React.ReactNode}
           </Link>
         )
     )}

src/@dvcorg/gatsby-theme-iterative/components/MainLayout/index.tsx

@@ -53,8 +53,10 @@ const MainLayout: LayoutComponent = ({
         id="layoutContent"
         //  className={styles.pageContent}
       >
-        {!pageContext.isDocs && <SkipNavContent id="main-content" />}
-        {children}
+        <>
+          {!pageContext.isDocs && <SkipNavContent id="main-content" />}
+          {children}
+        </>
       </div>
       <LayoutFooter />
     </div>

src/@dvcorg/gatsby-theme-iterative/components/data/styles.module.css

@@ -1,17 +1,17 @@
 .cmlIcon {
-  background-image: url('../../../../../static/img/cml_icon-color--square_vector.svg');
+  background-image: url("../../../../../static/img/cml_icon-color--square_vector.svg");
 }
 
 .dvcIcon {
-  background-image: url('../../../../../static/img/dvc_icon-color--square_vector.svg');
+  background-image: url("../../../../../static/img/dvc_icon-color--square_vector.svg");
 }
 
 .studioIcon {
-  background-image: url('../../../../../static/img/studio_icon-color--square_vector.svg');
+  background-image: url("../../../../../static/img/studio_icon-color--square_vector.svg");
 }
 
 .mlemIcon {
-  background-image: url('../../../../../static/img/mlem-icon.svg');
+  background-image: url("../../../../../static/img/mlem-icon.svg");
 }
 
 .other {

src/components/SubscribeSection/Form/index.tsx

@@ -9,7 +9,7 @@ const Form: React.FC = () => {
   const hiddenInputRef = useRef<HTMLInputElement>(null)
   const honeypotNameRef = useRef(nanoid())
   const sendGAEvent = useCallback(
-    e => {
+    (e: React.FormEvent) => {
       if (hiddenInputRef.current?.value) {
         // It's a bot.
         return e.preventDefault()

src/components/Support/Popover/index.tsx

@@ -1,15 +1,19 @@
-import React, { useState } from 'react'
-import ReactPopover, { PopoverProps } from 'react-popover'
+import React, { useState, PropsWithChildren } from 'react'
+import ReactPopover from 'react-popover'
 
 import { isTriggeredFromKB } from '@dvcorg/gatsby-theme-iterative/src/utils/front/keyboard'
 
 import './styles.module.css'
 
-type IPopoverProps = {
-  children: React.ReactNode
-} & PopoverProps
+interface IPopoverProps {
+  body: React.ReactNode
+  enterExitTransitionDurationMs: number
+}
 
-const Popover: React.FC<IPopoverProps> = ({ children, ...restProps }) => {
+const Popover: React.FC<PropsWithChildren<IPopoverProps>> = ({
+  children,
+  ...restProps
+}) => {
   const [isOpened, setOpened] = useState(false)
   const toggle = (): void => setOpened(prev => !prev)
   const onKeyDown = (e: React.KeyboardEvent<HTMLDivElement>): void => {
@@ -20,6 +24,7 @@ const Popover: React.FC<IPopoverProps> = ({ children, ...restProps }) => {
   const close = (): void => setOpened(false)
 
   return (
+    // @ts-expect-error Error is caused by package and out of our control
     <ReactPopover isOpen={isOpened} onOuterAction={close} {...restProps}>
       <div onClick={toggle} role="button" onKeyDown={onKeyDown} tabIndex={0}>
         {children}

src/templates/doc-jsx.tsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { PropsWithChildren } from 'react'
 import { getItemByPath } from '@dvcorg/gatsby-theme-iterative/src/utils/shared/sidebar'
 
 import SEO from '@dvcorg/gatsby-theme-iterative/src/components/SEO'
@@ -12,7 +12,7 @@ interface IJSXDocPageProps {
   headings: []
 }
 
-const JSXDocPage: React.FC<IJSXDocPageProps> = ({
+const JSXDocPage: React.FC<PropsWithChildren<IJSXDocPageProps>> = ({
   title,
   description,
   children,

tsconfig.json

@@ -21,5 +21,6 @@
     "alwaysStrict": true,
     "noEmit": true
   },
-  "include": ["./src/**/*", "./*.js"]
+  "include": ["./src/**/*", "./*.js"],
+  "exclude": ["./node_modules/**/*"]
 }