create-gufran-expo-app 2.0.0 → 2.0.1

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

@@ -0,0 +1,284 @@
+import React from 'react';
+import {
+  View,
+  Text,
+  StyleSheet,
+  Modal,
+  TouchableOpacity,
+  ActivityIndicator,
+} from 'react-native';
+import { moderateScale, verticalScale } from '../../utils/scaling';
+import { theme } from '../../constants';
+import { Fonts } from '../../constants/Fonts';
+
+interface UploadProgressModalProps {
+  visible: boolean;
+  progress: number;
+  isUploading: boolean;
+  isRetrying: boolean;
+  retryCount: number;
+  error: string | null;
+  onRetry?: () => void;
+  onCancel?: () => void;
+  onDismiss?: () => void;
+}
+
+export const UploadProgressModal: React.FC<UploadProgressModalProps> = ({
+  visible,
+  progress,
+  isUploading,
+  isRetrying,
+  retryCount,
+  error,
+  onRetry,
+  onCancel,
+  onDismiss,
+}) => {
+  const getStatusText = () => {
+    if (error) {
+      return 'Upload Failed';
+    }
+    if (isRetrying) {
+      return `Retrying... (${retryCount})`;
+    }
+    if (isUploading) {
+      return 'Uploading...';
+    }
+    return 'Upload Complete';
+  };
+
+  const getStatusColor = () => {
+    if (error) {
+      return theme.colors.error;
+    }
+    if (isRetrying) {
+      return theme.colors.warning;
+    }
+    if (isUploading) {
+      return theme.colors.primary;
+    }
+    return theme.colors.success;
+  };
+
+  return (
+    <Modal
+      visible={visible}
+      transparent
+      animationType="fade"
+      onRequestClose={onDismiss}
+    >
+      <View style={styles.overlay}>
+        <View style={styles.container}>
+          <View style={styles.header}>
+            <Text style={styles.title}>Image Upload</Text>
+            <TouchableOpacity onPress={onDismiss} style={styles.closeButton}>
+              <Text style={styles.closeButtonText}>×</Text>
+            </TouchableOpacity>
+          </View>
+
+          <View style={styles.content}>
+            {/* Status Icon */}
+            <View style={styles.statusContainer}>
+              {isUploading || isRetrying ? (
+                <ActivityIndicator 
+                  size="large" 
+                  color={getStatusColor()} 
+                />
+              ) : error ? (
+                <Text style={styles.errorIcon}>⚠️</Text>
+              ) : (
+                <Text style={styles.successIcon}>✓</Text>
+              )}
+            </View>
+
+            {/* Status Text */}
+            <Text style={[styles.statusText, { color: getStatusColor() }]}>
+              {getStatusText()}
+            </Text>
+
+            {/* Progress Bar */}
+            {(isUploading || isRetrying) && (
+              <View style={styles.progressContainer}>
+                <View style={styles.progressBar}>
+                  <View 
+                    style={[
+                      styles.progressFill, 
+                      { width: `${progress}%` }
+                    ]} 
+                  />
+                </View>
+                <Text style={styles.progressText}>{Math.round(progress)}%</Text>
+              </View>
+            )}
+
+            {/* Error Message */}
+            {error && (
+              <View style={styles.errorContainer}>
+                <Text style={styles.errorText}>{error}</Text>
+              </View>
+            )}
+
+            {/* Action Buttons */}
+            <View style={styles.buttonContainer}>
+              {error && onRetry && (
+                <TouchableOpacity
+                  style={[styles.button, styles.retryButton]}
+                  onPress={onRetry}
+                >
+                  <Text style={styles.retryButtonText}>Retry</Text>
+                </TouchableOpacity>
+              )}
+              
+              {(isUploading || isRetrying) && onCancel && (
+                <TouchableOpacity
+                  style={[styles.button, styles.cancelButton]}
+                  onPress={onCancel}
+                >
+                  <Text style={styles.cancelButtonText}>Cancel</Text>
+                </TouchableOpacity>
+              )}
+              
+              {!isUploading && !isRetrying && (
+                <TouchableOpacity
+                  style={[styles.button, styles.doneButton]}
+                  onPress={onDismiss}
+                >
+                  <Text style={styles.doneButtonText}>Done</Text>
+                </TouchableOpacity>
+              )}
+            </View>
+          </View>
+        </View>
+      </View>
+    </Modal>
+  );
+};
+
+const styles = StyleSheet.create({
+  overlay: {
+    flex: 1,
+    backgroundColor: 'rgba(0, 0, 0, 0.5)',
+    justifyContent: 'center',
+    alignItems: 'center',
+    padding: theme.spacing.lg,
+  },
+  container: {
+    backgroundColor: theme.colors.background,
+    borderRadius: moderateScale(16),
+    width: '100%',
+    maxWidth: moderateScale(400),
+    maxHeight: '80%',
+  },
+  header: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    padding: theme.spacing.lg,
+    borderBottomWidth: 1,
+    borderBottomColor: theme.colors.border,
+  },
+  title: {
+    fontFamily: Fonts.outfitSemiBold,
+    fontSize: moderateScale(18),
+    color: theme.colors.text,
+  },
+  closeButton: {
+    padding: theme.spacing.xs,
+  },
+  closeButtonText: {
+    fontSize: moderateScale(24),
+    color: theme.colors.text,
+    fontWeight: 'bold',
+  },
+  content: {
+    padding: theme.spacing.lg,
+    alignItems: 'center',
+  },
+  statusContainer: {
+    marginBottom: theme.spacing.lg,
+  },
+  errorIcon: {
+    fontSize: moderateScale(48),
+    color: theme.colors.error,
+  },
+  successIcon: {
+    fontSize: moderateScale(48),
+    color: theme.colors.success,
+  },
+  statusText: {
+    fontFamily: Fonts.outfitMedium,
+    fontSize: moderateScale(16),
+    marginBottom: theme.spacing.lg,
+    textAlign: 'center',
+  },
+  progressContainer: {
+    width: '100%',
+    marginBottom: theme.spacing.lg,
+  },
+  progressBar: {
+    height: moderateScale(8),
+    backgroundColor: theme.colors.border,
+    borderRadius: moderateScale(4),
+    overflow: 'hidden',
+    marginBottom: theme.spacing.sm,
+  },
+  progressFill: {
+    height: '100%',
+    backgroundColor: theme.colors.white,
+    borderRadius: moderateScale(4),
+  },
+  progressText: {
+    fontFamily: Fonts.outfitRegular,
+    fontSize: moderateScale(14),
+    color: theme.colors.textSecondary,
+    textAlign: 'center',
+  },
+  errorContainer: {
+    backgroundColor: "red",
+    padding: theme.spacing.md,
+    borderRadius: moderateScale(8),
+    marginBottom: theme.spacing.lg,
+    width: '100%',
+  },
+  errorText: {
+    fontFamily: Fonts.outfitRegular,
+    fontSize: moderateScale(14),
+    color: theme.colors.error,
+    textAlign: 'center',
+  },
+  buttonContainer: {
+    flexDirection: 'row',
+    gap: theme.spacing.md,
+    width: '100%',
+  },
+  button: {
+    flex: 1,
+    paddingVertical: theme.spacing.md,
+    borderRadius: moderateScale(8),
+    alignItems: 'center',
+  },
+  retryButton: {
+    backgroundColor: theme.colors.primary,
+  },
+  retryButtonText: {
+    fontFamily: Fonts.outfitMedium,
+    fontSize: moderateScale(16),
+    color: theme.colors.background,
+  },
+  cancelButton: {
+    backgroundColor: theme.colors.border,
+  },
+  cancelButtonText: {
+    fontFamily: Fonts.outfitMedium,
+    fontSize: moderateScale(16),
+    color: theme.colors.text,
+  },
+  doneButton: {
+    backgroundColor: theme.colors.success,
+  },
+  doneButtonText: {
+    fontFamily: Fonts.outfitMedium,
+    fontSize: moderateScale(16),
+    color: theme.colors.background,
+  },
+});

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

@@ -0,0 +1,39 @@
+import React from 'react';
+import { StatusBar, StyleSheet, ViewStyle} from 'react-native';
+import { SafeAreaView, SafeAreaViewProps } from 'react-native-safe-area-context';
+
+interface WrapperContainerProps extends SafeAreaViewProps {
+    children: React.ReactNode;
+    style?: ViewStyle;
+}
+
+const WrapperContainer: React.FC<WrapperContainerProps> = ({
+    children,
+    style,
+    ...safeAreaProps
+}) => {
+ 
+
+    return (
+        <SafeAreaView
+            style={[
+                styles.container, 
+               
+            ]}
+            {...safeAreaProps}
+        >
+            <StatusBar 
+                barStyle={'light-content'} 
+            />
+            {children}
+        </SafeAreaView>
+    );
+};
+
+const styles = StyleSheet.create({
+    container: {
+        flex: 1,
+    }
+});
+
+export default React.memo(WrapperContainer);

package/template/src/components/common/index.ts

@@ -0,0 +1,19 @@
+export * from './Button';
+export * from './LoadingSpinner';
+export * from './SafeAreaWrapper';
+export * from './Icon';
+export * from './IconButton';
+export * from './TextInput';
+export * from './WrapperContainer';
+export * from './AppLoader';
+export * from './ToastManager';
+export * from './ImagePicker';
+export * from './UploadProgressModal';
+export * from './OTPInput';
+export * from './ClubCard';
+export * from './TeamCard';
+export * from './SlowInternet';
+export * from './SetReminderModal';
+export * from './AddMemberModal';
+export * from './ReminderCalendar';
+export * from './ReminderCardItem';

package/template/src/constants/Constants.tsx

@@ -0,0 +1,7 @@
+const Constants = {
+  SENTRY_SESSION_ID:
+    "https://7c1cda40fa01dbc9337d082f00df3f0b@o971472.ingest.us.sentry.io/4510125751664640",
+  DATE_FORMAT: "YYYY-MM-DD",
+};
+
+export default Constants;

package/template/src/constants/Fonts.tsx

@@ -0,0 +1,30 @@
+import { Dimensions, PixelRatio } from "react-native";
+const { width: SCREEN_WIDTH, height: SCREEN_HEIGHT } = Dimensions.get("window");
+const scale = Math.min(SCREEN_WIDTH, SCREEN_HEIGHT) / 420;
+
+export const Fonts = {
+  outfitBold: "Outfit-Bold",
+  outfitRegular: "Outfit-Regular",
+  outfitMedium: "Outfit-Medium",
+  outfitSemiBold: "Outfit-SemiBold",
+  outfitLight: "Outfit-Light",
+} as const;
+
+export type FontFamily = (typeof Fonts)[keyof typeof Fonts];
+
+export const normalize = (size: number) => {
+  const newSize = size * scale;
+  return Math.round(PixelRatio.roundToNearestPixel(newSize));
+};
+
+export const applyTypography = (
+  fontFamily: FontFamily,
+  fontSize: number,
+  color: string
+) => {
+  return {
+    fontFamily: fontFamily,
+    fontSize: normalize(fontSize),
+    color: color,
+  };
+};

package/template/src/constants/index.ts

@@ -0,0 +1,45 @@
+// Theme constants
+export * from './theme';
+
+// String constants
+export { Strings } from './strings';
+
+// App constants
+export const APP_CONFIG = {
+  name: 'RN Club Yakka',
+  version: '1.0.0',
+  environment: __DEV__ ? 'development' : 'production',
+} as const;
+
+// API constants
+export const API_CONFIG = {
+  baseUrl: __DEV__ 
+    ? 'https://api-dev.example.com' 
+    : 'https://api.example.com',
+  timeout: 10000,
+  retryAttempts: 3,
+} as const;
+
+// Screen names
+export const SCREEN_NAMES = {
+  HOME: 'Home',
+  PROFILE: 'Profile',
+  SETTINGS: 'Settings',
+  DETAILS: 'Details',
+} as const;
+
+// Storage keys
+export const STORAGE_KEYS = {
+  USER_TOKEN: '@user_token',
+  USER_DATA: '@user_data',
+  THEME_PREFERENCE: '@theme_preference',
+  LANGUAGE_PREFERENCE: '@language_preference',
+} as const;
+
+// Validation constants
+export const VALIDATION = {
+  MIN_PASSWORD_LENGTH: 8,
+  MAX_EMAIL_LENGTH: 254,
+  MIN_NAME_LENGTH: 2,
+  MAX_NAME_LENGTH: 50,
+} as const;

package/template/src/constants/strings.ts

@@ -0,0 +1,211 @@
+/**
+ * Centralized String Management Class
+ * All app strings are organized here for easy maintenance and localization
+ */
+export class Strings {
+  // MARK: - Common Strings
+  static readonly COMMON = {
+    // Buttons
+    LOGIN: 'Login',
+    SIGN_UP: 'Sign Up',
+    SIGN_IN: 'Sign In',
+    CREATE_ACCOUNT: 'Create Account',
+    FORGOT_PASSWORD: 'Forgot Password?',
+    SEND_RESET_LINK: 'Send Reset Link',
+    SUBMIT: 'Submit',
+    VERIFY: 'Verify',
+    BACK_TO_LOGIN: 'Back to Login',
+    TRY_DIFFERENT_EMAIL: 'Try Different Email',
+    VIEW_PROFILE: 'View Profile',
+    SETTINGS: 'Settings',
+    VIEW_DETAILS: 'View Details',
+    OTP: 'OTP',
+    // Form Labels
+    EMAIL: 'Email',
+    PASSWORD: 'Password',
+    NAME: 'Name',
+    CONFIRM_PASSWORD: 'Confirm Password',
+    EMAIL_ADDRESS: 'Email Address',
+    PHONE: 'Phone',
+    // Placeholders
+    EMAIL_PLACEHOLDER: 'Email',
+    PASSWORD_PLACEHOLDER: '••••••••',
+    NAME_PLACEHOLDER: 'Name',
+    PHONE_PLACEHOLDER: 'Phone',
+    EMAIL_INPUT_PLACEHOLDER: 'Enter your email',
+    PASSWORD_CREATE_PLACEHOLDER: 'Create a password',
+    PASSWORD_CONFIRM_PLACEHOLDER: 'Confirm your password',
+    PHONE_INPUT_PLACEHOLDER: 'Enter your phone',
+    // Navigation
+    HOME: 'Home',
+    PROFILE: 'Profile',
+    DETAILS: 'Details',
+
+    // Status
+    LOADING: 'Loading...',
+    SUCCESS: 'Success',
+    ERROR: 'Error',
+    FAILED: 'Failed',
+  };
+
+  // MARK: - Authentication Strings
+  static readonly AUTH = {
+    // Titles
+    LOGIN_TITLE: 'Log In',
+    REGISTER_TITLE: 'Create Account',
+    SIGN_UP_TITLE: 'Sign Up',
+    FORGOT_PASSWORD_TITLE: 'Forgot Password',
+    TERMS_AND_CONDITIONS: 'Terms & Conditions',
+    FORGOT_PASSWORD_SUBTITLE: 'Please enter your email address, you will receive a link to create a new password via email.',
+
+    PRIVACY_POLICY: 'Privacy Policy',
+    EMAIL_VERIFY_TITLE: 'Verify Email',
+    EMAIL_VERIFY_SUBTITLE: "4 digit code has been sent to your email id.",
+    // Subtitles
+    REGISTER_SUBTITLE: 'Join our community today',
+    OTP_VERIFY_SUBTITLE: 'Enter the OTP sent to your email',
+    // Success Messages
+    ACCOUNT_CREATED_SUCCESS: 'Account created successfully!',
+    CHECK_EMAIL_TITLE: 'Check your email',
+    CHECK_EMAIL_MESSAGE: "We've sent a password reset link to",
+
+    // Error Messages
+    LOGIN_FAILED: 'Login Failed',
+    REGISTRATION_FAILED: 'Registration Failed',
+    INVALID_CREDENTIALS: 'Invalid email or password',
+    UNABLE_TO_CREATE_ACCOUNT: 'Unable to create account',
+    LOGIN_ERROR: 'An error occurred during login',
+    REGISTRATION_ERROR: 'An error occurred during registration',
+    RESET_EMAIL_ERROR: 'Failed to send reset email. Please try again.',
+    OTP_VERIFY_ERROR: 'Failed to verify OTP. Please try again.',
+    OTP_VERIFIED_SUCCESS: 'OTP verified successfully!',
+    OTP_SEND_SUCCESS: 'OTP sent successfully!',
+    OTP_VERIFIED_FAILED: 'Failed to verify OTP. Please try again.',
+    // Add Member
+    ADD_MEMBER_TITLE: 'Add Member',
+    ADD_MEMBER_SUBTITLE: 'Add Member',
+    JOIN_CLUB: 'Join Club',
+    ADD_MEMBER_SECTION_TITLE: 'ADD MEMBER',
+    MY_CLUBS_SECTION_TITLE: 'My CLUBS',
+    SKIP: 'Skip',
+    NEXT: 'Next',
+    SAVE: 'Save',
+    UPLOAD_MEMBER_PHOTO: 'Upload Member Photo',
+    MEMBER_NAME: 'Member Name',
+    MEMBER_NAME_PLACEHOLDER: 'Member Name',
+    DATE_OF_BIRTH: 'Date of Birth',
+    DATE_OF_BIRTH_PLACEHOLDER: 'DD/MM/YYYY',
+    TYPE_OF_RELATIONSHIP: 'Type of Relationship',
+    TYPE_OF_RELATIONSHIP_PLACEHOLDER: 'Enter',
+    // Validation Messages
+    EMAIL_REQUIRED: 'Email is required',
+    PASSWORD_REQUIRED: 'Password is required',
+    NAME_REQUIRED: 'Name is required',
+    CONFIRM_PASSWORD_REQUIRED: 'Please confirm your password',
+    VALID_EMAIL_REQUIRED: 'Please enter a valid email',
+    VALID_EMAIL_ADDRESS_REQUIRED: 'Please enter a valid email address',
+    PASSWORD_MIN_LENGTH: 'Password must be at least 8 characters',
+    PASSWORDS_DO_NOT_MATCH: 'Passwords do not match',
+    VALID_PHONE_NUMBER_REQUIRED: 'Please enter a valid phone number',
+    PHONE_NUMBER_REQUIRED: 'Phone number is required',
+    I_AGREE_TO_THE_TERMS_AND_CONDITIONS: 'I agree to the Terms and Conditions',
+    // Footer Messages
+    ALREADY_HAVE_ACCOUNT: 'Already have an account?',
+    REMEMBER_PASSWORD: 'Remember your password?',
+  };
+
+  // MARK: - Home Screen Strings
+  static readonly HOME = {
+    WELCOME_TITLE: 'Welcome to Club Yakka',
+    WELCOME_SUBTITLE: 'Your React Native Navigation App',
+    QUICK_ACTIONS_TITLE: 'Quick Actions',
+    FEATURES_TITLE: 'Features',
+
+    // Features List
+    FEATURE_TYPESCRIPT: '✅ TypeScript Support',
+    FEATURE_NAVIGATION: '✅ React Navigation',
+    FEATURE_COMPONENTS: '✅ Common Components',
+    FEATURE_THEME: '✅ Theme System',
+    FEATURE_UTILITIES: '✅ Utility Functions',
+  };
+
+  // MARK: - Profile Screen Strings
+  static readonly PROFILE = {
+    TITLE: 'Profile',
+    EDIT_PROFILE: 'Edit Profile',
+    LOGOUT: 'Logout',
+    ACCOUNT_SETTINGS: 'Account Settings',
+    PERSONAL_INFO: 'Personal Information',
+    SECURITY: 'Security',
+    NOTIFICATIONS: 'Notifications',
+    PRIVACY: 'Privacy',
+  };
+
+  // MARK: - Settings Screen Strings
+  static readonly SETTINGS = {
+    TITLE: 'Settings',
+    GENERAL: 'General',
+    APPEARANCE: 'Appearance',
+    LANGUAGE: 'Language',
+    ABOUT: 'About',
+    VERSION: 'Version',
+    TERMS_OF_SERVICE: 'Terms of Service',
+    PRIVACY_POLICY: 'Privacy Policy',
+    CONTACT_SUPPORT: 'Contact Support',
+  };
+
+  // MARK: - Details Screen Strings
+  static readonly DETAILS = {
+    TITLE: 'Details',
+    DESCRIPTION: 'Description',
+    MORE_INFO: 'More Information',
+    RELATED_ITEMS: 'Related Items',
+    SHARE: 'Share',
+    BOOKMARK: 'Bookmark',
+  };
+
+  // MARK: - Alert Messages
+  static readonly ALERTS = {
+    CONFIRM_LOGOUT: 'Are you sure you want to logout?',
+    CONFIRM_DELETE: 'Are you sure you want to delete this item?',
+    NETWORK_ERROR: 'Network error. Please check your connection.',
+    SERVER_ERROR: 'Server error. Please try again later.',
+    UNKNOWN_ERROR: 'An unknown error occurred.',
+  };
+
+  // MARK: - Accessibility Strings
+  static readonly ACCESSIBILITY = {
+    LOGIN_BUTTON: 'Login button',
+    SIGNUP_BUTTON: 'Sign up button',
+    EMAIL_INPUT: 'Email input field',
+    PASSWORD_INPUT: 'Password input field',
+    FORGOT_PASSWORD_LINK: 'Forgot password link',
+    MENU_BUTTON: 'Menu button',
+    BACK_BUTTON: 'Back button',
+    CLOSE_BUTTON: 'Close button',
+  };
+  static readonly Teams = {
+    TEAMS: 'Teams',
+    JOIN_TEAM_SUBTITLE: 'Join Team',
+    PENDING_REQUEST: 'Pending Request',
+    MY_TEAMS_SECTION_TITLE: 'MY TEAMS',
+    SEARCH_AND_JOIN_TEAM:'Search and join team to explore the events, matches, and activities and more.',
+    UNIQUE_CODE_AND_CLUB_NAME:'Unique code and club name',
+    SEARCH_BY_TEAM_NAME:'Search by team name'
+  };
+  static readonly Announcements = {
+    ANNOUNCEMENTS: 'Announcements'
+  };
+  static readonly VolunteerOpportunities = {
+    VOLUNTEER_OPPORTUNITIES: 'Volunteer Opportunities',
+    TOTAL_HOURS: "Total Hours",
+    HOURS: " Hours",
+    NEXT_SHIFT: "Next Shift",
+    THIS_MONTH: "This Month",
+    VIEW_MORE_DETAILS: "View Details",
+  };
+
+}
+
+// Default export
+export default Strings;