@shohojdhara/atomix 0.1.16 → 0.1.18

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

@@ -63,33 +63,33 @@ const navButtons: NavButtonConfig[] = [
     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
+    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
+    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
+    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
-  }
+    action: pagination => pagination.goToPage(pagination.totalPages),
+    isDisabled: pagination => pagination.currentPage === pagination.totalPages,
+  },
 ];
 
 class Pagination {
@@ -105,7 +105,7 @@ class Pagination {
       throw new Error('Pagination element not found');
     }
     this.$element = el;
-    this.options = { ...defaults, ...this._parseDataAttributes(), ...options }; 
+    this.options = { ...defaults, ...this._parseDataAttributes(), ...options };
     this.currentPage = Number(this.options.currentPage) || 1;
     this.totalPages = Number(this.options.totalPages) || 1;
 
@@ -118,16 +118,18 @@ class Pagination {
   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.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;
   }
 
@@ -141,12 +143,12 @@ class Pagination {
    */
   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>` 
+    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}">
@@ -163,11 +165,11 @@ class Pagination {
 
   private _render(): void {
     // Get pagination range using the same logic as React component
-    const { paginationRange } = usePagination({ 
-      currentPage: this.currentPage, 
-      totalPages: this.totalPages, 
+    const { paginationRange } = usePagination({
+      currentPage: this.currentPage,
+      totalPages: this.totalPages,
       siblingCount: this.options.siblingCount,
-      onPageChange: this.options.onPageChange || (() => {})
+      onPageChange: this.options.onPageChange || (() => {}),
     });
 
     // Create container with appropriate attributes
@@ -183,7 +185,7 @@ class Pagination {
       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);
@@ -215,7 +217,7 @@ class Pagination {
       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);
@@ -226,20 +228,20 @@ class Pagination {
   }
 
   private _attachEventListeners(): void {
-    this.$element.addEventListener('click', (event) => {
+    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);
+        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));
@@ -258,13 +260,13 @@ class Pagination {
         this.options.onPageChange(this.currentPage);
       }
       this._render();
-      
+
       // Dispatch a custom event
-      const event = new CustomEvent('pagechange', { 
-        detail: { 
+      const event = new CustomEvent('pagechange', {
+        detail: {
           currentPage: this.currentPage,
-          totalPages: this.totalPages
-        } 
+          totalPages: this.totalPages,
+        },
       });
       this.$element.dispatchEvent(event);
     }
@@ -275,15 +277,15 @@ class Pagination {
    */
   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();
   }
 
@@ -301,7 +303,10 @@ class Pagination {
   /**
    * Static initialization method
    */
-  static initializeAll(selector: string = '[data-component="pagination"]', options: PaginationOptions = {}): Pagination[] {
+  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));
   }

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

@@ -1,16 +1,16 @@
-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";
+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",
+  title: 'Components/PhotoViewer',
   component: PhotoViewer,
   parameters: {
-    layout: "fullscreen",
+    layout: 'fullscreen',
   },
 };
 
@@ -23,10 +23,10 @@ type Story = StoryObj<typeof PhotoViewer>;
 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",
+      '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(),
@@ -39,10 +39,10 @@ export const Default: Story = {
 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",
+      '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(),
@@ -55,10 +55,10 @@ export const StartAtSecond: Story = {
 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",
+      '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(),
@@ -71,12 +71,12 @@ export const Disabled: Story = {
 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",
+      '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",
+    className: 'custom-photo-viewer',
     onImageChange: fn(),
   },
 };
@@ -88,25 +88,25 @@ 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"],
+        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"],
+        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"],
+        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(),
@@ -119,12 +119,12 @@ export const WithEnhancedImages: Story = {
 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",
+      '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",
+    thumbnailPosition: 'left',
     onImageChange: fn(),
   },
 };
@@ -138,7 +138,7 @@ export const ImageGalleryExample: Story = {
     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.",
+          '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.',
       },
     },
   },
@@ -153,7 +153,7 @@ export const SimpleGalleryExample: Story = {
     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.",
+          'This example demonstrates a basic image gallery using the SimpleGallery component, which integrates the PhotoViewer. Click on any image to open the PhotoViewer.',
       },
     },
   },

package/src/components/PhotoViewer/PhotoViewer.tsx

@@ -1,11 +1,11 @@
-import React, { useMemo, useEffect } from "react";
-import { PhotoViewerProps, ImageType } from "../../lib/types/components";
-import { usePhotoViewer } from "../../lib/composables/usePhotoViewer";
-import { PhotoViewerHeader } from "./PhotoViewerHeader";
-import { PhotoViewerNavigation } from "./PhotoViewerNavigation";
-import { PhotoViewerImage } from "./PhotoViewerImage";
-import { PhotoViewerThumbnails } from "./PhotoViewerThumbnails";
-import { PhotoViewerInfo } from "./PhotoViewerInfo";
+import React, { useMemo, useEffect } from 'react';
+import { PhotoViewerProps, ImageType } from '../../lib/types/components';
+import { usePhotoViewer } from '../../lib/composables/usePhotoViewer';
+import { PhotoViewerHeader } from './PhotoViewerHeader';
+import { PhotoViewerNavigation } from './PhotoViewerNavigation';
+import { PhotoViewerImage } from './PhotoViewerImage';
+import { PhotoViewerThumbnails } from './PhotoViewerThumbnails';
+import { PhotoViewerInfo } from './PhotoViewerInfo';
 
 /**
  * PhotoViewer component - A comprehensive image viewer with zoom, pan, navigation, and metadata display
@@ -27,12 +27,12 @@ import { PhotoViewerInfo } from "./PhotoViewerInfo";
 export const PhotoViewer: React.FC<PhotoViewerProps> = ({
   images,
   startIndex = 0,
-  className = "",
+  className = '',
   disabled = false,
   enableKeyboardNavigation = true,
   enableGestures = true,
   enableFullscreen = true,
-  thumbnailPosition = "bottom",
+  thumbnailPosition = 'bottom',
   onImageChange,
   onClose,
 }) => {
@@ -77,7 +77,7 @@ export const PhotoViewer: React.FC<PhotoViewerProps> = ({
 
   // Process images to handle both string arrays and object arrays, ensuring ImageType structure
   const processedImages: ImageType[] = useMemo(() => {
-    return images.map((img) => (typeof img === "string" ? { src: img } : img));
+    return images.map(img => (typeof img === 'string' ? { src: img } : img));
   }, [images]);
 
   // Current image object
@@ -109,7 +109,7 @@ export const PhotoViewer: React.FC<PhotoViewerProps> = ({
   const handleDownload = () => {
     if (!currentImage?.src) return;
 
-    const link = document.createElement("a");
+    const link = document.createElement('a');
     link.href = currentImage.src;
     link.download = currentImage.title || `image-${currentIndex + 1}`;
     document.body.appendChild(link);
@@ -123,12 +123,12 @@ export const PhotoViewer: React.FC<PhotoViewerProps> = ({
 
     try {
       await navigator.share({
-        title: currentImage.title || "Shared Image",
-        text: currentImage.description || "Check out this image",
+        title: currentImage.title || 'Shared Image',
+        text: currentImage.description || 'Check out this image',
         url: currentImage.src,
       });
     } catch (error) {
-      console.error("Error sharing:", error);
+      console.error('Error sharing:', error);
     }
   };
 
@@ -136,24 +136,17 @@ export const PhotoViewer: React.FC<PhotoViewerProps> = ({
   const photoViewerClasses = useMemo(
     () =>
       [
-        "c-photo-viewer",
+        'c-photo-viewer',
         `c-photo-viewer--thumbnails-${thumbnailPosition}`,
-        isDragging ? "c-photo-viewer--dragging" : "",
-        isFullscreen ? "c-photo-viewer--fullscreen" : "",
-        showInfo ? "c-photo-viewer--info-open" : "",
-        disabled ? "is-disabled" : "",
+        isDragging ? 'c-photo-viewer--dragging' : '',
+        isFullscreen ? 'c-photo-viewer--fullscreen' : '',
+        showInfo ? 'c-photo-viewer--info-open' : '',
+        disabled ? 'is-disabled' : '',
         className,
       ]
         .filter(Boolean)
-        .join(" "),
-    [
-      isDragging,
-      isFullscreen,
-      showInfo,
-      disabled,
-      thumbnailPosition,
-      className,
-    ],
+        .join(' '),
+    [isDragging, isFullscreen, showInfo, disabled, thumbnailPosition, className]
   );
 
   // Listen for fullscreen changes
@@ -162,17 +155,16 @@ export const PhotoViewer: React.FC<PhotoViewerProps> = ({
       setIsFullscreen(!!document.fullscreenElement);
     };
 
-    document.addEventListener("fullscreenchange", handleFullscreenChange);
-    return () =>
-      document.removeEventListener("fullscreenchange", handleFullscreenChange);
+    document.addEventListener('fullscreenchange', handleFullscreenChange);
+    return () => document.removeEventListener('fullscreenchange', handleFullscreenChange);
   }, [setIsFullscreen]);
 
   // Add/remove is-open-photoviewer class on body
   useEffect(() => {
-    document.body.classList.add("is-open-photoviewer");
+    document.body.classList.add('is-open-photoviewer');
 
     return () => {
-      document.body.classList.remove("is-open-photoviewer");
+      document.body.classList.remove('is-open-photoviewer');
     };
   }, []);
 
@@ -180,12 +172,7 @@ export const PhotoViewer: React.FC<PhotoViewerProps> = ({
   if (!images.length) return null;
 
   return (
-    <div
-      className={photoViewerClasses}
-      role="dialog"
-      aria-modal="true"
-      aria-label="Photo viewer"
-    >
+    <div className={photoViewerClasses} role="dialog" aria-modal="true" aria-label="Photo viewer">
       <div className="c-photo-viewer__backdrop" onClick={closeModal} />
       <div className="c-photo-viewer__container">
         <PhotoViewerHeader
@@ -239,18 +226,14 @@ export const PhotoViewer: React.FC<PhotoViewerProps> = ({
             />
           )}
         </div>
-        {thumbnailPosition !== "none" && (
+        {thumbnailPosition !== 'none' && (
           <PhotoViewerThumbnails
             images={processedImages}
             currentIndex={currentIndex}
             goToImage={goToImage}
           />
         )}
-        <PhotoViewerInfo
-          show={showInfo}
-          image={currentImage}
-          onClose={() => setShowInfo(false)}
-        />
+        <PhotoViewerInfo show={showInfo} image={currentImage} onClose={() => setShowInfo(false)} />
       </div>
     </div>
   );

package/src/components/PhotoViewer/PhotoViewerHeader.tsx

@@ -1,8 +1,8 @@
-import React from "react";
-import { ImageType } from "../../lib/types/components";
-import { Button } from "../Button/Button";
-import { Badge } from "../Badge/Badge";
-import { Icon } from "../Icon/Icon";
+import React from 'react';
+import { ImageType } from '../../lib/types/components';
+import { Button } from '../Button/Button';
+import { Badge } from '../Badge/Badge';
+import { Icon } from '../Icon/Icon';
 
 /**
  * Props for the PhotoViewerHeader component
@@ -126,27 +126,25 @@ export const PhotoViewerHeader: React.FC<PhotoViewerHeaderProps> = ({
           className="c-photo-viewer__action-button"
         />
       )}
-      {currentImage?.src &&
-        typeof navigator !== "undefined" &&
-        "share" in navigator && (
-          <Button
-            iconOnly
-            size="sm"
-            variant="light"
-            rounded
-            onClick={onShare}
-            aria-label="Share image"
-            icon={<Icon name="ShareNetwork" size="sm" />}
-            className="c-photo-viewer__action-button"
-          />
-        )}
+      {currentImage?.src && typeof navigator !== 'undefined' && 'share' in navigator && (
+        <Button
+          iconOnly
+          size="sm"
+          variant="light"
+          rounded
+          onClick={onShare}
+          aria-label="Share image"
+          icon={<Icon name="ShareNetwork" size="sm" />}
+          className="c-photo-viewer__action-button"
+        />
+      )}
       <Button
         iconOnly
         size="sm"
         variant="light"
         rounded
         onClick={onToggleInfo}
-        aria-label={showInfo ? "Hide info" : "Show info"}
+        aria-label={showInfo ? 'Hide info' : 'Show info'}
         icon={<Icon name="Info" size="sm" />}
         className="c-photo-viewer__action-button"
       />
@@ -156,13 +154,9 @@ export const PhotoViewerHeader: React.FC<PhotoViewerHeaderProps> = ({
         variant="light"
         rounded
         onClick={onToggleFullscreen}
-        aria-label={isFullscreen ? "Exit fullscreen" : "Enter fullscreen"}
+        aria-label={isFullscreen ? 'Exit fullscreen' : 'Enter fullscreen'}
         icon={
-          isFullscreen ? (
-            <Icon name="ArrowsIn" size="sm" />
-          ) : (
-            <Icon name="ArrowsOut" size="sm" />
-          )
+          isFullscreen ? <Icon name="ArrowsIn" size="sm" /> : <Icon name="ArrowsOut" size="sm" />
         }
         className="c-photo-viewer__action-button"
       />