@shohojdhara/atomix 0.1.17 → 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

@@ -0,0 +1,194 @@
+import React, { useState } from 'react';
+import { Meta, StoryFn } from '@storybook/react';
+import { Pagination } from './Pagination';
+import { PaginationProps } from '../../lib/types/components';
+import { INITIAL_VIEWPORTS } from '@storybook/addon-viewport';
+
+export default {
+  title: 'Components/Pagination',
+  component: Pagination,
+  argTypes: {
+    currentPage: {
+      control: 'number',
+      description: 'Current active page',
+    },
+    totalPages: {
+      control: 'number',
+      description: 'Total number of pages',
+    },
+    onPageChange: {
+      action: 'onPageChange',
+      description: 'Callback function when page changes',
+    },
+    siblingCount: {
+      control: 'number',
+      description: 'Number of page links to show before and after current page',
+    },
+    showFirstLastButtons: {
+      control: 'boolean',
+      description: 'Whether to show first/last page buttons',
+    },
+    showPrevNextButtons: {
+      control: 'boolean',
+      description: 'Whether to show previous/next page buttons',
+    },
+    size: {
+      control: 'select',
+      options: ['sm', 'md', 'lg'],
+      description: 'Size variant for pagination',
+    },
+    ariaLabel: {
+      control: 'text',
+      description: 'Accessible label for the navigation element',
+    },
+    className: {
+      control: 'text',
+      description: 'Custom class for the pagination container',
+    },
+  },
+  parameters: {
+    viewport: {
+      viewports: INITIAL_VIEWPORTS,
+    },
+    docs: {
+      description: {
+        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 [currentPage, setCurrentPage] = useState(args.currentPage);
+
+  const handlePageChange = (page: number) => {
+    setCurrentPage(page);
+    args.onPageChange?.(page);
+  };
+
+  return <Pagination {...args} currentPage={currentPage} onPageChange={handlePageChange} />;
+};
+
+export const Default = ControlledTemplate.bind({});
+Default.args = {
+  currentPage: 1,
+  totalPages: 10,
+  siblingCount: 1,
+  showFirstLastButtons: true,
+  showPrevNextButtons: true,
+  size: 'md',
+  ariaLabel: 'Pagination',
+};
+Default.parameters = {
+  docs: {
+    description: {
+      story: 'Default pagination with first/last and previous/next navigation buttons using icons.',
+    },
+  },
+};
+
+export const WithMorePages = ControlledTemplate.bind({});
+WithMorePages.args = {
+  currentPage: 25,
+  totalPages: 50,
+  siblingCount: 2,
+  size: 'md',
+};
+WithMorePages.parameters = {
+  docs: {
+    description: {
+      story: 'Pagination with many pages, showing the ellipsis (dots) for page ranges.',
+    },
+  },
+};
+
+export const SmallSize = ControlledTemplate.bind({});
+SmallSize.args = {
+  currentPage: 4,
+  totalPages: 10,
+  siblingCount: 1,
+  size: 'sm',
+};
+SmallSize.parameters = {
+  docs: {
+    description: {
+      story: 'Small-sized pagination component with smaller icons and buttons.',
+    },
+  },
+};
+
+export const LargeSize = ControlledTemplate.bind({});
+LargeSize.args = {
+  currentPage: 4,
+  totalPages: 10,
+  siblingCount: 1,
+  size: 'lg',
+};
+LargeSize.parameters = {
+  docs: {
+    description: {
+      story: 'Large-sized pagination component with larger icons and buttons.',
+    },
+  },
+};
+
+export const FewPages = ControlledTemplate.bind({});
+FewPages.args = {
+  currentPage: 2,
+  totalPages: 3,
+  siblingCount: 1,
+};
+FewPages.parameters = {
+  docs: {
+    description: {
+      story: 'Pagination with only a few pages, showing all page numbers without ellipsis.',
+    },
+  },
+};
+
+export const NoFirstLastButtons = ControlledTemplate.bind({});
+NoFirstLastButtons.args = {
+  currentPage: 5,
+  totalPages: 15,
+  showFirstLastButtons: false,
+  showPrevNextButtons: true,
+};
+NoFirstLastButtons.parameters = {
+  docs: {
+    description: {
+      story: 'Pagination with only previous/next navigation buttons (no skip to first/last).',
+    },
+  },
+};
+
+export const OnlyPageNumbers = ControlledTemplate.bind({});
+OnlyPageNumbers.args = {
+  currentPage: 5,
+  totalPages: 15,
+  showFirstLastButtons: false,
+  showPrevNextButtons: false,
+};
+OnlyPageNumbers.parameters = {
+  docs: {
+    description: {
+      story: 'Pagination with only page numbers, no navigation buttons.',
+    },
+  },
+};
+
+export const CustomStyling = ControlledTemplate.bind({});
+CustomStyling.args = {
+  currentPage: 5,
+  totalPages: 15,
+  className: 'custom-pagination-class',
+  showFirstLastButtons: false,
+};
+CustomStyling.parameters = {
+  docs: {
+    description: {
+      story: 'Pagination with custom CSS class for additional styling.',
+    },
+  },
+};

package/src/components/Pagination/Pagination.tsx

@@ -0,0 +1,162 @@
+import React from 'react';
+import { PaginationProps } from '../../lib/types/components';
+import { usePagination, DOTS } from '../../lib/composables/usePagination';
+import { PAGINATION_DEFAULTS } from '../../lib/constants/components';
+import { Icon, IconProps } from '../Icon/Icon';
+
+// @TODO: Add Search functionality for pagination
+
+/**
+ * Navigation button types for pagination
+ */
+type NavButtonType = 'first' | 'prev' | 'next' | 'last';
+
+/**
+ * Props for the PaginationNavButton component
+ */
+interface PaginationNavButtonProps {
+  type: NavButtonType;
+  onClick: () => void;
+  disabled: boolean;
+  label: string;
+  iconName: IconProps['name'];
+}
+
+/**
+ * PaginationNavButton component for rendering first, previous, next, and last buttons
+ */
+export const PaginationNavButton: React.FC<PaginationNavButtonProps> = ({
+  type,
+  onClick,
+  disabled,
+  label,
+  iconName,
+}) => (
+  <li
+    className={`c-pagination__item c-pagination__item--${type} ${disabled ? 'is-disabled' : ''}`}
+    aria-disabled={disabled}
+  >
+    <button
+      type="button"
+      className="c-pagination__link"
+      onClick={onClick}
+      disabled={disabled}
+      aria-label={label}
+    >
+      <Icon name={iconName} size="sm" aria-hidden="true" />
+    </button>
+  </li>
+);
+
+/**
+ * Pagination component
+ */
+export const Pagination: React.FC<PaginationProps> = ({
+  currentPage = PAGINATION_DEFAULTS.currentPage,
+  totalPages = PAGINATION_DEFAULTS.totalPages,
+  onPageChange,
+  siblingCount = PAGINATION_DEFAULTS.siblingCount,
+  showFirstLastButtons = PAGINATION_DEFAULTS.showFirstLastButtons,
+  showPrevNextButtons = PAGINATION_DEFAULTS.showPrevNextButtons,
+  size = PAGINATION_DEFAULTS.size,
+  className = '',
+  ariaLabel = 'Pagination',
+}) => {
+  const { paginationRange, goToPage, nextPage, prevPage, firstPage, lastPage } = usePagination({
+    currentPage,
+    totalPages,
+    siblingCount,
+    onPageChange,
+  });
+
+  // Don't render pagination with a single page or no pages
+  if (currentPage === 0 || paginationRange.length < 2) {
+    return null;
+  }
+
+  return (
+    <nav className={`c-pagination c-pagination--${size} ${className}`} aria-label={ariaLabel}>
+      <ul className="c-pagination__items">
+        {showFirstLastButtons && (
+          <PaginationNavButton
+            type="first"
+            onClick={firstPage}
+            disabled={currentPage === 1}
+            label="Go to first page"
+            iconName="SkipBack"
+          />
+        )}
+
+        {showPrevNextButtons && (
+          <PaginationNavButton
+            type="prev"
+            onClick={prevPage}
+            disabled={currentPage === 1}
+            label="Go to previous page"
+            iconName="CaretLeft"
+          />
+        )}
+
+        {paginationRange.map((pageNumber, index) => {
+          if (pageNumber === DOTS) {
+            return (
+              <li
+                key={`dots-${index}`}
+                className="c-pagination__item c-pagination__item--dots"
+                aria-hidden="true"
+              >
+                &#8230;
+              </li>
+            );
+          }
+
+          const isActive = pageNumber === currentPage;
+
+          return (
+            <li
+              key={pageNumber}
+              className={`c-pagination__item ${isActive ? 'is-active' : ''}`}
+              aria-current={isActive ? 'page' : undefined}
+            >
+              <button
+                type="button"
+                className="c-pagination__link"
+                onClick={() => goToPage(pageNumber as number)}
+                aria-label={`Page ${pageNumber}`}
+                aria-current={isActive ? 'page' : undefined}
+              >
+                {pageNumber}
+              </button>
+            </li>
+          );
+        })}
+
+        {showPrevNextButtons && (
+          <PaginationNavButton
+            type="next"
+            onClick={nextPage}
+            disabled={currentPage === totalPages}
+            label="Go to next page"
+            iconName="CaretRight"
+          />
+        )}
+
+        {showFirstLastButtons && (
+          <PaginationNavButton
+            type="last"
+            onClick={lastPage}
+            disabled={currentPage === totalPages}
+            label="Go to last page"
+            iconName="SkipForward"
+          />
+        )}
+      </ul>
+    </nav>
+  );
+};
+
+export type { PaginationProps };
+
+Pagination.displayName = 'Pagination';
+
+export default Pagination;

package/src/components/Pagination/index.ts

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

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

@@ -0,0 +1,15 @@
+import Pagination from './index';
+
+// Export the main component class for potential direct instantiation
+export { Pagination };
+
+// Export the static initializer for convenience
+export const initializeAllPaginators = Pagination.initializeAll;
+
+// Assign to a global namespace if required by the project's conventions
+// (e.g., for use in contexts without module loaders)
+if (typeof window !== 'undefined') {
+  (window as any).Atomix = (window as any).Atomix || {};
+  (window as any).Atomix.Pagination = Pagination;
+  (window as any).Atomix.initializeAllPaginators = initializeAllPaginators;
+}