@shohojdhara/atomix 0.1.16 → 0.1.18

package/src/components/Modal/scripts/modalInteractions.ts

@@ -11,10 +11,10 @@ import { getModalInstance } from './index';
  */
 export function handleModalOpenClick(event: MouseEvent, modalSelector: string): void {
   event.preventDefault();
-  
+
   const modalElement = document.querySelector(modalSelector) as HTMLElement;
   if (!modalElement) return;
-  
+
   // Get modal instance or apply basic open logic
   const instance = getModalInstance(modalElement);
   if (instance) {
@@ -34,13 +34,13 @@ export function handleModalOpenClick(event: MouseEvent, modalSelector: string):
  */
 export function handleModalCloseClick(event: MouseEvent, modal: HTMLElement): void {
   event.preventDefault();
-  
+
   const instance = getModalInstance(modal);
   if (instance) {
     instance.close();
   } else {
     modal.classList.remove(MODAL.CLASSES.IS_OPEN);
-    
+
     // Listen for transition end to hide the modal
     const backdrop = modal.querySelector(MODAL.SELECTORS.BACKDROP);
     if (backdrop) {
@@ -48,7 +48,7 @@ export function handleModalCloseClick(event: MouseEvent, modal: HTMLElement): vo
         modal.style.display = 'none';
         backdrop.removeEventListener('transitionend', transitionEndHandler);
       };
-      
+
       backdrop.addEventListener('transitionend', transitionEndHandler);
     } else {
       setTimeout(() => {
@@ -64,8 +64,10 @@ export function handleModalCloseClick(event: MouseEvent, modal: HTMLElement): vo
  */
 export function handleModalKeydown(event: KeyboardEvent): void {
   if (event.key === 'Escape') {
-    const openModals = document.querySelectorAll(`${MODAL.SELECTORS.MODAL}.${MODAL.CLASSES.IS_OPEN}`);
-    
+    const openModals = document.querySelectorAll(
+      `${MODAL.SELECTORS.MODAL}.${MODAL.CLASSES.IS_OPEN}`
+    );
+
     openModals.forEach(modal => {
       const instance = getModalInstance(modal as HTMLElement);
       if (instance) {
@@ -84,7 +86,7 @@ export function handleModalKeydown(event: KeyboardEvent): void {
  */
 export function handleBackdropClick(event: MouseEvent, modal: HTMLElement): void {
   const backdrop = modal.querySelector(MODAL.SELECTORS.BACKDROP);
-  
+
   if (backdrop && event.target === backdrop) {
     const instance = getModalInstance(modal);
     if (instance) {
@@ -101,9 +103,9 @@ export function handleBackdropClick(event: MouseEvent, modal: HTMLElement): void
  */
 export function setupModalEventDelegation(): void {
   // Document click handler for delegation
-  document.addEventListener('click', (event) => {
+  document.addEventListener('click', event => {
     const target = event.target as HTMLElement;
-    
+
     // Handle open button clicks
     const openButton = target.closest('[data-modal-open]');
     if (openButton) {
@@ -113,7 +115,7 @@ export function setupModalEventDelegation(): void {
       }
       return;
     }
-    
+
     // Handle close button clicks
     const closeButton = target.closest('[data-modal-close]');
     if (closeButton) {
@@ -123,7 +125,7 @@ export function setupModalEventDelegation(): void {
       }
       return;
     }
-    
+
     // Handle backdrop clicks
     const backdrop = target.closest(MODAL.SELECTORS.BACKDROP);
     if (backdrop) {
@@ -133,7 +135,7 @@ export function setupModalEventDelegation(): void {
       }
     }
   });
-  
+
   // Global escape key handler
   document.addEventListener('keydown', handleModalKeydown);
-} 
+}

package/src/components/{Navbar → Navigation/Menu}/MegaMenu.tsx

@@ -1,79 +1,72 @@
 import React, { forwardRef, ReactNode } from 'react';
-import { MegaMenuProps, MegaMenuColumnProps, MegaMenuLinkProps } from '../../lib/types/components';
-import { Icon } from '../Icon/Icon';
+import {
+  MegaMenuProps,
+  MegaMenuColumnProps,
+  MegaMenuLinkProps,
+} from '../../../lib/types/components';
+import { Icon } from '../../Icon/Icon';
 import { mapIconName } from './Menu'; // Import the mapping function
 
-export const MegaMenu: React.FC<MegaMenuProps> = forwardRef<HTMLDivElement, MegaMenuProps>(({
-  children,
-  className = '',
-  disabled = false
-}, ref) => {
-  return (
-    <div ref={ref} className={`c-menu c-menu--mega ${className}`}>
-      <div className="c-menu__container">
-        <div className="c-menu__grid o-grid">
-          {React.Children.map(children, child => {
-            if (React.isValidElement(child)) {
-              // Pass disabled prop down to all children if MegaMenu is disabled
-              return React.cloneElement(child, {
-                ...child.props,
-                disabled: disabled ? true : child.props.disabled
-              });
-            }
-            return child;
-          })}
+export const MegaMenu: React.FC<MegaMenuProps> = forwardRef<HTMLDivElement, MegaMenuProps>(
+  ({ children, className = '', disabled = false }, ref) => {
+    return (
+      <div ref={ref} className={`c-menu c-menu--mega ${className}`}>
+        <div className="c-menu__container">
+          <div className="c-menu__grid o-grid">
+            {React.Children.map(children, child => {
+              if (React.isValidElement(child)) {
+                // Pass disabled prop down to all children if MegaMenu is disabled
+                return React.cloneElement(child, {
+                  ...child.props,
+                  disabled: disabled ? true : child.props.disabled,
+                });
+              }
+              return child;
+            })}
+          </div>
         </div>
       </div>
-    </div>
-  );
-});
+    );
+  }
+);
 
-export const MegaMenuColumn: React.FC<MegaMenuColumnProps> = forwardRef<HTMLDivElement, MegaMenuColumnProps>(({
-  title,
-  icon,
-  children,
-  width = 'auto',
-  className = '',
-  disabled = false
-}, ref) => {
+export const MegaMenuColumn: React.FC<MegaMenuColumnProps> = forwardRef<
+  HTMLDivElement,
+  MegaMenuColumnProps
+>(({ title, icon, children, width = 'auto', className = '', disabled = false }, ref) => {
   const columnClass = `o-grid__col o-grid__col--${width} ${className}`;
-  
+
   return (
     <div ref={ref} className={columnClass}>
       {(title || icon) && (
         <div className="c-menu__header">
-          {icon && (
-            typeof icon === 'string' ? (
+          {icon &&
+            (typeof icon === 'string' ? (
               icon.startsWith('c-icon-') ? (
-                <Icon 
+                <Icon
                   name={mapIconName(icon.replace('c-icon-', ''))}
                   size="sm"
                   className="c-menu__header-icon"
                 />
               ) : (
-                <i className={`c-menu__header-icon ${icon}`}>
-                  {typeof icon !== 'string' && icon}
-                </i>
+                <i className={`c-menu__header-icon ${icon}`}>{typeof icon !== 'string' && icon}</i>
               )
             ) : (
-              <span className="c-menu__header-icon">
-                {icon}
-              </span>
-            )
-          )}
+              <span className="c-menu__header-icon">{icon}</span>
+            ))}
           {title && <div className="c-menu__header-title">{title}</div>}
         </div>
       )}
-      
+
       <ul className="c-menu__subitems-list" role="menu">
-        {React.Children.map(children, (child) => {
+        {React.Children.map(children, child => {
           if (React.isValidElement(child)) {
             // Pass disabled prop down to all children if column is disabled
             return (
               <li className="c-menu__subitem" role="menuitem">
                 {React.cloneElement(child, {
                   ...child.props,
-                  disabled: disabled ? true : child.props.disabled
+                  disabled: disabled ? true : child.props.disabled,
                 })}
               </li>
             );
@@ -85,27 +78,25 @@ export const MegaMenuColumn: React.FC<MegaMenuColumnProps> = forwardRef<HTMLDivE
   );
 });
 
-export const MegaMenuLink: React.FC<MegaMenuLinkProps> = forwardRef<HTMLAnchorElement, MegaMenuLinkProps>(({
-  href,
-  children,
-  className = '',
-  disabled = false,
-  onClick
-}, ref) => {
+export const MegaMenuLink: React.FC<MegaMenuLinkProps> = forwardRef<
+  HTMLAnchorElement,
+  MegaMenuLinkProps
+>(({ href, children, className = '', disabled = false, onClick }, ref) => {
   const handleClick = (e: React.MouseEvent) => {
     if (disabled) {
       e.preventDefault();
       return;
     }
-    
+
     if (onClick) {
       onClick();
     }
   };
-  
+
   return (
-    <a ref={ref}
-      href={href} 
+    <a
+      ref={ref}
+      href={href}
       className={`c-menu__subitem-link ${disabled ? 'is-disabled' : ''} ${className}`}
       onClick={handleClick}
       aria-disabled={disabled}
@@ -113,4 +104,4 @@ export const MegaMenuLink: React.FC<MegaMenuLinkProps> = forwardRef<HTMLAnchorEl
       {children}
     </a>
   );
-});
+});

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

@@ -0,0 +1,340 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { Menu, MenuItem, MenuDivider } from './Menu';
+
+const meta = {
+  title: 'Components/Navigation/Menu',
+  component: Menu,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    disabled: {
+      control: 'boolean',
+      description: 'Whether the menu is disabled',
+    },
+    className: {
+      control: 'text',
+      description: 'Additional CSS class names',
+    },
+  },
+} satisfies Meta<typeof Menu>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+// Mock icon components for stories
+const HomeIcon = () => (
+  <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+    <path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z" />
+    <polyline points="9,22 9,12 15,12 15,22" />
+  </svg>
+);
+
+const UserIcon = () => (
+  <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+    <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2" />
+    <circle cx="12" cy="7" r="4" />
+  </svg>
+);
+
+const SettingsIcon = () => (
+  <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+    <circle cx="12" cy="12" r="3" />
+    <path d="M12 1v6m0 6v6m11-7h-6m-6 0H1" />
+  </svg>
+);
+
+const FileIcon = () => (
+  <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+    <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" />
+    <polyline points="14,2 14,8 20,8" />
+    <line x1="16" y1="13" x2="8" y2="13" />
+    <line x1="16" y1="17" x2="8" y2="17" />
+    <polyline points="10,9 9,9 8,9" />
+  </svg>
+);
+
+const BookmarkIcon = () => (
+  <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+    <path d="M19 21l-7-5-7 5V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2z" />
+  </svg>
+);
+
+const SignOutIcon = () => (
+  <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+    <path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4" />
+    <polyline points="16,17 21,12 16,7" />
+    <line x1="21" y1="12" x2="9" y2="12" />
+  </svg>
+);
+
+// Basic Menu
+export const Default: Story = {
+  render: () => (
+    <Menu>
+      <MenuItem href="/dashboard">Dashboard</MenuItem>
+      <MenuItem href="/profile">Profile</MenuItem>
+      <MenuItem href="/settings">Settings</MenuItem>
+      <MenuItem href="/logout">Logout</MenuItem>
+    </Menu>
+  ),
+};
+
+// Menu with icons
+export const WithIcons: Story = {
+  render: () => (
+    <Menu>
+      <MenuItem href="/dashboard" icon={<HomeIcon />}>
+        Dashboard
+      </MenuItem>
+      <MenuItem href="/profile" icon={<UserIcon />}>
+        Profile
+      </MenuItem>
+      <MenuItem href="/settings" icon={<SettingsIcon />}>
+        Settings
+      </MenuItem>
+      <MenuItem href="/logout" icon={<SignOutIcon />}>
+        Logout
+      </MenuItem>
+    </Menu>
+  ),
+};
+
+// Menu with dividers
+export const WithDividers: Story = {
+  render: () => (
+    <Menu>
+      <MenuItem href="/dashboard" icon={<HomeIcon />}>
+        Dashboard
+      </MenuItem>
+      <MenuItem href="/profile" icon={<UserIcon />}>
+        Profile
+      </MenuItem>
+      <MenuDivider />
+      <MenuItem href="/settings" icon={<SettingsIcon />}>
+        Settings
+      </MenuItem>
+      <MenuDivider />
+      <MenuItem href="/logout" icon={<SignOutIcon />}>
+        Logout
+      </MenuItem>
+    </Menu>
+  ),
+};
+
+// Menu with active item
+export const WithActiveItem: Story = {
+  render: () => (
+    <Menu>
+      <MenuItem href="/dashboard" icon={<HomeIcon />} active>
+        Dashboard
+      </MenuItem>
+      <MenuItem href="/profile" icon={<UserIcon />}>
+        Profile
+      </MenuItem>
+      <MenuItem href="/settings" icon={<SettingsIcon />}>
+        Settings
+      </MenuItem>
+      <MenuItem href="/logout" icon={<SignOutIcon />}>
+        Logout
+      </MenuItem>
+    </Menu>
+  ),
+};
+
+// Menu with disabled items
+export const WithDisabledItems: Story = {
+  render: () => (
+    <Menu>
+      <MenuItem href="/dashboard" icon={<HomeIcon />}>
+        Dashboard
+      </MenuItem>
+      <MenuItem href="/profile" icon={<UserIcon />} disabled>
+        Profile (Disabled)
+      </MenuItem>
+      <MenuItem href="/settings" icon={<SettingsIcon />}>
+        Settings
+      </MenuItem>
+      <MenuItem href="/logout" icon={<SignOutIcon />}>
+        Logout
+      </MenuItem>
+    </Menu>
+  ),
+};
+
+// Disabled Menu
+export const DisabledMenu: Story = {
+  args: {
+    disabled: true,
+  },
+  render: args => (
+    <Menu {...args}>
+      <MenuItem href="/dashboard" icon={<HomeIcon />}>
+        Dashboard
+      </MenuItem>
+      <MenuItem href="/profile" icon={<UserIcon />}>
+        Profile
+      </MenuItem>
+      <MenuItem href="/settings" icon={<SettingsIcon />}>
+        Settings
+      </MenuItem>
+      <MenuItem href="/logout" icon={<SignOutIcon />}>
+        Logout
+      </MenuItem>
+    </Menu>
+  ),
+};
+
+// Menu with mixed content
+export const MixedContent: Story = {
+  render: () => (
+    <Menu>
+      <MenuItem href="/dashboard" icon={<HomeIcon />} active>
+        Dashboard
+      </MenuItem>
+      <MenuItem href="/profile" icon={<UserIcon />}>
+        My Profile
+      </MenuItem>
+      <MenuDivider />
+      <MenuItem href="/documents" icon={<FileIcon />}>
+        Documents
+      </MenuItem>
+      <MenuItem href="/bookmarks" icon={<BookmarkIcon />}>
+        Bookmarks
+      </MenuItem>
+      <MenuDivider />
+      <MenuItem href="/settings" icon={<SettingsIcon />}>
+        Account Settings
+      </MenuItem>
+      <MenuItem href="/logout" icon={<SignOutIcon />}>
+        Sign Out
+      </MenuItem>
+    </Menu>
+  ),
+};
+
+// Menu with click handlers
+export const WithClickHandlers: Story = {
+  render: () => (
+    <Menu>
+      <MenuItem icon={<HomeIcon />} onClick={() => alert('Dashboard clicked!')}>
+        Dashboard
+      </MenuItem>
+      <MenuItem icon={<UserIcon />} onClick={() => alert('Profile clicked!')}>
+        Profile
+      </MenuItem>
+      <MenuItem icon={<SettingsIcon />} onClick={() => alert('Settings clicked!')}>
+        Settings
+      </MenuItem>
+      <MenuDivider />
+      <MenuItem icon={<SignOutIcon />} onClick={() => alert('Logout clicked!')}>
+        Logout
+      </MenuItem>
+    </Menu>
+  ),
+};
+
+// Simple menu without icons
+export const SimpleMenu: Story = {
+  render: () => (
+    <Menu>
+      <MenuItem href="/home">Home</MenuItem>
+      <MenuItem href="/about">About Us</MenuItem>
+      <MenuItem href="/services">Services</MenuItem>
+      <MenuItem href="/portfolio">Portfolio</MenuItem>
+      <MenuItem href="/contact">Contact</MenuItem>
+    </Menu>
+  ),
+};
+
+// User account menu example
+export const UserAccountMenu: Story = {
+  render: () => (
+    <Menu>
+      <MenuItem href="/profile" icon={<UserIcon />} active>
+        My Profile
+      </MenuItem>
+      <MenuItem href="/account" icon={<SettingsIcon />}>
+        Account Settings
+      </MenuItem>
+      <MenuDivider />
+      <MenuItem href="/documents" icon={<FileIcon />}>
+        My Documents
+      </MenuItem>
+      <MenuItem href="/bookmarks" icon={<BookmarkIcon />}>
+        Saved Items
+      </MenuItem>
+      <MenuDivider />
+      <MenuItem href="/logout" icon={<SignOutIcon />}>
+        Sign Out
+      </MenuItem>
+    </Menu>
+  ),
+};
+
+// Complete showcase
+export const CompleteShowcase: Story = {
+  render: () => (
+    <div style={{ display: 'flex', gap: '2rem', flexWrap: 'wrap' }}>
+      <div>
+        <h3>Basic Menu</h3>
+        <Menu>
+          <MenuItem href="/home">Home</MenuItem>
+          <MenuItem href="/about">About</MenuItem>
+          <MenuItem href="/contact">Contact</MenuItem>
+        </Menu>
+      </div>
+
+      <div>
+        <h3>Menu with Icons</h3>
+        <Menu>
+          <MenuItem href="/dashboard" icon={<HomeIcon />} active>
+            Dashboard
+          </MenuItem>
+          <MenuItem href="/profile" icon={<UserIcon />}>
+            Profile
+          </MenuItem>
+          <MenuItem href="/settings" icon={<SettingsIcon />}>
+            Settings
+          </MenuItem>
+        </Menu>
+      </div>
+
+      <div>
+        <h3>Menu with Dividers</h3>
+        <Menu>
+          <MenuItem href="/dashboard" icon={<HomeIcon />}>
+            Dashboard
+          </MenuItem>
+          <MenuDivider />
+          <MenuItem href="/profile" icon={<UserIcon />}>
+            Profile
+          </MenuItem>
+          <MenuItem href="/settings" icon={<SettingsIcon />}>
+            Settings
+          </MenuItem>
+          <MenuDivider />
+          <MenuItem href="/logout" icon={<SignOutIcon />}>
+            Logout
+          </MenuItem>
+        </Menu>
+      </div>
+
+      <div>
+        <h3>Menu with Disabled Items</h3>
+        <Menu>
+          <MenuItem href="/dashboard" icon={<HomeIcon />}>
+            Dashboard
+          </MenuItem>
+          <MenuItem href="/profile" icon={<UserIcon />} disabled>
+            Profile (Disabled)
+          </MenuItem>
+          <MenuItem href="/settings" icon={<SettingsIcon />}>
+            Settings
+          </MenuItem>
+        </Menu>
+      </div>
+    </div>
+  ),
+};