@fadyshawky/react-native-magic 2.0.5 → 2.0.7

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

@@ -1,27 +1,170 @@
 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;
+    smallPlus: number;
+    medium: number;
+    mediumPlus: number;
+    extraMedium: number;
+    large: number;
+    largePlus: number;
+    extraLarge: number;
+    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;
+    smallPlus: number;
+    medium: number;
+    mediumPlus: number;
+    large: number;
+    largePlus: number;
+    extraLarge: number;
+    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;
+    smallPlus: number;
+    medium: number;
+    mediumPlus: number;
+    large: number;
+    largePlus: number;
+    extraLarge: number;
+    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;
+    lg: number;
+    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;
+    lg: number;
+    xl: number;
+  };
+  borderWidth: {
+    // 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;
@@ -35,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;
@@ -42,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

@@ -1,17 +1,16 @@
 import {NativeStackNavigationProp} from '@react-navigation/native-stack';
 import React from 'react';
 import {Image, StyleSheet, TouchableOpacity, View} from 'react-native';
-import {ImageResources} from '../common/ImageResources.g';
+import {useRTL} from '../common/localization/LocalizationProvider';
 import {CommonSizes} from '../core/theme/commonSizes';
 import {screenWidth} from '../core/theme/commonStyles';
+import {scaleWidth} from '../core/theme/scaling';
 import {useTheme} from '../core/theme/ThemeProvider';
 import {RootStackParamList} from './types';
-import {useRTL} from '../common/localization/LocalizationProvider';
-import {scaleWidth} from '../core/theme/scaling';
 export function Header() {
   return (
     <View style={styles.headerBase}>
-      <Image source={ImageResources.light_header_logo} style={styles.logo} />
+      <Image source={0} style={styles.logo} />
     </View>
   );
 }
@@ -20,7 +19,7 @@ export function HeaderBack({onPress}: {onPress: () => void}) {
   return (
     <View style={styles.headerWithBack}>
       <BackButton onPress={onPress} />
-      <Image source={ImageResources.light_header_logo} style={styles.logo} />
+      <Image source={0} style={styles.logo} />
       <View style={{width: 40}} />
     </View>
   );
@@ -36,16 +35,6 @@ export function HeaderButton({onPress}: {onPress: () => void}) {
   );
 }
 
-export function HomeHeader({onPress}: {onPress: () => void}) {
-  return (
-    <View style={styles.headerWithBack}>
-      <RefreshButton onPress={onPress} />
-      <Image source={ImageResources.light_header_logo} style={styles.logo} />
-      <View style={{width: 40}} />
-    </View>
-  );
-}
-
 export function WebViewHeader({
   navigation,
 }: {
@@ -64,25 +53,12 @@ function BackButton({onPress}: {onPress: () => void}) {
   return (
     <TouchableOpacity style={styles.backButton} onPressIn={onPress}>
       <Image
-        tintColor={theme.colors.tintColor}
+        tintColor={theme.colors.PlatinateBlue_100}
         style={{
           ...styles.backIcon,
           transform: [{rotate: isRTL ? '180deg' : '0deg'}],
         }}
-        source={ImageResources.arrow_left}
-      />
-    </TouchableOpacity>
-  );
-}
-
-function RefreshButton({onPress}: {onPress: () => void}) {
-  const {theme} = useTheme();
-  return (
-    <TouchableOpacity style={styles.backButton} onPressIn={onPress}>
-      <Image
-        tintColor={theme.colors.tintColor}
-        style={styles.backIcon}
-        source={ImageResources.repeat}
+        source={0}
       />
     </TouchableOpacity>
   );

package/template/src/navigation/MainNavigation.tsx

@@ -4,11 +4,10 @@ import {DefaultTheme, NavigationContainer} from '@react-navigation/native';
 import * as React from 'react';
 import {useRef} from 'react';
 import {useAppSelector} from '../core/store/reduxHelpers';
+import {NaturalColors} from '../core/theme/colors';
 import {AuthStack} from './AuthStack';
 import {AppMainNavigator} from './MainStack';
 import {navigationRef} from './RootNavigation';
-import {NewColors} from '../core/theme/colors';
-import {Fonts} from '../core/theme/fonts';
 
 function AppNavigator() {
   const routeNameRef = useRef<string | undefined>(undefined);
@@ -24,7 +23,7 @@ function AppNavigator() {
         dark: false,
         colors: {
           primary: '#000',
-          background: NewColors.background,
+          background: NaturalColors.background_2,
           card: '#fff',
           text: '#000',
           border: '#000',

package/template/src/navigation/MainStack.tsx

@@ -1,24 +1,11 @@
 import {createBottomTabNavigator} from '@react-navigation/bottom-tabs';
 import React from 'react';
-import {ImageResources} from '../common/ImageResources.g';
 import {useTranslation} from '../common/localization/LocalizationProvider';
 
-import {TabBar} from './TabBar';
 import {createNativeStackNavigator} from '@react-navigation/native-stack';
-import {
-  Favorites,
-  History,
-  Profile,
-  Services,
-  SingleService,
-  InquiredBill,
-  PaymentConfirmation,
-  Categories,
-  Providers,
-  ReceiptScreen,
-} from '../screens';
-import {ForceChangePasswordScreen} from '../screens/ForceChangePassword/ForceChangePasswordScreen';
+import {Profile} from '../screens';
 import {HomeScreen} from '../screens/home/HomeScreen';
+import {TabBar} from './TabBar';
 
 const Tab = createBottomTabNavigator();
 const Stack = createNativeStackNavigator();
@@ -33,28 +20,8 @@ export function AppMainNavigator() {
       options: {
         tabBarLabel: t('tabs.Main', 'mainNavigation'),
         headerShown: false,
-        icon: ImageResources.services,
-        selectedIcon: ImageResources.services,
-      },
-    },
-    {
-      id: 'Favorites',
-      component: Favorites,
-      options: {
-        tabBarLabel: t('tabs.Favorites', 'mainNavigation'),
-        headerShown: false,
-        icon: ImageResources.favourites,
-        selectedIcon: ImageResources.favourites,
-      },
-    },
-    {
-      id: 'Financials',
-      component: History,
-      options: {
-        tabBarLabel: t('tabs.Financials', 'mainNavigation'),
-        headerShown: false,
-        icon: ImageResources.financials,
-        selectedIcon: ImageResources.financials,
+        icon: 0,
+        selectedIcon: 0,
       },
     },
     {
@@ -63,66 +30,8 @@ export function AppMainNavigator() {
       options: {
         tabBarLabel: t('tabs.Account', 'mainNavigation'),
         headerShown: false,
-        icon: ImageResources.account,
-        selectedIcon: ImageResources.account,
-      },
-    },
-    {
-      id: 'ForceChangePassword',
-      component: ForceChangePasswordScreen,
-      options: {
-        headerShown: false,
-        title: t('screens.ForceChangePassword', 'mainNavigation'),
-      },
-    },
-    {
-      id: 'Services',
-      component: Services,
-      options: {
-        headerShown: false,
-        title: t('screens.Services', 'mainNavigation'),
-      },
-    },
-    {
-      id: 'SingleService',
-      component: SingleService,
-      options: {
-        headerShown: false,
-      },
-    },
-    {
-      id: 'InquiredBill',
-      component: InquiredBill,
-      options: {
-        headerShown: false,
-      },
-    },
-    {
-      id: 'PaymentConfirmation',
-      component: PaymentConfirmation,
-      options: {
-        headerShown: false,
-      },
-    },
-    {
-      id: 'ReceiptScreen',
-      component: ReceiptScreen,
-      options: {
-        headerShown: false,
-      },
-    },
-    {
-      id: 'Categories',
-      component: Categories,
-      options: {
-        headerShown: false,
-      },
-    },
-    {
-      id: 'Providers',
-      component: Providers,
-      options: {
-        headerShown: false,
+        icon: 0,
+        selectedIcon: 0,
       },
     },
   ];

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

@@ -1,7 +1,7 @@
 import {useNavigation} from '@react-navigation/native';
 import type {NativeStackNavigationProp} from '@react-navigation/native-stack';
 import React, {useRef, useState} from 'react';
-import {Dimensions, StyleSheet} from 'react-native';
+import {StyleSheet} from 'react-native';
 import {KeyboardAwareScrollView} from 'react-native-keyboard-aware-scroll-view';
 import {ButtonType} from '../../../types';
 import {Container} from '../../common/components/Container';
@@ -9,10 +9,9 @@ import {PrimaryButton} from '../../common/components/PrimaryButton';
 import {PrimaryTextInput} from '../../common/components/PrimaryTextInput';
 import {RTLAwareText} from '../../common/components/RTLAwareText';
 import {RTLAwareView} from '../../common/components/RTLAwareView';
-import {ImageResources} from '../../common/ImageResources.g';
 import {
-  useTranslation,
   useRTL,
+  useTranslation,
 } from '../../common/localization/LocalizationProvider';
 import {phoneValidations} from '../../common/validations/authValidations';
 import {emptyValidation} from '../../common/validations/commonValidations';
@@ -24,7 +23,6 @@ import {Fonts} from '../../core/theme/fonts';
 import {useTheme} from '../../core/theme/ThemeProvider';
 import {Header} from '../../navigation/HeaderComponents';
 import type {RootStackParamList} from '../../navigation/types';
-import {scaleHeight} from '../../core/theme/scaling';
 
 export function Login(): JSX.Element {
   const dispatch = useAppDispatch();
@@ -82,10 +80,10 @@ export function Login(): JSX.Element {
       testID={'LoginScreenID'}
       contentContainerStyle={styles.contentContainer}
       style={styles.container}
-      backgroundImage={ImageResources.background_2}
+      backgroundImage={0}
       withoutPadding
       extendedBackground
-      backgroundColor={theme.colors.background}>
+      backgroundColor={theme.colors.background_2}>
       <Header />
       <RTLAwareText style={{...theme.text.header1, textAlign: 'center'}}>
         {t('welcome', 'login')}
@@ -144,7 +142,7 @@ const styles = StyleSheet.create({
   },
   title: {
     textAlign: 'center',
-    fontSize: CommonSizes.fontSize.header1,
+    fontSize: CommonSizes.font.bodyLarge,
     fontWeight: 'bold',
     fontFamily: Fonts.regular,
   },

package/template/src/screens/OTP/OTPScreen.tsx

@@ -1,26 +1,25 @@
 import {useNavigation, useRoute} from '@react-navigation/native';
 import type {NativeStackNavigationProp} from '@react-navigation/native-stack';
 import React, {useRef, useState} from 'react';
-import {StyleSheet, Text, View} from 'react-native';
+import {StyleSheet, View} from 'react-native';
 import {KeyboardAwareScrollView} from 'react-native-keyboard-aware-scroll-view';
 import {ButtonType} from '../../../types';
 import {Container} from '../../common/components/Container';
-import {PrimaryButton} from '../../common/components/PrimaryButton';
 import {OTPInput} from '../../common/components/OTPInput';
+import {PrimaryButton} from '../../common/components/PrimaryButton';
+import {RTLAwareText} from '../../common/components/RTLAwareText';
+import {RTLAwareView} from '../../common/components/RTLAwareView';
+import {
+  useRTL,
+  useTranslation,
+} from '../../common/localization/LocalizationProvider';
 import {useInputError} from '../../common/validations/hooks/useInputError';
 import {useAppDispatch} from '../../core/store/reduxHelpers';
+import {verifyOTP} from '../../core/store/user/userActions';
 import {CommonSizes} from '../../core/theme/commonSizes';
 import {useTheme} from '../../core/theme/ThemeProvider';
-import {ImageResources} from '../../common/ImageResources.g';
-import {Header, HeaderBack} from '../../navigation/HeaderComponents';
+import {HeaderBack} from '../../navigation/HeaderComponents';
 import type {RootStackParamList} from '../../navigation/types';
-import {verifyOTP} from '../../core/store/user/userActions';
-import {
-  useTranslation,
-  useRTL,
-} from '../../common/localization/LocalizationProvider';
-import {RTLAwareText} from '../../common/components/RTLAwareText';
-import {RTLAwareView} from '../../common/components/RTLAwareView';
 
 export function OTPScreen(): JSX.Element {
   const dispatch = useAppDispatch();
@@ -93,10 +92,10 @@ export function OTPScreen(): JSX.Element {
       testID={'OTPScreenID'}
       contentContainerStyle={styles.contentContainer}
       style={styles.container}
-      backgroundImage={ImageResources.background_2}
+      backgroundImage={0}
       withoutPadding
       extendedBackground
-      backgroundColor={theme.colors.background}>
+      backgroundColor={theme.colors.background_2}>
       <HeaderBack onPress={() => navigation.goBack()} />
       <RTLAwareText style={{...theme.text.header1, textAlign: 'center'}}>
         {t('title', 'otp')}