@shohojdhara/atomix 0.3.14 → 0.4.0

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

@@ -33,83 +33,83 @@ export const MegaMenu = forwardRef<HTMLDivElement, MegaMenuProps>(
 
 MegaMenu.displayName = 'MegaMenu';
 
-export const MegaMenuColumn = forwardRef<
-  HTMLDivElement,
-  MegaMenuColumnProps
->(({ title, icon, children, width = 'auto', className = '', disabled = false }, ref) => {
-  const columnClass = `o-grid__col o-grid__col--${width} ${className}`;
+export const MegaMenuColumn = 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.startsWith('c-icon-') ? (
-                <Icon
-                  name={mapIconName(icon.replace('c-icon-', ''))}
-                  size="sm"
-                  className="c-menu__header-icon"
-                />
+    return (
+      <div ref={ref} className={columnClass}>
+        {(title || icon) && (
+          <div className="c-menu__header">
+            {icon &&
+              (typeof icon === 'string' ? (
+                icon.startsWith('c-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>
-            ))}
-          {title && <div className="c-menu__header-title">{title}</div>}
-        </div>
-      )}
+                <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 => {
-          if (React.isValidElement(child)) {
-            // Pass disabled prop down to all children if column is disabled
-            const childProps = child.props as any;
-            return (
-              <li className="c-menu__subitem" role="menuitem">
-                {React.cloneElement(child as React.ReactElement<any>, {
-                  ...childProps,
-                  disabled: disabled ? true : childProps?.disabled,
-                })}
-              </li>
-            );
-          }
-          return null;
-        })}
-      </ul>
-    </div>
-  );
-});
+        <ul className="c-menu__subitems-list" role="menu">
+          {React.Children.map(children, child => {
+            if (React.isValidElement(child)) {
+              // Pass disabled prop down to all children if column is disabled
+              const childProps = child.props as any;
+              return (
+                <li className="c-menu__subitem" role="menuitem">
+                  {React.cloneElement(child as React.ReactElement<any>, {
+                    ...childProps,
+                    disabled: disabled ? true : childProps?.disabled,
+                  })}
+                </li>
+              );
+            }
+            return null;
+          })}
+        </ul>
+      </div>
+    );
+  }
+);
 
 MegaMenuColumn.displayName = 'MegaMenuColumn';
 
-export const MegaMenuLink = forwardRef<
-  HTMLAnchorElement,
-  MegaMenuLinkProps
->(({ href, children, className = '', disabled = false, onClick }, ref) => {
-  const handleClick = (e: React.MouseEvent) => {
-    if (disabled) {
-      e.preventDefault();
-      return;
-    }
+export const MegaMenuLink = forwardRef<HTMLAnchorElement, MegaMenuLinkProps>(
+  ({ href, children, className = '', disabled = false, onClick }, ref) => {
+    const handleClick = (e: React.MouseEvent) => {
+      if (disabled) {
+        e.preventDefault();
+        return;
+      }
 
-    if (onClick) {
-      onClick();
-    }
-  };
+      if (onClick) {
+        onClick();
+      }
+    };
 
-  return (
-    <a
-      ref={ref}
-      href={href}
-      className={`c-menu__subitem-link ${disabled ? 'is-disabled' : ''} ${className}`}
-      onClick={handleClick}
-      aria-disabled={disabled}
-    >
-      {children}
-    </a>
-  );
-});
+    return (
+      <a
+        ref={ref}
+        href={href}
+        className={`c-menu__subitem-link ${disabled ? 'is-disabled' : ''} ${className}`}
+        onClick={handleClick}
+        aria-disabled={disabled}
+      >
+        {children}
+      </a>
+    );
+  }
+);
 
 MegaMenuLink.displayName = 'MegaMenuLink';

package/src/components/Navigation/Nav/NavDropdown.tsx

@@ -84,11 +84,7 @@ export const NavDropdown: React.FC<NavDropdownProps> = forwardRef<HTMLLIElement,
 
     const MenuTag = megaMenu ? 'div' : 'ul';
     const menuContent = (
-      <MenuTag
-        className={dropdownMenuClass}
-        ref={dropdownRef as any}
-        aria-hidden={!isActive}
-      >
+      <MenuTag className={dropdownMenuClass} ref={dropdownRef as any} aria-hidden={!isActive}>
         {children}
       </MenuTag>
     );

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

@@ -456,7 +456,13 @@ export const ComplexNavigation: Story = {
 export const ResponsiveDemo: Story = {
   render: args => (
     <div style={{ maxWidth: '300px', margin: '0 auto' }}>
-      <p style={{ marginBottom: '1rem', fontSize: '0.875rem', color: 'var(--atomix-secondary-text-emphasis, #666)' }}>
+      <p
+        style={{
+          marginBottom: '1rem',
+          fontSize: '0.875rem',
+          color: 'var(--atomix-secondary-text-emphasis, #666)',
+        }}
+      >
         Resize your browser window to see the responsive behavior. On mobile (less than 768px), the
         menu becomes collapsible.
       </p>
@@ -548,9 +554,15 @@ export const DesktopCollapsible: Story = {
 
     return (
       <div style={{ maxWidth: '300px', padding: '2rem', margin: '0 auto' }}>
-        <p style={{ marginBottom: '1rem', fontSize: '0.875rem', color: 'var(--atomix-secondary-text-emphasis, #666)' }}>
-          Desktop vertical collapse - click the toggle button to expand/collapse the menu vertically.
-          Each section can also be toggled independently.
+        <p
+          style={{
+            marginBottom: '1rem',
+            fontSize: '0.875rem',
+            color: 'var(--atomix-secondary-text-emphasis, #666)',
+          }}
+        >
+          Desktop vertical collapse - click the toggle button to expand/collapse the menu
+          vertically. Each section can also be toggled independently.
         </p>
         <SideMenu
           {...args}
@@ -564,7 +576,11 @@ export const DesktopCollapsible: Story = {
               title: 'Navigation',
               items: [
                 { title: 'Home', href: '/', icon: <Icon name="House" size="sm" />, active: true },
-                { title: 'Dashboard', href: '/dashboard', icon: <Icon name="ChartBar" size="sm" /> },
+                {
+                  title: 'Dashboard',
+                  href: '/dashboard',
+                  icon: <Icon name="ChartBar" size="sm" />,
+                },
                 { title: 'Analytics', href: '/analytics', icon: <Icon name="TrendUp" size="sm" /> },
                 { title: 'Users', href: '/users', icon: <Icon name="Users" size="sm" /> },
                 { title: 'Settings', href: '/settings', icon: <Icon name="Gear" size="sm" /> },
@@ -573,16 +589,32 @@ export const DesktopCollapsible: Story = {
             {
               title: 'Products',
               items: [
-                { title: 'All Products', href: '/products', icon: <Icon name="Package" size="sm" /> },
-                { title: 'Categories', href: '/products/categories', icon: <Icon name="Tag" size="sm" /> },
-                { title: 'Inventory', href: '/products/inventory', icon: <Icon name="Warehouse" size="sm" /> },
+                {
+                  title: 'All Products',
+                  href: '/products',
+                  icon: <Icon name="Package" size="sm" />,
+                },
+                {
+                  title: 'Categories',
+                  href: '/products/categories',
+                  icon: <Icon name="Tag" size="sm" />,
+                },
+                {
+                  title: 'Inventory',
+                  href: '/products/inventory',
+                  icon: <Icon name="Warehouse" size="sm" />,
+                },
               ],
             },
             {
               title: 'Services',
               items: [
                 { title: 'Service List', href: '/services', icon: <Icon name="Gear" size="sm" /> },
-                { title: 'Service Requests', href: '/services/requests', icon: <Icon name="Clipboard" size="sm" /> },
+                {
+                  title: 'Service Requests',
+                  href: '/services/requests',
+                  icon: <Icon name="Clipboard" size="sm" />,
+                },
               ],
             },
             {
@@ -594,7 +626,15 @@ export const DesktopCollapsible: Story = {
             },
           ]}
         />
-        <div style={{ marginTop: '1rem', padding: '0.75rem', backgroundColor: 'var(--atomix-secondary-bg-subtle, rgba(0,0,0,0.05))', borderRadius: '6px', fontSize: '0.875rem' }}>
+        <div
+          style={{
+            marginTop: '1rem',
+            padding: '0.75rem',
+            backgroundColor: 'var(--atomix-secondary-bg-subtle, rgba(0,0,0,0.05))',
+            borderRadius: '6px',
+            fontSize: '0.875rem',
+          }}
+        >
           <strong>Current state:</strong> {isOpen ? 'Expanded' : 'Collapsed'}
         </div>
       </div>
@@ -621,9 +661,22 @@ export const NestedMenuItems: Story = {
       {
         title: 'Dashboard',
         items: [
-          { title: 'Overview', href: '/dashboard', icon: <Icon name="ChartBar" size="sm" />, active: true },
-          { title: 'Analytics', href: '/dashboard/analytics', icon: <Icon name="TrendUp" size="sm" /> },
-          { title: 'Reports', href: '/dashboard/reports', icon: <Icon name="FileText" size="sm" /> },
+          {
+            title: 'Overview',
+            href: '/dashboard',
+            icon: <Icon name="ChartBar" size="sm" />,
+            active: true,
+          },
+          {
+            title: 'Analytics',
+            href: '/dashboard/analytics',
+            icon: <Icon name="TrendUp" size="sm" />,
+          },
+          {
+            title: 'Reports',
+            href: '/dashboard/reports',
+            icon: <Icon name="FileText" size="sm" />,
+          },
         ],
       },
       {
@@ -631,7 +684,11 @@ export const NestedMenuItems: Story = {
         items: [
           { title: 'Users', href: '/users', icon: <Icon name="Users" size="sm" /> },
           { title: 'Roles', href: '/users/roles', icon: <Icon name="Shield" size="sm" /> },
-          { title: 'Permissions', href: '/users/permissions', icon: <Icon name="Lock" size="sm" /> },
+          {
+            title: 'Permissions',
+            href: '/users/permissions',
+            icon: <Icon name="Lock" size="sm" />,
+          },
         ],
       },
       {
@@ -646,8 +703,17 @@ export const NestedMenuItems: Story = {
         title: 'Settings',
         items: [
           { title: 'General', href: '/settings/general', icon: <Icon name="Gear" size="sm" /> },
-          { title: 'Notifications', href: '/settings/notifications', icon: <Icon name="Bell" size="sm" /> },
-          { title: 'Security', href: '/settings/security', icon: <Icon name="Lock" size="sm" />, disabled: true },
+          {
+            title: 'Notifications',
+            href: '/settings/notifications',
+            icon: <Icon name="Bell" size="sm" />,
+          },
+          {
+            title: 'Security',
+            href: '/settings/security',
+            icon: <Icon name="Lock" size="sm" />,
+            disabled: true,
+          },
         ],
       },
     ],
@@ -684,15 +750,27 @@ export const NestedMenuItemsWithChildren: Story = {
         title: 'Products',
         items: [
           { title: 'All Products', href: '/products', icon: <Icon name="Package" size="sm" /> },
-          { title: 'Categories', href: '/products/categories', icon: <Icon name="Tag" size="sm" /> },
-          { title: 'Inventory', href: '/products/inventory', icon: <Icon name="Warehouse" size="sm" /> },
+          {
+            title: 'Categories',
+            href: '/products/categories',
+            icon: <Icon name="Tag" size="sm" />,
+          },
+          {
+            title: 'Inventory',
+            href: '/products/inventory',
+            icon: <Icon name="Warehouse" size="sm" />,
+          },
         ],
       },
       {
         title: 'Services',
         items: [
           { title: 'Service List', href: '/services', icon: <Icon name="Gear" size="sm" /> },
-          { title: 'Service Requests', href: '/services/requests', icon: <Icon name="Clipboard" size="sm" /> },
+          {
+            title: 'Service Requests',
+            href: '/services/requests',
+            icon: <Icon name="Clipboard" size="sm" />,
+          },
         ],
       },
     ],
@@ -728,8 +806,16 @@ export const NestedMenuItemsCustomIcons: Story = {
         title: 'Preferences',
         toggleIcon: <Icon name="CaretDown" size="xs" />,
         items: [
-          { title: 'Notifications', href: '/settings/notifications', icon: <Icon name="Bell" size="sm" /> },
-          { title: 'Appearance', href: '/settings/appearance', icon: <Icon name="PaintBrush" size="sm" /> },
+          {
+            title: 'Notifications',
+            href: '/settings/notifications',
+            icon: <Icon name="Bell" size="sm" />,
+          },
+          {
+            title: 'Appearance',
+            href: '/settings/appearance',
+            icon: <Icon name="PaintBrush" size="sm" />,
+          },
           { title: 'Language', href: '/settings/language', icon: <Icon name="Globe" size="sm" /> },
         ],
       },
@@ -737,8 +823,16 @@ export const NestedMenuItemsCustomIcons: Story = {
         title: 'Billing',
         toggleIcon: <Icon name="CaretDown" size="xs" />,
         items: [
-          { title: 'Subscription', href: '/settings/billing', icon: <Icon name="CreditCard" size="sm" /> },
-          { title: 'Invoices', href: '/settings/invoices', icon: <Icon name="Receipt" size="sm" /> },
+          {
+            title: 'Subscription',
+            href: '/settings/billing',
+            icon: <Icon name="CreditCard" size="sm" />,
+          },
+          {
+            title: 'Invoices',
+            href: '/settings/invoices',
+            icon: <Icon name="Receipt" size="sm" />,
+          },
         ],
       },
     ],
@@ -763,7 +857,13 @@ export const DesktopCollapsibleStartCollapsed: Story = {
 
     return (
       <div style={{ maxWidth: '300px', padding: '2rem', margin: '0 auto' }}>
-        <p style={{ marginBottom: '1rem', fontSize: '0.875rem', color: 'var(--atomix-secondary-text-emphasis, #666)' }}>
+        <p
+          style={{
+            marginBottom: '1rem',
+            fontSize: '0.875rem',
+            color: 'var(--atomix-secondary-text-emphasis, #666)',
+          }}
+        >
           Sidebar starts collapsed on desktop.
         </p>
         <SideMenu
@@ -1034,7 +1134,7 @@ export const GlassCustom: Story = {
       backgroundImage="https://images.unsplash.com/photo-1441974231531-c6227db76b6e?q=80&w=2940&auto=format&fit=crop"
       overlay
     >
-      <div style={{ position: 'relative', width: '320px',}}>
+      <div style={{ position: 'relative', width: '320px' }}>
         <SideMenu
           title="Nature Explorer"
           glass={{
@@ -1119,7 +1219,7 @@ export const GlassThemeShowcase: Story = {
         backgroundImage="https://images.unsplash.com/photo-1505142468610-359e7d316be0?q=80&w=2940&auto=format&fit=crop"
         height="70vh"
       >
-        <div style={{ position: 'relative', width: '300px',}}>
+        <div style={{ position: 'relative', width: '300px' }}>
           <SideMenu title="Ocean Explorer" glass>
             <SideMenuList>
               <SideMenuItem href="/" icon={<Icon name="House" size="sm" />} active>
@@ -1153,7 +1253,7 @@ export const GlassThemeShowcase: Story = {
         backgroundImage="https://images.unsplash.com/photo-1514565131-fce0801e5785?q=80&w=2940&auto=format&fit=crop"
         height="70vh"
       >
-        <div style={{ position: 'relative', width: '300px',}}>
+        <div style={{ position: 'relative', width: '300px' }}>
           <SideMenu glass>
             <SideMenuList>
               <SideMenuItem href="/dashboard" icon={<Icon name="ChartBar" size="sm" />} active>
@@ -1187,7 +1287,7 @@ export const GlassThemeShowcase: Story = {
         backgroundImage="https://images.unsplash.com/photo-1495616811223-4d98c6e9c869?q=80&w=2940&auto=format&fit=crop"
         height="70vh"
       >
-        <div style={{ position: 'relative', width: '320px',}}>
+        <div style={{ position: 'relative', width: '320px' }}>
           <SideMenu
             title="Travel Hub"
             glass={{

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

@@ -7,8 +7,6 @@ import useForkRef from '../../../lib/utils/useForkRef';
 import SideMenuList from './SideMenuList';
 import SideMenuItem from './SideMenuItem';
 
-
-
 /**
  * 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.
@@ -99,9 +97,9 @@ export const SideMenu = forwardRef<HTMLDivElement, SideMenuProps>(
       const currentLength = menuItems?.length ?? 0;
       // Only update if the length actually changed to prevent infinite loops
       if (menuItemsLengthRef.current === currentLength) return;
-      
+
       menuItemsLengthRef.current = currentLength;
-      
+
       setNestedItemStates(prevStates => {
         const newStates: Record<number, boolean> = {};
         menuItems?.forEach((_, index) => {
@@ -217,8 +215,8 @@ export const SideMenu = forwardRef<HTMLDivElement, SideMenuProps>(
           id={id ? `${id}-content` : undefined}
           aria-hidden={shouldShowToggler ? !isOpenState : false}
         >
-            <div ref={innerRef} className="c-side-menu__inner">
-              {children}
+          <div ref={innerRef} className="c-side-menu__inner">
+            {children}
             {menuItems?.map((item, index) => {
               const isNestedItemOpen = nestedItemStates[index] ?? true;
               const hasItems = item.items && item.items.length > 0;
@@ -301,7 +299,7 @@ export const SideMenu = forwardRef<HTMLDivElement, SideMenuProps>(
                 </div>
               );
             })}
-            </div>
+          </div>
         </div>
       </>
     );

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

@@ -49,7 +49,6 @@ export const SideMenuItem = forwardRef<HTMLAnchorElement | HTMLButtonElement, Si
     },
     ref
   ) => {
-    
     const { generateSideMenuItemClass, handleClick } = useSideMenuItem({
       active,
       disabled,
@@ -88,15 +87,15 @@ export const SideMenuItem = forwardRef<HTMLAnchorElement | HTMLButtonElement, Si
           tabIndex: disabled ? -1 : 0,
           ...(disabled ? {} : { href, to: href }),
         };
-        
+
         return (
-            <LinkComp {...linkProps}>
+          <LinkComp {...linkProps}>
             {icon && <span className="c-side-menu__link-icon">{icon}</span>}
             <span className="c-side-menu__link-text">{children}</span>
           </LinkComp>
         );
       }
-      
+
       // Regular anchor tag
       const linkProps = {
         ref: ref as React.Ref<HTMLAnchorElement>,
@@ -109,7 +108,7 @@ export const SideMenuItem = forwardRef<HTMLAnchorElement | HTMLButtonElement, Si
         rel: rel,
         tabIndex: disabled ? -1 : 0,
       };
-      
+
       return (
         <a {...linkProps}>
           {icon && <span className="c-side-menu__link-icon">{icon}</span>}

package/src/components/Pagination/Pagination.stories.tsx

@@ -72,7 +72,7 @@ const meta = {
     },
   },
   args: {
-    onPageChange: () => { },
+    onPageChange: () => {},
   },
 } satisfies Meta<typeof Pagination>;
 
@@ -105,7 +105,8 @@ export const Default: Story = {
   parameters: {
     docs: {
       description: {
-        story: 'Default pagination with first/last and previous/next navigation buttons using icons.',
+        story:
+          'Default pagination with first/last and previous/next navigation buttons using icons.',
       },
     },
   },
@@ -348,7 +349,8 @@ export const WithSearch: Story = {
   parameters: {
     docs: {
       description: {
-        story: 'Pagination with search functionality to quickly jump to a specific page. Users can type a page number and submit to navigate directly.',
+        story:
+          'Pagination with search functionality to quickly jump to a specific page. Users can type a page number and submit to navigate directly.',
       },
     },
   },
@@ -369,7 +371,8 @@ export const WithSearchLargeDataset: Story = {
   parameters: {
     docs: {
       description: {
-        story: 'Pagination with search functionality for large datasets. The search feature is especially useful when dealing with many pages.',
+        story:
+          'Pagination with search functionality for large datasets. The search feature is especially useful when dealing with many pages.',
       },
     },
   },