@fadyshawky/react-native-magic 2.0.1 → 2.0.3

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/navigation/MainStack.tsx

@@ -45,7 +45,7 @@ const Tab = createBottomTabNavigator();
 function MainTabs() {
   return (
     <Tab.Navigator
-      initialRouteName="Main"
+      initialRouteName="Home"
       tabBar={props => <TabBar {...props} />}>
       {MainScreens.map(s => (
         <Tab.Screen

package/template/src/navigation/TabBar.tsx

@@ -1,13 +1,13 @@
 import React from 'react';
 import {View, Text, TouchableOpacity, Image, StyleSheet} from 'react-native';
 import {CommonStyles} from '../core/theme/commonStyles';
-import {Colors} from '../core/theme/colors';
 import {
   BottomTabBarProps,
   BottomTabNavigationOptions,
 } from '@react-navigation/bottom-tabs';
 import {ImageSourcePropType} from 'react-native';
 import {toString} from 'lodash';
+import {NaturalColors, PrimaryColors} from '../core/theme/colors';
 
 interface TabBarOptions extends BottomTabNavigationOptions {
   selectedIcon: ImageSourcePropType;
@@ -86,9 +86,9 @@ const styles = StyleSheet.create({
     alignItems: 'center',
   },
   label: {
-    color: Colors.gray,
+    color: NaturalColors.grayScale_50,
   },
   labelFocused: {
-    color: Colors.blueNormalActive,
+    color: PrimaryColors.PlatinateBlue_700,
   },
 });

package/template/src/navigation/TopTabBar.tsx

@@ -1,13 +1,13 @@
 import {Animated, View, TouchableOpacity} from 'react-native';
-import {Colors} from '../core/theme/colors';
 import {CommonStyles, screenWidth} from '../core/theme/commonStyles';
+import {NaturalColors} from '../core/theme/colors';
 
 export function TopBar({state, descriptors, navigation, position}: any) {
   return (
     <View
       style={{
         flexDirection: 'row',
-        backgroundColor: Colors.gray,
+        backgroundColor: NaturalColors.grayScale_50,
         width: screenWidth - 60,
         alignSelf: 'center',
         height: 40,
@@ -56,7 +56,9 @@ export function TopBar({state, descriptors, navigation, position}: any) {
               flex: 1,
               alignItems: 'center',
               justifyContent: 'center',
-              backgroundColor: isFocused ? Colors.white : Colors.gray,
+              backgroundColor: isFocused
+                ? NaturalColors.grayScale_0
+                : NaturalColors.grayScale_50,
               borderRadius: 20,
             }}>
             <Animated.Text

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

@@ -1,13 +1,13 @@
 import React from 'react';
 import {
-  View,
-  StyleSheet,
-  ScrollView,
-  RefreshControl,
   Dimensions,
+  RefreshControl,
+  ScrollView,
+  StyleSheet,
   Text,
+  View,
 } from 'react-native';
-import {Colors} from '../../core/theme/colors';
+import {NaturalColors} from '../../core/theme/colors';
 import {CommonSizes} from '../../core/theme/commonSizes';
 import {CommonStyles} from '../../core/theme/commonStyles';
 import {CarouselSection} from './components/CarouselSection';
@@ -73,35 +73,35 @@ export function HomeScreen(): JSX.Element {
 const styles = StyleSheet.create({
   container: {
     flex: 1,
-    backgroundColor: Colors.background,
+    backgroundColor: NaturalColors.grayScale_0,
   },
   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

@@ -8,9 +8,9 @@ import {
   TouchableOpacity,
   View,
 } from 'react-native';
-import {Colors} from '../../../core/theme/colors';
 import {CommonSizes} from '../../../core/theme/commonSizes';
 import {CarouselItem} from '../types';
+import {PrimaryColors} from '../../../core/theme/colors';
 
 interface CarouselSectionProps {
   items: CarouselItem[];
@@ -53,27 +53,27 @@ 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,
+    color: PrimaryColors.PlatinateBlue_700,
   },
   subtitle: {
-    fontSize: CommonSizes.font.small,
-    color: Colors.blueDarker,
+    fontSize: 14,
+    color: PrimaryColors.PlatinateBlue_700,
     marginTop: 2,
   },
 });

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

@@ -8,9 +8,9 @@ import {
   TouchableOpacity,
   View,
 } from 'react-native';
-import {Colors} from '../../../core/theme/colors';
 import {CommonSizes} from '../../../core/theme/commonSizes';
 import {CarouselItem} from '../types';
+import {NaturalColors, PrimaryColors} from '../../../core/theme/colors';
 
 const {width} = Dimensions.get('window');
 const ITEM_WIDTH = width * 0.85;
@@ -87,40 +87,40 @@ 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: {
     fontSize: 20,
     fontWeight: '600',
-    color: Colors.white,
+    color: NaturalColors.grayScale_0,
   },
   subtitle: {
     fontSize: 16,
-    color: Colors.white,
-    marginTop: CommonSizes.spacing.sm,
+    color: NaturalColors.grayScale_0,
+    marginTop: CommonSizes.spacing.small,
   },
   pagination: {
     flexDirection: 'row',
     justifyContent: 'center',
     alignItems: 'center',
-    marginTop: CommonSizes.spacing.md,
+    marginTop: CommonSizes.spacing.medium,
   },
   dot: {
     width: 8,
     height: 8,
     borderRadius: 4,
-    backgroundColor: Colors.gray,
+    backgroundColor: NaturalColors.grayScale_50,
     marginHorizontal: 4,
   },
   activeDot: {
-    backgroundColor: Colors.blueDarker,
+    backgroundColor: PrimaryColors.PlatinateBlue_700,
     width: 12,
     height: 12,
     borderRadius: 6,

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

@@ -21,10 +21,10 @@ import {
 } from '../../common/validations/profileValidations';
 import {useAppDispatch} from '../../core/store/reduxHelpers';
 import {userRegister} 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';
+import {NaturalColors, PrimaryColors} from '../../core/theme/colors';
 
 export default function RegistrationScreen(): JSX.Element {
   const dispatch = useAppDispatch();
@@ -178,20 +178,20 @@ export default function RegistrationScreen(): JSX.Element {
 const styles = StyleSheet.create({
   container: {
     flexGrow: 1,
-    backgroundColor: Colors.white,
-    borderTopRightRadius: CommonSizes.borderRadius.lg,
-    borderTopLeftRadius: CommonSizes.borderRadius.lg,
+    backgroundColor: NaturalColors.grayScale_0,
+    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,
   },
   loginLink: {
     ...CommonStyles.normalText,
-    color: Colors.blueNormalActive,
+    color: PrimaryColors.PlatinateBlue_700,
     textAlign: 'center',
     marginTop: 16,
   },

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

@@ -17,10 +17,10 @@ import {useInputError} from '../../common/validations/hooks/useInputError';
 import {emailValidations} from '../../common/validations/profileValidations';
 import {useAppDispatch} from '../../core/store/reduxHelpers';
 import {resetPassword} 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';
+import {NaturalColors, PrimaryColors} from '../../core/theme/colors';
 
 export default function ForgotPasswordScreen(): JSX.Element {
   const dispatch = useAppDispatch();
@@ -104,14 +104,14 @@ export default function ForgotPasswordScreen(): JSX.Element {
 const styles = StyleSheet.create({
   container: {
     flexGrow: 1,
-    backgroundColor: Colors.white,
-    borderTopRightRadius: CommonSizes.borderRadius.lg,
-    borderTopLeftRadius: CommonSizes.borderRadius.lg,
+    backgroundColor: NaturalColors.grayScale_0,
+    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,
   },
@@ -122,7 +122,7 @@ const styles = StyleSheet.create({
   },
   loginLink: {
     ...CommonStyles.normalText,
-    color: Colors.blueNormalActive,
+    color: PrimaryColors.PlatinateBlue_700,
     textAlign: 'center',
     marginTop: 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;
+}