@shohojdhara/atomix 0.1.16 → 0.1.18

package/src/components/{Navbar → Navigation/Navbar}/Navbar.stories.tsx

@@ -1,41 +1,147 @@
 import type { Meta, StoryObj } from '@storybook/react';
 import { Navbar } from './Navbar';
-import { Nav } from './Nav';
-import { NavItem } from './NavItem';
-import { NavDropdown } from './NavDropdown';
-import { Menu, MenuItem, MenuDivider } from './Menu';
-import { MegaMenu, MegaMenuColumn, MegaMenuLink } from './MegaMenu';
-import { Icon } from '../Icon';
-import { AtomixLogo } from '../AtomixLogo';
+import { Nav } from '../Nav/Nav';
+import { NavItem } from '../Nav/NavItem';
+import { NavDropdown } from '../Nav/NavDropdown';
+import { Menu, MenuItem, MenuDivider } from '../Menu/Menu';
+import { MegaMenu, MegaMenuColumn, MegaMenuLink } from '../Menu/MegaMenu';
+import { Icon } from '../../Icon';
+import { AtomixLogo } from '../../AtomixLogo';
 
 const meta = {
-  title: 'Components/Navbar',
+  title: 'Components/Navigation/Navbar',
   component: Navbar,
   parameters: {
     layout: 'fullscreen',
+    docs: {
+      description: {
+        component: `
+The Navbar component provides a responsive navigation header with brand, navigation items, and collapsible mobile menu functionality. It follows the Atomix design system guidelines and includes both React and vanilla JavaScript implementations.
+
+## Features
+
+- **Responsive Design**: Automatically collapses on mobile devices
+- **Multiple Positions**: Static, fixed top, or fixed bottom positioning
+- **Theme Variants**: Support for all theme colors
+- **Accessibility**: Full keyboard navigation and screen reader support
+- **Dropdown & Mega Menus**: Support for both regular dropdowns and full-width mega menus
+- **Vanilla JS Support**: Complete vanilla JavaScript implementation available
+
+## Usage
+
+### Basic Navbar
+\`\`\`tsx
+<Navbar brand="My App">
+  <Nav>
+    <NavItem href="/">Home</NavItem>
+    <NavItem href="/about">About</NavItem>
+  </Nav>
+</Navbar>
+\`\`\`
+
+### With Dropdown
+\`\`\`tsx
+<Navbar brand="My App">
+  <Nav>
+    <NavDropdown title="Services">
+      <Menu>
+        <MenuItem href="/web">Web Design</MenuItem>
+        <MenuItem href="/mobile">Mobile Apps</MenuItem>
+      </Menu>
+    </NavDropdown>
+  </Nav>
+</Navbar>
+\`\`\`
+
+### Vanilla JavaScript
+\`\`\`html
+<nav class="c-navbar" data-navbar data-collapsible="true">
+  <div class="c-navbar__container">
+    <a href="/" class="c-navbar__brand">My App</a>
+    <button class="c-navbar__toggler" aria-expanded="false">
+      <span class="c-navbar__toggler-icon"></span>
+    </button>
+    <div class="c-navbar__collapse">
+      <!-- Navigation content -->
+    </div>
+  </div>
+</nav>
+\`\`\`
+        `,
+      },
+    },
   },
   tags: ['autodocs'],
   argTypes: {
     position: {
       control: { type: 'select' },
       options: ['static', 'fixed', 'fixed-bottom'],
-      description: 'Position of the navbar'
+      description: 'Position of the navbar',
+      table: {
+        type: { summary: 'string' },
+        defaultValue: { summary: 'static' },
+      },
     },
     variant: {
       control: { type: 'select' },
       options: [
-        'primary', 'secondary', 'tertiary', 'invert', 'brand', 
-        'success', 'error', 'warning', 'info', 'light', 'dark'
+        'primary',
+        'secondary',
+        'tertiary',
+        'invert',
+        'brand',
+        'success',
+        'error',
+        'warning',
+        'info',
+        'light',
+        'dark',
       ],
-      description: 'The color variant of the navbar'
+      description: 'The color variant of the navbar',
+      table: {
+        type: { summary: 'ThemeColor' },
+        defaultValue: { summary: 'undefined' },
+      },
     },
     collapsible: {
       control: 'boolean',
-      description: 'Whether the navbar should collapse on small screens'
+      description: 'Whether the navbar should collapse on small screens',
+      table: {
+        type: { summary: 'boolean' },
+        defaultValue: { summary: 'true' },
+      },
     },
     containerWidth: {
       control: 'text',
-      description: 'Custom width for the navbar container'
+      description: 'Custom width for the navbar container',
+      table: {
+        type: { summary: 'string' },
+        defaultValue: { summary: 'undefined' },
+      },
+    },
+    backdrop: {
+      control: 'boolean',
+      description: 'Whether to show backdrop when expanded on mobile',
+      table: {
+        type: { summary: 'boolean' },
+        defaultValue: { summary: 'false' },
+      },
+    },
+    closeOnOutsideClick: {
+      control: 'boolean',
+      description: 'Whether to close navbar when clicking outside',
+      table: {
+        type: { summary: 'boolean' },
+        defaultValue: { summary: 'true' },
+      },
+    },
+    closeOnEscape: {
+      control: 'boolean',
+      description: 'Whether to close navbar on escape key press',
+      table: {
+        type: { summary: 'boolean' },
+        defaultValue: { summary: 'true' },
+      },
     },
   },
 } satisfies Meta<typeof Navbar>;
@@ -44,9 +150,7 @@ export default meta;
 type Story = StoryObj<typeof Navbar>;
 
 // Brand logo component
-const LogoBrand = () => (
-  <AtomixLogo height={40} />
-);
+const LogoBrand = () => <AtomixLogo height={40} />;
 
 // Default Navbar
 export const Default: Story = {
@@ -60,12 +164,22 @@ export const Default: Story = {
         <NavItem>Contact</NavItem>
         <NavDropdown title="Dropdown">
           <Menu>
-            <MenuItem href="#" icon="icon-lux-circle">Menu Item 1</MenuItem>
-            <MenuItem href="#" icon="icon-lux-circle">Menu Item 2</MenuItem>
-            <MenuItem href="#" icon="icon-lux-circle">Menu Item 3</MenuItem>
+            <MenuItem href="#" icon="icon-lux-circle">
+              Menu Item 1
+            </MenuItem>
+            <MenuItem href="#" icon="icon-lux-circle">
+              Menu Item 2
+            </MenuItem>
+            <MenuItem href="#" icon="icon-lux-circle">
+              Menu Item 3
+            </MenuItem>
             <MenuDivider />
-            <MenuItem href="#" icon="icon-lux-circle">Menu Item 4</MenuItem>
-            <MenuItem href="#" icon="icon-lux-circle">Menu Item 5</MenuItem>
+            <MenuItem href="#" icon="icon-lux-circle">
+              Menu Item 4
+            </MenuItem>
+            <MenuItem href="#" icon="icon-lux-circle">
+              Menu Item 5
+            </MenuItem>
           </Menu>
         </NavDropdown>
       </Nav>
@@ -96,110 +210,77 @@ export const FixedBottom: Story = {
 export const Variants: Story = {
   render: () => (
     <div className="u-d-flex u-flex-column u-gap-3">
-      <Navbar 
-        brand={<LogoBrand />} 
-        variant="primary"
-      >
+      <Navbar brand={<LogoBrand />} variant="primary">
         <Nav alignment="end">
           <NavItem>Link 1</NavItem>
           <NavItem>Link 2</NavItem>
         </Nav>
       </Navbar>
-      
-      <Navbar 
-        brand={<LogoBrand />} 
-        variant="secondary"
-      >
+
+      <Navbar brand={<LogoBrand />} variant="secondary">
         <Nav alignment="end">
           <NavItem>Link 1</NavItem>
           <NavItem>Link 2</NavItem>
         </Nav>
       </Navbar>
-      
-      <Navbar 
-        brand={<LogoBrand />} 
-        variant="tertiary"
-      >
+
+      <Navbar brand={<LogoBrand />} variant="tertiary">
         <Nav alignment="end">
           <NavItem>Link 1</NavItem>
           <NavItem>Link 2</NavItem>
         </Nav>
       </Navbar>
-      
-      <Navbar 
-        brand={<LogoBrand />} 
-        variant="invert"
-      >
+
+      <Navbar brand={<LogoBrand />} variant="invert">
         <Nav alignment="end">
           <NavItem>Link 1</NavItem>
           <NavItem>Link 2</NavItem>
         </Nav>
       </Navbar>
-      
-      <Navbar 
-        brand={<LogoBrand />} 
-        variant="brand"
-      >
+
+      <Navbar brand={<LogoBrand />} variant="brand">
         <Nav alignment="end">
           <NavItem>Link 1</NavItem>
           <NavItem>Link 2</NavItem>
         </Nav>
       </Navbar>
-      
-      <Navbar 
-        brand={<LogoBrand />} 
-        variant="success"
-      >
+
+      <Navbar brand={<LogoBrand />} variant="success">
         <Nav alignment="end">
           <NavItem>Link 1</NavItem>
           <NavItem>Link 2</NavItem>
         </Nav>
       </Navbar>
-      
-      <Navbar 
-        brand={<LogoBrand />} 
-        variant="error"
-      >
+
+      <Navbar brand={<LogoBrand />} variant="error">
         <Nav alignment="end">
           <NavItem>Link 1</NavItem>
           <NavItem>Link 2</NavItem>
         </Nav>
       </Navbar>
-      
-      <Navbar 
-        brand={<LogoBrand />} 
-        variant="warning"
-      >
+
+      <Navbar brand={<LogoBrand />} variant="warning">
         <Nav alignment="end">
           <NavItem>Link 1</NavItem>
           <NavItem>Link 2</NavItem>
         </Nav>
       </Navbar>
-      
-      <Navbar 
-        brand={<LogoBrand />} 
-        variant="info"
-      >
+
+      <Navbar brand={<LogoBrand />} variant="info">
         <Nav alignment="end">
           <NavItem>Link 1</NavItem>
           <NavItem>Link 2</NavItem>
         </Nav>
       </Navbar>
-      
-      <Navbar 
-        brand={<LogoBrand />} 
-        variant="light"
-      >
+
+      <Navbar brand={<LogoBrand />} variant="light">
         <Nav alignment="end">
           <NavItem>Link 1</NavItem>
           <NavItem>Link 2</NavItem>
         </Nav>
       </Navbar>
-      
-      <Navbar 
-        brand={<LogoBrand />} 
-        variant="dark"
-      >
+
+      <Navbar brand={<LogoBrand />} variant="dark">
         <Nav alignment="end">
           <NavItem>Link 1</NavItem>
           <NavItem>Link 2</NavItem>
@@ -220,7 +301,7 @@ export const NavAlignments: Story = {
           <NavItem>Link 3</NavItem>
         </Nav>
       </Navbar>
-      
+
       <Navbar brand={<LogoBrand />}>
         <Nav alignment="center">
           <NavItem>Link 1</NavItem>
@@ -228,7 +309,7 @@ export const NavAlignments: Story = {
           <NavItem>Link 3</NavItem>
         </Nav>
       </Navbar>
-      
+
       <Navbar brand={<LogoBrand />}>
         <Nav alignment="end">
           <NavItem>Link 1</NavItem>
@@ -254,13 +335,13 @@ export const WithMegaMenu: Story = {
               <MegaMenuLink href="#">Sub Menu 2</MegaMenuLink>
               <MegaMenuLink href="#">Sub Menu 3</MegaMenuLink>
             </MegaMenuColumn>
-            
+
             <MegaMenuColumn title="Column 2" icon="icon-lux-circle">
               <MegaMenuLink href="#">Sub Menu 1</MegaMenuLink>
               <MegaMenuLink href="#">Sub Menu 2</MegaMenuLink>
               <MegaMenuLink href="#">Sub Menu 3</MegaMenuLink>
             </MegaMenuColumn>
-            
+
             <MegaMenuColumn title="Column 3" icon="icon-lux-circle">
               <MegaMenuLink href="#">Sub Menu 1</MegaMenuLink>
               <MegaMenuLink href="#">Sub Menu 2</MegaMenuLink>
@@ -282,8 +363,12 @@ export const WithStateModifiers: Story = {
         <NavItem disabled>Disabled Link</NavItem>
         <NavDropdown title="Dropdown">
           <Menu>
-            <MenuItem href="#" active>Active Item</MenuItem>
-            <MenuItem href="#" disabled>Disabled Item</MenuItem>
+            <MenuItem href="#" active>
+              Active Item
+            </MenuItem>
+            <MenuItem href="#" disabled>
+              Disabled Item
+            </MenuItem>
             <MenuItem href="#">Regular Item</MenuItem>
           </Menu>
         </NavDropdown>
@@ -323,23 +408,29 @@ export const WithAvatarDropdown: Story = {
         <NavItem>Link 3</NavItem>
       </Nav>
       <Nav alignment="end">
-        <NavDropdown 
+        <NavDropdown
           title={
             <>
-              <img 
-                src="/assets/images/avatar.jpg" 
-                alt="User" 
-                className="c-avatar c-avatar--sm c-avatar--circle" 
+              <img
+                src="/assets/images/avatar.jpg"
+                alt="User"
+                className="c-avatar c-avatar--sm c-avatar--circle"
               />
               <span className="u-ms-2">User Name</span>
             </>
           }
         >
           <Menu>
-            <MenuItem href="#" icon="icon-lux-user">Profile</MenuItem>
-            <MenuItem href="#" icon="icon-lux-settings">Settings</MenuItem>
+            <MenuItem href="#" icon="icon-lux-user">
+              Profile
+            </MenuItem>
+            <MenuItem href="#" icon="icon-lux-settings">
+              Settings
+            </MenuItem>
             <MenuDivider />
-            <MenuItem href="#" icon="icon-lux-sign-out">Logout</MenuItem>
+            <MenuItem href="#" icon="icon-lux-sign-out">
+              Logout
+            </MenuItem>
           </Menu>
         </NavDropdown>
       </Nav>
@@ -350,10 +441,7 @@ export const WithAvatarDropdown: Story = {
 // Responsive Navbar
 export const ResponsiveNavbar: Story = {
   render: () => (
-    <Navbar 
-      brand={<LogoBrand />} 
-      collapsible={true}
-    >
+    <Navbar brand={<LogoBrand />} collapsible={true}>
       <Nav alignment="start">
         <NavItem>Home</NavItem>
         <NavItem>Products</NavItem>
@@ -390,22 +478,28 @@ export const ResponsiveNavbar: Story = {
           <Icon name="Bell" size="sm" className="u-me-2" />
           Notifications
         </NavItem>
-        <NavDropdown 
+        <NavDropdown
           title={
             <>
-              <img 
-                src="/assets/images/avatar.jpg" 
-                alt="User" 
-                className="c-avatar c-avatar--sm c-avatar--circle" 
+              <img
+                src="/assets/images/avatar.jpg"
+                alt="User"
+                className="c-avatar c-avatar--sm c-avatar--circle"
               />
             </>
           }
         >
           <Menu>
-            <MenuItem href="#" icon="icon-lux-user">Profile</MenuItem>
-            <MenuItem href="#" icon="icon-lux-settings">Settings</MenuItem>
+            <MenuItem href="#" icon="icon-lux-user">
+              Profile
+            </MenuItem>
+            <MenuItem href="#" icon="icon-lux-settings">
+              Settings
+            </MenuItem>
             <MenuDivider />
-            <MenuItem href="#" icon="icon-lux-sign-out">Logout</MenuItem>
+            <MenuItem href="#" icon="icon-lux-sign-out">
+              Logout
+            </MenuItem>
           </Menu>
         </NavDropdown>
       </Nav>
@@ -432,7 +526,7 @@ export const MegaMenuVsDropdown: Story = {
           </Nav>
         </Navbar>
       </div>
-      
+
       <div>
         <h4 className="u-mb-3">Mega Menu</h4>
         <Navbar brand={<LogoBrand />}>
@@ -455,4 +549,4 @@ export const MegaMenuVsDropdown: Story = {
       </div>
     </div>
   ),
-}; 
+};

package/src/components/Navigation/Navbar/Navbar.tsx

@@ -0,0 +1,150 @@
+import React, { useState, useEffect, useRef, forwardRef } from 'react';
+import { NavbarProps } from '../../../lib/types/components';
+import { useNavbar } from '../../../lib/composables/useNavbar';
+import { NAVBAR } from '../../../lib/constants/components';
+
+/**
+ * Navbar component provides a responsive navigation header with brand, navigation items,
+ * and collapsible mobile menu functionality.
+ *
+ * @example
+ * ```tsx
+ * <Navbar brand="My App" position="fixed" collapsible>
+ *   <Nav>
+ *     <NavItem href="/">Home</NavItem>
+ *     <NavItem href="/about">About</NavItem>
+ *   </Nav>
+ * </Navbar>
+ * ```
+ */
+export const Navbar = forwardRef<HTMLElement, NavbarProps>(
+  (
+    {
+      brand,
+      children,
+      variant,
+      position = 'static',
+      containerWidth,
+      collapsible = true,
+      expanded,
+      onToggle,
+      className = '',
+      disabled = false,
+      backdrop = false,
+      closeOnOutsideClick = true,
+      closeOnEscape = true,
+      ariaLabel = 'Main navigation',
+      id,
+    },
+    ref
+  ) => {
+    const { generateNavbarClass, generateContainerStyle, generateCollapseClass } = useNavbar({
+      position,
+      collapsible,
+      expanded,
+      onToggle,
+    });
+
+    // Use controlled or uncontrolled expanded state
+    const [navbarExpanded, setNavbarExpanded] = useState(expanded || false);
+
+    // Ref for the collapse element to handle responsive behavior
+    const collapseRef = useRef<HTMLDivElement>(null);
+
+    // Update local state when external state changes
+    useEffect(() => {
+      if (typeof expanded !== 'undefined') {
+        setNavbarExpanded(expanded);
+      }
+    }, [expanded]);
+
+    // Handle resize to reset mobile menu state when switching to desktop
+    useEffect(() => {
+      const handleResize = () => {
+        const isMobile = window.innerWidth < 768; // MD breakpoint
+        if (!isMobile && collapsible) {
+          // Reset expanded state on desktop
+          if (typeof onToggle === 'function') {
+            // Only update if different to avoid unnecessary renders
+            if (expanded) onToggle(false);
+          } else {
+            setNavbarExpanded(false);
+          }
+        }
+      };
+
+      window.addEventListener('resize', handleResize);
+      return () => {
+        window.removeEventListener('resize', handleResize);
+      };
+    }, [collapsible, expanded, onToggle]);
+
+    // Generate the navbar class
+    const navbarClass = generateNavbarClass({
+      position,
+      variant,
+      collapsible,
+      className,
+    });
+
+    // Generate the container style
+    const containerStyle = generateContainerStyle(containerWidth);
+
+    // Generate collapse class
+    const collapseClass = generateCollapseClass(navbarExpanded);
+
+    // Handle toggler click
+    const handleToggleClick = () => {
+      if (disabled) return;
+
+      const newState = !navbarExpanded;
+
+      if (typeof onToggle === 'function') {
+        // Controlled component
+        onToggle(newState);
+      } else {
+        // Uncontrolled component
+        setNavbarExpanded(newState);
+      }
+    };
+
+    return (
+      <nav ref={ref} className={navbarClass} aria-label={ariaLabel} id={id}>
+        <div className="c-navbar__container" style={containerStyle}>
+          {brand &&
+            (typeof brand === 'string' ? (
+              <a href="/" className="c-navbar__brand">
+                {brand}
+              </a>
+            ) : (
+              <div className="c-navbar__brand">{brand}</div>
+            ))}
+
+          {collapsible && (
+            <button
+              className="c-navbar__toggler"
+              onClick={handleToggleClick}
+              aria-expanded={navbarExpanded}
+              aria-label="Toggle navigation"
+              aria-controls="navbar-collapse"
+              disabled={disabled}
+              type="button"
+            >
+              <span className="c-navbar__toggler-icon"></span>
+            </button>
+          )}
+
+          <div id="navbar-collapse" className={collapseClass} ref={collapseRef}>
+            {children}
+          </div>
+        </div>
+      </nav>
+    );
+  }
+);
+
+export type { NavbarProps };
+
+Navbar.displayName = 'Navbar';
+
+export default Navbar;