@fadyshawky/react-native-magic 2.0.4 → 2.0.5

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 (110) hide show
  1. package/package.json +1 -1
  2. package/template/src/common/ImageResources.g.ts +33 -1
  3. package/template/src/common/components/Background.tsx +3 -1
  4. package/template/src/common/components/Container.tsx +1 -1
  5. package/template/src/common/components/OTPInput.tsx +3 -2
  6. package/template/src/common/components/PrimaryButton.tsx +23 -23
  7. package/template/src/common/components/PrimaryTextInput.tsx +189 -199
  8. package/template/src/common/components/RadioIcon.tsx +4 -4
  9. package/template/src/common/components/SafeText.tsx +41 -0
  10. package/template/src/common/components/SearchBar.tsx +19 -17
  11. package/template/src/common/components/TryAgain.tsx +3 -3
  12. package/template/src/common/localization/localization.ts +10 -0
  13. package/template/src/common/localization/translations/commonLocalization.ts +97 -0
  14. package/template/src/common/localization/translations/homeLocalization.ts +24 -0
  15. package/template/src/common/localization/translations/loginLocalization.ts +28 -2
  16. package/template/src/common/localization/translations/mainNavigationLocalization.ts +30 -0
  17. package/template/src/common/localization/translations/navigationLocalization.ts +48 -0
  18. package/template/src/common/localization/translations/otpLocalization.ts +28 -0
  19. package/template/src/common/localization/translations/passwordLocalization.ts +54 -0
  20. package/template/src/common/localization/translations/posLocalization.ts +196 -0
  21. package/template/src/common/utils/FeesCaalculation.tsx +37 -0
  22. package/template/src/common/utils/index.tsx +11 -0
  23. package/template/src/common/utils/printData.tsx +161 -0
  24. package/template/src/common/validations/errorValidations.ts +3 -2
  25. package/template/src/components/PrinterExample.js +226 -0
  26. package/template/src/core/api/serverHeaders.ts +62 -1
  27. package/template/src/core/store/Categories/categoryActions.ts +33 -0
  28. package/template/src/core/store/Categories/categorySlice.ts +75 -0
  29. package/template/src/core/store/Categories/categoryState.ts +41 -0
  30. package/template/src/core/store/Providers/providersActions.ts +102 -0
  31. package/template/src/core/store/Providers/providersSlice.ts +136 -0
  32. package/template/src/core/store/Providers/providersState.ts +37 -0
  33. package/template/src/core/store/Services/servicesActions.ts +191 -0
  34. package/template/src/core/store/Services/servicesSlice.ts +205 -0
  35. package/template/src/core/store/Services/servicesState.ts +466 -0
  36. package/template/src/core/store/app/appSlice.ts +13 -5
  37. package/template/src/core/store/app/appState.ts +10 -2
  38. package/template/src/core/store/rootReducer.ts +6 -1
  39. package/template/src/core/store/store.tsx +55 -2
  40. package/template/src/core/store/user/userActions.ts +164 -26
  41. package/template/src/core/store/user/userSlice.ts +193 -21
  42. package/template/src/core/store/user/userState.ts +148 -25
  43. package/template/src/core/theme/colors.ts +70 -94
  44. package/template/src/core/theme/commonConsts.ts +1 -1
  45. package/template/src/core/theme/commonSizes.ts +94 -119
  46. package/template/src/core/theme/commonStyles.ts +22 -22
  47. package/template/src/core/theme/fonts.ts +14 -13
  48. package/template/src/core/theme/themes.ts +75 -386
  49. package/template/src/core/theme/types.ts +15 -201
  50. package/template/src/core/utils/stringUtils.ts +114 -0
  51. package/template/src/modules/SunmiCard.js +212 -0
  52. package/template/src/modules/SunmiPrepaid.ts +122 -0
  53. package/template/src/navigation/AuthStack.tsx +8 -0
  54. package/template/src/navigation/HeaderComponents.tsx +76 -1
  55. package/template/src/navigation/MainNavigation.tsx +3 -1
  56. package/template/src/navigation/MainStack.tsx +130 -56
  57. package/template/src/navigation/TabBar.tsx +111 -59
  58. package/template/src/navigation/types.ts +24 -0
  59. package/template/src/screens/Categories/Categories.tsx +141 -0
  60. package/template/src/screens/Categories/hooks/useCategoriesData.ts +33 -0
  61. package/template/src/screens/Categories/types.ts +7 -0
  62. package/template/src/screens/Favorites/Favorites.tsx +130 -0
  63. package/template/src/screens/ForceChangePassword/ForceChangePasswordScreen.tsx +155 -0
  64. package/template/src/screens/History/History.tsx +430 -0
  65. package/template/src/screens/History/hooks/useHistoryData.ts +49 -0
  66. package/template/src/screens/History/types.ts +7 -0
  67. package/template/src/screens/InquiredBill/InquiredBill.tsx +443 -0
  68. package/template/src/screens/InquiredBill/hooks/useInquiredData.ts +91 -0
  69. package/template/src/screens/Login/Login.tsx +85 -85
  70. package/template/src/screens/OTP/OTPScreen.tsx +170 -0
  71. package/template/src/screens/PaymentConfirmation/PaymentConfirmation.tsx +326 -0
  72. package/template/src/screens/Providers/Providers.tsx +166 -0
  73. package/template/src/screens/Providers/hooks/useProvidersData.ts +33 -0
  74. package/template/src/screens/Providers/types.ts +7 -0
  75. package/template/src/screens/ReceiptScreen/ReceiptScreen.tsx +181 -0
  76. package/template/src/screens/ReceiptScreen/hooks/useReceiptData.ts +46 -0
  77. package/template/src/screens/ReceiptScreen/utils/utils.tsx +156 -0
  78. package/template/src/screens/Services/Services.tsx +144 -0
  79. package/template/src/screens/Services/hooks/useServicesData.ts +41 -0
  80. package/template/src/screens/SingleService/Components/FawryInputs.tsx +446 -0
  81. package/template/src/screens/SingleService/SingleService.tsx +229 -0
  82. package/template/src/screens/SingleService/hooks/useServiceData.ts +164 -0
  83. package/template/src/screens/home/Components/PayByCode.tsx +129 -0
  84. package/template/src/screens/home/HomeScreen.tsx +268 -77
  85. package/template/src/screens/home/hooks/useHomeData.ts +32 -38
  86. package/template/src/screens/index.tsx +24 -0
  87. package/template/src/screens/profile/Profile.tsx +290 -2
  88. package/template/src/services/SunmiPrinterInternal.js +268 -0
  89. package/template/src/types/sunmiPrepaid.d.ts +20 -0
  90. package/template/src/utils/SunmiPrinter.ts +442 -0
  91. package/template/src/utils/feesCalculator.ts +92 -0
  92. package/template/src/common/components/Stepper.tsx +0 -153
  93. package/template/src/common/components/Svg.tsx +0 -25
  94. package/template/src/common/hooks/useDebounce.ts +0 -17
  95. package/template/src/common/hooks/usePrevious.ts +0 -11
  96. package/template/src/common/localization/intlFormatter.ts +0 -37
  97. package/template/src/common/urls/emailUrl.ts +0 -20
  98. package/template/src/common/urls/mapUrl.ts +0 -22
  99. package/template/src/common/utils/listHandlers.ts +0 -30
  100. package/template/src/common/utils/serializeQueryParams.ts +0 -10
  101. package/template/src/common/validations/hooks/useDatesError.ts +0 -40
  102. package/template/src/common/validations/profileValidations.ts +0 -30
  103. package/template/src/core/theme/shadows.ts +0 -135
  104. package/template/src/navigation/TopTabBar.tsx +0 -77
  105. package/template/src/screens/Settings/Settings.tsx +0 -5
  106. package/template/src/screens/home/components/CarouselSection.tsx +0 -79
  107. package/template/src/screens/home/components/FeaturedCarousel.tsx +0 -128
  108. package/template/src/screens/main/Main.tsx +0 -5
  109. package/template/src/screens/registration/RegistrationScreen.tsx +0 -198
  110. package/template/src/screens/resetPassword/ForgotPasswordScreen.tsx +0 -129
@@ -1,44 +1,167 @@
1
1
  import {LoadState} from '../../../../types';
2
2
 
3
3
  export interface UserState {
4
- user: UserEntity;
4
+ user: User;
5
+ current_balance: number;
6
+ daily_commission: number;
5
7
  accessToken: string;
6
- loginLoading: LoadState;
8
+ loginLoading: string;
9
+ tempToken: string;
10
+ favoriteCategories: number[];
11
+ favoriteProviders: number[];
12
+ history: HistoryEntity[];
13
+ historyDetails: HistoryDetailsEntity[];
14
+ }
15
+ export interface User {
16
+ type: string;
17
+ mobile_number: string;
18
+ full_name: string;
19
+ merchantStore: MerchantStore;
20
+ status: string;
21
+ }
22
+ export interface MerchantStore {
23
+ id: number;
24
+ wallet_user_id: number;
25
+ name: string;
26
+ address: string;
27
+ city: string;
28
+ region: string;
29
+ store_imgs?: null;
30
+ tax_card?: null;
31
+ commercial_registration?: null;
32
+ createdAt: string;
33
+ updatedAt: string;
34
+ id_front: string;
35
+ id_back: string;
36
+ selfie?: null;
37
+ }
38
+ export interface HistoryEntity {
39
+ id: number;
40
+ transaction_reference_num: string;
41
+ bee_transaction_id?: null;
42
+ fawry_transaction_id?: string | null;
43
+ transaction_serial_num?: string | null;
44
+ amount: string | number;
45
+ sender_fees: string;
46
+ reciever_fees: string;
47
+ sender_identifier: string;
48
+ reciever_identifier: string;
49
+ status: string;
50
+ sender_status: string;
51
+ receiver_status: string;
52
+ reason?: null;
53
+ transactionReason: string;
54
+ display_reason?: null;
55
+ sender_interchange_amount: string;
56
+ receiver_interchange_amount: string;
57
+ sender_commission: string;
58
+ receiver_commission: string;
59
+ bulk_id?: null;
60
+ sender_name: string;
61
+ receiver_name: string;
62
+ notification_id?: null;
63
+ transaction_data?: null;
64
+ convenience: string;
65
+ tips: string;
66
+ reference1?: null;
67
+ reference2?: null;
68
+ meta?: null;
69
+ createdAt: string;
70
+ updatedAt: string;
71
+ transaction_type: number;
72
+ sender_id: number;
73
+ reciever_id: number;
74
+ sender_scheme_id: number;
75
+ receiver_scheme_id: number;
76
+ 'Transaction_type.id': number;
77
+ 'Transaction_type.name': string;
78
+ 'Transaction_type.name_ar'?: null;
79
+ 'Transaction_type.request_type': string;
80
+ 'Transaction_type.request_type_ar'?: null;
81
+ 'Transaction_type.timeout': string;
82
+ 'Transaction_type.on_off_us': string;
83
+ 'Transaction_type.sender_type': string;
84
+ 'Transaction_type.profile_type'?: null;
85
+ 'Transaction_type.receiver_type': string;
86
+ 'Transaction_type.tahweel_operation': string;
87
+ 'Transaction_type.send_fees'?: string | null;
88
+ 'Transaction_type.receive_fees': string;
89
+ 'Transaction_type.send_limit': string;
90
+ 'Transaction_type.receive_limit': string;
91
+ 'Transaction_type.send_commision'?: string | null;
92
+ 'Transaction_type.receive_commision'?: null;
93
+ 'Transaction_type.createdAt': string;
94
+ 'Transaction_type.updatedAt': string;
95
+ providerName?: string | null;
96
+ serviceName?: string | null;
97
+ totalAmount?: number | null;
98
+ }
99
+ export interface HistoryDetailsEntity {
100
+ value: string;
101
+ type: string;
102
+ label?: string;
103
+ }
104
+
105
+ export enum UserStatus {
106
+ ACTIVE = 'Active',
107
+ REGISTERED = 'Registered',
108
+ SUSPENDED = 'Suspended',
109
+ PENDING = 'Pending',
7
110
  }
8
111
 
9
112
  export interface UserPayload {
10
- user: UserEntity;
113
+ type: string;
114
+ mobile_number: string;
115
+ full_name: string;
116
+ merchantStore: MerchantStore;
117
+ requests: HistoryEntity[];
118
+ data: HistoryDetailsEntity[];
119
+ balance: {
120
+ name: string;
121
+ value: number;
122
+ }[];
123
+ current_balance: {
124
+ name: string;
125
+ value: number;
126
+ }[];
127
+ status: UserStatus;
128
+ fullname: string;
11
129
  token: string;
12
130
  }
13
131
 
14
132
  export const UserInitialState: UserState = {
15
133
  user: {
16
- id: 0,
17
- email: '',
18
- first_name: '',
19
- last_name: '',
20
- phone_number: '',
21
- address: '',
22
- role_id: 0,
23
- created_at: '',
24
- updated_at: '',
25
- deleted_at: null,
26
- roleName: '',
134
+ type: '',
135
+ mobile_number: '',
136
+ full_name: '',
137
+ status: UserStatus.PENDING,
138
+ merchantStore: {
139
+ id: 0,
140
+ wallet_user_id: 0,
141
+ name: '',
142
+ address: '',
143
+ city: '',
144
+ region: '',
145
+ createdAt: '',
146
+ updatedAt: '',
147
+ id_front: '',
148
+ id_back: '',
149
+ },
27
150
  },
151
+ current_balance: 0,
152
+ daily_commission: 0,
28
153
  accessToken: '',
29
154
  loginLoading: LoadState['needLoad'],
155
+ tempToken: '',
156
+ favoriteCategories: [],
157
+ favoriteProviders: [],
158
+ history: [],
159
+ historyDetails: [],
30
160
  };
31
161
 
32
162
  export interface UserEntity {
33
- id: number;
34
- email: string;
35
- first_name: string;
36
- last_name: string;
37
- phone_number: string;
38
- address: string;
39
- role_id: number;
40
- created_at: string;
41
- updated_at: string;
42
- deleted_at?: null;
43
- roleName: string;
163
+ type: string;
164
+ status: UserStatus;
165
+ mobile_number: string;
166
+ full_name: string;
44
167
  }
@@ -1,99 +1,75 @@
1
- export enum PrimaryColors {
2
- PlatinateBlue_0 = '#E9EDFF',
3
- PlatinateBlue_25 = '#D3DAFF',
4
- PlatinateBlue_50 = '#BDC8FF',
5
- PlatinateBlue_100 = '#A7B5FF',
6
- PlatinateBlue_200 = '#7C91FF',
7
- PlatinateBlue_300 = '#506CFF',
8
- PlatinateBlue_400 = '#2447FF',
9
- PlatinateBlue_500 = '#1D39CC',
10
- PlatinateBlue_600 = '#1D39CC',
11
- PlatinateBlue_700 = '#0E1C66',
12
- cetaceanBlue_0 = '#4C7CEA',
13
- cetaceanBlue_25 = '#436FD5',
14
- cetaceanBlue_50 = '#3B63BF',
15
- cetaceanBlue_100 = '#3257AA',
16
- cetaceanBlue_200 = '#223E80',
17
- cetaceanBlue_300 = '#112655',
18
- cetaceanBlue_400 = '#000D2B',
19
- cetaceanBlue_500 = '#000A22',
20
- cetaceanBlue_600 = '#00081A',
21
- cetaceanBlue_700 = '#000511',
22
- strokeDeactive = '#D3DAFF',
1
+ export enum BlackColors {
2
+ indigoBlue = '#6666FF',
3
+ mutedLavender = '#B3B5FF',
4
+ tintColor = '#B3B5FF',
5
+ mutedLavender30 = 'rgba(184, 186, 255, 0.3)',
6
+ balanceBackground = 'rgba(41, 45, 50, 0.8)',
7
+ white = '#FFFFFF',
8
+ backgroundOpacity = 'rgba(36, 40, 44, 0.8)',
9
+ black = '#000000',
10
+ background = '#000000',
11
+ surface = '#121212',
12
+ card = '#1E1E1E',
13
+ shadow = '#FFFFFF',
14
+ red = '#FB043E',
23
15
  }
24
16
 
25
- export enum NaturalColors {
26
- grayScale_0 = '#FAFAFA',
27
- grayScale_25 = '#A3AAAD',
28
- grayScale_50 = '#949C9E',
29
- grayScale_100 = '#858D8F',
30
- grayScale_200 = '#686F72',
31
- grayScale_300 = '#4A5254',
32
- grayScale_400 = '#2D3436',
33
- grayScale_500 = '#242A2B',
34
- grayScale_600 = '#1B1F20',
35
- grayScale_700 = '#121516',
36
- naturalColor_0 = '#9C97B3',
37
- naturalColor_25 = '#8E89A4',
38
- naturalColor_50 = '#7F7B94',
39
- naturalColor_100 = '#716D85',
40
- naturalColor_200 = '#555265',
41
- naturalColor_300 = '#383646',
42
- naturalColor_400 = '#1C1A27',
43
- naturalColor_500 = '#16151F',
44
- naturalColor_600 = '#111017',
45
- naturalColor_700 = '#0B0A10',
17
+ export enum WhiteColors {
18
+ indigoBlue = '#6666FF',
19
+ mutedLavender = '#B3B5FF',
20
+ tintColor = '#6666FF',
21
+ mutedLavender30 = 'rgba(184, 186, 255, 0.3)',
22
+ balanceBackground = 'rgba(184, 186, 255, 0.3)',
23
+ white = '#FFFFFF',
24
+ backgroundOpacity = 'rgba(255, 255, 255, 0.7)',
25
+ black = '#000000',
26
+ background = '#FFFFFF',
27
+ surface = '#FFFFFF',
28
+ card = '#FFFFFF',
29
+ shadow = 'rgba(0, 0, 0, 0.8)',
30
+ red = '#FB043E',
46
31
  }
47
32
 
48
- export enum AlertColors {
49
- links_0 = '#E8F2FF',
50
- links_25 = '#D2E4FE',
51
- links_50 = '#BBD7FE',
52
- links_100 = '#A5CAFE',
53
- links_200 = '#77AFFD',
54
- links_300 = '#4A95FD',
55
- links_400 = '#1D7AFC',
56
- links_500 = '#1762CA',
57
- links_600 = '#114997',
58
- links_700 = '#0C3165',
59
- success_0 = '#C6FFE5',
60
- success_25 = '#8FE6BE',
61
- success_50 = '#7DDAB0',
62
- success_100 = '#6CCEA1',
63
- success_200 = '#48B684',
64
- success_300 = '#259E67',
65
- success_400 = '#02864A',
66
- success_500 = '#026B3B',
67
- success_600 = '#01502C',
68
- success_700 = '#01361E',
69
- warning_0 = '#FFF4E8',
70
- warning_25 = '#FEE8D1',
71
- warning_50 = '#FEDDBA',
72
- warning_100 = '#FDD1A3',
73
- warning_200 = '#FDBB76',
74
- warning_300 = '#FCA448',
75
- warning_400 = '#FB8D1A',
76
- warning_500 = '#C97115',
77
- warning_600 = '#975510',
78
- warning_700 = '#64380A',
79
- error_0 = '#FDE6EC',
80
- error_25 = '#FACED8',
81
- error_50 = '#F8B5C5',
82
- error_100 = '#F69CB2',
83
- error_200 = '#F16B8B',
84
- error_300 = '#ED3965',
85
- error_400 = '#E8083E',
86
- error_500 = '#BA0632',
87
- error_600 = '#8B0525',
88
- error_700 = '#5D0319',
89
- discover_0 = '#F1ECF6',
90
- discover_25 = '#E4D9EC',
91
- discover_50 = '#D6C5E3',
92
- discover_100 = '#C8B2D9',
93
- discover_200 = '#AD8CC7',
94
- discover_300 = '#9165B4',
95
- discover_400 = '#763FA1',
96
- discover_500 = '#5E3281',
97
- discover_600 = '#472661',
98
- discover_700 = '#2F1940',
33
+ export enum NewColors {
34
+ violetLight = '#F3F2FF',
35
+ violetLightHover = '#E6E6FF',
36
+ violetLightActive = '#C1C0FE',
37
+ violetNormal = '#8481FD',
38
+ violetNormalHover = '#5250D9',
39
+ violetNormalActive = '#3331B8',
40
+ violetDark = '#262626',
41
+ violetDarkHover = '#1A1994',
42
+ violetDarkActive = '#111066',
43
+ violetDarker = '#000033',
44
+ blueLight = '#F6FCFF',
45
+ blueLightHover = '#E9F8FF',
46
+ blueLightActive = '#C1E5FF',
47
+ blueNormal = '#52BDFF',
48
+ blueNormalHover = '#3399D9',
49
+ blueNormalActive = '#1A7DB3',
50
+ blueDarker = '#262626',
51
+ greyLight = '#F9FCFF',
52
+ greyLightHover = '#E0E0E0',
53
+ greyLightActive = '#BDBDBD',
54
+ greyNormal = '#929292',
55
+ greyNormalHover = '#666666',
56
+ greyNormalActive = '#4D4D4D',
57
+ greyDarker = '#262626',
58
+ orandeLight = '#FFFAF8',
59
+ orandeLightHover = '#FDECE1',
60
+ orandeLightActive = '#FBCEB4',
61
+ orandeNormal = '#F2565E',
62
+ orandeNormalHover = '#CE3C3E',
63
+ orandeNormalActive = '#AD3335',
64
+ orandeDarker = '#262626',
65
+ lightBlueLight = '#FEF7F7',
66
+ lightBlueLightHover = '#FCDDDF',
67
+ lightBlueLightActive = '#F9AAAF',
68
+ lightBlueNormal = '#CE3C3E',
69
+ lightBlueNormalHover = '#AD3335',
70
+ lightBlueNormalActive = '#8C292B',
71
+ lightBlueDarker = '#262626',
72
+ red = '#FFFCF1',
73
+ green = '#F4FDFB',
74
+ background = '#FAFAFA',
99
75
  }
@@ -9,7 +9,7 @@ import {
9
9
  StyleSheet,
10
10
  } from 'react-native';
11
11
  import DeviceInfo from 'react-native-device-info';
12
- import {createPerfectSize} from '../../common/utils/createPerfectSize';
12
+ import {createPerfectSize} from '../../common/utils';
13
13
 
14
14
  const windowDimensions = Dimensions.get('window');
15
15
  export const isIos = Platform.OS == 'ios';
@@ -1,127 +1,102 @@
1
- import {ISize} from './types';
1
+ import {ISize} from '../../../types';
2
+ import {scale, scaleFontSize, scaleSpacing, scaleBorderRadius} from './scaling';
2
3
 
3
- export const CommonSizes = {
4
- font: {
5
- // Body Text Sizes
6
- bodySmall: 12, // Body Small
7
- bodyMedium: 14, // Body Medium
8
- bodyLarge: 16, // Body Large
9
- bodyXLarge: 18, // Body XLarge
4
+ // Font sizes following design system
5
+ export const FontSizes = {
6
+ // Header sizes
7
+ header1: scaleFontSize(48),
8
+ header2: scaleFontSize(48),
9
+
10
+ // Body sizes
11
+ body1: scaleFontSize(32),
12
+ body2: scaleFontSize(30),
10
13
 
11
- // Heading Sizes
12
- heading6: 18, // Heading 6 / Bold / 18px
13
- heading4: 24, // Heading 4 / Bold / 24px
14
- heading3: 32, // Heading 3 / Bold / 32px
15
- heading2: 48, // Heading 2 / Bold / 48px
16
- heading1: 64, // Heading 1 / Bold / 64px
14
+ // Component specific sizes
15
+ button: scaleFontSize(36),
16
+ card: scaleFontSize(34),
17
+ searchBar: scaleFontSize(24),
18
+ balanceLabel: scaleFontSize(16),
19
+ label: scaleFontSize(20),
20
+ hyperlink: scaleFontSize(24),
21
+ // Additional utility sizes
22
+ small: scaleFontSize(24),
23
+ medium: scaleFontSize(30),
24
+ large: scaleFontSize(36),
25
+ extraLarge: scaleFontSize(48),
26
+ navBar: scaleFontSize(22),
27
+ } as const;
17
28
 
18
- // Legacy support - keeping these for backward compatibility
19
- extraSmall: 12, // Maps to bodySmall
20
- extraSmallPlus: 14, // Maps to bodyMedium
21
- small: 14, // Maps to bodyMedium
22
- smallPlus: 16, // Maps to bodyLarge
23
- medium: 16, // Maps to bodyLarge
24
- mediumPlus: 18, // Maps to bodyXLarge
25
- extraMedium: 24, // Maps to heading4
26
- large: 32, // Maps to heading3
27
- largePlus: 48, // Maps to heading2
28
- extraLarge: 64, // Maps to heading1
29
- extraLargePlus: 64, // Maps to heading1
30
- } as Readonly<ISize['font']>,
31
- letterSpacing: {
32
- // Default letter spacing for Almarai
33
- bodySmall: 0,
34
- bodyMedium: 0,
35
- bodyLarge: 0,
36
- bodyXLarge: 0,
37
- heading6: 0,
38
- heading4: 0,
39
- heading3: 0,
40
- heading2: 0,
41
- heading1: 0,
29
+ // Letter spacing for typography
30
+ export const LetterSpacing = {
31
+ none: 0,
32
+ tiny: scale(-0.5),
33
+ small: scale(-0.25),
34
+ medium: scale(0),
35
+ extraMedium: scale(0.25),
36
+ large: scale(0.5),
37
+ extraLarge: scale(1),
38
+ huge: scale(2),
39
+ } as const;
42
40
 
43
- // Legacy support
44
- extraSmall: 0,
45
- extraSmallPlus: 0,
46
- small: 0,
47
- smallPlus: 0,
48
- medium: 0,
49
- mediumPlus: 0,
50
- large: 0,
51
- largePlus: 0,
52
- extraLarge: 0,
53
- extraLargePlus: 0,
54
- } as Readonly<ISize['letterSpacing']>,
55
- lineHeight: {
56
- // Line heights optimized for Almarai's large x-height
57
- bodySmall: 16, // ~1.33 line height
58
- bodyMedium: 20, // ~1.43 line height
59
- bodyLarge: 24, // ~1.5 line height
60
- bodyXLarge: 26, // ~1.44 line height
61
- heading6: 24, // ~1.33 line height
62
- heading4: 32, // ~1.33 line height
63
- heading3: 40, // ~1.25 line height
64
- heading2: 56, // ~1.17 line height
65
- heading1: 72, // ~1.125 line height
41
+ // Line heights for consistent vertical rhythm
42
+ export const LineHeight = {
43
+ none: 0,
44
+ tiny: scale(14),
45
+ small: scale(16),
46
+ medium: scale(18),
47
+ extraMedium: scale(20),
48
+ large: scale(22),
49
+ extraLarge: scale(24),
50
+ huge: scale(28),
51
+ } as const;
66
52
 
67
- // Legacy support
68
- extraSmall: 16,
69
- extraSmallPlus: 20,
70
- small: 20,
71
- smallPlus: 24,
72
- medium: 24,
73
- mediumPlus: 26,
74
- large: 40,
75
- largePlus: 56,
76
- extraLarge: 72,
77
- extraLargePlus: 72,
78
- } as Readonly<ISize['lineHeight']>,
79
- spacing: {
80
- none: 0, // space / 0
81
- xSmall: 2, // space / 2
82
- small: 4, // space / 4
83
- medium: 8, // space / 8
84
- large: 12, // space / 12
85
- xLarge: 16, // space / 16
86
- xxLarge: 24, // space / 24 (2X-Large)
87
- xxxLarge: 32, // space / 32 (3X-Large)
88
- xxxxLarge: 48, // space / 48 (4X-Large)
89
- xxxxxLarge: 64, // space / 64 (5X-Large)
90
- xxxxxxLarge: 80, // space / 80 (6X-Large)
91
- full: 100, // space / 100 (Full)
53
+ // Spacing system that aligns with theme spacing
54
+ export const Spacing = {
55
+ none: 0,
56
+ tiny: scaleSpacing(2),
57
+ small: scaleSpacing(4),
58
+ medium: scaleSpacing(8),
59
+ extraMedium: scaleSpacing(12),
60
+ large: scaleSpacing(16),
61
+ largePlus: scaleSpacing(16),
62
+ extraLarge: scaleSpacing(24),
63
+ extraLargePlus: scaleSpacing(30),
64
+ huge: scaleSpacing(35),
65
+ xl: scaleSpacing(40),
66
+ xxl: scaleSpacing(50),
67
+ } as const;
92
68
 
93
- // Legacy support - keeping these for backward compatibility
94
- xs: 4, // Maps to small
95
- sm: 8, // Maps to medium
96
- md: 16, // Maps to xLarge
97
- lg: 24, // Maps to xxLarge
98
- xl: 32, // Maps to xxxLarge
99
- } as Readonly<ISize['spacing']>,
100
- borderRadius: {
101
- none: 0, // Border / 0
102
- xSmall: 2, // Border / 2
103
- small: 4, // Border / 4
104
- medium: 8, // Border / 8
105
- large: 12, // Border / 12
106
- xLarge: 16, // Border / 16
107
- xxLarge: 24, // Border / 24 (2X-Large)
108
- full: 1000, // Border / 1000 (Full)
69
+ // Border radius system that aligns with theme borderRadius
70
+ export const BorderRadius = {
71
+ none: 0,
72
+ tiny: scaleBorderRadius(2),
73
+ small: scaleBorderRadius(4),
74
+ medium: scaleBorderRadius(8),
75
+ extraMedium: scaleBorderRadius(12),
76
+ large: scaleBorderRadius(16),
77
+ extraLarge: scaleBorderRadius(24),
78
+ huge: scaleBorderRadius(32),
79
+ circular: 999,
80
+ } as const;
109
81
 
110
- // Legacy support - keeping these for backward compatibility
111
- xs: 4, // Maps to small
112
- sm: 8, // Maps to medium
113
- md: 12, // Maps to large
114
- lg: 16, // Maps to xLarge
115
- xl: 24, // Maps to xxLarge
116
- } as Readonly<ISize['borderRadius']>,
117
- borderWidth: {
118
- none: 0, // Stroke / 0
119
- xSmall: 0.5, // Stroke / 0.5
120
- small: 1, // Stroke / 1
121
- medium: 1.5, // Stroke / 1.5
122
- large: 2, // Stroke / 2
82
+ // Border widths
83
+ export const BorderWidth = {
84
+ none: 0,
85
+ tiny: scale(0.5),
86
+ small: scale(1),
87
+ medium: scale(2),
88
+ extraMedium: scale(3),
89
+ large: scale(4),
90
+ extraLarge: scale(6),
91
+ huge: scale(8),
92
+ } as const;
123
93
 
124
- // Legacy support - keeping these for backward compatibility
125
- extraSmall: 0.5, // Maps to xSmall
126
- } as Readonly<ISize['borderWidth']>,
127
- };
94
+ // Legacy export for backward compatibility
95
+ export const CommonSizes = {
96
+ letterSpacing: LetterSpacing,
97
+ lineHeight: LineHeight,
98
+ spacing: Spacing,
99
+ borderRadius: BorderRadius,
100
+ borderWidth: BorderWidth,
101
+ fontSize: FontSizes,
102
+ } as const;