@shohojdhara/atomix 0.1.16 → 0.1.18

package/src/components/Modal/Modal.tsx

@@ -9,7 +9,7 @@ function useModal({
   isOpen: isOpenProp,
   onOpenChange,
   onOpen,
-  onClose
+  onClose,
 }: {
   isOpen?: boolean;
   onOpenChange?: (isOpen: boolean) => void;
@@ -18,54 +18,57 @@ function useModal({
 } = {}) {
   // For uncontrolled usage
   const [isOpenState, setIsOpenState] = useState(false);
-  
+
   // Determine if we're in controlled or uncontrolled mode
   const isControlled = isOpenProp !== undefined;
   const isOpen = isControlled ? !!isOpenProp : isOpenState;
-  
+
   // Update internal state when prop changes (for controlled mode)
   useEffect(() => {
     if (isControlled) {
       setIsOpenState(!!isOpenProp);
     }
   }, [isOpenProp, isControlled]);
-  
-  const updateOpen = useCallback((nextIsOpen: boolean) => {
-    // For uncontrolled mode, update internal state
-    if (!isControlled) {
-      setIsOpenState(nextIsOpen);
-    }
-    
-    // Call the change handler in either mode
-    if (onOpenChange) {
-      onOpenChange(nextIsOpen);
-    }
-    
-    // Call the specific handler
-    if (nextIsOpen && onOpen) {
-      onOpen();
-    } else if (!nextIsOpen && onClose) {
-      onClose();
-    }
-  }, [isControlled, onOpenChange, onOpen, onClose]);
-  
+
+  const updateOpen = useCallback(
+    (nextIsOpen: boolean) => {
+      // For uncontrolled mode, update internal state
+      if (!isControlled) {
+        setIsOpenState(nextIsOpen);
+      }
+
+      // Call the change handler in either mode
+      if (onOpenChange) {
+        onOpenChange(nextIsOpen);
+      }
+
+      // Call the specific handler
+      if (nextIsOpen && onOpen) {
+        onOpen();
+      } else if (!nextIsOpen && onClose) {
+        onClose();
+      }
+    },
+    [isControlled, onOpenChange, onOpen, onClose]
+  );
+
   const open = useCallback(() => {
     updateOpen(true);
   }, [updateOpen]);
-  
+
   const close = useCallback(() => {
     updateOpen(false);
   }, [updateOpen]);
-  
+
   const toggle = useCallback(() => {
     updateOpen(!isOpen);
   }, [isOpen, updateOpen]);
-  
+
   return {
     isOpen,
     open,
     close,
-    toggle
+    toggle,
   };
 }
 
@@ -91,51 +94,53 @@ export const Modal: React.FC<ModalProps> = ({
   const modalRef = useRef<HTMLDivElement>(null);
   const dialogRef = useRef<HTMLDivElement>(null);
   const backdropRef = useRef<HTMLDivElement>(null);
-  
+
   const {
     isOpen: isOpenState,
     open,
-    close
+    close,
   } = useModal({
     isOpen,
     onOpenChange,
     onClose,
-    onOpen
+    onOpen,
   });
 
   // Handle keyboard events for Escape key
   useEffect(() => {
     if (!keyboard) return undefined;
-    
+
     const handleKeydown = (event: KeyboardEvent) => {
       if (event.key === 'Escape' && isOpenState) {
         close();
       }
     };
-    
+
     document.addEventListener('keydown', handleKeydown);
     return () => {
       document.removeEventListener('keydown', handleKeydown);
     };
   }, [isOpenState, close, keyboard]);
-  
+
   // Handle backdrop click
   const handleBackdropClick = (event: React.MouseEvent<HTMLDivElement>) => {
     if (backdrop && event.target === event.currentTarget) {
       close();
     }
   };
-  
+
   // Assemble classes
   const modalClasses = [
     'c-modal',
     isOpenState ? MODAL.CLASSES.IS_OPEN : '',
     size ? `c-modal--${size}` : '',
-    className
-  ].filter(Boolean).join(' ');
-  
+    className,
+  ]
+    .filter(Boolean)
+    .join(' ');
+
   return (
-    <div 
+    <div
       ref={modalRef}
       className={modalClasses}
       style={{ display: isOpenState ? 'block' : 'none' }}
@@ -144,15 +149,8 @@ export const Modal: React.FC<ModalProps> = ({
       aria-hidden={!isOpenState}
       {...props}
     >
-      <div 
-        ref={backdropRef} 
-        className="c-modal__backdrop"
-        onClick={handleBackdropClick}
-      />
-      <div 
-        ref={dialogRef} 
-        className="c-modal__dialog"
-      >
+      <div ref={backdropRef} className="c-modal__backdrop" onClick={handleBackdropClick} />
+      <div ref={dialogRef} className="c-modal__dialog">
         <div className="c-modal__content">
           {(title || closeButton) && (
             <div className="c-modal__header">
@@ -161,29 +159,32 @@ export const Modal: React.FC<ModalProps> = ({
                 {subtitle && <p className="c-modal__sub">{subtitle}</p>}
               </div>
               {closeButton && (
-                <button 
-                  type="button" 
-                  className="c-modal__close c-btn js-modal-close" 
+                <button
+                  type="button"
+                  className="c-modal__close c-btn js-modal-close"
                   onClick={close}
                   aria-label="Close modal"
                 >
-                  <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
-                    <path d="M16.0672 15.1828C16.1253 15.2409 16.1713 15.3098 16.2028 15.3857C16.2342 15.4615 16.2504 15.5429 16.2504 15.625C16.2504 15.7071 16.2342 15.7884 16.2028 15.8643C16.1713 15.9402 16.1253 16.0091 16.0672 16.0672C16.0091 16.1252 15.9402 16.1713 15.8643 16.2027C15.7885 16.2342 15.7071 16.2503 15.625 16.2503C15.5429 16.2503 15.4616 16.2342 15.3857 16.2027C15.3098 16.1713 15.2409 16.1252 15.1828 16.0672L10 10.8836L4.8172 16.0672C4.69992 16.1844 4.54086 16.2503 4.37501 16.2503C4.20916 16.2503 4.0501 16.1844 3.93282 16.0672C3.81555 15.9499 3.74966 15.7908 3.74966 15.625C3.74966 15.4591 3.81555 15.3001 3.93282 15.1828L9.11642 9.99998L3.93282 4.81717C3.81555 4.69989 3.74966 4.54083 3.74966 4.37498C3.74966 4.20913 3.81555 4.05007 3.93282 3.93279C4.0501 3.81552 4.20916 3.74963 4.37501 3.74963C4.54086 3.74963 4.69992 3.81552 4.8172 3.93279L10 9.11639L15.1828 3.93279C15.3001 3.81552 15.4592 3.74963 15.625 3.74963C15.7909 3.74963 15.9499 3.81552 16.0672 3.93279C16.1845 4.05007 16.2504 4.20913 16.2504 4.37498C16.2504 4.54083 16.1845 4.69989 16.0672 4.81717L10.8836 9.99998L16.0672 15.1828Z" fill="#141414"/>
+                  <svg
+                    width="20"
+                    height="20"
+                    viewBox="0 0 20 20"
+                    fill="none"
+                    xmlns="http://www.w3.org/2000/svg"
+                  >
+                    <path
+                      d="M16.0672 15.1828C16.1253 15.2409 16.1713 15.3098 16.2028 15.3857C16.2342 15.4615 16.2504 15.5429 16.2504 15.625C16.2504 15.7071 16.2342 15.7884 16.2028 15.8643C16.1713 15.9402 16.1253 16.0091 16.0672 16.0672C16.0091 16.1252 15.9402 16.1713 15.8643 16.2027C15.7885 16.2342 15.7071 16.2503 15.625 16.2503C15.5429 16.2503 15.4616 16.2342 15.3857 16.2027C15.3098 16.1713 15.2409 16.1252 15.1828 16.0672L10 10.8836L4.8172 16.0672C4.69992 16.1844 4.54086 16.2503 4.37501 16.2503C4.20916 16.2503 4.0501 16.1844 3.93282 16.0672C3.81555 15.9499 3.74966 15.7908 3.74966 15.625C3.74966 15.4591 3.81555 15.3001 3.93282 15.1828L9.11642 9.99998L3.93282 4.81717C3.81555 4.69989 3.74966 4.54083 3.74966 4.37498C3.74966 4.20913 3.81555 4.05007 3.93282 3.93279C4.0501 3.81552 4.20916 3.74963 4.37501 3.74963C4.54086 3.74963 4.69992 3.81552 4.8172 3.93279L10 9.11639L15.1828 3.93279C15.3001 3.81552 15.4592 3.74963 15.625 3.74963C15.7909 3.74963 15.9499 3.81552 16.0672 3.93279C16.1845 4.05007 16.2504 4.20913 16.2504 4.37498C16.2504 4.54083 16.1845 4.69989 16.0672 4.81717L10.8836 9.99998L16.0672 15.1828Z"
+                      fill="#141414"
+                    />
                   </svg>
                 </button>
               )}
             </div>
           )}
-          
-          <div className="c-modal__body">
-            {children}
-          </div>
-          
-          {footer && (
-            <div className="c-modal__footer">
-              {footer}
-            </div>
-          )}
+
+          <div className="c-modal__body">{children}</div>
+
+          {footer && <div className="c-modal__footer">{footer}</div>}
         </div>
       </div>
     </div>

package/src/components/Modal/index.ts

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

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

@@ -10,8 +10,8 @@ if (typeof window !== 'undefined') {
   (window as any).Atomix.initializeModals = initializeModals;
   (window as any).Atomix.getModalInstance = getModalInstance;
   (window as any).Atomix.setupModalEventDelegation = setupModalEventDelegation;
-  
-  // Auto-initialize on DOMContentLoaded 
+
+  // Auto-initialize on DOMContentLoaded
   document.addEventListener('DOMContentLoaded', () => {
     if ((window as any).Atomix.autoInitModals !== false) {
       initializeModals();
@@ -20,4 +20,4 @@ if (typeof window !== 'undefined') {
   });
 }
 
-export { Modal, initializeModals, getModalInstance, setupModalEventDelegation }; 
+export { Modal, initializeModals, getModalInstance, setupModalEventDelegation };

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

@@ -1,8 +1,8 @@
 // Modal component implementation based on the old JS code
 import { MODAL } from '../../../lib/constants/components';
-import { 
-  handleModalCloseClick, 
-  handleModalKeydown, 
+import {
+  handleModalCloseClick,
+  handleModalKeydown,
   handleBackdropClick,
 } from './modalInteractions';
 
@@ -43,28 +43,36 @@ class Modal {
     this.selector = selector;
     this.$element =
       typeof selector === 'string'
-        ? document.querySelector(selector as string) as HTMLElement
+        ? (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);
-    
+    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;
   }
 
@@ -73,35 +81,35 @@ class Modal {
    */
   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, 
+    return {
+      ...MODAL.DEFAULT_OPTIONS,
       ...options,
-      ...dataOptions 
+      ...dataOptions,
     };
   }
 
@@ -113,13 +121,13 @@ class Modal {
     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();
@@ -134,23 +142,23 @@ class Modal {
     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) => {
+      this.$backdrop.addEventListener('click', e => {
         if (e.target === this.$backdrop) {
           this.close();
         }
       });
     }
-    
+
     // Keyboard events
     if (this.options.keyboard) {
-      this._keydownHandler = (e) => {
+      this._keydownHandler = e => {
         if (e.key === 'Escape' && this.isOpen) {
           this.close();
         }
@@ -158,95 +166,99 @@ class Modal {
       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) => {
+      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 }
-      }));
+      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 }
-    }));
-    
+    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 {
@@ -254,7 +266,7 @@ class Modal {
       setTimeout(onTransitionEnd, 300);
     }
   }
-  
+
   /**
    * Toggle the modal's open/closed state
    */
@@ -265,23 +277,23 @@ class Modal {
       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
    */
@@ -290,27 +302,29 @@ class Modal {
     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 }
-    }));
+    this.$element.dispatchEvent(
+      new CustomEvent('modal:destroy', {
+        bubbles: true,
+        detail: { instance: this },
+      })
+    );
   }
 }
 
@@ -321,18 +335,18 @@ class Modal {
  * @returns Array of initialized Modal instances
  */
 export function initializeModals(
-  selector = MODAL.SELECTORS.MODAL, 
+  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);
@@ -340,23 +354,21 @@ export function initializeModals(
       console.error('Failed to initialize modal:', error);
     }
   });
-  
+
   return instances;
 }
 
 /**
  * Get a modal instance from an element
- * @param element - Modal element or selector 
+ * @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;
-    
+  const el = typeof element === 'string' ? document.querySelector(element) : element;
+
   if (!el) return null;
-  
+
   return (el as any).modalInstance || null;
 }
 
-export default Modal; 
+export default Modal;