@granto-umbrella/umbrella-components 2.3.1 → 2.3.3
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/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@granto-umbrella/umbrella-components",
|
|
3
|
-
"version": "2.3.
|
|
3
|
+
"version": "2.3.3",
|
|
4
4
|
"description": "Umbrella Components for React",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"main": "src/index.js",
|
|
@@ -35,8 +35,10 @@
|
|
|
35
35
|
"@radix-ui/react-label": "^2.1.3",
|
|
36
36
|
"@radix-ui/react-popover": "^1.1.7",
|
|
37
37
|
"@radix-ui/react-radio-group": "^1.2.4",
|
|
38
|
+
"date-fns": "^4.1.0",
|
|
38
39
|
"lucide-react": "^0.488.0",
|
|
39
40
|
"react": "^18.3.1",
|
|
41
|
+
"react-datepicker": "^8.3.0",
|
|
40
42
|
"react-day-picker": "^9.6.7",
|
|
41
43
|
"react-dom": "^18.3.1",
|
|
42
44
|
"react-hook-form": "^7.54.2",
|
|
@@ -0,0 +1,75 @@
|
|
|
1
|
+
// DatePicker.styles.ts
|
|
2
|
+
import { createGlobalStyle, styled } from "styled-components";
|
|
3
|
+
import ReactDatePicker, {
|
|
4
|
+
DatePickerProps,
|
|
5
|
+
registerLocale,
|
|
6
|
+
} from "react-datepicker";
|
|
7
|
+
import { ptBR } from "date-fns/locale";
|
|
8
|
+
import {
|
|
9
|
+
semanticColors,
|
|
10
|
+
semanticRadius,
|
|
11
|
+
typographyTokens,
|
|
12
|
+
semanticSizes,
|
|
13
|
+
} from "../../../styles/tokens";
|
|
14
|
+
|
|
15
|
+
// register Portuguese‐Brazil locale
|
|
16
|
+
registerLocale("pt-BR", ptBR);
|
|
17
|
+
|
|
18
|
+
// 1) Global overrides for the popup calendar:
|
|
19
|
+
export const DatePickerGlobalStyles = createGlobalStyle`
|
|
20
|
+
.react-datepicker {
|
|
21
|
+
background: ${semanticColors.base.background};
|
|
22
|
+
border: 1px solid ${semanticColors.neutral[300]};
|
|
23
|
+
border-radius: ${semanticRadius.global.radius.md};
|
|
24
|
+
font-family: inherit;
|
|
25
|
+
box-shadow: 0 4px 8px rgba(0,0,0,0.1);
|
|
26
|
+
}
|
|
27
|
+
|
|
28
|
+
.react-datepicker__header {
|
|
29
|
+
background: ${semanticColors.neutral[100]};
|
|
30
|
+
border-bottom: none;
|
|
31
|
+
border-top-left-radius: ${semanticRadius.global.radius.md};
|
|
32
|
+
border-top-right-radius: ${semanticRadius.global.radius.md};
|
|
33
|
+
padding: ${semanticSizes.global.padding.sm};
|
|
34
|
+
}
|
|
35
|
+
|
|
36
|
+
.react-datepicker__current-month {
|
|
37
|
+
font-size: ${typographyTokens.fontSizes.bodyM};
|
|
38
|
+
color: ${semanticColors.base.text};
|
|
39
|
+
}
|
|
40
|
+
|
|
41
|
+
.react-datepicker__day-name,
|
|
42
|
+
.react-datepicker__day {
|
|
43
|
+
width: 2rem;
|
|
44
|
+
line-height: 2rem;
|
|
45
|
+
margin: 0.1rem;
|
|
46
|
+
}
|
|
47
|
+
|
|
48
|
+
.react-datepicker__day--selected {
|
|
49
|
+
background-color: ${semanticColors.branding.surface.enabled};
|
|
50
|
+
color: ${semanticColors.base.background};
|
|
51
|
+
border-radius: 50%;
|
|
52
|
+
}
|
|
53
|
+
|
|
54
|
+
.react-datepicker__triangle {
|
|
55
|
+
display: none;
|
|
56
|
+
}
|
|
57
|
+
`;
|
|
58
|
+
|
|
59
|
+
// 2) Styled input only:
|
|
60
|
+
export const StyledDatePicker = styled(
|
|
61
|
+
ReactDatePicker as unknown as React.ComponentType<DatePickerProps>
|
|
62
|
+
)`
|
|
63
|
+
width: 100%;
|
|
64
|
+
padding: ${semanticSizes.global.padding.sm} ${semanticSizes.global.padding.md};
|
|
65
|
+
border: 1px solid ${semanticColors.neutral[300]};
|
|
66
|
+
border-radius: ${semanticRadius.global.radius.md};
|
|
67
|
+
font-size: ${typographyTokens.fontSizes.bodyM};
|
|
68
|
+
color: ${semanticColors.base.text};
|
|
69
|
+
|
|
70
|
+
&:focus {
|
|
71
|
+
outline: none;
|
|
72
|
+
border-color: ${semanticColors.branding.surface.enabled};
|
|
73
|
+
box-shadow: 0 0 0 2px ${semanticColors.branding.surface.enabled}33;
|
|
74
|
+
}
|
|
75
|
+
`;
|
|
@@ -0,0 +1,57 @@
|
|
|
1
|
+
/* eslint-disable @typescript-eslint/no-explicit-any */
|
|
2
|
+
import React from "react";
|
|
3
|
+
import { DatePickerGlobalStyles, StyledDatePicker } from "./DatePicker.styles";
|
|
4
|
+
|
|
5
|
+
import "react-datepicker/dist/react-datepicker.css";
|
|
6
|
+
|
|
7
|
+
interface DatePickerInputProps {
|
|
8
|
+
mode?: "single" | "range";
|
|
9
|
+
selected: Date | [Date, Date];
|
|
10
|
+
onChange: (date: Date | [Date, Date]) => void;
|
|
11
|
+
minDate?: Date;
|
|
12
|
+
maxDate?: Date;
|
|
13
|
+
placeholder?: string;
|
|
14
|
+
[key: string]: any;
|
|
15
|
+
}
|
|
16
|
+
|
|
17
|
+
export const DatePickerInput: React.FC<DatePickerInputProps> = ({
|
|
18
|
+
mode = "single",
|
|
19
|
+
selected,
|
|
20
|
+
onChange,
|
|
21
|
+
minDate,
|
|
22
|
+
maxDate,
|
|
23
|
+
placeholder,
|
|
24
|
+
...rest
|
|
25
|
+
}) => (
|
|
26
|
+
<>
|
|
27
|
+
{/* inject our calendar overrides */}
|
|
28
|
+
<DatePickerGlobalStyles />
|
|
29
|
+
|
|
30
|
+
{mode === "range" ? (
|
|
31
|
+
<StyledDatePicker
|
|
32
|
+
locale="pt-BR"
|
|
33
|
+
selectsRange
|
|
34
|
+
startDate={(selected as [Date, Date])[0] || undefined}
|
|
35
|
+
endDate={(selected as [Date, Date])[1] || undefined}
|
|
36
|
+
selected={(selected as [Date, Date])[0] || undefined}
|
|
37
|
+
onChange={(d) => onChange(d as [Date, Date])}
|
|
38
|
+
minDate={minDate}
|
|
39
|
+
maxDate={maxDate}
|
|
40
|
+
placeholderText={placeholder}
|
|
41
|
+
dateFormat="dd/MM/yyyy"
|
|
42
|
+
{...rest}
|
|
43
|
+
/>
|
|
44
|
+
) : (
|
|
45
|
+
<StyledDatePicker
|
|
46
|
+
locale="pt-BR"
|
|
47
|
+
selected={selected as Date}
|
|
48
|
+
onChange={(d) => onChange(d as Date)}
|
|
49
|
+
minDate={minDate}
|
|
50
|
+
maxDate={maxDate}
|
|
51
|
+
placeholderText={placeholder}
|
|
52
|
+
dateFormat="dd/MM/yyyy"
|
|
53
|
+
{...rest}
|
|
54
|
+
/>
|
|
55
|
+
)}
|
|
56
|
+
</>
|
|
57
|
+
);
|
package/src/index.ts
CHANGED
|
@@ -51,6 +51,10 @@ import {
|
|
|
51
51
|
useFormField,
|
|
52
52
|
} from "./components/organisms/Form/Form";
|
|
53
53
|
|
|
54
|
+
import { TabToggle } from "./components/molecules/TabToggle/TabToggle";
|
|
55
|
+
|
|
56
|
+
import { DatePickerInput } from "./components/atoms/DatePickerInput/DatePickerInput";
|
|
57
|
+
|
|
54
58
|
// Export all components
|
|
55
59
|
export {
|
|
56
60
|
AlertDialog,
|
|
@@ -60,6 +64,7 @@ export {
|
|
|
60
64
|
ButtonGroup,
|
|
61
65
|
Calendar,
|
|
62
66
|
Checkbox,
|
|
67
|
+
DatePickerInput,
|
|
63
68
|
Dialog,
|
|
64
69
|
DialogContent,
|
|
65
70
|
DialogDescription,
|
|
@@ -88,6 +93,7 @@ export {
|
|
|
88
93
|
StyledDialogClose,
|
|
89
94
|
StyledDialogOverlay,
|
|
90
95
|
Switch,
|
|
96
|
+
TabToggle,
|
|
91
97
|
Text,
|
|
92
98
|
Textarea,
|
|
93
99
|
useFormField,
|