npm-pkg-hook 1.12.4 → 1.12.7

package/src/hooks/useImageUploaderProduct/index.ts

@@ -1,292 +0,0 @@
-import { useRef, useState } from 'react'
-import { ORIENTATION_TO_ANGLE } from './helper'
-import { getCroppedImg, getRotatedImage } from './helper/canvasUtils'
-import { getOrientation } from './helper/getOrientation'
-
-function readFile(file: File): Promise<string> {
-    return new Promise((resolve) => {
-        const reader = new FileReader()
-        reader.addEventListener('load', () => resolve(reader.result as string), false)
-        reader.readAsDataURL(file)
-    })
-}
-
-export type SendNotificationFn = (params: {
-    description: string
-    title: string
-    backgroundColor: string
-}) => void
-
-interface UseImageUploaderOptions {
-    maxSizeMB?: number
-    minHeight?: number
-    minWidth?: number
-    validTypes?: string[]
-    sendNotification: SendNotificationFn
-}
-
-interface UseImageUploaderResult {
-    crop: { x: number, y: number }
-    croppedImage: string | null
-    error: string
-    image: File
-    imageSrc: string | null
-    inputRef: React.RefObject<HTMLInputElement>
-    loading: boolean
-    open: boolean
-    preview: string | null
-    formattedList: string
-    rotation: number
-    zoom: number
-    validTypes: string[]
-    handleClose: () => void
-    handleRemoveImage: () => void
-    onCropComplete: (croppedArea: any, croppedPixels: any) => void
-    onFileChange: (e: React.ChangeEvent<HTMLInputElement>) => Promise<void>
-    setCrop: React.Dispatch<React.SetStateAction<{ x: number, y: number }>>
-    setRotation: React.Dispatch<React.SetStateAction<number>>
-    setZoom: React.Dispatch<React.SetStateAction<number>>
-    handleDrop: (event: React.DragEvent<HTMLDivElement>) => Promise<void>
-    showCroppedImage: () => Promise<void>
-}
-
-/**
- * Hook for managing image selection, preview, validation and cropping
- * @param {UseImageUploaderOptions} options
- * @returns {UseImageUploaderResult}
- */
-export const useImageUploaderProduct = (
-    options?: UseImageUploaderOptions
-): UseImageUploaderResult => {
-    const {
-        validTypes = ['image/jpeg', 'image/jpg', 'image/png'],
-        maxSizeMB = 20,
-        minWidth = 300,
-        minHeight = 275,
-        sendNotification
-    } = options ?? {
-
-    }
-    const readableFormats = validTypes
-        .map((type) => type.split('/')[1].toUpperCase())
-
-    const formatter = new Intl.ListFormat('es', {
-        style: 'long',
-        type: 'conjunction'
-    })
-
-    const formattedList = formatter.format(readableFormats)
-
-    const [loading, setLoading] = useState(false)
-    const inputRef = useRef<HTMLInputElement>(null)
-    const [open, setOpen] = useState(false)
-    const [preview, setPreview] = useState<string | null>(null)
-    const [imageSrc, setImageSrc] = useState<string | null>(null)
-    const [croppedImage, setCroppedImage] = useState<string | null>(null)
-    const [crop, setCrop] = useState({ x: 0, y: 0 })
-    const [zoom, setZoom] = useState(1)
-    const [rotation, setRotation] = useState(0)
-    const [croppedAreaPixels, setCroppedAreaPixels] = useState(null)
-    const [error, setError] = useState('')
-    const [image, setImage] = useState<File | null>(null)
-
-
-    const onCropComplete = (_: any, croppedPixels: any) => {
-        setCroppedAreaPixels(croppedPixels)
-    }
-
-    const showCroppedImage = async () => {
-        if (!imageSrc || !croppedAreaPixels) return
-        try {
-            setLoading(true)
-            const base64Image = await getCroppedImg(imageSrc, croppedAreaPixels, rotation) as string
-
-            setCroppedImage(base64Image)
-            setPreview(base64Image)
-
-            // ✅ Convert base64 to blob and file
-            const blob = await (await fetch(base64Image)).blob()
-            const file = new File([blob], image?.name ?? 'cropped.jpeg', { type: blob.type })
-            setImage(file)
-            setLoading(false)
-        } catch (e) {
-            setLoading(false)
-            return sendNotification({
-                description: e ?? 'Ocurrió un error',
-                title: 'Error',
-                backgroundColor: 'error'
-            })
-        }
-    }
-
-    /**
-* Removes the selected image and resets relevant states
-*/
-    const handleRemoveImage = () => {
-        setImage(null)
-        setPreview(null)
-        setImageSrc(null)
-        setCroppedImage(null)
-        setZoom(1)
-        setCrop({ x: 0, y: 0 })
-        setRotation(0)
-        setError('')
-        if (inputRef.current) inputRef.current.value = ''
-    }
-
-    const onFileChange = async (e: React.ChangeEvent<HTMLInputElement>) => {
-        const file = e.target.files?.[0]
-        handleRemoveImage()
-        if (!file) return
-
-        if (!validTypes.includes(file.type)) {
-
-
-            const error = `Formato inválido. Solo se permiten: ${formattedList}.`
-            sendNotification({
-                description: error,
-                title: 'Error',
-                backgroundColor: 'error'
-            })
-            return setError(error)
-        }
-
-        if (file.size > maxSizeMB * 1024 * 1024) {
-            const error = `El archivo supera los ${maxSizeMB} MB.`
-            sendNotification({
-                description: error,
-                title: 'Error',
-                backgroundColor: 'error'
-            })
-            return setError(`El archivo supera los ${maxSizeMB} MB.`)
-        }
-
-        let imageDataUrl = await readFile(file)
-
-        try {
-            const orientation = await getOrientation(file, validTypes)
-            const rotation = ORIENTATION_TO_ANGLE[orientation]
-            if (rotation) {
-                imageDataUrl = await getRotatedImage(imageDataUrl, rotation) as string
-                setRotation(rotation)
-            }
-        } catch (e) {
-            return sendNotification({
-                description: 'Error desconocido',
-                title: 'Error',
-                backgroundColor: 'error'
-            })
-        }
-
-        const image = new Image()
-        image.src = imageDataUrl
-        image.onload = () => {
-            if (image.width < minWidth || image.height < minHeight) {
-                const error = `Resolución mínima: ${minWidth}x${minHeight}px.`
-                sendNotification({
-                    description: error,
-                    title: 'Error',
-                    backgroundColor: 'error'
-                })
-                setError(error)
-                return
-            }
-            setImageSrc(imageDataUrl)
-            setOpen(true)
-        }
-    }
-
-    const handleClose = () => {
-        setOpen(!open)
-    }
-
-    const handleDrop = async (event: React.DragEvent<HTMLDivElement>): Promise<void> => {
-        event.preventDefault()
-        handleRemoveImage()
-        const file = event.dataTransfer.files?.[0]
-        if (!file) return
-
-        if (!validTypes.includes(file.type)) {
-            const error = `Formato inválido. Solo se permiten: ${formattedList}.`
-            sendNotification({
-                description: error,
-                title: 'Error',
-                backgroundColor: 'error'
-            })
-            return setError(error)
-        }
-
-        if (file.size > maxSizeMB * 1024 * 1024) {
-            const error = `El archivo supera los ${maxSizeMB} MB.`
-            sendNotification({
-                description: error,
-                title: 'Error',
-                backgroundColor: 'error'
-            })
-            return setError(error)
-        }
-
-        let imageDataUrl = await readFile(file)
-
-        try {
-            const orientation = await getOrientation(file, validTypes)
-            const rotation = ORIENTATION_TO_ANGLE[orientation]
-            if (rotation) {
-                imageDataUrl = await getRotatedImage(imageDataUrl, rotation) as string
-                setRotation(rotation)
-            }
-        } catch (e) {
-            return sendNotification({
-                description: 'Error al procesar la orientación de la imagen',
-                title: 'Error',
-                backgroundColor: 'error'
-            })
-        }
-
-        const image = new Image()
-        image.src = imageDataUrl
-        image.onload = () => {
-            if (image.width < minWidth || image.height < minHeight) {
-                const error = `Resolución mínima: ${minWidth}x${minHeight}px.`
-                sendNotification({
-                    description: error,
-                    title: 'Error',
-                    backgroundColor: 'error'
-                })
-                setError(error)
-                return
-            }
-            setImageSrc(imageDataUrl)
-            setImage(file)
-            setOpen(true)
-        }
-    }
-
-
-
-
-    return {
-        inputRef,
-        open,
-        imageSrc,
-        preview,
-        croppedImage,
-        crop,
-        zoom,
-        image,
-        rotation,
-        error,
-        formattedList,
-        loading,
-        validTypes,
-        onCropComplete,
-        showCroppedImage,
-        handleRemoveImage,
-        handleDrop,
-        onFileChange,
-        handleClose,
-        setCrop,
-        setZoom,
-        setRotation,
-    }
-}

package/src/hooks/useImageWeight/index.js

@@ -1,51 +0,0 @@
-import { useEffect, useState } from 'react'
-
-export function useImageWeight (imageUrl) {
-  const [weight, setWeight] = useState(null)
-
-  useEffect(() => {
-    const image = new Image()
-    image.src = imageUrl
-
-    image.onload = () => {
-      const xhr = new XMLHttpRequest()
-      xhr.open('HEAD', imageUrl, true)
-      xhr.onreadystatechange = () => {
-        if (xhr.readyState === 4 && xhr.status === 200) {
-          const contentLength = xhr.getResponseHeader('Content-Length')
-          setWeight(contentLength)
-        }
-      }
-      xhr.send()
-    }
-  }, [imageUrl])
-
-  return weight
-}
-
-// I use
-// function MyComponent() {
-//     const imageUrl = 'https://example.com/image.jpg';
-//     const weight = useImageWeight(imageUrl);
-
-//     return (
-//       <div>
-//         <img src={imageUrl} alt="My Image" />
-//         {weight ? `Peso de imagen: ${weight} bytes` : 'Cargando...'}
-//       </div>
-//     );
-//   }
-
-// const weightInMB = weight / (1024 * 1024);
-
-// function MyComponent() {
-//     const imageUrl = 'https://example.com/image.jpg';
-//     const weight = useImageWeight(imageUrl);
-
-//     return (
-//       <div>
-//         <img src={imageUrl} alt="My Image" />
-//         {weight ? `Peso de imagen: ${(weight / (1024 * 1024)).toFixed(2)} MB` : 'Cargando...'}
-//       </div>
-//     );
-//   }

package/src/hooks/useImagesStore/index.js

@@ -1,225 +0,0 @@
-import { useMutation } from '@apollo/client'
-import {
-  useRef,
-  useState
-} from 'react'
-import {
-  CREATE_BANNER_STORE,
-  CREATE_LOGO,
-  DELETE_ONE_BANNER_STORE,
-  DELETE_ONE_LOGO_STORE,
-  GET_ONE_BANNER_STORE
-} from '../useProductsFood/queriesStore'
-import { GET_ONE_STORE } from '../useStore/queries'
-import { color } from './utils'
-export * from './queries'
-
-export const useImageStore = ({ idStore, sendNotification = () => { } } = {}) => {
-  // STATES
-  const fileInputRef = useRef(null)
-  const initialState = { alt: '/images/DEFAULTBANNER.png', src: '/images/DEFAULTBANNER.png' }
-  const initialStateLogo = { altLogo: '/images/DEFAULTLOGO.png', srcLogo: '/images/DEFAULTLOGO.png' }
-  const [{ altLogo, srcLogo }, setPreviewImgLogo] = useState(initialStateLogo)
-  const [{ alt, src }, setPreviewImg] = useState(initialState)
-  const fileInputRefLogo = useRef(null)
-
-  // HOOKS
-  const [registerBanner] = useMutation(CREATE_BANNER_STORE, {
-    onCompleted: (data) => {
-      const { registerBanner } = data || {}
-      const { message = '', success = false } = registerBanner || {}
-      if (!success) {
-        setPreviewImg(initialState)
-        return
-      }
-      sendNotification({
-        title: success ? 'Banner subido' : 'Error al subir banner',
-        description: message,
-        backgroundColor: success ? color.success : color.error
-      })
-    }
-
-  })
-  const [registerLogo] = useMutation(CREATE_LOGO, {
-    onCompleted: (data) => {
-      const { registerLogo } = data || {}
-      const { message = '', success = false } = registerLogo ?? {
-        message: 'Error al subir logo',
-        success: false,
-        data: null
-      }
-      if (!success) {
-        setPreviewImgLogo(initialStateLogo)
-        return
-      }
-
-      sendNotification({
-        title: success ? 'Logo creado con exito' : color.error,
-        description: message,
-        backgroundColor: success ? color.success : color.error
-      })
-    }
-  })
-  const [deleteOneBanner] = useMutation(DELETE_ONE_BANNER_STORE, {
-    onCompleted: (data) => {
-      const { deleteOneBanner } = data || {}
-      const { message = '', success = false } = deleteOneBanner || {}
-      return sendNotification({
-        title: success ? 'Logo subido' : color.error,
-        description: message,
-        backgroundColor: success ? color.success : color.error
-      })
-    }
-  })
-  const [deleteALogoStore] = useMutation(DELETE_ONE_LOGO_STORE, {
-    onCompleted: (data) => {
-      const { deleteALogoStore } = data || {}
-      const { message = '', success = false } = deleteALogoStore || {}
-      sendNotification({
-        title: success ? 'Logo Eliminado' : 'Error al eliminar el logo',
-        description: message,
-        backgroundColor: success ? color.success : color.error
-      })
-      setPreviewImgLogo(initialStateLogo)
-    },
-    update (cache) {
-      cache.modify({
-        fields: {
-          getStore (dataOld = {}) {
-            return cache.writeQuery({ query: GET_ONE_STORE, data: dataOld })
-          }
-        }
-      })
-    }
-  })
-  //   HANDLESS
-  const handleDeleteLogo = () => {
-    return deleteALogoStore({
-      variables: {
-        Image: ''
-      }
-    })
-  }
-
-  const handleUpdateBanner = event => {
-    try {
-      const { files } = event.target
-      setPreviewImg(
-        files.length
-          ? {
-              src: URL.createObjectURL(files[0]),
-              alt: files[0].name
-            }
-          : initialState
-      )
-      registerBanner({
-        variables: {
-          input: {
-            bnImage: files[0],
-            idStore
-          }
-        },
-        update (cache) {
-          cache.modify({
-            fields: {
-              getStore (dataOld = {}) {
-                return cache.writeQuery({ query: GET_ONE_STORE, data: dataOld })
-              }
-            }
-          })
-        }
-      })
-    } catch {
-      setPreviewImg(initialState)
-    }
-  }
-  /**
-   * Handle store logo upload and update cache Image field
-   * @param {React.ChangeEvent<HTMLInputElement>} event - File input change event
-   * @returns {void}
-   */
-  const handleInputChangeLogo = async (event) => {
-    const { files } = event.target
-
-    if (!files || files.length === 0) {
-      sendNotification({
-        title: 'Debes seleccionar un archivo',
-        description: color.error,
-        backgroundColor: color.error
-      })
-      return
-    }
-
-    const file = files[0]
-
-    const result = await registerLogo({
-      variables: { logo: file, idStore }
-    })
-    const {
-      data: {
-        registerLogo: {
-          success = false,
-          data: url = ''
-        } = {}
-      } = {}
-    } = result ?? {
-      data: '',
-      success: false,
-      message: ''
-    }
-    if (!success) {
-      setPreviewImgLogo(initialStateLogo)
-      return
-    }
-    setPreviewImgLogo({
-      srcLogo: URL.createObjectURL(file),
-      altLogo: url
-    })
-  }
-
-  const HandleDeleteBanner = async () => {
-    setPreviewImg(initialStateLogo)
-    deleteOneBanner({
-      variables: {
-        idStore
-      },
-      update (cache) {
-        cache.modify({
-          fields: {
-            getOneBanners (dataOld = []) {
-              return cache.writeQuery({ query: GET_ONE_BANNER_STORE, data: dataOld })
-            }
-          }
-        })
-      }
-    }).then(() => {
-      setPreviewImg(initialState)
-    })
-  }
-  const onTargetClickLogo = e => {
-    e.preventDefault()
-    fileInputRefLogo.current.click()
-  }
-  const onTargetClick = e => {
-    e.preventDefault()
-    fileInputRef.current.click()
-  }
-
-  return {
-    fileInputRefLogo,
-    src,
-    alt,
-    initialState,
-    srcLogo,
-    altLogo,
-    fileInputRef,
-    handleDeleteLogo,
-    setPreviewImgLogo,
-    setPreviewImg,
-    onTargetClick,
-    onTargetClickLogo,
-    HandleDeleteBanner,
-    handleInputChangeLogo,
-    handleUpdateBanner
-  }
-}