react-native-exp-fig 0.1.0 → 0.1.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 (96) hide show
  1. package/package.json +200 -200
  2. package/src/common/constants/index.ts +5 -0
  3. package/src/common/icons-svg/arrow-drop-down/index.tsx +28 -28
  4. package/src/common/icons-svg/arrow-left/index.tsx +32 -32
  5. package/src/common/icons-svg/bluetooth/index.tsx +37 -37
  6. package/src/common/icons-svg/bluetooth-connected/index.tsx +41 -41
  7. package/src/common/icons-svg/calendar/index.tsx +40 -40
  8. package/src/common/icons-svg/call-bell/index.tsx +29 -29
  9. package/src/common/icons-svg/camera-plus/index.tsx +40 -40
  10. package/src/common/icons-svg/chart-bar/index.tsx +29 -0
  11. package/src/common/icons-svg/check-box-fill/index.tsx +30 -30
  12. package/src/common/icons-svg/check-box-outline/index.tsx +30 -30
  13. package/src/common/icons-svg/check-circle/index.tsx +27 -27
  14. package/src/common/icons-svg/closed/index.tsx +34 -34
  15. package/src/common/icons-svg/constants/index.ts +46 -43
  16. package/src/common/icons-svg/credit-card/index.tsx +32 -32
  17. package/src/common/icons-svg/currency/index.tsx +39 -39
  18. package/src/common/icons-svg/currency-circle-dollar/index.tsx +29 -0
  19. package/src/common/icons-svg/eye/index.tsx +31 -31
  20. package/src/common/icons-svg/eye-slash/index.tsx +31 -31
  21. package/src/common/icons-svg/file-text/index.tsx +39 -39
  22. package/src/common/icons-svg/gas-pump/index.tsx +39 -39
  23. package/src/common/icons-svg/gauge/index.tsx +39 -39
  24. package/src/common/icons-svg/gear/index.tsx +39 -39
  25. package/src/common/icons-svg/index.tsx +167 -149
  26. package/src/common/icons-svg/interface.d.ts +18 -18
  27. package/src/common/icons-svg/list/index.tsx +58 -58
  28. package/src/common/icons-svg/moon-stars/index.tsx +29 -29
  29. package/src/common/icons-svg/note-pincel/index.tsx +40 -40
  30. package/src/common/icons-svg/package/index.tsx +29 -0
  31. package/src/common/icons-svg/package-check/index.tsx +45 -45
  32. package/src/common/icons-svg/shopping-cart/index.tsx +39 -39
  33. package/src/common/icons-svg/steering-wheel/index.tsx +49 -49
  34. package/src/common/icons-svg/steering-wheel-fill/index.tsx +36 -36
  35. package/src/common/icons-svg/timer/index.tsx +39 -39
  36. package/src/common/icons-svg/trophy/index.tsx +29 -29
  37. package/src/common/icons-svg/truck/index.tsx +39 -39
  38. package/src/common/icons-svg/truck-trailer/index.tsx +36 -0
  39. package/src/common/icons-svg/wifi-high/index.tsx +43 -43
  40. package/src/common/icons-svg/wifi-x/index.tsx +50 -50
  41. package/src/components/box/index.tsx +47 -47
  42. package/src/components/box/interface.d.ts +31 -31
  43. package/src/components/box/styles.ts +21 -21
  44. package/src/components/button/index.tsx +61 -61
  45. package/src/components/button/interface.d.ts +40 -40
  46. package/src/components/button/styles.ts +34 -34
  47. package/src/components/capture-photo/index.tsx +125 -125
  48. package/src/components/capture-photo/interface.d.ts +44 -44
  49. package/src/components/capture-photo/styles.ts +24 -24
  50. package/src/components/card-hours/index.tsx +118 -118
  51. package/src/components/card-hours/interface.d.ts +37 -37
  52. package/src/components/card-scheduled-journey/index.tsx +138 -138
  53. package/src/components/card-scheduled-journey/interface.ts +42 -42
  54. package/src/components/card-scheduled-journey/styles.ts +26 -26
  55. package/src/components/header-profile/index.tsx +128 -128
  56. package/src/components/header-profile/interface.d.ts +52 -52
  57. package/src/components/input/index.tsx +176 -180
  58. package/src/components/input/interface.d.ts +55 -55
  59. package/src/components/input/styles.ts +23 -23
  60. package/src/components/menu-item/index.tsx +78 -0
  61. package/src/components/menu-item/interface.d.ts +19 -0
  62. package/src/components/menu-item/styles.ts +0 -0
  63. package/src/components/scheduled-journey-indicators/index.tsx +99 -99
  64. package/src/components/scheduled-journey-indicators/interface.d.ts +18 -18
  65. package/src/components/selects/select-option/index.tsx +104 -104
  66. package/src/components/selects/select-option/interface.d.ts +18 -18
  67. package/src/components/selects/select-option/styles.ts +75 -75
  68. package/src/components/step-indicator/helpers/get-icon-by-status.tsx +20 -20
  69. package/src/components/step-indicator/index.tsx +164 -164
  70. package/src/components/step-indicator/interface.d.ts +34 -34
  71. package/src/components/step-indicator/styles.ts +67 -67
  72. package/src/components/typography/index.tsx +67 -67
  73. package/src/components/typography/interface.d.ts +102 -102
  74. package/src/components/typography/styles.ts +34 -34
  75. package/src/components/user-profile/index.tsx +216 -0
  76. package/src/components/user-profile/interface.d.ts +22 -0
  77. package/src/index.tsx +25 -23
  78. package/src/stories/box/box.stories.tsx +106 -106
  79. package/src/stories/button/button.stories.tsx +143 -143
  80. package/src/stories/capture-photo/capture-photo.stories.tsx +170 -170
  81. package/src/stories/card-hours/card-hours.stories.tsx +102 -102
  82. package/src/stories/card-scheduled-journey/card-scheduled-journey.stories.tsx +101 -101
  83. package/src/stories/header-profile/header-profile.stories.tsx +84 -84
  84. package/src/stories/input/input.stories.tsx +286 -286
  85. package/src/stories/menu-item/menu-item.stories.tsx +76 -0
  86. package/src/stories/scheduled-journey-indicators/sheduled-journey-indicators.stories.tsx +74 -74
  87. package/src/stories/select-option/select-option.stories.tsx +46 -46
  88. package/src/stories/step-indicator/step-indicator.stories.tsx +116 -116
  89. package/src/stories/typography/typography.stories.tsx +146 -146
  90. package/src/stories/user-profile/user-profile.stories.tsx +56 -0
  91. package/src/styles/global/interface.d.ts +131 -131
  92. package/src/styles/global/styles.ts +63 -63
  93. package/src/styles/global/theme-provider.tsx +10 -10
  94. package/src/styles/theme/theme.ts +158 -156
  95. package/src/utils/format-data/index.ts +14 -14
  96. package/src/utils/mutiply/index.ts +3 -3
@@ -1,63 +1,63 @@
1
- // typing
2
- import { IGlobalCss } from "./interface";
3
-
4
- const stylesGlobal = (props: IGlobalCss) => ({
5
- width: props.width,
6
- height: props.height,
7
- backgroundColor: props.backgroundColor,
8
-
9
- // padding
10
-
11
- padding: props.paddingStyle?.padding,
12
- paddingTop: props.paddingStyle?.paddingTop,
13
- paddingLeft: props.paddingStyle?.paddingLeft,
14
- paddingRight: props.paddingStyle?.paddingRight,
15
- paddingBottom: props.paddingStyle?.paddingBottom,
16
-
17
- // margin
18
- margin: props.marginStyle?.margin,
19
- marginTop: props.marginStyle?.marginTop,
20
- marginLeft: props.marginStyle?.marginLeft,
21
- marginRight: props.marginStyle?.marginRight,
22
- marginBottom: props.marginStyle?.marginBottom,
23
-
24
- // border
25
- borderStyle: props.borderStyled?.borderStyle,
26
-
27
- borderRadius: props.borderStyled?.borderRadius,
28
- borderTopRightRadius: props.borderStyled?.borderTopRightRadius,
29
- borderTopLeftRadius: props.borderStyled?.borderTopLeftRadius,
30
- borderBottomRightRadius: props.borderStyled?.borderBottomRightRadius,
31
- borderBottomLeftRadius: props.borderStyled?.borderBottomLeftRadius,
32
-
33
- borderWidth: props.borderStyled?.borderWidth,
34
- borderLeftWidth: props.borderStyled?.borderLeftWidth,
35
- borderRightWidth: props.borderStyled?.borderRightWidth,
36
- borderTopWidth: props.borderStyled?.borderTopWidth,
37
- borderBottomWidth: props.borderStyled?.borderBottomWidth,
38
-
39
- borderColor: props.borderStyled?.borderColor,
40
- borderBottomColor: props.borderStyled?.borderBottomColor,
41
- borderLeftColor: props.borderStyled?.borderLeftColor,
42
- borderRightColor: props.borderStyled?.borderLeftColor,
43
- borderTopColor: props.borderStyled?.borderTopColor,
44
-
45
- // flex
46
- flex: props.flexStyle?.flex,
47
- flexDirection: props.flexStyle?.flexDirection,
48
- alignItems: props.flexStyle?.alignItems,
49
- justifyContent: props.flexStyle?.justifyContent,
50
- textAlign: props.flexStyle?.textAlign,
51
-
52
- // fonts
53
- fontFamily: props.fontStyle?.fontFamily,
54
- fontSize: props.fontStyle?.fontSize,
55
- fontWeight: props.fontStyle?.fontWeight,
56
- lineHeight: props.fontStyle?.lineHeight,
57
- letterSpacing: props.fontStyle?.letterSpacing,
58
- });
59
-
60
- /**
61
- * EXPORTS
62
- */
63
- export { stylesGlobal };
1
+ // typing
2
+ import { IGlobalCss } from "./interface";
3
+
4
+ const stylesGlobal = (props: IGlobalCss) => ({
5
+ width: props.width,
6
+ height: props.height,
7
+ backgroundColor: props.backgroundColor,
8
+
9
+ // padding
10
+
11
+ padding: props.paddingStyle?.padding,
12
+ paddingTop: props.paddingStyle?.paddingTop,
13
+ paddingLeft: props.paddingStyle?.paddingLeft,
14
+ paddingRight: props.paddingStyle?.paddingRight,
15
+ paddingBottom: props.paddingStyle?.paddingBottom,
16
+
17
+ // margin
18
+ margin: props.marginStyle?.margin,
19
+ marginTop: props.marginStyle?.marginTop,
20
+ marginLeft: props.marginStyle?.marginLeft,
21
+ marginRight: props.marginStyle?.marginRight,
22
+ marginBottom: props.marginStyle?.marginBottom,
23
+
24
+ // border
25
+ borderStyle: props.borderStyled?.borderStyle,
26
+
27
+ borderRadius: props.borderStyled?.borderRadius,
28
+ borderTopRightRadius: props.borderStyled?.borderTopRightRadius,
29
+ borderTopLeftRadius: props.borderStyled?.borderTopLeftRadius,
30
+ borderBottomRightRadius: props.borderStyled?.borderBottomRightRadius,
31
+ borderBottomLeftRadius: props.borderStyled?.borderBottomLeftRadius,
32
+
33
+ borderWidth: props.borderStyled?.borderWidth,
34
+ borderLeftWidth: props.borderStyled?.borderLeftWidth,
35
+ borderRightWidth: props.borderStyled?.borderRightWidth,
36
+ borderTopWidth: props.borderStyled?.borderTopWidth,
37
+ borderBottomWidth: props.borderStyled?.borderBottomWidth,
38
+
39
+ borderColor: props.borderStyled?.borderColor,
40
+ borderBottomColor: props.borderStyled?.borderBottomColor,
41
+ borderLeftColor: props.borderStyled?.borderLeftColor,
42
+ borderRightColor: props.borderStyled?.borderLeftColor,
43
+ borderTopColor: props.borderStyled?.borderTopColor,
44
+
45
+ // flex
46
+ flex: props.flexStyle?.flex,
47
+ flexDirection: props.flexStyle?.flexDirection,
48
+ alignItems: props.flexStyle?.alignItems,
49
+ justifyContent: props.flexStyle?.justifyContent,
50
+ textAlign: props.flexStyle?.textAlign,
51
+
52
+ // fonts
53
+ fontFamily: props.fontStyle?.fontFamily,
54
+ fontSize: props.fontStyle?.fontSize,
55
+ fontWeight: props.fontStyle?.fontWeight,
56
+ lineHeight: props.fontStyle?.lineHeight,
57
+ letterSpacing: props.fontStyle?.letterSpacing,
58
+ });
59
+
60
+ /**
61
+ * EXPORTS
62
+ */
63
+ export { stylesGlobal };
@@ -1,10 +1,10 @@
1
- import React, { createContext, useContext } from "react";
2
- import { theme } from "../theme/theme";
3
-
4
- const ThemeContext = createContext(theme);
5
-
6
- export const ThemeProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {
7
- return <ThemeContext.Provider value={theme}>{children}</ThemeContext.Provider>;
8
- };
9
-
10
- export const useTheme = () => useContext(ThemeContext);
1
+ import React, { createContext, useContext } from "react";
2
+ import { theme } from "../theme/theme";
3
+
4
+ const ThemeContext = createContext(theme);
5
+
6
+ export const ThemeProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {
7
+ return <ThemeContext.Provider value={theme}>{children}</ThemeContext.Provider>;
8
+ };
9
+
10
+ export const useTheme = () => useContext(ThemeContext);
@@ -1,156 +1,158 @@
1
- /**
2
- * IMPORTS
3
- */
4
-
5
- const borderWidths = {
6
- thin: 1,
7
- thin_medium: 2,
8
- thin_bold: 6,
9
- thick: 4,
10
- thick_medium: 8,
11
- thick_bold: 12,
12
- hairline: 999,
13
- };
14
-
15
- const colors = {
16
- neutral: {
17
- 25: "#FFFFFF",
18
- 50: "#E7EEFF",
19
- 75: "#E5E1F9",
20
- 200: "#C6C6C6",
21
- 300: "#F3F3F3",
22
- 400: "#F4F5F6",
23
- },
24
- black: {
25
- 25: "#1E1E1E",
26
- 100: "#393939",
27
- 180: "#35302B",
28
- },
29
- blue: {
30
- 25: "#1E1E1E",
31
- 100: "#051C3B",
32
- 150: "#2E41F2",
33
- 350: "#357FD6",
34
- 500: "#050022",
35
- 525: "#051C3B",
36
- },
37
- red: {
38
- 400: "#D23A1A",
39
- 500: "#C54239",
40
- 800: "#E72626",
41
- 900: "#9F0000",
42
- },
43
- gray: {
44
- 300: "#D9D9D9",
45
- 400: "#C6C6C6",
46
- 500: "#1c1c1e",
47
- 600: "#5E5E5E",
48
- 700: "#727272",
49
- 800: "#837676",
50
- 850: "#868686",
51
- 875: "#949494",
52
- 900: "#9B9B9B",
53
- },
54
- green: {
55
- 200: "#25BA76",
56
- 400: "#49C63E",
57
- 500: "#50C58F",
58
- },
59
- orange: {
60
- 500: "#FC5701",
61
- 450: "#FC6C2D",
62
- 150: "#FFA41C",
63
- },
64
- yellow: {
65
- 100: "#DFAE00",
66
- },
67
- };
68
-
69
- const fonts = {
70
- inter_thin_100: "Inter-Thin",
71
- inter_extra_light_200: "Inter-ExtraLight",
72
- inter_light_300: "Inter-Light",
73
- inter_regular_400: "Inter-Regular",
74
- inter_medium_500: "Inter-Medium",
75
- inter_semi_bold_600: "Inter-SemiBold",
76
- inter_bold_700: "Inter-Bold",
77
- inter_extra_bold_800: "Inter-ExtraBold",
78
- inter_bold: "Inter-Bold",
79
- };
80
-
81
- const fontSizes = {
82
- "2xs": 10,
83
- xs: 12,
84
- sm: 14,
85
- md: 16,
86
- lg: 18,
87
- xl: 20,
88
- "2xl": 24,
89
- "3xl": 32,
90
- "4xl": 38,
91
- "5xl": 50,
92
- "6xl": 60,
93
- "7xl": 72,
94
- "8xl": 96,
95
- "9xl": 128,
96
- };
97
-
98
- const margins = {
99
- "2xs": 10,
100
- xs: 12,
101
- sm: 14,
102
- md: 16,
103
- lg: 18,
104
- xl: 20,
105
- "2xl": 24,
106
- "3xl": 30,
107
- "4xl": 36,
108
- "5xl": 48,
109
- "6xl": 60,
110
- "7xl": 72,
111
- "8xl": 96,
112
- "9xl": 128,
113
- };
114
-
115
- const paddings = {
116
- "2xs": 10,
117
- xs: 12,
118
- sm: 14,
119
- md: 16,
120
- lg: 18,
121
- xl: 20,
122
- "2xl": 24,
123
- "3xl": 30,
124
- "4xl": 36,
125
- "5xl": 48,
126
- "6xl": 60,
127
- "7xl": 72,
128
- "8xl": 96,
129
- "9xl": 128,
130
- };
131
-
132
- const shadows = {
133
- z1: "0px 1px 0px rgba(0, 0, 0, 0.3), 0px 1px 0px 1px rgba(0, 0, 0, 0.15)",
134
- z2: "0px 1px 2px rgba(0, 0, 0, 0.3)",
135
- };
136
-
137
- const letterSpacing = {
138
- o_16: 0.16,
139
- regular: 0.5,
140
- medium: 0.75,
141
- strong: 1,
142
- };
143
-
144
- /**
145
- * EXPORTSS
146
- */
147
- export const theme = {
148
- borderWidths,
149
- colors,
150
- fonts,
151
- fontSizes,
152
- margins,
153
- shadows,
154
- paddings,
155
- letterSpacing,
156
- };
1
+ /**
2
+ * IMPORTS
3
+ */
4
+
5
+ const borderWidths = {
6
+ thin: 1,
7
+ thin_medium: 2,
8
+ thin_bold: 6,
9
+ thick: 4,
10
+ thick_medium: 8,
11
+ thick_bold: 12,
12
+ hairline: 999,
13
+ };
14
+
15
+ const colors = {
16
+ neutral: {
17
+ 25: "#FFFFFF",
18
+ 50: "#E7EEFF",
19
+ 75: "#E5E1F9",
20
+ 200: "#C6C6C6",
21
+ 300: "#F3F3F3",
22
+ 400: "#F4F5F6",
23
+ },
24
+ black: {
25
+ 25: "#1E1E1E",
26
+ 100: "#393939",
27
+ 180: "#35302B",
28
+ },
29
+ blue: {
30
+ 25: "#1E1E1E",
31
+ 100: "#051C3B",
32
+ 150: "#2E41F2",
33
+ 350: "#357FD6",
34
+ 400: "#2D3748",
35
+ 500: "#050022",
36
+ 525: "#051C3B",
37
+ },
38
+ red: {
39
+ 400: "#D23A1A",
40
+ 500: "#C54239",
41
+ 800: "#E72626",
42
+ 900: "#9F0000",
43
+ },
44
+ gray: {
45
+ 300: "#D9D9D9",
46
+ 350: "#CDCDCD",
47
+ 400: "#C6C6C6",
48
+ 500: "#1c1c1e",
49
+ 600: "#5E5E5E",
50
+ 700: "#727272",
51
+ 800: "#837676",
52
+ 850: "#868686",
53
+ 875: "#949494",
54
+ 900: "#9B9B9B",
55
+ },
56
+ green: {
57
+ 200: "#25BA76",
58
+ 400: "#49C63E",
59
+ 500: "#50C58F",
60
+ },
61
+ orange: {
62
+ 500: "#FC5701",
63
+ 450: "#FC6C2D",
64
+ 150: "#FFA41C",
65
+ },
66
+ yellow: {
67
+ 100: "#DFAE00",
68
+ },
69
+ };
70
+
71
+ const fonts = {
72
+ inter_thin_100: "Inter-Thin",
73
+ inter_extra_light_200: "Inter-ExtraLight",
74
+ inter_light_300: "Inter-Light",
75
+ inter_regular_400: "Inter-Regular",
76
+ inter_medium_500: "Inter-Medium",
77
+ inter_semi_bold_600: "Inter-SemiBold",
78
+ inter_bold_700: "Inter-Bold",
79
+ inter_extra_bold_800: "Inter-ExtraBold",
80
+ inter_bold: "Inter-Bold",
81
+ };
82
+
83
+ const fontSizes = {
84
+ "2xs": 10,
85
+ xs: 12,
86
+ sm: 14,
87
+ md: 16,
88
+ lg: 18,
89
+ xl: 20,
90
+ "2xl": 24,
91
+ "3xl": 32,
92
+ "4xl": 38,
93
+ "5xl": 50,
94
+ "6xl": 60,
95
+ "7xl": 72,
96
+ "8xl": 96,
97
+ "9xl": 128,
98
+ };
99
+
100
+ const margins = {
101
+ "2xs": 10,
102
+ xs: 12,
103
+ sm: 14,
104
+ md: 16,
105
+ lg: 18,
106
+ xl: 20,
107
+ "2xl": 24,
108
+ "3xl": 30,
109
+ "4xl": 36,
110
+ "5xl": 48,
111
+ "6xl": 60,
112
+ "7xl": 72,
113
+ "8xl": 96,
114
+ "9xl": 128,
115
+ };
116
+
117
+ const paddings = {
118
+ "2xs": 10,
119
+ xs: 12,
120
+ sm: 14,
121
+ md: 16,
122
+ lg: 18,
123
+ xl: 20,
124
+ "2xl": 24,
125
+ "3xl": 30,
126
+ "4xl": 36,
127
+ "5xl": 48,
128
+ "6xl": 60,
129
+ "7xl": 72,
130
+ "8xl": 96,
131
+ "9xl": 128,
132
+ };
133
+
134
+ const shadows = {
135
+ z1: "0px 1px 0px rgba(0, 0, 0, 0.3), 0px 1px 0px 1px rgba(0, 0, 0, 0.15)",
136
+ z2: "0px 1px 2px rgba(0, 0, 0, 0.3)",
137
+ };
138
+
139
+ const letterSpacing = {
140
+ o_16: 0.16,
141
+ regular: 0.5,
142
+ medium: 0.75,
143
+ strong: 1,
144
+ };
145
+
146
+ /**
147
+ * EXPORTSS
148
+ */
149
+ export const theme = {
150
+ borderWidths,
151
+ colors,
152
+ fonts,
153
+ fontSizes,
154
+ margins,
155
+ shadows,
156
+ paddings,
157
+ letterSpacing,
158
+ };
@@ -1,14 +1,14 @@
1
- /**
2
- * Formata uma data do tipo Date para o formato DD/MM/YYYY
3
- * @param date Objeto Date a ser formatado
4
- * @returns String no formato DD/MM/YYYY
5
- */
6
- const formatDate = (date: Date): string => {
7
- const day = String(date.getDate()).padStart(2, "0");
8
- const month = String(date.getMonth() + 1).padStart(2, "0"); // Mês começa em 0
9
- const year = date.getFullYear();
10
-
11
- return `${day}/${month}/${year}`;
12
- };
13
-
14
- export { formatDate };
1
+ /**
2
+ * Formata uma data do tipo Date para o formato DD/MM/YYYY
3
+ * @param date Objeto Date a ser formatado
4
+ * @returns String no formato DD/MM/YYYY
5
+ */
6
+ const formatDate = (date: Date): string => {
7
+ const day = String(date.getDate()).padStart(2, "0");
8
+ const month = String(date.getMonth() + 1).padStart(2, "0"); // Mês começa em 0
9
+ const year = date.getFullYear();
10
+
11
+ return `${day}/${month}/${year}`;
12
+ };
13
+
14
+ export { formatDate };
@@ -1,3 +1,3 @@
1
- export function multiply(a: number, b: number): number {
2
- return a * b;
3
- }
1
+ export function multiply(a: number, b: number): number {
2
+ return a * b;
3
+ }