@fadyshawky/react-native-magic 1.0.0

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

@@ -0,0 +1,287 @@
+import React, {
+  FC,
+  memo,
+  MutableRefObject,
+  Ref,
+  useCallback,
+  useMemo,
+  useState,
+} from 'react';
+import {
+  NativeSyntheticEvent,
+  Platform,
+  StyleSheet,
+  Text,
+  TextInput,
+  TextInputFocusEventData,
+  TextInputProps,
+  TextInputSubmitEditingEventData,
+  TextStyle,
+  TouchableOpacity,
+  View,
+  ViewStyle,
+} from 'react-native';
+import {
+  Colors,
+  PlatformColorsAndroid,
+  PlatformColorsIOS,
+} from '../../core/theme/colors';
+import {isIos} from '../../core/theme/commonConsts';
+import {CommonSizes} from '../../core/theme/commonSizes';
+import {CommonStyles} from '../../core/theme/commonStyles';
+import {platformMixedColor, platformNativeColor} from '../helpers/colorHelpers';
+import {localization} from '../localization/localization';
+
+interface IProps extends TextInputProps {
+  nextInputFocusRef?: MutableRefObject<any>;
+  inputRef?: Ref<any>;
+  containerStyle?: ViewStyle;
+  label?: string;
+  error?: string | null;
+  hint?: string;
+  autoComplete?:
+    | 'off'
+    | 'username'
+    | 'password'
+    | 'email'
+    | 'name'
+    | 'tel'
+    | 'street-address'
+    | 'postal-code'
+    | 'cc-number'
+    | 'cc-csc'
+    | 'cc-exp'
+    | 'cc-exp-month'
+    | 'cc-exp-year';
+  required?: boolean;
+  optional?: boolean;
+  inputContainerStyle?: ViewStyle;
+}
+
+export const PrimaryTextInput: FC<IProps> = memo(
+  ({
+    style = styles.input,
+    blurOnSubmit = true,
+    disableFullscreenUI = true,
+    enablesReturnKeyAutomatically = true,
+    underlineColorAndroid = Colors.transparent,
+    placeholderTextColor = platformNativeColor(
+      PlatformColorsIOS.placeholderText,
+      PlatformColorsAndroid.secondaryText,
+    ),
+    editable = true,
+    clearButtonMode = 'while-editing',
+    label,
+    error,
+    hint,
+    containerStyle,
+    inputRef,
+    nextInputFocusRef,
+    onTouchStart,
+    onFocus,
+    onBlur,
+    onSubmitEditing,
+    required,
+    optional,
+    ...props
+  }) => {
+    const [isFocused, setFocused] = useState<boolean>(false);
+
+    const onLocalFocus = useCallback(
+      (e: NativeSyntheticEvent<TextInputFocusEventData>) => {
+        setFocused(true);
+        onFocus && onFocus(e);
+      },
+      [onFocus, setFocused],
+    );
+
+    const onLocalBlur = useCallback(
+      (e: NativeSyntheticEvent<TextInputFocusEventData>) => {
+        setFocused(false);
+        onBlur && onBlur(e);
+      },
+      [onBlur, setFocused],
+    );
+
+    const inputContainerStyle = useMemo(() => {
+      return getInputContainerStyle(
+        isFocused,
+        error,
+        onTouchStart ? true : editable,
+      );
+    }, [isFocused, error, editable, onTouchStart]);
+
+    const onLocalSubmitEditing = useCallback(
+      (e: NativeSyntheticEvent<TextInputSubmitEditingEventData>) => {
+        onSubmitEditing && onSubmitEditing(e);
+        nextInputFocusRef &&
+          nextInputFocusRef.current &&
+          nextInputFocusRef.current.focus();
+      },
+      [nextInputFocusRef, onSubmitEditing],
+    );
+
+    const pointerEvents = useMemo(() => {
+      return onTouchStart ? 'none' : undefined;
+    }, [onTouchStart]);
+
+    return (
+      <View style={[styles.container, containerStyle]}>
+        <Label text={label} required={required} optional={optional} />
+        <TouchableOpacity
+          style={[inputContainerStyle, props.inputContainerStyle]}
+          onPress={onTouchStart}
+          disabled={!onTouchStart}>
+          <TextInput
+            disableFullscreenUI={true}
+            selectionColor={selectionColor}
+            {...props}
+            pointerEvents={pointerEvents}
+            ref={inputRef}
+            style={[styles.input, style]}
+            autoCapitalize="none"
+            autoComplete="off"
+          />
+        </TouchableOpacity>
+        <BottomText error={error} hint={hint} />
+      </View>
+    );
+  },
+);
+
+const Label: FC<{text?: string; required?: boolean; optional?: boolean}> = memo(
+  ({text, required, optional}) => {
+    if (text != null) {
+      return (
+        <Text style={styles.label} numberOfLines={1}>
+          {text +
+            (required
+              ? localization.common.required
+              : optional
+              ? localization.common.optional
+              : '')}
+        </Text>
+      );
+    } else {
+      return null;
+    }
+  },
+);
+
+const BottomText: FC<{error?: string | null; hint?: string}> = memo(
+  ({error, hint}) => {
+    if (error != null) {
+      return <Text style={styles.error}>{error}</Text>;
+    } else if (hint != null) {
+      return <Text style={styles.hint}>{hint}</Text>;
+    } else {
+      return null;
+    }
+  },
+);
+
+function getInputContainerStyle(
+  isFocused: boolean,
+  error?: string | null,
+  isEditable?: boolean,
+): ViewStyle {
+  if (isIos) {
+    return !isEditable ? styles.disabledInputContainer : styles.inputContainer;
+  } else {
+    if (isFocused) {
+      return styles.focusedInputContainer;
+    } else if (!isEditable) {
+      return styles.disabledInputContainer;
+    } else if (error) {
+      return styles.errorInputContainer;
+    } else {
+      return styles.inputContainer;
+    }
+  }
+}
+
+const selectionColor = platformNativeColor(
+  PlatformColorsIOS.systemBlue,
+  PlatformColorsAndroid.primary,
+);
+
+const commonInputContainer: TextStyle = {
+  flexDirection: 'row',
+  alignItems: 'center',
+  justifyContent: 'center',
+  minHeight: CommonSizes.spacing.extraLarge,
+  textAlignVertical: 'center',
+  textAlign: 'center',
+  backgroundColor: Colors.white,
+  borderRadius: CommonSizes.borderRadius.medium,
+  borderWidth: CommonSizes.borderWidth.small,
+  borderColor: Colors.gray,
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flexDirection: 'column',
+  } as ViewStyle,
+  input: {
+    ...CommonStyles.normalText,
+    flex: 1,
+    textAlignVertical: 'center',
+    paddingStart: CommonSizes.spacing.medium,
+    ...Platform.select({
+      android: {
+        paddingEnd: CommonSizes.spacing.medium,
+      },
+    }),
+  } as TextStyle,
+  inputContainer: {
+    ...commonInputContainer,
+    ...Platform.select({
+      ios: {
+        paddingEnd: CommonSizes.spacing.medium,
+      },
+    }),
+  } as TextStyle,
+  errorInputContainer: {
+    ...commonInputContainer,
+    ...Platform.select({
+      android: {
+        borderColor: Colors.red,
+      },
+    }),
+  } as TextStyle,
+  disabledInputContainer: {
+    ...commonInputContainer,
+    ...Platform.select({
+      android: {
+        backgroundColor: Colors.gray,
+        borderColor: Colors.gray,
+      },
+    }),
+  } as TextStyle,
+  focusedInputContainer: {
+    ...commonInputContainer,
+    ...Platform.select({
+      android: {
+        borderColor: Colors.darkGray,
+      },
+    }),
+  } as TextStyle,
+  label: {
+    ...CommonStyles.body_regular,
+    paddingBottom: CommonSizes.spacing.extraSmall,
+  } as TextStyle,
+  hint: {
+    ...CommonStyles.normalText,
+    fontWeight: '200',
+    fontSize: CommonSizes.font.small,
+    lineHeight: CommonSizes.lineHeight.small,
+    paddingTop: CommonSizes.spacing.extraSmall,
+  } as TextStyle,
+  error: {
+    ...CommonStyles.normalText,
+    color: platformMixedColor(PlatformColorsIOS.systemRed, Colors.red),
+    fontSize: CommonSizes.font.small,
+    lineHeight: CommonSizes.lineHeight.small,
+    paddingTop: CommonSizes.spacing.extraSmall,
+  } as TextStyle,
+});

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

@@ -0,0 +1,73 @@
+import React, {FC, FunctionComponent, memo, useCallback, useMemo} from 'react';
+import {StyleSheet, Text, TextStyle, ViewStyle} from 'react-native';
+import {RadioIcon} from './RadioIcon';
+import {TouchablePlatform} from './TouchablePlatform';
+import {CommonSizes} from '../../core/theme/commonSizes';
+import {CommonStyles} from '../../core/theme/commonStyles';
+import {
+  PlatformColorsAndroid,
+  PlatformColorsIOS,
+} from '../../core/theme/colors';
+import {platformNativeColor} from '../helpers/colorHelpers';
+
+interface IIconComponentProps {
+  isSelected: boolean;
+  disabled?: boolean;
+}
+
+interface IProps extends IIconComponentProps {
+  id: string;
+  label: string;
+  onPress: (id: string, nextValue: boolean) => void;
+  IconComponent?: FunctionComponent<IIconComponentProps>;
+}
+
+export const RadioButton: FC<IProps> = memo(
+  ({isSelected, label, onPress, disabled, IconComponent = RadioIcon, id}) => {
+    const onButtonPress = useCallback(() => {
+      onPress(id, !isSelected);
+    }, [onPress, isSelected, id]);
+
+    const labelStyle = useMemo(() => {
+      return disabled ? styles.labelDisabled : styles.label;
+    }, [disabled]);
+
+    return (
+      <TouchablePlatform
+        style={styles.container}
+        onPress={onButtonPress}
+        disabled={disabled}>
+        {IconComponent && (
+          <IconComponent disabled={disabled} isSelected={isSelected} />
+        )}
+        <Text style={labelStyle} numberOfLines={1}>
+          {label}
+        </Text>
+      </TouchablePlatform>
+    );
+  },
+);
+
+const commonLabel: TextStyle = {
+  ...CommonStyles.normalText,
+  flex: 1,
+  paddingStart: CommonSizes.spacing.extraSmall,
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flexDirection: 'row',
+    padding: CommonSizes.spacing.medium,
+    alignItems: 'center',
+  } as ViewStyle,
+  label: {
+    ...commonLabel,
+  } as TextStyle,
+  labelDisabled: {
+    ...commonLabel,
+    color: platformNativeColor(
+      PlatformColorsIOS.systemFill,
+      PlatformColorsAndroid.secondaryText,
+    ),
+  } as TextStyle,
+});

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

@@ -0,0 +1,63 @@
+import React, {FC, memo, useMemo} from 'react';
+import {StyleSheet, View, ViewStyle} from 'react-native';
+import {
+  Colors,
+  PlatformColorsAndroid,
+  PlatformColorsIOS,
+} from '../../core/theme/colors';
+import {platformMixedColor, platformNativeColor} from '../helpers/colorHelpers';
+
+interface IProps {
+  isSelected: boolean;
+  disabled?: boolean;
+}
+
+export const RadioIcon: FC<IProps> = memo(({isSelected, disabled}) => {
+  const outerCircleStyle = useMemo(() => {
+    return disabled
+      ? styles.outerCircle
+      : isSelected
+      ? styles.outerCircleSelected
+      : styles.outerCircle;
+  }, [isSelected, disabled]);
+
+  return (
+    <View style={outerCircleStyle}>
+      {isSelected && <View style={styles.innerCircle} />}
+    </View>
+  );
+});
+
+const commonOuterCircle: ViewStyle = {
+  width: 16,
+  height: 16,
+  borderRadius: 8,
+  borderWidth: 2,
+  justifyContent: 'center',
+  alignItems: 'center',
+  backgroundColor: Colors.transparent,
+};
+
+const commonInnerCircle: ViewStyle = {
+  width: 8,
+  height: 8,
+  borderRadius: 4,
+};
+
+const styles = StyleSheet.create({
+  outerCircle: {
+    ...commonOuterCircle,
+    borderColor: platformMixedColor(PlatformColorsIOS.systemFill, Colors.black),
+  } as ViewStyle,
+  outerCircleSelected: {
+    ...commonOuterCircle,
+    borderColor: platformMixedColor(PlatformColorsIOS.systemBlue, Colors.black),
+  } as ViewStyle,
+  innerCircle: {
+    ...commonInnerCircle,
+    backgroundColor: platformNativeColor(
+      PlatformColorsIOS.systemBlue,
+      PlatformColorsAndroid.primary,
+    ),
+  } as ViewStyle,
+});

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

@@ -0,0 +1,39 @@
+import React, {FC, useMemo} from 'react';
+import {StyleSheet, View, ViewStyle} from 'react-native';
+import {
+  PlatformColorsAndroid,
+  PlatformColorsIOS,
+} from '../../core/theme/colors';
+import {hairlineWidth} from '../../core/theme/commonConsts';
+import {CommonSizes} from '../../core/theme/commonSizes';
+import {platformNativeColor} from '../helpers/colorHelpers';
+
+interface IProps {
+  isFull?: boolean;
+}
+
+export const Separator: FC<IProps> = ({isFull = true}) => {
+  const containerStyle = useMemo(() => {
+    return isFull ? styles.fullContainer : styles.container;
+  }, [isFull]);
+
+  return <View style={containerStyle} />;
+};
+
+const sharedStyle: ViewStyle = {
+  height: hairlineWidth,
+  backgroundColor: platformNativeColor(
+    PlatformColorsIOS.separator,
+    PlatformColorsAndroid.divider,
+  ),
+};
+
+const styles = StyleSheet.create({
+  container: {
+    ...sharedStyle,
+    marginHorizontal: CommonSizes.spacing.medium,
+  } as ViewStyle,
+  fullContainer: {
+    ...sharedStyle,
+  } as ViewStyle,
+});

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

@@ -0,0 +1,25 @@
+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/components/TouchablePlatform.tsx

@@ -0,0 +1,70 @@
+import React, {FC, memo, useCallback, useMemo} from 'react';
+import {
+  OpaqueColorValue,
+  Pressable,
+  PressableAndroidRippleConfig,
+  PressableProps,
+  PressableStateCallbackType,
+  ViewStyle,
+} from 'react-native';
+import {Colors, PlatformColorsIOS} from '../../core/theme/colors';
+import {isAndroid} from '../../core/theme/commonConsts';
+import {platformMixedColor} from '../helpers/colorHelpers';
+
+interface IProps extends PressableProps {
+  style?: ViewStyle | ViewStyle[];
+  highlightColor?: string | null | OpaqueColorValue;
+}
+
+export const TouchablePlatform: FC<IProps> = memo(
+  ({
+    children,
+    highlightColor = platformMixedColor(
+      PlatformColorsIOS.secondarySystemFill,
+      Colors.white,
+    ),
+    style,
+    ...props
+  }) => {
+    const pressableStyle = useCallback(
+      (state: PressableStateCallbackType) => {
+        if (isAndroid) {
+          return style;
+        } else {
+          return [
+            style,
+            state.pressed &&
+              ({
+                backgroundColor: highlightColor,
+              } as ViewStyle),
+          ];
+        }
+      },
+      [style, highlightColor],
+    );
+
+    /**
+     * Android can't use platform native colors
+     */
+    const rippleConfig = useMemo(() => {
+      return highlightColor != null
+        ? {...androidRippleConfig, color: highlightColor}
+        : androidRippleConfig;
+    }, [highlightColor]);
+
+    return (
+      <Pressable
+        android_disableSound={false}
+        android_ripple={rippleConfig}
+        {...props}
+        style={pressableStyle}>
+        {children}
+      </Pressable>
+    );
+  },
+);
+
+const androidRippleConfig: PressableAndroidRippleConfig = {
+  color: Colors.white,
+  borderless: false,
+};

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

@@ -0,0 +1,56 @@
+import React, {FC, memo} from 'react';
+import {
+  StyleSheet,
+  Text,
+  TextStyle,
+  TouchableOpacity,
+  View,
+} from 'react-native';
+import {
+  PlatformColorsAndroid,
+  PlatformColorsIOS,
+} from '../../core/theme/colors';
+import {CommonSizes} from '../../core/theme/commonSizes';
+import {CommonStyles} from '../../core/theme/commonStyles';
+import {platformNativeColor} from '../helpers/colorHelpers';
+import {localization} from '../localization/localization';
+
+interface IProps {
+  onPress?: () => void;
+  errorText?: string | null;
+}
+
+export const TryAgain: FC<IProps> = memo(
+  ({onPress, errorText = localization.errors.unknownErrorHasOccurred}) => {
+    return (
+      <View
+        style={{...CommonStyles.flexCenter, backgroundColor: 'transparent'}}>
+        <Text style={styles.title}>{errorText}</Text>
+        {onPress != null && (
+          <TouchableOpacity onPress={onPress}>
+            <Text style={styles.description}>
+              {localization.errors.tryAgain}
+            </Text>
+          </TouchableOpacity>
+        )}
+      </View>
+    );
+  },
+);
+
+const styles = StyleSheet.create({
+  title: {
+    ...CommonStyles.normalText,
+    textAlign: 'center',
+    marginBottom: CommonSizes.spacing.extraSmall,
+  } as TextStyle,
+  description: {
+    ...CommonStyles.normalText,
+    color: platformNativeColor(
+      PlatformColorsIOS.systemBlue,
+      PlatformColorsAndroid.primary,
+    ),
+    textAlign: 'center',
+    textDecorationLine: 'underline',
+  } as TextStyle,
+});

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

@@ -0,0 +1,29 @@
+export function getItemIndex<T, V>(
+  data: T[],
+  comparisonParam: keyof T,
+  comparisonValue: V,
+) {
+  const index = data.findIndex(
+    item => item[comparisonParam] == comparisonValue,
+  );
+
+  const itemExists = index > -1;
+
+  return {index, itemExists};
+}
+
+export function filterBySearch<T>(
+  data: T[],
+  param: keyof T,
+  searchText: string,
+): T[] {
+  if (searchText != '') {
+    const lowerCaseSearch = searchText.toLowerCase();
+
+    return data.filter(item =>
+      (item[param] as string).toLowerCase().includes(lowerCaseSearch),
+    );
+  } else {
+    return data;
+  }
+}

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

@@ -0,0 +1,16 @@
+export const DEFAULT_PAGE_SIZE = 20;
+
+export function calculatePage(
+  count: number,
+  pageSize: number = DEFAULT_PAGE_SIZE,
+): number {
+  if (count < 0) {
+    throw new Error("Count can't be negative");
+  }
+
+  if (pageSize < 1) {
+    throw new Error("Page size can't be 0 or negative");
+  }
+
+  return Math.trunc(count / pageSize) + 1;
+}

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

@@ -0,0 +1,34 @@
+import {isIos} from '../../core/theme/commonConsts';
+import {
+  Colors,
+  PlatformColorsAndroid,
+  PlatformColorsIOS,
+} from '../../core/theme/colors';
+
+export function platformNativeColor(
+  iosColor?: PlatformColorsIOS,
+  androidColor?: PlatformColorsAndroid,
+) {
+  const selectedColor = isIos ? iosColor : androidColor;
+
+  return selectedColor != null ? 'black' : undefined;
+}
+
+export function platformLocalColor(iosColor?: Colors, androidColor?: Colors) {
+  return isIos ? iosColor : androidColor;
+}
+
+export function platformMixedColor(
+  iosColor?: Colors | PlatformColorsIOS,
+  androidColor?: Colors | PlatformColorsAndroid,
+) {
+  const selectedColor = iosColor;
+
+  if (selectedColor != null) {
+    return Object.values(Colors).includes(selectedColor as Colors)
+      ? (selectedColor as Colors)
+      : 'black';
+  } else {
+    return undefined;
+  }
+}

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

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