From 9f9ef37eaaeb731e470652260776683463af53f9 Mon Sep 17 00:00:00 2001
From: "eric.crowell" <eric.crowell@ecrow.dev>
Date: Tue, 18 Jun 2024 11:14:21 +0200
Subject: [PATCH] fix: Navigation now prop drills to maintain server component
 status

---
 .../src/components/Navigation/Navigation.tsx  |  2 +-
 .../Navigation/NavigationExtended.tsx         | 65 +++++++++----------
 .../Navigation/NavigationIsland.tsx           | 63 +++++++++---------
 .../Navigation/NavigationStandard.tsx         | 61 ++++++++---------
 ...avigationContext.ts => NavigationProps.ts} | 25 -------
 .../Navigation/data/NavigationProvider.tsx    | 22 -------
 .../parts/NavigationPart_Actions.tsx          | 13 ++--
 .../Navigation/parts/NavigationPart_Brand.tsx | 10 ++-
 .../Navigation/parts/NavigationPart_Links.tsx | 14 ++--
 .../Navigation/parts/NavigationPart_Menu.tsx  | 13 ++--
 .../parts/NavigationPart_MenuToggle.tsx       | 11 +++-
 11 files changed, 123 insertions(+), 176 deletions(-)
 rename packages/ui/src/components/Navigation/data/{NavigationContext.ts => NavigationProps.ts} (66%)
 delete mode 100644 packages/ui/src/components/Navigation/data/NavigationProvider.tsx

diff --git a/packages/ui/src/components/Navigation/Navigation.tsx b/packages/ui/src/components/Navigation/Navigation.tsx
index 50c2b8b..8c83b1b 100644
--- a/packages/ui/src/components/Navigation/Navigation.tsx
+++ b/packages/ui/src/components/Navigation/Navigation.tsx
@@ -1,4 +1,4 @@
-import type { NavigationProps } from './data/NavigationContext';
+import type { NavigationProps } from './data/NavigationProps';
 
 import { NavigationStandard } from './NavigationStandard';
 import { NavigationIsland } from './NavigationIsland';
diff --git a/packages/ui/src/components/Navigation/NavigationExtended.tsx b/packages/ui/src/components/Navigation/NavigationExtended.tsx
index 30671ce..78020b5 100644
--- a/packages/ui/src/components/Navigation/NavigationExtended.tsx
+++ b/packages/ui/src/components/Navigation/NavigationExtended.tsx
@@ -1,13 +1,10 @@
-'use client';
-
 import React from 'react';
 import { Navbar, NavbarContent } from '@nextui-org/react';
 import { clsx, clmg } from '@do-ob/core';
-import type { NavigationProps } from './data/NavigationContext';
+import type { NavigationProps } from './data/NavigationProps';
 import { NavigationPart_Brand } from './parts/NavigationPart_Brand';
 import { NavigationPart_Links } from './parts/NavigationPart_Links';
 import { NavigationPart_Actions } from './parts/NavigationPart_Actions';
-import { NavigationProvider } from './data/NavigationProvider';
 import { twColors } from '@do-ob/ui/utility';
 import { NavigationPart_Menu } from './parts/NavigationPart_Menu';
 import { NavigationPart_MenuToggle } from './parts/NavigationPart_MenuToggle';
@@ -19,37 +16,35 @@ export function NavigationExtended(props: NavigationProps) {
   const colors = twColors(props.color);
 
   return (
-    <NavigationProvider {...props}>
-      <Navbar
-        position={props.position}
-        height="8rem"
-        onMenuOpenChange={setIsMenuOpen}
-        className={clmg(clsx(props.color && colors, 'relative border-b-1 border-b-foreground-200/50', props.className))}
+    <Navbar
+      position={props.position}
+      height="8rem"
+      onMenuOpenChange={setIsMenuOpen}
+      className={clmg(clsx(props.color && colors, 'relative border-b-1 border-b-foreground-200/50', props.className))}
         
-      >
-        <NavbarContent justify="start" className="md:items-start md:pt-2">
-          <div className="relative z-10">
-            <NavigationPart_Brand />
-          </div>
-        </NavbarContent>
-
-        <NavbarContent justify="start" className="absolute hidden items-end md:flex">
-          <NavigationPart_Links />
-        </NavbarContent>
-
-        <NavbarContent justify="end" className="items-start pt-2">
-          <div className="hidden max-w-64 p-2 md:block">
-            <NavigationPart_Actions />
-          </div>
-          <NavigationPart_MenuToggle
-            isMenuOpen={isMenuOpen}
-            className="md:hidden"
-          />
-        </NavbarContent>
-
-        <NavigationPart_Menu />
-
-      </Navbar>
-    </NavigationProvider>
+    >
+      <NavbarContent justify="start" className="md:items-start md:pt-2">
+        <div className="relative z-10">
+          <NavigationPart_Brand base={props} />
+        </div>
+      </NavbarContent>
+
+      <NavbarContent justify="start" className="absolute hidden items-end md:flex">
+        <NavigationPart_Links base={props} />
+      </NavbarContent>
+
+      <NavbarContent justify="end" className="items-start pt-2">
+        <div className="hidden max-w-64 p-2 md:block">
+          <NavigationPart_Actions base={props} />
+        </div>
+        <NavigationPart_MenuToggle
+          isMenuOpen={isMenuOpen}
+          className="md:hidden"
+        />
+      </NavbarContent>
+
+      <NavigationPart_Menu base={props} />
+
+    </Navbar>
   );
 }
diff --git a/packages/ui/src/components/Navigation/NavigationIsland.tsx b/packages/ui/src/components/Navigation/NavigationIsland.tsx
index 1563688..4e22a19 100644
--- a/packages/ui/src/components/Navigation/NavigationIsland.tsx
+++ b/packages/ui/src/components/Navigation/NavigationIsland.tsx
@@ -1,11 +1,8 @@
-'use client';
-
 import React from 'react';
 import { Navbar, NavbarContent } from '@nextui-org/react';
 import { clsx, clmg } from '@do-ob/core';
 
-import type { NavigationProps } from './data/NavigationContext';
-import { NavigationProvider } from './data/NavigationProvider';
+import type { NavigationProps } from './data/NavigationProps';
 import { NavigationPart_Brand } from './parts/NavigationPart_Brand';
 import { NavigationPart_Links } from './parts/NavigationPart_Links';
 import { NavigationPart_Actions } from './parts/NavigationPart_Actions';
@@ -20,39 +17,37 @@ export function NavigationIsland(props: NavigationProps) {
   const colors = twColors(props.color);
 
   return (
-    <NavigationProvider {...props}>
-      <Navbar
-        position={props.position}
-        isBlurred={false}
-        onMenuOpenChange={setIsMenuOpen}
-        className="items-center justify-center"
-        height="5rem"
-      >
-        <NavbarContent justify="start" className="flex items-center">
-          <NavigationPart_Brand />
-        </NavbarContent>
-
-        {props.links && props.links.length > 0 && (
-          <NavbarContent justify="center" className="hidden lg:flex">
-            <div className={clmg(clsx(props.color && colors, 'flex rounded-full border-1 border-foreground-200/50 px-4', props.className))}>
-              <NavigationPart_Links />
-            </div>
-          </NavbarContent>
-        )}
-
-        <NavbarContent justify="end">
-          <div className="hidden max-w-64 lg:block">
-            <NavigationPart_Actions />
+    <Navbar
+      position={props.position}
+      isBlurred={false}
+      onMenuOpenChange={setIsMenuOpen}
+      className="items-center justify-center"
+      height="5rem"
+    >
+      <NavbarContent justify="start" className="flex items-center">
+        <NavigationPart_Brand base={props} />
+      </NavbarContent>
+
+      {props.links && props.links.length > 0 && (
+        <NavbarContent justify="center" className="hidden lg:flex">
+          <div className={clmg(clsx(props.color && colors, 'flex rounded-full border-1 border-foreground-200/50 px-4', props.className))}>
+            <NavigationPart_Links base={props} />
           </div>
-          <NavigationPart_MenuToggle
-            isMenuOpen={isMenuOpen}
-            className="md:hidden"
-          />
         </NavbarContent>
+      )}
+
+      <NavbarContent justify="end">
+        <div className="hidden max-w-64 lg:block">
+          <NavigationPart_Actions base={props} />
+        </div>
+        <NavigationPart_MenuToggle
+          isMenuOpen={isMenuOpen}
+          className="md:hidden"
+        />
+      </NavbarContent>
 
-        <NavigationPart_Menu />
+      <NavigationPart_Menu base={props} />
 
-      </Navbar>
-    </NavigationProvider>
+    </Navbar>
   );
 }
diff --git a/packages/ui/src/components/Navigation/NavigationStandard.tsx b/packages/ui/src/components/Navigation/NavigationStandard.tsx
index 48f6fa8..ec553ad 100644
--- a/packages/ui/src/components/Navigation/NavigationStandard.tsx
+++ b/packages/ui/src/components/Navigation/NavigationStandard.tsx
@@ -1,10 +1,7 @@
-'use client';
-
 import React from 'react';
 import { Navbar, NavbarContent } from '@nextui-org/react';
 import { clsx, clmg } from '@do-ob/core';
-import type { NavigationProps } from './data/NavigationContext';
-import { NavigationProvider } from './data/NavigationProvider';
+import type { NavigationProps } from './data/NavigationProps';
 import { NavigationPart_Brand } from './parts/NavigationPart_Brand';
 import { NavigationPart_Links } from './parts/NavigationPart_Links';
 import { NavigationPart_Actions } from './parts/NavigationPart_Actions';
@@ -19,35 +16,33 @@ export function NavigationStandard(props: NavigationProps) {
   const colors = twColors(props.color);
 
   return (
-    <NavigationProvider {...props}>
-      <Navbar
-        position={props.position}
-        height="4rem"
-        onMenuOpenChange={setIsMenuOpen}
-        className={clmg(clsx(props.color && colors, 'border-b-1 border-b-foreground-200/50', props.className))}
-      >
-        <NavbarContent justify="start">
-          <NavigationPart_Brand />
-        </NavbarContent>
-
-        <NavbarContent justify="center" className="hidden lg:flex">
-          <NavigationPart_Links />
-        </NavbarContent>
-
-        <NavbarContent justify="end">
-          <div className="hidden max-w-64 lg:block">
-            <NavigationPart_Actions />
-          </div>
-          <NavigationPart_MenuToggle
-            isMenuOpen={isMenuOpen}
-            className="md:hidden"
-          />
-        </NavbarContent>
-
-        <NavigationPart_Menu />
-
-      </Navbar>
-    </NavigationProvider>
+    <Navbar
+      position={props.position}
+      height="4rem"
+      onMenuOpenChange={setIsMenuOpen}
+      className={clmg(clsx(props.color && colors, 'border-b-1 border-b-foreground-200/50', props.className))}
+    >
+      <NavbarContent justify="start">
+        <NavigationPart_Brand base={props} />
+      </NavbarContent>
+
+      <NavbarContent justify="center" className="hidden lg:flex">
+        <NavigationPart_Links base={props} />
+      </NavbarContent>
+
+      <NavbarContent justify="end">
+        <div className="hidden max-w-64 lg:block">
+          <NavigationPart_Actions base={props} />
+        </div>
+        <NavigationPart_MenuToggle
+          isMenuOpen={isMenuOpen}
+          className="md:hidden"
+        />
+      </NavbarContent>
+
+      <NavigationPart_Menu base={props} />
+
+    </Navbar>
   );
 }
 
diff --git a/packages/ui/src/components/Navigation/data/NavigationContext.ts b/packages/ui/src/components/Navigation/data/NavigationProps.ts
similarity index 66%
rename from packages/ui/src/components/Navigation/data/NavigationContext.ts
rename to packages/ui/src/components/Navigation/data/NavigationProps.ts
index 8db469f..dd65ae2 100644
--- a/packages/ui/src/components/Navigation/data/NavigationContext.ts
+++ b/packages/ui/src/components/Navigation/data/NavigationProps.ts
@@ -1,7 +1,4 @@
-'use client';
-
 import { Link, SocialLinks, ThemeColor } from '@do-ob/ui/types';
-import { createContext } from 'react';
 
 /**
  * Context properties for the do-ob ui provider
@@ -72,25 +69,3 @@ export interface NavigationProps {
     popover?: string;
   }
 }
-
-/**
- * The context interface
- */
-export interface NavigationContextProps extends NavigationProps {
-  /**
-   * Compiled tailwind color classes
-   */
-  colors: [full: string, bg: string, text: string];
-}
-
-/**
- * Default properties for the do-ob ui context
- */
-export const navigationContextProps: NavigationContextProps = {
-  colors: [ '', '', '' ],
-};
-
-/**
- * The do-ob user interface (ui) context
- */
-export const NavigationContext = createContext<NavigationContextProps>(navigationContextProps);
diff --git a/packages/ui/src/components/Navigation/data/NavigationProvider.tsx b/packages/ui/src/components/Navigation/data/NavigationProvider.tsx
deleted file mode 100644
index bb19aa4..0000000
--- a/packages/ui/src/components/Navigation/data/NavigationProvider.tsx
+++ /dev/null
@@ -1,22 +0,0 @@
-'use client';
-
-import { twColors } from '@do-ob/ui/utility';
-import { NavigationContext, NavigationProps } from './NavigationContext';
-import { PropsWithChildren } from 'react';
-
-export function NavigationProvider({
-  children,
-  ...props
-}: PropsWithChildren<NavigationProps>) {
-
-  const value = {
-    ...props,
-    colors: twColors(props.color),
-  };
-
-  return (
-    <NavigationContext.Provider value={value}>
-      {children}
-    </NavigationContext.Provider>
-  );
-}
diff --git a/packages/ui/src/components/Navigation/parts/NavigationPart_Actions.tsx b/packages/ui/src/components/Navigation/parts/NavigationPart_Actions.tsx
index 4fa66d4..d5b4d17 100644
--- a/packages/ui/src/components/Navigation/parts/NavigationPart_Actions.tsx
+++ b/packages/ui/src/components/Navigation/parts/NavigationPart_Actions.tsx
@@ -1,17 +1,16 @@
-'use client';
-
 import { ThemeButton, SearchButton } from '@do-ob/ui/components';
 import { SocialIcons } from '@do-ob/ui/icons';
 import { Link, Button, Divider } from '@nextui-org/react';
-import { NavigationContext } from '../data/NavigationContext';
-import { useContext } from 'react';
+import { NavigationProps } from '../data/NavigationProps';
 
 /**
  * Navigation Search component
  */
-export function NavigationPart_Actions() {
-
-  const { socials = [], search, modeToggle } = useContext(NavigationContext);
+export function NavigationPart_Actions({ base: {
+  socials = [],
+  search,
+  modeToggle,
+} }: { base: NavigationProps }) {
 
   return (
     <div className="flex h-full flex-row items-end justify-center gap-2">
diff --git a/packages/ui/src/components/Navigation/parts/NavigationPart_Brand.tsx b/packages/ui/src/components/Navigation/parts/NavigationPart_Brand.tsx
index 2914597..03a82a1 100644
--- a/packages/ui/src/components/Navigation/parts/NavigationPart_Brand.tsx
+++ b/packages/ui/src/components/Navigation/parts/NavigationPart_Brand.tsx
@@ -3,15 +3,19 @@
 import React from 'react';
 import { NavbarBrand, Link, Image } from '@nextui-org/react';
 import { DoobUiContext } from '@do-ob/ui/context'; 
-import { NavigationContext } from '../data/NavigationContext';
+import { NavigationProps } from '../data/NavigationProps';
 
 /**
  * Navigation Brand component
  */
-export function NavigationPart_Brand() {
+export function NavigationPart_Brand({ base: {
+  title,
+  titleShort,
+  logo,
+  classNames,
+} }: { base: NavigationProps }) {
 
   const { image: imageNode } = React.useContext(DoobUiContext);
-  const { title, titleShort, logo, classNames } = React.useContext(NavigationContext);
 
   return (
     <NavbarBrand>
diff --git a/packages/ui/src/components/Navigation/parts/NavigationPart_Links.tsx b/packages/ui/src/components/Navigation/parts/NavigationPart_Links.tsx
index a79e4e6..cc14a76 100644
--- a/packages/ui/src/components/Navigation/parts/NavigationPart_Links.tsx
+++ b/packages/ui/src/components/Navigation/parts/NavigationPart_Links.tsx
@@ -1,11 +1,9 @@
-'use client';
-
 import { NavbarMenuItem, Link, Button, Popover, PopoverTrigger, PopoverContent, Divider } from '@nextui-org/react';
 import { ChevronDownIcon } from '@heroicons/react/24/solid';
 import { Link as LinkType } from '@do-ob/ui/types';
 import { clsx } from '@do-ob/core';
-import { useContext } from 'react';
-import { NavigationContext } from '../data/NavigationContext';
+import { NavigationProps } from '../data/NavigationProps';
+import { twColors } from '@do-ob/ui/utility';
 
 function LinkLeaf({ link }: { link: LinkType }) {
   return (
@@ -94,9 +92,13 @@ function LinkTrunk({ link, colors, className }: { link: LinkType, colors?: strin
 /**
  * Navigation Links component
  */
-export function NavigationPart_Links() {
+export function NavigationPart_Links({ base: {
+  links = [],
+  color,
+  classNames,
+} }: { base: NavigationProps }) {
 
-  const { links = [], colors, classNames } = useContext(NavigationContext);
+  const colors = twColors(color);
 
   return links.length ? links.map((link) => !link.links?.length ? (
     <LinkLeaf key={link.title} link={link} />
diff --git a/packages/ui/src/components/Navigation/parts/NavigationPart_Menu.tsx b/packages/ui/src/components/Navigation/parts/NavigationPart_Menu.tsx
index c2de11c..40a2899 100644
--- a/packages/ui/src/components/Navigation/parts/NavigationPart_Menu.tsx
+++ b/packages/ui/src/components/Navigation/parts/NavigationPart_Menu.tsx
@@ -1,21 +1,20 @@
-'use client';
-
-import React from 'react';
 import { NavbarMenu, NavbarMenuItem, Link, NavbarItem } from '@nextui-org/react';
-import { NavigationContext, NavigationProps } from '../data/NavigationContext';
+import { NavigationProps } from '../data/NavigationProps';
 import { NavigationPart_Actions } from './NavigationPart_Actions';
 
 /**
  * Navigation Menu component
  */
-export function NavigationPart_Menu() {
+export function NavigationPart_Menu({
+  base
+}: { base: NavigationProps }) {
 
-  const { links = [] } = React.useContext(NavigationContext);
+  const { links = [] } = base;
 
   return (
     <NavbarMenu className="divide-y">
       <NavbarItem>
-        <NavigationPart_Actions />
+        <NavigationPart_Actions base={base} />
       </NavbarItem>
       {links.map((link) => (
         <NavbarMenuItem key={link.url} className="p-2">
diff --git a/packages/ui/src/components/Navigation/parts/NavigationPart_MenuToggle.tsx b/packages/ui/src/components/Navigation/parts/NavigationPart_MenuToggle.tsx
index d86f39f..a1890f4 100644
--- a/packages/ui/src/components/Navigation/parts/NavigationPart_MenuToggle.tsx
+++ b/packages/ui/src/components/Navigation/parts/NavigationPart_MenuToggle.tsx
@@ -1,9 +1,14 @@
-import { NavbarMenuToggle } from "@nextui-org/react";
+import { NavbarMenuToggle } from '@nextui-org/react';
+
+export interface NavigationPart_MenuToggleProps {
+  isMenuOpen?: boolean;
+  className?: string;
+}
 
 export function NavigationPart_MenuToggle({
   isMenuOpen = false,
   className = '',
-}) {
+}: NavigationPart_MenuToggleProps) {
 
   return (
     <NavbarMenuToggle
@@ -11,4 +16,4 @@ export function NavigationPart_MenuToggle({
       className={className}
     />
   );
-}
\ No newline at end of file
+}