Use @chakra-ui/next-js (#792)

* Add as dependency * Replace all usages of the internal NextLink * Remove internal NextLink * Fix type miss
oBusk · Apr 13, 2023 · 397f8bc · 397f8bc · vercel · Apr 13, 2023
1 parent 2342bdf
commit 397f8bc
Show file tree

Hide file tree

Showing 8 changed files with 67 additions and 69 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -39,6 +39,7 @@
     },
     "dependencies": {
         "@chakra-ui/icons": "^2.0.18",
+        "@chakra-ui/next-js": "^2.1.2",
         "@chakra-ui/react": "2.5.5",
         "@emotion/react": "^11.10.6",
         "@emotion/styled": "^11.10.6",

diff --git a/src/components/DiffIntro/ViewTypeSwitch.tsx b/src/components/DiffIntro/ViewTypeSwitch.tsx
@@ -1,3 +1,4 @@
+import { Link } from "@chakra-ui/next-js";
 import {
     Button,
     ButtonGroup,
@@ -6,9 +7,8 @@ import {
     forwardRef,
 } from "@chakra-ui/react";
 import { useRouter } from "next/router";
-import type { DiffProps, ViewType } from "react-diff-view";
+import type { ViewType } from "react-diff-view";
 import { DIFF_TYPE_PARAM_NAME } from "^/pages/[...parts]";
-import { NextLink } from "../theme";
 
 export interface ViewTypeButtonProps extends ButtonProps {
     title: string;
@@ -21,7 +21,8 @@ const ViewTypeButton = forwardRef<ViewTypeButtonProps, typeof Button>(
         const router = useRouter();
 
         return (
-            <NextLink
+            <Button
+                as={Link}
                 href={{
                     query: {
                         ...router.query,
@@ -30,16 +31,15 @@ const ViewTypeButton = forwardRef<ViewTypeButtonProps, typeof Button>(
                 }}
                 replace
                 shallow
+                isActive={currentViewType === viewType}
+                _hover={{
+                    textDecoration: "none",
+                }}
+                {...props}
+                ref={ref}
             >
-                <Button
-                    as="a"
-                    isActive={currentViewType === viewType}
-                    {...props}
-                    ref={ref}
-                >
-                    {title}
-                </Button>
-            </NextLink>
+                {title}
+            </Button>
         );
     },
 );

diff --git a/src/components/Header/Header.tsx b/src/components/Header/Header.tsx
@@ -1,6 +1,6 @@
+import { Link } from "@chakra-ui/next-js";
 import { Box, Flex, FlexProps, Heading, HStack } from "@chakra-ui/react";
 import { FunctionComponent } from "react";
-import { NextLink } from "^/components/theme";
 import ColorModeToggle from "./ColorModeToggle";
 import { GithubLink } from "./GithubLink";
 import NavLink from "./NavLink";
@@ -22,20 +22,22 @@ const Header: FunctionComponent<FlexProps> = (props) => (
             <GithubLink variant="ghost" />
             <ColorModeToggle variant="ghost" />
         </HStack>
-        <NextLink href="/">
-            <Box
-                as="a"
-                transition="all 0.2s"
-                borderRadius="md"
-                _focus={{
-                    boxShadow: "outline",
-                }}
-            >
-                <Heading as="h1" fontSize={{ base: "md", sm: "xl", lg: "3xl" }}>
-                    npm-diff.app 📦🔃
-                </Heading>
-            </Box>
-        </NextLink>
+        <Link
+            as={Box}
+            href="/"
+            transition="all 0.2s"
+            borderRadius="md"
+            _focus={{
+                boxShadow: "outline",
+            }}
+            _hover={{
+                textDecoration: "none",
+            }}
+        >
+            <Heading as="h1" fontSize={{ base: "md", sm: "xl", lg: "3xl" }}>
+                npm-diff.app 📦🔃
+            </Heading>
+        </Link>
         <Flex flex="1 0 0px" justifyContent="flex-end">
             <NavLink href="/about">about</NavLink>/
             <NavLink href="/about/api">api</NavLink>

diff --git a/src/components/Header/NavLink.tsx b/src/components/Header/NavLink.tsx
@@ -1,13 +1,12 @@
-import { Link, LinkProps } from "@chakra-ui/react";
+import { Link, LinkProps } from "@chakra-ui/next-js";
 import { useRouter } from "next/router";
 import { FunctionComponent, useEffect, useState } from "react";
-import { NextLink } from "^/components/theme";
 
 export interface NavLinkProps extends LinkProps {
     href: string;
 }
 
-const NavLink: FunctionComponent<LinkProps> = ({
+const NavLink: FunctionComponent<NavLinkProps> = ({
     href = "",
     children,
     ...props
@@ -29,19 +28,18 @@ const NavLink: FunctionComponent<LinkProps> = ({
     }, [asPath, href]);
 
     return (
-        <NextLink href={href}>
-            <Link
-                opacity={isActive ? 0.4 : undefined}
-                transition="all 0.2s"
-                borderRadius="md"
-                _focus={{
-                    boxShadow: "outline",
-                }}
-                {...props}
-            >
-                {children}
-            </Link>
-        </NextLink>
+        <Link
+            href={href}
+            opacity={isActive ? 0.4 : undefined}
+            transition="all 0.2s"
+            borderRadius="md"
+            _focus={{
+                boxShadow: "outline",
+            }}
+            {...props}
+        >
+            {children}
+        </Link>
     );
 };
 

diff --git a/src/components/Landing/ExamplesList.tsx b/src/components/Landing/ExamplesList.tsx
@@ -1,6 +1,6 @@
-import { Heading, Link, Stack, StackProps } from "@chakra-ui/react";
+import { Link } from "@chakra-ui/next-js";
+import { Heading, Stack, StackProps } from "@chakra-ui/react";
 import { FunctionComponent } from "react";
-import { NextLink } from "^/components/theme";
 import EXAMPLES from "^/lib/examples";
 import { QueryParams } from "^/lib/query";
 
@@ -30,21 +30,18 @@ const ExamplesList: FunctionComponent<ExamplesListProps> = ({
                 Examples
             </Heading>
             {EXAMPLES.map((ex) => (
-                <NextLink
+                <Link
                     key={ex}
                     href={{
                         pathname: `/${ex}`,
                         query: { ...query },
                     }}
+                    onMouseOver={() => onMouseOver(ex)}
+                    onMouseOut={() => onMouseOut()}
+                    onClick={() => onClick()}
                 >
-                    <Link
-                        onMouseOver={() => onMouseOver(ex)}
-                        onMouseOut={() => onMouseOut()}
-                        onClick={() => onClick()}
-                    >
-                        {ex}
-                    </Link>
-                </NextLink>
+                    {ex}
+                </Link>
             ))}
         </Stack>
     );

diff --git a/src/components/theme/NextLink.tsx b/src/components/theme/NextLink.tsx
diff --git a/src/components/theme/index.ts b/src/components/theme/index.ts
@@ -5,7 +5,6 @@ import CollapsableBorderBox, {
     CollapsableBorderBoxProps,
 } from "./CollapsableBorderBox";
 import ExternalLink, { ExternalLinkProps } from "./ExternalLink";
-import NextLink, { NextLinkProps } from "./NextLink";
 import Span, { SpanProps } from "./Span";
 import Tooltip, { TooltipProps } from "./Tooltip";
 
@@ -15,7 +14,6 @@ export type {
     ButtonExpandBoxProps,
     CollapsableBorderBoxProps,
     ExternalLinkProps,
-    NextLinkProps,
     SpanProps,
     TooltipProps,
 };
@@ -26,7 +24,6 @@ export {
     ButtonExpandBox,
     CollapsableBorderBox,
     ExternalLink,
-    NextLink,
     Span,
     Tooltip,
 };