@greatapps/common 1.1.447 → 1.1.449

package/src/components/widgets/ImageUpload/ImageUpload.tsx

@@ -0,0 +1,125 @@
+'use client'
+
+import { useRef } from 'react'
+import { useImageUpload } from '../../../modules/images/hooks/use-image-upload.hook'
+import { ImageCropModal } from './ImageCropModal'
+import { Button } from '../../ui/buttons/Button'
+import type { ImageConfig } from '../../../modules/images/types/image.type'
+
+interface ImageUploadProps {
+  config: ImageConfig
+  value?: string
+  onChange?: (value: string) => void
+  onError?: (error: string) => void
+  className?: string
+}
+
+export function ImageUpload({
+  config,
+  value,
+  onChange,
+  onError,
+  className,
+}: ImageUploadProps) {
+  const inputRef = useRef<HTMLInputElement>(null)
+
+  const {
+    originalImage,
+    croppedPreview,
+    showCropModal,
+    isProcessing,
+    handleFileSelect,
+    handleCropConfirm,
+    setShowCropModal,
+    clear,
+  } = useImageUpload({
+    config,
+    onSuccess: (base64) => onChange?.(base64),
+    onError,
+  })
+
+  const displayImage = croppedPreview || value
+
+  return (
+    <div className={className}>
+      <input
+        ref={inputRef}
+        type="file"
+        accept="image/png,image/jpeg,image/webp,image/gif"
+        className="hidden"
+        onChange={(e) => {
+          const file = e.target.files?.[0]
+          if (file) handleFileSelect(file)
+          e.target.value = ''
+        }}
+      />
+
+      {displayImage ? (
+        <div className="relative">
+          <div
+            className="overflow-hidden rounded-lg border border-gray-200"
+            style={{ aspectRatio: config.aspectRatio }}
+          >
+            <img
+              src={displayImage}
+              alt="Preview"
+              className="w-full h-full object-cover"
+            />
+          </div>
+
+          <div className="flex gap-2 mt-2">
+            <Button
+              variant="secondary"
+              size="sm"
+              onClick={() => inputRef.current?.click()}
+              disabled={isProcessing}
+            >
+              Trocar
+            </Button>
+            <Button
+              variant="secondary"
+              size="sm"
+              onClick={() => {
+                clear()
+                onChange?.('')
+              }}
+              disabled={isProcessing}
+            >
+              Remover
+            </Button>
+          </div>
+
+          {isProcessing && (
+            <p className="paragraph-small-regular text-gray-500 mt-2">
+              Processando...
+            </p>
+          )}
+        </div>
+      ) : (
+        <button
+          type="button"
+          onClick={() => inputRef.current?.click()}
+          className="w-full border-2 border-dashed border-gray-300 rounded-lg p-8 text-center hover:border-gray-400 transition-colors"
+          style={{ aspectRatio: config.aspectRatio }}
+        >
+          <p className="paragraph-medium-regular text-gray-600">
+            Clique para enviar imagem
+          </p>
+          <p className="paragraph-small-regular text-gray-400 mt-1">
+            Tamanho recomendado: {config.width} x {config.height} pixels
+          </p>
+        </button>
+      )}
+
+      {originalImage && (
+        <ImageCropModal
+          open={showCropModal}
+          onOpenChange={setShowCropModal}
+          imageSrc={originalImage}
+          aspectRatio={config.aspectRatio}
+          onConfirm={handleCropConfirm}
+        />
+      )}
+    </div>
+  )
+}

package/src/components/widgets/ImageUpload/index.ts

@@ -0,0 +1,2 @@
+export { ImageUpload } from './ImageUpload'
+export { ImageCropModal } from './ImageCropModal'

package/src/index.ts

@@ -107,7 +107,7 @@ export type {
 
 // Utils
 export { cn } from "./infra/utils/clsx";
-export { formatShortDate } from "./infra/utils/date";
+export { formatShortDate, formatDateTime } from "./infra/utils/date";
 export { buildQueryParams } from "./infra/utils/params";
 export { parseSchema, parseResult } from "./infra/utils/parser";
 export { withAction } from "./utils/withAction";
@@ -396,3 +396,26 @@ export {
   NOTIFICATION_TYPES,
   LANGUAGE_OPTIONS,
 } from "./components/account/constants";
+
+// Image Upload
+export { ImageUpload, ImageCropModal } from "./components/widgets/ImageUpload";
+export { useImageUpload } from "./modules/images/hooks/use-image-upload.hook";
+export {
+  ACCEPTED_IMAGE_FORMATS,
+  MAX_FILE_SIZE_MB,
+  TARGET_FILE_SIZE_MB,
+} from "./modules/images/constants/image.constants";
+export type {
+  ImageConfig,
+  CropArea,
+  ProcessedImage,
+  CompressImageOptions,
+} from "./modules/images/types/image.type";
+export { compressImage } from "./modules/images/utils/compress-image";
+export { cropImageToCanvas } from "./modules/images/utils/crop-image";
+export {
+  validateImage,
+  validateImageFormat,
+  validateImageSize,
+  getImageDimensions,
+} from "./modules/images/utils/validate-image";

package/src/infra/utils/date.ts

@@ -5,3 +5,14 @@ export function formatShortDate(date: Date | string | null | undefined): string
   const month = String(d.getMonth() + 1).padStart(2, '0');
   return `${day}/${month}`;
 }
+
+export function formatDateTime(date: Date | string | null | undefined): string | null {
+  if (!date) return null;
+  return new Date(date).toLocaleString('pt-BR', {
+    day: '2-digit',
+    month: '2-digit',
+    year: 'numeric',
+    hour: '2-digit',
+    minute: '2-digit',
+  });
+}

package/src/modules/images/actions/process-image.action.ts

@@ -0,0 +1,38 @@
+'use server'
+
+import { processImage } from '../services/image-processing.service'
+import type {
+  ProcessImageActionInput,
+  ProcessImageActionOutput,
+} from '../types/image.type'
+
+export async function processImageAction(
+  input: ProcessImageActionInput
+): Promise<ProcessImageActionOutput> {
+  try {
+    const base64Data = input.base64Image.replace(/^data:image\/\w+;base64,/, '')
+    const binaryString = atob(base64Data)
+    const bytes = new Uint8Array(binaryString.length)
+    for (let i = 0; i < binaryString.length; i++) {
+      bytes[i] = binaryString.charCodeAt(i)
+    }
+
+    const result = processImage({
+      imageBytes: bytes,
+      targetWidth: input.targetWidth,
+      targetHeight: input.targetHeight,
+    })
+
+    const base64Output = btoa(String.fromCharCode(...result.bytes))
+
+    return {
+      success: true,
+      base64Image: `data:${result.format};base64,${base64Output}`,
+    }
+  } catch (error) {
+    return {
+      success: false,
+      error: error instanceof Error ? error.message : 'Erro ao processar imagem',
+    }
+  }
+}

package/src/modules/images/constants/image.constants.ts

@@ -0,0 +1,9 @@
+export const ACCEPTED_IMAGE_FORMATS = [
+  'image/png',
+  'image/jpeg',
+  'image/webp',
+  'image/gif',
+] as const
+
+export const MAX_FILE_SIZE_MB = 10
+export const TARGET_FILE_SIZE_MB = 1

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

@@ -0,0 +1,111 @@
+'use client'
+
+import { useState, useCallback } from 'react'
+import { useMutation } from '@tanstack/react-query'
+import type { Crop } from 'react-image-crop'
+import { compressImage } from '../utils/compress-image'
+import { cropImageToCanvas } from '../utils/crop-image'
+import { validateImage } from '../utils/validate-image'
+import { processImageAction } from '../actions/process-image.action'
+import type { ImageConfig } from '../types/image.type'
+
+export interface UseImageUploadOptions {
+  config: ImageConfig
+  onSuccess?: (base64Image: string) => void
+  onError?: (error: string) => void
+}
+
+export function useImageUpload(options: UseImageUploadOptions) {
+  const { config, onSuccess, onError } = options
+
+  const [originalImage, setOriginalImage] = useState<string | null>(null)
+  const [croppedPreview, setCroppedPreview] = useState<string | null>(null)
+  const [showCropModal, setShowCropModal] = useState(false)
+
+  const processMutation = useMutation({
+    mutationFn: processImageAction,
+    onSuccess: (result) => {
+      if (result.success && result.base64Image) {
+        setCroppedPreview(result.base64Image)
+        onSuccess?.(result.base64Image)
+      } else {
+        onError?.(result.error || 'Erro desconhecido')
+      }
+    },
+    onError: (error) => {
+      onError?.(error instanceof Error ? error.message : 'Erro ao processar')
+    },
+  })
+
+  const handleFileSelect = useCallback(
+    async (file: File) => {
+      const validation = validateImage(file)
+      if (!validation.valid) {
+        onError?.(validation.error || 'Arquivo inválido')
+        return
+      }
+
+      try {
+        const compressed = await compressImage(file)
+        const reader = new FileReader()
+        reader.onload = (e) => {
+          setOriginalImage(e.target?.result as string)
+          setShowCropModal(true)
+        }
+        reader.readAsDataURL(compressed)
+      } catch {
+        onError?.('Erro ao processar imagem')
+      }
+    },
+    [onError]
+  )
+
+  const handleCropConfirm = useCallback(
+    async (imageElement: HTMLImageElement, cropArea: Crop) => {
+      try {
+        const croppedBase64 = await cropImageToCanvas(
+          imageElement,
+          cropArea,
+          config.width,
+          config.height
+        )
+
+        setCroppedPreview(croppedBase64)
+        setShowCropModal(false)
+
+        processMutation.mutate({
+          base64Image: croppedBase64,
+          targetWidth: config.width,
+          targetHeight: config.height,
+          cropArea: {
+            x: cropArea.x,
+            y: cropArea.y,
+            width: cropArea.width,
+            height: cropArea.height,
+            unit: cropArea.unit,
+          },
+        })
+      } catch {
+        onError?.('Erro ao aplicar crop')
+      }
+    },
+    [config, processMutation, onError]
+  )
+
+  const clear = useCallback(() => {
+    setOriginalImage(null)
+    setCroppedPreview(null)
+  }, [])
+
+  return {
+    originalImage,
+    croppedPreview,
+    showCropModal,
+    config,
+    isProcessing: processMutation.isPending,
+    handleFileSelect,
+    handleCropConfirm,
+    setShowCropModal,
+    clear,
+  }
+}

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

@@ -0,0 +1,76 @@
+import {
+  PhotonImage,
+  resize,
+  crop,
+  SamplingFilter,
+} from '@cf-wasm/photon/edge-light'
+import type { ProcessImageInput, ProcessImageOutput } from '../types/image.type'
+
+export function processImage(input: ProcessImageInput): ProcessImageOutput {
+  const {
+    imageBytes,
+    targetWidth,
+    targetHeight,
+    outputFormat = 'jpeg',
+    quality = 85,
+  } = input
+
+  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

@@ -0,0 +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
+}

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

@@ -0,0 +1,21 @@
+import imageCompression from 'browser-image-compression'
+import type { CompressImageOptions } from '../types/image.type'
+import { TARGET_FILE_SIZE_MB } from '../constants/image.constants'
+
+export async function compressImage(
+  file: File,
+  options: CompressImageOptions = {}
+): Promise<File> {
+  const { maxSizeMB = TARGET_FILE_SIZE_MB, 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',
+  })
+}

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

@@ -0,0 +1,41 @@
+import type { Crop } from 'react-image-crop'
+
+export async function cropImageToCanvas(
+  image: HTMLImageElement,
+  crop: Crop,
+  targetWidth: number,
+  targetHeight: number
+): Promise<string> {
+  const canvas = document.createElement('canvas')
+  const ctx = canvas.getContext('2d')
+
+  if (!ctx) throw new Error('Canvas não suportado')
+
+  const pixelCrop = {
+    x: crop.unit === '%' ? (crop.x / 100) * image.naturalWidth : crop.x,
+    y: crop.unit === '%' ? (crop.y / 100) * image.naturalHeight : crop.y,
+    width:
+      crop.unit === '%' ? (crop.width / 100) * image.naturalWidth : crop.width,
+    height:
+      crop.unit === '%'
+        ? (crop.height / 100) * image.naturalHeight
+        : crop.height,
+  }
+
+  canvas.width = targetWidth
+  canvas.height = targetHeight
+
+  ctx.drawImage(
+    image,
+    pixelCrop.x,
+    pixelCrop.y,
+    pixelCrop.width,
+    pixelCrop.height,
+    0,
+    0,
+    targetWidth,
+    targetHeight
+  )
+
+  return canvas.toDataURL('image/jpeg', 0.9)
+}

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

@@ -0,0 +1,59 @@
+import {
+  ACCEPTED_IMAGE_FORMATS,
+  MAX_FILE_SIZE_MB,
+} from '../constants/image.constants'
+
+export interface ImageValidationResult {
+  valid: boolean
+  error?: string
+}
+
+export function validateImageFormat(file: File): ImageValidationResult {
+  if (!ACCEPTED_IMAGE_FORMATS.includes(file.type as (typeof ACCEPTED_IMAGE_FORMATS)[number])) {
+    return {
+      valid: false,
+      error: 'Formato não suportado. Use PNG, JPEG ou WebP.',
+    }
+  }
+  return { valid: true }
+}
+
+export function validateImageSize(
+  file: File,
+  maxSizeMB: number = MAX_FILE_SIZE_MB
+): ImageValidationResult {
+  if (file.size > maxSizeMB * 1024 * 1024) {
+    return {
+      valid: false,
+      error: `Arquivo muito grande. Máximo ${maxSizeMB}MB.`,
+    }
+  }
+  return { valid: true }
+}
+
+export function validateImage(file: File): ImageValidationResult {
+  const formatValidation = validateImageFormat(file)
+  if (!formatValidation.valid) return formatValidation
+
+  const sizeValidation = validateImageSize(file)
+  if (!sizeValidation.valid) return sizeValidation
+
+  return { valid: true }
+}
+
+export async function getImageDimensions(
+  file: File
+): Promise<{ width: number; height: number }> {
+  return new Promise((resolve, reject) => {
+    const img = new Image()
+    img.onload = () => {
+      resolve({ width: img.naturalWidth, height: img.naturalHeight })
+      URL.revokeObjectURL(img.src)
+    }
+    img.onerror = () => {
+      reject(new Error('Falha ao carregar imagem'))
+      URL.revokeObjectURL(img.src)
+    }
+    img.src = URL.createObjectURL(file)
+  })
+}