dev: Adding search to navbar

.storybook/preview.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import type { Preview } from '@storybook/react';
 import { withThemeByClassName } from '@storybook/addon-themes';
-import { DoobProvider } from '../packages/ui/src/provider';
+import { DoobUiProvider } from '../packages/ui/src/provider';
 import '../global.css';
 
 const preview: Preview = {
@@ -24,9 +24,9 @@ export const decorators = [
     defaultTheme: 'light',
   }),
   (Story) => (
-    <DoobProvider>
+    <DoobUiProvider>
       <Story />
-    </DoobProvider>
+    </DoobUiProvider>
   ),
 ];
 

package.json

@@ -19,10 +19,9 @@
   "author": "",
   "license": "MIT",
   "devDependencies": {
-    "@do-ob/core": "^1.0.0",
+    "@do-ob/core": "link:../core/packages/core",
     "@do-ob/eslint-config": "^2.3.0",
     "@do-ob/ts-config": "^2.0.0",
-    "@do-ob/ui": "workspace:*",
     "@do-ob/vite-lib-config": "^3.0.1",
     "@heroicons/react": "^2.1.3",
     "@nextui-org/react": "^2.4.1",

packages/ui/package.json

@@ -12,7 +12,8 @@
       "import": "./dist/*.js",
       "types": "./dist/*.d.ts"
     },
-    "./index": null
+    "./index": null,
+    "./package.json": "./package.json"
   },
   "keywords": [
     "component",

packages/ui/src/Navigation/Navigation.stories.tsx

@@ -22,6 +22,16 @@ const links: Link[] = [
   {
     title: 'About',
     url: '#about',
+    links: [
+      {
+        title: 'Company',
+        url: '#company',
+      },
+      {
+        title: 'Team',
+        url: '#team',
+      },
+    ],
   },
   {
     title: 'Contact',
@@ -67,6 +77,8 @@ export const Standard: Story = {
   args: {
     title: 'Navigation',
     links,
+    search: '#search',
+    className: 'bg-foreground/10',
   },
 };
 
@@ -75,5 +87,16 @@ export const Island: Story = {
     title: 'Navigation',
     variant: 'island',
     links,
+    search: '#search',
+    className: 'bg-foreground/10',
+  },
+};
+
+export const WithClassName: Story = {
+  args: {
+    title: 'Navigation',
+    variant: 'standard',
+    className: 'bg-red-500',
+    links,
   },
 };

packages/ui/src/Navigation/Navigation.tsx

@@ -5,10 +5,15 @@ import { NavigationIsland } from './NavigationIsland';
 
 export interface NavigationProps {
   /**
-   * Title of the navigation
+   * The brand title to display
    */
   title?: string;
 
+  /**
+   * The brand image to display
+   */
+  image?: string;
+
   /**
    * The theme color of the navigation
    */
@@ -18,6 +23,16 @@ export interface NavigationProps {
    * The links of the navigation
    */
   links?: Link[];
+
+  /**
+   * Class name for the navigation
+   */
+  className?: string;
+
+  /**
+   * The search form action URL
+   */
+  search?: string;
 }
 
 export interface NavigationVariantProps extends NavigationProps {
@@ -39,5 +54,3 @@ export function Navigation({
       return <NavigationStandard {...props} />;
   }
 }
-
-export default Navigation;

packages/ui/src/Navigation/NavigationIsland.tsx

@@ -1,34 +1,38 @@
 import { Navbar, NavbarContent } from '@nextui-org/react';
 import { twColors } from '@do-ob/ui/utility';
-import { clsx } from '@do-ob/core';
+import { clsx, clmg } from '@do-ob/core';
 
 import type { NavigationProps } from './Navigation';
 import { NavigationPart_Brand } from './parts/NavigationPart_Brand';
 import { NavigationPart_Links } from './parts/NavigationPart_Links';
+import { NavigationPart_Search } from './parts/NavigationPart_Search';
 
 export function NavigationIsland({
   title,
+  image,
   color,
   links,
+  className,
+  search,
 }: NavigationProps) {
 
   const [ colors ] = twColors(color);
 
   return (
     <Navbar className="items-center justify-center">
       <NavbarContent justify="start" className="flex items-center">
-        <NavigationPart_Brand title={title} />
+        <NavigationPart_Brand title={title} image={image} />
       </NavbarContent>
       <NavbarContent justify="center">
-        <div className={clsx(color && colors, 'flex gap-1 rounded-full px-4 py-1')}>
+        <div className={clmg(clsx(color && colors, 'flex rounded-full px-4', className))}>
           <NavigationPart_Links links={links} colors={colors} />
         </div>
       </NavbarContent>
       <NavbarContent justify="end">
-
+        {search ? (
+          <NavigationPart_Search search={search} />
+        ) : null}
       </NavbarContent>
     </Navbar>
   );
 }
-
-export default NavigationIsland;

packages/ui/src/Navigation/NavigationStandard.tsx

@@ -1,20 +1,23 @@
 import { Navbar, NavbarContent } from '@nextui-org/react';
 import { twColors } from '@do-ob/ui/utility';
-import { clsx } from '@do-ob/core';
+import { clsx, clmg } from '@do-ob/core';
 import type { NavigationProps } from './Navigation';
 import { NavigationPart_Brand } from './parts/NavigationPart_Brand';
 import { NavigationPart_Links } from './parts/NavigationPart_Links';
+import { NavigationPart_Search } from './parts/NavigationPart_Search';
 
 export function NavigationStandard({
   title,
   color,
   links,
+  className,
+  search
 }: NavigationProps) {
 
   const [ colors ] = twColors(color);
 
   return (
-    <Navbar className={clsx(color && colors)}>
+    <Navbar className={clmg(clsx(color && colors, className))}>
       <NavbarContent justify="start">
         <NavigationPart_Brand title={title} />
       </NavbarContent>
@@ -23,6 +26,14 @@ export function NavigationStandard({
         <NavigationPart_Links links={links} colors={colors} />
       </NavbarContent>
 
+      <NavbarContent justify="end">
+        <div className="max-w-64">
+          {search ? (
+            <NavigationPart_Search search={search} />
+          ) : null}
+        </div>
+      </NavbarContent>
+
     </Navbar>
   );
 }

packages/ui/src/Navigation/parts/NavigationPart_Brand.tsx

@@ -1,4 +1,6 @@
-import { NavbarBrand, Link } from '@nextui-org/react';
+import React from 'react';
+import { NavbarBrand, Link, Image } from '@nextui-org/react';
+import { DoobUiContext } from '@do-ob/ui/context'; 
 
 /**
  * Navigation Brand properties
@@ -8,17 +10,35 @@ export interface NavigationPart_BrandProps {
    * The branding title to display.
    */
   title?: string;
+
+  /**
+   * The branding image to display.
+   */
+  image?: string;
 }
 
 /**
  * Navigation Brand component
  */
 export function NavigationPart_Brand({
   title,
+  image,
 }: NavigationPart_BrandProps) {
+
+  const { image: imageNode } = React.useContext(DoobUiContext);
+
   return (
     <NavbarBrand>
-      <Link href="/" className="text-lg text-inherit">{title}</Link>
+      {image ? (
+        <Image
+          as={imageNode}
+          src={image}
+          alt={title}
+          width={40}
+          height={40}
+        />
+      ) : null}
+      <Link href="/" className="text-xl text-inherit">{title}</Link>
     </NavbarBrand>
   );
 }

packages/ui/src/Navigation/parts/NavigationPart_Links.tsx

@@ -1,4 +1,4 @@
-import { NavbarMenuItem, Link, Button, Popover, PopoverTrigger, PopoverContent } from '@nextui-org/react';
+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';
@@ -20,12 +20,12 @@ export interface NavigationPart_LinksProps {
 
 function LinkLeaf({ link }: { link: LinkType }) {
   return (
-    <NavbarMenuItem>
+    <NavbarMenuItem className="border-y-4 border-transparent hover:border-b-primary-500">
       <Button
         as={Link}
         href={link.url}
         variant="light"
-        className="text-inherit"
+        className="text-base text-inherit"
       >
         {link.title}
       </Button>
@@ -38,49 +38,57 @@ function LinkBranch({ links, level }: { links: LinkType[], level: number }) {
   const classes: string[] = [];
   if (level === 1) {
     classes.push('font-bold');
-    classes.push('text-sm');
-  }
-
-  if (level === 2) {
-    classes.push('text-sm');
   }
 
-  if(level > 2) {
-    classes.push('text-xs');
-  }
+  const pl = level * 1;
 
-  return links.map((link) => (<>
-    <Link href={link.url} className={clsx(...classes, 'box-border w-full rounded px-4 py-2 text-inherit hover:bg-black/10 dark:hover:bg-white/10')}>
+  return links.map((link) => (<div className="relative w-full">
+    <Divider
+      orientation="vertical"
+      className="absolute top-0 h-full"
+      style={{
+        display: level === 1 ? 'none' : 'block',
+        left: `${pl - 1}rem`,
+      }}
+    />
+    <Link
+      href={link.url}
+      className={clsx(...classes, 'box-border w-full rounded py-2 pr-4 text-inherit hover:bg-black/10 hover:underline dark:hover:bg-white/10')}
+      style={{
+        paddingLeft: `${pl}rem`,
+      }}
+    >
       {link.title}
     </Link>
     {link.links?.length && (
-      <div className="w-full border-l-1 border-black/50 pl-4 dark:border-white/50 [&:last-child]:mb-0">
+      <div className="w-full [&:last-child]:mb-0">
         <LinkBranch links={link.links} level={level + 1} />
       </div>
     )}
-  </>));
+  </div>));
 }
 
 function LinkTrunk({ link, colors }: { link: LinkType, colors?: string }) {
   return (
     <Popover
       placement="bottom"
     >
-      <NavbarMenuItem>
+      <NavbarMenuItem className="border-y-4 border-transparent hover:border-b-primary-500">
         <PopoverTrigger>
           <Button
             variant="light"
-            className="text-inherit"
+            className="text-base text-inherit"
             endContent={<ChevronDownIcon className="size-4" />}
           >
             {link.title}
           </Button>
         </PopoverTrigger>
       </NavbarMenuItem>
-      <PopoverContent className={clsx(colors, 'min-w-56 items-start p-4')}>
-        <Link href={link.url} className="flex flex-col items-start rounded p-2 font-bold text-inherit">
+      <PopoverContent className={clsx(colors, 'min-w-64 items-start p-4')}>
+        <Button as={Link} href={link.url} className="w-full justify-start rounded bg-transparent px-4 py-2 text-lg font-bold text-inherit hover:bg-black/10 hover:underline dark:hover:bg-white/10">
           {link.title}
-        </Link>
+        </Button>
+        <Divider className="my-1" />
         <LinkBranch links={link.links ?? []} level={1} />
       </PopoverContent>
     </Popover>
@@ -104,5 +112,3 @@ export function NavigationPart_Links({
     </NavbarMenuItem>
   );
 }
-
-export default NavigationPart_Links;

packages/ui/src/Navigation/parts/NavigationPart_Search.tsx

@@ -0,0 +1,28 @@
+import { MagnifyingGlassIcon } from '@heroicons/react/24/solid';
+import { Button, Modal, useDisclosure } from '@nextui-org/react';
+
+/**
+ * Navigation Brand properties
+ */
+export interface NavigationPart_SearchProps {
+  /**
+   * The search form action URL.
+   */
+  search?: string;
+}
+
+/**
+ * Navigation Search component
+ */
+export function NavigationPart_Search({
+  search = '#'
+}: NavigationPart_SearchProps) {
+
+  const { isOpen, onOpen } = useDisclosure();
+
+  return (
+    <Button isIconOnly onClick={onOpen}>
+      <MagnifyingGlassIcon className="size-6" />
+    </Button>
+  );
+}