@fadyshawky/react-native-magic 2.0.1 → 2.0.2

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

@@ -161,19 +161,19 @@ const styles = StyleSheet.create({
     height: 48,
     borderRadius: 16,
     borderWidth: 1,
-    paddingHorizontal: CommonSizes.spacing.md,
-    marginHorizontal: CommonSizes.spacing.lg,
-    marginBottom: CommonSizes.spacing.lg,
+    paddingHorizontal: CommonSizes.spacing.medium,
+    marginHorizontal: CommonSizes.spacing.large,
+    marginBottom: CommonSizes.spacing.large,
   },
   input: {
     flex: 1,
-    paddingVertical: CommonSizes.spacing.md,
-    paddingHorizontal: CommonSizes.spacing.sm,
+    paddingVertical: CommonSizes.spacing.medium,
+    paddingHorizontal: CommonSizes.spacing.small,
   },
   searchIcon: {
-    marginHorizontal: CommonSizes.spacing.sm,
+    marginHorizontal: CommonSizes.spacing.small,
   },
   clearButton: {
-    padding: CommonSizes.spacing.sm,
+    padding: CommonSizes.spacing.small,
   },
 });

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

@@ -27,7 +27,7 @@ const sharedStyle: ViewStyle = {
 const styles = StyleSheet.create({
   container: {
     ...sharedStyle,
-    marginHorizontal: CommonSizes.spacing.md,
+    marginHorizontal: CommonSizes.spacing.medium,
   } as ViewStyle,
   fullContainer: {
     ...sharedStyle,

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/components/TryAgain.tsx

@@ -38,7 +38,7 @@ const styles = StyleSheet.create({
   title: {
     ...CommonStyles.normalText,
     textAlign: 'center',
-    marginBottom: CommonSizes.spacing.xs,
+    marginBottom: CommonSizes.spacing.extraSmall,
   } as TextStyle,
   description: {
     ...CommonStyles.normalText,

package/template/src/common/helpers/defaultKeyIdExtractor.ts

@@ -1,5 +1,5 @@
 export function defaultKeyIdExtractor<T extends {id: string | number}>(
   item: T,
 ): string {
-  return item?.id?.toString();
+  return item?._id;
 }

package/template/src/common/helpers/shareHelpers.ts

@@ -0,0 +1,47 @@
+import {Linking} from 'react-native';
+import Share, {ShareOptions} from 'react-native-share';
+import {isAndroid, isIos} from '../../core/theme/commonConsts';
+import {
+  ShareOpenResult,
+  ShareSingleOptions,
+  ShareSingleResult,
+} from 'react-native-share/lib/typescript/src/types';
+
+export async function showShareDialog(
+  options: ShareOptions,
+  completedCallback?: (result: ShareOpenResult) => void,
+  errorCallback?: (error: Error | unknown) => void,
+) {
+  try {
+    const result = await Share.open(options);
+    completedCallback?.(result);
+  } catch (error: Error | unknown) {
+    errorCallback?.(error);
+  }
+}
+
+export async function showShareSocialDialog(
+  options: ShareSingleOptions,
+  completedCallback?: (result: ShareSingleResult) => void,
+  errorCallback?: (error: Error | unknown) => void,
+) {
+  try {
+    const result = await Share.shareSingle(options);
+    completedCallback?.(result);
+  } catch (error: Error | unknown) {
+    errorCallback?.(error);
+  }
+}
+
+export async function isPackageInstalled(
+  androidPackageName?: string,
+  iosUrl?: string,
+): Promise<boolean> {
+  if (isAndroid && androidPackageName) {
+    return (await Share.isPackageInstalled(androidPackageName)).isInstalled;
+  } else if (isIos && iosUrl) {
+    return Linking.canOpenURL(iosUrl);
+  } else {
+    throw new Error('No arguments were given or the platform is not supported');
+  }
+}

package/template/src/common/helpers/stringsHelpers.ts

@@ -23,7 +23,3 @@ export function normalizeAndTrimWhitespace(text: string): string {
     ?.trimEnd() // Remove trailing whitespace
     ?.replace(/\s+/g, ' '); // Replace multiple whitespaces with single space
 }
-
-export function ensureString(text: string): string {
-  return text != null ? text : '';
-}

package/template/src/core/api/errorHandler.ts

@@ -4,8 +4,7 @@
  * @param error The error caught from an API request
  * @returns A structured error object with message (as string) and details
  */
-
-import {ensureString} from '../../common/helpers/stringsHelpers';
+import {ensureString} from '../utils/stringUtils';
 
 export const extractServerError = (error: any) => {
   let errorObj = {

package/template/src/core/store/app/appSlice.ts

@@ -1,19 +1,11 @@
-import {createSlice, PayloadAction} from '@reduxjs/toolkit';
-import {newState} from '../../../common/utils/newState';
-import {Languages} from '../../../common/localization/localization';
-import {appInitialState, AppInitialEntity} from './appState';
+import {createSlice} from '@reduxjs/toolkit';
+
+import {appInitialState} from './appState';
 
 export const {reducer: AppReducer, actions} = createSlice({
   name: 'app',
   initialState: appInitialState,
-  reducers: {
-    setLanguage: (state, action: PayloadAction<Languages>) => {
-      return newState(state, {
-        language: action.payload,
-        isRTL: action.payload === Languages.ar,
-      });
-    },
-  },
+  reducers: {},
 });
 
-export const {setLanguage} = actions;
+export const {} = actions;

package/template/src/core/store/app/appState.ts

@@ -1,11 +1,3 @@
-import {Languages} from '../../../common/localization/localization';
+export interface AppInitialEntity {}
 
-export interface AppInitialEntity {
-  language?: Languages;
-  isRTL?: boolean;
-}
-
-export const appInitialState: AppInitialEntity = {
-  language: undefined,
-  isRTL: false,
-};
+export const appInitialState: AppInitialEntity = {};

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/commonSizes.ts

@@ -2,59 +2,126 @@ 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,
+    // 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,
+    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,
+    // 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: {
-    xs: 4,
-    sm: 8,
-    md: 16,
-    lg: 24,
-    xl: 32,
+    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: {
-    xs: 4,
-    sm: 8,
-    md: 12,
-    lg: 16,
-    xl: 24,
+    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,
+    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']>,
 };