@greatapps/common 1.1.516 → 1.1.517

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

@@ -1,126 +1,126 @@
-'use client'
-
-import { useRef } from 'react'
-import { useImageUpload } from '../../../modules/images/hooks/use-image-upload.hook'
-import { ACCEPTED_IMAGE_FORMATS_STRING } from '../../../modules/images/constants/image.constants'
-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={ACCEPTED_IMAGE_FORMATS_STRING}
-        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>
-  )
-}
+'use client'
+
+import { useRef } from 'react'
+import { useImageUpload } from '../../../modules/images/hooks/use-image-upload.hook'
+import { ACCEPTED_IMAGE_FORMATS_STRING } from '../../../modules/images/constants/image.constants'
+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={ACCEPTED_IMAGE_FORMATS_STRING}
+        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

@@ -1,3 +1,3 @@
-export { ImageUpload } from './ImageUpload'
-export { ImageCropModal } from './ImageCropModal'
-export { ImageTooSmallModal } from './ImageTooSmallModal'
+export { ImageUpload } from './ImageUpload'
+export { ImageCropModal } from './ImageCropModal'
+export { ImageTooSmallModal } from './ImageTooSmallModal'

package/src/components/widgets/notifications/NotificationCard.tsx

@@ -1,73 +1,73 @@
-'use client';
-
-import { IconClock } from '@tabler/icons-react';
-import { ReactNode } from 'react';
-import { cn } from '../../../infra/utils/clsx';
-import { useIsDefaultWhitelabel } from '../../../providers/whitelabel.provider';
-
-type NotificationCardProps = {
-  icon: ReactNode;
-  iconBgColor?: string;
-  title: string;
-  description?: string;
-  time: string;
-  actions?: ReactNode;
-  isUnread?: boolean;
-  showBorder?: boolean;
-  className?: string;
-  gapPx: number;
-};
-
-export default function NotificationCard({
-  icon,
-  iconBgColor,
-  title,
-  description,
-  time,
-  actions,
-  isUnread = false,
-  showBorder = true,
-  className,
-  gapPx = 16
-}: NotificationCardProps) {
-  const isDefaultWl = useIsDefaultWhitelabel();
-
-  return (
-    <div
-      className={cn(
-        'flex flex-col lg:flex-row items-start p-4 lg:p-5 gap-3 lg:gap-4 relative',
-        showBorder && 'border-b border-gray-200',
-        className
-      )}
-    >
-      <div
-        className={cn(
-          'flex items-center justify-center size-10 rounded-full shrink-0',
-          iconBgColor
-        )}
-      >
-        {icon}
-      </div>
-
-      <div className="flex flex-col flex-1" style={{ gap: `${gapPx}px` }}>
-        <div className="flex flex-col gap-1">
-          <span className="paragraph-small-semibold text-gray-950">{title}</span>
-          {description && (
-            <span className="paragraph-small-regular text-gray-600">{description}</span>
-          )}
-        </div>
-
-        <div className="flex items-center gap-1.5">
-          <IconClock size={14} className="text-gray-400" />
-          <span className="paragraph-xsmall-medium text-gray-600">{time}</span>
-        </div>
-
-        {actions && <div className="flex items-center gap-2">{actions}</div>}
-      </div>
-
-      {isUnread && <div className={`size-2 rounded-full shrink-0 mt-1 ${isDefaultWl ? 'bg-cyan-400' : 'bg-zinc-400'}`} />}
-    </div>
-  );
-}
-
-export type { NotificationCardProps };
+'use client';
+
+import { IconClock } from '@tabler/icons-react';
+import { ReactNode } from 'react';
+import { cn } from '../../../infra/utils/clsx';
+import { useIsDefaultWhitelabel } from '../../../providers/whitelabel.provider';
+
+type NotificationCardProps = {
+  icon: ReactNode;
+  iconBgColor?: string;
+  title: string;
+  description?: string;
+  time: string;
+  actions?: ReactNode;
+  isUnread?: boolean;
+  showBorder?: boolean;
+  className?: string;
+  gapPx: number;
+};
+
+export default function NotificationCard({
+  icon,
+  iconBgColor,
+  title,
+  description,
+  time,
+  actions,
+  isUnread = false,
+  showBorder = true,
+  className,
+  gapPx = 16
+}: NotificationCardProps) {
+  const isDefaultWl = useIsDefaultWhitelabel();
+
+  return (
+    <div
+      className={cn(
+        'flex flex-col lg:flex-row items-start p-4 lg:p-5 gap-3 lg:gap-4 relative',
+        showBorder && 'border-b border-gray-200',
+        className
+      )}
+    >
+      <div
+        className={cn(
+          'flex items-center justify-center size-10 rounded-full shrink-0',
+          iconBgColor
+        )}
+      >
+        {icon}
+      </div>
+
+      <div className="flex flex-col flex-1" style={{ gap: `${gapPx}px` }}>
+        <div className="flex flex-col gap-1">
+          <span className="paragraph-small-semibold text-gray-950">{title}</span>
+          {description && (
+            <span className="paragraph-small-regular text-gray-600">{description}</span>
+          )}
+        </div>
+
+        <div className="flex items-center gap-1.5">
+          <IconClock size={14} className="text-gray-400" />
+          <span className="paragraph-xsmall-medium text-gray-600">{time}</span>
+        </div>
+
+        {actions && <div className="flex items-center gap-2">{actions}</div>}
+      </div>
+
+      {isUnread && <div className={`size-2 rounded-full shrink-0 mt-1 ${isDefaultWl ? 'bg-cyan-400' : 'bg-zinc-400'}`} />}
+    </div>
+  );
+}
+
+export type { NotificationCardProps };

package/src/hooks/copy-to-clipboard.hook.tsx

@@ -1,67 +1,67 @@
-'use client';
-
-import { useState, useCallback, useRef, useEffect } from "react";
-
-interface UseCopyToClipboardOptions {
-  feedbackDuration?: number;
-  onSuccess?: () => void;
-  onError?: (error: Error) => void;
-}
-
-interface UseCopyToClipboardReturn {
-  isCopied: boolean;
-  copy: (text: string) => Promise<void>;
-}
-
-export default function useCopyToClipboard({
-  feedbackDuration = 2000,
-  onSuccess,
-  onError,
-}: UseCopyToClipboardOptions = {}): UseCopyToClipboardReturn {
-  const [isCopied, setIsCopied] = useState(false);
-  const timeoutRef = useRef<NodeJS.Timeout | null>(null);
-
-  useEffect(() => {
-    return () => {
-      if (timeoutRef.current) {
-        clearTimeout(timeoutRef.current);
-      }
-    };
-  }, []);
-
-  const copy = useCallback(
-    async (text: string) => {
-      if (timeoutRef.current) {
-        clearTimeout(timeoutRef.current);
-      }
-
-      try {
-        if (navigator.clipboard?.writeText) {
-          await navigator.clipboard.writeText(text);
-        } else {
-          const textarea = document.createElement("textarea");
-          textarea.value = text;
-          textarea.style.cssText = "position:fixed;top:-9999px;left:-9999px;opacity:0";
-          document.body.appendChild(textarea);
-          textarea.focus();
-          textarea.select();
-          const success = document.execCommand("copy");
-          document.body.removeChild(textarea);
-          if (!success) throw new Error("execCommand copy failed");
-        }
-
-        setIsCopied(true);
-        onSuccess?.();
-
-        timeoutRef.current = setTimeout(() => {
-          setIsCopied(false);
-        }, feedbackDuration);
-      } catch (error) {
-        onError?.(error instanceof Error ? error : new Error("Failed to copy"));
-      }
-    },
-    [feedbackDuration, onSuccess, onError],
-  );
-
-  return { isCopied, copy };
-}
+'use client';
+
+import { useState, useCallback, useRef, useEffect } from "react";
+
+interface UseCopyToClipboardOptions {
+  feedbackDuration?: number;
+  onSuccess?: () => void;
+  onError?: (error: Error) => void;
+}
+
+interface UseCopyToClipboardReturn {
+  isCopied: boolean;
+  copy: (text: string) => Promise<void>;
+}
+
+export default function useCopyToClipboard({
+  feedbackDuration = 2000,
+  onSuccess,
+  onError,
+}: UseCopyToClipboardOptions = {}): UseCopyToClipboardReturn {
+  const [isCopied, setIsCopied] = useState(false);
+  const timeoutRef = useRef<NodeJS.Timeout | null>(null);
+
+  useEffect(() => {
+    return () => {
+      if (timeoutRef.current) {
+        clearTimeout(timeoutRef.current);
+      }
+    };
+  }, []);
+
+  const copy = useCallback(
+    async (text: string) => {
+      if (timeoutRef.current) {
+        clearTimeout(timeoutRef.current);
+      }
+
+      try {
+        if (navigator.clipboard?.writeText) {
+          await navigator.clipboard.writeText(text);
+        } else {
+          const textarea = document.createElement("textarea");
+          textarea.value = text;
+          textarea.style.cssText = "position:fixed;top:-9999px;left:-9999px;opacity:0";
+          document.body.appendChild(textarea);
+          textarea.focus();
+          textarea.select();
+          const success = document.execCommand("copy");
+          document.body.removeChild(textarea);
+          if (!success) throw new Error("execCommand copy failed");
+        }
+
+        setIsCopied(true);
+        onSuccess?.();
+
+        timeoutRef.current = setTimeout(() => {
+          setIsCopied(false);
+        }, feedbackDuration);
+      } catch (error) {
+        onError?.(error instanceof Error ? error : new Error("Failed to copy"));
+      }
+    },
+    [feedbackDuration, onSuccess, onError],
+  );
+
+  return { isCopied, copy };
+}

package/src/hooks/useAuthQueryKey.ts

@@ -1,32 +1,32 @@
-'use client';
-
-import { useAuth } from '../providers/auth.provider';
-import { useWhitelabel } from '../providers/whitelabel.provider';
-
-/**
- * Retorna o id da whitelabel do contexto.
- */
-export function useWlId(): number {
-  const { whitelabel } = useWhitelabel();
-  return whitelabel?.id ?? 0;
-}
-
-/**
- * Prefixa query keys com ['whitelabel', wlId] para isolamento por whitelabel.
- * Usar para queries públicas e bootstrap (plans, currencies, user, account, etc).
- */
-export function useWlQueryKey<T extends readonly unknown[]>(baseKey: [...T]): ['whitelabel', number, ...T] {
-  const wlId = useWlId();
-  return ['whitelabel', wlId, ...baseKey];
-}
-
-/**
- * Prefixa query keys com ['whitelabel', wlId, 'user', userId] para isolamento
- * por whitelabel + usuário. Usar para queries autenticadas (cards, subscriptions, etc).
- */
-export function useAuthQueryKey<T extends readonly unknown[]>(baseKey: [...T]): ['whitelabel', number, 'user', number, ...T] {
-  const wlId = useWlId();
-  const { user } = useAuth();
-  const userId = user?.id ?? 0;
-  return ['whitelabel', wlId, 'user', userId, ...baseKey];
-}
+'use client';
+
+import { useAuth } from '../providers/auth.provider';
+import { useWhitelabel } from '../providers/whitelabel.provider';
+
+/**
+ * Retorna o id da whitelabel do contexto.
+ */
+export function useWlId(): number {
+  const { whitelabel } = useWhitelabel();
+  return whitelabel?.id ?? 0;
+}
+
+/**
+ * Prefixa query keys com ['whitelabel', wlId] para isolamento por whitelabel.
+ * Usar para queries públicas e bootstrap (plans, currencies, user, account, etc).
+ */
+export function useWlQueryKey<T extends readonly unknown[]>(baseKey: [...T]): ['whitelabel', number, ...T] {
+  const wlId = useWlId();
+  return ['whitelabel', wlId, ...baseKey];
+}
+
+/**
+ * Prefixa query keys com ['whitelabel', wlId, 'user', userId] para isolamento
+ * por whitelabel + usuário. Usar para queries autenticadas (cards, subscriptions, etc).
+ */
+export function useAuthQueryKey<T extends readonly unknown[]>(baseKey: [...T]): ['whitelabel', number, 'user', number, ...T] {
+  const wlId = useWlId();
+  const { user } = useAuth();
+  const userId = user?.id ?? 0;
+  return ['whitelabel', wlId, 'user', userId, ...baseKey];
+}