Add exports (#663)

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(),

lib/experimental/Navigation/Sidebar/index.tsx

@@ -0,0 +1,2 @@
+export * from "./Menu"
+export * from "./Searchbar"

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 (

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>

lib/experimental/Navigation/exports.tsx

@@ -0,0 +1,2 @@
+export * from "./Sidebar"
+export * from "./Tabs"

lib/experimental/Navigation/utils.tsx

@@ -0,0 +1,5 @@
+import { LinkProps } from "@/lib/linkHandler"
+
+export type NavigationItem = Pick<LinkProps, "href" | "exactMatch"> & {
+ label: string
+}

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"

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,
  }