@shohojdhara/atomix 0.1.17 → 0.1.18

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

@@ -0,0 +1,552 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { Navbar } from './Navbar';
+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/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',
+      table: {
+        type: { summary: 'string' },
+        defaultValue: { summary: 'static' },
+      },
+    },
+    variant: {
+      control: { type: 'select' },
+      options: [
+        'primary',
+        'secondary',
+        'tertiary',
+        'invert',
+        'brand',
+        'success',
+        'error',
+        'warning',
+        'info',
+        'light',
+        'dark',
+      ],
+      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',
+      table: {
+        type: { summary: 'boolean' },
+        defaultValue: { summary: 'true' },
+      },
+    },
+    containerWidth: {
+      control: 'text',
+      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>;
+
+export default meta;
+type Story = StoryObj<typeof Navbar>;
+
+// Brand logo component
+const LogoBrand = () => <AtomixLogo height={40} />;
+
+// Default Navbar
+export const Default: Story = {
+  args: {
+    brand: <LogoBrand />,
+    children: (
+      <Nav alignment="end">
+        <NavItem>Home</NavItem>
+        <NavItem>About</NavItem>
+        <NavItem>Services</NavItem>
+        <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>
+            <MenuDivider />
+            <MenuItem href="#" icon="icon-lux-circle">
+              Menu Item 4
+            </MenuItem>
+            <MenuItem href="#" icon="icon-lux-circle">
+              Menu Item 5
+            </MenuItem>
+          </Menu>
+        </NavDropdown>
+      </Nav>
+    ),
+    position: 'static',
+    variant: 'primary',
+    collapsible: true,
+  },
+};
+
+// Fixed Navbar
+export const Fixed: Story = {
+  args: {
+    ...Default.args,
+    position: 'fixed',
+  },
+};
+
+// Fixed Bottom Navbar
+export const FixedBottom: Story = {
+  args: {
+    ...Default.args,
+    position: 'fixed-bottom',
+  },
+};
+
+// Navbar with different variants
+export const Variants: Story = {
+  render: () => (
+    <div className="u-d-flex u-flex-column u-gap-3">
+      <Navbar brand={<LogoBrand />} variant="primary">
+        <Nav alignment="end">
+          <NavItem>Link 1</NavItem>
+          <NavItem>Link 2</NavItem>
+        </Nav>
+      </Navbar>
+
+      <Navbar brand={<LogoBrand />} variant="secondary">
+        <Nav alignment="end">
+          <NavItem>Link 1</NavItem>
+          <NavItem>Link 2</NavItem>
+        </Nav>
+      </Navbar>
+
+      <Navbar brand={<LogoBrand />} variant="tertiary">
+        <Nav alignment="end">
+          <NavItem>Link 1</NavItem>
+          <NavItem>Link 2</NavItem>
+        </Nav>
+      </Navbar>
+
+      <Navbar brand={<LogoBrand />} variant="invert">
+        <Nav alignment="end">
+          <NavItem>Link 1</NavItem>
+          <NavItem>Link 2</NavItem>
+        </Nav>
+      </Navbar>
+
+      <Navbar brand={<LogoBrand />} variant="brand">
+        <Nav alignment="end">
+          <NavItem>Link 1</NavItem>
+          <NavItem>Link 2</NavItem>
+        </Nav>
+      </Navbar>
+
+      <Navbar brand={<LogoBrand />} variant="success">
+        <Nav alignment="end">
+          <NavItem>Link 1</NavItem>
+          <NavItem>Link 2</NavItem>
+        </Nav>
+      </Navbar>
+
+      <Navbar brand={<LogoBrand />} variant="error">
+        <Nav alignment="end">
+          <NavItem>Link 1</NavItem>
+          <NavItem>Link 2</NavItem>
+        </Nav>
+      </Navbar>
+
+      <Navbar brand={<LogoBrand />} variant="warning">
+        <Nav alignment="end">
+          <NavItem>Link 1</NavItem>
+          <NavItem>Link 2</NavItem>
+        </Nav>
+      </Navbar>
+
+      <Navbar brand={<LogoBrand />} variant="info">
+        <Nav alignment="end">
+          <NavItem>Link 1</NavItem>
+          <NavItem>Link 2</NavItem>
+        </Nav>
+      </Navbar>
+
+      <Navbar brand={<LogoBrand />} variant="light">
+        <Nav alignment="end">
+          <NavItem>Link 1</NavItem>
+          <NavItem>Link 2</NavItem>
+        </Nav>
+      </Navbar>
+
+      <Navbar brand={<LogoBrand />} variant="dark">
+        <Nav alignment="end">
+          <NavItem>Link 1</NavItem>
+          <NavItem>Link 2</NavItem>
+        </Nav>
+      </Navbar>
+    </div>
+  ),
+};
+
+// Navbar with different nav alignments
+export const NavAlignments: Story = {
+  render: () => (
+    <div className="u-d-flex u-flex-column u-gap-3">
+      <Navbar brand={<LogoBrand />}>
+        <Nav alignment="start">
+          <NavItem>Link 1</NavItem>
+          <NavItem>Link 2</NavItem>
+          <NavItem>Link 3</NavItem>
+        </Nav>
+      </Navbar>
+
+      <Navbar brand={<LogoBrand />}>
+        <Nav alignment="center">
+          <NavItem>Link 1</NavItem>
+          <NavItem>Link 2</NavItem>
+          <NavItem>Link 3</NavItem>
+        </Nav>
+      </Navbar>
+
+      <Navbar brand={<LogoBrand />}>
+        <Nav alignment="end">
+          <NavItem>Link 1</NavItem>
+          <NavItem>Link 2</NavItem>
+          <NavItem>Link 3</NavItem>
+        </Nav>
+      </Navbar>
+    </div>
+  ),
+};
+
+// Navbar with mega menu
+export const WithMegaMenu: Story = {
+  render: () => (
+    <Navbar brand={<LogoBrand />}>
+      <Nav alignment="end">
+        <NavItem>Link 1</NavItem>
+        <NavItem>Link 2</NavItem>
+        <NavDropdown title="Mega Menu" megaMenu>
+          <MegaMenu>
+            <MegaMenuColumn title="Column 1" 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 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>
+              <MegaMenuLink href="#">Sub Menu 3</MegaMenuLink>
+            </MegaMenuColumn>
+          </MegaMenu>
+        </NavDropdown>
+      </Nav>
+    </Navbar>
+  ),
+};
+
+// Navbar with active and disabled items
+export const WithStateModifiers: Story = {
+  render: () => (
+    <Navbar brand={<LogoBrand />}>
+      <Nav alignment="end">
+        <NavItem active>Active Link</NavItem>
+        <NavItem disabled>Disabled Link</NavItem>
+        <NavDropdown title="Dropdown">
+          <Menu>
+            <MenuItem href="#" active>
+              Active Item
+            </MenuItem>
+            <MenuItem href="#" disabled>
+              Disabled Item
+            </MenuItem>
+            <MenuItem href="#">Regular Item</MenuItem>
+          </Menu>
+        </NavDropdown>
+      </Nav>
+    </Navbar>
+  ),
+};
+
+// Navbar with search field
+export const WithSearchField: Story = {
+  render: () => (
+    <Navbar brand={<LogoBrand />}>
+      <Nav alignment="start">
+        <NavItem>Link 1</NavItem>
+        <NavItem>Link 2</NavItem>
+        <NavItem>Link 3</NavItem>
+      </Nav>
+      <div className="u-ms-auto u-d-flex u-align-items-center">
+        <div className="c-search-form u-d-flex u-gap-2">
+          <input type="text" className="c-input c-input--sm" placeholder="Search..." />
+          <button className="c-btn c-btn--primary c-btn--sm">
+            <Icon name="MagnifyingGlass" size="sm" />
+          </button>
+        </div>
+      </div>
+    </Navbar>
+  ),
+};
+
+// Navbar with avatar dropdown
+export const WithAvatarDropdown: Story = {
+  render: () => (
+    <Navbar brand={<LogoBrand />}>
+      <Nav alignment="start">
+        <NavItem>Link 1</NavItem>
+        <NavItem>Link 2</NavItem>
+        <NavItem>Link 3</NavItem>
+      </Nav>
+      <Nav alignment="end">
+        <NavDropdown
+          title={
+            <>
+              <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>
+            <MenuDivider />
+            <MenuItem href="#" icon="icon-lux-sign-out">
+              Logout
+            </MenuItem>
+          </Menu>
+        </NavDropdown>
+      </Nav>
+    </Navbar>
+  ),
+};
+
+// Responsive Navbar
+export const ResponsiveNavbar: Story = {
+  render: () => (
+    <Navbar brand={<LogoBrand />} collapsible={true}>
+      <Nav alignment="start">
+        <NavItem>Home</NavItem>
+        <NavItem>Products</NavItem>
+        <NavDropdown title="Services">
+          <Menu>
+            <MenuItem href="#">Service 1</MenuItem>
+            <MenuItem href="#">Service 2</MenuItem>
+            <MenuItem href="#">Service 3</MenuItem>
+          </Menu>
+        </NavDropdown>
+        <NavDropdown title="Resources" megaMenu>
+          <MegaMenu>
+            <MegaMenuColumn title="Documentation" icon="icon-lux-file">
+              <MegaMenuLink href="#">Getting Started</MegaMenuLink>
+              <MegaMenuLink href="#">Components</MegaMenuLink>
+              <MegaMenuLink href="#">API Reference</MegaMenuLink>
+            </MegaMenuColumn>
+            <MegaMenuColumn title="Resources" icon="icon-lux-bookmark">
+              <MegaMenuLink href="#">Blog</MegaMenuLink>
+              <MegaMenuLink href="#">Tutorials</MegaMenuLink>
+              <MegaMenuLink href="#">Examples</MegaMenuLink>
+            </MegaMenuColumn>
+            <MegaMenuColumn title="Support" icon="icon-lux-question-circle">
+              <MegaMenuLink href="#">FAQs</MegaMenuLink>
+              <MegaMenuLink href="#">Community</MegaMenuLink>
+              <MegaMenuLink href="#">Contact Us</MegaMenuLink>
+            </MegaMenuColumn>
+          </MegaMenu>
+        </NavDropdown>
+        <NavItem>Contact</NavItem>
+      </Nav>
+      <Nav alignment="end">
+        <NavItem>
+          <Icon name="Bell" size="sm" className="u-me-2" />
+          Notifications
+        </NavItem>
+        <NavDropdown
+          title={
+            <>
+              <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>
+            <MenuDivider />
+            <MenuItem href="#" icon="icon-lux-sign-out">
+              Logout
+            </MenuItem>
+          </Menu>
+        </NavDropdown>
+      </Nav>
+    </Navbar>
+  ),
+};
+
+// Mega Menu vs Dropdown Comparison
+export const MegaMenuVsDropdown: Story = {
+  render: () => (
+    <div className="u-d-flex u-flex-column u-gap-3">
+      <div>
+        <h4 className="u-mb-3">Regular Dropdown</h4>
+        <Navbar brand={<LogoBrand />}>
+          <Nav alignment="start">
+            <NavItem>Home</NavItem>
+            <NavDropdown title="Regular Dropdown" megaMenu={false}>
+              <Menu>
+                <MenuItem href="#">Menu Item 1</MenuItem>
+                <MenuItem href="#">Menu Item 2</MenuItem>
+                <MenuItem href="#">Menu Item 3</MenuItem>
+              </Menu>
+            </NavDropdown>
+          </Nav>
+        </Navbar>
+      </div>
+
+      <div>
+        <h4 className="u-mb-3">Mega Menu</h4>
+        <Navbar brand={<LogoBrand />}>
+          <Nav alignment="start">
+            <NavItem>Home</NavItem>
+            <NavDropdown title="Mega Menu" megaMenu={true}>
+              <MegaMenu>
+                <MegaMenuColumn title="Column 1" icon="icon-lux-circle">
+                  <MegaMenuLink href="#">Link 1</MegaMenuLink>
+                  <MegaMenuLink href="#">Link 2</MegaMenuLink>
+                </MegaMenuColumn>
+                <MegaMenuColumn title="Column 2" icon="icon-lux-circle">
+                  <MegaMenuLink href="#">Link 1</MegaMenuLink>
+                  <MegaMenuLink href="#">Link 2</MegaMenuLink>
+                </MegaMenuColumn>
+              </MegaMenu>
+            </NavDropdown>
+          </Nav>
+        </Navbar>
+      </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;