@shohojdhara/atomix 0.1.29 → 0.2.1

package/src/components/Modal/README.md

@@ -0,0 +1,169 @@
+# Modal Component
+
+The Modal component provides a flexible and accessible dialog window that can be used for various purposes like notifications, forms, and more.
+
+## Usage
+
+### HTML Structure
+
+```html
+<div class="c-modal" id="myModal">
+  <div class="c-modal__backdrop"></div>
+  <div class="c-modal__dialog">
+    <div class="c-modal__content">
+      <div class="c-modal__header">
+        <div class="c-modal__header-content">
+          <h3 class="c-modal__title">Modal Title</h3>
+          <p class="c-modal__sub">Subtitle text</p>
+        </div>
+        <button type="button" class="c-modal__close c-btn js-modal-close" aria-label="Close modal">
+          <svg><!-- Close icon SVG --></svg>
+        </button>
+      </div>
+      
+      <div class="c-modal__body">
+        Modal content goes here
+      </div>
+      
+      <div class="c-modal__footer">
+        <button class="c-btn c-btn--primary">Save</button>
+        <button class="c-btn js-modal-close">Cancel</button>
+      </div>
+    </div>
+  </div>
+</div>
+```
+
+### JavaScript Initialization
+
+#### Automatic Initialization
+
+The Modal component can be automatically initialized for all modals on the page:
+
+```js
+// Initialize all modals on the page
+Atomix.initializeModals();
+
+// Setup event delegation for dynamically added modals
+Atomix.setupModalEventDelegation();
+```
+
+#### Manual Initialization
+
+You can also manually initialize modals with custom options:
+
+```js
+// Initialize a specific modal
+const modal = new Atomix.Modal('#myModal', {
+  backdrop: true,
+  keyboard: true,
+  size: 'md',
+  onOpen: function() {
+    console.log('Modal opened');
+  },
+  onClose: function() {
+    console.log('Modal closed');
+  }
+});
+```
+
+### API
+
+#### Opening and Closing Modals
+
+```js
+// Get a modal instance
+const modalInstance = Atomix.getModalInstance('#myModal');
+
+// Open modal
+modalInstance.open();
+
+// Close modal
+modalInstance.close();
+
+// Toggle modal
+modalInstance.toggle();
+```
+
+#### Trigger Buttons
+
+You can use data attributes to trigger modals:
+
+```html
+<!-- Open button -->
+<button data-target="#myModal" class="js-modal-open">Open Modal</button>
+
+<!-- or use data-modal-open attribute -->
+<button data-modal-open="myModal">Open Modal</button>
+
+<!-- Close button -->
+<button class="js-modal-close">Close</button>
+
+<!-- or use data-modal-close attribute -->
+<button data-modal-close>Close</button>
+```
+
+### Configuration Options
+
+| Option | Type | Default | Description |
+| ------ | ---- | ------- | ----------- |
+| openSelector | string | '.js-modal-open' | Selector for buttons that open the modal |
+| closeSelector | string | '.js-modal-close' | Selector for buttons that close the modal |
+| dialogSelector | string | '.c-modal__dialog' | Selector for the dialog element |
+| backdropSelector | string | '.c-modal__backdrop' | Selector for the backdrop element |
+| backdrop | boolean | true | Whether clicking the backdrop closes the modal |
+| keyboard | boolean | true | Whether pressing ESC key closes the modal |
+| size | string | 'md' | Size of the modal ('sm', 'md', 'lg', 'xl') |
+| onOpen | function | null | Callback when modal opens |
+| onClose | function | null | Callback when modal closes |
+| onToggle | function | null | Callback when modal toggles with state parameter |
+
+### Data Attributes
+
+You can configure modals using data attributes:
+
+```html
+<div class="c-modal" 
+     id="configModal" 
+     data-backdrop="true"
+     data-keyboard="true"
+     data-size="lg">
+  <!-- Modal content -->
+</div>
+```
+
+### Events
+
+The Modal component dispatches custom events:
+
+```js
+const modal = document.getElementById('myModal');
+
+// Listen for modal open event
+modal.addEventListener('modal:open', (event) => {
+  console.log('Modal opened', event.detail.instance);
+});
+
+// Listen for modal close event
+modal.addEventListener('modal:close', (event) => {
+  console.log('Modal closed', event.detail.instance);
+});
+
+// Listen for modal destroy event
+modal.addEventListener('modal:destroy', (event) => {
+  console.log('Modal destroyed', event.detail.instance);
+});
+```
+
+## Accessibility
+
+The Modal component includes several accessibility features:
+
+- Proper ARIA attributes (`role="dialog"`, `aria-modal="true"`)
+- Focus management (traps focus inside the modal)
+- Keyboard support (ESC key to close)
+- Screen reader friendly
+
+## Browser Support
+
+The Modal component supports all modern browsers and Internet Explorer 11+. 

package/src/components/Modal/index.ts

@@ -0,0 +1 @@
+export { default } from './Modal';

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

@@ -0,0 +1,109 @@
+import React, { forwardRef, ReactNode } from 'react';
+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
+                const childProps = child.props as any;
+                return React.cloneElement(child as React.ReactElement<any>, {
+                  ...childProps,
+                  disabled: disabled ? true : childProps?.disabled,
+                });
+              }
+              return child;
+            })}
+          </div>
+        </div>
+      </div>
+    );
+  }
+);
+
+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.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>
+              )
+            ) : (
+              <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>
+  );
+});
+
+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}
+      className={`c-menu__subitem-link ${disabled ? 'is-disabled' : ''} ${className}`}
+      onClick={handleClick}
+      aria-disabled={disabled}
+    >
+      {children}
+    </a>
+  );
+});

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

@@ -0,0 +1,339 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { Menu, MenuDivider, MenuItem } from './Menu';
+
+const meta = {
+  title: 'Components/Navigation/Menu',
+  component: Menu,
+  parameters: {
+    layout: 'centered',
+  },
+  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>
+  ),
+};