fix: Navigation now prop drills to maintain server component status

do-ob-io · Jun 18, 2024 · 9f9ef37 · 9f9ef37
1 parent 5fa19ba
commit 9f9ef37
Show file tree

Hide file tree

Showing 11 changed files with 123 additions and 176 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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/...ents/Navigation/data/NavigationContext.ts → ...onents/Navigation/data/NavigationProps.ts b/...ents/Navigation/data/NavigationContext.ts → ...onents/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
diff --git 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
@@ -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
@@ -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} />