react-native-exp-fig 2.0.0 → 2.0.2

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 (68) 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/notification-card/index.js +12 -7
  8. package/lib/commonjs/components/notification-card/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/stories/notification-card/notification-card.stories.js +200 -0
  16. package/lib/commonjs/stories/notification-card/notification-card.stories.js.map +1 -0
  17. package/lib/commonjs/stories/notification-loading/notification-loading.stories.js.map +1 -1
  18. package/lib/commonjs/styles/theme/theme.js +5 -5
  19. package/lib/commonjs/utils/status-color/return-color.js +2 -2
  20. package/lib/commonjs/utils/status-color/return-color.js.map +1 -1
  21. package/lib/module/components/box/index.js +4 -4
  22. package/lib/module/components/card-loading/index.js +27 -25
  23. package/lib/module/components/card-loading/index.js.map +1 -1
  24. package/lib/module/components/header-profile/index.js +68 -62
  25. package/lib/module/components/header-profile/index.js.map +1 -1
  26. package/lib/module/components/history-details/index.js +4 -4
  27. package/lib/module/components/notification-card/index.js +12 -7
  28. package/lib/module/components/notification-card/index.js.map +1 -1
  29. package/lib/module/components/user-profile/index.js +9 -10
  30. package/lib/module/components/user-profile/index.js.map +1 -1
  31. package/lib/module/index.js +3 -3
  32. package/lib/module/index.js.map +1 -1
  33. package/lib/module/stories/header-profile/header-profile.stories.js +5 -16
  34. package/lib/module/stories/header-profile/header-profile.stories.js.map +1 -1
  35. package/lib/module/stories/notification-card/notification-card.stories.js +194 -0
  36. package/lib/module/stories/notification-card/notification-card.stories.js.map +1 -0
  37. package/lib/module/stories/notification-loading/notification-loading.stories.js.map +1 -1
  38. package/lib/module/styles/theme/theme.js +5 -5
  39. package/lib/module/utils/status-color/return-color.js +2 -2
  40. package/lib/module/utils/status-color/return-color.js.map +1 -1
  41. package/lib/typescript/src/components/card-loading/index.d.ts.map +1 -1
  42. package/lib/typescript/src/components/header-profile/index.d.ts +66 -5
  43. package/lib/typescript/src/components/header-profile/index.d.ts.map +1 -1
  44. package/lib/typescript/src/components/notification-card/index.d.ts.map +1 -1
  45. package/lib/typescript/src/components/notification-card/interface.d.ts +2 -1
  46. package/lib/typescript/src/components/notification-card/interface.d.ts.map +1 -1
  47. package/lib/typescript/src/components/user-profile/index.d.ts.map +1 -1
  48. package/lib/typescript/src/index.d.ts +1 -1
  49. package/lib/typescript/src/index.d.ts.map +1 -1
  50. package/lib/typescript/src/stories/header-profile/header-profile.stories.d.ts +1 -1
  51. package/lib/typescript/src/stories/header-profile/header-profile.stories.d.ts.map +1 -1
  52. package/lib/typescript/src/stories/notification-card/notification-card.stories.d.ts +14 -0
  53. package/lib/typescript/src/stories/notification-card/notification-card.stories.d.ts.map +1 -0
  54. package/package.json +1 -1
  55. package/src/components/box/index.tsx +49 -49
  56. package/src/components/card-loading/index.tsx +294 -290
  57. package/src/components/header-profile/index.tsx +148 -132
  58. package/src/components/header-profile/interface.d.ts +145 -57
  59. package/src/components/history-details/index.tsx +99 -99
  60. package/src/components/notification-card/index.tsx +127 -123
  61. package/src/components/notification-card/interface.ts +19 -18
  62. package/src/components/user-profile/index.tsx +206 -204
  63. package/src/index.ts +48 -48
  64. package/src/stories/header-profile/header-profile.stories.tsx +92 -103
  65. package/src/stories/notification-card/notification-card.stories.tsx +202 -0
  66. package/src/stories/notification-loading/notification-loading.stories.tsx +88 -88
  67. package/src/styles/theme/theme.ts +193 -193
  68. package/src/utils/status-color/return-color.ts +34 -34
@@ -1,193 +1,193 @@
1
- /**
2
- * IMPORTS
3
- */
4
-
5
- const colors = {
6
- neutral: {
7
- 25: "#FFFFFF",
8
- 50: "#E7EEFF",
9
- 75: "#E5E1F9",
10
- 200: "#C6C6C6",
11
- 300: "#F3F3F3",
12
- 400: "#F4F5F6",
13
- 500: "#FFF1DC",
14
- },
15
- black: {
16
- 10: "#000000",
17
- 25: "#1E1E1E",
18
- 100: "#393939",
19
- 180: "#35302B",
20
- },
21
- blue: {
22
- 25: "#1E1E1E",
23
- 50: "#1EA7fD",
24
- 100: "#051C3B",
25
- 150: "#2E41F2",
26
- 350: "#357FD6",
27
- 375: "#056CF2",
28
- 525: "#2D3748",
29
- 500: "#050022",
30
- 400: "#051C3B",
31
- 800: "#87CEFA",
32
- },
33
- red: {
34
- 400: "#D23A1A",
35
- 500: "#C54239",
36
- 800: "#E72626",
37
- 900: "#9F0000",
38
- },
39
- gray: {
40
- 300: "#D9D9D9",
41
- 350: "#CDCDCD",
42
- 400: "#C6C6C6",
43
- 500: "#1c1c1e",
44
- 600: "#5E5E5E",
45
- 700: "#727272",
46
- 800: "#837676",
47
- 850: "#868686",
48
- 875: "#949494",
49
- 900: "#9B9B9B",
50
- 925: "#957c5f",
51
- 950: "#94a3b8",
52
- },
53
- green: {
54
- 100: "#D4EDDA",
55
- 200: "#25BA76",
56
- 250: "#20AD48",
57
- 400: "#49C63E",
58
- 500: "#50C58F",
59
- },
60
- orange: {
61
- 500: "#FC5701",
62
- 450: "#FC6C2D",
63
- 150: "#FFA41C",
64
- },
65
- yellow: {
66
- 120: "#FFE8C2", // laranja claro - levando em consideração opacidade de 20
67
- 100: "#DFAE00",
68
- 50: "#F0CA4B",
69
- 75: "#F59E0B",
70
- },
71
- };
72
-
73
- const fonts = {
74
- inter_thin_100: "Inter-Thin",
75
- inter_extra_light_200: "Inter-ExtraLight",
76
- inter_light_300: "Inter-Light",
77
- inter_regular_400: "Inter-Regular",
78
- inter_medium_500: "Inter-Medium",
79
- inter_semi_bold_600: "Inter-SemiBold",
80
- inter_bold_700: "Inter-Bold",
81
- inter_extra_bold_800: "Inter-ExtraBold",
82
- inter_bold: "Inter-Bold",
83
- };
84
-
85
- const fontSizes = {
86
- "2xs": 10,
87
- xs: 12,
88
- sm: 14,
89
- md: 16,
90
- lg: 18,
91
- xl: 20,
92
- "2xl": 24,
93
- "3xl": 32,
94
- "4xl": 38,
95
- "5xl": 50,
96
- "6xl": 60,
97
- "7xl": 72,
98
- "8xl": 96,
99
- "9xl": 128,
100
- };
101
-
102
- const margins = {
103
- fn: 2,
104
- "1xs": 6,
105
- "2xs": 10,
106
- xs: 12,
107
- sm: 14,
108
- md: 16,
109
- lg: 18,
110
- xl: 20,
111
- "2xl": 24,
112
- "3xl": 30,
113
- "4xl": 36,
114
- "5xl": 48,
115
- "6xl": 60,
116
- "7xl": 72,
117
- "8xl": 96,
118
- "9xl": 128,
119
- };
120
-
121
- const paddings = {
122
- "3xs": 6,
123
- "2xs": 10,
124
- xs: 12,
125
- sm: 14,
126
- md: 16,
127
- lg: 18,
128
- xl: 20,
129
- "2xl": 24,
130
- "3xl": 30,
131
- "4xl": 36,
132
- "5xl": 48,
133
- "6xl": 60,
134
- "7xl": 72,
135
- "8xl": 96,
136
- "9xl": 128,
137
- };
138
-
139
- const borderWidths = {
140
- thin: 1,
141
- thin_medium: 2,
142
- thin_bold: 6,
143
- thick: 4,
144
- thick_medium: 8,
145
- thick_bold: 12,
146
- thick_large: 16,
147
- hairline: 999,
148
- "2xl": 24,
149
- };
150
-
151
- const shadows = {
152
- z1: "0px 1px 0px rgba(0, 0, 0, 0.3), 0px 1px 0px 1px rgba(0, 0, 0, 0.15)",
153
- z2: "0px 1px 2px rgba(0, 0, 0, 0.3)",
154
- };
155
-
156
- const letterSpacing = {
157
- o_16: 0.16,
158
- regular: 0.5,
159
- medium: 0.75,
160
- strong: 1,
161
- };
162
-
163
- const lineHeight = {
164
- "2xs": 10,
165
- xs: 12,
166
- sm: 14,
167
- md: 16,
168
- lg: 18,
169
- xl: 20,
170
- "2xl": 24,
171
- "3xl": 30,
172
- "4xl": 36,
173
- "5xl": 48,
174
- "6xl": 60,
175
- "7xl": 72,
176
- "8xl": 96,
177
- "9xl": 128,
178
- };
179
-
180
- /**
181
- * EXPORTSS
182
- */
183
- export const theme = {
184
- borderWidths,
185
- colors,
186
- fonts,
187
- fontSizes,
188
- margins,
189
- shadows,
190
- paddings,
191
- letterSpacing,
192
- lineHeight,
193
- };
1
+ /**
2
+ * IMPORTS
3
+ */
4
+
5
+ const colors = {
6
+ neutral: {
7
+ 25: "#FFFFFF",
8
+ 50: "#E7EEFF",
9
+ 75: "#E5E1F9",
10
+ 200: "#C6C6C6",
11
+ 300: "#F3F3F3",
12
+ 400: "#F4F5F6",
13
+ 500: "#FFF1DC",
14
+ },
15
+ black: {
16
+ 10: "#000000",
17
+ 25: "#1E1E1E",
18
+ 100: "#393939",
19
+ 180: "#35302B",
20
+ },
21
+ blue: {
22
+ 25: "#1E1E1E",
23
+ 50: "#1EA7fD",
24
+ 100: "#051C3B",
25
+ 150: "#2E41F2",
26
+ 350: "#357FD6",
27
+ 375: "#056CF2",
28
+ 525: "#2D3748",
29
+ 500: "#050022",
30
+ 400: "#2D3748",
31
+ 800: "#87CEFA",
32
+ },
33
+ red: {
34
+ 400: "#D23A1A",
35
+ 500: "#C54239",
36
+ 800: "#E72626",
37
+ 900: "#9F0000",
38
+ },
39
+ gray: {
40
+ 300: "#D9D9D9",
41
+ 350: "#CDCDCD",
42
+ 400: "#C6C6C6",
43
+ 500: "#1c1c1e",
44
+ 600: "#5E5E5E",
45
+ 700: "#727272",
46
+ 800: "#837676",
47
+ 850: "#868686",
48
+ 875: "#949494",
49
+ 900: "#9B9B9B",
50
+ 925: "#957c5f",
51
+ 950: "#94a3b8",
52
+ },
53
+ green: {
54
+ 100: "#D4EDDA",
55
+ 200: "#25BA76",
56
+ 250: "#20AD48",
57
+ 400: "#49C63E",
58
+ 500: "#50C58F",
59
+ },
60
+ orange: {
61
+ 500: "#FC5701",
62
+ 450: "#FC6C2D",
63
+ 150: "#FFA41C",
64
+ },
65
+ yellow: {
66
+ 120: "#FFE8C2", // laranja claro - levando em consideração opacidade de 20
67
+ 100: "#DFAE00",
68
+ 50: "#F0CA4B",
69
+ 75: "#F59E0B",
70
+ },
71
+ };
72
+
73
+ const fonts = {
74
+ inter_thin_100: "Inter-Thin",
75
+ inter_extra_light_200: "Inter-ExtraLight",
76
+ inter_light_300: "Inter-Light",
77
+ inter_regular_400: "Inter-Regular",
78
+ inter_medium_500: "Inter-Medium",
79
+ inter_semi_bold_600: "Inter-SemiBold",
80
+ inter_bold_700: "Inter-Bold",
81
+ inter_extra_bold_800: "Inter-ExtraBold",
82
+ inter_bold: "Inter-Bold",
83
+ };
84
+
85
+ const fontSizes = {
86
+ "2xs": 10,
87
+ xs: 12,
88
+ sm: 14,
89
+ md: 16,
90
+ lg: 18,
91
+ xl: 20,
92
+ "2xl": 24,
93
+ "3xl": 32,
94
+ "4xl": 38,
95
+ "5xl": 50,
96
+ "6xl": 60,
97
+ "7xl": 72,
98
+ "8xl": 96,
99
+ "9xl": 128,
100
+ };
101
+
102
+ const margins = {
103
+ fn: 2,
104
+ "1xs": 6,
105
+ "2xs": 10,
106
+ xs: 12,
107
+ sm: 14,
108
+ md: 16,
109
+ lg: 18,
110
+ xl: 20,
111
+ "2xl": 24,
112
+ "3xl": 30,
113
+ "4xl": 36,
114
+ "5xl": 48,
115
+ "6xl": 60,
116
+ "7xl": 72,
117
+ "8xl": 96,
118
+ "9xl": 128,
119
+ };
120
+
121
+ const paddings = {
122
+ "3xs": 6,
123
+ "2xs": 10,
124
+ xs: 12,
125
+ sm: 14,
126
+ md: 16,
127
+ lg: 18,
128
+ xl: 20,
129
+ "2xl": 24,
130
+ "3xl": 30,
131
+ "4xl": 36,
132
+ "5xl": 48,
133
+ "6xl": 60,
134
+ "7xl": 72,
135
+ "8xl": 96,
136
+ "9xl": 128,
137
+ };
138
+
139
+ const borderWidths = {
140
+ thin: 1,
141
+ thin_medium: 2,
142
+ thin_bold: 6,
143
+ thick: 4,
144
+ thick_medium: 8,
145
+ thick_bold: 12,
146
+ thick_large: 16,
147
+ hairline: 999,
148
+ "2xl": 24,
149
+ };
150
+
151
+ const shadows = {
152
+ z1: "0px 1px 0px rgba(0, 0, 0, 0.3), 0px 1px 0px 1px rgba(0, 0, 0, 0.15)",
153
+ z2: "0px 1px 2px rgba(0, 0, 0, 0.3)",
154
+ };
155
+
156
+ const letterSpacing = {
157
+ o_16: 0.16,
158
+ regular: 0.5,
159
+ medium: 0.75,
160
+ strong: 1,
161
+ };
162
+
163
+ const lineHeight = {
164
+ "2xs": 10,
165
+ xs: 12,
166
+ sm: 14,
167
+ md: 16,
168
+ lg: 18,
169
+ xl: 20,
170
+ "2xl": 24,
171
+ "3xl": 30,
172
+ "4xl": 36,
173
+ "5xl": 48,
174
+ "6xl": 60,
175
+ "7xl": 72,
176
+ "8xl": 96,
177
+ "9xl": 128,
178
+ };
179
+
180
+ /**
181
+ * EXPORTSS
182
+ */
183
+ export const theme = {
184
+ borderWidths,
185
+ colors,
186
+ fonts,
187
+ fontSizes,
188
+ margins,
189
+ shadows,
190
+ paddings,
191
+ letterSpacing,
192
+ lineHeight,
193
+ };
@@ -1,34 +1,34 @@
1
- import { theme } from "../../styles/theme/theme";
2
-
3
- export type StatusType = "Andamento" | "Cancelado" | "Pendente" | "Concluido";
4
-
5
- function getBorderColor(status: string) {
6
- const borderColors = {
7
- Cancelado: theme.colors.red[900],
8
- Pendente: theme.colors.orange[450],
9
- };
10
- return borderColors[status as keyof typeof borderColors];
11
- }
12
- function getStatusColor(status: StatusType): string {
13
- const statusColors: Record<StatusType, string> = {
14
- Concluido: theme.colors.green[250],
15
- Cancelado: theme.colors.red[900],
16
- Pendente: theme.colors.yellow[75],
17
- Andamento: theme.colors.yellow[50],
18
- };
19
-
20
- return statusColors[status];
21
- }
22
-
23
- function getStatusTextColor(status: StatusType): string {
24
- const statusColors: Record<StatusType, string> = {
25
- Concluido: theme.colors.neutral[25],
26
- Cancelado: theme.colors.neutral[25],
27
- Pendente: theme.colors.neutral[50],
28
- Andamento: theme.colors.neutral[50],
29
- };
30
-
31
- return statusColors[status];
32
- }
33
-
34
- export { getStatusColor, getBorderColor, getStatusTextColor };
1
+ import { theme } from "../../styles/theme/theme";
2
+
3
+ export type StatusType = "Andamento" | "Cancelado" | "Pendente" | "Concluido";
4
+
5
+ function getBorderColor(status: string) {
6
+ const borderColors = {
7
+ Cancelado: theme.colors.red[900],
8
+ Pendente: theme.colors.orange[450],
9
+ };
10
+ return borderColors[status as keyof typeof borderColors];
11
+ }
12
+ function getStatusColor(status: StatusType): string {
13
+ const statusColors: Record<StatusType, string> = {
14
+ Concluido: theme.colors.green[250],
15
+ Andamento: theme.colors.green[500],
16
+ Cancelado: theme.colors.red[900],
17
+ Pendente: theme.colors.yellow[75],
18
+ };
19
+
20
+ return statusColors[status];
21
+ }
22
+
23
+ function getStatusTextColor(status: StatusType): string {
24
+ const statusColors: Record<StatusType, string> = {
25
+ Concluido: theme.colors.neutral[25],
26
+ Cancelado: theme.colors.neutral[25],
27
+ Pendente: theme.colors.neutral[50],
28
+ Andamento: theme.colors.neutral[50],
29
+ };
30
+
31
+ return statusColors[status];
32
+ }
33
+
34
+ export { getStatusColor, getBorderColor, getStatusTextColor };