@fadyshawky/react-native-magic 1.0.8 → 2.0.0

package/template/src/core/api/serverHeaders.ts

@@ -1,6 +1,4 @@
-import Config from 'react-native-config';
-import axios from 'axios';
-import {AxiosDefaults} from 'axios';
+import axios, {AxiosDefaults} from 'axios';
 
 export const defaultHeaders: HeadersInit_ = {
   Connection: 'keep-alive',
@@ -12,28 +10,20 @@ declare type MethodData = {
   config?: any;
 };
 
+const baseURL = '';
+
 const instance = axios.create({
-  baseURL: Config.API_BASE_URL,
-  timeout: 5000,
-  maxRate: 100,
+  baseURL: baseURL,
   headers: {
-    Connection: 'keep-alive',
-    'Content-Type': 'application/json',
+    ...defaultHeaders,
   },
 });
 
-export const post = ({url, data, config}: MethodData) => {
-  return instance.post(url, data, config);
-};
-
-export const get = ({url, config}: MethodData) => {
-  return instance.get(url, config);
-};
-
-export const put = ({url, data, config}: MethodData) => {
-  return instance.put(url, data, config);
-};
-
-export const deleteApi = ({url, config}: MethodData) => {
-  return instance.delete(url, config);
-};
+// Export HTTP methods using the configured instance
+export const post = ({url, data, config}: MethodData) =>
+  instance.post(url, data, config);
+export const get = ({url, config}: MethodData) => instance.get(url, config);
+export const put = ({url, data, config}: MethodData) =>
+  instance.put(url, data, config);
+export const deleteApi = ({url, config}: MethodData) =>
+  instance.delete(url, config);

package/template/src/core/store/app/appSlice.ts

@@ -1,7 +1,6 @@
 import {createSlice} from '@reduxjs/toolkit';
-import {newState} from '../../../common/utils/newState';
 
-import {appInitialState, AppInitialEntity} from './appState';
+import {appInitialState} from './appState';
 
 export const {reducer: AppReducer, actions} = createSlice({
   name: 'app',

package/template/src/core/theme/ThemeProvider.tsx

@@ -0,0 +1,63 @@
+import React, {
+  createContext,
+  useCallback,
+  useContext,
+  useEffect,
+  useState,
+} from 'react';
+import {useColorScheme} from 'react-native';
+import {Theme, ThemeMode} from './types';
+import {darkTheme, lightTheme} from './themes';
+
+interface ThemeContextType {
+  theme: Theme;
+  toggleTheme: () => void;
+  setThemeMode: (mode: ThemeMode) => void;
+}
+
+const ThemeContext = createContext<ThemeContextType>({
+  theme: lightTheme,
+  toggleTheme: () => {},
+  setThemeMode: () => {},
+});
+
+export const useTheme = () => {
+  const context = useContext(ThemeContext);
+  if (!context) {
+    throw new Error('useTheme must be used within a ThemeProvider');
+  }
+  return context;
+};
+
+interface ThemeProviderProps {
+  children: React.ReactNode;
+  initialTheme?: ThemeMode;
+}
+
+export const ThemeProvider: React.FC<ThemeProviderProps> = ({
+  children,
+  initialTheme,
+}) => {
+  const systemColorScheme = useColorScheme();
+  const [themeMode, setThemeMode] = useState<ThemeMode>(
+    initialTheme || systemColorScheme || 'light',
+  );
+
+  useEffect(() => {
+    if (!initialTheme && systemColorScheme) {
+      setThemeMode(systemColorScheme);
+    }
+  }, [systemColorScheme, initialTheme]);
+
+  const toggleTheme = useCallback(() => {
+    setThemeMode(prev => (prev === 'light' ? 'dark' : 'light'));
+  }, []);
+
+  const theme = themeMode === 'dark' ? darkTheme : lightTheme;
+
+  return (
+    <ThemeContext.Provider value={{theme, toggleTheme, setThemeMode}}>
+      {children}
+    </ThemeContext.Provider>
+  );
+};

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

@@ -1,49 +1,36 @@
-export enum Colors {
+export enum BlackColors {
+  indigoBlue = '#6666FF',
+  mutedLavender = '#B3B5FF',
+  tintColor = '#B3B5FF',
+  mutedLavender30 = 'rgba(184, 186, 255, 0.3)',
+  balanceBackground = 'rgba(41, 45, 50, 0.8)',
+  white = '#FFFFFF',
+  backgroundOpacity = 'rgba(36, 40, 44, 0.8)',
   black = '#000000',
+  background = '#000000',
+  surface = '#121212',
+  card = '#1E1E1E',
+  shadow = '#FFFFFF',
+  red = '#FB043E',
+}
+
+export enum WhiteColors {
+  indigoBlue = '#6666FF',
+  mutedLavender = '#B3B5FF',
+  tintColor = '#6666FF',
+  mutedLavender30 = 'rgba(184, 186, 255, 0.3)',
+  balanceBackground = 'rgba(184, 186, 255, 0.3)',
   white = '#FFFFFF',
-  gray = '#929292',
-  gray2 = '#949494',
-  gray5 = '#E0E0E0',
-  background = '#F9FCFF',
-  gray_disabled = '#BDBDBD',
-  lightGray = '#BDBDBD',
-  darkGray = '#262626',
-  green = '#4DAD4A',
-  red = '#CE3C3E',
-  transparent = 'transparent',
-  primary100 = '#8481FD',
-  primary50 = '#C1C0FE',
-  primary20 = '#E6E6FF',
-  primary10 = '#F3F2FF',
-  primary5 = '#F9F9FF',
-  teal100 = '#1ED3B8',
-  teal50 = '#8EE9DB',
-  teal20 = '#D2F6F1',
-  teal10 = '#E9FBF8',
-  teal5 = '#F4FDFB',
-  blue100 = '#52BDFF',
-  blue50 = '#A8DEFF',
-  blue20 = '#DCF2FF',
-  blue10 = '#EEF8FF',
-  blue5 = '#F6FCFF',
-  coral100 = '#F2565E',
-  coral50 = '#F9AAAF',
-  coral20 = '#FCDDDF',
-  coral10 = '#FEF7F7',
-  coral5 = '#FEF7F7',
-  orange100 = '#F79E69',
-  orange50 = '#FBCEB4',
-  orange20 = '#FDECE1',
-  orange10 = '#FEF5F0',
-  orange5 = '#FFFAF8',
-  yellow100 = '#FFDF75',
-  yellow50 = '#FFEFBA',
-  yellow20 = '#FFF8E3',
-  yellow10 = '#FFFCF1',
-  yellow5 = '#FFFDF8',
+  backgroundOpacity = 'rgba(255, 255, 255, 0.7)',
+  black = '#000000',
+  background = '#FFFFFF',
+  surface = '#FFFFFF',
+  card = '#FFFFFF',
+  shadow = 'rgba(0, 0, 0, 0.8)',
+  red = '#FB043E',
 }
 
-export enum NewColors {
+export enum Colors {
   violetLight = '#F3F2FF',
   violetLightHover = '#E6E6FF',
   violetLightActive = '#C1C0FE',
@@ -85,4 +72,6 @@ export enum NewColors {
   red = '#FFFCF1',
   green = '#F4FDFB',
   background = '#FAFAFA',
+  white = 'white',
+  gray = 'gray',
 }

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

@@ -9,7 +9,7 @@ import {
   StyleSheet,
 } from 'react-native';
 import DeviceInfo from 'react-native-device-info';
-import {createPerfectSize} from '../../common/utils/createPerfectSize';
+import {createPerfectSize} from '../../common/utils';
 
 const windowDimensions = Dimensions.get('window');
 export const isIos = Platform.OS == 'ios';

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,
+  },
 });