@fadyshawky/react-native-magic 2.0.4 → 2.0.5

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

@@ -1,153 +0,0 @@
-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/Svg.tsx

@@ -1,25 +0,0 @@
-import * as React from 'react';
-import Svg, {G, Path, Defs, ClipPath, SvgProps} from 'react-native-svg';
-
-const SvgComponent: React.FC<SvgProps> = props => (
-  <Svg width={'100%'} height={'100%'} fill="none" {...props}>
-    <G clipPath="url(#a)">
-      <Path fill="#F9FCFF" d="M0 0h428v925H0z" />
-      <Path
-        fill="#F3F2FF"
-        d="M293.588 913.49c-11.664-7.299-22.732-17.683-25.003-31.28-1.327-8.116.619-16.401.321-24.632-1.302-34.39-41.04-60.387-36.303-94.477 3.225-23.054 26.005-38.157 48.084-45.307 22.079-7.15 46.135-9.803 65.558-22.544 11.677-7.647 20.94-18.492 32.704-26.016 31.368-20.054 78.287-8.983 97.328 23.023 13.438 22.55 13.203 50.707 8.916 76.621-7.313 43.969-24.299 113.518-59.201 144.845-32.956 29.629-98.321 21.076-132.404-.233Z"
-      />
-      <Path
-        fill="#EEF8FF"
-        d="M80.103-35.495c11.658 7.31 22.718 17.702 24.977 31.301 1.32 8.117-.633 16.4-.342 24.631 1.274 34.392 40.991 60.422 36.225 94.508-3.244 23.051-26.037 38.135-48.122 45.267-22.085 7.132-46.143 9.764-65.577 22.489-11.683 7.638-20.955 18.474-32.725 25.989-31.385 20.028-78.294 8.917-97.31-23.105-13.419-22.56-13.16-50.717-8.852-76.628C-104.272 64.994-87.228-4.54-52.301-35.838c32.98-29.602 98.34-20.994 132.404.343Z"
-      />
-    </G>
-    <Defs>
-      <ClipPath id="a">
-        <Path fill="#fff" d="M0 0h428v925H0z" />
-      </ClipPath>
-    </Defs>
-  </Svg>
-);
-
-export default SvgComponent;

package/template/src/common/hooks/useDebounce.ts

@@ -1,17 +0,0 @@
-import {useEffect, useState} from 'react';
-
-export function useDebounce<T>(value: T, delay: number): T {
-  const [debouncedValue, setDebouncedValue] = useState<T>(value);
-
-  useEffect(() => {
-    const handler = setTimeout(() => {
-      setDebouncedValue(value);
-    }, delay);
-
-    return () => {
-      clearTimeout(handler);
-    };
-  }, [value, delay]);
-
-  return debouncedValue;
-}

package/template/src/common/hooks/usePrevious.ts

@@ -1,11 +0,0 @@
-import {useEffect, useRef} from 'react';
-
-export function usePrevious<T>(value: T): T | undefined {
-  const ref = useRef<T>();
-
-  useEffect(() => {
-    ref.current = value;
-  }, [value]);
-
-  return ref.current;
-}

package/template/src/common/localization/intlFormatter.ts

@@ -1,37 +0,0 @@
-import Intl from 'intl';
-import {getLanguage} from './localization';
-// eslint-disable-next-line import/no-unassigned-import
-import 'intl/locale-data/jsonp/en';
-
-export function formatPercent(percent: number | string): string {
-  const formatter = new Intl.NumberFormat(getLanguage(), {
-    style: 'percent',
-    minimumFractionDigits: 0,
-    maximumFractionDigits: 2,
-  });
-
-  return formatter.format(Number(percent) / 100);
-}
-
-export function formatCurrency(
-  price: number | string,
-  currency?: string,
-): string {
-  const formatter = new Intl.NumberFormat(getLanguage(), {
-    style: 'currency',
-    minimumFractionDigits: 0,
-    maximumFractionDigits: 2,
-    currency: currency || 'USD',
-  });
-
-  return formatter.format(Number(price));
-}
-
-export function formatDecimal(value: number | string): string {
-  const formatter = new Intl.NumberFormat(getLanguage(), {
-    style: 'decimal',
-    minimumFractionDigits: 0,
-  });
-
-  return formatter.format(Number(value));
-}

package/template/src/common/urls/emailUrl.ts

@@ -1,20 +0,0 @@
-import {BaseUrlOpener} from './baseUrlOpener';
-
-export class EmailUrl extends BaseUrlOpener {
-  constructor(private email: string | null) {
-    super();
-  }
-
-  protected generateUrl(): string | null {
-    if (this.email == null) {
-      return null;
-    } else {
-      let url = this.email;
-      if (!url.startsWith('mailto')) {
-        url = 'mailto://' + url;
-      }
-
-      return url;
-    }
-  }
-}

package/template/src/common/urls/mapUrl.ts

@@ -1,22 +0,0 @@
-import {isIos} from '../../core/theme/commonConsts';
-import {BaseUrlOpener} from './baseUrlOpener';
-
-export class MapUrl extends BaseUrlOpener {
-  constructor(
-    private latitude: number,
-    private longitude: number,
-    private address: string,
-  ) {
-    super();
-  }
-
-  protected generateUrl(): string | null {
-    if (isIos) {
-      return `https://maps.apple.com/?q=${encodeURIComponent(
-        this.address,
-      )}&sll=${this.latitude},${this.longitude}`;
-    } else {
-      return `geo:${this.latitude}, ${this.longitude}`;
-    }
-  }
-}

package/template/src/common/utils/listHandlers.ts

@@ -1,30 +0,0 @@
-import {LoadState} from '../../../types';
-import {DEFAULT_PAGE_SIZE} from '../helpers/calculatePage';
-
-export function commonListFulfilledHandler<T>(
-  loadState: LoadState,
-  payloadList: T[],
-  storedList: T[],
-) {
-  const newLoadState =
-    payloadList.length >= DEFAULT_PAGE_SIZE
-      ? LoadState.idle
-      : LoadState.allIsLoaded;
-
-  let newData: T[] = [];
-
-  switch (loadState) {
-    case LoadState.firstLoad:
-    case LoadState.pullToRefresh:
-    case LoadState.refreshing:
-      newData = [...payloadList];
-      break;
-    case LoadState.loadingMore:
-      newData = [...storedList].concat(payloadList);
-      break;
-    default:
-      throw new Error(`LoadState ${loadState} is not valid in this context.`);
-  }
-
-  return {data: newData, error: null, loadState: newLoadState};
-}

package/template/src/common/utils/serializeQueryParams.ts

@@ -1,10 +0,0 @@
-export function serializeQueryParams(obj: any): string {
-  const str = [];
-  for (const key in obj) {
-    if (obj.hasOwnProperty(key) && obj[key] !== undefined) {
-      str.push(encodeURIComponent(key) + '=' + encodeURIComponent(obj[key]));
-    }
-  }
-
-  return str.join('&');
-}

package/template/src/common/validations/hooks/useDatesError.ts

@@ -1,40 +0,0 @@
-import {useCallback, useEffect, useRef, useState} from 'react';
-import {datesValidation} from '../commonValidations';
-
-export function useDatesError(
-  fromDate: Date,
-  toDate: Date,
-  fromLabel: string,
-  toLabel: string,
-  currentField: 'from' | 'to',
-) {
-  const [error, setError] = useState<string | null>(null);
-  const didMountRef = useRef(false);
-
-  const recheckValue = useCallback(() => {
-    const result = datesValidation(
-      fromDate,
-      toDate,
-      fromLabel,
-      toLabel,
-      currentField,
-    );
-    setError(result);
-
-    return result;
-  }, [currentField, fromDate, fromLabel, toDate, toLabel]);
-
-  useEffect(() => {
-    if (didMountRef.current) {
-      recheckValue();
-    } else {
-      didMountRef.current = true;
-    }
-  }, [recheckValue]);
-
-  return {
-    error,
-    setError,
-    recheckValue,
-  };
-}

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/core/theme/shadows.ts

@@ -1,135 +0,0 @@
-export interface ShadowConfig {
-  shadowColor: string;
-  shadowOffset: {
-    width: number;
-    height: number;
-  };
-  shadowOpacity: number;
-  shadowRadius: number;
-  elevation?: number; // For Android
-}
-
-export interface ElevationShadow {
-  primary: ShadowConfig;
-  secondary: ShadowConfig;
-}
-
-export const Shadows: Record<number, ElevationShadow> = {
-  1: {
-    primary: {
-      shadowColor: '#000000',
-      shadowOffset: {
-        width: 0,
-        height: 1,
-      },
-      shadowOpacity: 0.02, // 2%
-      shadowRadius: 1,
-      elevation: 1,
-    },
-    secondary: {
-      shadowColor: '#000000',
-      shadowOffset: {
-        width: 0,
-        height: 2,
-      },
-      shadowOpacity: 0.04, // 4%
-      shadowRadius: 4,
-      elevation: 1,
-    },
-  },
-  2: {
-    primary: {
-      shadowColor: '#000000',
-      shadowOffset: {
-        width: 0,
-        height: 1,
-      },
-      shadowOpacity: 0.04, // 4%
-      shadowRadius: 4,
-      elevation: 2,
-    },
-    secondary: {
-      shadowColor: '#000000',
-      shadowOffset: {
-        width: 0,
-        height: 4,
-      },
-      shadowOpacity: 0.08, // 8%
-      shadowRadius: 10,
-      elevation: 2,
-    },
-  },
-  3: {
-    primary: {
-      shadowColor: '#000000',
-      shadowOffset: {
-        width: 0,
-        height: 2,
-      },
-      shadowOpacity: 0.04, // 4%
-      shadowRadius: 20,
-      elevation: 3,
-    },
-    secondary: {
-      shadowColor: '#000000',
-      shadowOffset: {
-        width: 0,
-        height: 8,
-      },
-      shadowOpacity: 0.08, // 8%
-      shadowRadius: 32,
-      elevation: 3,
-    },
-  },
-  4: {
-    primary: {
-      shadowColor: '#000000',
-      shadowOffset: {
-        width: 0,
-        height: 8,
-      },
-      shadowOpacity: 0.06, // 6%
-      shadowRadius: 20,
-      elevation: 4,
-    },
-    secondary: {
-      shadowColor: '#000000',
-      shadowOffset: {
-        width: 0,
-        height: 24,
-      },
-      shadowOpacity: 0.12, // 12%
-      shadowRadius: 60,
-      elevation: 4,
-    },
-  },
-};
-
-// Helper function to get shadow styles for a specific elevation
-export const getShadowStyle = (
-  elevation: number,
-  useSecondary = false,
-): ShadowConfig => {
-  const shadow = Shadows[elevation];
-  if (!shadow) {
-    throw new Error(
-      `Elevation ${elevation} is not defined. Available elevations: ${Object.keys(
-        Shadows,
-      ).join(', ')}`,
-    );
-  }
-  return useSecondary ? shadow.secondary : shadow.primary;
-};
-
-// Helper function to get both primary and secondary shadows for an elevation
-export const getElevationShadows = (elevation: number): ElevationShadow => {
-  const shadow = Shadows[elevation];
-  if (!shadow) {
-    throw new Error(
-      `Elevation ${elevation} is not defined. Available elevations: ${Object.keys(
-        Shadows,
-      ).join(', ')}`,
-    );
-  }
-  return shadow;
-};

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 <></>;
-}