refactor: Rearrange import statements in eslint.config.js

app/eslint.config.js

@@ -1,10 +1,10 @@
 // @ts-nocheck
 
-import eslint from "@eslint/js";
-import prettier from "eslint-plugin-prettier/recommended";
 import react from "eslint-plugin-react/configs/recommended.js";
-import globals from "globals";
+import prettier from "eslint-plugin-prettier/recommended";
 import tseslint from "typescript-eslint";
+import eslint from "@eslint/js";
+import globals from "globals";
 
 export default tseslint.config(
   {
@@ -33,14 +33,10 @@ export default tseslint.config(
   },
   {
     rules: {
-      "@typescript-eslint/no-unused-vars": [
-        1,
-        {
-          argsIgnorePattern: "^_",
-        },
-      ],
+      "@typescript-eslint/no-unused-vars": [1, { argsIgnorePattern: "^_" }],
       "@typescript-eslint/no-namespace": 0,
-      "react/react-in-jsx-scope": false,
+      "react/react-in-jsx-scope": "warn",
+      "react/jsx-filename-extension": [1, { extensions: [".tsx"] }],
     },
   },
 

app/hooks/useAutoComplete.ts

@@ -1,37 +0,0 @@
-import type { SearchResult } from "@/lib/search";
-
-import { useDebounce } from "./useDebounce";
-import { useState, useEffect, use } from "react";
-
-export function useAutoComplete(onSearch: (query: string) => Promise<SearchResult[]>) {
-  const [results, setResults] = useState<SearchResult[]>([]);
-  const [isLoading, setIsLoading] = useState(false);
-  const [isOpened, setIsOpened] = useState(false);
-  const [query, setQuery] = useDebounce();
-
-  useEffect(() => {
-    // Attach the event listener to the window
-    function handleKeyDown(event: KeyboardEvent) {
-      if (event.key === "Escape") {
-        setIsOpened(false);
-      } else if (event.key === "K" && (event.ctrlKey || event.metaKey)) {
-        event.preventDefault();
-        setIsOpened(true);
-      }
-    }
-
-    window.addEventListener("keydown", handleKeyDown);
-
-    return () => {
-      window.removeEventListener("keydown", handleKeyDown);
-    };
-  }, []);
-
-  return {
-    results,
-    isLoading,
-    isOpened,
-    query,
-    setQuery,
-  };
-}

app/layouts/LayoutDefault.tsx

@@ -27,7 +27,7 @@ function GitHubIcon(props: React.ComponentPropsWithoutRef<"svg">) {
 }
 
 function Header() {
-  let [isScrolled, setIsScrolled] = useState(false);
+  const [isScrolled, setIsScrolled] = useState(false);
 
   useEffect(() => {
     function onScroll() {

app/lib/search.ts

@@ -5,6 +5,8 @@ import glob from "fast-glob";
 import * as path from "path";
 import * as fs from "fs";
 
+type SearchOptionValue = string | number | boolean | null | undefined | object | unknown;
+
 const slugify = slugifyWithCounter();
 
 interface Node {
@@ -32,20 +34,22 @@ export interface SearchResult {
 
 function toString(node: Node): string {
   let str = node.type === "text" && typeof node.attributes?.content === "string" ? node.attributes.content : "";
+
   if ("children" in node) {
-    for (let child of node.children!) {
+    for (const child of node.children!) {
       str += toString(child);
     }
   }
+
   return str;
 }
 
 function extractSections(node: Node, sections: Section[], isRoot: boolean = true): void {
-  if (isRoot) {
-    slugify.reset();
-  }
+  if (isRoot) slugify.reset();
+
   if (node.type === "heading" || node.type === "paragraph") {
-    let content = toString(node).trim();
+    const content = toString(node).trim();
+
     if (node.type === "heading" && node.attributes?.level! <= 2) {
       let hash = node.attributes?.id ?? slugify(content);
       sections.push({ content, hash, subsections: [] });
@@ -53,7 +57,7 @@ function extractSections(node: Node, sections: Section[], isRoot: boolean = true
       sections[sections.length - 1].subsections.push(content);
     }
   } else if ("children" in node) {
-    for (let child of node.children!) {
+    for (const child of node.children!) {
       extractSections(child, sections, false);
     }
   }
@@ -111,18 +115,18 @@ export function buildSearchIndex(pagesDir: string): FlexSearch.Document<SearchRe
 export function search(
   sectionIndex: FlexSearch.Document<SearchResult>,
   query: string,
-  options: Record<string, any> = {},
+  options: Record<string, SearchOptionValue> = {},
 ): SearchResult[] {
   const results = sectionIndex.search(query, {
     ...options,
     enrich: true,
   });
 
-  if (results.length === 0) {
-    return [];
-  }
+  if (results.length === 0) return [];
 
-  return results[0].result.map((item: any) => ({
+  const searchResults = results[0].result as unknown as { id: string; doc: { title: string; pageTitle: string } }[];
+
+  return searchResults.map((item) => ({
     url: item.id,
     title: item.doc.title,
     pageTitle: item.doc.pageTitle,

app/lib/sections.ts

@@ -41,7 +41,8 @@ function isH3Node(node: Node): node is H3Node {
 
 function getNodeText(node: Node) {
   let text = "";
-  for (let child of node.children ?? []) {
+
+  for (const child of node.children ?? []) {
     if (child.type === "text") {
       text += child.attributes.content;
     }

app/markdoc/Tag.ts

@@ -3,8 +3,14 @@ import type { ReactNode } from "react";
 
 import { Tag as MarkdocTag } from "@markdoc/markdoc";
 
+type TagAttributesValue = string | number | boolean | null | undefined | object | unknown;
+
 export class Tag extends MarkdocTag {
-  constructor(name: string | ReactNode, attributes: Record<string, any>, children: RenderableTreeNode[]) {
+  constructor(
+    name: string | ReactNode,
+    attributes: Record<string, TagAttributesValue>,
+    children: RenderableTreeNode[],
+  ) {
     // Workaround for TypeScript's type system
     super(name as unknown as string, attributes, children);
   }

app/markdoc/nodes.tsx

@@ -8,7 +8,7 @@ import { Fence } from "@syntax/Fence";
 import { Tag } from "./Tag";
 import yaml from "js-yaml";
 
-let documentSlugifyMap = new Map();
+const documentSlugifyMap = new Map();
 
 const nodes = {
   document: {

app/markdoc/tags.tsx

@@ -36,10 +36,10 @@ const tags = {
       alt: { type: String },
       caption: { type: String },
     },
-    render: ({ src, alt = "", caption }: { src: string; alt: string; caption: string }) => (
+    render: (props: { src: string; alt: string; caption: string }) => (
       <figure>
-        <img src={src} alt={alt} loading="lazy" />
-        <figcaption>{caption}</figcaption>
+        <img src={props.src} alt={props.alt} loading="lazy" />
+        <figcaption>{props.caption}</figcaption>
       </figure>
     ),
   },
@@ -85,8 +85,8 @@ const tags = {
     },
   },
   img: {
-    render: ({ src, alt = "", className = "" }: { src: string; alt: string; className: string }) => (
-      <img src={src} alt={alt} className={className} loading="lazy" />
+    render: (props: { src: string; alt: string; className: string }) => (
+      <img src={props.src} alt={props.alt} className={props.className} loading="lazy" />
     ),
     attributes: {
       src: { type: String },

app/pages/+Head.tsx

@@ -1,4 +1,5 @@
 import logoUrl from "@/assets/logo.svg";
+import React from "react";
 
 export default function HeadDefault() {
   return (

app/pages/_error/+Page.tsx

@@ -1,8 +1,10 @@
 import { usePageContext } from "vike-react/usePageContext";
 import { Link } from "@/components/common/Link";
+import React from "react";
 
 export default function Page() {
   const { is404 } = usePageContext();
+
   if (is404) {
     return (
       <>
@@ -16,7 +18,7 @@ export default function Page() {
               Désolé, nous ne pouvons pas trouver la page que vous recherchez.
             </p>
             <Link href="/" className="mt-8 text-sm font-medium text-slate-900 dark:text-white">
-              Retour à l'accueil
+              Retour à l&apos;accueil
             </Link>
           </div>
         </div>

app/pages/index/+data.ts

@@ -9,7 +9,7 @@ import { render } from "vike/abort";
 
 export type Data = Awaited<ReturnType<typeof data>>;
 
-export async function data(pageContext: PageContext) {
+export async function data(_pageContext: PageContext) {
   const config = useConfig();
 
   const doc = await docsService.getDoc("docs", "index");

app/providers/ThemeProvider.tsx

@@ -1,5 +1,5 @@
 import { ThemeContext, type Theme } from "@/contexts/ThemeContext";
-import { useEffect, useState } from "react";
+import React, { useEffect, useState } from "react";
 
 type ThemeProviderProps = {
   children: React.ReactNode;

app/services/SnippetsService.ts

@@ -1,5 +1,3 @@
-import path from "path";
-
 type SnippetsCache = Map<string, string>;
 
 class SnippetsService {