@shohojdhara/atomix 0.1.27 → 0.1.28

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

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

@@ -1,194 +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,162 +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;
-}