@granto-umbrella/umbrella-components 3.0.55 → 3.0.57

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.
Files changed (21) hide show
  1. package/dist/umbrella-components.es.js +23837 -23609
  2. package/dist/umbrella-components.umd.js +673 -633
  3. package/package.json +1 -2
  4. package/src/components/atoms/Button/Button.types.ts +27 -27
  5. package/src/components/atoms/Checkbox/Checkbox.types.ts +13 -13
  6. package/src/components/atoms/EditableDurationSelect/EditableDurationSelect.styles.ts +50 -0
  7. package/src/components/atoms/EditableDurationSelect/EditableDurationSelect.tsx +136 -0
  8. package/src/components/atoms/EditableDurationSelect/EditableDurationSelect.types.ts +18 -0
  9. package/src/components/atoms/EditableDurationSelect/index.tsx +1 -0
  10. package/src/components/atoms/Textarea/Textarea.types.ts +6 -6
  11. package/src/components/atoms/Tooltip/Tooltip.tsx +60 -60
  12. package/src/components/atoms/Tooltip/Tootip.styles.ts +153 -153
  13. package/src/components/atoms/Tooltip/tooltip.types.ts +8 -8
  14. package/src/components/molecules/RadioGroupField/RadioGroupField.types.ts +0 -2
  15. package/src/components/molecules/TimeLine/TimeLine.mapper.ts +86 -69
  16. package/src/components/molecules/TimeLine/TimeLine.registry.ts +66 -0
  17. package/src/components/molecules/TimeLine/TimeLine.styles.ts +184 -154
  18. package/src/components/molecules/TimeLine/TimeLine.tsx +100 -96
  19. package/src/components/molecules/TimeLine/TimeLine.types.ts +65 -124
  20. package/src/index.ts +161 -159
  21. package/src/styles/tokens/colors.ts +601 -601
package/src/components/molecules/TimeLine/TimeLine.styles.ts CHANGED
@@ -1,154 +1,184 @@
1
- import {
2
- primitiveColors,
3
- semanticColors,
4
- typographyTokens,
5
- } from '../../../styles/tokens';
6
- import styled, { css } from 'styled-components';
7
- import { TimelineVariant } from './TimeLine.types';
8
-
9
- export const Time = styled.time`
10
- color: #6b7280;
11
- font-size: 0.78rem;
12
- `;
13
-
14
- export const ItemWrap = styled.li`
15
- display: grid;
16
- grid-template-columns: 24px 1fr;
17
- gap: 12px;
18
- position: relative;
19
- padding-bottom: 16px;
20
- &:last-child {
21
- padding-bottom: 0;
22
- }
23
- &:not(:last-child)::before {
24
- content: '';
25
- position: absolute;
26
- left: 11px;
27
- top: 34px;
28
- bottom: 0;
29
- width: 3px;
30
- height: 100%;
31
- background-color: ${primitiveColors.gray[200]};
32
- }
33
- `;
34
-
35
- export const Dot = styled.span<{
36
- $variant?: TimelineVariant | string;
37
- }>`
38
- width: 24px;
39
- height: 24px;
40
- border-radius: 50%;
41
- border: 1px solid;
42
- display: inline-block;
43
- margin-top: 0.2rem;
44
- ${({ $variant = 'continued' }) => {
45
- const map: Record<TimelineVariant, ReturnType<typeof css>> = {
46
- continued: css`
47
- background: ${semanticColors.branding.surface.disabled};
48
- `,
49
- accepted: css`
50
- background: ${semanticColors.global.surface.status.online};
51
- `,
52
- rejected: css`
53
- background: ${semanticColors.global.surface.status.notification};
54
- `,
55
- download: css`
56
- background: ${semanticColors.branding.surface.disabled};
57
- `,
58
- issue: css`
59
- background: ${semanticColors.global.surface.status.online};
60
- `,
61
- order: css`
62
- background: ${semanticColors.global.surface.status.online};
63
- `,
64
- };
65
- return map[$variant as TimelineVariant] ?? map['continued'];
66
- }}
67
-
68
- ${({ $variant = 'continued' }) => {
69
- const map: Record<TimelineVariant, ReturnType<typeof css>> = {
70
- continued: css`
71
- border-color: ${semanticColors.branding.surface.enabled};
72
- `,
73
- accepted: css`
74
- border-color: ${semanticColors.global.border.feedback.success};
75
- `,
76
- rejected: css`
77
- border-color: ${semanticColors.global.border.feedback.error};
78
- `,
79
- download: css`
80
- border-color: ${semanticColors.branding.surface.enabled};
81
- `,
82
- issue: css`
83
- border-color: ${semanticColors.global.border.feedback.success};
84
- `,
85
- order: css`
86
- border-color: ${semanticColors.global.border.feedback.success};
87
- `,
88
- };
89
- return map[$variant as TimelineVariant] ?? map['continued'];
90
- }}
91
- `;
92
-
93
- export const Card = styled.div`
94
- background: #fff;
95
- padding: 0px 8px;
96
- margin-top: -4px;
97
- `;
98
-
99
- export const Title = styled.h4`
100
- margin: 0 0 4px 0;
101
- font-size: ${typographyTokens.fontSizes.headingL};
102
- color: ${semanticColors.global.text.default.enabled};
103
- font-weight: ${typographyTokens.fontWeights.semibold};
104
- `;
105
-
106
- export const Sub = styled.div`
107
- color: ${semanticColors.global.text.subtitle.enabled};
108
- font-size: 14px;
109
- `;
110
-
111
- export const Row = styled.div`
112
- display: flex;
113
- flex-wrap: wrap;
114
- gap: 8px;
115
- align-items: center;
116
- `;
117
-
118
- export const List = styled.ol`
119
- list-style: none;
120
- margin: 0;
121
- padding: 0;
122
- gap: 8px;
123
- display: flex;
124
- flex-direction: column;
125
- `;
126
-
127
- export const Empty = styled.div`
128
- display: grid;
129
- gap: 12px;
130
- justify-items: start;
131
- background: #fff;
132
- border: 1px dashed ${primitiveColors.gray[300]};
133
- border-radius: 12px;
134
- padding: 16px;
135
- color: ${semanticColors.global.text.subtitle.enabled};
136
- `;
137
-
138
- export const RetryButton = styled.button`
139
- appearance: none;
140
- border: 1px solid ${semanticColors.branding.surface.enabled};
141
- background: ${semanticColors.branding.surface.enabled};
142
- color: ${primitiveColors.base.white};
143
- border-radius: 10px;
144
- padding: 8px 12px;
145
- font-size: ${typographyTokens.fontSizes.bodyM};
146
- cursor: pointer;
147
-
148
- &:hover {
149
- filter: brightness(0.95);
150
- }
151
- &:active {
152
- filter: brightness(0.9);
153
- }
154
- `;
1
+ import {
2
+ primitiveColors,
3
+ semanticColors,
4
+ typographyTokens,
5
+ } from '../../../styles/tokens';
6
+ import styled, { css } from 'styled-components';
7
+ import { TimelineVariant } from './TimeLine.types';
8
+
9
+ export const Time = styled.time`
10
+ color: #6b7280;
11
+ font-size: 0.78rem;
12
+ `;
13
+
14
+ export const ItemWrap = styled.li`
15
+ display: grid;
16
+ grid-template-columns: 24px 1fr;
17
+ gap: 12px;
18
+ position: relative;
19
+ padding-bottom: 16px;
20
+ &:last-child {
21
+ padding-bottom: 0;
22
+ }
23
+ &:not(:last-child)::before {
24
+ content: '';
25
+ position: absolute;
26
+ left: 11px;
27
+ top: 34px;
28
+ bottom: 0;
29
+ width: 3px;
30
+ height: 100%;
31
+ background-color: ${primitiveColors.gray[200]};
32
+ }
33
+ `;
34
+
35
+ export const Dot = styled.span<{ $variant?: TimelineVariant | string }>`
36
+ width: 24px;
37
+ height: 24px;
38
+ border-radius: 50%;
39
+ border: 1px solid;
40
+ display: inline-block;
41
+ margin-top: 0.2rem;
42
+
43
+ ${({ $variant = 'continued' }) => {
44
+ const v = ($variant as TimelineVariant) || 'continued';
45
+
46
+ const bgMap: Partial<Record<TimelineVariant, ReturnType<typeof css>>> = {
47
+ continued: css`
48
+ background: ${semanticColors.branding.surface.disabled};
49
+ `,
50
+ accepted: css`
51
+ background: ${semanticColors.global.surface.status.online};
52
+ `,
53
+ rejected: css`
54
+ background: ${semanticColors.global.surface.status.notification};
55
+ `,
56
+ download: css`
57
+ background: ${semanticColors.branding.surface.disabled};
58
+ `,
59
+ issue: css`
60
+ background: ${semanticColors.global.surface.status.online};
61
+ `,
62
+ order: css`
63
+ background: ${semanticColors.global.surface.status.online};
64
+ `,
65
+ created: css`
66
+ background: ${semanticColors.global.surface.status.online};
67
+ `,
68
+ updated: css`
69
+ background: ${semanticColors.global.surface.status.online};
70
+ `,
71
+ deleted: css`
72
+ background: ${semanticColors.global.surface.status.notification};
73
+ `,
74
+ info: css`
75
+ background: ${semanticColors.branding.surface.disabled};
76
+ `,
77
+ };
78
+
79
+ return bgMap[v] ?? bgMap.continued!;
80
+ }}
81
+
82
+ ${({ $variant = 'continued' }) => {
83
+ const v = ($variant as TimelineVariant) || 'continued';
84
+
85
+ const borderMap: Partial<Record<TimelineVariant, ReturnType<typeof css>>> =
86
+ {
87
+ continued: css`
88
+ border-color: ${semanticColors.branding.surface.enabled};
89
+ `,
90
+ accepted: css`
91
+ border-color: ${semanticColors.global.border.feedback.success};
92
+ `,
93
+ rejected: css`
94
+ border-color: ${semanticColors.global.border.feedback.error};
95
+ `,
96
+ download: css`
97
+ border-color: ${semanticColors.branding.surface.enabled};
98
+ `,
99
+ issue: css`
100
+ border-color: ${semanticColors.global.border.feedback.success};
101
+ `,
102
+ order: css`
103
+ border-color: ${semanticColors.global.border.feedback.success};
104
+ `,
105
+ created: css`
106
+ border-color: ${semanticColors.global.border.feedback.success};
107
+ `,
108
+ updated: css`
109
+ border-color: ${semanticColors.global.border.feedback.success};
110
+ `,
111
+ deleted: css`
112
+ border-color: ${semanticColors.global.border.feedback.error};
113
+ `,
114
+ info: css`
115
+ border-color: ${semanticColors.branding.surface.enabled};
116
+ `,
117
+ };
118
+
119
+ return borderMap[v] ?? borderMap.continued!;
120
+ }}
121
+ `;
122
+
123
+ export const Card = styled.div`
124
+ background: #fff;
125
+ padding: 0px 8px;
126
+ margin-top: -4px;
127
+ `;
128
+
129
+ export const Title = styled.h4`
130
+ margin: 0 0 4px 0;
131
+ font-size: ${typographyTokens.fontSizes.headingL};
132
+ color: ${semanticColors.global.text.default.enabled};
133
+ font-weight: ${typographyTokens.fontWeights.semibold};
134
+ `;
135
+
136
+ export const Sub = styled.div`
137
+ color: ${semanticColors.global.text.subtitle.enabled};
138
+ font-size: 14px;
139
+ `;
140
+
141
+ export const Row = styled.div`
142
+ display: flex;
143
+ flex-wrap: wrap;
144
+ gap: 8px;
145
+ align-items: center;
146
+ `;
147
+
148
+ export const List = styled.ol`
149
+ list-style: none;
150
+ margin: 0;
151
+ padding: 0;
152
+ gap: 8px;
153
+ display: flex;
154
+ flex-direction: column;
155
+ `;
156
+
157
+ export const Empty = styled.div`
158
+ display: grid;
159
+ gap: 12px;
160
+ justify-items: start;
161
+ background: #fff;
162
+ border: 1px dashed ${primitiveColors.gray[300]};
163
+ border-radius: 12px;
164
+ padding: 16px;
165
+ color: ${semanticColors.global.text.subtitle.enabled};
166
+ `;
167
+
168
+ export const RetryButton = styled.button`
169
+ appearance: none;
170
+ border: 1px solid ${semanticColors.branding.surface.enabled};
171
+ background: ${semanticColors.branding.surface.enabled};
172
+ color: ${primitiveColors.base.white};
173
+ border-radius: 10px;
174
+ padding: 8px 12px;
175
+ font-size: ${typographyTokens.fontSizes.bodyM};
176
+ cursor: pointer;
177
+
178
+ &:hover {
179
+ filter: brightness(0.95);
180
+ }
181
+ &:active {
182
+ filter: brightness(0.9);
183
+ }
184
+ `;
package/src/components/molecules/TimeLine/TimeLine.tsx CHANGED
@@ -1,96 +1,100 @@
1
- // src/components/molecules/TimeLine/TimeLine.tsx
2
- import React from 'react';
3
- import {
4
- ItemWrap,
5
- Card,
6
- Sub,
7
- Row,
8
- Dot,
9
- List,
10
- Title,
11
- Empty,
12
- RetryButton,
13
- } from './TimeLine.styles';
14
- import { TimelineProps } from './TimeLine.types';
15
- import { Skeleton } from '../../atoms/Skeleton/Skeleton';
16
-
17
- export const Timeline: React.FC<TimelineProps> = ({
18
- items,
19
- loading = false,
20
- onRetry,
21
- emptyLabel = 'Nenhum evento encontrado.',
22
- skeletonItems = 3,
23
- }) => {
24
- if (loading) {
25
- return (
26
- <List aria-label="Linha do tempo (carregando)">
27
- {Array.from({ length: skeletonItems }).map((_, i) => (
28
- <ItemWrap key={`sk-${i}`}>
29
- <Skeleton
30
- variant="circle"
31
- width={24}
32
- height={24}
33
- ariaLabel="Carregando ponto da linha do tempo"
34
- />
35
- <Card>
36
- <Title>
37
- <Skeleton variant="text" width="60%" height={32} />
38
- </Title>
39
-
40
- <Sub>
41
- <Skeleton variant="text" width="40%" height={18} />
42
- </Sub>
43
- </Card>
44
- </ItemWrap>
45
- ))}
46
- </List>
47
- );
48
- }
49
-
50
- if (!items || items.length === 0) {
51
- return (
52
- <Empty role="status" aria-live="polite">
53
- <div>{emptyLabel}</div>
54
- {onRetry && (
55
- <RetryButton type="button" onClick={onRetry}>
56
- Tentar novamente
57
- </RetryButton>
58
- )}
59
- </Empty>
60
- );
61
- }
62
-
63
- return (
64
- <List aria-label="Linha do tempo">
65
- {items.map((it) => {
66
- const d = new Date(it.timestamp);
67
- const dateStr = d.toLocaleDateString('pt-BR');
68
- const timeStr = d.toLocaleTimeString('pt-BR', {
69
- hour: '2-digit',
70
- minute: '2-digit',
71
- });
72
-
73
- //const actorName = it.actor?.displayName || 'Sistema';
74
-
75
- return (
76
- <ItemWrap key={it.id}>
77
- {it?.type && <Dot aria-hidden $variant={it.type || 'continued'} />}
78
- <Card>
79
- <Row style={{ justifyContent: 'space-between' }}>
80
- <Title>{it.title}</Title>
81
- </Row>
82
-
83
- <Sub>
84
- <div>
85
- {/*Por: {actorName}{' '}
86
- {dateStr ? `dia ${dateStr} às ${timeStr}` : ''}*/}
87
- Em: {dateStr ? `${dateStr} às ${timeStr}` : ''}
88
- </div>
89
- </Sub>
90
- </Card>
91
- </ItemWrap>
92
- );
93
- })}
94
- </List>
95
- );
96
- };
1
+ import React from 'react';
2
+ import {
3
+ ItemWrap,
4
+ Card,
5
+ Sub,
6
+ Row,
7
+ Dot,
8
+ List,
9
+ Title,
10
+ Empty,
11
+ RetryButton,
12
+ } from './TimeLine.styles';
13
+ import { TimelineProps } from './TimeLine.types';
14
+ import { Skeleton } from '../../atoms/Skeleton/Skeleton';
15
+
16
+ function formatDateTimePtBr(iso: string) {
17
+ const d = new Date(iso);
18
+ if (Number.isNaN(d.getTime())) return { dateStr: '', timeStr: '' };
19
+
20
+ const dateStr = d.toLocaleDateString('pt-BR');
21
+ const timeStr = d.toLocaleTimeString('pt-BR', {
22
+ hour: '2-digit',
23
+ minute: '2-digit',
24
+ });
25
+ return { dateStr, timeStr };
26
+ }
27
+
28
+ export const Timeline: React.FC<TimelineProps> = ({
29
+ items,
30
+ loading = false,
31
+ onRetry,
32
+ emptyLabel = 'Nenhum evento encontrado.',
33
+ skeletonItems = 3,
34
+ }) => {
35
+ if (loading) {
36
+ return (
37
+ <List aria-label="Linha do tempo (carregando)">
38
+ {Array.from({ length: skeletonItems }).map((_, i) => (
39
+ <ItemWrap key={`sk-${i}`}>
40
+ <Skeleton
41
+ variant="circle"
42
+ width={24}
43
+ height={24}
44
+ ariaLabel="Carregando ponto da linha do tempo"
45
+ />
46
+
47
+ <Card>
48
+ <Title>
49
+ <Skeleton variant="text" width="60%" height={32} />
50
+ </Title>
51
+
52
+ <Sub>
53
+ <Skeleton variant="text" width="40%" height={18} />
54
+ </Sub>
55
+ </Card>
56
+ </ItemWrap>
57
+ ))}
58
+ </List>
59
+ );
60
+ }
61
+
62
+ if (!items?.length) {
63
+ return (
64
+ <Empty role="status" aria-live="polite">
65
+ <div>{emptyLabel}</div>
66
+ {onRetry && (
67
+ <RetryButton type="button" onClick={onRetry}>
68
+ Tentar novamente
69
+ </RetryButton>
70
+ )}
71
+ </Empty>
72
+ );
73
+ }
74
+
75
+ return (
76
+ <List aria-label="Linha do tempo">
77
+ {items.map((it) => {
78
+ const { dateStr, timeStr } = formatDateTimePtBr(it.timestamp);
79
+
80
+ return (
81
+ <ItemWrap key={it.id}>
82
+ <Dot aria-hidden $variant={it.type} />
83
+ <Card>
84
+ <Row style={{ justifyContent: 'space-between' }}>
85
+ <Title>{it.title}</Title>
86
+ </Row>
87
+
88
+ <Sub>
89
+ <div>
90
+ Por: {it.actor.displayName} no dia{' '}
91
+ {dateStr ? `${dateStr} às ${timeStr}` : ''}
92
+ </div>
93
+ </Sub>
94
+ </Card>
95
+ </ItemWrap>
96
+ );
97
+ })}
98
+ </List>
99
+ );
100
+ };