@lets-events/react 12.3.10 → 12.4.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/.eslintrc.json +2 -2
- package/.turbo/turbo-build.log +19 -21
- package/CHANGELOG.md +12 -0
- package/dist/index.d.mts +35 -3
- package/dist/index.d.ts +35 -3
- package/dist/index.js +562 -344
- package/dist/index.mjs +535 -319
- package/package.json +1 -1
- package/src/components/Alert.tsx +303 -303
- package/src/components/Avatar.tsx +55 -55
- package/src/components/Badge.tsx +125 -125
- package/src/components/Box.tsx +3 -3
- package/src/components/Button/index.tsx +45 -45
- package/src/components/Button/styledComponents.ts +313 -313
- package/src/components/ButtonGroup.tsx +484 -484
- package/src/components/Calendar/index.tsx +148 -148
- package/src/components/Calendar/styledComponents.ts +259 -250
- package/src/components/Card.tsx +67 -67
- package/src/components/CheckboxGroup.tsx +176 -176
- package/src/components/Container.tsx +39 -39
- package/src/components/Divider.tsx +7 -7
- package/src/components/DoubleCalendar/index.tsx +166 -0
- package/src/components/Drawer/index.tsx +98 -98
- package/src/components/Drawer/styledComponents.ts +103 -103
- package/src/components/Dropdown.tsx +302 -302
- package/src/components/Filter.tsx +164 -164
- package/src/components/Flex.tsx +118 -118
- package/src/components/FormFields/AddressFormFields/CityFormField.tsx +111 -111
- package/src/components/FormFields/AddressFormFields/CountryFormField.tsx +33 -33
- package/src/components/FormFields/AddressFormFields/PostalCodeFormField.tsx +39 -39
- package/src/components/FormFields/AddressFormFields/StateFormField.tsx +32 -32
- package/src/components/FormFields/AddressFormFields/index.tsx +141 -141
- package/src/components/FormFields/BirthDateFormField.tsx +84 -84
- package/src/components/FormFields/CNPJFormField.tsx +87 -87
- package/src/components/FormFields/CPFFormField.tsx +78 -78
- package/src/components/FormFields/CalendarFormField.tsx +95 -95
- package/src/components/FormFields/CheckboxGroupFormField.tsx +91 -91
- package/src/components/FormFields/DoubleCalendarFormField.tsx +90 -0
- package/src/components/FormFields/EmailFormField.tsx +27 -27
- package/src/components/FormFields/Form.tsx +39 -39
- package/src/components/FormFields/IdentityDocumentNumberFormField.tsx +32 -32
- package/src/components/FormFields/MultiSelectFormField.tsx +64 -64
- package/src/components/FormFields/PhoneFormField.tsx +40 -40
- package/src/components/FormFields/RadioGroupFormField.tsx +84 -84
- package/src/components/FormFields/RichEditorFormField.tsx +103 -103
- package/src/components/FormFields/SelectFormField.tsx +93 -93
- package/src/components/FormFields/SwitchFormField.tsx +46 -46
- package/src/components/FormFields/TextAreaFormField.tsx +59 -57
- package/src/components/FormFields/TextFormField.tsx +112 -112
- package/src/components/FormFields/TimePickerFormField.tsx +88 -88
- package/src/components/FormFields/subComponents/ErrorFormMessage.tsx +36 -36
- package/src/components/FormFields/subComponents/FormLabel.tsx +29 -29
- package/src/components/FormFields/utils/validation.ts +23 -23
- package/src/components/Grid.tsx +137 -137
- package/src/components/Icon.tsx +47 -47
- package/src/components/MenuDropdown/index.tsx +38 -38
- package/src/components/MenuDropdown/styledComponents.ts +31 -31
- package/src/components/Modal.tsx +110 -110
- package/src/components/MultiSelect/index.tsx +243 -243
- package/src/components/MultiSelect/styledComponents.ts +160 -160
- package/src/components/RadioGroup.tsx +210 -210
- package/src/components/RichEditor/QuillComponent.tsx +457 -457
- package/src/components/RichEditor/RichEditor.tsx +49 -49
- package/src/components/RichEditor/index.ts +2 -2
- package/src/components/RichEditor/styledComponents.ts +1151 -1151
- package/src/components/Section.tsx +33 -33
- package/src/components/Step.tsx +164 -164
- package/src/components/Switch.tsx +108 -108
- package/src/components/Text.tsx +38 -38
- package/src/components/TextField.tsx +372 -372
- package/src/components/TextareaField.tsx +138 -127
- package/src/components/TimePicker.tsx +328 -328
- package/src/components/Toast/components/ToastItem.tsx +41 -41
- package/src/components/Toast/components/ToastProvider.tsx +63 -63
- package/src/components/Toast/hooks/useToast.ts +12 -12
- package/src/components/Toast/index.tsx +5 -5
- package/src/components/Toast/styles/index.ts +135 -135
- package/src/components/Toast/types/index.ts +46 -46
- package/src/components/Tooltip/index.tsx +66 -66
- package/src/components/Tooltip/styles.ts +77 -77
- package/src/hooks/useCountries.ts +41 -41
- package/src/hooks/useImageUpload.ts +139 -139
- package/src/hooks/useOnClickOutside.tsx +42 -42
- package/src/index.tsx +71 -69
- package/src/styles/index.ts +41 -41
- package/src/types/typographyValues.ts +178 -178
- package/src/utils/getNestedValue.ts +3 -3
- package/src/utils/states.ts +29 -29
- package/src/utils/uploadService.ts +180 -180
- package/tsconfig.json +3 -3
- package/tsup.config.ts +38 -38
|
@@ -1,67 +1,67 @@
|
|
|
1
|
-
import * as React from 'react'
|
|
2
|
-
import * as TooltipPrimitive from '@radix-ui/react-tooltip'
|
|
3
|
-
import { styled } from '../../styles'
|
|
4
|
-
import { Text } from '../Text'
|
|
5
|
-
|
|
6
|
-
const TooltipProvider = TooltipPrimitive.Provider
|
|
7
|
-
const TooltipRoot = TooltipPrimitive.Root
|
|
8
|
-
const TooltipTrigger = TooltipPrimitive.Trigger
|
|
9
|
-
|
|
10
|
-
const TooltipContent = styled(TooltipPrimitive.Content, {
|
|
11
|
-
backgroundColor: '$dark800',
|
|
12
|
-
color: '$neutral50',
|
|
13
|
-
borderRadius: '4px',
|
|
14
|
-
padding: '10px 15px',
|
|
15
|
-
fontSize: '14px',
|
|
16
|
-
lineHeight: 1,
|
|
17
|
-
zIndex: 100,
|
|
18
|
-
boxShadow: '0 2px 10px rgba(0, 0, 0, 0.1)',
|
|
19
|
-
userSelect: 'none',
|
|
20
|
-
animationDuration: '400ms',
|
|
21
|
-
animationTimingFunction: 'cubic-bezier(0.16, 1, 0.3, 1)',
|
|
22
|
-
willChange: 'transform, opacity',
|
|
23
|
-
'&[data-state="delayed-open"][data-side="top"]': {
|
|
24
|
-
animationName: 'slideDownAndFade',
|
|
25
|
-
},
|
|
26
|
-
'&[data-state="delayed-open"][data-side="right"]': {
|
|
27
|
-
animationName: 'slideLeftAndFade',
|
|
28
|
-
},
|
|
29
|
-
'&[data-state="delayed-open"][data-side="bottom"]': {
|
|
30
|
-
animationName: 'slideUpAndFade',
|
|
31
|
-
},
|
|
32
|
-
'&[data-state="delayed-open"][data-side="left"]': {
|
|
33
|
-
animationName: 'slideRightAndFade',
|
|
34
|
-
},
|
|
35
|
-
})
|
|
36
|
-
|
|
37
|
-
const TooltipArrow = styled(TooltipPrimitive.Arrow, {
|
|
38
|
-
fill: '$dark800',
|
|
39
|
-
})
|
|
40
|
-
|
|
41
|
-
export interface TooltipProps {
|
|
42
|
-
children: React.ReactNode
|
|
43
|
-
content: React.ReactNode
|
|
44
|
-
delayDuration?: number
|
|
45
|
-
side?: 'top' | 'right' | 'bottom' | 'left'
|
|
46
|
-
}
|
|
47
|
-
|
|
48
|
-
export function Tooltip({
|
|
49
|
-
children,
|
|
50
|
-
content,
|
|
51
|
-
delayDuration = 200,
|
|
52
|
-
side = 'top',
|
|
53
|
-
}: TooltipProps) {
|
|
54
|
-
return (
|
|
55
|
-
<TooltipProvider>
|
|
56
|
-
<TooltipRoot delayDuration={delayDuration}>
|
|
57
|
-
<TooltipTrigger asChild>{children}</TooltipTrigger>
|
|
58
|
-
<TooltipContent side={side} sideOffset={5}>
|
|
59
|
-
{typeof content === 'string' ? <Text typography={'tooltip'}>{content}</Text>:(content)}
|
|
60
|
-
<TooltipArrow />
|
|
61
|
-
</TooltipContent>
|
|
62
|
-
</TooltipRoot>
|
|
63
|
-
</TooltipProvider>
|
|
64
|
-
)
|
|
65
|
-
}
|
|
66
|
-
|
|
1
|
+
import * as React from 'react'
|
|
2
|
+
import * as TooltipPrimitive from '@radix-ui/react-tooltip'
|
|
3
|
+
import { styled } from '../../styles'
|
|
4
|
+
import { Text } from '../Text'
|
|
5
|
+
|
|
6
|
+
const TooltipProvider = TooltipPrimitive.Provider
|
|
7
|
+
const TooltipRoot = TooltipPrimitive.Root
|
|
8
|
+
const TooltipTrigger = TooltipPrimitive.Trigger
|
|
9
|
+
|
|
10
|
+
const TooltipContent = styled(TooltipPrimitive.Content, {
|
|
11
|
+
backgroundColor: '$dark800',
|
|
12
|
+
color: '$neutral50',
|
|
13
|
+
borderRadius: '4px',
|
|
14
|
+
padding: '10px 15px',
|
|
15
|
+
fontSize: '14px',
|
|
16
|
+
lineHeight: 1,
|
|
17
|
+
zIndex: 100,
|
|
18
|
+
boxShadow: '0 2px 10px rgba(0, 0, 0, 0.1)',
|
|
19
|
+
userSelect: 'none',
|
|
20
|
+
animationDuration: '400ms',
|
|
21
|
+
animationTimingFunction: 'cubic-bezier(0.16, 1, 0.3, 1)',
|
|
22
|
+
willChange: 'transform, opacity',
|
|
23
|
+
'&[data-state="delayed-open"][data-side="top"]': {
|
|
24
|
+
animationName: 'slideDownAndFade',
|
|
25
|
+
},
|
|
26
|
+
'&[data-state="delayed-open"][data-side="right"]': {
|
|
27
|
+
animationName: 'slideLeftAndFade',
|
|
28
|
+
},
|
|
29
|
+
'&[data-state="delayed-open"][data-side="bottom"]': {
|
|
30
|
+
animationName: 'slideUpAndFade',
|
|
31
|
+
},
|
|
32
|
+
'&[data-state="delayed-open"][data-side="left"]': {
|
|
33
|
+
animationName: 'slideRightAndFade',
|
|
34
|
+
},
|
|
35
|
+
})
|
|
36
|
+
|
|
37
|
+
const TooltipArrow = styled(TooltipPrimitive.Arrow, {
|
|
38
|
+
fill: '$dark800',
|
|
39
|
+
})
|
|
40
|
+
|
|
41
|
+
export interface TooltipProps {
|
|
42
|
+
children: React.ReactNode
|
|
43
|
+
content: React.ReactNode
|
|
44
|
+
delayDuration?: number
|
|
45
|
+
side?: 'top' | 'right' | 'bottom' | 'left'
|
|
46
|
+
}
|
|
47
|
+
|
|
48
|
+
export function Tooltip({
|
|
49
|
+
children,
|
|
50
|
+
content,
|
|
51
|
+
delayDuration = 200,
|
|
52
|
+
side = 'top',
|
|
53
|
+
}: TooltipProps) {
|
|
54
|
+
return (
|
|
55
|
+
<TooltipProvider>
|
|
56
|
+
<TooltipRoot delayDuration={delayDuration}>
|
|
57
|
+
<TooltipTrigger asChild>{children}</TooltipTrigger>
|
|
58
|
+
<TooltipContent side={side} sideOffset={5}>
|
|
59
|
+
{typeof content === 'string' ? <Text typography={'tooltip'}>{content}</Text>:(content)}
|
|
60
|
+
<TooltipArrow />
|
|
61
|
+
</TooltipContent>
|
|
62
|
+
</TooltipRoot>
|
|
63
|
+
</TooltipProvider>
|
|
64
|
+
)
|
|
65
|
+
}
|
|
66
|
+
|
|
67
67
|
export { TooltipProvider, TooltipRoot, TooltipTrigger, TooltipContent }
|
|
@@ -1,78 +1,78 @@
|
|
|
1
|
-
import { keyframes } from '@stitches/react'
|
|
2
|
-
import { styled } from '../../styles'
|
|
3
|
-
|
|
4
|
-
const slideUpAndFade = keyframes({
|
|
5
|
-
from: {
|
|
6
|
-
opacity: 0,
|
|
7
|
-
transform: 'translateY(2px)',
|
|
8
|
-
},
|
|
9
|
-
to: {
|
|
10
|
-
opacity: 1,
|
|
11
|
-
transform: 'translateY(0)',
|
|
12
|
-
},
|
|
13
|
-
})
|
|
14
|
-
|
|
15
|
-
const slideRightAndFade = keyframes({
|
|
16
|
-
from: {
|
|
17
|
-
opacity: 0,
|
|
18
|
-
transform: 'translateX(-2px)',
|
|
19
|
-
},
|
|
20
|
-
to: {
|
|
21
|
-
opacity: 1,
|
|
22
|
-
transform: 'translateX(0)',
|
|
23
|
-
},
|
|
24
|
-
})
|
|
25
|
-
|
|
26
|
-
const slideDownAndFade = keyframes({
|
|
27
|
-
from: {
|
|
28
|
-
opacity: 0,
|
|
29
|
-
transform: 'translateY(-2px)',
|
|
30
|
-
},
|
|
31
|
-
to: {
|
|
32
|
-
opacity: 1,
|
|
33
|
-
transform: 'translateY(0)',
|
|
34
|
-
},
|
|
35
|
-
})
|
|
36
|
-
|
|
37
|
-
const slideLeftAndFade = keyframes({
|
|
38
|
-
from: {
|
|
39
|
-
opacity: 0,
|
|
40
|
-
transform: 'translateX(2px)',
|
|
41
|
-
},
|
|
42
|
-
to: {
|
|
43
|
-
opacity: 1,
|
|
44
|
-
transform: 'translateX(0)',
|
|
45
|
-
},
|
|
46
|
-
})
|
|
47
|
-
|
|
48
|
-
export const TooltipContentStyled = styled('div', {
|
|
49
|
-
fontFamily: '$default',
|
|
50
|
-
backgroundColor: '$dark700',
|
|
51
|
-
color: '$dark50',
|
|
52
|
-
borderRadius: '$sm',
|
|
53
|
-
padding: '$10 $14',
|
|
54
|
-
fontSize: '$13',
|
|
55
|
-
lineHeight: '$base',
|
|
56
|
-
boxShadow: '0px 4px 4px 0px rgba(35, 53, 67, 0.08)',
|
|
57
|
-
userSelect: 'none',
|
|
58
|
-
animationDuration: '400ms',
|
|
59
|
-
animationTimingFunction: 'cubic-bezier(0.16, 1, 0.3, 1)',
|
|
60
|
-
willChange: 'transform, opacity',
|
|
61
|
-
|
|
62
|
-
'&[data-state="delayed-open"][data-side="top"]': {
|
|
63
|
-
animationName: `${slideDownAndFade}`,
|
|
64
|
-
},
|
|
65
|
-
'&[data-state="delayed-open"][data-side="right"]': {
|
|
66
|
-
animationName: `${slideLeftAndFade}`,
|
|
67
|
-
},
|
|
68
|
-
'&[data-state="delayed-open"][data-side="bottom"]': {
|
|
69
|
-
animationName: `${slideUpAndFade}`,
|
|
70
|
-
},
|
|
71
|
-
'&[data-state="delayed-open"][data-side="left"]': {
|
|
72
|
-
animationName: `${slideRightAndFade}`,
|
|
73
|
-
},
|
|
74
|
-
})
|
|
75
|
-
|
|
76
|
-
export const TooltipArrow = styled('div', {
|
|
77
|
-
fill: '$dark700',
|
|
1
|
+
import { keyframes } from '@stitches/react'
|
|
2
|
+
import { styled } from '../../styles'
|
|
3
|
+
|
|
4
|
+
const slideUpAndFade = keyframes({
|
|
5
|
+
from: {
|
|
6
|
+
opacity: 0,
|
|
7
|
+
transform: 'translateY(2px)',
|
|
8
|
+
},
|
|
9
|
+
to: {
|
|
10
|
+
opacity: 1,
|
|
11
|
+
transform: 'translateY(0)',
|
|
12
|
+
},
|
|
13
|
+
})
|
|
14
|
+
|
|
15
|
+
const slideRightAndFade = keyframes({
|
|
16
|
+
from: {
|
|
17
|
+
opacity: 0,
|
|
18
|
+
transform: 'translateX(-2px)',
|
|
19
|
+
},
|
|
20
|
+
to: {
|
|
21
|
+
opacity: 1,
|
|
22
|
+
transform: 'translateX(0)',
|
|
23
|
+
},
|
|
24
|
+
})
|
|
25
|
+
|
|
26
|
+
const slideDownAndFade = keyframes({
|
|
27
|
+
from: {
|
|
28
|
+
opacity: 0,
|
|
29
|
+
transform: 'translateY(-2px)',
|
|
30
|
+
},
|
|
31
|
+
to: {
|
|
32
|
+
opacity: 1,
|
|
33
|
+
transform: 'translateY(0)',
|
|
34
|
+
},
|
|
35
|
+
})
|
|
36
|
+
|
|
37
|
+
const slideLeftAndFade = keyframes({
|
|
38
|
+
from: {
|
|
39
|
+
opacity: 0,
|
|
40
|
+
transform: 'translateX(2px)',
|
|
41
|
+
},
|
|
42
|
+
to: {
|
|
43
|
+
opacity: 1,
|
|
44
|
+
transform: 'translateX(0)',
|
|
45
|
+
},
|
|
46
|
+
})
|
|
47
|
+
|
|
48
|
+
export const TooltipContentStyled = styled('div', {
|
|
49
|
+
fontFamily: '$default',
|
|
50
|
+
backgroundColor: '$dark700',
|
|
51
|
+
color: '$dark50',
|
|
52
|
+
borderRadius: '$sm',
|
|
53
|
+
padding: '$10 $14',
|
|
54
|
+
fontSize: '$13',
|
|
55
|
+
lineHeight: '$base',
|
|
56
|
+
boxShadow: '0px 4px 4px 0px rgba(35, 53, 67, 0.08)',
|
|
57
|
+
userSelect: 'none',
|
|
58
|
+
animationDuration: '400ms',
|
|
59
|
+
animationTimingFunction: 'cubic-bezier(0.16, 1, 0.3, 1)',
|
|
60
|
+
willChange: 'transform, opacity',
|
|
61
|
+
|
|
62
|
+
'&[data-state="delayed-open"][data-side="top"]': {
|
|
63
|
+
animationName: `${slideDownAndFade}`,
|
|
64
|
+
},
|
|
65
|
+
'&[data-state="delayed-open"][data-side="right"]': {
|
|
66
|
+
animationName: `${slideLeftAndFade}`,
|
|
67
|
+
},
|
|
68
|
+
'&[data-state="delayed-open"][data-side="bottom"]': {
|
|
69
|
+
animationName: `${slideUpAndFade}`,
|
|
70
|
+
},
|
|
71
|
+
'&[data-state="delayed-open"][data-side="left"]': {
|
|
72
|
+
animationName: `${slideRightAndFade}`,
|
|
73
|
+
},
|
|
74
|
+
})
|
|
75
|
+
|
|
76
|
+
export const TooltipArrow = styled('div', {
|
|
77
|
+
fill: '$dark700',
|
|
78
78
|
})
|
|
@@ -1,41 +1,41 @@
|
|
|
1
|
-
import countries from "i18n-iso-countries";
|
|
2
|
-
import pt from "i18n-iso-countries/langs/pt.json";
|
|
3
|
-
import en from "i18n-iso-countries/langs/en.json";
|
|
4
|
-
import es from "i18n-iso-countries/langs/es.json";
|
|
5
|
-
|
|
6
|
-
type Language = "pt-BR" | "en" | "es";
|
|
7
|
-
|
|
8
|
-
type Option = {
|
|
9
|
-
value: string;
|
|
10
|
-
label: string;
|
|
11
|
-
};
|
|
12
|
-
|
|
13
|
-
export function useCountries(language: Language = "pt-BR"): Option[] {
|
|
14
|
-
countries.registerLocale(pt);
|
|
15
|
-
countries.registerLocale(en);
|
|
16
|
-
countries.registerLocale(es);
|
|
17
|
-
|
|
18
|
-
const langMap = {
|
|
19
|
-
"pt-BR": "pt",
|
|
20
|
-
en: "en",
|
|
21
|
-
es: "es",
|
|
22
|
-
} as const;
|
|
23
|
-
|
|
24
|
-
const langCode = langMap[language];
|
|
25
|
-
|
|
26
|
-
const namesPT = countries.getNames("pt", { select: "official" });
|
|
27
|
-
const namesLang = countries.getNames(langCode, { select: "official" });
|
|
28
|
-
|
|
29
|
-
return Object.entries(namesPT).map(([_, namePT]) => {
|
|
30
|
-
const nameTranslated =
|
|
31
|
-
Object.entries(namesLang).find(([, name]) => namePT === name) ??
|
|
32
|
-
Object.entries(namesPT).find(([, name]) => name === namePT);
|
|
33
|
-
|
|
34
|
-
const label = nameTranslated?.[1] || namePT;
|
|
35
|
-
|
|
36
|
-
return {
|
|
37
|
-
value: namePT,
|
|
38
|
-
label,
|
|
39
|
-
};
|
|
40
|
-
});
|
|
41
|
-
}
|
|
1
|
+
import countries from "i18n-iso-countries";
|
|
2
|
+
import pt from "i18n-iso-countries/langs/pt.json";
|
|
3
|
+
import en from "i18n-iso-countries/langs/en.json";
|
|
4
|
+
import es from "i18n-iso-countries/langs/es.json";
|
|
5
|
+
|
|
6
|
+
type Language = "pt-BR" | "en" | "es";
|
|
7
|
+
|
|
8
|
+
type Option = {
|
|
9
|
+
value: string;
|
|
10
|
+
label: string;
|
|
11
|
+
};
|
|
12
|
+
|
|
13
|
+
export function useCountries(language: Language = "pt-BR"): Option[] {
|
|
14
|
+
countries.registerLocale(pt);
|
|
15
|
+
countries.registerLocale(en);
|
|
16
|
+
countries.registerLocale(es);
|
|
17
|
+
|
|
18
|
+
const langMap = {
|
|
19
|
+
"pt-BR": "pt",
|
|
20
|
+
en: "en",
|
|
21
|
+
es: "es",
|
|
22
|
+
} as const;
|
|
23
|
+
|
|
24
|
+
const langCode = langMap[language];
|
|
25
|
+
|
|
26
|
+
const namesPT = countries.getNames("pt", { select: "official" });
|
|
27
|
+
const namesLang = countries.getNames(langCode, { select: "official" });
|
|
28
|
+
|
|
29
|
+
return Object.entries(namesPT).map(([_, namePT]) => {
|
|
30
|
+
const nameTranslated =
|
|
31
|
+
Object.entries(namesLang).find(([, name]) => namePT === name) ??
|
|
32
|
+
Object.entries(namesPT).find(([, name]) => name === namePT);
|
|
33
|
+
|
|
34
|
+
const label = nameTranslated?.[1] || namePT;
|
|
35
|
+
|
|
36
|
+
return {
|
|
37
|
+
value: namePT,
|
|
38
|
+
label,
|
|
39
|
+
};
|
|
40
|
+
});
|
|
41
|
+
}
|
|
@@ -1,139 +1,139 @@
|
|
|
1
|
-
import { useState, useCallback } from "react";
|
|
2
|
-
import { UploadService, UploadConfig } from "../utils/uploadService";
|
|
3
|
-
|
|
4
|
-
interface UploadProgress {
|
|
5
|
-
amount: number;
|
|
6
|
-
message: string;
|
|
7
|
-
}
|
|
8
|
-
|
|
9
|
-
interface UploadedFile {
|
|
10
|
-
url: string;
|
|
11
|
-
filename: string;
|
|
12
|
-
size: number;
|
|
13
|
-
type: string;
|
|
14
|
-
}
|
|
15
|
-
|
|
16
|
-
interface UseImageUploadOptions {
|
|
17
|
-
onSuccess?: (file: UploadedFile) => void;
|
|
18
|
-
onError?: (error: string) => void;
|
|
19
|
-
onProgress?: (progress: UploadProgress) => void;
|
|
20
|
-
maxFileSize?: number;
|
|
21
|
-
allowedTypes?: string[];
|
|
22
|
-
uploadConfig: UploadConfig;
|
|
23
|
-
}
|
|
24
|
-
|
|
25
|
-
export const useImageUpload = (options: UseImageUploadOptions) => {
|
|
26
|
-
const [isUploading, setIsUploading] = useState(false);
|
|
27
|
-
const [progress, setProgress] = useState<UploadProgress | null>(null);
|
|
28
|
-
const [error, setError] = useState<string | null>(null);
|
|
29
|
-
|
|
30
|
-
const {
|
|
31
|
-
onSuccess,
|
|
32
|
-
onError,
|
|
33
|
-
onProgress,
|
|
34
|
-
maxFileSize = 5 * 1024 * 1024, // 5MB default
|
|
35
|
-
allowedTypes = ["image/jpeg", "image/png", "image/gif", "image/webp"],
|
|
36
|
-
uploadConfig,
|
|
37
|
-
} = options;
|
|
38
|
-
|
|
39
|
-
const validateFile = useCallback(
|
|
40
|
-
(file: File): boolean => {
|
|
41
|
-
if (!allowedTypes.includes(file.type)) {
|
|
42
|
-
const errorMsg = "Tipo de arquivo não suportado";
|
|
43
|
-
setError(errorMsg);
|
|
44
|
-
onError?.(errorMsg);
|
|
45
|
-
return false;
|
|
46
|
-
}
|
|
47
|
-
|
|
48
|
-
if (file.size > maxFileSize) {
|
|
49
|
-
const errorMsg = `Arquivo muito grande. Máximo: ${(
|
|
50
|
-
maxFileSize /
|
|
51
|
-
1024 /
|
|
52
|
-
1024
|
|
53
|
-
).toFixed(1)}MB`;
|
|
54
|
-
setError(errorMsg);
|
|
55
|
-
onError?.(errorMsg);
|
|
56
|
-
return false;
|
|
57
|
-
}
|
|
58
|
-
|
|
59
|
-
return true;
|
|
60
|
-
},
|
|
61
|
-
[allowedTypes, maxFileSize, onError]
|
|
62
|
-
);
|
|
63
|
-
|
|
64
|
-
const uploadFile = useCallback(
|
|
65
|
-
async (file: File): Promise<UploadedFile | null> => {
|
|
66
|
-
if (!validateFile(file)) {
|
|
67
|
-
return null;
|
|
68
|
-
}
|
|
69
|
-
|
|
70
|
-
setIsUploading(true);
|
|
71
|
-
setError(null);
|
|
72
|
-
setProgress(null);
|
|
73
|
-
|
|
74
|
-
try {
|
|
75
|
-
// Tenta upload via S3 com URL pré-assinada primeiro
|
|
76
|
-
const uploadedFile = await UploadService.uploadToS3(
|
|
77
|
-
file,
|
|
78
|
-
uploadConfig,
|
|
79
|
-
(progress) => {
|
|
80
|
-
setProgress(progress);
|
|
81
|
-
onProgress?.(progress);
|
|
82
|
-
}
|
|
83
|
-
);
|
|
84
|
-
|
|
85
|
-
setIsUploading(false);
|
|
86
|
-
setProgress(null);
|
|
87
|
-
onSuccess?.(uploadedFile);
|
|
88
|
-
return uploadedFile;
|
|
89
|
-
} catch (error) {
|
|
90
|
-
console.error("Erro no upload S3:", error);
|
|
91
|
-
|
|
92
|
-
// Fallback para upload via API tradicional
|
|
93
|
-
try {
|
|
94
|
-
setProgress({
|
|
95
|
-
amount: 0,
|
|
96
|
-
message: "Tentando método alternativo...",
|
|
97
|
-
});
|
|
98
|
-
|
|
99
|
-
const uploadedFile = await UploadService.uploadViaAPI(
|
|
100
|
-
file,
|
|
101
|
-
uploadConfig,
|
|
102
|
-
(progress) => {
|
|
103
|
-
setProgress(progress);
|
|
104
|
-
onProgress?.(progress);
|
|
105
|
-
}
|
|
106
|
-
);
|
|
107
|
-
|
|
108
|
-
setIsUploading(false);
|
|
109
|
-
setProgress(null);
|
|
110
|
-
onSuccess?.(uploadedFile);
|
|
111
|
-
return uploadedFile;
|
|
112
|
-
} catch (fallbackError) {
|
|
113
|
-
console.error("Erro no fallback:", fallbackError);
|
|
114
|
-
const errorMsg = "Falha no upload da imagem. Tente novamente.";
|
|
115
|
-
setError(errorMsg);
|
|
116
|
-
setIsUploading(false);
|
|
117
|
-
setProgress(null);
|
|
118
|
-
onError?.(errorMsg);
|
|
119
|
-
return null;
|
|
120
|
-
}
|
|
121
|
-
}
|
|
122
|
-
},
|
|
123
|
-
[validateFile, onSuccess, onError, onProgress]
|
|
124
|
-
);
|
|
125
|
-
|
|
126
|
-
const reset = useCallback(() => {
|
|
127
|
-
setIsUploading(false);
|
|
128
|
-
setProgress(null);
|
|
129
|
-
setError(null);
|
|
130
|
-
}, []);
|
|
131
|
-
|
|
132
|
-
return {
|
|
133
|
-
uploadFile,
|
|
134
|
-
isUploading,
|
|
135
|
-
progress,
|
|
136
|
-
error,
|
|
137
|
-
reset,
|
|
138
|
-
};
|
|
139
|
-
};
|
|
1
|
+
import { useState, useCallback } from "react";
|
|
2
|
+
import { UploadService, UploadConfig } from "../utils/uploadService";
|
|
3
|
+
|
|
4
|
+
interface UploadProgress {
|
|
5
|
+
amount: number;
|
|
6
|
+
message: string;
|
|
7
|
+
}
|
|
8
|
+
|
|
9
|
+
interface UploadedFile {
|
|
10
|
+
url: string;
|
|
11
|
+
filename: string;
|
|
12
|
+
size: number;
|
|
13
|
+
type: string;
|
|
14
|
+
}
|
|
15
|
+
|
|
16
|
+
interface UseImageUploadOptions {
|
|
17
|
+
onSuccess?: (file: UploadedFile) => void;
|
|
18
|
+
onError?: (error: string) => void;
|
|
19
|
+
onProgress?: (progress: UploadProgress) => void;
|
|
20
|
+
maxFileSize?: number;
|
|
21
|
+
allowedTypes?: string[];
|
|
22
|
+
uploadConfig: UploadConfig;
|
|
23
|
+
}
|
|
24
|
+
|
|
25
|
+
export const useImageUpload = (options: UseImageUploadOptions) => {
|
|
26
|
+
const [isUploading, setIsUploading] = useState(false);
|
|
27
|
+
const [progress, setProgress] = useState<UploadProgress | null>(null);
|
|
28
|
+
const [error, setError] = useState<string | null>(null);
|
|
29
|
+
|
|
30
|
+
const {
|
|
31
|
+
onSuccess,
|
|
32
|
+
onError,
|
|
33
|
+
onProgress,
|
|
34
|
+
maxFileSize = 5 * 1024 * 1024, // 5MB default
|
|
35
|
+
allowedTypes = ["image/jpeg", "image/png", "image/gif", "image/webp"],
|
|
36
|
+
uploadConfig,
|
|
37
|
+
} = options;
|
|
38
|
+
|
|
39
|
+
const validateFile = useCallback(
|
|
40
|
+
(file: File): boolean => {
|
|
41
|
+
if (!allowedTypes.includes(file.type)) {
|
|
42
|
+
const errorMsg = "Tipo de arquivo não suportado";
|
|
43
|
+
setError(errorMsg);
|
|
44
|
+
onError?.(errorMsg);
|
|
45
|
+
return false;
|
|
46
|
+
}
|
|
47
|
+
|
|
48
|
+
if (file.size > maxFileSize) {
|
|
49
|
+
const errorMsg = `Arquivo muito grande. Máximo: ${(
|
|
50
|
+
maxFileSize /
|
|
51
|
+
1024 /
|
|
52
|
+
1024
|
|
53
|
+
).toFixed(1)}MB`;
|
|
54
|
+
setError(errorMsg);
|
|
55
|
+
onError?.(errorMsg);
|
|
56
|
+
return false;
|
|
57
|
+
}
|
|
58
|
+
|
|
59
|
+
return true;
|
|
60
|
+
},
|
|
61
|
+
[allowedTypes, maxFileSize, onError]
|
|
62
|
+
);
|
|
63
|
+
|
|
64
|
+
const uploadFile = useCallback(
|
|
65
|
+
async (file: File): Promise<UploadedFile | null> => {
|
|
66
|
+
if (!validateFile(file)) {
|
|
67
|
+
return null;
|
|
68
|
+
}
|
|
69
|
+
|
|
70
|
+
setIsUploading(true);
|
|
71
|
+
setError(null);
|
|
72
|
+
setProgress(null);
|
|
73
|
+
|
|
74
|
+
try {
|
|
75
|
+
// Tenta upload via S3 com URL pré-assinada primeiro
|
|
76
|
+
const uploadedFile = await UploadService.uploadToS3(
|
|
77
|
+
file,
|
|
78
|
+
uploadConfig,
|
|
79
|
+
(progress) => {
|
|
80
|
+
setProgress(progress);
|
|
81
|
+
onProgress?.(progress);
|
|
82
|
+
}
|
|
83
|
+
);
|
|
84
|
+
|
|
85
|
+
setIsUploading(false);
|
|
86
|
+
setProgress(null);
|
|
87
|
+
onSuccess?.(uploadedFile);
|
|
88
|
+
return uploadedFile;
|
|
89
|
+
} catch (error) {
|
|
90
|
+
console.error("Erro no upload S3:", error);
|
|
91
|
+
|
|
92
|
+
// Fallback para upload via API tradicional
|
|
93
|
+
try {
|
|
94
|
+
setProgress({
|
|
95
|
+
amount: 0,
|
|
96
|
+
message: "Tentando método alternativo...",
|
|
97
|
+
});
|
|
98
|
+
|
|
99
|
+
const uploadedFile = await UploadService.uploadViaAPI(
|
|
100
|
+
file,
|
|
101
|
+
uploadConfig,
|
|
102
|
+
(progress) => {
|
|
103
|
+
setProgress(progress);
|
|
104
|
+
onProgress?.(progress);
|
|
105
|
+
}
|
|
106
|
+
);
|
|
107
|
+
|
|
108
|
+
setIsUploading(false);
|
|
109
|
+
setProgress(null);
|
|
110
|
+
onSuccess?.(uploadedFile);
|
|
111
|
+
return uploadedFile;
|
|
112
|
+
} catch (fallbackError) {
|
|
113
|
+
console.error("Erro no fallback:", fallbackError);
|
|
114
|
+
const errorMsg = "Falha no upload da imagem. Tente novamente.";
|
|
115
|
+
setError(errorMsg);
|
|
116
|
+
setIsUploading(false);
|
|
117
|
+
setProgress(null);
|
|
118
|
+
onError?.(errorMsg);
|
|
119
|
+
return null;
|
|
120
|
+
}
|
|
121
|
+
}
|
|
122
|
+
},
|
|
123
|
+
[validateFile, onSuccess, onError, onProgress]
|
|
124
|
+
);
|
|
125
|
+
|
|
126
|
+
const reset = useCallback(() => {
|
|
127
|
+
setIsUploading(false);
|
|
128
|
+
setProgress(null);
|
|
129
|
+
setError(null);
|
|
130
|
+
}, []);
|
|
131
|
+
|
|
132
|
+
return {
|
|
133
|
+
uploadFile,
|
|
134
|
+
isUploading,
|
|
135
|
+
progress,
|
|
136
|
+
error,
|
|
137
|
+
reset,
|
|
138
|
+
};
|
|
139
|
+
};
|