@fadyshawky/react-native-magic 2.0.1 → 2.0.2

package/template/src/core/theme/types.ts

@@ -1,9 +1,23 @@
 import {TextStyle} from 'react-native';
+import {ElevationShadow} from './shadows';
+import {PrimaryColors, NaturalColors, AlertColors} from './colors';
 
 export type ThemeMode = 'light' | 'dark';
 
 export interface ISize {
   font: {
+    // Almarai Design System Typography
+    bodySmall: number;
+    bodyMedium: number;
+    bodyLarge: number;
+    bodyXLarge: number;
+    heading6: number;
+    heading4: number;
+    heading3: number;
+    heading2: number;
+    heading1: number;
+
+    // Legacy support
     extraSmall: number;
     extraSmallPlus: number;
     small: number;
@@ -17,6 +31,18 @@ export interface ISize {
     extraLargePlus: number;
   };
   letterSpacing: {
+    // Almarai Design System
+    bodySmall: number;
+    bodyMedium: number;
+    bodyLarge: number;
+    bodyXLarge: number;
+    heading6: number;
+    heading4: number;
+    heading3: number;
+    heading2: number;
+    heading1: number;
+
+    // Legacy support
     extraSmall: number;
     extraSmallPlus: number;
     small: number;
@@ -29,6 +55,18 @@ export interface ISize {
     extraLargePlus: number;
   };
   lineHeight: {
+    // Almarai Design System
+    bodySmall: number;
+    bodyMedium: number;
+    bodyLarge: number;
+    bodyXLarge: number;
+    heading6: number;
+    heading4: number;
+    heading3: number;
+    heading2: number;
+    heading1: number;
+
+    // Legacy support
     extraSmall: number;
     extraSmallPlus: number;
     small: number;
@@ -41,6 +79,21 @@ export interface ISize {
     extraLargePlus: number;
   };
   spacing: {
+    // Design System Spacing Scale
+    none: number; // space / 0
+    xSmall: number; // space / 2
+    small: number; // space / 4
+    medium: number; // space / 8
+    large: number; // space / 12
+    xLarge: number; // space / 16
+    xxLarge: number; // space / 24 (2X-Large)
+    xxxLarge: number; // space / 32 (3X-Large)
+    xxxxLarge: number; // space / 48 (4X-Large)
+    xxxxxLarge: number; // space / 64 (5X-Large)
+    xxxxxxLarge: number; // space / 80 (6X-Large)
+    full: number; // space / 100 (Full)
+
+    // Legacy support
     xs: number;
     sm: number;
     md: number;
@@ -48,6 +101,17 @@ export interface ISize {
     xl: number;
   };
   borderRadius: {
+    // Design System Border Radius Scale
+    none: number; // Border / 0
+    xSmall: number; // Border / 2
+    small: number; // Border / 4
+    medium: number; // Border / 8
+    large: number; // Border / 12
+    xLarge: number; // Border / 16
+    xxLarge: number; // Border / 24 (2X-Large)
+    full: number; // Border / 1000 (Full)
+
+    // Legacy support
     xs: number;
     sm: number;
     md: number;
@@ -55,32 +119,52 @@ export interface ISize {
     xl: number;
   };
   borderWidth: {
-    small: number;
-    medium: number;
-    large: number;
+    // Design System Stroke Scale
+    none: number; // Stroke / 0
+    xSmall: number; // Stroke / 0.5
+    small: number; // Stroke / 1
+    medium: number; // Stroke / 1.5
+    large: number; // Stroke / 2
+
+    // Legacy support
+    extraSmall: number;
   };
 }
 
 export interface Theme {
   mode: ThemeMode;
-  colors: {
-    indigoBlue: string;
-    mutedLavender: string;
-    tintColor: string;
-    mutedLavender30: string;
-    balanceBackground: string;
-    white: string;
-    backgroundOpacity: string;
-    black: string;
-    background: string;
-    surface: string;
-    card: string;
-    shadow: string;
-    red: string;
-  };
+  colors: typeof PrimaryColors & typeof NaturalColors & typeof AlertColors;
   text: {
+    // Almarai Design System Typography
+    // Headings
     header1: TextStyle;
     header2: TextStyle;
+    header3: TextStyle;
+    header4: TextStyle;
+    header6: TextStyle;
+
+    // Body Text with different weights
+    bodyXLargeLight: TextStyle;
+    bodyXLargeRegular: TextStyle;
+    bodyXLargeBold: TextStyle;
+    bodyXLargeExtraBold: TextStyle;
+
+    bodyLargeLight: TextStyle;
+    bodyLargeRegular: TextStyle;
+    bodyLargeBold: TextStyle;
+    bodyLargeExtraBold: TextStyle;
+
+    bodyMediumLight: TextStyle;
+    bodyMediumRegular: TextStyle;
+    bodyMediumBold: TextStyle;
+    bodyMediumExtraBold: TextStyle;
+
+    bodySmallLight: TextStyle;
+    bodySmallRegular: TextStyle;
+    bodySmallBold: TextStyle;
+    bodySmallExtraBold: TextStyle;
+
+    // Legacy styles for backward compatibility
     balanceTitle: TextStyle;
     balanceAmount: TextStyle;
     balanceLabel: TextStyle;
@@ -94,6 +178,21 @@ export interface Theme {
     navBar: TextStyle;
   };
   spacing: {
+    // Design System Spacing Scale
+    none: number;
+    xSmall: number;
+    small: number;
+    medium: number;
+    large: number;
+    xLarge: number;
+    xxLarge: number;
+    xxxLarge: number;
+    xxxxLarge: number;
+    xxxxxLarge: number;
+    xxxxxxLarge: number;
+    full: number;
+
+    // Legacy support
     xs: number;
     sm: number;
     md: number;
@@ -101,10 +200,38 @@ export interface Theme {
     xl: number;
   };
   borderRadius: {
+    // Design System Border Radius Scale
+    none: number;
+    xSmall: number;
+    small: number;
+    medium: number;
+    large: number;
+    xLarge: number;
+    xxLarge: number;
+    full: number;
+
+    // Legacy support
     xs: number;
     sm: number;
     md: number;
     lg: number;
     xl: number;
   };
+  borderWidth: {
+    // Design System Stroke Scale
+    none: number;
+    xSmall: number;
+    small: number;
+    medium: number;
+    large: number;
+
+    // Legacy support
+    extraSmall: number;
+  };
+  shadows: {
+    elevation1: ElevationShadow;
+    elevation2: ElevationShadow;
+    elevation3: ElevationShadow;
+    elevation4: ElevationShadow;
+  };
 }

package/template/src/navigation/HeaderComponents.tsx

@@ -35,7 +35,7 @@ const styles = StyleSheet.create({
     backgroundColor: 'white',
     justifyContent: 'flex-start',
     alignItems: 'center',
-    paddingHorizontal: CommonSizes.spacing.lg,
+    paddingHorizontal: CommonSizes.spacing.large,
     flexDirection: 'row',
   },
   titleContainer: {

package/template/src/navigation/MainNavigation.tsx

@@ -4,7 +4,6 @@ import {DefaultTheme, NavigationContainer} from '@react-navigation/native';
 import * as React from 'react';
 import {useRef} from 'react';
 import {useAppSelector} from '../core/store/reduxHelpers';
-import {Colors} from '../core/theme/colors';
 import {AuthStack} from './AuthStack';
 import {AppMainNavigator} from './MainStack';
 import {navigationRef} from './RootNavigation';
@@ -23,7 +22,7 @@ function AppNavigator() {
         dark: false,
         colors: {
           primary: '#000',
-          background: Colors.background,
+          background: 'white',
           card: '#fff',
           text: '#000',
           border: '#000',

package/template/src/screens/Login/Login.tsx

@@ -19,7 +19,6 @@ import {useInputError} from '../../common/validations/hooks/useInputError';
 import {emailValidations} from '../../common/validations/profileValidations';
 import {useAppDispatch} from '../../core/store/reduxHelpers';
 import {userLogin} from '../../core/store/user/userActions';
-import {Colors} from '../../core/theme/colors';
 import {CommonSizes} from '../../core/theme/commonSizes';
 import {CommonStyles} from '../../core/theme/commonStyles';
 import type {RootStackParamList} from '../../navigation/types';
@@ -111,22 +110,12 @@ export function Login(): JSX.Element {
         placeholder={localization.login.EnterPassword}
         error={passwordError}
       />
-      <PrimaryButton
-        onPress={goToForgotPassword}
-        label={localization.login.forgetPassword}
-        type={ButtonType.borderless}
-      />
       <PrimaryButton
         isLoading={loading}
         onPress={loginUser}
         label={localization.login.continue}
         type={ButtonType.solid}
       />
-      <PrimaryButton
-        onPress={goToRegistration}
-        label={localization.login.notMember}
-        type={ButtonType.borderless}
-      />
     </KeyboardAwareScrollView>
   );
 }
@@ -138,7 +127,6 @@ const styles = StyleSheet.create({
   },
   container: {
     flexGrow: 1,
-    backgroundColor: Colors.white,
     borderTopRightRadius: CommonSizes.borderRadius.lg,
     borderTopLeftRadius: CommonSizes.borderRadius.lg,
   },
@@ -151,14 +139,12 @@ const styles = StyleSheet.create({
   },
   forgotPassword: {
     ...CommonStyles.normalText,
-    color: Colors.blueNormalActive,
     textAlign: 'right',
     marginTop: 8,
     marginBottom: 24,
   },
   registerLink: {
     ...CommonStyles.normalText,
-    color: Colors.blueNormalActive,
     textAlign: 'center',
     marginTop: 16,
   },

package/template/src/screens/home/HomeScreen.tsx

@@ -76,32 +76,32 @@ const styles = StyleSheet.create({
     backgroundColor: Colors.background,
   },
   content: {
-    paddingVertical: CommonSizes.spacing.md,
+    paddingVertical: CommonSizes.spacing.medium,
   },
   featuredSection: {
-    marginBottom: CommonSizes.spacing.lg,
+    marginBottom: CommonSizes.spacing.large,
   },
   carouselSection: {
-    marginBottom: CommonSizes.spacing.lg,
+    marginBottom: CommonSizes.spacing.large,
   },
   sectionTitle: {
     ...CommonStyles.h2_semiBold,
-    marginHorizontal: CommonSizes.spacing.lg,
-    marginBottom: CommonSizes.spacing.md,
+    marginHorizontal: CommonSizes.spacing.large,
+    marginBottom: CommonSizes.spacing.medium,
   },
   trendingImage: {
     width: width * 0.7,
     height: 200,
-    borderRadius: CommonSizes.borderRadius.md,
+    borderRadius: CommonSizes.borderRadius.medium,
   },
   newArrivalsImage: {
     width: width * 0.5,
     height: 180,
-    borderRadius: CommonSizes.borderRadius.md,
+    borderRadius: CommonSizes.borderRadius.medium,
   },
   recommendedImage: {
     width: width * 0.6,
     height: 160,
-    borderRadius: CommonSizes.borderRadius.md,
+    borderRadius: CommonSizes.borderRadius.medium,
   },
 });

package/template/src/screens/home/components/CarouselSection.tsx

@@ -53,26 +53,26 @@ export function CarouselSection({
 
 const styles = StyleSheet.create({
   container: {
-    paddingHorizontal: CommonSizes.spacing.lg,
+    paddingHorizontal: CommonSizes.spacing.large,
   },
   itemContainer: {
-    marginRight: CommonSizes.spacing.md,
+    marginRight: CommonSizes.spacing.medium,
   },
   image: {
     width: 200,
     height: 150,
-    borderRadius: CommonSizes.borderRadius.md,
+    borderRadius: CommonSizes.borderRadius.medium,
   },
   textContainer: {
-    marginTop: CommonSizes.spacing.sm,
+    marginTop: CommonSizes.spacing.small,
   },
   title: {
-    fontSize: CommonSizes.font.medium,
+    fontSize: 16,
     fontWeight: '600',
     color: Colors.blueDarker,
   },
   subtitle: {
-    fontSize: CommonSizes.font.small,
+    fontSize: 14,
     color: Colors.blueDarker,
     marginTop: 2,
   },

package/template/src/screens/home/components/FeaturedCarousel.tsx

@@ -87,13 +87,13 @@ const styles = StyleSheet.create({
   image: {
     width: '100%',
     height: '100%',
-    borderRadius: CommonSizes.borderRadius.lg,
+    borderRadius: CommonSizes.borderRadius.large,
   },
   overlay: {
     ...StyleSheet.absoluteFillObject,
     backgroundColor: 'rgba(0, 0, 0, 0.3)',
-    borderRadius: CommonSizes.borderRadius.lg,
-    padding: CommonSizes.spacing.lg,
+    borderRadius: CommonSizes.borderRadius.large,
+    padding: CommonSizes.spacing.large,
     justifyContent: 'flex-end',
   },
   title: {
@@ -104,13 +104,13 @@ const styles = StyleSheet.create({
   subtitle: {
     fontSize: 16,
     color: Colors.white,
-    marginTop: CommonSizes.spacing.sm,
+    marginTop: CommonSizes.spacing.small,
   },
   pagination: {
     flexDirection: 'row',
     justifyContent: 'center',
     alignItems: 'center',
-    marginTop: CommonSizes.spacing.md,
+    marginTop: CommonSizes.spacing.medium,
   },
   dot: {
     width: 8,

package/template/src/screens/registration/RegistrationScreen.tsx

@@ -179,13 +179,13 @@ const styles = StyleSheet.create({
   container: {
     flexGrow: 1,
     backgroundColor: Colors.white,
-    borderTopRightRadius: CommonSizes.borderRadius.lg,
-    borderTopLeftRadius: CommonSizes.borderRadius.lg,
+    borderTopRightRadius: CommonSizes.spacing.large,
+    borderTopLeftRadius: CommonSizes.spacing.large,
   },
   contentContainer: {
     justifyContent: 'center',
     alignItems: 'center',
-    paddingHorizontal: CommonSizes.spacing.lg,
+    paddingHorizontal: CommonSizes.spacing.large,
     paddingVertical: 26,
     gap: 16,
   },

package/template/src/screens/resetPassword/ForgotPasswordScreen.tsx

@@ -105,13 +105,13 @@ const styles = StyleSheet.create({
   container: {
     flexGrow: 1,
     backgroundColor: Colors.white,
-    borderTopRightRadius: CommonSizes.borderRadius.lg,
-    borderTopLeftRadius: CommonSizes.borderRadius.lg,
+    borderTopRightRadius: CommonSizes.spacing.large,
+    borderTopLeftRadius: CommonSizes.spacing.large,
   },
   contentContainer: {
     justifyContent: 'center',
     alignItems: 'center',
-    paddingHorizontal: CommonSizes.spacing.lg,
+    paddingHorizontal: CommonSizes.spacing.large,
     paddingVertical: 26,
     gap: 16,
   },

package/template/src/types/react-native-config.d.ts

@@ -0,0 +1,8 @@
+declare module 'react-native-config' {
+  export interface NativeConfig {
+    API_BASE_URL: string;
+    [key: string]: string;
+  }
+  const Config: NativeConfig;
+  export default Config;
+}