refactor: no explicit any

enabled eslint rule no-explicit-any and fixed reported errors

.eslintrc.cjs

@@ -31,7 +31,6 @@ module.exports = {
     },
   },
   rules: {
-    "@typescript-eslint/no-explicit-any": "off", // TODO
     "unused-imports/no-unused-imports": "error",
     "import/no-named-as-default": "off",
     "import/no-unresolved": "error",

src/app/(main)/layout.tsx

@@ -18,7 +18,7 @@ import { loadQuery } from "studio/lib/store";
 
 import styles from "./layout.module.css";
 
-const hasValidData = (data: any) => data && Object.keys(data).length > 0;
+const hasValidData = (data: unknown) => data && Object.keys(data).length > 0;
 
 export default async function Layout({
   children,

src/app/api/fetchData/route.ts

@@ -8,7 +8,7 @@ const clientWithToken = client.withConfig({ token });
 
 interface FetchRequestBody {
   query: string;
-  params?: Record<string, any>;
+  params?: Record<string, unknown>;
 }
 
 export async function POST(req: Request) {

src/components/richText/RichText.tsx

@@ -1,16 +1,19 @@
 "use client";
 
-import { PortableText } from "@portabletext/react";
+import { PortableText, PortableTextReactComponents } from "@portabletext/react";
+import { PortableTextObject } from "@sanity/types";
+import { ReactNode } from "react";
 
 import Text from "src/components/text/Text";
 import textStyles from "src/components/text/text.module.css";
 import { useConvertSanityImageToNextImage } from "src/utils/hooks/useConvertImage";
+import { getReactNodeTextContent } from "src/utils/reactNode";
 
 import styles from "./richText.module.css";
 
 type Children = {
   _type: string;
-  marks: any[];
+  marks: string[];
   text: string;
   _key: string;
 };
@@ -27,11 +30,11 @@ export type PortableTextBlock = {
     _type: string;
   };
   alt?: string;
-  markDefs?: any[];
+  markDefs?: PortableTextObject[];
 };
 
-const formatId = (children: any): string => {
-  const text = children.join(" ");
+const formatId = (children: ReactNode): string => {
+  const text = getReactNodeTextContent(children);
 
   return text
     .toLowerCase()
@@ -44,36 +47,32 @@ const SanityImage = ({ value }: { value: PortableTextBlock }) => {
   return <div className={styles.image}>{ImageElement}</div>;
 };
 
-const myPortableTextComponents = {
+const myPortableTextComponents: Partial<PortableTextReactComponents> = {
   block: {
-    h2: ({ children }: any) => (
+    h2: ({ children }) => (
       <Text type="h2" id={formatId(children)}>
         {children}
       </Text>
     ),
-    h3: ({ children }: any) => (
+    h3: ({ children }) => (
       <Text type="h3" id={formatId(children)}>
         {children}
       </Text>
     ),
-    normal: ({ children }: any) => <Text type="body">{children}</Text>,
-    blockquote: ({ children }: any) => (
+    normal: ({ children }) => <Text type="body">{children}</Text>,
+    blockquote: ({ children }) => (
       <blockquote className={`${styles.blockquote} ${textStyles.body}`}>
         {children}
       </blockquote>
     ),
   },
   list: {
-    bullet: ({ children }: any) => <ul className={styles.list}>{children}</ul>,
-    number: ({ children }: any) => <ol className={styles.list}>{children}</ol>,
+    bullet: ({ children }) => <ul className={styles.list}>{children}</ul>,
+    number: ({ children }) => <ol className={styles.list}>{children}</ol>,
   },
   listItem: {
-    bullet: ({ children }: any) => (
-      <li className={textStyles.body}>{children}</li>
-    ),
-    number: ({ children }: any) => (
-      <li className={textStyles.body}>{children}</li>
-    ),
+    bullet: ({ children }) => <li className={textStyles.body}>{children}</li>,
+    number: ({ children }) => <li className={textStyles.body}>{children}</li>,
   },
   types: {
     image: SanityImage,

src/components/sections/callout/Callout.tsx

@@ -1,4 +1,4 @@
-import { PortableText } from "@portabletext/react";
+import { PortableText, PortableTextReactComponents } from "@portabletext/react";
 
 import CustomLink from "src/components/link/CustomLink";
 import Text from "src/components/text/Text";
@@ -10,8 +10,8 @@ interface CalloutProps {
   callout: CalloutSection;
 }
 
-const myPortableTextComponents = {
-  block: ({ children }: any) => <Text type="bodySuperLarge">{children}</Text>,
+const myPortableTextComponents: Partial<PortableTextReactComponents> = {
+  block: ({ children }) => <Text type="bodySuperLarge">{children}</Text>,
 };
 
 const Callout = ({ callout }: CalloutProps) => {

src/components/sections/grid/Grid.tsx

@@ -1,5 +1,5 @@
 "use client";
-import { PortableText } from "@portabletext/react";
+import { PortableText, PortableTextReactComponents } from "@portabletext/react";
 
 import { PortableTextBlock } from "src/components/richText/RichText";
 import Text from "src/components/text/Text";
@@ -54,6 +54,6 @@ const Element = ({
   );
 };
 
-const myPortableTextComponents = {
-  block: ({ children }: any) => <Text type="small">{children}</Text>,
+const myPortableTextComponents: Partial<PortableTextReactComponents> = {
+  block: ({ children }) => <Text type="small">{children}</Text>,
 };

src/components/sections/logoSalad/LogoSalad.tsx

@@ -1,4 +1,4 @@
-import { PortableText } from "@portabletext/react";
+import { PortableText, PortableTextReactComponents } from "@portabletext/react";
 
 import Text from "src/components/text/Text";
 import { LogoSaladSection } from "studio/lib/interfaces/pages";
@@ -10,8 +10,8 @@ interface LogoSaladProps {
   logoSalad: LogoSaladSection;
 }
 
-const myPortableTextComponents = {
-  block: ({ children }: any) => <Text type="bodySuperLarge">{children}</Text>,
+const myPortableTextComponents: Partial<PortableTextReactComponents> = {
+  block: ({ children }) => <Text type="bodySuperLarge">{children}</Text>,
 };
 
 export const LogoSalad = ({ logoSalad }: LogoSaladProps) => {

src/post/lead/Lead.tsx

@@ -1,5 +1,5 @@
 "use client";
-import { PortableText } from "@portabletext/react";
+import { PortableText, PortableTextReactComponents } from "@portabletext/react";
 
 import { PortableTextBlock } from "src/components/richText/RichText";
 import Text from "src/components/text/Text";
@@ -8,8 +8,8 @@ import { IImage } from "studio/lib/interfaces/media";
 
 import styles from "./lead.module.css";
 
-const myPortableTextComponents = {
-  block: ({ children }: any) => <Text type="bodyLarge">{children}</Text>,
+const myPortableTextComponents: Partial<PortableTextReactComponents> = {
+  block: ({ children }) => <Text type="bodyLarge">{children}</Text>,
 };
 
 const Lead = ({

src/utils/reactNode.ts

@@ -0,0 +1,20 @@
+import { ReactNode, isValidElement } from "react";
+
+export function getReactNodeTextContent(node: ReactNode): string {
+  if (typeof node === "string" || typeof node === "number") {
+    return node.toString();
+  }
+
+  if (Array.isArray(node)) {
+    return node.map(getReactNodeTextContent).join("");
+  }
+
+  if (isValidElement(node)) {
+    const children = node.props.children;
+    if (children) {
+      return getReactNodeTextContent(children);
+    }
+  }
+
+  return "";
+}

src/utils/seo.ts

@@ -1,4 +1,5 @@
 import { toPlainText } from "@portabletext/toolkit";
+import type { QueryParams } from "@sanity/client";
 import { Metadata } from "next";
 
 import { PortableTextBlock } from "src/components/richText/RichText";
@@ -32,7 +33,7 @@ export const OPEN_GRAPH_IMAGE_DIMENSIONS = {
 
 export async function fetchSeoData(
   query: string,
-  variables?: any,
+  variables?: QueryParams | undefined,
 ): Promise<SeoData | null> {
   try {
     const { data } = await loadQuery<SeoData>(query, variables);
@@ -45,7 +46,7 @@ export async function fetchSeoData(
 
 export async function fetchPostSeoData(
   query: string,
-  variables?: any,
+  variables?: QueryParams | undefined,
 ): Promise<SeoData | null> {
   try {
     const { data } = await loadQuery<PostSeoData>(query, variables);

studio/components/AnchorSelect.tsx

@@ -1,17 +1,9 @@
 import { Button, Select, Stack } from "@sanity/ui";
 import React, { useEffect, useState } from "react";
-import { PatchEvent, set, unset, useFormValue } from "sanity";
+import { PatchEvent, StringInputProps, set, unset, useFormValue } from "sanity";
 
 import { fetchWithToken } from "studio/lib/fetchWithToken";
 
-interface AnchorSelectProps {
-  value?: string;
-  type: any;
-  onChange: (event: PatchEvent) => void;
-  path: any[];
-  schemaType: any;
-}
-
 interface AnchorItem {
   basicTitle?: string;
   value: string;
@@ -30,7 +22,7 @@ function fromCamelCase(value?: string) {
     }); // Capitalize the first letter
 }
 
-const AnchorSelect = ({ value, onChange, path }: AnchorSelectProps) => {
+const AnchorSelect = ({ value, onChange, path }: StringInputProps) => {
   const [listItems, setListItems] = useState<AnchorItem[]>([]);
 
   // Extract the internal link reference from the form value

studio/components/SoMeInputs.tsx

@@ -2,6 +2,8 @@ import { Box, Label, Select, Stack, TextInput } from "@sanity/ui";
 import React from "react";
 import { ObjectInputProps, set } from "sanity";
 
+import { SocialMediaLink } from "studio/lib/interfaces/socialMedia";
+
 export const SoMePlatforms: { [key: string]: string } = {
   facebook: "Facebook",
   x: "X",
@@ -23,10 +25,28 @@ const detectPlatformFromUrl = (url: string): string | null => {
   return null;
 };
 
-const SoMeInputs: React.FC<ObjectInputProps<Record<string, any>>> = ({
+function isSocialMediaLinkType(value: unknown): value is SocialMediaLink {
+  return (
+    typeof value === "object" &&
+    value !== null &&
+    "_type" in value &&
+    typeof value._type === "string" &&
+    "url" in value &&
+    typeof value.url === "string" &&
+    "platform" in value &&
+    typeof value.platform === "string"
+  );
+}
+
+const SoMeInputs: React.FC<ObjectInputProps<Record<string, unknown>>> = ({
   value = {},
   onChange,
 }) => {
+  if (!isSocialMediaLinkType(value)) {
+    console.error("Unexpected value type for SoMeInputs");
+    return;
+  }
+
   const handleUrlChange = (event: React.ChangeEvent<HTMLInputElement>) => {
     if (!onChange) return;
     const newUrl = event.target.value;
@@ -58,7 +78,7 @@ const SoMeInputs: React.FC<ObjectInputProps<Record<string, any>>> = ({
           <TextInput
             id={urlInputName}
             name={urlInputName}
-            value={value.url}
+            value={value && value.url}
             onChange={handleUrlChange}
             placeholder="Enter URL"
           />
@@ -72,7 +92,7 @@ const SoMeInputs: React.FC<ObjectInputProps<Record<string, any>>> = ({
           <Select
             id={platformInputName}
             name={platformInputName}
-            value={value.platform}
+            value={value && value.platform}
             onChange={handlePlatformChange}
           >
             <option value="">Select Platform</option>

studio/lib/fetchWithToken.ts

@@ -20,7 +20,7 @@
  */
 export const fetchWithToken = async <T>(
   query: string,
-  params?: Record<string, any>,
+  params?: Record<string, unknown>,
 ): Promise<T> => {
   const response = await fetch("/api/fetchData", {
     method: "POST",

studio/schemas/objects/link.ts

@@ -71,7 +71,7 @@ export const link = defineField({
         { type: lazyCompensationsID() },
       ],
       validation: (rule) =>
-        rule.custom((value: any, context: any) => {
+        rule.custom((value, context) => {
           const parent = context.parent as Parent;
           if (
             parent?.linkTitle &&