@shohojdhara/atomix 0.1.16 → 0.1.17

package/src/components/Navbar/Menu.tsx

@@ -1,122 +0,0 @@
-import React, { forwardRef, ReactNode } from 'react';
-import { MenuProps, MenuItemProps } from '../../lib/types/components';
-import { Icon } from '../Icon/Icon';
-
-export const Menu: React.FC<MenuProps> = forwardRef<HTMLDivElement, MenuProps>(({
-  children,
-  className = '',
-  disabled = false
-}, ref) => {
-  return (
-    <div ref={ref} className={`c-menu ${className}`}>
-      <ul className="c-menu__list" role="menu">
-        {React.Children.map(children, child => {
-          if (React.isValidElement(child)) {
-            // Pass disabled prop down to all children if Menu is disabled
-            return React.cloneElement(child, {
-              ...child.props,
-              disabled: disabled ? true : child.props.disabled
-            });
-          }
-          return child;
-        })}
-      </ul>
-    </div>
-  );
-});
-
-export type { MenuProps, MenuItemProps, MenuDividerProps };
-
-export default Menu;
-
-interface MenuDividerProps {
-  /**
-   * Additional CSS class names
-   */
-  className?: string;
-}
-
-export const MenuItem: React.FC<MenuItemProps> = forwardRef<HTMLLIElement, MenuItemProps>(({
-  children,
-  href = '#',
-  icon,
-  active = false,
-  disabled = false,
-  onClick,
-  className = ''
-}, ref) => {
-  const handleClick = (e: React.MouseEvent) => {
-    if (disabled) {
-      e.preventDefault();
-      return;
-    }
-    
-    if (onClick) {
-      onClick();
-    }
-  };
-  
-  const itemClass = `c-menu__item ${active ? 'is-active' : ''} ${disabled ? 'is-disabled' : ''} ${className}`;
-  
-  return (
-    <li ref={ref} className={itemClass} role="menuitem">
-      <a 
-        href={href} 
-        className="c-menu__link"
-        onClick={handleClick}
-        aria-disabled={disabled}
-        aria-current={active ? 'page' : undefined}
-      >
-        {icon && (
-          typeof icon === 'string' ? (
-            icon.startsWith('c-icon-') ? (
-              <Icon 
-                name={mapIconName(icon.replace('c-icon-', ''))} 
-                size="sm"
-                className="c-menu__icon"
-              />
-            ) : (
-              <i className={`c-menu__icon ${icon}`}>
-                {typeof icon !== 'string' && icon}
-              </i>
-            )
-          ) : (
-            <span className="c-menu__icon">
-              {icon}
-            </span>
-          )
-        )}
-        {children}
-      </a>
-    </li>
-  );
-});
-
-// Map icon-lux names to Phosphor icon names
-export const mapIconName = (luxIconName: string): any => {
-  const iconMap: Record<string, any> = {
-    'circle': 'Circle',
-    'caret-down': 'CaretDown',
-    'caret-up': 'CaretUp',
-    'caret-right': 'CaretRight',
-    'user': 'User',
-    'settings': 'Gear',
-    'sign-out': 'SignOut',
-    'file': 'File',
-    'bookmark': 'Bookmark',
-    'question-circle': 'Question',
-    'bell': 'Bell',
-    'search': 'MagnifyingGlass',
-    // Add more mappings as needed
-  };
-  
-  return iconMap[luxIconName] || 'Circle'; // Default to Circle if no mapping found
-};
-
-export const MenuDivider: React.FC<MenuDividerProps> = forwardRef<HTMLLIElement, MenuDividerProps>(({
-  className = ''
-}, ref) => {
-  return (
-    <li ref={ref} className={`c-menu__divider ${className}`} role="separator"></li>
-  );
-}); 

package/src/components/Navbar/Nav.tsx

@@ -1,35 +0,0 @@
-import React, { forwardRef } from 'react';
-import { NavProps } from '../../lib/types/components';
-import { useNav } from '../../lib/composables/useNavbar';
-
-export const Nav: React.FC<NavProps> = forwardRef<HTMLUListElement, NavProps>(({
-  children,
-  alignment = 'start',
-  className = '',
-  disabled = false
-}, ref) => {
-  const { generateNavClass } = useNav({ alignment });
-  
-  const navClass = generateNavClass({ alignment, className });
-  
-  return (
-    <ul ref={ref} className={navClass} role="menubar" aria-orientation="horizontal">
-      {React.Children.map(children, child => {
-        if (React.isValidElement(child)) {
-          // Pass disabled prop down to all children if Nav is disabled
-          return React.cloneElement(child, {
-            ...child.props,
-            disabled: disabled ? true : child.props.disabled
-          });
-        }
-        return child;
-      })}
-    </ul>
-  );
-});
-
-export type { NavProps  };
-
-Nav.displayName = 'Nav';
-
-export default Nav;

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;