@fadyshawky/react-native-magic 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.
- package/package.json +1 -1
- package/template/App.tsx +4 -7
- package/template/src/common/components/PrimaryButton.tsx +23 -23
- package/template/src/common/components/PrimaryTextInput.tsx +195 -129
- package/template/src/common/components/RadioIcon.tsx +4 -4
- package/template/src/common/components/Stepper.tsx +153 -0
- package/template/src/common/validations/errorValidations.ts +2 -3
- package/template/src/core/theme/colors.ts +94 -72
- package/template/src/core/theme/commonConsts.ts +1 -1
- package/template/src/core/theme/commonSizes.ts +117 -60
- package/template/src/core/theme/commonStyles.ts +22 -22
- package/template/src/core/theme/fonts.ts +13 -14
- package/template/src/core/theme/shadows.ts +135 -0
- package/template/src/core/theme/themes.ts +386 -75
- package/template/src/core/theme/types.ts +201 -15
- package/template/src/navigation/AuthStack.tsx +0 -8
- package/template/src/navigation/MainNavigation.tsx +1 -2
- package/template/src/screens/Login/Login.tsx +3 -17
- package/template/install-dev.sh +0 -1
- package/template/install.sh +0 -1
|
@@ -1,27 +1,170 @@
|
|
|
1
1
|
import {TextStyle} from 'react-native';
|
|
2
|
+
import {ElevationShadow} from './shadows';
|
|
3
|
+
import {PrimaryColors, NaturalColors, AlertColors} from './colors';
|
|
2
4
|
|
|
3
5
|
export type ThemeMode = 'light' | 'dark';
|
|
4
6
|
|
|
7
|
+
export interface ISize {
|
|
8
|
+
font: {
|
|
9
|
+
// Almarai Design System Typography
|
|
10
|
+
bodySmall: number;
|
|
11
|
+
bodyMedium: number;
|
|
12
|
+
bodyLarge: number;
|
|
13
|
+
bodyXLarge: number;
|
|
14
|
+
heading6: number;
|
|
15
|
+
heading4: number;
|
|
16
|
+
heading3: number;
|
|
17
|
+
heading2: number;
|
|
18
|
+
heading1: number;
|
|
19
|
+
|
|
20
|
+
// Legacy support
|
|
21
|
+
extraSmall: number;
|
|
22
|
+
extraSmallPlus: number;
|
|
23
|
+
small: number;
|
|
24
|
+
smallPlus: number;
|
|
25
|
+
medium: number;
|
|
26
|
+
mediumPlus: number;
|
|
27
|
+
extraMedium: number;
|
|
28
|
+
large: number;
|
|
29
|
+
largePlus: number;
|
|
30
|
+
extraLarge: number;
|
|
31
|
+
extraLargePlus: number;
|
|
32
|
+
};
|
|
33
|
+
letterSpacing: {
|
|
34
|
+
// Almarai Design System
|
|
35
|
+
bodySmall: number;
|
|
36
|
+
bodyMedium: number;
|
|
37
|
+
bodyLarge: number;
|
|
38
|
+
bodyXLarge: number;
|
|
39
|
+
heading6: number;
|
|
40
|
+
heading4: number;
|
|
41
|
+
heading3: number;
|
|
42
|
+
heading2: number;
|
|
43
|
+
heading1: number;
|
|
44
|
+
|
|
45
|
+
// Legacy support
|
|
46
|
+
extraSmall: number;
|
|
47
|
+
extraSmallPlus: number;
|
|
48
|
+
small: number;
|
|
49
|
+
smallPlus: number;
|
|
50
|
+
medium: number;
|
|
51
|
+
mediumPlus: number;
|
|
52
|
+
large: number;
|
|
53
|
+
largePlus: number;
|
|
54
|
+
extraLarge: number;
|
|
55
|
+
extraLargePlus: number;
|
|
56
|
+
};
|
|
57
|
+
lineHeight: {
|
|
58
|
+
// Almarai Design System
|
|
59
|
+
bodySmall: number;
|
|
60
|
+
bodyMedium: number;
|
|
61
|
+
bodyLarge: number;
|
|
62
|
+
bodyXLarge: number;
|
|
63
|
+
heading6: number;
|
|
64
|
+
heading4: number;
|
|
65
|
+
heading3: number;
|
|
66
|
+
heading2: number;
|
|
67
|
+
heading1: number;
|
|
68
|
+
|
|
69
|
+
// Legacy support
|
|
70
|
+
extraSmall: number;
|
|
71
|
+
extraSmallPlus: number;
|
|
72
|
+
small: number;
|
|
73
|
+
smallPlus: number;
|
|
74
|
+
medium: number;
|
|
75
|
+
mediumPlus: number;
|
|
76
|
+
large: number;
|
|
77
|
+
largePlus: number;
|
|
78
|
+
extraLarge: number;
|
|
79
|
+
extraLargePlus: number;
|
|
80
|
+
};
|
|
81
|
+
spacing: {
|
|
82
|
+
// Design System Spacing Scale
|
|
83
|
+
none: number; // space / 0
|
|
84
|
+
xSmall: number; // space / 2
|
|
85
|
+
small: number; // space / 4
|
|
86
|
+
medium: number; // space / 8
|
|
87
|
+
large: number; // space / 12
|
|
88
|
+
xLarge: number; // space / 16
|
|
89
|
+
xxLarge: number; // space / 24 (2X-Large)
|
|
90
|
+
xxxLarge: number; // space / 32 (3X-Large)
|
|
91
|
+
xxxxLarge: number; // space / 48 (4X-Large)
|
|
92
|
+
xxxxxLarge: number; // space / 64 (5X-Large)
|
|
93
|
+
xxxxxxLarge: number; // space / 80 (6X-Large)
|
|
94
|
+
full: number; // space / 100 (Full)
|
|
95
|
+
|
|
96
|
+
// Legacy support
|
|
97
|
+
xs: number;
|
|
98
|
+
sm: number;
|
|
99
|
+
md: number;
|
|
100
|
+
lg: number;
|
|
101
|
+
xl: number;
|
|
102
|
+
};
|
|
103
|
+
borderRadius: {
|
|
104
|
+
// Design System Border Radius Scale
|
|
105
|
+
none: number; // Border / 0
|
|
106
|
+
xSmall: number; // Border / 2
|
|
107
|
+
small: number; // Border / 4
|
|
108
|
+
medium: number; // Border / 8
|
|
109
|
+
large: number; // Border / 12
|
|
110
|
+
xLarge: number; // Border / 16
|
|
111
|
+
xxLarge: number; // Border / 24 (2X-Large)
|
|
112
|
+
full: number; // Border / 1000 (Full)
|
|
113
|
+
|
|
114
|
+
// Legacy support
|
|
115
|
+
xs: number;
|
|
116
|
+
sm: number;
|
|
117
|
+
md: number;
|
|
118
|
+
lg: number;
|
|
119
|
+
xl: number;
|
|
120
|
+
};
|
|
121
|
+
borderWidth: {
|
|
122
|
+
// Design System Stroke Scale
|
|
123
|
+
none: number; // Stroke / 0
|
|
124
|
+
xSmall: number; // Stroke / 0.5
|
|
125
|
+
small: number; // Stroke / 1
|
|
126
|
+
medium: number; // Stroke / 1.5
|
|
127
|
+
large: number; // Stroke / 2
|
|
128
|
+
|
|
129
|
+
// Legacy support
|
|
130
|
+
extraSmall: number;
|
|
131
|
+
};
|
|
132
|
+
}
|
|
133
|
+
|
|
5
134
|
export interface Theme {
|
|
6
135
|
mode: ThemeMode;
|
|
7
|
-
colors:
|
|
8
|
-
indigoBlue: string;
|
|
9
|
-
mutedLavender: string;
|
|
10
|
-
tintColor: string;
|
|
11
|
-
mutedLavender30: string;
|
|
12
|
-
balanceBackground: string;
|
|
13
|
-
white: string;
|
|
14
|
-
backgroundOpacity: string;
|
|
15
|
-
black: string;
|
|
16
|
-
background: string;
|
|
17
|
-
surface: string;
|
|
18
|
-
card: string;
|
|
19
|
-
shadow: string;
|
|
20
|
-
red: string;
|
|
21
|
-
};
|
|
136
|
+
colors: typeof PrimaryColors & typeof NaturalColors & typeof AlertColors;
|
|
22
137
|
text: {
|
|
138
|
+
// Almarai Design System Typography
|
|
139
|
+
// Headings
|
|
23
140
|
header1: TextStyle;
|
|
24
141
|
header2: TextStyle;
|
|
142
|
+
header3: TextStyle;
|
|
143
|
+
header4: TextStyle;
|
|
144
|
+
header6: TextStyle;
|
|
145
|
+
|
|
146
|
+
// Body Text with different weights
|
|
147
|
+
bodyXLargeLight: TextStyle;
|
|
148
|
+
bodyXLargeRegular: TextStyle;
|
|
149
|
+
bodyXLargeBold: TextStyle;
|
|
150
|
+
bodyXLargeExtraBold: TextStyle;
|
|
151
|
+
|
|
152
|
+
bodyLargeLight: TextStyle;
|
|
153
|
+
bodyLargeRegular: TextStyle;
|
|
154
|
+
bodyLargeBold: TextStyle;
|
|
155
|
+
bodyLargeExtraBold: TextStyle;
|
|
156
|
+
|
|
157
|
+
bodyMediumLight: TextStyle;
|
|
158
|
+
bodyMediumRegular: TextStyle;
|
|
159
|
+
bodyMediumBold: TextStyle;
|
|
160
|
+
bodyMediumExtraBold: TextStyle;
|
|
161
|
+
|
|
162
|
+
bodySmallLight: TextStyle;
|
|
163
|
+
bodySmallRegular: TextStyle;
|
|
164
|
+
bodySmallBold: TextStyle;
|
|
165
|
+
bodySmallExtraBold: TextStyle;
|
|
166
|
+
|
|
167
|
+
// Legacy styles for backward compatibility
|
|
25
168
|
balanceTitle: TextStyle;
|
|
26
169
|
balanceAmount: TextStyle;
|
|
27
170
|
balanceLabel: TextStyle;
|
|
@@ -35,6 +178,21 @@ export interface Theme {
|
|
|
35
178
|
navBar: TextStyle;
|
|
36
179
|
};
|
|
37
180
|
spacing: {
|
|
181
|
+
// Design System Spacing Scale
|
|
182
|
+
none: number;
|
|
183
|
+
xSmall: number;
|
|
184
|
+
small: number;
|
|
185
|
+
medium: number;
|
|
186
|
+
large: number;
|
|
187
|
+
xLarge: number;
|
|
188
|
+
xxLarge: number;
|
|
189
|
+
xxxLarge: number;
|
|
190
|
+
xxxxLarge: number;
|
|
191
|
+
xxxxxLarge: number;
|
|
192
|
+
xxxxxxLarge: number;
|
|
193
|
+
full: number;
|
|
194
|
+
|
|
195
|
+
// Legacy support
|
|
38
196
|
xs: number;
|
|
39
197
|
sm: number;
|
|
40
198
|
md: number;
|
|
@@ -42,10 +200,38 @@ export interface Theme {
|
|
|
42
200
|
xl: number;
|
|
43
201
|
};
|
|
44
202
|
borderRadius: {
|
|
203
|
+
// Design System Border Radius Scale
|
|
204
|
+
none: number;
|
|
205
|
+
xSmall: number;
|
|
206
|
+
small: number;
|
|
207
|
+
medium: number;
|
|
208
|
+
large: number;
|
|
209
|
+
xLarge: number;
|
|
210
|
+
xxLarge: number;
|
|
211
|
+
full: number;
|
|
212
|
+
|
|
213
|
+
// Legacy support
|
|
45
214
|
xs: number;
|
|
46
215
|
sm: number;
|
|
47
216
|
md: number;
|
|
48
217
|
lg: number;
|
|
49
218
|
xl: number;
|
|
50
219
|
};
|
|
220
|
+
borderWidth: {
|
|
221
|
+
// Design System Stroke Scale
|
|
222
|
+
none: number;
|
|
223
|
+
xSmall: number;
|
|
224
|
+
small: number;
|
|
225
|
+
medium: number;
|
|
226
|
+
large: number;
|
|
227
|
+
|
|
228
|
+
// Legacy support
|
|
229
|
+
extraSmall: number;
|
|
230
|
+
};
|
|
231
|
+
shadows: {
|
|
232
|
+
elevation1: ElevationShadow;
|
|
233
|
+
elevation2: ElevationShadow;
|
|
234
|
+
elevation3: ElevationShadow;
|
|
235
|
+
elevation4: ElevationShadow;
|
|
236
|
+
};
|
|
51
237
|
}
|
|
@@ -1,7 +1,6 @@
|
|
|
1
1
|
import {createNativeStackNavigator} from '@react-navigation/native-stack';
|
|
2
2
|
import {useTranslation} from '../common/localization/LocalizationProvider';
|
|
3
3
|
import {Login} from '../screens/Login/Login';
|
|
4
|
-
import {OTPScreen} from '../screens/OTP/OTPScreen';
|
|
5
4
|
import {Splash} from '../screens/splash/Splash';
|
|
6
5
|
|
|
7
6
|
const Stack = createNativeStackNavigator();
|
|
@@ -24,13 +23,6 @@ export function AuthStack() {
|
|
|
24
23
|
headerShown: false,
|
|
25
24
|
},
|
|
26
25
|
},
|
|
27
|
-
{
|
|
28
|
-
id: 'OTP',
|
|
29
|
-
component: OTPScreen,
|
|
30
|
-
options: {
|
|
31
|
-
headerShown: false,
|
|
32
|
-
},
|
|
33
|
-
},
|
|
34
26
|
];
|
|
35
27
|
|
|
36
28
|
return (
|
|
@@ -4,7 +4,6 @@ import {DefaultTheme, NavigationContainer} from '@react-navigation/native';
|
|
|
4
4
|
import * as React from 'react';
|
|
5
5
|
import {useRef} from 'react';
|
|
6
6
|
import {useAppSelector} from '../core/store/reduxHelpers';
|
|
7
|
-
import {Colors} from '../core/theme/colors';
|
|
8
7
|
import {AuthStack} from './AuthStack';
|
|
9
8
|
import {AppMainNavigator} from './MainStack';
|
|
10
9
|
import {navigationRef} from './RootNavigation';
|
|
@@ -23,7 +22,7 @@ function AppNavigator() {
|
|
|
23
22
|
dark: false,
|
|
24
23
|
colors: {
|
|
25
24
|
primary: '#000',
|
|
26
|
-
background:
|
|
25
|
+
background: 'white',
|
|
27
26
|
card: '#fff',
|
|
28
27
|
text: '#000',
|
|
29
28
|
border: '#000',
|
|
@@ -19,7 +19,6 @@ import {useInputError} from '../../common/validations/hooks/useInputError';
|
|
|
19
19
|
import {emailValidations} from '../../common/validations/profileValidations';
|
|
20
20
|
import {useAppDispatch} from '../../core/store/reduxHelpers';
|
|
21
21
|
import {userLogin} from '../../core/store/user/userActions';
|
|
22
|
-
import {Colors} from '../../core/theme/colors';
|
|
23
22
|
import {CommonSizes} from '../../core/theme/commonSizes';
|
|
24
23
|
import {CommonStyles} from '../../core/theme/commonStyles';
|
|
25
24
|
import type {RootStackParamList} from '../../navigation/types';
|
|
@@ -111,22 +110,12 @@ export function Login(): JSX.Element {
|
|
|
111
110
|
placeholder={localization.login.EnterPassword}
|
|
112
111
|
error={passwordError}
|
|
113
112
|
/>
|
|
114
|
-
<PrimaryButton
|
|
115
|
-
onPress={goToForgotPassword}
|
|
116
|
-
label={localization.login.forgetPassword}
|
|
117
|
-
type={ButtonType.borderless}
|
|
118
|
-
/>
|
|
119
113
|
<PrimaryButton
|
|
120
114
|
isLoading={loading}
|
|
121
115
|
onPress={loginUser}
|
|
122
116
|
label={localization.login.continue}
|
|
123
117
|
type={ButtonType.solid}
|
|
124
118
|
/>
|
|
125
|
-
<PrimaryButton
|
|
126
|
-
onPress={goToRegistration}
|
|
127
|
-
label={localization.login.notMember}
|
|
128
|
-
type={ButtonType.borderless}
|
|
129
|
-
/>
|
|
130
119
|
</KeyboardAwareScrollView>
|
|
131
120
|
);
|
|
132
121
|
}
|
|
@@ -138,27 +127,24 @@ const styles = StyleSheet.create({
|
|
|
138
127
|
},
|
|
139
128
|
container: {
|
|
140
129
|
flexGrow: 1,
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
borderTopLeftRadius: CommonSizes.spacing.large,
|
|
130
|
+
borderTopRightRadius: CommonSizes.borderRadius.lg,
|
|
131
|
+
borderTopLeftRadius: CommonSizes.borderRadius.lg,
|
|
144
132
|
},
|
|
145
133
|
contentContainer: {
|
|
146
134
|
justifyContent: 'center',
|
|
147
135
|
alignItems: 'center',
|
|
148
|
-
paddingHorizontal: CommonSizes.spacing.
|
|
136
|
+
paddingHorizontal: CommonSizes.spacing.lg,
|
|
149
137
|
paddingVertical: 26,
|
|
150
138
|
gap: 16,
|
|
151
139
|
},
|
|
152
140
|
forgotPassword: {
|
|
153
141
|
...CommonStyles.normalText,
|
|
154
|
-
color: Colors.blueNormalActive,
|
|
155
142
|
textAlign: 'right',
|
|
156
143
|
marginTop: 8,
|
|
157
144
|
marginBottom: 24,
|
|
158
145
|
},
|
|
159
146
|
registerLink: {
|
|
160
147
|
...CommonStyles.normalText,
|
|
161
|
-
color: Colors.blueNormalActive,
|
|
162
148
|
textAlign: 'center',
|
|
163
149
|
marginTop: 16,
|
|
164
150
|
},
|
package/template/install-dev.sh
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
npm i --legacy-peer-deps --save-dev@babel/core @babel/preset-env @babel/runtime @react-native/babel-preset @react-native/eslint-config @react-native/metro-config @react-native/typescript-config @types/lodash @types/react @types/react-test-renderer babel-jest eslint jest prettier react-test-renderer typescript
|
package/template/install.sh
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
npm i --legacy-peer-deps @react-native-async-storage/async-storage @react-native-camera-roll/camera-roll @react-native-community/datetimepicker @react-native-community/image-editor @react-native-community/netinfo @react-native-community/slider @react-navigation/bottom-tabs @react-navigation/drawer @react-navigation/material-top-tabs @react-navigation/native @react-navigation/native-stack @reduxjs/toolkit @shopify/flash-list @types/intl @types/jest @types/react-native-vector-icons @types/react-redux @typescript-eslint/eslint-plugin @typescript-eslint/parser axios babel-plugin-transform-remove-console dayjs detox eslint-config-react-strong eslint-import-resolver-typescript eslint-plugin-import eslint-plugin-jest eslint-plugin-react eslint-plugin-react-hooks eslint-plugin-react-native eslint-plugin-unused-imports husky intl lint-staged lodash metro-react-native-babel-preset mime moment patch-package react react-dom react-native react-native-actions-sheet react-native-animated-pagination-dots react-native-bundle-visualizer react-native-calendars react-native-camera react-native-config react-native-config-node react-native-dev-menu react-native-device-info react-native-dropdown-select-list react-native-gesture-handler react-native-image-crop-picker react-native-image-resource-generator react-native-in-app-review react-native-keyboard-aware-scroll-view react-native-localization react-native-mask-input react-native-pager-view react-native-permissions react-native-reanimated react-native-reanimated-carousel react-native-safe-area-context react-native-screens react-native-sfsymbols react-native-share react-native-size-matters react-native-snackbar react-native-svg react-native-tab-view react-native-vector-icons react-native-version react-native-webview react-redux redux redux-persist redux-persist-transform-filter rn-fetch-blob @gorhom/bottom-sheet react-native-vision-camera
|