@lets-events/react 11.8.0 → 12.0.0

package/src/components/Tooltip/index.tsx

@@ -1,67 +1,67 @@
-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'}>{content}</Text>:(content)}
-          <TooltipArrow />
-        </TooltipContent>
-      </TooltipRoot>
-    </TooltipProvider>
-  )
-}
-
+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'}>{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

@@ -0,0 +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,
+  };
+};

package/src/hooks/useOnClickOutside.tsx

@@ -1,20 +1,20 @@
-import { useEffect } from "react";
-
-export function useOnClickOutside(ref: any, handler: () => void) {
-  useEffect(() => {
-    const listener = (event: MouseEvent | TouchEvent) => {
-      if (!ref.current || ref.current.contains(event.target)) {
-        return;
-      }
-      handler();
-    };
-
-    document.addEventListener("mousedown", listener);
-    document.addEventListener("touchstart", listener);
-
-    return () => {
-      document.removeEventListener("mousedown", listener);
-      document.removeEventListener("touchstart", listener);
-    };
-  }, [ref, handler]);
-}
+import { useEffect } from "react";
+
+export function useOnClickOutside(ref: any, handler: () => void) {
+  useEffect(() => {
+    const listener = (event: MouseEvent | TouchEvent) => {
+      if (!ref.current || ref.current.contains(event.target)) {
+        return;
+      }
+      handler();
+    };
+
+    document.addEventListener("mousedown", listener);
+    document.addEventListener("touchstart", listener);
+
+    return () => {
+      document.removeEventListener("mousedown", listener);
+      document.removeEventListener("touchstart", listener);
+    };
+  }, [ref, handler]);
+}

package/src/index.tsx

@@ -1,55 +1,67 @@
-// Icon
-export * from "./components/Icon";
-
-// Text
-export * from "./components/Text";
-
-// Components
-export * from "./components/Button";
-export * from "./components/ButtonGroup";
-export * from "./components/Avatar";
-export * from "./components/TextField";
-export * from "./components/RadioGroup";
-export * from "./components/CheckboxGroup";
-export * from "./components/Filter";
-export * from "./components/Dropdown";
-export * from "./components/Badge";
-export * from "./components/Modal";
-export * from "./components/MenuDropdown";
-export * from "./components/Calendar";
-export * from "./components/Drawer";
-export * from "./components/TimePicker";
-export * from "./components/Alert";
-export * from "./components/Switch";
-export * from "./components/Step";
-export * from "./components/Card";
-export * from "./components/TextareaField";
-export * from "./components/Toast";
-export * from "./components/Tooltip";
-export * from "./components/MultiSelect";
-
-// Layouts
-export * from "./components/Flex";
-export * from "./components/Box";
-export * from "./components/Grid";
-export * from "./components/Container";
-export * from "./components/Section";
-
-//Form
-export * from "./components/FormFields/subComponents/ErrorFormMessage";
-export * from "./components/FormFields/subComponents/FormLabel";
-export * from "./components/FormFields/TextAreaFormField";
-export * from "./components/FormFields/TextFormField";
-export * from "./components/FormFields/Form";
-export * from "./components/FormFields/MultiSelectFormField";
-export * from "./components/FormFields/PhoneFormField";
-export * from "./components/FormFields/CPFFormField";
-export * from "./components/FormFields/CNPJFormField";
-export * from "./components/FormFields/BirthDateFormField";
-export * from "./components/FormFields/IdentityDocumentNumberFormField";
-export * from "./components/FormFields/AddressFormFields/index";
-export * from "./components/FormFields/RadioGroupFormField";
-export * from "./components/FormFields/CheckboxGroupFormField";
-export * from "./components/FormFields/AddressFormFields/CountryFormField";
-export * from "./components/FormFields/SelectFormField";
-export * from './components/FormFields/EmailFormField';
+// Icon
+export * from "./components/Icon";
+
+// Text
+export * from "./components/Text";
+
+// Components
+export * from "./components/Button";
+export * from "./components/ButtonGroup";
+export * from "./components/Avatar";
+export * from "./components/TextField";
+export * from "./components/RadioGroup";
+export * from "./components/CheckboxGroup";
+export * from "./components/Filter";
+export * from "./components/Dropdown";
+export * from "./components/Badge";
+export * from "./components/Modal";
+export * from "./components/MenuDropdown";
+export * from "./components/Calendar";
+export * from "./components/Drawer";
+export * from "./components/TimePicker";
+export * from "./components/Alert";
+export * from "./components/Switch";
+export * from "./components/Step";
+export * from "./components/Card";
+export * from "./components/TextareaField";
+export * from "./components/Toast";
+export * from "./components/Tooltip";
+export * from "./components/MultiSelect";
+
+// Layouts
+export * from "./components/Flex";
+export * from "./components/Box";
+export * from "./components/Grid";
+export * from "./components/Container";
+export * from "./components/Section";
+
+//Form
+export * from "./components/FormFields/subComponents/ErrorFormMessage";
+export * from "./components/FormFields/subComponents/FormLabel";
+export * from "./components/FormFields/TextAreaFormField";
+export * from "./components/FormFields/TextFormField";
+export * from "./components/FormFields/Form";
+export * from "./components/FormFields/MultiSelectFormField";
+export * from "./components/FormFields/PhoneFormField";
+export * from "./components/FormFields/CPFFormField";
+export * from "./components/FormFields/CNPJFormField";
+export * from "./components/FormFields/BirthDateFormField";
+export * from "./components/FormFields/IdentityDocumentNumberFormField";
+export * from "./components/FormFields/AddressFormFields/index";
+export * from "./components/FormFields/RadioGroupFormField";
+export * from "./components/FormFields/CheckboxGroupFormField";
+export * from "./components/FormFields/AddressFormFields/CountryFormField";
+export * from "./components/FormFields/SelectFormField";
+export * from "./components/FormFields/EmailFormField";
+export * from "./components/FormFields/RichEditorFormField";
+export * from "./components/FormFields/CalendarFormField";
+export * from "./components/FormFields/TimePickerFormField";
+
+// Rich Editor
+export * from "./components/RichEditor";
+
+// Hooks
+export * from "./hooks/useImageUpload";
+
+// Utils
+export * from "./utils/uploadService";