feat!: Search Portal V2

__tests__/components/Fields/BytesField.test.tsx

@@ -1,4 +1,3 @@
-import React from "react";
 import { render } from "../../../test-utils";
 import BytesField from "../../../src/components/Fields/BytesField";
 
@@ -17,4 +16,4 @@ describe("BytesField", () => {
     const { container } = render(<BytesField value={{}} />);
     expect(container.firstChild).toBeNull();
   });
-});
+});

__tests__/components/Fields/FallbackField.test.tsx

@@ -1,4 +1,3 @@
-import React from "react";
 import { render } from "../../../test-utils";
 import FallbackField from "../../../src/components/Fields/FallbackField";
 
@@ -11,7 +10,9 @@ describe("FallbackField", () => {
   it("renders primitive values", () => {
     const { getByText } = render(<FallbackField value={42} />);
     expect(getByText("42")).toBeInTheDocument();
-    expect(render(<FallbackField value="foo" />).getByText("foo")).toBeInTheDocument();
+    expect(
+      render(<FallbackField value="foo" />).getByText("foo"),
+    ).toBeInTheDocument();
     // Boolean values are rendered as strings, but may not be found directly
     const { container } = render(<FallbackField value={true} />);
     expect(container.textContent).toContain("true");
@@ -27,4 +28,4 @@ describe("FallbackField", () => {
     expect(getByText(/foo/)).toBeInTheDocument();
     expect(getByText(/bar/)).toBeInTheDocument();
   });
-});
+});

__tests__/components/Fields/ImageField.test.tsx

@@ -1,4 +1,3 @@
-import React from "react";
 import { render } from "../../../test-utils";
 import ImageField from "../../../src/components/Fields/ImageField";
 
@@ -9,12 +8,14 @@ describe("ImageField", () => {
   });
 
   it("renders for object src", () => {
-    const { container } = render(<ImageField value={{ src: "/test2.png", alt: "desc" }} />);
+    const { container } = render(
+      <ImageField value={{ src: "/test2.png", alt: "desc" }} />,
+    );
     expect(container.querySelector("img")).toBeInTheDocument();
   });
 
   it("renders nothing for invalid value", () => {
     const { container } = render(<ImageField value={42} />);
     expect(container.firstChild).toBeNull();
   });
-});
+});

__tests__/components/Fields/RgbaField.test.tsx

@@ -1,16 +1,14 @@
-import React from "react";
 import { render } from "../../../test-utils";
 import RgbaField from "../../../src/components/Fields/RgbaField";
 
 describe("RgbaField", () => {
   it("renders RGBA color", () => {
-    const { getByText, container } = render(<RgbaField value={[255,0,0,1]} />);
+    const { getByText } = render(<RgbaField value={[255, 0, 0, 1]} />);
     expect(getByText("[255,0,0,1]")).toBeInTheDocument();
-
   });
 
   it("renders nothing for invalid value", () => {
     const { container } = render(<RgbaField value={42} />);
     expect(container.firstChild).toBeNull();
   });
-});
+});

__tests__/components/Fields/TableField.test.tsx

@@ -1,4 +1,3 @@
-import React from "react";
 import { render } from "../../../test-utils";
 import TableField from "../../../src/components/Fields/TableField";
 
@@ -13,4 +12,4 @@ describe("TableField", () => {
     const { container } = render(<TableField value={42} />);
     expect(container.firstChild).toBeNull();
   });
-});
+});

__tests__/components/Result.test.tsx

@@ -1,4 +1,3 @@
-import React from "react";
 import { screen } from "@testing-library/react";
 import { render } from "../../test-utils";
 
@@ -10,7 +9,7 @@ import _STATIC from "../../static.json" with { type: "json" };
 
 describe("Result", () => {
   it("renders the result component correctly", async () => {
-    // @ts-expect-error
+    // @ts-expect-error Need to improve the `result` prop type definition
     render(<Result result={result} />);
     await screen.findByText(result.entries[0].content.title);
     expect(screen.getByRole("heading", { level: 1 })).toHaveTextContent(
@@ -24,7 +23,7 @@ describe("Result", () => {
      */
     _STATIC.data.attributes.components.Result.heading =
       "entries[0].content.purpose";
-    // @ts-expect-error
+    // @ts-expect-error Need to improve the `result` prop type definition
     render(<Result result={result} />);
     await screen.findByText(result.entries[0].content.purpose);
     expect(screen.getByRole("heading", { level: 1 })).toHaveTextContent(

eslint.config.mjs

@@ -0,0 +1,20 @@
+import { defineConfig, globalIgnores } from "eslint/config";
+import nextVitals from "eslint-config-next/core-web-vitals";
+import prettier from "eslint-config-prettier/flat";
+import nextTs from "eslint-config-next/typescript";
+
+const eslintConfig = defineConfig([
+  ...nextVitals,
+  ...nextTs,
+  prettier,
+  // Override default ignores of eslint-config-next.
+  globalIgnores([
+    // Default ignores of eslint-config-next:
+    ".next/**",
+    "out/**",
+    "build/**",
+    "next-env.d.ts",
+  ]),
+]);
+
+export default eslintConfig;

jest.setup.ts

@@ -1,7 +1 @@
 import "@testing-library/jest-dom";
-
-import { setConfig } from "next/config";
-import config from "./next.config.mjs";
-setConfig({
-  publicRuntimeConfig: config.publicRuntimeConfig,
-});

mdx-components.tsx

@@ -1,6 +1,6 @@
 import React from "react";
-import { Box, Code, Heading, Image, Link, List, Text } from "@chakra-ui/react";
-import { ExternalLinkIcon } from "@chakra-ui/icons";
+import { Code, Title, Image, List, Text, Anchor } from "@mantine/core";
+import { AnchorExternal } from "@/components/private/AnchorExternal";
 import NextLink from "next/link";
 import type { MDXComponents } from "mdx/types";
 import { getAbsoluteURL, isRelativePath } from "./src/utils/path";
@@ -9,86 +9,65 @@ export function useMDXComponents(components: MDXComponents): MDXComponents {
   return {
     ...components,
     ul(props) {
-      return (
-        <List styleType="disc" mb={2} paddingInlineStart="2em" {...props} />
-      );
+      return <List listStyleType="disc" {...props} />;
     },
     li(props) {
-      return <Box as="li" mb={1} {...props} />;
+      return <List.Item component="li" {...props} />;
     },
-    pre(props: any) {
+    pre(props) {
       return (
         <Code
           w="100%"
           py={3}
           px={1}
           border="1px solid"
-          borderColor="gray.300"
+          borderColor="gray"
           borderRadius={2}
           overflowX="auto"
           {...props}
         />
       );
     },
     code(props) {
-      return <Code as="code" fontSize="inherit" {...props} />;
+      return <Code component="code" fz="inherit" {...props} />;
     },
     p(props) {
-      return <Text as="p" my={2} lineHeight="tall" {...props} />;
+      return <Text component="p" {...props} />;
     },
     h1(props) {
-      return <Heading as="h1" size="xl" my={5} {...props} />;
+      return <Title order={1} {...props} />;
     },
     h2(props) {
-      return <Heading as="h2" size="lg" my={4} {...props} />;
+      return <Title order={2} {...props} />;
     },
     h3(props) {
-      return <Heading as="h3" size="md" my={3} {...props} />;
+      return <Title order={3} {...props} />;
     },
     h4(props) {
-      return <Heading as="h4" size="sm" my={2} {...props} />;
+      return <Title order={4} {...props} />;
     },
     h5(props) {
-      return <Heading as="h5" size="sm" my={1} {...props} />;
+      return <Title order={5} {...props} />;
     },
     img(props) {
       const { src, alt } = props;
       return <Image {...props} alt={alt || ""} src={getAbsoluteURL(src)} />;
     },
     a({ href, ...rest }) {
       if (!href) {
-        return <Link {...rest} href="#" />;
+        return <Anchor {...rest} href="#" />;
       }
       const isRelative = isRelativePath(href);
       if (isRelative) {
         /**
          * If the link is relative, use Next.js's `Link` component.
          */
-        return <Link {...rest} as={NextLink} href={href} />;
+        return <Anchor {...rest} component={NextLink} href={href} />;
       }
       /**
        * If the link is external, mark it as such.
        */
-      return (
-        <Link
-          {...rest}
-          target="_blank"
-          rel="noopener noreferrer"
-          href={href}
-          position="relative"
-          pr={4}
-          isExternal
-        >
-          {rest.children}
-          <ExternalLinkIcon
-            as="sup"
-            position="absolute"
-            top={0}
-            right={0}
-            fontSize="xs"
-          />
-        </Link>
-      );
+      return <AnchorExternal {...rest}>{rest.children}</AnchorExternal>;
     },
   };
 }

next.config.mjs

@@ -19,8 +19,8 @@ const nextConfig = {
   images: {
     unoptimized: true,
   },
-  publicRuntimeConfig: {
-    basePath: `${STATIC._static?.host?.base_path || ""}`,
+  env: {
+    BASE_PATH: STATIC._static?.host?.base_path || "",
   },
 };