@greatapps/common 1.1.517 → 1.1.518

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

@@ -1,254 +1,254 @@
-'use client'
-
-import { useRef, useState } from 'react'
-import ReactCrop, {
-  type Crop,
-  centerCrop,
-  makeAspectCrop,
-} from 'react-image-crop'
-import 'react-image-crop/dist/ReactCrop.css'
-import {
-  Dialog,
-  DialogContent,
-  DialogFooter,
-  DialogHeader,
-  DialogTitle,
-} from '../../ui/overlay/Dialog'
-import { Button } from '../../ui/buttons/Button'
-
-// CSS customizado para grid pontilhado fino e círculo
-const baseCropStyles = `
-  .custom-crop-area .ReactCrop__crop-selection {
-    border: 2px solid white !important;
-    box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.5) !important;
-  }
-
-  /* Grid de 9 quadrados - linhas pontilhadas finas */
-  .custom-crop-area .ReactCrop__crop-selection .crop-grid {
-    position: absolute;
-    inset: 0;
-    pointer-events: none;
-  }
-
-  .custom-crop-area .ReactCrop__crop-selection .crop-grid-line {
-    position: absolute;
-    background: repeating-linear-gradient(
-      to right,
-      rgba(255, 255, 255, 0.5) 0,
-      rgba(255, 255, 255, 0.5) 4px,
-      transparent 4px,
-      transparent 8px
-    );
-  }
-
-  .custom-crop-area .ReactCrop__crop-selection .crop-grid-line.horizontal {
-    left: 0;
-    right: 0;
-    height: 1px;
-  }
-
-  .custom-crop-area .ReactCrop__crop-selection .crop-grid-line.vertical {
-    top: 0;
-    bottom: 0;
-    width: 1px;
-    background: repeating-linear-gradient(
-      to bottom,
-      rgba(255, 255, 255, 0.5) 0,
-      rgba(255, 255, 255, 0.5) 4px,
-      transparent 4px,
-      transparent 8px
-    );
-  }
-
-  .custom-crop-area .ReactCrop__crop-selection .crop-grid-line.h1 { top: 33.33%; }
-  .custom-crop-area .ReactCrop__crop-selection .crop-grid-line.h2 { top: 66.66%; }
-  .custom-crop-area .ReactCrop__crop-selection .crop-grid-line.v1 { left: 33.33%; }
-  .custom-crop-area .ReactCrop__crop-selection .crop-grid-line.v2 { left: 66.66%; }
-
-  /* Círculo inscrito */
-  .custom-crop-area.with-circle .ReactCrop__crop-selection .crop-circle {
-    position: absolute;
-    inset: 0;
-    border: 1px dashed rgba(255, 255, 255, 0.6);
-    border-radius: 50%;
-    pointer-events: none;
-  }
-
-  /* Bolinhas centrais nas bordas */
-  .custom-crop-area .ReactCrop__crop-selection .crop-handle {
-    position: absolute;
-    width: 10px;
-    height: 10px;
-    background: white;
-    border-radius: 50%;
-    pointer-events: none;
-    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
-  }
-
-  .custom-crop-area .ReactCrop__crop-selection .crop-handle.top {
-    top: -5px;
-    left: 50%;
-    transform: translateX(-50%);
-  }
-
-  .custom-crop-area .ReactCrop__crop-selection .crop-handle.bottom {
-    bottom: -5px;
-    left: 50%;
-    transform: translateX(-50%);
-  }
-
-  .custom-crop-area .ReactCrop__crop-selection .crop-handle.left {
-    left: -5px;
-    top: 50%;
-    transform: translateY(-50%);
-  }
-
-  .custom-crop-area .ReactCrop__crop-selection .crop-handle.right {
-    right: -5px;
-    top: 50%;
-    transform: translateY(-50%);
-  }
-`
-
-interface ImageCropModalProps {
-  open: boolean
-  onOpenChange: (open: boolean) => void
-  imageSrc: string
-  aspectRatio: number
-  onConfirm: (image: HTMLImageElement, crop: Crop) => void
-  onCancel?: () => void
-  onImageLoad?: (naturalWidth: number, naturalHeight: number) => void
-  showCircleGuide?: boolean
-  minWidth?: number
-  minHeight?: number
-}
-
-export function ImageCropModal({
-  open,
-  onOpenChange,
-  imageSrc,
-  aspectRatio,
-  onConfirm,
-  onCancel,
-  onImageLoad: onImageLoadCallback,
-  showCircleGuide,
-  minWidth,
-  minHeight,
-}: ImageCropModalProps) {
-  const imgRef = useRef<HTMLImageElement>(null)
-  const [crop, setCrop] = useState<Crop>()
-  const [imageSize, setImageSize] = useState({ width: 0, height: 0 })
-
-  const onImageLoad = (e: React.SyntheticEvent<HTMLImageElement>) => {
-    const { naturalWidth, naturalHeight } = e.currentTarget
-    setImageSize({ width: naturalWidth, height: naturalHeight })
-
-    // Notifica o hook para verificar dimensões mínimas
-    onImageLoadCallback?.(naturalWidth, naturalHeight)
-
-    const initialCrop = centerCrop(
-      makeAspectCrop(
-        { unit: '%', width: 90 },
-        aspectRatio,
-        naturalWidth,
-        naturalHeight
-      ),
-      naturalWidth,
-      naturalHeight
-    )
-
-    setCrop(initialCrop)
-  }
-
-  // Calcula tamanho mínimo em porcentagem baseado nas dimensões mínimas em pixels
-  const minCropWidth = minWidth && imageSize.width > 0
-    ? Math.min((minWidth / imageSize.width) * 100, 100)
-    : undefined
-  const minCropHeight = minHeight && imageSize.height > 0
-    ? Math.min((minHeight / imageSize.height) * 100, 100)
-    : undefined
-
-  const handleConfirm = () => {
-    if (imgRef.current && crop) {
-      onConfirm(imgRef.current, crop)
-    }
-  }
-
-  const handleCancel = () => {
-    onCancel?.()
-    onOpenChange(false)
-  }
-
-  // Determina se deve mostrar círculo (aspect ratio 1:1 por padrão)
-  const shouldShowCircle = showCircleGuide ?? aspectRatio === 1
-
-  // Renderiza grid, círculo e bolinhas dentro da área de crop
-  const renderSelectionAddon = () => (
-    <>
-      {/* Grid de 9 quadrados com linhas pontilhadas */}
-      <div className="crop-grid">
-        <div className="crop-grid-line horizontal h1" />
-        <div className="crop-grid-line horizontal h2" />
-        <div className="crop-grid-line vertical v1" />
-        <div className="crop-grid-line vertical v2" />
-      </div>
-      {/* Círculo inscrito */}
-      {shouldShowCircle && <div className="crop-circle" />}
-      {/* Bolinhas centrais nas bordas */}
-      <div className="crop-handle top" />
-      <div className="crop-handle bottom" />
-      <div className="crop-handle left" />
-      <div className="crop-handle right" />
-    </>
-  )
-
-  return (
-    <Dialog open={open} onOpenChange={onOpenChange}>
-      <style>{baseCropStyles}</style>
-      <DialogContent
-        className="w-full md:w-[650px]! lg:w-[650px]! max-w-[650px]! max-[650px]:w-[calc(100%-32px)] p-0 gap-0 z-[1003]!"
-        overlayClassName="z-[1002]!"
-      >
-        <DialogHeader className="p-5">
-          <DialogTitle className="text-center text-[16px]!">
-            Ajustar imagem
-          </DialogTitle>
-        </DialogHeader>
-
-        <div className="flex flex-col gap-4 px-5 pb-5">
-          <div className="flex justify-center overflow-hidden rounded-lg">
-            <ReactCrop
-              crop={crop}
-              onChange={(c) => setCrop(c)}
-              aspect={aspectRatio}
-              className={`max-h-[50vh] custom-crop-area ${shouldShowCircle ? 'with-circle' : ''}`}
-              keepSelection
-              minWidth={minCropWidth}
-              minHeight={minCropHeight}
-              renderSelectionAddon={renderSelectionAddon}
-            >
-              <img
-                ref={imgRef}
-                src={imageSrc}
-                alt="Crop"
-                onLoad={onImageLoad}
-                className="max-h-[50vh] object-contain"
-              />
-            </ReactCrop>
-          </div>
-
-          <p className="paragraph-small-regular text-zinc-500 text-center">
-            Arraste para ajustar a área de corte
-          </p>
-        </div>
-
-        <DialogFooter className="flex-row! items-center justify-start! gap-3 p-5 border-t border-zinc-200">
-          <Button onClick={handleConfirm}>Confirmar</Button>
-          <Button variant="secondary" onClick={handleCancel}>
-            Cancelar
-          </Button>
-        </DialogFooter>
-      </DialogContent>
-    </Dialog>
-  )
-}
+'use client'
+
+import { useRef, useState } from 'react'
+import ReactCrop, {
+  type Crop,
+  centerCrop,
+  makeAspectCrop,
+} from 'react-image-crop'
+import 'react-image-crop/dist/ReactCrop.css'
+import {
+  Dialog,
+  DialogContent,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from '../../ui/overlay/Dialog'
+import { Button } from '../../ui/buttons/Button'
+
+// CSS customizado para grid pontilhado fino e círculo
+const baseCropStyles = `
+  .custom-crop-area .ReactCrop__crop-selection {
+    border: 2px solid white !important;
+    box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.5) !important;
+  }
+
+  /* Grid de 9 quadrados - linhas pontilhadas finas */
+  .custom-crop-area .ReactCrop__crop-selection .crop-grid {
+    position: absolute;
+    inset: 0;
+    pointer-events: none;
+  }
+
+  .custom-crop-area .ReactCrop__crop-selection .crop-grid-line {
+    position: absolute;
+    background: repeating-linear-gradient(
+      to right,
+      rgba(255, 255, 255, 0.5) 0,
+      rgba(255, 255, 255, 0.5) 4px,
+      transparent 4px,
+      transparent 8px
+    );
+  }
+
+  .custom-crop-area .ReactCrop__crop-selection .crop-grid-line.horizontal {
+    left: 0;
+    right: 0;
+    height: 1px;
+  }
+
+  .custom-crop-area .ReactCrop__crop-selection .crop-grid-line.vertical {
+    top: 0;
+    bottom: 0;
+    width: 1px;
+    background: repeating-linear-gradient(
+      to bottom,
+      rgba(255, 255, 255, 0.5) 0,
+      rgba(255, 255, 255, 0.5) 4px,
+      transparent 4px,
+      transparent 8px
+    );
+  }
+
+  .custom-crop-area .ReactCrop__crop-selection .crop-grid-line.h1 { top: 33.33%; }
+  .custom-crop-area .ReactCrop__crop-selection .crop-grid-line.h2 { top: 66.66%; }
+  .custom-crop-area .ReactCrop__crop-selection .crop-grid-line.v1 { left: 33.33%; }
+  .custom-crop-area .ReactCrop__crop-selection .crop-grid-line.v2 { left: 66.66%; }
+
+  /* Círculo inscrito */
+  .custom-crop-area.with-circle .ReactCrop__crop-selection .crop-circle {
+    position: absolute;
+    inset: 0;
+    border: 1px dashed rgba(255, 255, 255, 0.6);
+    border-radius: 50%;
+    pointer-events: none;
+  }
+
+  /* Bolinhas centrais nas bordas */
+  .custom-crop-area .ReactCrop__crop-selection .crop-handle {
+    position: absolute;
+    width: 10px;
+    height: 10px;
+    background: white;
+    border-radius: 50%;
+    pointer-events: none;
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
+  }
+
+  .custom-crop-area .ReactCrop__crop-selection .crop-handle.top {
+    top: -5px;
+    left: 50%;
+    transform: translateX(-50%);
+  }
+
+  .custom-crop-area .ReactCrop__crop-selection .crop-handle.bottom {
+    bottom: -5px;
+    left: 50%;
+    transform: translateX(-50%);
+  }
+
+  .custom-crop-area .ReactCrop__crop-selection .crop-handle.left {
+    left: -5px;
+    top: 50%;
+    transform: translateY(-50%);
+  }
+
+  .custom-crop-area .ReactCrop__crop-selection .crop-handle.right {
+    right: -5px;
+    top: 50%;
+    transform: translateY(-50%);
+  }
+`
+
+interface ImageCropModalProps {
+  open: boolean
+  onOpenChange: (open: boolean) => void
+  imageSrc: string
+  aspectRatio: number
+  onConfirm: (image: HTMLImageElement, crop: Crop) => void
+  onCancel?: () => void
+  onImageLoad?: (naturalWidth: number, naturalHeight: number) => void
+  showCircleGuide?: boolean
+  minWidth?: number
+  minHeight?: number
+}
+
+export function ImageCropModal({
+  open,
+  onOpenChange,
+  imageSrc,
+  aspectRatio,
+  onConfirm,
+  onCancel,
+  onImageLoad: onImageLoadCallback,
+  showCircleGuide,
+  minWidth,
+  minHeight,
+}: ImageCropModalProps) {
+  const imgRef = useRef<HTMLImageElement>(null)
+  const [crop, setCrop] = useState<Crop>()
+  const [imageSize, setImageSize] = useState({ width: 0, height: 0 })
+
+  const onImageLoad = (e: React.SyntheticEvent<HTMLImageElement>) => {
+    const { naturalWidth, naturalHeight } = e.currentTarget
+    setImageSize({ width: naturalWidth, height: naturalHeight })
+
+    // Notifica o hook para verificar dimensões mínimas
+    onImageLoadCallback?.(naturalWidth, naturalHeight)
+
+    const initialCrop = centerCrop(
+      makeAspectCrop(
+        { unit: '%', width: 90 },
+        aspectRatio,
+        naturalWidth,
+        naturalHeight
+      ),
+      naturalWidth,
+      naturalHeight
+    )
+
+    setCrop(initialCrop)
+  }
+
+  // Calcula tamanho mínimo em porcentagem baseado nas dimensões mínimas em pixels
+  const minCropWidth = minWidth && imageSize.width > 0
+    ? Math.min((minWidth / imageSize.width) * 100, 100)
+    : undefined
+  const minCropHeight = minHeight && imageSize.height > 0
+    ? Math.min((minHeight / imageSize.height) * 100, 100)
+    : undefined
+
+  const handleConfirm = () => {
+    if (imgRef.current && crop) {
+      onConfirm(imgRef.current, crop)
+    }
+  }
+
+  const handleCancel = () => {
+    onCancel?.()
+    onOpenChange(false)
+  }
+
+  // Determina se deve mostrar círculo (aspect ratio 1:1 por padrão)
+  const shouldShowCircle = showCircleGuide ?? aspectRatio === 1
+
+  // Renderiza grid, círculo e bolinhas dentro da área de crop
+  const renderSelectionAddon = () => (
+    <>
+      {/* Grid de 9 quadrados com linhas pontilhadas */}
+      <div className="crop-grid">
+        <div className="crop-grid-line horizontal h1" />
+        <div className="crop-grid-line horizontal h2" />
+        <div className="crop-grid-line vertical v1" />
+        <div className="crop-grid-line vertical v2" />
+      </div>
+      {/* Círculo inscrito */}
+      {shouldShowCircle && <div className="crop-circle" />}
+      {/* Bolinhas centrais nas bordas */}
+      <div className="crop-handle top" />
+      <div className="crop-handle bottom" />
+      <div className="crop-handle left" />
+      <div className="crop-handle right" />
+    </>
+  )
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <style>{baseCropStyles}</style>
+      <DialogContent
+        className="w-full md:w-[650px]! lg:w-[650px]! max-w-[650px]! max-[650px]:w-[calc(100%-32px)] p-0 gap-0 z-[1003]!"
+        overlayClassName="z-[1002]!"
+      >
+        <DialogHeader className="p-5">
+          <DialogTitle className="text-center text-[16px]!">
+            Ajustar imagem
+          </DialogTitle>
+        </DialogHeader>
+
+        <div className="flex flex-col gap-4 px-5 pb-5">
+          <div className="flex justify-center overflow-hidden rounded-lg">
+            <ReactCrop
+              crop={crop}
+              onChange={(c) => setCrop(c)}
+              aspect={aspectRatio}
+              className={`max-h-[50vh] custom-crop-area ${shouldShowCircle ? 'with-circle' : ''}`}
+              keepSelection
+              minWidth={minCropWidth}
+              minHeight={minCropHeight}
+              renderSelectionAddon={renderSelectionAddon}
+            >
+              <img
+                ref={imgRef}
+                src={imageSrc}
+                alt="Crop"
+                onLoad={onImageLoad}
+                className="max-h-[50vh] object-contain"
+              />
+            </ReactCrop>
+          </div>
+
+          <p className="paragraph-small-regular text-zinc-500 text-center">
+            Arraste para ajustar a área de corte
+          </p>
+        </div>
+
+        <DialogFooter className="flex-row! items-center justify-start! gap-3 p-5 border-t border-zinc-200">
+          <Button onClick={handleConfirm}>Confirmar</Button>
+          <Button variant="secondary" onClick={handleCancel}>
+            Cancelar
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  )
+}

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

@@ -1,61 +1,61 @@
-'use client'
-
-import {
-  Dialog,
-  DialogContent,
-  DialogFooter,
-  DialogHeader,
-  DialogTitle,
-} from '../../ui/overlay/Dialog'
-import { Button } from '../../ui/buttons/Button'
-
-interface ImageTooSmallModalProps {
-  open: boolean
-  onOpenChange: (open: boolean) => void
-  fileName: string
-  minWidth: number
-  minHeight: number
-  onSelectAnother: () => void
-  onCancel: () => void
-}
-
-export function ImageTooSmallModal({
-  open,
-  onOpenChange,
-  fileName,
-  minWidth,
-  minHeight,
-  onSelectAnother,
-  onCancel,
-}: ImageTooSmallModalProps) {
-  const dimensionText = `${minWidth}x${minHeight}px`
-
-  return (
-    <Dialog open={open} onOpenChange={onOpenChange}>
-      <DialogContent
-        className="w-full md:w-[480px]! lg:w-[480px]! max-w-[480px]! max-[480px]:w-[calc(100%-32px)] p-0 gap-0 z-[1003]!"
-        overlayClassName="z-[1002]!"
-      >
-        <DialogHeader className="p-5">
-          <DialogTitle className="text-center text-[16px]!">
-            Foto menor que {dimensionText}
-          </DialogTitle>
-        </DialogHeader>
-
-        <div className="px-5 pb-5">
-          <p className="paragraph-small-regular text-zinc-600 text-center">
-            O arquivo "{fileName}" é menor que {dimensionText}. Faça envio de
-            uma imagem com pelo menos {dimensionText} para continuar.
-          </p>
-        </div>
-
-        <DialogFooter className="flex-row! items-center justify-start! gap-3 p-5 border-t border-zinc-200">
-          <Button onClick={onSelectAnother}>Enviar outra</Button>
-          <Button variant="secondary" onClick={onCancel}>
-            Cancelar
-          </Button>
-        </DialogFooter>
-      </DialogContent>
-    </Dialog>
-  )
-}
+'use client'
+
+import {
+  Dialog,
+  DialogContent,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from '../../ui/overlay/Dialog'
+import { Button } from '../../ui/buttons/Button'
+
+interface ImageTooSmallModalProps {
+  open: boolean
+  onOpenChange: (open: boolean) => void
+  fileName: string
+  minWidth: number
+  minHeight: number
+  onSelectAnother: () => void
+  onCancel: () => void
+}
+
+export function ImageTooSmallModal({
+  open,
+  onOpenChange,
+  fileName,
+  minWidth,
+  minHeight,
+  onSelectAnother,
+  onCancel,
+}: ImageTooSmallModalProps) {
+  const dimensionText = `${minWidth}x${minHeight}px`
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent
+        className="w-full md:w-[480px]! lg:w-[480px]! max-w-[480px]! max-[480px]:w-[calc(100%-32px)] p-0 gap-0 z-[1003]!"
+        overlayClassName="z-[1002]!"
+      >
+        <DialogHeader className="p-5">
+          <DialogTitle className="text-center text-[16px]!">
+            Foto menor que {dimensionText}
+          </DialogTitle>
+        </DialogHeader>
+
+        <div className="px-5 pb-5">
+          <p className="paragraph-small-regular text-zinc-600 text-center">
+            O arquivo "{fileName}" é menor que {dimensionText}. Faça envio de
+            uma imagem com pelo menos {dimensionText} para continuar.
+          </p>
+        </div>
+
+        <DialogFooter className="flex-row! items-center justify-start! gap-3 p-5 border-t border-zinc-200">
+          <Button onClick={onSelectAnother}>Enviar outra</Button>
+          <Button variant="secondary" onClick={onCancel}>
+            Cancelar
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  )
+}