create-gufran-expo-app 2.0.0 → 2.0.1

package/template/src/constants/theme.ts

@@ -0,0 +1,72 @@
+import { Theme } from '../types';
+import { moderateScale } from '../utils/scaling';
+
+export const lightTheme: Theme = {
+  colors: {
+    primary: '#007AFF',
+    secondary: '#5856D6',
+    background: '#FFFFFF',
+    surface: '#F2F2F7',
+    text: '#000000',
+    textSecondary: '#8E8E93',
+    border: '#C6C6C8',
+    error: '#FF3B30',
+    success: '#34C759',
+    warning: '#FF9500',
+    blue: '#0047AB',
+    appleGreen: '#A7D129',
+    DarkGray: '#484848',
+    green: '#34C759',
+    white: '#FFFFFF',
+    black: '#000000',
+    lightLavenderGray: '#F4F7FB',
+    imageBorder: '#F1E9F9',
+    paraText: '#3E3E3E',
+    cancelButton: '#FB6A57',
+    red: '#ED0000',
+  },
+  spacing: {
+    xs: moderateScale(4),
+    sm: moderateScale(8),
+    md: moderateScale(16),
+    lg: moderateScale(24),
+    xl: moderateScale(32),
+  },
+  borderRadius: {
+    sm: moderateScale(4),
+    md: moderateScale(8),
+    lg: moderateScale(12),
+    xl: moderateScale(16),
+    xxl: moderateScale(30),
+  },
+  typography: {
+    fontSize: {
+      xs: moderateScale(12),
+      sm: moderateScale(14),
+      md: moderateScale(16),
+      lg: moderateScale(18),
+      xl: moderateScale(24),
+      xxl: moderateScale(32)  ,
+    },
+    fontWeight: {
+      normal: '400',
+      medium: '500',
+      semibold: '600',
+      bold: '700',
+    },
+  },
+};
+
+export const darkTheme: Theme = {
+  ...lightTheme,
+  colors: {
+    ...lightTheme.colors,
+    background: '#000000',
+    surface: '#1C1C1E',
+    text: '#FFFFFF',
+    textSecondary: '#8E8E93',
+    border: '#38383A',
+  },
+};
+
+export const theme = lightTheme; // Default theme

package/template/src/contexts/AuthContext.tsx

@@ -0,0 +1,268 @@
+import React, { createContext, useContext, useReducer, useEffect, ReactNode } from 'react';
+import { User } from '../types';
+import { StorageService } from '../utils';
+
+// Auth State
+interface AuthState {
+  isLoading: boolean;
+  isAuthenticated: boolean;
+  user: User | null;
+  token: string | null;
+}
+
+// Auth Actions
+type AuthAction =
+  | { type: 'RESTORE_TOKEN'; token: string | null; user: User | null }
+  | { type: 'SIGN_IN'; token: string; user: User }
+  | { type: 'SIGN_OUT' }
+  | { type: 'SET_LOADING'; isLoading: boolean };
+
+// Auth Context Type
+interface AuthContextType extends AuthState {
+  login: (email: string, password: string) => Promise<boolean>;
+  register: (userData: RegisterData) => Promise<boolean>;
+  logout: () => Promise<void>;
+  updateUser: (userData: Partial<User>) => Promise<void>;
+}
+
+interface RegisterData {
+  firstName: string;
+  lastName: string;
+  email: string;
+  password: string;
+}
+
+// Initial state
+const initialState: AuthState = {
+  isLoading: true,
+  isAuthenticated: false,
+  user: null,
+  token: null,
+};
+
+// Auth reducer
+function authReducer(prevState: AuthState, action: AuthAction): AuthState {
+  switch (action.type) {
+    case 'RESTORE_TOKEN':
+      return {
+        ...prevState,
+        token: action.token,
+        user: action.user,
+        isAuthenticated: !!action.token,
+        isLoading: false,
+      };
+    case 'SIGN_IN':
+      return {
+        ...prevState,
+        isAuthenticated: true,
+        token: action.token,
+        user: action.user,
+        isLoading: false,
+      };
+    case 'SIGN_OUT':
+      return {
+        ...prevState,
+        isAuthenticated: false,
+        token: null,
+        user: null,
+        isLoading: false,
+      };
+    case 'SET_LOADING':
+      return {
+        ...prevState,
+        isLoading: action.isLoading,
+      };
+    default:
+      return prevState;
+  }
+}
+
+// Create context
+const AuthContext = createContext<AuthContextType | undefined>(undefined);
+
+// Auth Provider Component
+interface AuthProviderProps {
+  children: ReactNode;
+}
+
+export const AuthProvider: React.FC<AuthProviderProps> = ({ children }) => {
+  const [state, dispatch] = useReducer(authReducer, initialState);
+
+  // Restore authentication state on app startup
+  useEffect(() => {
+    const restoreAuthState = () => {
+      try {
+        const token = StorageService.auth.getToken();
+        const user = StorageService.auth.getUser();
+
+        dispatch({ type: 'RESTORE_TOKEN', token: token || null, user: user || null });
+      } catch (error) {
+        console.error('Failed to restore auth state:', error);
+        dispatch({ type: 'RESTORE_TOKEN', token: null, user: null });
+      }
+    };
+
+    restoreAuthState();
+  }, []);
+
+  // Login function
+  const login = async (email: string, password: string): Promise<boolean> => {
+    try {
+      dispatch({ type: 'SET_LOADING', isLoading: true });
+
+      // Mock API call - replace with actual authentication API
+      const response = await mockAuthAPI.login(email, password);
+      
+      if (response.success && response.data) {
+        const { token, user } = response.data;
+        
+        // Store authentication data
+        StorageService.auth.setToken(token);
+        StorageService.auth.setUser(user);
+        
+        dispatch({ type: 'SIGN_IN', token, user });
+        return true;
+      }
+      
+      return false;
+    } catch (error) {
+      console.error('Login error:', error);
+      return false;
+    } finally {
+      dispatch({ type: 'SET_LOADING', isLoading: false });
+    }
+  };
+
+  // Register function
+  const register = async (userData: RegisterData): Promise<boolean> => {
+    try {
+      dispatch({ type: 'SET_LOADING', isLoading: true });
+
+      // Mock API call - replace with actual registration API
+      const response = await mockAuthAPI.register(userData);
+      
+      if (response.success && response.data) {
+        const { token, user } = response.data;
+        
+        // Store authentication data
+        StorageService.auth.setToken(token);
+        StorageService.auth.setUser(user);
+        
+        dispatch({ type: 'SIGN_IN', token, user });
+        return true;
+      }
+      
+      return false;
+    } catch (error) {
+      console.error('Registration error:', error);
+      return false;
+    } finally {
+      dispatch({ type: 'SET_LOADING', isLoading: false });
+    }
+  };
+
+  // Logout function
+  const logout = async (): Promise<void> => {
+    try {
+      // Clear stored authentication data
+      StorageService.auth.clearAuthData();
+      
+      dispatch({ type: 'SIGN_OUT' });
+    } catch (error) {
+      console.error('Logout error:', error);
+    }
+  };
+
+  // Update user function
+  const updateUser = async (userData: Partial<User>): Promise<void> => {
+    try {
+      if (!state.user) return;
+
+      const updatedUser = { ...state.user, ...userData };
+      
+      // Update stored user data
+      StorageService.auth.setUser(updatedUser);
+      
+      // Update context state
+      dispatch({ 
+        type: 'SIGN_IN', 
+        token: state.token!, 
+        user: updatedUser 
+      });
+    } catch (error) {
+      console.error('Update user error:', error);
+    }
+  };
+
+  const contextValue: AuthContextType = {
+    ...state,
+    login,
+    register,
+    logout,
+    updateUser,
+  };
+
+  return (
+    <AuthContext.Provider value={contextValue}>
+      {children}
+    </AuthContext.Provider>
+  );
+};
+
+// Custom hook to use auth context
+export const useAuth = (): AuthContextType => {
+  const context = useContext(AuthContext);
+  if (context === undefined) {
+    throw new Error('useAuth must be used within an AuthProvider');
+  }
+  return context;
+};
+
+// Mock API for demonstration - replace with actual API calls
+const mockAuthAPI = {
+  login: async (email: string, password: string) => {
+    // Simulate network delay
+    await new Promise(resolve => setTimeout(resolve, 1000));
+    
+    // Mock successful login - in real app, validate against server
+    if (email === 'demo@example.com' && password === 'password123') {
+      return {
+        success: true,
+        data: {
+          token: 'mock-jwt-token-' + Date.now(),
+          user: {
+            id: '1',
+            name: 'Demo User',
+            email: email,
+            avatar: 'https://via.placeholder.com/100x100/007AFF/FFFFFF?text=DU',
+            createdAt: new Date('2023-01-01'),
+            updatedAt: new Date(),
+          },
+        },
+      };
+    }
+    
+    return { success: false };
+  },
+
+  register: async (userData: RegisterData) => {
+    // Simulate network delay
+    await new Promise(resolve => setTimeout(resolve, 1000));
+    
+    // Mock successful registration
+    return {
+      success: true,
+      data: {
+        token: 'mock-jwt-token-' + Date.now(),
+        user: {
+          id: Date.now().toString(),
+          name: `${userData.firstName} ${userData.lastName}`,
+          email: userData.email,
+          avatar: `https://via.placeholder.com/100x100/007AFF/FFFFFF?text=${userData.firstName[0]}${userData.lastName[0]}`,
+          createdAt: new Date(),
+          updatedAt: new Date(),
+        },
+      },
+    };
+  },
+};

package/template/src/contexts/index.ts

@@ -0,0 +1,2 @@
+// AuthContext has been replaced with Zustand store
+// export * from './AuthContext';

package/template/src/hooks/index.ts

@@ -0,0 +1,3 @@
+export { useImageUpload } from './useImageUpload';
+export type { UploadState, UseImageUploadOptions } from './useImageUpload';
+

package/template/src/hooks/useImageUpload.ts

@@ -0,0 +1,199 @@
+import { useState, useCallback } from 'react';
+import { AzureUploadService, UploadResult } from '../utils/AzureUploaderService';
+import { ImagePickerResult } from '../utils/imagePicker';
+import { apiClient, API_ENDPOINTS } from '../services/api';
+
+export interface UploadState {
+  isUploading: boolean;
+  progress: number;
+  error: string | null;
+  uploadedUrl: string | null;
+  isRetrying: boolean;
+  retryCount: number;
+}
+
+export interface UseImageUploadOptions {
+  containerName?: string;
+  maxRetries?: number;
+  retryDelay?: number;
+  onUploadStart?: () => void;
+  onUploadProgress?: (progress: number) => void;
+  onUploadSuccess?: (url: string) => void;
+  onUploadError?: (error: string) => void;
+  onUploadComplete?: () => void;
+}
+
+export const useImageUpload = (options: UseImageUploadOptions = {}) => {
+  const {
+    containerName = 'profile',
+    maxRetries = 3,
+    retryDelay = 1000,
+    onUploadStart,
+    onUploadProgress,
+    onUploadSuccess,
+    onUploadError,
+    onUploadComplete,
+  } = options;
+
+  const [uploadState, setUploadState] = useState<UploadState>({
+    isUploading: false,
+    progress: 0,
+    error: null,
+    uploadedUrl: null,
+    isRetrying: false,
+    retryCount: 0,
+  });
+
+  const resetUploadState = useCallback(() => {
+    setUploadState({
+      isUploading: false,
+      progress: 0,
+      error: null,
+      uploadedUrl: null,
+      isRetrying: false,
+      retryCount: 0,
+    });
+  }, []);
+
+  const uploadImage = useCallback(async (imageResult: ImagePickerResult): Promise<UploadResult> => {
+    try {
+      setUploadState(prev => ({
+        ...prev,
+        isUploading: true,
+        progress: 0,
+        error: null,
+        retryCount: 0,
+      }));
+
+      onUploadStart?.();
+
+      // Step 1: Get SAS token
+      console.log('Getting SAS token for image upload...',imageResult?.fileName );
+      const response = await apiClient.post(API_ENDPOINTS.AUTH.UPLOAD_SAS, {
+        containerName,
+        blobName: imageResult?.fileName || `image_${Date.now()}.jpg`,
+      });
+
+      if (response?.status !== 200) {
+        throw new Error(response?.data?.message || 'Failed to get upload token');
+      }
+
+      const sasToken = response?.data?.data?.sasUrl;
+      const blobUrl = response?.data?.data?.blobUrl;
+
+      if (!sasToken) {
+        throw new Error('Invalid response from upload token API');
+      }
+
+      // If blobUrl is not provided, derive it from sasUrl
+      const finalBlobUrl = blobUrl || sasToken.split('?')[0];
+
+      console.log('SAS token received, starting upload...');
+
+      // Step 2: Upload file with retry mechanism
+      const uploadResult = await AzureUploadService.uploadFileWithRetry({
+        fileUri: imageResult.uri,
+        sasUrl: sasToken,
+        blobUrl: finalBlobUrl,
+        options: {
+          maxRetries,
+          retryDelay,
+        },
+        onProgress: (progress) => {
+          setUploadState(prev => ({ ...prev, progress }));
+          onUploadProgress?.(progress);
+        },
+        onComplete: (url) => {
+          setUploadState(prev => ({
+            ...prev,
+            uploadedUrl: url,
+            isUploading: false,
+            progress: 100,
+          }));
+          onUploadSuccess?.(url);
+        },
+        onError: (error) => {
+          setUploadState(prev => ({
+            ...prev,
+            error: error.message,
+            isUploading: false,
+          }));
+          onUploadError?.(error.message);
+        },
+        onCancelled: () => {
+          setUploadState(prev => ({
+            ...prev,
+            isUploading: false,
+            error: 'Upload was cancelled',
+          }));
+          onUploadError?.('Upload was cancelled');
+        },
+      });
+
+      onUploadComplete?.();
+      return uploadResult;
+
+    } catch (error: any) {
+      console.error('Image upload error:', error);
+      const errorMessage = error?.message || 'Upload failed';
+      
+      setUploadState(prev => ({
+        ...prev,
+        isUploading: false,
+        error: errorMessage,
+      }));
+
+      onUploadError?.(errorMessage);
+      onUploadComplete?.();
+
+      return {
+        success: false,
+        error: errorMessage,
+      };
+    }
+  }, [
+    containerName,
+    maxRetries,
+    retryDelay,
+    onUploadStart,
+    onUploadProgress,
+    onUploadSuccess,
+    onUploadError,
+    onUploadComplete,
+  ]);
+
+  const retryUpload = useCallback(async (imageResult: ImagePickerResult): Promise<UploadResult> => {
+    setUploadState(prev => ({
+      ...prev,
+      isRetrying: true,
+      retryCount: prev.retryCount + 1,
+      error: null,
+    }));
+
+    const result = await uploadImage(imageResult);
+    
+    setUploadState(prev => ({
+      ...prev,
+      isRetrying: false,
+    }));
+
+    return result;
+  }, [uploadImage]);
+
+  const cancelUpload = useCallback(() => {
+    setUploadState(prev => ({
+      ...prev,
+      isUploading: false,
+      error: 'Upload cancelled by user',
+    }));
+    onUploadError?.('Upload cancelled by user');
+  }, [onUploadError]);
+
+  return {
+    uploadState,
+    uploadImage,
+    retryUpload,
+    cancelUpload,
+    resetUploadState,
+  };
+};

package/template/src/index.ts

@@ -0,0 +1,8 @@
+// Main entry point for the src folder
+export * from './components/common';
+export * from './constants';
+export * from './contexts';
+export * from './navigation';
+export * from './screens';
+export * from './types';
+export * from './utils';

package/template/src/navigation/AuthStack.tsx

@@ -0,0 +1,67 @@
+import React from 'react';
+import { createNativeStackNavigator } from '@react-navigation/native-stack';
+import { AuthStackParamList } from '../types';
+import { LoginScreen, RegisterScreen, ForgotPasswordScreen, OTPVerifyScreen, WelcomeScreen } from '../screens/auth';
+import { theme } from '../constants';
+import { StorageService } from '../utils/storage';
+import SuccessScreen from '../screens/auth/SuccessScreen';
+
+const Stack = createNativeStackNavigator<AuthStackParamList>();
+
+export const AuthStack: React.FC = () => {
+  // Check if welcome screen has been shown before
+  const hasWelcomeScreenBeenShown = StorageService.preferences.getWelcomeScreenShown();
+  
+  // Set initial route based on whether welcome screen has been shown
+  const initialRouteName = hasWelcomeScreenBeenShown ? 'Login' : 'Welcome';
+
+  return (
+    <Stack.Navigator
+      id={undefined}
+      initialRouteName={initialRouteName}
+      screenOptions={{
+        headerShown: false,
+        headerStyle: {
+          backgroundColor: theme.colors.background,
+        },
+        headerTintColor: theme.colors.text,
+        headerTitleStyle: {
+          fontWeight: theme.typography.fontWeight.semibold,
+          fontSize: theme.typography.fontSize.lg,
+        },
+        headerBackTitle: '',
+        animation: 'fade',
+        headerShadowVisible: false,
+      }}
+    >
+      <Stack.Screen
+        name="Welcome"
+        component={WelcomeScreen}
+       
+      />
+      <Stack.Screen
+        name="Login"
+        component={LoginScreen}
+       
+      />
+      <Stack.Screen
+        name="Register"
+        component={RegisterScreen}
+       
+      />
+      <Stack.Screen
+        name="ForgotPassword"
+        component={ForgotPasswordScreen}
+       
+      />
+      <Stack.Screen
+        name="OTPVerify"
+        component={OTPVerifyScreen}
+      />
+      <Stack.Screen
+        name="Success"
+        component={SuccessScreen}
+      />
+    </Stack.Navigator>
+  );
+};