@greatapps/common 1.1.695 → 1.1.697

package/src/modules/images/hooks/use-image-upload.hook.ts

@@ -1,145 +1,153 @@
-'use client'
-
-import { useState, useCallback, useRef, useEffect } from 'react'
-import type { Crop } from 'react-image-crop'
-import { cropImageToCanvas } from '../utils/crop-image'
-import { validateImage } from '../utils/validate-image'
-import type { ImageConfig } from '../types/image.type'
-
-export interface ImageTooSmallError {
-  fileName: string
-  minWidth: number
-  minHeight: number
-}
-
-export interface UseImageUploadOptions {
-  config: ImageConfig
-  onSuccess?: (base64Image: string) => void
-  onError?: (error: string) => void
-}
-
-export function useImageUpload(options: UseImageUploadOptions) {
-  const { config, onSuccess, onError } = options
-
-  // Refs para manter callbacks sempre atualizados (evita stale closures)
-  const onSuccessRef = useRef(onSuccess)
-  const onErrorRef = useRef(onError)
-  useEffect(() => {
-    onSuccessRef.current = onSuccess
-    onErrorRef.current = onError
-  }, [onSuccess, onError])
-
-  const [originalImage, setOriginalImage] = useState<string | null>(null)
-  const [croppedPreview, setCroppedPreview] = useState<string | null>(null)
-  const [showCropModal, setShowCropModal] = useState(false)
-  const [showTooSmallModal, setShowTooSmallModal] = useState(false)
-  const [tooSmallError, setTooSmallError] = useState<ImageTooSmallError | null>(null)
-  const [isProcessing, setIsProcessing] = useState(false)
-  const [fileName, setFileName] = useState<string>('')
-  const fileInputRef = useRef<HTMLInputElement>(null)
-  const currentFileName = useRef<string>('')
-
-  const handleFileSelect = useCallback(
-    (file: File) => {
-      const validation = validateImage(file)
-      if (!validation.valid) {
-        onErrorRef.current?.(validation.error || 'Arquivo inválido')
-        return
-      }
-
-      currentFileName.current = file.name
-      setFileName(file.name)
-
-      // Usa object URL em vez de base64 — mais eficiente para imagens grandes
-      const objectUrl = URL.createObjectURL(file)
-      setOriginalImage(objectUrl)
-
-      // Carrega imagem em memória para garantir que é válida antes de abrir modal
-      const img = new Image()
-      img.onload = () => {
-        setShowCropModal(true)
-      }
-      img.onerror = () => {
-        URL.revokeObjectURL(objectUrl)
-        setOriginalImage(null)
-        onErrorRef.current?.('Erro ao carregar a imagem. Tente uma imagem menor ou em outro formato.')
-      }
-      img.src = objectUrl
-    },
-    []
-  )
-
-  const handleImageLoadInModal = useCallback(
-    (_naturalWidth: number, _naturalHeight: number) => {
-      // Validação agora é feita antes de abrir a modal
-    },
-    []
-  )
-
-  const handleSelectAnotherFile = useCallback(() => {
-    setShowTooSmallModal(false)
-    setTooSmallError(null)
-    fileInputRef.current?.click()
-  }, [])
-
-  const handleCancelTooSmall = useCallback(() => {
-    setShowTooSmallModal(false)
-    setShowCropModal(false)
-    setTooSmallError(null)
-    if (originalImage) URL.revokeObjectURL(originalImage)
-    setOriginalImage(null)
-  }, [originalImage])
-
-  const handleCropConfirm = useCallback(
-    async (imageElement: HTMLImageElement, cropArea: Crop) => {
-      setIsProcessing(true)
-      try {
-        // Crop é feito inteiramente no cliente via Canvas
-        // Já produz imagem no tamanho final (config.width x config.height)
-        const croppedBase64 = await cropImageToCanvas(
-          imageElement,
-          cropArea,
-          config.width,
-          config.height
-        )
-
-        setCroppedPreview(croppedBase64)
-        setShowCropModal(false)
-        if (originalImage) URL.revokeObjectURL(originalImage)
-        setOriginalImage(null)
-        onSuccessRef.current?.(croppedBase64)
-      } catch {
-        onErrorRef.current?.('Erro ao aplicar crop')
-      } finally {
-        setIsProcessing(false)
-      }
-    },
-    [config]
-  )
-
-  const clear = useCallback(() => {
-    if (originalImage) URL.revokeObjectURL(originalImage)
-    setOriginalImage(null)
-    setCroppedPreview(null)
-  }, [originalImage])
-
-  return {
-    originalImage,
-    croppedPreview,
-    showCropModal,
-    showTooSmallModal,
-    tooSmallError,
-    config,
-    isProcessing,
-    fileName,
-    fileInputRef,
-    handleFileSelect,
-    handleCropConfirm,
-    handleImageLoadInModal,
-    handleSelectAnotherFile,
-    handleCancelTooSmall,
-    setShowCropModal,
-    setShowTooSmallModal,
-    clear,
-  }
-}
+'use client'
+
+import { useState, useCallback, useRef, useEffect } from 'react'
+import type { Crop } from 'react-image-crop'
+import { cropImageToCanvas } from '../utils/crop-image'
+import { validateImage } from '../utils/validate-image'
+import type { ImageConfig } from '../types/image.type'
+
+export interface ImageTooSmallError {
+  fileName: string
+  minWidth: number
+  minHeight: number
+}
+
+export interface UseImageUploadOptions {
+  config: ImageConfig
+  onSuccess?: (base64Image: string) => void
+  onError?: (error: string) => void
+}
+
+export function useImageUpload(options: UseImageUploadOptions) {
+  const { config, onSuccess, onError } = options
+
+  // Refs para manter callbacks sempre atualizados (evita stale closures)
+  const onSuccessRef = useRef(onSuccess)
+  const onErrorRef = useRef(onError)
+  useEffect(() => {
+    onSuccessRef.current = onSuccess
+    onErrorRef.current = onError
+  }, [onSuccess, onError])
+
+  const [originalImage, setOriginalImage] = useState<string | null>(null)
+  const [croppedPreview, setCroppedPreview] = useState<string | null>(null)
+  const [showCropModal, setShowCropModal] = useState(false)
+  const [showTooSmallModal, setShowTooSmallModal] = useState(false)
+  const [tooSmallError, setTooSmallError] = useState<ImageTooSmallError | null>(null)
+  const [isProcessing, setIsProcessing] = useState(false)
+  const [fileName, setFileName] = useState<string>('')
+  const fileInputRef = useRef<HTMLInputElement>(null)
+  const currentFileName = useRef<string>('')
+  // Saída deve sair como PNG para não perder transparência. Só JPEG é achatado.
+  const preserveTransparency = useRef<boolean>(false)
+
+  const handleFileSelect = useCallback(
+    (file: File) => {
+      const validation = validateImage(file)
+      if (!validation.valid) {
+        onErrorRef.current?.(validation.error || 'Arquivo inválido')
+        return
+      }
+
+      currentFileName.current = file.name
+      // JPEG é o único formato aceito sem canal alpha. Para qualquer outro
+      // formato — png, webp, gif — ou quando o navegador não informa o tipo
+      // (file.type === ''), saímos como PNG para não achatar a transparência
+      // em fundo preto (JPEG não tem alpha → pixel transparente vira preto).
+      preserveTransparency.current = file.type !== 'image/jpeg'
+      setFileName(file.name)
+
+      // Usa object URL em vez de base64 — mais eficiente para imagens grandes
+      const objectUrl = URL.createObjectURL(file)
+      setOriginalImage(objectUrl)
+
+      // Carrega imagem em memória para garantir que é válida antes de abrir modal
+      const img = new Image()
+      img.onload = () => {
+        setShowCropModal(true)
+      }
+      img.onerror = () => {
+        URL.revokeObjectURL(objectUrl)
+        setOriginalImage(null)
+        onErrorRef.current?.('Erro ao carregar a imagem. Tente uma imagem menor ou em outro formato.')
+      }
+      img.src = objectUrl
+    },
+    []
+  )
+
+  const handleImageLoadInModal = useCallback(
+    (_naturalWidth: number, _naturalHeight: number) => {
+      // Validação agora é feita antes de abrir a modal
+    },
+    []
+  )
+
+  const handleSelectAnotherFile = useCallback(() => {
+    setShowTooSmallModal(false)
+    setTooSmallError(null)
+    fileInputRef.current?.click()
+  }, [])
+
+  const handleCancelTooSmall = useCallback(() => {
+    setShowTooSmallModal(false)
+    setShowCropModal(false)
+    setTooSmallError(null)
+    if (originalImage) URL.revokeObjectURL(originalImage)
+    setOriginalImage(null)
+  }, [originalImage])
+
+  const handleCropConfirm = useCallback(
+    async (imageElement: HTMLImageElement, cropArea: Crop) => {
+      setIsProcessing(true)
+      try {
+        // Crop é feito inteiramente no cliente via Canvas
+        // Já produz imagem no tamanho final (config.width x config.height)
+        const croppedBase64 = await cropImageToCanvas(
+          imageElement,
+          cropArea,
+          config.width,
+          config.height,
+          preserveTransparency.current ? 'image/png' : 'image/jpeg'
+        )
+
+        setCroppedPreview(croppedBase64)
+        setShowCropModal(false)
+        if (originalImage) URL.revokeObjectURL(originalImage)
+        setOriginalImage(null)
+        onSuccessRef.current?.(croppedBase64)
+      } catch {
+        onErrorRef.current?.('Erro ao aplicar crop')
+      } finally {
+        setIsProcessing(false)
+      }
+    },
+    [config]
+  )
+
+  const clear = useCallback(() => {
+    if (originalImage) URL.revokeObjectURL(originalImage)
+    setOriginalImage(null)
+    setCroppedPreview(null)
+  }, [originalImage])
+
+  return {
+    originalImage,
+    croppedPreview,
+    showCropModal,
+    showTooSmallModal,
+    tooSmallError,
+    config,
+    isProcessing,
+    fileName,
+    fileInputRef,
+    handleFileSelect,
+    handleCropConfirm,
+    handleImageLoadInModal,
+    handleSelectAnotherFile,
+    handleCancelTooSmall,
+    setShowCropModal,
+    setShowTooSmallModal,
+    clear,
+  }
+}

package/src/modules/images/services/image-processing.service.ts

@@ -1,75 +1,75 @@
-import type { ProcessImageInput, ProcessImageOutput } from '../types/image.type'
-
-export async function processImage(input: ProcessImageInput): Promise<ProcessImageOutput> {
-  const {
-    imageBytes,
-    targetWidth,
-    targetHeight,
-    outputFormat = 'jpeg',
-    quality = 85,
-  } = input
-
-  // Dynamic import to avoid fs.createReadStream error in edge runtime
-  const { PhotonImage, resize, crop, SamplingFilter } = await import(
-    '@cf-wasm/photon/edge-light'
-  )
-
-  const image = PhotonImage.new_from_byteslice(imageBytes)
-
-  try {
-    const sourceWidth = image.get_width()
-    const sourceHeight = image.get_height()
-    const targetAspect = targetWidth / targetHeight
-    const sourceAspect = sourceWidth / sourceHeight
-
-    let cropX1 = 0
-    let cropY1 = 0
-    let cropX2 = sourceWidth
-    let cropY2 = sourceHeight
-
-    if (sourceAspect > targetAspect) {
-      const cropWidth = Math.round(sourceHeight * targetAspect)
-      cropX1 = Math.round((sourceWidth - cropWidth) / 2)
-      cropX2 = cropX1 + cropWidth
-    } else if (sourceAspect < targetAspect) {
-      const cropHeight = Math.round(sourceWidth / targetAspect)
-      cropY1 = Math.round((sourceHeight - cropHeight) / 2)
-      cropY2 = cropY1 + cropHeight
-    }
-
-    const cropped = crop(image, cropX1, cropY1, cropX2, cropY2)
-    const resized = resize(
-      cropped,
-      targetWidth,
-      targetHeight,
-      SamplingFilter.Triangle
-    )
-
-    let outputBytes: Uint8Array
-    switch (outputFormat) {
-      case 'jpeg':
-        outputBytes = resized.get_bytes_jpeg(quality)
-        break
-      case 'png':
-        outputBytes = resized.get_bytes()
-        break
-      case 'webp':
-        outputBytes = resized.get_bytes_webp()
-        break
-      default:
-        outputBytes = resized.get_bytes_jpeg(quality)
-    }
-
-    cropped.free()
-    resized.free()
-
-    return {
-      bytes: outputBytes,
-      width: targetWidth,
-      height: targetHeight,
-      format: `image/${outputFormat}`,
-    }
-  } finally {
-    image.free()
-  }
-}
+import type { ProcessImageInput, ProcessImageOutput } from '../types/image.type'
+
+export async function processImage(input: ProcessImageInput): Promise<ProcessImageOutput> {
+  const {
+    imageBytes,
+    targetWidth,
+    targetHeight,
+    outputFormat = 'jpeg',
+    quality = 85,
+  } = input
+
+  // Dynamic import to avoid fs.createReadStream error in edge runtime
+  const { PhotonImage, resize, crop, SamplingFilter } = await import(
+    '@cf-wasm/photon/edge-light'
+  )
+
+  const image = PhotonImage.new_from_byteslice(imageBytes)
+
+  try {
+    const sourceWidth = image.get_width()
+    const sourceHeight = image.get_height()
+    const targetAspect = targetWidth / targetHeight
+    const sourceAspect = sourceWidth / sourceHeight
+
+    let cropX1 = 0
+    let cropY1 = 0
+    let cropX2 = sourceWidth
+    let cropY2 = sourceHeight
+
+    if (sourceAspect > targetAspect) {
+      const cropWidth = Math.round(sourceHeight * targetAspect)
+      cropX1 = Math.round((sourceWidth - cropWidth) / 2)
+      cropX2 = cropX1 + cropWidth
+    } else if (sourceAspect < targetAspect) {
+      const cropHeight = Math.round(sourceWidth / targetAspect)
+      cropY1 = Math.round((sourceHeight - cropHeight) / 2)
+      cropY2 = cropY1 + cropHeight
+    }
+
+    const cropped = crop(image, cropX1, cropY1, cropX2, cropY2)
+    const resized = resize(
+      cropped,
+      targetWidth,
+      targetHeight,
+      SamplingFilter.Triangle
+    )
+
+    let outputBytes: Uint8Array
+    switch (outputFormat) {
+      case 'jpeg':
+        outputBytes = resized.get_bytes_jpeg(quality)
+        break
+      case 'png':
+        outputBytes = resized.get_bytes()
+        break
+      case 'webp':
+        outputBytes = resized.get_bytes_webp()
+        break
+      default:
+        outputBytes = resized.get_bytes_jpeg(quality)
+    }
+
+    cropped.free()
+    resized.free()
+
+    return {
+      bytes: outputBytes,
+      width: targetWidth,
+      height: targetHeight,
+      format: `image/${outputFormat}`,
+    }
+  } finally {
+    image.free()
+  }
+}

package/src/modules/images/types/image.type.ts

@@ -1,54 +1,54 @@
-export interface ImageConfig {
-  width: number
-  height: number
-  aspectRatio: number
-  label?: string
-}
-
-export interface CropArea {
-  x: number
-  y: number
-  width: number
-  height: number
-  unit?: '%' | 'px'
-}
-
-export interface ProcessedImage {
-  base64: string
-  width: number
-  height: number
-  format: string
-}
-
-export interface CompressImageOptions {
-  maxSizeMB?: number
-  maxWidthOrHeight?: number
-}
-
-export interface ProcessImageInput {
-  imageBytes: Uint8Array
-  targetWidth: number
-  targetHeight: number
-  outputFormat?: 'jpeg' | 'png' | 'webp'
-  quality?: number
-}
-
-export interface ProcessImageOutput {
-  bytes: Uint8Array
-  width: number
-  height: number
-  format: string
-}
-
-export interface ProcessImageActionInput {
-  base64Image: string
-  targetWidth: number
-  targetHeight: number
-  cropArea?: CropArea
-}
-
-export interface ProcessImageActionOutput {
-  success: boolean
-  base64Image?: string
-  error?: string
-}
+export interface ImageConfig {
+  width: number
+  height: number
+  aspectRatio: number
+  label?: string
+}
+
+export interface CropArea {
+  x: number
+  y: number
+  width: number
+  height: number
+  unit?: '%' | 'px'
+}
+
+export interface ProcessedImage {
+  base64: string
+  width: number
+  height: number
+  format: string
+}
+
+export interface CompressImageOptions {
+  maxSizeMB?: number
+  maxWidthOrHeight?: number
+}
+
+export interface ProcessImageInput {
+  imageBytes: Uint8Array
+  targetWidth: number
+  targetHeight: number
+  outputFormat?: 'jpeg' | 'png' | 'webp'
+  quality?: number
+}
+
+export interface ProcessImageOutput {
+  bytes: Uint8Array
+  width: number
+  height: number
+  format: string
+}
+
+export interface ProcessImageActionInput {
+  base64Image: string
+  targetWidth: number
+  targetHeight: number
+  cropArea?: CropArea
+}
+
+export interface ProcessImageActionOutput {
+  success: boolean
+  base64Image?: string
+  error?: string
+}

package/src/modules/images/utils/base64.ts

@@ -1,26 +1,26 @@
-/**
- * Converts a base64 string to a File object
- */
-export function base64ToFile(base64: string, filename: string): File {
-  const arr = base64.split(',')
-  const mime = arr[0].match(/:(.*?);/)?.[1] || 'image/webp'
-  const bstr = atob(arr[1])
-  let n = bstr.length
-  const u8arr = new Uint8Array(n)
-  while (n--) {
-    u8arr[n] = bstr.charCodeAt(n)
-  }
-  return new File([u8arr], filename, { type: mime })
-}
-
-/**
- * Converts a File to a base64 string
- */
-export function fileToBase64(file: File): Promise<string> {
-  return new Promise((resolve, reject) => {
-    const reader = new FileReader()
-    reader.onload = () => resolve(reader.result as string)
-    reader.onerror = reject
-    reader.readAsDataURL(file)
-  })
-}
+/**
+ * Converts a base64 string to a File object
+ */
+export function base64ToFile(base64: string, filename: string): File {
+  const arr = base64.split(',')
+  const mime = arr[0].match(/:(.*?);/)?.[1] || 'image/webp'
+  const bstr = atob(arr[1])
+  let n = bstr.length
+  const u8arr = new Uint8Array(n)
+  while (n--) {
+    u8arr[n] = bstr.charCodeAt(n)
+  }
+  return new File([u8arr], filename, { type: mime })
+}
+
+/**
+ * Converts a File to a base64 string
+ */
+export function fileToBase64(file: File): Promise<string> {
+  return new Promise((resolve, reject) => {
+    const reader = new FileReader()
+    reader.onload = () => resolve(reader.result as string)
+    reader.onerror = reject
+    reader.readAsDataURL(file)
+  })
+}

package/src/modules/images/utils/compress-image.ts

@@ -1,20 +1,20 @@
-import imageCompression from 'browser-image-compression'
-import type { CompressImageOptions } from '../types/image.type'
-
-export async function compressImage(
-  file: File,
-  options: CompressImageOptions = {}
-): Promise<File> {
-  const { maxSizeMB = 1, maxWidthOrHeight = 1920 } = options
-
-  if (file.size <= maxSizeMB * 1024 * 1024) {
-    return file
-  }
-
-  return imageCompression(file, {
-    maxSizeMB,
-    maxWidthOrHeight,
-    useWebWorker: true,
-    fileType: file.type as 'image/jpeg' | 'image/png' | 'image/webp',
-  })
-}
+import imageCompression from 'browser-image-compression'
+import type { CompressImageOptions } from '../types/image.type'
+
+export async function compressImage(
+  file: File,
+  options: CompressImageOptions = {}
+): Promise<File> {
+  const { maxSizeMB = 1, maxWidthOrHeight = 1920 } = options
+
+  if (file.size <= maxSizeMB * 1024 * 1024) {
+    return file
+  }
+
+  return imageCompression(file, {
+    maxSizeMB,
+    maxWidthOrHeight,
+    useWebWorker: true,
+    fileType: file.type as 'image/jpeg' | 'image/png' | 'image/webp',
+  })
+}