@fadyshawky/react-native-magic 2.0.0 → 2.0.2

package/template/src/common/components/Stepper.tsx

@@ -0,0 +1,153 @@
+import React from 'react';
+import {View, Text, StyleSheet, Image, Pressable} from 'react-native';
+import {useTheme} from '../../core/theme/ThemeProvider';
+import {Theme} from '../../core/theme/types';
+import {PrimaryColors} from '../../core/theme/colors';
+import {ImageResources} from '../ImageResources.g';
+
+interface Step {
+  title: string;
+}
+
+interface StepperProps {
+  steps: Step[];
+  currentStep: number;
+  orientation?: 'horizontal' | 'vertical';
+  onStepPress?: (index: number) => void;
+}
+
+const STEP_SIZE = 64;
+
+const Stepper: React.FC<StepperProps> = ({
+  steps,
+  currentStep,
+  orientation = 'horizontal',
+  onStepPress,
+}) => {
+  const {theme} = useTheme();
+  const isDarkMode = theme.mode === 'dark';
+  const styles = createStyles(theme, orientation, isDarkMode);
+
+  return (
+    <View style={styles.container}>
+      {steps.map((step, index) => {
+        const isCompleted = index < currentStep;
+        const isActive = index === currentStep;
+        const isLastStep = index === steps.length - 1;
+
+        const connectorStyle = [
+          styles.connector,
+          (isCompleted || isActive) && styles.connectorCompleted,
+        ];
+
+        return (
+          <React.Fragment key={index}>
+            <Pressable
+              style={styles.stepContainer}
+              onPress={() => onStepPress?.(index)}>
+              <View
+                style={[
+                  styles.circle,
+                  isCompleted && styles.circleCompleted,
+                  isActive && styles.circleActive,
+                ]}>
+                {isCompleted ? (
+                  <Image source={ImageResources.complete} style={styles.icon} />
+                ) : (
+                  <Text style={styles.stepNumber}>{index + 1}</Text>
+                )}
+              </View>
+              <Text
+                style={[
+                  styles.title,
+                  (isCompleted || isActive) && styles.titleActive,
+                ]}>
+                {step.title}
+              </Text>
+            </Pressable>
+            {!isLastStep && <View style={connectorStyle} />}
+          </React.Fragment>
+        );
+      })}
+    </View>
+  );
+};
+
+const createStyles = (
+  theme: Theme,
+  orientation: 'horizontal' | 'vertical',
+  isDarkMode: boolean,
+) =>
+  StyleSheet.create({
+    container: {
+      flexDirection: orientation === 'horizontal' ? 'row' : 'column',
+      alignItems: orientation === 'horizontal' ? 'flex-start' : 'stretch',
+    },
+    stepContainer: {
+      alignItems: 'center',
+      flex: orientation === 'horizontal' ? 1 : undefined,
+    },
+    circle: {
+      width: STEP_SIZE,
+      height: STEP_SIZE,
+      borderRadius: STEP_SIZE / 2,
+      borderWidth: 1,
+      borderColor: isDarkMode
+        ? theme.colors.grayScale_400
+        : theme.colors.grayScale_50,
+      justifyContent: 'center',
+      alignItems: 'center',
+      backgroundColor: 'transparent',
+    },
+    circleCompleted: {
+      backgroundColor: PrimaryColors.PlatinateBlue_400,
+      borderColor: PrimaryColors.PlatinateBlue_400,
+    },
+    circleActive: {
+      borderColor: PrimaryColors.PlatinateBlue_400,
+    },
+    icon: {
+      width: STEP_SIZE / 2,
+      height: STEP_SIZE / 2,
+      tintColor: theme.colors.grayScale_0,
+    },
+    stepNumber: {
+      ...theme.text.bodyXLargeRegular,
+      color: isDarkMode
+        ? theme.colors.grayScale_400
+        : theme.colors.grayScale_50,
+    },
+    title: {
+      ...theme.text.bodyMediumRegular,
+      marginTop: theme.spacing.small,
+      color: isDarkMode
+        ? theme.colors.grayScale_400
+        : theme.colors.grayScale_50,
+    },
+    titleActive: {
+      color: theme.colors.cetaceanBlue_700,
+    },
+    connector: {
+      backgroundColor: isDarkMode
+        ? theme.colors.grayScale_400
+        : theme.colors.grayScale_50,
+      ...(orientation === 'horizontal'
+        ? {
+            height: 1,
+            flex: 1,
+            marginHorizontal: -STEP_SIZE / 4,
+            top: STEP_SIZE / 2,
+          }
+        : {
+            width: 1,
+            flex: 1,
+            marginVertical: -STEP_SIZE / 4,
+            left: '50%',
+          }),
+    },
+    connectorCompleted: {
+      backgroundColor: PrimaryColors.PlatinateBlue_400,
+    },
+  });
+
+export default Stepper;

package/template/src/common/validations/errorValidations.ts

@@ -1,9 +1,8 @@
-import {localization} from '../localization/localization';
 import {unwrapResult} from '@reduxjs/toolkit';
 import {Alert} from 'react-native';
-import {IErrorResult, ErrorRepresentationType} from '../../../types';
 import Snackbar from 'react-native-snackbar';
-import {NewColors} from '../../core/theme/colors';
+import {ErrorRepresentationType, IErrorResult} from '../../../types';
+import {localization} from '../localization/localization';
 export function handlePromiseResult(
   promiseAction: Promise<any>,
   successMessage?: string,

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

@@ -1,77 +1,99 @@
-export enum BlackColors {
-  indigoBlue = '#6666FF',
-  mutedLavender = '#B3B5FF',
-  tintColor = '#B3B5FF',
-  mutedLavender30 = 'rgba(184, 186, 255, 0.3)',
-  balanceBackground = 'rgba(41, 45, 50, 0.8)',
-  white = '#FFFFFF',
-  backgroundOpacity = 'rgba(36, 40, 44, 0.8)',
-  black = '#000000',
-  background = '#000000',
-  surface = '#121212',
-  card = '#1E1E1E',
-  shadow = '#FFFFFF',
-  red = '#FB043E',
+export enum PrimaryColors {
+  PlatinateBlue_0 = '#E9EDFF',
+  PlatinateBlue_25 = '#D3DAFF',
+  PlatinateBlue_50 = '#BDC8FF',
+  PlatinateBlue_100 = '#A7B5FF',
+  PlatinateBlue_200 = '#7C91FF',
+  PlatinateBlue_300 = '#506CFF',
+  PlatinateBlue_400 = '#2447FF',
+  PlatinateBlue_500 = '#1D39CC',
+  PlatinateBlue_600 = '#1D39CC',
+  PlatinateBlue_700 = '#0E1C66',
+  cetaceanBlue_0 = '#4C7CEA',
+  cetaceanBlue_25 = '#436FD5',
+  cetaceanBlue_50 = '#3B63BF',
+  cetaceanBlue_100 = '#3257AA',
+  cetaceanBlue_200 = '#223E80',
+  cetaceanBlue_300 = '#112655',
+  cetaceanBlue_400 = '#000D2B',
+  cetaceanBlue_500 = '#000A22',
+  cetaceanBlue_600 = '#00081A',
+  cetaceanBlue_700 = '#000511',
+  strokeDeactive = '#D3DAFF',
 }
 
-export enum WhiteColors {
-  indigoBlue = '#6666FF',
-  mutedLavender = '#B3B5FF',
-  tintColor = '#6666FF',
-  mutedLavender30 = 'rgba(184, 186, 255, 0.3)',
-  balanceBackground = 'rgba(184, 186, 255, 0.3)',
-  white = '#FFFFFF',
-  backgroundOpacity = 'rgba(255, 255, 255, 0.7)',
-  black = '#000000',
-  background = '#FFFFFF',
-  surface = '#FFFFFF',
-  card = '#FFFFFF',
-  shadow = 'rgba(0, 0, 0, 0.8)',
-  red = '#FB043E',
+export enum NaturalColors {
+  grayScale_0 = '#FAFAFA',
+  grayScale_25 = '#A3AAAD',
+  grayScale_50 = '#949C9E',
+  grayScale_100 = '#858D8F',
+  grayScale_200 = '#686F72',
+  grayScale_300 = '#4A5254',
+  grayScale_400 = '#2D3436',
+  grayScale_500 = '#242A2B',
+  grayScale_600 = '#1B1F20',
+  grayScale_700 = '#121516',
+  naturalColor_0 = '#9C97B3',
+  naturalColor_25 = '#8E89A4',
+  naturalColor_50 = '#7F7B94',
+  naturalColor_100 = '#716D85',
+  naturalColor_200 = '#555265',
+  naturalColor_300 = '#383646',
+  naturalColor_400 = '#1C1A27',
+  naturalColor_500 = '#16151F',
+  naturalColor_600 = '#111017',
+  naturalColor_700 = '#0B0A10',
 }
 
-export enum Colors {
-  violetLight = '#F3F2FF',
-  violetLightHover = '#E6E6FF',
-  violetLightActive = '#C1C0FE',
-  violetNormal = '#8481FD',
-  violetNormalHover = '#5250D9',
-  violetNormalActive = '#3331B8',
-  violetDark = '#262626',
-  violetDarkHover = '#1A1994',
-  violetDarkActive = '#111066',
-  violetDarker = '#000033',
-  blueLight = '#F6FCFF',
-  blueLightHover = '#E9F8FF',
-  blueLightActive = '#C1E5FF',
-  blueNormal = '#52BDFF',
-  blueNormalHover = '#3399D9',
-  blueNormalActive = '#1A7DB3',
-  blueDarker = '#262626',
-  greyLight = '#F9FCFF',
-  greyLightHover = '#E0E0E0',
-  greyLightActive = '#BDBDBD',
-  greyNormal = '#929292',
-  greyNormalHover = '#666666',
-  greyNormalActive = '#4D4D4D',
-  greyDarker = '#262626',
-  orandeLight = '#FFFAF8',
-  orandeLightHover = '#FDECE1',
-  orandeLightActive = '#FBCEB4',
-  orandeNormal = '#F2565E',
-  orandeNormalHover = '#CE3C3E',
-  orandeNormalActive = '#AD3335',
-  orandeDarker = '#262626',
-  lightBlueLight = '#FEF7F7',
-  lightBlueLightHover = '#FCDDDF',
-  lightBlueLightActive = '#F9AAAF',
-  lightBlueNormal = '#CE3C3E',
-  lightBlueNormalHover = '#AD3335',
-  lightBlueNormalActive = '#8C292B',
-  lightBlueDarker = '#262626',
-  red = '#FFFCF1',
-  green = '#F4FDFB',
-  background = '#FAFAFA',
-  white = 'white',
-  gray = 'gray',
+export enum AlertColors {
+  links_0 = '#E8F2FF',
+  links_25 = '#D2E4FE',
+  links_50 = '#BBD7FE',
+  links_100 = '#A5CAFE',
+  links_200 = '#77AFFD',
+  links_300 = '#4A95FD',
+  links_400 = '#1D7AFC',
+  links_500 = '#1762CA',
+  links_600 = '#114997',
+  links_700 = '#0C3165',
+  success_0 = '#C6FFE5',
+  success_25 = '#8FE6BE',
+  success_50 = '#7DDAB0',
+  success_100 = '#6CCEA1',
+  success_200 = '#48B684',
+  success_300 = '#259E67',
+  success_400 = '#02864A',
+  success_500 = '#026B3B',
+  success_600 = '#01502C',
+  success_700 = '#01361E',
+  warning_0 = '#FFF4E8',
+  warning_25 = '#FEE8D1',
+  warning_50 = '#FEDDBA',
+  warning_100 = '#FDD1A3',
+  warning_200 = '#FDBB76',
+  warning_300 = '#FCA448',
+  warning_400 = '#FB8D1A',
+  warning_500 = '#C97115',
+  warning_600 = '#975510',
+  warning_700 = '#64380A',
+  error_0 = '#FDE6EC',
+  error_25 = '#FACED8',
+  error_50 = '#F8B5C5',
+  error_100 = '#F69CB2',
+  error_200 = '#F16B8B',
+  error_300 = '#ED3965',
+  error_400 = '#E8083E',
+  error_500 = '#BA0632',
+  error_600 = '#8B0525',
+  error_700 = '#5D0319',
+  discover_0 = '#F1ECF6',
+  discover_25 = '#E4D9EC',
+  discover_50 = '#D6C5E3',
+  discover_100 = '#C8B2D9',
+  discover_200 = '#AD8CC7',
+  discover_300 = '#9165B4',
+  discover_400 = '#763FA1',
+  discover_500 = '#5E3281',
+  discover_600 = '#472661',
+  discover_700 = '#2F1940',
 }

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

@@ -9,7 +9,7 @@ import {
   StyleSheet,
 } from 'react-native';
 import DeviceInfo from 'react-native-device-info';
-import {createPerfectSize} from '../../common/utils';
+import {createPerfectSize} from '../../common/utils/createPerfectSize';
 
 const windowDimensions = Dimensions.get('window');
 export const isIos = Platform.OS == 'ios';

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

@@ -1,70 +1,127 @@
-import {ISize} from '../../types';
+import {ISize} from './types';
 
 export const CommonSizes = {
   font: {
-    extraSmall: 11,
-    extraSmallPlus: 12,
-    small: 14,
-    smallPlus: 15,
-    medium: 16,
-    mediumPlus: 18,
-    extraMedium: 20,
-    large: 22,
-    largePlus: 28,
-    extraLarge: 34,
-    extraLargePlus: 44,
-  } as Readonly<ISize>,
+    // Body Text Sizes
+    bodySmall: 12, // Body Small
+    bodyMedium: 14, // Body Medium
+    bodyLarge: 16, // Body Large
+    bodyXLarge: 18, // Body XLarge
+
+    // Heading Sizes
+    heading6: 18, // Heading 6 / Bold / 18px
+    heading4: 24, // Heading 4 / Bold / 24px
+    heading3: 32, // Heading 3 / Bold / 32px
+    heading2: 48, // Heading 2 / Bold / 48px
+    heading1: 64, // Heading 1 / Bold / 64px
+
+    // Legacy support - keeping these for backward compatibility
+    extraSmall: 12, // Maps to bodySmall
+    extraSmallPlus: 14, // Maps to bodyMedium
+    small: 14, // Maps to bodyMedium
+    smallPlus: 16, // Maps to bodyLarge
+    medium: 16, // Maps to bodyLarge
+    mediumPlus: 18, // Maps to bodyXLarge
+    extraMedium: 24, // Maps to heading4
+    large: 32, // Maps to heading3
+    largePlus: 48, // Maps to heading2
+    extraLarge: 64, // Maps to heading1
+    extraLargePlus: 64, // Maps to heading1
+  } as Readonly<ISize['font']>,
   letterSpacing: {
-    extraSmall: 0.07,
+    // Default letter spacing for Almarai
+    bodySmall: 0,
+    bodyMedium: 0,
+    bodyLarge: 0,
+    bodyXLarge: 0,
+    heading6: 0,
+    heading4: 0,
+    heading3: 0,
+    heading2: 0,
+    heading1: 0,
+
+    // Legacy support
+    extraSmall: 0,
     extraSmallPlus: 0,
-    small: -0.08,
-    smallPlus: -0.24,
-    medium: -0.41,
-    mediumPlus: 0.38,
-    large: 0.35,
-    largePlus: 0.36,
-    extraLarge: 0.37,
-    extraLargePlus: 0.37,
-  } as Readonly<ISize>,
+    small: 0,
+    smallPlus: 0,
+    medium: 0,
+    mediumPlus: 0,
+    large: 0,
+    largePlus: 0,
+    extraLarge: 0,
+    extraLargePlus: 0,
+  } as Readonly<ISize['letterSpacing']>,
   lineHeight: {
-    extraSmall: 13,
-    extraSmallPlus: 16,
-    small: 19,
-    smallPlus: 20,
-    medium: 22,
-    mediumPlus: 25,
-    large: 28,
-    largePlus: 34,
-    extraLarge: 41,
-    extraLargePlus: 52,
-  } as Readonly<ISize>,
+    // Line heights optimized for Almarai's large x-height
+    bodySmall: 16, // ~1.33 line height
+    bodyMedium: 20, // ~1.43 line height
+    bodyLarge: 24, // ~1.5 line height
+    bodyXLarge: 26, // ~1.44 line height
+    heading6: 24, // ~1.33 line height
+    heading4: 32, // ~1.33 line height
+    heading3: 40, // ~1.25 line height
+    heading2: 56, // ~1.17 line height
+    heading1: 72, // ~1.125 line height
+
+    // Legacy support
+    extraSmall: 16,
+    extraSmallPlus: 20,
+    small: 20,
+    smallPlus: 24,
+    medium: 24,
+    mediumPlus: 26,
+    large: 40,
+    largePlus: 56,
+    extraLarge: 72,
+    extraLargePlus: 72,
+  } as Readonly<ISize['lineHeight']>,
   spacing: {
-    extraSmall: 8,
-    extraSmallPlus: 10,
-    small: 12,
-    smallPlus: 13,
-    medium: 16,
-    mediumPlus: 20,
-    large: 30,
-    largePlus: 40,
-    extraLarge: 48,
-    extraLargePlus: 56,
-  } as Readonly<ISize>,
+    none: 0, // space / 0
+    xSmall: 2, // space / 2
+    small: 4, // space / 4
+    medium: 8, // space / 8
+    large: 12, // space / 12
+    xLarge: 16, // space / 16
+    xxLarge: 24, // space / 24 (2X-Large)
+    xxxLarge: 32, // space / 32 (3X-Large)
+    xxxxLarge: 48, // space / 48 (4X-Large)
+    xxxxxLarge: 64, // space / 64 (5X-Large)
+    xxxxxxLarge: 80, // space / 80 (6X-Large)
+    full: 100, // space / 100 (Full)
+
+    // Legacy support - keeping these for backward compatibility
+    xs: 4, // Maps to small
+    sm: 8, // Maps to medium
+    md: 16, // Maps to xLarge
+    lg: 24, // Maps to xxLarge
+    xl: 32, // Maps to xxxLarge
+  } as Readonly<ISize['spacing']>,
   borderRadius: {
-    extraSmall: 4,
-    extraSmallPlus: 6,
-    small: 8,
-    smallPlus: 10,
-    medium: 12,
-    mediumPlus: 13,
-    large: 14,
-    largePlus: 16,
-    extraLarge: 18,
-    extraLargePlus: 30,
-  } as Readonly<ISize>,
+    none: 0, // Border / 0
+    xSmall: 2, // Border / 2
+    small: 4, // Border / 4
+    medium: 8, // Border / 8
+    large: 12, // Border / 12
+    xLarge: 16, // Border / 16
+    xxLarge: 24, // Border / 24 (2X-Large)
+    full: 1000, // Border / 1000 (Full)
+
+    // Legacy support - keeping these for backward compatibility
+    xs: 4, // Maps to small
+    sm: 8, // Maps to medium
+    md: 12, // Maps to large
+    lg: 16, // Maps to xLarge
+    xl: 24, // Maps to xxLarge
+  } as Readonly<ISize['borderRadius']>,
   borderWidth: {
-    small: 1,
-    medium: 2,
-    large: 3,
-  } as Readonly<ISize>,
+    none: 0, // Stroke / 0
+    xSmall: 0.5, // Stroke / 0.5
+    small: 1, // Stroke / 1
+    medium: 1.5, // Stroke / 1.5
+    large: 2, // Stroke / 2
+
+    // Legacy support - keeping these for backward compatibility
+    extraSmall: 0.5, // Maps to xSmall
+  } as Readonly<ISize['borderWidth']>,
 };

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

@@ -6,8 +6,8 @@ import {
   ViewStyle,
 } from 'react-native';
 import {Theme} from './types';
-import {FontSizes, LineHeight, Spacing} from './commonSizes';
 import {Fonts} from './fonts';
+import {CommonSizes} from './commonSizes';
 
 export const screenComponentWidth = Dimensions.get('screen').width - 60;
 export const screenWidth = Dimensions.get('screen').width;
@@ -131,34 +131,34 @@ export const createThemedStyles = (theme: Theme) =>
     } as TextStyle,
     h4_semiBold: {
       fontFamily: Fonts.semiBold,
-      fontSize: FontSizes.medium,
-      lineHeight: LineHeight.medium,
+      fontSize: CommonSizes.font.medium,
+      lineHeight: CommonSizes.lineHeight.medium,
     } as TextStyle,
     h4_regular: {
       fontFamily: Fonts.regular,
-      fontSize: FontSizes.medium,
-      lineHeight: LineHeight.medium,
+      fontSize: CommonSizes.font.medium,
+      lineHeight: CommonSizes.lineHeight.medium,
     } as TextStyle,
     body_bold: {
       fontFamily: Fonts.bold,
-      fontSize: FontSizes.small,
-      lineHeight: LineHeight.small,
+      fontSize: CommonSizes.font.small,
+      lineHeight: CommonSizes.lineHeight.small,
     } as TextStyle,
     body_bold_underlined: {
       fontFamily: Fonts.bold,
-      fontSize: FontSizes.small,
-      lineHeight: LineHeight.small,
+      fontSize: CommonSizes.font.small,
+      lineHeight: CommonSizes.lineHeight.small,
       textDecorationLine: 'underline',
     } as TextStyle,
     body_semiBold: {
       fontFamily: Fonts.semiBold,
-      fontSize: FontSizes.small,
-      lineHeight: LineHeight.small,
+      fontSize: CommonSizes.font.small,
+      lineHeight: CommonSizes.lineHeight.small,
     } as TextStyle,
     body_regular: {
       fontFamily: Fonts.regular,
-      fontSize: FontSizes.small,
-      lineHeight: LineHeight.small,
+      fontSize: CommonSizes.font.small,
+      lineHeight: CommonSizes.lineHeight.small,
     } as TextStyle,
     tabBar_bold: {
       fontFamily: Fonts.bold,
@@ -204,47 +204,47 @@ export const CommonStyles = createThemedStyles({
   text: {
     header1: {
       fontFamily: Fonts.medium,
-      fontSize: FontSizes.header1,
+      fontSize: CommonSizes.font.large,
       color: '#000000',
     },
     header2: {
       fontFamily: Fonts.normal,
-      fontSize: FontSizes.header2,
+      fontSize: CommonSizes.font.largePlus,
       color: '#000000',
     },
     body1: {
       fontFamily: Fonts.light,
-      fontSize: FontSizes.body1,
+      fontSize: CommonSizes.font.medium,
       color: '#000000',
     },
     body2: {
       fontFamily: Fonts.regular,
-      fontSize: FontSizes.body2,
+      fontSize: CommonSizes.font.mediumPlus,
       color: '#000000',
     },
     button: {
       fontFamily: Fonts.regular,
-      fontSize: FontSizes.button,
+      fontSize: CommonSizes.font.mediumPlus,
       color: '#FFFFFF',
     },
     cards: {
       fontFamily: Fonts.semiBold,
-      fontSize: FontSizes.card,
+      fontSize: CommonSizes.font.mediumPlus,
       color: '#000000',
     },
     SearchBar: {
       fontFamily: Fonts.light,
-      fontSize: FontSizes.searchBar,
+      fontSize: CommonSizes.font.mediumPlus,
       color: '#000000',
     },
     label: {
       fontFamily: Fonts.light,
-      fontSize: FontSizes.label,
+      fontSize: CommonSizes.font.mediumPlus,
       color: '#000000',
     },
     hyperlink: {
       fontFamily: Fonts.light,
-      fontSize: FontSizes.hyperlink,
+      fontSize: CommonSizes.font.mediumPlus,
       color: '#000000',
       textDecorationLine: 'underline',
     },