From dba08a5c6507cf73c425ecaa2f73da90ee6f261c Mon Sep 17 00:00:00 2001
From: Josep Jaume Rey <josepjaume@gmail.com>
Date: Tue, 8 Oct 2024 18:11:47 +0200
Subject: [PATCH] Add exports (#663)

---
 .../Navigation/Sidebar/Menu/index.tsx            | 13 +++++++------
 lib/experimental/Navigation/Sidebar/index.tsx    |  2 ++
 .../Navigation/Tabs/index.stories.tsx            | 16 ++++++++--------
 lib/experimental/Navigation/Tabs/index.tsx       | 16 +++++++---------
 lib/experimental/Navigation/exports.tsx          |  2 ++
 lib/experimental/Navigation/utils.tsx            |  5 +++++
 lib/experimental/exports.ts                      |  1 +
 lib/lib/linkHandler.tsx                          |  6 ++++--
 8 files changed, 36 insertions(+), 25 deletions(-)
 create mode 100644 lib/experimental/Navigation/Sidebar/index.tsx
 create mode 100644 lib/experimental/Navigation/exports.tsx
 create mode 100644 lib/experimental/Navigation/utils.tsx

diff --git a/lib/experimental/Navigation/Sidebar/Menu/index.tsx b/lib/experimental/Navigation/Sidebar/Menu/index.tsx
index 36aca0ee..72d6eb1e 100644
--- a/lib/experimental/Navigation/Sidebar/Menu/index.tsx
+++ b/lib/experimental/Navigation/Sidebar/Menu/index.tsx
@@ -9,15 +9,13 @@ import {
 } from "@/ui/collapsible"
 import { AnimatePresence, motion } from "framer-motion"
 import React from "react"
+import { NavigationItem } from "../../utils"
 
 type IconName = keyof typeof Icons
 
-interface MenuItem {
-  label: string
+interface MenuItem extends NavigationItem {
   icon: IconName
   badge?: number
-  href: string
-  exactMatch?: boolean
 }
 
 interface MenuCategory {
@@ -58,11 +56,14 @@ const MenuItemContent = ({
 
 const MenuItem = ({ item }: { item: MenuItem }) => {
   const { isActive } = useNavigation()
-  const active = isActive(item.href, { exact: item.exactMatch })
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const { label, ...props } = item
+
+  const active = isActive(props.href, { exact: props.exactMatch })
 
   return (
     <Link
-      href={item.href}
+      {...props}
       className={cn(
         "flex cursor-pointer items-center rounded py-1.5 pl-1.5 pr-2 no-underline transition-colors",
         focusRing(),
diff --git a/lib/experimental/Navigation/Sidebar/index.tsx b/lib/experimental/Navigation/Sidebar/index.tsx
new file mode 100644
index 00000000..cb6e4fbb
--- /dev/null
+++ b/lib/experimental/Navigation/Sidebar/index.tsx
@@ -0,0 +1,2 @@
+export * from "./Menu"
+export * from "./Searchbar"
diff --git a/lib/experimental/Navigation/Tabs/index.stories.tsx b/lib/experimental/Navigation/Tabs/index.stories.tsx
index 3f53fa4b..953d9510 100644
--- a/lib/experimental/Navigation/Tabs/index.stories.tsx
+++ b/lib/experimental/Navigation/Tabs/index.stories.tsx
@@ -1,13 +1,13 @@
 import { useNavigation } from "@/lib/linkHandler"
 import type { Meta, StoryObj } from "@storybook/react"
-import { Tabs } from "."
+import { TabItem, Tabs } from "."
 
-const tabItems = [
-  { label: "Overview", link: "/" },
-  { label: "Courses", link: "/courses" },
-  { label: "Categories", link: "/categories" },
-  { label: "Catalog", link: "/catalog" },
-  { label: "Requests", link: "/requests" },
+const tabItems: TabItem[] = [
+  { label: "Overview", href: "/", exactMatch: true },
+  { label: "Courses", href: "/courses" },
+  { label: "Categories", href: "/categories" },
+  { label: "Catalog", href: "/catalog" },
+  { label: "Requests", href: "/requests" },
 ]
 
 const meta: Meta<typeof Tabs> = {
@@ -21,7 +21,7 @@ const meta: Meta<typeof Tabs> = {
   render: ({ secondary = false }: { secondary?: boolean }) => {
     const { isActive } = useNavigation()
     const activeTab = tabItems.find((tab) =>
-      isActive(tab.link, { exact: true })
+      isActive(tab.href, { exact: true })
     )
 
     return (
diff --git a/lib/experimental/Navigation/Tabs/index.tsx b/lib/experimental/Navigation/Tabs/index.tsx
index abd32d5b..1857aeab 100644
--- a/lib/experimental/Navigation/Tabs/index.tsx
+++ b/lib/experimental/Navigation/Tabs/index.tsx
@@ -1,10 +1,8 @@
 import { Link, useNavigation } from "@/lib/linkHandler"
 import { TabNavigation, TabNavigationLink } from "@/ui/tab-navigation"
+import { NavigationItem } from "../utils"
 
-interface TabItem {
-  label: string
-  link: string
-}
+export type TabItem = NavigationItem
 
 interface TabsProps {
   tabs: TabItem[]
@@ -16,15 +14,15 @@ export function Tabs({ tabs, secondary = false }: TabsProps) {
 
   return (
     <TabNavigation secondary={secondary}>
-      {tabs.map((tab) => (
+      {tabs.map(({ label, ...props }, index) => (
         <TabNavigationLink
-          key={tab.label}
-          active={isActive(tab.link, { exact: true })}
-          href={tab.link}
+          key={index}
+          active={isActive(props.href, { exact: props.exactMatch })}
+          href={props.href}
           secondary={secondary}
           asChild
         >
-          <Link href={tab.link}>{tab.label}</Link>
+          <Link {...props}>{label}</Link>
         </TabNavigationLink>
       ))}
     </TabNavigation>
diff --git a/lib/experimental/Navigation/exports.tsx b/lib/experimental/Navigation/exports.tsx
new file mode 100644
index 00000000..b0cc7fb1
--- /dev/null
+++ b/lib/experimental/Navigation/exports.tsx
@@ -0,0 +1,2 @@
+export * from "./Sidebar"
+export * from "./Tabs"
diff --git a/lib/experimental/Navigation/utils.tsx b/lib/experimental/Navigation/utils.tsx
new file mode 100644
index 00000000..ba7d8972
--- /dev/null
+++ b/lib/experimental/Navigation/utils.tsx
@@ -0,0 +1,5 @@
+import { LinkProps } from "@/lib/linkHandler"
+
+export type NavigationItem = Pick<LinkProps, "href" | "exactMatch"> & {
+  label: string
+}
diff --git a/lib/experimental/exports.ts b/lib/experimental/exports.ts
index 5b99114d..dfdf1417 100644
--- a/lib/experimental/exports.ts
+++ b/lib/experimental/exports.ts
@@ -3,6 +3,7 @@ import { ScrollArea as ScrollAreaComponent } from "./Utilities/ScrollArea"
 
 export * from "./Forms/exports"
 export * from "./Layouts/exports"
+export * from "./Navigation/exports"
 export * from "./Overlays/exports"
 export * from "./Utilities/exports"
 export * from "./Widgets/exports"
diff --git a/lib/lib/linkHandler.tsx b/lib/lib/linkHandler.tsx
index 0c6494bf..f96f4824 100644
--- a/lib/lib/linkHandler.tsx
+++ b/lib/lib/linkHandler.tsx
@@ -39,7 +39,9 @@ export const useLinkContext = () => {
   }
 }
 
-export type LinkProps = AnchorHTMLAttributes<HTMLAnchorElement>
+export type LinkProps = AnchorHTMLAttributes<HTMLAnchorElement> & {
+  exactMatch?: boolean
+}
 
 export const useNavigation = () => {
   const { currentPath } = useLinkContext()
@@ -65,7 +67,7 @@ export const Link = forwardRef<HTMLAnchorElement, LinkProps>(
     const { isActive } = useNavigation()
 
     const overridenProps = {
-      "data-is-active": isActive(props.href) || undefined,
+      "data-is-active": isActive(props.href, { exact: props.exactMatch }),
       ...props,
     }