@shohojdhara/atomix 0.1.26 → 0.1.28

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

@@ -1,458 +0,0 @@
-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

@@ -1,50 +0,0 @@
-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;

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

@@ -1,105 +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;