Jumpstart typescript linting. (#79)

* Overhaul typescript linting.

* Supplant implicit anys.

.eslintrc.json

@@ -0,0 +1,27 @@
+{
+  "plugins": ["@typescript-eslint", "testing-library"],
+  "extends": [
+    "plugin:@typescript-eslint/recommended",
+    "next/core-web-vitals",
+    "prettier"
+  ],
+  "overrides": [
+    // Only uses Testing Library lint rules in test files
+    {
+      "files": [
+        "**/__tests__/**/*.[jt]s?(x)",
+        "**/?(*.)+(spec|test).[jt]s?(x)"
+      ],
+      "extends": ["plugin:testing-library/react"]
+    }
+  ],
+  "rules": {
+    // "sort-keys": "error",
+    // "sort-imports": "error",
+    "@typescript-eslint/no-var-requires": "warn",
+    "@typescript-eslint/no-unused-vars": "error",
+    "@typescript-eslint/no-explicit-any": "warn",
+    "@typescript-eslint/sort-type-union-intersection-members": "error",
+    "@typescript-eslint/ban-ts-comment": "warn"
+  }
+}

components/Card/Card.tsx

@@ -9,7 +9,11 @@ import { m, LazyMotion, domAnimation, MotionConfig } from "framer-motion";
 import { useEffect, useState } from "react";
 import { Label } from "@samvera/nectar-iiif";
 
-const Card = ({ resource }) => {
+interface CardProps {
+  resource: any;
+}
+
+const Card: React.FC<CardProps> = ({ resource }) => {
   const [aspectRatio, setAspectRatio] = useState<number>();
   const { label, homepage, thumbnail } = resource;
 

components/Facets/Facets.tsx

@@ -6,7 +6,7 @@ import React from "react";
 const Facets: React.FC = () => {
   return (
     <FacetsStyled>
-      {FACETS.map((facet) => (
+      {FACETS.map((facet: any) => (
         <FacetSelect facet={facet} key={facet.slug} />
       ))}
     </FacetsStyled>

components/Facets/Select/Select.tsx

@@ -2,9 +2,13 @@ import * as Select from "@radix-ui/react-select";
 import { useRouter } from "next/router";
 import React from "react";
 
-const FacetSelect = ({ facet }) => {
+interface FacetSelectProps {
+  facet: any;
+}
+
+const FacetSelect: React.FC<FacetSelectProps> = ({ facet }) => {
   const router = useRouter();
-  const handeValueChange = (value) =>
+  const handeValueChange = (value: any) =>
     router.push({
       pathname: "/search",
       query: {
@@ -24,7 +28,7 @@ const FacetSelect = ({ facet }) => {
           <Select.Viewport>
             <Select.Group>
               <Select.Label>{facet.label}</Select.Label>
-              {facet.values.map((option) => (
+              {facet.values.map((option: any) => (
                 <Select.Item value={option.slug} key={option.slug}>
                   <Select.ItemText>{option.value}</Select.ItemText>
                   <Select.ItemIndicator />

components/Figure/Figure.tsx

@@ -3,24 +3,34 @@ import { Image, Wrapper } from "@/components/Figure/Figure.styled";
 import clsx from "clsx";
 import { getResourceImage } from "@/hooks/getResourceImage";
 
-const Figure = ({
+interface FigureProps {
+  resource: any;
+  region?: string;
+  size?: string;
+  isCover?: boolean;
+}
+
+const Figure: React.FC<FigureProps> = ({
   resource,
   region = "full",
   size = "400,",
   isCover = false,
 }) => {
   const [image, setImage] = useState();
   const [loaded, setLoaded] = useState(false);
-  const imgRef = useRef();
+  const imgRef = useRef(null);
 
   useEffect(() => {
     setImage(getResourceImage(resource, size, region));
+
+    // @ts-ignore
     if (imgRef?.current && imgRef?.current?.complete) setLoaded(true);
   }, []);
 
   return (
     <Wrapper>
       <Image
+        alt=""
         src={image}
         ref={imgRef}
         style={

components/Footer/Footer.tsx

@@ -4,7 +4,7 @@ import ThemeMode from "./ThemeMode";
 import { CollectionLink, FooterContent, FooterStyled } from "./Footer.styled";
 import Container from "../Shared/Container";
 
-const { collection } = process.env.CANOPY_CONFIG;
+const { collection } = process.env.CANOPY_CONFIG as any;
 
 const Footer = () => {
   return (

components/Footer/ThemeMode.tsx

@@ -1,7 +1,6 @@
 import React from "react";
 import { useTheme } from "next-themes";
 import { useEffect, useState } from "react";
-import Button from "../Shared/Button/Button";
 import { ButtonStyled } from "../Shared/Button/Button.styled";
 
 const ThemeMode = () => {

components/Grid/Grid.tsx

@@ -1,10 +1,17 @@
-import React from "react";
-import GridItem from "@/components/Grid/Item";
-import GridLoadMore from "@/components/Grid/LoadMore";
+import React, { ReactNode } from "react";
+import GridItem, { GridItemProps } from "@/components/Grid/Item";
 import { GridStyled } from "@/components/Grid/Grid.styled";
 import { width } from "@/styles/theme/media";
 
-const Grid = ({ children }) => {
+interface GridProps {
+  children: ReactNode | ReactNode[];
+}
+
+interface GridComposition {
+  Item: React.FC<GridItemProps>;
+}
+
+const Grid: GridComposition & React.FC<GridProps> = ({ children }) => {
   const columns = {
     default: 6,
     [width.xl]: 5,
@@ -15,13 +22,16 @@ const Grid = ({ children }) => {
   };
 
   return (
-    <GridStyled breakpointCols={columns} columnClassName="canopy-grid-column">
+    <GridStyled
+      breakpointCols={columns}
+      className="canopy-grid"
+      columnClassName="canopy-grid-column"
+    >
       {children}
     </GridStyled>
   );
 };
 
 Grid.Item = GridItem;
-Grid.LoadMore = GridLoadMore;
 
 export default Grid;

components/Grid/Item.tsx

@@ -2,7 +2,11 @@ import React from "react";
 import Card from "@/components/Card/Card";
 import { GridItem as ItemStyled } from "@/components/Grid/Grid.styled";
 
-const GridItem = ({ item }) => {
+export interface GridItemProps {
+  item: any;
+}
+
+const GridItem: React.FC<GridItemProps> = ({ item }) => {
   if (!item) return <></>;
 
   return (

components/Header/Header.styled.tsx

@@ -1,6 +1,5 @@
 import { styled } from "@/stitches";
 import { slateA } from "@radix-ui/colors";
-import { ButtonStyled } from "../Shared/Button/Button.styled";
 
 const Title = styled("span", {
   display: "flex",

components/Header/Header.tsx

@@ -9,13 +9,14 @@ import { Actions, ResponsiveActions } from "./Header.styled";
 import { HamburgerMenuIcon } from "@radix-ui/react-icons";
 import { useRouter } from "next/router";
 
+// @ts-ignore
 const mapEnabled = process.env.CANOPY_CONFIG.map.enabled;
 
 const navItems = [
   { path: "/works", text: "Works", type: "link" },
   { path: "/metadata", text: "Metadata", type: "link" },
   { path: "/about", text: "About", type: "link" },
-  ...(mapEnabled ? [{ path: "/map", text: "Map", type: "link" }] : [])
+  ...(mapEnabled ? [{ path: "/map", text: "Map", type: "link" }] : []),
 ];
 
 const Header = () => {

components/Hero/Hero.styled.ts

@@ -1,11 +1,5 @@
 import { styled } from "@/stitches";
-import {
-  indigo,
-  indigoDarkA,
-  slate,
-  slateA,
-  slateDarkA,
-} from "@radix-ui/colors";
+import { indigo, slate, slateA, slateDarkA } from "@radix-ui/colors";
 import { ContainerStyled } from "../Shared/Container";
 
 /* eslint sort-keys: 0 */

components/Hero/Hero.tsx

@@ -3,14 +3,12 @@ import "swiper/css/effect-fade";
 import "swiper/css/navigation";
 import "swiper/css/pagination";
 import { Autoplay, EffectFade, Keyboard, Navigation } from "swiper";
-import { Label, Summary, Thumbnail } from "@samvera/nectar-iiif";
+import { Label, Thumbnail } from "@samvera/nectar-iiif";
 import { Swiper, SwiperSlide } from "swiper/react";
-import { Button } from "@nulib/design-system";
 import { HeroStyled } from "@/components/Hero/Hero.styled";
 import Link from "next/link";
 import React from "react";
 import Container from "../Shared/Container";
-import { ArrowRightIcon } from "@radix-ui/react-icons";
 
 interface HeroProps {
   collection?: any;
@@ -36,7 +34,7 @@ const Hero: React.FC<HeroProps> = ({ collection }) => {
         slidesPerView={1}
         speed={200}
       >
-        {collection.items.map((item) => (
+        {collection.items.map((item: any) => (
           <SwiperSlide key={item.id}>
             <figure>
               <Link href={item.homepage[0].id}>

components/Map/Map.tsx

@@ -1,42 +1,61 @@
 import React from "react";
-import {MapContainer, TileLayer, Marker, Popup} from "react-leaflet";
-import 'leaflet/dist/leaflet.css';
-import L from 'leaflet';
+import { MapContainer, TileLayer, Marker, Popup } from "react-leaflet";
+import "leaflet/dist/leaflet.css";
+import L from "leaflet";
 import Link from "next/link";
-import {Label, Thumbnail} from "@samvera/nectar-iiif";
+import { Label, Thumbnail } from "@samvera/nectar-iiif";
 import Container from "../Shared/Container";
-import {MapStyled} from "./Map.styled";
-import {getLabel} from "../../hooks/getLabel";
+import { MapStyled } from "./Map.styled";
+import { getLabel } from "../../hooks/getLabel";
+import { InternationalString } from "@iiif/presentation-3";
 
 const icon = L.icon({
   iconUrl: "/images/marker-icon.png",
-  iconSize: [24,36],
-  iconAnchor: [12,36]
+  iconSize: [24, 36],
+  iconAnchor: [12, 36],
 });
 
-const Map =({manifests, bounds}) => {
-  if (bounds.length < 1){
-    bounds = [[-0.09, 51.505]]
+interface MapProps {
+  manifests: any;
+  bounds: any;
+}
+
+const Map: React.FC<MapProps> = ({ manifests, bounds }) => {
+  if (bounds.length < 1) {
+    bounds = [[-0.09, 51.505]];
   }
   return (
     <MapStyled>
-      <MapContainer className={"map-container"} bounds={bounds} center={bounds[0]} zoom={8} scrollWheelZoom={false}>
+      <MapContainer
+        className={"map-container"}
+        bounds={bounds}
+        center={bounds[0]}
+        zoom={8}
+        scrollWheelZoom={false}
+      >
         <TileLayer
           attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
           url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
         />
-        {
-          manifests.map((item) => (
-            item.features.map((feature) => (
-              <Marker position={feature.geometry.coordinates.reverse()} icon={icon}>
-                <Popup>
+        {manifests.map((item: any) =>
+          item.features.map((feature: any, index: any) => (
+            <Marker
+              position={feature.geometry.coordinates.reverse()}
+              icon={icon}
+              key={index}
+            >
+              <Popup>
                 <figure>
                   <Link href={item.slug}>
-                    <Thumbnail thumbnail={item.thumbnail}/>
+                    <Thumbnail thumbnail={item.thumbnail} />
                     <figcaption>
                       <Container className="slide-inner" isFlex>
                         <Label
-                          label={getLabel(feature.properties.label)}
+                          label={
+                            getLabel(
+                              feature.properties.label
+                            ) as unknown as InternationalString
+                          }
                           as="span"
                           className="slide-label"
                         />
@@ -46,14 +65,11 @@ const Map =({manifests, bounds}) => {
                 </figure>
               </Popup>
             </Marker>
-            )
-          )
-        )
-      )}
+          ))
+        )}
       </MapContainer>
     </MapStyled>
-  )
-
+  );
 };
 
-export default Map;
+export default Map;