@shohojdhara/atomix 0.1.16 → 0.1.17

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

@@ -1,193 +0,0 @@
-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

@@ -1,172 +0,0 @@
-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

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

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

@@ -1,15 +0,0 @@
-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;
-}

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

@@ -1,310 +0,0 @@
-import { PAGINATION_DEFAULTS } from '../../../lib/constants/components';
-import { DOTS, usePagination } from '../../../lib/composables/usePagination';
-
-interface PaginationOptions {
-  currentPage?: number;
-  totalPages?: number;
-  siblingCount?: number;
-  showFirstLastButtons?: boolean;
-  showPrevNextButtons?: boolean;
-  onPageChange?: (page: number) => void;
-  size?: 'sm' | 'md' | 'lg';
-  paginationSelector?: string;
-  pageItemSelector?: string;
-  pageLinkSelector?: string;
-  dotsSelector?: string;
-  activeClass?: string;
-  disabledClass?: string;
-  ariaLabel?: string;
-  useIcons?: boolean; // Option to use icons or HTML entities
-}
-
-/**
- * Navigation button types for pagination
- */
-type NavButtonType = 'first' | 'prev' | 'next' | 'last';
-
-/**
- * Navigation button configurations
- */
-interface NavButtonConfig {
-  type: NavButtonType;
-  iconHtml: string;
-  iconClass: string;
-  label: string;
-  action: (pagination: Pagination) => void;
-  isDisabled: (pagination: Pagination) => boolean;
-}
-
-const defaults: PaginationOptions = {
-  currentPage: PAGINATION_DEFAULTS.currentPage,
-  totalPages: PAGINATION_DEFAULTS.totalPages,
-  siblingCount: PAGINATION_DEFAULTS.siblingCount,
-  showFirstLastButtons: PAGINATION_DEFAULTS.showFirstLastButtons,
-  showPrevNextButtons: PAGINATION_DEFAULTS.showPrevNextButtons,
-  size: PAGINATION_DEFAULTS.size,
-  onPageChange: () => {},
-  paginationSelector: '.c-pagination',
-  pageItemSelector: '.c-pagination__item',
-  pageLinkSelector: '.c-pagination__link',
-  dotsSelector: '.c-pagination__item--dots',
-  activeClass: 'is-active',
-  disabledClass: 'is-disabled',
-  ariaLabel: 'Pagination',
-  useIcons: true,
-};
-
-/**
- * Navigation button configurations for different button types
- */
-const navButtons: NavButtonConfig[] = [
-  {
-    type: 'first',
-    iconHtml: '«',
-    iconClass: 'c-icon c-icon--sm c-pagination__icon-skip-back',
-    label: 'Go to first page',
-    action: (pagination) => pagination.goToPage(1),
-    isDisabled: (pagination) => pagination.currentPage === 1
-  },
-  {
-    type: 'prev',
-    iconHtml: '‹',
-    iconClass: 'c-icon c-icon--sm c-pagination__icon-caret-left',
-    label: 'Go to previous page',
-    action: (pagination) => pagination.goToPage(pagination.currentPage - 1),
-    isDisabled: (pagination) => pagination.currentPage === 1
-  },
-  {
-    type: 'next',
-    iconHtml: '›',
-    iconClass: 'c-icon c-icon--sm c-pagination__icon-caret-right',
-    label: 'Go to next page',
-    action: (pagination) => pagination.goToPage(pagination.currentPage + 1),
-    isDisabled: (pagination) => pagination.currentPage === pagination.totalPages
-  },
-  {
-    type: 'last',
-    iconHtml: '»',
-    iconClass: 'c-icon c-icon--sm c-pagination__icon-skip-forward',
-    label: 'Go to last page',
-    action: (pagination) => pagination.goToPage(pagination.totalPages),
-    isDisabled: (pagination) => pagination.currentPage === pagination.totalPages
-  }
-];
-
-class Pagination {
-  private $element: HTMLElement;
-  private options: PaginationOptions = defaults;
-  currentPage: number = 1;
-  totalPages: number = 1;
-
-  constructor(element: string | HTMLElement, options: PaginationOptions = {}) {
-    const el = typeof element === 'string' ? document.querySelector<HTMLElement>(element) : element;
-    if (!el) {
-      console.error('Pagination element not found');
-      throw new Error('Pagination element not found');
-    }
-    this.$element = el;
-    this.options = { ...defaults, ...this._parseDataAttributes(), ...options }; 
-    this.currentPage = Number(this.options.currentPage) || 1;
-    this.totalPages = Number(this.options.totalPages) || 1;
-
-    this._initialize();
-  }
-
-  /**
-   * Parse data attributes from the element
-   */
-  private _parseDataAttributes(): Partial<PaginationOptions> {
-    const dataset = this.$element.dataset;
-    const result: Partial<PaginationOptions> = {};
-    
-    if (dataset.currentPage) result.currentPage = Number(dataset.currentPage);
-    if (dataset.totalPages) result.totalPages = Number(dataset.totalPages);
-    if (dataset.siblingCount) result.siblingCount = Number(dataset.siblingCount);
-    if (dataset.showFirstLastButtons) result.showFirstLastButtons = dataset.showFirstLastButtons === 'true';
-    if (dataset.showPrevNextButtons) result.showPrevNextButtons = dataset.showPrevNextButtons === 'true';
-    if (dataset.size) result.size = dataset.size as 'sm' | 'md' | 'lg';
-    if (dataset.ariaLabel) result.ariaLabel = dataset.ariaLabel;
-    if (dataset.useIcons) result.useIcons = dataset.useIcons === 'true';
-    
-    return result;
-  }
-
-  private _initialize(): void {
-    this._render();
-    this._attachEventListeners();
-  }
-
-  /**
-   * Create a navigation button HTML
-   */
-  private _createNavButtonHtml(config: NavButtonConfig | undefined): string {
-    if (!config) return '';
-    
-    const isDisabled = config.isDisabled(this);
-    const buttonContent = this.options.useIcons 
-      ? `<span class="${config.iconClass}" aria-hidden="true"></span>` 
-      : config.iconHtml;
-      
-    return `
-      <li class="${this.options.pageItemSelector?.substring(1) || 'c-pagination__item'} c-pagination__item--${config.type}${isDisabled ? ' ' + this.options.disabledClass : ''}" 
-          aria-disabled="${isDisabled}">
-        <button type="button" 
-                class="${this.options.pageLinkSelector?.substring(1) || 'c-pagination__link'}" 
-                data-page="${config.type}" 
-                aria-label="${config.label}"
-                ${isDisabled ? 'disabled' : ''}>
-          ${buttonContent}
-        </button>
-      </li>
-    `;
-  }
-
-  private _render(): void {
-    // Get pagination range using the same logic as React component
-    const { paginationRange } = usePagination({ 
-      currentPage: this.currentPage, 
-      totalPages: this.totalPages, 
-      siblingCount: this.options.siblingCount,
-      onPageChange: this.options.onPageChange || (() => {})
-    });
-
-    // Create container with appropriate attributes
-    this.$element.setAttribute('aria-label', this.options.ariaLabel || 'Pagination');
-    if (this.options.size) {
-      this.$element.classList.add(`c-pagination--${this.options.size}`);
-    }
-
-    let html = '<ul class="c-pagination__items">';
-
-    // Add first/prev buttons if enabled
-    if (this.options.showFirstLastButtons) {
-      const firstButton = navButtons.find(btn => btn.type === 'first');
-      html += this._createNavButtonHtml(firstButton);
-    }
-    
-    if (this.options.showPrevNextButtons) {
-      const prevButton = navButtons.find(btn => btn.type === 'prev');
-      html += this._createNavButtonHtml(prevButton);
-    }
-
-    // Add page number buttons and dots
-    paginationRange.forEach(page => {
-      if (page === DOTS) {
-        html += `<li class="${this.options.pageItemSelector?.substring(1) || 'c-pagination__item'} ${this.options.dotsSelector?.substring(1) || 'c-pagination__item--dots'}" aria-hidden="true">&#8230;</li>`;
-      } else {
-        const isActive = page === this.currentPage;
-        html += `
-          <li class="${this.options.pageItemSelector?.substring(1) || 'c-pagination__item'}${isActive ? ' ' + this.options.activeClass : ''}" 
-              aria-current="${isActive ? 'page' : 'false'}">
-            <button type="button" 
-                    class="${this.options.pageLinkSelector?.substring(1) || 'c-pagination__link'}" 
-                    data-page="${page}" 
-                    aria-label="Page ${page}"
-                    ${isActive ? 'aria-current="page"' : ''}>
-              ${page}
-            </button>
-          </li>
-        `;
-      }
-    });
-
-    // Add next/last buttons if enabled
-    if (this.options.showPrevNextButtons) {
-      const nextButton = navButtons.find(btn => btn.type === 'next');
-      html += this._createNavButtonHtml(nextButton);
-    }
-    
-    if (this.options.showFirstLastButtons) {
-      const lastButton = navButtons.find(btn => btn.type === 'last');
-      html += this._createNavButtonHtml(lastButton);
-    }
-
-    html += '</ul>';
-    this.$element.innerHTML = html;
-  }
-
-  private _attachEventListeners(): void {
-    this.$element.addEventListener('click', (event) => {
-      const target = event.target as HTMLElement;
-      const pageButton = target.closest('[data-page]') as HTMLElement;
-
-      if (pageButton && !pageButton.hasAttribute('disabled')) {
-        const pageAction = pageButton.dataset.page;
-        
-        // Handle navigation button actions
-        const navButton = navButtons.find(btn => btn.type === pageAction as NavButtonType);
-        if (navButton) {
-          navButton.action(this);
-          return;
-        }
-        
-        // Handle page number clicks
-        if (pageAction && !isNaN(Number(pageAction))) {
-          this.goToPage(Number(pageAction));
-        }
-      }
-    });
-  }
-
-  /**
-   * Navigate to a specific page
-   */
-  public goToPage(page: number): void {
-    if (page >= 1 && page <= this.totalPages && page !== this.currentPage) {
-      this.currentPage = page;
-      if (this.options.onPageChange) {
-        this.options.onPageChange(this.currentPage);
-      }
-      this._render();
-      
-      // Dispatch a custom event
-      const event = new CustomEvent('pagechange', { 
-        detail: { 
-          currentPage: this.currentPage,
-          totalPages: this.totalPages
-        } 
-      });
-      this.$element.dispatchEvent(event);
-    }
-  }
-
-  /**
-   * Update pagination options and re-render
-   */
-  public update(options: Partial<PaginationOptions>): void {
-    this.options = { ...this.options, ...options };
-    
-    if (options.currentPage !== undefined) {
-      this.currentPage = Number(options.currentPage);
-    }
-    
-    if (options.totalPages !== undefined) {
-      this.totalPages = Number(options.totalPages);
-    }
-    
-    this._render();
-  }
-
-  /**
-   * Clean up pagination instance
-   */
-  public destroy(): void {
-    this.$element.innerHTML = '';
-    this.$element.removeAttribute('aria-label');
-    if (this.options.size) {
-      this.$element.classList.remove(`c-pagination--${this.options.size}`);
-    }
-  }
-
-  /**
-   * Static initialization method
-   */
-  static initializeAll(selector: string = '[data-component="pagination"]', options: PaginationOptions = {}): Pagination[] {
-    const elements = document.querySelectorAll<HTMLElement>(selector);
-    return Array.from(elements).map(element => new Pagination(element, options));
-  }
-}
-
-export default Pagination;