@greatapps/greatauth-ui 0.3.6 → 0.3.7

package/src/components/entity-avatar.tsx

@@ -0,0 +1,72 @@
+"use client";
+
+import { Avatar, AvatarFallback, AvatarImage } from "./ui/avatar";
+import { cn } from "../lib/utils";
+
+const COLORS = [
+  "bg-red-100 text-red-700 dark:bg-red-900 dark:text-red-300",
+  "bg-orange-100 text-orange-700 dark:bg-orange-900 dark:text-orange-300",
+  "bg-amber-100 text-amber-700 dark:bg-amber-900 dark:text-amber-300",
+  "bg-emerald-100 text-emerald-700 dark:bg-emerald-900 dark:text-emerald-300",
+  "bg-cyan-100 text-cyan-700 dark:bg-cyan-900 dark:text-cyan-300",
+  "bg-blue-100 text-blue-700 dark:bg-blue-900 dark:text-blue-300",
+  "bg-violet-100 text-violet-700 dark:bg-violet-900 dark:text-violet-300",
+  "bg-pink-100 text-pink-700 dark:bg-pink-900 dark:text-pink-300",
+];
+
+const SIZE_MAP = {
+  xs: "h-5 w-5 text-[9px]",
+  sm: "h-6 w-6 text-[10px]",
+  md: "h-8 w-8 text-xs",
+  lg: "h-10 w-10 text-sm",
+  xl: "h-16 w-16 text-lg",
+} as const;
+
+function hashCode(str: string): number {
+  let hash = 0;
+  for (let i = 0; i < str.length; i++) {
+    hash = str.charCodeAt(i) + ((hash << 5) - hash);
+  }
+  return Math.abs(hash);
+}
+
+function getInitials(name: string): string {
+  const parts = name.trim().split(/\s+/);
+  if (parts.length >= 2) {
+    return (parts[0][0] + parts[parts.length - 1][0]).toUpperCase();
+  }
+  return (name[0] || "?").toUpperCase();
+}
+
+export interface EntityAvatarProps {
+  photo?: string | null;
+  name: string | null;
+  size?: keyof typeof SIZE_MAP;
+  className?: string;
+}
+
+export function EntityAvatar({
+  photo,
+  name,
+  size = "md",
+  className,
+}: EntityAvatarProps) {
+  const displayName = name || "?";
+  const color = COLORS[hashCode(displayName) % COLORS.length];
+  const initials = getInitials(displayName);
+
+  return (
+    <Avatar className={cn(SIZE_MAP[size], className)}>
+      {photo && (
+        <AvatarImage
+          src={photo}
+          alt={displayName}
+          className="object-cover"
+        />
+      )}
+      <AvatarFallback className={cn("font-medium", color)}>
+        {initials}
+      </AvatarFallback>
+    </Avatar>
+  );
+}

package/src/components/image-crop-upload.tsx

@@ -0,0 +1,253 @@
+"use client";
+
+import { useCallback, useRef, useState } from "react";
+import Cropper from "react-easy-crop";
+import type { Area } from "react-easy-crop";
+import { Button } from "./ui/button";
+import {
+  Dialog,
+  DialogContent,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "./ui/dialog";
+import { Slider } from "./ui/slider";
+import { toast } from "sonner";
+import { Camera, Trash2 } from "lucide-react";
+import { EntityAvatar } from "./entity-avatar";
+import {
+  getCroppedImage,
+  validateImageFile,
+  fileToDataUrl,
+} from "../lib/image-utils";
+
+const STORAGE_URL_MAP: Record<string, string> = {
+  users: "https://gauth-r2-storage.greatlabs.workers.dev",
+  agents: "https://gagents-r2-storage.greatlabs.workers.dev",
+  contacts: "https://gchat-r2-storage.greatlabs.workers.dev",
+  professionals: "https://gclinic-r2-storage.greatlabs.workers.dev",
+  patients: "https://gclinic-r2-storage.greatlabs.workers.dev",
+  clinics: "https://gclinic-r2-storage.greatlabs.workers.dev",
+};
+
+const BUCKET_MAP: Record<string, string> = {
+  users: "gauth-r1-storage",
+  agents: "gagents-r1-storage",
+  contacts: "gchat-r1-storage",
+  professionals: "gclinic-r1-storage",
+  patients: "gclinic-r1-storage",
+  clinics: "gclinic-r1-storage",
+};
+
+const DEFAULT_STORAGE_URL = "https://gauth-r2-storage.greatlabs.workers.dev";
+const DEFAULT_BUCKET = "gauth-r1-storage";
+
+export interface ImageCropUploadProps {
+  value?: string | null;
+  onChange: (url: string) => void;
+  onRemove?: () => void;
+  entityType: string;
+  entityId?: number | string;
+  idAccount: number;
+  name?: string | null;
+  disabled?: boolean;
+}
+
+export function ImageCropUpload({
+  value,
+  onChange,
+  onRemove,
+  entityType,
+  entityId,
+  idAccount,
+  name,
+  disabled = false,
+}: ImageCropUploadProps) {
+  const [imageSrc, setImageSrc] = useState<string | null>(null);
+  const [crop, setCrop] = useState({ x: 0, y: 0 });
+  const [zoom, setZoom] = useState(1);
+  const [croppedArea, setCroppedArea] = useState<Area | null>(null);
+  const [isOpen, setIsOpen] = useState(false);
+  const [isUploading, setIsUploading] = useState(false);
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  const onCropComplete = useCallback((_: Area, croppedAreaPixels: Area) => {
+    setCroppedArea(croppedAreaPixels);
+  }, []);
+
+  const handleFileSelect = useCallback(
+    async (e: React.ChangeEvent<HTMLInputElement>) => {
+      const file = e.target.files?.[0];
+      if (!file) return;
+
+      const error = validateImageFile(file);
+      if (error) {
+        toast.error(error);
+        if (inputRef.current) inputRef.current.value = "";
+        return;
+      }
+
+      const dataUrl = await fileToDataUrl(file);
+      setImageSrc(dataUrl);
+      setCrop({ x: 0, y: 0 });
+      setZoom(1);
+      setIsOpen(true);
+      if (inputRef.current) inputRef.current.value = "";
+    },
+    [],
+  );
+
+  const handleConfirmCrop = useCallback(async () => {
+    if (!imageSrc || !croppedArea) return;
+
+    setIsUploading(true);
+
+    try {
+      const base64 = await getCroppedImage(imageSrc, croppedArea);
+      const path = `${entityType}/${idAccount}/${entityId || "temp"}.webp`;
+      const storageUrl = STORAGE_URL_MAP[entityType] || DEFAULT_STORAGE_URL;
+      const bucket = BUCKET_MAP[entityType] || DEFAULT_BUCKET;
+
+      const res = await fetch(storageUrl, {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ file: base64, bucket, path }),
+      });
+
+      const data = await res.json();
+
+      if (data.status !== 1) {
+        throw new Error(data.message || "Erro ao enviar imagem");
+      }
+
+      const publicUrl = `${storageUrl}/${path}?t=${Date.now()}`;
+      onChange(publicUrl);
+      toast.success("Imagem atualizada");
+    } catch (err) {
+      toast.error(
+        err instanceof Error ? err.message : "Erro ao enviar imagem",
+      );
+    } finally {
+      setIsUploading(false);
+      setIsOpen(false);
+      setImageSrc(null);
+    }
+  }, [imageSrc, croppedArea, entityType, entityId, idAccount, onChange]);
+
+  const handleRemove = useCallback(async () => {
+    if (!value) return;
+
+    try {
+      const path = `${entityType}/${idAccount}/${entityId || "temp"}.webp`;
+      const storageUrl = STORAGE_URL_MAP[entityType] || DEFAULT_STORAGE_URL;
+      const bucket = BUCKET_MAP[entityType] || DEFAULT_BUCKET;
+
+      await fetch(storageUrl, {
+        method: "DELETE",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ bucket, path }),
+      });
+
+      onRemove?.();
+      toast.success("Imagem removida");
+    } catch {
+      toast.error("Erro ao remover imagem");
+    }
+  }, [value, entityType, entityId, idAccount, onRemove]);
+
+  return (
+    <div className="flex flex-col items-center gap-2">
+      <div className="relative group">
+        <EntityAvatar photo={value} name={name ?? null} size="xl" />
+        {!disabled && (
+          <button
+            type="button"
+            onClick={() => inputRef.current?.click()}
+            className="absolute inset-0 flex items-center justify-center rounded-full bg-black/50 opacity-0 group-hover:opacity-100 transition-opacity cursor-pointer"
+          >
+            <Camera className="h-5 w-5 text-white" />
+          </button>
+        )}
+      </div>
+
+      <input
+        ref={inputRef}
+        type="file"
+        accept="image/png,image/jpeg,image/webp"
+        onChange={handleFileSelect}
+        className="hidden"
+        disabled={disabled}
+      />
+
+      {!disabled && value && (
+        <Button
+          type="button"
+          variant="ghost"
+          size="sm"
+          onClick={handleRemove}
+          className="text-destructive hover:text-destructive"
+        >
+          <Trash2 className="h-4 w-4 mr-1" />
+          Remover
+        </Button>
+      )}
+
+      <Dialog open={isOpen} onOpenChange={setIsOpen}>
+        <DialogContent className="sm:max-w-md">
+          <DialogHeader>
+            <DialogTitle>Recortar imagem</DialogTitle>
+          </DialogHeader>
+
+          <div className="relative w-full h-72 bg-muted rounded-md overflow-hidden">
+            {imageSrc && (
+              <Cropper
+                image={imageSrc}
+                crop={crop}
+                zoom={zoom}
+                aspect={1}
+                onCropChange={setCrop}
+                onZoomChange={setZoom}
+                onCropComplete={onCropComplete}
+                cropShape="round"
+                showGrid={false}
+              />
+            )}
+          </div>
+
+          <div className="flex items-center gap-3 px-1">
+            <span className="text-sm text-muted-foreground whitespace-nowrap">
+              Zoom
+            </span>
+            <Slider
+              value={[zoom]}
+              onValueChange={(v: number[]) => setZoom(v[0])}
+              min={1}
+              max={3}
+              step={0.1}
+              className="flex-1"
+            />
+          </div>
+
+          <DialogFooter>
+            <Button
+              variant="outline"
+              onClick={() => {
+                setIsOpen(false);
+                setImageSrc(null);
+              }}
+              disabled={isUploading}
+            >
+              Cancelar
+            </Button>
+            <Button
+              onClick={handleConfirmCrop}
+              disabled={isUploading || !croppedArea}
+            >
+              {isUploading ? "Enviando..." : "Confirmar"}
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+    </div>
+  );
+}

package/src/components/index.ts

@@ -3,3 +3,7 @@ export { AppSidebar } from "./app-sidebar";
 export { AppHeader } from "./app-header";
 export { LoginForm } from "./login-form";
 export { ThemeToggle } from "./theme-toggle";
+export { EntityAvatar } from "./entity-avatar";
+export type { EntityAvatarProps } from "./entity-avatar";
+export { ImageCropUpload } from "./image-crop-upload";
+export type { ImageCropUploadProps } from "./image-crop-upload";

package/src/index.ts

@@ -15,6 +15,10 @@ export { AppSidebar } from "./components";
 export { AppHeader } from "./components";
 export { LoginForm } from "./components";
 export { ThemeToggle } from "./components";
+export { EntityAvatar } from "./components";
+export type { EntityAvatarProps } from "./components";
+export { ImageCropUpload } from "./components";
+export type { ImageCropUploadProps } from "./components";
 
 // UI Primitives (consuming apps may need)
 export { SidebarProvider, SidebarInset, SidebarTrigger, useSidebar } from "./components/ui/sidebar";

package/src/lib/image-utils.ts

@@ -0,0 +1,82 @@
+import type { Area } from "react-easy-crop";
+
+export async function getCroppedImage(
+  imageSrc: string,
+  cropArea: Area,
+  outputSize = 400,
+  quality = 0.85,
+): Promise<string> {
+  const image = await loadImage(imageSrc);
+  const canvas = document.createElement("canvas");
+  canvas.width = outputSize;
+  canvas.height = outputSize;
+  const ctx = canvas.getContext("2d");
+
+  if (!ctx) throw new Error("Canvas context not available");
+
+  ctx.drawImage(
+    image,
+    cropArea.x,
+    cropArea.y,
+    cropArea.width,
+    cropArea.height,
+    0,
+    0,
+    outputSize,
+    outputSize,
+  );
+
+  const blob = await new Promise<Blob>((resolve, reject) => {
+    canvas.toBlob(
+      (b) => (b ? resolve(b) : reject(new Error("Failed to create blob"))),
+      "image/webp",
+      quality,
+    );
+  });
+
+  return blobToBase64(blob);
+}
+
+function loadImage(src: string): Promise<HTMLImageElement> {
+  return new Promise((resolve, reject) => {
+    const img = new Image();
+    img.crossOrigin = "anonymous";
+    img.onload = () => resolve(img);
+    img.onerror = reject;
+    img.src = src;
+  });
+}
+
+function blobToBase64(blob: Blob): Promise<string> {
+  return new Promise((resolve, reject) => {
+    const reader = new FileReader();
+    reader.onload = () => {
+      const result = reader.result as string;
+      resolve(result.split(",")[1]);
+    };
+    reader.onerror = reject;
+    reader.readAsDataURL(blob);
+  });
+}
+
+const ACCEPTED_TYPES = ["image/png", "image/jpeg", "image/jpg", "image/webp"];
+const MAX_SIZE_BYTES = 5 * 1024 * 1024;
+
+export function validateImageFile(file: File): string | null {
+  if (!ACCEPTED_TYPES.includes(file.type)) {
+    return "Formato não suportado. Use PNG, JPG ou WEBP";
+  }
+  if (file.size > MAX_SIZE_BYTES) {
+    return "Imagem muito grande. Máximo: 5MB";
+  }
+  return null;
+}
+
+export function fileToDataUrl(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);
+  });
+}