fix: fix navigation (#222)

mittwald · Mar 13, 2024 · bcbbe2e · bcbbe2e · github-actions · Mar 13, 2024
1 parent ff8502f
commit bcbbe2e
Show file tree

Hide file tree

Showing 5 changed files with 32 additions and 16 deletions.
diff --git a/packages/components/src/components/Navigation/components/NavigationItem/NavigationItem.tsx b/packages/components/src/components/Navigation/components/NavigationItem/NavigationItem.tsx
@@ -1,18 +1,21 @@
-import React, { FC, PropsWithChildren } from "react";
+import React, { ComponentProps, ComponentType, PropsWithChildren } from "react";
+import * as Aria from "react-aria-components";
 import styles from "./NavigationItem.module.scss";
 import { PropsContext, PropsContextProvider } from "@/lib/propsContext";
-import * as Aria from "react-aria-components";
-import clsx from "clsx";
 
 export interface NavigationItemProps
-  extends PropsWithChildren<Omit<Aria.LinkProps, "children">> {
+  extends PropsWithChildren<Omit<Aria.LinkProps, "children" | "slot">> {
   isCurrent?: boolean;
+  linkComponent?: ComponentType<Omit<ComponentProps<"a">, "ref">>;
 }
 
-export const NavigationItem: FC<NavigationItemProps> = (props) => {
-  const { children, isCurrent, className, ...rest } = props;
-
-  const rootClassName = clsx(styles.navigationItem, className);
+export function NavigationItem(props: NavigationItemProps) {
+  const {
+    isCurrent,
+    children,
+    linkComponent: Link = Aria.Link,
+    ...linkProps
+  } = props;
 
   const propsContext: PropsContext = {
     Text: {
@@ -25,15 +28,15 @@ export const NavigationItem: FC<NavigationItemProps> = (props) => {
 
   return (
     <li>
-      <Aria.Link
-        className={rootClassName}
+      <Link
+        {...linkProps}
+        className={styles.navigationItem}
         aria-current={isCurrent ? "page" : false}
-        {...rest}
       >
         <PropsContextProvider props={propsContext}>
           {children}
         </PropsContextProvider>
-      </Aria.Link>
+      </Link>
     </li>
   );
-};
+}
diff --git a/packages/docs/src/app/_components/layout/HeaderNavigation/HeaderNavigation.tsx b/packages/docs/src/app/_components/layout/HeaderNavigation/HeaderNavigation.tsx
@@ -8,6 +8,7 @@ import { groupBy } from "remeda";
 import styles from "./HeaderNavigation.module.scss";
 import { GroupText } from "@/app/_components/layout/MainNavigation/components/GroupText";
 import { usePathname } from "next/navigation";
+import { NextJsNavigationItemLink } from "@/app/_components/layout/MainNavigation/components/NextJsNavigationItemLink";
 
 interface Props {
   docs: SerializedMdxFile[];
@@ -25,6 +26,7 @@ const HeaderNavigation: FC<Props> = (props) => {
       href={mdxFiles[0].pathname}
       key={mdxFiles[0].pathname}
       isCurrent={currentPathname.includes(group)}
+      linkComponent={NextJsNavigationItemLink}
     >
       <GroupText>{group}</GroupText>
     </NavigationItem>

diff --git a/packages/docs/src/app/_components/layout/MainNavigation/MainNavigation.tsx b/packages/docs/src/app/_components/layout/MainNavigation/MainNavigation.tsx
@@ -9,6 +9,7 @@ import styles from "./MainNavigation.module.scss";
 import { MdxFile, SerializedMdxFile } from "@/lib/mdx/MdxFile";
 import { groupBy } from "remeda";
 import { GroupText } from "@/app/_components/layout/MainNavigation/components/GroupText";
+import { NextJsNavigationItemLink } from "@/app/_components/layout/MainNavigation/components/NextJsNavigationItemLink";
 
 interface Props {
   docs: SerializedMdxFile[];
@@ -31,6 +32,7 @@ const MainNavigation: FC<Props> = (props) => {
         key={mdxFile.pathname}
         href={mdxFile.pathname}
         isCurrent={mdxFile.pathname === currentPathname}
+        linkComponent={NextJsNavigationItemLink}
       >
         {mdxFile.getNavTitle()}
       </NavigationItem>

diff --git a/...es/docs/src/app/_components/layout/MainNavigation/components/NextJsNavigationItemLink.tsx b/...es/docs/src/app/_components/layout/MainNavigation/components/NextJsNavigationItemLink.tsx
@@ -0,0 +1,9 @@
+import React, { ComponentProps, forwardRef } from "react";
+import Link from "next/link";
+
+export const NextJsNavigationItemLink = forwardRef<
+  HTMLAnchorElement,
+  Omit<ComponentProps<"a">, "ref">
+>(function NavigationItemLink(props, ref) {
+  return <Link href={props.href ?? "/"} {...props} ref={ref} />;
+});
diff --git a/packages/docs/src/lib/liveCode/dynamicImports.ts b/packages/docs/src/lib/liveCode/dynamicImports.ts
@@ -2,7 +2,7 @@
 /* auto-generated file */
 import { ImportMapping } from "@/lib/liveCode/types";
 import { lazy } from "react";
-import { NavigationItem as I22 } from "@mittwald/flow-react-components/Navigation";
+import { NavigationItem as I23 } from "@mittwald/flow-react-components/Navigation";
 
 export const liveCodeEditorGlobalImports: ImportMapping = {
   "ExampleSvg:@/content/01-getting-started/stylesheet/examples/components/ExampleSvg": lazy(() => import("@/content/01-getting-started/stylesheet/examples/components/ExampleSvg").then(module => ({ default: module.ExampleSvg } ))),
@@ -11,6 +11,7 @@ export const liveCodeEditorGlobalImports: ImportMapping = {
 "Image:@mittwald/flow-react-components/Image": lazy(() => import("@mittwald/flow-react-components/Image").then(module => ({ default: module.Image } ))),
 "Button:@mittwald/flow-react-components/Button": lazy(() => import("@mittwald/flow-react-components/Button").then(module => ({ default: module.Button } ))),
 "IconHome:@mittwald/flow-react-components/Icons": lazy(() => import("@mittwald/flow-react-components/Icons").then(module => ({ default: module.IconHome } ))),
+"Text:@mittwald/flow-react-components/Text": lazy(() => import("@mittwald/flow-react-components/Text").then(module => ({ default: module.Text } ))),
 "IconChevronDown:@mittwald/flow-react-components/Icons": lazy(() => import("@mittwald/flow-react-components/Icons").then(module => ({ default: module.IconChevronDown } ))),
 "Checkbox:@mittwald/flow-react-components/Checkbox": lazy(() => import("@mittwald/flow-react-components/Checkbox").then(module => ({ default: module.Checkbox } ))),
 "ColumnLayout:@mittwald/flow-react-components/ColumnLayout": lazy(() => import("@mittwald/flow-react-components/ColumnLayout").then(module => ({ default: module.ColumnLayout } ))),
@@ -22,13 +23,12 @@ export const liveCodeEditorGlobalImports: ImportMapping = {
 "IconStar:@tabler/icons-react": lazy(() => import("@tabler/icons-react").then(module => ({ default: module.IconStar } ))),
 "InlineAlert:@mittwald/flow-react-components/InlineAlert": lazy(() => import("@mittwald/flow-react-components/InlineAlert").then(module => ({ default: module.InlineAlert } ))),
 "Content:@mittwald/flow-react-components/Content": lazy(() => import("@mittwald/flow-react-components/Content").then(module => ({ default: module.Content } ))),
-"Text:@mittwald/flow-react-components/Text": lazy(() => import("@mittwald/flow-react-components/Text").then(module => ({ default: module.Text } ))),
 "InlineCode:@mittwald/flow-react-components/InlineCode": lazy(() => import("@mittwald/flow-react-components/InlineCode").then(module => ({ default: module.InlineCode } ))),
 "LabeledValue:@mittwald/flow-react-components/LabeledValue": lazy(() => import("@mittwald/flow-react-components/LabeledValue").then(module => ({ default: module.LabeledValue } ))),
 "Link:@mittwald/flow-react-components/Link": lazy(() => import("@mittwald/flow-react-components/Link").then(module => ({ default: module.Link } ))),
 "LayoutCard:@mittwald/flow-react-components/LayoutCard": lazy(() => import("@mittwald/flow-react-components/LayoutCard").then(module => ({ default: module.LayoutCard } ))),
 "Navigation:@mittwald/flow-react-components/Navigation": lazy(() => import("@mittwald/flow-react-components/Navigation").then(module => ({ default: module.Navigation } ))),
-"NavigationItem:@mittwald/flow-react-components/Navigation": I22,
+"NavigationItem:@mittwald/flow-react-components/Navigation": I23,
 "IconCustomer:@mittwald/flow-react-components/Icons": lazy(() => import("@mittwald/flow-react-components/Icons").then(module => ({ default: module.IconCustomer } ))),
 "IconProject:@mittwald/flow-react-components/Icons": lazy(() => import("@mittwald/flow-react-components/Icons").then(module => ({ default: module.IconProject } ))),
 "IconServer:@mittwald/flow-react-components/Icons": lazy(() => import("@mittwald/flow-react-components/Icons").then(module => ({ default: module.IconServer } ))),
St.^❔	Category	Percentage	Covered / Total
🟢	Statements	98.18%	108/110
🟢	Branches	93.75%	30/32
🟢	Functions	100%	29/29
🟢	Lines	98.15%	106/108