@fadyshawky/react-native-magic 2.0.4 → 2.0.6

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

@@ -1,30 +0,0 @@
-import {emptyValidation} from './commonValidations';
-import {isEmail} from '../helpers/regexHelpers';
-import {validationConstants} from './validationConstants';
-import {localization} from '../localization/localization';
-
-export function emailValidations(checkValue: string): string | null {
-  const isEmpty = emptyValidation(checkValue);
-
-  if (isEmpty != null) {
-    return isEmpty;
-  } else if (!isEmail(checkValue)) {
-    return localization.errors.invalidEmail;
-  } else {
-    return null;
-  }
-}
-
-export function fullNameValidations(checkValue: string): string | null {
-  const isEmpty = emptyValidation(checkValue);
-
-  if (isEmpty != null) {
-    return isEmpty;
-  } else if (
-    checkValue.trim().length < validationConstants.fullName.minLength
-  ) {
-    return localization.errors.invalidFullName;
-  } else {
-    return null;
-  }
-}

package/template/src/navigation/TopTabBar.tsx

@@ -1,77 +0,0 @@
-import {Animated, View, TouchableOpacity} from 'react-native';
-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: NaturalColors.grayScale_50,
-        width: screenWidth - 60,
-        alignSelf: 'center',
-        height: 40,
-        borderRadius: 20,
-        marginBottom: 24,
-      }}>
-      {state.routes.map((route: any, index: any) => {
-        const {options} = descriptors[route.key];
-        const label =
-          options.tabBarLabel !== undefined
-            ? options.tabBarLabel
-            : options.title !== undefined
-            ? options.title
-            : route.name;
-
-        const isFocused = state.index === index;
-
-        const onPress = () => {
-          const event = navigation.emit({
-            type: 'tabPress',
-            target: route.key,
-            canPreventDefault: true,
-          });
-
-          if (!isFocused && !event.defaultPrevented) {
-            navigation.navigate(route.name, route.params);
-          }
-        };
-
-        const onLongPress = () => {
-          navigation.emit({
-            type: 'tabLongPress',
-            target: route.key,
-          });
-        };
-
-        return (
-          <TouchableOpacity
-            accessibilityRole="button"
-            accessibilityState={isFocused ? {selected: true} : {}}
-            accessibilityLabel={options.tabBarAccessibilityLabel}
-            testID={options.tabBarTestID}
-            onPress={onPress}
-            onLongPress={onLongPress}
-            style={{
-              flex: 1,
-              alignItems: 'center',
-              justifyContent: 'center',
-              backgroundColor: isFocused
-                ? NaturalColors.grayScale_0
-                : NaturalColors.grayScale_50,
-              borderRadius: 20,
-            }}>
-            <Animated.Text
-              style={
-                isFocused
-                  ? {...CommonStyles.h4_bold, fontWeight: 'bold'}
-                  : CommonStyles.h4_regular
-              }>
-              {label}
-            </Animated.Text>
-          </TouchableOpacity>
-        );
-      })}
-    </View>
-  );
-}

package/template/src/screens/Settings/Settings.tsx

@@ -1,5 +0,0 @@
-import React from 'react';
-
-export function Settings(): JSX.Element {
-  return <></>;
-}

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

@@ -1,79 +0,0 @@
-import React from 'react';
-import {
-  Image,
-  ImageStyle,
-  ScrollView,
-  StyleSheet,
-  Text,
-  TouchableOpacity,
-  View,
-} from 'react-native';
-import {CommonSizes} from '../../../core/theme/commonSizes';
-import {CarouselItem} from '../types';
-import {PrimaryColors} from '../../../core/theme/colors';
-
-interface CarouselSectionProps {
-  items: CarouselItem[];
-  imageStyle?: ImageStyle;
-}
-
-export function CarouselSection({
-  items,
-  imageStyle,
-}: CarouselSectionProps): JSX.Element {
-  return (
-    <ScrollView
-      horizontal
-      showsHorizontalScrollIndicator={false}
-      contentContainerStyle={styles.container}>
-      {items.map((item, index) => (
-        <TouchableOpacity
-          key={item.id}
-          style={styles.itemContainer}
-          onPress={() => item.onPress?.(item)}>
-          <Image
-            source={{uri: item.imageUrl}}
-            style={[styles.image, imageStyle]}
-          />
-          <View style={styles.textContainer}>
-            <Text style={styles.title} numberOfLines={1}>
-              {item.title}
-            </Text>
-            {item.subtitle && (
-              <Text style={styles.subtitle} numberOfLines={1}>
-                {item.subtitle}
-              </Text>
-            )}
-          </View>
-        </TouchableOpacity>
-      ))}
-    </ScrollView>
-  );
-}
-
-const styles = StyleSheet.create({
-  container: {
-    paddingHorizontal: CommonSizes.spacing.large,
-  },
-  itemContainer: {
-    marginRight: CommonSizes.spacing.medium,
-  },
-  image: {
-    width: 200,
-    height: 150,
-    borderRadius: CommonSizes.borderRadius.medium,
-  },
-  textContainer: {
-    marginTop: CommonSizes.spacing.small,
-  },
-  title: {
-    fontSize: 16,
-    fontWeight: '600',
-    color: PrimaryColors.PlatinateBlue_700,
-  },
-  subtitle: {
-    fontSize: 14,
-    color: PrimaryColors.PlatinateBlue_700,
-    marginTop: 2,
-  },
-});

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

@@ -1,128 +0,0 @@
-import React, {useRef, useState} from 'react';
-import {
-  Dimensions,
-  FlatList,
-  Image,
-  StyleSheet,
-  Text,
-  TouchableOpacity,
-  View,
-} from 'react-native';
-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;
-
-interface FeaturedCarouselProps {
-  items: CarouselItem[];
-}
-
-export function FeaturedCarousel({items}: FeaturedCarouselProps): JSX.Element {
-  const [activeIndex, setActiveIndex] = useState(0);
-  const flatListRef = useRef<FlatList>(null);
-
-  const renderItem = ({item}: {item: CarouselItem}) => (
-    <TouchableOpacity
-      style={styles.itemContainer}
-      onPress={() => item.onPress?.(item)}>
-      <Image source={{uri: item.imageUrl}} style={styles.image} />
-      <View style={styles.overlay}>
-        <Text style={styles.title}>{item.title}</Text>
-        {item.subtitle && <Text style={styles.subtitle}>{item.subtitle}</Text>}
-      </View>
-    </TouchableOpacity>
-  );
-
-  const renderDot = (index: number) => (
-    <View
-      key={index}
-      style={[styles.dot, index === activeIndex && styles.activeDot]}
-    />
-  );
-
-  const handleScroll = (event: any) => {
-    const slideSize = event.nativeEvent.layoutMeasurement.width;
-    const index = event.nativeEvent.contentOffset.x / slideSize;
-    const roundIndex = Math.round(index);
-    setActiveIndex(roundIndex);
-  };
-
-  return (
-    <View>
-      <FlatList
-        ref={flatListRef}
-        data={items}
-        renderItem={renderItem}
-        horizontal
-        pagingEnabled
-        showsHorizontalScrollIndicator={false}
-        onScroll={handleScroll}
-        snapToAlignment="center"
-        decelerationRate="fast"
-        snapToInterval={ITEM_WIDTH}
-        contentContainerStyle={styles.listContainer}
-        getItemLayout={(_, index) => ({
-          length: ITEM_WIDTH,
-          offset: ITEM_WIDTH * index,
-          index,
-        })}
-      />
-      <View style={styles.pagination}>
-        {items.map((_, index) => renderDot(index))}
-      </View>
-    </View>
-  );
-}
-
-const styles = StyleSheet.create({
-  listContainer: {
-    paddingHorizontal: (width - ITEM_WIDTH) / 2,
-  },
-  itemContainer: {
-    width: ITEM_WIDTH,
-    height: 250,
-  },
-  image: {
-    width: '100%',
-    height: '100%',
-    borderRadius: CommonSizes.borderRadius.large,
-  },
-  overlay: {
-    ...StyleSheet.absoluteFillObject,
-    backgroundColor: 'rgba(0, 0, 0, 0.3)',
-    borderRadius: CommonSizes.borderRadius.large,
-    padding: CommonSizes.spacing.large,
-    justifyContent: 'flex-end',
-  },
-  title: {
-    fontSize: 20,
-    fontWeight: '600',
-    color: NaturalColors.grayScale_0,
-  },
-  subtitle: {
-    fontSize: 16,
-    color: NaturalColors.grayScale_0,
-    marginTop: CommonSizes.spacing.small,
-  },
-  pagination: {
-    flexDirection: 'row',
-    justifyContent: 'center',
-    alignItems: 'center',
-    marginTop: CommonSizes.spacing.medium,
-  },
-  dot: {
-    width: 8,
-    height: 8,
-    borderRadius: 4,
-    backgroundColor: NaturalColors.grayScale_50,
-    marginHorizontal: 4,
-  },
-  activeDot: {
-    backgroundColor: PrimaryColors.PlatinateBlue_700,
-    width: 12,
-    height: 12,
-    borderRadius: 6,
-  },
-});

package/template/src/screens/main/Main.tsx

@@ -1,5 +0,0 @@
-import React from 'react';
-
-export function Main(): JSX.Element {
-  return <></>;
-}

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

@@ -1,198 +0,0 @@
-import {useNavigation} from '@react-navigation/native';
-import type {NativeStackNavigationProp} from '@react-navigation/native-stack';
-import React, {useRef, useState} from 'react';
-import {
-  NativeSyntheticEvent,
-  StyleSheet,
-  Text,
-  TextInputFocusEventData,
-  findNodeHandle,
-} from 'react-native';
-import {KeyboardAwareScrollView} from 'react-native-keyboard-aware-scroll-view';
-import {ButtonType} from '../../../types';
-import {PrimaryButton} from '../../common/components/PrimaryButton';
-import {PrimaryTextInput} from '../../common/components/PrimaryTextInput';
-import {localization} from '../../common/localization/localization';
-import {emptyValidation} from '../../common/validations/commonValidations';
-import {useInputError} from '../../common/validations/hooks/useInputError';
-import {
-  emailValidations,
-  fullNameValidations,
-} from '../../common/validations/profileValidations';
-import {useAppDispatch} from '../../core/store/reduxHelpers';
-import {userRegister} from '../../core/store/user/userActions';
-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();
-  const navigation =
-    useNavigation<NativeStackNavigationProp<RootStackParamList>>();
-  const [loading, setLoading] = useState(false);
-  const [formData, setFormData] = useState({
-    fullName: '',
-    email: '',
-    password: '',
-    confirmPassword: '',
-  });
-
-  const scroll = useRef<KeyboardAwareScrollView>(null);
-
-  // Add validation hooks
-  const {error: fullNameError, recheckValue: recheckFullName} = useInputError(
-    formData.fullName,
-    fullNameValidations,
-  );
-  const {error: emailError, recheckValue: recheckEmail} = useInputError(
-    formData.email,
-    emailValidations,
-  );
-  const {error: passwordError, recheckValue: recheckPassword} = useInputError(
-    formData.password,
-    emptyValidation,
-  );
-  const {error: confirmPasswordError, recheckValue: recheckConfirmPassword} =
-    useInputError(formData.confirmPassword, emptyValidation);
-
-  function scrollToInput(reactNode: any) {
-    scroll.current?.scrollToFocusedInput(reactNode);
-  }
-
-  async function handleRegistration() {
-    // Validate all fields
-    const isFullNameValid = recheckFullName() === null;
-    const isEmailValid = recheckEmail() === null;
-    const isPasswordValid = recheckPassword() === null;
-    const isConfirmPasswordValid = recheckConfirmPassword() === null;
-
-    if (
-      !isFullNameValid ||
-      !isEmailValid ||
-      !isPasswordValid ||
-      !isConfirmPasswordValid
-    ) {
-      return;
-    }
-
-    if (formData.password !== formData.confirmPassword) {
-      // Add error handling for password mismatch
-      return;
-    }
-
-    setLoading(true);
-    await dispatch(
-      userRegister({
-        fullName: formData.fullName,
-        email: formData.email.toLowerCase(),
-        password: formData.password,
-      }),
-    );
-    setLoading(false);
-  }
-
-  const goToLogin = () => {
-    navigation.navigate('Login');
-  };
-
-  return (
-    <KeyboardAwareScrollView
-      ref={scroll}
-      resetScrollToCoords={{x: 0, y: 0}}
-      scrollEnabled={true}
-      enableOnAndroid={true}
-      contentContainerStyle={styles.contentContainer}
-      contentInsetAdjustmentBehavior={'automatic'}
-      style={styles.container}>
-      <Text style={CommonStyles.h1_semiBold}>
-        {localization.login.registration.title}
-      </Text>
-
-      <PrimaryTextInput
-        onFocus={(event: NativeSyntheticEvent<TextInputFocusEventData>) => {
-          scrollToInput(findNodeHandle(event.target));
-        }}
-        value={formData.fullName}
-        onChangeText={text => setFormData({...formData, fullName: text})}
-        containerStyle={CommonStyles.textInputContainer}
-        label={localization.login.registration.fullName}
-        placeholder={localization.login.registration.fullName}
-        error={fullNameError}
-      />
-
-      <PrimaryTextInput
-        onFocus={(event: NativeSyntheticEvent<TextInputFocusEventData>) => {
-          scrollToInput(findNodeHandle(event.target));
-        }}
-        autoCapitalize="none"
-        value={formData.email}
-        onChangeText={text => setFormData({...formData, email: text})}
-        containerStyle={CommonStyles.textInputContainer}
-        label={localization.login.registration.email}
-        placeholder={localization.login.EnterEmail}
-        error={emailError}
-      />
-
-      <PrimaryTextInput
-        onFocus={(event: NativeSyntheticEvent<TextInputFocusEventData>) => {
-          scrollToInput(findNodeHandle(event.target));
-        }}
-        secureTextEntry
-        value={formData.password}
-        onChangeText={text => setFormData({...formData, password: text})}
-        containerStyle={CommonStyles.textInputContainer}
-        label={localization.login.registration.password}
-        placeholder={localization.login.EnterPassword}
-        error={passwordError}
-      />
-
-      <PrimaryTextInput
-        onFocus={(event: NativeSyntheticEvent<TextInputFocusEventData>) => {
-          scrollToInput(findNodeHandle(event.target));
-        }}
-        secureTextEntry
-        value={formData.confirmPassword}
-        onChangeText={text => setFormData({...formData, confirmPassword: text})}
-        containerStyle={CommonStyles.textInputContainer}
-        label={localization.login.registration.confirmPassword}
-        placeholder={localization.login.registration.confirmPassword}
-        error={confirmPasswordError}
-      />
-
-      <PrimaryButton
-        isLoading={loading}
-        onPress={handleRegistration}
-        label={localization.login.registration.register}
-        type={ButtonType.solid}
-      />
-      <PrimaryButton
-        onPress={goToLogin}
-        label={localization.login.registration.alreadyHaveAccount}
-        type={ButtonType.borderless}
-      />
-    </KeyboardAwareScrollView>
-  );
-}
-
-const styles = StyleSheet.create({
-  container: {
-    flexGrow: 1,
-    backgroundColor: NaturalColors.grayScale_0,
-    borderTopRightRadius: CommonSizes.spacing.large,
-    borderTopLeftRadius: CommonSizes.spacing.large,
-  },
-  contentContainer: {
-    justifyContent: 'center',
-    alignItems: 'center',
-    paddingHorizontal: CommonSizes.spacing.large,
-    paddingVertical: 26,
-    gap: 16,
-  },
-  loginLink: {
-    ...CommonStyles.normalText,
-    color: PrimaryColors.PlatinateBlue_700,
-    textAlign: 'center',
-    marginTop: 16,
-  },
-});

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

@@ -1,129 +0,0 @@
-import {useNavigation} from '@react-navigation/native';
-import type {NativeStackNavigationProp} from '@react-navigation/native-stack';
-import React, {useRef, useState} from 'react';
-import {
-  NativeSyntheticEvent,
-  StyleSheet,
-  Text,
-  TextInputFocusEventData,
-  findNodeHandle,
-} from 'react-native';
-import {KeyboardAwareScrollView} from 'react-native-keyboard-aware-scroll-view';
-import {ButtonType} from '../../../types';
-import {PrimaryButton} from '../../common/components/PrimaryButton';
-import {PrimaryTextInput} from '../../common/components/PrimaryTextInput';
-import {localization} from '../../common/localization/localization';
-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 {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();
-  const navigation =
-    useNavigation<NativeStackNavigationProp<RootStackParamList>>();
-  const [email, setEmail] = useState('');
-  const [loading, setLoading] = useState(false);
-
-  const scroll = useRef<KeyboardAwareScrollView>(null);
-
-  const {error: emailError, recheckValue: recheckEmail} = useInputError(
-    email,
-    emailValidations,
-  );
-
-  function scrollToInput(reactNode: any) {
-    scroll.current?.scrollToFocusedInput(reactNode);
-  }
-
-  async function handleResetPassword() {
-    const isEmailValid = recheckEmail() === null;
-    if (!isEmailValid) {
-      return;
-    }
-
-    setLoading(true);
-    await dispatch(resetPassword({email: email.toLowerCase()}));
-    setLoading(false);
-  }
-
-  const goToLogin = () => {
-    navigation.navigate('Login');
-  };
-
-  return (
-    <KeyboardAwareScrollView
-      ref={scroll}
-      resetScrollToCoords={{x: 0, y: 0}}
-      scrollEnabled={true}
-      enableOnAndroid={true}
-      contentContainerStyle={styles.contentContainer}
-      contentInsetAdjustmentBehavior={'automatic'}
-      style={styles.container}>
-      <Text style={CommonStyles.h1_semiBold}>
-        {localization.login.forgotPassword.title}
-      </Text>
-
-      <Text style={styles.description}>
-        {localization.login.forgotPassword.description}
-      </Text>
-
-      <PrimaryTextInput
-        onFocus={(event: NativeSyntheticEvent<TextInputFocusEventData>) => {
-          scrollToInput(findNodeHandle(event.target));
-        }}
-        autoCapitalize="none"
-        value={email}
-        onChangeText={setEmail}
-        containerStyle={CommonStyles.textInputContainer}
-        label={localization.login.Email}
-        placeholder={localization.login.EnterEmail}
-        error={emailError}
-      />
-
-      <PrimaryButton
-        isLoading={loading}
-        onPress={handleResetPassword}
-        label={localization.login.forgotPassword.resetPassword}
-        type={ButtonType.solid}
-      />
-
-      <PrimaryButton
-        onPress={goToLogin}
-        label={localization.login.forgotPassword.backToLogin}
-        type={ButtonType.borderless}
-      />
-    </KeyboardAwareScrollView>
-  );
-}
-
-const styles = StyleSheet.create({
-  container: {
-    flexGrow: 1,
-    backgroundColor: NaturalColors.grayScale_0,
-    borderTopRightRadius: CommonSizes.spacing.large,
-    borderTopLeftRadius: CommonSizes.spacing.large,
-  },
-  contentContainer: {
-    justifyContent: 'center',
-    alignItems: 'center',
-    paddingHorizontal: CommonSizes.spacing.large,
-    paddingVertical: 26,
-    gap: 16,
-  },
-  description: {
-    ...CommonStyles.normalText,
-    textAlign: 'center',
-    marginBottom: 8,
-  },
-  loginLink: {
-    ...CommonStyles.normalText,
-    color: PrimaryColors.PlatinateBlue_700,
-    textAlign: 'center',
-    marginTop: 16,
-  },
-});