dev: Adding additional features and components

.storybook/main.ts

@@ -1,4 +1,6 @@
 import type { StorybookConfig } from '@storybook/react-vite';
+import { resolve } from 'node:path';
+import { mergeConfig } from 'vite';
 
 const config: StorybookConfig = {
   stories: [
@@ -17,5 +19,17 @@ const config: StorybookConfig = {
     name: '@storybook/react-vite',
     options: {},
   },
+  viteFinal: (config) => {
+    return mergeConfig(config, {
+      resolve: {
+        alias: [
+          {
+            find: /^@do-ob\/ui(\/?.*)/,
+            replacement: resolve('packages/ui/src$1'),
+          },
+        ],
+      },
+    });
+  },
 };
 export default config;

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

@@ -30,6 +30,26 @@ const links: Link[] = [
       {
         title: 'Location',
         url: '#location',
+        links: [
+          {
+            title: 'Address',
+            url: '#address',
+          },
+          {
+            title: 'Map',
+            url: '#map',
+            links: [
+              {
+                title: 'Google Map',
+                url: '#google-map',
+              },
+              {
+                title: 'Apple Map',
+                url: '#apple-map',
+              },
+            ]
+          },
+        ],
       },
       {
         title: 'Email',

packages/ui/src/Navigation/Navigation.tsx

@@ -1,4 +1,4 @@
-import type { Link, ThemeColor } from '../types';
+import type { Link, ThemeColor } from '@do-ob/ui/types';
 
 import { NavigationStandard } from './NavigationStandard';
 import { NavigationIsland } from './NavigationIsland';

packages/ui/src/Navigation/NavigationIsland.tsx

@@ -21,7 +21,7 @@ export function NavigationIsland({
       </NavbarContent>
       <NavbarContent justify="center">
         <div className={clsx(color && colors, 'flex gap-1 rounded-full px-4 py-1')}>
-          <NavigationPart_Links links={links} />
+          <NavigationPart_Links links={links} colors={colors} />
         </div>
       </NavbarContent>
       <NavbarContent justify="end">

packages/ui/src/Navigation/NavigationStandard.tsx

@@ -20,7 +20,7 @@ export function NavigationStandard({
       </NavbarContent>
 
       <NavbarContent justify="center">
-        <NavigationPart_Links links={links} />
+        <NavigationPart_Links links={links} colors={colors} />
       </NavbarContent>
 
     </Navbar>

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

@@ -1,6 +1,7 @@
 import { NavbarMenuItem, Link, Button, Popover, PopoverTrigger, PopoverContent } 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';
 
 /**
  * Navigation Brand properties
@@ -10,6 +11,11 @@ export interface NavigationPart_LinksProps {
    * The branding title to display.
    */
   links?: LinkType[];
+
+  /**
+   * bg and text colors
+   */
+  colors?: string;
 }
 
 function LinkLeaf({ link }: { link: LinkType }) {
@@ -27,7 +33,35 @@ function LinkLeaf({ link }: { link: LinkType }) {
   );
 }
 
-function LinkBranch({ link }: { link: LinkType }) {
+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');
+  }
+
+  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')}>
+      {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">
+        <LinkBranch links={link.links} level={level + 1} />
+      </div>
+    )}
+  </>));
+}
+
+function LinkTrunk({ link, colors }: { link: LinkType, colors?: string }) {
   return (
     <Popover
       placement="bottom"
@@ -43,10 +77,11 @@ function LinkBranch({ link }: { link: LinkType }) {
           </Button>
         </PopoverTrigger>
       </NavbarMenuItem>
-      <PopoverContent className="min-w-32 items-start p-2">
-        <Link href={link.url} className="w-full rounded px-4 py-2 text-inherit">
+      <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">
           {link.title}
         </Link>
+        <LinkBranch links={link.links ?? []} level={1} />
       </PopoverContent>
     </Popover>
   );
@@ -57,11 +92,12 @@ function LinkBranch({ link }: { link: LinkType }) {
  */
 export function NavigationPart_Links({
   links = [],
+  colors,
 }: NavigationPart_LinksProps) {
   return links.length ? links.map((link) => !link.links?.length ? (
     <LinkLeaf key={link.title} link={link} />
   ) : (
-    <LinkBranch key={link.title} link={link} />
+    <LinkTrunk key={link.title} link={link} colors={colors} />
   )) : (
     <NavbarMenuItem>
       &nbsp;

packages/ui/src/SearchInput/SearchInput.tsx

@@ -0,0 +1,34 @@
+import { Input } from '@nextui-org/react';
+import { MagnifyingGlassIcon } from '@heroicons/react/24/solid';
+
+/**
+ * SearchInput properties
+ */
+export interface SearchInputProps {
+  /**
+   * The placeholder text to display.
+   */
+  placeholder?: string;
+}
+
+/**
+ * SearchInput component
+ */
+export function SearchInput({
+  placeholder = 'Type to search...',
+}: SearchInputProps) {
+  return (
+    <Input
+      classNames={{
+        base: 'max-w-full sm:max-w-[10rem] h-10',
+        mainWrapper: 'h-full',
+        input: 'text-small',
+        inputWrapper: 'h-full font-normal text-default-500 bg-default-400/20 dark:bg-default-500/20',
+      }}
+      placeholder={placeholder}
+      size="sm"
+      startContent={<MagnifyingGlassIcon className="size-6" />}
+      type="search"
+    />
+  );
+}