@shohojdhara/atomix 0.1.16 → 0.1.18

package/src/components/Navbar/NavDropdown.tsx

@@ -1,108 +0,0 @@
-import React, { useState, useEffect, useRef, forwardRef} from 'react';
-import { NavDropdownProps } from '../../lib/types/components';
-import { useNavDropdown } from '../../lib/composables/useNavbar';
-import { NavItem } from './NavItem';
-import { Icon } from '../Icon/Icon';
-
-export const NavDropdown: React.FC<NavDropdownProps> = forwardRef<HTMLLIElement, NavDropdownProps>(({
-  title,
-  children,
-  alignment = 'start',
-  megaMenu = false,
-  className = '',
-  disabled = false
-}, ref) => {
-  const { generateDropdownMenuClass, getIconName } = useNavDropdown({ 
-    alignment, megaMenu 
-  });
-  
-  const [isActive, setIsActive] = useState(false);
-  const dropdownRef = useRef<HTMLDivElement>(null);
-  
-  const dropdownMenuClass = generateDropdownMenuClass({ 
-    alignment, megaMenu, className 
-  });
-  
-  // Get the appropriate icon name
-  const iconName = getIconName(megaMenu);
-  
-  // Handle dropdown toggle
-  const handleToggle = () => {
-    if (disabled) return;
-    setIsActive(!isActive);
-  };
-  
-  // Handle click outside to close dropdown (desktop only)
-  useEffect(() => {
-    if (!isActive) return undefined;
-    
-    const handleClickOutside = (e: MouseEvent) => {
-      const isMobile = window.innerWidth < 768; // MD breakpoint
-      
-      if (!isMobile && dropdownRef.current && !dropdownRef.current.contains(e.target as Node)) {
-        setIsActive(false);
-      }
-    };
-    
-    document.addEventListener('mousedown', handleClickOutside);
-    return () => {
-      document.removeEventListener('mousedown', handleClickOutside);
-    };
-  }, [isActive]);
-  
-  // Handle Escape key to close dropdown
-  useEffect(() => {
-    if (!isActive) return undefined;
-    
-    const handleKeyDown = (e: KeyboardEvent) => {
-      if (e.key === 'Escape') {
-        setIsActive(false);
-      }
-    };
-    
-    document.addEventListener('keydown', handleKeyDown);
-    return () => {
-      document.removeEventListener('keydown', handleKeyDown);
-    };
-  }, [isActive]);
-  
-  // Create the title element with the icon
-  const titleWithIcon = (
-    <>
-      {title}
-      <Icon name={iconName as any} size="sm" className="c-nav__icon" />
-    </>
-  );
-  
-  // Create the dropdown/mega menu content
-  const menuContent = (
-    <div 
-      className={dropdownMenuClass} 
-      ref={dropdownRef}
-      aria-hidden={!isActive}
-    >
-      {children}
-    </div>
-  );
-  
-  return (
-    <NavItem 
-      dropdown={!megaMenu} 
-      megaMenu={megaMenu} 
-      disabled={disabled} 
-      className={isActive ? 'is-active' : ''}
-      href="#"
-      onClick={handleToggle}
-      aria-expanded={isActive}
-    >
-      {titleWithIcon}
-      {menuContent}
-    </NavItem>
-  );
-});
-
-export type { NavDropdownProps };
-
-NavDropdown.displayName = 'NavDropdown';
-
-export default NavDropdown;

package/src/components/Navbar/NavItem.tsx

@@ -1,128 +0,0 @@
-import React, { useState, useEffect, useRef, ReactNode, forwardRef } from 'react';
-import { NavItemProps } from '../../lib/types/components';
-import { useNavItem } from '../../lib/composables/useNavbar';
-
-export const NavItem: React.FC<NavItemProps> = forwardRef<HTMLLIElement, NavItemProps>(({
-  children,
-  dropdown = false,
-  megaMenu = false,
-  active = false,
-  href,
-  onClick,
-  className = '',
-  disabled = false,
-  'aria-expanded': ariaExpanded,
-}, ref) => {
-  const { generateNavItemClass, generateNavLinkClass, handleClick } = useNavItem({ 
-    dropdown,
-    megaMenu,
-    active, 
-    disabled 
-  });
-  
-  // State for tracking dropdown open state
-  const [isActive, setIsActive] = useState(false);
-  
-  // Ref for detecting outside clicks
-  const itemRef = useRef<HTMLAnchorElement>(null);
-  
-  // Toggle dropdown
-  const handleDropdownToggle = (e: React.MouseEvent) => {
-    if (dropdown || megaMenu) {
-      e.preventDefault();
-      setIsActive(!isActive);
-    }
-  };
-  
-  // Close dropdown on outside click (desktop only)
-  useEffect(() => {
-    if ((!dropdown && !megaMenu) || !isActive) return undefined;
-    
-    const handleOutsideClick = (e: MouseEvent) => {
-      if (itemRef.current && !itemRef.current.contains(e.target as Node)) {
-        // Only handle desktop outside clicks
-        const isMobile = window.innerWidth < 768; // MD breakpoint
-        if (!isMobile) {
-          setIsActive(false);
-        }
-      }
-    };
-    
-    document.addEventListener('click', handleOutsideClick);
-    return () => {
-      document.removeEventListener('click', handleOutsideClick);
-    };
-  }, [dropdown, megaMenu, isActive]);
-  
-  // Close dropdown on resize to desktop
-  useEffect(() => {
-    if (!dropdown && !megaMenu) return undefined;
-    
-    const handleResize = () => {
-      const isMobile = window.innerWidth < 768; // MD breakpoint
-      if (!isMobile && isActive) {
-        setIsActive(false);
-      }
-    };
-    
-    window.addEventListener('resize', handleResize);
-    return () => {
-      window.removeEventListener('resize', handleResize);
-    };
-  }, [dropdown, megaMenu, isActive]);
-  
-  const navItemClass = generateNavItemClass({ 
-    dropdown, 
-    megaMenu,
-    active, 
-    disabled, 
-    className
-  }) + (isActive ? ' is-active' : '');
-  
-  const navLinkClass = generateNavLinkClass(
-    active, 
-    disabled, 
-    (dropdown || megaMenu) ? 'c-nav__dropdown-toggle' : ''
-  );
-  
-  // For dropdown items, we need to determine content structure
-  const getDropdownContent = (): ReactNode[] => {
-    const childrenArray = React.Children.toArray(children);
-    
-    // For NavDropdown component, childrenArray will be [title, content]
-    // For regular NavItem, it's just the content directly
-    return childrenArray;
-  };
-  
-  const childContent = getDropdownContent();
-  
-  // Use aria-expanded from props if provided, otherwise use local state
-  const expanded = typeof ariaExpanded !== 'undefined' ? ariaExpanded : isActive;
-  
-  return (
-    <li ref={ref}
-      className={navItemClass} 
-      role="menuitem"
-      aria-haspopup={dropdown || megaMenu}
-    >
-      <a ref={itemRef}
-        href={href || '#'} 
-        className={navLinkClass}
-        onClick={(dropdown || megaMenu) ? handleDropdownToggle : handleClick(onClick)}
-        aria-disabled={disabled}
-        aria-expanded={dropdown || megaMenu ? expanded : undefined}
-        aria-current={active && !dropdown && !megaMenu ? 'page' : undefined}
-      >
-        {(dropdown || megaMenu) ? childContent[0] : children}
-      </a>
-      
-      {(dropdown || megaMenu) && childContent.length > 1 && childContent[1]}
-    </li>
-  );
-});
-
-export type { NavItemProps };
-
-NavItem.displayName = 'NavItem';
-
-export default NavItem;

package/src/components/Navbar/Navbar.tsx

@@ -1,124 +0,0 @@
-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';
-
-export const Navbar: React.FC<NavbarProps> = forwardRef<HTMLDivElement, NavbarProps>(({
-  brand,
-  children,
-  variant,
-  position = 'static',
-  containerWidth,
-  collapsible = true,
-  expanded,
-  onToggle,
-  className = '',
-  disabled = false
-}, 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 className={navbarClass} aria-label="Main navigation">
-      <div ref={ref} 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;

package/src/components/Navbar/index.ts

@@ -1,6 +0,0 @@
-export { Navbar } from './Navbar';
-export { Nav } from './Nav';
-export { NavItem } from './NavItem';
-export { NavDropdown } from './NavDropdown';
-export { Menu, MenuItem, MenuDivider } from './Menu';
-export { MegaMenu, MegaMenuColumn, MegaMenuLink } from './MegaMenu';