react-native-exp-fig 2.0.1 → 2.0.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.
Files changed (54) hide show
  1. package/lib/commonjs/components/box/index.js +4 -4
  2. package/lib/commonjs/components/card-loading/index.js +26 -24
  3. package/lib/commonjs/components/card-loading/index.js.map +1 -1
  4. package/lib/commonjs/components/header-profile/index.js +69 -63
  5. package/lib/commonjs/components/header-profile/index.js.map +1 -1
  6. package/lib/commonjs/components/history-details/index.js +4 -4
  7. package/lib/commonjs/components/loading-details/index.js +6 -6
  8. package/lib/commonjs/components/loading-details/index.js.map +1 -1
  9. package/lib/commonjs/components/user-profile/index.js +9 -10
  10. package/lib/commonjs/components/user-profile/index.js.map +1 -1
  11. package/lib/commonjs/index.js +3 -3
  12. package/lib/commonjs/index.js.map +1 -1
  13. package/lib/commonjs/stories/header-profile/header-profile.stories.js +7 -17
  14. package/lib/commonjs/stories/header-profile/header-profile.stories.js.map +1 -1
  15. package/lib/commonjs/styles/theme/theme.js +5 -5
  16. package/lib/commonjs/utils/status-color/return-color.js +2 -2
  17. package/lib/commonjs/utils/status-color/return-color.js.map +1 -1
  18. package/lib/module/components/box/index.js +4 -4
  19. package/lib/module/components/card-loading/index.js +27 -25
  20. package/lib/module/components/card-loading/index.js.map +1 -1
  21. package/lib/module/components/header-profile/index.js +68 -62
  22. package/lib/module/components/header-profile/index.js.map +1 -1
  23. package/lib/module/components/history-details/index.js +4 -4
  24. package/lib/module/components/loading-details/index.js +6 -6
  25. package/lib/module/components/loading-details/index.js.map +1 -1
  26. package/lib/module/components/user-profile/index.js +9 -10
  27. package/lib/module/components/user-profile/index.js.map +1 -1
  28. package/lib/module/index.js +3 -3
  29. package/lib/module/index.js.map +1 -1
  30. package/lib/module/stories/header-profile/header-profile.stories.js +5 -16
  31. package/lib/module/stories/header-profile/header-profile.stories.js.map +1 -1
  32. package/lib/module/styles/theme/theme.js +5 -5
  33. package/lib/module/utils/status-color/return-color.js +2 -2
  34. package/lib/module/utils/status-color/return-color.js.map +1 -1
  35. package/lib/typescript/src/components/card-loading/index.d.ts.map +1 -1
  36. package/lib/typescript/src/components/header-profile/index.d.ts +66 -5
  37. package/lib/typescript/src/components/header-profile/index.d.ts.map +1 -1
  38. package/lib/typescript/src/components/user-profile/index.d.ts.map +1 -1
  39. package/lib/typescript/src/index.d.ts +1 -1
  40. package/lib/typescript/src/index.d.ts.map +1 -1
  41. package/lib/typescript/src/stories/header-profile/header-profile.stories.d.ts +1 -1
  42. package/lib/typescript/src/stories/header-profile/header-profile.stories.d.ts.map +1 -1
  43. package/package.json +1 -1
  44. package/src/components/box/index.tsx +49 -49
  45. package/src/components/card-loading/index.tsx +294 -290
  46. package/src/components/header-profile/index.tsx +148 -132
  47. package/src/components/header-profile/interface.d.ts +145 -57
  48. package/src/components/history-details/index.tsx +99 -99
  49. package/src/components/loading-details/index.tsx +156 -156
  50. package/src/components/user-profile/index.tsx +206 -204
  51. package/src/index.ts +48 -48
  52. package/src/stories/header-profile/header-profile.stories.tsx +92 -103
  53. package/src/styles/theme/theme.ts +193 -193
  54. package/src/utils/status-color/return-color.ts +34 -34
@@ -1,99 +1,99 @@
1
- /**
2
- * IMPORTS
3
- */
4
- import React from "react";
5
-
6
- // components
7
- import { Box } from "../box";
8
- import { Typography } from "../typography";
9
-
10
- // typings
11
- import { IHistoryDetails } from "./interface";
12
-
13
- // styles
14
- import { theme } from "../../styles/theme/theme";
15
-
16
- const HistoryDetails: React.FC<IHistoryDetails> = ({
17
- numero = "01020304050607",
18
- local = "Doca 1, Pátio 02 - Usimais (Ipatinga)",
19
- date = "24/03/2025",
20
- duracao = "00:30",
21
- }) => {
22
- return (
23
- <Box width="100%" borderStyled={{ borderRadius: 8 }} backgroundColor={theme.colors.blue[400]}>
24
- <Box
25
- flexStyle={{
26
- flexDirection: "column",
27
- justifyContent: "flex-start",
28
- alignItems: "flex-start",
29
- }}
30
- paddingStyle={{ padding: theme.paddings.xs }}
31
- >
32
- <Typography
33
- text={`Carregamento - #${numero}`}
34
- size={theme.fontSizes.sm}
35
- fontFamily={theme.fonts.inter_semi_bold_600}
36
- fontWeight="600"
37
- color={theme.colors.neutral[25]}
38
- lineHeight={theme.fontSizes.xl}
39
- letterSpacing={"regular"}
40
- />
41
-
42
- <Typography
43
- text={local}
44
- color={theme.colors.neutral[25]}
45
- size={theme.fontSizes.xs}
46
- lineHeight={theme.fontSizes.lg}
47
- fontFamily={theme.fonts.inter_regular_400}
48
- letterSpacing={"regular"}
49
- numberOfLines={1}
50
- />
51
- <Typography
52
- text={`Data carregamento: ${date}`}
53
- color={theme.colors.neutral[25]}
54
- size={theme.fontSizes.xs}
55
- fontFamily={theme.fonts.inter_regular_400}
56
- lineHeight={theme.fontSizes.lg}
57
- letterSpacing={"regular"}
58
- numberOfLines={1}
59
- />
60
- </Box>
61
-
62
- <Box height={1} backgroundColor={theme.colors.gray[950]} />
63
-
64
- <Box
65
- flexStyle={{
66
- flexDirection: "row",
67
- justifyContent: "space-between",
68
- alignItems: "center",
69
- }}
70
- paddingStyle={{ padding: theme.paddings.xs }}
71
- >
72
- <Typography
73
- text={"DURAÇÃO:"}
74
- color={theme.colors.neutral[25]}
75
- size={24}
76
- fontFamily={theme.fonts.inter_regular_400}
77
- fontWeight="400"
78
- lineHeight={theme.fontSizes["3xl"]}
79
- letterSpacing={"regular"}
80
- />
81
- <Typography
82
- text={duracao}
83
- color={theme.colors.neutral[25]}
84
- size={26}
85
- align="left"
86
- fontFamily={theme.fonts.inter_medium_500}
87
- fontWeight="500"
88
- lineHeight={theme.fontSizes["3xl"]}
89
- letterSpacing={"regular"}
90
- />
91
- </Box>
92
- </Box>
93
- );
94
- };
95
-
96
- /**
97
- * EXPORTS
98
- */
99
- export { HistoryDetails };
1
+ /**
2
+ * IMPORTS
3
+ */
4
+ import React from "react";
5
+
6
+ // components
7
+ import { Box } from "../box";
8
+ import { Typography } from "../typography";
9
+
10
+ // typings
11
+ import { IHistoryDetails } from "./interface";
12
+
13
+ // styles
14
+ import { theme } from "../../styles/theme/theme";
15
+
16
+ const HistoryDetails: React.FC<IHistoryDetails> = ({
17
+ numero = "01020304050607",
18
+ local = "Doca 1, Pátio 02 - Usimais (Ipatinga)",
19
+ date = "24/03/2025",
20
+ duracao = "00:30",
21
+ }) => {
22
+ return (
23
+ <Box width="100%" borderStyled={{ borderRadius: 8 }} backgroundColor={theme.colors.blue[400]}>
24
+ <Box
25
+ flexStyle={{
26
+ flexDirection: "column",
27
+ justifyContent: "flex-start",
28
+ alignItems: "flex-start",
29
+ }}
30
+ paddingStyle={{ padding: theme.paddings.xs }}
31
+ >
32
+ <Typography
33
+ text={`Carregamento - #${numero}`}
34
+ size={theme.fontSizes.sm}
35
+ fontFamily={theme.fonts.inter_semi_bold_600}
36
+ fontWeight="600"
37
+ color={theme.colors.neutral[25]}
38
+ lineHeight={theme.fontSizes.xl}
39
+ letterSpacing={"regular"}
40
+ />
41
+
42
+ <Typography
43
+ text={local}
44
+ color={theme.colors.neutral[25]}
45
+ size={theme.fontSizes.xs}
46
+ lineHeight={theme.fontSizes.lg}
47
+ fontFamily={theme.fonts.inter_regular_400}
48
+ letterSpacing={"regular"}
49
+ numberOfLines={1}
50
+ />
51
+ <Typography
52
+ text={`Data carregamento: ${date}`}
53
+ color={theme.colors.neutral[25]}
54
+ size={theme.fontSizes.xs}
55
+ fontFamily={theme.fonts.inter_regular_400}
56
+ lineHeight={theme.fontSizes.lg}
57
+ letterSpacing={"regular"}
58
+ numberOfLines={1}
59
+ />
60
+ </Box>
61
+
62
+ <Box height={1} backgroundColor={theme.colors.gray[950]} />
63
+
64
+ <Box
65
+ flexStyle={{
66
+ flexDirection: "row",
67
+ justifyContent: "space-between",
68
+ alignItems: "center",
69
+ }}
70
+ paddingStyle={{ padding: theme.paddings.xs }}
71
+ >
72
+ <Typography
73
+ text={"DURAÇÃO:"}
74
+ color={theme.colors.neutral[25]}
75
+ size={24}
76
+ fontFamily={theme.fonts.inter_regular_400}
77
+ fontWeight="400"
78
+ lineHeight={theme.fontSizes["3xl"]}
79
+ letterSpacing={"regular"}
80
+ />
81
+ <Typography
82
+ text={duracao}
83
+ color={theme.colors.neutral[25]}
84
+ size={26}
85
+ align="left"
86
+ fontFamily={theme.fonts.inter_medium_500}
87
+ fontWeight="500"
88
+ lineHeight={theme.fontSizes["3xl"]}
89
+ letterSpacing={"regular"}
90
+ />
91
+ </Box>
92
+ </Box>
93
+ );
94
+ };
95
+
96
+ /**
97
+ * EXPORTS
98
+ */
99
+ export { HistoryDetails };
@@ -1,156 +1,156 @@
1
- /**
2
- * IMPORTS
3
- */
4
- import React from "react";
5
-
6
- // components
7
- import { Box } from "../box";
8
- import { Button } from "../button";
9
- import { Typography } from "../typography";
10
-
11
- // typings
12
- import { ILoadingDetails } from "./interface";
13
-
14
- // styles
15
- import { theme } from "../../styles/theme/theme";
16
-
17
- const LoadingDetails: React.FC<ILoadingDetails> = ({
18
- numero = "01020304050607",
19
- local = "Doca 1, Pátio 02 - Usimais (Ipatinga)",
20
- date = "24/03/2025",
21
- duracao = "00:00",
22
- isLoadingStart = false,
23
- disabled,
24
- handleClickGoback,
25
- handleClickStart,
26
- }: ILoadingDetails) => {
27
- return (
28
- <Box
29
- width="100%"
30
- borderStyled={{ borderRadius: 8 }}
31
- style={{
32
- shadowColor: theme.colors.black[10],
33
- shadowOpacity: 0.1,
34
- shadowOffset: { width: 0, height: 2 },
35
- shadowRadius: 4,
36
- elevation: 2,
37
- }}
38
- backgroundColor={theme.colors.blue[400]}
39
- >
40
- <Box
41
- width={"100%"}
42
- flexStyle={{
43
- flexDirection: "row",
44
- alignItems: "center",
45
- justifyContent: "space-between",
46
- }}
47
- paddingStyle={{ padding: theme.paddings.md }}
48
- >
49
- <Box
50
- width={"78%"}
51
- flexStyle={{
52
- flexDirection: "column",
53
- justifyContent: "flex-start",
54
- alignItems: "flex-start",
55
- }}
56
- >
57
- <Typography
58
- text={`Carregamento - #${numero}`}
59
- size={theme.fontSizes.sm}
60
- fontFamily={theme.fonts.inter_bold}
61
- fontWeight="700"
62
- color={theme.colors.neutral[25]}
63
- lineHeight={theme.fontSizes["lg"]}
64
- letterSpacing={"regular"}
65
- />
66
-
67
- <Typography
68
- text={local}
69
- color={theme.colors.neutral[25]}
70
- size={theme.fontSizes.xs}
71
- lineHeight={theme.fontSizes["2xl"]}
72
- letterSpacing={"regular"}
73
- numberOfLines={1}
74
- />
75
- <Typography
76
- text={`Data carregamento: ${date}`}
77
- color={theme.colors.neutral[25]}
78
- size={theme.fontSizes.xs}
79
- lineHeight={theme.fontSizes["2xl"]}
80
- letterSpacing={"regular"}
81
- numberOfLines={1}
82
- />
83
- </Box>
84
-
85
- <Typography
86
- text={duracao}
87
- color={theme.colors.neutral[25]}
88
- size={24}
89
- align="left"
90
- fontFamily="inter_bold"
91
- fontWeight="700"
92
- lineHeight={theme.fontSizes["3xl"]}
93
- letterSpacing={"regular"}
94
- />
95
- </Box>
96
-
97
- <Box
98
- height={1}
99
- backgroundColor={theme.colors.gray[950]}
100
- marginStyle={{ marginTop: theme.margins.xs, marginBottom: theme.margins.xs }}
101
- />
102
-
103
- <Box style={{ flexDirection: "row", gap: 12, marginBottom: 8, padding: theme.paddings.md }}>
104
- <Button
105
- testID="iniciar-button"
106
- title="INICIAR"
107
- onPress={handleClickStart}
108
- height={40}
109
- isLoading={isLoadingStart}
110
- disabled={disabled}
111
- backgroundColor={disabled ? theme.colors.green[100] : theme.colors.green[250]}
112
- flexStyle={{ flex: 1, alignItems: "center", justifyContent: "center" }}
113
- buttonTextStyle={{
114
- color: theme.colors.neutral[25],
115
- fontFamily: theme.fonts.inter_semi_bold_600,
116
- fontSize: theme.fontSizes.md,
117
- fontWeight: "600",
118
- textAlign: "center",
119
- }}
120
- borderStyled={{
121
- borderWidth: theme.borderWidths.thin,
122
- borderColor: disabled ? theme.colors.green[100] : theme.colors.green[250],
123
- borderRadius: theme.fontSizes["2xl"],
124
- }}
125
- />
126
-
127
- <Button
128
- title="VOLTAR"
129
- onPress={handleClickGoback}
130
- height={40}
131
- isLoading={false}
132
- disabled={isLoadingStart}
133
- backgroundColor={theme.colors.yellow[75]}
134
- flexStyle={{ flex: 1, alignItems: "center", justifyContent: "center" }}
135
- buttonTextStyle={{
136
- color: theme.colors.neutral[25],
137
- fontFamily: theme.fonts.inter_semi_bold_600,
138
- fontSize: theme.fontSizes.md,
139
- fontWeight: "600",
140
- textAlign: "center",
141
- }}
142
- borderStyled={{
143
- borderWidth: theme.borderWidths.thin,
144
- borderColor: theme.colors.yellow[75],
145
- borderRadius: theme.fontSizes["2xl"],
146
- }}
147
- />
148
- </Box>
149
- </Box>
150
- );
151
- };
152
-
153
- /**
154
- * EXPORTS
155
- */
156
- export { LoadingDetails };
1
+ /**
2
+ * IMPORTS
3
+ */
4
+ import React from "react";
5
+
6
+ // components
7
+ import { Box } from "../box";
8
+ import { Button } from "../button";
9
+ import { Typography } from "../typography";
10
+
11
+ // typings
12
+ import { ILoadingDetails } from "./interface";
13
+
14
+ // styles
15
+ import { theme } from "../../styles/theme/theme";
16
+
17
+ const LoadingDetails: React.FC<ILoadingDetails> = ({
18
+ numero = "01020304050607",
19
+ local = "Doca 1, Pátio 02 - Usimais (Ipatinga)",
20
+ date = "24/03/2025",
21
+ duracao = "00:00",
22
+ isLoadingStart = false,
23
+ disabled,
24
+ handleClickGoback,
25
+ handleClickStart,
26
+ }: ILoadingDetails) => {
27
+ return (
28
+ <Box
29
+ width="100%"
30
+ borderStyled={{ borderRadius: 8 }}
31
+ style={{
32
+ shadowColor: theme.colors.black[10],
33
+ shadowOpacity: 0.1,
34
+ shadowOffset: { width: 0, height: 2 },
35
+ shadowRadius: 4,
36
+ elevation: 2,
37
+ }}
38
+ backgroundColor={theme.colors.blue[400]}
39
+ >
40
+ <Box
41
+ width={"100%"}
42
+ flexStyle={{
43
+ flexDirection: "row",
44
+ alignItems: "center",
45
+ justifyContent: "space-between",
46
+ }}
47
+ paddingStyle={{ padding: theme.paddings.md }}
48
+ >
49
+ <Box
50
+ width={"78%"}
51
+ flexStyle={{
52
+ flexDirection: "column",
53
+ justifyContent: "flex-start",
54
+ alignItems: "flex-start",
55
+ }}
56
+ >
57
+ <Typography
58
+ text={`Carregamento - #${numero}`}
59
+ size={theme.fontSizes.sm}
60
+ fontFamily={theme.fonts.inter_bold}
61
+ fontWeight="700"
62
+ color={theme.colors.neutral[25]}
63
+ lineHeight={theme.fontSizes["lg"]}
64
+ letterSpacing={"regular"}
65
+ />
66
+
67
+ <Typography
68
+ text={local}
69
+ color={theme.colors.neutral[25]}
70
+ size={theme.fontSizes.xs}
71
+ lineHeight={theme.fontSizes["2xl"]}
72
+ letterSpacing={"regular"}
73
+ numberOfLines={1}
74
+ />
75
+ <Typography
76
+ text={`Data carregamento: ${date}`}
77
+ color={theme.colors.neutral[25]}
78
+ size={theme.fontSizes.xs}
79
+ lineHeight={theme.fontSizes["2xl"]}
80
+ letterSpacing={"regular"}
81
+ numberOfLines={1}
82
+ />
83
+ </Box>
84
+
85
+ <Typography
86
+ text={duracao}
87
+ color={theme.colors.neutral[25]}
88
+ size={24}
89
+ align="left"
90
+ fontFamily="inter_bold"
91
+ fontWeight="700"
92
+ lineHeight={theme.fontSizes["3xl"]}
93
+ letterSpacing={"regular"}
94
+ />
95
+ </Box>
96
+
97
+ <Box
98
+ height={1}
99
+ backgroundColor={theme.colors.gray[950]}
100
+ marginStyle={{ marginTop: theme.margins.xs, marginBottom: theme.margins.xs }}
101
+ />
102
+
103
+ <Box style={{ flexDirection: "row", gap: 12, marginBottom: 8, padding: theme.paddings.md }}>
104
+ <Button
105
+ testID="iniciar-button"
106
+ title="INICIAR"
107
+ onPress={handleClickStart}
108
+ height={40}
109
+ isLoading={isLoadingStart}
110
+ disabled={disabled}
111
+ backgroundColor={disabled ? theme.colors.gray[900] : theme.colors.green[250]}
112
+ flexStyle={{ flex: 1, alignItems: "center", justifyContent: "center" }}
113
+ buttonTextStyle={{
114
+ color: theme.colors.neutral[25],
115
+ fontFamily: theme.fonts.inter_semi_bold_600,
116
+ fontSize: theme.fontSizes.md,
117
+ fontWeight: "600",
118
+ textAlign: "center",
119
+ }}
120
+ borderStyled={{
121
+ borderWidth: theme.borderWidths.thin,
122
+ borderColor: disabled ? theme.colors.gray[900] : theme.colors.green[250],
123
+ borderRadius: theme.fontSizes["2xl"],
124
+ }}
125
+ />
126
+
127
+ <Button
128
+ title="VOLTAR"
129
+ onPress={handleClickGoback}
130
+ height={40}
131
+ isLoading={false}
132
+ disabled={isLoadingStart}
133
+ backgroundColor={theme.colors.yellow[75]}
134
+ flexStyle={{ flex: 1, alignItems: "center", justifyContent: "center" }}
135
+ buttonTextStyle={{
136
+ color: theme.colors.neutral[25],
137
+ fontFamily: theme.fonts.inter_semi_bold_600,
138
+ fontSize: theme.fontSizes.md,
139
+ fontWeight: "600",
140
+ textAlign: "center",
141
+ }}
142
+ borderStyled={{
143
+ borderWidth: theme.borderWidths.thin,
144
+ borderColor: theme.colors.yellow[75],
145
+ borderRadius: theme.fontSizes["2xl"],
146
+ }}
147
+ />
148
+ </Box>
149
+ </Box>
150
+ );
151
+ };
152
+
153
+ /**
154
+ * EXPORTS
155
+ */
156
+ export { LoadingDetails };