@wazobiatech/wazui 0.0.12 → 0.0.14

package/src/utils/apolloClient.ts

@@ -1,160 +0,0 @@
-import { env } from '../env';
-import { ApolloClient, InMemoryCache, FetchPolicy, createHttpLink } from '@apollo/client';
-import { setContext } from '@apollo/client/link/context';
-import UploadHttpLink from 'apollo-upload-client/UploadHttpLink.mjs';
-import { fetchMercuryToken } from '../hooks/useMercuryProjectToken';
-
-const createMuseAuthLink = (uri: string, isMuseClient: boolean = false) => {
-  return setContext(async (_operation, { headers: contextHeaders }) => {
-    const isMuseEndpoint = isMuseClient || uri.includes('muse');
-
-    if (isMuseEndpoint) {
-      try {
-        const response = await fetchMercuryToken();
-        const mercuryToken = response.token;
-
-        const newHeaders = {
-          ...contextHeaders,
-          'X-Project-Token': `${mercuryToken}`,
-        };
-
-        return {
-          headers: newHeaders,
-        };
-      } catch (error) {
-        console.log('Error fetching Mercury token:', error);
-        return { headers: contextHeaders };
-      }
-    }
-
-    return { headers: contextHeaders };
-  });
-};
-
-export const createApolloClient = (
-  uri: string,
-  options?: {
-    headers?: Record<string, string>;
-    fetchPolicy?:
-      | 'cache-first'
-      | 'cache-and-network'
-      | 'network-only'
-      | 'cache-only'
-      | 'no-cache'
-      | 'standby';
-    errorPolicy?: 'none' | 'ignore' | 'all';
-    isMuseClient?: boolean;
-  }
-) => {
-  const isMuseClient = options?.isMuseClient;
-
-  const defaultHeaders = {
-    // 'X-Internal-Auth': env.VITE_MUSE_TOKEN as string,
-  };
-
-  const headers = options?.headers ? { ...defaultHeaders, ...options.headers } : defaultHeaders;
-  const fetchPolicy = options?.fetchPolicy || 'no-cache';
-  const errorPolicy = options?.errorPolicy || 'all';
-
-  const httpLink = createHttpLink({
-    uri,
-  });
-
-  const authLink = setContext((_, { headers: contextHeaders }) => {
-    return {
-      headers: {
-        ...contextHeaders,
-        ...headers,
-      },
-    };
-  });
-
-  const museAuthLink = createMuseAuthLink(uri, isMuseClient);
-
-  const client = new ApolloClient({
-    link: museAuthLink.concat(authLink).concat(httpLink),
-    cache: new InMemoryCache(),
-    defaultOptions: {
-      watchQuery: {
-        fetchPolicy: fetchPolicy as FetchPolicy,
-        errorPolicy,
-      },
-      query: {
-        fetchPolicy: fetchPolicy as FetchPolicy,
-        errorPolicy,
-      },
-    },
-  });
-
-  return client;
-};
-
-export const createApolloUploadClient = (
-  uri: string,
-  options?: {
-    headers?: Record<string, string>;
-    fetchPolicy?:
-      | 'cache-first'
-      | 'cache-and-network'
-      | 'network-only'
-      | 'cache-only'
-      | 'no-cache'
-      | 'standby';
-    errorPolicy?: 'none' | 'ignore' | 'all';
-    isMuseClient?: boolean;
-  }
-) => {
-  const defaultHeaders = {
-    'X-Internal-Auth': env.VITE_MUSE_TOKEN as string,
-  };
-
-  const headers = options?.headers ? { ...defaultHeaders, ...options.headers } : defaultHeaders;
-  const fetchPolicy = options?.fetchPolicy || 'no-cache';
-  const errorPolicy = options?.errorPolicy || 'all';
-
-  const uploadLink = new UploadHttpLink({
-    uri,
-  });
-
-  const authLink = setContext((_, { headers: contextHeaders }) => {
-    return {
-      headers: {
-        ...contextHeaders,
-        ...headers,
-      },
-    };
-  });
-
-  const museAuthLink = createMuseAuthLink(uri, options?.isMuseClient);
-
-  const client = new ApolloClient({
-    link: museAuthLink.concat(authLink).concat(uploadLink),
-    cache: new InMemoryCache(),
-    defaultOptions: {
-      watchQuery: {
-        fetchPolicy: fetchPolicy as FetchPolicy,
-        errorPolicy,
-      },
-      query: {
-        fetchPolicy: fetchPolicy as FetchPolicy,
-        errorPolicy,
-      },
-    },
-  });
-
-  return client;
-};
-
-export const blogClient = createApolloClient(env.VITE_GRAPH_QL_URL as string, {
-  isMuseClient: true,
-});
-
-export const blogClientNew = createApolloClient(env.VITE_MUSE_GRAPHQL_URL as string, {
-  isMuseClient: true,
-});
-
-export const museClient = createApolloClient(env.VITE_MUSE_GRAPHQL_URL as string, {
-  isMuseClient: true,
-});
-
-export const recipeClient = createApolloClient(env.VITE_RECIPE_GRAPHQL_URL as string);

package/src/utils/articleMetadata.ts

@@ -1,97 +0,0 @@
-import {
-  ArticleMetadata,
-  OpenGraphData,
-  SEOCardsData,
-  TwitterCardsData,
-} from '../types/post.types';
-
-export class ArticleMetadataConverter {
-  /**
-   * Converts a partial record to a properly typed ArticleMetadata object
-   * Validates and sanitizes data while preserving type safety
-   */
-  static fromRecord(record: Record<string, string | Record<string, string>>): ArticleMetadata {
-    const metadata: ArticleMetadata = {};
-
-    // Extract basic fields
-    if (record.title && typeof record.title === 'string') {
-      metadata.title = record.title.trim();
-    }
-
-    if (record.description && typeof record.description === 'string') {
-      metadata.description = record.description.trim();
-    }
-
-    // Extract Open Graph data
-    if (record.open_graph && typeof record.open_graph === 'object') {
-      metadata.open_graph = this.extractOpenGraphData(record.open_graph);
-    }
-
-    // Extract Twitter Cards data
-    if (record.twitter_cards && typeof record.twitter_cards === 'object') {
-      metadata.twitter_cards = this.extractTwitterCardsData(record.twitter_cards);
-    }
-    // Extract SEO Cards data
-    if (record.seo_cards && typeof record.seo_cards === 'object') {
-      metadata.seo_cards = this.extractSEOCardsData(record.seo_cards);
-    }
-
-    return metadata;
-  }
-
-  /**
-   * Extracts and validates Open Graph data
-   */
-  private static extractOpenGraphData(ogData: Record<string, string>): OpenGraphData {
-    const openGraph: OpenGraphData = {};
-
-    // String fields
-    const stringFields = ['og:title', 'og:image', 'og:description'] as const;
-
-    for (const field of stringFields) {
-      if (ogData[field] && typeof ogData[field] === 'string') {
-        openGraph[field] = ogData[field].trim();
-      }
-    }
-    return openGraph;
-  }
-
-  /**
-   * Extracts and validates Twitter Cards data
-   */
-  private static extractTwitterCardsData(twitterData: Record<string, string>): TwitterCardsData {
-    const twitterCards: TwitterCardsData = {};
-
-    const stringFields = ['twitter:title', 'twitter:description', 'twitter:image'] as const;
-
-    for (const field of stringFields) {
-      if (twitterData[field] && typeof twitterData[field] === 'string') {
-        twitterCards[field] = twitterData[field].trim();
-      }
-    }
-
-    return twitterCards;
-  }
-  /**
-   * Extracts and validates Twitter Cards data
-   */
-  private static extractSEOCardsData(seoData: Record<string, string>): SEOCardsData {
-    const seoCards: SEOCardsData = {};
-
-    const stringFields = ['seo:title', 'seo:description', 'seo:image', 'seo:url'] as const;
-
-    for (const field of stringFields) {
-      if (seoData[field] && typeof seoData[field] === 'string') {
-        seoCards[field] = seoData[field].trim();
-      }
-    }
-
-    return seoCards;
-  }
-  /**
-   * Converts ArticleMetadata back to a plain object
-   */
-  static toRecord(metadata: ArticleMetadata): Record<string, string | object> {
-    return JSON.parse(JSON.stringify(metadata));
-  }
-}

package/src/utils/audio.ts

@@ -1,10 +0,0 @@
-export const playAudio = (file: string) => {
-  try {
-    new Audio(file).play().catch(error => {
-      console.log(error);
-    });
-  } catch (error) {
-    console.log(error);
-    /* ignore autoplay restrictions in tests */
-  }
-};

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;
-};