@shohojdhara/atomix 0.1.16 → 0.1.18

package/src/components/Navigation/SideMenu/SideMenu.tsx

@@ -0,0 +1,101 @@
+import React, { useState, useEffect, useRef, forwardRef } from 'react';
+import { SideMenuProps } from '../../../lib/types/components';
+import { useSideMenu } from '../../../lib/composables/useSideMenu';
+import { SIDE_MENU } from '../../../lib/constants/components';
+import { Icon } from '../../Icon';
+
+/**
+ * SideMenu component provides a collapsible navigation menu with title and menu items.
+ * Automatically collapses on mobile devices and can be toggled via a header button.
+ *
+ * @example
+ * ```tsx
+ * <SideMenu title="Navigation">
+ *   <SideMenuList>
+ *     <SideMenuItem href="/" active>Home</SideMenuItem>
+ *     <SideMenuItem href="/about">About</SideMenuItem>
+ *     <SideMenuItem href="/contact">Contact</SideMenuItem>
+ *   </SideMenuList>
+ * </SideMenu>
+ * ```
+ */
+export const SideMenu = forwardRef<HTMLDivElement, SideMenuProps>(
+  (
+    {
+      title,
+      children,
+      isOpen,
+      onToggle,
+      collapsible = true,
+      className = '',
+      disabled = false,
+      toggleIcon,
+      id,
+    },
+    ref
+  ) => {
+    const {
+      isOpenState,
+      wrapperRef,
+      innerRef,
+      generateSideMenuClass,
+      generateWrapperClass,
+      handleToggle,
+    } = useSideMenu({
+      isOpen,
+      onToggle,
+      collapsible,
+      disabled,
+    });
+
+    const sideMenuClass = generateSideMenuClass({ className, isOpen: isOpenState });
+    const wrapperClass = generateWrapperClass();
+
+    // Default toggle icon using Atomix Icon component
+    const defaultToggleIcon = <Icon name="CaretRight" size="xs" />;
+
+    return (
+      <div ref={ref} className={sideMenuClass} id={id}>
+        {title && collapsible && (
+          <div
+            className="c-side-menu__toggler"
+            onClick={handleToggle}
+            role="button"
+            tabIndex={disabled ? -1 : 0}
+            aria-expanded={isOpenState}
+            aria-controls={id ? `${id}-content` : undefined}
+            aria-disabled={disabled}
+            onKeyDown={e => {
+              if ((e.key === 'Enter' || e.key === ' ') && !disabled) {
+                e.preventDefault();
+                handleToggle();
+              }
+            }}
+          >
+            <span className="c-side-menu__title">{title}</span>
+            <span className="c-side-menu__toggler-icon">{toggleIcon || defaultToggleIcon}</span>
+          </div>
+        )}
+
+        {title && !collapsible && <h3 className="c-side-menu__title">{title}</h3>}
+
+        <div
+          ref={wrapperRef}
+          className={wrapperClass}
+          id={id ? `${id}-content` : undefined}
+          aria-hidden={collapsible ? !isOpenState : false}
+        >
+          <div ref={innerRef} className="c-side-menu__inner">
+            {children}
+          </div>
+        </div>
+      </div>
+    );
+  }
+);
+
+export type { SideMenuProps };
+
+SideMenu.displayName = 'SideMenu';
+
+export default SideMenu;

package/src/components/Navigation/SideMenu/SideMenuItem.tsx

@@ -0,0 +1,95 @@
+import React, { forwardRef } from 'react';
+import { SideMenuItemProps } from '../../../lib/types/components';
+import { useSideMenuItem } from '../../../lib/composables/useSideMenu';
+
+/**
+ * SideMenuItem component represents a single navigation item in a side menu.
+ * Can be rendered as a link or button with active and disabled states.
+ *
+ * @example
+ * ```tsx
+ * // As a link
+ * <SideMenuItem href="/about" active>About</SideMenuItem>
+ *
+ * // As a button
+ * <SideMenuItem onClick={() => console.log('clicked')}>
+ *   Click me
+ * </SideMenuItem>
+ *
+ * // With icon
+ * <SideMenuItem href="/settings" icon={<Icon name="Settings" />}>
+ *   Settings
+ * </SideMenuItem>
+ *
+ * // Disabled
+ * <SideMenuItem href="/disabled" disabled>
+ *   Disabled Item
+ * </SideMenuItem>
+ * ```
+ */
+export const SideMenuItem = forwardRef<HTMLAnchorElement | HTMLButtonElement, SideMenuItemProps>(
+  (
+    {
+      children,
+      href,
+      onClick,
+      active = false,
+      disabled = false,
+      icon,
+      className = '',
+      target,
+      rel,
+    },
+    ref
+  ) => {
+    const { generateSideMenuItemClass, handleClick } = useSideMenuItem({
+      active,
+      disabled,
+      className,
+    });
+
+    const itemClass = generateSideMenuItemClass();
+
+    // Render as link if href is provided
+    if (href) {
+      return (
+        <a
+          ref={ref as React.Ref<HTMLAnchorElement>}
+          href={disabled ? undefined : href}
+          className={itemClass}
+          onClick={handleClick(onClick)}
+          aria-disabled={disabled}
+          aria-current={active ? 'page' : undefined}
+          target={target}
+          rel={rel}
+          tabIndex={disabled ? -1 : 0}
+        >
+          {icon && <span className="c-side-menu__link-icon">{icon}</span>}
+          <span className="c-side-menu__link-text">{children}</span>
+        </a>
+      );
+    }
+
+    // Render as button if no href
+    return (
+      <button
+        ref={ref as React.Ref<HTMLButtonElement>}
+        type="button"
+        className={itemClass}
+        onClick={handleClick(onClick)}
+        disabled={disabled}
+        aria-current={active ? 'page' : undefined}
+        tabIndex={disabled ? -1 : 0}
+      >
+        {icon && <span className="c-side-menu__link-icon">{icon}</span>}
+        <span className="c-side-menu__link-text">{children}</span>
+      </button>
+    );
+  }
+);
+
+export type { SideMenuItemProps };
+
+SideMenuItem.displayName = 'SideMenuItem';
+
+export default SideMenuItem;

package/src/components/Navigation/SideMenu/SideMenuList.tsx

@@ -0,0 +1,41 @@
+import React, { forwardRef } from 'react';
+import { SideMenuListProps } from '../../../lib/types/components';
+
+/**
+ * SideMenuList component provides a container for side menu items.
+ *
+ * @example
+ * ```tsx
+ * <SideMenuList>
+ *   <SideMenuItem href="/" active>Home</SideMenuItem>
+ *   <SideMenuItem href="/about">About</SideMenuItem>
+ *   <SideMenuItem href="/contact">Contact</SideMenuItem>
+ * </SideMenuList>
+ * ```
+ */
+export const SideMenuList = forwardRef<HTMLUListElement, SideMenuListProps>(
+  ({ children, className = '' }, ref) => {
+    const listClass = `c-side-menu__list ${className}`.trim();
+
+    return (
+      <ul ref={ref} className={listClass} role="list">
+        {React.Children.map(children, (child, index) => {
+          if (React.isValidElement(child)) {
+            return (
+              <li key={index} className="c-side-menu__item" role="listitem">
+                {child}
+              </li>
+            );
+          }
+          return child;
+        })}
+      </ul>
+    );
+  }
+);
+
+export type { SideMenuListProps };
+
+SideMenuList.displayName = 'SideMenuList';
+
+export default SideMenuList;

package/src/components/Navigation/index.ts

@@ -0,0 +1,23 @@
+// React Components
+export { Navbar } from './Navbar/Navbar';
+export { Nav } from './Nav/Nav';
+export { NavItem } from './Nav/NavItem';
+export { NavDropdown } from './Nav/NavDropdown';
+export { Menu, MenuItem, MenuDivider } from './Menu/Menu';
+export { MegaMenu, MegaMenuColumn, MegaMenuLink } from './Menu/MegaMenu';
+
+// SideMenu Components
+export { SideMenu } from './SideMenu/SideMenu';
+export { SideMenuList } from './SideMenu/SideMenuList';
+export { SideMenuItem } from './SideMenu/SideMenuItem';
+
+// Types
+export type {
+  NavbarProps,
+  NavProps,
+  NavItemProps,
+  NavDropdownProps,
+  SideMenuProps,
+  SideMenuListProps,
+  SideMenuItemProps,
+} from '../../lib/types/components';

package/src/components/Navigation/scripts/NavbarInteractions.ts

@@ -0,0 +1,171 @@
+import Navbar from './index';
+import { NAVBAR } from '../../../lib/constants/components';
+
+/**
+ * Parse data attributes from an element to create navbar options
+ * @param element - The navbar element
+ * @returns Parsed options object
+ */
+function parseDataAttributes(element: HTMLElement): any {
+  const dataset = element.dataset;
+
+  return {
+    collapsible: dataset.collapsible !== 'false',
+    expanded: dataset.expanded === 'true',
+    position: dataset.position || 'static',
+    backdrop: dataset.backdrop === 'true',
+    keyboard: dataset.keyboard !== 'false',
+    autoClose: dataset.autoClose !== 'false',
+  };
+}
+
+/**
+ * Initialize navbar components from data attributes
+ * Finds all elements with [data-navbar] and creates Navbar instances
+ *
+ * @example
+ * ```html
+ * <nav class="c-navbar" data-navbar data-collapsible="true" data-auto-close="true">
+ *   <!-- navbar content -->
+ * </nav>
+ * ```
+ *
+ * @returns Array of created Navbar instances
+ */
+export function initFromDataAttributes(): Navbar[] {
+  const instances: Navbar[] = [];
+
+  document.querySelectorAll('[data-navbar]').forEach(element => {
+    const options = parseDataAttributes(element as HTMLElement);
+    const instance = new Navbar(element as HTMLElement, options);
+    instances.push(instance);
+
+    // Store instance reference on the element for later retrieval
+    (element as any)._navbarInstance = instance;
+  });
+
+  return instances;
+}
+
+/**
+ * Get a navbar instance from an element
+ * @param element - The navbar element or selector
+ * @returns The Navbar instance or null if not found
+ */
+export function getInstance(element: string | HTMLElement): Navbar | null {
+  const el =
+    typeof element === 'string' ? (document.querySelector(element) as HTMLElement) : element;
+
+  if (!el) return null;
+
+  return (el as any)._navbarInstance || null;
+}
+
+/**
+ * Create a new navbar instance programmatically
+ * @param element - The navbar element or selector
+ * @param options - Configuration options
+ * @returns New Navbar instance
+ */
+export function create(element: string | HTMLElement, options: any = {}): Navbar {
+  const instance = new Navbar(element, options);
+
+  // Store instance reference
+  const el =
+    typeof element === 'string' ? (document.querySelector(element) as HTMLElement) : element;
+
+  if (el) {
+    (el as any)._navbarInstance = instance;
+  }
+
+  return instance;
+}
+
+/**
+ * Dispose all navbar instances
+ * Destroys all navbar instances and cleans up references
+ */
+export function disposeAll(): void {
+  document.querySelectorAll(NAVBAR.SELECTORS.NAVBAR).forEach(element => {
+    const instance = (element as any)._navbarInstance;
+    if (instance && typeof instance.destroy === 'function') {
+      instance.destroy();
+      delete (element as any)._navbarInstance;
+    }
+  });
+}
+
+/**
+ * Expand all navbar instances
+ */
+export function expandAll(): void {
+  document.querySelectorAll(NAVBAR.SELECTORS.NAVBAR).forEach(element => {
+    const instance = (element as any)._navbarInstance;
+    if (instance && typeof instance.expand === 'function') {
+      instance.expand();
+    }
+  });
+}
+
+/**
+ * Collapse all navbar instances
+ */
+export function collapseAll(): void {
+  document.querySelectorAll(NAVBAR.SELECTORS.NAVBAR).forEach(element => {
+    const instance = (element as any)._navbarInstance;
+    if (instance && typeof instance.collapse === 'function') {
+      instance.collapse();
+    }
+  });
+}
+
+/**
+ * Toggle all navbar instances
+ */
+export function toggleAll(): void {
+  document.querySelectorAll(NAVBAR.SELECTORS.NAVBAR).forEach(element => {
+    const instance = (element as any)._navbarInstance;
+    if (instance && typeof instance.toggle === 'function') {
+      instance.toggle();
+    }
+  });
+}
+
+/**
+ * Get all navbar instances
+ * @returns Array of all Navbar instances
+ */
+export function getAllInstances(): Navbar[] {
+  const instances: Navbar[] = [];
+
+  document.querySelectorAll(NAVBAR.SELECTORS.NAVBAR).forEach(element => {
+    const instance = (element as any)._navbarInstance;
+    if (instance) {
+      instances.push(instance);
+    }
+  });
+
+  return instances;
+}
+
+/**
+ * Event delegation helper for navbar toggle buttons
+ * Handles clicks on navbar togglers throughout the document
+ */
+export function setupGlobalEventDelegation(): void {
+  document.addEventListener('click', event => {
+    const target = event.target as HTMLElement;
+    const toggler = target.closest(NAVBAR.SELECTORS.TOGGLER);
+
+    if (toggler) {
+      const navbar = toggler.closest(NAVBAR.SELECTORS.NAVBAR);
+      if (navbar) {
+        const instance = getInstance(navbar as HTMLElement);
+        if (instance) {
+          event.preventDefault();
+          instance.toggle();
+        }
+      }
+    }
+  });
+}