@wazobiatech/wazui 0.0.1 → 0.0.3

package/src/utils/imageProcessing.ts

@@ -1,399 +0,0 @@
-import { Coordinates } from 'react-advanced-cropper';
-import { Transformation, TransformationState } from '@/components/wazui/WazUiGqlMediaLibrary/types';
-
-export interface ImageTransformOptions {
-  rotation?: number;
-  flipHorizontal?: boolean;
-  flipVertical?: boolean;
-  coordinates?: Coordinates;
-  quality?: number;
-  format?: 'image/jpeg' | 'image/png' | 'image/webp';
-}
-
-/**
- * Apply transformations to an image file and return a new processed file
- */
-export const applyImageTransformations = async (
-  file: File,
-  transformations: ImageTransformOptions
-): Promise<File> => {
-  return new Promise((resolve, reject) => {
-    const canvas = document.createElement('canvas');
-    const ctx = canvas.getContext('2d');
-    const img = new Image();
-
-    if (!ctx) {
-      reject(new Error('Canvas context not available'));
-      return;
-    }
-
-    img.onload = () => {
-      try {
-        const {
-          rotation = 0,
-          flipHorizontal = false,
-          flipVertical = false,
-          coordinates,
-          quality = 0.9,
-          format = 'image/jpeg',
-        } = transformations;
-
-        // First, handle rotation and flips
-        let canvasWidth = img.width;
-        let canvasHeight = img.height;
-
-        if (rotation === 90 || rotation === 270) {
-          canvasWidth = img.height;
-          canvasHeight = img.width;
-        }
-
-        canvas.width = canvasWidth;
-        canvas.height = canvasHeight;
-
-        // Clear canvas
-        ctx.clearRect(0, 0, canvasWidth, canvasHeight);
-
-        // Save context state
-        ctx.save();
-
-        // Move to center for rotation/flip operations
-        ctx.translate(canvasWidth / 2, canvasHeight / 2);
-
-        // Apply rotation
-        if (rotation) {
-          ctx.rotate((rotation * Math.PI) / 180);
-        }
-
-        // Apply flips
-        const scaleX = flipHorizontal ? -1 : 1;
-        const scaleY = flipVertical ? -1 : 1;
-        ctx.scale(scaleX, scaleY);
-
-        // Draw the image centered
-        const drawWidth = rotation === 90 || rotation === 270 ? img.height : img.width;
-        const drawHeight = rotation === 90 || rotation === 270 ? img.width : img.height;
-
-        ctx.drawImage(img, -drawWidth / 2, -drawHeight / 2, drawWidth, drawHeight);
-
-        // Restore context state
-        ctx.restore();
-
-        // Handle cropping if specified
-        if (coordinates && coordinates.width > 0 && coordinates.height > 0) {
-          const cropCanvas = document.createElement('canvas');
-          const cropCtx = cropCanvas.getContext('2d');
-
-          if (!cropCtx) {
-            reject(new Error('Crop canvas context not available'));
-            return;
-          }
-
-          // Ensure crop coordinates are within canvas bounds
-          const cropX = Math.max(0, Math.min(coordinates.left, canvasWidth));
-          const cropY = Math.max(0, Math.min(coordinates.top, canvasHeight));
-          const cropWidth = Math.min(coordinates.width, canvasWidth - cropX);
-          const cropHeight = Math.min(coordinates.height, canvasHeight - cropY);
-
-          cropCanvas.width = cropWidth;
-          cropCanvas.height = cropHeight;
-
-          // Draw the cropped portion
-          cropCtx.drawImage(
-            canvas,
-            cropX,
-            cropY,
-            cropWidth,
-            cropHeight,
-            0,
-            0,
-            cropWidth,
-            cropHeight
-          );
-
-          // Convert cropped canvas to blob
-          cropCanvas.toBlob(
-            blob => {
-              if (blob) {
-                const processedFile = new File([blob], file.name, {
-                  type: format,
-                  lastModified: Date.now(),
-                });
-                resolve(processedFile);
-              } else {
-                reject(new Error('Failed to create blob from cropped canvas'));
-              }
-            },
-            format,
-            quality
-          );
-        } else {
-          // Convert main canvas to blob
-          canvas.toBlob(
-            blob => {
-              if (blob) {
-                const processedFile = new File([blob], file.name, {
-                  type: format,
-                  lastModified: Date.now(),
-                });
-                resolve(processedFile);
-              } else {
-                reject(new Error('Failed to create blob from canvas'));
-              }
-            },
-            format,
-            quality
-          );
-        }
-      } catch (error) {
-        reject(error);
-      }
-    };
-
-    img.onerror = () => {
-      reject(new Error('Failed to load image'));
-    };
-
-    // Create object URL for the file
-    const url = URL.createObjectURL(file);
-    img.src = url;
-
-    // Clean up object URL after image loads or errors
-    const cleanup = () => URL.revokeObjectURL(url);
-    img.addEventListener('load', cleanup, { once: true });
-    img.addEventListener('error', cleanup, { once: true });
-  });
-};
-
-/**
- * Apply transformations from all screen sizes and return processed files
- */
-export const applyTransformationsForAllScreens = async (
-  file: File,
-  transformations: TransformationState
-): Promise<{
-  desktop?: File;
-  tablet?: File;
-  mobile?: File;
-  original: File;
-}> => {
-  const results: {
-    desktop?: File;
-    tablet?: File;
-    mobile?: File;
-    original: File;
-  } = {
-    original: file,
-  };
-
-  try {
-    // Helper function to check if transformations are meaningful
-    const hasTransformations = (transform: Transformation) => {
-      return (
-        (transform.coordinates &&
-          transform.coordinates.width > 0 &&
-          transform.coordinates.height > 0) ||
-        (transform.rotation && transform.rotation !== 0) ||
-        transform.flipHorizontal ||
-        transform.flipVertical
-      );
-    };
-
-    // Process desktop transformations
-    if (hasTransformations(transformations.desktop)) {
-      try {
-        results.desktop = await applyImageTransformations(file, {
-          rotation: transformations.desktop.rotation,
-          flipHorizontal: transformations.desktop.flipHorizontal,
-          flipVertical: transformations.desktop.flipVertical,
-          coordinates: transformations.desktop.coordinates,
-        });
-      } catch (error) {
-        console.warn('Desktop transformation failed:', error);
-      }
-    }
-
-    // Process tablet transformations
-    if (hasTransformations(transformations.tablet)) {
-      try {
-        results.tablet = await applyImageTransformations(file, {
-          rotation: transformations.tablet.rotation,
-          flipHorizontal: transformations.tablet.flipHorizontal,
-          flipVertical: transformations.tablet.flipVertical,
-          coordinates: transformations.tablet.coordinates,
-        });
-      } catch (error) {
-        console.warn('Tablet transformation failed:', error);
-      }
-    }
-
-    // Process mobile transformations
-    if (hasTransformations(transformations.mobile)) {
-      try {
-        results.mobile = await applyImageTransformations(file, {
-          rotation: transformations.mobile.rotation,
-          flipHorizontal: transformations.mobile.flipHorizontal,
-          flipVertical: transformations.mobile.flipVertical,
-          coordinates: transformations.mobile.coordinates,
-        });
-      } catch (error) {
-        console.warn('Mobile transformation failed:', error);
-      }
-    }
-
-    return results;
-  } catch (error) {
-    console.error('Error applying transformations:', error);
-    throw error;
-  }
-};
-
-/**
- * Get the most appropriate processed file from transformation results
- */
-export const getBestProcessedFile = (processedFiles: {
-  desktop?: File;
-  tablet?: File;
-  mobile?: File;
-  original: File;
-}): File => {
-  // Return the first available processed file, prioritizing desktop > tablet > mobile > original
-  return (
-    processedFiles.desktop ||
-    processedFiles.tablet ||
-    processedFiles.mobile ||
-    processedFiles.original
-  );
-};
-
-/**
- * Check if a file needs processing based on transformations
- */
-export const needsProcessing = (transformations: TransformationState): boolean => {
-  return Object.values(transformations).some(
-    transform =>
-      (transform.coordinates &&
-        transform.coordinates.width > 0 &&
-        transform.coordinates.height > 0) ||
-      (transform.rotation && transform.rotation !== 0) ||
-      transform.flipHorizontal ||
-      transform.flipVertical
-  );
-};
-
-/**
- * Helper function to resize image while maintaining aspect ratio
- */
-export const resizeImage = async (
-  file: File,
-  maxWidth: number,
-  maxHeight: number,
-  quality: number = 0.9
-): Promise<File> => {
-  return new Promise((resolve, reject) => {
-    const canvas = document.createElement('canvas');
-    const ctx = canvas.getContext('2d');
-    const img = new Image();
-
-    if (!ctx) {
-      reject(new Error('Canvas context not available'));
-      return;
-    }
-
-    img.onload = () => {
-      // Calculate new dimensions while maintaining aspect ratio
-      let { width, height } = img;
-
-      if (width > height) {
-        if (width > maxWidth) {
-          height = (height * maxWidth) / width;
-          width = maxWidth;
-        }
-      } else {
-        if (height > maxHeight) {
-          width = (width * maxHeight) / height;
-          height = maxHeight;
-        }
-      }
-
-      canvas.width = width;
-      canvas.height = height;
-
-      // Draw resized image
-      ctx.drawImage(img, 0, 0, width, height);
-
-      canvas.toBlob(
-        blob => {
-          if (blob) {
-            const resizedFile = new File([blob], file.name, {
-              type: file.type,
-              lastModified: Date.now(),
-            });
-            resolve(resizedFile);
-          } else {
-            reject(new Error('Failed to create resized image blob'));
-          }
-        },
-        file.type,
-        quality
-      );
-    };
-
-    img.onerror = () => {
-      reject(new Error('Failed to load image for resizing'));
-    };
-
-    const url = URL.createObjectURL(file);
-    img.src = url;
-
-    // Clean up object URL after image loads or errors
-    const cleanup = () => URL.revokeObjectURL(url);
-    img.addEventListener('load', cleanup, { once: true });
-    img.addEventListener('error', cleanup, { once: true });
-  });
-};
-
-/**
- * Convert image to different format
- */
-export const convertImageFormat = async (
-  file: File,
-  targetFormat: 'image/jpeg' | 'image/png' | 'image/webp',
-  quality: number = 0.9
-): Promise<File> => {
-  return applyImageTransformations(file, {
-    format: targetFormat,
-    quality,
-  });
-};
-
-/**
- * Process multiple files with transformations
- */
-export const processMultipleFiles = async (
-  files: File[],
-  transformations: TransformationState,
-  onProgress?: (current: number, total: number) => void
-): Promise<File[]> => {
-  const processedFiles: File[] = [];
-
-  for (let i = 0; i < files.length; i++) {
-    const file = files[i];
-    onProgress?.(i + 1, files.length);
-
-    try {
-      if (needsProcessing(transformations)) {
-        const processedResults = await applyTransformationsForAllScreens(file, transformations);
-        const bestProcessedFile = getBestProcessedFile(processedResults);
-        processedFiles.push(bestProcessedFile);
-      } else {
-        processedFiles.push(file);
-      }
-    } catch (error) {
-      console.warn(`Failed to process file ${file.name}:`, error);
-      // Use original file if processing fails
-      processedFiles.push(file);
-    }
-  }
-
-  return processedFiles;
-};

package/src/utils/images.ts

@@ -1,279 +0,0 @@
-import {
-  ImageTransformation,
-  DeviceCoordinates,
-  ParsedConfig,
-  ImageUrlResult,
-} from '@/types/image.types';
-import { Coordinates } from 'react-advanced-cropper';
-import { env } from '../env';
-// Constants
-const TRANSFORMATION_KEYS = {
-  width: 'w',
-  height: 'h',
-  quality: 'q',
-  format: 'f',
-  coordinates: 'cr',
-  rotation: 'rt',
-  blur: 'bl',
-} as const;
-
-const DEVICE_BREAKPOINTS = {
-  desktop: '1100w',
-  tablet: '750w',
-  mobile: '450w',
-} as const;
-
-/**
- * Builds transformation parameters string from ImageTransformation object
- */
-const buildTransformationParams = (transformations: ImageTransformation): string => {
-  const params: string[] = [];
-
-  Object.entries(transformations).forEach(([key, value]) => {
-    if (value === undefined || value === null) return;
-
-    const transformKey = TRANSFORMATION_KEYS[key as keyof typeof TRANSFORMATION_KEYS];
-    if (!transformKey) {
-      console.warn(`Unknown transformation key: ${key}`);
-      return;
-    }
-
-    if (key === 'coordinates') {
-      const { width, top, left, height } = value as Coordinates;
-      params.push(`${transformKey}-${top}.${left}.${height}.${width}`);
-    } else {
-      params.push(`${transformKey}-${value}`);
-    }
-  });
-
-  return params.join(',');
-};
-
-/**
- * Parses base64 encoded config from URL
- */
-const parseConfig = (config: string | null): ParsedConfig | null => {
-  if (!config) return null;
-
-  try {
-    const decodedConfig = atob(config);
-    return JSON.parse(decodeURIComponent(decodedConfig));
-  } catch (error) {
-    console.error('Error parsing config:', error);
-    return null;
-  }
-};
-
-/**
- * Builds crop parameters for a device configuration
- */
-const buildDeviceCrop = (
-  deviceConfig: (DeviceCoordinates & { rotation?: number }) | undefined
-): string => {
-  if (!deviceConfig) return '';
-
-  const { left, top, right, bottom, rotation } = deviceConfig;
-  const hasAllValues = [left, top, right, bottom, rotation].every(
-    v => v !== null && v !== undefined
-  );
-
-  if (!hasAllValues) return '';
-
-  return `cr-${left}.${top}.${right}.${bottom},rt-${rotation || 0}`;
-};
-
-const createTransformationUrl = (
-  baseImageUrl: string,
-  transformationParams: string,
-  deviceCrop: string = '',
-  config: string = ''
-): string => {
-  // Remove w- and h- parameters from transformationParams
-  const cleanedParams = transformationParams
-    .split(',')
-    .filter(p => !/^w-\d+/.test(p) && !/^h-\d+/.test(p))
-    .join(',');
-
-  const url = new URL(baseImageUrl);
-  const combinedParams = [cleanedParams, deviceCrop].filter(Boolean).join(',');
-
-  url.searchParams.set('tr', combinedParams);
-  if (config) {
-    url.searchParams.set('config', config);
-  }
-
-  return url.toString();
-};
-
-/**
- * Generates srcset string for responsive images
- */
-const generateSrcset = (
-  baseImageUrl: string,
-  transformationParams: string,
-  deviceCrops: { desktop: string; tablet: string; mobile: string },
-  config: string,
-  isBackground: boolean
-) => {
-  const desktopUrl = decodeURIComponent(
-    createTransformationUrl(baseImageUrl, transformationParams, deviceCrops.desktop, config)
-  );
-  const tabletUrl = decodeURIComponent(
-    createTransformationUrl(baseImageUrl, transformationParams, deviceCrops.tablet)
-  );
-  const mobileUrl = decodeURIComponent(
-    createTransformationUrl(baseImageUrl, transformationParams, deviceCrops.mobile)
-  );
-
-  const srcset = isBackground
-    ? `url("${mobileUrl}") 1x, url("${tabletUrl}") 2x, url("${desktopUrl}") 3x`
-    : `${desktopUrl} ${DEVICE_BREAKPOINTS.desktop}, ${tabletUrl} ${DEVICE_BREAKPOINTS.tablet}, ${mobileUrl} ${DEVICE_BREAKPOINTS.mobile} `;
-
-  return {
-    desktop: decodeURIComponent(desktopUrl.toString()),
-    tablet: decodeURIComponent(tabletUrl.toString()),
-    mobile: decodeURIComponent(mobileUrl.toString()),
-    srcset,
-  };
-};
-
-/**
- * Main function to generate image transformation URLs with responsive srcset
- */
-export const getImageTransformationsUrl = ({
-  url = '',
-  transformationsUrl,
-  transformations,
-  isBackground = false,
-}: {
-  url: string;
-  transformationsUrl?: string;
-  transformations?: ImageTransformation;
-  isBackground?: boolean;
-}): ImageUrlResult => {
-  // Early return for empty URL
-  if (!url) {
-    console.warn('getImageTransformationsUrl: No URL provided');
-    return { url: '', srcset: '', desktop: '', tablet: '', mobile: '' };
-  }
-
-  if (typeof url !== 'string' || url.trim() === '') {
-    console.warn('getImageTransformationsUrl: Invalid URL format:', url);
-    return { url: '', srcset: '', desktop: '', tablet: '', mobile: '' };
-  }
-
-  const trimmedUrl = url.trim();
-  if (!trimmedUrl.startsWith('http://') && !trimmedUrl.startsWith('https://') && !trimmedUrl.startsWith('/')) {
-    console.warn('getImageTransformationsUrl: URL must be absolute (http/https) or relative path:', url);
-    return { url: '', srcset: '', desktop: '', tablet: '', mobile: '' };
-  }
-
-  try {
-    const parsedUrl = trimmedUrl.startsWith('/') 
-      ? new URL(trimmedUrl, 'https://placeholder.com') 
-      : new URL(trimmedUrl);
-    const config = parsedUrl.searchParams.get('config') || '';
-
-    // Build base transformation URL
-    const imageTransformUrl =
-      transformationsUrl || (env.VITE_DOLOS_TRANSFORMATION_ENDPOINT as string) || 'images';
-        const shouldSkipHostname = parsedUrl.hostname === 'img.wazobia.tech';
-    const baseImageUrl = shouldSkipHostname 
-      ? `${imageTransformUrl}${parsedUrl.pathname}`
-      : `${imageTransformUrl}${imageTransformUrl.endsWith('/') ? '' : '/'}${parsedUrl.hostname}${parsedUrl.pathname}`;
-
-    // Build transformation parameters
-    const transformationParams = transformations ? buildTransformationParams(transformations) : '';
-
-    // Parse config for device-specific crops
-    const parsedConfig = parseConfig(config);
-    const deviceCrops = {
-      desktop: buildDeviceCrop(parsedConfig?.coordinates?.desktop),
-      tablet:
-        buildDeviceCrop(parsedConfig?.coordinates?.tablet) ||
-        buildDeviceCrop(parsedConfig?.coordinates?.desktop),
-      mobile:
-        buildDeviceCrop(parsedConfig?.coordinates?.mobile) ||
-        buildDeviceCrop(parsedConfig?.coordinates?.desktop),
-    };
-
-    // Create base URL and srcset
-    const baseUrl = createTransformationUrl(baseImageUrl, transformationParams, '', config);
-    const { desktop, srcset, mobile, tablet } = generateSrcset(
-      baseImageUrl,
-      transformationParams,
-      deviceCrops,
-      config,
-      isBackground
-    );
-
-    return {
-      url: desktop || baseUrl.toString(),
-      srcset,
-      mobile,
-      tablet,
-      desktop,
-    };
-  } catch (error) {
-    console.error('Error generating image transformation URL:', error);
-    return { url, srcset: url, mobile: '', desktop: '', tablet: '' }; // Fallback to original URL
-  }
-};
-
-/**
- * Simplified function to get image with specific dimensions
- */
-export const getImageWithDimensions = ({
-  url,
-  transformationsUrl,
-  width,
-  height,
-  blur,
-  quality = 70,
-}: {
-  url: string;
-  transformationsUrl?: string;
-  width?: number;
-  height?: number;
-  blur?: number;
-  quality?: number;
-}): ImageUrlResult => {
-  return getImageTransformationsUrl({
-    url,
-    transformationsUrl,
-    transformations: {
-      width,
-      height,
-      format: 'WEBP',
-      quality,
-      blur,
-    },
-  });
-};
-
-/**
- * Calculate crop coordinates string from coordinate object
- */
-export const calculateCropCoordinates = (
-  coordinates?: Record<'left' | 'top' | 'right' | 'bottom', number>
-): string => {
-  if (!coordinates) return '';
-  const { left, top, right, bottom } = coordinates;
-  return `${left}.${top}.${right}.${bottom}`;
-};
-
-/**
- * Default sizes attribute for responsive images
- */
-export const imageSizes = '(min-width: 1024px) 1100px, (min-width: 500px) 750px, 450px';
-
-export const removeConfigParam = (url: string): string => {
-  try {
-    const parsedUrl = new URL(url);
-    parsedUrl.searchParams.delete('config');
-    return parsedUrl.toString();
-  } catch (error) {
-    console.error('Error removing config param:', error);
-    return url;
-  }
-};