@fadyshawky/react-native-magic 1.0.8 → 1.0.9

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

@@ -16,11 +16,13 @@ import {
   IIconPlatformProps,
   TouchablePlatformProps,
 } from '../../../types';
-import {Colors, NewColors} from '../../core/theme/colors';
-import {CommonSizes} from '../../core/theme/commonSizes';
-import {CommonStyles} from '../../core/theme/commonStyles';
+import {useTheme} from '../../core/theme/ThemeProvider';
+import {BorderRadius, Spacing} from '../../core/theme/commonSizes';
+import {createThemedStyles} from '../../core/theme/commonStyles';
+import {Theme} from '../../core/theme/types';
 import {IconPlatform} from './IconPlatform';
 import {TouchablePlatform} from './TouchablePlatform';
+import {scaleHeight, scaleSpacing} from '../../core/theme/scaling';
 
 interface IProps extends TouchablePlatformProps {
   label: string;
@@ -46,16 +48,17 @@ export const PrimaryButton: FC<IProps> = memo(
     platformIconProps,
     ...props
   }) => {
+    const {theme} = useTheme();
     const styles = useMemo(() => {
-      return getStyles(type, rounded, props.disabled);
-    }, [type, rounded, props.disabled]);
+      return getStyles(theme, type, rounded, props.disabled);
+    }, [theme, type, rounded, props.disabled]);
 
     const content = useMemo(() => {
       if (isLoading) {
         return (
           <ActivityIndicator
             animating={true}
-            color={activityIndicatorColor}
+            color={theme.colors.backgroundOpacity}
             size={'small'}
           />
         );
@@ -82,12 +85,13 @@ export const PrimaryButton: FC<IProps> = memo(
       platformIconProps,
       styles.icon,
       styles.label,
+      theme,
     ]);
 
     return (
       <TouchablePlatform
         style={[styles.button, style] as ViewStyle[]}
-        highlightColor={'rgba(0,0,0,0.05)'}
+        highlightColor={theme.colors.mutedLavender30}
         {...props}>
         {content}
       </TouchablePlatform>
@@ -95,8 +99,6 @@ export const PrimaryButton: FC<IProps> = memo(
   },
 );
 
-const activityIndicatorColor = Colors.gray_disabled;
-
 const ButtonIcon: FC<Pick<IProps, 'icon' | 'iconStyle' | 'platformIconProps'>> =
   memo(props => {
     if (props.icon != null) {
@@ -109,59 +111,68 @@ const ButtonIcon: FC<Pick<IProps, 'icon' | 'iconStyle' | 'platformIconProps'>> =
   });
 
 function getStyles(
+  theme: Theme,
   type: ButtonType,
   rounded?: boolean,
   disabled?: boolean | null,
 ): IStyles {
+  const baseStyles = createButtonStyles(theme);
+
   switch (type) {
     case ButtonType.solid:
       return mergeStylesWithDisabled(
-        rounded ? smallSolidStyles : solidStyles,
+        theme,
+        rounded ? createSmallSolidStyles(theme) : baseStyles.solid,
         disabled,
       );
     case ButtonType.outline:
       return mergeStylesWithDisabled(
-        rounded ? smallOutlineStyles : outlineStyles,
+        theme,
+        rounded ? createSmallOutlineStyles(theme) : baseStyles.outline,
         disabled,
         true,
       );
     case ButtonType.outlineNegative:
       return mergeStylesWithDisabled(
-        rounded ? smallOutlineStyles : outlineNegativeStyles,
+        theme,
+        rounded ? createSmallOutlineStyles(theme) : baseStyles.outlineNegative,
         disabled,
         true,
       );
     case ButtonType.borderless:
-      return borderlessStyles;
+      return baseStyles.borderless;
     default:
       throw new Error('Unknown button type: ' + type);
   }
 }
 
 function mergeStylesWithDisabled(
+  theme: Theme,
   styles: IStyles,
   disabled?: boolean | null,
   outline?: boolean,
 ): IStyles {
-  return disabled
-    ? {
-        ...styles,
-        button: {
-          ...styles.button,
-          backgroundColor: Colors.gray_disabled,
-          borderColor: outline ? Colors.teal100 : styles.button.borderColor,
-          elevation: 0,
-        } as ViewStyle,
-        icon: {
-          ...styles.icon,
-          tintColor: Colors.gray,
-        } as ImageStyle,
-        label: {
-          ...styles.label,
-          color: Colors.black,
-        } as TextStyle,
-      }
-    : styles;
+  if (!disabled) return styles;
+
+  return {
+    ...styles,
+    button: {
+      ...styles.button,
+      backgroundColor: theme.colors.mutedLavender30,
+      borderColor: outline
+        ? theme.colors.mutedLavender
+        : styles.button.borderColor,
+      elevation: 0,
+    } as ViewStyle,
+    icon: {
+      ...styles.icon,
+      tintColor: theme.colors.mutedLavender,
+    } as ImageStyle,
+    label: {
+      ...styles.label,
+      color: theme.colors.backgroundOpacity,
+    } as TextStyle,
+  };
 }
 
 interface IStyles {
@@ -170,136 +181,139 @@ interface IStyles {
   label: TextStyle;
 }
 
-const commonButtonStyle: ViewStyle = {
-  padding: CommonSizes.spacing.medium,
-  alignItems: 'center',
-  justifyContent: 'center',
-  borderRadius: CommonSizes.borderRadius.extraLargePlus,
-  flexDirection: 'row',
-  backgroundColor: Colors.transparent,
-  width: '100%',
-};
-
-const commonLabelStyle: TextStyle = {
-  ...CommonStyles.h4_bold,
-  color: Colors.white,
-  textAlign: 'center',
-  textAlignVertical: 'center',
-  ...Platform.select({
-    android: {
-      textTransform: 'uppercase',
-    } as TextStyle,
-  }),
-};
+function createButtonStyles(theme: Theme) {
+  const commonButtonStyle: ViewStyle = {
+    height: scaleHeight(97),
+    alignItems: 'center',
+    justifyContent: 'center',
+    borderRadius: 12,
+    flexDirection: 'row',
+    backgroundColor: 'transparent',
+    width: '100%',
+  };
 
-const commonIcon: ImageStyle = {
-  width: 22,
-  height: 22,
-  marginHorizontal: CommonSizes.spacing.extraSmall,
-  resizeMode: 'contain',
-  tintColor: Colors.blue100,
-};
+  const commonLabelStyle: TextStyle = {
+    ...createThemedStyles(theme).h4_bold,
+    color: theme.colors.white,
+    textAlign: 'center',
+    textAlignVertical: 'center',
+    ...Platform.select({
+      android: {
+        textTransform: 'uppercase',
+      } as TextStyle,
+    }),
+  };
 
-const solidStyles = StyleSheet.create({
-  button: {
-    ...commonButtonStyle,
-    backgroundColor: NewColors.blueNormalActive,
-  } as ViewStyle,
-  label: {
-    ...commonLabelStyle,
-  } as TextStyle,
-  icon: {
-    ...commonIcon,
-    tintColor: Colors.white,
-  },
-});
+  const commonIcon: ImageStyle = {
+    width: 22,
+    height: 22,
+    marginHorizontal: scaleSpacing(12),
+    resizeMode: 'contain',
+    tintColor: theme.colors.indigoBlue,
+  };
 
-const outlineStyles = StyleSheet.create({
-  button: {
-    ...commonButtonStyle,
-    borderColor: NewColors.blueNormalActive,
-    borderWidth: 2,
-  } as ViewStyle,
-  label: {
-    ...commonLabelStyle,
-    color: NewColors.blueNormalActive,
-  } as TextStyle,
-  icon: {
-    ...commonIcon,
-    tintColor: Colors.blue100,
-  } as ImageStyle,
-});
+  return {
+    solid: StyleSheet.create({
+      button: {
+        ...commonButtonStyle,
+        backgroundColor: theme.colors.indigoBlue,
+      } as ViewStyle,
+      label: theme.text.button,
+      icon: {
+        ...commonIcon,
+        tintColor: theme.colors.white,
+      },
+    }),
 
-const outlineNegativeStyles = StyleSheet.create({
-  button: {
-    ...commonButtonStyle,
-    borderColor: Colors.red,
-    borderWidth: 2,
-  } as ViewStyle,
-  label: {
-    ...commonLabelStyle,
-    color: Colors.red,
-  } as TextStyle,
-  icon: {
-    ...commonIcon,
-    tintColor: Colors.red,
-  } as ImageStyle,
-});
+    outline: StyleSheet.create({
+      button: {
+        ...commonButtonStyle,
+        borderColor: theme.colors.indigoBlue,
+        borderWidth: 2,
+      } as ViewStyle,
+      label: {
+        ...theme.text.button,
+      } as TextStyle,
+      icon: commonIcon,
+    }),
 
-const borderlessStyles = StyleSheet.create({
-  button: {
-    ...commonButtonStyle,
-    borderRadius: undefined,
-    width: undefined,
-    padding: undefined,
-  } as ViewStyle,
-  label: {
-    ...commonLabelStyle,
-    color: NewColors.blueNormalActive,
-    textDecorationLine: 'underline',
-  } as TextStyle,
-  icon: {
-    ...commonIcon,
-    tintColor: Colors.blue100,
-  } as ImageStyle,
-});
+    outlineNegative: StyleSheet.create({
+      button: {
+        ...commonButtonStyle,
+        borderColor: theme.colors.mutedLavender,
+        borderWidth: 2,
+      } as ViewStyle,
+      label: {
+        ...theme.text.button,
+      } as TextStyle,
+      icon: {
+        ...commonIcon,
+        tintColor: theme.colors.mutedLavender,
+      },
+    }),
 
-const roundedButtonStyle: ViewStyle = {
-  paddingHorizontal: CommonSizes.spacing.medium,
-  paddingVertical: CommonSizes.spacing.extraSmall,
-  alignItems: 'center',
-  justifyContent: 'center',
-  borderRadius: CommonSizes.borderRadius.extraLarge,
-  flexDirection: 'row',
-  backgroundColor: Colors.transparent,
-  width: 175,
-};
+    borderless: StyleSheet.create({
+      button: {
+        ...commonButtonStyle,
+        borderRadius: undefined,
+        width: undefined,
+        padding: undefined,
+      } as ViewStyle,
+      label: {
+        ...theme.text.hyperlink,
+      } as TextStyle,
+      icon: commonIcon,
+    }),
+  };
+}
 
-const smallSolidStyles = StyleSheet.create({
-  button: {
-    ...roundedButtonStyle,
-    backgroundColor: NewColors.blueNormalActive,
-  } as ViewStyle,
-  label: {
-    ...CommonStyles.normalText,
-  } as TextStyle,
-  icon: {
-    ...commonIcon,
-  },
-});
+function createSmallSolidStyles(theme: Theme): IStyles {
+  const commonStyles = createThemedStyles(theme);
+  return StyleSheet.create({
+    button: {
+      padding: Spacing.medium,
+      alignItems: 'center',
+      justifyContent: 'center',
+      borderRadius: BorderRadius.extraLarge,
+      flexDirection: 'row',
+      backgroundColor: theme.colors.indigoBlue,
+      // width: 175,
+    } as ViewStyle,
+    label: {
+      ...theme.text.button,
+    } as TextStyle,
+    icon: {
+      width: 22,
+      height: 22,
+      resizeMode: 'contain',
+      tintColor: theme.colors.white,
+    } as ImageStyle,
+  });
+}
 
-const smallOutlineStyles = StyleSheet.create({
-  button: {
-    ...roundedButtonStyle,
-    borderColor: Colors.blue100,
-    borderWidth: 1,
-  } as ViewStyle,
-  label: {
-    ...CommonStyles.normalText,
-    color: Colors.blue100,
-  } as TextStyle,
-  icon: {
-    ...commonIcon,
-    tintColor: Colors.blue100,
-  } as ImageStyle,
-});
+function createSmallOutlineStyles(theme: Theme): IStyles {
+  const commonStyles = createThemedStyles(theme);
+  return StyleSheet.create({
+    button: {
+      padding: Spacing.medium,
+      alignItems: 'center',
+      justifyContent: 'center',
+      borderRadius: BorderRadius.extraLarge,
+      flexDirection: 'row',
+      backgroundColor: 'transparent',
+      width: 175,
+      borderColor: theme.colors.indigoBlue,
+      borderWidth: 1,
+    } as ViewStyle,
+    label: {
+      ...commonStyles.normalText,
+      color: theme.colors.indigoBlue,
+    } as TextStyle,
+    icon: {
+      width: 22,
+      height: 22,
+      resizeMode: 'contain',
+      tintColor: theme.colors.indigoBlue,
+    } as ImageStyle,
+  });
+}

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

@@ -0,0 +1,42 @@
+import React from 'react';
+import {Text, TextProps, StyleSheet, TextStyle} from 'react-native';
+import {useRTL} from '../localization/LocalizationProvider';
+
+interface RTLAwareTextProps extends TextProps {
+  style?: TextStyle | TextStyle[];
+  children: React.ReactNode;
+}
+
+/**
+ * A Text component that automatically adjusts its layout for RTL languages
+ * It flips text alignment and other text-specific properties
+ */
+export const RTLAwareText: React.FC<RTLAwareTextProps> = ({
+  style,
+  children,
+  ...props
+}) => {
+  const isRTL = useRTL();
+
+  // Convert style array to a single object
+  const flattenedStyle = StyleSheet.flatten(style || {});
+
+  // Create RTL-aware styles
+  const rtlStyle: TextStyle = {};
+
+  // Handle text alignment
+  if (flattenedStyle.textAlign === 'left') {
+    rtlStyle.textAlign = isRTL ? 'right' : 'left';
+  } else if (flattenedStyle.textAlign === 'right') {
+    rtlStyle.textAlign = isRTL ? 'left' : 'right';
+  }
+
+  // Handle writing direction
+  rtlStyle.writingDirection = isRTL ? 'rtl' : 'ltr';
+
+  return (
+    <Text style={[style, rtlStyle]} {...props}>
+      {children}
+    </Text>
+  );
+};

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

@@ -0,0 +1,179 @@
+import React from 'react';
+import {
+  View,
+  ViewProps,
+  StyleSheet,
+  TextStyle,
+  ViewStyle,
+  FlexStyle,
+  TouchableOpacity,
+  TouchableOpacityProps,
+} from 'react-native';
+import {useRTL} from '../localization/LocalizationProvider';
+
+interface RTLAwareViewProps extends ViewProps {
+  style?: ViewStyle | ViewStyle[];
+  children: React.ReactNode;
+}
+
+interface RTLAwareTouchableOpacityProps extends TouchableOpacityProps {
+  style?: ViewStyle | ViewStyle[];
+  children: React.ReactNode;
+}
+
+/**
+ * A View component that automatically adjusts its layout for RTL languages
+ * It flips certain style properties like flexDirection, textAlign, etc.
+ */
+export const RTLAwareView: React.FC<RTLAwareViewProps> = ({
+  style,
+  children,
+  ...props
+}) => {
+  const isRTL = useRTL();
+
+  // Convert style array to a single object
+  const flattenedStyle = StyleSheet.flatten(style || {});
+
+  // Create RTL-aware styles
+  const rtlStyle: ViewStyle = {};
+
+  // Handle flexDirection
+  if (flattenedStyle.flexDirection === 'row') {
+    rtlStyle.flexDirection = isRTL ? 'row-reverse' : 'row';
+  } else if (flattenedStyle.flexDirection === 'row-reverse') {
+    rtlStyle.flexDirection = isRTL ? 'row' : 'row-reverse';
+  }
+
+  // Handle text alignment
+  if ((flattenedStyle as TextStyle).textAlign === 'left') {
+    (rtlStyle as TextStyle).textAlign = isRTL ? 'right' : 'left';
+  } else if ((flattenedStyle as TextStyle).textAlign === 'right') {
+    (rtlStyle as TextStyle).textAlign = isRTL ? 'left' : 'right';
+  }
+
+  // Handle padding and margin
+  if (flattenedStyle.paddingStart !== undefined) {
+    rtlStyle.paddingLeft = isRTL ? undefined : flattenedStyle.paddingStart;
+    rtlStyle.paddingRight = isRTL ? flattenedStyle.paddingStart : undefined;
+    rtlStyle.paddingStart = undefined;
+  }
+
+  if (flattenedStyle.paddingEnd !== undefined) {
+    rtlStyle.paddingRight = isRTL ? undefined : flattenedStyle.paddingEnd;
+    rtlStyle.paddingLeft = isRTL ? flattenedStyle.paddingEnd : undefined;
+    rtlStyle.paddingEnd = undefined;
+  }
+
+  if (flattenedStyle.marginStart !== undefined) {
+    rtlStyle.marginLeft = isRTL ? undefined : flattenedStyle.marginStart;
+    rtlStyle.marginRight = isRTL ? flattenedStyle.marginStart : undefined;
+    rtlStyle.marginStart = undefined;
+  }
+
+  if (flattenedStyle.marginEnd !== undefined) {
+    rtlStyle.marginRight = isRTL ? undefined : flattenedStyle.marginEnd;
+    rtlStyle.marginLeft = isRTL ? flattenedStyle.marginEnd : undefined;
+    rtlStyle.marginEnd = undefined;
+  }
+
+  return (
+    <View style={[style, rtlStyle]} {...props}>
+      {children}
+    </View>
+  );
+};
+
+export const RTLAwareTouchableOpacity: React.FC<
+  RTLAwareTouchableOpacityProps
+> = ({style, children, ...props}) => {
+  const isRTL = useRTL();
+
+  // Convert style array to a single object
+  const flattenedStyle = StyleSheet.flatten(style || {});
+
+  // Create RTL-aware styles
+  const rtlStyle: ViewStyle = {};
+
+  // Handle flexDirection
+  if (flattenedStyle.flexDirection === 'row') {
+    rtlStyle.flexDirection = isRTL ? 'row-reverse' : 'row';
+  } else if (flattenedStyle.flexDirection === 'row-reverse') {
+    rtlStyle.flexDirection = isRTL ? 'row' : 'row-reverse';
+  }
+
+  // Handle text alignment
+  if ((flattenedStyle as TextStyle).textAlign === 'left') {
+    (rtlStyle as TextStyle).textAlign = isRTL ? 'right' : 'left';
+  } else if ((flattenedStyle as TextStyle).textAlign === 'right') {
+    (rtlStyle as TextStyle).textAlign = isRTL ? 'left' : 'right';
+  }
+
+  // Handle padding and margin
+  if (flattenedStyle.paddingStart !== undefined) {
+    rtlStyle.paddingLeft = isRTL ? undefined : flattenedStyle.paddingStart;
+    rtlStyle.paddingRight = isRTL ? flattenedStyle.paddingStart : undefined;
+    rtlStyle.paddingStart = undefined;
+  }
+
+  if (flattenedStyle.paddingEnd !== undefined) {
+    rtlStyle.paddingRight = isRTL ? undefined : flattenedStyle.paddingEnd;
+    rtlStyle.paddingLeft = isRTL ? flattenedStyle.paddingEnd : undefined;
+    rtlStyle.paddingEnd = undefined;
+  }
+
+  if (flattenedStyle.marginStart !== undefined) {
+    rtlStyle.marginLeft = isRTL ? undefined : flattenedStyle.marginStart;
+    rtlStyle.marginRight = isRTL ? flattenedStyle.marginStart : undefined;
+    rtlStyle.marginStart = undefined;
+  }
+
+  if (flattenedStyle.marginEnd !== undefined) {
+    rtlStyle.marginRight = isRTL ? undefined : flattenedStyle.marginEnd;
+    rtlStyle.marginLeft = isRTL ? flattenedStyle.marginEnd : undefined;
+    rtlStyle.marginEnd = undefined;
+  }
+
+  return (
+    <TouchableOpacity style={[style, rtlStyle]} {...props}>
+      {children}
+    </TouchableOpacity>
+  );
+};
+
+/**
+ * A Text component that automatically adjusts its layout for RTL languages
+ */
+export const rtlStyles = (isRTL: boolean) => ({
+  // Text alignment
+  textLeft: {
+    textAlign: isRTL ? 'right' : 'left',
+  } as TextStyle,
+  textRight: {
+    textAlign: isRTL ? 'left' : 'right',
+  } as TextStyle,
+
+  // Flex direction
+  row: {
+    flexDirection: isRTL ? 'row-reverse' : 'row',
+  } as FlexStyle,
+  rowReverse: {
+    flexDirection: isRTL ? 'row' : 'row-reverse',
+  } as FlexStyle,
+
+  // Alignment
+  alignStart: {
+    alignItems: isRTL ? 'flex-end' : 'flex-start',
+  } as FlexStyle,
+  alignEnd: {
+    alignItems: isRTL ? 'flex-start' : 'flex-end',
+  } as FlexStyle,
+
+  // Justify content
+  justifyStart: {
+    justifyContent: isRTL ? 'flex-end' : 'flex-start',
+  } as FlexStyle,
+  justifyEnd: {
+    justifyContent: isRTL ? 'flex-start' : 'flex-end',
+  } as FlexStyle,
+});

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

@@ -4,7 +4,6 @@ import {RadioIcon} from './RadioIcon';
 import {TouchablePlatform} from './TouchablePlatform';
 import {CommonSizes} from '../../core/theme/commonSizes';
 import {CommonStyles} from '../../core/theme/commonStyles';
-import {Colors} from '../../core/theme/colors';
 
 interface IIconComponentProps {
   isSelected: boolean;
@@ -31,7 +30,7 @@ export const RadioButton: FC<IProps> = memo(
     return (
       <TouchablePlatform
         style={styles.container}
-        onPress={onButtonPress}
+        onPressIn={onButtonPress}
         disabled={disabled}>
         {IconComponent && (
           <IconComponent disabled={disabled} isSelected={isSelected} />
@@ -61,6 +60,5 @@ const styles = StyleSheet.create({
   } as TextStyle,
   labelDisabled: {
     ...commonLabel,
-    color: Colors.gray,
   } as TextStyle,
 });

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, NewColors} from '../../core/theme/colors';
+import {NewColors} from '../../core/theme/colors';
 
 interface IProps {
   isSelected: boolean;
@@ -30,7 +30,6 @@ const commonOuterCircle: ViewStyle = {
   borderWidth: 2,
   justifyContent: 'center',
   alignItems: 'center',
-  backgroundColor: Colors.transparent,
 };
 
 const commonInnerCircle: ViewStyle = {