@fadyshawky/react-native-magic 1.0.7 → 1.0.9

package/template/src/core/theme/commonStyles.ts

@@ -5,224 +5,281 @@ import {
   TextStyle,
   ViewStyle,
 } from 'react-native';
-import {Colors} from './colors';
-import {CommonSizes} from './commonSizes';
+import {Theme} from './types';
+import {FontSizes, LineHeight, Spacing} from './commonSizes';
 import {Fonts} from './fonts';
 
 export const screenComponentWidth = Dimensions.get('screen').width - 60;
 export const screenWidth = Dimensions.get('screen').width;
 export const screenHeight = Dimensions.get('screen').height;
+
 export function justifyWidth(componentWidth: number) {
   return (componentWidth / 2048) * screenWidth;
 }
-export function justifyHeight(componentHeigght: number) {
-  return (componentHeigght / 2048) * screenHeight;
+
+export function justifyHeight(componentHeight: number) {
+  return (componentHeight / 2048) * screenHeight;
 }
-export const CommonStyles = StyleSheet.create({
-  flex1: {
-    flex: 1,
-    backgroundColor: Colors.background,
-  } as ViewStyle,
-  flex1Transparent: {
-    flex: 1,
-    backgroundColor: 'transparent',
-  } as ViewStyle,
-  flex1Padding: {
-    flex: 1,
-    paddingHorizontal: CommonSizes.spacing.large,
-  } as ViewStyle,
-  flex1PaddingTransparent: {
-    flex: 1,
-    paddingHorizontal: CommonSizes.spacing.large,
-    backgroundColor: 'transparent',
-  } as ViewStyle,
-  flexCenter: {
-    flex: 1,
-    alignItems: 'center',
-    justifyContent: 'center',
-    backgroundColor: Colors.background,
-  } as ViewStyle,
-  flexColumnCenterStretch: {
-    flex: 1,
-    flexDirection: 'column',
-    alignItems: 'stretch',
-    justifyContent: 'flex-start',
-    backgroundColor: Colors.background,
-  } as ViewStyle,
-  listContentContainer: {
-    flexGrow: 1,
-    paddingHorizontal: CommonSizes.spacing.large,
-    paddingVertical: CommonSizes.spacing.medium,
-  } as ViewStyle,
-  rowCenter: {
-    flexDirection: 'row',
-    alignItems: 'center',
-  } as ViewStyle,
-  columnAlignStart: {
-    flexDirection: 'column',
-    alignItems: 'flex-start',
-  } as ViewStyle,
-  shadow: {
-    backgroundColor: Colors.white,
-    shadowColor: '#2D9CDB',
-    ...Platform.select({
-      ios: {
-        shadowOffset: {
-          width: 0,
-          height: 2,
-        },
-        shadowOpacity: 0.23,
-        shadowRadius: 2.62,
-      } as ViewStyle,
-      android: {
-        elevation: 4,
-      } as ViewStyle,
-    }),
-  } as ViewStyle,
-  iPhoneXFooter: {
-    height: 20,
-  } as ViewStyle,
-  normalText: {
-    fontFamily: Fonts.regular,
-    fontSize: CommonSizes.font.medium,
-    lineHeight: CommonSizes.lineHeight.medium,
-    color: Colors.black,
-  } as TextStyle,
-  h1_bold: {
-    fontFamily: Fonts.bold,
-    fontSize: CommonSizes.font.largePlus,
-    lineHeight: CommonSizes.lineHeight.largePlus,
-    color: Colors.black,
-  } as TextStyle,
-  h1_semiBold: {
-    fontFamily: Fonts.semiBold,
-    fontSize: CommonSizes.font.largePlus,
-    lineHeight: CommonSizes.lineHeight.largePlus,
-    color: Colors.black,
-  } as TextStyle,
-  h1_regular: {
-    fontFamily: Fonts.regular,
-    fontSize: CommonSizes.font.largePlus,
-    lineHeight: CommonSizes.lineHeight.largePlus,
-    color: Colors.black,
-  } as TextStyle,
-  h2_bold: {
-    fontFamily: Fonts.bold,
-    fontSize: CommonSizes.font.extraMedium,
-    lineHeight: CommonSizes.lineHeight.mediumPlus,
-    color: Colors.black,
-  } as TextStyle,
-  h2_semiBold: {
-    fontFamily: Fonts.semiBold,
-    fontSize: CommonSizes.font.extraMedium,
-    lineHeight: CommonSizes.lineHeight.mediumPlus,
-    color: Colors.black,
-  } as TextStyle,
-  h2_regular: {
-    fontFamily: Fonts.regular,
-    fontSize: CommonSizes.font.extraMedium,
-    lineHeight: CommonSizes.lineHeight.mediumPlus,
-    color: Colors.black,
-  } as TextStyle,
-  h3_bold: {
-    fontFamily: Fonts.bold,
-    fontSize: CommonSizes.font.mediumPlus,
-    lineHeight: CommonSizes.lineHeight.medium,
-    color: Colors.black,
-  } as TextStyle,
-  h3_bold_underlined: {
-    fontFamily: Fonts.bold,
-    fontSize: CommonSizes.font.mediumPlus,
-    lineHeight: CommonSizes.lineHeight.medium,
-    textDecorationLine: 'underline',
-    color: Colors.black,
-  } as TextStyle,
-  h3_semiBold: {
-    fontFamily: Fonts.semiBold,
-    fontSize: CommonSizes.font.mediumPlus,
-    lineHeight: CommonSizes.lineHeight.medium,
-    color: Colors.black,
-  } as TextStyle,
-  h3_regular: {
-    fontFamily: Fonts.regular,
-    fontSize: CommonSizes.font.mediumPlus,
-    lineHeight: CommonSizes.lineHeight.medium,
-    color: Colors.black,
-  } as TextStyle,
-  h4_bold: {
-    fontFamily: Fonts.bold,
-    fontSize: CommonSizes.font.medium,
-    lineHeight: CommonSizes.lineHeight.medium,
-    color: Colors.black,
-  } as TextStyle,
-  h4_bold_underlined: {
-    fontFamily: Fonts.bold,
-    fontSize: CommonSizes.font.medium,
-    lineHeight: CommonSizes.lineHeight.medium,
-    textDecorationLine: 'underline',
-    color: Colors.black,
-  } as TextStyle,
-  h4_semiBold: {
-    fontFamily: Fonts.semiBold,
-    fontSize: CommonSizes.font.medium,
-    lineHeight: CommonSizes.lineHeight.medium,
-    color: Colors.black,
-  } as TextStyle,
-  h4_regular: {
-    fontFamily: Fonts.regular,
-    fontSize: CommonSizes.font.medium,
-    lineHeight: CommonSizes.lineHeight.medium,
-    color: Colors.black,
-  } as TextStyle,
-  body_bold: {
-    fontFamily: Fonts.bold,
-    fontSize: CommonSizes.font.small,
-    lineHeight: CommonSizes.lineHeight.small,
-    color: Colors.black,
-  } as TextStyle,
-  body_bold_underlined: {
-    fontFamily: Fonts.bold,
-    fontSize: CommonSizes.font.small,
-    lineHeight: CommonSizes.lineHeight.small,
-    textDecorationLine: 'underline',
-    color: Colors.black,
-  } as TextStyle,
-  body_semiBold: {
-    fontFamily: Fonts.semiBold,
-    fontSize: CommonSizes.font.small,
-    lineHeight: CommonSizes.lineHeight.small,
-    color: Colors.black,
-  } as TextStyle,
-  body_regular: {
-    fontFamily: Fonts.regular,
-    fontSize: CommonSizes.font.small,
-    lineHeight: CommonSizes.lineHeight.small,
-    color: Colors.black,
-  } as TextStyle,
-  tabBar_bold: {
-    fontFamily: Fonts.bold,
-    fontSize: CommonSizes.font.extraSmallPlus,
-    lineHeight: CommonSizes.lineHeight.extraSmallPlus,
-    color: Colors.black,
-  } as TextStyle,
-  tabBar_regular: {
-    fontFamily: Fonts.regular,
-    fontSize: CommonSizes.font.extraSmallPlus,
-    lineHeight: CommonSizes.lineHeight.extraSmallPlus,
-    color: Colors.black,
-  } as TextStyle,
-  dropShadow: {
-    shadowColor: '#000',
-    shadowOffset: {
-      width: 0,
-      height: 2,
-    },
-    shadowOpacity: 0.25,
-    shadowRadius: 3.84,
 
-    elevation: 5,
-  } as ViewStyle,
-  textInputContainer: {
-    width: '100%',
-  } as ViewStyle,
+export const createThemedStyles = (theme: Theme) =>
+  StyleSheet.create({
+    flex1: {
+      flex: 1,
+      backgroundColor: theme.colors.background,
+    } as ViewStyle,
+    flex1Transparent: {
+      flex: 1,
+      backgroundColor: 'transparent',
+    } as ViewStyle,
+    flex1Padding: {
+      flex: 1,
+      paddingHorizontal: theme.spacing.lg,
+    } as ViewStyle,
+    flex1PaddingTransparent: {
+      flex: 1,
+      paddingHorizontal: theme.spacing.lg,
+      backgroundColor: 'transparent',
+    } as ViewStyle,
+    flexCenter: {
+      flex: 1,
+      alignItems: 'center',
+      justifyContent: 'center',
+      backgroundColor: theme.colors.background,
+    } as ViewStyle,
+    flexColumnCenterStretch: {
+      flex: 1,
+      flexDirection: 'column',
+      alignItems: 'stretch',
+      justifyContent: 'flex-start',
+      backgroundColor: theme.colors.background,
+    } as ViewStyle,
+    listContentContainer: {
+      flexGrow: 1,
+      paddingHorizontal: theme.spacing.lg,
+      paddingVertical: theme.spacing.md,
+    } as ViewStyle,
+    rowCenter: {
+      flexDirection: 'row',
+      alignItems: 'center',
+    } as ViewStyle,
+    columnAlignStart: {
+      flexDirection: 'column',
+      alignItems: 'flex-start',
+    } as ViewStyle,
+    shadow: {
+      backgroundColor: theme.colors.card,
+      shadowColor: theme.colors.shadow,
+      ...Platform.select({
+        ios: {
+          shadowOffset: {
+            width: 0,
+            height: 2,
+          },
+          shadowOpacity: 0.23,
+          shadowRadius: 2.62,
+        } as ViewStyle,
+        android: {
+          elevation: 4,
+        } as ViewStyle,
+      }),
+    } as ViewStyle,
+    iPhoneXFooter: {
+      height: 20,
+    } as ViewStyle,
+    normalText: {
+      // fontFamily: Fonts.regular,
+      // fontSize: FontSizes.medium,
+      // lineHeight: LineHeight.medium,
+    } as TextStyle,
+    h1_bold: {
+      fontFamily: Fonts.bold,
+    } as TextStyle,
+    h1_semiBold: {
+      fontFamily: Fonts.semiBold,
+    } as TextStyle,
+    h1_regular: {
+      fontFamily: Fonts.regular,
+    } as TextStyle,
+    h2_bold: {
+      fontFamily: Fonts.bold,
+    } as TextStyle,
+    h2_semiBold: {
+      fontFamily: Fonts.semiBold,
+    } as TextStyle,
+    h2_regular: {
+      fontFamily: Fonts.regular,
+    } as TextStyle,
+    h3_bold: {
+      fontFamily: Fonts.bold,
+    } as TextStyle,
+    h3_bold_underlined: {
+      fontFamily: Fonts.bold,
+      textDecorationLine: 'underline',
+    } as TextStyle,
+    h3_semiBold: {
+      fontFamily: Fonts.semiBold,
+    } as TextStyle,
+    h3_regular: {
+      fontFamily: Fonts.regular,
+    } as TextStyle,
+    h4_bold: {
+      fontFamily: Fonts.bold,
+    } as TextStyle,
+    h4_bold_underlined: {
+      fontFamily: Fonts.bold,
+      textDecorationLine: 'underline',
+    } as TextStyle,
+    h4_semiBold: {
+      fontFamily: Fonts.semiBold,
+      fontSize: FontSizes.medium,
+      lineHeight: LineHeight.medium,
+    } as TextStyle,
+    h4_regular: {
+      fontFamily: Fonts.regular,
+      fontSize: FontSizes.medium,
+      lineHeight: LineHeight.medium,
+    } as TextStyle,
+    body_bold: {
+      fontFamily: Fonts.bold,
+      fontSize: FontSizes.small,
+      lineHeight: LineHeight.small,
+    } as TextStyle,
+    body_bold_underlined: {
+      fontFamily: Fonts.bold,
+      fontSize: FontSizes.small,
+      lineHeight: LineHeight.small,
+      textDecorationLine: 'underline',
+    } as TextStyle,
+    body_semiBold: {
+      fontFamily: Fonts.semiBold,
+      fontSize: FontSizes.small,
+      lineHeight: LineHeight.small,
+    } as TextStyle,
+    body_regular: {
+      fontFamily: Fonts.regular,
+      fontSize: FontSizes.small,
+      lineHeight: LineHeight.small,
+    } as TextStyle,
+    tabBar_bold: {
+      fontFamily: Fonts.bold,
+    } as TextStyle,
+    tabBar_regular: {
+      fontFamily: Fonts.regular,
+    } as TextStyle,
+    dropShadow: {
+      shadowColor: theme.colors.shadow,
+      shadowOffset: {
+        width: 0,
+        height: 4,
+      },
+      shadowOpacity: 0.25,
+      shadowRadius: 8,
+      elevation: 5,
+      borderWidth: 0.5,
+      borderColor: 'rgba(255, 255, 255, 0.1)',
+    } as ViewStyle,
+    textInputContainer: {
+      width: '100%',
+    } as ViewStyle,
+  });
+
+// For backward compatibility and static styles
+export const CommonStyles = createThemedStyles({
+  mode: 'light',
+  colors: {
+    indigoBlue: '#2D9CDB',
+    mutedLavender: '#B3B5FF',
+    tintColor: '#2D9CDB',
+    mutedLavender30: 'rgba(184, 186, 255, 0.3)',
+    white: '#FFFFFF',
+    backgroundOpacity: 'rgba(41, 45, 50, 0.8)',
+    black: '#000000',
+    background: '#FFFFFF',
+    surface: '#F5F5F5',
+    card: '#FFFFFF',
+    shadow: 'rgba(0, 0, 0, 0.1)',
+    red: '#FB043E',
+    balanceBackground: '#F5F5F5',
+  },
+  text: {
+    header1: {
+      fontFamily: Fonts.medium,
+      fontSize: FontSizes.header1,
+      color: '#000000',
+    },
+    header2: {
+      fontFamily: Fonts.normal,
+      fontSize: FontSizes.header2,
+      color: '#000000',
+    },
+    body1: {
+      fontFamily: Fonts.light,
+      fontSize: FontSizes.body1,
+      color: '#000000',
+    },
+    body2: {
+      fontFamily: Fonts.regular,
+      fontSize: FontSizes.body2,
+      color: '#000000',
+    },
+    button: {
+      fontFamily: Fonts.regular,
+      fontSize: FontSizes.button,
+      color: '#FFFFFF',
+    },
+    cards: {
+      fontFamily: Fonts.semiBold,
+      fontSize: FontSizes.card,
+      color: '#000000',
+    },
+    SearchBar: {
+      fontFamily: Fonts.light,
+      fontSize: FontSizes.searchBar,
+      color: '#000000',
+    },
+    label: {
+      fontFamily: Fonts.light,
+      fontSize: FontSizes.label,
+      color: '#000000',
+    },
+    hyperlink: {
+      fontFamily: Fonts.light,
+      fontSize: FontSizes.hyperlink,
+      color: '#000000',
+      textDecorationLine: 'underline',
+    },
+    balanceTitle: {
+      fontFamily: Fonts.semiBold,
+      fontSize: 16,
+      color: '#000000',
+    },
+    balanceAmount: {
+      fontFamily: Fonts.semiBold,
+      fontSize: 16,
+      color: '#000000',
+    },
+    balanceLabel: {
+      fontFamily: Fonts.regular,
+      fontSize: 12,
+      color: '#000000',
+    },
+    navBar: {
+      fontFamily: Fonts.semiBold,
+      fontSize: 16,
+    },
+  },
+  spacing: {
+    xs: 4,
+    sm: 8,
+    md: 12,
+    lg: 16,
+    xl: 24,
+  },
+  borderRadius: {
+    xs: 4,
+    sm: 8,
+    md: 12,
+    lg: 16,
+    xl: 24,
+  },
 });

package/template/src/core/theme/fonts.ts

@@ -1 +1,17 @@
-export const Fonts = {};
+export const Fonts = {
+  // Inter Variable Font
+  regular: 'Inter-VariableFont_opsz,wght',
+  italic: 'Inter-Italic-VariableFont_opsz,wght',
+
+  // Kanit Font
+  medium: 'Kanit-Medium',
+
+  // Font weights for Inter Variable Font
+  thin: 'Inter-Thin',
+  light: 'Inter-Light',
+  normal: 'Inter-Regular',
+  semiBold: 'Inter-SemiBold',
+  bold: 'Inter-Bold',
+  extraBold: 'Inter-ExtraBold',
+  black: 'Inter-Black',
+};

package/template/src/core/theme/scaling.ts

@@ -0,0 +1,101 @@
+import {Dimensions, PixelRatio, Platform} from 'react-native';
+
+// Device dimensions
+export const {width: SCREEN_WIDTH, height: SCREEN_HEIGHT} =
+  Dimensions.get('window');
+
+// Base dimensions (based on design specifications)
+const BASE_WIDTH = 720;
+const BASE_HEIGHT = 1440;
+
+// Scale factors with increased scaling
+const wScale = (SCREEN_WIDTH / BASE_WIDTH) * 1.2; // Increased by 20%
+const hScale = (SCREEN_HEIGHT / BASE_HEIGHT) * 1.2; // Increased by 20%
+
+/**
+ * Scales width based on device screen width
+ * @param size - Size to scale
+ * @returns Scaled size
+ */
+export const scaleWidth = (size: number): number => {
+  return PixelRatio.roundToNearestPixel(size * wScale);
+};
+
+/**
+ * Scales height based on device screen height
+ * @param size - Size to scale
+ * @returns Scaled size
+ */
+export const scaleHeight = (size: number): number => {
+  return PixelRatio.roundToNearestPixel(size * hScale);
+};
+
+/**
+ * Scales size proportionally based on screen width
+ * More suitable for general scaling of UI elements
+ * @param size - Size to scale
+ * @returns Scaled size
+ */
+export const scale = (size: number): number => {
+  const scaleFactor = Math.min(wScale, hScale) * 1.1; // Additional 10% increase
+  return PixelRatio.roundToNearestPixel(size * scaleFactor);
+};
+
+/**
+ * Scales font size based on device screen size
+ * Includes platform-specific adjustments with smaller reduction
+ * @param size - Font size to scale
+ * @returns Scaled font size
+ */
+export const scaleFontSize = (size: number): number => {
+  const scaledSize = scale(size);
+  if (Platform.OS === 'ios') {
+    return Math.round(PixelRatio.roundToNearestPixel(scaledSize));
+  }
+  return Math.round(PixelRatio.roundToNearestPixel(scaledSize)) - 1; // Reduced from -2 to -1
+};
+
+/**
+ * Scales spacing/margin/padding based on screen width
+ * @param size - Size to scale
+ * @returns Scaled size
+ */
+export const scaleSpacing = (size: number): number => {
+  return PixelRatio.roundToNearestPixel(size * wScale * 1.1); // Additional 10% increase
+};
+
+/**
+ * Scales border radius based on screen width
+ * @param size - Size to scale
+ * @returns Scaled size
+ */
+export const scaleBorderRadius = (size: number): number => {
+  return PixelRatio.roundToNearestPixel(size * Math.min(wScale * 1.1, 1.3)); // Increased max scale from 1.2 to 1.3
+};
+
+/**
+ * Returns responsive value based on screen width breakpoints
+ * @param options - Object containing size values for different breakpoints
+ * @returns Appropriate value for current screen width
+ */
+export const responsiveSize = (options: {
+  small?: number;
+  medium?: number;
+  large?: number;
+  default: number;
+}): number => {
+  if (SCREEN_WIDTH < 720 && options.small !== undefined) {
+    return options.small;
+  }
+  if (SCREEN_WIDTH > 1080 && options.large !== undefined) {
+    return options.large;
+  }
+  if (
+    options.medium !== undefined &&
+    SCREEN_WIDTH >= 720 &&
+    SCREEN_WIDTH <= 1080
+  ) {
+    return options.medium;
+  }
+  return options.default;
+};