@shohojdhara/atomix 0.1.17 → 0.1.18

package/src/components/Modal/scripts/index.ts

@@ -0,0 +1,374 @@
+// Modal component implementation based on the old JS code
+import { MODAL } from '../../../lib/constants/components';
+import {
+  handleModalCloseClick,
+  handleModalKeydown,
+  handleBackdropClick,
+} from './modalInteractions';
+
+export type ModalOptions = {
+  openSelector?: string;
+  closeSelector?: string;
+  dialogSelector?: string;
+  backdropSelector?: string;
+  backdrop?: boolean;
+  keyboard?: boolean;
+  size?: 'sm' | 'md' | 'lg' | 'xl';
+  onOpen?: () => void;
+  onClose?: () => void;
+  onToggle?: (isOpen: boolean) => void;
+};
+
+/**
+ * Modal Component for vanilla JS implementations
+ */
+class Modal {
+  selector: string | HTMLElement;
+  $element: HTMLElement;
+  options: ModalOptions;
+  isOpen: boolean = false;
+  $closeButtons: NodeListOf<Element>;
+  $backdrop: HTMLElement | null = null;
+  $dialog: HTMLElement | null = null;
+  $openButtons: NodeListOf<Element>;
+  _keydownHandler: ((event: KeyboardEvent) => void) | null = null;
+  _documentClickHandler: ((event: MouseEvent) => void) | null = null;
+
+  /**
+   * Create a new Modal instance
+   * @param selector - CSS selector or HTMLElement for the modal
+   * @param options - Configuration options
+   */
+  constructor(selector: string | HTMLElement, options: ModalOptions = {}) {
+    this.selector = selector;
+    this.$element =
+      typeof selector === 'string'
+        ? (document.querySelector(selector as string) as HTMLElement)
+        : selector;
+
+    if (!this.$element) {
+      throw new Error(`Modal element not found: ${selector}`);
+    }
+
+    // Merge default options with user options and data attributes
+    this.options = this._mergeOptions(options);
+
+    // Initialize elements
+    this.$closeButtons = this.$element.querySelectorAll(
+      this.options.closeSelector || MODAL.SELECTORS.CLOSE_BUTTONS
+    );
+    this.$backdrop = this.$element.querySelector(
+      this.options.backdropSelector || MODAL.SELECTORS.BACKDROP
+    );
+    this.$dialog = this.$element.querySelector(
+      this.options.dialogSelector || MODAL.SELECTORS.DIALOG
+    );
+    this.$openButtons = document.querySelectorAll(
+      this.options.openSelector || MODAL.SELECTORS.OPEN_BUTTON
+    );
+
+    // Initialize the modal
+    this._initialize();
+
+    // Store reference to this instance on the element
+    (this.$element as any).modalInstance = this;
+
+    return this;
+  }
+
+  /**
+   * Merge options from defaults, constructor options, and data attributes
+   */
+  private _mergeOptions(options: ModalOptions): ModalOptions {
+    const dataOptions: ModalOptions = {};
+
+    // Extract options from data attributes
+    if (this.$element) {
+      if (this.$element.dataset.backdrop !== undefined) {
+        dataOptions.backdrop = this.$element.dataset.backdrop === 'true';
+      }
+
+      if (this.$element.dataset.keyboard !== undefined) {
+        dataOptions.keyboard = this.$element.dataset.keyboard === 'true';
+      }
+
+      if (this.$element.dataset.size) {
+        dataOptions.size = this.$element.dataset.size as 'sm' | 'md' | 'lg' | 'xl';
+      }
+
+      if (this.$element.dataset.openSelector) {
+        dataOptions.openSelector = this.$element.dataset.openSelector;
+      }
+
+      if (this.$element.dataset.closeSelector) {
+        dataOptions.closeSelector = this.$element.dataset.closeSelector;
+      }
+    }
+
+    // Merge defaults with passed options and data attributes
+    return {
+      ...MODAL.DEFAULT_OPTIONS,
+      ...options,
+      ...dataOptions,
+    };
+  }
+
+  /**
+   * Initialize the modal
+   */
+  private _initialize(): void {
+    // Apply size class if specified
+    if (this.options.size) {
+      this.$element.classList.add(`c-modal--${this.options.size}`);
+    }
+
+    // Check initial state
+    this.isOpen = this.$element.classList.contains(MODAL.CLASSES.IS_OPEN);
+
+    // Bind events
+    this._bindEvents();
+
+    // Initialize targets if modal has ID
+    if (this.$element.id) {
+      this._setupTargetButtons();
+    }
+  }
+
+  /**
+   * Bind all event listeners
+   */
+  private _bindEvents(): void {
+    // Button click events
+    this.$closeButtons.forEach(button => {
+      button.addEventListener('click', this.close.bind(this));
+    });
+
+    this.$openButtons.forEach(button => {
+      button.addEventListener('click', this.open.bind(this));
+    });
+
+    // Backdrop click
+    if (this.options.backdrop && this.$backdrop) {
+      this.$backdrop.addEventListener('click', e => {
+        if (e.target === this.$backdrop) {
+          this.close();
+        }
+      });
+    }
+
+    // Keyboard events
+    if (this.options.keyboard) {
+      this._keydownHandler = e => {
+        if (e.key === 'Escape' && this.isOpen) {
+          this.close();
+        }
+      };
+      document.addEventListener('keydown', this._keydownHandler);
+    }
+  }
+
+  /**
+   * Set up buttons that target this modal using data-target attribute
+   */
+  private _setupTargetButtons(): void {
+    if (!this.$element.id) return;
+
+    const targetSelector = `[data-target="#${this.$element.id}"]`;
+    const targetButtons = document.querySelectorAll(targetSelector);
+
+    targetButtons.forEach(button => {
+      button.addEventListener('click', e => {
+        e.preventDefault();
+        this.open();
+      });
+    });
+  }
+
+  /**
+   * Open the modal
+   */
+  open(): void {
+    if (this.isOpen) return;
+
+    // Display the modal
+    this.$element.style.display = 'block';
+
+    // Use requestAnimationFrame for smooth animation
+    requestAnimationFrame(() => {
+      this.$element.classList.add(MODAL.CLASSES.IS_OPEN);
+      this.isOpen = true;
+
+      // Focus the first focusable element inside modal
+      this._trapFocus();
+
+      // Call the onOpen callback if provided
+      if (typeof this.options.onOpen === 'function') {
+        this.options.onOpen();
+      }
+
+      // Call the onToggle callback if provided
+      if (typeof this.options.onToggle === 'function') {
+        this.options.onToggle(true);
+      }
+
+      // Dispatch custom event
+      this.$element.dispatchEvent(
+        new CustomEvent('modal:open', {
+          bubbles: true,
+          detail: { instance: this },
+        })
+      );
+    });
+  }
+
+  /**
+   * Close the modal
+   */
+  close(): void {
+    if (!this.isOpen) return;
+
+    this.$element.classList.remove(MODAL.CLASSES.IS_OPEN);
+    this.isOpen = false;
+
+    // Call the onClose callback if provided
+    if (typeof this.options.onClose === 'function') {
+      this.options.onClose();
+    }
+
+    // Call the onToggle callback if provided
+    if (typeof this.options.onToggle === 'function') {
+      this.options.onToggle(false);
+    }
+
+    // Dispatch custom event
+    this.$element.dispatchEvent(
+      new CustomEvent('modal:close', {
+        bubbles: true,
+        detail: { instance: this },
+      })
+    );
+
+    // Wait for animation to complete before hiding
+    const onTransitionEnd = () => {
+      if (!this.isOpen) {
+        this.$element.style.display = 'none';
+      }
+
+      if (this.$backdrop) {
+        this.$backdrop.removeEventListener('transitionend', onTransitionEnd);
+      }
+    };
+
+    if (this.$backdrop) {
+      this.$backdrop.addEventListener('transitionend', onTransitionEnd);
+    } else {
+      // Fallback timeout if no backdrop
+      setTimeout(onTransitionEnd, 300);
+    }
+  }
+
+  /**
+   * Toggle the modal's open/closed state
+   */
+  toggle(): void {
+    if (this.isOpen) {
+      this.close();
+    } else {
+      this.open();
+    }
+  }
+
+  /**
+   * Focus trap for accessibility
+   */
+  private _trapFocus(): void {
+    if (!this.$dialog) return;
+
+    // Find the first focusable element
+    const focusableElements = this.$dialog.querySelectorAll(
+      'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
+    );
+
+    if (focusableElements.length > 0) {
+      (focusableElements[0] as HTMLElement).focus();
+    }
+  }
+
+  /**
+   * Destroy the modal instance and remove event listeners
+   */
+  destroy(): void {
+    // Remove event listeners
+    this.$closeButtons.forEach(button => {
+      button.removeEventListener('click', this.close);
+    });
+
+    this.$openButtons.forEach(button => {
+      button.removeEventListener('click', this.open);
+    });
+
+    if (this.$backdrop) {
+      this.$backdrop.removeEventListener('click', this.close);
+    }
+
+    if (this._keydownHandler) {
+      document.removeEventListener('keydown', this._keydownHandler);
+    }
+
+    // Remove data-modal reference
+    delete (this.$element as any).modalInstance;
+
+    // Dispatch destroy event
+    this.$element.dispatchEvent(
+      new CustomEvent('modal:destroy', {
+        bubbles: true,
+        detail: { instance: this },
+      })
+    );
+  }
+}
+
+/**
+ * Initialize all modals matching a selector
+ * @param selector - CSS selector to find modals
+ * @param options - Default options for all modals
+ * @returns Array of initialized Modal instances
+ */
+export function initializeModals(
+  selector = MODAL.SELECTORS.MODAL,
+  options: ModalOptions = {}
+): Modal[] {
+  const instances: Modal[] = [];
+  const elements = document.querySelectorAll(selector);
+
+  if (!elements.length) return instances;
+
+  elements.forEach(element => {
+    // Skip if already initialized
+    if ((element as any).modalInstance) return;
+
+    try {
+      const instance = new Modal(element as HTMLElement, options);
+      instances.push(instance);
+    } catch (error) {
+      console.error('Failed to initialize modal:', error);
+    }
+  });
+
+  return instances;
+}
+
+/**
+ * Get a modal instance from an element
+ * @param element - Modal element or selector
+ * @returns Modal instance or null
+ */
+export function getModalInstance(element: string | HTMLElement): Modal | null {
+  const el = typeof element === 'string' ? document.querySelector(element) : element;
+
+  if (!el) return null;
+
+  return (el as any).modalInstance || null;
+}
+
+export default Modal;

package/src/components/Modal/scripts/modalInteractions.ts

@@ -0,0 +1,141 @@
+/**
+ * Modal interactions and utilities
+ */
+import { MODAL } from '../../../lib/constants/components';
+import { getModalInstance } from './index';
+
+/**
+ * Handle click events for modal open buttons
+ * @param event - Click event
+ * @param modalSelector - Modal selector to open
+ */
+export function handleModalOpenClick(event: MouseEvent, modalSelector: string): void {
+  event.preventDefault();
+
+  const modalElement = document.querySelector(modalSelector) as HTMLElement;
+  if (!modalElement) return;
+
+  // Get modal instance or apply basic open logic
+  const instance = getModalInstance(modalElement);
+  if (instance) {
+    instance.open();
+  } else {
+    modalElement.style.display = 'block';
+    requestAnimationFrame(() => {
+      modalElement.classList.add(MODAL.CLASSES.IS_OPEN);
+    });
+  }
+}
+
+/**
+ * Handle click events for modal close buttons
+ * @param event - Click event
+ * @param modal - Modal element to close
+ */
+export function handleModalCloseClick(event: MouseEvent, modal: HTMLElement): void {
+  event.preventDefault();
+
+  const instance = getModalInstance(modal);
+  if (instance) {
+    instance.close();
+  } else {
+    modal.classList.remove(MODAL.CLASSES.IS_OPEN);
+
+    // Listen for transition end to hide the modal
+    const backdrop = modal.querySelector(MODAL.SELECTORS.BACKDROP);
+    if (backdrop) {
+      const transitionEndHandler = () => {
+        modal.style.display = 'none';
+        backdrop.removeEventListener('transitionend', transitionEndHandler);
+      };
+
+      backdrop.addEventListener('transitionend', transitionEndHandler);
+    } else {
+      setTimeout(() => {
+        modal.style.display = 'none';
+      }, 300); // Fallback timing
+    }
+  }
+}
+
+/**
+ * Handle keydown events for Escape key
+ * @param event - Keyboard event
+ */
+export function handleModalKeydown(event: KeyboardEvent): void {
+  if (event.key === 'Escape') {
+    const openModals = document.querySelectorAll(
+      `${MODAL.SELECTORS.MODAL}.${MODAL.CLASSES.IS_OPEN}`
+    );
+
+    openModals.forEach(modal => {
+      const instance = getModalInstance(modal as HTMLElement);
+      if (instance) {
+        instance.close();
+      } else {
+        handleModalCloseClick(new MouseEvent('click'), modal as HTMLElement);
+      }
+    });
+  }
+}
+
+/**
+ * Handle clicks on modal backdrop
+ * @param event - Click event
+ * @param modal - Modal element
+ */
+export function handleBackdropClick(event: MouseEvent, modal: HTMLElement): void {
+  const backdrop = modal.querySelector(MODAL.SELECTORS.BACKDROP);
+
+  if (backdrop && event.target === backdrop) {
+    const instance = getModalInstance(modal);
+    if (instance) {
+      instance.close();
+    } else {
+      handleModalCloseClick(event, modal);
+    }
+  }
+}
+
+/**
+ * Delegate event handling for modals using data attributes
+ * This is useful for dynamically added modals
+ */
+export function setupModalEventDelegation(): void {
+  // Document click handler for delegation
+  document.addEventListener('click', event => {
+    const target = event.target as HTMLElement;
+
+    // Handle open button clicks
+    const openButton = target.closest('[data-modal-open]');
+    if (openButton) {
+      const modalId = openButton.getAttribute('data-modal-open');
+      if (modalId) {
+        handleModalOpenClick(event, modalId.startsWith('#') ? modalId : `#${modalId}`);
+      }
+      return;
+    }
+
+    // Handle close button clicks
+    const closeButton = target.closest('[data-modal-close]');
+    if (closeButton) {
+      const modal = closeButton.closest(MODAL.SELECTORS.MODAL);
+      if (modal) {
+        handleModalCloseClick(event, modal as HTMLElement);
+      }
+      return;
+    }
+
+    // Handle backdrop clicks
+    const backdrop = target.closest(MODAL.SELECTORS.BACKDROP);
+    if (backdrop) {
+      const modal = backdrop.closest(MODAL.SELECTORS.MODAL);
+      if (modal) {
+        handleBackdropClick(event, modal as HTMLElement);
+      }
+    }
+  });
+
+  // Global escape key handler
+  document.addEventListener('keydown', handleModalKeydown);
+}

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

@@ -0,0 +1,107 @@
+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
+                return React.cloneElement(child, {
+                  ...child.props,
+                  disabled: disabled ? true : child.props.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
+            return (
+              <li className="c-menu__subitem" role="menuitem">
+                {React.cloneElement(child, {
+                  ...child.props,
+                  disabled: disabled ? true : child.props.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>
+  );
+});