@shohojdhara/atomix 0.1.26 → 0.1.28

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

@@ -1,315 +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;

package/src/components/PhotoViewer/PhotoViewer.stories.tsx

@@ -1,160 +0,0 @@
-import React from 'react';
-import { Meta, StoryObj } from '@storybook/react';
-import { fn } from '@storybook/test';
-import { PhotoViewer } from './PhotoViewer';
-import { ImageType } from '../../lib/types/components';
-import { ImageGallery } from './examples/ImageGallery';
-import { SimpleGallery } from './examples/SimpleGallery';
-
-const meta: Meta<typeof PhotoViewer> = {
-  title: 'Components/PhotoViewer',
-  component: PhotoViewer,
-  parameters: {
-    layout: 'fullscreen',
-  },
-};
-
-export default meta;
-type Story = StoryObj<typeof PhotoViewer>;
-
-/**
- * Default PhotoViewer with a set of images
- */
-export const Default: Story = {
-  args: {
-    images: [
-      'https://picsum.photos/id/10/800/600',
-      'https://picsum.photos/id/11/800/1000',
-      'https://picsum.photos/id/12/800/500',
-      'https://picsum.photos/id/13/800/800',
-    ],
-    startIndex: 0,
-    onImageChange: fn(),
-  },
-};
-
-/**
- * PhotoViewer starting at the second image
- */
-export const StartAtSecond: Story = {
-  args: {
-    images: [
-      'https://picsum.photos/id/10/800/600',
-      'https://picsum.photos/id/11/800/1000',
-      'https://picsum.photos/id/12/800/500',
-      'https://picsum.photos/id/13/800/800',
-    ],
-    startIndex: 1,
-    onImageChange: fn(),
-  },
-};
-
-/**
- * Disabled PhotoViewer
- */
-export const Disabled: Story = {
-  args: {
-    images: [
-      'https://picsum.photos/id/10/800/600',
-      'https://picsum.photos/id/11/800/1000',
-      'https://picsum.photos/id/12/800/500',
-      'https://picsum.photos/id/13/800/800',
-    ],
-    disabled: true,
-    onImageChange: fn(),
-  },
-};
-
-/**
- * PhotoViewer with custom class
- */
-export const WithCustomClass: Story = {
-  args: {
-    images: [
-      'https://picsum.photos/id/10/800/600',
-      'https://picsum.photos/id/11/800/1000',
-      'https://picsum.photos/id/12/800/500',
-      'https://picsum.photos/id/13/800/800',
-    ],
-    className: 'custom-photo-viewer',
-    onImageChange: fn(),
-  },
-};
-
-/**
- * PhotoViewer with enhanced image objects
- */
-export const WithEnhancedImages: Story = {
-  args: {
-    images: [
-      {
-        src: 'https://picsum.photos/id/10/800/600',
-        alt: 'Mountain Landscape',
-        title: 'Mountain Landscape',
-        description: 'Beautiful mountain landscape with a lake view',
-        tags: ['nature', 'mountains', 'landscape'],
-      } as ImageType, // Cast to ImageType
-      {
-        src: 'https://picsum.photos/id/11/800/1000',
-        alt: 'Beach Sunset',
-        title: 'Beach Sunset',
-        description: 'Stunning sunset over the ocean',
-        tags: ['beach', 'sunset', 'ocean'],
-      } as ImageType, // Cast to ImageType
-      {
-        src: 'https://picsum.photos/id/12/800/500',
-        alt: 'Forest Path',
-        title: 'Forest Path',
-        description: 'A serene path through a dense forest',
-        tags: ['forest', 'nature', 'path'],
-      } as ImageType, // Cast to ImageType
-    ],
-    onImageChange: fn(),
-  },
-};
-
-/**
- * PhotoViewer with left thumbnails
- */
-export const LeftThumbnails: Story = {
-  args: {
-    images: [
-      'https://picsum.photos/id/10/800/600',
-      'https://picsum.photos/id/11/800/1000',
-      'https://picsum.photos/id/12/800/500',
-      'https://picsum.photos/id/13/800/800',
-    ],
-    thumbnailPosition: 'left',
-    onImageChange: fn(),
-  },
-};
-
-/**
- * Example of an image gallery using MasonryGrid with PhotoViewer integration
- */
-export const ImageGalleryExample: Story = {
-  render: () => <ImageGallery />,
-  parameters: {
-    docs: {
-      description: {
-        story:
-          'This example demonstrates how to integrate the PhotoViewer with a MasonryGrid to create an image gallery with smooth transitions. Click on any image to open the PhotoViewer.',
-      },
-    },
-  },
-};
-
-/**
- * Example of a simple image gallery using the SimpleGallery component
- */
-export const SimpleGalleryExample: Story = {
-  render: () => <SimpleGallery />,
-  parameters: {
-    docs: {
-      description: {
-        story:
-          'This example demonstrates a basic image gallery using the SimpleGallery component, which integrates the PhotoViewer. Click on any image to open the PhotoViewer.',
-      },
-    },
-  },
-};