@lets-events/react 12.7.2 → 12.8.0

package/src/components/Tooltip/index.tsx

@@ -1,73 +1,73 @@
-import * as React from "react";
-import * as TooltipPrimitive from "@radix-ui/react-tooltip";
-import { styled } from "../../styles";
-import { Text } from "../Text";
-
-const TooltipProvider = TooltipPrimitive.Provider;
-const TooltipRoot = TooltipPrimitive.Root;
-const TooltipTrigger = TooltipPrimitive.Trigger;
-
-const TooltipContent = styled(TooltipPrimitive.Content, {
-  backgroundColor: "$dark800",
-  color: "$neutral50",
-  borderRadius: "4px",
-  padding: "10px 15px",
-  fontSize: "14px",
-  lineHeight: 1,
-  zIndex: 100,
-  boxShadow: "0 2px 10px rgba(0, 0, 0, 0.1)",
-  userSelect: "none",
-  animationDuration: "400ms",
-  animationTimingFunction: "cubic-bezier(0.16, 1, 0.3, 1)",
-  willChange: "transform, opacity",
-  '&[data-state="delayed-open"][data-side="top"]': {
-    animationName: "slideDownAndFade",
-  },
-  '&[data-state="delayed-open"][data-side="right"]': {
-    animationName: "slideLeftAndFade",
-  },
-  '&[data-state="delayed-open"][data-side="bottom"]': {
-    animationName: "slideUpAndFade",
-  },
-  '&[data-state="delayed-open"][data-side="left"]': {
-    animationName: "slideRightAndFade",
-  },
-});
-
-const TooltipArrow = styled(TooltipPrimitive.Arrow, {
-  fill: "$dark800",
-});
-
-export interface TooltipProps {
-  children: React.ReactNode;
-  content: React.ReactNode;
-  delayDuration?: number;
-  side?: "top" | "right" | "bottom" | "left";
-}
-
-export function Tooltip({
-  children,
-  content,
-  delayDuration = 200,
-  side = "top",
-}: TooltipProps) {
-  return (
-    <TooltipProvider>
-      <TooltipRoot delayDuration={delayDuration}>
-        <TooltipTrigger asChild>{children}</TooltipTrigger>
-        <TooltipContent side={side} sideOffset={5}>
-          {typeof content === "string" ? (
-            <Text typography={"tooltip"} color="grey50">
-              {content}
-            </Text>
-          ) : (
-            content
-          )}
-          <TooltipArrow />
-        </TooltipContent>
-      </TooltipRoot>
-    </TooltipProvider>
-  );
-}
-
-export { TooltipProvider, TooltipRoot, TooltipTrigger, TooltipContent };
+import * as React from "react";
+import * as TooltipPrimitive from "@radix-ui/react-tooltip";
+import { styled } from "../../styles";
+import { Text } from "../Text";
+
+const TooltipProvider = TooltipPrimitive.Provider;
+const TooltipRoot = TooltipPrimitive.Root;
+const TooltipTrigger = TooltipPrimitive.Trigger;
+
+const TooltipContent = styled(TooltipPrimitive.Content, {
+  backgroundColor: "$dark800",
+  color: "$neutral50",
+  borderRadius: "4px",
+  padding: "10px 15px",
+  fontSize: "14px",
+  lineHeight: 1,
+  zIndex: 100,
+  boxShadow: "0 2px 10px rgba(0, 0, 0, 0.1)",
+  userSelect: "none",
+  animationDuration: "400ms",
+  animationTimingFunction: "cubic-bezier(0.16, 1, 0.3, 1)",
+  willChange: "transform, opacity",
+  '&[data-state="delayed-open"][data-side="top"]': {
+    animationName: "slideDownAndFade",
+  },
+  '&[data-state="delayed-open"][data-side="right"]': {
+    animationName: "slideLeftAndFade",
+  },
+  '&[data-state="delayed-open"][data-side="bottom"]': {
+    animationName: "slideUpAndFade",
+  },
+  '&[data-state="delayed-open"][data-side="left"]': {
+    animationName: "slideRightAndFade",
+  },
+});
+
+const TooltipArrow = styled(TooltipPrimitive.Arrow, {
+  fill: "$dark800",
+});
+
+export interface TooltipProps {
+  children: React.ReactNode;
+  content: React.ReactNode;
+  delayDuration?: number;
+  side?: "top" | "right" | "bottom" | "left";
+}
+
+export function Tooltip({
+  children,
+  content,
+  delayDuration = 200,
+  side = "top",
+}: TooltipProps) {
+  return (
+    <TooltipProvider>
+      <TooltipRoot delayDuration={delayDuration}>
+        <TooltipTrigger asChild>{children}</TooltipTrigger>
+        <TooltipContent side={side} sideOffset={5}>
+          {typeof content === "string" ? (
+            <Text typography={"tooltip"} color="grey50">
+              {content}
+            </Text>
+          ) : (
+            content
+          )}
+          <TooltipArrow />
+        </TooltipContent>
+      </TooltipRoot>
+    </TooltipProvider>
+  );
+}
+
+export { TooltipProvider, TooltipRoot, TooltipTrigger, TooltipContent };

package/src/components/Tooltip/styles.ts

@@ -1,78 +1,78 @@
-import { keyframes } from '@stitches/react'
-import { styled } from '../../styles'
-
-const slideUpAndFade = keyframes({
-  from: {
-    opacity: 0,
-    transform: 'translateY(2px)',
-  },
-  to: {
-    opacity: 1,
-    transform: 'translateY(0)',
-  },
-})
-
-const slideRightAndFade = keyframes({
-  from: {
-    opacity: 0,
-    transform: 'translateX(-2px)',
-  },
-  to: {
-    opacity: 1,
-    transform: 'translateX(0)',
-  },
-})
-
-const slideDownAndFade = keyframes({
-  from: {
-    opacity: 0,
-    transform: 'translateY(-2px)',
-  },
-  to: {
-    opacity: 1,
-    transform: 'translateY(0)',
-  },
-})
-
-const slideLeftAndFade = keyframes({
-  from: {
-    opacity: 0,
-    transform: 'translateX(2px)',
-  },
-  to: {
-    opacity: 1,
-    transform: 'translateX(0)',
-  },
-})
-
-export const TooltipContentStyled = styled('div', {
-  fontFamily: '$default',
-  backgroundColor: '$dark700',
-  color: '$dark50',
-  borderRadius: '$sm',
-  padding: '$10 $14',
-  fontSize: '$13',
-  lineHeight: '$base',
-  boxShadow: '0px 4px 4px 0px rgba(35, 53, 67, 0.08)',
-  userSelect: 'none',
-  animationDuration: '400ms',
-  animationTimingFunction: 'cubic-bezier(0.16, 1, 0.3, 1)',
-  willChange: 'transform, opacity',
-
-  '&[data-state="delayed-open"][data-side="top"]': {
-    animationName: `${slideDownAndFade}`,
-  },
-  '&[data-state="delayed-open"][data-side="right"]': {
-    animationName: `${slideLeftAndFade}`,
-  },
-  '&[data-state="delayed-open"][data-side="bottom"]': {
-    animationName: `${slideUpAndFade}`,
-  },
-  '&[data-state="delayed-open"][data-side="left"]': {
-    animationName: `${slideRightAndFade}`,
-  },
-})
-
-export const TooltipArrow = styled('div', {
-  fill: '$dark700',
+import { keyframes } from '@stitches/react'
+import { styled } from '../../styles'
+
+const slideUpAndFade = keyframes({
+  from: {
+    opacity: 0,
+    transform: 'translateY(2px)',
+  },
+  to: {
+    opacity: 1,
+    transform: 'translateY(0)',
+  },
+})
+
+const slideRightAndFade = keyframes({
+  from: {
+    opacity: 0,
+    transform: 'translateX(-2px)',
+  },
+  to: {
+    opacity: 1,
+    transform: 'translateX(0)',
+  },
+})
+
+const slideDownAndFade = keyframes({
+  from: {
+    opacity: 0,
+    transform: 'translateY(-2px)',
+  },
+  to: {
+    opacity: 1,
+    transform: 'translateY(0)',
+  },
+})
+
+const slideLeftAndFade = keyframes({
+  from: {
+    opacity: 0,
+    transform: 'translateX(2px)',
+  },
+  to: {
+    opacity: 1,
+    transform: 'translateX(0)',
+  },
+})
+
+export const TooltipContentStyled = styled('div', {
+  fontFamily: '$default',
+  backgroundColor: '$dark700',
+  color: '$dark50',
+  borderRadius: '$sm',
+  padding: '$10 $14',
+  fontSize: '$13',
+  lineHeight: '$base',
+  boxShadow: '0px 4px 4px 0px rgba(35, 53, 67, 0.08)',
+  userSelect: 'none',
+  animationDuration: '400ms',
+  animationTimingFunction: 'cubic-bezier(0.16, 1, 0.3, 1)',
+  willChange: 'transform, opacity',
+
+  '&[data-state="delayed-open"][data-side="top"]': {
+    animationName: `${slideDownAndFade}`,
+  },
+  '&[data-state="delayed-open"][data-side="right"]': {
+    animationName: `${slideLeftAndFade}`,
+  },
+  '&[data-state="delayed-open"][data-side="bottom"]': {
+    animationName: `${slideUpAndFade}`,
+  },
+  '&[data-state="delayed-open"][data-side="left"]': {
+    animationName: `${slideRightAndFade}`,
+  },
+})
+
+export const TooltipArrow = styled('div', {
+  fill: '$dark700',
 }) 

package/src/hooks/useCountries.ts

@@ -1,41 +1,41 @@
-import countries from "i18n-iso-countries";
-import pt from "i18n-iso-countries/langs/pt.json";
-import en from "i18n-iso-countries/langs/en.json";
-import es from "i18n-iso-countries/langs/es.json";
-
-type Language = "pt-BR" | "en" | "es";
-
-type Option = {
-  value: string;
-  label: string;
-};
-
-export function useCountries(language: Language = "pt-BR"): Option[] {
-  countries.registerLocale(pt);
-  countries.registerLocale(en);
-  countries.registerLocale(es);
-
-  const langMap = {
-    "pt-BR": "pt",
-    en: "en",
-    es: "es",
-  } as const;
-
-  const langCode = langMap[language];
-
-  const namesPT = countries.getNames("pt", { select: "official" });
-  const namesLang = countries.getNames(langCode, { select: "official" });
-
-  return Object.entries(namesPT).map(([_, namePT]) => {
-    const nameTranslated =
-      Object.entries(namesLang).find(([, name]) => namePT === name) ??
-      Object.entries(namesPT).find(([, name]) => name === namePT);
-
-    const label = nameTranslated?.[1] || namePT;
-
-    return {
-      value: namePT,
-      label,
-    };
-  });
-}
+import countries from "i18n-iso-countries";
+import pt from "i18n-iso-countries/langs/pt.json";
+import en from "i18n-iso-countries/langs/en.json";
+import es from "i18n-iso-countries/langs/es.json";
+
+type Language = "pt-BR" | "en" | "es";
+
+type Option = {
+  value: string;
+  label: string;
+};
+
+export function useCountries(language: Language = "pt-BR"): Option[] {
+  countries.registerLocale(pt);
+  countries.registerLocale(en);
+  countries.registerLocale(es);
+
+  const langMap = {
+    "pt-BR": "pt",
+    en: "en",
+    es: "es",
+  } as const;
+
+  const langCode = langMap[language];
+
+  const namesPT = countries.getNames("pt", { select: "official" });
+  const namesLang = countries.getNames(langCode, { select: "official" });
+
+  return Object.entries(namesPT).map(([_, namePT]) => {
+    const nameTranslated =
+      Object.entries(namesLang).find(([, name]) => namePT === name) ??
+      Object.entries(namesPT).find(([, name]) => name === namePT);
+
+    const label = nameTranslated?.[1] || namePT;
+
+    return {
+      value: namePT,
+      label,
+    };
+  });
+}

package/src/hooks/useImageUpload.ts

@@ -1,139 +1,139 @@
-import { useState, useCallback } from "react";
-import { UploadService, UploadConfig } from "../utils/uploadService";
-
-interface UploadProgress {
-  amount: number;
-  message: string;
-}
-
-interface UploadedFile {
-  url: string;
-  filename: string;
-  size: number;
-  type: string;
-}
-
-interface UseImageUploadOptions {
-  onSuccess?: (file: UploadedFile) => void;
-  onError?: (error: string) => void;
-  onProgress?: (progress: UploadProgress) => void;
-  maxFileSize?: number;
-  allowedTypes?: string[];
-  uploadConfig: UploadConfig;
-}
-
-export const useImageUpload = (options: UseImageUploadOptions) => {
-  const [isUploading, setIsUploading] = useState(false);
-  const [progress, setProgress] = useState<UploadProgress | null>(null);
-  const [error, setError] = useState<string | null>(null);
-
-  const {
-    onSuccess,
-    onError,
-    onProgress,
-    maxFileSize = 5 * 1024 * 1024, // 5MB default
-    allowedTypes = ["image/jpeg", "image/png", "image/gif", "image/webp"],
-    uploadConfig,
-  } = options;
-
-  const validateFile = useCallback(
-    (file: File): boolean => {
-      if (!allowedTypes.includes(file.type)) {
-        const errorMsg = "Tipo de arquivo não suportado";
-        setError(errorMsg);
-        onError?.(errorMsg);
-        return false;
-      }
-
-      if (file.size > maxFileSize) {
-        const errorMsg = `Arquivo muito grande. Máximo: ${(
-          maxFileSize /
-          1024 /
-          1024
-        ).toFixed(1)}MB`;
-        setError(errorMsg);
-        onError?.(errorMsg);
-        return false;
-      }
-
-      return true;
-    },
-    [allowedTypes, maxFileSize, onError]
-  );
-
-  const uploadFile = useCallback(
-    async (file: File): Promise<UploadedFile | null> => {
-      if (!validateFile(file)) {
-        return null;
-      }
-
-      setIsUploading(true);
-      setError(null);
-      setProgress(null);
-
-      try {
-        // Tenta upload via S3 com URL pré-assinada primeiro
-        const uploadedFile = await UploadService.uploadToS3(
-          file,
-          uploadConfig,
-          (progress) => {
-            setProgress(progress);
-            onProgress?.(progress);
-          }
-        );
-
-        setIsUploading(false);
-        setProgress(null);
-        onSuccess?.(uploadedFile);
-        return uploadedFile;
-      } catch (error) {
-        console.error("Erro no upload S3:", error);
-
-        // Fallback para upload via API tradicional
-        try {
-          setProgress({
-            amount: 0,
-            message: "Tentando método alternativo...",
-          });
-
-          const uploadedFile = await UploadService.uploadViaAPI(
-            file,
-            uploadConfig,
-            (progress) => {
-              setProgress(progress);
-              onProgress?.(progress);
-            }
-          );
-
-          setIsUploading(false);
-          setProgress(null);
-          onSuccess?.(uploadedFile);
-          return uploadedFile;
-        } catch (fallbackError) {
-          console.error("Erro no fallback:", fallbackError);
-          const errorMsg = "Falha no upload da imagem. Tente novamente.";
-          setError(errorMsg);
-          setIsUploading(false);
-          setProgress(null);
-          onError?.(errorMsg);
-          return null;
-        }
-      }
-    },
-    [validateFile, onSuccess, onError, onProgress]
-  );
-
-  const reset = useCallback(() => {
-    setIsUploading(false);
-    setProgress(null);
-    setError(null);
-  }, []);
-
-  return {
-    uploadFile,
-    isUploading,
-    progress,
-    error,
-    reset,
-  };
-};
+import { useState, useCallback } from "react";
+import { UploadService, UploadConfig } from "../utils/uploadService";
+
+interface UploadProgress {
+  amount: number;
+  message: string;
+}
+
+interface UploadedFile {
+  url: string;
+  filename: string;
+  size: number;
+  type: string;
+}
+
+interface UseImageUploadOptions {
+  onSuccess?: (file: UploadedFile) => void;
+  onError?: (error: string) => void;
+  onProgress?: (progress: UploadProgress) => void;
+  maxFileSize?: number;
+  allowedTypes?: string[];
+  uploadConfig: UploadConfig;
+}
+
+export const useImageUpload = (options: UseImageUploadOptions) => {
+  const [isUploading, setIsUploading] = useState(false);
+  const [progress, setProgress] = useState<UploadProgress | null>(null);
+  const [error, setError] = useState<string | null>(null);
+
+  const {
+    onSuccess,
+    onError,
+    onProgress,
+    maxFileSize = 5 * 1024 * 1024, // 5MB default
+    allowedTypes = ["image/jpeg", "image/png", "image/gif", "image/webp"],
+    uploadConfig,
+  } = options;
+
+  const validateFile = useCallback(
+    (file: File): boolean => {
+      if (!allowedTypes.includes(file.type)) {
+        const errorMsg = "Tipo de arquivo não suportado";
+        setError(errorMsg);
+        onError?.(errorMsg);
+        return false;
+      }
+
+      if (file.size > maxFileSize) {
+        const errorMsg = `Arquivo muito grande. Máximo: ${(
+          maxFileSize /
+          1024 /
+          1024
+        ).toFixed(1)}MB`;
+        setError(errorMsg);
+        onError?.(errorMsg);
+        return false;
+      }
+
+      return true;
+    },
+    [allowedTypes, maxFileSize, onError]
+  );
+
+  const uploadFile = useCallback(
+    async (file: File): Promise<UploadedFile | null> => {
+      if (!validateFile(file)) {
+        return null;
+      }
+
+      setIsUploading(true);
+      setError(null);
+      setProgress(null);
+
+      try {
+        // Tenta upload via S3 com URL pré-assinada primeiro
+        const uploadedFile = await UploadService.uploadToS3(
+          file,
+          uploadConfig,
+          (progress) => {
+            setProgress(progress);
+            onProgress?.(progress);
+          }
+        );
+
+        setIsUploading(false);
+        setProgress(null);
+        onSuccess?.(uploadedFile);
+        return uploadedFile;
+      } catch (error) {
+        console.error("Erro no upload S3:", error);
+
+        // Fallback para upload via API tradicional
+        try {
+          setProgress({
+            amount: 0,
+            message: "Tentando método alternativo...",
+          });
+
+          const uploadedFile = await UploadService.uploadViaAPI(
+            file,
+            uploadConfig,
+            (progress) => {
+              setProgress(progress);
+              onProgress?.(progress);
+            }
+          );
+
+          setIsUploading(false);
+          setProgress(null);
+          onSuccess?.(uploadedFile);
+          return uploadedFile;
+        } catch (fallbackError) {
+          console.error("Erro no fallback:", fallbackError);
+          const errorMsg = "Falha no upload da imagem. Tente novamente.";
+          setError(errorMsg);
+          setIsUploading(false);
+          setProgress(null);
+          onError?.(errorMsg);
+          return null;
+        }
+      }
+    },
+    [validateFile, onSuccess, onError, onProgress]
+  );
+
+  const reset = useCallback(() => {
+    setIsUploading(false);
+    setProgress(null);
+    setError(null);
+  }, []);
+
+  return {
+    uploadFile,
+    isUploading,
+    progress,
+    error,
+    reset,
+  };
+};