@shohojdhara/atomix 0.1.27 → 0.1.28

package/src/components/PhotoViewer/examples/SimpleGallery.tsx

@@ -1,77 +0,0 @@
-import React, { useState } from 'react';
-import { fn } from '@storybook/test';
-import { PhotoViewer } from '../PhotoViewer';
-
-const 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',
-];
-
-export const SimpleGallery: React.FC = () => {
-  const [selectedIndex, setSelectedIndex] = useState(0);
-  const [showViewer, setShowViewer] = useState(false);
-
-  const handleOpen = (index: number) => {
-    setSelectedIndex(index);
-    setShowViewer(true);
-  };
-
-  const handleClose = () => {
-    setShowViewer(false);
-  };
-
-  // Create spy functions for event handlers
-  const handleImageChange = fn((index: number) => {
-    setSelectedIndex(index);
-  });
-
-  return (
-    <div style={{ padding: '20px' }}>
-      <h2 style={{ marginBottom: '20px' }}>Simple Gallery Example</h2>
-      <div
-        style={{
-          display: 'grid',
-          gridTemplateColumns: 'repeat(auto-fill, minmax(200px, 1fr))',
-          gap: '16px',
-        }}
-      >
-        {images.map((src, index) => (
-          <div
-            key={index}
-            onClick={() => handleOpen(index)}
-            style={{
-              cursor: 'pointer',
-              borderRadius: '8px',
-              overflow: 'hidden',
-              boxShadow: '0 4px 6px rgba(0,0,0,0.1)',
-              transition: 'transform 0.3s ease',
-            }}
-          >
-            <img
-              src={src}
-              alt={`Gallery image ${index + 1}`}
-              style={{ width: '100%', height: 'auto', display: 'block' }}
-            />
-          </div>
-        ))}
-      </div>
-
-      {showViewer && (
-        <PhotoViewer
-          images={images}
-          startIndex={selectedIndex}
-          onClose={handleClose}
-          thumbnailPosition="bottom"
-          enableFullscreen={true}
-          enableGestures={true}
-          enableKeyboardNavigation={true}
-          onImageChange={handleImageChange}
-        />
-      )}
-    </div>
-  );
-};
-
-export default SimpleGallery;

package/src/components/PhotoViewer/examples/index.ts

@@ -1,2 +0,0 @@
-export { ImageGallery } from './ImageGallery';
-export type { GalleryImage } from './ImageGallery';

package/src/components/PhotoViewer/index.ts

@@ -1,14 +0,0 @@
-export { PhotoViewer } from './PhotoViewer';
-export { default } from './PhotoViewer';
-export { PhotoViewerHeader } from './PhotoViewerHeader';
-export { PhotoViewerNavigation } from './PhotoViewerNavigation';
-export { PhotoViewerImage } from './PhotoViewerImage';
-export { PhotoViewerThumbnails } from './PhotoViewerThumbnails';
-export { PhotoViewerInfo } from './PhotoViewerInfo';
-
-export type { PhotoViewerProps, ImageType } from '../../lib/types/components';
-export type { PhotoViewerHeaderProps } from './PhotoViewerHeader';
-export type { PhotoViewerNavigationProps } from './PhotoViewerNavigation';
-export type { PhotoViewerImageProps } from './PhotoViewerImage';
-export type { PhotoViewerThumbnailsProps } from './PhotoViewerThumbnails';
-export type { PhotoViewerInfoProps } from './PhotoViewerInfo';

package/src/components/PhotoViewer/scripts/PhotoViewerInteractions.ts

@@ -1,253 +0,0 @@
-import PhotoViewer from './index';
-
-/**
- * PhotoViewer instance storage for tracking active instances
- */
-const instances = new WeakMap<HTMLElement, PhotoViewer>();
-
-/**
- * Parse data attributes from an element to create PhotoViewer options
- */
-function parseDataAttributes(element: HTMLElement): any {
-  const dataset = element.dataset;
-  const options: any = {};
-
-  // Parse basic options
-  if (dataset.startIndex) options.startIndex = parseInt(dataset.startIndex, 10);
-  if (dataset.enableKeyboardNavigation)
-    options.enableKeyboardNavigation = dataset.enableKeyboardNavigation === 'true';
-  if (dataset.enableGestures) options.enableGestures = dataset.enableGestures === 'true';
-  if (dataset.enableFullscreen) options.enableFullscreen = dataset.enableFullscreen === 'true';
-  if (dataset.thumbnailPosition) options.thumbnailPosition = dataset.thumbnailPosition;
-
-  // Parse images from data attribute or child elements
-  if (dataset.images) {
-    try {
-      options.images = JSON.parse(dataset.images);
-    } catch (e) {
-      console.warn('PhotoViewer: Invalid JSON in data-images attribute');
-    }
-  } else {
-    // Extract images from child img elements
-    const imgElements = element.querySelectorAll('img');
-    options.images = Array.from(imgElements).map(img => ({
-      src: img.src,
-      alt: img.alt,
-      title: img.title || img.alt,
-      thumbnail: img.dataset.thumbnail,
-    }));
-  }
-
-  return options;
-}
-
-/**
- * Initialize PhotoViewer components from data attributes
- * Looks for elements with [data-photoviewer] attribute
- */
-export function initFromDataAttributes(): PhotoViewer[] {
-  const photoViewerInstances: PhotoViewer[] = [];
-
-  document.querySelectorAll('[data-photoviewer]').forEach(element => {
-    // Skip if already initialized
-    if (instances.has(element as HTMLElement)) return;
-
-    try {
-      const options = parseDataAttributes(element as HTMLElement);
-      const instance = new PhotoViewer(element as HTMLElement, options);
-      instances.set(element as HTMLElement, instance);
-      photoViewerInstances.push(instance);
-    } catch (error) {
-      console.error('PhotoViewer: Failed to initialize instance', error);
-    }
-  });
-
-  return photoViewerInstances;
-}
-
-/**
- * Get a PhotoViewer instance from an element
- */
-export function getInstance(element: string | HTMLElement): PhotoViewer | null {
-  const el =
-    typeof element === 'string' ? (document.querySelector(element) as HTMLElement) : element;
-  if (!el) return null;
-
-  return instances.get(el) || null;
-}
-
-/**
- * Create a new PhotoViewer instance and store it
- */
-export function createInstance(
-  element: string | HTMLElement,
-  options: any = {}
-): PhotoViewer | null {
-  const el =
-    typeof element === 'string' ? (document.querySelector(element) as HTMLElement) : element;
-  if (!el) return null;
-
-  try {
-    const instance = new PhotoViewer(el, options);
-    instances.set(el, instance);
-    return instance;
-  } catch (error) {
-    console.error('PhotoViewer: Failed to create instance', error);
-    return null;
-  }
-}
-
-/**
- * Dispose a specific PhotoViewer instance
- */
-export function disposeInstance(element: string | HTMLElement): boolean {
-  const el =
-    typeof element === 'string' ? (document.querySelector(element) as HTMLElement) : element;
-  if (!el) return false;
-
-  const instance = instances.get(el);
-  if (instance) {
-    instance.destroy();
-    instances.delete(el);
-    document.body.classList.remove('is-open-photoviewer');
-    return true;
-  }
-
-  return false;
-}
-
-/**
- * Dispose all PhotoViewer instances
- */
-export function disposeAll(): void {
-  document.querySelectorAll('[data-photoviewer]').forEach(element => {
-    const instance = instances.get(element as HTMLElement);
-    if (instance) {
-      instance.destroy();
-      instances.delete(element as HTMLElement);
-    }
-  });
-  document.body.classList.remove('is-open-photoviewer');
-}
-
-/**
- * Open a PhotoViewer with images programmatically
- * Creates a temporary container if needed
- */
-export function openPhotoViewer(
-  images: Array<string | any>,
-  options: any = {}
-): PhotoViewer | null {
-  // Create a temporary container
-  const container = document.createElement('div');
-  container.style.position = 'fixed';
-  container.style.inset = '0';
-  container.style.zIndex = '9999';
-  container.style.display = 'none';
-  document.body.appendChild(container);
-
-  try {
-    const instance = new PhotoViewer(container, { ...options, images });
-    instances.set(container, instance);
-
-    // Auto-cleanup when closed
-    const originalClose = instance.close.bind(instance);
-    instance.close = () => {
-      originalClose();
-      document.body.classList.remove('is-open-photoviewer');
-      setTimeout(() => {
-        instances.delete(container);
-        document.body.removeChild(container);
-      }, 100);
-    };
-
-    instance.open(options.startIndex || 0);
-    return instance;
-  } catch (error) {
-    console.error('PhotoViewer: Failed to open viewer', error);
-    document.body.removeChild(container);
-    return null;
-  }
-}
-
-/**
- * Utility function to setup click handlers for gallery elements
- * Automatically creates PhotoViewer instances for image galleries
- */
-export function setupGallery(
-  gallerySelector: string,
-  imageSelector: string = 'img',
-  options: any = {}
-): PhotoViewer[] {
-  const galleries = document.querySelectorAll(gallerySelector);
-  const instances: PhotoViewer[] = [];
-
-  galleries.forEach(gallery => {
-    const images = Array.from(gallery.querySelectorAll(imageSelector));
-    const imageData = images.map((img: any) => ({
-      src: img.src || img.dataset.src,
-      alt: img.alt,
-      title: img.title || img.alt,
-      thumbnail: img.dataset.thumbnail || img.src,
-    }));
-
-    // Add click handlers to images
-    images.forEach((img, index) => {
-      (img as HTMLElement).style.cursor = 'pointer';
-      img.addEventListener('click', e => {
-        e.preventDefault();
-        openPhotoViewer(imageData, {
-          ...options,
-          startIndex: index,
-        });
-      });
-    });
-  });
-
-  return instances;
-}
-
-/**
- * Utility function to check if PhotoViewer is supported
- */
-export function isSupported(): boolean {
-  return (
-    typeof window !== 'undefined' && typeof document !== 'undefined' && 'querySelector' in document
-  );
-}
-
-/**
- * Get all active PhotoViewer instances
- */
-export function getAllInstances(): PhotoViewer[] {
-  const allInstances: PhotoViewer[] = [];
-  document.querySelectorAll('[data-photoviewer]').forEach(element => {
-    const instance = instances.get(element as HTMLElement);
-    if (instance) {
-      allInstances.push(instance);
-    }
-  });
-  return allInstances;
-}
-
-/**
- * Update options for an existing instance
- */
-export function updateInstance(element: string | HTMLElement, newOptions: any): boolean {
-  const instance = getInstance(element);
-  if (!instance) return false;
-
-  try {
-    // Update images if provided
-    if (newOptions.images) {
-      instance.setImages(newOptions.images);
-    }
-
-    // Note: Other options would need to be implemented in the main class
-    // This is a basic implementation
-    return true;
-  } catch (error) {
-    console.error('PhotoViewer: Failed to update instance', error);
-    return false;
-  }
-}

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

@@ -1,81 +0,0 @@
-import PhotoViewer from './index';
-import {
-  initFromDataAttributes,
-  getInstance,
-  createInstance,
-  disposeInstance,
-  disposeAll,
-  openPhotoViewer,
-  setupGallery,
-  isSupported,
-  getAllInstances,
-  updateInstance,
-} from './PhotoViewerInteractions';
-
-if (typeof window !== 'undefined') {
-  // Initialize the Atomix global object if it doesn't exist
-  window.Atomix = window.Atomix || {};
-
-  // Add PhotoViewer to the global Atomix object with comprehensive API
-  window.Atomix.PhotoViewer = {
-    // Core class
-    create: PhotoViewer,
-
-    // Initialization and lifecycle
-    init: initFromDataAttributes,
-    get: getInstance,
-    createInstance: createInstance,
-    disposeInstance: disposeInstance,
-    disposeAll: disposeAll,
-
-    // Utility methods
-    open: openPhotoViewer,
-    setupGallery: setupGallery,
-    isSupported: isSupported,
-    getAllInstances: getAllInstances,
-    updateInstance: updateInstance,
-
-    // Version info
-    version: '1.0.0',
-  };
-
-  // Auto-initialize components when DOM is ready
-  if (document.readyState === 'loading') {
-    document.addEventListener('DOMContentLoaded', () => {
-      if (isSupported()) {
-        initFromDataAttributes();
-      }
-    });
-  } else {
-    if (isSupported()) {
-      initFromDataAttributes();
-    }
-  }
-
-  // Handle page visibility changes to pause/resume if needed
-  document.addEventListener('visibilitychange', () => {
-    if (document.hidden) {
-      // Pause any active animations or processes if needed
-    } else {
-      // Resume if needed
-    }
-  });
-}
-
-// Export everything for module bundling
-export {
-  PhotoViewer as default,
-  initFromDataAttributes,
-  getInstance,
-  createInstance,
-  disposeInstance,
-  disposeAll,
-  openPhotoViewer,
-  setupGallery,
-  isSupported,
-  getAllInstances,
-  updateInstance,
-};
-
-// Note: Types would be exported from the main TypeScript definitions
-// PhotoViewerOptions and ImageType interfaces are defined in the main class file