@shohojdhara/atomix 0.1.16 → 0.1.18

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

@@ -0,0 +1,248 @@
+import { NAVBAR } from '../../../lib/constants/components';
+
+/**
+ * Default options for Navbar component
+ */
+const DEFAULTS = {
+  collapsible: true,
+  expanded: false,
+  position: 'static',
+  backdrop: false,
+  keyboard: true,
+  autoClose: true,
+};
+
+/**
+ * Navbar component class for vanilla JavaScript implementation
+ * Provides responsive navigation functionality with collapsible mobile menu
+ *
+ * @example
+ * ```js
+ * // Initialize a navbar
+ * const navbar = new Navbar('.c-navbar', {
+ *   collapsible: true,
+ *   autoClose: true
+ * });
+ *
+ * // Control programmatically
+ * navbar.expand();
+ * navbar.collapse();
+ * ```
+ */
+export default class Navbar {
+  private element: HTMLElement;
+  private options: any;
+  private toggler: HTMLButtonElement | null = null;
+  private collapseElement: HTMLElement | null = null;
+  private isExpanded: boolean = false;
+  private resizeHandler: () => void;
+
+  /**
+   * Create a new Navbar instance
+   * @param element - The navbar element or selector
+   * @param options - Configuration options
+   */
+  constructor(element: string | HTMLElement, options: any = {}) {
+    this.element =
+      typeof element === 'string' ? (document.querySelector(element) as HTMLElement) : element;
+
+    if (!this.element) {
+      throw new Error('Navbar element not found');
+    }
+
+    this.options = { ...DEFAULTS, ...options };
+    this.resizeHandler = this._handleResize.bind(this);
+    this._init();
+  }
+
+  /**
+   * Initialize the navbar component
+   * @private
+   */
+  private _init(): void {
+    this._findElements();
+    this._bindEvents();
+    this._setInitialState();
+  }
+
+  /**
+   * Find required DOM elements
+   * @private
+   */
+  private _findElements(): void {
+    this.toggler = this.element.querySelector(NAVBAR.SELECTORS.TOGGLER);
+    this.collapseElement = this.element.querySelector(NAVBAR.SELECTORS.COLLAPSE);
+  }
+
+  /**
+   * Bind event listeners
+   * @private
+   */
+  private _bindEvents(): void {
+    if (this.toggler) {
+      this.toggler.addEventListener('click', this._handleToggleClick.bind(this));
+    }
+
+    if (this.options.keyboard) {
+      document.addEventListener('keydown', this._handleKeydown.bind(this));
+    }
+
+    // Handle window resize for responsive behavior
+    window.addEventListener('resize', this.resizeHandler);
+
+    // Auto-close on outside click if enabled
+    if (this.options.autoClose) {
+      document.addEventListener('click', this._handleOutsideClick.bind(this));
+    }
+  }
+
+  /**
+   * Set initial component state
+   * @private
+   */
+  private _setInitialState(): void {
+    this.isExpanded = this.options.expanded || false;
+    this._updateExpandedState();
+  }
+
+  /**
+   * Handle toggle button click
+   * @private
+   */
+  private _handleToggleClick(event: Event): void {
+    event.preventDefault();
+    this.toggle();
+  }
+
+  /**
+   * Handle keyboard events
+   * @private
+   */
+  private _handleKeydown(event: KeyboardEvent): void {
+    if (event.key === 'Escape' && this.isExpanded) {
+      this.collapse();
+    }
+  }
+
+  /**
+   * Handle window resize
+   * @private
+   */
+  private _handleResize(): void {
+    // Auto-collapse on desktop breakpoint
+    if (window.innerWidth >= 768 && this.isExpanded) {
+      this.collapse();
+    }
+  }
+
+  /**
+   * Handle clicks outside the navbar
+   * @private
+   */
+  private _handleOutsideClick(event: Event): void {
+    const target = event.target as HTMLElement;
+    if (this.isExpanded && !this.element.contains(target)) {
+      this.collapse();
+    }
+  }
+
+  /**
+   * Update the expanded state and DOM
+   * @private
+   */
+  private _updateExpandedState(): void {
+    if (this.toggler) {
+      this.toggler.setAttribute('aria-expanded', this.isExpanded.toString());
+    }
+
+    if (this.collapseElement) {
+      if (this.isExpanded) {
+        this.collapseElement.classList.add('is-expanded');
+      } else {
+        this.collapseElement.classList.remove('is-expanded');
+      }
+    }
+
+    // Dispatch custom event
+    const eventType = this.isExpanded ? 'navbar:expanded' : 'navbar:collapsed';
+    const customEvent = new CustomEvent(eventType, {
+      detail: { navbar: this, expanded: this.isExpanded },
+    });
+    this.element.dispatchEvent(customEvent);
+  }
+
+  /**
+   * Expand the navbar collapse
+   */
+  public expand(): void {
+    if (this.isExpanded) return;
+
+    this.isExpanded = true;
+    this._updateExpandedState();
+  }
+
+  /**
+   * Collapse the navbar collapse
+   */
+  public collapse(): void {
+    if (!this.isExpanded) return;
+
+    this.isExpanded = false;
+    this._updateExpandedState();
+  }
+
+  /**
+   * Toggle the navbar collapse state
+   */
+  public toggle(): void {
+    if (this.isExpanded) {
+      this.collapse();
+    } else {
+      this.expand();
+    }
+  }
+
+  /**
+   * Get the current expanded state
+   * @returns Whether the navbar is expanded
+   */
+  public isOpen(): boolean {
+    return this.isExpanded;
+  }
+
+  /**
+   * Update navbar options
+   * @param newOptions - New options to merge
+   */
+  public updateOptions(newOptions: Partial<typeof DEFAULTS>): void {
+    this.options = { ...this.options, ...newOptions };
+  }
+
+  /**
+   * Destroy the navbar instance and clean up
+   */
+  public destroy(): void {
+    // Remove event listeners
+    if (this.toggler) {
+      this.toggler.removeEventListener('click', this._handleToggleClick);
+    }
+
+    document.removeEventListener('keydown', this._handleKeydown);
+    window.removeEventListener('resize', this.resizeHandler);
+    document.removeEventListener('click', this._handleOutsideClick);
+
+    // Reset DOM state
+    if (this.collapseElement) {
+      this.collapseElement.classList.remove('is-expanded');
+    }
+
+    if (this.toggler) {
+      this.toggler.removeAttribute('aria-expanded');
+    }
+
+    // Clear references
+    this.element = null as any;
+    this.toggler = null;
+    this.collapse = null;
+  }
+}

package/src/components/Pagination/Pagination.stories.tsx

@@ -35,7 +35,7 @@ export default {
     size: {
       control: 'select',
       options: ['sm', 'md', 'lg'],
-      description: 'Size variant for pagination'
+      description: 'Size variant for pagination',
     },
     ariaLabel: {
       control: 'text',
@@ -52,21 +52,22 @@ export default {
     },
     docs: {
       description: {
-        component: 'A Pagination component for navigating through pages of content with enhanced accessibility, configurable sizes, and icons for navigation buttons.'
-      }
-    }
-  }
+        component:
+          'A Pagination component for navigating through pages of content with enhanced accessibility, configurable sizes, and icons for navigation buttons.',
+      },
+    },
+  },
 } as Meta<typeof Pagination>;
 
 // Template with controlled state
-const ControlledTemplate: StoryFn<PaginationProps> = (args) => {
+const ControlledTemplate: StoryFn<PaginationProps> = args => {
   const [currentPage, setCurrentPage] = useState(args.currentPage);
-  
+
   const handlePageChange = (page: number) => {
     setCurrentPage(page);
     args.onPageChange?.(page);
   };
-  
+
   return <Pagination {...args} currentPage={currentPage} onPageChange={handlePageChange} />;
 };
 
@@ -78,14 +79,14 @@ Default.args = {
   showFirstLastButtons: true,
   showPrevNextButtons: true,
   size: 'md',
-  ariaLabel: 'Pagination'
+  ariaLabel: 'Pagination',
 };
 Default.parameters = {
   docs: {
     description: {
-      story: 'Default pagination with first/last and previous/next navigation buttons using icons.'
-    }
-  }
+      story: 'Default pagination with first/last and previous/next navigation buttons using icons.',
+    },
+  },
 };
 
 export const WithMorePages = ControlledTemplate.bind({});
@@ -98,9 +99,9 @@ WithMorePages.args = {
 WithMorePages.parameters = {
   docs: {
     description: {
-      story: 'Pagination with many pages, showing the ellipsis (dots) for page ranges.'
-    }
-  }
+      story: 'Pagination with many pages, showing the ellipsis (dots) for page ranges.',
+    },
+  },
 };
 
 export const SmallSize = ControlledTemplate.bind({});
@@ -113,9 +114,9 @@ SmallSize.args = {
 SmallSize.parameters = {
   docs: {
     description: {
-      story: 'Small-sized pagination component with smaller icons and buttons.'
-    }
-  }
+      story: 'Small-sized pagination component with smaller icons and buttons.',
+    },
+  },
 };
 
 export const LargeSize = ControlledTemplate.bind({});
@@ -128,9 +129,9 @@ LargeSize.args = {
 LargeSize.parameters = {
   docs: {
     description: {
-      story: 'Large-sized pagination component with larger icons and buttons.'
-    }
-  }
+      story: 'Large-sized pagination component with larger icons and buttons.',
+    },
+  },
 };
 
 export const FewPages = ControlledTemplate.bind({});
@@ -142,9 +143,9 @@ FewPages.args = {
 FewPages.parameters = {
   docs: {
     description: {
-      story: 'Pagination with only a few pages, showing all page numbers without ellipsis.'
-    }
-  }
+      story: 'Pagination with only a few pages, showing all page numbers without ellipsis.',
+    },
+  },
 };
 
 export const NoFirstLastButtons = ControlledTemplate.bind({});
@@ -157,9 +158,9 @@ NoFirstLastButtons.args = {
 NoFirstLastButtons.parameters = {
   docs: {
     description: {
-      story: 'Pagination with only previous/next navigation buttons (no skip to first/last).'
-    }
-  }
+      story: 'Pagination with only previous/next navigation buttons (no skip to first/last).',
+    },
+  },
 };
 
 export const OnlyPageNumbers = ControlledTemplate.bind({});
@@ -172,9 +173,9 @@ OnlyPageNumbers.args = {
 OnlyPageNumbers.parameters = {
   docs: {
     description: {
-      story: 'Pagination with only page numbers, no navigation buttons.'
-    }
-  }
+      story: 'Pagination with only page numbers, no navigation buttons.',
+    },
+  },
 };
 
 export const CustomStyling = ControlledTemplate.bind({});
@@ -187,7 +188,7 @@ CustomStyling.args = {
 CustomStyling.parameters = {
   docs: {
     description: {
-      story: 'Pagination with custom CSS class for additional styling.'
-    }
-  }
+      story: 'Pagination with custom CSS class for additional styling.',
+    },
+  },
 };

package/src/components/Pagination/Pagination.tsx

@@ -25,21 +25,21 @@ interface PaginationNavButtonProps {
 /**
  * PaginationNavButton component for rendering first, previous, next, and last buttons
  */
-export const PaginationNavButton: React.FC<PaginationNavButtonProps> = ({ 
-  type, 
-  onClick, 
-  disabled, 
+export const PaginationNavButton: React.FC<PaginationNavButtonProps> = ({
+  type,
+  onClick,
+  disabled,
   label,
-  iconName
+  iconName,
 }) => (
-  <li 
+  <li
     className={`c-pagination__item c-pagination__item--${type} ${disabled ? 'is-disabled' : ''}`}
     aria-disabled={disabled}
   >
-    <button 
+    <button
       type="button"
       className="c-pagination__link"
-      onClick={onClick} 
+      onClick={onClick}
       disabled={disabled}
       aria-label={label}
     >
@@ -62,14 +62,7 @@ export const Pagination: React.FC<PaginationProps> = ({
   className = '',
   ariaLabel = 'Pagination',
 }) => {
-  const {
-    paginationRange,
-    goToPage,
-    nextPage,
-    prevPage,
-    firstPage,
-    lastPage,
-  } = usePagination({
+  const { paginationRange, goToPage, nextPage, prevPage, firstPage, lastPage } = usePagination({
     currentPage,
     totalPages,
     siblingCount,
@@ -82,13 +75,10 @@ export const Pagination: React.FC<PaginationProps> = ({
   }
 
   return (
-    <nav 
-      className={`c-pagination c-pagination--${size} ${className}`} 
-      aria-label={ariaLabel}
-    >
+    <nav className={`c-pagination c-pagination--${size} ${className}`} aria-label={ariaLabel}>
       <ul className="c-pagination__items">
         {showFirstLastButtons && (
-          <PaginationNavButton 
+          <PaginationNavButton
             type="first"
             onClick={firstPage}
             disabled={currentPage === 1}
@@ -96,9 +86,9 @@ export const Pagination: React.FC<PaginationProps> = ({
             iconName="SkipBack"
           />
         )}
-        
+
         {showPrevNextButtons && (
-          <PaginationNavButton 
+          <PaginationNavButton
             type="prev"
             onClick={prevPage}
             disabled={currentPage === 1}
@@ -106,12 +96,12 @@ export const Pagination: React.FC<PaginationProps> = ({
             iconName="CaretLeft"
           />
         )}
-        
+
         {paginationRange.map((pageNumber, index) => {
           if (pageNumber === DOTS) {
             return (
-              <li 
-                key={`dots-${index}`} 
+              <li
+                key={`dots-${index}`}
                 className="c-pagination__item c-pagination__item--dots"
                 aria-hidden="true"
               >
@@ -121,14 +111,14 @@ export const Pagination: React.FC<PaginationProps> = ({
           }
 
           const isActive = pageNumber === currentPage;
-          
+
           return (
-            <li 
+            <li
               key={pageNumber}
               className={`c-pagination__item ${isActive ? 'is-active' : ''}`}
               aria-current={isActive ? 'page' : undefined}
             >
-              <button 
+              <button
                 type="button"
                 className="c-pagination__link"
                 onClick={() => goToPage(pageNumber as number)}
@@ -140,9 +130,9 @@ export const Pagination: React.FC<PaginationProps> = ({
             </li>
           );
         })}
-        
+
         {showPrevNextButtons && (
-          <PaginationNavButton 
+          <PaginationNavButton
             type="next"
             onClick={nextPage}
             disabled={currentPage === totalPages}
@@ -150,9 +140,9 @@ export const Pagination: React.FC<PaginationProps> = ({
             iconName="CaretRight"
           />
         )}
-        
+
         {showFirstLastButtons && (
-          <PaginationNavButton 
+          <PaginationNavButton
             type="last"
             onClick={lastPage}
             disabled={currentPage === totalPages}
@@ -165,8 +155,8 @@ export const Pagination: React.FC<PaginationProps> = ({
   );
 };
 
-export type { PaginationProps  };
+export type { PaginationProps };
 
 Pagination.displayName = 'Pagination';
 
-export default Pagination;
+export default Pagination;

package/src/components/Pagination/index.ts

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