@shohojdhara/atomix 0.1.26 → 0.1.28

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

@@ -1,340 +0,0 @@
-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>
-  ),
-};

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

@@ -1,110 +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>;
-  }
-);