@shohojdhara/atomix 0.1.16 → 0.1.18

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

@@ -0,0 +1,110 @@
+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/Navigation/Nav/Nav.stories.tsx

@@ -0,0 +1,458 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { Nav } from './Nav';
+import { NavItem } from './NavItem';
+import { NavDropdown } from './NavDropdown';
+import { Menu, MenuItem, MenuDivider } from '../Menu/Menu';
+import { Icon } from '../../Icon/Icon';
+
+const meta = {
+  title: 'Components/Navigation/Nav',
+  component: Nav,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    alignment: {
+      control: { type: 'select' },
+      options: ['start', 'center', 'end'],
+      description: 'Alignment of nav items',
+    },
+    variant: {
+      control: { type: 'select' },
+      options: ['default', 'float-top-center', 'float-bottom-center'],
+      description: 'Nav variant including float options',
+    },
+    disabled: {
+      control: 'boolean',
+      description: 'Whether the nav is disabled',
+    },
+    className: {
+      control: 'text',
+      description: 'Additional CSS class names',
+    },
+  },
+} satisfies Meta<typeof Nav>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+// Mock icon component 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>
+);
+
+// Basic Nav
+export const Default: Story = {
+  args: {
+    alignment: 'start',
+  },
+  render: args => (
+    <Nav {...args}>
+      <NavItem href="/" active>
+        Home
+      </NavItem>
+      <NavItem href="/about">About</NavItem>
+      <NavItem href="/services">Services</NavItem>
+      <NavItem href="/contact">Contact</NavItem>
+    </Nav>
+  ),
+};
+
+// Nav with different alignments
+export const StartAlignment: Story = {
+  args: {
+    alignment: 'start',
+  },
+  render: args => (
+    <div style={{ width: '100%', border: '1px dashed #ccc', padding: '1rem' }}>
+      <Nav {...args}>
+        <NavItem href="/" active>
+          Home
+        </NavItem>
+        <NavItem href="/about">About</NavItem>
+        <NavItem href="/services">Services</NavItem>
+        <NavItem href="/contact">Contact</NavItem>
+      </Nav>
+    </div>
+  ),
+};
+
+export const CenterAlignment: Story = {
+  args: {
+    alignment: 'center',
+  },
+  render: args => (
+    <div style={{ width: '100%', border: '1px dashed #ccc', padding: '1rem' }}>
+      <Nav {...args}>
+        <NavItem href="/" active>
+          Home
+        </NavItem>
+        <NavItem href="/about">About</NavItem>
+        <NavItem href="/services">Services</NavItem>
+        <NavItem href="/contact">Contact</NavItem>
+      </Nav>
+    </div>
+  ),
+};
+
+export const EndAlignment: Story = {
+  args: {
+    alignment: 'end',
+  },
+  render: args => (
+    <div style={{ width: '100%', border: '1px dashed #ccc', padding: '1rem' }}>
+      <Nav {...args}>
+        <NavItem href="/" active>
+          Home
+        </NavItem>
+        <NavItem href="/about">About</NavItem>
+        <NavItem href="/services">Services</NavItem>
+        <NavItem href="/contact">Contact</NavItem>
+      </Nav>
+    </div>
+  ),
+};
+
+// Nav with dropdown
+export const WithDropdown: Story = {
+  args: {
+    alignment: 'start',
+  },
+  render: args => (
+    <Nav {...args}>
+      <NavItem href="/" active>
+        Home
+      </NavItem>
+      <NavItem href="/about">About</NavItem>
+      <NavDropdown title="Services">
+        <Menu>
+          <MenuItem href="/web-design" icon={<HomeIcon />}>
+            Web Design
+          </MenuItem>
+          <MenuItem href="/mobile-apps" icon={<UserIcon />}>
+            Mobile Apps
+          </MenuItem>
+          <MenuDivider />
+          <MenuItem href="/consulting" icon={<SettingsIcon />}>
+            Consulting
+          </MenuItem>
+        </Menu>
+      </NavDropdown>
+      <NavItem href="/contact">Contact</NavItem>
+    </Nav>
+  ),
+};
+
+// Nav with multiple dropdowns
+export const WithMultipleDropdowns: Story = {
+  args: {
+    alignment: 'start',
+  },
+  render: args => (
+    <Nav {...args}>
+      <NavItem href="/" active>
+        Home
+      </NavItem>
+      <NavDropdown title="Services">
+        <Menu>
+          <MenuItem href="/web-design">Web Design</MenuItem>
+          <MenuItem href="/mobile-apps">Mobile Apps</MenuItem>
+          <MenuItem href="/consulting">Consulting</MenuItem>
+        </Menu>
+      </NavDropdown>
+      <NavDropdown title="Products">
+        <Menu>
+          <MenuItem href="/product-1">Product 1</MenuItem>
+          <MenuItem href="/product-2">Product 2</MenuItem>
+          <MenuItem href="/product-3">Product 3</MenuItem>
+        </Menu>
+      </NavDropdown>
+      <NavItem href="/about">About</NavItem>
+      <NavItem href="/contact">Contact</NavItem>
+    </Nav>
+  ),
+};
+
+// Disabled Nav
+export const Disabled: Story = {
+  args: {
+    alignment: 'start',
+    disabled: true,
+  },
+  render: args => (
+    <Nav {...args}>
+      <NavItem href="/" active>
+        Home
+      </NavItem>
+      <NavItem href="/about">About</NavItem>
+      <NavItem href="/services">Services</NavItem>
+      <NavItem href="/contact">Contact</NavItem>
+    </Nav>
+  ),
+};
+
+// Nav with active states
+export const WithActiveStates: Story = {
+  args: {
+    alignment: 'start',
+  },
+  render: args => (
+    <Nav {...args}>
+      <NavItem href="/" active>
+        Home
+      </NavItem>
+      <NavItem href="/about">About</NavItem>
+      <NavItem href="/services">Services</NavItem>
+      <NavItem href="/contact">Contact</NavItem>
+    </Nav>
+  ),
+};
+
+// All alignments showcase
+export const AllAlignments: Story = {
+  args: {
+    alignment: 'start',
+  },
+  render: () => (
+    <div style={{ width: '100%' }}>
+      <div style={{ marginBottom: '2rem' }}>
+        <h3>Start Alignment</h3>
+        <div style={{ border: '1px dashed #ccc', padding: '1rem' }}>
+          <Nav alignment="start">
+            <NavItem href="/" active>
+              Home
+            </NavItem>
+            <NavItem href="/about">About</NavItem>
+            <NavItem href="/services">Services</NavItem>
+            <NavItem href="/contact">Contact</NavItem>
+          </Nav>
+        </div>
+      </div>
+
+      <div style={{ marginBottom: '2rem' }}>
+        <h3>Center Alignment</h3>
+        <div style={{ border: '1px dashed #ccc', padding: '1rem' }}>
+          <Nav alignment="center">
+            <NavItem href="/" active>
+              Home
+            </NavItem>
+            <NavItem href="/about">About</NavItem>
+            <NavItem href="/services">Services</NavItem>
+            <NavItem href="/contact">Contact</NavItem>
+          </Nav>
+        </div>
+      </div>
+
+      <div style={{ marginBottom: '2rem' }}>
+        <h3>End Alignment</h3>
+        <div style={{ border: '1px dashed #ccc', padding: '1rem' }}>
+          <Nav alignment="end">
+            <NavItem href="/" active>
+              Home
+            </NavItem>
+            <NavItem href="/about">About</NavItem>
+            <NavItem href="/services">Services</NavItem>
+            <NavItem href="/contact">Contact</NavItem>
+          </Nav>
+        </div>
+      </div>
+    </div>
+  ),
+};
+
+// Float variants (new feature)
+export const FloatTopCenter: Story = {
+  args: {
+    alignment: 'center',
+    variant: 'float-top-center',
+  },
+  render: args => (
+    <div
+      style={{
+        height: '500vh',
+        width: '95vw',
+        position: 'relative',
+        backgroundSize: 'contain',
+        backgroundImage:
+          'url("https://images.unsplash.com/photo-1749301560225-3032826b9e7f?q=80&w=3024&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D")',
+        padding: '2rem',
+      }}
+    >
+      <p>
+        This is a demo of the floating nav. The nav should appear as a floating bubble at the top
+        center.
+      </p>
+      <Nav {...args}>
+        <NavItem href="/" active>
+          Home
+        </NavItem>
+        <NavItem href="/about">About</NavItem>
+        <NavItem href="/services">Services</NavItem>
+        <NavItem href="/contact">Contact</NavItem>
+      </Nav>
+    </div>
+  ),
+};
+
+export const FloatBottomCenter: Story = {
+  args: {
+    alignment: 'center',
+    variant: 'float-bottom-center',
+  },
+  render: args => (
+    <div
+      style={{
+        height: '500vh',
+        width: '95vw',
+        position: 'relative',
+        backgroundSize: 'contain',
+        backgroundImage:
+          'url("https://images.unsplash.com/photo-1749301560225-3032826b9e7f?q=80&w=3024&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D")',
+        padding: '2rem',
+      }}
+    >
+      <p>
+        This is a demo of the floating nav. The nav should appear as a floating bubble at the bottom
+        center.
+      </p>
+      <Nav {...args}>
+        <NavItem href="/" active>
+          Home
+        </NavItem>
+        <NavItem href="/about">About</NavItem>
+        <NavItem href="/services">Services</NavItem>
+        <NavItem href="/contact">Contact</NavItem>
+      </Nav>
+    </div>
+  ),
+};
+
+// Float variants with icons
+export const FloatWithIcons: Story = {
+  args: {
+    alignment: 'center',
+    variant: 'float-bottom-center',
+  },
+  render: args => (
+    <div
+      style={{
+        height: '500vh',
+        width: '95vw',
+        position: 'relative',
+        backgroundSize: 'contain',
+        backgroundImage:
+          'url("https://images.unsplash.com/photo-1749301560225-3032826b9e7f?q=80&w=3024&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D")',
+        padding: '2rem',
+      }}
+    >
+      <p>Floating nav with icons - perfect for mobile-first navigation.</p>
+      <Nav {...args}>
+        <NavItem href="/" active>
+          <HomeIcon />
+        </NavItem>
+        <NavItem href="/profile">
+          <UserIcon />
+        </NavItem>
+        <NavItem href="/settings">
+          <SettingsIcon />
+        </NavItem>
+      </Nav>
+    </div>
+  ),
+};
+
+// Complete showcase
+export const CompleteShowcase: Story = {
+  args: {
+    alignment: 'start',
+  },
+  render: () => (
+    <div style={{ width: '100%' }}>
+      <div style={{ marginBottom: '3rem' }}>
+        <h3>Basic Navigation</h3>
+        <Nav alignment="start">
+          <NavItem href="/" active>
+            Home
+          </NavItem>
+          <NavItem href="/about">About</NavItem>
+          <NavItem href="/services">Services</NavItem>
+          <NavItem href="/contact">Contact</NavItem>
+        </Nav>
+      </div>
+
+      <div style={{ marginBottom: '3rem' }}>
+        <h3>Navigation with Dropdown</h3>
+        <Nav alignment="start">
+          <NavItem href="/" active>
+            Home
+          </NavItem>
+          <NavDropdown title="Services">
+            <Menu>
+              <MenuItem href="/web-design">Web Design</MenuItem>
+              <MenuItem href="/mobile-apps">Mobile Apps</MenuItem>
+              <MenuItem href="/consulting">Consulting</MenuItem>
+            </Menu>
+          </NavDropdown>
+          <NavItem href="/about">About</NavItem>
+          <NavItem href="/contact">Contact</NavItem>
+        </Nav>
+      </div>
+
+      <div style={{ marginBottom: '3rem' }}>
+        <h3>Centered Navigation</h3>
+        <div style={{ border: '1px dashed #ccc', padding: '1rem' }}>
+          <Nav alignment="center">
+            <NavItem href="/" active>
+              Home
+            </NavItem>
+            <NavItem href="/about">About</NavItem>
+            <NavItem href="/services">Services</NavItem>
+            <NavItem href="/contact">Contact</NavItem>
+          </Nav>
+        </div>
+      </div>
+
+      <div
+        style={{
+          height: '200px',
+          position: 'relative',
+          background: '#f5f5f5',
+          padding: '2rem',
+          marginBottom: '3rem',
+        }}
+      >
+        <h3>Float Bottom Center</h3>
+        <p>Floating navigation bubble at bottom center</p>
+        <Nav alignment="center" variant="float-bottom-center">
+          <NavItem href="/" active>
+            <HomeIcon />
+          </NavItem>
+          <NavItem href="/profile">
+            <UserIcon />
+          </NavItem>
+          <NavItem href="/settings">
+            <SettingsIcon />
+          </NavItem>
+        </Nav>
+      </div>
+    </div>
+  ),
+};

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

@@ -0,0 +1,50 @@
+import React, { forwardRef } from 'react';
+import { NavProps } from '../../../lib/types/components';
+import { useNav } from '../../../lib/composables/useNavbar';
+
+/**
+ * Nav component provides a container for navigation items with proper alignment and accessibility.
+ *
+ * @example
+ * ```tsx
+ * <Nav alignment="center">
+ *   <NavItem href="/">Home</NavItem>
+ *   <NavItem href="/about">About</NavItem>
+ *   <NavDropdown title="Services">
+ *     <MenuItem href="/web">Web Design</MenuItem>
+ *     <MenuItem href="/mobile">Mobile Apps</MenuItem>
+ *   </NavDropdown>
+ * </Nav>
+ * ```
+ */
+export const Nav = forwardRef<HTMLUListElement, NavProps>(
+  (
+    { children, alignment = 'start', variant = 'default', className = '', disabled = false },
+    ref
+  ) => {
+    const { generateNavClass } = useNav({ alignment, variant });
+
+    const navClass = generateNavClass({ alignment, variant, 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;