@fadyshawky/react-native-magic 1.0.0

package/template/src/core/store/user/userSlice.ts

@@ -0,0 +1,62 @@
+import {createSlice} from '@reduxjs/toolkit';
+import {LoadState} from '../../../../types';
+import {newState} from '../../../common/utils/newState';
+import {handleErrorResponse} from '../../api/responseHandlers';
+import {userLogin} from './userActions';
+import {UserInitialState, UserPayload, UserState} from './userState';
+
+function loginHandler(state: UserState, payload: {payload: UserPayload}) {
+  return newState(state, {
+    user: payload.payload.user,
+    accessToken: payload.payload.token,
+    loginLoading: LoadState['allIsLoaded'],
+  });
+}
+function loginLoadingHandler(state: UserState) {
+  return newState(state, {
+    loginLoading: LoadState['pullToRefresh'],
+  });
+}
+
+function loginErrorHandler(
+  state: UserState,
+  payload: {payload: string | unknown},
+) {
+  handleErrorResponse((payload.payload as string) || 'Login failed');
+  return newState(state, {
+    loginLoading: LoadState['error'],
+  });
+}
+
+function logoutHandler(state: UserState) {
+  return newState(state, UserInitialState);
+}
+
+function updateHandler(state: UserState, payload: any) {
+  return newState(state, {
+    user: {
+      ...state.user,
+      ...payload.payload,
+    },
+  });
+}
+
+export const {reducer: UserReducer, actions} = createSlice({
+  name: 'user',
+  initialState: UserInitialState,
+  reducers: {
+    setLogin: loginHandler,
+    setLoginLoading: loginLoadingHandler,
+    setLoginError: loginLoadingHandler,
+    setLogout: logoutHandler,
+    setUpdate: updateHandler,
+  },
+  extraReducers: builder => {
+    builder
+      .addCase(userLogin.fulfilled, loginHandler)
+      .addCase(userLogin.rejected, loginErrorHandler)
+      .addCase(userLogin.pending, loginLoadingHandler);
+  },
+});
+
+export const {setLogout, setUpdate} = actions;

package/template/src/core/store/user/userState.ts

@@ -0,0 +1,44 @@
+import {LoadState} from '../../../../types';
+
+export interface UserState {
+  user: UserEntity;
+  accessToken: string;
+  loginLoading: LoadState;
+}
+
+export interface UserPayload {
+  user: UserEntity;
+  token: string;
+}
+
+export const UserInitialState: UserState = {
+  user: {
+    id: 0,
+    email: '',
+    first_name: '',
+    last_name: '',
+    phone_number: '',
+    address: '',
+    role_id: 0,
+    created_at: '',
+    updated_at: '',
+    deleted_at: null,
+    roleName: '',
+  },
+  accessToken: '',
+  loginLoading: LoadState['needLoad'],
+};
+
+export interface UserEntity {
+  id: number;
+  email: string;
+  first_name: string;
+  last_name: string;
+  phone_number: string;
+  address: string;
+  role_id: number;
+  created_at: string;
+  updated_at: string;
+  deleted_at?: null;
+  roleName: string;
+}

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

@@ -0,0 +1,117 @@
+export enum Colors {
+  black = '#000000',
+  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',
+}
+
+export enum PlatformColorsIOS {
+  /* Label Colors */
+  label = 'label',
+  secondaryLabel = 'secondaryLabel',
+  tertiaryLabel = 'tertiaryLabel',
+  quaternaryLabel = 'quaternaryLabel',
+
+  /* Fill Colors */
+  systemFill = 'systemFill',
+  secondarySystemFill = 'secondarySystemFill',
+  tertiarySystemFill = 'tertiarySystemFill',
+  quaternarySystemFill = 'quaternarySystemFill',
+
+  /* Text Colors */
+  placeholderText = 'placeholderText',
+
+  /* Standard Content Background Colors */
+  systemBackground = 'systemBackground',
+  secondarySystemBackground = 'secondarySystemBackground',
+  tertiarySystemBackground = 'tertiarySystemBackground',
+
+  /* Grouped Content Background Colors */
+  systemGroupedBackground = 'systemGroupedBackground',
+  secondarySystemGroupedBackground = 'secondarySystemGroupedBackground',
+  tertiarySystemGroupedBackground = 'tertiarySystemGroupedBackground',
+
+  /* Separator Colors */
+  separator = 'separator',
+  opaqueSeparator = 'opaqueSeparator',
+
+  /* Link Color */
+  link = 'link',
+
+  /* Nonadaptable Colors */
+  darkText = 'darkText',
+  lightText = 'lightText',
+
+  /* Standard Colors */
+  /* Adaptable Colors */
+  systemBlue = 'systemBlue',
+  systemGreen = 'systemGreen',
+  systemIndigo = 'systemIndigo',
+  systemOrange = 'systemOrange',
+  systemPink = 'systemPink',
+  systemPurple = 'systemPurple',
+  systemRed = 'systemRed',
+  systemTeal = 'systemTeal',
+  systemYellow = 'systemYellow',
+
+  /* Adaptable Gray Colors */
+  systemGray = 'systemGray',
+  systemGray2 = 'systemGray2',
+  systemGray3 = 'systemGray3',
+  systemGray4 = 'systemGray4',
+  systemGray5 = 'systemGray5',
+  systemGray6 = 'systemGray6',
+}
+
+export enum PlatformColorsAndroid {
+  primary = '@color/primary',
+  primaryDark = '@color/primaryDark',
+  primaryLight = '@color/primaryLight',
+  background = '@color/background',
+  primaryText = '@color/primaryText',
+  primaryTextOpacity = '@color/primaryTextOpacity',
+  secondaryText = '@color/secondaryText',
+  onPrimaryText = '@color/onPrimaryText',
+  onPrimaryTextOpacity = '@color/onPrimaryTextOpacity',
+  divider = '@color/divider',
+  navigation = '@color/navigation',
+  statusbar = '@color/statusbar',
+}

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

@@ -0,0 +1,45 @@
+import dayjs from 'dayjs';
+import {
+  Dimensions,
+  PixelRatio,
+  Platform,
+  PlatformAndroidStatic,
+  PlatformIOSStatic,
+  StatusBar,
+  StyleSheet,
+} from 'react-native';
+import DeviceInfo from 'react-native-device-info';
+import {createPerfectSize} from '../../common/utils/createPerfectSize';
+
+const windowDimensions = Dimensions.get('window');
+export const isIos = Platform.OS == 'ios';
+export const isAndroid = Platform.OS == 'android';
+export const hasDynamicIsland = DeviceInfo.hasDynamicIsland();
+export const hasNotch = DeviceInfo.hasNotch() || hasDynamicIsland;
+export const isIpad = isIos && (Platform as PlatformIOSStatic).isPad;
+export const isTablet = DeviceInfo.isTablet();
+export const isAndroid11AndHigher =
+  isAndroid && (Platform as PlatformAndroidStatic).Version >= 30;
+
+export const windowWidth = windowDimensions.width;
+export const windowHeight =
+  windowDimensions.height - (!isIos ? StatusBar.currentHeight || 0 : 0);
+
+export const screenTabInitialLayout = {height: 0, width: windowWidth};
+export const hairlineWidth = StyleSheet.hairlineWidth;
+
+export const hitSlop = {top: 10, bottom: 10, left: 10, right: 10};
+export const hitSlopBig = {top: 20, bottom: 20, left: 20, right: 20};
+
+export const pixelRatio = PixelRatio.get();
+
+export const perfectSize = createPerfectSize(
+  PixelRatio.roundToNearestPixel(windowWidth * pixelRatio),
+  PixelRatio.roundToNearestPixel(windowHeight * pixelRatio),
+);
+
+export const maxWindowDimension = Math.max(windowWidth, windowHeight);
+export const minWindowDimension = Math.min(windowHeight, windowWidth);
+
+export const minimalLegalAge = dayjs().subtract(16, 'years').toDate();
+export const maximalAge = dayjs().subtract(100, 'years').toDate();

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

@@ -0,0 +1,70 @@
+import {ISize} from '../../types';
+
+export const CommonSizes = {
+  font: {
+    extraSmall: 11,
+    extraSmallPlus: 12,
+    small: 14,
+    smallPlus: 15,
+    medium: 16,
+    mediumPlus: 18,
+    extraMedium: 20,
+    large: 22,
+    largePlus: 28,
+    extraLarge: 34,
+    extraLargePlus: 44,
+  } as Readonly<ISize>,
+  letterSpacing: {
+    extraSmall: 0.07,
+    extraSmallPlus: 0,
+    small: -0.08,
+    smallPlus: -0.24,
+    medium: -0.41,
+    mediumPlus: 0.38,
+    large: 0.35,
+    largePlus: 0.36,
+    extraLarge: 0.37,
+    extraLargePlus: 0.37,
+  } as Readonly<ISize>,
+  lineHeight: {
+    extraSmall: 13,
+    extraSmallPlus: 16,
+    small: 19,
+    smallPlus: 20,
+    medium: 22,
+    mediumPlus: 25,
+    large: 28,
+    largePlus: 34,
+    extraLarge: 41,
+    extraLargePlus: 52,
+  } as Readonly<ISize>,
+  spacing: {
+    extraSmall: 8,
+    extraSmallPlus: 10,
+    small: 12,
+    smallPlus: 13,
+    medium: 16,
+    mediumPlus: 20,
+    large: 30,
+    largePlus: 40,
+    extraLarge: 48,
+    extraLargePlus: 56,
+  } as Readonly<ISize>,
+  borderRadius: {
+    extraSmall: 4,
+    extraSmallPlus: 6,
+    small: 8,
+    smallPlus: 10,
+    medium: 12,
+    mediumPlus: 13,
+    large: 14,
+    largePlus: 16,
+    extraLarge: 18,
+    extraLargePlus: 30,
+  } as Readonly<ISize>,
+  borderWidth: {
+    small: 1,
+    medium: 2,
+    large: 3,
+  } as Readonly<ISize>,
+};

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

@@ -0,0 +1,228 @@
+import {
+  Dimensions,
+  Platform,
+  StyleSheet,
+  TextStyle,
+  ViewStyle,
+} from 'react-native';
+import {Colors} from './colors';
+import {CommonSizes} 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 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,
+});

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

@@ -0,0 +1,12 @@
+export const Fonts = {
+  system: 'System',
+  thin: 'KumbhSans-Thin',
+  light: 'KumbhSans-Light',
+  extraLight: 'KumbhSans-ExtraLight',
+  regular: 'KumbhSans-Regular',
+  medium: 'KumbhSans-Medium',
+  semiBold: 'KumbhSans-SemiBold',
+  bold: 'KumbhSans-Bold',
+  extraBold: 'KumbhSans-ExtraBold',
+  black: 'KumbhSans-Black',
+};

package/template/src/navigation/AuthStack.tsx

@@ -0,0 +1,39 @@
+import {createNativeStackNavigator} from '@react-navigation/native-stack';
+import {Login} from '../screens/Login/Login';
+import {Splash} from '../screens/splash/Splash';
+
+const Stack = createNativeStackNavigator();
+
+const AuthScreens = [
+  {
+    id: 'Splash',
+    component: Splash,
+    options: {
+      headerShown: false,
+    },
+  },
+  {
+    id: 'Login',
+    component: Login,
+    options: {
+      headerShown: false,
+    },
+  },
+];
+
+export function AuthStack() {
+  return (
+    <Stack.Navigator
+      initialRouteName="Login"
+      screenOptions={{animation: 'none'}}>
+      {AuthScreens.map(s => (
+        <Stack.Screen
+          key={s.id}
+          name={s.id}
+          component={s.component}
+          options={s.options}
+        />
+      ))}
+    </Stack.Navigator>
+  );
+}