@fadyshawky/react-native-magic 2.0.1 → 2.0.3

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

@@ -1,6 +1,6 @@
 import React, {FC, memo, useMemo} from 'react';
 import {StyleSheet, View, ViewStyle} from 'react-native';
-import {Colors} from '../../core/theme/colors';
+import {PrimaryColors} from '../../core/theme/colors';
 
 interface IProps {
   isSelected: boolean;
@@ -41,14 +41,14 @@ const commonInnerCircle: ViewStyle = {
 const styles = StyleSheet.create({
   outerCircle: {
     ...commonOuterCircle,
-    borderColor: Colors.blueNormalActive,
+    borderColor: PrimaryColors.PlatinateBlue_700,
   } as ViewStyle,
   outerCircleSelected: {
     ...commonOuterCircle,
-    borderColor: Colors.blueNormalActive,
+    borderColor: PrimaryColors.PlatinateBlue_700,
   } as ViewStyle,
   innerCircle: {
     ...commonInnerCircle,
-    backgroundColor: Colors.blueNormalActive,
+    backgroundColor: PrimaryColors.PlatinateBlue_700,
   } as ViewStyle,
 });

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

@@ -59,8 +59,8 @@ export const SearchBar: React.FC<SearchBarProps> = ({
   };
 
   const containerStyle: ViewStyle = {
-    backgroundColor: `${theme.colors.white}20`,
-    borderColor: theme.colors.mutedLavender30,
+    backgroundColor: `${theme.colors.grayScale_0}20`,
+    borderColor: theme.colors.grayScale_25,
   };
 
   // Set keyboard language specific properties
@@ -111,14 +111,14 @@ export const SearchBar: React.FC<SearchBarProps> = ({
         containerStyle,
         style as ViewStyle,
         {
-          backgroundColor: theme.colors.surface,
+          backgroundColor: theme.colors.grayScale_0,
           ...createThemedStyles(theme).dropShadow,
         },
       ]}>
       <Icon
         name="search"
         size={20}
-        color={theme.colors.mutedLavender}
+        color={theme.colors.grayScale_50}
         style={styles.searchIcon}
       />
       <TextInput
@@ -133,7 +133,7 @@ export const SearchBar: React.FC<SearchBarProps> = ({
           inputStyle as TextStyle,
         ]}
         placeholder={placeholder || t('search', 'common')}
-        placeholderTextColor={`${theme.colors.mutedLavender}80`}
+        placeholderTextColor={`${theme.colors.grayScale_50}80`}
         value={value}
         onChangeText={onChangeText}
         autoCapitalize="none"
@@ -146,7 +146,7 @@ export const SearchBar: React.FC<SearchBarProps> = ({
           <Icon
             name="close-circle"
             size={20}
-            color={theme.colors.mutedLavender}
+            color={theme.colors.grayScale_50}
           />
         </TouchableOpacity>
       )}
@@ -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={0} 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

@@ -6,7 +6,7 @@ import {
   TouchableOpacity,
   View,
 } from 'react-native';
-import {Colors} from '../../core/theme/colors';
+import {PrimaryColors} from '../../core/theme/colors';
 import {CommonSizes} from '../../core/theme/commonSizes';
 import {CommonStyles} from '../../core/theme/commonStyles';
 import {localization} from '../localization/localization';
@@ -38,11 +38,11 @@ const styles = StyleSheet.create({
   title: {
     ...CommonStyles.normalText,
     textAlign: 'center',
-    marginBottom: CommonSizes.spacing.xs,
+    marginBottom: CommonSizes.spacing.xSmall,
   } as TextStyle,
   description: {
     ...CommonStyles.normalText,
-    color: Colors.blueNormalActive,
+    color: PrimaryColors.PlatinateBlue_700,
     textAlign: 'center',
     textDecorationLine: 'underline',
   } as TextStyle,

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',
 }